The 1000 steps program to MDriven Chapter 13

This is Chapter 13. Are you looking for the beginning? Find it here: Chapter 1, or link to Chapter 12 (the previous chapter)

Video 13: Add a Simple Graph to Your App

To make your experience smooth, we set the main tags mentioned in the video to the right bar menu of this mini-player. Choose an interesting subtitle on the list and immediately get to the exact theme navigation item place in the video. Now you can pick any topic to be instructed on without watching the whole video.

Adding Graphs Introduction CarsAndBrands ViewModel Adding ThisIsHtml column Importing Html & CSS CarsAndBrandsSVG Viewmodel Inserting an SVG vertical bar chart

Chapter 13: Add a Simple Data-Dependent HTML or SVG Graphic to Your App

  • This is good for generating simple diagrams without needing more advanced components (which is easy - but not as easy as this).

388. Verify that your model is without errors (red dots). If you have any, make sure you resolve them before moving on.

389. Create a new ViewModel and name it CarsAndBrands - select class "Car," not rooted.

390. Add a global action to show for this ViewModel.

391. Add a grid to show Car.allInstances, showing the registration number and the brand name.

392. Add a static text column. Name it ThisIsHtml.

393. Set the tagged value DataIsHtml=true on the column.

394. Try the expression '<div style="background:yellow;">hello</div>' in the ThisIsHtml column. Verify that you get a text with a yellow background.

395. Use the AsSeperatedList expression to build a large string that displays all the cars.

396. Find the page: https://www.coding-dude.com/wp/html5/bar-chart-html/ and use the HTML and CSS found there.

  • Note that the CSS is in LESS format and must be translated for the browser to understand it.

397. Do a simple test with the fixed data in the example and verify that you make that render on the page.

  • Note that to MDriven-expressions, the HTML is just a string constant - you need single hyphens/quotes to declare this string.
  • Note that if you want to use a hyphen inside a string constant in OCL, you can use a backslash in front of the single-quote, or in HTML/CSS, you can also use a double-quote to avoid the need for escape-sequencing with a backslash.

398. Use the GroupBy operator to group all cars by BrandOfCar.

399. Collect over the result and create a string of the correct percentage value:

Car.allInstances->groupby(c|c.BrandOfCar)->collect(tuple|tuple.BrandOfCar.Name,(100*tuple.List->size/Car.allinstances->size).Round(0).asstring+'%') 

Now, do a lot of string massage to inject the prepared HTML snippets instead of the hard-coded example values. (Follow the video)

400. Once you have it working - showing your data in the diagram - verify by opening a new window and creating a new car with a new brand.

  • Ensure you see the new Car showing up in the data in your diagram.

401. Clean up the view so you only leave the diagram and don't have the helper columns. Also, hide the left-hand actions from this page.

402. Make a copy of the CarsAndBrands view and name the copy CarsAndBrandsSVG.

403. Add a global action to show for this ViewModel.

404. Find the page: https://codepen.io/mdgrover/pen/eZENxO that shows an example of an SVG vertical bar chart.

405. Copy the CSS and HTML and replace your current values. Verify that you can get the static example to show on your page.

406. Now string massage this example to get it to show your data.

NOTE: Familiarize yourself with the Chrome Debugger to fix your SVG-vertical Bar Chart. The Chrome Debugger will allow you to look at what the browser sees and determine whether your values are coming up the way they should.

File:ModelAfterChapter13.zip

Next Chapter:

The_1000_steps_program_to_MDriven_Chapter_14

This page was edited 30 days ago on 02/28/2024. What links here