[SPIKE] Carbon charts exploration - various charts

packages/components/package.json

@@ -33,6 +33,7 @@
     "prepublishOnly": "pnpm build && test -f 'dist/styles/@hashicorp/design-system-components.css' || (echo 'The pre-compiled CSS file was not found' && exit 1)"
   },
   "dependencies": {
+    "@carbon/charts": "1.23.15",
     "@codemirror/commands": "^6.8.0",
     "@codemirror/lang-go": "^6.0.1",
     "@codemirror/lang-javascript": "^6.2.2",
@@ -199,6 +200,12 @@
       "./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",
+      "./components/hds/charts/meter/options.js": "./dist/_app_/components/hds/charts/meter/options.js",
       "./components/hds/code-block/copy-button.js": "./dist/_app_/components/hds/code-block/copy-button.js",
       "./components/hds/code-block/description.js": "./dist/_app_/components/hds/code-block/description.js",
       "./components/hds/code-block/index.js": "./dist/_app_/components/hds/code-block/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/components/hds/charts/donut/index.hbs

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

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

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+import { DonutChart } from '@carbon/charts';
+import options from './options.js';
+import '@carbon/charts/styles.css';
+export interface HdsChartsDonutSignature {
+  Args: {
+    title?: string;
+    data: Array<{ group: string; value: number }>;
+    colorMap?: { [key: string]: string }; // Optional custom colors for the chart segments/slices
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLDivElement;
+}
+
+export default class HdsChartsDonut extends Component<HdsChartsDonutSignature> {
+  chart: DonutChart | 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,
+      color: {
+        scale: this.args.colorMap,
+      },
+    };
+
+    // Create the DonutChart instance
+    this.chart = new DonutChart(element, {
+      data: chartData,
+      options: chartOptions,
+    });
+  }
+}

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

