@hpcc-js/Visualization

Summary

Summary is commonly used to emphasize significant data points within a dashboard. It requires labelColumn and valueColumn to be specified.

<div id="placeholder" style="height:400px">
</div>
<script type="module">
  import { Summary } from "@hpcc-js/chart";

  new Summary()
      .target("placeholder")
      .columns(["Summary", "Score"])
      .data([
          ["Cars", 128]
      ])
      .labelColumn("Summary")
      .valueColumn("Score")
      .render()
      ;
</script>

icon can be set to an empty string to prevent the default icon from displaying.

hideMoreWrapper can hide the 'more info' section.

textFontSize can be used to set the label font size.

headerFontSize can be used to set the value font size.

<div id="placeholder" style="height:400px">
</div>
<script type="module">
  import { Summary } from "@hpcc-js/chart";

  new Summary()
      .target("placeholder")
      .columns(["Summary", "Score"])
      .data([
          ["Cars", 128]
      ])
      .labelColumn("Summary")
      .valueColumn("Score")
      .icon("")
      .hideMoreWrapper(true)
      .headerFontSize(120)
      .textFontSize(20)
      .render()
      ;
</script>

icon can also be used to specify a class to be given to the icon's html element. In the example below a FontAwesome class is assigned.

colorFill sets the background color.

colorStroke sets the text and icon color.

<div id="placeholder" style="height:400px">
</div>
<script type="module">
  import { Summary } from "@hpcc-js/chart";

  new Summary()
      .target("placeholder")
      .columns(["Summary", "Score"])
      .data([
          ["Users", 256]
      ])
      .labelColumn("Summary")
      .valueColumn("Score")
      .icon("fa-users")
      .colorFill("#eeeeee")
      .colorStroke("#30336b")
      .hideMoreWrapper(true)
      .render()
      ;
</script>

moreIcon can be used to specify a class to be given to the 'more info' icon's html element. In the example below a FontAwesome class is assigned.

moreText can be used to specify content for the 'more info' section.

<div id="placeholder" style="height:400px">
</div>
<script type="module">
  import { Summary } from "@hpcc-js/chart";

  new Summary()
      .target("placeholder")
      .columns(["Summary", "Score"])
      .data([
          ["Users", 256]
      ])
      .labelColumn("Summary")
      .valueColumn("Score")
      .icon("fa-users")
      .colorFill("#eeeeee")
      .colorStroke("#30336b")
      .moreIcon("fa-user-md")
      .moreText("32 doctors")
      .render()
      ;
</script>

moreIcon can also be set to an empty string to prevent the default icon from displaying.

If moreTextHTML is set to true then the content within moreText will be rendered as HTML.

<div id="placeholder" style="height:400px">
</div>
<script type="module">
  import { Summary } from "@hpcc-js/chart";

  new Summary()
      .target("placeholder")
      .columns(["Summary", "Score"])
      .data([
          ["Tweets", 512]
      ])
      .labelColumn("Summary")
      .valueColumn("Score")
      .icon("fa-twitter")
      .colorFill("#eeeeee")
      .colorStroke("#30336b")
      .moreIcon("")
      .moreText("<button onclick=\"alert('More info here')\">Click for more info</button>")
      .moreTextHTML(true)
      .render()
      ;
</script>

playInterval can be used to cycle through multiple data rows. In the below example the play interval is set to 2000 milliseconds (two seconds).

<div id="placeholder" style="height:400px">
</div>
<script type="module">
  import { Summary } from "@hpcc-js/chart";

  new Summary()
      .target("placeholder")
      .columns(["Summary", "Score"])
      .data([
          ["Cars", 128],
          ["Trucks", 64]
      ])
      .labelColumn("Summary")
      .valueColumn("Score")
      .icon("")
      .hideMoreWrapper(true)
      .headerFontSize(120)
      .textFontSize(20)
      .playInterval(2000)
      .render()
      ;
</script>

iconColumn, moreIconColumn, moreTextColumn, colorFillColumn and colorStrokeColumn can be set to designate data row columns for these properties. This allows the properties to change for each data row.

<div id="placeholder" style="height:400px">
</div>
<script type="module">
  import { Summary } from "@hpcc-js/chart";

  new Summary()
      .target("placeholder")
      .columns(["Summary", "Score", "Icon", "MoreIcon", "Details", "Background", "TextColor"])
      .data([
          ["Cars", 128, "fa-automobile", "fa-truck", "64 Trucks", "grey", "black"],
          ["Cold days", 256, "fa-thermometer-empty", "fa-thermometer", "16 Hot days", "#30336b", "white"]
      ])
      .labelColumn("Summary")
      .valueColumn("Score")
      .iconColumn("Icon")
      .moreTextColumn("Details")
      .moreIconColumn("MoreIcon")
      .colorFillColumn("Background")
      .colorStrokeColumn("TextColor")
      .playInterval(2000)
      .render()
      ;
</script>

API

Published Properties