Templates HTML tags

Templates are just another HTML page that is extended with special HTML tags and attributes.

What are the special tags and attributes?

Numsolar introduces 3 new HTML attributes:
and 3 new HTML tags:

< ...if='' >

if="resource.access.url[[resource.comparison.operator]resource.access.url]"
  • Can be used on any HTML tag
  • Conditionally renders the HTML tag
  • When presented and only 1 resource.access.url is present, performs a check if the value of the resource is blank
  • [], '', ' ', null, 0, 0.0 are considered as a blank values
  • When presented and 2 resources and a comparison operator is present, executes a comparison of 2 resources
                      
                      <numsolar if="attachments.house.0">HOUSE ATTACHMENT</numsolar>

<numsolar ...format='' >

format="wh|kwh|mwh|wh.1|kwh.1|mwh.1|energy|power |round|round.0|round.1|round.2|round.3|round.4|money"
  • Is used with numsolar tags and field attribute to format the returned values accordingly
  • 'wh', 'kwh', 'mwh' - is emplicit conversion, while 'energy' will guess the correct format to use
  • 'power' will guess the correct format to use (watts, kw, mwh)
  • 'round', 'round.0' will round to the integer value
  • 'round.1', 'round.2', 'round.3', 'round.4' round to 1,2,3,4 decimals
  • 'money' will convert using the currency 
                      
                      <numsolar field="monthly_simulation.chh.0" format="energy"></numsolar>

< ...debug='debug' >

When attribute is present, prints out the debug information

< NUMSOLAR ...attributes(field, img, if) >

field="resource.access.url"
  • When the attribute field is present, Numsolar will substitute this tag with the value of the resource specified by the resource.access.url. 
                      
                      <numsolar field="prospect.first_name"></numsolar>
img="resource.access.url"
  • When the attribute img is present, Numsolar will substitute this tag with the img tag with src attribute set to resource.access.url. 
                      
                      <numsolar img="attachments.house.0"></numsolar>
each="resource.access.url"
  • Cycles through the resource, given it's a collection
  • Introduces item resource inside the block
  • Can include any HTML tags, as well as if, img, field attributes 
                      
                      <ul>
                      
                      <numsolar each="offer.configuration_lines">
                      
                      <li>
                      
                          <span> <numsolar field="item.title"></numsolar> </span>
                      
                          <span> <numsolar field="item.cost" format="money"></numsolar> </span>
                      
                      </li>
                      
                      </numsolar>
                      
                      </ul>

< NUMSOLAR.BAR-CHART ...attributes >

< NUMSOLAR.SECTOR-CHART ...attributes >

  • width="100%"

    Width of the resulting svg.

  • height="auto"

    Height of the resulting svg.

  • numsolar-columns="[col[+|-|,col]],.."

    List of columns from the Simulation resource.

    Examples:
    • [chh][csg] — 2 columns:
    • [chh+chc][csg] — 2 columns, but column 1 consists of chh+chc
    • [chh,chc][csg] — 2 columns, but column 1 is a 2 stacked columns chh,chc
  • numsolar-colors="[col[,col]],.."

    List of columns colors that are taken in the in order they are mentioned in numsolar-colors.

    Examples:
    • [#333][orange] — 2 columns
    • [#333][orange] — 2 columns (column chh+chc is considered as one column )
    • [#333,#777][orange] — 2 columns, but column 1 is a 2 stacked columns
  • numsolar-column_names="[col[,col]],.."

    List of columns names that are taken in the order they are mentioned in numsolar-colors.

    Examples:
    • [Household consumption][Solar to grid] — 2 columns
    • [Total consumption][Solar to grid] — 2 columns (column chh+chc is considered as one column )
    • [Household consumption,Car consumption][Solar to grid] — 2 columns, but column 1 is a 2 stacked columns
  • numsolar-view="monthly|yearly"

    This flag tells numsolar which Simulation to take: 'monthly' or 'yearly'.

  • numsolar-y_legend="Monthly in MWh"

    Title of the y axis, leave it blank to hide the title

  • numsolar-x_legend="Monthly"

    Title of the x axis, leave it blank to hide the title

  • numsolar-show_x_labels="true"

    This flag indicates to show labels of the X axis (true by default)

  • numsolar-show_y_labels="true"

    This flag indicates to show labels of the Y axis (true by default)

  • numsolar-colors_legend_position="left|right|top|bottom"

    This flag indicates where to show the columns legend

  • column_width="4"

    Width of the lines in the sector chart 

                      
                      
                      
                      <numsolar.sector-chart width="100%" 
                      
                       height="auto" 
                      
                       numsolar-columns="[chh,chc][csg+csb+csh+csc]" 
                      
                       numsolar-colors="[#333,#777][orange]" 
                      
                       numsolar-column_names="[Consumption (Household),(Car)][With Solar panels]" 
                      
                       numsolar-view="monthly" 
                      
                       numsolar-y_legend="Monthly in MWh" 
                      
                       numsolar-x_legend="Monthly" 
                      
                       numsolar-show_x_labels="true" 
                      
                       numsolar-show_y_labels="true" 
                      
                       numsolar-colors_legend_position="bottom" 
                      
                       column_width="4" 
                      
                      ></numsolar.sector-chart>