@fluentui/react-charting 5.25.0 → 5.25.2

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

@@ -1,6 +1,6 @@
 "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;
 var tslib_1 = require("tslib");
 var d3_array_1 = require("d3-array");
@@ -192,7 +192,9 @@ var getSecondaryYAxisValues = function (data, layout) {
         },
     };
 };
-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);
 };
@@ -217,6 +219,27 @@ var resolveXAxisPoint = function (x, isXYearCategory, isXString, isXDate, isXNum
     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
@@ -262,6 +285,14 @@ var flattenObject = function (obj, prefix) {
     }
     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;
@@ -627,10 +658,11 @@ var convertPlotlyAnnotation = function (annotation, layout, data, index) {
         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 = {};
@@ -738,6 +770,16 @@ var convertPlotlyAnnotation = function (annotation, layout, data, index) {
             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;
     }
@@ -838,7 +880,39 @@ var normalizeObjectArrayForGVBC = function (data, xLabels) {
     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
@@ -919,13 +993,15 @@ var transformPlotlyJsonToDonutProps = function (input, isMultiPlot, colorMap, co
     };
 };
 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));
@@ -992,15 +1068,20 @@ var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorMap, col
             });
         });
     });
-    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;
         };
@@ -1023,27 +1104,33 @@ var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorMap, col
         };
         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);
@@ -1140,10 +1227,12 @@ var transformPlotlyJsonToGVBCProps = function (input, isMultiPlot, colorMap, col
         }
     });
     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;
@@ -1201,18 +1290,24 @@ var transformPlotlyJsonToVBCProps = function (input, isMultiPlot, colorMap, colo
         });
     });
     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;
@@ -1234,7 +1329,9 @@ var mapColorFillBars = function (layout) {
         };
     });
 };
-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',
@@ -1321,12 +1418,21 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
     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;
@@ -1358,8 +1464,8 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
         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),
@@ -1377,10 +1483,10 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
         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);
     }
@@ -1393,7 +1499,9 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
             })()));
     }
 };
-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;
@@ -1440,7 +1548,9 @@ var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, isMultiPl
             : ((_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;
@@ -1509,7 +1619,9 @@ var transformPlotlyJsonToGanttChartProps = function (input, isMultiPlot, colorMa
     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 = [];
@@ -1624,7 +1736,9 @@ var transformPlotlyJsonToHeatmapProps = function (input, isMultiPlot, colorMap,
     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 : [])
@@ -1673,7 +1787,9 @@ var transformPlotlyJsonToSankeyProps = function (input, isMultiPlot, colorMap, c
     };
 };
 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;
@@ -1796,7 +1912,9 @@ function mergeCells(tableCells, templateCells) {
         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) {
@@ -1903,7 +2021,9 @@ function getCategoriesAndValues(series) {
         }
     }
 }
-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
@@ -2286,7 +2406,9 @@ var getLegendShape = function (series) {
     }
     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) {
@@ -2391,7 +2513,7 @@ var getIndexFromKey = function (key, pattern) {
     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) {