Video 13_MDrivenEducationVideo: https://youtu.be/GTn8ymRnw-g
Chapter 13: Add a Simple Data-Dependent HTML or SVG Graphic to Your App
- This is good for generating simple diagrams without the need for 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 - 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
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 that is 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 - 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:
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.
- 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 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.