Training: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.

Steps 388 - 406 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. Name it CarsAndBrands. Select class Car and leave it as not rooted.

390. Under Actions leading here, select and add Global Action for show for this ViewModel.

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

• Add some columns. Click on asString : self.asString, then Add column, choose BrandOfCar, and select BrandOfCar_Name : self.BrandOfCar.Name.
• Click on asString : self.asString, then Add column, choose RegistrationNumber : self.RegistrationNumber.
• Drop asString : self.asString – right click on the column and select Delete column. Save.
• Test your webapplication.

392. Add a static text column.

• Click on AllCar : Car.allinstances, then Add column, select Add generic column.
• Name it ThisIsHtml.
• Drag the widget onto the grid and resize the “AllCar” widget (as shown in the video).

393. Search for and click on Tagged values in the top menu.

• Select Refresh From Wiki.
• In the options under Add from Value Store, set the tagged value DataIsHtml=true on the column by clicking Add This.
• Set the value on the tag to True.

394. Try the expression '<div style="background:yellow;">hello</div>' in the ThisIsHtml column. Save. Verify you get a text (Hello) with a yellow background in your app.

395. Use the AsSeperatedList expression to build a large string that displays all the cars. In the Expression box for ThisIsHtml, write:

Car.allinstances->collect(c|
'div style="background:yellow;">'+c.RegistrationNumber+'</div>'
)->asSeparatedList( '' )

Save and check your app. You should see all the cars highlighted in yellow.

396. Make a diagram in HTML. Find the page: https://www.coding-dude.com/wp/html5/bar-chart-html/ and look for the Bar Chart. Use the HTML and CSS found there.

• Note: the CSS is in LESS format and must be translated for the browser to understand it.
• Copy the CSS (in LESS format) to Notepad.
• Convert the CSS using this site: https://www.cssportal.com/less-to-css/
• Follow along with the video and check your results with the Code Snippet found here.
• Save and test your app.

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.

• In the Expression box for the column AllCar : Car.allinstances, write: Car.allInstances->groupby(c|c.BrandOfCar)
• Click Ok. You may get this error message: The column referred from AllCar has type Car but expected type was BrandOfCar.BrandOfCar+List Collection (Car)
• To solve it, scroll down to Car : Car and change its class from Car to Derive type from referring column.
• Click on the column BrandOfCar and change the expression to: self.BrandOfCar.Name.
• Go to the column for RegistrationNumber and change the expression to: self.List->size.
• Change the name for RegistrationNumber to NumberOfCarsOfBrand. Save and note the changes in your app.

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

Go to the expression box for NumberOfCarsOfBrand and write:

(100*self.List->size/Car.allinstances->size).Round(0).asstring+'%'

Save and check your app.

Go back to AllCar and write this expression:

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

Note the errors.

In the expression box for BrandOfCar_Name, change the expression to self.Name.

Go to NumberOfCarsOfBrand and change the expression to self.Part2. Save.

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

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.

• Delete column AllCar
• Scroll down and delete Car
• Shift and resize the ThisIsHtml widget.
• Delete <Name> in the Presentation box. Save.
• Also, hide the left-hand actions. Click on CarsAndBrands and locate and tick the box next to HideSidebar. Save and test the web.

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

403. Add a global action to show for this ViewModel. Save and check your app.

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. Save. 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, following along with the video. Refer to the Code Snippet found here.

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