From ad54ce8c5ed932fef786058eb38afd7f0d0b6431 Mon Sep 17 00:00:00 2001
From: Connor Cameron <ctc@ncgr.org>
Date: Tue, 16 Apr 2024 15:54:46 -0600
Subject: [PATCH] working histogram. need to fix y axis rendering issue. #224

---
 dev/core/lis-histogram-element.html | 52 +++++++++++++++++++++++++++++
 src/core/lis-histogram-element.ts   |  4 +--
 2 files changed, 54 insertions(+), 2 deletions(-)
 create mode 100644 dev/core/lis-histogram-element.html
diff --git a/dev/core/lis-histogram-element.html b/dev/core/lis-histogram-element.html
new file mode 100644
index 00000000..33d1ec1d
--- /dev/null
+++ b/dev/core/lis-histogram-element.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <title>LIS Web-Components - &lt;lis-modal-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="../../dist/web-components.min.js"></script>
+</head>
+
+<body>
+
+  <div class="uk-container">
+    <h1>&lt;lis-histogram-element&gt;</h1>
+    <p>
+      The <code>&lt;lis-histogram-element&gt;</code> the <code>&lt;lis-simple-table-element&gt;</code> web component.
+      See the source code and documentation for details.
+    </p>
+    <hr>
+      <lis-simple-table-element id="table"></lis-simple-table-element>
+  </div>
+
+  <!--Set all attributes/properties via JavaScript for lis-simple-table-element-->
+  <script type="text/javascript">
+    // get the simple table element
+   window.onload = (event) => {
+    const tableElement = document.getElementById('table');
+    // set the element's properties
+    tableElement.caption = 'My cheesy table';
+    tableElement.dataAttributes = ['cheese', 'region', 'raing'];
+    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', raing: 6},
+      {cheese: 'Goat', region: 'America', raing: 2}
+    ];
+   }
+  </script>
+
+</body>
+
+</html>
diff --git a/src/core/lis-histogram-element.ts b/src/core/lis-histogram-element.ts
index 03857356..73869e36 100644
--- a/src/core/lis-histogram-element.ts
+++ b/src/core/lis-histogram-element.ts
@@ -84,8 +84,8 @@ export class LisHistogramElement extends LitElement {
     const svgContainer = d3
       .select(this._histogramContainerRef.value)
       .append('svg')
-      .attr('width', 500)
-      .attr('height', 500);
+      .attr('width', 600)
+      .attr('height', 600);
 
     const x = d3
       .scaleBand()
