@fluentui/react-charting 5.25.0 → 5.25.2

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-shape", "./PlotlyColorAdapter", "d3-color", "@fluentui/react"], 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, d3_color_1, react_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.getGridProperties = exports.isNonPlotType = exports.getValidXYRanges = exports.getNumberAtIndexOrDefault = exports.getAllupLegendsProps = exports.projectPolarToCartesian = exports.transformPlotlyJsonToFunnelChartProps = exports.transformPlotlyJsonToChartTableProps = exports.transformPlotlyJsonToGaugeProps = exports.transformPlotlyJsonToSankeyProps = exports.transformPlotlyJsonToHeatmapProps = exports.transformPlotlyJsonToGanttChartProps = exports.transformPlotlyJsonToHorizontalBarWithAxisProps = exports.transformPlotlyJsonToScatterChartProps = exports.transformPlotlyJsonToLineChartProps = exports.transformPlotlyJsonToAreaChartProps = exports.transformPlotlyJsonToVBCProps = exports.transformPlotlyJsonToGVBCProps = exports.transformPlotlyJsonToVSBCProps = exports.transformPlotlyJsonToDonutProps = exports.normalizeObjectArrayForGVBC = exports.resolveXAxisPoint = exports._getGaugeAxisColor = exports.correctYearMonth = exports.SINGLE_REPEAT = exports.NON_PLOT_KEY_PREFIX = void 0;
+    exports.getGridProperties = exports.isNonPlotType = exports.getValidXYRanges = exports.getNumberAtIndexOrDefault = exports.getAllupLegendsProps = exports.projectPolarToCartesian = exports.transformPlotlyJsonToFunnelChartProps = exports.transformPlotlyJsonToChartTableProps = exports.transformPlotlyJsonToGaugeProps = exports.transformPlotlyJsonToSankeyProps = exports.transformPlotlyJsonToHeatmapProps = exports.transformPlotlyJsonToGanttChartProps = exports.transformPlotlyJsonToHorizontalBarWithAxisProps = exports.transformPlotlyJsonToScatterChartProps = exports.transformPlotlyJsonToLineChartProps = exports.transformPlotlyJsonToAreaChartProps = exports.transformPlotlyJsonToVBCProps = exports.transformPlotlyJsonToGVBCProps = exports.transformPlotlyJsonToVSBCProps = exports.transformPlotlyJsonToDonutProps = exports.transformPlotlyJsonToAnnotationChartProps = exports.normalizeObjectArrayForGVBC = exports.resolveXAxisPoint = exports._getGaugeAxisColor = exports.correctYearMonth = exports.SINGLE_REPEAT = exports.NON_PLOT_KEY_PREFIX = void 0;
     exports.findArrayAttributes = findArrayAttributes;
     exports.NON_PLOT_KEY_PREFIX = 'nonplot_';
     exports.SINGLE_REPEAT = 'repeat(1, 1fr)';
@@ -181,7 +181,9 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             },
         };
     };
-    var _getGaugeAxisColor = function (colorway, colorwayType, color, colorMap, isDarkTheme) {
+    var _getGaugeAxisColor = function (colorway, colorwayType, color, 
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    colorMap, isDarkTheme) {
         var extractedColors = (0, PlotlyColorAdapter_1.extractColor)(colorway, colorwayType, color, colorMap, isDarkTheme);
         return (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, 0, '', colorMap, colorway, isDarkTheme);
     };
@@ -206,6 +208,27 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         return x;
     };
     exports.resolveXAxisPoint = resolveXAxisPoint;
