npm - @fluentui/react-charting - Versions diffs - 5.23.32 → 5.23.33 - Mend

@fluentui/react-charting 5.23.32 → 5.23.33

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 (29) hide show

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

@@ -65,9 +65,10 @@ export var DeclarativeChart = React.forwardRef(function (props, forwardedRef) {
     React.useImperativeHandle(props.componentRef, function () { return ({
         exportAsImage: exportAsImage,
     }); }, [exportAsImage]);
+    var multiSelectLegendProps = __assign(__assign({}, legendProps), { canSelectMultipleLegends: true, selectedLegends: activeLegends });
     switch (data[0].type) {
         case 'pie':
-            return (React.createElement(DonutChart, __assign({}, transformPlotlyJsonToDonutProps(plotlySchema, colorMap, isDarkTheme), { legendProps: __assign(__assign({}, legendProps), { canSelectMultipleLegends: true, selectedLegends: activeLegends }), componentRef: chartRef,
+            return (React.createElement(DonutChart, __assign({}, transformPlotlyJsonToDonutProps(plotlySchema, colorMap, isDarkTheme), { legendProps: multiSelectLegendProps, componentRef: chartRef,
                 // Bubble event to prevent right click to open menu on the callout
                 calloutProps: { layerProps: { eventBubblingEnabled: true } } })));
         case 'bar':
@@ -77,15 +78,15 @@ export var DeclarativeChart = React.forwardRef(function (props, forwardedRef) {
             }
             else {
                 if (['group', 'overlay'].includes((_b = plotlySchema === null || plotlySchema === void 0 ? void 0 : plotlySchema.layout) === null || _b === void 0 ? void 0 : _b.barmode)) {
-                    return (React.createElement(GroupedVerticalBarChart, __assign({}, transformPlotlyJsonToGVBCProps(plotlySchema, colorMap, isDarkTheme), { legendProps: __assign(__assign({}, legendProps), { canSelectMultipleLegends: true, selectedLegends: activeLegends }), componentRef: chartRef, calloutProps: { layerProps: { eventBubblingEnabled: true } } })));
+                    return (React.createElement(GroupedVerticalBarChart, __assign({}, transformPlotlyJsonToGVBCProps(plotlySchema, colorMap, isDarkTheme), { legendProps: multiSelectLegendProps, componentRef: chartRef, calloutProps: { layerProps: { eventBubblingEnabled: true } } })));
                 }
-                return (React.createElement(VerticalStackedBarChart, __assign({}, transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme), { legendProps: __assign(__assign({}, legendProps), { canSelectMultipleLegends: true, selectedLegends: activeLegends }), componentRef: chartRef, calloutProps: { layerProps: { eventBubblingEnabled: true } } })));
+                return (React.createElement(VerticalStackedBarChart, __assign({}, transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme), { legendProps: multiSelectLegendProps, componentRef: chartRef, calloutProps: { layerProps: { eventBubblingEnabled: true } } })));
             }
         case 'scatter':
             var isAreaChart_1 = data.some(function (series) { return series.fill === 'tonexty' || series.fill === 'tozeroy'; });
             var renderChart = function (chartProps) {
                 if (isAreaChart_1) {
-                    return React.createElement(AreaChart, __assign({}, chartProps));
+                    return (React.createElement(AreaChart, __assign({}, chartProps, { legendProps: __assign(__assign({}, legendProps), { canSelectMultipleLegends: true, selectedLegends: activeLegends }) })));
                 }
                 return (React.createElement(LineChart, __assign({}, chartProps, { legendProps: {
                         onChange: onActiveLegendsChange,
@@ -102,7 +103,7 @@ export var DeclarativeChart = React.forwardRef(function (props, forwardedRef) {
                 var chartProps = __assign(__assign({}, transformPlotlyJsonToScatterChartProps({ data: updatedData, layout: layout }, isAreaChart_1, colorMap, isDarkTheme)), { legendProps: legendProps, componentRef: chartRef, calloutProps: { layerProps: { eventBubblingEnabled: true } } });
                 return renderChart(chartProps);
             }
-            return (React.createElement(VerticalStackedBarChart, __assign({}, transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme), { legendProps: __assign(__assign({}, legendProps), { canSelectMultipleLegends: true, selectedLegends: activeLegends }), componentRef: chartRef, calloutProps: { layerProps: { eventBubblingEnabled: true } } })));
+            return (React.createElement(VerticalStackedBarChart, __assign({}, transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme), { legendProps: multiSelectLegendProps, componentRef: chartRef, calloutProps: { layerProps: { eventBubblingEnabled: true } } })));
         case 'heatmap':
             return (React.createElement(HeatMapChart, __assign({}, transformPlotlyJsonToHeatmapProps(plotlySchema), { legendProps: legendProps, componentRef: chartRef, calloutProps: { layerProps: { eventBubblingEnabled: true } } })));
         case 'sankey':
@@ -113,7 +114,7 @@ export var DeclarativeChart = React.forwardRef(function (props, forwardedRef) {
             }
             return React.createElement("div", null, "Unsupported Schema");
         case 'histogram':
-            return (React.createElement(VerticalBarChart, __assign({}, transformPlotlyJsonToVBCProps(plotlySchema, colorMap, isDarkTheme), { legendProps: legendProps, componentRef: chartRef, calloutProps: { layerProps: { eventBubblingEnabled: true } } })));
+            return (React.createElement(VerticalBarChart, __assign({}, transformPlotlyJsonToVBCProps(plotlySchema, colorMap, isDarkTheme), { legendProps: multiSelectLegendProps, componentRef: chartRef, calloutProps: { layerProps: { eventBubblingEnabled: true } } })));
         default:
             throw new Error('Unsupported chart schema');
     }

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 { useTheme } from '@fluentui/react';\nimport { IRefObject } from '@fluentui/react/lib/Utilities';\nimport { DonutChart } from '../DonutChart/index';\nimport { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';\nimport {\n isArrayOrTypedArray,\n isDateArray,\n isNumberArray,\n isMonthArray,\n sanitizeJson,\n updateXValues,\n transformPlotlyJsonToDonutProps,\n transformPlotlyJsonToVSBCProps,\n transformPlotlyJsonToScatterChartProps,\n transformPlotlyJsonToHorizontalBarWithAxisProps,\n transformPlotlyJsonToHeatmapProps,\n transformPlotlyJsonToSankeyProps,\n transformPlotlyJsonToGaugeProps,\n transformPlotlyJsonToGVBCProps,\n transformPlotlyJsonToVBCProps,\n} from './PlotlySchemaAdapter';\nimport { LineChart } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart } from '../AreaChart/index';\nimport { HeatMapChart } from '../HeatMapChart/index';\nimport { SankeyChart } from '../SankeyChart/SankeyChart';\nimport { GaugeChart } from '../GaugeChart/index';\nimport { GroupedVerticalBarChart } from '../GroupedVerticalBarChart/index';\nimport { VerticalBarChart } from '../VerticalBarChart/index';\nimport { IImageExportOptions, toImage } from './imageExporter';\nimport { IChart } from '../../types/index';\n\n/*\n DeclarativeChart schema.\n * {@docCategory DeclarativeChart}\n /\nexport interface Schema {\n /\n Plotly schema represented as JSON object\n /\n plotlySchema: any;\n}\n\n/\n DeclarativeChart props.\n * {@docCategory DeclarativeChart}\n /\nexport interface DeclarativeChartProps extends React.RefAttributes<HTMLDivElement> {\n /\n The schema representing the chart data, layout and configuration\n /\n chartSchema: Schema;\n\n /\n Callback when an event occurs\n /\n onSchemaChange?: (eventData: Schema) => void;\n\n /\n Optional callback to access the IDeclarativeChart interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n /\n componentRef?: IRefObject<IDeclarativeChart>;\n}\n\n/\n {@docCategory DeclarativeChart}\n /\nexport interface IDeclarativeChart {\n exportAsImage: (opts?: IImageExportOptions) => Promise<string>;\n}\n\nconst useColorMapping = () => {\n const colorMap = React.useRef(new Map<string, string>());\n return colorMap;\n};\n\n/\n DeclarativeChart component.\n * {@docCategory DeclarativeChart}\n */\nexport const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> = React.forwardRef<\n HTMLDivElement,\n DeclarativeChartProps\n>((props, forwardedRef) => {\n const { plotlySchema } = sanitizeJson(props.chartSchema);\n const { data, layout } = plotlySchema;\n let { selectedLegends } = plotlySchema;\n const xValues = data[0].x;\n const isXDate = isDateArray(xValues);\n const isXNumber = isNumberArray(xValues);\n const isXMonth = isMonthArray(xValues);\n const colorMap = useColorMapping();\n const theme = useTheme();\n const isDarkTheme = theme?.isInverted ?? false;\n const chartRef = React.useRef<IChart>(null);\n\n if (!isArrayOrTypedArray(selectedLegends)) {\n selectedLegends = [];\n }\n\n const [activeLegends, setActiveLegends] = React.useState<string[]>(selectedLegends);\n const onActiveLegendsChange = (keys: string[]) => {\n setActiveLegends(keys);\n if (props.onSchemaChange) {\n props.onSchemaChange({ plotlySchema: { data, layout, selectedLegends: keys } });\n }\n };\n\n React.useEffect(() => {\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { plotlySchema } = sanitizeJson(props.chartSchema);\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { selectedLegends } = plotlySchema;\n setActiveLegends(selectedLegends ?? []);\n }, [props.chartSchema]);\n\n const legendProps = {\n canSelectMultipleLegends: false,\n onChange: onActiveLegendsChange,\n selectedLegend: activeLegends.slice(0, 1)[0],\n };\n\n const exportAsImage = React.useCallback(\n (opts?: IImageExportOptions) => {\n return toImage(chartRef.current?.chartContainer, {\n background: theme.palette.white,\n ...opts,\n });\n },\n [theme],\n );\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n exportAsImage,\n }),\n [exportAsImage],\n );\n\n switch (data[0].type) {\n case 'pie':\n return (\n <DonutChart\n {...transformPlotlyJsonToDonutProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={{ ...legendProps, canSelectMultipleLegends: true, selectedLegends: activeLegends }}\n componentRef={chartRef}\n // Bubble event to prevent right click to open menu on the callout\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n case 'bar':\n const orientation = data[0].orientation;\n if (orientation === 'h') {\n return (\n <HorizontalBarChartWithAxis\n {...transformPlotlyJsonToHorizontalBarWithAxisProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={legendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n } else {\n if (['group', 'overlay'].includes(plotlySchema?.layout?.barmode)) {\n return (\n <GroupedVerticalBarChart\n {...transformPlotlyJsonToGVBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={{ ...legendProps, canSelectMultipleLegends: true, selectedLegends: activeLegends }}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n }\n return (\n <VerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={{ ...legendProps, canSelectMultipleLegends: true, selectedLegends: activeLegends }}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n }\n case 'scatter':\n const isAreaChart = data.some((series: any) => series.fill === 'tonexty' \|\| series.fill === 'tozeroy');\n const renderChart = (chartProps: any) => {\n if (isAreaChart) {\n return <AreaChart {...chartProps} />;\n }\n return (\n <LineChart\n {...{\n ...chartProps,\n legendProps: {\n onChange: onActiveLegendsChange,\n canSelectMultipleLegends: true,\n selectedLegends: activeLegends,\n },\n }}\n />\n );\n };\n if (isXDate \|\| isXNumber) {\n const chartProps = {\n ...transformPlotlyJsonToScatterChartProps({ data, layout }, isAreaChart, colorMap, isDarkTheme),\n legendProps,\n componentRef: chartRef,\n calloutProps: { layerProps: { eventBubblingEnabled: true } },\n };\n return renderChart(chartProps);\n } else if (isXMonth) {\n const updatedData = data.map((dataPoint: any) => ({\n ...dataPoint,\n x: updateXValues(dataPoint.x),\n }));\n const chartProps = {\n ...transformPlotlyJsonToScatterChartProps({ data: updatedData, layout }, isAreaChart, colorMap, isDarkTheme),\n legendProps,\n componentRef: chartRef,\n calloutProps: { layerProps: { eventBubblingEnabled: true } },\n };\n return renderChart(chartProps);\n }\n return (\n <VerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={{ ...legendProps, canSelectMultipleLegends: true, selectedLegends: activeLegends }}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n case 'heatmap':\n return (\n <HeatMapChart\n {...transformPlotlyJsonToHeatmapProps(plotlySchema)}\n legendProps={legendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n case 'sankey':\n return (\n <SankeyChart\n {...transformPlotlyJsonToSankeyProps(plotlySchema, colorMap, isDarkTheme)}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n case 'indicator':\n if (data?.[0]?.mode?.includes('gauge')) {\n return (\n <GaugeChart\n {...transformPlotlyJsonToGaugeProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={legendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n }\n return <div>Unsupported Schema</div>;\n case 'histogram':\n return (\n <VerticalBarChart\n {...transformPlotlyJsonToVBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={legendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n default:\n throw new Error('Unsupported chart schema');\n }\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\n"]}
1	+ {"version":3,"file":"DeclarativeChart.js","sourceRoot":"../src/","sources":["components/DeclarativeChart/DeclarativeChart.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention /\n/ eslint-disable @typescript-eslint/no-explicit-any /\nimport as React from 'react';\nimport { useTheme } from '@fluentui/react';\nimport { IRefObject } from '@fluentui/react/lib/Utilities';\nimport { DonutChart } from '../DonutChart/index';\nimport { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';\nimport {\n isArrayOrTypedArray,\n isDateArray,\n isNumberArray,\n isMonthArray,\n sanitizeJson,\n updateXValues,\n transformPlotlyJsonToDonutProps,\n transformPlotlyJsonToVSBCProps,\n transformPlotlyJsonToScatterChartProps,\n transformPlotlyJsonToHorizontalBarWithAxisProps,\n transformPlotlyJsonToHeatmapProps,\n transformPlotlyJsonToSankeyProps,\n transformPlotlyJsonToGaugeProps,\n transformPlotlyJsonToGVBCProps,\n transformPlotlyJsonToVBCProps,\n} from './PlotlySchemaAdapter';\nimport { LineChart } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart } from '../AreaChart/index';\nimport { HeatMapChart } from '../HeatMapChart/index';\nimport { SankeyChart } from '../SankeyChart/SankeyChart';\nimport { GaugeChart } from '../GaugeChart/index';\nimport { GroupedVerticalBarChart } from '../GroupedVerticalBarChart/index';\nimport { VerticalBarChart } from '../VerticalBarChart/index';\nimport { IImageExportOptions, toImage } from './imageExporter';\nimport { IChart } from '../../types/index';\n\n/*\n DeclarativeChart schema.\n * {@docCategory DeclarativeChart}\n /\nexport interface Schema {\n /\n Plotly schema represented as JSON object\n /\n plotlySchema: any;\n}\n\n/\n DeclarativeChart props.\n * {@docCategory DeclarativeChart}\n /\nexport interface DeclarativeChartProps extends React.RefAttributes<HTMLDivElement> {\n /\n The schema representing the chart data, layout and configuration\n /\n chartSchema: Schema;\n\n /\n Callback when an event occurs\n /\n onSchemaChange?: (eventData: Schema) => void;\n\n /\n Optional callback to access the IDeclarativeChart interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n /\n componentRef?: IRefObject<IDeclarativeChart>;\n}\n\n/\n {@docCategory DeclarativeChart}\n /\nexport interface IDeclarativeChart {\n exportAsImage: (opts?: IImageExportOptions) => Promise<string>;\n}\n\nconst useColorMapping = () => {\n const colorMap = React.useRef(new Map<string, string>());\n return colorMap;\n};\n\n/\n DeclarativeChart component.\n * {@docCategory DeclarativeChart}\n */\nexport const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> = React.forwardRef<\n HTMLDivElement,\n DeclarativeChartProps\n>((props, forwardedRef) => {\n const { plotlySchema } = sanitizeJson(props.chartSchema);\n const { data, layout } = plotlySchema;\n let { selectedLegends } = plotlySchema;\n const xValues = data[0].x;\n const isXDate = isDateArray(xValues);\n const isXNumber = isNumberArray(xValues);\n const isXMonth = isMonthArray(xValues);\n const colorMap = useColorMapping();\n const theme = useTheme();\n const isDarkTheme = theme?.isInverted ?? false;\n const chartRef = React.useRef<IChart>(null);\n\n if (!isArrayOrTypedArray(selectedLegends)) {\n selectedLegends = [];\n }\n\n const [activeLegends, setActiveLegends] = React.useState<string[]>(selectedLegends);\n const onActiveLegendsChange = (keys: string[]) => {\n setActiveLegends(keys);\n if (props.onSchemaChange) {\n props.onSchemaChange({ plotlySchema: { data, layout, selectedLegends: keys } });\n }\n };\n\n React.useEffect(() => {\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { plotlySchema } = sanitizeJson(props.chartSchema);\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { selectedLegends } = plotlySchema;\n setActiveLegends(selectedLegends ?? []);\n }, [props.chartSchema]);\n\n const legendProps = {\n canSelectMultipleLegends: false,\n onChange: onActiveLegendsChange,\n selectedLegend: activeLegends.slice(0, 1)[0],\n };\n\n const exportAsImage = React.useCallback(\n (opts?: IImageExportOptions) => {\n return toImage(chartRef.current?.chartContainer, {\n background: theme.palette.white,\n ...opts,\n });\n },\n [theme],\n );\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n exportAsImage,\n }),\n [exportAsImage],\n );\n\n const multiSelectLegendProps = {\n ...legendProps,\n canSelectMultipleLegends: true,\n selectedLegends: activeLegends,\n };\n\n switch (data[0].type) {\n case 'pie':\n return (\n <DonutChart\n {...transformPlotlyJsonToDonutProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n // Bubble event to prevent right click to open menu on the callout\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n case 'bar':\n const orientation = data[0].orientation;\n if (orientation === 'h') {\n return (\n <HorizontalBarChartWithAxis\n {...transformPlotlyJsonToHorizontalBarWithAxisProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={legendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n } else {\n if (['group', 'overlay'].includes(plotlySchema?.layout?.barmode)) {\n return (\n <GroupedVerticalBarChart\n {...transformPlotlyJsonToGVBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n }\n return (\n <VerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n }\n case 'scatter':\n const isAreaChart = data.some((series: any) => series.fill === 'tonexty' \|\| series.fill === 'tozeroy');\n const renderChart = (chartProps: any) => {\n if (isAreaChart) {\n return (\n <AreaChart\n {...chartProps}\n legendProps={{ ...legendProps, canSelectMultipleLegends: true, selectedLegends: activeLegends }}\n />\n );\n }\n return (\n <LineChart\n {...{\n ...chartProps,\n legendProps: {\n onChange: onActiveLegendsChange,\n canSelectMultipleLegends: true,\n selectedLegends: activeLegends,\n },\n }}\n />\n );\n };\n if (isXDate \|\| isXNumber) {\n const chartProps = {\n ...transformPlotlyJsonToScatterChartProps({ data, layout }, isAreaChart, colorMap, isDarkTheme),\n legendProps,\n componentRef: chartRef,\n calloutProps: { layerProps: { eventBubblingEnabled: true } },\n };\n return renderChart(chartProps);\n } else if (isXMonth) {\n const updatedData = data.map((dataPoint: any) => ({\n ...dataPoint,\n x: updateXValues(dataPoint.x),\n }));\n const chartProps = {\n ...transformPlotlyJsonToScatterChartProps({ data: updatedData, layout }, isAreaChart, colorMap, isDarkTheme),\n legendProps,\n componentRef: chartRef,\n calloutProps: { layerProps: { eventBubblingEnabled: true } },\n };\n return renderChart(chartProps);\n }\n return (\n <VerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n case 'heatmap':\n return (\n <HeatMapChart\n {...transformPlotlyJsonToHeatmapProps(plotlySchema)}\n legendProps={legendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n case 'sankey':\n return (\n <SankeyChart\n {...transformPlotlyJsonToSankeyProps(plotlySchema, colorMap, isDarkTheme)}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n case 'indicator':\n if (data?.[0]?.mode?.includes('gauge')) {\n return (\n <GaugeChart\n {...transformPlotlyJsonToGaugeProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={legendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n }\n return <div>Unsupported Schema</div>;\n case 'histogram':\n return (\n <VerticalBarChart\n {...transformPlotlyJsonToVBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n default:\n throw new Error('Unsupported chart schema');\n }\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\n"]}

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

@@ -11,6 +11,7 @@ export interface IVerticalBarChartState extends IBasestate {
     hoverXValue?: string | number | null;
     callOutAccessibilityData?: IAccessibilityProps;
     calloutLegend: string;
+    selectedLegends: string[];
 }
 export declare class VerticalBarChartBase extends React.Component<IVerticalBarChartProps, IVerticalBarChartState> implements IChart {
     static defaultProps: Partial<IVerticalBarChartProps>;
@@ -66,10 +67,10 @@ export declare class VerticalBarChartBase extends React.Component<IVerticalBarCh
     private _createStringBars;
     private _createDateBars;
     private _closeCallout;
-    private _onLegendClick;
     private _onLegendHover;
     private _onLegendLeave;
     private _getLegendData;
+    private _onLegendSelectionChange;
     private _getAxisData;
     /**
      * This function checks if the given legend is highlighted or not.
@@ -82,6 +83,7 @@ export declare class VerticalBarChartBase extends React.Component<IVerticalBarCh
      * This function checks if none of the legends is selected or hovered.
      */
     private _noLegendHighlighted;
+    private _getHighlightedLegend;
     private _getAriaLabel;
     private _renderBarLabel;
     private _getDomainMargins;

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

@@ -8,7 +8,7 @@ import { classNamesFunction, getId, getRTL, initializeComponentRef } from '@flue
 import { DirectionalHint } from '@fluentui/react/lib/Callout';
 import { CartesianChart, ChartHoverCard, Legends, } from '../../index';
 import { FocusZoneDirection } from '@fluentui/react-focus';
-import { ChartTypes, getAccessibleDataObject, XAxisTypes, getTypeOfAxis, tooltipOfXAxislabels, formatValueWithSIPrefix, getBarWidth, getScalePadding, isScalePaddingDefined, calculateAppropriateBarWidth, findVerticalNumericMinMaxOfY, createNumericYAxis, domainRageOfVerticalNumeric, domainRangeOfDateForAreaLineVerticalBarChart, domainRangeOfXStringAxis, createStringYAxis, formatDate, getNextGradient, } from '../../utilities/index';
+import { ChartTypes, getAccessibleDataObject, XAxisTypes, getTypeOfAxis, tooltipOfXAxislabels, formatValueWithSIPrefix, getBarWidth, getScalePadding, isScalePaddingDefined, calculateAppropriateBarWidth, findVerticalNumericMinMaxOfY, createNumericYAxis, domainRageOfVerticalNumeric, domainRangeOfDateForAreaLineVerticalBarChart, domainRangeOfXStringAxis, createStringYAxis, formatDate, getNextGradient, areArraysEqual, } from '../../utilities/index';
 var CircleVisbility;
 (function (CircleVisbility) {
     CircleVisbility["show"] = "visibility";
@@ -19,7 +19,7 @@ var MIN_DOMAIN_MARGIN = 8;
 var VerticalBarChartBase = /** @class */ (function (_super) {
     __extends(VerticalBarChartBase, _super);
     function VerticalBarChartBase(props) {
-        var _a, _b;
+        var _a;
         var _this = _super.call(this, props) || this;
         _this._isRtl = getRTL();
         _this._getDomainNRangeValues = function (points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues, shiftX) {
@@ -92,12 +92,12 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
                 dots));
         };
         _this._getCircleVisibilityAndRadius = function (xAxisPoint, legend) {
-            var _a = _this.state, selectedLegend = _a.selectedLegend, activeXdataPoint = _a.activeXdataPoint;
-            if (selectedLegend !== '') {
-                if (xAxisPoint === activeXdataPoint && selectedLegend === legend) {
+            var activeXdataPoint = _this.state.activeXdataPoint;
+            if (!_this._noLegendHighlighted()) {
+                if (xAxisPoint === activeXdataPoint && _this._legendHighlighted(legend)) {
                     return { visibility: CircleVisbility.show, radius: 8 };
                 }
-                else if (selectedLegend === legend) {
+                else if (_this._legendHighlighted(legend)) {
                     // Don't hide the circle to keep it focusable. For more information,
                     // see https://fuzzbomb.github.io/accessibility-demos/visually-hidden-focus-test.html
                     return { visibility: CircleVisbility.show, radius: 0.3 };
@@ -170,7 +170,9 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
                     : _this._createColors()(selectedPoint[0].y)
                 : _this._createColors()(1);
             // there might be no y value of the line for the hovered bar. so we need to check this condition
-            if (_this._isHavingLine && ((_a = selectedPoint[0].lineData) === null || _a === void 0 ? void 0 : _a.y) !== undefined) {
+            if (_this._isHavingLine &&
+                ((_a = selectedPoint[0].lineData) === null || _a === void 0 ? void 0 : _a.y) !== undefined &&
+                (_this._legendHighlighted(lineLegendText) || _this._noLegendHighlighted())) {
                 // callout data for the  line
                 YValueHover.push({
                     legend: lineLegendText,
@@ -180,18 +182,20 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
                     yAxisCalloutData: (_d = selectedPoint[0].lineData) === null || _d === void 0 ? void 0 : _d.yAxisCalloutData,
                 });
             }
-            // callout data for the bar
-            YValueHover.push({
-                legend: selectedPoint[0].legend,
-                y: selectedPoint[0].y,
-                color: enableGradient
-                    ? useSingleColor
-                        ? getNextGradient(0, 0)[0]
-                        : ((_e = selectedPoint[0].gradient) === null || _e === void 0 ? void 0 : _e[0]) || getNextGradient(pointIndex, 0)[0]
-                    : calloutColor,
-                data: selectedPoint[0].yAxisCalloutData,
-                yAxisCalloutData: selectedPoint[0].yAxisCalloutData,
-            });
+            if (_this._legendHighlighted(selectedPoint[0].legend) || _this._noLegendHighlighted()) {
+                // callout data for the bar
+                YValueHover.push({
+                    legend: selectedPoint[0].legend,
+                    y: selectedPoint[0].y,
+                    color: enableGradient
+                        ? useSingleColor
+                            ? getNextGradient(0, 0)[0]
+                            : ((_e = selectedPoint[0].gradient) === null || _e === void 0 ? void 0 : _e[0]) || getNextGradient(pointIndex, 0)[0]
+                        : calloutColor,
+                    data: selectedPoint[0].yAxisCalloutData,
+                    yAxisCalloutData: selectedPoint[0].yAxisCalloutData,
+                });
+            }
             var hoverXValue = point.x instanceof Date ? formatDate(point.x, _this.props.useUTC) : point.x.toString();
             return {
                 YValueHover: YValueHover,
@@ -217,7 +221,7 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
                     _this.setState({
                         refSelected: obj.refElement,
                         /** Show the callout if highlighted bar is focused and Hide it if unhighlighted bar is focused */
-                        isCalloutVisible: _this.state.selectedLegend === '' || _this.state.selectedLegend === point.legend,
+                        isCalloutVisible: _this._noLegendHighlighted() || _this._legendHighlighted(point.legend),
                         calloutLegend: point.legend,
                         dataForHoverCard: point.y,
                         color: point.color || color,
@@ -322,9 +326,6 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
                 var legend = {
                     title: legendTitle,
                     color: color,
-                    action: function () {
-                        _this._onLegendClick(legendTitle);
-                    },
                     hoverAction: function () {
                         _this._handleChartMouseLeave();
                         _this._onLegendHover(legendTitle);
@@ -339,9 +340,6 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
                 var lineLegend = {
                     title: lineLegendText,
                     color: lineLegendColor,
-                    action: function () {
-                        _this._onLegendClick(lineLegendText);
-                    },
                     hoverAction: function () {
                         _this._handleChartMouseLeave();
                         _this._onLegendHover(lineLegendText);
@@ -353,7 +351,7 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
                 };
                 actions.unshift(lineLegend);
             }
-            var legends = (React.createElement(Legends, __assign({ legends: actions, enabledWrapLines: _this.props.enabledLegendsWrapLines, overflowProps: _this.props.legendsOverflowProps, focusZonePropsInHoverCard: _this.props.focusZonePropsForLegendsInHoverCard, overflowText: _this.props.legendsOverflowText }, _this.props.legendProps)));
+            var legends = (React.createElement(Legends, __assign({ legends: actions, enabledWrapLines: _this.props.enabledLegendsWrapLines, overflowProps: _this.props.legendsOverflowProps, focusZonePropsInHoverCard: _this.props.focusZonePropsForLegendsInHoverCard, overflowText: _this.props.legendsOverflowText }, _this.props.legendProps, { onChange: _this._onLegendSelectionChange.bind(_this) })));
             return legends;
         };
         _this._getAxisData = function (yAxisData) {
@@ -370,14 +368,13 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
          * 2. hovering: if there is no selected legend and the user hovers over it
          */
         _this._legendHighlighted = function (legendTitle) {
-            return (_this.state.selectedLegend === legendTitle ||
-                (_this.state.selectedLegend === '' && _this.state.activeLegend === legendTitle));
+            return _this._getHighlightedLegend().includes(legendTitle);
         };
         /**
          * This function checks if none of the legends is selected or hovered.
          */
         _this._noLegendHighlighted = function () {
-            return _this.state.selectedLegend === '' && _this.state.activeLegend === '';
+            return _this._getHighlightedLegend().length === 0;
         };
         _this._getAriaLabel = function (point) {
             var _a, _b, _c;
@@ -441,8 +438,8 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
             dataForHoverCard: 0,
             isCalloutVisible: false,
             refSelected: null,
-            selectedLegend: (_b = (_a = props.legendProps) === null || _a === void 0 ? void 0 : _a.selectedLegend) !== null && _b !== void 0 ? _b : '',
-            activeLegend: '',
+            selectedLegends: ((_a = props.legendProps) === null || _a === void 0 ? void 0 : _a.selectedLegends) || [],
+            activeLegend: undefined,
             xCalloutValue: '',
             yCalloutValue: '',
             activeXdataPoint: null,
@@ -464,10 +461,10 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
         return _this;
     }
     VerticalBarChartBase.prototype.componentDidUpdate = function (prevProps) {
-        var _a, _b, _c, _d;
-        if (((_a = prevProps.legendProps) === null || _a === void 0 ? void 0 : _a.selectedLegend) !== ((_b = this.props.legendProps) === null || _b === void 0 ? void 0 : _b.selectedLegend)) {
+        var _a, _b, _c;
+        if (!areArraysEqual((_a = prevProps.legendProps) === null || _a === void 0 ? void 0 : _a.selectedLegends, (_b = this.props.legendProps) === null || _b === void 0 ? void 0 : _b.selectedLegends)) {
             this.setState({
-                selectedLegend: (_d = (_c = this.props.legendProps) === null || _c === void 0 ? void 0 : _c.selectedLegend) !== null && _d !== void 0 ? _d : '',
+                selectedLegends: ((_c = this.props.legendProps) === null || _c === void 0 ? void 0 : _c.selectedLegends) || [],
             });
         }
     };
@@ -490,7 +487,8 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
             tickValues: this.props.tickValues,
             tickFormat: this.props.tickFormat,
         };
-        return !this._isChartEmpty() ? (React.createElement(CartesianChart, __assign({}, this.props, { chartTitle: this._getChartTitle(), points: this._points, supportNegativeData: this.props.supportNegativeData, chartType: ChartTypes.VerticalBarChart, xAxisType: this._xAxisType, createYAxis: createNumericYAxis, calloutProps: calloutProps, tickParams: tickParams }, (this._isHavingLine && this._noLegendHighlighted() && { isCalloutForStack: true }), { legendBars: legendBars, datasetForXAxisDomain: this._xAxisLabels, barwidth: this._barWidth, focusZoneDirection: FocusZoneDirection.horizontal, customizedCallout: this._getCustomizedCallout(), createStringYAxis: createStringYAxis, getmargins: this._getMargins, getMinMaxOfYAxis: findVerticalNumericMinMaxOfY, getGraphData: this._getGraphData, getDomainNRangeValues: this._getDomainNRangeValues, getAxisData: this._getAxisData, onChartMouseLeave: this._handleChartMouseLeave, getDomainMargins: this._getDomainMargins }, (this._xAxisType === XAxisTypes.StringAxis && {
+        return !this._isChartEmpty() ? (React.createElement(CartesianChart, __assign({}, this.props, { chartTitle: this._getChartTitle(), points: this._points, supportNegativeData: this.props.supportNegativeData, chartType: ChartTypes.VerticalBarChart, xAxisType: this._xAxisType, createYAxis: createNumericYAxis, calloutProps: calloutProps, tickParams: tickParams }, (this._isHavingLine &&
+            (this._noLegendHighlighted() || this._getHighlightedLegend().length > 1) && { isCalloutForStack: true }), { legendBars: legendBars, datasetForXAxisDomain: this._xAxisLabels, barwidth: this._barWidth, focusZoneDirection: FocusZoneDirection.horizontal, customizedCallout: this._getCustomizedCallout(), createStringYAxis: createStringYAxis, getmargins: this._getMargins, getMinMaxOfYAxis: findVerticalNumericMinMaxOfY, getGraphData: this._getGraphData, getDomainNRangeValues: this._getDomainNRangeValues, getAxisData: this._getAxisData, onChartMouseLeave: this._handleChartMouseLeave, getDomainMargins: this._getDomainMargins }, (this._xAxisType === XAxisTypes.StringAxis && {
             xAxisInnerPadding: this._xAxisInnerPadding,
             xAxisOuterPadding: this._xAxisOuterPadding,
         }), { ref: this._cartesianChartRef,
@@ -543,7 +541,7 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
             this.setState({
                 refSelected: mouseEvent,
                 /** Show the callout if highlighted bar is hovered and Hide it if unhighlighted bar is hovered */
-                isCalloutVisible: this.state.selectedLegend === '' || this.state.selectedLegend === point.legend,
+                isCalloutVisible: this._noLegendHighlighted() || this._legendHighlighted(point.legend),
                 dataForHoverCard: point.y,
                 calloutLegend: point.legend,
                 color: point.color || color,
@@ -553,7 +551,7 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
                 yCalloutValue: point.yAxisCalloutData,
                 dataPointCalloutProps: point,
                 // Hovering over a bar should highlight corresponding line points only when no legend is selected
-                activeXdataPoint: this._noLegendHighlighted() ? point.x : null,
+                activeXdataPoint: this._noLegendHighlighted() || this._legendHighlighted(point.legend) ? point.x : null,
                 YValueHover: YValueHover,
                 hoverXValue: hoverXValue,
                 callOutAccessibilityData: point.callOutAccessibilityData,
@@ -805,18 +803,6 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
         }
         return bars;
     };
-    VerticalBarChartBase.prototype._onLegendClick = function (legendTitle) {
-        if (this.state.selectedLegend === legendTitle) {
-            this.setState({
-                selectedLegend: '',
-            });
-        }
-        else {
-            this.setState({
-                selectedLegend: legendTitle,
-            });
-        }
-    };
     VerticalBarChartBase.prototype._onLegendHover = function (legendTitle) {
         this.setState({
             activeLegend: legendTitle,
@@ -824,9 +810,28 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
     };
     VerticalBarChartBase.prototype._onLegendLeave = function () {
         this.setState({
-            activeLegend: '',
+            activeLegend: undefined,
         });
     };
+    VerticalBarChartBase.prototype._onLegendSelectionChange = function (selectedLegends, event, currentLegend) {
+        var _a, _b;
+        if ((_a = this.props.legendProps) === null || _a === void 0 ? void 0 : _a.canSelectMultipleLegends) {
+            this.setState({ selectedLegends: selectedLegends });
+        }
+        else {
+            this.setState({ selectedLegends: selectedLegends.slice(-1) });
+        }
+        if ((_b = this.props.legendProps) === null || _b === void 0 ? void 0 : _b.onChange) {
+            this.props.legendProps.onChange(selectedLegends, event, currentLegend);
+        }
+    };
+    VerticalBarChartBase.prototype._getHighlightedLegend = function () {
+        return this.state.selectedLegends.length > 0
+            ? this.state.selectedLegends
+            : this.state.activeLegend
+                ? [this.state.activeLegend]
+                : [];
+    };
     VerticalBarChartBase.prototype._renderBarLabel = function (xPoint, yPoint, barValue, legend, isNegativeBar) {
         if (this.props.hideLabels ||
             this._barWidth < 16 ||