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

@fluentui/react-charting 5.23.28 → 5.23.29

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 (179) 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":";AAAA,yDAAyD;AACzD,uDAAuD;AACvD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAC3E,OAAO,EACL,+BAA+B,EAC/B,8BAA8B,EAC9B,sCAAsC,EACtC,+CAA+C,EAC/C,WAAW,EACX,aAAa,EACb,iCAAiC,EACjC,gCAAgC,EAChC,+BAA+B,EAC/B,8BAA8B,EAC9B,6BAA6B,GAC9B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,0BAA0B,EAAE,MAAM,qCAAqC,CAAC;AACjF,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAuB,OAAO,EAAE,MAAM,iBAAiB,CAAC;AA2C/D,IAAM,eAAe,GAAG;IACtB,IAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,GAAG,EAAkB,CAAC,CAAC;IACzD,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,IAAM,gBAAgB,GAAmD,KAAK,CAAC,UAAU,CAG9F,UAAC,KAAK,EAAE,YAAY;;IACZ,IAAA,YAAY,GAAK,KAAK,CAAC,WAAW,aAAtB,CAAuB;IACnC,IAAA,IAAI,GAA8B,YAAY,KAA1C,EAAE,MAAM,GAAsB,YAAY,OAAlC,EAAE,eAAe,GAAK,YAAY,gBAAjB,CAAkB;IACvD,IAAM,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1B,IAAM,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;IACrC,IAAM,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IACzC,IAAM,QAAQ,GAAG,eAAe,EAAE,CAAC;IACnC,IAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,IAAM,WAAW,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,UAAU,mCAAI,KAAK,CAAC;IAC/C,IAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAS,IAAI,CAAC,CAAC;IAEtC,IAAA,KAAoC,KAAK,CAAC,QAAQ,CAAW,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,EAAE,CAAC,EAAlF,aAAa,QAAA,EAAE,gBAAgB,QAAmD,CAAC;IAC1F,IAAM,qBAAqB,GAAG,UAAC,IAAc;QAC3C,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACvB,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;YACzB,KAAK,CAAC,cAAc,CAAC,EAAE,YAAY,EAAE,EAAE,IAAI,MAAA,EAAE,MAAM,QAAA,EAAE,eAAe,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;QAClF,CAAC;IACH,CAAC,CAAC;IAEF,IAAM,WAAW,cACf,wBAAwB,EAAE,KAAK,EAC/B,QAAQ,EAAE,qBAAqB,IAC5B,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,IAAI,EAAE,cAAc,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,CACtE,CAAC;IAEF,IAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CACrC,UAAC,IAA0B;;QACzB,OAAO,OAAO,CAAC,MAAA,QAAQ,CAAC,OAAO,0CAAE,cAAc,aAC7C,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,IAC5B,IAAI,EACP,CAAC;IACL,CAAC,EACD,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,KAAK,CAAC,mBAAmB,CACvB,KAAK,CAAC,YAAY,EAClB,cAAM,OAAA,CAAC;QACL,aAAa,eAAA;KACd,CAAC,EAFI,CAEJ,EACF,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,QAAQ,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;QACrB,KAAK,KAAK;YACR,OAAO,CACL,oBAAC,UAAU,eACL,+BAA+B,CAAC,YAAY,EAAE,QAAQ,EAAE,WAAW,CAAC,IACxE,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,QAAQ,IACtB,CACH,CAAC;QACJ,KAAK,KAAK;YACR,IAAM,aAAW,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;YACxC,IAAI,aAAW,KAAK,GAAG,EAAE,CAAC;gBACxB,OAAO,CACL,oBAAC,0BAA0B,eACrB,+CAA+C,CAAC,YAAY,EAAE,QAAQ,EAAE,WAAW,CAAC,IACxF,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,QAAQ,IACtB,CACH,CAAC;YACJ,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,MAAM,0CAAE,OAAO,CAAC,EAAE,CAAC;oBACjE,OAAO,CACL,oBAAC,uBAAuB,eAClB,8BAA8B,CAAC,YAAY,EAAE,QAAQ,EAAE,WAAW,CAAC,IACvE,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,QAAQ,IACtB,CACH,CAAC;gBACJ,CAAC;gBACD,OAAO,CACL,oBAAC,uBAAuB,eAClB,8BAA8B,CAAC,YAAY,EAAE,QAAQ,EAAE,WAAW,CAAC,IACvE,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,QAAQ,IACtB,CACH,CAAC;YACJ,CAAC;QACH,KAAK,SAAS;YACZ,IAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,UAAC,MAAW,IAAK,OAAA,MAAM,CAAC,IAAI,KAAK,SAAS,IAAI,MAAM,CAAC,IAAI,KAAK,SAAS,EAAtD,CAAsD,CAAC,CAAC;YACvG,IAAI,OAAO,IAAI,SAAS,EAAE,CAAC;gBACzB,IAAI,WAAW,EAAE,CAAC;oBAChB,OAAO,CACL,oBAAC,SAAS,eACJ,sCAAsC,CAAC,EAAE,IAAI,MAAA,EAAE,MAAM,QAAA,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,CAAC,IACzF,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,QAAQ,IACtB,CACH,CAAC;gBACJ,CAAC;gBACD,OAAO,CACL,oBAAC,SAAS,eACJ,sCAAsC,CAAC,EAAE,IAAI,MAAA,EAAE,MAAM,QAAA,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,CAAC,IAC1F,WAAW,EAAE;wBACX,QAAQ,EAAE,qBAAqB;wBAC/B,wBAAwB,EAAE,IAAI;wBAC9B,eAAe,EAAE,aAAa;qBAC/B,EACD,YAAY,EAAE,QAAQ,IACtB,CACH,CAAC;YACJ,CAAC;YACD,OAAO,CACL,oBAAC,uBAAuB,eAClB,8BAA8B,CAAC,YAAY,EAAE,QAAQ,EAAE,WAAW,CAAC,IACvE,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,QAAQ,IACtB,CACH,CAAC;QACJ,KAAK,SAAS;YACZ,OAAO,CACL,oBAAC,YAAY,eACP,iCAAiC,CAAC,YAAY,CAAC,IACnD,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,QAAQ,IACtB,CACH,CAAC;QACJ,KAAK,QAAQ;YACX,OAAO,CACL,oBAAC,WAAW,eACN,gCAAgC,CAAC,YAAY,EAAE,QAAQ,EAAE,WAAW,CAAC,IACzE,YAAY,EAAE,QAAQ,IACtB,CACH,CAAC;QACJ,KAAK,WAAW;YACd,IAAI,MAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAG,CAAC,CAAC,0CAAE,IAAI,0CAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC;gBACvC,OAAO,CACL,oBAAC,UAAU,eACL,+BAA+B,CAAC,YAAY,EAAE,QAAQ,EAAE,WAAW,CAAC,IACxE,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,QAAQ,IACtB,CACH,CAAC;YACJ,CAAC;YACD,OAAO,sDAA6B,CAAC;QACvC,KAAK,WAAW;YACd,OAAO,CACL,oBAAC,gBAAgB,eACX,6BAA6B,CAAC,YAAY,EAAE,QAAQ,EAAE,WAAW,CAAC,IACtE,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,QAAQ,IACtB,CACH,CAAC;QACJ;YACE,OAAO,sDAA6B,CAAC;IACzC,CAAC;AACH,CAAC,CAAC,CAAC;AACH,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC","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"]}

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/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;
@@ -17,7 +18,7 @@ export interface IDonutChartState {
     dataPointCalloutProps?: IChartDataPoint;
     callOutAccessibilityData?: IAccessibilityProps;
 }
