legumeinfo · ctcncgr · Apr 10, 2024 · Apr 11, 2024 · Apr 16, 2024 · Apr 16, 2024
diff --git a/dev/viz/lis-histogram-element.html b/dev/viz/lis-histogram-element.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <title>LIS Web-Components - &lt;lis-histogram-element&gt;</title>
+  <!-- CSS framework -->
+  <link rel="stylesheet" type="text/css" href="../../node_modules/uikit/dist/css/uikit.min.css">
+  <script src="../../node_modules/uikit/dist/js/uikit.min.js"></script>
+  <!-- web components polyfills -->
+  <script src="../../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
+  <script src="../../node_modules/lit/polyfill-support.js"></script>
+  <!-- web components -->
+  <script type="module" src="../../lib/index.js"></script>
+</head>
+
+<body>
+  <div class="uk-container">
+    <h1>&lt;lis-histogram-element&gt;</h1>
+    <p>
+      The <code>&lt;lis-histogram-element&gt;</code> provides a generic component for rendering a histogram using <a href="https://d3js.org/">D3.js</a>.
+    </p>
+    <p>
+      In the example below, the 'Rating' and 'Cheese' columns from the <code>&lt;lis-simple-table-element&gt;</code> are used
+      to generate the histogram.
+    </p>
+    <hr>
+      <lis-simple-table-element id="table"></lis-simple-table-element>
+      <lis-histogram-element id="histogram"></lis-histogram-element>
+  </div> 
+  <!--Set all attributes/properties via JavaScript for lis-simple-table-element-->
+  <script type="text/javascript">
+   window.onload = (event) => {
+    // get the simple table element
+    const tableElement = document.getElementById('table');
+    // set the element's properties
+    tableElement.caption = 'My cheesy table';
+    tableElement.dataAttributes = ['cheese', 'region', 'rating'];
+    tableElement.header = {cheese: 'Cheese', region: 'Region', rating: 'Rating'};
+    tableElement.data = [
+      {cheese: 'Brie', region: 'France', rating: 7},
+      {cheese: 'Burrata', region: 'Italy', rating: 8},
+      {cheese: 'Feta', region: 'Greece', rating: 7},
+      {cheese: 'Gouda', region: 'Netherlands', rating: 9},
+      {cheese: 'Cheddar', region: 'America', rating: 6},
+      {cheese: 'Goat', region: 'America', rating: 2}
+    ];
+
+    const histogramData = tableElement.data.map((d) => ({"name": d.cheese, "count": d.rating}));
+    const histogramElement = document.getElementById('histogram');
+    histogramElement.width = 500;
+    histogramElement.height = 500;
+    histogramElement.nameLabel = 'Cheese';
+    histogramElement.countLabel = 'Rating';
+    histogramElement.orientation = 'vertical';
+    histogramElement.data = histogramData;
+   } 
+  </script>
+
+</body>
+
+</html>
diff --git a/docs/assets/navigation.js b/docs/assets/navigation.js
diff --git a/docs/assets/search.js b/docs/assets/search.js
diff --git a/docs/classes/controllers.LisCancelPromiseController.html b/docs/classes/controllers.LisCancelPromiseController.html
diff --git a/docs/classes/controllers.LisDomContentLoadedController.html b/docs/classes/controllers.LisDomContentLoadedController.html
diff --git a/docs/classes/controllers.LisQueryStringParametersController.html b/docs/classes/controllers.LisQueryStringParametersController.html
diff --git a/docs/classes/controllers.LisSlotController.html b/docs/classes/controllers.LisSlotController.html