@hpcc-js/chart 3.7.4 → 3.7.6

package/src/SummaryC.md

@@ -1,154 +1,154 @@
-# SummaryC
-
-<!--meta
-
--->
-
-SummaryC is commonly used to emphasize significant data points within a dashboard. It requires _labelColumn_ and _valueColumn_ to be specified.
-
-<ClientOnly>
-  <hpcc-vitepress style="width:100%;height:600px">
-    <div id="placeholder" style="height:400px">
-    </div>
-    <script type="module">
-      import { SummaryC } from "@hpcc-js/chart";
-
-      new SummaryC()
-          .target("placeholder")
-          .columns(["Summary", "Score"])
-          .data([
-              ["Cars", 128]
-          ])
-          .labelColumn("Summary")
-          .valueColumn("Score")
-          .render()
-          ;
-    </script>
-  </hpcc-vitepress>
-</ClientOnly>
-
-_icon_ can be set to an empty string to prevent the default icon from displaying.
-
-_fontSizeRatio_ can be used to set the font size ration between the value size and the label size.
-
-<ClientOnly>
-  <hpcc-vitepress style="width:100%;height:600px">
-    <div id="placeholder" style="height:400px">
-    </div>
-    <script type="module">
-      import { SummaryC } from "@hpcc-js/chart";
-
-      new SummaryC()
-          .target("placeholder")
-          .columns(["Summary", "Score"])
-          .data([
-              ["Cars", 128]
-          ])
-          .labelColumn("Summary")
-          .valueColumn("Score")
-          .icon("")
-          .fontSizeRatio(0.38)
-          .render()
-          ;
-    </script>
-  </hpcc-vitepress>
-</ClientOnly>
-
-_icon_ can also be used to assign a FontAwesome icon by class.
-
-_iconSizeRatio_ can be used to control the icon's size relative to the overall height.
-
-_colorFill_ sets the background color.
-
-_colorStroke_ sets the text and icon color.
-
-_iconBaseline_ controls the vertical placement of the icon.
-
-<ClientOnly>
-  <hpcc-vitepress style="width:100%;height:600px">
-    <div id="placeholder" style="height:400px">
-    </div>
-    <script type="module">
-      import { SummaryC } from "@hpcc-js/chart";
-
-      new SummaryC()
-          .target("placeholder")
-          .columns(["Summary", "Score"])
-          .data([
-              ["Users", 256]
-          ])
-          .labelColumn("Summary")
-          .valueColumn("Score")
-          .icon("fa-users")
-          .colorFill("#eeeeee")
-          .colorStroke("#30336b")
-          .iconSizeRatio(0.5)
-          .iconBaseline("middle")
-          .render()
-          ;
-    </script>
-  </hpcc-vitepress>
-</ClientOnly>
-
-_playInterval_ can be used to cycle through multiple data rows. In the below example the play interval is set to 2000 milliseconds (two seconds).
-
-<ClientOnly>
-  <hpcc-vitepress style="width:100%;height:600px">
-    <div id="placeholder" style="height:400px">
-    </div>
-    <script type="module">
-      import { SummaryC } from "@hpcc-js/chart";
-
-      new SummaryC()
-          .target("placeholder")
-          .columns(["Summary", "Score", "Icon"])
-          .data([
-              ["Cars", 128, "fa-automobile"],
-              ["Trucks", 64, "fa-truck"]
-          ])
-          .labelColumn("Summary")
-          .valueColumn("Score")
-          .iconColumn("Icon")
-          .playInterval(2000)
-          .render()
-          ;
-    </script>
-  </hpcc-vitepress>
-</ClientOnly>
-
-_iconColumn_, _colorFillColumn_ and _colorStrokeColumn_ can be set to designate data row columns for these properties. This allows the properties to change for each data row.
-
-<ClientOnly>
-  <hpcc-vitepress style="width:100%;height:600px">
-    <div id="placeholder" style="height:400px">
-    </div>
-    <script type="module">
-      import { SummaryC } from "@hpcc-js/chart";
-
-      new SummaryC()
-          .target("placeholder")
-          .columns(["Summary", "Score", "Icon", "Background", "TextColor"])
-          .data([
-              ["Cold days", 56, "fa-thermometer-0", "#95a5a6", "#34495e"],
-              ["Cool days", 120, "fa-thermometer-1", "white", "#2980b9"],
-              ["Warm days", 130, "fa-thermometer-2", "#f1c40f", "#d35400"],
-              ["Hot days", 59, "fa-thermometer-3", "#c0392b", "#ecf0f1"]
-          ])
-          .labelColumn("Summary")
-          .valueColumn("Score")
-          .iconColumn("Icon")
-          .colorFillColumn("Background")
-          .colorStrokeColumn("TextColor")
-          .playInterval(2000)
-          .render()
-          ;
-    </script>
-  </hpcc-vitepress>
-</ClientOnly>
-
-## API
-
-## Published Properties
-
-```@hpcc-js/chart:SummaryC
-```
+# SummaryC
+
+<!--meta
+
+-->
+
+SummaryC is commonly used to emphasize significant data points within a dashboard. It requires _labelColumn_ and _valueColumn_ to be specified.
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { SummaryC } from "@hpcc-js/chart";
+
+      new SummaryC()
+          .target("placeholder")
+          .columns(["Summary", "Score"])
+          .data([
+              ["Cars", 128]
+          ])
+          .labelColumn("Summary")
+          .valueColumn("Score")
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+_icon_ can be set to an empty string to prevent the default icon from displaying.
+
+_fontSizeRatio_ can be used to set the font size ration between the value size and the label size.
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { SummaryC } from "@hpcc-js/chart";
+
+      new SummaryC()
+          .target("placeholder")
+          .columns(["Summary", "Score"])
+          .data([
+              ["Cars", 128]
+          ])
+          .labelColumn("Summary")
+          .valueColumn("Score")
+          .icon("")
+          .fontSizeRatio(0.38)
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+_icon_ can also be used to assign a FontAwesome icon by class.
+
+_iconSizeRatio_ can be used to control the icon's size relative to the overall height.
+
+_colorFill_ sets the background color.
+
+_colorStroke_ sets the text and icon color.
+
+_iconBaseline_ controls the vertical placement of the icon.
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { SummaryC } from "@hpcc-js/chart";
+
+      new SummaryC()
+          .target("placeholder")
+          .columns(["Summary", "Score"])
+          .data([
+              ["Users", 256]
+          ])
+          .labelColumn("Summary")
+          .valueColumn("Score")
+          .icon("fa-users")
+          .colorFill("#eeeeee")
+          .colorStroke("#30336b")
+          .iconSizeRatio(0.5)
+          .iconBaseline("middle")
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+_playInterval_ can be used to cycle through multiple data rows. In the below example the play interval is set to 2000 milliseconds (two seconds).
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { SummaryC } from "@hpcc-js/chart";
+
+      new SummaryC()
+          .target("placeholder")
+          .columns(["Summary", "Score", "Icon"])
+          .data([
+              ["Cars", 128, "fa-automobile"],
+              ["Trucks", 64, "fa-truck"]
+          ])
+          .labelColumn("Summary")
+          .valueColumn("Score")
+          .iconColumn("Icon")
+          .playInterval(2000)
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+_iconColumn_, _colorFillColumn_ and _colorStrokeColumn_ can be set to designate data row columns for these properties. This allows the properties to change for each data row.
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { SummaryC } from "@hpcc-js/chart";
+
+      new SummaryC()
+          .target("placeholder")
+          .columns(["Summary", "Score", "Icon", "Background", "TextColor"])
+          .data([
+              ["Cold days", 56, "fa-thermometer-0", "#95a5a6", "#34495e"],
+              ["Cool days", 120, "fa-thermometer-1", "white", "#2980b9"],
+              ["Warm days", 130, "fa-thermometer-2", "#f1c40f", "#d35400"],
+              ["Hot days", 59, "fa-thermometer-3", "#c0392b", "#ecf0f1"]
+          ])
+          .labelColumn("Summary")
+          .valueColumn("Score")
+          .iconColumn("Icon")
+          .colorFillColumn("Background")
+          .colorStrokeColumn("TextColor")
+          .playInterval(2000)
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+## API
+
+## Published Properties
+
+```@hpcc-js/chart:SummaryC
+```