@fluentui/react-charting 5.24.2 → 5.24.3

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

@@ -10,22 +10,36 @@ import { IGaugeChartProps } from '../GaugeChart/index';
 import { IGroupedVerticalBarChartProps } from '../GroupedVerticalBarChart/index';
 import { IVerticalBarChartProps } from '../VerticalBarChart/index';
 import { IChartTableProps } from '../ChartTable/index';
-import type { Datum, PlotlySchema, PlotData, TypedArray, Color } from '@fluentui/chart-utilities';
+import type { Datum, Layout, PlotlySchema, PlotData, TypedArray, Color } from '@fluentui/chart-utilities';
 import type { ColorwayType } from './PlotlyColorAdapter';
-export declare const isMonthArray: (data: Datum[] | Datum[][] | TypedArray) => boolean;
+import { ILegendsProps } from '../Legends/index';
+export type AxisProperties = {
+    xAnnotation?: string;
+    yAnnotation?: string;
+    row: number;
+    column: number;
+};
+export type GridAxisProperties = Record<string, AxisProperties>;
+export type GridProperties = {
+    templateRows: string;
+    templateColumns: string;
+    layout: GridAxisProperties;
+};
 export declare const correctYearMonth: (xValues: Datum[] | Datum[][] | TypedArray) => any[];
 export declare const _getGaugeAxisColor: (colorway: string[] | undefined, colorwayType: ColorwayType, color: Color | undefined, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => string;
 export declare const resolveXAxisPoint: (x: Datum, isXYearCategory: boolean, isXString: boolean, isXDate: boolean, isXNumber: boolean) => string | Date | number;
-export declare const transformPlotlyJsonToDonutProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => IDonutChartProps;
-export declare const transformPlotlyJsonToVSBCProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean, fallbackVSBC?: boolean) => IVerticalStackedBarChartProps;
-export declare const transformPlotlyJsonToGVBCProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => IGroupedVerticalBarChartProps;
-export declare const transformPlotlyJsonToVBCProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => IVerticalBarChartProps;
-export declare const transformPlotlyJsonToScatterChartProps: (input: PlotlySchema, isAreaChart: boolean, isScatterMarkers: boolean, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => ILineChartProps | IAreaChartProps;
-export declare const transformPlotlyJsonToHorizontalBarWithAxisProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => IHorizontalBarChartWithAxisProps;
-export declare const transformPlotlyJsonToHeatmapProps: (input: PlotlySchema) => IHeatMapChartProps;
-export declare const transformPlotlyJsonToSankeyProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => ISankeyChartProps;
-export declare const transformPlotlyJsonToGaugeProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => IGaugeChartProps;
-export declare const transformPlotlyJsonToChartTableProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => IChartTableProps;
+export declare const transformPlotlyJsonToDonutProps: (input: PlotlySchema, isMultiPlot: boolean, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => IDonutChartProps;
+export declare const transformPlotlyJsonToVSBCProps: (input: PlotlySchema, isMultiPlot: boolean, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean, fallbackVSBC?: boolean) => IVerticalStackedBarChartProps;
+export declare const transformPlotlyJsonToGVBCProps: (input: PlotlySchema, isMultiPlot: boolean, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => IGroupedVerticalBarChartProps;
+export declare const transformPlotlyJsonToVBCProps: (input: PlotlySchema, isMultiPlot: boolean, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => IVerticalBarChartProps;
+export declare const transformPlotlyJsonToAreaChartProps: (input: PlotlySchema, isMultiPlot: boolean, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => IAreaChartProps;
+export declare const transformPlotlyJsonToLineChartProps: (input: PlotlySchema, isMultiPlot: boolean, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => ILineChartProps;
+export declare const transformPlotlyJsonToScatterChartProps: (input: PlotlySchema, isMultiPlot: boolean, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => ILineChartProps;
+export declare const transformPlotlyJsonToHorizontalBarWithAxisProps: (input: PlotlySchema, isMultiPlot: boolean, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => IHorizontalBarChartWithAxisProps;
+export declare const transformPlotlyJsonToHeatmapProps: (input: PlotlySchema, isMultiPlot: boolean, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => IHeatMapChartProps;
+export declare const transformPlotlyJsonToSankeyProps: (input: PlotlySchema, isMultiPlot: boolean, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => ISankeyChartProps;
+export declare const transformPlotlyJsonToGaugeProps: (input: PlotlySchema, isMultiPlot: boolean, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => IGaugeChartProps;
+export declare const transformPlotlyJsonToChartTableProps: (input: PlotlySchema, isMultiPlot: boolean, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => IChartTableProps;
 export declare const projectPolarToCartesian: (input: PlotlySchema) => PlotlySchema;
 /**
  * Interate iteratively through the trace object and find all the array attributes.
@@ -33,6 +47,7 @@ export declare const projectPolarToCartesian: (input: PlotlySchema) => PlotlySch
  * @param trace
  */
 export declare function findArrayAttributes(trace: any): void;
-export declare const isStringArray: (arr: any) => boolean;
+export declare const getAllupLegendsProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => ILegendsProps;
 export declare const getNumberAtIndexOrDefault: (data: PlotData['z'] | undefined, index: number) => number | undefined;
 export declare const getValidXYRanges: (series: Partial<PlotData>) => [number, number][];
+export declare const getGridProperties: (layout: Partial<Layout> | undefined, isMultiPlot: boolean) => GridProperties;

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

@@ -1,7 +1,7 @@
-define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../../utilities/colors", "../GaugeChart/index", "../../utilities/utilities", "@fluentui/chart-utilities", "d3-time-format", "d3-shape", "./PlotlyColorAdapter"], function (require, exports, tslib_1, d3_array_1, d3_scale_1, d3_format_1, colors_1, index_1, utilities_1, chart_utilities_1, d3_time_format_1, d3_shape_1, PlotlyColorAdapter_1) {
+define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../../utilities/colors", "../GaugeChart/index", "../../utilities/utilities", "@fluentui/chart-utilities", "d3-shape", "./PlotlyColorAdapter"], function (require, exports, tslib_1, d3_array_1, d3_scale_1, d3_format_1, colors_1, index_1, utilities_1, chart_utilities_1, d3_shape_1, PlotlyColorAdapter_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.getValidXYRanges = exports.getNumberAtIndexOrDefault = exports.isStringArray = exports.findArrayAttributes = exports.projectPolarToCartesian = exports.transformPlotlyJsonToChartTableProps = exports.transformPlotlyJsonToGaugeProps = exports.transformPlotlyJsonToSankeyProps = exports.transformPlotlyJsonToHeatmapProps = exports.transformPlotlyJsonToHorizontalBarWithAxisProps = exports.transformPlotlyJsonToScatterChartProps = exports.transformPlotlyJsonToVBCProps = exports.transformPlotlyJsonToGVBCProps = exports.transformPlotlyJsonToVSBCProps = exports.transformPlotlyJsonToDonutProps = exports.resolveXAxisPoint = exports._getGaugeAxisColor = exports.correctYearMonth = exports.isMonthArray = void 0;
+    exports.getGridProperties = exports.getValidXYRanges = exports.getNumberAtIndexOrDefault = exports.getAllupLegendsProps = exports.findArrayAttributes = exports.projectPolarToCartesian = exports.transformPlotlyJsonToChartTableProps = exports.transformPlotlyJsonToGaugeProps = exports.transformPlotlyJsonToSankeyProps = exports.transformPlotlyJsonToHeatmapProps = exports.transformPlotlyJsonToHorizontalBarWithAxisProps = exports.transformPlotlyJsonToScatterChartProps = exports.transformPlotlyJsonToLineChartProps = exports.transformPlotlyJsonToAreaChartProps = exports.transformPlotlyJsonToVBCProps = exports.transformPlotlyJsonToGVBCProps = exports.transformPlotlyJsonToVSBCProps = exports.transformPlotlyJsonToDonutProps = exports.resolveXAxisPoint = exports._getGaugeAxisColor = exports.correctYearMonth = void 0;
     var dashOptions = {
         dot: {
             strokeDasharray: '1, 5',
@@ -40,17 +40,6 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             lineBorderWidth: '4',
         },
     };
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    var isMonth = function (possiblyMonthValue) {
-        var parseFullMonth = (0, d3_time_format_1.timeParse)('%B');
-        var parseShortMonth = (0, d3_time_format_1.timeParse)('%b');
-        return parseFullMonth(possiblyMonthValue) !== null || parseShortMonth(possiblyMonthValue) !== null;
-    };
-    var isMonthArray = function (data) {
-        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-        return (0, chart_utilities_1.isArrayOfType)(data, function (value) { return isMonth(value) || value === null; });
-    };
-    exports.isMonthArray = isMonthArray;
     function getTitles(layout) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         var titles = {
@@ -98,8 +87,9 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         return xValues;
     };
     exports.correctYearMonth = correctYearMonth;
-    var usesSecondaryYScale = function (series) {
-        return series.yaxis === 'y2';
+    var usesSecondaryYScale = function (series, layout) {
+        var _a, _b;
+        return series.yaxis === 'y2' && (((_a = layout === null || layout === void 0 ? void 0 : layout.yaxis2) === null || _a === void 0 ? void 0 : _a.anchor) === 'x' || ((_b = layout === null || layout === void 0 ? void 0 : layout.yaxis2) === null || _b === void 0 ? void 0 : _b.side) === 'right');
     };
     var getSecondaryYAxisValues = function (data, layout, maxAllowedMinY, minAllowedMaxY) {
         var _a, _b, _c, _d;
@@ -107,7 +97,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         var yMinValue;
         var yMaxValue;
         data.forEach(function (series) {
-            if (usesSecondaryYScale(series)) {
+            if (usesSecondaryYScale(series, layout)) {
                 containsSecondaryYAxis = true;
                 var yValues = series.y;
                 if (yValues) {
@@ -166,7 +156,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         return x;
     };
     exports.resolveXAxisPoint = resolveXAxisPoint;
-    var transformPlotlyJsonToDonutProps = function (input, colorMap, colorwayType, isDarkTheme) {
+    var transformPlotlyJsonToDonutProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
         var firstData = input.data[0];
         // extract colors for each series only once
@@ -219,13 +209,13 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         };
     };
     exports.transformPlotlyJsonToDonutProps = transformPlotlyJsonToDonutProps;
-    var transformPlotlyJsonToVSBCProps = function (input, colorMap, colorwayType, isDarkTheme, fallbackVSBC) {
+    var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme, fallbackVSBC) {
         var _a, _b, _c;
         var mapXToDataPoints = {};
         var yMaxValue = 0;
         var yMinValue = 0;
         var secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout);
-        var _d = getLegendProps(input.data, input.layout), legends = _d.legends, hideLegend = _d.hideLegend;
+        var _d = getLegendProps(input.data, input.layout, isMultiPlot), legends = _d.legends, hideLegend = _d.hideLegend;
         var colorScale = undefined;
         input.data.forEach(function (series, index1) {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
@@ -242,7 +232,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             var extractedLineColors = (0, PlotlyColorAdapter_1.extractColor)((_p = (_o = (_m = input.layout) === null || _m === void 0 ? void 0 : _m.template) === null || _o === void 0 ? void 0 : _o.layout) === null || _p === void 0 ? void 0 : _p.colorway, colorwayType, (_q = series.line) === null || _q === void 0 ? void 0 : _q.color, colorMap, isDarkTheme);
             var xValues = series.x;
             var isXDate = (0, chart_utilities_1.isDateArray)(xValues);
-            var isXString = (0, exports.isStringArray)(xValues);
+            var isXString = (0, chart_utilities_1.isStringArray)(xValues);
             var isXNumber = (0, chart_utilities_1.isNumberArray)(xValues);
             var validXYRanges = (0, exports.getValidXYRanges)(series);
             validXYRanges.forEach(function (_a, rangeIdx) {
@@ -250,7 +240,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                 var rangeXValues = series.x.slice(rangeStart, rangeEnd);
                 var rangeYValues = series.y.slice(rangeStart, rangeEnd);
                 rangeXValues.forEach(function (x, index2) {
-                    var _a, _b, _c, _d, _e, _f;
+                    var _a, _b, _c, _d;
                     if (!mapXToDataPoints[x]) {
                         mapXToDataPoints[x] = {
                             xAxisPoint: (0, exports.resolveXAxisPoint)(x, isXYearCategory, isXString, isXDate, isXNumber),
@@ -279,21 +269,16 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                     else if (series.type === 'scatter' || !!fallbackVSBC) {
                         var lineColor = (0, PlotlyColorAdapter_1.resolveColor)(extractedLineColors, index1, legend, colorMap, isDarkTheme);
                         var lineOptions = getLineOptions(series.line);
-                        var dashType = ((_e = series.line) === null || _e === void 0 ? void 0 : _e.dash) || 'solid';
-                        var legendShape = dashType === 'dot' || dashType === 'dash' || dashType === 'dashdot'
-                            ? 'dottedLine'
-                            : ((_f = series.mode) === null || _f === void 0 ? void 0 : _f.includes('markers'))
-                                ? 'circle'
-                                : 'default';
+                        var legendShape = getLegendShape(series);
                         mapXToDataPoints[x].lineData.push({
                             legend: legend + (validXYRanges.length > 1 ? ".".concat(rangeIdx + 1) : ''),
                             legendShape: legendShape,
                             y: yVal,
                             color: lineColor,
                             lineOptions: tslib_1.__assign(tslib_1.__assign({}, (lineOptions !== null && lineOptions !== void 0 ? lineOptions : {})), { mode: series.mode }),
-                            useSecondaryYScale: usesSecondaryYScale(series),
+                            useSecondaryYScale: usesSecondaryYScale(series, input.layout),
                         });
-                        if (!usesSecondaryYScale(series) && typeof yVal === 'number') {
+                        if (!usesSecondaryYScale(series, input.layout) && typeof yVal === 'number') {
                             yMaxValue = Math.max(yMaxValue, yVal);
                             yMinValue = Math.min(yMinValue, yVal);
                         }
@@ -321,11 +306,11 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         var scaleColors = scale.map(function (item) { return item[1]; });
         return (0, d3_scale_1.scaleLinear)().domain(scaleDomain).range(scaleColors);
     };
-    var transformPlotlyJsonToGVBCProps = function (input, colorMap, colorwayType, isDarkTheme) {
+    var transformPlotlyJsonToGVBCProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
         var _a, _b, _c;
         var mapXToDataPoints = {};
         var secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout, 0, 0);
-        var _d = getLegendProps(input.data, input.layout), legends = _d.legends, hideLegend = _d.hideLegend;
+        var _d = getLegendProps(input.data, input.layout, isMultiPlot), legends = _d.legends, hideLegend = _d.hideLegend;
         var colorScale = undefined;
         input.data.forEach(function (series, index1) {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
@@ -359,7 +344,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                         xAxisCalloutData: x,
                         color: color,
                         legend: legend,
-                        useSecondaryYScale: usesSecondaryYScale(series),
+                        useSecondaryYScale: usesSecondaryYScale(series, input.layout),
                     });
                 }
             });
@@ -368,10 +353,10 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         return tslib_1.__assign(tslib_1.__assign({ data: Object.values(mapXToDataPoints), 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, yAxisTitle: yAxisTitle, mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true });
     };
     exports.transformPlotlyJsonToGVBCProps = transformPlotlyJsonToGVBCProps;
-    var transformPlotlyJsonToVBCProps = function (input, colorMap, colorwayType, isDarkTheme) {
+    var transformPlotlyJsonToVBCProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
         var _a, _b, _c;
         var vbcData = [];
-        var _d = getLegendProps(input.data, input.layout), legends = _d.legends, hideLegend = _d.hideLegend;
+        var _d = getLegendProps(input.data, input.layout, isMultiPlot), legends = _d.legends, hideLegend = _d.hideLegend;
         var colorScale = undefined;
         input.data.forEach(function (series, seriesIdx) {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
@@ -396,7 +381,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                 xValues.push(xVal);
                 yValues.push(yVal);
             });
-            var isXString = (0, exports.isStringArray)(xValues);
+            var isXString = (0, chart_utilities_1.isStringArray)(xValues);
             // TODO: In case of a single bin, add an empty bin of the same size to prevent the
             // default bar width from being used and ensure the bar spans the full intended range.
             var xBins = createBins(xValues, (_m = series.xbins) === null || _m === void 0 ? void 0 : _m.start, (_o = series.xbins) === null || _o === void 0 ? void 0 : _o.end, (_p = series.xbins) === null || _p === void 0 ? void 0 : _p.size);
@@ -445,14 +430,35 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         };
     };
     exports.transformPlotlyJsonToVBCProps = transformPlotlyJsonToVBCProps;
-    var transformPlotlyJsonToScatterChartProps = function (input, isAreaChart, isScatterMarkers, colorMap, colorwayType, isDarkTheme) {
-        var _a, _b, _c, _d, _e, _f;
+    var transformPlotlyJsonToAreaChartProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
+        return transformPlotlyJsonToScatterTraceProps(input, isMultiPlot, 'area', colorMap, colorwayType, isDarkTheme);
+    };
+    exports.transformPlotlyJsonToAreaChartProps = transformPlotlyJsonToAreaChartProps;
+    var transformPlotlyJsonToLineChartProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
+        return transformPlotlyJsonToScatterTraceProps(input, isMultiPlot, 'line', colorMap, colorwayType, isDarkTheme);
+    };
+    exports.transformPlotlyJsonToLineChartProps = transformPlotlyJsonToLineChartProps;
+    var transformPlotlyJsonToScatterChartProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
+        return transformPlotlyJsonToScatterTraceProps(input, isMultiPlot, 'scatter', colorMap, colorwayType, isDarkTheme);
+    };
+    exports.transformPlotlyJsonToScatterChartProps = transformPlotlyJsonToScatterChartProps;
+    var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chartType, colorMap, colorwayType, isDarkTheme) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        var isScatterMarkers = [
+            'text+markers',
+            'markers+text',
+            'lines+markers',
+            'markers+line',
+            'text+lines+markers',
+        ].includes((_a = input.data[0]) === null || _a === void 0 ? void 0 : _a.mode);
+        var isAreaChart = chartType === 'area';
+        var isScatterChart = chartType === 'scatter';
         var secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout, isAreaChart ? 0 : undefined, isAreaChart ? 0 : undefined);
         var mode = 'tonexty';
-        var _g = getLegendProps(input.data, input.layout), legends = _g.legends, hideLegend = _g.hideLegend;
+        var _h = getLegendProps(input.data, input.layout, isMultiPlot), legends = _h.legends, hideLegend = _h.hideLegend;
         var chartData = input.data
             .map(function (series, index) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            var _a, _b, _c, _d, _e, _f, _g;
             var colors = isScatterMarkers
                 ? ((_a = series === null || series === void 0 ? void 0 : series.mode) === null || _a === void 0 ? void 0 : _a.includes('line'))
                     ? (_b = series.line) === null || _b === void 0 ? void 0 : _b.color
@@ -461,22 +467,16 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             // extract colors for each series only once
             var extractedColors = (0, PlotlyColorAdapter_1.extractColor)((_g = (_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.template) === null || _f === void 0 ? void 0 : _f.layout) === null || _g === void 0 ? void 0 : _g.colorway, colorwayType, colors, colorMap, isDarkTheme);
             var xValues = series.x;
-            var isXString = (0, exports.isStringArray)(xValues);
+            var isXString = (0, chart_utilities_1.isStringArray)(xValues);
             var isXDate = (0, chart_utilities_1.isDateArray)(xValues);
             var isXNumber = (0, chart_utilities_1.isNumberArray)(xValues);
-            // string case is not possible for scatter chart as it is already filtered out in declarative chart
-            var isXYearCategory = false;
+            var isXYearCategory = (0, chart_utilities_1.isYearArray)(series.x); // Consider year as categorical not numeric continuous axis
             var legend = legends[index];
             // resolve color for each legend's lines from the extracted colors
             var seriesColor = (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, index, legend, colorMap, isDarkTheme);
             mode = series.fill === 'tozeroy' ? 'tozeroy' : 'tonexty';
             var lineOptions = getLineOptions(series.line);
-            var dashType = ((_h = series.line) === null || _h === void 0 ? void 0 : _h.dash) || 'solid';
-            var legendShape = dashType === 'dot' || dashType === 'dash' || dashType === 'dashdot'
-                ? 'dottedLine'
-                : ((_j = series.mode) === null || _j === void 0 ? void 0 : _j.includes('markers'))
-                    ? 'circle'
-                    : 'default';
+            var legendShape = getLegendShape(series);
             var validXYRanges = (0, exports.getValidXYRanges)(series);
             return validXYRanges.map(function (_a, rangeIdx) {
                 var _b;
@@ -500,29 +500,32 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                     }),
                     color: seriesColor,
                     lineOptions: tslib_1.__assign(tslib_1.__assign({}, (lineOptions !== null && lineOptions !== void 0 ? lineOptions : {})), { mode: series.mode }),
-                    useSecondaryYScale: usesSecondaryYScale(series),
+                    useSecondaryYScale: usesSecondaryYScale(series, input.layout),
                 };
             });
         })
             .flat();
         var yMinMaxValues = (0, utilities_1.findNumericMinMaxOfY)(chartData);
-        var _h = getTitles(input.layout), chartTitle = _h.chartTitle, xAxisTitle = _h.xAxisTitle, yAxisTitle = _h.yAxisTitle;
+        var _j = getTitles(input.layout), chartTitle = _j.chartTitle, xAxisTitle = _j.xAxisTitle, yAxisTitle = _j.yAxisTitle;
         var numDataPoints = chartData.reduce(function (total, lineChartPoints) { return total + lineChartPoints.data.length; }, 0);
         var chartProps = {
             chartTitle: chartTitle,
             lineChartData: chartData,
         };
+        var scatterChartProps = {
+            chartTitle: chartTitle,
+            scatterChartData: chartData,
+        };
         if (isAreaChart) {
-            return tslib_1.__assign(tslib_1.__assign({ data: chartProps, supportNegativeData: true, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle }, secondaryYAxisValues), { 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, hideLegend: hideLegend, useUTC: false, optimizeLargeData: numDataPoints > 1000 });
+            return tslib_1.__assign(tslib_1.__assign({ data: chartProps, supportNegativeData: true, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle }, secondaryYAxisValues), { mode: mode, 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, hideLegend: hideLegend, useUTC: false, optimizeLargeData: numDataPoints > 1000 });
         }
         else {
-            return tslib_1.__assign(tslib_1.__assign({ data: chartProps, supportNegativeData: true, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle }, secondaryYAxisValues), { 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, hideLegend: hideLegend, useUTC: false, optimizeLargeData: numDataPoints > 1000 });
+            return tslib_1.__assign(tslib_1.__assign({ data: isScatterChart ? scatterChartProps : chartProps, supportNegativeData: true, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle }, secondaryYAxisValues), { roundedTicks: true, yMinValue: yMinMaxValues.startValue, yMaxValue: yMinMaxValues.endValue, width: (_e = input.layout) === null || _e === void 0 ? void 0 : _e.width, height: (_g = (_f = input.layout) === null || _f === void 0 ? void 0 : _f.height) !== null && _g !== void 0 ? _g : 350, hideTickOverlap: true, enableReflow: false, hideLegend: hideLegend, useUTC: false, optimizeLargeData: numDataPoints > 1000 });
         }
     };
-    exports.transformPlotlyJsonToScatterChartProps = transformPlotlyJsonToScatterChartProps;
-    var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, colorMap, colorwayType, isDarkTheme) {
+    var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
-        var _s = getLegendProps(input.data, input.layout), legends = _s.legends, hideLegend = _s.hideLegend;
+        var _s = getLegendProps(input.data, input.layout, isMultiPlot), legends = _s.legends, hideLegend = _s.hideLegend;
         var colorScale = undefined;
         var chartData = input.data
             .map(function (series, index) {
@@ -590,7 +593,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         };
     };
     exports.transformPlotlyJsonToHorizontalBarWithAxisProps = transformPlotlyJsonToHorizontalBarWithAxisProps;
-    var transformPlotlyJsonToHeatmapProps = function (input) {
+    var transformPlotlyJsonToHeatmapProps = function (input, isMultiPlot, colorMap, colorwayType, 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, _8;
         var firstData = input.data[0];
         var heatmapDataPoints = [];
@@ -610,8 +613,8 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                 yValues_1.push(firstData.y[index]);
                 zValues_1.push(zVal);
             });
-            var isXString_1 = (0, exports.isStringArray)(xValues_1);
-            var isYString_1 = (0, exports.isStringArray)(yValues_1);
+            var isXString_1 = (0, chart_utilities_1.isStringArray)(xValues_1);
+            var isYString_1 = (0, chart_utilities_1.isStringArray)(yValues_1);
             var xBins_1 = createBins(xValues_1, (_b = firstData.xbins) === null || _b === void 0 ? void 0 : _b.start, (_c = firstData.xbins) === null || _c === void 0 ? void 0 : _c.end, (_d = firstData.xbins) === null || _d === void 0 ? void 0 : _d.size);
             var yBins_1 = createBins(yValues_1, (_e = firstData.ybins) === null || _e === void 0 ? void 0 : _e.start, (_f = firstData.ybins) === null || _f === void 0 ? void 0 : _f.end, (_g = firstData.ybins) === null || _g === void 0 ? void 0 : _g.size);
             var zBins_1 = yBins_1.map(function () { return xBins_1.map(function () { return []; }); });
@@ -721,7 +724,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         };
     };
     exports.transformPlotlyJsonToHeatmapProps = transformPlotlyJsonToHeatmapProps;
-    var transformPlotlyJsonToSankeyProps = function (input, colorMap, colorwayType, isDarkTheme) {
+    var transformPlotlyJsonToSankeyProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         var _m = input.data[0], link = _m.link, node = _m.node;
         var validLinks = ((_a = link === null || link === void 0 ? void 0 : link.value) !== null && _a !== void 0 ? _a : [])
@@ -769,7 +772,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         };
     };
     exports.transformPlotlyJsonToSankeyProps = transformPlotlyJsonToSankeyProps;
-    var transformPlotlyJsonToGaugeProps = function (input, colorMap, colorwayType, isDarkTheme) {
+    var transformPlotlyJsonToGaugeProps = function (input, isMultiPlot, colorMap, colorwayType, 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, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25;
         var firstData = input.data[0];
         var stepsColors = ((_a = firstData.gauge) === null || _a === void 0 ? void 0 : _a.steps) ? firstData.gauge.steps.map(function (step) { return step.color; }) : undefined;
@@ -869,7 +872,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         }
         return "".concat(prefix !== null && prefix !== void 0 ? prefix : '').concat(formatted).concat(suffix !== null && suffix !== void 0 ? suffix : '');
     };
-    var transformPlotlyJsonToChartTableProps = function (input, colorMap, isDarkTheme) {
+    var transformPlotlyJsonToChartTableProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
         var tableData = input.data[0];
         var normalizeHeaders = function (values, header) {
@@ -1075,12 +1078,6 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         }
         return Object.keys(lineOptions).length > 0 ? lineOptions : undefined;
     }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    var isStringArray = function (arr) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return (0, chart_utilities_1.isArrayOfType)(arr, function (value) { return typeof value === 'string' || value === null; });
-    };
-    exports.isStringArray = isStringArray;
     // TODO: Use binary search to find the appropriate bin for numeric value.
     var findBinIndex = function (bins, value, isString) {
         if (typeof value === 'undefined' || value === null) {
@@ -1104,7 +1101,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         if (!data || data.length === 0) {
             return [];
         }
-        if ((0, exports.isStringArray)(data)) {
+        if ((0, chart_utilities_1.isStringArray)(data)) {
             var categories_1 = Array.from(new Set(data));
             var start = typeof binStart === 'number' ? Math.ceil(binStart) : 0;
             var stop_1 = typeof binEnd === 'number' ? Math.floor(binEnd) + 1 : categories_1.length;
@@ -1175,7 +1172,48 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         var factor = Math.pow(10, precision);
         return Math.round(value * factor) / factor;
     };
-    var getLegendProps = function (data, layout) {
+    var getLegendShape = function (series) {
+        var _a, _b;
+        var dashType = ((_a = series.line) === null || _a === void 0 ? void 0 : _a.dash) || 'solid';
+        if (dashType === 'dot' || dashType === 'dash' || dashType === 'dashdot') {
+            return 'dottedLine';
+        }
+        else if ((_b = series.mode) === null || _b === void 0 ? void 0 : _b.includes('markers')) {
+            return 'circle';
+        }
+        return 'default';
+    };
+    var getAllupLegendsProps = function (input, colorMap, colorwayType, isDarkTheme) {
+        var allupLegends = [];
+        // reduce on showlegend boolean propperty. reduce should return true if at least one series has showlegend true
+        var toShowLegend = input.data.reduce(function (acc, series) {
+            return acc || series.showlegend === true;
+        }, false);
+        if (toShowLegend) {
+            input.data.forEach(function (series, index) {
+                var _a, _b, _c, _d, _e;
+                var name = series.legendgroup;
+                var color = ((_a = series.line) === null || _a === void 0 ? void 0 : _a.color) || ((_b = series.marker) === null || _b === void 0 ? void 0 : _b.color);
+                var legendShape = getLegendShape(series);
+                var resolvedColor = (0, PlotlyColorAdapter_1.extractColor)((_e = (_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.template) === null || _d === void 0 ? void 0 : _d.layout) === null || _e === void 0 ? void 0 : _e.colorway, colorwayType, color, colorMap, isDarkTheme);
+                if (name !== undefined && allupLegends.some(function (group) { return group.title === name; }) === false) {
+                    allupLegends.push({
+                        title: name,
+                        color: resolvedColor,
+                        shape: legendShape,
+                    });
+                }
+            });
+        }
+        return {
+            legends: allupLegends,
+            centerLegends: true,
+            enabledWrapLines: true,
+            canSelectMultipleLegends: true,
+        };
+    };
+    exports.getAllupLegendsProps = getAllupLegendsProps;
+    var getLegendProps = function (data, layout, isMultiPlot) {
         var legends = [];
         if (data.length === 1) {
             legends.push(data[0].name || '');
@@ -1185,10 +1223,11 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                 legends.push(series.name || "Series ".concat(index + 1));
             });
         }
-        var hideLegends = data.every(function (series) { return series.showlegend === false; });
+        var hideLegendsData = data.every(function (series) { return series.showlegend === false; });
+        var hideLegendsInferred = (layout === null || layout === void 0 ? void 0 : layout.showlegend) === false || ((layout === null || layout === void 0 ? void 0 : layout.showlegend) !== true && legends.length < 2);
         return {
             legends: legends,
-            hideLegend: (layout === null || layout === void 0 ? void 0 : layout.showlegend) === false || ((layout === null || layout === void 0 ? void 0 : layout.showlegend) !== true && legends.length < 2) ? true : hideLegends,
+            hideLegend: isMultiPlot || hideLegendsInferred || hideLegendsData,
         };
     };
     var getNumberAtIndexOrDefault = function (data, index) {
@@ -1222,5 +1261,159 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         return ranges;
     };
     exports.getValidXYRanges = getValidXYRanges;
+    var getIndexFromKey = function (key, pattern) {
+        var normalizedKey = key.replace(pattern, '') === '' ? '1' : key.replace(pattern, '');
+        return parseInt(normalizedKey, 10) - 1;
+    };
+    var getGridProperties = function (layout, isMultiPlot) {
+        var _a;
+        var gridX = [];
+        var gridY = [];
+        var annotations = {};
+        var templateRows = '1fr';
+        var templateColumns = '1fr';
+        var gridLayout = {};
+        if (layout === undefined || layout === null || Object.keys(layout).length === 0) {
+            return { templateRows: templateRows, templateColumns: templateColumns, layout: gridLayout };
+        }
+        if (!layout.xaxis || !layout.yaxis) {
+            return { templateRows: templateRows, templateColumns: templateColumns, layout: gridLayout };
+        }
+        if (!isMultiPlot) {
+            return { templateRows: templateRows, templateColumns: templateColumns, layout: gridLayout };
+        }
+        Object.keys(layout).forEach(function (key) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            if (key.startsWith('xaxis')) {
+                var index = getIndexFromKey(key, 'xaxis');
+                var anchor = (_b = (_a = layout[key]) === null || _a === void 0 ? void 0 : _a.anchor) !== null && _b !== void 0 ? _b : 'y';
+                var anchorIndex = getIndexFromKey(anchor, 'y');
+                if (index !== anchorIndex) {
+                    throw new Error("Invalid layout: xaxis ".concat(index + 1, " anchor should be y").concat(anchorIndex + 1));
+                }
+                gridX[index] = (_d = (_c = layout[key]) === null || _c === void 0 ? void 0 : _c.domain) !== null && _d !== void 0 ? _d : [];
+            }
+            else if (key.startsWith('yaxis')) {
+                var index = getIndexFromKey(key, 'yaxis');
+                var anchor = (_f = (_e = layout[key]) === null || _e === void 0 ? void 0 : _e.anchor) !== null && _f !== void 0 ? _f : 'x';
+                var anchorIndex = getIndexFromKey(anchor, 'x');
+                if (index !== anchorIndex) {
+                    if ((index === 1 && anchorIndex === 0) || ((_g = layout.yaxis2) === null || _g === void 0 ? void 0 : _g.side) === 'right') {
+                        // Special case for secondary y axis where yaxis2 can anchor to x1
+                        return { templateRows: templateRows, templateColumns: templateColumns };
+                    }
+                    throw new Error("Invalid layout: yaxis ".concat(index + 1, " anchor should be x").concat(anchorIndex + 1));
+                }
+                gridY[index] = (_j = (_h = layout[key]) === null || _h === void 0 ? void 0 : _h.domain) !== null && _j !== void 0 ? _j : [];
+            }
+        });
+        (_a = layout.annotations) === null || _a === void 0 ? void 0 : _a.forEach(function (annotation) {
+            var xMatches = gridX.flatMap(function (interval, idx) {
+                return (annotation === null || annotation === void 0 ? void 0 : annotation.x) >= interval[0] && (annotation === null || annotation === void 0 ? void 0 : annotation.x) <= interval[1] ? [idx] : [];
+            });
+            var yMatch = gridY.findIndex(function (interval, yIndex) {
+                return xMatches.includes(yIndex) &&
+                    (annotation === null || annotation === void 0 ? void 0 : annotation.y) >= interval[0] &&
+                    (annotation === null || annotation === void 0 ? void 0 : annotation.y) <= interval[1];
+            });
+            if (yMatch !== -1) {
+                if (annotations[yMatch] === undefined) {
+                    annotations[yMatch] = {};
+                }
+                if ((annotation === null || annotation === void 0 ? void 0 : annotation.textangle) === 90) {
+                    annotations[yMatch].yAnnotation = annotation.text;
+                }
+                else {
+                    annotations[yMatch].xAnnotation = annotation.text;
+                }
+            }
+        });
+        if (gridX.length > 0) {
+            var uniqueXIntervals_1 = new Map();
+            gridX.forEach(function (interval) {
+                var key = "".concat(interval[0], "-").concat(interval[1]);
+                if (!uniqueXIntervals_1.has(key)) {
+                    uniqueXIntervals_1.set(key, interval);
+                }
+            });
+            var minXInterval_1 = Math.min.apply(Math, Array.from(uniqueXIntervals_1.values()).map(function (interval) { return interval[1] - interval[0]; }));
+            templateColumns = Array.from(uniqueXIntervals_1.values())
+                .map(function (interval) { return "".concat((interval[1] - interval[0]) / minXInterval_1, "fr"); })
+                .join(' ');
+            var columnNumber_1 = 1;
+            var lastIntervalEnd_1 = 0;
+            gridX.forEach(function (interval, index) {
+                if (interval.length === 0) {
+                    return;
+                }
+                var cellName = "x".concat(index === 0 ? '' : index + 1);
+                var annotationProps = annotations[index];
+                var xAnnotation = annotationProps === null || annotationProps === void 0 ? void 0 : annotationProps.xAnnotation;
+                if (interval[0] < lastIntervalEnd_1) {
+                    columnNumber_1 = 1;
+                }
+                lastIntervalEnd_1 = interval[1];
+                var row = {
+                    row: -1,
+                    column: columnNumber_1,
+                    xAnnotation: xAnnotation,
+                };
+                gridLayout[cellName] = row;
+                columnNumber_1 += 1;
+            });
+        }
+        var numColumns = Math.max.apply(Math, Object.values(gridLayout).map(function (cell) { var _a; return (_a = cell.column) !== null && _a !== void 0 ? _a : 0; }));
+        var columnFill = {};
+        for (var i = 1; i <= numColumns; i++) {
+            columnFill[i] = { row: 1, fillDomain: 0 };
+        }
+        if (gridY.length > 0) {
+            var uniqueYIntervals_1 = new Map();
+            gridY.forEach(function (interval) {
+                var key = "".concat(interval[0], "-").concat(interval[1]);
+                if (!uniqueYIntervals_1.has(key)) {
+                    uniqueYIntervals_1.set(key, interval);
+                }
+            });
+            var minYInterval_1 = Math.min.apply(Math, Array.from(uniqueYIntervals_1.values()).map(function (interval) { return interval[1] - interval[0]; }));
+            templateRows = Array.from(uniqueYIntervals_1.values())
+                .map(function (interval) { return "".concat((interval[1] - interval[0]) / minYInterval_1, "fr"); })
+                .join(' ');
+            gridY.forEach(function (interval, index) {
+                if (interval.length === 0) {
+                    return;
+                }
+                var cellName = "x".concat(index === 0 ? '' : index + 1);
+                var annotationProps = annotations[index];
+                var yAnnotation = annotationProps === null || annotationProps === void 0 ? void 0 : annotationProps.yAnnotation;
+                var cell = gridLayout[cellName];
+                if (cell !== undefined) {
+                    cell.row = columnFill[cell.column].row;
+                    cell.yAnnotation = yAnnotation;
+                }
+                columnFill[cell.column].fillDomain = interval[1];
+                columnFill[cell.column].row += 1;
+            });
+        }
+        // reverse the order of rows in grid layout from bottom-top to top-bottom as required by CSS grid
+        var reversedGridLayout = {};
+        // find the maximum row number
+        var maxRowNumber = Math.max.apply(Math, Object.values(gridLayout).map(function (cell) { var _a; return (_a = cell.row) !== null && _a !== void 0 ? _a : 0; }));
+        // iterate over the gridLayout and reverse the row numbers
+        Object.keys(gridLayout).forEach(function (key) {
+            var cell = gridLayout[key];
+            if (cell.row !== undefined) {
+                // reverse the row number
+                cell.row = maxRowNumber - cell.row + 1;
+            }
+            reversedGridLayout[key] = cell;
+        });
+        return {
+            templateRows: templateRows,
+            templateColumns: templateColumns,
+            layout: reversedGridLayout,
+        };
+    };
+    exports.getGridProperties = getGridProperties;
 });
 //# sourceMappingURL=PlotlySchemaAdapter.js.map