npm - @fluentui/react-charting - Versions diffs - 5.23.28 → 5.23.30 - Mend

@fluentui/react-charting 5.23.28 → 5.23.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (202) hide show

package/lib/components/DeclarativeChart/DeclarativeChart.js.map CHANGED Viewed

	@@ -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 { DonutChart } from '../DonutChart/index';\nimport { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';\nimport {\n transformPlotlyJsonToDonutProps,\n transformPlotlyJsonToVSBCProps,\n transformPlotlyJsonToScatterChartProps,\n transformPlotlyJsonToHorizontalBarWithAxisProps,\n isDateArray,\n isNumberArray,\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 { useTheme } from '@fluentui/react/lib/Theme';\n\nexport const UseIsDarkTheme = (): boolean => {\n const theme = useTheme();\n return theme?.isInverted ?? false;\n};\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\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 } = props.chartSchema;\n const { data, layout, selectedLegends } = plotlySchema;\n const xValues = data[0].x;\n const isXDate = isDateArray(xValues);\n const isXNumber = isNumberArray(xValues);\n const colorMap = useColorMapping();\n const isDarkTheme = UseIsDarkTheme();\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 const legendProps = {\n canSelectMultipleLegends: false,\n onChange: onActiveLegendsChange,\n ...(activeLegends.length > 0 && { selectedLegend: activeLegends[0] }),\n };\n\n switch (data[0].type) {\n case 'pie':\n return (\n <DonutChart\n {...transformPlotlyJsonToDonutProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={legendProps}\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={legendProps}\n />\n );\n } else {\n if (['group', 'overlay'].includes(plotlySchema?.layout?.barmode)) {\n return (\n <GroupedVerticalBarChart\n {...transformPlotlyJsonToGVBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={legendProps}\n />\n );\n }\n return (\n <VerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={legendProps}\n />\n );\n }\n case 'scatter':\n const isAreaChart = data.some((series: any) => series.fill === 'tonexty' \|\| series.fill === 'tozeroy');\n if (isXDate \|\| isXNumber) {\n if (isAreaChart) {\n return (\n <AreaChart\n {...transformPlotlyJsonToScatterChartProps({ data, layout }, true, colorMap, isDarkTheme)}\n legendProps={legendProps}\n />\n );\n }\n return (\n <LineChart\n {...transformPlotlyJsonToScatterChartProps({ data, layout }, false, colorMap, isDarkTheme)}\n legendProps={{\n onChange: onActiveLegendsChange,\n canSelectMultipleLegends: true,\n selectedLegends: activeLegends,\n }}\n />\n );\n }\n return (\n <VerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={legendProps}\n />\n );\n case 'heatmap':\n return <HeatMapChart {...transformPlotlyJsonToHeatmapProps(plotlySchema)} legendProps={legendProps} />;\n case 'sankey':\n return <SankeyChart {...transformPlotlyJsonToSankeyProps(plotlySchema, colorMap, isDarkTheme)} />;\n case 'indicator':\n if (data?.[0]?.mode?.includes('gauge')) {\n return (\n <GaugeChart\n {...transformPlotlyJsonToGaugeProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={legendProps}\n />\n );\n }\n return <div>Unsupported Schema</div>;\n case 'histogram':\n return (\n <VerticalBarChart\n {...transformPlotlyJsonToVBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={legendProps}\n />\n );\n default:\n return <div>Unsupported Schema</div>;\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 transformPlotlyJsonToDonutProps,\n transformPlotlyJsonToVSBCProps,\n transformPlotlyJsonToScatterChartProps,\n transformPlotlyJsonToHorizontalBarWithAxisProps,\n isDateArray,\n isNumberArray,\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 } = props.chartSchema;\n const { data, layout, selectedLegends } = plotlySchema;\n const xValues = data[0].x;\n const isXDate = isDateArray(xValues);\n const isXNumber = isNumberArray(xValues);\n const colorMap = useColorMapping();\n const theme = useTheme();\n const isDarkTheme = theme?.isInverted ?? false;\n const chartRef = React.useRef<IChart>(null);\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 const legendProps = {\n canSelectMultipleLegends: false,\n onChange: onActiveLegendsChange,\n ...(activeLegends.length > 0 && { selectedLegend: activeLegends[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 switch (data[0].type) {\n case 'pie':\n return (\n <DonutChart\n {...transformPlotlyJsonToDonutProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={{ ...legendProps, canSelectMultipleLegends: true }}\n componentRef={chartRef}\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={legendProps}\n componentRef={chartRef}\n />\n );\n } else {\n if (['group', 'overlay'].includes(plotlySchema?.layout?.barmode)) {\n return (\n <GroupedVerticalBarChart\n {...transformPlotlyJsonToGVBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={legendProps}\n componentRef={chartRef}\n />\n );\n }\n return (\n <VerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={legendProps}\n componentRef={chartRef}\n />\n );\n }\n case 'scatter':\n const isAreaChart = data.some((series: any) => series.fill === 'tonexty' \|\| series.fill === 'tozeroy');\n if (isXDate \|\| isXNumber) {\n if (isAreaChart) {\n return (\n <AreaChart\n {...transformPlotlyJsonToScatterChartProps({ data, layout }, true, colorMap, isDarkTheme)}\n legendProps={legendProps}\n componentRef={chartRef}\n />\n );\n }\n return (\n <LineChart\n {...transformPlotlyJsonToScatterChartProps({ data, layout }, false, colorMap, isDarkTheme)}\n legendProps={{\n onChange: onActiveLegendsChange,\n canSelectMultipleLegends: true,\n selectedLegends: activeLegends,\n }}\n componentRef={chartRef}\n />\n );\n }\n return (\n <VerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={legendProps}\n componentRef={chartRef}\n />\n );\n case 'heatmap':\n return (\n <HeatMapChart\n {...transformPlotlyJsonToHeatmapProps(plotlySchema)}\n legendProps={legendProps}\n componentRef={chartRef}\n />\n );\n case 'sankey':\n return (\n <SankeyChart\n {...transformPlotlyJsonToSankeyProps(plotlySchema, colorMap, isDarkTheme)}\n componentRef={chartRef}\n />\n );\n case 'indicator':\n if (data?.[0]?.mode?.includes('gauge')) {\n return (\n <GaugeChart\n {...transformPlotlyJsonToGaugeProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={legendProps}\n componentRef={chartRef}\n />\n );\n }\n return <div>Unsupported Schema</div>;\n case 'histogram':\n return (\n <VerticalBarChart\n {...transformPlotlyJsonToVBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={legendProps}\n componentRef={chartRef}\n />\n );\n default:\n return <div>Unsupported Schema</div>;\n }\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\n"]}

package/lib/components/DeclarativeChart/imageExporter.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+/**
+ * {@docCategory DeclarativeChart}
+ */
+export interface IImageExportOptions {
+    width?: number;
+    height?: number;
+    scale?: number;
+    background?: string;
+}
+export declare function toImage(chartContainer?: HTMLElement | null, opts?: IImageExportOptions): Promise<string>;

package/lib/components/DeclarativeChart/imageExporter.js ADDED Viewed

@@ -0,0 +1,222 @@
+import { create as d3Create, select as d3Select } from 'd3-selection';
+export function toImage(chartContainer, opts) {
+    if (opts === void 0) { opts = {}; }
+    return new Promise(function (resolve, reject) {
+        if (!chartContainer) {
+            return reject(new Error('Chart container is not defined'));
+        }
+        try {
+            var background = opts.background || 'white';
+            var svg = toSVG(chartContainer, background);
+            var svgData = new XMLSerializer().serializeToString(svg.node);
+            var svgDataUrl = 'data:image/svg+xml;base64,' + btoa(unescapePonyfill(encodeURIComponent(svgData)));
+            svgToPng(svgDataUrl, {
+                width: opts.width || svg.width,
+                height: opts.height || svg.height,
+                scale: opts.scale,
+            })
+                .then(resolve)
+                .catch(reject);
+        }
+        catch (err) {
+            return reject(err);
+        }
+    });
+}
+function toSVG(chartContainer, background) {
+    var svg = chartContainer.querySelector('svg');
+    if (!svg) {
+        throw new Error('SVG not found');
+    }
+    var _a = svg.getBoundingClientRect(), svgWidth = _a.width, svgHeight = _a.height;
+    var classNames = new Set();
+    var legendGroup = cloneLegendsToSVG(chartContainer, svgWidth, svgHeight, classNames);
+    var w1 = Math.max(svgWidth, legendGroup.width);
+    var h1 = svgHeight + legendGroup.height;
+    var clonedSvg = d3Select(svg.cloneNode(true))
+        .attr('width', null)
+        .attr('height', null)
+        .attr('viewBox', null);
+    if (legendGroup.node) {
+        clonedSvg.append(function () { return legendGroup.node; });
+    }
+    clonedSvg
+        .insert('rect', ':first-child')
+        .attr('x', 0)
+        .attr('y', 0)
+        .attr('width', w1)
+        .attr('height', h1)
+        .attr('fill', background);
+    var svgElements = svg.getElementsByTagName('*');
+    var styleSheets = document.styleSheets;
+    var styleRules = [];
+    for (var i = svgElements.length - 1; i--;) {
+        svgElements[i].classList.forEach(function (className) {
+            classNames.add(".".concat(className));
+        });
+    }
+    for (var i = 0; i < styleSheets.length; i++) {
+        var rules = styleSheets[i].cssRules;
+        for (var j = 0; j < rules.length; j++) {
+            if (rules[j].constructor.name === 'CSSStyleRule') {
+                var selectorText = rules[j].selectorText;
+                var hasClassName = selectorText.split(' ').some(function (word) { return classNames.has(word); });
+                if (hasClassName) {
+                    styleRules.push(rules[j].cssText);
+                }
+            }
+        }
+    }
+    var xmlDocument = new DOMParser().parseFromString('<svg></svg>', 'image/svg+xml');
+    var styleNode = xmlDocument.createCDATASection(styleRules.join(' '));
+    clonedSvg.insert('defs', ':first-child').append('style').attr('type', 'text/css').node().appendChild(styleNode);
+    clonedSvg.attr('width', w1).attr('height', h1).attr('viewBox', "0 0 ".concat(w1, " ").concat(h1));
+    return {
+        node: clonedSvg.node(),
+        width: w1,
+        height: h1,
+    };
+}
+function cloneLegendsToSVG(chartContainer, svgWidth, svgHeight, classNames) {
+    var legendButtons = chartContainer.querySelectorAll("\n    button[class^=\"legend-\"],\n    [class^=\"legendContainer-\"] div[class^=\"overflowIndicationTextStyle-\"],\n    [class^=\"legendsContainer-\"] div[class^=\"overflowIndicationTextStyle-\"]\n  ");
+    if (legendButtons.length === 0) {
+        return {
+            node: null,
+            width: 0,
+            height: 0,
+        };
+    }
+    var legendGroup = d3Create('svg:g');
+    var legendX = 0;
+    var legendY = 8;
+    var legendLine = [];
+    var legendLines = [];
+    var legendLineWidths = [];
+    for (var i = 0; i < legendButtons.length; i++) {
+        var legendWidth = legendButtons[i].getBoundingClientRect().width;
+        var legendItem = legendGroup.append('g');
+        legendLine.push(legendItem);
+        if (legendX + legendWidth > svgWidth && legendLine.length > 1) {
+            legendLine.pop();
+            legendLines.push(legendLine);
+            legendLineWidths.push(legendX);
+            legendLine = [legendItem];
+            legendX = 0;
+            legendY += 32;
+        }
+        var legendText = void 0;
+        var textOffset = 0;
+        if (legendButtons[i].tagName.toLowerCase() === 'button') {
+            var legendRect = legendButtons[i].querySelector('[class^="rect"]');
+            var _a = getComputedStyle(legendRect), legendColor = _a.backgroundColor, legendBorderColor = _a.borderColor;
+            legendText = legendButtons[i].querySelector('[class^="text"]');
+            legendText.classList.forEach(function (className) { return classNames.add(".".concat(className)); });
+            legendItem
+                .append('rect')
+                .attr('x', legendX + 8)
+                .attr('y', svgHeight + legendY + 8)
+                .attr('width', 12)
+                .attr('height', 12)
+                .attr('fill', legendColor)
+                .attr('stroke-width', 1)
+                .attr('stroke', legendBorderColor);
+            textOffset = 28;
+        }
+        else {
+            legendText = legendButtons[i];
+            legendText.classList.forEach(function (className) { return classNames.add(".".concat(className)); });
+            textOffset = 8;
+        }
+        legendItem
+            .append('text')
+            .attr('x', legendX + textOffset)
+            .attr('y', svgHeight + legendY + 8)
+            .attr('dominant-baseline', 'hanging')
+            .attr('class', legendText.getAttribute('class'))
+            .text(legendText.textContent);
+        legendX += legendWidth;
+    }
+    legendLines.push(legendLine);
+    legendLineWidths.push(legendX);
+    legendY += 32;
+    var centerLegends = true;
+    if (centerLegends) {
+        legendLines.forEach(function (ln, idx) {
+            var offsetX = Math.max((svgWidth - legendLineWidths[idx]) / 2, 0);
+            ln.forEach(function (item) {
+                item.attr('transform', "translate(".concat(offsetX, ", 0)"));
+            });
+        });
+    }
+    return {
+        node: legendGroup.node(),
+        width: Math.max.apply(Math, legendLineWidths),
+        height: legendY,
+    };
+}
+function svgToPng(svgDataUrl, opts) {
+    if (opts === void 0) { opts = {}; }
+    return new Promise(function (resolve, reject) {
+        var scale = opts.scale || 1;
+        var w0 = opts.width || 300;
+        var h0 = opts.height || 150;
+        var w1 = scale * w0;
+        var h1 = scale * h0;
+        var canvas = document.createElement('canvas');
+        var img = new Image();
+        canvas.width = w1;
+        canvas.height = h1;
+        img.onload = function () {
+            var ctx = canvas.getContext('2d');
+            if (!ctx) {
+                return reject(new Error('Canvas context is null'));
+            }
+            ctx.clearRect(0, 0, w1, h1);
+            ctx.drawImage(img, 0, 0, w1, h1);
+            var imgData = canvas.toDataURL('image/png');
+            resolve(imgData);
+        };
+        img.onerror = function (err) {
+            reject(err);
+        };
+        img.src = svgDataUrl;
+    });
+}
+var hex2 = /^[\da-f]{2}$/i;
+var hex4 = /^[\da-f]{4}$/i;
+/**
+ * A ponyfill for the deprecated `unescape` method, taken from the `core-js` library.
+ *
+ * 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}
+ */
+function unescapePonyfill(str) {
+    var result = '';
+    var length = str.length;
+    var index = 0;
+    var chr;
+    var part;
+    while (index < length) {
+        chr = str.charAt(index++);
+        if (chr === '%') {
+            if (str.charAt(index) === 'u') {
+                part = str.slice(index + 1, index + 5);
+                if (hex4.exec(part)) {
+                    result += String.fromCharCode(parseInt(part, 16));
+                    index += 5;
+                    continue;
+                }
+            }
+            else {
+                part = str.slice(index, index + 2);
+                if (hex2.exec(part)) {
+                    result += String.fromCharCode(parseInt(part, 16));
+                    index += 2;
+                    continue;
+                }
+            }
+        }
+        result += chr;
+    }
+    return result;
+}
+//# sourceMappingURL=imageExporter.js.map

package/lib/components/DeclarativeChart/imageExporter.js.map ADDED Viewed

@@ -0,0 +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 = opts.background || 'white';\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"]}

package/lib/components/DeclarativeChart/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './DeclarativeChart';
2	+ export type { IImageExportOptions } from './imageExporter';

package/lib/components/DeclarativeChart/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './DeclarativeChart';
2	+ //# sourceMappingURL=index.js.map

package/lib/components/DeclarativeChart/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/DeclarativeChart/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC","sourcesContent":["export * from './DeclarativeChart';\nexport type { IImageExportOptions } from './imageExporter';\n"]}

package/lib/components/DonutChart/Arc/Arc.d.ts CHANGED Viewed

@@ -17,5 +17,6 @@ export declare class Arc extends React.Component<IArcProps, IArcState> {
     private _onBlur;
     private _redirectToUrl;
     private _getAriaLabel;
+    private _shouldHighlightArc;
     private _renderArcLabel;
 }

package/lib/components/DonutChart/Arc/Arc.js CHANGED Viewed

@@ -25,11 +25,16 @@ var Arc = /** @class */ (function (_super) {
             var yValue = point.yAxisCalloutData || point.data || 0;
             return ((_a = point.callOutAccessibilityData) === null || _a === void 0 ? void 0 : _a.ariaLabel) || (legend ? "".concat(legend, ", ") : '') + "".concat(yValue, ".");
         };
+        _this._shouldHighlightArc = function (legend) {
+            var activeArc = _this.props.activeArc;
+            // If no activeArc is provided, highlight all arcs. Otherwise, only highlight the arcs that are active.
+            return !activeArc || activeArc.length === 0 || legend === undefined || activeArc.includes(legend);
+        };
         _this._renderArcLabel = function (className) {
-            var _a = _this.props, arc = _a.arc, data = _a.data, innerRadius = _a.innerRadius, outerRadius = _a.outerRadius, showLabelsInPercent = _a.showLabelsInPercent, totalValue = _a.totalValue, hideLabels = _a.hideLabels, activeArc = _a.activeArc;
+            var _a = _this.props, arc = _a.arc, data = _a.data, innerRadius = _a.innerRadius, outerRadius = _a.outerRadius, showLabelsInPercent = _a.showLabelsInPercent, totalValue = _a.totalValue, hideLabels = _a.hideLabels;
             if (hideLabels ||
                 Math.abs(data.endAngle - data.startAngle) < Math.PI / 12 ||
-                (activeArc !== data.data.legend && activeArc !== '')) {
+                !_this._shouldHighlightArc(data.data.legend)) {
                 return null;
             }
             var _b = arc.centroid(data), base = _b[0], perp = _b[1];
@@ -51,13 +56,13 @@ var Arc = /** @class */ (function (_super) {
         _updateChart(newProps);
     };
     Arc.prototype.render = function () {
-        var _a, _b, _c, _d, _e;
-        var _f = this.props, arc = _f.arc, href = _f.href, focusedArcId = _f.focusedArcId;
+        var _a, _b, _c, _d, _e, _f, _g;
+        var _h = this.props, arc = _h.arc, href = _h.href, focusedArcId = _h.focusedArcId, activeArc = _h.activeArc;
         var getClassNames = classNamesFunction();
         var id = this.props.uniqText + this.props.data.data.legend.replace(/\s+/, '') + this.props.data.data.data;
-        var opacity = this.props.activeArc === this.props.data.data.legend || this.props.activeArc === '' ? 1 : 0.1;
-        var startAngle = (_b = (_a = this.props.data) === null || _a === void 0 ? void 0 : _a.startAngle) !== null && _b !== void 0 ? _b : 0;
-        var endAngle = ((_d = (_c = this.props.data) === null || _c === void 0 ? void 0 : _c.endAngle) !== null && _d !== void 0 ? _d : 0) - startAngle;
+        var opacity = activeArc && activeArc.length > 0 ? (activeArc.includes((_a = this.props.data) === null || _a === void 0 ? void 0 : _a.data.legend) ? 1 : 0.1) : 1;
+        var startAngle = (_c = (_b = this.props.data) === null || _b === void 0 ? void 0 : _b.startAngle) !== null && _c !== void 0 ? _c : 0;
+        var endAngle = ((_e = (_d = this.props.data) === null || _d === void 0 ? void 0 : _d.endAngle) !== null && _e !== void 0 ? _e : 0) - startAngle;
         var cornerRadius = this.props.roundCorners ? 3 : 0;
         var classNames = getClassNames(getStyles, {
             solidFill: this.props.enableGradient ? 'transparent' : this.props.color,
@@ -69,7 +74,7 @@ var Arc = /** @class */ (function (_super) {
         var clipId = getId('Arc_clip') + "".concat(this.props.color, "_").concat(this.props.nextColor);
         return (React.createElement("g", { ref: this.currentRef },
             !!focusedArcId && focusedArcId === id && (React.createElement("path", { id: id + 'focusRing', d: arc.cornerRadius(cornerRadius)(this.props.focusData), className: classNames.focusRing })),
-            React.createElement("path", { id: id, d: arc.cornerRadius(cornerRadius)(this.props.data), onFocus: this._onFocus.bind(this, this.props.data.data, id), className: classNames.root, "data-is-focusable": this.props.activeArc === this.props.data.data.legend || this.props.activeArc === '', onMouseOver: this._hoverOn.bind(this, this.props.data.data), onMouseMove: this._hoverOn.bind(this, this.props.data.data), onMouseLeave: this._hoverOff, onBlur: this._onBlur, onClick: href ? this._redirectToUrl.bind(this, href) : (_e = this.props.data) === null || _e === void 0 ? void 0 : _e.data.onClick, "aria-label": this._getAriaLabel(), role: "img" }),
+            React.createElement("path", { id: id, d: arc.cornerRadius(cornerRadius)(this.props.data), onFocus: this._onFocus.bind(this, this.props.data.data, id), className: classNames.root, "data-is-focusable": this._shouldHighlightArc(this.props.data.data.legend) || ((_f = this.props.activeArc) === null || _f === void 0 ? void 0 : _f.length) === 0, onMouseOver: this._hoverOn.bind(this, this.props.data.data), onMouseMove: this._hoverOn.bind(this, this.props.data.data), onMouseLeave: this._hoverOff, onBlur: this._onBlur, onClick: href ? this._redirectToUrl.bind(this, href) : (_g = this.props.data) === null || _g === void 0 ? void 0 : _g.data.onClick, "aria-label": this._getAriaLabel(), role: "img" }),
             this._renderArcLabel(classNames.arcLabel),
             this.props.enableGradient && (React.createElement(React.Fragment, null,
                 React.createElement("clipPath", { id: clipId },

package/lib/components/DonutChart/Arc/Arc.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Arc.js","sourceRoot":"../src/","sources":["components/DonutChart/Arc/Arc.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,GAAG,IAAI,KAAK,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAClF,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzC,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AAMnE;IAAyB,uBAAqC;IAA9D;;QAKS,WAAK,GAAO,EAAE,CAAC;QAEd,gBAAU,GAAG,KAAK,CAAC,SAAS,EAAkB,CAAC;QAC/C,YAAM,GAAY,MAAM,EAAE,CAAC;QAqF3B,eAAS,GAAG;YAClB,KAAI,CAAC,KAAK,CAAC,kBAAmB,EAAE,CAAC;QACnC,CAAC,CAAC;QAEM,aAAO,GAAG;YAChB,KAAI,CAAC,KAAK,CAAC,cAAe,EAAE,CAAC;QAC/B,CAAC,CAAC;QAMM,mBAAa,GAAG;;YACtB,IAAM,KAAK,GAAG,KAAI,CAAC,KAAK,CAAC,IAAK,CAAC,IAAI,CAAC;YACpC,IAAM,MAAM,GAAG,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,MAAM,CAAC;YACtD,IAAM,MAAM,GAAG,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;YACzD,OAAO,CAAA,MAAA,KAAK,CAAC,wBAAwB,0CAAE,SAAS,KAAI,CAAC,MAAM,CAAC,CAAC,CAAC,UAAG,MAAM,OAAI,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,UAAG,MAAM,MAAG,CAAC;QACnG,CAAC,CAAC;QAEM,qBAAe,GAAG,UAAC,SAAiB;YACpC,IAAA,KAAkG,KAAI,CAAC,KAAK,EAA1G,GAAG,SAAA,EAAE,IAAI,UAAA,EAAE,WAAW,iBAAA,EAAE,WAAW,iBAAA,EAAE,mBAAmB,yBAAA,EAAE,UAAU,gBAAA,EAAE,UAAU,gBAAA,EAAE,SAAS,eAAe,CAAC;YAEnH,IACE,UAAU;gBACV,IAAI,CAAC,GAAG,CAAC,IAAK,CAAC,QAAQ,GAAG,IAAK,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,EAAE;gBAC1D,CAAC,SAAS,KAAK,IAAK,CAAC,IAAI,CAAC,MAAM,IAAI,SAAS,KAAK,EAAE,CAAC,EACrD,CAAC;gBACD,OAAO,IAAI,CAAC;YACd,CAAC;YAEK,IAAA,KAAe,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAhC,IAAI,QAAA,EAAE,IAAI,QAAsB,CAAC;YACxC,IAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;YACjD,IAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,WAAY,EAAE,WAAY,CAAC,GAAG,CAAC,CAAC;YAC7D,IAAM,KAAK,GAAG,CAAC,IAAK,CAAC,UAAU,GAAG,IAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;YACtD,IAAM,QAAQ,GAAG,IAAK,CAAC,KAAK,CAAC;YAE7B,OAAO,CACL,8BACE,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,GAAG,CAAC,GAAG,WAAW,EAC7C,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,GAAG,CAAC,GAAG,WAAW,EAC7C,UAAU,EAAE,KAAK,GAAG,IAAI,CAAC,EAAE,KAAK,KAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,EAC7D,gBAAgB,EAAE,KAAK,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,EACvF,SAAS,EAAE,SAAS,iBACP,IAAI,IAEhB,mBAAmB;gBAClB,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,UAAW,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAG,UAAW,CAAC;gBACjE,CAAC,CAAC,uBAAuB,CAAC,QAAQ,CAAC,CAChC,CACR,CAAC;QACJ,CAAC,CAAC;;IACJ,CAAC;IAtIe,4BAAwB,GAAtC,UAAuC,SAA8B;QACnE,YAAY,CAAC,SAAS,CAAC,CAAC;QACxB,OAAO,IAAI,CAAC;IACd,CAAC;IAEM,yBAAW,GAAlB,UAAmB,QAAmB;QACpC,YAAY,CAAC,QAAQ,CAAC,CAAC;IACzB,CAAC;IAEM,oBAAM,GAAb;;QACQ,IAAA,KAA8B,IAAI,CAAC,KAAK,EAAtC,GAAG,SAAA,EAAE,IAAI,UAAA,EAAE,YAAY,kBAAe,CAAC;QAC/C,IAAM,aAAa,GAAG,kBAAkB,EAA8B,CAAC;QACvE,IAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAS,GAAG,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,IAAI,CAAC,MAAO,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,IAAI,CAAC,IAAI,CAAC;QAChH,IAAM,OAAO,GACX,IAAI,CAAC,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;QAEjG,IAAM,UAAU,GAAG,MAAA,MAAA,IAAI,CAAC,KAAK,CAAC,IAAI,0CAAE,UAAU,mCAAI,CAAC,CAAC;QACpD,IAAM,QAAQ,GAAG,CAAC,MAAA,MAAA,IAAI,CAAC,KAAK,CAAC,IAAI,0CAAE,QAAQ,mCAAI,CAAC,CAAC,GAAG,UAAU,CAAC;QAC/D,IAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAErD,IAAM,UAAU,GAAG,aAAa,CAAC,SAAS,EAAE;YAC1C,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK;YACvE,YAAY,EAAE,0CACH,UAAU,6BACf,IAAI,CAAC,KAAK,CAAC,KAAK,0BAChB,IAAI,CAAC,KAAK,CAAC,SAAS,cAAI,QAAQ,mBAClC;YACJ,IAAI,EAAE,IAAK;YACX,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAM;YACxB,OAAO,SAAA;SACR,CAAC,CAAC;QAEH,IAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC,GAAG,UAAG,IAAI,CAAC,KAAK,CAAC,KAAK,cAAI,IAAI,CAAC,KAAK,CAAC,SAAS,CAAE,CAAC;QAEjF,OAAO,CACL,2BAAG,GAAG,EAAE,IAAI,CAAC,UAAU;YACpB,CAAC,CAAC,YAAY,IAAI,YAAY,KAAK,EAAE,IAAI,CACxC,8BACE,EAAE,EAAE,EAAE,GAAG,WAAW,EACpB,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EACvD,SAAS,EAAE,UAAU,CAAC,SAAS,GAC/B,CACH;YAED,8BACE,EAAE,EAAE,EAAE,EACN,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAClD,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,IAAI,EAAE,EAAE,CAAC,EAC5D,SAAS,EAAE,UAAU,CAAC,IAAI,uBACP,IAAI,CAAC,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,KAAK,EAAE,EACvG,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,IAAI,CAAC,EAC5D,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,IAAI,CAAC,EAC5D,YAAY,EAAE,IAAI,CAAC,SAAS,EAC5B,MAAM,EAAE,IAAI,CAAC,OAAO,EACpB,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,MAAA,IAAI,CAAC,KAAK,CAAC,IAAI,0CAAE,IAAI,CAAC,OAAO,gBACxE,IAAI,CAAC,aAAa,EAAE,EAChC,IAAI,EAAC,KAAK,GACV;YACD,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,QAAQ,CAAC;YAEzC,IAAI,CAAC,KAAK,CAAC,cAAc,IAAI,CAC5B;gBACE,kCAAU,EAAE,EAAE,MAAM;oBAClB,8BAAM,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAI,CACnD;gBACX,uCAAe,CAAC,EAAC,MAAM,EAAC,CAAC,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,QAAQ,EAAE,eAAQ,MAAM,MAAG;oBACrF,6BAAK,SAAS,EAAE,UAAU,CAAC,WAAW,GAAI,CAC5B,CACf,CACJ,CACC,CACL,CAAC;IACJ,CAAC;IAEO,sBAAQ,GAAhB,UAAiB,IAAqB,EAAE,EAAU;QAChD,IAAI,CAAC,KAAK,CAAC,eAAgB,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IACjE,CAAC;IAEO,sBAAQ,GAAhB,UAAiB,IAAqB,EAAE,UAA4C;QAClF,UAAU,CAAC,OAAO,EAAE,CAAC;QACrB,IAAI,CAAC,KAAK,CAAC,eAAgB,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;IAChD,CAAC;IAUO,4BAAc,GAAtB,UAAuB,IAAwB;QAC7C,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5C,CAAC;IAtGa,gBAAY,GAAuB;QAC/C,GAAG,EAAE,KAAK,EAAE;KACb,AAFyB,CAExB;IA6IJ,UAAC;CAAA,AAhJD,CAAyB,KAAK,CAAC,SAAS,GAgJvC;SAhJY,GAAG;AAkJhB,SAAS,YAAY,CAAC,QAAmB;IACvC,QAAQ,CAAC,GAAG,CAAC,WAAW,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;IAC/C,QAAQ,CAAC,GAAG,CAAC,WAAW,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;AACjD,CAAC","sourcesContent":["import * as React from 'react';\nimport { arc as d3Arc } from 'd3-shape';\nimport { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities';\nimport { getStyles } from './Arc.styles';\nimport { IChartDataPoint } from '../index';\nimport { IArcProps, IArcStyleProps, IArcStyles } from './index';\nimport { format as d3Format } from 'd3-format';\nimport { formatValueWithSIPrefix } from '../../../utilities/index';\n\nexport interface IArcState {\n isCalloutVisible?: boolean;\n}\n\nexport class Arc extends React.Component<IArcProps, IArcState> {\n public static defaultProps: Partial<IArcProps> = {\n arc: d3Arc(),\n };\n\n public state: {} = {};\n\n private currentRef = React.createRef<SVGPathElement>();\n private _isRTL: boolean = getRTL();\n\n public static getDerivedStateFromProps(nextProps: Readonly<IArcProps>): Partial<IArcState> \| null {\n _updateChart(nextProps);\n return null;\n }\n\n public updateChart(newProps: IArcProps): void {\n _updateChart(newProps);\n }\n\n public render(): JSX.Element {\n const { arc, href, focusedArcId } = this.props;\n const getClassNames = classNamesFunction<IArcStyleProps, IArcStyles>();\n const id = this.props.uniqText! + this.props.data!.data.legend!.replace(/\\s+/, '') + this.props.data!.data.data;\n const opacity: number =\n this.props.activeArc === this.props.data!.data.legend \|\| this.props.activeArc === '' ? 1 : 0.1;\n\n const startAngle = this.props.data?.startAngle ?? 0;\n const endAngle = (this.props.data?.endAngle ?? 0) - startAngle;\n const cornerRadius = this.props.roundCorners ? 3 : 0;\n\n const classNames = getClassNames(getStyles, {\n solidFill: this.props.enableGradient ? 'transparent' : this.props.color,\n gradientFill: `conic-gradient(\n from ${startAngle}rad,\n ${this.props.color},\n ${this.props.nextColor} ${endAngle}rad\n )`,\n href: href!,\n theme: this.props.theme!,\n opacity,\n });\n\n const clipId = getId('Arc_clip') + `${this.props.color}_${this.props.nextColor}`;\n\n return (\n <g ref={this.currentRef}>\n {!!focusedArcId && focusedArcId === id && (\n <path\n id={id + 'focusRing'}\n d={arc.cornerRadius(cornerRadius)(this.props.focusData)}\n className={classNames.focusRing}\n />\n )}\n\n <path\n id={id}\n d={arc.cornerRadius(cornerRadius)(this.props.data)}\n onFocus={this._onFocus.bind(this, this.props.data!.data, id)}\n className={classNames.root}\n data-is-focusable={this.props.activeArc === this.props.data!.data.legend \|\| this.props.activeArc === ''}\n onMouseOver={this._hoverOn.bind(this, this.props.data!.data)}\n onMouseMove={this._hoverOn.bind(this, this.props.data!.data)}\n onMouseLeave={this._hoverOff}\n onBlur={this._onBlur}\n onClick={href ? this._redirectToUrl.bind(this, href) : this.props.data?.data.onClick}\n aria-label={this._getAriaLabel()}\n role=\"img\"\n />\n {this._renderArcLabel(classNames.arcLabel)}\n\n {this.props.enableGradient && (\n <>\n <clipPath id={clipId}>\n <path d={arc.cornerRadius(cornerRadius)(this.props.data)} />\n </clipPath>\n <foreignObject x=\"-50%\" y=\"-50%\" width=\"100%\" height=\"100%\" clipPath={`url(#${clipId})`}>\n <div className={classNames.gradientArc} />\n </foreignObject>\n </>\n )}\n </g>\n );\n }\n\n private _onFocus(data: IChartDataPoint, id: string): void {\n this.props.onFocusCallback!(data, id, this.currentRef.current);\n }\n\n private _hoverOn(data: IChartDataPoint, mouseEvent: React.MouseEvent<SVGPathElement>): void {\n mouseEvent.persist();\n this.props.hoverOnCallback!(data, mouseEvent);\n }\n\n private _hoverOff = (): void => {\n this.props.hoverLeaveCallback!();\n };\n\n private _onBlur = (): void => {\n this.props.onBlurCallback!();\n };\n\n private _redirectToUrl(href: string \| undefined): void {\n href ? (window.location.href = href) : '';\n }\n\n private _getAriaLabel = (): string => {\n const point = this.props.data!.data;\n const legend = point.xAxisCalloutData \|\| point.legend;\n const yValue = point.yAxisCalloutData \|\| point.data \|\| 0;\n return point.callOutAccessibilityData?.ariaLabel \|\| (legend ? `${legend}, ` : '') + `${yValue}.`;\n };\n\n private _renderArcLabel = (className: string) => {\n const { arc, data, innerRadius, outerRadius, showLabelsInPercent, totalValue, hideLabels, activeArc } = this.props;\n\n if (\n hideLabels \|\|\n Math.abs(data!.endAngle - data!.startAngle) < Math.PI / 12 \|\|\n (activeArc !== data!.data.legend && activeArc !== '')\n ) {\n return null;\n }\n\n const [base, perp] = arc.centroid(data);\n const hyp = Math.sqrt(base * base + perp * perp);\n const labelRadius = Math.max(innerRadius!, outerRadius!) + 2;\n const angle = (data!.startAngle + data!.endAngle) / 2;\n const arcValue = data!.value;\n\n return (\n <text\n x={(hyp === 0 ? 0 : base / hyp) * labelRadius}\n y={(hyp === 0 ? 0 : perp / hyp) * labelRadius}\n textAnchor={angle > Math.PI !== this._isRTL ? 'end' : 'start'}\n dominantBaseline={angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 'hanging' : 'auto'}\n className={className}\n aria-hidden={true}\n >\n {showLabelsInPercent\n ? d3Format('.0%')(totalValue! === 0 ? 0 : arcValue / totalValue!)\n : formatValueWithSIPrefix(arcValue)}\n </text>\n );\n };\n}\n\nfunction _updateChart(newProps: IArcProps): void {\n newProps.arc.innerRadius(newProps.innerRadius);\n newProps.arc.outerRadius(newProps.outerRadius);\n}\n"]}
1	+ {"version":3,"file":"Arc.js","sourceRoot":"../src/","sources":["components/DonutChart/Arc/Arc.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { arc as d3Arc } from 'd3-shape';\nimport { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities';\nimport { getStyles } from './Arc.styles';\nimport { IChartDataPoint } from '../index';\nimport { IArcProps, IArcStyleProps, IArcStyles } from './index';\nimport { format as d3Format } from 'd3-format';\nimport { formatValueWithSIPrefix } from '../../../utilities/index';\n\nexport interface IArcState {\n isCalloutVisible?: boolean;\n}\n\nexport class Arc extends React.Component<IArcProps, IArcState> {\n public static defaultProps: Partial<IArcProps> = {\n arc: d3Arc(),\n };\n\n public state: {} = {};\n\n private currentRef = React.createRef<SVGPathElement>();\n private _isRTL: boolean = getRTL();\n\n public static getDerivedStateFromProps(nextProps: Readonly<IArcProps>): Partial<IArcState> \| null {\n _updateChart(nextProps);\n return null;\n }\n\n public updateChart(newProps: IArcProps): void {\n _updateChart(newProps);\n }\n\n public render(): JSX.Element {\n const { arc, href, focusedArcId, activeArc } = this.props;\n const getClassNames = classNamesFunction<IArcStyleProps, IArcStyles>();\n const id = this.props.uniqText! + this.props.data!.data.legend!.replace(/\\s+/, '') + this.props.data!.data.data;\n const opacity: number =\n activeArc && activeArc.length > 0 ? (activeArc.includes(this.props.data?.data.legend!) ? 1 : 0.1) : 1;\n const startAngle = this.props.data?.startAngle ?? 0;\n const endAngle = (this.props.data?.endAngle ?? 0) - startAngle;\n const cornerRadius = this.props.roundCorners ? 3 : 0;\n\n const classNames = getClassNames(getStyles, {\n solidFill: this.props.enableGradient ? 'transparent' : this.props.color,\n gradientFill: `conic-gradient(\n from ${startAngle}rad,\n ${this.props.color},\n ${this.props.nextColor} ${endAngle}rad\n )`,\n href: href!,\n theme: this.props.theme!,\n opacity,\n });\n\n const clipId = getId('Arc_clip') + `${this.props.color}_${this.props.nextColor}`;\n\n return (\n <g ref={this.currentRef}>\n {!!focusedArcId && focusedArcId === id && (\n <path\n id={id + 'focusRing'}\n d={arc.cornerRadius(cornerRadius)(this.props.focusData)}\n className={classNames.focusRing}\n />\n )}\n\n <path\n id={id}\n d={arc.cornerRadius(cornerRadius)(this.props.data)}\n onFocus={this._onFocus.bind(this, this.props.data!.data, id)}\n className={classNames.root}\n data-is-focusable={\n this._shouldHighlightArc(this.props.data!.data.legend!) \|\| this.props.activeArc?.length === 0\n }\n onMouseOver={this._hoverOn.bind(this, this.props.data!.data)}\n onMouseMove={this._hoverOn.bind(this, this.props.data!.data)}\n onMouseLeave={this._hoverOff}\n onBlur={this._onBlur}\n onClick={href ? this._redirectToUrl.bind(this, href) : this.props.data?.data.onClick}\n aria-label={this._getAriaLabel()}\n role=\"img\"\n />\n {this._renderArcLabel(classNames.arcLabel)}\n\n {this.props.enableGradient && (\n <>\n <clipPath id={clipId}>\n <path d={arc.cornerRadius(cornerRadius)(this.props.data)} />\n </clipPath>\n <foreignObject x=\"-50%\" y=\"-50%\" width=\"100%\" height=\"100%\" clipPath={`url(#${clipId})`}>\n <div className={classNames.gradientArc} />\n </foreignObject>\n </>\n )}\n </g>\n );\n }\n\n private _onFocus(data: IChartDataPoint, id: string): void {\n this.props.onFocusCallback!(data, id, this.currentRef.current);\n }\n\n private _hoverOn(data: IChartDataPoint, mouseEvent: React.MouseEvent<SVGPathElement>): void {\n mouseEvent.persist();\n this.props.hoverOnCallback!(data, mouseEvent);\n }\n\n private _hoverOff = (): void => {\n this.props.hoverLeaveCallback!();\n };\n\n private _onBlur = (): void => {\n this.props.onBlurCallback!();\n };\n\n private _redirectToUrl(href: string \| undefined): void {\n href ? (window.location.href = href) : '';\n }\n\n private _getAriaLabel = (): string => {\n const point = this.props.data!.data;\n const legend = point.xAxisCalloutData \|\| point.legend;\n const yValue = point.yAxisCalloutData \|\| point.data \|\| 0;\n return point.callOutAccessibilityData?.ariaLabel \|\| (legend ? `${legend}, ` : '') + `${yValue}.`;\n };\n\n private _shouldHighlightArc = (legend?: string): boolean => {\n const { activeArc } = this.props;\n // If no activeArc is provided, highlight all arcs. Otherwise, only highlight the arcs that are active.\n return !activeArc \|\| activeArc.length === 0 \|\| legend === undefined \|\| activeArc.includes(legend);\n };\n\n private _renderArcLabel = (className: string) => {\n const { arc, data, innerRadius, outerRadius, showLabelsInPercent, totalValue, hideLabels } = this.props;\n if (\n hideLabels \|\|\n Math.abs(data!.endAngle - data!.startAngle) < Math.PI / 12 \|\|\n !this._shouldHighlightArc(data!.data.legend!)\n ) {\n return null;\n }\n\n const [base, perp] = arc.centroid(data);\n const hyp = Math.sqrt(base * base + perp * perp);\n const labelRadius = Math.max(innerRadius!, outerRadius!) + 2;\n const angle = (data!.startAngle + data!.endAngle) / 2;\n const arcValue = data!.value;\n\n return (\n <text\n x={(hyp === 0 ? 0 : base / hyp) * labelRadius}\n y={(hyp === 0 ? 0 : perp / hyp) * labelRadius}\n textAnchor={angle > Math.PI !== this._isRTL ? 'end' : 'start'}\n dominantBaseline={angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 'hanging' : 'auto'}\n className={className}\n aria-hidden={true}\n >\n {showLabelsInPercent\n ? d3Format('.0%')(totalValue! === 0 ? 0 : arcValue / totalValue!)\n : formatValueWithSIPrefix(arcValue)}\n </text>\n );\n };\n}\n\nfunction _updateChart(newProps: IArcProps): void {\n newProps.arc.innerRadius(newProps.innerRadius);\n newProps.arc.outerRadius(newProps.outerRadius);\n}\n"]}

package/lib/components/DonutChart/Arc/Arc.types.d.ts CHANGED Viewed

@@ -60,7 +60,7 @@ export interface IArcProps {
     /**
      * Active Arc for chart
      */
-    activeArc?: string;
+    activeArc?: string[];
     /**
      * internal prop for href
      */

package/lib/components/DonutChart/Arc/Arc.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Arc.types.js","sourceRoot":"../src/","sources":["components/DonutChart/Arc/Arc.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { IChartDataPoint } from '../index';\nexport interface IArcProps {\n /*\n Theme\n /\n theme: ITheme;\n /\n Data to render in the Arc.\n /\n data?: IArcData;\n\n /\n Data to render focused Arc\n /\n focusData?: IArcData;\n\n /\n id of the focused arc\n /\n focusedArcId?: string;\n /\n shape for Arc.\n /\n / eslint-disable @typescript-eslint/no-explicit-any /\n arc?: any;\n\n /\n innerRadius of the Arc.\n /\n innerRadius?: number;\n\n /\n outerRadius of the Arc.\n /\n outerRadius?: number;\n\n /\n Color for the Arc.\n /\n color: string;\n\n /\n Defines the function that is executed upon hovering over the legend\n /\n hoverOnCallback?: Function;\n\n /\n Defines the function that is executed upon hovering over the legend\n /\n onFocusCallback?: Function;\n\n /\n Defines the function that is executed upon hovering Leave the legend\n /\n onBlurCallback?: Function;\n\n /\n Defines the function that is executed upon hovering Leave the legend\n /\n hoverLeaveCallback?: Function;\n\n /\n Uniq string for chart\n /\n uniqText?: string;\n\n /\n string for callout id\n /\n calloutId?: string;\n\n /\n Active Arc for chart\n /\n activeArc?: string;\n\n /\n internal prop for href\n /\n href?: string;\n\n /\n props for inside donut value\n /\n valueInsideDonut?: string \| number;\n\n /\n Prop to show the arc labels in percentage format\n /\n showLabelsInPercent?: boolean;\n\n /\n Prop used to define the sum of all arc values\n /\n totalValue?: number;\n\n /\n Prop to hide the arc labels\n /\n hideLabels?: boolean;\n\n /\n Prop to enable the gradient in the arc\n * @default false\n /\n enableGradient?: boolean;\n\n /\n Prop to enable the round corners in the chart\n * @default false\n /\n roundCorners?: boolean;\n\n /\n Next color stop for the gradient\n * [Only used when enableGradient is True].\n /\n nextColor: string;\n}\n\nexport interface IArcData {\n /\n Data to render in the chart for individual arc.\n /\n data: IChartDataPoint;\n /\n endAngle of the Arc\n /\n endAngle: number;\n /\n index of the Arc\n /\n index: number;\n /\n padAngle of the Arc\n /\n padAngle: number;\n /\n startAngle of the Arc\n /\n startAngle: number;\n /\n value of the Arc\n /\n value: number;\n}\n\nexport interface IArcStyleProps {\n /\n Theme\n /\n theme: ITheme;\n\n /\n internal prop for href\n /\n href: string;\n\n /\n solid color for the arc (when enableGradient is false)\n /\n solidFill: string;\n\n /\n gradient for the arc (when enableGradient is true)\n /\n gradientFill: string;\n\n /\n wether gradients are enabled for the arc\n /\n opacity: number;\n}\n\nexport interface IArcStyles {\n /\n Style set for the card header component root\n /\n root: IStyle;\n\n /\n Style set for the gradient arc\n /\n gradientArc: IStyle;\n\n /\n styles for the focus\n /\n focusRing: IStyle;\n\n /\n Style for the arc labels\n */\n arcLabel: IStyle;\n}\n"]}
1	+ {"version":3,"file":"Arc.types.js","sourceRoot":"../src/","sources":["components/DonutChart/Arc/Arc.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { IChartDataPoint } from '../index';\nexport interface IArcProps {\n /*\n Theme\n /\n theme: ITheme;\n /\n Data to render in the Arc.\n /\n data?: IArcData;\n\n /\n Data to render focused Arc\n /\n focusData?: IArcData;\n\n /\n id of the focused arc\n /\n focusedArcId?: string;\n /\n shape for Arc.\n /\n / eslint-disable @typescript-eslint/no-explicit-any /\n arc?: any;\n\n /\n innerRadius of the Arc.\n /\n innerRadius?: number;\n\n /\n outerRadius of the Arc.\n /\n outerRadius?: number;\n\n /\n Color for the Arc.\n /\n color: string;\n\n /\n Defines the function that is executed upon hovering over the legend\n /\n hoverOnCallback?: Function;\n\n /\n Defines the function that is executed upon hovering over the legend\n /\n onFocusCallback?: Function;\n\n /\n Defines the function that is executed upon hovering Leave the legend\n /\n onBlurCallback?: Function;\n\n /\n Defines the function that is executed upon hovering Leave the legend\n /\n hoverLeaveCallback?: Function;\n\n /\n Uniq string for chart\n /\n uniqText?: string;\n\n /\n string for callout id\n /\n calloutId?: string;\n\n /\n Active Arc for chart\n /\n activeArc?: string[];\n\n /\n internal prop for href\n /\n href?: string;\n\n /\n props for inside donut value\n /\n valueInsideDonut?: string \| number;\n\n /\n Prop to show the arc labels in percentage format\n /\n showLabelsInPercent?: boolean;\n\n /\n Prop used to define the sum of all arc values\n /\n totalValue?: number;\n\n /\n Prop to hide the arc labels\n /\n hideLabels?: boolean;\n\n /\n Prop to enable the gradient in the arc\n * @default false\n /\n enableGradient?: boolean;\n\n /\n Prop to enable the round corners in the chart\n * @default false\n /\n roundCorners?: boolean;\n\n /\n Next color stop for the gradient\n * [Only used when enableGradient is True].\n /\n nextColor: string;\n}\n\nexport interface IArcData {\n /\n Data to render in the chart for individual arc.\n /\n data: IChartDataPoint;\n /\n endAngle of the Arc\n /\n endAngle: number;\n /\n index of the Arc\n /\n index: number;\n /\n padAngle of the Arc\n /\n padAngle: number;\n /\n startAngle of the Arc\n /\n startAngle: number;\n /\n value of the Arc\n /\n value: number;\n}\n\nexport interface IArcStyleProps {\n /\n Theme\n /\n theme: ITheme;\n\n /\n internal prop for href\n /\n href: string;\n\n /\n solid color for the arc (when enableGradient is false)\n /\n solidFill: string;\n\n /\n gradient for the arc (when enableGradient is true)\n /\n gradientFill: string;\n\n /\n wether gradients are enabled for the arc\n /\n opacity: number;\n}\n\nexport interface IArcStyles {\n /\n Style set for the card header component root\n /\n root: IStyle;\n\n /\n Style set for the gradient arc\n /\n gradientArc: IStyle;\n\n /\n styles for the focus\n /\n focusRing: IStyle;\n\n /\n Style for the arc labels\n */\n arcLabel: IStyle;\n}\n"]}

package/lib/components/DonutChart/DonutChart.base.d.ts CHANGED Viewed

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { ScaleOrdinal } from 'd3-scale';
 import { IAccessibilityProps } from '../../index';
 import { IChartDataPoint, IDonutChartProps } from './index';
+import { IChart } from '../../types/index';
 export interface IDonutChartState {
     showHover?: boolean;
     value?: string | undefined;
@@ -13,11 +14,11 @@ export interface IDonutChartState {
     xCalloutValue?: string;
     yCalloutValue?: string;
     focusedArcId?: string;
-    selectedLegend: string;
     dataPointCalloutProps?: IChartDataPoint;
     callOutAccessibilityData?: IAccessibilityProps;
+    selectedLegends: string[];
 }
-export declare class DonutChartBase extends React.Component<IDonutChartProps, IDonutChartState> {
+export declare class DonutChartBase extends React.Component<IDonutChartProps, IDonutChartState> implements IChart {
     static defaultProps: Partial<IDonutChartProps>;
     _colors: ScaleOrdinal<string, {}>;
     private _classNames;
@@ -31,10 +32,12 @@ export declare class DonutChartBase extends React.Component<IDonutChartProps, ID
     constructor(props: IDonutChartProps);
     componentDidMount(): void;
     render(): JSX.Element;
+    get chartContainer(): HTMLElement | null;
     private _closeCallout;
     private _elevateToMinimums;
     private _setViewBox;
     private _createLegends;
+    private _onLegendSelectionChange;
     private _focusCallback;
     private _hoverCallback;
     private _onBlur;
@@ -46,9 +49,10 @@ export declare class DonutChartBase extends React.Component<IDonutChartProps, ID
      * This function returns
      * the selected legend if there is one
      * or the hovered legend if none of the legends is selected.
-     * Note: This won't work in case of multiple legends selection.
      */
     private _getHighlightedLegend;
+    private _isLegendHighlighted;
+    private _noLegendsHighlighted;
     private _isChartEmpty;
     private _addDefaultColors;
 }