npm - @fluentui/react-charting - Versions diffs - 5.23.56 → 5.23.57 - Mend

@fluentui/react-charting 5.23.56 → 5.23.57

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

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

@@ -14,6 +14,17 @@ import { GaugeChart } from '../GaugeChart/index';
 import { GroupedVerticalBarChart } from '../GroupedVerticalBarChart/index';
 import { VerticalBarChart } from '../VerticalBarChart/index';
 import { toImage } from './imageExporter';
+import { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer';
+var ResponsiveDonutChart = withResponsiveContainer(DonutChart);
+var ResponsiveVerticalStackedBarChart = withResponsiveContainer(VerticalStackedBarChart);
+var ResponsiveLineChart = withResponsiveContainer(LineChart);
+var ResponsiveHorizontalBarChartWithAxis = withResponsiveContainer(HorizontalBarChartWithAxis);
+var ResponsiveAreaChart = withResponsiveContainer(AreaChart);
+var ResponsiveHeatMapChart = withResponsiveContainer(HeatMapChart);
+var ResponsiveSankeyChart = withResponsiveContainer(SankeyChart);
+var ResponsiveGaugeChart = withResponsiveContainer(GaugeChart);
+var ResponsiveGroupedVerticalBarChart = withResponsiveContainer(GroupedVerticalBarChart);
+var ResponsiveVerticalBarChart = withResponsiveContainer(VerticalBarChart);
 var useColorMapping = function () {
     var colorMap = React.useRef(new Map());
     return colorMap;
@@ -76,7 +87,7 @@ export var DeclarativeChart = React.forwardRef(function (props, forwardedRef) {
         }
         // Unsupported schema, render as VerticalStackedBarChart
         fallbackVSBC = true;
-        return (React.createElement(VerticalStackedBarChart, __assign({}, transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme, fallbackVSBC), commonProps)));
+        return (React.createElement(ResponsiveVerticalStackedBarChart, __assign({}, transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme, fallbackVSBC), commonProps)));
     };
     var exportAsImage = React.useCallback(function (opts) {
         var _a;
@@ -87,18 +98,18 @@ export var DeclarativeChart = React.forwardRef(function (props, forwardedRef) {
     }); }, [exportAsImage]);
     switch (plotlyInput.data[0].type) {
         case 'pie':
-            return React.createElement(DonutChart, __assign({}, transformPlotlyJsonToDonutProps(plotlySchema, colorMap, isDarkTheme), commonProps));
+            return (React.createElement(ResponsiveDonutChart, __assign({}, transformPlotlyJsonToDonutProps(plotlySchema, colorMap, isDarkTheme), commonProps)));
         case 'bar':
             var orientation_1 = plotlyInput.data[0].orientation;
             if (orientation_1 === 'h' && isNumberArray(plotlyInput.data[0].x)) {
-                return (React.createElement(HorizontalBarChartWithAxis, __assign({}, transformPlotlyJsonToHorizontalBarWithAxisProps(plotlySchema, colorMap, isDarkTheme), commonProps)));
+                return (React.createElement(ResponsiveHorizontalBarChartWithAxis, __assign({}, transformPlotlyJsonToHorizontalBarWithAxisProps(plotlySchema, colorMap, isDarkTheme), commonProps)));
             }
             else {
                 var containsLines = plotlyInput.data.some(function (series) { return series.type === 'scatter' || isLineData(series); });
                 if (['group', 'overlay'].includes((_b = plotlySchema === null || plotlySchema === void 0 ? void 0 : plotlySchema.layout) === null || _b === void 0 ? void 0 : _b.barmode) && !containsLines) {
-                    return (React.createElement(GroupedVerticalBarChart, __assign({}, transformPlotlyJsonToGVBCProps(plotlySchema, colorMap, isDarkTheme), commonProps)));
+                    return (React.createElement(ResponsiveGroupedVerticalBarChart, __assign({}, transformPlotlyJsonToGVBCProps(plotlySchema, colorMap, isDarkTheme), commonProps)));
                 }
-                return (React.createElement(VerticalStackedBarChart, __assign({}, transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme), commonProps)));
+                return (React.createElement(ResponsiveVerticalStackedBarChart, __assign({}, transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme), commonProps)));
             }
         case 'scatter':
             if (plotlyInput.data[0].mode === 'markers') {
@@ -107,29 +118,29 @@ export var DeclarativeChart = React.forwardRef(function (props, forwardedRef) {
             var isAreaChart_1 = plotlyInput.data.some(function (series) { return series.fill === 'tonexty' || series.fill === 'tozeroy'; });
             var renderChartJsx = function (chartProps) {
                 if (isAreaChart_1) {
-                    return React.createElement(AreaChart, __assign({}, chartProps));
+                    return React.createElement(ResponsiveAreaChart, __assign({}, chartProps));
                 }
-                return React.createElement(LineChart, __assign({}, chartProps));
+                return React.createElement(ResponsiveLineChart, __assign({}, chartProps));
             };
             return checkAndRenderChart(renderChartJsx, isAreaChart_1);
         case 'heatmap':
-            return React.createElement(HeatMapChart, __assign({}, transformPlotlyJsonToHeatmapProps(plotlySchema), commonProps, { legendProps: {} }));
+            return (React.createElement(ResponsiveHeatMapChart, __assign({}, transformPlotlyJsonToHeatmapProps(plotlySchema), commonProps, { legendProps: {} })));
         case 'sankey':
-            return (React.createElement(SankeyChart, __assign({}, transformPlotlyJsonToSankeyProps(plotlySchema, colorMap, isDarkTheme), commonProps)));
+            return (React.createElement(ResponsiveSankeyChart, __assign({}, transformPlotlyJsonToSankeyProps(plotlySchema, colorMap, isDarkTheme), commonProps)));
         case 'indicator':
         case 'gauge':
             if (((_g = (_f = (_e = plotlyInput.data) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.mode) === null || _g === void 0 ? void 0 : _g.includes('gauge')) || ((_j = (_h = plotlyInput.data) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.type) === 'gauge') {
-                return (React.createElement(GaugeChart, __assign({}, transformPlotlyJsonToGaugeProps(plotlySchema, colorMap, isDarkTheme), commonProps)));
+                return (React.createElement(ResponsiveGaugeChart, __assign({}, transformPlotlyJsonToGaugeProps(plotlySchema, colorMap, isDarkTheme), commonProps)));
             }
             throw new Error("Unsupported chart - type: ".concat((_k = plotlyInput.data[0]) === null || _k === void 0 ? void 0 : _k.type, ", mode: ").concat((_l = plotlyInput.data[0]) === null || _l === void 0 ? void 0 : _l.mode));
         case 'histogram':
-            return (React.createElement(VerticalBarChart, __assign({}, transformPlotlyJsonToVBCProps(plotlySchema, colorMap, isDarkTheme), commonProps)));
+            return (React.createElement(ResponsiveVerticalBarChart, __assign({}, transformPlotlyJsonToVBCProps(plotlySchema, colorMap, isDarkTheme), commonProps)));
         default:
             var xValues = plotlyInput.data[0].x;
             var yValues = plotlyInput.data[0].y;
             if (xValues && yValues && xValues.length > 0 && yValues.length > 0) {
                 var renderLineChartJsx = function (chartProps) {
-                    return React.createElement(LineChart, __assign({}, chartProps));
+                    return React.createElement(ResponsiveLineChart, __assign({}, chartProps));
                 };
                 return checkAndRenderChart(renderLineChartJsx);
             }

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 /\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 { PlotData, PlotlySchema } from './PlotlySchema';\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 isLineData,\n} from './PlotlySchemaAdapter';\nimport { LineChart, ILineChartProps } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart, IAreaChartProps } 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 // eslint-disable-next-line @typescript-eslint/no-explicit-any\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 plotlyInput = plotlySchema as PlotlySchema;\n let { selectedLegends } = plotlySchema;\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: { plotlyInput, 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 multiSelectLegendProps = {\n canSelectMultipleLegends: true,\n onChange: onActiveLegendsChange,\n selectedLegends: activeLegends,\n };\n\n const commonProps = {\n legendProps: multiSelectLegendProps,\n componentRef: chartRef,\n calloutProps: { layerProps: { eventBubblingEnabled: true } },\n };\n\n const checkAndRenderChart = (\n renderChartJsx: (chartProps: ILineChartProps \| IAreaChartProps) => JSX.Element,\n isAreaChart: boolean = false,\n ) => {\n let fallbackVSBC = false;\n const xValues = (plotlyInput.data[0] as PlotData).x;\n const isXDate = isDateArray(xValues);\n const isXNumber = isNumberArray(xValues);\n const isXMonth = isMonthArray(xValues);\n if (isXDate \|\| isXNumber) {\n const chartProps: ILineChartProps \| IAreaChartProps = {\n ...transformPlotlyJsonToScatterChartProps(\n { data: plotlyInput.data, layout: plotlyInput.layout },\n isAreaChart,\n colorMap,\n isDarkTheme,\n ),\n ...commonProps,\n };\n return renderChartJsx(chartProps);\n } else if (isXMonth) {\n const updatedData = plotlyInput.data.map((dataPoint: PlotData) => ({\n ...dataPoint,\n x: updateXValues(dataPoint.x),\n }));\n const chartProps: ILineChartProps \| IAreaChartProps = {\n ...transformPlotlyJsonToScatterChartProps(\n { data: updatedData, layout: plotlyInput.layout },\n isAreaChart,\n colorMap,\n isDarkTheme,\n ),\n ...commonProps,\n };\n return renderChartJsx(chartProps);\n }\n // Unsupported schema, render as VerticalStackedBarChart\n fallbackVSBC = true;\n return (\n <VerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme, fallbackVSBC)}\n {...commonProps}\n />\n );\n };\n\n const exportAsImage = React.useCallback(\n (opts?: IImageExportOptions) => {\n return toImage(chartRef.current?.chartContainer, {\n background: theme.semanticColors.bodyBackground,\n scale: 5,\n ...opts,\n });\n },\n [theme],\n );\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n exportAsImage,\n }),\n [exportAsImage],\n );\n\n switch (plotlyInput.data[0].type) {\n case 'pie':\n return <DonutChart {...transformPlotlyJsonToDonutProps(plotlySchema, colorMap, isDarkTheme)} {...commonProps} />;\n case 'bar':\n const orientation = plotlyInput.data[0].orientation;\n if (orientation === 'h' && isNumberArray((plotlyInput.data[0] as PlotData).x)) {\n return (\n <HorizontalBarChartWithAxis\n {...transformPlotlyJsonToHorizontalBarWithAxisProps(plotlySchema, colorMap, isDarkTheme)}\n {...commonProps}\n />\n );\n } else {\n const containsLines = plotlyInput.data.some(\n series => series.type === 'scatter' \|\| isLineData(series as Partial<PlotData>),\n );\n if (['group', 'overlay'].includes(plotlySchema?.layout?.barmode) && !containsLines) {\n return (\n <GroupedVerticalBarChart\n {...transformPlotlyJsonToGVBCProps(plotlySchema, colorMap, isDarkTheme)}\n {...commonProps}\n />\n );\n }\n return (\n <VerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme)}\n {...commonProps}\n />\n );\n }\n case 'scatter':\n if (plotlyInput.data[0].mode === 'markers') {\n throw new Error(`Unsupported chart - type :${plotlyInput.data[0]?.type}, mode: ${plotlyInput.data[0]?.mode}`);\n }\n const isAreaChart = plotlyInput.data.some(\n (series: PlotData) => series.fill === 'tonexty' \|\| series.fill === 'tozeroy',\n );\n const renderChartJsx = (chartProps: ILineChartProps \| IAreaChartProps) => {\n if (isAreaChart) {\n return <AreaChart {...chartProps} />;\n }\n return <LineChart {...chartProps} />;\n };\n return checkAndRenderChart(renderChartJsx, isAreaChart);\n case 'heatmap':\n return <HeatMapChart {...transformPlotlyJsonToHeatmapProps(plotlySchema)} {...commonProps} legendProps={{}} />;\n case 'sankey':\n return (\n <SankeyChart {...transformPlotlyJsonToSankeyProps(plotlySchema, colorMap, isDarkTheme)} {...commonProps} />\n );\n case 'indicator':\n case 'gauge':\n if (plotlyInput.data?.[0]?.mode?.includes('gauge') \|\| plotlyInput.data?.[0]?.type === 'gauge') {\n return (\n <GaugeChart {...transformPlotlyJsonToGaugeProps(plotlySchema, colorMap, isDarkTheme)} {...commonProps} />\n );\n }\n throw new Error(`Unsupported chart - type: ${plotlyInput.data[0]?.type}, mode: ${plotlyInput.data[0]?.mode}`);\n case 'histogram':\n return (\n <VerticalBarChart {...transformPlotlyJsonToVBCProps(plotlySchema, colorMap, isDarkTheme)} {...commonProps} />\n );\n default:\n const xValues = (plotlyInput.data[0] as PlotData).x;\n const yValues = (plotlyInput.data[0] as PlotData).y;\n if (xValues && yValues && xValues.length > 0 && yValues.length > 0) {\n const renderLineChartJsx = (chartProps: ILineChartProps) => {\n return <LineChart {...chartProps} />;\n };\n return checkAndRenderChart(renderLineChartJsx);\n }\n throw new Error(`Unsupported chart type :${plotlyInput.data[0]?.type}`);\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 /\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 { PlotData, PlotlySchema } from './PlotlySchema';\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 isLineData,\n} from './PlotlySchemaAdapter';\nimport { LineChart, ILineChartProps } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart, IAreaChartProps } 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';\nimport { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer';\n\nconst ResponsiveDonutChart = withResponsiveContainer(DonutChart);\nconst ResponsiveVerticalStackedBarChart = withResponsiveContainer(VerticalStackedBarChart);\nconst ResponsiveLineChart = withResponsiveContainer(LineChart);\nconst ResponsiveHorizontalBarChartWithAxis = withResponsiveContainer(HorizontalBarChartWithAxis);\nconst ResponsiveAreaChart = withResponsiveContainer(AreaChart);\nconst ResponsiveHeatMapChart = withResponsiveContainer(HeatMapChart);\nconst ResponsiveSankeyChart = withResponsiveContainer(SankeyChart);\nconst ResponsiveGaugeChart = withResponsiveContainer(GaugeChart);\nconst ResponsiveGroupedVerticalBarChart = withResponsiveContainer(GroupedVerticalBarChart);\nconst ResponsiveVerticalBarChart = withResponsiveContainer(VerticalBarChart);\n\n/*\n DeclarativeChart schema.\n * {@docCategory DeclarativeChart}\n /\nexport interface Schema {\n /\n Plotly schema represented as JSON object\n /\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\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 plotlyInput = plotlySchema as PlotlySchema;\n let { selectedLegends } = plotlySchema;\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: { plotlyInput, 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 multiSelectLegendProps = {\n canSelectMultipleLegends: true,\n onChange: onActiveLegendsChange,\n selectedLegends: activeLegends,\n };\n\n const commonProps = {\n legendProps: multiSelectLegendProps,\n componentRef: chartRef,\n calloutProps: { layerProps: { eventBubblingEnabled: true } },\n };\n\n const checkAndRenderChart = (\n renderChartJsx: (chartProps: ILineChartProps \| IAreaChartProps) => JSX.Element,\n isAreaChart: boolean = false,\n ) => {\n let fallbackVSBC = false;\n const xValues = (plotlyInput.data[0] as PlotData).x;\n const isXDate = isDateArray(xValues);\n const isXNumber = isNumberArray(xValues);\n const isXMonth = isMonthArray(xValues);\n if (isXDate \|\| isXNumber) {\n const chartProps: ILineChartProps \| IAreaChartProps = {\n ...transformPlotlyJsonToScatterChartProps(\n { data: plotlyInput.data, layout: plotlyInput.layout },\n isAreaChart,\n colorMap,\n isDarkTheme,\n ),\n ...commonProps,\n };\n return renderChartJsx(chartProps);\n } else if (isXMonth) {\n const updatedData = plotlyInput.data.map((dataPoint: PlotData) => ({\n ...dataPoint,\n x: updateXValues(dataPoint.x),\n }));\n const chartProps: ILineChartProps \| IAreaChartProps = {\n ...transformPlotlyJsonToScatterChartProps(\n { data: updatedData, layout: plotlyInput.layout },\n isAreaChart,\n colorMap,\n isDarkTheme,\n ),\n ...commonProps,\n };\n return renderChartJsx(chartProps);\n }\n // Unsupported schema, render as VerticalStackedBarChart\n fallbackVSBC = true;\n return (\n <ResponsiveVerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme, fallbackVSBC)}\n {...commonProps}\n />\n );\n };\n\n const exportAsImage = React.useCallback(\n (opts?: IImageExportOptions) => {\n return toImage(chartRef.current?.chartContainer, {\n background: theme.semanticColors.bodyBackground,\n scale: 5,\n ...opts,\n });\n },\n [theme],\n );\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n exportAsImage,\n }),\n [exportAsImage],\n );\n\n switch (plotlyInput.data[0].type) {\n case 'pie':\n return (\n <ResponsiveDonutChart\n {...transformPlotlyJsonToDonutProps(plotlySchema, colorMap, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'bar':\n const orientation = plotlyInput.data[0].orientation;\n if (orientation === 'h' && isNumberArray((plotlyInput.data[0] as PlotData).x)) {\n return (\n <ResponsiveHorizontalBarChartWithAxis\n {...transformPlotlyJsonToHorizontalBarWithAxisProps(plotlySchema, colorMap, isDarkTheme)}\n {...commonProps}\n />\n );\n } else {\n const containsLines = plotlyInput.data.some(\n series => series.type === 'scatter' \|\| isLineData(series as Partial<PlotData>),\n );\n if (['group', 'overlay'].includes(plotlySchema?.layout?.barmode) && !containsLines) {\n return (\n <ResponsiveGroupedVerticalBarChart\n {...transformPlotlyJsonToGVBCProps(plotlySchema, colorMap, isDarkTheme)}\n {...commonProps}\n />\n );\n }\n return (\n <ResponsiveVerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme)}\n {...commonProps}\n />\n );\n }\n case 'scatter':\n if (plotlyInput.data[0].mode === 'markers') {\n throw new Error(`Unsupported chart - type :${plotlyInput.data[0]?.type}, mode: ${plotlyInput.data[0]?.mode}`);\n }\n const isAreaChart = plotlyInput.data.some(\n (series: PlotData) => series.fill === 'tonexty' \|\| series.fill === 'tozeroy',\n );\n const renderChartJsx = (chartProps: ILineChartProps \| IAreaChartProps) => {\n if (isAreaChart) {\n return <ResponsiveAreaChart {...chartProps} />;\n }\n return <ResponsiveLineChart {...chartProps} />;\n };\n return checkAndRenderChart(renderChartJsx, isAreaChart);\n case 'heatmap':\n return (\n <ResponsiveHeatMapChart\n {...transformPlotlyJsonToHeatmapProps(plotlySchema)}\n {...commonProps}\n legendProps={{}}\n />\n );\n case 'sankey':\n return (\n <ResponsiveSankeyChart\n {...transformPlotlyJsonToSankeyProps(plotlySchema, colorMap, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'indicator':\n case 'gauge':\n if (plotlyInput.data?.[0]?.mode?.includes('gauge') \|\| plotlyInput.data?.[0]?.type === 'gauge') {\n return (\n <ResponsiveGaugeChart\n {...transformPlotlyJsonToGaugeProps(plotlySchema, colorMap, isDarkTheme)}\n {...commonProps}\n />\n );\n }\n throw new Error(`Unsupported chart - type: ${plotlyInput.data[0]?.type}, mode: ${plotlyInput.data[0]?.mode}`);\n case 'histogram':\n return (\n <ResponsiveVerticalBarChart\n {...transformPlotlyJsonToVBCProps(plotlySchema, colorMap, isDarkTheme)}\n {...commonProps}\n />\n );\n default:\n const xValues = (plotlyInput.data[0] as PlotData).x;\n const yValues = (plotlyInput.data[0] as PlotData).y;\n if (xValues && yValues && xValues.length > 0 && yValues.length > 0) {\n const renderLineChartJsx = (chartProps: ILineChartProps) => {\n return <ResponsiveLineChart {...chartProps} />;\n };\n return checkAndRenderChart(renderLineChartJsx);\n }\n throw new Error(`Unsupported chart type :${plotlyInput.data[0]?.type}`);\n }\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\n"]}

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

@@ -189,7 +189,7 @@ var getSecondaryYAxisValues = function (series, layout) {
     return secondaryYAxisValues;
 };
 export var transformPlotlyJsonToDonutProps = function (input, colorMap, isDarkTheme) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     var firstData = input.data[0];
     var donutData = (_a = firstData.labels) === null || _a === void 0 ? void 0 : _a.map(function (label, index) {
         var _a;
@@ -217,7 +217,7 @@ export var transformPlotlyJsonToDonutProps = function (input, colorMap, isDarkTh
             chartData: donutData,
         },
         hideLegend: ((_f = input.layout) === null || _f === void 0 ? void 0 : _f.showlegend) === false ? true : false,
-        width: width,
+        width: (_g = input.layout) === null || _g === void 0 ? void 0 : _g.width,
         height: height,
         innerRadius: innerRadius,
         hideLabels: hideLabels,
@@ -225,6 +225,7 @@ export var transformPlotlyJsonToDonutProps = function (input, colorMap, isDarkTh
     };
 };
 export var transformPlotlyJsonToVSBCProps = function (input, colorMap, isDarkTheme, fallbackVSBC) {
+    var _a, _b, _c;
     var mapXToDataPoints = {};
     var yMaxValue = 0;
     var secondaryYAxisValues = {};
@@ -259,11 +260,11 @@ export var transformPlotlyJsonToVSBCProps = function (input, colorMap, isDarkThe
         });
         secondaryYAxisValues = getSecondaryYAxisValues(series, input.layout);
     });
-    var _a = getTitles(input.layout), chartTitle = _a.chartTitle, xAxisTitle = _a.xAxisTitle, yAxisTitle = _a.yAxisTitle;
+    var _d = getTitles(input.layout), chartTitle = _d.chartTitle, xAxisTitle = _d.xAxisTitle, yAxisTitle = _d.yAxisTitle;
     return {
         data: Object.values(mapXToDataPoints),
-        // width: layout?.width,
-        // height: layout?.height,
+        width: (_a = input.layout) === null || _a === void 0 ? void 0 : _a.width,
+        height: (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350,
         barWidth: 'auto',
         yMaxValue: yMaxValue,
         chartTitle: chartTitle,
@@ -276,6 +277,7 @@ export var transformPlotlyJsonToVSBCProps = function (input, colorMap, isDarkThe
     };
 };
 export var transformPlotlyJsonToGVBCProps = function (input, colorMap, isDarkTheme) {
+    var _a, _b, _c;
     var mapXToDataPoints = {};
     var secondaryYAxisValues = {};
     input.data.forEach(function (series, index1) {
@@ -303,11 +305,11 @@ export var transformPlotlyJsonToGVBCProps = function (input, colorMap, isDarkThe
         });
         secondaryYAxisValues = getSecondaryYAxisValues(series, input.layout);
     });
-    var _a = getTitles(input.layout), chartTitle = _a.chartTitle, xAxisTitle = _a.xAxisTitle, yAxisTitle = _a.yAxisTitle;
+    var _d = getTitles(input.layout), chartTitle = _d.chartTitle, xAxisTitle = _d.xAxisTitle, yAxisTitle = _d.yAxisTitle;
     return {
         data: Object.values(mapXToDataPoints),
-        // width: layout?.width,
-        // height: layout?.height,
+        width: (_a = input.layout) === null || _a === void 0 ? void 0 : _a.width,
+        height: (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350,
         barwidth: 'auto',
         chartTitle: chartTitle,
         xAxisTitle: xAxisTitle,
@@ -319,6 +321,7 @@ export var transformPlotlyJsonToGVBCProps = function (input, colorMap, isDarkThe
     };
 };
 export var transformPlotlyJsonToVBCProps = function (input, colorMap, isDarkTheme) {
+    var _a, _b, _c;
     var vbcData = [];
     input.data.forEach(function (series, index) {
         var _a, _b, _c;
@@ -386,11 +389,11 @@ export var transformPlotlyJsonToVBCProps = function (input, colorMap, isDarkThem
             });
         });
     });
-    var _a = getTitles(input.layout), chartTitle = _a.chartTitle, xAxisTitle = _a.xAxisTitle, yAxisTitle = _a.yAxisTitle;
+    var _d = getTitles(input.layout), chartTitle = _d.chartTitle, xAxisTitle = _d.xAxisTitle, yAxisTitle = _d.yAxisTitle;
     return {
         data: vbcData,
-        // width: layout?.width,
-        // height: layout?.height,
+        width: (_a = input.layout) === null || _a === void 0 ? void 0 : _a.width,
+        height: (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350,
         supportNegativeData: true,
         chartTitle: chartTitle,
         xAxisTitle: xAxisTitle,
@@ -400,6 +403,7 @@ export var transformPlotlyJsonToVBCProps = function (input, colorMap, isDarkThem
     };
 };
 export var transformPlotlyJsonToScatterChartProps = function (input, isAreaChart, colorMap, isDarkTheme) {
+    var _a, _b, _c, _d, _e, _f;
     var secondaryYAxisValues = {};
     var mode = 'tonexty';
     var chartData = input.data.map(function (series, index) {
@@ -421,7 +425,7 @@ export var transformPlotlyJsonToScatterChartProps = function (input, isAreaChart
             }); }), color: lineColor });
     });
     var yMinMaxValues = findNumericMinMaxOfY(chartData);