+    /**
+     * Extracts unique X-axis categories from Plotly data traces
+     * @param data Array of Plotly data traces
+     * @returns Array of unique x values
+     */
+    var extractXCategories = function (data) {
+        return Array.from(new Set((data !== null && data !== void 0 ? data : [])
+            .flatMap(function (trace) {
+            var xData = trace.x;
+            if (!xData) {
+                return [];
+            }
+            if (Array.isArray(xData)) {
+                return xData.flat().map(function (x) {
+                    return x;
+                });
+            }
+            return [];
+        })
+            .filter(function (x) { return x !== undefined && x !== null; })));
+    };
     /**
      * Checks if a key should be ignored during normalization
      * @param key The key to check
@@ -251,6 +274,14 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         }
         return flattened;
     };
+    var encodeHtmlEntities = function (value) {
+        return value
+            .replace(/&/g, '&')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#39;');
+    };
     var toFiniteNumber = function (value) {
         if (value === undefined || value === null) {
             return undefined;
@@ -616,10 +647,11 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             return undefined;
         }
         var textValue = annotation.text;
-        var text = textValue === undefined || textValue === null ? '' : String(textValue);
+        var rawText = textValue === undefined || textValue === null ? '' : String(textValue);
+        var encodedText = encodeHtmlEntities(rawText);
         var chartAnnotation = {
-            id: createAnnotationId(text, index),
-            text: text,
+            id: createAnnotationId(encodedText, index),
+            text: encodedText,
             coordinates: coordinates,
         };
         var layoutProps = {};
@@ -727,6 +759,16 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                 styleProps.fontWeight = font.weight;
             }
         }
+        var textAngle = annotation === null || annotation === void 0 ? void 0 : annotation.textangle;
+        if (typeof textAngle === 'number' && !Number.isNaN(textAngle)) {
+            styleProps.rotation = textAngle;
+        }
+        else if (typeof textAngle === 'string' && textAngle.toLowerCase() !== 'auto') {
+            var parsedAngle = Number(textAngle);
+            if (!Number.isNaN(parsedAngle)) {
+                styleProps.rotation = parsedAngle;
+            }
+        }
         if (Object.keys(layoutProps).length > 0) {
             chartAnnotation.layout = layoutProps;
         }
@@ -827,7 +869,39 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         return { traces: traces, x: x };
     };
     exports.normalizeObjectArrayForGVBC = normalizeObjectArrayForGVBC;
-    var transformPlotlyJsonToDonutProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
+    var transformPlotlyJsonToAnnotationChartProps = function (input, isMultiPlot, 
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    _colorMap, _colorwayType, _isDarkTheme) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        var annotations = (_a = getChartAnnotationsFromLayout(input.layout, input.data, isMultiPlot)) !== null && _a !== void 0 ? _a : [];
+        var titles = getTitles(input.layout);
+        var layoutTitle = titles.chartTitle || undefined;
+        var layoutWithMeta = input.layout;
+        var description = typeof ((_b = layoutWithMeta === null || layoutWithMeta === void 0 ? void 0 : layoutWithMeta.meta) === null || _b === void 0 ? void 0 : _b.description) === 'string' ? layoutWithMeta.meta.description : undefined;
+        var width = typeof ((_c = input.layout) === null || _c === void 0 ? void 0 : _c.width) === 'number' ? input.layout.width : undefined;
+        var height = typeof ((_d = input.layout) === null || _d === void 0 ? void 0 : _d.height) === 'number' ? input.layout.height : undefined;
+        var paperBackgroundColor = typeof ((_e = input.layout) === null || _e === void 0 ? void 0 : _e.paper_bgcolor) === 'string' ? input.layout.paper_bgcolor : undefined;
+        var plotBackgroundColor = typeof ((_f = input.layout) === null || _f === void 0 ? void 0 : _f.plot_bgcolor) === 'string' ? input.layout.plot_bgcolor : undefined;
+        var fontColor = typeof ((_h = (_g = input.layout) === null || _g === void 0 ? void 0 : _g.font) === null || _h === void 0 ? void 0 : _h.color) === 'string' ? input.layout.font.color : undefined;
+        var fontFamily = typeof ((_k = (_j = input.layout) === null || _j === void 0 ? void 0 : _j.font) === null || _k === void 0 ? void 0 : _k.family) === 'string' ? input.layout.font.family : undefined;
+        var margin = (_l = input.layout) === null || _l === void 0 ? void 0 : _l.margin;
+        return {
+            annotations: annotations,
+            chartTitle: layoutTitle,
+            description: description,
+            width: width,
+            height: height,
+            paperBackgroundColor: paperBackgroundColor,
+            plotBackgroundColor: plotBackgroundColor,
+            fontColor: fontColor,
+            fontFamily: fontFamily,
+            margin: margin,
+        };
+    };
+    exports.transformPlotlyJsonToAnnotationChartProps = transformPlotlyJsonToAnnotationChartProps;
+    var transformPlotlyJsonToDonutProps = function (input, isMultiPlot, 
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    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
@@ -908,13 +982,15 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         };
     };
     exports.transformPlotlyJsonToDonutProps = transformPlotlyJsonToDonutProps;
-    var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme, fallbackVSBC) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+    var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, 
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    colorMap, colorwayType, isDarkTheme, fallbackVSBC) {
+        var _a, _b, _c, _d, _e, _f;
         var mapXToDataPoints = {};
         var yMaxValue = 0;
         var yMinValue = 0;
         var secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout);
-        var _j = getLegendProps(input.data, input.layout, isMultiPlot), legends = _j.legends, hideLegend = _j.hideLegend;
+        var _g = getLegendProps(input.data, input.layout, isMultiPlot), legends = _g.legends, hideLegend = _g.hideLegend;
         var colorScale = undefined;
         var yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
         var resolveXValue = getAxisValueResolver(getAxisType(input.data, getAxisObjects(input.data, input.layout).x));
@@ -981,15 +1057,20 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                 });
             });
         });
-        var xCategories = (_b = (_a = input.data[0]) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : [];
-        ((_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.shapes) !== null && _d !== void 0 ? _d : [])
+        var xCategories = extractXCategories(input.data);
+        ((_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.shapes) !== null && _b !== void 0 ? _b : [])
             .filter(function (shape) { return shape.type === 'line'; })
             .forEach(function (shape, shapeIdx) {
             var _a, _b, _c;
             var lineColor = (_a = shape.line) === null || _a === void 0 ? void 0 : _a.color;
             var resolveX = function (val) {
-                if (typeof val === 'number' && Array.isArray(xCategories) && xCategories[val] !== undefined) {
-                    return xCategories[val];
+                if (typeof val === 'number' && Array.isArray(xCategories)) {
+                    if (xCategories[val] !== undefined) {
+                        return xCategories[val];
+                    }
+                    else {
+                        return xCategories[shapeIdx];
+                    }
                 }
                 return val;
             };
@@ -1012,27 +1093,33 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             };
             var y0Val = resolveY(shape.y0);
             var y1Val = resolveY(shape.y1);
-            mapXToDataPoints[x0Key].lineData.push({
-                legend: "Reference_".concat(shapeIdx),
-                y: y0Val,
-                color: (_b = (0, d3_color_1.rgb)(lineColor).formatHex8()) !== null && _b !== void 0 ? _b : lineColor,
-                lineOptions: getLineOptions(shape.line),
-                useSecondaryYScale: false,
-            });
-            mapXToDataPoints[x1Key].lineData.push({
-                legend: "Reference_".concat(shapeIdx),
-                y: y1Val,
-                color: (_c = (0, d3_color_1.rgb)(lineColor).formatHex8()) !== null && _c !== void 0 ? _c : lineColor,
-                lineOptions: getLineOptions(shape.line),
-                useSecondaryYScale: false,
-            });
+            if (mapXToDataPoints[x0Key]) {
+                mapXToDataPoints[x0Key].lineData.push({
+                    legend: "Reference_".concat(shapeIdx),
+                    y: y0Val,
+                    color: (_b = (0, d3_color_1.rgb)(lineColor).formatHex8()) !== null && _b !== void 0 ? _b : lineColor,
+                    lineOptions: getLineOptions(shape.line),
+                    useSecondaryYScale: false,
+                });
+            }
+            if (mapXToDataPoints[x1Key]) {
+                mapXToDataPoints[x1Key].lineData.push({
+                    legend: "Reference_".concat(shapeIdx),
+                    y: y1Val,
+                    color: (_c = (0, d3_color_1.rgb)(lineColor).formatHex8()) !== null && _c !== void 0 ? _c : lineColor,
+                    lineOptions: getLineOptions(shape.line),
+                    useSecondaryYScale: false,
+                });
+            }
         });
         var vsbcData = Object.values(mapXToDataPoints);
         var annotations = getChartAnnotationsFromLayout(input.layout, input.data, isMultiPlot);
-        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: vsbcData, 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, barWidth: 'auto', yMaxValue: yMaxValue, yMinValue: yMinValue, mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, supportNegativeData: true, barGapMax: 2, showYAxisLables: true, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, wrapXAxisLables: typeof ((_h = vsbcData[0]) === null || _h === void 0 ? void 0 : _h.xAxisPoint) === 'string' }), getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getYMinMaxValues(input.data[0], input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat), getBarProps(input.data, input.layout)), getAxisTickProps(input.data, input.layout)), (annotations ? { annotations: annotations } : {}));
+        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: vsbcData, width: (_c = input.layout) === null || _c === void 0 ? void 0 : _c.width, height: (_e = (_d = input.layout) === null || _d === void 0 ? void 0 : _d.height) !== null && _e !== void 0 ? _e : 350, barWidth: 'auto', yMaxValue: yMaxValue, yMinValue: yMinValue, mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, supportNegativeData: true, barGapMax: 2, showYAxisLables: true, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, wrapXAxisLables: typeof ((_f = vsbcData[0]) === null || _f === void 0 ? void 0 : _f.xAxisPoint) === 'string' }), getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getYMinMaxValues(input.data[0], input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat), getBarProps(input.data, input.layout)), getAxisTickProps(input.data, input.layout)), (annotations ? { annotations: annotations } : {}));
     };
     exports.transformPlotlyJsonToVSBCProps = transformPlotlyJsonToVSBCProps;
-    var transformPlotlyJsonToGVBCProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
+    var transformPlotlyJsonToGVBCProps = function (input, isMultiPlot, 
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    colorMap, colorwayType, isDarkTheme) {
         var _a, _b, _c;
         // Handle object arrays in y values by normalizing the data first
         var processedInput = tslib_1.__assign({}, input);
@@ -1129,10 +1216,12 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             }
         });
         var annotations = getChartAnnotationsFromLayout(processedInput.layout, processedInput.data, isMultiPlot);
-        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ dataV2: gvbcDataV2, width: (_a = processedInput.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = processedInput.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350, barwidth: 'auto', mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, wrapXAxisLables: true }), getTitles(processedInput.layout)), getAxisCategoryOrderProps(processedInput.data, processedInput.layout)), getYMinMaxValues(processedInput.data[0], processedInput.layout)), getXAxisTickFormat(processedInput.data[0], processedInput.layout)), yAxisTickFormat), getBarProps(processedInput.data, processedInput.layout)), getAxisTickProps(processedInput.data, processedInput.layout)), (annotations ? { annotations: annotations } : {}));
+        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ dataV2: gvbcDataV2, width: (_a = processedInput.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = processedInput.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350, barwidth: 'auto', mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, wrapXAxisLables: true, showYAxisLables: true }), getTitles(processedInput.layout)), getAxisCategoryOrderProps(processedInput.data, processedInput.layout)), getYMinMaxValues(processedInput.data[0], processedInput.layout)), getXAxisTickFormat(processedInput.data[0], processedInput.layout)), yAxisTickFormat), getBarProps(processedInput.data, processedInput.layout)), getAxisTickProps(processedInput.data, processedInput.layout)), (annotations ? { annotations: annotations } : {}));
     };
     exports.transformPlotlyJsonToGVBCProps = transformPlotlyJsonToGVBCProps;
-    var transformPlotlyJsonToVBCProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
+    var transformPlotlyJsonToVBCProps = function (input, isMultiPlot, 
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    colorMap, colorwayType, isDarkTheme) {
         var _a, _b, _c, _d;
         var vbcData = [];
         var _e = getLegendProps(input.data, input.layout, isMultiPlot), legends = _e.legends, hideLegend = _e.hideLegend;
@@ -1190,18 +1279,24 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             });
         });
         var annotations = getChartAnnotationsFromLayout(input.layout, input.data, isMultiPlot);
-        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: vbcData, 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, mode: 'histogram', hideTickOverlap: true, maxBarWidth: 50, hideLegend: hideLegend, roundCorners: true, wrapXAxisLables: typeof ((_d = vbcData[0]) === null || _d === void 0 ? void 0 : _d.x) === 'string' }, getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getYMinMaxValues(input.data[0], input.layout)), (annotations ? { annotations: annotations } : {}));
+        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: vbcData, 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, mode: 'histogram', hideTickOverlap: true, maxBarWidth: 50, hideLegend: hideLegend, roundCorners: true, wrapXAxisLables: typeof ((_d = vbcData[0]) === null || _d === void 0 ? void 0 : _d.x) === 'string', showYAxisLables: true }, getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getYMinMaxValues(input.data[0], input.layout)), (annotations ? { annotations: annotations } : {}));
     };
     exports.transformPlotlyJsonToVBCProps = transformPlotlyJsonToVBCProps;
-    var transformPlotlyJsonToAreaChartProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
+    var transformPlotlyJsonToAreaChartProps = function (input, isMultiPlot, 
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    colorMap, colorwayType, isDarkTheme) {
         return transformPlotlyJsonToScatterTraceProps(input, isMultiPlot, 'area', colorMap, colorwayType, isDarkTheme);
     };
     exports.transformPlotlyJsonToAreaChartProps = transformPlotlyJsonToAreaChartProps;
-    var transformPlotlyJsonToLineChartProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
+    var transformPlotlyJsonToLineChartProps = function (input, isMultiPlot, 
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    colorMap, colorwayType, isDarkTheme) {
         return transformPlotlyJsonToScatterTraceProps(input, isMultiPlot, 'line', colorMap, colorwayType, isDarkTheme);
     };
     exports.transformPlotlyJsonToLineChartProps = transformPlotlyJsonToLineChartProps;
-    var transformPlotlyJsonToScatterChartProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
+    var transformPlotlyJsonToScatterChartProps = function (input, isMultiPlot, 
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    colorMap, colorwayType, isDarkTheme) {
         return transformPlotlyJsonToScatterTraceProps(input, isMultiPlot, 'scatter', colorMap, colorwayType, isDarkTheme);
     };
     exports.transformPlotlyJsonToScatterChartProps = transformPlotlyJsonToScatterChartProps;
@@ -1223,7 +1318,9 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             };
         });
     };
-    var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chartType, colorMap, colorwayType, isDarkTheme) {
+    var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chartType, 
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    colorMap, colorwayType, isDarkTheme) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
         var isScatterMarkers = [
             'text',
@@ -1310,12 +1407,21 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         var xMaxValue = (_e = (_d = chartData[0]) === null || _d === void 0 ? void 0 : _d.data[chartData[0].data.length - 1]) === null || _e === void 0 ? void 0 : _e.x;
         var yMinValue = (_g = (_f = chartData[0]) === null || _f === void 0 ? void 0 : _f.data[0]) === null || _g === void 0 ? void 0 : _g.y;
         var yMaxValue = (_j = (_h = chartData[0]) === null || _h === void 0 ? void 0 : _h.data[chartData[0].data.length - 1]) === null || _j === void 0 ? void 0 : _j.y;
+        var xCategories = extractXCategories(input.data);
         var lineShape = ((_l = (_k = input.layout) === null || _k === void 0 ? void 0 : _k.shapes) !== null && _l !== void 0 ? _l : [])
             .filter(function (shape) { return shape.type === 'line'; })
             .map(function (shape, shapeIdx) {
             var _a, _b;
             var lineColor = (_a = shape.line) === null || _a === void 0 ? void 0 : _a.color;
             var resolveX = function (val) {
+                if (typeof val === 'number' && Array.isArray(xCategories)) {
+                    if (xCategories[val] !== undefined) {
+                        return xCategories[val];
+                    }
+                    else {
+                        return xCategories[shapeIdx];
+                    }
+                }
                 if (shape.xref === 'paper') {
                     if (val === 0) {
                         return xMinValue;
@@ -1347,8 +1453,8 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             return {
                 legend: "Reference_".concat(shapeIdx),
                 data: [
-                    { x: resolveX(shape.x0), y: resolveY(shape.y0) },
-                    { x: resolveX(shape.x1), y: resolveY(shape.y1) },
+                    { x: resolveXValue(resolveX(shape.x0)), y: resolveY(shape.y0) },
+                    { x: resolveXValue(resolveX(shape.x1)), y: resolveY(shape.y1) },
                 ],
                 color: (_b = (0, d3_color_1.rgb)(lineColor).formatHex8()) !== null && _b !== void 0 ? _b : lineColor,
                 lineOptions: getLineOptions(shape.line),
@@ -1366,10 +1472,10 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             lineChartData: tslib_1.__spreadArray(tslib_1.__spreadArray([], chartData, true), lineShape, true),
         };
         var scatterChartProps = {
-            scatterChartData: chartData,
+            scatterChartData: tslib_1.__spreadArray(tslib_1.__spreadArray([], chartData, true), lineShape, true),
         };
         var annotations = getChartAnnotationsFromLayout(input.layout, input.data, isMultiPlot);
-        var commonProps = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ supportNegativeData: true }, secondaryYAxisValues), { width: (_m = input.layout) === null || _m === void 0 ? void 0 : _m.width, height: (_p = (_o = input.layout) === null || _o === void 0 ? void 0 : _o.height) !== null && _p !== void 0 ? _p : 350, hideTickOverlap: true, hideLegend: hideLegend, useUTC: false, optimizeLargeData: numDataPoints > 1000, shouldWrapLabels: shouldWrapLabels }), getTitles(input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat), getAxisScaleTypeProps(input.data, input.layout)), getAxisTickProps(input.data, input.layout)), (annotations ? { annotations: annotations } : {}));
+        var commonProps = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ supportNegativeData: true }, secondaryYAxisValues), { width: (_m = input.layout) === null || _m === void 0 ? void 0 : _m.width, height: (_p = (_o = input.layout) === null || _o === void 0 ? void 0 : _o.height) !== null && _p !== void 0 ? _p : 350, hideTickOverlap: true, hideLegend: hideLegend, useUTC: false, optimizeLargeData: numDataPoints > 1000, wrapXAxisLables: shouldWrapLabels, showYAxisLables: true }), getTitles(input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat), getAxisScaleTypeProps(input.data, input.layout)), getAxisTickProps(input.data, input.layout)), (annotations ? { annotations: annotations } : {}));
         if (isAreaChart) {
             return tslib_1.__assign({ data: chartProps, mode: mode }, commonProps);
         }
@@ -1382,7 +1488,9 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                 })()));
         }
     };
-    var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
+    var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, isMultiPlot, 
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    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, isMultiPlot), legends = _s.legends, hideLegend = _s.hideLegend;
         var colorScale = undefined;
@@ -1429,7 +1537,9 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                 : ((_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, height: chartHeight, width: (_r = input.layout) === null || _r === void 0 ? void 0 : _r.width, hideTickOverlap: true, hideLegend: hideLegend, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, roundCorners: true }, getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getBarProps(input.data, input.layout, true)), getAxisTickProps(input.data, input.layout));
     };
     exports.transformPlotlyJsonToHorizontalBarWithAxisProps = transformPlotlyJsonToHorizontalBarWithAxisProps;
-    var transformPlotlyJsonToGanttChartProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
+    var transformPlotlyJsonToGanttChartProps = function (input, isMultiPlot, 
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    colorMap, colorwayType, isDarkTheme) {
         var _a, _b, _c;
         var data = input.data.filter(function (series) { return series.type !== 'scatter' || series.mode !== 'markers'; });
         var _d = getLegendProps(data, input.layout, isMultiPlot), legends = _d.legends, hideLegend = _d.hideLegend;
@@ -1498,7 +1608,9 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: ganttData, showYAxisLables: true, height: (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : 350, width: (_c = input.layout) === null || _c === void 0 ? void 0 : _c.width, hideTickOverlap: true, hideLegend: hideLegend, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, roundCorners: true, useUTC: false }, getTitles(input.layout)), getAxisCategoryOrderProps(data, input.layout)), getBarProps(data, input.layout, true)), getAxisTickProps(data, input.layout));
     };
     exports.transformPlotlyJsonToGanttChartProps = transformPlotlyJsonToGanttChartProps;
-    var transformPlotlyJsonToHeatmapProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
+    var transformPlotlyJsonToHeatmapProps = function (input, isMultiPlot, 
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    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 = [];
@@ -1613,7 +1725,9 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: [heatmapData], domainValuesForColorScale: domainValuesForColorScale, rangeValuesForColorScale: rangeValuesForColorScale, hideLegend: true, showYAxisLables: true, sortOrder: 'none', width: (_6 = input.layout) === null || _6 === void 0 ? void 0 : _6.width, height: (_8 = (_7 = input.layout) === null || _7 === void 0 ? void 0 : _7.height) !== null && _8 !== void 0 ? _8 : 350, hideTickOverlap: true, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, wrapXAxisLables: true }, getTitles(input.layout)), getAxisCategoryOrderProps([firstData], input.layout)), getAxisTickProps(input.data, input.layout));
     };
     exports.transformPlotlyJsonToHeatmapProps = transformPlotlyJsonToHeatmapProps;
-    var transformPlotlyJsonToSankeyProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
+    var transformPlotlyJsonToSankeyProps = function (input, isMultiPlot, 
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    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 : [])
@@ -1662,7 +1776,9 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         };
     };
     exports.transformPlotlyJsonToSankeyProps = transformPlotlyJsonToSankeyProps;
-    var transformPlotlyJsonToGaugeProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
+    var transformPlotlyJsonToGaugeProps = function (input, isMultiPlot, 
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    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, _26, _27, _28, _29, _30, _31;
         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;
@@ -1785,7 +1901,9 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             suffix: (_k = tableCells === null || tableCells === void 0 ? void 0 : tableCells.suffix) !== null && _k !== void 0 ? _k : templateCells === null || templateCells === void 0 ? void 0 : templateCells.suffix,
         };
     }
-    var transformPlotlyJsonToChartTableProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
+    var transformPlotlyJsonToChartTableProps = function (input, isMultiPlot, 
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    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;
         var tableData = input.data[0];
         var normalizeHeaders = function (values, header) {
@@ -1892,7 +2010,9 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             }
         }
     }
-    var transformPlotlyJsonToFunnelChartProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
+    var transformPlotlyJsonToFunnelChartProps = function (input, isMultiPlot, 
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    colorMap, colorwayType, isDarkTheme) {
         var _a, _b, _c, _d;
         var funnelData = [];
         // Determine if data is stacked based on multiple series with multiple values per series
@@ -2275,7 +2395,9 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         }
         return 'default';
     };
-    var getAllupLegendsProps = function (input, colorMap, colorwayType, traceInfo, isDarkTheme) {
+    var getAllupLegendsProps = function (input, 
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    colorMap, colorwayType, traceInfo, 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) {
@@ -2380,7 +2502,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         return parseInt(normalizedKey, 10) - 1;
     };
     var isNonPlotType = function (chartType) {
-        return ['donut', 'sankey', 'pie'].includes(chartType);
+        return ['donut', 'sankey', 'pie', 'annotation'].includes(chartType);
     };
     exports.isNonPlotType = isNonPlotType;
     var getGridProperties = function (schema, isMultiPlot, validTracesInfo) {