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

365 Verify that your model is without errors - red dots - if you have any make sure you resolve them before moving on

366 Create a new viewmodel, name it CarsAndBrands - class Car, not rooted

367 Add a global action for show for this viewmodel

368 Add a grid to show Car allinstances, showing the registration number and the brand name

369 Add a static text column - named it ThisIsHtml

370 Set the tagged value DataIsHtml=true on the column

371 try the expression '<div style="background:yellow;">hello</div>' in the ThisIsHtml column, verify that you get a text with yellow background

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

373 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

374 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.

375 Use the GroupBy operator to group all cars by BrandOfCar

376 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+'%')

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

378 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

379 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

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

381 Add a global action for show for this viewmodel

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

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

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

File:ModelAfterChapter13.zip