-    var _a = getTitles(input.layout), chartTitle = _a.chartTitle, xAxisTitle = _a.xAxisTitle, yAxisTitle = _a.yAxisTitle;
+    var _g = getTitles(input.layout), chartTitle = _g.chartTitle, xAxisTitle = _g.xAxisTitle, yAxisTitle = _g.yAxisTitle;
     var chartProps = {
         chartTitle: chartTitle,
         lineChartData: chartData,
@@ -435,6 +439,8 @@ export var transformPlotlyJsonToScatterChartProps = function (input, isAreaChart
             secondaryYAxistitle: secondaryYAxisValues.secondaryYAxistitle,
             secondaryYScaleOptions: secondaryYAxisValues.secondaryYScaleOptions,
             mode: mode,
+            width: (_a = input.layout) === null || _a === void 0 ? void 0 : _a.width,
+            height: (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350,
             hideTickOverlap: true,
         };
     }
@@ -449,12 +455,15 @@ export var transformPlotlyJsonToScatterChartProps = function (input, isAreaChart
             roundedTicks: true,
             yMinValue: yMinMaxValues.startValue,
             yMaxValue: yMinMaxValues.endValue,
+            width: (_d = input.layout) === null || _d === void 0 ? void 0 : _d.width,
+            height: (_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.height) !== null && _f !== void 0 ? _f : 350,
             hideTickOverlap: true,
+            enableReflow: false,
         };
     }
 };
 export var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, colorMap, isDarkTheme) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
     var chartData = input.data
         .map(function (series, index) {
         invalidate2Dseries(series, 'HBC');
@@ -479,7 +488,7 @@ export var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, co
     var scalingFactor = 0.01;
     var gapFactor = 1 / (1 + scalingFactor * numberOfBars);
     var barHeight = availableHeight / (numberOfBars * (1 + gapFactor));
-    var _t = getTitles(input.layout), chartTitle = _t.chartTitle, xAxisTitle = _t.xAxisTitle, yAxisTitle = _t.yAxisTitle;
+    var _s = getTitles(input.layout), chartTitle = _s.chartTitle, xAxisTitle = _s.xAxisTitle, yAxisTitle = _s.yAxisTitle;
     return {
         data: chartData,
         chartTitle: chartTitle,
@@ -490,17 +499,13 @@ export var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, co
             : ((_q = (_p = (_o = input.layout) === null || _o === void 0 ? void 0 : _o.yaxis2) === null || _p === void 0 ? void 0 : _p.title) === null || _q === void 0 ? void 0 : _q.text) || '',
         barHeight: barHeight,
         showYAxisLables: true,
-        styles: {
-            root: {
-                height: chartHeight,
-                width: (_s = (_r = input.layout) === null || _r === void 0 ? void 0 : _r.width) !== null && _s !== void 0 ? _s : 600,
-            },
-        },
+        height: chartHeight,
+        width: (_r = input.layout) === null || _r === void 0 ? void 0 : _r.width,
         hideTickOverlap: true,
     };
 };
 export var transformPlotlyJsonToHeatmapProps = function (input) {
-    var _a;
+    var _a, _b, _c, _d;
     var firstData = input.data[0];
     var heatmapDataPoints = [];
     var zMin = Number.POSITIVE_INFINITY;
@@ -540,7 +545,7 @@ export var transformPlotlyJsonToHeatmapProps = function (input) {
     var rangeValuesForColorScale = Array.isArray(firstData.colorscale)
         ? firstData.colorscale.map(function (arr) { return arr[1]; })
         : defaultRange;
-    var _b = getTitles(input.layout), chartTitle = _b.chartTitle, xAxisTitle = _b.xAxisTitle, yAxisTitle = _b.yAxisTitle;
+    var _e = getTitles(input.layout), chartTitle = _e.chartTitle, xAxisTitle = _e.xAxisTitle, yAxisTitle = _e.yAxisTitle;
     return {
         data: [heatmapData],
         domainValuesForColorScale: domainValuesForColorScale,
@@ -551,12 +556,14 @@ export var transformPlotlyJsonToHeatmapProps = function (input) {
         xAxisTitle: xAxisTitle,
         yAxisTitle: yAxisTitle,
         sortOrder: 'none',
+        width: (_b = input.layout) === null || _b === void 0 ? void 0 : _b.width,
+        height: (_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 350,
         hideTickOverlap: true,
     };
 };
 export var transformPlotlyJsonToSankeyProps = function (input, colorMap, isDarkTheme) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    var _k = input.data[0], link = _k.link, node = _k.node;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _j = input.data[0], link = _j.link, node = _j.node;
     var validLinks = ((_a = link === null || link === void 0 ? void 0 : link.value) !== null && _a !== void 0 ? _a : [])
         .map(function (val, index) { return ({
         value: val,
@@ -579,27 +586,23 @@ export var transformPlotlyJsonToSankeyProps = function (input, colorMap, isDarkT
             return __assign({}, validLink);
         }),
     };
-    var width = (_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.width) !== null && _d !== void 0 ? _d : 440;
-    var height = (_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.height) !== null && _f !== void 0 ? _f : 220;
     var styles = {
-        root: __assign({}, (((_h = (_g = input.layout) === null || _g === void 0 ? void 0 : _g.font) === null || _h === void 0 ? void 0 : _h.size) ? { fontSize: (_j = input.layout.font) === null || _j === void 0 ? void 0 : _j.size } : {})),
+        root: __assign({}, (((_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.font) === null || _d === void 0 ? void 0 : _d.size) ? { fontSize: (_e = input.layout.font) === null || _e === void 0 ? void 0 : _e.size } : {})),
     };
-    var shouldResize = width + height;
     var chartTitle = getTitles(input.layout).chartTitle;
     return {
         data: {
             chartTitle: chartTitle,
             SankeyChartData: sankeyChartData,
         },
-        width: width,
-        height: height,
+        width: (_f = input.layout) === null || _f === void 0 ? void 0 : _f.width,
+        height: (_h = (_g = input.layout) === null || _g === void 0 ? void 0 : _g.height) !== null && _h !== void 0 ? _h : 468,
         styles: styles,
-        shouldResize: shouldResize,
         enableReflow: true,
     };
 };
 export var transformPlotlyJsonToGaugeProps = function (input, colorMap, isDarkTheme) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6;
     var firstData = input.data[0];
     var segments = ((_b = (_a = firstData.gauge) === null || _a === void 0 ? void 0 : _a.steps) === null || _b === void 0 ? void 0 : _b.length)
         ? firstData.gauge.steps.map(function (step, index) {
@@ -654,10 +657,10 @@ export var transformPlotlyJsonToGaugeProps = function (input, colorMap, isDarkTh
         minValue: typeof ((_s = (_r = (_q = firstData.gauge) === null || _q === void 0 ? void 0 : _q.axis) === null || _r === void 0 ? void 0 : _r.range) === null || _s === void 0 ? void 0 : _s[0]) === 'number' ? (_v = (_u = (_t = firstData.gauge) === null || _t === void 0 ? void 0 : _t.axis) === null || _u === void 0 ? void 0 : _u.range) === null || _v === void 0 ? void 0 : _v[0] : undefined,
         maxValue: typeof ((_y = (_x = (_w = firstData.gauge) === null || _w === void 0 ? void 0 : _w.axis) === null || _x === void 0 ? void 0 : _x.range) === null || _y === void 0 ? void 0 : _y[1]) === 'number' ? (_1 = (_0 = (_z = firstData.gauge) === null || _z === void 0 ? void 0 : _z.axis) === null || _0 === void 0 ? void 0 : _0.range) === null || _1 === void 0 ? void 0 : _1[1] : undefined,
         chartValueFormat: function () { var _a, _b; return (_b = (_a = firstData.value) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : ''; },
-        width: (_3 = (_2 = input.layout) === null || _2 === void 0 ? void 0 : _2.width) !== null && _3 !== void 0 ? _3 : 440,
-        height: (_5 = (_4 = input.layout) === null || _4 === void 0 ? void 0 : _4.height) !== null && _5 !== void 0 ? _5 : 220,
+        width: (_2 = input.layout) === null || _2 === void 0 ? void 0 : _2.width,
+        height: (_4 = (_3 = input.layout) === null || _3 === void 0 ? void 0 : _3.height) !== null && _4 !== void 0 ? _4 : 220,
         styles: styles,
-        variant: ((_7 = (_6 = firstData.gauge) === null || _6 === void 0 ? void 0 : _6.steps) === null || _7 === void 0 ? void 0 : _7.length) ? GaugeChartVariant.MultipleSegments : GaugeChartVariant.SingleSegment,
+        variant: ((_6 = (_5 = firstData.gauge) === null || _5 === void 0 ? void 0 : _5.steps) === null || _6 === void 0 ? void 0 : _6.length) ? GaugeChartVariant.MultipleSegments : GaugeChartVariant.SingleSegment,
     };
 };
 var MAX_DEPTH = 15;