@fluentui/react-charting 5.23.29 → 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 (43) hide show
  1. package/CHANGELOG.json +16 -1
  2. package/CHANGELOG.md +11 -2
  3. package/dist/react-charting.js +1 -1
  4. package/dist/react-charting.min.js +1 -1
  5. package/lib/components/DeclarativeChart/DeclarativeChart.js +1 -1
  6. package/lib/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
  7. package/lib/components/DonutChart/Arc/Arc.d.ts +1 -0
  8. package/lib/components/DonutChart/Arc/Arc.js +13 -8
  9. package/lib/components/DonutChart/Arc/Arc.js.map +1 -1
  10. package/lib/components/DonutChart/Arc/Arc.types.d.ts +1 -1
  11. package/lib/components/DonutChart/Arc/Arc.types.js.map +1 -1
  12. package/lib/components/DonutChart/DonutChart.base.d.ts +4 -2
  13. package/lib/components/DonutChart/DonutChart.base.js +46 -25
  14. package/lib/components/DonutChart/DonutChart.base.js.map +1 -1
  15. package/lib/components/DonutChart/Pie/Pie.types.d.ts +1 -1
  16. package/lib/components/DonutChart/Pie/Pie.types.js.map +1 -1
  17. package/lib-amd/components/DeclarativeChart/DeclarativeChart.js +1 -1
  18. package/lib-amd/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
  19. package/lib-amd/components/DonutChart/Arc/Arc.d.ts +1 -0
  20. package/lib-amd/components/DonutChart/Arc/Arc.js +13 -8
  21. package/lib-amd/components/DonutChart/Arc/Arc.js.map +1 -1
  22. package/lib-amd/components/DonutChart/Arc/Arc.types.d.ts +1 -1
  23. package/lib-amd/components/DonutChart/Arc/Arc.types.js.map +1 -1
  24. package/lib-amd/components/DonutChart/DonutChart.base.d.ts +4 -2
  25. package/lib-amd/components/DonutChart/DonutChart.base.js +46 -25
  26. package/lib-amd/components/DonutChart/DonutChart.base.js.map +1 -1
  27. package/lib-amd/components/DonutChart/Pie/Pie.types.d.ts +1 -1
  28. package/lib-amd/components/DonutChart/Pie/Pie.types.js.map +1 -1
  29. package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js +1 -1
  30. package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
  31. package/lib-commonjs/components/DonutChart/Arc/Arc.d.ts +1 -0
  32. package/lib-commonjs/components/DonutChart/Arc/Arc.js +13 -8
  33. package/lib-commonjs/components/DonutChart/Arc/Arc.js.map +1 -1
  34. package/lib-commonjs/components/DonutChart/Arc/Arc.types.d.ts +1 -1
  35. package/lib-commonjs/components/DonutChart/Arc/Arc.types.js.map +1 -1
  36. package/lib-commonjs/components/DonutChart/DonutChart.base.d.ts +4 -2
  37. package/lib-commonjs/components/DonutChart/DonutChart.base.js +46 -25
  38. package/lib-commonjs/components/DonutChart/DonutChart.base.js.map +1 -1
  39. package/lib-commonjs/components/DonutChart/Pie/Pie.types.d.ts +1 -1
  40. package/lib-commonjs/components/DonutChart/Pie/Pie.types.js.map +1 -1
  41. package/package.json +1 -1
  42. package/src/components/DonutChart/Arc/Arc.types.ts +1 -1
  43. package/src/components/DonutChart/Pie/Pie.types.ts +1 -1
@@ -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 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}\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"]}
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"]}
@@ -17,5 +17,6 @@ export declare class Arc extends React.Component<IArcProps, IArcState> {
17
17
  private _onBlur;
18
18
  private _redirectToUrl;
19
19
  private _getAriaLabel;
20
+ private _shouldHighlightArc;
20
21
  private _renderArcLabel;
21
22
  }
