@fluentui/react-charting 5.23.63 → 5.23.65

package/lib-amd/components/DeclarativeChart/DeclarativeChart.js

@@ -0,0 +1,133 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react", "../DonutChart/index", "../VerticalStackedBarChart/index", "@fluentui/chart-utilities", "./PlotlySchemaAdapter", "../LineChart/index", "../HorizontalBarChartWithAxis/index", "../AreaChart/index", "../HeatMapChart/index", "../SankeyChart/SankeyChart", "../GaugeChart/index", "../GroupedVerticalBarChart/index", "../VerticalBarChart/index", "../ResponsiveContainer/withResponsiveContainer"], function (require, exports, tslib_1, React, react_1, index_1, index_2, chart_utilities_1, PlotlySchemaAdapter_1, index_3, index_4, index_5, index_6, SankeyChart_1, index_7, index_8, index_9, withResponsiveContainer_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.DeclarativeChart = void 0;
+    var ResponsiveDonutChart = (0, withResponsiveContainer_1.withResponsiveContainer)(index_1.DonutChart);
+    var ResponsiveVerticalStackedBarChart = (0, withResponsiveContainer_1.withResponsiveContainer)(index_2.VerticalStackedBarChart);
+    var ResponsiveLineChart = (0, withResponsiveContainer_1.withResponsiveContainer)(index_3.LineChart);
+    var ResponsiveHorizontalBarChartWithAxis = (0, withResponsiveContainer_1.withResponsiveContainer)(index_4.HorizontalBarChartWithAxis);
+    var ResponsiveAreaChart = (0, withResponsiveContainer_1.withResponsiveContainer)(index_5.AreaChart);
+    var ResponsiveHeatMapChart = (0, withResponsiveContainer_1.withResponsiveContainer)(index_6.HeatMapChart);
+    var ResponsiveSankeyChart = (0, withResponsiveContainer_1.withResponsiveContainer)(SankeyChart_1.SankeyChart);
+    var ResponsiveGaugeChart = (0, withResponsiveContainer_1.withResponsiveContainer)(index_7.GaugeChart);
+    var ResponsiveGroupedVerticalBarChart = (0, withResponsiveContainer_1.withResponsiveContainer)(index_8.GroupedVerticalBarChart);
+    var ResponsiveVerticalBarChart = (0, withResponsiveContainer_1.withResponsiveContainer)(index_9.VerticalBarChart);
+    var useColorMapping = function () {
+        var colorMap = React.useRef(new Map());
+        return colorMap;
+    };
+    /**
+     * DeclarativeChart component.
+     * {@docCategory DeclarativeChart}
+     */
+    exports.DeclarativeChart = React.forwardRef(function (props, forwardedRef) {
+        var _a, _b;
+        var plotlySchema = (0, chart_utilities_1.sanitizeJson)(props.chartSchema).plotlySchema;
+        var chart = (0, chart_utilities_1.mapFluentChart)(plotlySchema);
+        if (!chart.isValid) {
+            throw new Error("Invalid chart schema: ".concat(chart.errorMessage));
+        }
+        var plotlyInput = plotlySchema;
+        var selectedLegends = plotlySchema.selectedLegends;
+        var colorMap = useColorMapping();
+        var theme = (0, react_1.useTheme)();
+        var isDarkTheme = (_a = theme === null || theme === void 0 ? void 0 : theme.isInverted) !== null && _a !== void 0 ? _a : false;
+        var chartRef = React.useRef(null);
+        if (!(0, chart_utilities_1.isArrayOrTypedArray)(selectedLegends)) {
+            selectedLegends = [];
+        }
+        var _c = React.useState(selectedLegends), activeLegends = _c[0], setActiveLegends = _c[1];
+        var onActiveLegendsChange = function (keys) {
+            setActiveLegends(keys);
+            if (props.onSchemaChange) {
+                props.onSchemaChange({ plotlySchema: { plotlyInput: plotlyInput, selectedLegends: keys } });
+            }
+        };
+        React.useEffect(function () {
+            // eslint-disable-next-line @typescript-eslint/no-shadow
+            var plotlySchema = (0, chart_utilities_1.sanitizeJson)(props.chartSchema).plotlySchema;
+            // eslint-disable-next-line @typescript-eslint/no-shadow
+            var selectedLegends = plotlySchema.selectedLegends;
+            setActiveLegends(selectedLegends !== null && selectedLegends !== void 0 ? selectedLegends : []);
+        }, [props.chartSchema]);
+        var multiSelectLegendProps = {
+            canSelectMultipleLegends: true,
+            onChange: onActiveLegendsChange,
+            selectedLegends: activeLegends,
+        };
+        var commonProps = {
+            legendProps: multiSelectLegendProps,
+            componentRef: chartRef,
+            calloutProps: { layerProps: { eventBubblingEnabled: true } },
+        };
+        var renderLineArea = function (plotlyData, isAreaChart) {
+            var _a, _b;
+            var isScatterMarkers = (_b = (_a = plotlyData[0]) === null || _a === void 0 ? void 0 : _a.mode) === null || _b === void 0 ? void 0 : _b.includes('markers');
+            var chartProps = tslib_1.__assign(tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToScatterChartProps)({ data: plotlyData, layout: plotlyInput.layout }, isAreaChart, colorMap, isDarkTheme)), commonProps);
+            if (isAreaChart) {
+                return React.createElement(ResponsiveAreaChart, tslib_1.__assign({}, chartProps));
+            }
+            return React.createElement(ResponsiveLineChart, tslib_1.__assign({}, chartProps, { lineMode: isScatterMarkers ? 'scatter' : 'default' }));
+        };
+        var checkAndRenderChart = function (isAreaChart) {
+            if (isAreaChart === void 0) { isAreaChart = false; }
+            var fallbackVSBC = false;
+            var xValues = plotlyInput.data[0].x;
+            var isXDate = (0, chart_utilities_1.isDateArray)(xValues);
+            var isXNumber = (0, chart_utilities_1.isNumberArray)(xValues);
+            var isXMonth = (0, PlotlySchemaAdapter_1.isMonthArray)(xValues);
+            if (isXDate || isXNumber) {
+                return renderLineArea(plotlyInput.data, isAreaChart);
+            }
+            else if (isXMonth) {
+                var updatedData = plotlyInput.data.map(function (dataPoint) { return (tslib_1.__assign(tslib_1.__assign({}, dataPoint), { x: (0, PlotlySchemaAdapter_1.correctYearMonth)(dataPoint.x) })); });
+                return renderLineArea(updatedData, isAreaChart);
+            }
+            // Unsupported schema, render as VerticalStackedBarChart
+            fallbackVSBC = true;
+            return (React.createElement(ResponsiveVerticalStackedBarChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToVSBCProps)(plotlyInput, colorMap, isDarkTheme, fallbackVSBC), commonProps)));
+        };
+        var exportAsImage = React.useCallback(function (opts) {
+            return new Promise(function (resolve, reject) {
+                if (!chartRef.current || typeof chartRef.current.toImage !== 'function') {
+                    return reject(Error('Chart cannot be exported as image'));
+                }
+                chartRef.current
+                    .toImage(tslib_1.__assign({ background: theme.semanticColors.bodyBackground, scale: 5 }, opts))
+                    .then(resolve)
+                    .catch(reject);
+            });
+        }, [theme]);
+        React.useImperativeHandle(props.componentRef, function () { return ({
+            exportAsImage: exportAsImage,
+        }); }, [exportAsImage]);
+        switch (chart.type) {
+            case 'donut':
+                return (React.createElement(ResponsiveDonutChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToDonutProps)(plotlyInput, colorMap, isDarkTheme), commonProps)));
+            case 'horizontalbar':
+                return (React.createElement(ResponsiveHorizontalBarChartWithAxis, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToHorizontalBarWithAxisProps)(plotlyInput, colorMap, isDarkTheme), commonProps)));
+            case 'groupedverticalbar':
+                return (React.createElement(ResponsiveGroupedVerticalBarChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToGVBCProps)(plotlyInput, colorMap, isDarkTheme), commonProps)));
+            case 'verticalstackedbar':
+                return (React.createElement(ResponsiveVerticalStackedBarChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToVSBCProps)(plotlyInput, colorMap, isDarkTheme), commonProps)));
+            case 'heatmap':
+                return (React.createElement(ResponsiveHeatMapChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToHeatmapProps)(plotlyInput), commonProps, { legendProps: {} })));
+            case 'sankey':
+                return (React.createElement(ResponsiveSankeyChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToSankeyProps)(plotlyInput, colorMap, isDarkTheme), commonProps)));
+            case 'gauge':
+                return (React.createElement(ResponsiveGaugeChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToGaugeProps)(plotlyInput, colorMap, isDarkTheme), commonProps)));
+            case 'verticalbar':
+                return (React.createElement(ResponsiveVerticalBarChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToVBCProps)(plotlyInput, colorMap, isDarkTheme), commonProps)));
+            case 'area':
+            case 'line':
+            case 'fallback':
+                // Need recheck for area chart as we don't have ability to check for valid months in previous step
+                var isAreaChart = plotlyInput.data.some(function (series) { return series.fill === 'tonexty' || series.fill === 'tozeroy'; });
+                return checkAndRenderChart(isAreaChart);
+            default:
+                throw new Error("Unsupported chart type :".concat((_b = plotlyInput.data[0]) === null || _b === void 0 ? void 0 : _b.type));
+        }
+    });
+    exports.DeclarativeChart.displayName = 'DeclarativeChart';
+});
+//# sourceMappingURL=DeclarativeChart.js.map

