mirror of
https://github.com/hashicorp/vault.git
synced 2026-06-09 00:33:28 -04:00
f315c2fc89
* Migrate lineal bar charts to carbon * revert changes made to mirage * fix failing tests * fix test failures * removed the usage of render modifiers * Update RunningTotal component to handle null values for chart data and adjust test for simple chart rendering * Enhance RunningTotal component with Carbon Charts integration and accessibility improvements * Migrate client usage by month bar chart to Carbon Charts with updated options and styles * Update overview tests to utilize new chart selectors and improve assertions for client stats visibility * Remove unnecessary nested-interactive a11y rule suppression from carbon-chart tests * UI: Enhance chart color scales and options for client usage visualization to use HDS color tokens * Refactor chart-related constants and remove unused functions from chart helpers * Update date range inputs in client usage overview tests to use constants for historical months --------- Co-authored-by: Aravind VM <aravind.vm@ibm.com> Co-authored-by: Copilot <copilot@github.com>
65 lines
1.8 KiB
TypeScript
65 lines
1.8 KiB
TypeScript
/**
|
|
* Copyright IBM Corp. 2016, 2025
|
|
* SPDX-License-Identifier: BUSL-1.1
|
|
*/
|
|
|
|
import { modifier } from 'ember-modifier';
|
|
import { SimpleBarChart, StackedBarChart, DonutChart } from '@carbon/charts';
|
|
import type { BarChartOptions, DonutChartOptions } from '@carbon/charts/dist/interfaces';
|
|
|
|
/**
|
|
* Chart type constants for Carbon Charts
|
|
*/
|
|
export const CHART_TYPES = {
|
|
SIMPLE_BAR: 'simple',
|
|
STACKED_BAR: 'stacked',
|
|
DONUT: 'donut',
|
|
} as const;
|
|
|
|
export type ChartType = (typeof CHART_TYPES)[keyof typeof CHART_TYPES];
|
|
|
|
interface ChartDataPoint {
|
|
group: string;
|
|
value: number | null;
|
|
[key: string]: string | number | null;
|
|
}
|
|
|
|
interface CarbonChartModifierSignature {
|
|
Element: HTMLDivElement;
|
|
Args: {
|
|
Positional: [ChartDataPoint[], BarChartOptions | DonutChartOptions, ChartType];
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Custom modifier for managing Carbon Chart lifecycle.
|
|
* Replaces the need for did-insert, did-update, and will-destroy render modifiers.
|
|
*
|
|
* @example
|
|
* ```hbs
|
|
* <div {{carbon-chart @chartData @chartOptions @chartType}}></div>
|
|
* ```
|
|
*/
|
|
const CHART_CLASS_MAP = {
|
|
[CHART_TYPES.SIMPLE_BAR]: SimpleBarChart,
|
|
[CHART_TYPES.STACKED_BAR]: StackedBarChart,
|
|
[CHART_TYPES.DONUT]: DonutChart,
|
|
} as const;
|
|
|
|
export default modifier<CarbonChartModifierSignature>((element, [chartData, chartOptions, chartType]) => {
|
|
let chart: SimpleBarChart | StackedBarChart | DonutChart | null = null;
|
|
|
|
if (chartData && Array.isArray(chartData) && chartData.length > 0) {
|
|
const ChartClass = CHART_CLASS_MAP[chartType];
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
chart = new ChartClass(element as HTMLDivElement, { data: chartData, options: chartOptions as any });
|
|
}
|
|
|
|
// Return cleanup function
|
|
return () => {
|
|
if (chart) {
|
|
chart.destroy();
|
|
chart = null;
|
|
}
|
|
};
|
|
});
|