@hpcc-js/layout 2.46.1 → 2.47.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -46,4 +46,39 @@ This package is part of the mono repository "@hpcc-js" (aka Visualization Framew
46
46
  </script>
47
47
  </body>
48
48
  </html>
49
- ```
49
+ ```
50
+
51
+ <ClientOnly>
52
+ <hpcc-vitepress style="width:100%;height:600px">
53
+ <div id="target" style="height:600px">
54
+ </div>
55
+ <script type="module">
56
+ import { Column, Pie, Line, Step } from "@hpcc-js/chart";
57
+ import { Carousel } from "@hpcc-js/layout"; // Has dependency on "dgrid" so can't be used in a module...
58
+
59
+ const columns = ["Subject", "Year 1", "Year 2", "Year 3"];
60
+ const data = [
61
+ ["Geography", 75, 68, 65],
62
+ ["English", 45, 55, -52],
63
+ ["Math", 98, 92, 90],
64
+ ["Science", 66, 60, 72]
65
+ ];
66
+
67
+ const carousel = new Carousel()
68
+ .widgets([
69
+ new Pie().columns(columns).data(data),
70
+ new Line().columns(columns).data(data),
71
+ new Column().columns(columns).data(data),
72
+ new Step().columns(columns).data(data)
73
+ ])
74
+ .target("target")
75
+ .render()
76
+ ;
77
+
78
+ var active = 0;
79
+ setInterval(function () {
80
+ carousel.active(++active % 4).render();
81
+ }, 3000);
82
+ </script>
83
+ </hpcc-vitepress>
84
+ </ClientOnly>