No Results
HTML Example 1B: Custom formatting
Article Contents

Here you will do the following:

  • Transform data elements and present them in a new format
  • See how Angular provides for HTML attribute customization

In this exercise, you are going to create a simple summary that lists each state and then shows the total number of parks in that state. It uses custom formatting not provided in any of edgeCore’s stock Visualizations. It also creates labels (the state names) based on data values, rather than the previous examples where labels are typically tied to columns (attributes). This sort of presentation can be accomplished with a basic knowledge of Angular and how data can be processed in an HTML Template Visualization.

Group and Sort the Data

You will create SQL Transform that will group and sort parks by state and count how many parks there are in each state. This is the data that we will feed into the visualization.

Perform the following steps to create a Transform from the previously created National Park Summary CSV Feed:

  1. On the National Parks page, click Options > View Pipeline to view the pipeline for this page.
  2. In the National Park Summary CSV Feed box, click the gear icon button, select New (+), and then select New Transform.
  3. Select SQL Transform.
    A new page is displayed.
  4. In Configure, do the following:
    a) In Transform Name, provide a name (for example, Group By State).
    b) Click Next.
  5. In Query, delete * and paste the following in its place:
    COUNT(Name) As “Number of Parks”, State
    – In lines 9 and 10, add:
    GROUP BY State
    ORDER BY State
    – The query should look like this:
    select COUNT(Name) As “Number of Parks”, State from {src.National Park Summary}
    GROUP BY State
    ORDER BY State
  6. Click Next.
    No changes are needed in Attribute Indexing or Upstream Variables, so click Next to go to Data Preview. Here you can observe the data preview of the Group By State Transform.
  7. Click Save and Close.
    The created transform is displayed in the pipeline.

 

Create an HTML Template Visualization

You will create an HTML Template Visualization that will list each state and show the total number of parks in that state with custom formatting.

Perform the following steps to create an HTML Template Visualization:

  1. Off of the Group By State SQL Transform, create an HTML Template visualization.
  2. In the Configure tab, in Name, provide a name (for example, Number By State).
  3. In the Renderer tab, do the following:
    a) In HTML, enter the following code:

    <div *ngFor="let row of rows">
<div class="itemOuterDiv">
           <div class="itemLabel">{{row.State}}</div>
      <div class="itemValue">{{row.Number_of_Parks}}</div>
     </div>
</div>

    b) In LESS/CSS, enter the following:

    .itemOuterDiv {
    width: 100%;
    height: 100%;
    padding: 10px;
}
.itemLabel {
    font-size: 1.2em;
    color: #999;
    height: 20px;
    vertical-align: bottom;
    border-bottom: 1px solid #ddd;
    padding-left: 3px;
}
.itemValue {
    min-height: 30px;
    vertical-align: top;
    margin: 0 0 20px 3px;
    overflow-wrap: break-word;
}
overflow:scroll;
  4. Go to Preview, where you can observe the HTML component showing a label (State) and a value (Number_of_Parks).
  5. Click Save and Close.
  6. Go to the National Parks page and add the HTML visualization you have just created. Place it wherever you see fit and save the page.

 

Exercise Summary

You have created a query to transform an existing dataset into a new one. Then you created an HTML Template Visualization that used a special call to Angular to show two attributes in a presentation with custom formatting.

Terms | Privacy
×