@fluentui/react-charting 5.23.87 → 5.23.88

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/CHANGELOG.json +40 -1
  2. package/CHANGELOG.md +15 -2
  3. package/dist/react-charting.d.ts +6 -3
  4. package/dist/react-charting.js +1 -1
  5. package/dist/react-charting.min.js +1 -1
  6. package/etc/react-charting.api.md +1 -1
  7. package/lib/components/DeclarativeChart/DeclarativeChart.d.ts +6 -3
  8. package/lib/components/DeclarativeChart/DeclarativeChart.js +9 -8
  9. package/lib/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
  10. package/lib/components/DeclarativeChart/PlotlySchemaAdapter.d.ts +7 -5
  11. package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js +63 -42
  12. package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
  13. package/lib-amd/components/DeclarativeChart/DeclarativeChart.d.ts +6 -3
  14. package/lib-amd/components/DeclarativeChart/DeclarativeChart.js +9 -8
  15. package/lib-amd/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
  16. package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.d.ts +7 -5
  17. package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.js +66 -43
  18. package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
  19. package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.d.ts +6 -3
  20. package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js +9 -8
  21. package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
  22. package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.d.ts +7 -5
  23. package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js +66 -43
  24. package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
  25. package/package.json +5 -5
package/etc/react-charting.api.md CHANGED
@@ -128,8 +128,8 @@ export const DeclarativeChart: React_2.FunctionComponent<DeclarativeChartProps>;
128
128
  export interface DeclarativeChartProps extends React_2.RefAttributes<HTMLDivElement> {
129
129
  chartSchema: Schema;
130
130
  componentRef?: IRefObject<IDeclarativeChart>;
131
+ fluentDataVizColorPalette?: 'default' | 'builtin' | 'override';
131
132
  onSchemaChange?: (eventData: Schema) => void;
132
- useFluentVizColorPalette?: boolean;
133
133
  }
134
134
 
135
135
  // @public
package/lib/components/DeclarativeChart/DeclarativeChart.d.ts CHANGED
@@ -30,10 +30,13 @@ export interface DeclarativeChartProps extends React.RefAttributes<HTMLDivElemen
30
30
  */
31
31
  componentRef?: IRefObject<IDeclarativeChart>;
32
32
  /**
33
- * Optional prop to use Fluent UI color palette for the chart or not.
34
- * @default true
33
+ * Optional prop to specify the color palette for the chart.
34
+ * - 'default': Do not use Fluent UI color palette.
35
+ * - 'builtin': Use Fluent UI color palette.
36
+ * - 'override': Reserved for future use.
37
+ * @default 'builtin'
35
38
  */
36
- useFluentVizColorPalette?: boolean;
39
+ fluentDataVizColorPalette?: 'default' | 'builtin' | 'override';
37
40
  }
