UI/bar chart horizontal (hashicorp#12437)

* creates bar chart component

* WIP//starts styling

* fixes width of bars

* WIP//barchart

* uses d3 max method instead of Math.max

* stacks data

* adds y axis

* fixes styling and spacing

* adds spacing between bars

* styling DONE

* adds legend

* adds tooltip

* tweaks styling adds pointer cursor to rects

* fixes tooltip placement

* moves starget from bar to whole area

* finishes hover selection styling

* cleans up

* cleans up a tiny bit

* stopping point

* adjusts tooltip placemnt

* WIP//clean up time

* sort of not broken

* unbroken, ish

* tooltip position fixed

* truncates text and adds tooltip

* changes tooltip width depending on content

* unbroken

* finishes initial refactor/cleanup

* finishes documentation

* passes in map legend to component

* more tidying

* add export option

* adds grid to header for export button option

* updates comments

* fix variable name change

* moves dataset formatting to parent

* removes unused code"

* adds assertions and empty state if no data

* cleans up comments adds assertion to check for map legend

* adds storybook

* adds changelog

* deletes dummy parent:

* restores index.hbs

* uses scss variables instead

* exchanges more variables

* remove unused variable in storybook

* writes basic test

* removes pauseTest()

changelog/12437.txt

@@ -0,0 +1,3 @@
+```release-note:feature
+ui: creates bar chart component for displaying client count data by namespace 
+```

ui/app/styles/components/bar-chart.scss

@@ -0,0 +1,68 @@
+.bar-chart-wrapper {
+  border: $light-border;
+  border-radius: $radius-large;
+  padding: $spacing-l $spacing-l $spacing-s $spacing-l;
+  height: 100%;
+  width: 100%;
+
+  > div.is-border {
+    border: 0.3px solid $ui-gray-200;
+    width: 94%;
+    margin-left: 3%;
+    margin-bottom: $spacing-xxs;
+  }
+}
+
+.chart-header {
+  margin-left: $spacing-l;
+  display: grid;
+  grid-template-columns: 3fr 1fr;
+
+  .header-left {
+    .chart-title {
+      font-size: $size-5;
+      font-weight: $font-weight-bold;
+      line-height: normal;
+    }
+
+    .chart-description {
+      font-size: $size-8;
+      font-weight: $font-weight-normal;
+      color: $ui-gray-700;
+      margin-bottom: $spacing-xs;
+    }
+  }
+
+  .header-right {
+    text-align: center;
+
+    > button {
+      font-size: $size-8;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+.bar-chart-container {
+  padding: $spacing-m $spacing-l $spacing-m $spacing-l;
+}
+
+.bar-chart {
+  .tick > text {
+    font-weight: $font-weight-semibold;
+    font-size: $size-8;
+  }
+}
+
+.legend-container {
+  height: $spacing-l;
+  margin-top: $spacing-xs;
+}
+
+.legend {
+  width: 100%;
+  height: 100%;
+}

ui/app/styles/core.scss

@@ -45,6 +45,7 @@
 @import './components/auth-buttons';
 @import './components/auth-form';
 @import './components/b64-toggle';
+@import './components/bar-chart';
 @import './components/box-label';
 @import './components/box-radio';
 @import './components/codemirror';