package/lib-amd/components/DeclarativeChart/DeclarativeChart.js.map

@@ -0,0 +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 type { Data, PlotData, PlotlySchema, OutputChartType } from '@fluentui/chart-utilities';\nimport {\n  isArrayOrTypedArray,\n  isDateArray,\n  isNumberArray,\n  mapFluentChart,\n  sanitizeJson,\n} from '@fluentui/chart-utilities';\n\nimport {\n  isMonthArray,\n  correctYearMonth,\n  transformPlotlyJsonToDonutProps,\n  transformPlotlyJsonToVSBCProps,\n  transformPlotlyJsonToScatterChartProps,\n  transformPlotlyJsonToHorizontalBarWithAxisProps,\n  transformPlotlyJsonToHeatmapProps,\n  transformPlotlyJsonToSankeyProps,\n  transformPlotlyJsonToGaugeProps,\n  transformPlotlyJsonToGVBCProps,\n  transformPlotlyJsonToVBCProps,\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 { IChart, IImageExportOptions } 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 chart: OutputChartType = mapFluentChart(plotlySchema);\n  if (!chart.isValid) {\n    throw new Error(`Invalid chart schema: ${chart.errorMessage}`);\n  }\n  const plotlyInput = plotlySchema as PlotlySchema;\n\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 renderLineArea = (plotlyData: Data[], isAreaChart: boolean): JSX.Element => {\n    const isScatterMarkers = (plotlyData[0] as PlotData)?.mode?.includes('markers');\n    const chartProps: ILineChartProps | IAreaChartProps = {\n      ...transformPlotlyJsonToScatterChartProps(\n        { data: plotlyData, layout: plotlyInput.layout },\n        isAreaChart,\n        colorMap,\n        isDarkTheme,\n      ),\n      ...commonProps,\n    };\n    if (isAreaChart) {\n      return <ResponsiveAreaChart {...chartProps} />;\n    }\n    return <ResponsiveLineChart {...chartProps} lineMode={isScatterMarkers ? 'scatter' : 'default'} />;\n  };\n\n  const checkAndRenderChart = (isAreaChart: boolean = false) => {\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      return renderLineArea(plotlyInput.data, isAreaChart);\n    } else if (isXMonth) {\n      const updatedData = plotlyInput.data.map((dataPoint: PlotData) => ({\n        ...dataPoint,\n        x: correctYearMonth(dataPoint.x),\n      }));\n      return renderLineArea(updatedData, isAreaChart);\n    }\n    // Unsupported schema, render as VerticalStackedBarChart\n    fallbackVSBC = true;\n    return (\n      <ResponsiveVerticalStackedBarChart\n        {...transformPlotlyJsonToVSBCProps(plotlyInput, colorMap, isDarkTheme, fallbackVSBC)}\n        {...commonProps}\n      />\n    );\n  };\n\n  const exportAsImage = React.useCallback(\n    (opts?: IImageExportOptions): Promise<string> => {\n      return new Promise((resolve, reject) => {\n        if (!chartRef.current || typeof chartRef.current.toImage !== 'function') {\n          return reject(Error('Chart cannot be exported as image'));\n        }\n\n        chartRef.current\n          .toImage({\n            background: theme.semanticColors.bodyBackground,\n            scale: 5,\n            ...opts,\n          })\n          .then(resolve)\n          .catch(reject);\n      });\n    },\n    [theme],\n  );\n\n  React.useImperativeHandle(\n    props.componentRef,\n    () => ({\n      exportAsImage,\n    }),\n    [exportAsImage],\n  );\n\n  switch (chart.type) {\n    case 'donut':\n      return (\n        <ResponsiveDonutChart\n          {...transformPlotlyJsonToDonutProps(plotlyInput, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'horizontalbar':\n      return (\n        <ResponsiveHorizontalBarChartWithAxis\n          {...transformPlotlyJsonToHorizontalBarWithAxisProps(plotlyInput, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'groupedverticalbar':\n      return (\n        <ResponsiveGroupedVerticalBarChart\n          {...transformPlotlyJsonToGVBCProps(plotlyInput, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'verticalstackedbar':\n      return (\n        <ResponsiveVerticalStackedBarChart\n          {...transformPlotlyJsonToVSBCProps(plotlyInput, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'heatmap':\n      return (\n        <ResponsiveHeatMapChart {...transformPlotlyJsonToHeatmapProps(plotlyInput)} {...commonProps} legendProps={{}} />\n      );\n    case 'sankey':\n      return (\n        <ResponsiveSankeyChart\n          {...transformPlotlyJsonToSankeyProps(plotlyInput, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'gauge':\n      return (\n        <ResponsiveGaugeChart\n          {...transformPlotlyJsonToGaugeProps(plotlyInput, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'verticalbar':\n      return (\n        <ResponsiveVerticalBarChart\n          {...transformPlotlyJsonToVBCProps(plotlyInput, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'area':\n    case 'line':\n    case 'fallback':\n      // Need recheck for area chart as we don't have ability to check for valid months in previous step\n      const isAreaChart = plotlyInput.data.some(\n        (series: PlotData) => series.fill === 'tonexty' || series.fill === 'tozeroy',\n      );\n      return checkAndRenderChart(isAreaChart);\n    default:\n      throw new Error(`Unsupported chart type :${plotlyInput.data[0]?.type}`);\n  }\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\n"]}

package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { IDonutChartProps } from '../DonutChart/index';
+import { ISankeyChartProps } from '../SankeyChart/index';
+import { IVerticalStackedBarChartProps } from '../VerticalStackedBarChart/index';
+import { IHorizontalBarChartWithAxisProps } from '../HorizontalBarChartWithAxis/index';
+import { ILineChartProps } from '../LineChart/index';
+import { IAreaChartProps } from '../AreaChart/index';
+import { IHeatMapChartProps } from '../HeatMapChart/index';
+import { IGaugeChartProps } from '../GaugeChart/index';
+import { IGroupedVerticalBarChartProps } from '../GroupedVerticalBarChart/index';
+import { IVerticalBarChartProps } from '../VerticalBarChart/index';
+import type { Datum, PlotlySchema, TypedArray } from '@fluentui/chart-utilities';
+export declare const isMonthArray: (data: Datum[] | Datum[][] | TypedArray) => boolean;
+export declare const correctYearMonth: (xValues: Datum[] | Datum[][] | TypedArray) => any[];
+export declare const getColor: (legendLabel: string, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => string;
+export declare const transformPlotlyJsonToDonutProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => IDonutChartProps;
+export declare const transformPlotlyJsonToVSBCProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean, fallbackVSBC?: boolean) => IVerticalStackedBarChartProps;
+export declare const transformPlotlyJsonToGVBCProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => IGroupedVerticalBarChartProps;
+export declare const transformPlotlyJsonToVBCProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => IVerticalBarChartProps;
+export declare const transformPlotlyJsonToScatterChartProps: (input: PlotlySchema, isAreaChart: boolean, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => ILineChartProps | IAreaChartProps;
+export declare const transformPlotlyJsonToHorizontalBarWithAxisProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => IHorizontalBarChartWithAxisProps;
+export declare const transformPlotlyJsonToHeatmapProps: (input: PlotlySchema) => IHeatMapChartProps;
+export declare const transformPlotlyJsonToSankeyProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => ISankeyChartProps;
+export declare const transformPlotlyJsonToGaugeProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => IGaugeChartProps;
+/**
+ * Interate iteratively through the trace object and find all the array attributes.
+ * 1 trace record = 1 series of data
+ * @param trace
+ */
+export declare function findArrayAttributes(trace: any): void;