@@ -22,11 +22,16 @@ define(["require", "exports", "tslib", "react", "d3-shape", "@fluentui/react/lib
22
22
  var yValue = point.yAxisCalloutData || point.data || 0;
23
23
  return ((_a = point.callOutAccessibilityData) === null || _a === void 0 ? void 0 : _a.ariaLabel) || (legend ? "".concat(legend, ", ") : '') + "".concat(yValue, ".");
24
24
  };
25
+ _this._shouldHighlightArc = function (legend) {
26
+ var activeArc = _this.props.activeArc;
27
+ // If no activeArc is provided, highlight all arcs. Otherwise, only highlight the arcs that are active.
28
+ return !activeArc || activeArc.length === 0 || legend === undefined || activeArc.includes(legend);
29
+ };
25
30
  _this._renderArcLabel = function (className) {
26
- 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;
31
+ 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;
27
32
  if (hideLabels ||
28
33
  Math.abs(data.endAngle - data.startAngle) < Math.PI / 12 ||
29
- (activeArc !== data.data.legend && activeArc !== '')) {
34
+ !_this._shouldHighlightArc(data.data.legend)) {
30
35
  return null;
31
36
  }
32
37
  var _b = arc.centroid(data), base = _b[0], perp = _b[1];
@@ -48,13 +53,13 @@ define(["require", "exports", "tslib", "react", "d3-shape", "@fluentui/react/lib
48
53
  _updateChart(newProps);
49
54
  };
50
55
  Arc.prototype.render = function () {
51
- var _a, _b, _c, _d, _e;
52
- var _f = this.props, arc = _f.arc, href = _f.href, focusedArcId = _f.focusedArcId;
56
+ var _a, _b, _c, _d, _e, _f, _g;
57
+ var _h = this.props, arc = _h.arc, href = _h.href, focusedArcId = _h.focusedArcId, activeArc = _h.activeArc;
53
58
  var getClassNames = (0, Utilities_1.classNamesFunction)();
54
59
  var id = this.props.uniqText + this.props.data.data.legend.replace(/\s+/, '') + this.props.data.data.data;
55
- var opacity = this.props.activeArc === this.props.data.data.legend || this.props.activeArc === '' ? 1 : 0.1;
56
- var startAngle = (_b = (_a = this.props.data) === null || _a === void 0 ? void 0 : _a.startAngle) !== null && _b !== void 0 ? _b : 0;
57
- var endAngle = ((_d = (_c = this.props.data) === null || _c === void 0 ? void 0 : _c.endAngle) !== null && _d !== void 0 ? _d : 0) - startAngle;
60
+ 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;
61
+ var startAngle = (_c = (_b = this.props.data) === null || _b === void 0 ? void 0 : _b.startAngle) !== null && _c !== void 0 ? _c : 0;
62
+ var endAngle = ((_e = (_d = this.props.data) === null || _d === void 0 ? void 0 : _d.endAngle) !== null && _e !== void 0 ? _e : 0) - startAngle;
58
63
  var cornerRadius = this.props.roundCorners ? 3 : 0;
59
64
  var classNames = getClassNames(Arc_styles_1.getStyles, {
60
65
  solidFill: this.props.enableGradient ? 'transparent' : this.props.color,
@@ -66,7 +71,7 @@ define(["require", "exports", "tslib", "react", "d3-shape", "@fluentui/react/lib
66
71
  var clipId = (0, Utilities_1.getId)('Arc_clip') + "".concat(this.props.color, "_").concat(this.props.nextColor);
67
72
  return (React.createElement("g", { ref: this.currentRef },
68
73
  !!focusedArcId && focusedArcId === id && (React.createElement("path", { id: id + 'focusRing', d: arc.cornerRadius(cornerRadius)(this.props.focusData), className: classNames.focusRing })),
69
- 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" }),
74
+ 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" }),
70
75
  this._renderArcLabel(classNames.arcLabel),
71
76
  this.props.enableGradient && (React.createElement(React.Fragment, null,
72
77
  React.createElement("clipPath", { id: clipId },
@@ -1 +1 @@
1
- {"version":3,"file":"Arc.js","sourceRoot":"../src/","sources":["components/DonutChart/Arc/Arc.tsx"],"names":[],"mappings":";;;;IAaA;QAAyB,+BAAqC;QAA9D;;YAKS,WAAK,GAAO,EAAE,CAAC;YAEd,gBAAU,GAAG,KAAK,CAAC,SAAS,EAAkB,CAAC;YAC/C,YAAM,GAAY,IAAA,kBAAM,GAAE,CAAC;YAqF3B,eAAS,GAAG;gBAClB,KAAI,CAAC,KAAK,CAAC,kBAAmB,EAAE,CAAC;YACnC,CAAC,CAAC;YAEM,aAAO,GAAG;gBAChB,KAAI,CAAC,KAAK,CAAC,cAAe,EAAE,CAAC;YAC/B,CAAC,CAAC;YAMM,mBAAa,GAAG;;gBACtB,IAAM,KAAK,GAAG,KAAI,CAAC,KAAK,CAAC,IAAK,CAAC,IAAI,CAAC;gBACpC,IAAM,MAAM,GAAG,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,MAAM,CAAC;gBACtD,IAAM,MAAM,GAAG,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;gBACzD,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;YACnG,CAAC,CAAC;YAEM,qBAAe,GAAG,UAAC,SAAiB;gBACpC,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;gBAEnH,IACE,UAAU;oBACV,IAAI,CAAC,GAAG,CAAC,IAAK,CAAC,QAAQ,GAAG,IAAK,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,EAAE;oBAC1D,CAAC,SAAS,KAAK,IAAK,CAAC,IAAI,CAAC,MAAM,IAAI,SAAS,KAAK,EAAE,CAAC,EACrD,CAAC;oBACD,OAAO,IAAI,CAAC;gBACd,CAAC;gBAEK,IAAA,KAAe,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAhC,IAAI,QAAA,EAAE,IAAI,QAAsB,CAAC;gBACxC,IAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;gBACjD,IAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,WAAY,EAAE,WAAY,CAAC,GAAG,CAAC,CAAC;gBAC7D,IAAM,KAAK,GAAG,CAAC,IAAK,CAAC,UAAU,GAAG,IAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;gBACtD,IAAM,QAAQ,GAAG,IAAK,CAAC,KAAK,CAAC;gBAE7B,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;oBAClB,CAAC,CAAC,IAAA,kBAAQ,EAAC,KAAK,CAAC,CAAC,UAAW,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAG,UAAW,CAAC;oBACjE,CAAC,CAAC,IAAA,+BAAuB,EAAC,QAAQ,CAAC,CAChC,CACR,CAAC;YACJ,CAAC,CAAC;;QACJ,CAAC;QAtIe,4BAAwB,GAAtC,UAAuC,SAA8B;YACnE,YAAY,CAAC,SAAS,CAAC,CAAC;YACxB,OAAO,IAAI,CAAC;QACd,CAAC;QAEM,yBAAW,GAAlB,UAAmB,QAAmB;YACpC,YAAY,CAAC,QAAQ,CAAC,CAAC;QACzB,CAAC;QAEM,oBAAM,GAAb;;YACQ,IAAA,KAA8B,IAAI,CAAC,KAAK,EAAtC,GAAG,SAAA,EAAE,IAAI,UAAA,EAAE,YAAY,kBAAe,CAAC;YAC/C,IAAM,aAAa,GAAG,IAAA,8BAAkB,GAA8B,CAAC;YACvE,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;YAChH,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;YAEjG,IAAM,UAAU,GAAG,MAAA,MAAA,IAAI,CAAC,KAAK,CAAC,IAAI,0CAAE,UAAU,mCAAI,CAAC,CAAC;YACpD,IAAM,QAAQ,GAAG,CAAC,MAAA,MAAA,IAAI,CAAC,KAAK,CAAC,IAAI,0CAAE,QAAQ,mCAAI,CAAC,CAAC,GAAG,UAAU,CAAC;YAC/D,IAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAErD,IAAM,UAAU,GAAG,aAAa,CAAC,sBAAS,EAAE;gBAC1C,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK;gBACvE,YAAY,EAAE,0CACH,UAAU,6BACf,IAAI,CAAC,KAAK,CAAC,KAAK,0BAChB,IAAI,CAAC,KAAK,CAAC,SAAS,cAAI,QAAQ,mBAClC;gBACJ,IAAI,EAAE,IAAK;gBACX,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAM;gBACxB,OAAO,SAAA;aACR,CAAC,CAAC;YAEH,IAAM,MAAM,GAAG,IAAA,iBAAK,EAAC,UAAU,CAAC,GAAG,UAAG,IAAI,CAAC,KAAK,CAAC,KAAK,cAAI,IAAI,CAAC,KAAK,CAAC,SAAS,CAAE,CAAC;YAEjF,OAAO,CACL,2BAAG,GAAG,EAAE,IAAI,CAAC,UAAU;gBACpB,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;gBAED,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;gBACD,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,QAAQ,CAAC;gBAEzC,IAAI,CAAC,KAAK,CAAC,cAAc,IAAI,CAC5B;oBACE,kCAAU,EAAE,EAAE,MAAM;wBAClB,8BAAM,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAI,CACnD;oBACX,uCAAe,CAAC,EAAC,MAAM,EAAC,CAAC,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,QAAQ,EAAE,eAAQ,MAAM,MAAG;wBACrF,6BAAK,SAAS,EAAE,UAAU,CAAC,WAAW,GAAI,CAC5B,CACf,CACJ,CACC,CACL,CAAC;QACJ,CAAC;QAEO,sBAAQ,GAAhB,UAAiB,IAAqB,EAAE,EAAU;YAChD,IAAI,CAAC,KAAK,CAAC,eAAgB,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QACjE,CAAC;QAEO,sBAAQ,GAAhB,UAAiB,IAAqB,EAAE,UAA4C;YAClF,UAAU,CAAC,OAAO,EAAE,CAAC;YACrB,IAAI,CAAC,KAAK,CAAC,eAAgB,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;QAChD,CAAC;QAUO,4BAAc,GAAtB,UAAuB,IAAwB;YAC7C,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAC5C,CAAC;QAtGa,gBAAY,GAAuB;YAC/C,GAAG,EAAE,IAAA,cAAK,GAAE;SACb,AAFyB,CAExB;QA6IJ,UAAC;KAAA,AAhJD,CAAyB,KAAK,CAAC,SAAS,GAgJvC;IAhJY,kBAAG;IAkJhB,SAAS,YAAY,CAAC,QAAmB;QACvC,QAAQ,CAAC,GAAG,CAAC,WAAW,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;QAC/C,QAAQ,CAAC,GAAG,CAAC,WAAW,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;IACjD,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"]}
@@ -60,7 +60,7 @@ export interface IArcProps {
60
60
  /**
61
61
  * Active Arc for chart
62
62
  */
63
- activeArc?: string;
63
+ activeArc?: string[];
64
64
  /**
65
65
  * internal prop for href
66
66
  */
@@ -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"]}
@@ -14,9 +14,9 @@ export interface IDonutChartState {
14
14
  xCalloutValue?: string;
15
15
  yCalloutValue?: string;
16
16
  focusedArcId?: string;
17
- selectedLegend: string;
18
17
  dataPointCalloutProps?: IChartDataPoint;
19
18
  callOutAccessibilityData?: IAccessibilityProps;
19
+ selectedLegends: string[];
20
20
  }
21
21
  export declare class DonutChartBase extends React.Component<IDonutChartProps, IDonutChartState> implements IChart {
22
22
  static defaultProps: Partial<IDonutChartProps>;
@@ -37,6 +37,7 @@ export declare class DonutChartBase extends React.Component<IDonutChartProps, ID
37
37
  private _elevateToMinimums;
38
38
  private _setViewBox;
39
39
  private _createLegends;
40
+ private _onLegendSelectionChange;
40
41
  private _focusCallback;
41
42
  private _hoverCallback;
42
43
  private _onBlur;
@@ -48,9 +49,10 @@ export declare class DonutChartBase extends React.Component<IDonutChartProps, ID
48
49
  * This function returns
49
50
  * the selected legend if there is one
50
51
  * or the hovered legend if none of the legends is selected.
51
- * Note: This won't work in case of multiple legends selection.
52
52
  */
53
53
  private _getHighlightedLegend;
54
+ private _isLegendHighlighted;
55
+ private _noLegendsHighlighted;
54
56
  private _isChartEmpty;
55
57
  private _addDefaultColors;
56
58
  }
@@ -7,7 +7,6 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
7
7
  var DonutChartBase = /** @class */ (function (_super) {
8
8
  tslib_1.__extends(DonutChartBase, _super);
9
9
  function DonutChartBase(props) {
10
- var _a, _b;
11
10
  var _this = _super.call(this, props) || this;
12
11
  _this._closeCallout = function () {
13
12
  _this.setState({
@@ -18,7 +17,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
18
17
  _this._currentHoverElement = element;
19
18
  _this.setState({
20
19
  /** Show the callout if highlighted arc is focused and Hide it if unhighlighted arc is focused */
21
- showHover: _this.state.selectedLegend === '' || _this.state.selectedLegend === data.legend,
20
+ showHover: _this._noLegendsHighlighted() || _this._isLegendHighlighted(data.legend),
22
21
  value: data.data.toString(),
23
22
  legend: data.legend,
24
23
  color: data.color,
@@ -41,7 +40,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
41
40
  }
42
41
  _this.setState({
43
42
  /** Show the callout if highlighted arc is hovered and Hide it if unhighlighted arc is hovered */
44
- showHover: _this.state.selectedLegend === '' || _this.state.selectedLegend === data.legend,
43
+ showHover: _this._noLegendsHighlighted() || _this._isLegendHighlighted(data.legend),
45
44
  value: data.data.toString(),
46
45
  legend: data.legend,
47
46
  color: color,
@@ -59,6 +58,12 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
59
58
  _this._calloutAnchorPoint = null;
60
59
  _this.setState({ showHover: false });
61
60
  };
61
+ _this._isLegendHighlighted = function (legend) {
62
+ return _this._getHighlightedLegend().includes(legend);
63
+ };
64
+ _this._noLegendsHighlighted = function () {
65
+ return _this._getHighlightedLegend().length === 0;
66
+ };
62
67
  _this._addDefaultColors = function (donutChartDataPoint) {
63
68
  return donutChartDataPoint
64
69
  ? donutChartDataPoint.map(function (item, index) {
@@ -82,12 +87,12 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
82
87
  legend: '',
83
88
  _width: _this.props.width || 200,
84
89
  _height: _this.props.height || 200,
85
- activeLegend: '',
90
+ activeLegend: undefined,
86
91
  color: '',
87
92
  xCalloutValue: '',
88
93
  yCalloutValue: '',
89
- selectedLegend: (_b = (_a = props.legendProps) === null || _a === void 0 ? void 0 : _a.selectedLegend) !== null && _b !== void 0 ? _b : '',
90
94
  focusedArcId: '',
95
+ selectedLegends: [],
91
96
  };
92
97
  _this._hoverCallback = _this._hoverCallback.bind(_this);
93
98
  _this._focusCallback = _this._focusCallback.bind(_this);
@@ -186,42 +191,55 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
186
191
  var legend = {
187
192
  title: point.legend,
188
193
  color: color,
189
- action: function () {
190
- if (_this.state.selectedLegend === point.legend) {
191
- _this.setState({ selectedLegend: '' });
192
- }
193
- else {
194
- _this.setState({ selectedLegend: point.legend });
195
- }
196
- },
197
194
  hoverAction: function () {
198
195
  _this._handleChartMouseLeave();
199
196
  _this.setState({ activeLegend: point.legend });
200
197
  },
201
198
  onMouseOutAction: function () {
202
- _this.setState({ activeLegend: '' });
199
+ _this.setState({ activeLegend: undefined });
203
200
  },
204
201
  };
205
202
  return legend;
206
203
  });
207
- var legends = (React.createElement(index_1.Legends, tslib_1.__assign({ legends: legendDataItems, centerLegends: true, overflowProps: this.props.legendsOverflowProps, focusZonePropsInHoverCard: this.props.focusZonePropsForLegendsInHoverCard, overflowText: this.props.legendsOverflowText }, this.props.legendProps)));
204
+ var legends = (React.createElement(index_1.Legends, tslib_1.__assign({ legends: legendDataItems, centerLegends: true, overflowProps: this.props.legendsOverflowProps, focusZonePropsInHoverCard: this.props.focusZonePropsForLegendsInHoverCard, overflowText: this.props.legendsOverflowText }, this.props.legendProps, {
205
+ // eslint-disable-next-line react/jsx-no-bind
206
+ onChange: this._onLegendSelectionChange.bind(this) })));
208
207
  return legends;
209
208
  };
209
+ DonutChartBase.prototype._onLegendSelectionChange = function (selectedLegends, event, currentLegend) {
210
+ var _a, _b;
211
+ if (this.props.legendProps && ((_a = this.props.legendProps) === null || _a === void 0 ? void 0 : _a.canSelectMultipleLegends)) {
212
+ this.setState({ selectedLegends: selectedLegends });
213
+ }
214
+ else {
215
+ this.setState({ selectedLegends: selectedLegends.slice(-1) });
216
+ }
217
+ if ((_b = this.props.legendProps) === null || _b === void 0 ? void 0 : _b.onChange) {
218
+ this.props.legendProps.onChange(selectedLegends, event, currentLegend);
219
+ }
220
+ };
210
221
  DonutChartBase.prototype._hoverLeave = function () {
211
222
  /**/
212
223
  };
213
224
  DonutChartBase.prototype._valueInsideDonut = function (valueInsideDonut, data) {
214
225
  var _this = this;
215
- var highlightedLegend = this._getHighlightedLegend();
216
- if (valueInsideDonut !== undefined && (highlightedLegend !== '' || this.state.showHover)) {
217
- var legendValue_1 = valueInsideDonut;
218
- data.map(function (point, index) {
219
- if (point.legend === highlightedLegend || (_this.state.showHover && point.legend === _this.state.legend)) {
220
- legendValue_1 = point.yAxisCalloutData ? point.yAxisCalloutData : point.data;
226
+ var highlightedLegends = this._getHighlightedLegend();
227
+ if (valueInsideDonut !== undefined && (highlightedLegends.length === 1 || this.state.showHover)) {
228
+ var pointValue = data.find(function (point) { return _this._isLegendHighlighted(point.legend); });
229
+ return pointValue
230
+ ? pointValue.yAxisCalloutData
231
+ ? pointValue.yAxisCalloutData
232
+ : pointValue.data
233
+ : valueInsideDonut;
234
+ }
235
+ else if (highlightedLegends.length > 0) {
236
+ var totalValue_1 = 0;
237
+ data.forEach(function (point) {
238
+ if (highlightedLegends.includes(point.legend)) {
239
+ totalValue_1 += point.data;
221
240
  }
222
- return;
223
241
  });
224
- return legendValue_1;
242
+ return totalValue_1;
225
243
  }
226
244
  else {
227
245
  return valueInsideDonut;
@@ -238,10 +256,13 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
238
256
  * This function returns
239
257
  * the selected legend if there is one
240
258
  * or the hovered legend if none of the legends is selected.
241
- * Note: This won't work in case of multiple legends selection.
242
259
  */
243
260
  DonutChartBase.prototype._getHighlightedLegend = function () {
244
- return this.state.selectedLegend || this.state.activeLegend;
261
+ return this.state.selectedLegends.length > 0
262
+ ? this.state.selectedLegends
263
+ : this.state.activeLegend
264
+ ? [this.state.activeLegend]
265
+ : [];
245
266
  };
246
267
  DonutChartBase.prototype._isChartEmpty = function () {
247
268
  return !(this.props.data &&
@@ -1 +1 @@
1
- {"version":3,"file":"DonutChart.base.js","sourceRoot":"../src/","sources":["components/DonutChart/DonutChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction, getId, initializeComponentRef } from '@fluentui/react/lib/Utilities';\nimport { ScaleOrdinal } from 'd3-scale';\nimport { IProcessedStyleSet } from '@fluentui/react/lib/Styling';\nimport { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';\nimport { FocusZone, FocusZoneDirection, FocusZoneTabbableElements } from '@fluentui/react-focus';\nimport { IAccessibilityProps, ChartHoverCard, ILegend, Legends } from '../../index';\nimport { Pie } from './Pie/index';\nimport { IChartDataPoint, IDonutChartProps, IDonutChartStyleProps, IDonutChartStyles } from './index';\nimport { getAccessibleDataObject, getColorFromToken, getNextColor, getNextGradient } from '../../utilities/index';\nimport { convertToLocaleString } from '../../utilities/locale-util';\nimport { IChart } from '../../types/index';\n\nconst getClassNames = classNamesFunction<IDonutChartStyleProps, IDonutChartStyles>();\nconst LEGEND_CONTAINER_HEIGHT = 40;\n\nexport interface IDonutChartState {\n showHover?: boolean;\n value?: string | undefined;\n legend?: string | undefined;\n _width?: number | undefined;\n _height?: number | undefined;\n activeLegend?: string;\n color?: string | undefined;\n xCalloutValue?: string;\n yCalloutValue?: string;\n focusedArcId?: string;\n selectedLegend: string;\n dataPointCalloutProps?: IChartDataPoint;\n callOutAccessibilityData?: IAccessibilityProps;\n}\n\nexport class DonutChartBase extends React.Component<IDonutChartProps, IDonutChartState> implements IChart {\n public static defaultProps: Partial<IDonutChartProps> = {\n innerRadius: 0,\n hideLabels: true,\n };\n public _colors: ScaleOrdinal<string, {}>;\n private _classNames: IProcessedStyleSet<IDonutChartStyles>;\n private _rootElem: HTMLElement | null;\n private _uniqText: string;\n /* eslint-disable @typescript-eslint/no-explicit-any */\n private _currentHoverElement: any;\n private _calloutId: string;\n private _calloutAnchorPoint: IChartDataPoint | null;\n private _emptyChartId: string | null;\n\n public static getDerivedStateFromProps(\n nextProps: Readonly<IDonutChartProps>,\n prevState: Readonly<IDonutChartState>,\n ): Partial<IDonutChartState> | null {\n let widthState: { _width: number } | undefined;\n if (nextProps.width && nextProps.width !== prevState._width) {\n widthState = { _width: nextProps.width };\n }\n\n let heightState: { _height: number } | undefined;\n if (nextProps.height && nextProps.height !== prevState._height) {\n heightState = { _height: nextProps.height - LEGEND_CONTAINER_HEIGHT };\n }\n\n return { ...widthState, ...heightState };\n }\n\n constructor(props: IDonutChartProps) {\n super(props);\n\n initializeComponentRef(this);\n\n this.state = {\n showHover: false,\n value: '',\n legend: '',\n _width: this.props.width || 200,\n _height: this.props.height || 200,\n activeLegend: '',\n color: '',\n xCalloutValue: '',\n yCalloutValue: '',\n selectedLegend: props.legendProps?.selectedLegend ?? '',\n focusedArcId: '',\n };\n this._hoverCallback = this._hoverCallback.bind(this);\n this._focusCallback = this._focusCallback.bind(this);\n this._hoverLeave = this._hoverLeave.bind(this);\n this._calloutId = getId('callout');\n this._uniqText = getId('_Pie_');\n this._emptyChartId = getId('_DonutChart_empty');\n }\n public componentDidMount(): void {\n if (this._rootElem) {\n this.setState({\n _width: this._rootElem.offsetWidth,\n _height: this._rootElem.offsetHeight - LEGEND_CONTAINER_HEIGHT,\n });\n }\n }\n\n public render(): JSX.Element {\n const { data, hideLegend = false } = this.props;\n const points = this._addDefaultColors(data?.chartData);\n\n this._classNames = getClassNames(this.props.styles!, {\n theme: this.props.theme!,\n width: this.state._width!,\n height: this.state._height!,\n color: this.state.color!,\n className: this.props.className!,\n });\n\n const legendBars = this._createLegends(points);\n const donutMarginHorizontal = this.props.hideLabels ? 0 : 80;\n const donutMarginVertical = this.props.hideLabels ? 0 : 40;\n const outerRadius =\n Math.min(this.state._width! - donutMarginHorizontal, this.state._height! - donutMarginVertical) / 2;\n const chartData = this._elevateToMinimums(points.filter((d: IChartDataPoint) => d.data! >= 0));\n const valueInsideDonut = this._valueInsideDonut(this.props.valueInsideDonut!, chartData!);\n\n return !this._isChartEmpty() ? (\n <div\n className={this._classNames.root}\n ref={(rootElem: HTMLElement | null) => (this._rootElem = rootElem)}\n onMouseLeave={this._handleChartMouseLeave}\n >\n <FocusZone direction={FocusZoneDirection.horizontal} handleTabKey={FocusZoneTabbableElements.all}>\n <div>\n <svg\n className={this._classNames.chart}\n aria-label={data?.chartTitle}\n ref={(node: SVGElement | null) => this._setViewBox(node)}\n >\n <Pie\n width={this.state._width!}\n height={this.state._height!}\n outerRadius={outerRadius}\n innerRadius={this.props.innerRadius!}\n data={chartData!}\n enableGradient={this.props.enableGradient}\n roundCorners={this.props.roundCorners}\n onFocusCallback={this._focusCallback}\n hoverOnCallback={this._hoverCallback}\n hoverLeaveCallback={this._hoverLeave}\n uniqText={this._uniqText}\n onBlurCallback={this._onBlur}\n activeArc={this._getHighlightedLegend()}\n focusedArcId={this.state.focusedArcId || ''}\n href={this.props.href!}\n calloutId={this._calloutId}\n valueInsideDonut={this._toLocaleString(valueInsideDonut)}\n theme={this.props.theme!}\n showLabelsInPercent={this.props.showLabelsInPercent}\n hideLabels={this.props.hideLabels}\n />\n </svg>\n </div>\n </FocusZone>\n <Callout\n target={this._currentHoverElement}\n alignTargetEdge={true}\n isBeakVisible={false}\n directionalHint={DirectionalHint.topAutoEdge}\n gapSpace={15}\n hidden={!(!this.props.hideTooltip && this.state.showHover)}\n id={this._calloutId}\n onDismiss={this._closeCallout}\n preventDismissOnLostFocus={true}\n /** Keep the callout updated with details of focused/hovered arc */\n shouldUpdateWhenHidden={true}\n {...this.props.calloutProps!}\n {...getAccessibleDataObject(this.state.callOutAccessibilityData, 'text', false)}\n >\n {this.props.onRenderCalloutPerDataPoint ? (\n this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps!)\n ) : (\n <ChartHoverCard\n Legend={this.state.xCalloutValue ? this.state.xCalloutValue : this.state.legend}\n YValue={this.state.yCalloutValue ? this.state.yCalloutValue : this.state.value}\n color={this.state.color}\n culture={this.props.culture}\n />\n )}\n </Callout>\n {!hideLegend && <div className={this._classNames.legendContainer}>{legendBars}</div>}\n </div>\n ) : (\n <div\n id={this._emptyChartId!}\n role={'alert'}\n style={{ opacity: '0' }}\n aria-label={'Graph has no data to display'}\n />\n );\n }\n\n public get chartContainer(): HTMLElement | null {\n return this._rootElem;\n }\n\n private _closeCallout = () => {\n this.setState({\n showHover: false,\n });\n };\n\n private _elevateToMinimums(data: IChartDataPoint[]) {\n let sumOfData = 0;\n const minPercent = 0.01;\n const elevatedData: IChartDataPoint[] = [];\n data.forEach(item => {\n sumOfData += item.data!;\n });\n data.forEach(item => {\n elevatedData.push(\n minPercent * sumOfData > item.data! && item.data! > 0\n ? {\n ...item,\n data: minPercent * sumOfData,\n yAxisCalloutData:\n item.yAxisCalloutData === undefined ? item.data!.toLocaleString() : item.yAxisCalloutData,\n }\n : item,\n );\n });\n return elevatedData;\n }\n private _setViewBox(node: SVGElement | null): void {\n if (node === null) {\n return;\n }\n\n const widthVal = node.parentElement ? node.parentElement.clientWidth : this.state._width;\n\n const heightVal =\n node.parentElement && node.parentElement?.offsetHeight > this.state._height!\n ? node.parentElement?.offsetHeight\n : this.state._height;\n const viewbox = `0 0 ${widthVal!} ${heightVal!}`;\n node.setAttribute('viewBox', viewbox);\n }\n\n private _createLegends(chartData: IChartDataPoint[]): JSX.Element {\n const legendDataItems = chartData.map((point: IChartDataPoint, index: number) => {\n const color: string = this.props.enableGradient\n ? point.gradient?.[0] || getNextGradient(index, 0, this.props.theme?.isInverted)[0]\n : point.color!;\n\n // mapping data to the format Legends component needs\n const legend: ILegend = {\n title: point.legend!,\n color,\n action: () => {\n if (this.state.selectedLegend === point.legend) {\n this.setState({ selectedLegend: '' });\n } else {\n this.setState({ selectedLegend: point.legend! });\n }\n },\n hoverAction: () => {\n this._handleChartMouseLeave();\n this.setState({ activeLegend: point.legend! });\n },\n onMouseOutAction: () => {\n this.setState({ activeLegend: '' });\n },\n };\n return legend;\n });\n const legends = (\n <Legends\n legends={legendDataItems}\n centerLegends\n overflowProps={this.props.legendsOverflowProps}\n focusZonePropsInHoverCard={this.props.focusZonePropsForLegendsInHoverCard}\n overflowText={this.props.legendsOverflowText}\n {...this.props.legendProps}\n />\n );\n return legends;\n }\n\n private _focusCallback = (data: IChartDataPoint, id: string, element: SVGPathElement): void => {\n this._currentHoverElement = element;\n this.setState({\n /** Show the callout if highlighted arc is focused and Hide it if unhighlighted arc is focused */\n showHover: this.state.selectedLegend === '' || this.state.selectedLegend === data.legend,\n value: data.data!.toString(),\n legend: data.legend,\n color: data.color!,\n xCalloutValue: data.xAxisCalloutData!,\n yCalloutValue: data.yAxisCalloutData!,\n focusedArcId: id,\n dataPointCalloutProps: data,\n callOutAccessibilityData: data.callOutAccessibilityData!,\n });\n };\n\n private _hoverCallback = (data: IChartDataPoint, e: React.MouseEvent<SVGPathElement>): void => {\n if (this._calloutAnchorPoint !== data) {\n this._calloutAnchorPoint = data;\n this._currentHoverElement = e;\n let color: string = data.color!;\n\n if (this.props.enableGradient) {\n const pointIndex = Math.max(this.props.data?.chartData?.findIndex(item => item.legend === data.legend) || 0, 0);\n color = data.gradient?.[0] || getNextGradient(pointIndex, 0, this.props.theme?.isInverted)[0];\n }\n\n this.setState({\n /** Show the callout if highlighted arc is hovered and Hide it if unhighlighted arc is hovered */\n showHover: this.state.selectedLegend === '' || this.state.selectedLegend === data.legend,\n value: data.data!.toString(),\n legend: data.legend,\n color,\n xCalloutValue: data.xAxisCalloutData!,\n yCalloutValue: data.yAxisCalloutData!,\n dataPointCalloutProps: data,\n callOutAccessibilityData: data.callOutAccessibilityData!,\n });\n }\n };\n private _onBlur = (): void => {\n this.setState({ focusedArcId: '' });\n };\n\n private _hoverLeave(): void {\n /**/\n }\n\n private _handleChartMouseLeave = () => {\n this._calloutAnchorPoint = null;\n this.setState({ showHover: false });\n };\n\n private _valueInsideDonut(valueInsideDonut: string | number | undefined, data: IChartDataPoint[]) {\n const highlightedLegend = this._getHighlightedLegend();\n if (valueInsideDonut !== undefined && (highlightedLegend !== '' || this.state.showHover)) {\n let legendValue = valueInsideDonut;\n data!.map((point: IChartDataPoint, index: number) => {\n if (point.legend === highlightedLegend || (this.state.showHover && point.legend === this.state.legend)) {\n legendValue = point.yAxisCalloutData ? point.yAxisCalloutData : point.data!;\n }\n return;\n });\n return legendValue;\n } else {\n return valueInsideDonut;\n }\n }\n\n private _toLocaleString(data: string | number | undefined) {\n const localeString = convertToLocaleString(data, this.props.culture);\n if (!localeString) {\n return data;\n }\n return localeString?.toString();\n }\n\n /**\n * This function returns\n * the selected legend if there is one\n * or the hovered legend if none of the legends is selected.\n * Note: This won't work in case of multiple legends selection.\n */\n private _getHighlightedLegend() {\n return this.state.selectedLegend || this.state.activeLegend;\n }\n\n private _isChartEmpty(): boolean {\n return !(\n this.props.data &&\n this.props.data.chartData &&\n this.props.data.chartData!.filter((d: IChartDataPoint) => d.data! > 0).length > 0\n );\n }\n\n private _addDefaultColors = (donutChartDataPoint?: IChartDataPoint[]): IChartDataPoint[] => {\n return donutChartDataPoint\n ? donutChartDataPoint.map((item, index) => {\n let color: string;\n // isInverted property is applicable to v8 themes only\n if (typeof item.color === 'undefined') {\n color = getNextColor(index, 0, this.props.theme?.isInverted);\n } else {\n color = getColorFromToken(item.color, this.props.theme?.isInverted);\n }\n\n return { ...item, color };\n })\n : [];\n };\n}\n"]}
1
+ {"version":3,"file":"DonutChart.base.js","sourceRoot":"../src/","sources":["components/DonutChart/DonutChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction, getId, initializeComponentRef } from '@fluentui/react/lib/Utilities';\nimport { ScaleOrdinal } from 'd3-scale';\nimport { IProcessedStyleSet } from '@fluentui/react/lib/Styling';\nimport { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';\nimport { FocusZone, FocusZoneDirection, FocusZoneTabbableElements } from '@fluentui/react-focus';\nimport { IAccessibilityProps, ChartHoverCard, ILegend, Legends } from '../../index';\nimport { Pie } from './Pie/index';\nimport { IChartDataPoint, IDonutChartProps, IDonutChartStyleProps, IDonutChartStyles } from './index';\nimport { getAccessibleDataObject, getColorFromToken, getNextColor, getNextGradient } from '../../utilities/index';\nimport { convertToLocaleString } from '../../utilities/locale-util';\nimport { IChart } from '../../types/index';\n\nconst getClassNames = classNamesFunction<IDonutChartStyleProps, IDonutChartStyles>();\nconst LEGEND_CONTAINER_HEIGHT = 40;\n\nexport interface IDonutChartState {\n showHover?: boolean;\n value?: string | undefined;\n legend?: string | undefined;\n _width?: number | undefined;\n _height?: number | undefined;\n activeLegend?: string;\n color?: string | undefined;\n xCalloutValue?: string;\n yCalloutValue?: string;\n focusedArcId?: string;\n dataPointCalloutProps?: IChartDataPoint;\n callOutAccessibilityData?: IAccessibilityProps;\n selectedLegends: string[];\n}\n\nexport class DonutChartBase extends React.Component<IDonutChartProps, IDonutChartState> implements IChart {\n public static defaultProps: Partial<IDonutChartProps> = {\n innerRadius: 0,\n hideLabels: true,\n };\n public _colors: ScaleOrdinal<string, {}>;\n private _classNames: IProcessedStyleSet<IDonutChartStyles>;\n private _rootElem: HTMLElement | null;\n private _uniqText: string;\n /* eslint-disable @typescript-eslint/no-explicit-any */\n private _currentHoverElement: any;\n private _calloutId: string;\n private _calloutAnchorPoint: IChartDataPoint | null;\n private _emptyChartId: string | null;\n\n public static getDerivedStateFromProps(\n nextProps: Readonly<IDonutChartProps>,\n prevState: Readonly<IDonutChartState>,\n ): Partial<IDonutChartState> | null {\n let widthState: { _width: number } | undefined;\n if (nextProps.width && nextProps.width !== prevState._width) {\n widthState = { _width: nextProps.width };\n }\n\n let heightState: { _height: number } | undefined;\n if (nextProps.height && nextProps.height !== prevState._height) {\n heightState = { _height: nextProps.height - LEGEND_CONTAINER_HEIGHT };\n }\n\n return { ...widthState, ...heightState };\n }\n\n constructor(props: IDonutChartProps) {\n super(props);\n\n initializeComponentRef(this);\n\n this.state = {\n showHover: false,\n value: '',\n legend: '',\n _width: this.props.width || 200,\n _height: this.props.height || 200,\n activeLegend: undefined,\n color: '',\n xCalloutValue: '',\n yCalloutValue: '',\n focusedArcId: '',\n selectedLegends: [],\n };\n this._hoverCallback = this._hoverCallback.bind(this);\n this._focusCallback = this._focusCallback.bind(this);\n this._hoverLeave = this._hoverLeave.bind(this);\n this._calloutId = getId('callout');\n this._uniqText = getId('_Pie_');\n this._emptyChartId = getId('_DonutChart_empty');\n }\n public componentDidMount(): void {\n if (this._rootElem) {\n this.setState({\n _width: this._rootElem.offsetWidth,\n _height: this._rootElem.offsetHeight - LEGEND_CONTAINER_HEIGHT,\n });\n }\n }\n\n public render(): JSX.Element {\n const { data, hideLegend = false } = this.props;\n const points = this._addDefaultColors(data?.chartData);\n\n this._classNames = getClassNames(this.props.styles!, {\n theme: this.props.theme!,\n width: this.state._width!,\n height: this.state._height!,\n color: this.state.color!,\n className: this.props.className!,\n });\n\n const legendBars = this._createLegends(points);\n const donutMarginHorizontal = this.props.hideLabels ? 0 : 80;\n const donutMarginVertical = this.props.hideLabels ? 0 : 40;\n const outerRadius =\n Math.min(this.state._width! - donutMarginHorizontal, this.state._height! - donutMarginVertical) / 2;\n const chartData = this._elevateToMinimums(points.filter((d: IChartDataPoint) => d.data! >= 0));\n const valueInsideDonut = this._valueInsideDonut(this.props.valueInsideDonut!, chartData!);\n return !this._isChartEmpty() ? (\n <div\n className={this._classNames.root}\n ref={(rootElem: HTMLElement | null) => (this._rootElem = rootElem)}\n onMouseLeave={this._handleChartMouseLeave}\n >\n <FocusZone direction={FocusZoneDirection.horizontal} handleTabKey={FocusZoneTabbableElements.all}>\n <div>\n <svg\n className={this._classNames.chart}\n aria-label={data?.chartTitle}\n ref={(node: SVGElement | null) => this._setViewBox(node)}\n >\n <Pie\n width={this.state._width!}\n height={this.state._height!}\n outerRadius={outerRadius}\n innerRadius={this.props.innerRadius!}\n data={chartData!}\n enableGradient={this.props.enableGradient}\n roundCorners={this.props.roundCorners}\n onFocusCallback={this._focusCallback}\n hoverOnCallback={this._hoverCallback}\n hoverLeaveCallback={this._hoverLeave}\n uniqText={this._uniqText}\n onBlurCallback={this._onBlur}\n activeArc={this._getHighlightedLegend()}\n focusedArcId={this.state.focusedArcId || ''}\n href={this.props.href!}\n calloutId={this._calloutId}\n valueInsideDonut={this._toLocaleString(valueInsideDonut)}\n theme={this.props.theme!}\n showLabelsInPercent={this.props.showLabelsInPercent}\n hideLabels={this.props.hideLabels}\n />\n </svg>\n </div>\n </FocusZone>\n <Callout\n target={this._currentHoverElement}\n alignTargetEdge={true}\n isBeakVisible={false}\n directionalHint={DirectionalHint.topAutoEdge}\n gapSpace={15}\n hidden={!(!this.props.hideTooltip && this.state.showHover)}\n id={this._calloutId}\n onDismiss={this._closeCallout}\n preventDismissOnLostFocus={true}\n /** Keep the callout updated with details of focused/hovered arc */\n shouldUpdateWhenHidden={true}\n {...this.props.calloutProps!}\n {...getAccessibleDataObject(this.state.callOutAccessibilityData, 'text', false)}\n >\n {this.props.onRenderCalloutPerDataPoint ? (\n this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps!)\n ) : (\n <ChartHoverCard\n Legend={this.state.xCalloutValue ? this.state.xCalloutValue : this.state.legend}\n YValue={this.state.yCalloutValue ? this.state.yCalloutValue : this.state.value}\n color={this.state.color}\n culture={this.props.culture}\n />\n )}\n </Callout>\n {!hideLegend && <div className={this._classNames.legendContainer}>{legendBars}</div>}\n </div>\n ) : (\n <div\n id={this._emptyChartId!}\n role={'alert'}\n style={{ opacity: '0' }}\n aria-label={'Graph has no data to display'}\n />\n );\n }\n\n public get chartContainer(): HTMLElement | null {\n return this._rootElem;\n }\n\n private _closeCallout = () => {\n this.setState({\n showHover: false,\n });\n };\n\n private _elevateToMinimums(data: IChartDataPoint[]) {\n let sumOfData = 0;\n const minPercent = 0.01;\n const elevatedData: IChartDataPoint[] = [];\n data.forEach(item => {\n sumOfData += item.data!;\n });\n data.forEach(item => {\n elevatedData.push(\n minPercent * sumOfData > item.data! && item.data! > 0\n ? {\n ...item,\n data: minPercent * sumOfData,\n yAxisCalloutData:\n item.yAxisCalloutData === undefined ? item.data!.toLocaleString() : item.yAxisCalloutData,\n }\n : item,\n );\n });\n return elevatedData;\n }\n private _setViewBox(node: SVGElement | null): void {\n if (node === null) {\n return;\n }\n\n const widthVal = node.parentElement ? node.parentElement.clientWidth : this.state._width;\n\n const heightVal =\n node.parentElement && node.parentElement?.offsetHeight > this.state._height!\n ? node.parentElement?.offsetHeight\n : this.state._height;\n const viewbox = `0 0 ${widthVal!} ${heightVal!}`;\n node.setAttribute('viewBox', viewbox);\n }\n\n private _createLegends(chartData: IChartDataPoint[]): JSX.Element {\n const legendDataItems = chartData.map((point: IChartDataPoint, index: number) => {\n const color: string = this.props.enableGradient\n ? point.gradient?.[0] || getNextGradient(index, 0, this.props.theme?.isInverted)[0]\n : point.color!;\n\n // mapping data to the format Legends component needs\n const legend: ILegend = {\n title: point.legend!,\n color,\n hoverAction: () => {\n this._handleChartMouseLeave();\n this.setState({ activeLegend: point.legend! });\n },\n onMouseOutAction: () => {\n this.setState({ activeLegend: undefined });\n },\n };\n return legend;\n });\n\n const legends = (\n <Legends\n legends={legendDataItems}\n centerLegends\n overflowProps={this.props.legendsOverflowProps}\n focusZonePropsInHoverCard={this.props.focusZonePropsForLegendsInHoverCard}\n overflowText={this.props.legendsOverflowText}\n {...this.props.legendProps}\n // eslint-disable-next-line react/jsx-no-bind\n onChange={this._onLegendSelectionChange.bind(this)}\n />\n );\n return legends;\n }\n\n private _onLegendSelectionChange(\n selectedLegends: string[],\n event: React.MouseEvent<HTMLButtonElement>,\n currentLegend?: ILegend,\n ): void {\n if (this.props.legendProps && this.props.legendProps?.canSelectMultipleLegends) {\n this.setState({ selectedLegends });\n } else {\n this.setState({ selectedLegends: selectedLegends.slice(-1) });\n }\n if (this.props.legendProps?.onChange) {\n this.props.legendProps.onChange(selectedLegends, event, currentLegend);\n }\n }\n\n private _focusCallback = (data: IChartDataPoint, id: string, element: SVGPathElement): void => {\n this._currentHoverElement = element;\n this.setState({\n /** Show the callout if highlighted arc is focused and Hide it if unhighlighted arc is focused */\n showHover: this._noLegendsHighlighted() || this._isLegendHighlighted(data.legend),\n value: data.data!.toString(),\n legend: data.legend,\n color: data.color!,\n xCalloutValue: data.xAxisCalloutData!,\n yCalloutValue: data.yAxisCalloutData!,\n focusedArcId: id,\n dataPointCalloutProps: data,\n callOutAccessibilityData: data.callOutAccessibilityData!,\n });\n };\n\n private _hoverCallback = (data: IChartDataPoint, e: React.MouseEvent<SVGPathElement>): void => {\n if (this._calloutAnchorPoint !== data) {\n this._calloutAnchorPoint = data;\n this._currentHoverElement = e;\n let color: string = data.color!;\n\n if (this.props.enableGradient) {\n const pointIndex = Math.max(this.props.data?.chartData?.findIndex(item => item.legend === data.legend) || 0, 0);\n color = data.gradient?.[0] || getNextGradient(pointIndex, 0, this.props.theme?.isInverted)[0];\n }\n\n this.setState({\n /** Show the callout if highlighted arc is hovered and Hide it if unhighlighted arc is hovered */\n showHover: this._noLegendsHighlighted() || this._isLegendHighlighted(data.legend),\n value: data.data!.toString(),\n legend: data.legend,\n color,\n xCalloutValue: data.xAxisCalloutData!,\n yCalloutValue: data.yAxisCalloutData!,\n dataPointCalloutProps: data,\n callOutAccessibilityData: data.callOutAccessibilityData!,\n });\n }\n };\n private _onBlur = (): void => {\n this.setState({ focusedArcId: '' });\n };\n\n private _hoverLeave(): void {\n /**/\n }\n\n private _handleChartMouseLeave = () => {\n this._calloutAnchorPoint = null;\n this.setState({ showHover: false });\n };\n\n private _valueInsideDonut(valueInsideDonut: string | number | undefined, data: IChartDataPoint[]) {\n const highlightedLegends = this._getHighlightedLegend();\n if (valueInsideDonut !== undefined && (highlightedLegends.length === 1 || this.state.showHover)) {\n const pointValue = data.find(point => this._isLegendHighlighted(point.legend));\n return pointValue\n ? pointValue.yAxisCalloutData\n ? pointValue.yAxisCalloutData\n : pointValue.data!\n : valueInsideDonut;\n } else if (highlightedLegends.length > 0) {\n let totalValue = 0;\n data.forEach(point => {\n if (highlightedLegends.includes(point.legend!)) {\n totalValue += point.data!;\n }\n });\n return totalValue;\n } else {\n return valueInsideDonut;\n }\n }\n\n private _toLocaleString(data: string | number | undefined) {\n const localeString = convertToLocaleString(data, this.props.culture);\n if (!localeString) {\n return data;\n }\n return localeString?.toString();\n }\n\n /**\n * This function returns\n * the selected legend if there is one\n * or the hovered legend if none of the legends is selected.\n */\n private _getHighlightedLegend() {\n return this.state.selectedLegends.length > 0\n ? this.state.selectedLegends\n : this.state.activeLegend\n ? [this.state.activeLegend]\n : [];\n }\n\n private _isLegendHighlighted = (legend: string | undefined): boolean => {\n return this._getHighlightedLegend().includes(legend!);\n };\n\n private _noLegendsHighlighted = (): boolean => {\n return this._getHighlightedLegend().length === 0;\n };\n\n private _isChartEmpty(): boolean {\n return !(\n this.props.data &&\n this.props.data.chartData &&\n this.props.data.chartData!.filter((d: IChartDataPoint) => d.data! > 0).length > 0\n );\n }\n\n private _addDefaultColors = (donutChartDataPoint?: IChartDataPoint[]): IChartDataPoint[] => {\n return donutChartDataPoint\n ? donutChartDataPoint.map((item, index) => {\n let color: string;\n // isInverted property is applicable to v8 themes only\n if (typeof item.color === 'undefined') {\n color = getNextColor(index, 0, this.props.theme?.isInverted);\n } else {\n color = getColorFromToken(item.color, this.props.theme?.isInverted);\n }\n\n return { ...item, color };\n })\n : [];\n };\n}\n"]}
@@ -52,7 +52,7 @@ export interface IPieProps {
52
52
  /**
53
53
  * Active Arc for chart
54
54
  */
55
- activeArc?: string;
55
+ activeArc?: string[];
56
56
  /**
57
57
  * string for callout id
58
58
  */
@@ -1 +1 @@
1
- {"version":3,"file":"Pie.types.js","sourceRoot":"../src/","sources":["components/DonutChart/Pie/Pie.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { IChartDataPoint } from '../index';\n\nexport interface IPieProps {\n /**\n * Theme\n */\n theme: ITheme;\n /**\n * Width of the Pie.\n */\n width: number;\n /**\n * Height of the Pie.\n */\n height: number;\n /**\n * outerRadius of the Pie.\n */\n outerRadius: number;\n /**\n * innerRadius of the Pie.\n */\n innerRadius: number;\n /**\n * Data to render in the Pie.\n */\n data: IChartDataPoint[];\n /**\n * shape for pie.\n */\n /* eslint-disable @typescript-eslint/no-explicit-any */\n pie?: any;\n /**\n * Defines the function that is executed upon hovering over the legend\n */\n hoverOnCallback?: Function;\n /**\n * Defines the function that is executed upon hovering over the legend\n */\n onFocusCallback?: Function;\n /**\n * Defines the function that is executed upon hovering Leave the legend\n */\n onBlurCallback?: Function;\n /**\n * Defines the function that is executed upon hovering Leave the legend\n */\n hoverLeaveCallback?: Function;\n /**\n * Uniq string for chart\n */\n uniqText?: string;\n /**\n * Active Arc for chart\n */\n activeArc?: string;\n\n /**\n * string for callout id\n */\n calloutId?: 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 * id of the focused arc\n */\n focusedArcId?: string;\n\n /**\n * Prop to show the arc labels in percentage format\n */\n showLabelsInPercent?: boolean;\n\n /**\n * Prop to hide the arc labels\n */\n hideLabels?: boolean;\n\n /**\n * Prop to enable the gradient in the chart\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\nexport interface IPieStyles {\n /**\n * Style set for the card header component root\n */\n root: IStyle;\n\n /**\n * Style set for the inside donut string\n */\n insideDonutString: IStyle;\n}\n\nexport interface IPieStyleProps {\n /**\n * Theme (provided through customization.)\n */\n theme: ITheme;\n}\n"]}
1
+ {"version":3,"file":"Pie.types.js","sourceRoot":"../src/","sources":["components/DonutChart/Pie/Pie.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { IChartDataPoint } from '../index';\n\nexport interface IPieProps {\n /**\n * Theme\n */\n theme: ITheme;\n /**\n * Width of the Pie.\n */\n width: number;\n /**\n * Height of the Pie.\n */\n height: number;\n /**\n * outerRadius of the Pie.\n */\n outerRadius: number;\n /**\n * innerRadius of the Pie.\n */\n innerRadius: number;\n /**\n * Data to render in the Pie.\n */\n data: IChartDataPoint[];\n /**\n * shape for pie.\n */\n /* eslint-disable @typescript-eslint/no-explicit-any */\n pie?: any;\n /**\n * Defines the function that is executed upon hovering over the legend\n */\n hoverOnCallback?: Function;\n /**\n * Defines the function that is executed upon hovering over the legend\n */\n onFocusCallback?: Function;\n /**\n * Defines the function that is executed upon hovering Leave the legend\n */\n onBlurCallback?: Function;\n /**\n * Defines the function that is executed upon hovering Leave the legend\n */\n hoverLeaveCallback?: Function;\n /**\n * Uniq string for chart\n */\n uniqText?: string;\n /**\n * Active Arc for chart\n */\n activeArc?: string[];\n\n /**\n * string for callout id\n */\n calloutId?: 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 * id of the focused arc\n */\n focusedArcId?: string;\n\n /**\n * Prop to show the arc labels in percentage format\n */\n showLabelsInPercent?: boolean;\n\n /**\n * Prop to hide the arc labels\n */\n hideLabels?: boolean;\n\n /**\n * Prop to enable the gradient in the chart\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\nexport interface IPieStyles {\n /**\n * Style set for the card header component root\n */\n root: IStyle;\n\n /**\n * Style set for the inside donut string\n */\n insideDonutString: IStyle;\n}\n\nexport interface IPieStyleProps {\n /**\n * Theme (provided through customization.)\n */\n theme: ITheme;\n}\n"]}
@@ -54,7 +54,7 @@ exports.DeclarativeChart = React.forwardRef(function (props, forwardedRef) {
54
54
  }); }, [exportAsImage]);
55
55
  switch (data[0].type) {
56
56
  case 'pie':
57
- return (React.createElement(index_1.DonutChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToDonutProps)(plotlySchema, colorMap, isDarkTheme), { legendProps: legendProps, componentRef: chartRef })));
57
+ return (React.createElement(index_1.DonutChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToDonutProps)(plotlySchema, colorMap, isDarkTheme), { legendProps: tslib_1.__assign(tslib_1.__assign({}, legendProps), { canSelectMultipleLegends: true }), componentRef: chartRef })));
58
58
  case 'bar':
59
59
  var orientation_1 = data[0].orientation;
60
60
  if (orientation_1 === 'h') {