@fluentui/react-charts 9.3.4 → 9.3.6

package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js

@@ -205,6 +205,24 @@ export const resolveXAxisPoint = (x, isXYearCategory, isXString, isXDate, isXNum
     }
     return x;
 };
+/**
+ * Extracts unique X-axis categories from Plotly data traces
+ * @param data Array of Plotly data traces
+ * @returns Array of unique x values
+ */ const extractXCategories = (data)=>{
+    return Array.from(new Set((data !== null && data !== void 0 ? data : []).flatMap((trace)=>{
+        const xData = trace.x;
+        if (!xData) {
+            return [];
+        }
+        if (Array.isArray(xData)) {
+            return xData.flat().map((x)=>{
+                return x;
+            });
+        }
+        return [];
+    }).filter((x)=>x !== undefined && x !== null)));
+};
 /**
  * Checks if a key should be ignored during normalization
  * @param key The key to check
@@ -243,6 +261,526 @@ export const resolveXAxisPoint = (x, isXYearCategory, isXString, isXDate, isXNum
     }
     return flattened;
 };
+const encodeHtmlEntities = (value)=>value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+const toFiniteNumber = (value)=>{
+    if (value === undefined || value === null) {
+        return undefined;
+    }
+    const numeric = typeof value === 'number' ? value : Number(value);
+    return Number.isFinite(numeric) ? numeric : undefined;
+};
+/**
+ * Normalizes Plotly axis reference strings so equivalent aliases (e.g. `xaxis1`, `x1`) collapse to the base axis id.
+ */ const normalizeAxisRef = (ref, axis)=>{
+    if (!ref) {
+        return axis;
+    }
+    const normalized = ref.toLowerCase();
+    if (normalized === axis || normalized === `${axis}axis` || normalized === `${axis}axis1` || normalized === `${axis}1`) {
+        return axis;
+    }
+    const match = normalized.match(/^([xy])(axis)?(\d+)$/);
+    if (match && match[1] === axis && match[3]) {
+        return match[3] === '1' ? axis : `${axis}${match[3]}`;
+    }
+    return normalized;
+};
+/**
+ * Scans the data traces bound to a given axis and returns the numeric min/max values plotted on that axis.
+ */ const getAxisNumericRangeFromData = (axis, ref, layout, data)=>{
+    if (!data || data.length === 0) {
+        return undefined;
+    }
+    const axisLayout = getAxisLayoutByRef(layout, ref, axis);
+    const targetRef = normalizeAxisRef(ref, axis);
+    const traceAxisKey = axis === 'x' ? 'xaxis' : 'yaxis';
+    let minValue;
+    let maxValue;
+    data.forEach((trace)=>{
+        const plotTrace = trace;
+        const traceAxisRef = normalizeAxisRef(plotTrace[traceAxisKey], axis);
+        if (traceAxisRef !== targetRef) {
+            return;
+        }
+        const values = axis === 'x' ? plotTrace.x : plotTrace.y;
+        if (!isArrayOrTypedArray(values)) {
+            return;
+        }
+        const arrayLike = values;
+        for(let index = 0; index < arrayLike.length; index++){
+            const value = arrayLike[index];
+            const numeric = toNumericValue(convertDataValue(value, axisLayout));
+            if (numeric === undefined || Number.isNaN(numeric)) {
+                continue;
+            }
+            minValue = minValue === undefined ? numeric : Math.min(minValue, numeric);
+            maxValue = maxValue === undefined ? numeric : Math.max(maxValue, numeric);
+        }
+    });
+    if (minValue === undefined || maxValue === undefined || minValue === maxValue) {
+        return undefined;
+    }
+    return [
+        minValue,
+        maxValue
+    ];
+};
+/**
+ * Converts Plotly's bottom-origin relative Y coordinate into the SVG top-origin space used by our overlay.
+ */ const transformRelativeYForChart = (value)=>{
+    if (value === undefined) {
+        return undefined;
+    }
+    if (!Number.isFinite(value)) {
+        return undefined;
+    }
+    return 1 - value;
+};
+const mapHorizontalAlign = (anchor)=>{
+    switch((anchor !== null && anchor !== void 0 ? anchor : '').toLowerCase()){
+        case 'left':
+            return 'start';
+        case 'center':
+            return 'center';
+        case 'right':
+            return 'end';
+        default:
+            return undefined;
+    }
+};
+const mapVerticalAlign = (anchor)=>{
+    switch((anchor !== null && anchor !== void 0 ? anchor : '').toLowerCase()){
+        case 'top':
+            return 'top';
+        case 'middle':
+            return 'middle';
+        case 'bottom':
+            return 'bottom';
+        default:
+            return undefined;
+    }
+};
+const appendPx = (value)=>{
+    if (value === undefined || value === null) {
+        return undefined;
+    }
+    if (typeof value === 'string') {
+        return value;
+    }
+    if (typeof value === 'number' && Number.isFinite(value)) {
+        return `${value}px`;
+    }
+    return undefined;
+};
+/**
+ * Maps Plotly's axis reference string to one of our coordinate interpretation modes (axis, relative, or pixel).
+ */ const resolveRefType = (ref, axis)=>{
+    if (!ref) {
+        return 'axis';
+    }
+    const normalized = ref.toLowerCase();
+    if (normalized === 'pixel') {
+        return 'pixel';
+    }
+    if (normalized === 'paper') {
+        return 'relative';
+    }
+    if (normalized.endsWith(' domain')) {
+        return normalized.startsWith(axis) ? 'relative' : undefined;
+    }
+    const match = normalized.match(/^([xy])(\d*)$/);
+    if (match && match[1] === axis) {
+        return 'axis';
+    }
+    return undefined;
+};
+/**
+ * Retrieves the appropriate axis layout section from Plotly's layout given an axis reference alias.
+ */ const getAxisLayoutByRef = (layout, ref, axis)=>{
+    if (!layout) {
+        return undefined;
+    }
+    const defaultAxisKey = `${axis}axis`;
+    if (!ref) {
+        return layout[defaultAxisKey];
+    }
+    const normalized = ref.toLowerCase();
+    if (normalized === 'paper' || normalized === 'pixel' || normalized.endsWith(' domain')) {
+        return layout[defaultAxisKey];
+    }
+    const match = normalized.match(/^([xy])(\d*)$/);
+    if (match && match[1] === axis) {
+        const index = match[2];
+        if (index && index !== '' && index !== '1') {
+            const axisKey = `${axis}axis${index}`;
+            return layout[axisKey];
+        }
+        return layout[defaultAxisKey];
+    }
+    return layout[defaultAxisKey];
+};
+/**
+ * Normalizes raw Plotly data values into canonical number/date/string types based on axis configuration.
+ */ const convertDataValue = (value, axisLayout)=>{
+    if (value === undefined || value === null) {
+        return undefined;
+    }
+    if ((axisLayout === null || axisLayout === void 0 ? void 0 : axisLayout.type) === 'date' || isDate(value)) {
+        const dateValue = value instanceof Date ? value : new Date(value);
+        return Number.isNaN(dateValue.getTime()) ? undefined : dateValue;
+    }
+    if (typeof value === 'number') {
+        return value;
+    }
+    if ((axisLayout === null || axisLayout === void 0 ? void 0 : axisLayout.type) === 'linear' || (axisLayout === null || axisLayout === void 0 ? void 0 : axisLayout.type) === 'log') {
+        const numeric = Number(value);
+        return Number.isFinite(numeric) ? numeric : undefined;
+    }
+    if (value instanceof Date) {
+        return value;
+    }
+    return value;
+};
+const toNumericValue = (value)=>{
+    if (value instanceof Date) {
+        const timestamp = value.getTime();
+        return Number.isFinite(timestamp) ? timestamp : undefined;
+    }
+    if (typeof value === 'number') {
+        return Number.isFinite(value) ? value : undefined;
+    }
+    if (typeof value === 'string') {
+        const numeric = Number(value);
+        return Number.isFinite(numeric) ? numeric : undefined;
+    }
+    return undefined;
+};
+const toRelativeCoordinate = (value, axisLayout, fallbackRange)=>{
+    const range = Array.isArray(axisLayout === null || axisLayout === void 0 ? void 0 : axisLayout.range) ? axisLayout.range : undefined;
+    let start = range && range.length >= 2 ? toNumericValue(convertDataValue(range[0], axisLayout)) : undefined;
+    let end = range && range.length >= 2 ? toNumericValue(convertDataValue(range[1], axisLayout)) : undefined;
+    if ((start === undefined || end === undefined || start === end) && fallbackRange) {
+        [start, end] = fallbackRange;
+    }
+    const current = toNumericValue(convertDataValue(value, axisLayout));
+    if (start === undefined || end === undefined || current === undefined || start === end) {
+        return undefined;
+    }
+    const relative = (current - start) / (end - start);
+    return Number.isFinite(relative) ? relative : undefined;
+};
+const createAnnotationId = (text, index)=>{
+    const normalized = text.replace(/\s+/g, ' ').trim();
+    if (normalized) {
+        const slug = normalized.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '').slice(0, 32);
+        if (slug) {
+            return `annotation-${index}-${slug}`;
+        }
+    }
+    return `annotation-${index}`;
+};
+const DEFAULT_ARROW_OFFSET = -40;
+const mapArrowsideToArrow = (annotation)=>{
+    let includeStart = false;
+    let includeEnd = false;
+    const arrowSide = typeof (annotation === null || annotation === void 0 ? void 0 : annotation.arrowside) === 'string' ? annotation === null || annotation === void 0 ? void 0 : annotation.arrowside.toLowerCase() : undefined;
+    if (arrowSide) {
+        includeStart = arrowSide.includes('start');
+        includeEnd = arrowSide.includes('end');
+    }
+    const endHead = toFiniteNumber(annotation === null || annotation === void 0 ? void 0 : annotation.arrowhead);
+    const startHead = toFiniteNumber(annotation.startarrowhead);
+    if (endHead !== undefined && endHead > 0) {
+        includeEnd = true;
+    }
+    if (startHead !== undefined && startHead > 0) {
+        includeStart = true;
+    }
+    if (includeStart && includeEnd) {
+        return 'both';
+    }
+    if (includeStart) {
+        return 'start';
+    }
+    if (includeEnd) {
+        return 'end';
+    }
+    return 'none';
+};
+const mapArrowDashToPattern = (value)=>{
+    if (!value) {
+        return undefined;
+    }
+    const normalized = value.trim().toLowerCase();
+    switch(normalized){
+        case 'solid':
+            return undefined;
+        case 'dot':
+            return '1, 5';
+        case 'dash':
+            return '5, 5';
+        case 'longdash':
+            return '10, 5';
+        case 'dashdot':
+            return '5, 5, 1, 5';
+        case 'longdashdot':
+            return '10, 5, 1, 5';
+        default:
+            if (/^\d+(\s|,)*\d*$/.test(normalized.replace(/\s+/g, ' '))) {
+                return normalized.replace(/\s+/g, ' ');
+            }
+            return value;
+    }
+};
+/**
+ * Converts a Plotly annotation definition into the internal `ChartAnnotation` format, translating coordinates,
+ * layout alignment, styling, and connector metadata while skipping unsupported configurations.
+ */ const convertPlotlyAnnotation = (annotation, layout, data, index)=>{
+    if (!annotation || annotation.visible === false) {
+        return undefined;
+    }
+    const xRefType = resolveRefType(annotation.xref, 'x');
+    const yRefType = resolveRefType(annotation.yref, 'y');
+    if (!xRefType || !yRefType) {
+        return undefined;
+    }
+    let coordinates;
+    if (xRefType === 'axis' && yRefType === 'axis') {
+        const xAxisLayout = getAxisLayoutByRef(layout, annotation.xref, 'x');
+        const yAxisLayout = getAxisLayoutByRef(layout, annotation.yref, 'y');
+        const xValue = convertDataValue(annotation.x, xAxisLayout);
+        const yValue = convertDataValue(annotation.y, yAxisLayout);
+        if (xValue === undefined || yValue === undefined) {
+            return undefined;
+        }
+        const yRefNormalized = typeof annotation.yref === 'string' ? annotation.yref.toLowerCase() : undefined;
+        coordinates = {
+            type: 'data',
+            x: xValue,
+            y: yValue,
+            ...yRefNormalized === 'y2' ? {
+                yAxis: 'secondary'
+            } : {}
+        };
+    } else if (xRefType === 'relative' && yRefType === 'relative') {
+        const xValue = toFiniteNumber(annotation.x);
+        const yValue = toFiniteNumber(annotation.y);
+        const chartRelativeY = transformRelativeYForChart(yValue);
+        if (xValue === undefined || chartRelativeY === undefined) {
+            return undefined;
+        }
+        coordinates = {
+            type: 'relative',
+            x: xValue,
+            y: chartRelativeY
+        };
+    } else if (xRefType === 'relative' && yRefType === 'axis') {
+        const xValue = toFiniteNumber(annotation.x);
+        const yAxisLayout = getAxisLayoutByRef(layout, annotation.yref, 'y');
+        const yFallbackRange = getAxisNumericRangeFromData('y', annotation.yref, layout, data);
+        const yRelative = toRelativeCoordinate(annotation.y, yAxisLayout, yFallbackRange);
+        const chartRelativeY = transformRelativeYForChart(yRelative);
+        if (xValue === undefined || chartRelativeY === undefined) {
+            return undefined;
+        }
+        coordinates = {
+            type: 'relative',
+            x: xValue,
+            y: chartRelativeY
+        };
+    } else if (xRefType === 'axis' && yRefType === 'relative') {
+        const yValue = toFiniteNumber(annotation.y);
+        const xAxisLayout = getAxisLayoutByRef(layout, annotation.xref, 'x');
+        const xFallbackRange = getAxisNumericRangeFromData('x', annotation.xref, layout, data);
+        const xRelative = toRelativeCoordinate(annotation.x, xAxisLayout, xFallbackRange);
+        const chartRelativeY = transformRelativeYForChart(yValue);
+        if (xRelative === undefined || chartRelativeY === undefined) {
+            return undefined;
+        }
+        coordinates = {
+            type: 'relative',
+            x: xRelative,
+            y: chartRelativeY
+        };
+    } else if (xRefType === 'pixel' && yRefType === 'pixel') {
+        const xValue = toFiniteNumber(annotation.x);
+        const yValue = toFiniteNumber(annotation.y);
+        if (xValue === undefined || yValue === undefined) {
+            return undefined;
+        }
+        coordinates = {
+            type: 'pixel',
+            x: xValue,
+            y: yValue
+        };
+    } else {
+        return undefined;
+    }
+    const textValue = annotation.text;
+    const rawText = textValue === undefined || textValue === null ? '' : String(textValue);
+    const encodedText = encodeHtmlEntities(rawText);
+    const chartAnnotation = {
+        id: createAnnotationId(encodedText, index),
+        text: encodedText,
+        coordinates
+    };
+    const layoutProps = {};
+    const styleProps = {};
+    const showArrow = annotation.showarrow === undefined ? false : !!annotation.showarrow;
+    const clipOnAxis = annotation.cliponaxis;
+    if (clipOnAxis !== undefined) {
+        layoutProps.clipToBounds = !!clipOnAxis;
+    } else if (coordinates.type === 'data') {
+        layoutProps.clipToBounds = true;
+    }
+    const horizontalAlign = mapHorizontalAlign(annotation.xanchor);
+    if (horizontalAlign) {
+        layoutProps.align = horizontalAlign;
+    }
+    if (!layoutProps.align) {
+        const alignProp = mapHorizontalAlign(annotation.align);
+        if (alignProp) {
+            layoutProps.align = alignProp;
+        }
+    }
+    const verticalAlign = mapVerticalAlign(annotation.yanchor);
+    if (verticalAlign) {
+        layoutProps.verticalAlign = verticalAlign;
+    }
+    if (!layoutProps.verticalAlign) {
+        const valignProp = mapVerticalAlign(annotation.valign);
+        if (valignProp) {
+            layoutProps.verticalAlign = valignProp;
+        }
+    }
+    const offsetXComponents = [];
+    let hasExplicitOffset = false;
+    const ax = toFiniteNumber(annotation.ax);
+    const axRef = typeof annotation.axref === 'string' ? annotation.axref.toLowerCase() : undefined;
+    if (ax !== undefined && (axRef === undefined || axRef === 'pixel')) {
+        offsetXComponents.push(ax);
+        hasExplicitOffset = true;
+    }
+    const xShift = toFiniteNumber(annotation.xshift);
+    if (xShift !== undefined) {
+        offsetXComponents.push(xShift);
+        hasExplicitOffset = true;
+    }
+    if (offsetXComponents.length > 0) {
+        const offsetX = offsetXComponents.reduce((sum, value)=>sum + value, 0);
+        if (offsetX !== 0) {
+            layoutProps.offsetX = offsetX;
+        }
+    }
+    const offsetYComponents = [];
+    const ay = toFiniteNumber(annotation.ay);
+    const ayRef = typeof annotation.ayref === 'string' ? annotation.ayref.toLowerCase() : undefined;
+    if (ay !== undefined && (ayRef === undefined || ayRef === 'pixel')) {
+        offsetYComponents.push(ay);
+        hasExplicitOffset = true;
+    }
+    const yShift = toFiniteNumber(annotation.yshift);
+    if (yShift !== undefined) {
+        offsetYComponents.push(yShift);
+        hasExplicitOffset = true;
+    }
+    if (offsetYComponents.length > 0) {
+        const offsetY = offsetYComponents.reduce((sum, value)=>sum + value, 0);
+        if (offsetY !== 0) {
+            layoutProps.offsetY = offsetY;
+        }
+    }
+    if (showArrow && !hasExplicitOffset && layoutProps.offsetY === undefined) {
+        layoutProps.offsetY = DEFAULT_ARROW_OFFSET;
+    }
+    const maxWidth = toFiniteNumber(annotation.width);
+    if (maxWidth !== undefined) {
+        layoutProps.maxWidth = maxWidth;
+    }
+    if (annotation.bgcolor) {
+        styleProps.backgroundColor = annotation.bgcolor;
+    }
+    if (annotation.bordercolor) {
+        styleProps.borderColor = annotation.bordercolor;
+    }
+    const borderWidth = toFiniteNumber(annotation.borderwidth);
+    if (borderWidth !== undefined) {
+        styleProps.borderWidth = borderWidth;
+    }
+    const borderPad = appendPx(annotation.borderpad);
+    if (borderPad) {
+        styleProps.padding = borderPad;
+    }
+    const opacity = toFiniteNumber(annotation.opacity);
+    if (opacity !== undefined) {
+        styleProps.opacity = opacity;
+    }
+    if (annotation.font) {
+        const font = annotation.font;
+        if (font === null || font === void 0 ? void 0 : font.color) {
+            styleProps.textColor = font.color;
+        }
+        const fontSize = appendPx(font === null || font === void 0 ? void 0 : font.size);
+        if (fontSize) {
+            styleProps.fontSize = fontSize;
+        }
+        if (font === null || font === void 0 ? void 0 : font.weight) {
+            styleProps.fontWeight = font.weight;
+        }
+    }
+    const 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') {
+        const parsedAngle = Number(textAngle);
+        if (!Number.isNaN(parsedAngle)) {
+            styleProps.rotation = parsedAngle;
+        }
+    }
+    if (Object.keys(layoutProps).length > 0) {
+        chartAnnotation.layout = layoutProps;
+    }
+    if (Object.keys(styleProps).length > 0) {
+        chartAnnotation.style = styleProps;
+    }
+    if (showArrow) {
+        var _annotation_arrowcolor;
+        const arrowColor = (_annotation_arrowcolor = annotation.arrowcolor) !== null && _annotation_arrowcolor !== void 0 ? _annotation_arrowcolor : styleProps.textColor;
+        const arrowWidth = toFiniteNumber(annotation.arrowwidth);
+        const endPadding = toFiniteNumber(annotation.standoff);
+        const startPadding = toFiniteNumber(annotation.startstandoff);
+        const dashPattern = mapArrowDashToPattern(annotation.arrowdash);
+        chartAnnotation.connector = {
+            ...arrowColor ? {
+                strokeColor: arrowColor
+            } : {},
+            ...arrowWidth !== undefined ? {
+                strokeWidth: arrowWidth
+            } : {},
+            ...endPadding !== undefined ? {
+                endPadding: Math.max(endPadding, 0)
+            } : {},
+            ...startPadding !== undefined ? {
+                startPadding: Math.max(startPadding, 0)
+            } : {},
+            ...dashPattern ? {
+                dashArray: dashPattern
+            } : {},
+            arrow: mapArrowsideToArrow(annotation)
+        };
+    }
+    return chartAnnotation;
+};
+const getChartAnnotationsFromLayout = (layout, data, isMultiPlot)=>{
+    if (isMultiPlot || !(layout === null || layout === void 0 ? void 0 : layout.annotations)) {
+        return undefined;
+    }
+    const annotationsArray = Array.isArray(layout.annotations) ? layout.annotations : [
+        layout.annotations
+    ];
+    const converted = annotationsArray.map((annotation, index)=>convertPlotlyAnnotation(annotation, layout, data, index)).filter((annotation)=>annotation !== undefined);
+    return converted.length > 0 ? converted : undefined;
+};
 /**
  * Normalizes an array of objects by flattening nested structures and creating grouped data
  * Uses json_normalize approach with D3 color detection and filtering
@@ -319,6 +857,34 @@ export const resolveXAxisPoint = (x, isXYearCategory, isXString, isXDate, isXNum
         x
     };
 };
+export const transformPlotlyJsonToAnnotationChartProps = (input, isMultiPlot, _colorMap, _colorwayType, _isDarkTheme)=>{
+    var _layoutWithMeta_meta, _input_layout, _input_layout1, _input_layout2, _input_layout3, _input_layout_font, _input_layout4, _input_layout_font1, _input_layout5, _input_layout6;
+    var _getChartAnnotationsFromLayout;
+    const annotations = (_getChartAnnotationsFromLayout = getChartAnnotationsFromLayout(input.layout, input.data, isMultiPlot)) !== null && _getChartAnnotationsFromLayout !== void 0 ? _getChartAnnotationsFromLayout : [];
+    const titles = getTitles(input.layout);
+    const layoutTitle = titles.chartTitle || undefined;
+    const layoutWithMeta = input.layout;
+    const description = typeof (layoutWithMeta === null || layoutWithMeta === void 0 ? void 0 : (_layoutWithMeta_meta = layoutWithMeta.meta) === null || _layoutWithMeta_meta === void 0 ? void 0 : _layoutWithMeta_meta.description) === 'string' ? layoutWithMeta.meta.description : undefined;
+    const width = typeof ((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.width) === 'number' ? input.layout.width : undefined;
+    const height = typeof ((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.height) === 'number' ? input.layout.height : undefined;
+    const paperBackgroundColor = typeof ((_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : _input_layout2.paper_bgcolor) === 'string' ? input.layout.paper_bgcolor : undefined;
+    const plotBackgroundColor = typeof ((_input_layout3 = input.layout) === null || _input_layout3 === void 0 ? void 0 : _input_layout3.plot_bgcolor) === 'string' ? input.layout.plot_bgcolor : undefined;
+    const fontColor = typeof ((_input_layout4 = input.layout) === null || _input_layout4 === void 0 ? void 0 : (_input_layout_font = _input_layout4.font) === null || _input_layout_font === void 0 ? void 0 : _input_layout_font.color) === 'string' ? input.layout.font.color : undefined;
+    const fontFamily = typeof ((_input_layout5 = input.layout) === null || _input_layout5 === void 0 ? void 0 : (_input_layout_font1 = _input_layout5.font) === null || _input_layout_font1 === void 0 ? void 0 : _input_layout_font1.family) === 'string' ? input.layout.font.family : undefined;
+    const margin = (_input_layout6 = input.layout) === null || _input_layout6 === void 0 ? void 0 : _input_layout6.margin;
+    return {
+        annotations,
+        chartTitle: layoutTitle,
+        description,
+        width,
+        height,
+        paperBackgroundColor,
+        plotBackgroundColor,
+        fontColor,
+        fontFamily,
+        margin
+    };
+};
 export const transformPlotlyJsonToDonutProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
     var _input_layout, _input_layout_template_layout, _input_layout_template, _input_layout1, _input_layout2, _firstData_marker, _input_layout3, _input_layout4, _input_layout5, _input_layout6;
     const firstData = input.data[0];
@@ -486,24 +1052,20 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
             });
         });
     });
-    var _input_data;
-    const xCategories = Array.from(new Set(((_input_data = input.data) !== null && _input_data !== void 0 ? _input_data : []).flatMap((trace)=>{
-        const xData = trace.x;
-        if (!xData) {
-            return [];
-        }
-        if (Array.isArray(xData)) {
-            return xData.flat().map((x)=>{
-                return x;
-            });
-        }
-        return [];
-    }).filter((x)=>x !== undefined && x !== null)));
+    const xCategories = extractXCategories(input.data);
     var _input_layout_shapes;
     ((_input_layout_shapes = (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.shapes) !== null && _input_layout_shapes !== void 0 ? _input_layout_shapes : []).filter((shape)=>shape.type === 'line').forEach((shape, shapeIdx)=>{
         var _shape_line;
         const lineColor = (_shape_line = shape.line) === null || _shape_line === void 0 ? void 0 : _shape_line.color;
         const resolveX = (val)=>{
+            if (shape.xref === 'x domain') {
+                if (val === 0) {
+                    return xCategories[0];
+                }
+                if (val === 1) {
+                    return xCategories[xCategories.length - 1];
+                }
+            }
             if (typeof val === 'number' && Array.isArray(xCategories)) {
                 if (xCategories[val] !== undefined) {
                     return xCategories[val];
@@ -532,24 +1094,29 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
         };
         const y0Val = resolveY(shape.y0);
         const y1Val = resolveY(shape.y1);
-        var _rgb_formatHex8;
-        mapXToDataPoints[x0Key].lineData.push({
-            legend: `Reference_${shapeIdx}`,
-            y: y0Val,
-            color: (_rgb_formatHex8 = rgb(lineColor).formatHex8()) !== null && _rgb_formatHex8 !== void 0 ? _rgb_formatHex8 : lineColor,
-            lineOptions: getLineOptions(shape.line),
-            useSecondaryYScale: false
-        });
-        var _rgb_formatHex81;
-        mapXToDataPoints[x1Key].lineData.push({
-            legend: `Reference_${shapeIdx}`,
-            y: y1Val,
-            color: (_rgb_formatHex81 = rgb(lineColor).formatHex8()) !== null && _rgb_formatHex81 !== void 0 ? _rgb_formatHex81 : lineColor,
-            lineOptions: getLineOptions(shape.line),
-            useSecondaryYScale: false
-        });
+        if (mapXToDataPoints[x0Key]) {
+            var _rgb_formatHex8;
+            mapXToDataPoints[x0Key].lineData.push({
+                legend: `Reference_${shapeIdx}`,
+                y: y0Val,
+                color: (_rgb_formatHex8 = rgb(lineColor).formatHex8()) !== null && _rgb_formatHex8 !== void 0 ? _rgb_formatHex8 : lineColor,
+                lineOptions: getLineOptions(shape.line),
+                useSecondaryYScale: false
+            });
+        }
+        if (mapXToDataPoints[x1Key]) {
+            var _rgb_formatHex81;
+            mapXToDataPoints[x1Key].lineData.push({
+                legend: `Reference_${shapeIdx}`,
+                y: y1Val,
+                color: (_rgb_formatHex81 = rgb(lineColor).formatHex8()) !== null && _rgb_formatHex81 !== void 0 ? _rgb_formatHex81 : lineColor,
+                lineOptions: getLineOptions(shape.line),
+                useSecondaryYScale: false
+            });
+        }
     });
     const vsbcData = Object.values(mapXToDataPoints);
+    const annotations = getChartAnnotationsFromLayout(input.layout, input.data, isMultiPlot);
     var _input_layout_height;
     return {
         data: vsbcData,
@@ -574,7 +1141,10 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
         ...getAxisCategoryOrderProps(input.data, input.layout),
         ...getBarProps(input.data, input.layout),
         ...getYMinMaxValues(input.data[0], input.layout),
-        ...getAxisTickProps(input.data, input.layout)
+        ...getAxisTickProps(input.data, input.layout),
+        ...annotations ? {
+            annotations
+        } : {}
     };
 };
 export const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
@@ -681,6 +1251,7 @@ export const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, col
             });
         }
     });
+    const annotations = getChartAnnotationsFromLayout(processedInput.layout, processedInput.data, isMultiPlot);
     var _processedInput_layout_height;
     return {
         dataV2: gvbcDataV2,
@@ -693,13 +1264,17 @@ export const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, col
         wrapXAxisLables: true,
         hideLegend,
         roundCorners: 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)
+        ...getAxisTickProps(processedInput.data, processedInput.layout),
+        ...annotations ? {
+            annotations
+        } : {}
     };
 };
 export const transformPlotlyJsonToVBCProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
@@ -764,6 +1339,7 @@ export const transformPlotlyJsonToVBCProps = (input, isMultiPlot, colorMap, colo
             });
         });
     });
+    const annotations = getChartAnnotationsFromLayout(input.layout, input.data, isMultiPlot);
     var _input_layout_height;
     return {
         data: vbcData,
@@ -775,9 +1351,13 @@ export const transformPlotlyJsonToVBCProps = (input, isMultiPlot, colorMap, colo
         maxBarWidth: 50,
         hideLegend,
         roundCorners: true,
+        showYAxisLables: true,
         ...getTitles(input.layout),
         ...getYMinMaxValues(input.data[0], input.layout),
-        ...getAxisCategoryOrderProps(input.data, input.layout)
+        ...getAxisCategoryOrderProps(input.data, input.layout),
+        ...annotations ? {
+            annotations
+        } : {}
     };
 };
 export const transformPlotlyJsonToAreaChartProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
@@ -900,11 +1480,19 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
     const xMaxValue = (_chartData_1 = chartData[0]) === null || _chartData_1 === void 0 ? void 0 : (_chartData__data_1 = _chartData_1.data[chartData[0].data.length - 1]) === null || _chartData__data_1 === void 0 ? void 0 : _chartData__data_1.x;
     const yMinValue = (_chartData_2 = chartData[0]) === null || _chartData_2 === void 0 ? void 0 : (_chartData__data_2 = _chartData_2.data[0]) === null || _chartData__data_2 === void 0 ? void 0 : _chartData__data_2.y;
     const yMaxValue = (_chartData_3 = chartData[0]) === null || _chartData_3 === void 0 ? void 0 : (_chartData__data_3 = _chartData_3.data[chartData[0].data.length - 1]) === null || _chartData__data_3 === void 0 ? void 0 : _chartData__data_3.y;
+    const xCategories = extractXCategories(input.data);
     var _input_layout_shapes;
     const lineShape = ((_input_layout_shapes = (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.shapes) !== null && _input_layout_shapes !== void 0 ? _input_layout_shapes : []).filter((shape)=>shape.type === 'line').map((shape, shapeIdx)=>{
         var _shape_line;
         const lineColor = (_shape_line = shape.line) === null || _shape_line === void 0 ? void 0 : _shape_line.color;
         const resolveX = (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;
@@ -939,11 +1527,11 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
             legend: `Reference_${shapeIdx}`,
             data: [
                 {
-                    x: resolveX(shape.x0),
+                    x: resolveXValue(resolveX(shape.x0)),
                     y: resolveY(shape.y0)
                 },
                 {
-                    x: resolveX(shape.x1),
+                    x: resolveXValue(resolveX(shape.x1)),
                     y: resolveY(shape.y1)
                 }
             ],
@@ -966,8 +1554,12 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
         ]
     };
     const scatterChartProps = {
-        scatterChartData: chartData
+        scatterChartData: [
+            ...chartData,
+            ...lineShape
+        ]
     };
+    const annotations = getChartAnnotationsFromLayout(input.layout, input.data, isMultiPlot);
     var _input_layout_height;
     const commonProps = {
         supportNegativeData: true,
@@ -977,13 +1569,17 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
         hideTickOverlap: true,
         hideLegend,
         useUTC: false,
-        wrapXAxisLables: shouldWrapLabels,
+        wrapXAxisLabels: shouldWrapLabels,
         optimizeLargeData: numDataPoints > 1000,
+        showYAxisLables: true,
         ...getTitles(input.layout),
         ...getXAxisTickFormat(input.data[0], input.layout),
         ...yAxisTickFormat,
         ...getAxisScaleTypeProps(input.data, input.layout),
-        ...getAxisTickProps(input.data, input.layout)
+        ...getAxisTickProps(input.data, input.layout),
+        ...annotations ? {
+            annotations
+        } : {}
     };
     if (isAreaChart) {
         return {
@@ -2120,7 +2716,8 @@ export const isNonPlotType = (chartType)=>{
     return [
         'donut',
         'sankey',
-        'pie'
+        'pie',
+        'annotation'
     ].includes(chartType);
 };
 export const getGridProperties = (schema, isMultiPlot, validTracesInfo)=>{