diff --git a/src/helpers/figures/charts/bar_chart.ts b/src/helpers/figures/charts/bar_chart.ts index 10cd0c3da..8c28b2c38 100644 --- a/src/helpers/figures/charts/bar_chart.ts +++ b/src/helpers/figures/charts/bar_chart.ts @@ -1,4 +1,4 @@ -import type { BasePlatform, ChartConfiguration, ChartDataset, ChartType } from "chart.js"; +import type { ChartConfiguration, ChartDataset, ChartType } from "chart.js"; import { BACKGROUND_CHART_COLOR, BORDER_CHART_COLOR } from "../../../constants"; import { AddColumnsRowsCommand, @@ -15,6 +15,7 @@ import { BarChartDefinition, BarChartRuntime } from "../../../types/chart/bar_ch import { AxesDesign, ChartCreationContext, + ChartRuntimeGenerationArgs, CustomizedDataSet, DataSet, DatasetDesign, @@ -34,7 +35,6 @@ import { copyDataSetsWithNewSheetId, copyLabelRangeWithNewSheetId, createDataSets, - formatChartDatasetValue, getChartColorsGenerator, getDefinedAxis, getTrendDatasetForBarChart, @@ -56,6 +56,7 @@ import { import { getBarChartLayout } from "./runtime/layout"; import { getBarChartLegend } from "./runtime/legend"; import { getBarChartScales } from "./runtime/scales"; +import { getCommonChartShowValues } from "./runtime/show_values"; import { getCommonChartTitle } from "./runtime/title"; import { getBarChartTooltip } from "./runtime/tooltip"; @@ -246,7 +247,6 @@ export function createBarChartRuntime(chart: BarChart, getters: Getters): BarCha const leftAxisFormat = getChartDatasetFormat(getters, chart.dataSets, "left"); const rightAxisFormat = getChartDatasetFormat(getters, chart.dataSets, "right"); - const locale = getters.getLocale(); const axisFormats = chart.horizontal ? { x: leftAxisFormat || rightAxisFormat } : { y: leftAxisFormat, y1: rightAxisFormat }; @@ -291,48 +291,33 @@ export function createBarChartRuntime(chart: BarChart, getters: Getters): BarCha */ dataSets.push(...trendDatasets); - const args = { + const args: ChartRuntimeGenerationArgs = { axisFormats: axisFormats, locale: getters.getLocale(), - labelValues: labels, - dataSetsValues: dataSetsValues, - leftAxisFormat, - rightAxisFormat, - dataSeriesLabels: dataSetsValues.map((ds) => ds.label), - trendDatasets: trendDatasets, + labels, + dataSetsValues, + trendDatasets, }; - // const baseConfig = getDefaultChartJsRuntime(chart, labels, fontColor, { - // locale, - // axisFormats, - // horizontalChart: chart.horizontal, - // }); const config: ChartConfiguration = { type: chart.type as ChartType, data: { labels: labels.map(truncateLabel), datasets: dataSets, }, - platform: undefined as unknown as typeof BasePlatform, // This key is optional and will be set by chart.js options: { ...CHART_COMMON_OPTIONS, + indexAxis: chart.horizontal ? "y" : "x", layout: getBarChartLayout(definition), scales: getBarChartScales(definition, args), plugins: { title: getCommonChartTitle(definition), - legend: getBarChartLegend(definition, {}), + legend: getBarChartLegend(definition, args), tooltip: getBarChartTooltip(definition, args), + chartShowValuesPlugin: getCommonChartShowValues(definition, args), }, }, }; - config.options!.indexAxis = chart.horizontal ? "y" : "x"; - config.options!.plugins!.chartShowValuesPlugin = { - showValues: chart.showValues, - background: chart.background, - horizontal: chart.horizontal, - callback: formatChartDatasetValue(axisFormats, locale), - }; - config.data.datasets = dataSets; return { chartJsConfig: config, background: chart.background || BACKGROUND_CHART_COLOR }; } diff --git a/src/helpers/figures/charts/runtime/_template.ts b/src/helpers/figures/charts/runtime/_template.ts deleted file mode 100644 index 27238b288..000000000 --- a/src/helpers/figures/charts/runtime/_template.ts +++ /dev/null @@ -1,66 +0,0 @@ -import { - BarChartDefinition, - CommonChartJSDefinition, - LineChartDefinition, - PieChartDefinition, - PyramidChartDefinition, - ScatterChartDefinition, - WaterfallChartDefinition, -} from "../../../../types/chart"; -import { ComboBarChartDefinition } from "../../../../types/chart/common_bar_combo"; -import { - comboDefinitionToBar, - pyramidDefinitionToBar, - scatterDefinitionToLine, - waterfallDefinitionToBar, -} from "./convert_definition"; - -interface ChartThing {} -interface ThingArgs {} - -export function getCommonChartThing( - definition: CommonChartJSDefinition, - args: ThingArgs -): ChartThing { - return {}; -} - -export function getBarChartThing(definition: BarChartDefinition, args: ThingArgs): ChartThing { - return { ...getCommonChartThing(definition, args) }; -} - -export function getLineChartThing(definition: LineChartDefinition, args: ThingArgs): ChartThing { - return { ...getCommonChartThing(definition, args) }; -} - -export function getPieChartThing(definition: PieChartDefinition, args: ThingArgs): ChartThing { - return { ...getCommonChartThing(definition, args) }; -} - -export function getComboBarChartThing( - definition: ComboBarChartDefinition, - args: ThingArgs -): ChartThing { - return { ...getBarChartThing(comboDefinitionToBar(definition), args) }; -} - -export function getWaterfallChartThing( - definition: WaterfallChartDefinition, - args: ThingArgs -): ChartThing { - return { ...getBarChartThing(waterfallDefinitionToBar(definition), args) }; -} - -export function getPyramidChartThing( - definition: PyramidChartDefinition, - args: ThingArgs -): ChartThing { - return { ...getBarChartThing(pyramidDefinitionToBar(definition), args) }; -} - -export function getScatterChartThing( - definition: ScatterChartDefinition, - args: ThingArgs -): ChartThing { - return { ...getLineChartThing(scatterDefinitionToLine(definition), args) }; -} diff --git a/src/helpers/figures/charts/runtime/legend.ts b/src/helpers/figures/charts/runtime/legend.ts index d67376054..bf45aa544 100644 --- a/src/helpers/figures/charts/runtime/legend.ts +++ b/src/helpers/figures/charts/runtime/legend.ts @@ -8,6 +8,7 @@ import { import { _t } from "../../../../translation"; import { BarChartDefinition, + ChartRuntimeGenerationArgs, CommonChartJSDefinition, LineChartDefinition, PieChartDefinition, @@ -25,11 +26,10 @@ import { } from "./convert_definition"; type ChartLegend = DeepPartial>; -interface LegendArgs {} export function getCommonChartLegend( definition: CommonChartJSDefinition, // ADRM TODO: maybe just a "legend" in definition - args: LegendArgs + args: ChartRuntimeGenerationArgs ): ChartLegend { return { // Disable default legend onClick (show/hide dataset), to allow us to set a global onClick on the chart container. @@ -41,13 +41,19 @@ export function getCommonChartLegend( }; } -export function getBarChartLegend(definition: BarChartDefinition, args: LegendArgs): ChartLegend { +export function getBarChartLegend( + definition: BarChartDefinition, + args: ChartRuntimeGenerationArgs +): ChartLegend { return { ...getCommonChartLegend(definition, args), }; } -export function getLineChartLegend(definition: LineChartDefinition, args: LegendArgs): ChartLegend { +export function getLineChartLegend( + definition: LineChartDefinition, + args: ChartRuntimeGenerationArgs +): ChartLegend { return { ...getCommonChartLegend(definition, args), labels: { @@ -65,7 +71,10 @@ export function getLineChartLegend(definition: LineChartDefinition, args: Legend }; } -export function getPieChartLegend(definition: PieChartDefinition, args: LegendArgs): ChartLegend { +export function getPieChartLegend( + definition: PieChartDefinition, + args: ChartRuntimeGenerationArgs +): ChartLegend { return { ...getCommonChartLegend(definition, args), }; @@ -73,14 +82,14 @@ export function getPieChartLegend(definition: PieChartDefinition, args: LegendAr export function getComboBarChartLegend( definition: ComboBarChartDefinition, - args: LegendArgs + args: ChartRuntimeGenerationArgs ): ChartLegend { return { ...getBarChartLegend(comboDefinitionToBar(definition), args) }; } export function getWaterfallChartLegend( definition: WaterfallChartDefinition, - args: LegendArgs + args: ChartRuntimeGenerationArgs ): ChartLegend { const fontColor = chartFontColor(definition.background); const negativeColor = definition.negativeValuesColor || CHART_WATERFALL_NEGATIVE_COLOR; @@ -122,14 +131,14 @@ export function getWaterfallChartLegend( export function getPyramidChartLegend( definition: PyramidChartDefinition, - args: LegendArgs + args: ChartRuntimeGenerationArgs ): ChartLegend { return { ...getBarChartLegend(pyramidDefinitionToBar(definition), args) }; } export function getScatterChartLegend( definition: ScatterChartDefinition, - args: LegendArgs + args: ChartRuntimeGenerationArgs ): ChartLegend { return { ...getLineChartLegend(scatterDefinitionToLine(definition), args) }; } diff --git a/src/helpers/figures/charts/runtime/scales.ts b/src/helpers/figures/charts/runtime/scales.ts index 2c67907ad..485f0d31b 100644 --- a/src/helpers/figures/charts/runtime/scales.ts +++ b/src/helpers/figures/charts/runtime/scales.ts @@ -1,8 +1,7 @@ import { ChartOptions } from "chart.js"; -import { Format, Locale } from "../../../../types"; import { - AxisType, BarChartDefinition, + ChartRuntimeGenerationArgs, CommonChartJSDefinition, LineChartDefinition, PieChartDefinition, @@ -22,41 +21,31 @@ import { waterfallDefinitionToBar, } from "./convert_definition"; -// interface ChartScales { -// [key: string]: any; -// } type ChartScales = ChartOptions["scales"]; -interface ScaleArgs { - locale: Locale; - leftAxisFormat?: string; - rightAxisFormat?: string; - trendDatasets?: { data: number[] }[]; - axisType?: AxisType; - labelFormat?: Format; - labels?: string[]; -} - export function getCommonChartScales( definition: CommonChartJSDefinition, - args: ScaleArgs + args: ChartRuntimeGenerationArgs ): ChartScales { return {}; } -export function getBarChartScales(definition: BarChartDefinition, args: ScaleArgs): ChartScales { +export function getBarChartScales( + definition: BarChartDefinition, + args: ChartRuntimeGenerationArgs +): ChartScales { let scales: ChartScales = {}; - const { trendDatasets, locale, leftAxisFormat, rightAxisFormat } = args; + const { trendDatasets, locale, axisFormats } = args; const options = { stacked: definition.stacked, locale: locale }; if (definition.horizontal) { - const format = leftAxisFormat || rightAxisFormat; + const format = axisFormats?.y || axisFormats?.y1; scales.x = getChartAxis(definition, "bottom", "values", { ...options, format }); scales.y = getChartAxis(definition, "left", "labels", options); } else { scales.x = getChartAxis(definition, "bottom", "labels", options); - const leftAxisOptions = { ...options, format: leftAxisFormat }; + const leftAxisOptions = { ...options, format: axisFormats?.y }; scales.y = getChartAxis(definition, "left", "values", leftAxisOptions); - const rightAxisOptions = { ...options, format: rightAxisFormat }; + const rightAxisOptions = { ...options, format: axisFormats?.y1 }; scales.y1 = getChartAxis(definition, "right", "values", rightAxisOptions); } scales = removeFalsyAttributes(scales); @@ -77,14 +66,16 @@ export function getBarChartScales(definition: BarChartDefinition, args: ScaleArg return { ...getCommonChartScales(definition, args), ...scales }; } -export function getLineChartScales(definition: LineChartDefinition, args: ScaleArgs): ChartScales { - const { locale, leftAxisFormat, rightAxisFormat, axisType, trendDatasets, labelFormat, labels } = - args; +export function getLineChartScales( + definition: LineChartDefinition, + args: ChartRuntimeGenerationArgs +): ChartScales { + const { locale, axisType, trendDatasets, labelFormat, labels, axisFormats } = args; const stacked = definition.stacked; let scales: ChartScales = { x: getChartAxis(definition, "bottom", "labels", { locale }), - y: getChartAxis(definition, "left", "values", { locale, stacked, format: leftAxisFormat }), - y1: getChartAxis(definition, "right", "values", { locale, stacked, format: rightAxisFormat }), + y: getChartAxis(definition, "left", "values", { locale, stacked, format: axisFormats?.y }), + y1: getChartAxis(definition, "right", "values", { locale, stacked, format: axisFormats?.y1 }), }; scales = removeFalsyAttributes(scales); @@ -117,20 +108,23 @@ export function getLineChartScales(definition: LineChartDefinition, args: ScaleA return { ...getCommonChartScales(definition, args), ...scales }; } -export function getPieChartScales(definition: PieChartDefinition, args: ScaleArgs): ChartScales { +export function getPieChartScales( + definition: PieChartDefinition, + args: ChartRuntimeGenerationArgs +): ChartScales { return { ...getCommonChartScales(definition, args) }; } export function getComboBarChartScales( definition: ComboBarChartDefinition, - args: ScaleArgs + args: ChartRuntimeGenerationArgs ): ChartScales { return { ...getBarChartScales(comboDefinitionToBar(definition), args) }; } export function getWaterfallChartScales( definition: WaterfallChartDefinition, - args: ScaleArgs + args: ChartRuntimeGenerationArgs ): ChartScales { const scales = getBarChartScales(waterfallDefinitionToBar(definition), args); @@ -144,7 +138,7 @@ export function getWaterfallChartScales( export function getPyramidChartScales( definition: PyramidChartDefinition, - args: ScaleArgs + args: ChartRuntimeGenerationArgs ): ChartScales { const scales = getBarChartScales(pyramidDefinitionToBar(definition), args); const scalesXCallback = scales!.x!.ticks!.callback as (value: number) => string; @@ -155,7 +149,7 @@ export function getPyramidChartScales( export function getScatterChartScales( definition: ScatterChartDefinition, - args: ScaleArgs + args: ChartRuntimeGenerationArgs ): ChartScales { return { ...getLineChartScales(scatterDefinitionToLine(definition), args) }; } diff --git a/src/helpers/figures/charts/runtime/show_values.ts b/src/helpers/figures/charts/runtime/show_values.ts index 8fa1e8eda..11426fadf 100644 --- a/src/helpers/figures/charts/runtime/show_values.ts +++ b/src/helpers/figures/charts/runtime/show_values.ts @@ -1,81 +1,16 @@ import { ChartShowValuesPluginOptions } from "../../../../components/figures/chart/chartJs/chartjs_show_values_plugin"; -import { - BarChartDefinition, - CommonChartJSDefinition, - LineChartDefinition, - PieChartDefinition, - PyramidChartDefinition, - ScatterChartDefinition, - WaterfallChartDefinition, -} from "../../../../types/chart"; -import { ComboBarChartDefinition } from "../../../../types/chart/common_bar_combo"; -import { - comboDefinitionToBar, - pyramidDefinitionToBar, - scatterDefinitionToLine, - waterfallDefinitionToBar, -} from "./convert_definition"; - -// ADRM TODO -interface ShowValuesArgs {} +import { ChartRuntimeGenerationArgs, CommonChartJSDefinition } from "../../../../types/chart"; +import { formatChartDatasetValue } from "../chart_common"; export function getCommonChartShowValues( definition: CommonChartJSDefinition, - args: ShowValuesArgs + args: ChartRuntimeGenerationArgs ): ChartShowValuesPluginOptions { + const { axisFormats, locale } = args; return { horizontal: "horizontal" in definition && definition.horizontal, showValues: "showValues" in definition ? !!definition.showValues : false, background: definition.background, - callback: (value) => value.toString(), // ADRM TODO + callback: formatChartDatasetValue(axisFormats, locale), }; } - -export function getBarChartShowValues( - definition: BarChartDefinition, - args: ShowValuesArgs -): ChartShowValuesPluginOptions { - return { ...getCommonChartShowValues(definition, args) }; -} - -export function getLineChartShowValues( - definition: LineChartDefinition, - args: ShowValuesArgs -): ChartShowValuesPluginOptions { - return { ...getCommonChartShowValues(definition, args) }; -} - -export function getPieChartShowValues( - definition: PieChartDefinition, - args: ShowValuesArgs -): ChartShowValuesPluginOptions { - return { ...getCommonChartShowValues(definition, args) }; -} - -export function getComboBarChartShowValues( - definition: ComboBarChartDefinition, - args: ShowValuesArgs -): ChartShowValuesPluginOptions { - return { ...getBarChartShowValues(comboDefinitionToBar(definition), args) }; -} - -export function getWaterfallChartShowValues( - definition: WaterfallChartDefinition, - args: ShowValuesArgs -): ChartShowValuesPluginOptions { - return { ...getBarChartShowValues(waterfallDefinitionToBar(definition), args) }; -} - -export function getPyramidChartShowValues( - definition: PyramidChartDefinition, - args: ShowValuesArgs -): ChartShowValuesPluginOptions { - return { ...getBarChartShowValues(pyramidDefinitionToBar(definition), args) }; -} - -export function getScatterChartShowValues( - definition: ScatterChartDefinition, - args: ShowValuesArgs -): ChartShowValuesPluginOptions { - return { ...getLineChartShowValues(scatterDefinitionToLine(definition), args) }; -} diff --git a/src/helpers/figures/charts/runtime/tooltip.ts b/src/helpers/figures/charts/runtime/tooltip.ts index 9f7039e74..2d054f559 100644 --- a/src/helpers/figures/charts/runtime/tooltip.ts +++ b/src/helpers/figures/charts/runtime/tooltip.ts @@ -1,13 +1,10 @@ import { TooltipOptions } from "chart.js"; import { _DeepPartialObject } from "chart.js/dist/types/utils"; import { toNumber } from "../../../../functions/helpers"; -import { Format, Locale } from "../../../../types"; import { - AxisType, BarChartDefinition, - ChartAxisFormats, + ChartRuntimeGenerationArgs, CommonChartJSDefinition, - DatasetValues, LineChartDefinition, PieChartDefinition, PyramidChartDefinition, @@ -26,20 +23,10 @@ import { } from "./convert_definition"; type ChartTooltip = _DeepPartialObject>; -interface TooltipArgs { - axisFormats: ChartAxisFormats; - locale: Locale; - axisType?: AxisType; - labelFormat?: Format; - labelValues?: string[]; - dataSetsValues: DatasetValues[]; - leftAxisFormat?: Format; - dataSeriesLabels: (string | undefined)[]; -} export function getCommonChartTooltip( definition: CommonChartJSDefinition, - args: TooltipArgs + args: ChartRuntimeGenerationArgs ): ChartTooltip { const horizontalChart = "horizontal" in definition && definition.horizontal; // ADRM TODO: maybe bar chart specific return { @@ -63,7 +50,7 @@ export function getCommonChartTooltip( export function getBarChartTooltip( definition: BarChartDefinition, - args: TooltipArgs + args: ChartRuntimeGenerationArgs ): ChartTooltip { const commonTooltip = getCommonChartTooltip(definition, args); return { @@ -81,20 +68,21 @@ export function getBarChartTooltip( export function getLineChartTooltip( definition: LineChartDefinition, - args: TooltipArgs + args: ChartRuntimeGenerationArgs ): ChartTooltip { - const { axisType, locale, dataSetsValues, labelFormat, labelValues, leftAxisFormat } = args; + const { axisType, locale, dataSetsValues, labelFormat, labels, axisFormats } = args; const tooltip = getCommonChartTooltip(definition, args); if (axisType === "linear") { tooltip!.callbacks!.label = (tooltipItem) => { const dataSetPoint = dataSetsValues[tooltipItem.datasetIndex!].data![tooltipItem.dataIndex!]; - let label: string | number = tooltipItem.label || labelValues?.values[tooltipItem.dataIndex!]; + let label: string | number = tooltipItem.label || labels[tooltipItem.dataIndex!]; if (typeof label !== "number" && isNumber(label, locale)) { label = toNumber(label, locale); } const formattedX = formatValue(label, { locale, format: labelFormat }); - const formattedY = formatValue(dataSetPoint, { locale, format: leftAxisFormat }); + const axisId = tooltipItem.dataset.yAxisID || "y"; + const formattedY = formatValue(dataSetPoint, { locale, format: axisFormats?.[axisId] }); const dataSetTitle = tooltipItem.dataset.label; return formattedX ? `${dataSetTitle}: (${formattedX}, ${formattedY})` @@ -114,9 +102,10 @@ export function getLineChartTooltip( export function getPieChartTooltip( definition: PieChartDefinition, - args: TooltipArgs + args: ChartRuntimeGenerationArgs ): ChartTooltip { - const { locale, leftAxisFormat } = args; + const { locale, axisFormats } = args; + const format = axisFormats?.y || axisFormats?.y1; return { ...getCommonChartTooltip(definition, args), callbacks: { @@ -130,7 +119,7 @@ export function getPieChartTooltip( const xLabel = tooltipItem.label || tooltipItem.dataset.label; const yLabel = tooltipItem.parsed.y ?? tooltipItem.parsed; - const toolTipFormat = !leftAxisFormat && yLabel >= 1000 ? "#,##" : leftAxisFormat; + const toolTipFormat = !format && yLabel >= 1000 ? "#,##" : format; const yLabelStr = formatValue(yLabel, { format: toolTipFormat, locale }); return xLabel @@ -143,26 +132,28 @@ export function getPieChartTooltip( export function getComboBarChartTooltip( definition: ComboBarChartDefinition, - args: TooltipArgs + args: ChartRuntimeGenerationArgs ): ChartTooltip { return { ...getBarChartTooltip(comboDefinitionToBar(definition), args) }; } export function getWaterfallChartTooltip( definition: WaterfallChartDefinition, - args: TooltipArgs + args: ChartRuntimeGenerationArgs ): ChartTooltip { - const { dataSeriesLabels, locale, leftAxisFormat, labelValues } = args; + const { dataSetsValues, locale, axisFormats, labels } = args; + const format = axisFormats?.y || axisFormats?.y1; + const dataSeriesLabels = dataSetsValues.map((dataSet) => dataSet.label); return { callbacks: { label: function (tooltipItem) { const [lastValue, currentValue] = tooltipItem.raw as [number, number]; const yLabel = currentValue - lastValue; - const dataSeriesIndex = labelValues - ? Math.floor(tooltipItem.dataIndex / labelValues.length) + const dataSeriesIndex = labels.length + ? Math.floor(tooltipItem.dataIndex / labels.length) : 0; const dataSeriesLabel = dataSeriesLabels[dataSeriesIndex]; - const toolTipFormat = !leftAxisFormat && Math.abs(yLabel) > 1000 ? "#,##" : leftAxisFormat; + const toolTipFormat = !format && Math.abs(yLabel) > 1000 ? "#,##" : format; const yLabelStr = formatValue(yLabel, { format: toolTipFormat, locale }); return dataSeriesLabel ? `${dataSeriesLabel}: ${yLabelStr}` : yLabelStr; }, @@ -172,7 +163,7 @@ export function getWaterfallChartTooltip( export function getPyramidChartTooltip( definition: PyramidChartDefinition, - args: TooltipArgs + args: ChartRuntimeGenerationArgs ): ChartTooltip { const tooltip = getBarChartTooltip(pyramidDefinitionToBar(definition), args); return { @@ -189,7 +180,7 @@ export function getPyramidChartTooltip( export function getScatterChartTooltip( definition: ScatterChartDefinition, - args: TooltipArgs + args: ChartRuntimeGenerationArgs ): ChartTooltip { return { ...getLineChartTooltip(scatterDefinitionToLine(definition), args) }; } diff --git a/src/types/chart/chart.ts b/src/types/chart/chart.ts index bd72d1b84..61c29216b 100644 --- a/src/types/chart/chart.ts +++ b/src/types/chart/chart.ts @@ -1,4 +1,4 @@ -import { Align, Color, Format, Range } from "../../types"; +import { Align, CellValue, Color, Format, Locale, Range } from "../../types"; import { XlsxHexColor } from "../xlsx"; import { BarChartDefinition, BarChartRuntime } from "./bar_chart"; import { ComboChartDefinition, ComboChartRuntime } from "./combo_chart"; @@ -177,3 +177,24 @@ export interface ChartData { }; trendDatasets?: { data: number[] }[]; } + +export interface ComputedDataset extends DatasetDesign { + readonly label: string; + readonly data: (CellValue | undefined)[]; + readonly format: Format | undefined; +} +export interface ComputedLabels { + readonly values: string[]; + readonly formattedValues: string[]; + readonly format: Format | undefined; +} + +export interface ChartRuntimeGenerationArgs { + dataSetsValues: DatasetValues[]; + axisFormats: ChartAxisFormats; + labels: string[]; + locale: Locale; + trendDatasets?: { data: number[] }[]; + axisType?: AxisType; + labelFormat?: Format; +}