@@ -0,0 +1,24 @@
+export default {
+  title: '', // Set title using @title on the component
+  resizable: true,
+  legend: {
+    // alignment: 'left', // = alignment w/i container, options: 'left', 'right', 'center'
+    position: 'left', // = position relative to chart, options: 'top', 'bottom', 'left', 'right'
+    truncation: {
+      type: 'none',
+    },
+  },
+  toolbar: {
+    enabled: false, // hide toolbar
+  },
+  donut: {
+    alignment: 'center', // = alignment w/i container, options: 'center', 'left', 'right'
+  },
+  pie: {
+    labels: {
+      enabled: true,
+      formatter: (data) => data.value,
+    },
+  },
+  height: '175px',
+};

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

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

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

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+import { MeterChart } from '@carbon/charts';
+import options from './options.js';
+import '@carbon/charts/styles.css';
+
+export interface HdsChartsMeterSignature {
+  Args: {
+    title?: string;
+    data: Array<{ group: string; value: number }>;
+    total?: number; // if not passed in it will be calculated from the data
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLDivElement;
+}
+
+export default class HdsChartsMeter extends Component<HdsChartsMeterSignature> {
+  chart: MeterChart | null = null;
+
+  @action
+  setupChart(element: HTMLDivElement): void {
+    const chartData = this.args.data;
+
+    // Dynamically calculate the total from the passed-in data
+    const chartTotal = chartData.reduce(
+      (sum, item): number => sum + item.value,
+      0
+    );
+
+    // Merge the dynamic options into the default options
+    const chartOptions = {
+      ...options,
+      title: this.args.title || options.title,
+      meter: {
+        ...options.meter,
+        proportional: {
+          ...options.meter.proportional,
+          total: this.args.total || chartTotal,
+        },
+      },
+    };
+
+    // Create the MeterChart instance
+    this.chart = new MeterChart(element, {
+      data: chartData,
+      options: chartOptions,
+    });
+  }
+}

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

@@ -0,0 +1,12 @@
+export default {
+  title: '',
+  height: '130px',
+  meter: {
+    proportional: {
+      unit: '',
+    },
+  },
+  toolbar: {
+    enabled: false, // hide toolbar
+  },
+};

packages/components/src/styles/@hashicorp/design-system-components.scss

@@ -26,6 +26,7 @@
 @use "../components/button";
 @use "../components/button-set";
 @use "../components/card";
+@use "../components/charts";
 @use "../components/code-block";
 @use "../components/code-editor";
 @use "../components/copy";

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

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// CHARTS
+//
+
+// > DONUT
+
+.hds-charts-donut {
+  // outline: 1px dotted red; // for testing - see boundaries of chart container
+
+  // increase stroke definition on slices (especially for resized/shrunken charts)
+  .slice {
+    stroke: #fff;
+    stroke-width: 1px;
+  }
+
+  // The size of the title affects the rendered size of the donut chart
+  .title {
+    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

@@ -22,29 +22,25 @@ import type HdsAdvancedTableExpandableTrGroupComponent from './components/hds/ad
 import type HdsAlertComponent from './components/hds/alert';
 import type HdsAlertDescriptionComponent from './components/hds/alert/description';
 import type HdsAlertTitleComponent from './components/hds/alert/title';
-import type HdsAppHeaderComponent from './components/hds/app-header';
-import type HdsAppHeaderHomeLinkComponent from './components/hds/app-header/home-link';
-import type HdsAppHeaderMenuButtonComponent from './components/hds/app-header/menu-button';
+
 import type HdsAppFooterComponent from './components/hds/app-footer';
 import type HdsAppFooterCopyrightComponent from './components/hds/app-footer/copyright';
 import type HdsAppFooterItemComponent from './components/hds/app-footer/item';
 import type HdsAppFooterLegalLinksComponent from './components/hds/app-footer/legal-links';
 import type HdsAppFooterLinkComponent from './components/hds/app-footer/link';
 import type HdsAppFooterStatusLinkComponent from './components/hds/app-footer/status-link';
-import type HdsBadgeComponent from './components/hds/badge';
-import type HdsBadgeCountComponent from './components/hds/badge-count';
-import type HdsBreadcrumbComponent from './components/hds/breadcrumb/index.ts';
-import type HdsBreadcrumbItemComponent from './components/hds/breadcrumb/item';
-import type HdsBreadcrumbTruncationComponent from './components/hds/breadcrumb/truncation.ts';
-import type HdsButtonComponent from './components/hds/button';
-import type HdsButtonSetComponent from './components/hds/button-set';
+
 import type HdsAppFrameComponent from './components/hds/app-frame';
 import type HdsAppFrameFooterComponent from './components/hds/app-frame/parts/footer';
 import type HdsAppFrameHeaderComponent from './components/hds/app-frame/parts/header';
 import type HdsAppFrameMainComponent from './components/hds/app-frame/parts/main';
 import type HdsAppFrameModalsComponent from './components/hds/app-frame/parts/modals';
 import type HdsAppFrameSidebarComponent from './components/hds/app-frame/parts/sidebar';
 
+import type HdsAppHeaderComponent from './components/hds/app-header';
+import type HdsAppHeaderHomeLinkComponent from './components/hds/app-header/home-link';
+import type HdsAppHeaderMenuButtonComponent from './components/hds/app-header/menu-button';
+
 import type HdsAppSideNavComponent from './components/hds/app-side-nav';
 import type HdsAppSideNavToggleButtonComponent from './components/hds/app-side-nav/toggle-button';
 import type HdsAppSideNavPortalComponent from './components/hds/app-side-nav/portal';
@@ -60,7 +56,20 @@ import type HdsApplicationStateBodyComponent from './components/hds/application-
 import type HdsApplicationStateFooterComponent from './components/hds/application-state/footer';
 import type HdsApplicationStateHeaderComponent from './components/hds/application-state/header';
 import type HdsApplicationStateMediaComponent from './components/hds/application-state/media';
+
+import type HdsBadgeComponent from './components/hds/badge';
+import type HdsBadgeCountComponent from './components/hds/badge-count';
+import type HdsBreadcrumbComponent from './components/hds/breadcrumb/index.ts';
+import type HdsBreadcrumbItemComponent from './components/hds/breadcrumb/item';
+import type HdsBreadcrumbTruncationComponent from './components/hds/breadcrumb/truncation.ts';
+import type HdsButtonComponent from './components/hds/button';
+import type HdsButtonSetComponent from './components/hds/button-set';
 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';
 import type HdsCodeEditorGenericComponent from './components/hds/code-editor/generic.ts';
@@ -433,6 +442,11 @@ export default interface HdsComponentsRegistry {
   'Hds::Card::Container': typeof HdsCardContainerComponent;
   'hds/card/container': typeof HdsCardContainerComponent;
 
+  // Charts
+  'Hds::Charts::Donut': typeof HdsChartsDonut;
+  'Hds::Charts::Meter': typeof HdsChartsMeter;
+  'Hds::Charts::Bar': typeof HdsChartsBar;
+
   // Code Block
   'Hds::CodeBlock': typeof HdsCodeBlockComponent;
   'hds/code-block': typeof HdsCodeBlockComponent;