-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,6 +32,7 @@ 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;

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

@@ -1,6 +1,6 @@
 import { __assign, __extends } from "tslib";
 import * as React from 'react';
-import { classNamesFunction, getId } from '@fluentui/react/lib/Utilities';
+import { classNamesFunction, getId, initializeComponentRef } from '@fluentui/react/lib/Utilities';
 import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';
 import { FocusZone, FocusZoneDirection, FocusZoneTabbableElements } from '@fluentui/react-focus';
 import { ChartHoverCard, Legends } from '../../index';
@@ -80,6 +80,7 @@ var DonutChartBase = /** @class */ (function (_super) {
                 })
                 : [];
         };
+        initializeComponentRef(_this);
         _this.state = {
             showHover: false,
             value: '',
@@ -147,6 +148,13 @@ var DonutChartBase = /** @class */ (function (_super) {
                 shouldUpdateWhenHidden: true }, this.props.calloutProps, getAccessibleDataObject(this.state.callOutAccessibilityData, 'text', false)), this.props.onRenderCalloutPerDataPoint ? (this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps)) : (React.createElement(ChartHoverCard, { Legend: this.state.xCalloutValue ? this.state.xCalloutValue : this.state.legend, YValue: this.state.yCalloutValue ? this.state.yCalloutValue : this.state.value, color: this.state.color, culture: this.props.culture }))),
             !hideLegend && React.createElement("div", { className: this._classNames.legendContainer }, legendBars))) : (React.createElement("div", { id: this._emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
     };
+    Object.defineProperty(DonutChartBase.prototype, "chartContainer", {
+        get: function () {
+            return this._rootElem;
+        },
+        enumerable: false,
+        configurable: true
+    });
     DonutChartBase.prototype._elevateToMinimums = function (data) {
         var sumOfData = 0;
         var minPercent = 0.01;

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

	@@ -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 } 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';\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> {\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 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 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 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"]}

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

@@ -1,8 +1,8 @@
 import { IStyle } from '@fluentui/react/lib/Styling';
-import { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
+import { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
 import { ICartesianChartProps, ICartesianChartStyleProps } from '../CommonComponents/index';
 import { ICalloutProps } from '@fluentui/react/lib/Callout';
-import { IChartProps, IChartDataPoint } from './index';
+import { IChartProps, IChartDataPoint, IChart } from './index';
 export interface IDonutChart {
 }
 /**
@@ -58,6 +58,11 @@ export interface IDonutChartProps extends ICartesianChartProps {
      * @default false
      */
     roundCorners?: boolean;
+    /**
+     * Optional callback to access the IChart interface. Use this instead of ref for accessing
+     * the public methods and properties of the component.
+     */
+    componentRef?: IRefObject<IChart>;
 }
 /**
  * Donut Chart style properties

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DonutChart.types.js","sourceRoot":"../src/","sources":["components/DonutChart/DonutChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle } from '@fluentui/react/lib/Styling';\nimport { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { ICartesianChartProps, ICartesianChartStyleProps } from '../CommonComponents/index';\nimport { ICalloutProps } from '@fluentui/react/lib/Callout';\nimport { IChartProps, IChartDataPoint } from './index';\n\nexport interface IDonutChart {}\n\n/*\n Donut Chart properties.\n * {@docCategory DonutChart}\n /\nexport interface IDonutChartProps extends ICartesianChartProps {\n /\n Data to render in the chart.\n /\n data?: IChartProps;\n\n /\n inner radius for donut size\n /\n innerRadius?: number;\n\n /\n Call to provide customized styling that will layer on top of the variant rules.\n /\n styles?: IStyleFunctionOrObject<IDonutChartStyleProps, IDonutChartStyles>;\n\n /\n props for inside donut value\n /\n valueInsideDonut?: string \| number;\n\n /\n Define a custom callout renderer for a data point\n /\n onRenderCalloutPerDataPoint?: IRenderFunction<IChartDataPoint>;\n\n /\n props for the callout in the chart\n /\n calloutProps?: Partial<ICalloutProps>;\n\n /\n The prop used to define the culture to localized the numbers\n /\n culture?: string;\n\n /\n Prop to show the arc labels in percentage format\n * @default false\n /\n showLabelsInPercent?: boolean;\n\n /\n Prop to hide the arc labels\n * @default true\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\n/\n Donut Chart style properties\n * {@docCategory DonutChart}\n /\nexport interface IDonutChartStyleProps extends ICartesianChartStyleProps {}\n\n/\n Donut Chart styles\n * {@docCategory DonutChart}\n /\nexport interface IDonutChartStyles {\n /\n Style for the root element.\n /\n root?: IStyle;\n\n /\n Style for the chart.\n /\n chart?: IStyle;\n /\n Style for the legend container.\n */\n legendContainer: IStyle;\n}\n"]}
1	+ {"version":3,"file":"DonutChart.types.js","sourceRoot":"../src/","sources":["components/DonutChart/DonutChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle } from '@fluentui/react/lib/Styling';\nimport { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { ICartesianChartProps, ICartesianChartStyleProps } from '../CommonComponents/index';\nimport { ICalloutProps } from '@fluentui/react/lib/Callout';\nimport { IChartProps, IChartDataPoint, IChart } from './index';\n\nexport interface IDonutChart {}\n\n/*\n Donut Chart properties.\n * {@docCategory DonutChart}\n /\nexport interface IDonutChartProps extends ICartesianChartProps {\n /\n Data to render in the chart.\n /\n data?: IChartProps;\n\n /\n inner radius for donut size\n /\n innerRadius?: number;\n\n /\n Call to provide customized styling that will layer on top of the variant rules.\n /\n styles?: IStyleFunctionOrObject<IDonutChartStyleProps, IDonutChartStyles>;\n\n /\n props for inside donut value\n /\n valueInsideDonut?: string \| number;\n\n /\n Define a custom callout renderer for a data point\n /\n onRenderCalloutPerDataPoint?: IRenderFunction<IChartDataPoint>;\n\n /\n props for the callout in the chart\n /\n calloutProps?: Partial<ICalloutProps>;\n\n /\n The prop used to define the culture to localized the numbers\n /\n culture?: string;\n\n /\n Prop to show the arc labels in percentage format\n * @default false\n /\n showLabelsInPercent?: boolean;\n\n /\n Prop to hide the arc labels\n * @default true\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 /\n Optional callback to access the IChart interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n /\n componentRef?: IRefObject<IChart>;\n}\n\n/\n Donut Chart style properties\n * {@docCategory DonutChart}\n /\nexport interface IDonutChartStyleProps extends ICartesianChartStyleProps {}\n\n/\n Donut Chart styles\n * {@docCategory DonutChart}\n /\nexport interface IDonutChartStyles {\n /\n Style for the root element.\n /\n root?: IStyle;\n\n /\n Style for the chart.\n /\n chart?: IStyle;\n /\n Style for the legend container.\n */\n legendContainer: IStyle;\n}\n"]}

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { IGaugeChartProps, IGaugeChartSegment, GaugeValueFormat, GaugeChartVariant } from './GaugeChart.types';
 import { IYValueHover } from '../../index';
+import { IChart } from '../../types/index';
 export declare const ARC_PADDING = 2;
 export declare const BREAKPOINTS: {
     minRadius: number;
@@ -28,7 +29,7 @@ export interface IExtendedSegment extends IGaugeChartSegment {
     start: number;
     end: number;
 }
-export declare class GaugeChartBase extends React.Component<IGaugeChartProps, IGaugeChartState> {
+export declare class GaugeChartBase extends React.Component<IGaugeChartProps, IGaugeChartState> implements IChart {
     private _classNames;
     private _isRTL;
     private _innerRadius;
@@ -43,6 +44,7 @@ export declare class GaugeChartBase extends React.Component<IGaugeChartProps, IG
     constructor(props: IGaugeChartProps);
     componentDidMount(): void;
     render(): React.ReactNode;
+    get chartContainer(): HTMLElement | null;
     private _getMargins;
     private _getStylesBasedOnBreakpoint;
     private _processProps;

package/lib/components/GaugeChart/GaugeChart.base.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { __assign, __extends } from "tslib";
 import * as React from 'react';
 import { arc as d3Arc } from 'd3-shape';
-import { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities';
+import { classNamesFunction, getId, getRTL, initializeComponentRef } from '@fluentui/react/lib/Utilities';
 import { GaugeValueFormat, GaugeChartVariant, } from './GaugeChart.types';
 import { convertToLocaleString } from '../../utilities/locale-util';
 import { Points, formatValueWithSIPrefix, getAccessibleDataObject, getColorFromToken, getNextColor, getNextGradient, pointTypes, } from '../../utilities/index';
@@ -293,6 +293,7 @@ var GaugeChartBase = /** @class */ (function (_super) {
             var chartTitle = _this.props.chartTitle;
             return (chartTitle ? "".concat(chartTitle, ". ") : '') + "Gauge chart with ".concat(_this._segments.length, " segments. ");
         };
+        initializeComponentRef(_this);
         _this._margins = _this._getMargins();
         _this._legendsHeight = !props.hideLegend ? 24 : 0;
         _this.state = {
@@ -383,6 +384,13 @@ var GaugeChartBase = /** @class */ (function (_super) {
                 YValueHover: this.state.hoverYValues,
             })))));
     };
+    Object.defineProperty(GaugeChartBase.prototype, "chartContainer", {
+        get: function () {
+            return this._rootElem;
+        },
+        enumerable: false,
+        configurable: true
+    });
     GaugeChartBase.prototype._yValueHoverSubCountsExists = function (yValueHover) {
         if (yValueHover) {
             return yValueHover.some(function (yValue) { return yValue.yAxisCalloutData && typeof yValue.yAxisCalloutData !== 'string'; });