View source for Training:The 1000 steps program to MDriven Chapter 13

This is '''Chapter 13'''. Are you looking for the beginning? [[The 1000 steps program to MDriven Chapter 1|Find it here: Chapter 1]], or [[The 1000 steps program to MDriven Chapter 12|link to Chapter 12 (the previous chapter)]]

== Video 13: Add a Simple Graph to Your App ==
<html>

<p class="video-warn">
  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.
</p>

<div class="video">
  <div class="video__wrapper">
    <iframe src="https://www.youtube.com/embed/GTn8ymRnw-g?si=QX8VJjOYFPM6fk62" title="YouTube video player" frameborder="0" allowfullscreen></iframe>
  </div>
  <div class="video__navigation">
 <span data-video="GTn8ymRnw-g" data-start="00" tabindex="0"> <strong> Steps 388 - 406 </strong> </span>
    <span class="navigation-item" data-video="GTn8ymRnw-g" data-start="00" tabindex="0"> Introduction </span>
    <span class="navigation-item" data-video="GTn8ymRnw-g" data-start="60" tabindex="0"> CarsAndBrands ViewModel </span>
    <span class="navigation-item" data-video="GTn8ymRnw-g" data-start="218" tabindex="0"> Adding ThisIsHtml column </span>
    <span class="navigation-item" data-video="GTn8ymRnw-g" data-start="681" tabindex="0"> Importing Html & CSS </span>
    <span class="navigation-item" data-video="GTn8ymRnw-g" data-start="2080" tabindex="0"> CarsAndBrandsSVG Viewmodel </span>
    <span class="navigation-item" data-video="GTn8ymRnw-g" data-start="2138" tabindex="0"> Inserting an SVG vertical bar chart </span>
  </div>
</div>

</html>

== 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 <code>CarsAndBrands</code>. Select class <code>Car</code> and leave it as not rooted.

390. Under Actions leading here, select and add <span class="col-turquoise">'''Global Action for show'''</span> 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 <u>Delete column</u>. Save.
* Test your webapplication.

392. Add a static text column.

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

393. Search for and click on <span class="col-blue-dark">'''Tagged values'''</span> in the top menu.

* Select <code><span class="col-blue-dark">'''Refresh From Wiki'''</span></code>.
* In the options under '''Add from Value Store''', set the tagged value <code>DataIsHtml=true</code> on the column by clicking '''Add This'''.
* Set the value on the tag to '''True'''.

394. Try the expression <code>'''<nowiki/>'<nowiki><div style="background:yellow;">hello</div></nowiki>''''</code> in the <code>ThisIsHtml</code> 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 <code>ThisIsHtml</code>, write: 
 Car.allinstances->collect(c|
 'div style="background:yellow;">'+c.RegistrationNumber+'<nowiki></div></nowiki>'
 )->asSeparatedList( <nowiki>''</nowiki> )
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 [[1000 Steps Program: Chapter 13 - Code Snippets|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: <code>Car.allInstances->groupby(c|c.BrandOfCar)</code>
* Click Ok. You may get this error message: <span class="col-turquoise">The column referred from AllCar has type Car but expected type was BrandOfCar.BrandOfCar+List Collection (Car)</span>
* To solve it, scroll down to '''Car : Car''' and change its class from '''<span class="col-black">Car</span>''' to '''<span class="col-black">Derive type from referring column</span>'''.
* Click on the column '''BrandOfCar''' and change the expression to: <code>self.BrandOfCar.Name</code>.
* Go to the column for '''RegistrationNumber''' and change the expression to: <code>self.List->size</code>.
* Change the name for '''RegistrationNumber''' to <code>NumberOfCarsOfBrand</code>. 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 <code>NumberOfCarsOfBrand</code> and write:
 (100*self.List->size/Car.allinstances->size).Round(0).asstring+'%'
Save and check your app.

Go back to <code>AllCar</code> 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 <code>self.Name</code>. 

Go to '''NumberOfCarsOfBrand''' and change the expression to <code>self.Part2</code>. 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 [[1000 Steps Program: Chapter 13 - Code Snippets|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 <code>ThisIsHtml</code> 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 <code>'''CarsAndBrandsSVG'''</code>.

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 [[1000 Steps Program: Chapter 13 - Code Snippets|here]].

'''NOTE:''' Familiarize yourself with the <u>Chrome Debugger</u> 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|none|thumb]]

'''Next Chapter:'''

[[The_1000_steps_program_to_MDriven_Chapter_14]]
[[Category:1000 Steps Program]]