38
41
  /**
39
42
  * {@docCategory DeclarativeChart}
package/lib/components/DeclarativeChart/DeclarativeChart.js CHANGED
@@ -81,10 +81,11 @@ export var DeclarativeChart = React.forwardRef(function (props, forwardedRef) {
81
81
  componentRef: chartRef,
82
82
  calloutProps: { layerProps: { eventBubblingEnabled: true } },
83
83
  };
84
+ var useFluentVizColorPalette = props.fluentDataVizColorPalette === 'builtin';
84
85
  var renderLineArea = function (plotlyData, isAreaChart) {
85
86
  var _a;
86
87
  var isScatterMarkers = ['markers', 'text+markers', 'markers+text'].includes((_a = plotlyData[0]) === null || _a === void 0 ? void 0 : _a.mode);
87
- var chartProps = __assign(__assign({}, transformPlotlyJsonToScatterChartProps({ data: plotlyData, layout: plotlyInput.layout }, isAreaChart, colorMap, props.useFluentVizColorPalette, isDarkTheme)), commonProps);
88
+ var chartProps = __assign(__assign({}, transformPlotlyJsonToScatterChartProps({ data: plotlyData, layout: plotlyInput.layout }, isAreaChart, colorMap, useFluentVizColorPalette, isDarkTheme)), commonProps);
88
89
  if (isAreaChart) {
89
90
  return React.createElement(ResponsiveAreaChart, __assign({}, chartProps));
90
91
  }
@@ -114,7 +115,7 @@ export var DeclarativeChart = React.forwardRef(function (props, forwardedRef) {
114
115
  if (isAreaChart) {
115
116
  throw new Error('Fallback to VerticalStackedBarChart is not allowed for Area Charts.');
116
117
  }
117
- return (React.createElement(ResponsiveVerticalStackedBarChart, __assign({}, transformPlotlyJsonToVSBCProps(plotlyInputWithValidData, colorMap, isDarkTheme, fallbackVSBC), commonProps)));
118
+ return (React.createElement(ResponsiveVerticalStackedBarChart, __assign({}, transformPlotlyJsonToVSBCProps(plotlyInputWithValidData, colorMap, useFluentVizColorPalette, isDarkTheme, fallbackVSBC), commonProps)));
118
119
  };
119
120
  var exportAsImage = React.useCallback(function (opts) {
120
121
  return new Promise(function (resolve, reject) {
@@ -132,13 +133,13 @@ export var DeclarativeChart = React.forwardRef(function (props, forwardedRef) {
132
133
  }); }, [exportAsImage]);
133
134
  switch (chart.type) {
134
135
  case 'donut':
135
- return (React.createElement(ResponsiveDonutChart, __assign({}, transformPlotlyJsonToDonutProps(plotlyInputWithValidData, colorMap, props.useFluentVizColorPalette, isDarkTheme), commonProps)));
136
+ return (React.createElement(ResponsiveDonutChart, __assign({}, transformPlotlyJsonToDonutProps(plotlyInputWithValidData, colorMap, useFluentVizColorPalette, isDarkTheme), commonProps)));
136
137
  case 'horizontalbar':
137
- return (React.createElement(ResponsiveHorizontalBarChartWithAxis, __assign({}, transformPlotlyJsonToHorizontalBarWithAxisProps(plotlyInputWithValidData, colorMap, isDarkTheme), commonProps)));
138
+ return (React.createElement(ResponsiveHorizontalBarChartWithAxis, __assign({}, transformPlotlyJsonToHorizontalBarWithAxisProps(plotlyInputWithValidData, colorMap, useFluentVizColorPalette, isDarkTheme), commonProps)));
138
139
  case 'groupedverticalbar':
139
- return (React.createElement(ResponsiveGroupedVerticalBarChart, __assign({}, transformPlotlyJsonToGVBCProps(plotlyInputWithValidData, colorMap, isDarkTheme), commonProps)));
140
+ return (React.createElement(ResponsiveGroupedVerticalBarChart, __assign({}, transformPlotlyJsonToGVBCProps(plotlyInputWithValidData, colorMap, useFluentVizColorPalette, isDarkTheme), commonProps)));
140
141
  case 'verticalstackedbar':
141
- return (React.createElement(ResponsiveVerticalStackedBarChart, __assign({}, transformPlotlyJsonToVSBCProps(plotlyInputWithValidData, colorMap, isDarkTheme), commonProps)));
142
+ return (React.createElement(ResponsiveVerticalStackedBarChart, __assign({}, transformPlotlyJsonToVSBCProps(plotlyInputWithValidData, colorMap, useFluentVizColorPalette, isDarkTheme), commonProps)));
142
143
  case 'heatmap':
143
144
  return (React.createElement(ResponsiveHeatMapChart, __assign({}, transformPlotlyJsonToHeatmapProps(plotlyInputWithValidData), commonProps, { legendProps: {} })));
144
145
  case 'sankey':
@@ -146,7 +147,7 @@ export var DeclarativeChart = React.forwardRef(function (props, forwardedRef) {
146
147
  case 'gauge':
147
148
  return (React.createElement(ResponsiveGaugeChart, __assign({}, transformPlotlyJsonToGaugeProps(plotlyInputWithValidData, colorMap, isDarkTheme), commonProps)));
148
149
  case 'verticalbar':
149
- return (React.createElement(ResponsiveVerticalBarChart, __assign({}, transformPlotlyJsonToVBCProps(plotlyInputWithValidData, colorMap, isDarkTheme), commonProps)));
150
+ return (React.createElement(ResponsiveVerticalBarChart, __assign({}, transformPlotlyJsonToVBCProps(plotlyInputWithValidData, colorMap, useFluentVizColorPalette, isDarkTheme), commonProps)));
150
151
  case 'area':
151
152
  case 'line':
152
153
  case 'fallback':
@@ -164,6 +165,6 @@ export var DeclarativeChart = React.forwardRef(function (props, forwardedRef) {
164
165
  });
165
166
  DeclarativeChart.displayName = 'DeclarativeChart';
166
167
  DeclarativeChart.defaultProps = {
167
- useFluentVizColorPalette: true,
168
+ fluentDataVizColorPalette: 'builtin',
168
169
  };
169
170
  //# sourceMappingURL=DeclarativeChart.js.map
package/lib/components/DeclarativeChart/DeclarativeChart.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DeclarativeChart.js","sourceRoot":"../src/","sources":["components/DeclarativeChart/DeclarativeChart.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport * as React from 'react';\nimport { useTheme } from '@fluentui/react';\nimport { IRefObject } from '@fluentui/react/lib/Utilities';\nimport { DonutChart } from '../DonutChart/index';\nimport { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';\nimport { decodeBase64Fields } from '@fluentui/chart-utilities';\nimport type { Data, PlotData, PlotlySchema, OutputChartType } from '@fluentui/chart-utilities';\nimport {\n isArrayOrTypedArray,\n isDateArray,\n isNumberArray,\n isYearArray,\n mapFluentChart,\n sanitizeJson,\n} from '@fluentui/chart-utilities';\n\nimport {\n isMonthArray,\n correctYearMonth,\n transformPlotlyJsonToDonutProps,\n transformPlotlyJsonToVSBCProps,\n transformPlotlyJsonToScatterChartProps,\n transformPlotlyJsonToHorizontalBarWithAxisProps,\n transformPlotlyJsonToHeatmapProps,\n transformPlotlyJsonToSankeyProps,\n transformPlotlyJsonToGaugeProps,\n transformPlotlyJsonToGVBCProps,\n transformPlotlyJsonToVBCProps,\n projectPolarToCartesian,\n} from './PlotlySchemaAdapter';\nimport { LineChart, ILineChartProps } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart, IAreaChartProps } from '../AreaChart/index';\nimport { HeatMapChart } from '../HeatMapChart/index';\nimport { SankeyChart } from '../SankeyChart/SankeyChart';\nimport { GaugeChart } from '../GaugeChart/index';\nimport { GroupedVerticalBarChart } from '../GroupedVerticalBarChart/index';\nimport { VerticalBarChart } from '../VerticalBarChart/index';\nimport { IChart, IImageExportOptions } from '../../types/index';\nimport { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer';\n\nconst ResponsiveDonutChart = withResponsiveContainer(DonutChart);\nconst ResponsiveVerticalStackedBarChart = withResponsiveContainer(VerticalStackedBarChart);\nconst ResponsiveLineChart = withResponsiveContainer(LineChart);\nconst ResponsiveHorizontalBarChartWithAxis = withResponsiveContainer(HorizontalBarChartWithAxis);\nconst ResponsiveAreaChart = withResponsiveContainer(AreaChart);\nconst ResponsiveHeatMapChart = withResponsiveContainer(HeatMapChart);\nconst ResponsiveSankeyChart = withResponsiveContainer(SankeyChart);\nconst ResponsiveGaugeChart = withResponsiveContainer(GaugeChart);\nconst ResponsiveGroupedVerticalBarChart = withResponsiveContainer(GroupedVerticalBarChart);\nconst ResponsiveVerticalBarChart = withResponsiveContainer(VerticalBarChart);\n\n/**\n * DeclarativeChart schema.\n * {@docCategory DeclarativeChart}\n */\nexport interface Schema {\n /**\n * Plotly schema represented as JSON object\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n plotlySchema: any;\n}\n\n/**\n * DeclarativeChart props.\n * {@docCategory DeclarativeChart}\n */\nexport interface DeclarativeChartProps extends React.RefAttributes<HTMLDivElement> {\n /**\n * The schema representing the chart data, layout and configuration\n */\n chartSchema: Schema;\n\n /**\n * Callback when an event occurs\n */\n onSchemaChange?: (eventData: Schema) => void;\n\n /**\n * Optional callback to access the IDeclarativeChart interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n */\n componentRef?: IRefObject<IDeclarativeChart>;\n\n /**\n * Optional prop to use Fluent UI color palette for the chart or not.\n * @default true\n */\n useFluentVizColorPalette?: boolean;\n}\n\n/**\n * {@docCategory DeclarativeChart}\n */\nexport interface IDeclarativeChart {\n exportAsImage: (opts?: IImageExportOptions) => Promise<string>;\n}\n\nconst useColorMapping = () => {\n const colorMap = React.useRef(new Map<string, string>());\n return colorMap;\n};\n\n/**\n * DeclarativeChart component.\n * {@docCategory DeclarativeChart}\n */\nexport const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> = React.forwardRef<\n HTMLDivElement,\n DeclarativeChartProps\n>((props, forwardedRef) => {\n const { plotlySchema } = sanitizeJson(props.chartSchema);\n const chart: OutputChartType = mapFluentChart(plotlySchema);\n if (!chart.isValid) {\n throw new Error(`Invalid chart schema: ${chart.errorMessage}`);\n }\n let plotlyInput = plotlySchema as PlotlySchema;\n try {\n plotlyInput = decodeBase64Fields(plotlyInput);\n } catch (error) {\n throw new Error(`Failed to decode plotly schema: ${error}`);\n }\n const plotlyInputWithValidData: PlotlySchema = {\n ...plotlyInput,\n data: chart.validTracesInfo!.map(trace => plotlyInput.data[trace[0]]),\n };\n\n let { selectedLegends } = plotlySchema;\n const colorMap = useColorMapping();\n const theme = useTheme();\n const isDarkTheme = theme?.isInverted ?? false;\n const chartRef = React.useRef<IChart>(null);\n\n if (!isArrayOrTypedArray(selectedLegends)) {\n selectedLegends = [];\n }\n\n const [activeLegends, setActiveLegends] = React.useState<string[]>(selectedLegends);\n const onActiveLegendsChange = (keys: string[]) => {\n setActiveLegends(keys);\n if (props.onSchemaChange) {\n props.onSchemaChange({ plotlySchema: { plotlyInput, selectedLegends: keys } });\n }\n };\n\n React.useEffect(() => {\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { plotlySchema } = sanitizeJson(props.chartSchema);\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { selectedLegends } = plotlySchema;\n setActiveLegends(selectedLegends ?? []);\n }, [props.chartSchema]);\n\n const multiSelectLegendProps = {\n canSelectMultipleLegends: true,\n onChange: onActiveLegendsChange,\n selectedLegends: activeLegends,\n };\n\n const commonProps = {\n legendProps: multiSelectLegendProps,\n componentRef: chartRef,\n calloutProps: { layerProps: { eventBubblingEnabled: true } },\n };\n\n const renderLineArea = (plotlyData: Data[], isAreaChart: boolean): JSX.Element => {\n const isScatterMarkers = ['markers', 'text+markers', 'markers+text'].includes((plotlyData[0] as PlotData)?.mode);\n const chartProps: ILineChartProps | IAreaChartProps = {\n ...transformPlotlyJsonToScatterChartProps(\n { data: plotlyData, layout: plotlyInput.layout },\n isAreaChart,\n colorMap,\n props.useFluentVizColorPalette!,\n isDarkTheme,\n ),\n ...commonProps,\n };\n if (isAreaChart) {\n return <ResponsiveAreaChart {...chartProps} />;\n }\n return <ResponsiveLineChart {...chartProps} lineMode={isScatterMarkers ? 'scatter' : 'default'} />;\n };\n\n const checkAndRenderChart = (isAreaChart: boolean = false) => {\n let fallbackVSBC = false;\n const xValues = (plotlyInputWithValidData.data[0] as PlotData).x;\n const isXDate = isDateArray(xValues);\n const isXNumber = isNumberArray(xValues);\n const isXMonth = isMonthArray(xValues);\n\n // Consider year as categorical variable not numeric continuous variable\n // Also year is not considered a date variable as it is represented as a point\n // in time and brings additional complexity of handling timezone and locale\n // formatting given the current design of the charting library\n const isXYear = isYearArray(xValues);\n\n if ((isXDate || isXNumber) && !isXYear) {\n return renderLineArea(plotlyInputWithValidData.data, isAreaChart);\n } else if (isXMonth) {\n const updatedData = plotlyInputWithValidData.data.map((dataPoint: PlotData) => ({\n ...dataPoint,\n x: correctYearMonth(dataPoint.x),\n }));\n return renderLineArea(updatedData, isAreaChart);\n }\n // Unsupported schema, render as VerticalStackedBarChart\n fallbackVSBC = true;\n if (isAreaChart) {\n throw new Error('Fallback to VerticalStackedBarChart is not allowed for Area Charts.');\n }\n return (\n <ResponsiveVerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(plotlyInputWithValidData, colorMap, isDarkTheme, fallbackVSBC)}\n {...commonProps}\n />\n );\n };\n\n const exportAsImage = React.useCallback(\n (opts?: IImageExportOptions): Promise<string> => {\n return new Promise((resolve, reject) => {\n if (!chartRef.current || typeof chartRef.current.toImage !== 'function') {\n return reject(Error('Chart cannot be exported as image'));\n }\n\n chartRef.current\n .toImage({\n background: theme.semanticColors.bodyBackground,\n scale: 5,\n ...opts,\n })\n .then(resolve)\n .catch(reject);\n });\n },\n [theme],\n );\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n exportAsImage,\n }),\n [exportAsImage],\n );\n\n switch (chart.type) {\n case 'donut':\n return (\n <ResponsiveDonutChart\n {...transformPlotlyJsonToDonutProps(\n plotlyInputWithValidData,\n colorMap,\n props.useFluentVizColorPalette!,\n isDarkTheme,\n )}\n {...commonProps}\n />\n );\n case 'horizontalbar':\n return (\n <ResponsiveHorizontalBarChartWithAxis\n {...transformPlotlyJsonToHorizontalBarWithAxisProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'groupedverticalbar':\n return (\n <ResponsiveGroupedVerticalBarChart\n {...transformPlotlyJsonToGVBCProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'verticalstackedbar':\n return (\n <ResponsiveVerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'heatmap':\n return (\n <ResponsiveHeatMapChart\n {...transformPlotlyJsonToHeatmapProps(plotlyInputWithValidData)}\n {...commonProps}\n legendProps={{}}\n />\n );\n case 'sankey':\n return (\n <ResponsiveSankeyChart\n {...transformPlotlyJsonToSankeyProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'gauge':\n return (\n <ResponsiveGaugeChart\n {...transformPlotlyJsonToGaugeProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'verticalbar':\n return (\n <ResponsiveVerticalBarChart\n {...transformPlotlyJsonToVBCProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'area':\n case 'line':\n case 'fallback':\n case 'scatterpolar':\n if (chart.type === 'scatterpolar') {\n const cartesianProjection = projectPolarToCartesian(plotlyInputWithValidData);\n plotlyInputWithValidData.data = cartesianProjection.data;\n }\n // Need recheck for area chart as we don't have ability to check for valid months in previous step\n const isAreaChart = plotlyInputWithValidData.data.some(\n (series: PlotData) => series.fill === 'tonexty' || series.fill === 'tozeroy' || !!series.stackgroup,\n );\n return checkAndRenderChart(isAreaChart);\n default:\n throw new Error(`Unsupported chart type :${plotlyInputWithValidData.data[0]?.type}`);\n }\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\nDeclarativeChart.defaultProps = {\n useFluentVizColorPalette: true,\n};\n"]}
1
+ {"version":3,"file":"DeclarativeChart.js","sourceRoot":"../src/","sources":["components/DeclarativeChart/DeclarativeChart.tsx"],"names":[],"mappings":";AAAA,yDAAyD;AACzD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAE/D,OAAO,EACL,mBAAmB,EACnB,WAAW,EACX,aAAa,EACb,WAAW,EACX,cAAc,EACd,YAAY,GACb,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EACL,YAAY,EACZ,gBAAgB,EAChB,+BAA+B,EAC/B,8BAA8B,EAC9B,sCAAsC,EACtC,+CAA+C,EAC/C,iCAAiC,EACjC,gCAAgC,EAChC,+BAA+B,EAC/B,8BAA8B,EAC9B,6BAA6B,EAC7B,uBAAuB,GACxB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAmB,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,0BAA0B,EAAE,MAAM,qCAAqC,CAAC;AACjF,OAAO,EAAE,SAAS,EAAmB,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAE7D,OAAO,EAAE,uBAAuB,EAAE,MAAM,gDAAgD,CAAC;AAEzF,IAAM,oBAAoB,GAAG,uBAAuB,CAAC,UAAU,CAAC,CAAC;AACjE,IAAM,iCAAiC,GAAG,uBAAuB,CAAC,uBAAuB,CAAC,CAAC;AAC3F,IAAM,mBAAmB,GAAG,uBAAuB,CAAC,SAAS,CAAC,CAAC;AAC/D,IAAM,oCAAoC,GAAG,uBAAuB,CAAC,0BAA0B,CAAC,CAAC;AACjG,IAAM,mBAAmB,GAAG,uBAAuB,CAAC,SAAS,CAAC,CAAC;AAC/D,IAAM,sBAAsB,GAAG,uBAAuB,CAAC,YAAY,CAAC,CAAC;AACrE,IAAM,qBAAqB,GAAG,uBAAuB,CAAC,WAAW,CAAC,CAAC;AACnE,IAAM,oBAAoB,GAAG,uBAAuB,CAAC,UAAU,CAAC,CAAC;AACjE,IAAM,iCAAiC,GAAG,uBAAuB,CAAC,uBAAuB,CAAC,CAAC;AAC3F,IAAM,0BAA0B,GAAG,uBAAuB,CAAC,gBAAgB,CAAC,CAAC;AAoD7E,IAAM,eAAe,GAAG;IACtB,IAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,GAAG,EAAkB,CAAC,CAAC;IACzD,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,IAAM,gBAAgB,GAAmD,KAAK,CAAC,UAAU,CAG9F,UAAC,KAAK,EAAE,YAAY;;IACZ,IAAA,YAAY,GAAK,YAAY,CAAC,KAAK,CAAC,WAAW,CAAC,aAApC,CAAqC;IACzD,IAAM,KAAK,GAAoB,cAAc,CAAC,YAAY,CAAC,CAAC;IAC5D,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;QACnB,MAAM,IAAI,KAAK,CAAC,gCAAyB,KAAK,CAAC,YAAY,CAAE,CAAC,CAAC;IACjE,CAAC;IACD,IAAI,WAAW,GAAG,YAA4B,CAAC;IAC/C,IAAI,CAAC;QACH,WAAW,GAAG,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAChD,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,MAAM,IAAI,KAAK,CAAC,0CAAmC,KAAK,CAAE,CAAC,CAAC;IAC9D,CAAC;IACD,IAAM,wBAAwB,yBACzB,WAAW,KACd,IAAI,EAAE,KAAK,CAAC,eAAgB,CAAC,GAAG,CAAC,UAAA,KAAK,IAAI,OAAA,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAA1B,CAA0B,CAAC,GACtE,CAAC;IAEI,IAAA,eAAe,GAAK,YAAY,gBAAjB,CAAkB;IACvC,IAAM,QAAQ,GAAG,eAAe,EAAE,CAAC;IACnC,IAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,IAAM,WAAW,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,UAAU,mCAAI,KAAK,CAAC;IAC/C,IAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAS,IAAI,CAAC,CAAC;IAE5C,IAAI,CAAC,mBAAmB,CAAC,eAAe,CAAC,EAAE,CAAC;QAC1C,eAAe,GAAG,EAAE,CAAC;IACvB,CAAC;IAEK,IAAA,KAAoC,KAAK,CAAC,QAAQ,CAAW,eAAe,CAAC,EAA5E,aAAa,QAAA,EAAE,gBAAgB,QAA6C,CAAC;IACpF,IAAM,qBAAqB,GAAG,UAAC,IAAc;QAC3C,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACvB,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;YACzB,KAAK,CAAC,cAAc,CAAC,EAAE,YAAY,EAAE,EAAE,WAAW,aAAA,EAAE,eAAe,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;QACjF,CAAC;IACH,CAAC,CAAC;IAEF,KAAK,CAAC,SAAS,CAAC;QACd,wDAAwD;QAChD,IAAA,YAAY,GAAK,YAAY,CAAC,KAAK,CAAC,WAAW,CAAC,aAApC,CAAqC;QACzD,wDAAwD;QAChD,IAAA,eAAe,GAAK,YAAY,gBAAjB,CAAkB;QACzC,gBAAgB,CAAC,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,EAAE,CAAC,CAAC;IAC1C,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAExB,IAAM,sBAAsB,GAAG;QAC7B,wBAAwB,EAAE,IAAI;QAC9B,QAAQ,EAAE,qBAAqB;QAC/B,eAAe,EAAE,aAAa;KAC/B,CAAC;IAEF,IAAM,WAAW,GAAG;QAClB,WAAW,EAAE,sBAAsB;QACnC,YAAY,EAAE,QAAQ;QACtB,YAAY,EAAE,EAAE,UAAU,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,EAAE;KAC7D,CAAC;IAEF,IAAM,wBAAwB,GAAG,KAAK,CAAC,yBAAyB,KAAK,SAAS,CAAC;IAE/E,IAAM,cAAc,GAAG,UAAC,UAAkB,EAAE,WAAoB;;QAC9D,IAAM,gBAAgB,GAAG,CAAC,SAAS,EAAE,cAAc,EAAE,cAAc,CAAC,CAAC,QAAQ,CAAC,MAAC,UAAU,CAAC,CAAC,CAAc,0CAAE,IAAI,CAAC,CAAC;QACjH,IAAM,UAAU,yBACX,sCAAsC,CACvC,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,CAAC,MAAM,EAAE,EAChD,WAAW,EACX,QAAQ,EACR,wBAAyB,EACzB,WAAW,CACZ,GACE,WAAW,CACf,CAAC;QACF,IAAI,WAAW,EAAE,CAAC;YAChB,OAAO,oBAAC,mBAAmB,eAAK,UAAU,EAAI,CAAC;QACjD,CAAC;QACD,OAAO,oBAAC,mBAAmB,eAAK,UAAU,IAAE,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC;IACrG,CAAC,CAAC;IAEF,IAAM,mBAAmB,GAAG,UAAC,WAA4B;QAA5B,4BAAA,EAAA,mBAA4B;QACvD,IAAI,YAAY,GAAG,KAAK,CAAC;QACzB,IAAM,OAAO,GAAI,wBAAwB,CAAC,IAAI,CAAC,CAAC,CAAc,CAAC,CAAC,CAAC;QACjE,IAAM,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;QACrC,IAAM,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;QACzC,IAAM,QAAQ,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC;QAEvC,wEAAwE;QACxE,8EAA8E;QAC9E,2EAA2E;QAC3E,8DAA8D;QAC9D,IAAM,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;QAErC,IAAI,CAAC,OAAO,IAAI,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YACvC,OAAO,cAAc,CAAC,wBAAwB,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;QACpE,CAAC;aAAM,IAAI,QAAQ,EAAE,CAAC;YACpB,IAAM,WAAW,GAAG,wBAAwB,CAAC,IAAI,CAAC,GAAG,CAAC,UAAC,SAAmB,IAAK,OAAA,uBAC1E,SAAS,KACZ,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAC,CAAC,IAChC,EAH6E,CAG7E,CAAC,CAAC;YACJ,OAAO,cAAc,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;QAClD,CAAC;QACD,wDAAwD;QACxD,YAAY,GAAG,IAAI,CAAC;QACpB,IAAI,WAAW,EAAE,CAAC;YAChB,MAAM,IAAI,KAAK,CAAC,qEAAqE,CAAC,CAAC;QACzF,CAAC;QACD,OAAO,CACL,oBAAC,iCAAiC,eAC5B,8BAA8B,CAChC,wBAAwB,EACxB,QAAQ,EACR,wBAAwB,EACxB,WAAW,EACX,YAAY,CACb,EACG,WAAW,EACf,CACH,CAAC;IACJ,CAAC,CAAC;IAEF,IAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CACrC,UAAC,IAA0B;QACzB,OAAO,IAAI,OAAO,CAAC,UAAC,OAAO,EAAE,MAAM;YACjC,IAAI,CAAC,QAAQ,CAAC,OAAO,IAAI,OAAO,QAAQ,CAAC,OAAO,CAAC,OAAO,KAAK,UAAU,EAAE,CAAC;gBACxE,OAAO,MAAM,CAAC,KAAK,CAAC,mCAAmC,CAAC,CAAC,CAAC;YAC5D,CAAC;YAED,QAAQ,CAAC,OAAO;iBACb,OAAO,YACN,UAAU,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,EAC/C,KAAK,EAAE,CAAC,IACL,IAAI,EACP;iBACD,IAAI,CAAC,OAAO,CAAC;iBACb,KAAK,CAAC,MAAM,CAAC,CAAC;QACnB,CAAC,CAAC,CAAC;IACL,CAAC,EACD,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,KAAK,CAAC,mBAAmB,CACvB,KAAK,CAAC,YAAY,EAClB,cAAM,OAAA,CAAC;QACL,aAAa,eAAA;KACd,CAAC,EAFI,CAEJ,EACF,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,QAAQ,KAAK,CAAC,IAAI,EAAE,CAAC;QACnB,KAAK,OAAO;YACV,OAAO,CACL,oBAAC,oBAAoB,eACf,+BAA+B,CACjC,wBAAwB,EACxB,QAAQ,EACR,wBAAwB,EACxB,WAAW,CACZ,EACG,WAAW,EACf,CACH,CAAC;QACJ,KAAK,eAAe;YAClB,OAAO,CACL,oBAAC,oCAAoC,eAC/B,+CAA+C,CACjD,wBAAwB,EACxB,QAAQ,EACR,wBAAwB,EACxB,WAAW,CACZ,EACG,WAAW,EACf,CACH,CAAC;QACJ,KAAK,oBAAoB;YACvB,OAAO,CACL,oBAAC,iCAAiC,eAC5B,8BAA8B,CAAC,wBAAwB,EAAE,QAAQ,EAAE,wBAAwB,EAAE,WAAW,CAAC,EACzG,WAAW,EACf,CACH,CAAC;QACJ,KAAK,oBAAoB;YACvB,OAAO,CACL,oBAAC,iCAAiC,eAC5B,8BAA8B,CAAC,wBAAwB,EAAE,QAAQ,EAAE,wBAAwB,EAAE,WAAW,CAAC,EACzG,WAAW,EACf,CACH,CAAC;QACJ,KAAK,SAAS;YACZ,OAAO,CACL,oBAAC,sBAAsB,eACjB,iCAAiC,CAAC,wBAAwB,CAAC,EAC3D,WAAW,IACf,WAAW,EAAE,EAAE,IACf,CACH,CAAC;QACJ,KAAK,QAAQ;YACX,OAAO,CACL,oBAAC,qBAAqB,eAChB,gCAAgC,CAAC,wBAAwB,EAAE,QAAQ,EAAE,WAAW,CAAC,EACjF,WAAW,EACf,CACH,CAAC;QACJ,KAAK,OAAO;YACV,OAAO,CACL,oBAAC,oBAAoB,eACf,+BAA+B,CAAC,wBAAwB,EAAE,QAAQ,EAAE,WAAW,CAAC,EAChF,WAAW,EACf,CACH,CAAC;QACJ,KAAK,aAAa;YAChB,OAAO,CACL,oBAAC,0BAA0B,eACrB,6BAA6B,CAAC,wBAAwB,EAAE,QAAQ,EAAE,wBAAwB,EAAE,WAAW,CAAC,EACxG,WAAW,EACf,CACH,CAAC;QACJ,KAAK,MAAM,CAAC;QACZ,KAAK,MAAM,CAAC;QACZ,KAAK,UAAU,CAAC;QAChB,KAAK,cAAc;YACjB,IAAI,KAAK,CAAC,IAAI,KAAK,cAAc,EAAE,CAAC;gBAClC,IAAM,mBAAmB,GAAG,uBAAuB,CAAC,wBAAwB,CAAC,CAAC;gBAC9E,wBAAwB,CAAC,IAAI,GAAG,mBAAmB,CAAC,IAAI,CAAC;YAC3D,CAAC;YACD,kGAAkG;YAClG,IAAM,WAAW,GAAG,wBAAwB,CAAC,IAAI,CAAC,IAAI,CACpD,UAAC,MAAgB,IAAK,OAAA,MAAM,CAAC,IAAI,KAAK,SAAS,IAAI,MAAM,CAAC,IAAI,KAAK,SAAS,IAAI,CAAC,CAAC,MAAM,CAAC,UAAU,EAA7E,CAA6E,CACpG,CAAC;YACF,OAAO,mBAAmB,CAAC,WAAW,CAAC,CAAC;QAC1C;YACE,MAAM,IAAI,KAAK,CAAC,kCAA2B,MAAA,wBAAwB,CAAC,IAAI,CAAC,CAAC,CAAC,0CAAE,IAAI,CAAE,CAAC,CAAC;IACzF,CAAC;AACH,CAAC,CAAC,CAAC;AACH,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAClD,gBAAgB,CAAC,YAAY,GAAG;IAC9B,yBAAyB,EAAE,SAAS;CACrC,CAAC","sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport * as React from 'react';\nimport { useTheme } from '@fluentui/react';\nimport { IRefObject } from '@fluentui/react/lib/Utilities';\nimport { DonutChart } from '../DonutChart/index';\nimport { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';\nimport { decodeBase64Fields } from '@fluentui/chart-utilities';\nimport type { Data, PlotData, PlotlySchema, OutputChartType } from '@fluentui/chart-utilities';\nimport {\n isArrayOrTypedArray,\n isDateArray,\n isNumberArray,\n isYearArray,\n mapFluentChart,\n sanitizeJson,\n} from '@fluentui/chart-utilities';\n\nimport {\n isMonthArray,\n correctYearMonth,\n transformPlotlyJsonToDonutProps,\n transformPlotlyJsonToVSBCProps,\n transformPlotlyJsonToScatterChartProps,\n transformPlotlyJsonToHorizontalBarWithAxisProps,\n transformPlotlyJsonToHeatmapProps,\n transformPlotlyJsonToSankeyProps,\n transformPlotlyJsonToGaugeProps,\n transformPlotlyJsonToGVBCProps,\n transformPlotlyJsonToVBCProps,\n projectPolarToCartesian,\n} from './PlotlySchemaAdapter';\nimport { LineChart, ILineChartProps } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart, IAreaChartProps } from '../AreaChart/index';\nimport { HeatMapChart } from '../HeatMapChart/index';\nimport { SankeyChart } from '../SankeyChart/SankeyChart';\nimport { GaugeChart } from '../GaugeChart/index';\nimport { GroupedVerticalBarChart } from '../GroupedVerticalBarChart/index';\nimport { VerticalBarChart } from '../VerticalBarChart/index';\nimport { IChart, IImageExportOptions } from '../../types/index';\nimport { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer';\n\nconst ResponsiveDonutChart = withResponsiveContainer(DonutChart);\nconst ResponsiveVerticalStackedBarChart = withResponsiveContainer(VerticalStackedBarChart);\nconst ResponsiveLineChart = withResponsiveContainer(LineChart);\nconst ResponsiveHorizontalBarChartWithAxis = withResponsiveContainer(HorizontalBarChartWithAxis);\nconst ResponsiveAreaChart = withResponsiveContainer(AreaChart);\nconst ResponsiveHeatMapChart = withResponsiveContainer(HeatMapChart);\nconst ResponsiveSankeyChart = withResponsiveContainer(SankeyChart);\nconst ResponsiveGaugeChart = withResponsiveContainer(GaugeChart);\nconst ResponsiveGroupedVerticalBarChart = withResponsiveContainer(GroupedVerticalBarChart);\nconst ResponsiveVerticalBarChart = withResponsiveContainer(VerticalBarChart);\n\n/**\n * DeclarativeChart schema.\n * {@docCategory DeclarativeChart}\n */\nexport interface Schema {\n /**\n * Plotly schema represented as JSON object\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n plotlySchema: any;\n}\n\n/**\n * DeclarativeChart props.\n * {@docCategory DeclarativeChart}\n */\nexport interface DeclarativeChartProps extends React.RefAttributes<HTMLDivElement> {\n /**\n * The schema representing the chart data, layout and configuration\n */\n chartSchema: Schema;\n\n /**\n * Callback when an event occurs\n */\n onSchemaChange?: (eventData: Schema) => void;\n\n /**\n * Optional callback to access the IDeclarativeChart interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n */\n componentRef?: IRefObject<IDeclarativeChart>;\n\n /**\n * Optional prop to specify the color palette for the chart.\n * - 'default': Do not use Fluent UI color palette.\n * - 'builtin': Use Fluent UI color palette.\n * - 'override': Reserved for future use.\n * @default 'builtin'\n */\n fluentDataVizColorPalette?: 'default' | 'builtin' | 'override';\n}\n\n/**\n * {@docCategory DeclarativeChart}\n */\nexport interface IDeclarativeChart {\n exportAsImage: (opts?: IImageExportOptions) => Promise<string>;\n}\n\nconst useColorMapping = () => {\n const colorMap = React.useRef(new Map<string, string>());\n return colorMap;\n};\n\n/**\n * DeclarativeChart component.\n * {@docCategory DeclarativeChart}\n */\nexport const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> = React.forwardRef<\n HTMLDivElement,\n DeclarativeChartProps\n>((props, forwardedRef) => {\n const { plotlySchema } = sanitizeJson(props.chartSchema);\n const chart: OutputChartType = mapFluentChart(plotlySchema);\n if (!chart.isValid) {\n throw new Error(`Invalid chart schema: ${chart.errorMessage}`);\n }\n let plotlyInput = plotlySchema as PlotlySchema;\n try {\n plotlyInput = decodeBase64Fields(plotlyInput);\n } catch (error) {\n throw new Error(`Failed to decode plotly schema: ${error}`);\n }\n const plotlyInputWithValidData: PlotlySchema = {\n ...plotlyInput,\n data: chart.validTracesInfo!.map(trace => plotlyInput.data[trace[0]]),\n };\n\n let { selectedLegends } = plotlySchema;\n const colorMap = useColorMapping();\n const theme = useTheme();\n const isDarkTheme = theme?.isInverted ?? false;\n const chartRef = React.useRef<IChart>(null);\n\n if (!isArrayOrTypedArray(selectedLegends)) {\n selectedLegends = [];\n }\n\n const [activeLegends, setActiveLegends] = React.useState<string[]>(selectedLegends);\n const onActiveLegendsChange = (keys: string[]) => {\n setActiveLegends(keys);\n if (props.onSchemaChange) {\n props.onSchemaChange({ plotlySchema: { plotlyInput, selectedLegends: keys } });\n }\n };\n\n React.useEffect(() => {\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { plotlySchema } = sanitizeJson(props.chartSchema);\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { selectedLegends } = plotlySchema;\n setActiveLegends(selectedLegends ?? []);\n }, [props.chartSchema]);\n\n const multiSelectLegendProps = {\n canSelectMultipleLegends: true,\n onChange: onActiveLegendsChange,\n selectedLegends: activeLegends,\n };\n\n const commonProps = {\n legendProps: multiSelectLegendProps,\n componentRef: chartRef,\n calloutProps: { layerProps: { eventBubblingEnabled: true } },\n };\n\n const useFluentVizColorPalette = props.fluentDataVizColorPalette === 'builtin';\n\n const renderLineArea = (plotlyData: Data[], isAreaChart: boolean): JSX.Element => {\n const isScatterMarkers = ['markers', 'text+markers', 'markers+text'].includes((plotlyData[0] as PlotData)?.mode);\n const chartProps: ILineChartProps | IAreaChartProps = {\n ...transformPlotlyJsonToScatterChartProps(\n { data: plotlyData, layout: plotlyInput.layout },\n isAreaChart,\n colorMap,\n useFluentVizColorPalette!,\n isDarkTheme,\n ),\n ...commonProps,\n };\n if (isAreaChart) {\n return <ResponsiveAreaChart {...chartProps} />;\n }\n return <ResponsiveLineChart {...chartProps} lineMode={isScatterMarkers ? 'scatter' : 'default'} />;\n };\n\n const checkAndRenderChart = (isAreaChart: boolean = false) => {\n let fallbackVSBC = false;\n const xValues = (plotlyInputWithValidData.data[0] as PlotData).x;\n const isXDate = isDateArray(xValues);\n const isXNumber = isNumberArray(xValues);\n const isXMonth = isMonthArray(xValues);\n\n // Consider year as categorical variable not numeric continuous variable\n // Also year is not considered a date variable as it is represented as a point\n // in time and brings additional complexity of handling timezone and locale\n // formatting given the current design of the charting library\n const isXYear = isYearArray(xValues);\n\n if ((isXDate || isXNumber) && !isXYear) {\n return renderLineArea(plotlyInputWithValidData.data, isAreaChart);\n } else if (isXMonth) {\n const updatedData = plotlyInputWithValidData.data.map((dataPoint: PlotData) => ({\n ...dataPoint,\n x: correctYearMonth(dataPoint.x),\n }));\n return renderLineArea(updatedData, isAreaChart);\n }\n // Unsupported schema, render as VerticalStackedBarChart\n fallbackVSBC = true;\n if (isAreaChart) {\n throw new Error('Fallback to VerticalStackedBarChart is not allowed for Area Charts.');\n }\n return (\n <ResponsiveVerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(\n plotlyInputWithValidData,\n colorMap,\n useFluentVizColorPalette,\n isDarkTheme,\n fallbackVSBC,\n )}\n {...commonProps}\n />\n );\n };\n\n const exportAsImage = React.useCallback(\n (opts?: IImageExportOptions): Promise<string> => {\n return new Promise((resolve, reject) => {\n if (!chartRef.current || typeof chartRef.current.toImage !== 'function') {\n return reject(Error('Chart cannot be exported as image'));\n }\n\n chartRef.current\n .toImage({\n background: theme.semanticColors.bodyBackground,\n scale: 5,\n ...opts,\n })\n .then(resolve)\n .catch(reject);\n });\n },\n [theme],\n );\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n exportAsImage,\n }),\n [exportAsImage],\n );\n\n switch (chart.type) {\n case 'donut':\n return (\n <ResponsiveDonutChart\n {...transformPlotlyJsonToDonutProps(\n plotlyInputWithValidData,\n colorMap,\n useFluentVizColorPalette,\n isDarkTheme,\n )}\n {...commonProps}\n />\n );\n case 'horizontalbar':\n return (\n <ResponsiveHorizontalBarChartWithAxis\n {...transformPlotlyJsonToHorizontalBarWithAxisProps(\n plotlyInputWithValidData,\n colorMap,\n useFluentVizColorPalette,\n isDarkTheme,\n )}\n {...commonProps}\n />\n );\n case 'groupedverticalbar':\n return (\n <ResponsiveGroupedVerticalBarChart\n {...transformPlotlyJsonToGVBCProps(plotlyInputWithValidData, colorMap, useFluentVizColorPalette, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'verticalstackedbar':\n return (\n <ResponsiveVerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(plotlyInputWithValidData, colorMap, useFluentVizColorPalette, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'heatmap':\n return (\n <ResponsiveHeatMapChart\n {...transformPlotlyJsonToHeatmapProps(plotlyInputWithValidData)}\n {...commonProps}\n legendProps={{}}\n />\n );\n case 'sankey':\n return (\n <ResponsiveSankeyChart\n {...transformPlotlyJsonToSankeyProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'gauge':\n return (\n <ResponsiveGaugeChart\n {...transformPlotlyJsonToGaugeProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'verticalbar':\n return (\n <ResponsiveVerticalBarChart\n {...transformPlotlyJsonToVBCProps(plotlyInputWithValidData, colorMap, useFluentVizColorPalette, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'area':\n case 'line':\n case 'fallback':\n case 'scatterpolar':\n if (chart.type === 'scatterpolar') {\n const cartesianProjection = projectPolarToCartesian(plotlyInputWithValidData);\n plotlyInputWithValidData.data = cartesianProjection.data;\n }\n // Need recheck for area chart as we don't have ability to check for valid months in previous step\n const isAreaChart = plotlyInputWithValidData.data.some(\n (series: PlotData) => series.fill === 'tonexty' || series.fill === 'tozeroy' || !!series.stackgroup,\n );\n return checkAndRenderChart(isAreaChart);\n default:\n throw new Error(`Unsupported chart type :${plotlyInputWithValidData.data[0]?.type}`);\n }\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\nDeclarativeChart.defaultProps = {\n fluentDataVizColorPalette: 'builtin',\n};\n"]}
package/lib/components/DeclarativeChart/PlotlySchemaAdapter.d.ts CHANGED
@@ -13,13 +13,15 @@ import type { Datum, PlotlySchema, TypedArray, PieColors, Color } from '@fluentu
13
13
  export declare const isMonthArray: (data: Datum[] | Datum[][] | TypedArray) => boolean;
14
14
  export declare const correctYearMonth: (xValues: Datum[] | Datum[][] | TypedArray) => any[];
15
15
  export declare const getColor: (legendLabel: string, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => string;
16
- export declare const getSchemaColors: (colors: PieColors | Color | null | undefined, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => string[] | string | undefined;
16
+ export declare const getSchemaColors: (colors: PieColors | Color | Color[] | string | null | undefined, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => string[] | string | undefined;
17
+ export declare const _extractColor: (useFluentVizColorPalette: boolean, colors: PieColors | Color | Color[] | string | null | undefined, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => string | string[] | undefined;
18
+ export declare const _resolveColor: (extractedColors: string[] | string | null | undefined, index: number, legend: string, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => string;
17
19
  export declare const transformPlotlyJsonToDonutProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, useFluentVizColorPalette: boolean, isDarkTheme?: boolean) => IDonutChartProps;
18
- export declare const transformPlotlyJsonToVSBCProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean, fallbackVSBC?: boolean) => IVerticalStackedBarChartProps;
19
- export declare const transformPlotlyJsonToGVBCProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => IGroupedVerticalBarChartProps;
20
- export declare const transformPlotlyJsonToVBCProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => IVerticalBarChartProps;
20
+ export declare const transformPlotlyJsonToVSBCProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, useFluentVizColorPalette: boolean, isDarkTheme?: boolean, fallbackVSBC?: boolean) => IVerticalStackedBarChartProps;
21
+ export declare const transformPlotlyJsonToGVBCProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, useFluentVizColorPalette: boolean, isDarkTheme?: boolean) => IGroupedVerticalBarChartProps;
22
+ export declare const transformPlotlyJsonToVBCProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, useFluentVizColorPalette: boolean, isDarkTheme?: boolean) => IVerticalBarChartProps;
21
23
  export declare const transformPlotlyJsonToScatterChartProps: (input: PlotlySchema, isAreaChart: boolean, colorMap: React.MutableRefObject<Map<string, string>>, useFluentVizColorPalette: boolean, isDarkTheme?: boolean) => ILineChartProps | IAreaChartProps;
22
- export declare const transformPlotlyJsonToHorizontalBarWithAxisProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => IHorizontalBarChartWithAxisProps;
24
+ export declare const transformPlotlyJsonToHorizontalBarWithAxisProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, useFluentVizColorPalette: boolean, isDarkTheme?: boolean) => IHorizontalBarChartWithAxisProps;
23
25
  export declare const transformPlotlyJsonToHeatmapProps: (input: PlotlySchema) => IHeatMapChartProps;
24
26
  export declare const transformPlotlyJsonToSankeyProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => ISankeyChartProps;
25
27
  export declare const transformPlotlyJsonToGaugeProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => IGaugeChartProps;
package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js CHANGED
@@ -164,26 +164,32 @@ export var getSchemaColors = function (colors, colorMap, isDarkTheme) {
164
164
  }
165
165
  return hexColors;
166
166
  };
167
+ export var _extractColor = function (useFluentVizColorPalette, colors, colorMap, isDarkTheme) {
168
+ return !useFluentVizColorPalette && colors ? getSchemaColors(colors, colorMap, isDarkTheme) : undefined;
169
+ };
170
+ export var _resolveColor = function (extractedColors, index, legend, colorMap, isDarkTheme) {
171
+ var color = '';
172
+ if (extractedColors && isArrayOrTypedArray(extractedColors) && extractedColors[index]) {
173
+ color = extractedColors[index % extractedColors.length];
174
+ }
175
+ else if (typeof extractedColors === 'string') {
176
+ color = extractedColors;
177
+ }
178
+ else {
179
+ color = getColor(legend, colorMap, isDarkTheme);
180
+ }
181
+ return color;
182
+ };
167
183
  export var transformPlotlyJsonToDonutProps = function (input, colorMap, useFluentVizColorPalette, isDarkTheme) {
168
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
184
+ var _a, _b, _c, _d, _e, _f, _g, _h;
169
185
  var firstData = input.data[0];
170
- var colors = undefined;
171
- if (!useFluentVizColorPalette) {
172
- colors = ((_a = firstData.marker) === null || _a === void 0 ? void 0 : _a.colors) ? getSchemaColors((_b = firstData === null || firstData === void 0 ? void 0 : firstData.marker) === null || _b === void 0 ? void 0 : _b.colors, colorMap, isDarkTheme) : undefined;
173
- }
186
+ // extract colors for each series only once
187
+ var colors = _extractColor(useFluentVizColorPalette, (_a = firstData === null || firstData === void 0 ? void 0 : firstData.marker) === null || _a === void 0 ? void 0 : _a.colors, colorMap, isDarkTheme);
174
188
  var mapLegendToDataPoint = {};
175
- (_c = firstData.labels) === null || _c === void 0 ? void 0 : _c.forEach(function (label, index) {
189
+ (_b = firstData.labels) === null || _b === void 0 ? void 0 : _b.forEach(function (label, index) {
176
190
  var _a;
177
- var color = '';
178
- if (colors && isStringArray(colors)) {
179
- color = colors[index % colors.length];
180
- }
181
- else if (typeof colors === 'string') {
182
- color = colors;
183
- }
184
- else {
185
- color = getColor(label, colorMap, isDarkTheme);
186
- }
191
+ // resolve color for each legend from the extracted colors
192
+ var color = _resolveColor(colors, index, label, colorMap, isDarkTheme);
187
193
  //ToDo how to handle string data?
188
194
  var value = typeof ((_a = firstData.values) === null || _a === void 0 ? void 0 : _a[index]) === 'number' ? firstData.values[index] : 1;
189
195
  if (!mapLegendToDataPoint[label]) {
@@ -197,8 +203,8 @@ export var transformPlotlyJsonToDonutProps = function (input, colorMap, useFluen
197
203
  mapLegendToDataPoint[label].data += value;
198
204
  }
199
205
  });
200
- var width = (_e = (_d = input.layout) === null || _d === void 0 ? void 0 : _d.width) !== null && _e !== void 0 ? _e : 440;
201
- var height = (_g = (_f = input.layout) === null || _f === void 0 ? void 0 : _f.height) !== null && _g !== void 0 ? _g : 220;
206
+ var width = (_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.width) !== null && _d !== void 0 ? _d : 440;
207
+ var height = (_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.height) !== null && _f !== void 0 ? _f : 220;
202
208
  var hideLabels = firstData.textinfo
203
209
  ? !['value', 'percent', 'label+percent'].includes(firstData.textinfo)
204
210
  : false;
@@ -213,32 +219,37 @@ export var transformPlotlyJsonToDonutProps = function (input, colorMap, useFluen
213
219
  chartTitle: chartTitle,
214
220
  chartData: Object.values(mapLegendToDataPoint),
215
221
  },
216
- hideLegend: ((_h = input.layout) === null || _h === void 0 ? void 0 : _h.showlegend) === false ? true : false,
217
- width: (_j = input.layout) === null || _j === void 0 ? void 0 : _j.width,
222
+ hideLegend: ((_g = input.layout) === null || _g === void 0 ? void 0 : _g.showlegend) === false ? true : false,
223
+ width: (_h = input.layout) === null || _h === void 0 ? void 0 : _h.width,
218
224
  height: height,
219
225
  innerRadius: innerRadius,
220
226
  hideLabels: hideLabels,
221
227
  showLabelsInPercent: firstData.textinfo ? ['percent', 'label+percent'].includes(firstData.textinfo) : true,
222
228
  };
223
229
  };
224
- export var transformPlotlyJsonToVSBCProps = function (input, colorMap, isDarkTheme, fallbackVSBC) {
230
+ export var transformPlotlyJsonToVSBCProps = function (input, colorMap, useFluentVizColorPalette, isDarkTheme, fallbackVSBC) {
225
231
  var _a, _b, _c;
226
232
  var mapXToDataPoints = {};
227
233
  var yMaxValue = 0;
228
234
  var secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout);
229
235
  var _d = getLegendProps(input.data, input.layout), legends = _d.legends, hideLegend = _d.hideLegend;
230
236
  input.data.forEach(function (series, index1) {
231
- var _a;
237
+ var _a, _b, _c;
232
238
  var isXYearCategory = isYearArray(series.x); // Consider year as categorical not numeric continuous axis
233
- (_a = series.x) === null || _a === void 0 ? void 0 : _a.forEach(function (x, index2) {
239
+ // extract bar colors for each series only once
240
+ var extractedBarColors = _extractColor(useFluentVizColorPalette, (_a = series.marker) === null || _a === void 0 ? void 0 : _a.color, colorMap, isDarkTheme);
241
+ // extract line colors for each series only once
242
+ var extractedLineColors = _extractColor(useFluentVizColorPalette, (_b = series.line) === null || _b === void 0 ? void 0 : _b.color, colorMap, isDarkTheme);
243
+ (_c = series.x) === null || _c === void 0 ? void 0 : _c.forEach(function (x, index2) {
234
244
  var _a, _b, _c;
235
245
  if (!mapXToDataPoints[x]) {
236
246
  mapXToDataPoints[x] = { xAxisPoint: isXYearCategory ? x.toString() : x, chartData: [], lineData: [] };
237
247
  }
238
248
  var legend = legends[index1];
249
+ // resolve color for each legend's bars from the extracted colors
250
+ var color = _resolveColor(extractedBarColors, index1, legend, colorMap, isDarkTheme);
239
251
  var yVal = (_b = (_a = series.y) === null || _a === void 0 ? void 0 : _a[index2]) !== null && _b !== void 0 ? _b : 0;
240
252
  if (series.type === 'bar') {
241
- var color = getColor(legend, colorMap, isDarkTheme);
242
253
  mapXToDataPoints[x].chartData.push({
243
254
  legend: legend,
244
255
  data: yVal,
@@ -247,11 +258,11 @@ export var transformPlotlyJsonToVSBCProps = function (input, colorMap, isDarkThe
247
258
  yMaxValue = Math.max(yMaxValue, yVal);
248
259
  }
249
260
  else if (series.type === 'scatter' || !!fallbackVSBC) {
250
- var color = getColor(legend, colorMap, isDarkTheme);
261
+ var lineColor = _resolveColor(extractedLineColors, index1, legend, colorMap, isDarkTheme);
251
262
  var lineOptions = getLineOptions(series.line);
252
263
  var dashType = ((_c = series.line) === null || _c === void 0 ? void 0 : _c.dash) || 'solid';
253
264
  var legendShape = dashType === 'dot' || dashType === 'dash' || dashType === 'dashdot' ? 'dottedLine' : 'default';
254
- mapXToDataPoints[x].lineData.push(__assign(__assign({ legend: legend, legendShape: legendShape, y: yVal, color: color }, (lineOptions ? { lineOptions: lineOptions } : {})), { useSecondaryYScale: usesSecondaryYScale(series) }));
265
+ mapXToDataPoints[x].lineData.push(__assign(__assign({ legend: legend, legendShape: legendShape, y: yVal, color: lineColor }, (lineOptions ? { lineOptions: lineOptions } : {})), { useSecondaryYScale: usesSecondaryYScale(series) }));
255
266
  if (!usesSecondaryYScale(series)) {
256
267
  yMaxValue = Math.max(yMaxValue, yVal);
257
268
  }
@@ -261,21 +272,24 @@ export var transformPlotlyJsonToVSBCProps = function (input, colorMap, isDarkThe
261
272
  var _e = getTitles(input.layout), chartTitle = _e.chartTitle, xAxisTitle = _e.xAxisTitle, yAxisTitle = _e.yAxisTitle;
262
273
  return __assign(__assign({ data: Object.values(mapXToDataPoints), width: (_a = input.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350, barWidth: 'auto', yMaxValue: yMaxValue, chartTitle: chartTitle, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle, mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend });
263
274
  };
264
- export var transformPlotlyJsonToGVBCProps = function (input, colorMap, isDarkTheme) {
275
+ export var transformPlotlyJsonToGVBCProps = function (input, colorMap, useFluentVizColorPalette, isDarkTheme) {
265
276
  var _a, _b, _c;
266
277
  var mapXToDataPoints = {};
267
278
  var secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout, 0, 0);
268
279
  var _d = getLegendProps(input.data, input.layout), legends = _d.legends, hideLegend = _d.hideLegend;
269
280
  input.data.forEach(function (series, index1) {
270
- var _a;
271
- (_a = series.x) === null || _a === void 0 ? void 0 : _a.forEach(function (x, xIndex) {
281
+ var _a, _b;
282
+ // extract colors for each series only once
283
+ var extractedColors = _extractColor(useFluentVizColorPalette, (_a = series.marker) === null || _a === void 0 ? void 0 : _a.color, colorMap, isDarkTheme);
284
+ (_b = series.x) === null || _b === void 0 ? void 0 : _b.forEach(function (x, xIndex) {
272
285
  var _a, _b;
273
286
  if (!mapXToDataPoints[x]) {
274
287
  mapXToDataPoints[x] = { name: x.toString(), series: [] };
275
288
  }
276
289
  if (series.type === 'bar') {
277
290
  var legend = legends[index1];
278
- var color = getColor(legend, colorMap, isDarkTheme);
291
+ // resolve color for each legend's bars from the extracted colors
292
+ var color = _resolveColor(extractedColors, index1, legend, colorMap, isDarkTheme);
279
293
  mapXToDataPoints[x].series.push({
280
294
  key: legend,
281
295
  data: (_b = (_a = series.y) === null || _a === void 0 ? void 0 : _a[xIndex]) !== null && _b !== void 0 ? _b : 0,
@@ -290,19 +304,21 @@ export var transformPlotlyJsonToGVBCProps = function (input, colorMap, isDarkThe
290
304
  var _e = getTitles(input.layout), chartTitle = _e.chartTitle, xAxisTitle = _e.xAxisTitle, yAxisTitle = _e.yAxisTitle;
291
305
  return __assign(__assign({ data: Object.values(mapXToDataPoints), width: (_a = input.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350, barwidth: 'auto', chartTitle: chartTitle, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle, mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend });
292
306
  };
293
- export var transformPlotlyJsonToVBCProps = function (input, colorMap, isDarkTheme) {
307
+ export var transformPlotlyJsonToVBCProps = function (input, colorMap, useFluentVizColorPalette, isDarkTheme) {
294
308
  var _a, _b, _c;
295
309
  var vbcData = [];
296
310
  var _d = getLegendProps(input.data, input.layout), legends = _d.legends, hideLegend = _d.hideLegend;
297
311
  input.data.forEach(function (series, seriesIdx) {
298
- var _a, _b, _c;
312
+ var _a, _b, _c, _d;
299
313
  if (!series.x) {
300
314
  return;
301
315
  }
316
+ // extract colors for each series only once
317
+ var extractedColors = _extractColor(useFluentVizColorPalette, (_a = series.marker) === null || _a === void 0 ? void 0 : _a.color, colorMap, isDarkTheme);
302
318
  var isXString = isStringArray(series.x);
303
319
  // TODO: In case of a single bin, add an empty bin of the same size to prevent the
304
320
  // default bar width from being used and ensure the bar spans the full intended range.
305
- var xBins = createBins(series.x, (_a = series.xbins) === null || _a === void 0 ? void 0 : _a.start, (_b = series.xbins) === null || _b === void 0 ? void 0 : _b.end, (_c = series.xbins) === null || _c === void 0 ? void 0 : _c.size);
321
+ var xBins = createBins(series.x, (_b = series.xbins) === null || _b === void 0 ? void 0 : _b.start, (_c = series.xbins) === null || _c === void 0 ? void 0 : _c.end, (_d = series.xbins) === null || _d === void 0 ? void 0 : _d.size);
306
322
  var yBins = xBins.map(function () { return []; });
307
323
  var total = 0;
308
324
  series.x.forEach(function (xVal, index) {
@@ -319,7 +335,8 @@ export var transformPlotlyJsonToVBCProps = function (input, colorMap, isDarkThem
319
335
  });
320
336
  xBins.forEach(function (bin, index) {
321
337
  var legend = legends[seriesIdx];
322
- var color = getColor(legend, colorMap, isDarkTheme);
338
+ // resolve color for each legend's bars from the extracted colors
339
+ var color = _resolveColor(extractedColors, seriesIdx, legend, colorMap, isDarkTheme);
323
340
  var yVal = calculateHistNorm(series.histnorm, y[index], total, isXString ? bin.length : getBinSize(bin));
324
341
  vbcData.push(__assign({ x: isXString ? bin.join(', ') : getBinCenter(bin), y: yVal, legend: legend, color: color }, (isXString
325
342
  ? {}
@@ -347,18 +364,19 @@ export var transformPlotlyJsonToScatterChartProps = function (input, isAreaChart
347
364
  var mode = 'tonexty';
348
365
  var _g = getLegendProps(input.data, input.layout), legends = _g.legends, hideLegend = _g.hideLegend;
349
366
  var chartData = input.data.map(function (series, index) {
350
- var _a, _b, _c;
367
+ var _a, _b;
368
+ // extract colors for each series only once
369
+ var extractedColors = _extractColor(useFluentVizColorPalette, (_a = series.line) === null || _a === void 0 ? void 0 : _a.color, colorMap, isDarkTheme);
351
370
  var xValues = series.x;
352
371
  var isString = typeof xValues[0] === 'string';
353
372
  var isXDate = isDateArray(xValues);
354
373
  var isXNumber = isNumberArray(xValues);
355
374
  var legend = legends[index];
356
- var lineColor = !useFluentVizColorPalette && ((_a = series.line) === null || _a === void 0 ? void 0 : _a.color)
357
- ? getSchemaColors((_b = series.line) === null || _b === void 0 ? void 0 : _b.color, colorMap, isDarkTheme)
358
- : getColor(legend, colorMap, isDarkTheme);
375
+ // resolve color for each legend's lines from the extracted colors
376
+ var lineColor = _resolveColor(extractedColors, index, legend, colorMap, isDarkTheme);
359
377
  mode = series.fill === 'tozeroy' ? 'tozeroy' : 'tonexty';
360
378
  var lineOptions = getLineOptions(series.line);
361
- var dashType = ((_c = series.line) === null || _c === void 0 ? void 0 : _c.dash) || 'solid';
379
+ var dashType = ((_b = series.line) === null || _b === void 0 ? void 0 : _b.dash) || 'solid';
362
380
  var legendShape = dashType === 'dot' || dashType === 'dash' || dashType === 'dashdot' ? 'dottedLine' : 'default';
363
381
  return __assign(__assign({ legend: legend, legendShape: legendShape, data: xValues.map(function (x, i) {
364
382
  var _a, _b;
@@ -382,13 +400,17 @@ export var transformPlotlyJsonToScatterChartProps = function (input, isAreaChart
382
400
  return __assign(__assign({ data: chartProps, supportNegativeData: true, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle }, secondaryYAxisValues), { roundedTicks: true, yMinValue: yMinMaxValues.startValue, yMaxValue: yMinMaxValues.endValue, width: (_d = input.layout) === null || _d === void 0 ? void 0 : _d.width, height: (_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.height) !== null && _f !== void 0 ? _f : 350, hideTickOverlap: true, enableReflow: false, hideLegend: hideLegend, useUTC: false });
383
401
  }
384
402
  };
385
- export var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, colorMap, isDarkTheme) {
403
+ export var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, colorMap, useFluentVizColorPalette, isDarkTheme) {
386
404
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
387
405
  var _s = getLegendProps(input.data, input.layout), legends = _s.legends, hideLegend = _s.hideLegend;
388
406
  var chartData = input.data
389
407
  .map(function (series, index) {
408
+ var _a;
409
+ // extract colors for each series only once
410
+ var extractedColors = _extractColor(useFluentVizColorPalette, (_a = series.marker) === null || _a === void 0 ? void 0 : _a.color, colorMap, isDarkTheme);
390
411
  var legend = legends[index];
391
- var color = getColor(legend, colorMap, isDarkTheme);
412
+ // resolve color for each legend's bars from the extracted colors
413
+ var color = _resolveColor(extractedColors, index, legend, colorMap, isDarkTheme);
392
414
  return series.y.map(function (yValue, i) {
393
415
  return {
394
416
  x: series.x[i],
@@ -540,7 +562,6 @@ export var transformPlotlyJsonToSankeyProps = function (input, colorMap, isDarkT
540
562
  source: link === null || link === void 0 ? void 0 : link.source[index],
541
563
  target: link === null || link === void 0 ? void 0 : link.target[index],
542
564
  }); })
543
- // eslint-disable-next-line @typescript-eslint/no-shadow
544
565
  // Filter out negative nodes, unequal nodes and self-references (circular links)
545
566
  .filter(function (x) { return x.source >= 0 && x.target >= 0 && x.source !== x.target; });
546
567
  var sankeyChartData = {