@fluentui/react-charting 5.23.35 → 5.23.36

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.
@@ -60,7 +60,7 @@ export var DeclarativeChart = React.forwardRef(function (props, forwardedRef) {
60
60
  };
61
61
  var exportAsImage = React.useCallback(function (opts) {
62
62
  var _a;
63
- return toImage((_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer, __assign({ background: theme.palette.white }, opts));
63
+ return toImage((_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer, __assign({ background: theme.semanticColors.bodyBackground }, opts));
64
64
  }, [theme]);
65
65
  React.useImperativeHandle(props.componentRef, function () { return ({
66
66
  exportAsImage: exportAsImage,
@@ -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 */\n/* eslint-disable @typescript-eslint/no-explicit-any */\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 {\n isArrayOrTypedArray,\n isDateArray,\n isNumberArray,\n isMonthArray,\n sanitizeJson,\n updateXValues,\n transformPlotlyJsonToDonutProps,\n transformPlotlyJsonToVSBCProps,\n transformPlotlyJsonToScatterChartProps,\n transformPlotlyJsonToHorizontalBarWithAxisProps,\n transformPlotlyJsonToHeatmapProps,\n transformPlotlyJsonToSankeyProps,\n transformPlotlyJsonToGaugeProps,\n transformPlotlyJsonToGVBCProps,\n transformPlotlyJsonToVBCProps,\n} from './PlotlySchemaAdapter';\nimport { LineChart } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart } 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 { IImageExportOptions, toImage } from './imageExporter';\nimport { IChart } from '../../types/index';\n\n/**\n * DeclarativeChart schema.\n * {@docCategory DeclarativeChart}\n */\nexport interface Schema {\n /**\n * Plotly schema represented as JSON object\n */\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/**\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 { data, layout } = plotlySchema;\n let { selectedLegends } = plotlySchema;\n const xValues = data[0].x;\n const isXDate = isDateArray(xValues);\n const isXNumber = isNumberArray(xValues);\n const isXMonth = isMonthArray(xValues);\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: { data, layout, 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 legendProps = {\n canSelectMultipleLegends: false,\n onChange: onActiveLegendsChange,\n selectedLegend: activeLegends.slice(0, 1)[0],\n };\n\n const exportAsImage = React.useCallback(\n (opts?: IImageExportOptions) => {\n return toImage(chartRef.current?.chartContainer, {\n background: theme.palette.white,\n ...opts,\n });\n },\n [theme],\n );\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n exportAsImage,\n }),\n [exportAsImage],\n );\n\n const multiSelectLegendProps = {\n ...legendProps,\n canSelectMultipleLegends: true,\n selectedLegends: activeLegends,\n };\n\n switch (data[0].type) {\n case 'pie':\n return (\n <DonutChart\n {...transformPlotlyJsonToDonutProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n // Bubble event to prevent right click to open menu on the callout\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n case 'bar':\n const orientation = data[0].orientation;\n if (orientation === 'h') {\n return (\n <HorizontalBarChartWithAxis\n {...transformPlotlyJsonToHorizontalBarWithAxisProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n } else {\n if (['group', 'overlay'].includes(plotlySchema?.layout?.barmode)) {\n return (\n <GroupedVerticalBarChart\n {...transformPlotlyJsonToGVBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n }\n return (\n <VerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n }\n case 'scatter':\n const isAreaChart = data.some((series: any) => series.fill === 'tonexty' || series.fill === 'tozeroy');\n const renderChart = (chartProps: any) => {\n if (isAreaChart) {\n return (\n <AreaChart\n {...chartProps}\n legendProps={{ ...legendProps, canSelectMultipleLegends: true, selectedLegends: activeLegends }}\n />\n );\n }\n return (\n <LineChart\n {...{\n ...chartProps,\n legendProps: {\n onChange: onActiveLegendsChange,\n canSelectMultipleLegends: true,\n selectedLegends: activeLegends,\n },\n }}\n />\n );\n };\n if (isXDate || isXNumber) {\n const chartProps = {\n ...transformPlotlyJsonToScatterChartProps({ data, layout }, isAreaChart, colorMap, isDarkTheme),\n legendProps,\n componentRef: chartRef,\n calloutProps: { layerProps: { eventBubblingEnabled: true } },\n };\n return renderChart(chartProps);\n } else if (isXMonth) {\n const updatedData = data.map((dataPoint: any) => ({\n ...dataPoint,\n x: updateXValues(dataPoint.x),\n }));\n const chartProps = {\n ...transformPlotlyJsonToScatterChartProps({ data: updatedData, layout }, isAreaChart, colorMap, isDarkTheme),\n legendProps,\n componentRef: chartRef,\n calloutProps: { layerProps: { eventBubblingEnabled: true } },\n };\n return renderChart(chartProps);\n }\n return (\n <VerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n case 'heatmap':\n return (\n <HeatMapChart\n {...transformPlotlyJsonToHeatmapProps(plotlySchema)}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n case 'sankey':\n return (\n <SankeyChart\n {...transformPlotlyJsonToSankeyProps(plotlySchema, colorMap, isDarkTheme)}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n case 'indicator':\n if (data?.[0]?.mode?.includes('gauge')) {\n return (\n <GaugeChart\n {...transformPlotlyJsonToGaugeProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n }\n return <div>Unsupported Schema</div>;\n case 'histogram':\n return (\n <VerticalBarChart\n {...transformPlotlyJsonToVBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n default:\n throw new Error('Unsupported chart schema');\n }\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\n"]}
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 */\n/* eslint-disable @typescript-eslint/no-explicit-any */\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 {\n isArrayOrTypedArray,\n isDateArray,\n isNumberArray,\n isMonthArray,\n sanitizeJson,\n updateXValues,\n transformPlotlyJsonToDonutProps,\n transformPlotlyJsonToVSBCProps,\n transformPlotlyJsonToScatterChartProps,\n transformPlotlyJsonToHorizontalBarWithAxisProps,\n transformPlotlyJsonToHeatmapProps,\n transformPlotlyJsonToSankeyProps,\n transformPlotlyJsonToGaugeProps,\n transformPlotlyJsonToGVBCProps,\n transformPlotlyJsonToVBCProps,\n} from './PlotlySchemaAdapter';\nimport { LineChart } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart } 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 { IImageExportOptions, toImage } from './imageExporter';\nimport { IChart } from '../../types/index';\n\n/**\n * DeclarativeChart schema.\n * {@docCategory DeclarativeChart}\n */\nexport interface Schema {\n /**\n * Plotly schema represented as JSON object\n */\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/**\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 { data, layout } = plotlySchema;\n let { selectedLegends } = plotlySchema;\n const xValues = data[0].x;\n const isXDate = isDateArray(xValues);\n const isXNumber = isNumberArray(xValues);\n const isXMonth = isMonthArray(xValues);\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: { data, layout, 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 legendProps = {\n canSelectMultipleLegends: false,\n onChange: onActiveLegendsChange,\n selectedLegend: activeLegends.slice(0, 1)[0],\n };\n\n const exportAsImage = React.useCallback(\n (opts?: IImageExportOptions) => {\n return toImage(chartRef.current?.chartContainer, {\n background: theme.semanticColors.bodyBackground,\n ...opts,\n });\n },\n [theme],\n );\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n exportAsImage,\n }),\n [exportAsImage],\n );\n\n const multiSelectLegendProps = {\n ...legendProps,\n canSelectMultipleLegends: true,\n selectedLegends: activeLegends,\n };\n\n switch (data[0].type) {\n case 'pie':\n return (\n <DonutChart\n {...transformPlotlyJsonToDonutProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n // Bubble event to prevent right click to open menu on the callout\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n case 'bar':\n const orientation = data[0].orientation;\n if (orientation === 'h') {\n return (\n <HorizontalBarChartWithAxis\n {...transformPlotlyJsonToHorizontalBarWithAxisProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n } else {\n if (['group', 'overlay'].includes(plotlySchema?.layout?.barmode)) {\n return (\n <GroupedVerticalBarChart\n {...transformPlotlyJsonToGVBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n }\n return (\n <VerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n }\n case 'scatter':\n const isAreaChart = data.some((series: any) => series.fill === 'tonexty' || series.fill === 'tozeroy');\n const renderChart = (chartProps: any) => {\n if (isAreaChart) {\n return (\n <AreaChart\n {...chartProps}\n legendProps={{ ...legendProps, canSelectMultipleLegends: true, selectedLegends: activeLegends }}\n />\n );\n }\n return (\n <LineChart\n {...{\n ...chartProps,\n legendProps: {\n onChange: onActiveLegendsChange,\n canSelectMultipleLegends: true,\n selectedLegends: activeLegends,\n },\n }}\n />\n );\n };\n if (isXDate || isXNumber) {\n const chartProps = {\n ...transformPlotlyJsonToScatterChartProps({ data, layout }, isAreaChart, colorMap, isDarkTheme),\n legendProps,\n componentRef: chartRef,\n calloutProps: { layerProps: { eventBubblingEnabled: true } },\n };\n return renderChart(chartProps);\n } else if (isXMonth) {\n const updatedData = data.map((dataPoint: any) => ({\n ...dataPoint,\n x: updateXValues(dataPoint.x),\n }));\n const chartProps = {\n ...transformPlotlyJsonToScatterChartProps({ data: updatedData, layout }, isAreaChart, colorMap, isDarkTheme),\n legendProps,\n componentRef: chartRef,\n calloutProps: { layerProps: { eventBubblingEnabled: true } },\n };\n return renderChart(chartProps);\n }\n return (\n <VerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n case 'heatmap':\n return (\n <HeatMapChart\n {...transformPlotlyJsonToHeatmapProps(plotlySchema)}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n case 'sankey':\n return (\n <SankeyChart\n {...transformPlotlyJsonToSankeyProps(plotlySchema, colorMap, isDarkTheme)}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n case 'indicator':\n if (data?.[0]?.mode?.includes('gauge')) {\n return (\n <GaugeChart\n {...transformPlotlyJsonToGaugeProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n }\n return <div>Unsupported Schema</div>;\n case 'histogram':\n return (\n <VerticalBarChart\n {...transformPlotlyJsonToVBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n default:\n throw new Error('Unsupported chart schema');\n }\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\n"]}
@@ -6,7 +6,7 @@ export function toImage(chartContainer, opts) {
6
6
  return reject(new Error('Chart container is not defined'));
7
7
  }
8
8
  try {
9
- var background = 'white'; // Background is coming as --var(xxx) when used with v8 wrapper in v9
9
+ var background = typeof opts.background === 'string' ? resolveCSSVariables(chartContainer, opts.background) : 'transparent';
10
10
  var svg = toSVG(chartContainer, background);
11
11
  var svgData = new XMLSerializer().serializeToString(svg.node);
12
12
  var svgDataUrl = 'data:image/svg+xml;base64,' + btoa(unescapePonyfill(encodeURIComponent(svgData)));
@@ -49,7 +49,7 @@ function toSVG(chartContainer, background) {
49
49
  .attr('fill', background);
50
50
  var svgElements = svg.getElementsByTagName('*');
51
51
  var styleSheets = document.styleSheets;
52
- var styleRules = [];
52
+ var styleRules = '';
53
53
  for (var i = svgElements.length - 1; i--;) {
54
54
  svgElements[i].classList.forEach(function (className) {
55
55
  classNames.add(".".concat(className));
@@ -62,13 +62,14 @@ function toSVG(chartContainer, background) {
62
62
  var selectorText = rules[j].selectorText;
63
63
  var hasClassName = selectorText.split(' ').some(function (word) { return classNames.has(word); });
64
64
  if (hasClassName) {
65
- styleRules.push(rules[j].cssText);
65
+ styleRules += rules[j].cssText + ' ';
66
66
  }
67
67
  }
68
68
  }
69
69
  }
70
+ styleRules = resolveCSSVariables(chartContainer, styleRules);
70
71
  var xmlDocument = new DOMParser().parseFromString('<svg></svg>', 'image/svg+xml');
71
- var styleNode = xmlDocument.createCDATASection(styleRules.join(' '));
72
+ var styleNode = xmlDocument.createCDATASection(styleRules);
72
73
  clonedSvg.insert('defs', ':first-child').append('style').attr('type', 'text/css').node().appendChild(styleNode);
73
74
  clonedSvg.attr('width', w1).attr('height', h1).attr('viewBox', "0 0 ".concat(w1, " ").concat(h1));
74
75
  return {
@@ -127,12 +128,14 @@ function cloneLegendsToSVG(chartContainer, svgWidth, svgHeight, classNames) {
127
128
  legendText.classList.forEach(function (className) { return classNames.add(".".concat(className)); });
128
129
  textOffset = 8;
129
130
  }
131
+ var textColor = getComputedStyle(legendText).color;
130
132
  legendItem
131
133
  .append('text')
132
134
  .attr('x', legendX + textOffset)
133
135
  .attr('y', svgHeight + legendY + 8)
134
136
  .attr('dominant-baseline', 'hanging')
135
137
  .attr('class', legendText.getAttribute('class'))
138
+ .attr('fill', textColor)
136
139
  .text(legendText.textContent);
137
140
  legendX += legendWidth;
138
141
  }
@@ -154,6 +157,13 @@ function cloneLegendsToSVG(chartContainer, svgWidth, svgHeight, classNames) {
154
157
  height: legendY,
155
158
  };
156
159
  }
160
+ var cssVarRegExp = /var\((--[a-zA-Z0-9\-]+)\)/g;
161
+ function resolveCSSVariables(chartContainer, styleRules) {
162
+ var containerStyles = getComputedStyle(chartContainer);
163
+ return styleRules.replace(cssVarRegExp, function (match, group1) {
164
+ return containerStyles.getPropertyValue(group1);
165
+ });
166
+ }
157
167
  function svgToPng(svgDataUrl, opts) {
158
168
  if (opts === void 0) { opts = {}; }
159
169
  return new Promise(function (resolve, reject) {
@@ -1 +1 @@
1
- {"version":3,"file":"imageExporter.js","sourceRoot":"../src/","sources":["components/DeclarativeChart/imageExporter.ts"],"names":[],"mappings":"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","sourcesContent":["import { create as d3Create, select as d3Select, Selection } from 'd3-selection';\n\n/**\n * {@docCategory DeclarativeChart}\n */\nexport interface IImageExportOptions {\n width?: number;\n height?: number;\n scale?: number;\n background?: string;\n}\n\nexport function toImage(chartContainer?: HTMLElement | null, opts: IImageExportOptions = {}): Promise<string> {\n return new Promise((resolve, reject) => {\n if (!chartContainer) {\n return reject(new Error('Chart container is not defined'));\n }\n\n try {\n const background = 'white'; // Background is coming as --var(xxx) when used with v8 wrapper in v9\n const svg = toSVG(chartContainer, background);\n\n const svgData = new XMLSerializer().serializeToString(svg.node);\n const svgDataUrl = 'data:image/svg+xml;base64,' + btoa(unescapePonyfill(encodeURIComponent(svgData)));\n\n svgToPng(svgDataUrl, {\n width: opts.width || svg.width,\n height: opts.height || svg.height,\n scale: opts.scale,\n })\n .then(resolve)\n .catch(reject);\n } catch (err) {\n return reject(err);\n }\n });\n}\n\nfunction toSVG(chartContainer: HTMLElement, background: string) {\n const svg = chartContainer.querySelector<SVGSVGElement>('svg');\n if (!svg) {\n throw new Error('SVG not found');\n }\n\n const { width: svgWidth, height: svgHeight } = svg.getBoundingClientRect();\n const classNames = new Set<string>();\n const legendGroup = cloneLegendsToSVG(chartContainer, svgWidth, svgHeight, classNames);\n const w1 = Math.max(svgWidth, legendGroup.width);\n const h1 = svgHeight + legendGroup.height;\n const clonedSvg = d3Select(svg.cloneNode(true) as SVGSVGElement)\n .attr('width', null)\n .attr('height', null)\n .attr('viewBox', null);\n\n if (legendGroup.node) {\n clonedSvg.append(() => legendGroup.node);\n }\n clonedSvg\n .insert('rect', ':first-child')\n .attr('x', 0)\n .attr('y', 0)\n .attr('width', w1)\n .attr('height', h1)\n .attr('fill', background);\n\n const svgElements = svg.getElementsByTagName('*');\n const styleSheets = document.styleSheets;\n const styleRules: string[] = [];\n\n for (let i = svgElements.length - 1; i--; ) {\n svgElements[i].classList.forEach(className => {\n classNames.add(`.${className}`);\n });\n }\n\n for (let i = 0; i < styleSheets.length; i++) {\n const rules = styleSheets[i].cssRules;\n for (let j = 0; j < rules.length; j++) {\n if (rules[j].constructor.name === 'CSSStyleRule') {\n const selectorText = (rules[j] as CSSStyleRule).selectorText;\n const hasClassName = selectorText.split(' ').some(word => classNames.has(word));\n\n if (hasClassName) {\n styleRules.push(rules[j].cssText);\n }\n }\n }\n }\n\n const xmlDocument = new DOMParser().parseFromString('<svg></svg>', 'image/svg+xml');\n const styleNode = xmlDocument.createCDATASection(styleRules.join(' '));\n clonedSvg.insert('defs', ':first-child').append('style').attr('type', 'text/css').node()!.appendChild(styleNode);\n\n clonedSvg.attr('width', w1).attr('height', h1).attr('viewBox', `0 0 ${w1} ${h1}`);\n\n return {\n node: clonedSvg.node()!,\n width: w1,\n height: h1,\n };\n}\n\nfunction cloneLegendsToSVG(chartContainer: HTMLElement, svgWidth: number, svgHeight: number, classNames: Set<string>) {\n const legendButtons = chartContainer.querySelectorAll<HTMLElement>(`\n button[class^=\"legend-\"],\n [class^=\"legendContainer-\"] div[class^=\"overflowIndicationTextStyle-\"],\n [class^=\"legendsContainer-\"] div[class^=\"overflowIndicationTextStyle-\"]\n `);\n if (legendButtons.length === 0) {\n return {\n node: null,\n width: 0,\n height: 0,\n };\n }\n\n const legendGroup = d3Create<SVGGElement>('svg:g');\n let legendX = 0;\n let legendY = 8;\n let legendLine: Selection<SVGGElement, unknown, null, undefined>[] = [];\n const legendLines: (typeof legendLine)[] = [];\n const legendLineWidths: number[] = [];\n\n for (let i = 0; i < legendButtons.length; i++) {\n const { width: legendWidth } = legendButtons[i].getBoundingClientRect();\n const legendItem = legendGroup.append('g');\n\n legendLine.push(legendItem);\n if (legendX + legendWidth > svgWidth && legendLine.length > 1) {\n legendLine.pop();\n legendLines.push(legendLine);\n legendLineWidths.push(legendX);\n\n legendLine = [legendItem];\n legendX = 0;\n legendY += 32;\n }\n\n let legendText: HTMLDivElement | null;\n let textOffset = 0;\n\n if (legendButtons[i].tagName.toLowerCase() === 'button') {\n const legendRect = legendButtons[i].querySelector<HTMLDivElement>('[class^=\"rect\"]');\n const { backgroundColor: legendColor, borderColor: legendBorderColor } = getComputedStyle(legendRect!);\n\n legendText = legendButtons[i].querySelector<HTMLDivElement>('[class^=\"text\"]');\n legendText!.classList.forEach(className => classNames.add(`.${className}`));\n legendItem\n .append('rect')\n .attr('x', legendX + 8)\n .attr('y', svgHeight + legendY + 8)\n .attr('width', 12)\n .attr('height', 12)\n .attr('fill', legendColor)\n .attr('stroke-width', 1)\n .attr('stroke', legendBorderColor);\n textOffset = 28;\n } else {\n legendText = legendButtons[i] as HTMLDivElement;\n legendText.classList.forEach(className => classNames.add(`.${className}`));\n textOffset = 8;\n }\n\n legendItem\n .append('text')\n .attr('x', legendX + textOffset)\n .attr('y', svgHeight + legendY + 8)\n .attr('dominant-baseline', 'hanging')\n .attr('class', legendText!.getAttribute('class'))\n .text(legendText!.textContent);\n legendX += legendWidth;\n }\n\n legendLines.push(legendLine);\n legendLineWidths.push(legendX);\n legendY += 32;\n\n const centerLegends = true;\n if (centerLegends) {\n legendLines.forEach((ln, idx) => {\n const offsetX = Math.max((svgWidth - legendLineWidths[idx]) / 2, 0);\n ln.forEach(item => {\n item.attr('transform', `translate(${offsetX}, 0)`);\n });\n });\n }\n\n return {\n node: legendGroup.node(),\n width: Math.max(...legendLineWidths),\n height: legendY,\n };\n}\n\nfunction svgToPng(svgDataUrl: string, opts: IImageExportOptions = {}): Promise<string> {\n return new Promise((resolve, reject) => {\n const scale = opts.scale || 1;\n const w0 = opts.width || 300;\n const h0 = opts.height || 150;\n const w1 = scale * w0;\n const h1 = scale * h0;\n\n const canvas = document.createElement('canvas');\n const img = new Image();\n\n canvas.width = w1;\n canvas.height = h1;\n\n img.onload = function () {\n const ctx = canvas.getContext('2d');\n if (!ctx) {\n return reject(new Error('Canvas context is null'));\n }\n\n ctx.clearRect(0, 0, w1, h1);\n ctx.drawImage(img, 0, 0, w1, h1);\n\n const imgData = canvas.toDataURL('image/png');\n resolve(imgData);\n };\n\n img.onerror = function (err) {\n reject(err);\n };\n\n img.src = svgDataUrl;\n });\n}\n\nconst hex2 = /^[\\da-f]{2}$/i;\nconst hex4 = /^[\\da-f]{4}$/i;\n\n/**\n * A ponyfill for the deprecated `unescape` method, taken from the `core-js` library.\n *\n * Source: {@link https://github.com/zloirock/core-js/blob/167136f479d3b8519953f2e4c534ecdd1031d3cf/packages/core-js/modules/es.unescape.js core-js/packages/core-js/modules/es.unescape.js}\n */\nfunction unescapePonyfill(str: string) {\n let result = '';\n const length = str.length;\n let index = 0;\n let chr;\n let part;\n while (index < length) {\n chr = str.charAt(index++);\n if (chr === '%') {\n if (str.charAt(index) === 'u') {\n part = str.slice(index + 1, index + 5);\n if (hex4.exec(part)) {\n result += String.fromCharCode(parseInt(part, 16));\n index += 5;\n continue;\n }\n } else {\n part = str.slice(index, index + 2);\n if (hex2.exec(part)) {\n result += String.fromCharCode(parseInt(part, 16));\n index += 2;\n continue;\n }\n }\n }\n result += chr;\n }\n return result;\n}\n"]}
1
+ {"version":3,"file":"imageExporter.js","sourceRoot":"../src/","sources":["components/DeclarativeChart/imageExporter.ts"],"names":[],"mappings":"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","sourcesContent":["import { create as d3Create, select as d3Select, Selection } from 'd3-selection';\n\n/**\n * {@docCategory DeclarativeChart}\n */\nexport interface IImageExportOptions {\n width?: number;\n height?: number;\n scale?: number;\n background?: string;\n}\n\nexport function toImage(chartContainer?: HTMLElement | null, opts: IImageExportOptions = {}): Promise<string> {\n return new Promise((resolve, reject) => {\n if (!chartContainer) {\n return reject(new Error('Chart container is not defined'));\n }\n\n try {\n const background =\n typeof opts.background === 'string' ? resolveCSSVariables(chartContainer, opts.background) : 'transparent';\n const svg = toSVG(chartContainer, background);\n\n const svgData = new XMLSerializer().serializeToString(svg.node);\n const svgDataUrl = 'data:image/svg+xml;base64,' + btoa(unescapePonyfill(encodeURIComponent(svgData)));\n\n svgToPng(svgDataUrl, {\n width: opts.width || svg.width,\n height: opts.height || svg.height,\n scale: opts.scale,\n })\n .then(resolve)\n .catch(reject);\n } catch (err) {\n return reject(err);\n }\n });\n}\n\nfunction toSVG(chartContainer: HTMLElement, background: string) {\n const svg = chartContainer.querySelector<SVGSVGElement>('svg');\n if (!svg) {\n throw new Error('SVG not found');\n }\n\n const { width: svgWidth, height: svgHeight } = svg.getBoundingClientRect();\n const classNames = new Set<string>();\n const legendGroup = cloneLegendsToSVG(chartContainer, svgWidth, svgHeight, classNames);\n const w1 = Math.max(svgWidth, legendGroup.width);\n const h1 = svgHeight + legendGroup.height;\n const clonedSvg = d3Select(svg.cloneNode(true) as SVGSVGElement)\n .attr('width', null)\n .attr('height', null)\n .attr('viewBox', null);\n\n if (legendGroup.node) {\n clonedSvg.append(() => legendGroup.node);\n }\n clonedSvg\n .insert('rect', ':first-child')\n .attr('x', 0)\n .attr('y', 0)\n .attr('width', w1)\n .attr('height', h1)\n .attr('fill', background);\n\n const svgElements = svg.getElementsByTagName('*');\n const styleSheets = document.styleSheets;\n let styleRules: string = '';\n\n for (let i = svgElements.length - 1; i--; ) {\n svgElements[i].classList.forEach(className => {\n classNames.add(`.${className}`);\n });\n }\n\n for (let i = 0; i < styleSheets.length; i++) {\n const rules = styleSheets[i].cssRules;\n for (let j = 0; j < rules.length; j++) {\n if (rules[j].constructor.name === 'CSSStyleRule') {\n const selectorText = (rules[j] as CSSStyleRule).selectorText;\n const hasClassName = selectorText.split(' ').some(word => classNames.has(word));\n\n if (hasClassName) {\n styleRules += rules[j].cssText + ' ';\n }\n }\n }\n }\n styleRules = resolveCSSVariables(chartContainer, styleRules);\n\n const xmlDocument = new DOMParser().parseFromString('<svg></svg>', 'image/svg+xml');\n const styleNode = xmlDocument.createCDATASection(styleRules);\n clonedSvg.insert('defs', ':first-child').append('style').attr('type', 'text/css').node()!.appendChild(styleNode);\n\n clonedSvg.attr('width', w1).attr('height', h1).attr('viewBox', `0 0 ${w1} ${h1}`);\n\n return {\n node: clonedSvg.node()!,\n width: w1,\n height: h1,\n };\n}\n\nfunction cloneLegendsToSVG(chartContainer: HTMLElement, svgWidth: number, svgHeight: number, classNames: Set<string>) {\n const legendButtons = chartContainer.querySelectorAll<HTMLElement>(`\n button[class^=\"legend-\"],\n [class^=\"legendContainer-\"] div[class^=\"overflowIndicationTextStyle-\"],\n [class^=\"legendsContainer-\"] div[class^=\"overflowIndicationTextStyle-\"]\n `);\n if (legendButtons.length === 0) {\n return {\n node: null,\n width: 0,\n height: 0,\n };\n }\n\n const legendGroup = d3Create<SVGGElement>('svg:g');\n let legendX = 0;\n let legendY = 8;\n let legendLine: Selection<SVGGElement, unknown, null, undefined>[] = [];\n const legendLines: (typeof legendLine)[] = [];\n const legendLineWidths: number[] = [];\n\n for (let i = 0; i < legendButtons.length; i++) {\n const { width: legendWidth } = legendButtons[i].getBoundingClientRect();\n const legendItem = legendGroup.append('g');\n\n legendLine.push(legendItem);\n if (legendX + legendWidth > svgWidth && legendLine.length > 1) {\n legendLine.pop();\n legendLines.push(legendLine);\n legendLineWidths.push(legendX);\n\n legendLine = [legendItem];\n legendX = 0;\n legendY += 32;\n }\n\n let legendText: HTMLDivElement | null;\n let textOffset = 0;\n\n if (legendButtons[i].tagName.toLowerCase() === 'button') {\n const legendRect = legendButtons[i].querySelector<HTMLDivElement>('[class^=\"rect\"]');\n const { backgroundColor: legendColor, borderColor: legendBorderColor } = getComputedStyle(legendRect!);\n\n legendText = legendButtons[i].querySelector<HTMLDivElement>('[class^=\"text\"]');\n legendText!.classList.forEach(className => classNames.add(`.${className}`));\n legendItem\n .append('rect')\n .attr('x', legendX + 8)\n .attr('y', svgHeight + legendY + 8)\n .attr('width', 12)\n .attr('height', 12)\n .attr('fill', legendColor)\n .attr('stroke-width', 1)\n .attr('stroke', legendBorderColor);\n textOffset = 28;\n } else {\n legendText = legendButtons[i] as HTMLDivElement;\n legendText.classList.forEach(className => classNames.add(`.${className}`));\n textOffset = 8;\n }\n\n const { color: textColor } = getComputedStyle(legendText!);\n legendItem\n .append('text')\n .attr('x', legendX + textOffset)\n .attr('y', svgHeight + legendY + 8)\n .attr('dominant-baseline', 'hanging')\n .attr('class', legendText!.getAttribute('class'))\n .attr('fill', textColor)\n .text(legendText!.textContent);\n legendX += legendWidth;\n }\n\n legendLines.push(legendLine);\n legendLineWidths.push(legendX);\n legendY += 32;\n\n const centerLegends = true;\n if (centerLegends) {\n legendLines.forEach((ln, idx) => {\n const offsetX = Math.max((svgWidth - legendLineWidths[idx]) / 2, 0);\n ln.forEach(item => {\n item.attr('transform', `translate(${offsetX}, 0)`);\n });\n });\n }\n\n return {\n node: legendGroup.node(),\n width: Math.max(...legendLineWidths),\n height: legendY,\n };\n}\n\nconst cssVarRegExp = /var\\((--[a-zA-Z0-9\\-]+)\\)/g;\n\nfunction resolveCSSVariables(chartContainer: HTMLElement, styleRules: string) {\n const containerStyles = getComputedStyle(chartContainer);\n return styleRules.replace(cssVarRegExp, (match, group1) => {\n return containerStyles.getPropertyValue(group1);\n });\n}\n\nfunction svgToPng(svgDataUrl: string, opts: IImageExportOptions = {}): Promise<string> {\n return new Promise((resolve, reject) => {\n const scale = opts.scale || 1;\n const w0 = opts.width || 300;\n const h0 = opts.height || 150;\n const w1 = scale * w0;\n const h1 = scale * h0;\n\n const canvas = document.createElement('canvas');\n const img = new Image();\n\n canvas.width = w1;\n canvas.height = h1;\n\n img.onload = function () {\n const ctx = canvas.getContext('2d');\n if (!ctx) {\n return reject(new Error('Canvas context is null'));\n }\n\n ctx.clearRect(0, 0, w1, h1);\n ctx.drawImage(img, 0, 0, w1, h1);\n\n const imgData = canvas.toDataURL('image/png');\n resolve(imgData);\n };\n\n img.onerror = function (err) {\n reject(err);\n };\n\n img.src = svgDataUrl;\n });\n}\n\nconst hex2 = /^[\\da-f]{2}$/i;\nconst hex4 = /^[\\da-f]{4}$/i;\n\n/**\n * A ponyfill for the deprecated `unescape` method, taken from the `core-js` library.\n *\n * Source: {@link https://github.com/zloirock/core-js/blob/167136f479d3b8519953f2e4c534ecdd1031d3cf/packages/core-js/modules/es.unescape.js core-js/packages/core-js/modules/es.unescape.js}\n */\nfunction unescapePonyfill(str: string) {\n let result = '';\n const length = str.length;\n let index = 0;\n let chr;\n let part;\n while (index < length) {\n chr = str.charAt(index++);\n if (chr === '%') {\n if (str.charAt(index) === 'u') {\n part = str.slice(index + 1, index + 5);\n if (hex4.exec(part)) {\n result += String.fromCharCode(parseInt(part, 16));\n index += 5;\n continue;\n }\n } else {\n part = str.slice(index, index + 2);\n if (hex2.exec(part)) {\n result += String.fromCharCode(parseInt(part, 16));\n index += 2;\n continue;\n }\n }\n }\n result += chr;\n }\n return result;\n}\n"]}
@@ -47,7 +47,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react", "../DonutChar
47
47
  };
48
48
  var exportAsImage = React.useCallback(function (opts) {
49
49
  var _a;
50
- return (0, imageExporter_1.toImage)((_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer, tslib_1.__assign({ background: theme.palette.white }, opts));
50
+ return (0, imageExporter_1.toImage)((_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer, tslib_1.__assign({ background: theme.semanticColors.bodyBackground }, opts));
51
51
  }, [theme]);
52
52
  React.useImperativeHandle(props.componentRef, function () { return ({
53
53
  exportAsImage: exportAsImage,
@@ -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 */\n/* eslint-disable @typescript-eslint/no-explicit-any */\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 {\n isArrayOrTypedArray,\n isDateArray,\n isNumberArray,\n isMonthArray,\n sanitizeJson,\n updateXValues,\n transformPlotlyJsonToDonutProps,\n transformPlotlyJsonToVSBCProps,\n transformPlotlyJsonToScatterChartProps,\n transformPlotlyJsonToHorizontalBarWithAxisProps,\n transformPlotlyJsonToHeatmapProps,\n transformPlotlyJsonToSankeyProps,\n transformPlotlyJsonToGaugeProps,\n transformPlotlyJsonToGVBCProps,\n transformPlotlyJsonToVBCProps,\n} from './PlotlySchemaAdapter';\nimport { LineChart } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart } 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 { IImageExportOptions, toImage } from './imageExporter';\nimport { IChart } from '../../types/index';\n\n/**\n * DeclarativeChart schema.\n * {@docCategory DeclarativeChart}\n */\nexport interface Schema {\n /**\n * Plotly schema represented as JSON object\n */\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/**\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 { data, layout } = plotlySchema;\n let { selectedLegends } = plotlySchema;\n const xValues = data[0].x;\n const isXDate = isDateArray(xValues);\n const isXNumber = isNumberArray(xValues);\n const isXMonth = isMonthArray(xValues);\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: { data, layout, 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 legendProps = {\n canSelectMultipleLegends: false,\n onChange: onActiveLegendsChange,\n selectedLegend: activeLegends.slice(0, 1)[0],\n };\n\n const exportAsImage = React.useCallback(\n (opts?: IImageExportOptions) => {\n return toImage(chartRef.current?.chartContainer, {\n background: theme.palette.white,\n ...opts,\n });\n },\n [theme],\n );\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n exportAsImage,\n }),\n [exportAsImage],\n );\n\n const multiSelectLegendProps = {\n ...legendProps,\n canSelectMultipleLegends: true,\n selectedLegends: activeLegends,\n };\n\n switch (data[0].type) {\n case 'pie':\n return (\n <DonutChart\n {...transformPlotlyJsonToDonutProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n // Bubble event to prevent right click to open menu on the callout\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n case 'bar':\n const orientation = data[0].orientation;\n if (orientation === 'h') {\n return (\n <HorizontalBarChartWithAxis\n {...transformPlotlyJsonToHorizontalBarWithAxisProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n } else {\n if (['group', 'overlay'].includes(plotlySchema?.layout?.barmode)) {\n return (\n <GroupedVerticalBarChart\n {...transformPlotlyJsonToGVBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n }\n return (\n <VerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n }\n case 'scatter':\n const isAreaChart = data.some((series: any) => series.fill === 'tonexty' || series.fill === 'tozeroy');\n const renderChart = (chartProps: any) => {\n if (isAreaChart) {\n return (\n <AreaChart\n {...chartProps}\n legendProps={{ ...legendProps, canSelectMultipleLegends: true, selectedLegends: activeLegends }}\n />\n );\n }\n return (\n <LineChart\n {...{\n ...chartProps,\n legendProps: {\n onChange: onActiveLegendsChange,\n canSelectMultipleLegends: true,\n selectedLegends: activeLegends,\n },\n }}\n />\n );\n };\n if (isXDate || isXNumber) {\n const chartProps = {\n ...transformPlotlyJsonToScatterChartProps({ data, layout }, isAreaChart, colorMap, isDarkTheme),\n legendProps,\n componentRef: chartRef,\n calloutProps: { layerProps: { eventBubblingEnabled: true } },\n };\n return renderChart(chartProps);\n } else if (isXMonth) {\n const updatedData = data.map((dataPoint: any) => ({\n ...dataPoint,\n x: updateXValues(dataPoint.x),\n }));\n const chartProps = {\n ...transformPlotlyJsonToScatterChartProps({ data: updatedData, layout }, isAreaChart, colorMap, isDarkTheme),\n legendProps,\n componentRef: chartRef,\n calloutProps: { layerProps: { eventBubblingEnabled: true } },\n };\n return renderChart(chartProps);\n }\n return (\n <VerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n case 'heatmap':\n return (\n <HeatMapChart\n {...transformPlotlyJsonToHeatmapProps(plotlySchema)}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n case 'sankey':\n return (\n <SankeyChart\n {...transformPlotlyJsonToSankeyProps(plotlySchema, colorMap, isDarkTheme)}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n case 'indicator':\n if (data?.[0]?.mode?.includes('gauge')) {\n return (\n <GaugeChart\n {...transformPlotlyJsonToGaugeProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n }\n return <div>Unsupported Schema</div>;\n case 'histogram':\n return (\n <VerticalBarChart\n {...transformPlotlyJsonToVBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n default:\n throw new Error('Unsupported chart schema');\n }\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\n"]}
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 */\n/* eslint-disable @typescript-eslint/no-explicit-any */\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 {\n isArrayOrTypedArray,\n isDateArray,\n isNumberArray,\n isMonthArray,\n sanitizeJson,\n updateXValues,\n transformPlotlyJsonToDonutProps,\n transformPlotlyJsonToVSBCProps,\n transformPlotlyJsonToScatterChartProps,\n transformPlotlyJsonToHorizontalBarWithAxisProps,\n transformPlotlyJsonToHeatmapProps,\n transformPlotlyJsonToSankeyProps,\n transformPlotlyJsonToGaugeProps,\n transformPlotlyJsonToGVBCProps,\n transformPlotlyJsonToVBCProps,\n} from './PlotlySchemaAdapter';\nimport { LineChart } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart } 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 { IImageExportOptions, toImage } from './imageExporter';\nimport { IChart } from '../../types/index';\n\n/**\n * DeclarativeChart schema.\n * {@docCategory DeclarativeChart}\n */\nexport interface Schema {\n /**\n * Plotly schema represented as JSON object\n */\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/**\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 { data, layout } = plotlySchema;\n let { selectedLegends } = plotlySchema;\n const xValues = data[0].x;\n const isXDate = isDateArray(xValues);\n const isXNumber = isNumberArray(xValues);\n const isXMonth = isMonthArray(xValues);\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: { data, layout, 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 legendProps = {\n canSelectMultipleLegends: false,\n onChange: onActiveLegendsChange,\n selectedLegend: activeLegends.slice(0, 1)[0],\n };\n\n const exportAsImage = React.useCallback(\n (opts?: IImageExportOptions) => {\n return toImage(chartRef.current?.chartContainer, {\n background: theme.semanticColors.bodyBackground,\n ...opts,\n });\n },\n [theme],\n );\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n exportAsImage,\n }),\n [exportAsImage],\n );\n\n const multiSelectLegendProps = {\n ...legendProps,\n canSelectMultipleLegends: true,\n selectedLegends: activeLegends,\n };\n\n switch (data[0].type) {\n case 'pie':\n return (\n <DonutChart\n {...transformPlotlyJsonToDonutProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n // Bubble event to prevent right click to open menu on the callout\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n case 'bar':\n const orientation = data[0].orientation;\n if (orientation === 'h') {\n return (\n <HorizontalBarChartWithAxis\n {...transformPlotlyJsonToHorizontalBarWithAxisProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n } else {\n if (['group', 'overlay'].includes(plotlySchema?.layout?.barmode)) {\n return (\n <GroupedVerticalBarChart\n {...transformPlotlyJsonToGVBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n }\n return (\n <VerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n }\n case 'scatter':\n const isAreaChart = data.some((series: any) => series.fill === 'tonexty' || series.fill === 'tozeroy');\n const renderChart = (chartProps: any) => {\n if (isAreaChart) {\n return (\n <AreaChart\n {...chartProps}\n legendProps={{ ...legendProps, canSelectMultipleLegends: true, selectedLegends: activeLegends }}\n />\n );\n }\n return (\n <LineChart\n {...{\n ...chartProps,\n legendProps: {\n onChange: onActiveLegendsChange,\n canSelectMultipleLegends: true,\n selectedLegends: activeLegends,\n },\n }}\n />\n );\n };\n if (isXDate || isXNumber) {\n const chartProps = {\n ...transformPlotlyJsonToScatterChartProps({ data, layout }, isAreaChart, colorMap, isDarkTheme),\n legendProps,\n componentRef: chartRef,\n calloutProps: { layerProps: { eventBubblingEnabled: true } },\n };\n return renderChart(chartProps);\n } else if (isXMonth) {\n const updatedData = data.map((dataPoint: any) => ({\n ...dataPoint,\n x: updateXValues(dataPoint.x),\n }));\n const chartProps = {\n ...transformPlotlyJsonToScatterChartProps({ data: updatedData, layout }, isAreaChart, colorMap, isDarkTheme),\n legendProps,\n componentRef: chartRef,\n calloutProps: { layerProps: { eventBubblingEnabled: true } },\n };\n return renderChart(chartProps);\n }\n return (\n <VerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n case 'heatmap':\n return (\n <HeatMapChart\n {...transformPlotlyJsonToHeatmapProps(plotlySchema)}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n case 'sankey':\n return (\n <SankeyChart\n {...transformPlotlyJsonToSankeyProps(plotlySchema, colorMap, isDarkTheme)}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n case 'indicator':\n if (data?.[0]?.mode?.includes('gauge')) {\n return (\n <GaugeChart\n {...transformPlotlyJsonToGaugeProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n }\n return <div>Unsupported Schema</div>;\n case 'histogram':\n return (\n <VerticalBarChart\n {...transformPlotlyJsonToVBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n default:\n throw new Error('Unsupported chart schema');\n }\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\n"]}
@@ -9,7 +9,7 @@ define(["require", "exports", "d3-selection"], function (require, exports, d3_se
9
9
  return reject(new Error('Chart container is not defined'));
10
10
  }
11
11
  try {
12
- var background = 'white'; // Background is coming as --var(xxx) when used with v8 wrapper in v9
12
+ var background = typeof opts.background === 'string' ? resolveCSSVariables(chartContainer, opts.background) : 'transparent';
13
13
  var svg = toSVG(chartContainer, background);
14
14
  var svgData = new XMLSerializer().serializeToString(svg.node);
15
15
  var svgDataUrl = 'data:image/svg+xml;base64,' + btoa(unescapePonyfill(encodeURIComponent(svgData)));
@@ -53,7 +53,7 @@ define(["require", "exports", "d3-selection"], function (require, exports, d3_se
53
53
  .attr('fill', background);
54
54
  var svgElements = svg.getElementsByTagName('*');
55
55
  var styleSheets = document.styleSheets;
56
- var styleRules = [];
56
+ var styleRules = '';
57
57
  for (var i = svgElements.length - 1; i--;) {
58
58
  svgElements[i].classList.forEach(function (className) {
59
59
  classNames.add(".".concat(className));
@@ -66,13 +66,14 @@ define(["require", "exports", "d3-selection"], function (require, exports, d3_se
66
66
  var selectorText = rules[j].selectorText;
67
67
  var hasClassName = selectorText.split(' ').some(function (word) { return classNames.has(word); });
68
68
  if (hasClassName) {
69
- styleRules.push(rules[j].cssText);
69
+ styleRules += rules[j].cssText + ' ';
70
70
  }
71
71
  }
72
72
  }
73
73
  }
74
+ styleRules = resolveCSSVariables(chartContainer, styleRules);
74
75
  var xmlDocument = new DOMParser().parseFromString('<svg></svg>', 'image/svg+xml');
75
- var styleNode = xmlDocument.createCDATASection(styleRules.join(' '));
76
+ var styleNode = xmlDocument.createCDATASection(styleRules);
76
77
  clonedSvg.insert('defs', ':first-child').append('style').attr('type', 'text/css').node().appendChild(styleNode);
77
78
  clonedSvg.attr('width', w1).attr('height', h1).attr('viewBox', "0 0 ".concat(w1, " ").concat(h1));
78
79
  return {
@@ -131,12 +132,14 @@ define(["require", "exports", "d3-selection"], function (require, exports, d3_se
131
132
  legendText.classList.forEach(function (className) { return classNames.add(".".concat(className)); });
132
133
  textOffset = 8;
133
134
  }
135
+ var textColor = getComputedStyle(legendText).color;
134
136
  legendItem
135
137
  .append('text')
136
138
  .attr('x', legendX + textOffset)
137
139
  .attr('y', svgHeight + legendY + 8)
138
140
  .attr('dominant-baseline', 'hanging')
139
141
  .attr('class', legendText.getAttribute('class'))
142
+ .attr('fill', textColor)
140
143
  .text(legendText.textContent);
141
144
  legendX += legendWidth;
142
145
  }
@@ -158,6 +161,13 @@ define(["require", "exports", "d3-selection"], function (require, exports, d3_se
158
161
  height: legendY,
159
162
  };
160
163
  }
164
+ var cssVarRegExp = /var\((--[a-zA-Z0-9\-]+)\)/g;
165
+ function resolveCSSVariables(chartContainer, styleRules) {
166
+ var containerStyles = getComputedStyle(chartContainer);
167
+ return styleRules.replace(cssVarRegExp, function (match, group1) {
168
+ return containerStyles.getPropertyValue(group1);
169
+ });
170
+ }
161
171
  function svgToPng(svgDataUrl, opts) {
162
172
  if (opts === void 0) { opts = {}; }
163
173
  return new Promise(function (resolve, reject) {
@@ -1 +1 @@
1
- {"version":3,"file":"imageExporter.js","sourceRoot":"../src/","sources":["components/DeclarativeChart/imageExporter.ts"],"names":[],"mappings":";;;;IAYA,SAAgB,OAAO,CAAC,cAAmC,EAAE,IAA8B;QAA9B,qBAAA,EAAA,SAA8B;QACzF,OAAO,IAAI,OAAO,CAAC,UAAC,OAAO,EAAE,MAAM;YACjC,IAAI,CAAC,cAAc,EAAE,CAAC;gBACpB,OAAO,MAAM,CAAC,IAAI,KAAK,CAAC,gCAAgC,CAAC,CAAC,CAAC;YAC7D,CAAC;YAED,IAAI,CAAC;gBACH,IAAM,UAAU,GAAG,OAAO,CAAC,CAAC,qEAAqE;gBACjG,IAAM,GAAG,GAAG,KAAK,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC;gBAE9C,IAAM,OAAO,GAAG,IAAI,aAAa,EAAE,CAAC,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;gBAChE,IAAM,UAAU,GAAG,4BAA4B,GAAG,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;gBAEtG,QAAQ,CAAC,UAAU,EAAE;oBACnB,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,KAAK;oBAC9B,MAAM,EAAE,IAAI,CAAC,MAAM,IAAI,GAAG,CAAC,MAAM;oBACjC,KAAK,EAAE,IAAI,CAAC,KAAK;iBAClB,CAAC;qBACC,IAAI,CAAC,OAAO,CAAC;qBACb,KAAK,CAAC,MAAM,CAAC,CAAC;YACnB,CAAC;YAAC,OAAO,GAAG,EAAE,CAAC;gBACb,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC;YACrB,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAxBD,0BAwBC;IAED,SAAS,KAAK,CAAC,cAA2B,EAAE,UAAkB;QAC5D,IAAM,GAAG,GAAG,cAAc,CAAC,aAAa,CAAgB,KAAK,CAAC,CAAC;QAC/D,IAAI,CAAC,GAAG,EAAE,CAAC;YACT,MAAM,IAAI,KAAK,CAAC,eAAe,CAAC,CAAC;QACnC,CAAC;QAEK,IAAA,KAAyC,GAAG,CAAC,qBAAqB,EAAE,EAA3D,QAAQ,WAAA,EAAU,SAAS,YAAgC,CAAC;QAC3E,IAAM,UAAU,GAAG,IAAI,GAAG,EAAU,CAAC;QACrC,IAAM,WAAW,GAAG,iBAAiB,CAAC,cAAc,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC;QACvF,IAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;QACjD,IAAM,EAAE,GAAG,SAAS,GAAG,WAAW,CAAC,MAAM,CAAC;QAC1C,IAAM,SAAS,GAAG,IAAA,qBAAQ,EAAC,GAAG,CAAC,SAAS,CAAC,IAAI,CAAkB,CAAC;aAC7D,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC;aACnB,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC;aACpB,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;QAEzB,IAAI,WAAW,CAAC,IAAI,EAAE,CAAC;YACrB,SAAS,CAAC,MAAM,CAAC,cAAM,OAAA,WAAW,CAAC,IAAI,EAAhB,CAAgB,CAAC,CAAC;QAC3C,CAAC;QACD,SAAS;aACN,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC;aAC9B,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;aACZ,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;aACZ,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC;aACjB,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC;aAClB,IAAI,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QAE5B,IAAM,WAAW,GAAG,GAAG,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC;QAClD,IAAM,WAAW,GAAG,QAAQ,CAAC,WAAW,CAAC;QACzC,IAAM,UAAU,GAAa,EAAE,CAAC;QAEhC,KAAK,IAAI,CAAC,GAAG,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,EAAE,GAAI,CAAC;YAC3C,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,UAAA,SAAS;gBACxC,UAAU,CAAC,GAAG,CAAC,WAAI,SAAS,CAAE,CAAC,CAAC;YAClC,CAAC,CAAC,CAAC;QACL,CAAC;QAED,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,WAAW,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAC5C,IAAM,KAAK,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;YACtC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBACtC,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,KAAK,cAAc,EAAE,CAAC;oBACjD,IAAM,YAAY,GAAI,KAAK,CAAC,CAAC,CAAkB,CAAC,YAAY,CAAC;oBAC7D,IAAM,YAAY,GAAG,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,UAAA,IAAI,IAAI,OAAA,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,EAApB,CAAoB,CAAC,CAAC;oBAEhF,IAAI,YAAY,EAAE,CAAC;wBACjB,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;oBACpC,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;QAED,IAAM,WAAW,GAAG,IAAI,SAAS,EAAE,CAAC,eAAe,CAAC,aAAa,EAAE,eAAe,CAAC,CAAC;QACpF,IAAM,SAAS,GAAG,WAAW,CAAC,kBAAkB,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QACvE,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,IAAI,EAAG,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;QAEjH,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,cAAO,EAAE,cAAI,EAAE,CAAE,CAAC,CAAC;QAElF,OAAO;YACL,IAAI,EAAE,SAAS,CAAC,IAAI,EAAG;YACvB,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;SACX,CAAC;IACJ,CAAC;IAED,SAAS,iBAAiB,CAAC,cAA2B,EAAE,QAAgB,EAAE,SAAiB,EAAE,UAAuB;QAClH,IAAM,aAAa,GAAG,cAAc,CAAC,gBAAgB,CAAc,yMAIlE,CAAC,CAAC;QACH,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC/B,OAAO;gBACL,IAAI,EAAE,IAAI;gBACV,KAAK,EAAE,CAAC;gBACR,MAAM,EAAE,CAAC;aACV,CAAC;QACJ,CAAC;QAED,IAAM,WAAW,GAAG,IAAA,qBAAQ,EAAc,OAAO,CAAC,CAAC;QACnD,IAAI,OAAO,GAAG,CAAC,CAAC;QAChB,IAAI,OAAO,GAAG,CAAC,CAAC;QAChB,IAAI,UAAU,GAAuD,EAAE,CAAC;QACxE,IAAM,WAAW,GAA0B,EAAE,CAAC;QAC9C,IAAM,gBAAgB,GAAa,EAAE,CAAC;QAEtC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACtC,IAAO,WAAW,GAAK,aAAa,CAAC,CAAC,CAAC,CAAC,qBAAqB,EAAE,MAA7C,CAA8C;YACxE,IAAM,UAAU,GAAG,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;YAE3C,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YAC5B,IAAI,OAAO,GAAG,WAAW,GAAG,QAAQ,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAC9D,UAAU,CAAC,GAAG,EAAE,CAAC;gBACjB,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;gBAC7B,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;gBAE/B,UAAU,GAAG,CAAC,UAAU,CAAC,CAAC;gBAC1B,OAAO,GAAG,CAAC,CAAC;gBACZ,OAAO,IAAI,EAAE,CAAC;YAChB,CAAC;YAED,IAAI,UAAU,SAAuB,CAAC;YACtC,IAAI,UAAU,GAAG,CAAC,CAAC;YAEnB,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,QAAQ,EAAE,CAAC;gBACxD,IAAM,UAAU,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC,aAAa,CAAiB,iBAAiB,CAAC,CAAC;gBAC/E,IAAA,KAAmE,gBAAgB,CAAC,UAAW,CAAC,EAA7E,WAAW,qBAAA,EAAe,iBAAiB,iBAAkC,CAAC;gBAEvG,UAAU,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC,aAAa,CAAiB,iBAAiB,CAAC,CAAC;gBAC/E,UAAW,CAAC,SAAS,CAAC,OAAO,CAAC,UAAA,SAAS,IAAI,OAAA,UAAU,CAAC,GAAG,CAAC,WAAI,SAAS,CAAE,CAAC,EAA/B,CAA+B,CAAC,CAAC;gBAC5E,UAAU;qBACP,MAAM,CAAC,MAAM,CAAC;qBACd,IAAI,CAAC,GAAG,EAAE,OAAO,GAAG,CAAC,CAAC;qBACtB,IAAI,CAAC,GAAG,EAAE,SAAS,GAAG,OAAO,GAAG,CAAC,CAAC;qBAClC,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC;qBACjB,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC;qBAClB,IAAI,CAAC,MAAM,EAAE,WAAW,CAAC;qBACzB,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;qBACvB,IAAI,CAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAC;gBACrC,UAAU,GAAG,EAAE,CAAC;YAClB,CAAC;iBAAM,CAAC;gBACN,UAAU,GAAG,aAAa,CAAC,CAAC,CAAmB,CAAC;gBAChD,UAAU,CAAC,SAAS,CAAC,OAAO,CAAC,UAAA,SAAS,IAAI,OAAA,UAAU,CAAC,GAAG,CAAC,WAAI,SAAS,CAAE,CAAC,EAA/B,CAA+B,CAAC,CAAC;gBAC3E,UAAU,GAAG,CAAC,CAAC;YACjB,CAAC;YAED,UAAU;iBACP,MAAM,CAAC,MAAM,CAAC;iBACd,IAAI,CAAC,GAAG,EAAE,OAAO,GAAG,UAAU,CAAC;iBAC/B,IAAI,CAAC,GAAG,EAAE,SAAS,GAAG,OAAO,GAAG,CAAC,CAAC;iBAClC,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC;iBACpC,IAAI,CAAC,OAAO,EAAE,UAAW,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;iBAChD,IAAI,CAAC,UAAW,CAAC,WAAW,CAAC,CAAC;YACjC,OAAO,IAAI,WAAW,CAAC;QACzB,CAAC;QAED,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC7B,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC/B,OAAO,IAAI,EAAE,CAAC;QAEd,IAAM,aAAa,GAAG,IAAI,CAAC;QAC3B,IAAI,aAAa,EAAE,CAAC;YAClB,WAAW,CAAC,OAAO,CAAC,UAAC,EAAE,EAAE,GAAG;gBAC1B,IAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,QAAQ,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;gBACpE,EAAE,CAAC,OAAO,CAAC,UAAA,IAAI;oBACb,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,oBAAa,OAAO,SAAM,CAAC,CAAC;gBACrD,CAAC,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;QACL,CAAC;QAED,OAAO;YACL,IAAI,EAAE,WAAW,CAAC,IAAI,EAAE;YACxB,KAAK,EAAE,IAAI,CAAC,GAAG,OAAR,IAAI,EAAQ,gBAAgB,CAAC;YACpC,MAAM,EAAE,OAAO;SAChB,CAAC;IACJ,CAAC;IAED,SAAS,QAAQ,CAAC,UAAkB,EAAE,IAA8B;QAA9B,qBAAA,EAAA,SAA8B;QAClE,OAAO,IAAI,OAAO,CAAC,UAAC,OAAO,EAAE,MAAM;YACjC,IAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC;YAC9B,IAAM,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC;YAC7B,IAAM,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI,GAAG,CAAC;YAC9B,IAAM,EAAE,GAAG,KAAK,GAAG,EAAE,CAAC;YACtB,IAAM,EAAE,GAAG,KAAK,GAAG,EAAE,CAAC;YAEtB,IAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YAChD,IAAM,GAAG,GAAG,IAAI,KAAK,EAAE,CAAC;YAExB,MAAM,CAAC,KAAK,GAAG,EAAE,CAAC;YAClB,MAAM,CAAC,MAAM,GAAG,EAAE,CAAC;YAEnB,GAAG,CAAC,MAAM,GAAG;gBACX,IAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;gBACpC,IAAI,CAAC,GAAG,EAAE,CAAC;oBACT,OAAO,MAAM,CAAC,IAAI,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC;gBACrD,CAAC;gBAED,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;gBAC5B,GAAG,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;gBAEjC,IAAM,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;gBAC9C,OAAO,CAAC,OAAO,CAAC,CAAC;YACnB,CAAC,CAAC;YAEF,GAAG,CAAC,OAAO,GAAG,UAAU,GAAG;gBACzB,MAAM,CAAC,GAAG,CAAC,CAAC;YACd,CAAC,CAAC;YAEF,GAAG,CAAC,GAAG,GAAG,UAAU,CAAC;QACvB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,IAAM,IAAI,GAAG,eAAe,CAAC;IAC7B,IAAM,IAAI,GAAG,eAAe,CAAC;IAE7B;;;;OAIG;IACH,SAAS,gBAAgB,CAAC,GAAW;QACnC,IAAI,MAAM,GAAG,EAAE,CAAC;QAChB,IAAM,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC;QAC1B,IAAI,KAAK,GAAG,CAAC,CAAC;QACd,IAAI,GAAG,CAAC;QACR,IAAI,IAAI,CAAC;QACT,OAAO,KAAK,GAAG,MAAM,EAAE,CAAC;YACtB,GAAG,GAAG,GAAG,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;YAC1B,IAAI,GAAG,KAAK,GAAG,EAAE,CAAC;gBAChB,IAAI,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;oBAC9B,IAAI,GAAG,GAAG,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;oBACvC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;wBACpB,MAAM,IAAI,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC;wBAClD,KAAK,IAAI,CAAC,CAAC;wBACX,SAAS;oBACX,CAAC;gBACH,CAAC;qBAAM,CAAC;oBACN,IAAI,GAAG,GAAG,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;oBACnC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;wBACpB,MAAM,IAAI,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC;wBAClD,KAAK,IAAI,CAAC,CAAC;wBACX,SAAS;oBACX,CAAC;gBACH,CAAC;YACH,CAAC;YACD,MAAM,IAAI,GAAG,CAAC;QAChB,CAAC;QACD,OAAO,MAAM,CAAC;IAChB,CAAC","sourcesContent":["import { create as d3Create, select as d3Select, Selection } from 'd3-selection';\n\n/**\n * {@docCategory DeclarativeChart}\n */\nexport interface IImageExportOptions {\n width?: number;\n height?: number;\n scale?: number;\n background?: string;\n}\n\nexport function toImage(chartContainer?: HTMLElement | null, opts: IImageExportOptions = {}): Promise<string> {\n return new Promise((resolve, reject) => {\n if (!chartContainer) {\n return reject(new Error('Chart container is not defined'));\n }\n\n try {\n const background = 'white'; // Background is coming as --var(xxx) when used with v8 wrapper in v9\n const svg = toSVG(chartContainer, background);\n\n const svgData = new XMLSerializer().serializeToString(svg.node);\n const svgDataUrl = 'data:image/svg+xml;base64,' + btoa(unescapePonyfill(encodeURIComponent(svgData)));\n\n svgToPng(svgDataUrl, {\n width: opts.width || svg.width,\n height: opts.height || svg.height,\n scale: opts.scale,\n })\n .then(resolve)\n .catch(reject);\n } catch (err) {\n return reject(err);\n }\n });\n}\n\nfunction toSVG(chartContainer: HTMLElement, background: string) {\n const svg = chartContainer.querySelector<SVGSVGElement>('svg');\n if (!svg) {\n throw new Error('SVG not found');\n }\n\n const { width: svgWidth, height: svgHeight } = svg.getBoundingClientRect();\n const classNames = new Set<string>();\n const legendGroup = cloneLegendsToSVG(chartContainer, svgWidth, svgHeight, classNames);\n const w1 = Math.max(svgWidth, legendGroup.width);\n const h1 = svgHeight + legendGroup.height;\n const clonedSvg = d3Select(svg.cloneNode(true) as SVGSVGElement)\n .attr('width', null)\n .attr('height', null)\n .attr('viewBox', null);\n\n if (legendGroup.node) {\n clonedSvg.append(() => legendGroup.node);\n }\n clonedSvg\n .insert('rect', ':first-child')\n .attr('x', 0)\n .attr('y', 0)\n .attr('width', w1)\n .attr('height', h1)\n .attr('fill', background);\n\n const svgElements = svg.getElementsByTagName('*');\n const styleSheets = document.styleSheets;\n const styleRules: string[] = [];\n\n for (let i = svgElements.length - 1; i--; ) {\n svgElements[i].classList.forEach(className => {\n classNames.add(`.${className}`);\n });\n }\n\n for (let i = 0; i < styleSheets.length; i++) {\n const rules = styleSheets[i].cssRules;\n for (let j = 0; j < rules.length; j++) {\n if (rules[j].constructor.name === 'CSSStyleRule') {\n const selectorText = (rules[j] as CSSStyleRule).selectorText;\n const hasClassName = selectorText.split(' ').some(word => classNames.has(word));\n\n if (hasClassName) {\n styleRules.push(rules[j].cssText);\n }\n }\n }\n }\n\n const xmlDocument = new DOMParser().parseFromString('<svg></svg>', 'image/svg+xml');\n const styleNode = xmlDocument.createCDATASection(styleRules.join(' '));\n clonedSvg.insert('defs', ':first-child').append('style').attr('type', 'text/css').node()!.appendChild(styleNode);\n\n clonedSvg.attr('width', w1).attr('height', h1).attr('viewBox', `0 0 ${w1} ${h1}`);\n\n return {\n node: clonedSvg.node()!,\n width: w1,\n height: h1,\n };\n}\n\nfunction cloneLegendsToSVG(chartContainer: HTMLElement, svgWidth: number, svgHeight: number, classNames: Set<string>) {\n const legendButtons = chartContainer.querySelectorAll<HTMLElement>(`\n button[class^=\"legend-\"],\n [class^=\"legendContainer-\"] div[class^=\"overflowIndicationTextStyle-\"],\n [class^=\"legendsContainer-\"] div[class^=\"overflowIndicationTextStyle-\"]\n `);\n if (legendButtons.length === 0) {\n return {\n node: null,\n width: 0,\n height: 0,\n };\n }\n\n const legendGroup = d3Create<SVGGElement>('svg:g');\n let legendX = 0;\n let legendY = 8;\n let legendLine: Selection<SVGGElement, unknown, null, undefined>[] = [];\n const legendLines: (typeof legendLine)[] = [];\n const legendLineWidths: number[] = [];\n\n for (let i = 0; i < legendButtons.length; i++) {\n const { width: legendWidth } = legendButtons[i].getBoundingClientRect();\n const legendItem = legendGroup.append('g');\n\n legendLine.push(legendItem);\n if (legendX + legendWidth > svgWidth && legendLine.length > 1) {\n legendLine.pop();\n legendLines.push(legendLine);\n legendLineWidths.push(legendX);\n\n legendLine = [legendItem];\n legendX = 0;\n legendY += 32;\n }\n\n let legendText: HTMLDivElement | null;\n let textOffset = 0;\n\n if (legendButtons[i].tagName.toLowerCase() === 'button') {\n const legendRect = legendButtons[i].querySelector<HTMLDivElement>('[class^=\"rect\"]');\n const { backgroundColor: legendColor, borderColor: legendBorderColor } = getComputedStyle(legendRect!);\n\n legendText = legendButtons[i].querySelector<HTMLDivElement>('[class^=\"text\"]');\n legendText!.classList.forEach(className => classNames.add(`.${className}`));\n legendItem\n .append('rect')\n .attr('x', legendX + 8)\n .attr('y', svgHeight + legendY + 8)\n .attr('width', 12)\n .attr('height', 12)\n .attr('fill', legendColor)\n .attr('stroke-width', 1)\n .attr('stroke', legendBorderColor);\n textOffset = 28;\n } else {\n legendText = legendButtons[i] as HTMLDivElement;\n legendText.classList.forEach(className => classNames.add(`.${className}`));\n textOffset = 8;\n }\n\n legendItem\n .append('text')\n .attr('x', legendX + textOffset)\n .attr('y', svgHeight + legendY + 8)\n .attr('dominant-baseline', 'hanging')\n .attr('class', legendText!.getAttribute('class'))\n .text(legendText!.textContent);\n legendX += legendWidth;\n }\n\n legendLines.push(legendLine);\n legendLineWidths.push(legendX);\n legendY += 32;\n\n const centerLegends = true;\n if (centerLegends) {\n legendLines.forEach((ln, idx) => {\n const offsetX = Math.max((svgWidth - legendLineWidths[idx]) / 2, 0);\n ln.forEach(item => {\n item.attr('transform', `translate(${offsetX}, 0)`);\n });\n });\n }\n\n return {\n node: legendGroup.node(),\n width: Math.max(...legendLineWidths),\n height: legendY,\n };\n}\n\nfunction svgToPng(svgDataUrl: string, opts: IImageExportOptions = {}): Promise<string> {\n return new Promise((resolve, reject) => {\n const scale = opts.scale || 1;\n const w0 = opts.width || 300;\n const h0 = opts.height || 150;\n const w1 = scale * w0;\n const h1 = scale * h0;\n\n const canvas = document.createElement('canvas');\n const img = new Image();\n\n canvas.width = w1;\n canvas.height = h1;\n\n img.onload = function () {\n const ctx = canvas.getContext('2d');\n if (!ctx) {\n return reject(new Error('Canvas context is null'));\n }\n\n ctx.clearRect(0, 0, w1, h1);\n ctx.drawImage(img, 0, 0, w1, h1);\n\n const imgData = canvas.toDataURL('image/png');\n resolve(imgData);\n };\n\n img.onerror = function (err) {\n reject(err);\n };\n\n img.src = svgDataUrl;\n });\n}\n\nconst hex2 = /^[\\da-f]{2}$/i;\nconst hex4 = /^[\\da-f]{4}$/i;\n\n/**\n * A ponyfill for the deprecated `unescape` method, taken from the `core-js` library.\n *\n * Source: {@link https://github.com/zloirock/core-js/blob/167136f479d3b8519953f2e4c534ecdd1031d3cf/packages/core-js/modules/es.unescape.js core-js/packages/core-js/modules/es.unescape.js}\n */\nfunction unescapePonyfill(str: string) {\n let result = '';\n const length = str.length;\n let index = 0;\n let chr;\n let part;\n while (index < length) {\n chr = str.charAt(index++);\n if (chr === '%') {\n if (str.charAt(index) === 'u') {\n part = str.slice(index + 1, index + 5);\n if (hex4.exec(part)) {\n result += String.fromCharCode(parseInt(part, 16));\n index += 5;\n continue;\n }\n } else {\n part = str.slice(index, index + 2);\n if (hex2.exec(part)) {\n result += String.fromCharCode(parseInt(part, 16));\n index += 2;\n continue;\n }\n }\n }\n result += chr;\n }\n return result;\n}\n"]}
1
+ {"version":3,"file":"imageExporter.js","sourceRoot":"../src/","sources":["components/DeclarativeChart/imageExporter.ts"],"names":[],"mappings":"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","sourcesContent":["import { create as d3Create, select as d3Select, Selection } from 'd3-selection';\n\n/**\n * {@docCategory DeclarativeChart}\n */\nexport interface IImageExportOptions {\n width?: number;\n height?: number;\n scale?: number;\n background?: string;\n}\n\nexport function toImage(chartContainer?: HTMLElement | null, opts: IImageExportOptions = {}): Promise<string> {\n return new Promise((resolve, reject) => {\n if (!chartContainer) {\n return reject(new Error('Chart container is not defined'));\n }\n\n try {\n const background =\n typeof opts.background === 'string' ? resolveCSSVariables(chartContainer, opts.background) : 'transparent';\n const svg = toSVG(chartContainer, background);\n\n const svgData = new XMLSerializer().serializeToString(svg.node);\n const svgDataUrl = 'data:image/svg+xml;base64,' + btoa(unescapePonyfill(encodeURIComponent(svgData)));\n\n svgToPng(svgDataUrl, {\n width: opts.width || svg.width,\n height: opts.height || svg.height,\n scale: opts.scale,\n })\n .then(resolve)\n .catch(reject);\n } catch (err) {\n return reject(err);\n }\n });\n}\n\nfunction toSVG(chartContainer: HTMLElement, background: string) {\n const svg = chartContainer.querySelector<SVGSVGElement>('svg');\n if (!svg) {\n throw new Error('SVG not found');\n }\n\n const { width: svgWidth, height: svgHeight } = svg.getBoundingClientRect();\n const classNames = new Set<string>();\n const legendGroup = cloneLegendsToSVG(chartContainer, svgWidth, svgHeight, classNames);\n const w1 = Math.max(svgWidth, legendGroup.width);\n const h1 = svgHeight + legendGroup.height;\n const clonedSvg = d3Select(svg.cloneNode(true) as SVGSVGElement)\n .attr('width', null)\n .attr('height', null)\n .attr('viewBox', null);\n\n if (legendGroup.node) {\n clonedSvg.append(() => legendGroup.node);\n }\n clonedSvg\n .insert('rect', ':first-child')\n .attr('x', 0)\n .attr('y', 0)\n .attr('width', w1)\n .attr('height', h1)\n .attr('fill', background);\n\n const svgElements = svg.getElementsByTagName('*');\n const styleSheets = document.styleSheets;\n let styleRules: string = '';\n\n for (let i = svgElements.length - 1; i--; ) {\n svgElements[i].classList.forEach(className => {\n classNames.add(`.${className}`);\n });\n }\n\n for (let i = 0; i < styleSheets.length; i++) {\n const rules = styleSheets[i].cssRules;\n for (let j = 0; j < rules.length; j++) {\n if (rules[j].constructor.name === 'CSSStyleRule') {\n const selectorText = (rules[j] as CSSStyleRule).selectorText;\n const hasClassName = selectorText.split(' ').some(word => classNames.has(word));\n\n if (hasClassName) {\n styleRules += rules[j].cssText + ' ';\n }\n }\n }\n }\n styleRules = resolveCSSVariables(chartContainer, styleRules);\n\n const xmlDocument = new DOMParser().parseFromString('<svg></svg>', 'image/svg+xml');\n const styleNode = xmlDocument.createCDATASection(styleRules);\n clonedSvg.insert('defs', ':first-child').append('style').attr('type', 'text/css').node()!.appendChild(styleNode);\n\n clonedSvg.attr('width', w1).attr('height', h1).attr('viewBox', `0 0 ${w1} ${h1}`);\n\n return {\n node: clonedSvg.node()!,\n width: w1,\n height: h1,\n };\n}\n\nfunction cloneLegendsToSVG(chartContainer: HTMLElement, svgWidth: number, svgHeight: number, classNames: Set<string>) {\n const legendButtons = chartContainer.querySelectorAll<HTMLElement>(`\n button[class^=\"legend-\"],\n [class^=\"legendContainer-\"] div[class^=\"overflowIndicationTextStyle-\"],\n [class^=\"legendsContainer-\"] div[class^=\"overflowIndicationTextStyle-\"]\n `);\n if (legendButtons.length === 0) {\n return {\n node: null,\n width: 0,\n height: 0,\n };\n }\n\n const legendGroup = d3Create<SVGGElement>('svg:g');\n let legendX = 0;\n let legendY = 8;\n let legendLine: Selection<SVGGElement, unknown, null, undefined>[] = [];\n const legendLines: (typeof legendLine)[] = [];\n const legendLineWidths: number[] = [];\n\n for (let i = 0; i < legendButtons.length; i++) {\n const { width: legendWidth } = legendButtons[i].getBoundingClientRect();\n const legendItem = legendGroup.append('g');\n\n legendLine.push(legendItem);\n if (legendX + legendWidth > svgWidth && legendLine.length > 1) {\n legendLine.pop();\n legendLines.push(legendLine);\n legendLineWidths.push(legendX);\n\n legendLine = [legendItem];\n legendX = 0;\n legendY += 32;\n }\n\n let legendText: HTMLDivElement | null;\n let textOffset = 0;\n\n if (legendButtons[i].tagName.toLowerCase() === 'button') {\n const legendRect = legendButtons[i].querySelector<HTMLDivElement>('[class^=\"rect\"]');\n const { backgroundColor: legendColor, borderColor: legendBorderColor } = getComputedStyle(legendRect!);\n\n legendText = legendButtons[i].querySelector<HTMLDivElement>('[class^=\"text\"]');\n legendText!.classList.forEach(className => classNames.add(`.${className}`));\n legendItem\n .append('rect')\n .attr('x', legendX + 8)\n .attr('y', svgHeight + legendY + 8)\n .attr('width', 12)\n .attr('height', 12)\n .attr('fill', legendColor)\n .attr('stroke-width', 1)\n .attr('stroke', legendBorderColor);\n textOffset = 28;\n } else {\n legendText = legendButtons[i] as HTMLDivElement;\n legendText.classList.forEach(className => classNames.add(`.${className}`));\n textOffset = 8;\n }\n\n const { color: textColor } = getComputedStyle(legendText!);\n legendItem\n .append('text')\n .attr('x', legendX + textOffset)\n .attr('y', svgHeight + legendY + 8)\n .attr('dominant-baseline', 'hanging')\n .attr('class', legendText!.getAttribute('class'))\n .attr('fill', textColor)\n .text(legendText!.textContent);\n legendX += legendWidth;\n }\n\n legendLines.push(legendLine);\n legendLineWidths.push(legendX);\n legendY += 32;\n\n const centerLegends = true;\n if (centerLegends) {\n legendLines.forEach((ln, idx) => {\n const offsetX = Math.max((svgWidth - legendLineWidths[idx]) / 2, 0);\n ln.forEach(item => {\n item.attr('transform', `translate(${offsetX}, 0)`);\n });\n });\n }\n\n return {\n node: legendGroup.node(),\n width: Math.max(...legendLineWidths),\n height: legendY,\n };\n}\n\nconst cssVarRegExp = /var\\((--[a-zA-Z0-9\\-]+)\\)/g;\n\nfunction resolveCSSVariables(chartContainer: HTMLElement, styleRules: string) {\n const containerStyles = getComputedStyle(chartContainer);\n return styleRules.replace(cssVarRegExp, (match, group1) => {\n return containerStyles.getPropertyValue(group1);\n });\n}\n\nfunction svgToPng(svgDataUrl: string, opts: IImageExportOptions = {}): Promise<string> {\n return new Promise((resolve, reject) => {\n const scale = opts.scale || 1;\n const w0 = opts.width || 300;\n const h0 = opts.height || 150;\n const w1 = scale * w0;\n const h1 = scale * h0;\n\n const canvas = document.createElement('canvas');\n const img = new Image();\n\n canvas.width = w1;\n canvas.height = h1;\n\n img.onload = function () {\n const ctx = canvas.getContext('2d');\n if (!ctx) {\n return reject(new Error('Canvas context is null'));\n }\n\n ctx.clearRect(0, 0, w1, h1);\n ctx.drawImage(img, 0, 0, w1, h1);\n\n const imgData = canvas.toDataURL('image/png');\n resolve(imgData);\n };\n\n img.onerror = function (err) {\n reject(err);\n };\n\n img.src = svgDataUrl;\n });\n}\n\nconst hex2 = /^[\\da-f]{2}$/i;\nconst hex4 = /^[\\da-f]{4}$/i;\n\n/**\n * A ponyfill for the deprecated `unescape` method, taken from the `core-js` library.\n *\n * Source: {@link https://github.com/zloirock/core-js/blob/167136f479d3b8519953f2e4c534ecdd1031d3cf/packages/core-js/modules/es.unescape.js core-js/packages/core-js/modules/es.unescape.js}\n */\nfunction unescapePonyfill(str: string) {\n let result = '';\n const length = str.length;\n let index = 0;\n let chr;\n let part;\n while (index < length) {\n chr = str.charAt(index++);\n if (chr === '%') {\n if (str.charAt(index) === 'u') {\n part = str.slice(index + 1, index + 5);\n if (hex4.exec(part)) {\n result += String.fromCharCode(parseInt(part, 16));\n index += 5;\n continue;\n }\n } else {\n part = str.slice(index, index + 2);\n if (hex2.exec(part)) {\n result += String.fromCharCode(parseInt(part, 16));\n index += 2;\n continue;\n }\n }\n }\n result += chr;\n }\n return result;\n}\n"]}
@@ -63,7 +63,7 @@ exports.DeclarativeChart = React.forwardRef(function (props, forwardedRef) {
63
63
  };
64
64
  var exportAsImage = React.useCallback(function (opts) {
65
65
  var _a;
66
- return (0, imageExporter_1.toImage)((_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer, tslib_1.__assign({ background: theme.palette.white }, opts));
66
+ return (0, imageExporter_1.toImage)((_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer, tslib_1.__assign({ background: theme.semanticColors.bodyBackground }, opts));
67
67
  }, [theme]);
68
68
  React.useImperativeHandle(props.componentRef, function () { return ({
69
69
  exportAsImage: exportAsImage,
@@ -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 */\n/* eslint-disable @typescript-eslint/no-explicit-any */\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 {\n isArrayOrTypedArray,\n isDateArray,\n isNumberArray,\n isMonthArray,\n sanitizeJson,\n updateXValues,\n transformPlotlyJsonToDonutProps,\n transformPlotlyJsonToVSBCProps,\n transformPlotlyJsonToScatterChartProps,\n transformPlotlyJsonToHorizontalBarWithAxisProps,\n transformPlotlyJsonToHeatmapProps,\n transformPlotlyJsonToSankeyProps,\n transformPlotlyJsonToGaugeProps,\n transformPlotlyJsonToGVBCProps,\n transformPlotlyJsonToVBCProps,\n} from './PlotlySchemaAdapter';\nimport { LineChart } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart } 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 { IImageExportOptions, toImage } from './imageExporter';\nimport { IChart } from '../../types/index';\n\n/**\n * DeclarativeChart schema.\n * {@docCategory DeclarativeChart}\n */\nexport interface Schema {\n /**\n * Plotly schema represented as JSON object\n */\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/**\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 { data, layout } = plotlySchema;\n let { selectedLegends } = plotlySchema;\n const xValues = data[0].x;\n const isXDate = isDateArray(xValues);\n const isXNumber = isNumberArray(xValues);\n const isXMonth = isMonthArray(xValues);\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: { data, layout, 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 legendProps = {\n canSelectMultipleLegends: false,\n onChange: onActiveLegendsChange,\n selectedLegend: activeLegends.slice(0, 1)[0],\n };\n\n const exportAsImage = React.useCallback(\n (opts?: IImageExportOptions) => {\n return toImage(chartRef.current?.chartContainer, {\n background: theme.palette.white,\n ...opts,\n });\n },\n [theme],\n );\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n exportAsImage,\n }),\n [exportAsImage],\n );\n\n const multiSelectLegendProps = {\n ...legendProps,\n canSelectMultipleLegends: true,\n selectedLegends: activeLegends,\n };\n\n switch (data[0].type) {\n case 'pie':\n return (\n <DonutChart\n {...transformPlotlyJsonToDonutProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n // Bubble event to prevent right click to open menu on the callout\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n case 'bar':\n const orientation = data[0].orientation;\n if (orientation === 'h') {\n return (\n <HorizontalBarChartWithAxis\n {...transformPlotlyJsonToHorizontalBarWithAxisProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n } else {\n if (['group', 'overlay'].includes(plotlySchema?.layout?.barmode)) {\n return (\n <GroupedVerticalBarChart\n {...transformPlotlyJsonToGVBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n }\n return (\n <VerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n }\n case 'scatter':\n const isAreaChart = data.some((series: any) => series.fill === 'tonexty' || series.fill === 'tozeroy');\n const renderChart = (chartProps: any) => {\n if (isAreaChart) {\n return (\n <AreaChart\n {...chartProps}\n legendProps={{ ...legendProps, canSelectMultipleLegends: true, selectedLegends: activeLegends }}\n />\n );\n }\n return (\n <LineChart\n {...{\n ...chartProps,\n legendProps: {\n onChange: onActiveLegendsChange,\n canSelectMultipleLegends: true,\n selectedLegends: activeLegends,\n },\n }}\n />\n );\n };\n if (isXDate || isXNumber) {\n const chartProps = {\n ...transformPlotlyJsonToScatterChartProps({ data, layout }, isAreaChart, colorMap, isDarkTheme),\n legendProps,\n componentRef: chartRef,\n calloutProps: { layerProps: { eventBubblingEnabled: true } },\n };\n return renderChart(chartProps);\n } else if (isXMonth) {\n const updatedData = data.map((dataPoint: any) => ({\n ...dataPoint,\n x: updateXValues(dataPoint.x),\n }));\n const chartProps = {\n ...transformPlotlyJsonToScatterChartProps({ data: updatedData, layout }, isAreaChart, colorMap, isDarkTheme),\n legendProps,\n componentRef: chartRef,\n calloutProps: { layerProps: { eventBubblingEnabled: true } },\n };\n return renderChart(chartProps);\n }\n return (\n <VerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n case 'heatmap':\n return (\n <HeatMapChart\n {...transformPlotlyJsonToHeatmapProps(plotlySchema)}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n case 'sankey':\n return (\n <SankeyChart\n {...transformPlotlyJsonToSankeyProps(plotlySchema, colorMap, isDarkTheme)}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n case 'indicator':\n if (data?.[0]?.mode?.includes('gauge')) {\n return (\n <GaugeChart\n {...transformPlotlyJsonToGaugeProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n }\n return <div>Unsupported Schema</div>;\n case 'histogram':\n return (\n <VerticalBarChart\n {...transformPlotlyJsonToVBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n default:\n throw new Error('Unsupported chart schema');\n }\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\n"]}
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 */\n/* eslint-disable @typescript-eslint/no-explicit-any */\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 {\n isArrayOrTypedArray,\n isDateArray,\n isNumberArray,\n isMonthArray,\n sanitizeJson,\n updateXValues,\n transformPlotlyJsonToDonutProps,\n transformPlotlyJsonToVSBCProps,\n transformPlotlyJsonToScatterChartProps,\n transformPlotlyJsonToHorizontalBarWithAxisProps,\n transformPlotlyJsonToHeatmapProps,\n transformPlotlyJsonToSankeyProps,\n transformPlotlyJsonToGaugeProps,\n transformPlotlyJsonToGVBCProps,\n transformPlotlyJsonToVBCProps,\n} from './PlotlySchemaAdapter';\nimport { LineChart } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart } 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 { IImageExportOptions, toImage } from './imageExporter';\nimport { IChart } from '../../types/index';\n\n/**\n * DeclarativeChart schema.\n * {@docCategory DeclarativeChart}\n */\nexport interface Schema {\n /**\n * Plotly schema represented as JSON object\n */\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/**\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 { data, layout } = plotlySchema;\n let { selectedLegends } = plotlySchema;\n const xValues = data[0].x;\n const isXDate = isDateArray(xValues);\n const isXNumber = isNumberArray(xValues);\n const isXMonth = isMonthArray(xValues);\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: { data, layout, 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 legendProps = {\n canSelectMultipleLegends: false,\n onChange: onActiveLegendsChange,\n selectedLegend: activeLegends.slice(0, 1)[0],\n };\n\n const exportAsImage = React.useCallback(\n (opts?: IImageExportOptions) => {\n return toImage(chartRef.current?.chartContainer, {\n background: theme.semanticColors.bodyBackground,\n ...opts,\n });\n },\n [theme],\n );\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n exportAsImage,\n }),\n [exportAsImage],\n );\n\n const multiSelectLegendProps = {\n ...legendProps,\n canSelectMultipleLegends: true,\n selectedLegends: activeLegends,\n };\n\n switch (data[0].type) {\n case 'pie':\n return (\n <DonutChart\n {...transformPlotlyJsonToDonutProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n // Bubble event to prevent right click to open menu on the callout\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n case 'bar':\n const orientation = data[0].orientation;\n if (orientation === 'h') {\n return (\n <HorizontalBarChartWithAxis\n {...transformPlotlyJsonToHorizontalBarWithAxisProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n } else {\n if (['group', 'overlay'].includes(plotlySchema?.layout?.barmode)) {\n return (\n <GroupedVerticalBarChart\n {...transformPlotlyJsonToGVBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n }\n return (\n <VerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n }\n case 'scatter':\n const isAreaChart = data.some((series: any) => series.fill === 'tonexty' || series.fill === 'tozeroy');\n const renderChart = (chartProps: any) => {\n if (isAreaChart) {\n return (\n <AreaChart\n {...chartProps}\n legendProps={{ ...legendProps, canSelectMultipleLegends: true, selectedLegends: activeLegends }}\n />\n );\n }\n return (\n <LineChart\n {...{\n ...chartProps,\n legendProps: {\n onChange: onActiveLegendsChange,\n canSelectMultipleLegends: true,\n selectedLegends: activeLegends,\n },\n }}\n />\n );\n };\n if (isXDate || isXNumber) {\n const chartProps = {\n ...transformPlotlyJsonToScatterChartProps({ data, layout }, isAreaChart, colorMap, isDarkTheme),\n legendProps,\n componentRef: chartRef,\n calloutProps: { layerProps: { eventBubblingEnabled: true } },\n };\n return renderChart(chartProps);\n } else if (isXMonth) {\n const updatedData = data.map((dataPoint: any) => ({\n ...dataPoint,\n x: updateXValues(dataPoint.x),\n }));\n const chartProps = {\n ...transformPlotlyJsonToScatterChartProps({ data: updatedData, layout }, isAreaChart, colorMap, isDarkTheme),\n legendProps,\n componentRef: chartRef,\n calloutProps: { layerProps: { eventBubblingEnabled: true } },\n };\n return renderChart(chartProps);\n }\n return (\n <VerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n case 'heatmap':\n return (\n <HeatMapChart\n {...transformPlotlyJsonToHeatmapProps(plotlySchema)}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n case 'sankey':\n return (\n <SankeyChart\n {...transformPlotlyJsonToSankeyProps(plotlySchema, colorMap, isDarkTheme)}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n case 'indicator':\n if (data?.[0]?.mode?.includes('gauge')) {\n return (\n <GaugeChart\n {...transformPlotlyJsonToGaugeProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n }\n return <div>Unsupported Schema</div>;\n case 'histogram':\n return (\n <VerticalBarChart\n {...transformPlotlyJsonToVBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n default:\n throw new Error('Unsupported chart schema');\n }\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\n"]}