Training:The 1000 steps program to MDriven Chapter 13

Chapter 13

Are you looking for the start you find it here Chapter 1

Add simple data dependent html or svg graphic to your app.

Good for generating simple diagrams without the need of more advanced components (also easy - but not as easy as this)

Video https://youtu.be/GTn8ymRnw-g

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, name it CarsAndBrands - class Car, not rooted

390 Add a global action for 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 - named 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 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 here. Note that the css in in LESS-format 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 so that you need single hyphens/quote to declare this string. Note that if you want to use hypen 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 double-quote to avoid the need for escape-sequeincing with 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+'%')

399 Now do a lot of string massage to inject prepared html-snippets instead of the hard-coded example values

400 Once you have it working - showing your data in the diagram - verify by opening a new window and create a new car with a new brand - make sure 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 dont have the helper columns, also hide the left hand actions from this page

402 Make a copy of the CarsAndBrands view, name the copy CarsAndBrandsSVG

403 Add a global action for show for this viewmodel

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

405 Copy the CSS and html and replace your current values, verify you can get the static example to show in your page

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

File:ModelAfterChapter13.zip