HDS-5289 Add simple bar chart component with Showcase example

Author: KristinLBradley

packages/components/package.json

@@ -200,6 +200,8 @@
       "./components/hds/button-set/index.js": "./dist/_app_/components/hds/button-set/index.js",
       "./components/hds/button/index.js": "./dist/_app_/components/hds/button/index.js",
       "./components/hds/card/container.js": "./dist/_app_/components/hds/card/container.js",
+      "./components/hds/charts/bar/index.js": "./dist/_app_/components/hds/charts/bar/index.js",
+      "./components/hds/charts/bar/options.js": "./dist/_app_/components/hds/charts/bar/options.js",
       "./components/hds/charts/donut/index.js": "./dist/_app_/components/hds/charts/donut/index.js",
       "./components/hds/charts/donut/options.js": "./dist/_app_/components/hds/charts/donut/options.js",
       "./components/hds/charts/meter/index.js": "./dist/_app_/components/hds/charts/meter/index.js",

packages/components/src/components/hds/charts/bar/index.hbs

@@ -0,0 +1,6 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+<div {{did-insert this.setupChart}} class="hds-charts-bar" ...attributes></div>

packages/components/src/components/hds/charts/bar/index.ts

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+import { SimpleBarChart } from '@carbon/charts';
+import options from './options.js';
+import '@carbon/charts/styles.css';
+
+export interface HdsChartsBarSignature {
+  Args: {
+    title?: string;
+    data: Array<{ group: string; date: string; value: number }>;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLDivElement;
+}
+
+export default class HdsChartsBar extends Component<HdsChartsBarSignature> {
+  chart: SimpleBarChart | null = null;
+
+  @action
+  setupChart(element: HTMLDivElement): void {
+    const chartData = this.args.data;
+
+    // Merge the dynamic options into the default options
+    const chartOptions = {
+      ...options,
+      title: this.args.title || options.title,
+    };
+
+    // Create the SimpleBarChart instance
+    this.chart = new SimpleBarChart(element, {
+      data: chartData,
+      options: chartOptions,
+    });
+  }
+}

packages/components/src/components/hds/charts/bar/options.js

@@ -0,0 +1,26 @@
+import { ScaleTypes } from '@carbon/charts';
+
+export default {
+  title: '',
+  toolbar: {
+    enabled: false, // hide toolbar
+  },
+  axes: {
+    left: {
+      mapsTo: 'value',
+    },
+    bottom: {
+      mapsTo: 'date',
+      scaleType: ScaleTypes.LABELS,
+    },
+  },
+  grid: {
+    x: {
+      numberOfTicks: 0,
+    },
+  },
+  height: '400px',
+  legend: {
+    enabled: false, // hide legend (for single color bar chart)
+  },
+};

packages/components/src/styles/components/charts.scss

@@ -4,9 +4,11 @@
  */
 
 //
-// CHARTS > DONUT
+// CHARTS
 //
 
+// > DONUT
+
 .hds-charts-donut {
   // outline: 1px dotted red; // for testing - see boundaries of chart container
 
@@ -21,3 +23,11 @@
     min-height: 1.3em;
   }
 }
+
+// > BAR
+
+.hds-charts-bar {
+  .graph-frame {
+    overflow: hidden; // cut off bottom line which overflows container
+  }
+}

packages/components/src/template-registry.ts

@@ -68,6 +68,7 @@ import type HdsCardContainerComponent from './components/hds/card/container.ts';
 
 import type HdsChartsDonut from './components/hds/charts/donut/index.ts';
 import type HdsChartsMeter from './components/hds/charts/meter/index.ts';
+import type HdsChartsBar from './components/hds/charts/bar/index.ts';
 
 import type HdsCodeEditorComponent from './components/hds/code-editor/index.ts';
 import type HdsCodeEditorDescriptionComponent from './components/hds/code-editor/description.ts';
@@ -444,6 +445,7 @@ export default interface HdsComponentsRegistry {
   // Charts
   'Hds::Charts::Donut': typeof HdsChartsDonut;
   'Hds::Charts::Meter': typeof HdsChartsMeter;
+  'Hds::Charts::Bar': typeof HdsChartsBar;
 
   // Code Block
   'Hds::CodeBlock': typeof HdsCodeBlockComponent;

showcase/app/routes/page-components/charts/index.js

@@ -70,13 +70,67 @@ const METER_BILLABLE_RESOURCES_DATA = [
   },
 ];
 
+// Bar data
+
+const BAR_MANAGED_RESOURCES_DATA = [
+  {
+    date: '2025-01',
+    value: 9000,
+  },
+  {
+    date: '2025-02',
+    value: 12000,
+  },
+  {
+    date: '2025-03',
+    value: 10000,
+  },
+  {
+    date: '2025-04',
+    value: 13000,
+  },
+  {
+    date: '2025-05',
+    value: 14000,
+  },
+  {
+    date: '2025-06',
+    value: 15000,
+  },
+  {
+    date: '2025-07',
+    value: 15000,
+  },
+  {
+    date: '2025-08',
+    value: 18000,
+  },
+  {
+    date: '2025-09',
+    value: 21000,
+  },
+  {
+    date: '2025-10',
+    value: 22000,
+  },
+  {
+    date: '2025-11',
+    value: 24000,
+  },
+  {
+    date: '2025-12',
+    value: 27000,
+  },
+];
+
 export default class PageComponentsChartsRoute extends Route {
   async model() {
     return {
       DONUT_SERVICE_HEALTH_DATA,
       DONUT_CLUSTERS_DATA,
       METER_DATABASE_TRANSACTIONS_DATA,
       METER_BILLABLE_RESOURCES_DATA,
+      BAR_MANAGED_RESOURCES_DATA,
     };
   }
 }

showcase/app/templates/page-components/charts/index.hbs

@@ -52,4 +52,10 @@
       />
     </Hds::Card::Container>
   </Hds::Layout::Grid>
+
+  <Shw::Text::H2>Carbon Charts Bar</Shw::Text::H2>
+
+  <Hds::Card::Container @hasBorder={{true}} {{style padding="1.5rem"}}>
+    <Hds::Charts::Bar @title="Average billable managed resources" @data={{this.model.BAR_MANAGED_RESOURCES_DATA}} />
+  </Hds::Card::Container>
 </section>

showcase/tests/integration/components/hds/charts/bar/index-test.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'showcase/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | hds/charts/bar/index', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it should render the component with a CSS class that matches the component name', async function (assert) {
+    await render(hbs`<Hds::Charts::Bar id="test-charts-bar" />`);
+    assert.dom('#test-charts-bar').hasClass('hds-charts-bar');
+  });
+});