@fluentui/react-charts 9.3.12 → 9.3.14

package/lib/components/VegaDeclarativeChart/VegaLiteSchemaAdapter.js

@@ -0,0 +1,3279 @@
+// Using custom VegaLiteTypes for internal adapter logic
+// For public API, VegaDeclarativeChart accepts vega-lite's TopLevelSpec
+import { getVegaColorFromMap, getVegaColor, getSequentialSchemeColors } from './VegaLiteColorAdapter';
+import { safeEvaluateExpression } from './VegaLiteExpressionEvaluator';
+import { bin as d3Bin, extent as d3Extent, sum as d3Sum, min as d3Min, max as d3Max, mean as d3Mean } from 'd3-array';
+import { format as d3Format } from 'd3-format';
+import { isInvalidValue } from '@fluentui/chart-utilities';
+/**
+ * Vega-Lite to Fluent Charts adapter for line/point charts.
+ *
+ * Transforms Vega-Lite JSON specifications into Fluent LineChart props.
+ * Supports basic line charts with temporal/quantitative axes and color-encoded series.
+ *
+ * TODO: Future enhancements
+ * - Multi-view layouts (facet, concat, repeat)
+ * - Selection interactions
+ * - Remote data loading (url)
+ * - Transform pipeline (filter, aggregate, calculate)
+ * - Conditional encodings
+ * - Additional mark types (area, bar, etc.)
+ * - Tooltip customization
+ */ /**
+ * Default configuration values for VegaLite charts
+ */ const DEFAULT_CHART_HEIGHT = 350;
+const DEFAULT_MAX_BAR_WIDTH = 50;
+const DEFAULT_TRUNCATE_CHARS = 20;
+/**
+ * Determines if a spec is a layered specification
+ */ function isLayerSpec(spec) {
+    return Array.isArray(spec.layer) && spec.layer.length > 0;
+}
+/**
+ * Determines if a spec is a single unit specification
+ */ function isUnitSpec(spec) {
+    return spec.mark !== undefined && spec.encoding !== undefined;
+}
+/**
+ * Extracts the mark type string from a VegaLiteMarkDef (string or object with type property)
+ */ export function getMarkType(mark) {
+    if (!mark) {
+        return undefined;
+    }
+    return typeof mark === 'string' ? mark : mark.type;
+}
+/**
+ * Resolves the color for a legend label using the priority chain:
+ * 1. Explicit color value from encoding
+ * 2. Mark-level color
+ * 3. Cached color from the shared color map
+ * 4. New color via local index for deterministic per-chart assignment
+ */ function resolveColor(legend, index, colorValue, markColor, colorMap, colorScheme, colorRange, isDarkTheme) {
+    var _colorMap_current, _colorMap_current1;
+    if (colorValue) {
+        return colorValue;
+    }
+    if (markColor) {
+        return markColor;
+    }
+    // Check colorMap cache first for cross-chart consistency
+    if ((_colorMap_current = colorMap.current) === null || _colorMap_current === void 0 ? void 0 : _colorMap_current.has(legend)) {
+        return colorMap.current.get(legend);
+    }
+    // Use local index (not colorMap.size) for deterministic per-chart color assignment
+    const color = getVegaColor(index, colorScheme, colorRange, isDarkTheme);
+    (_colorMap_current1 = colorMap.current) === null || _colorMap_current1 === void 0 ? void 0 : _colorMap_current1.set(legend, color);
+    return color;
+}
+/**
+ * Extracts inline data values from a Vega-Lite data specification
+ * TODO: Add support for URL-based data loading
+ * TODO: Add support for named dataset resolution
+ * TODO: Add support for data format parsing (csv, tsv)
+ */ function extractDataValues(data) {
+    if (!data) {
+        return [];
+    }
+    if (data.values && Array.isArray(data.values)) {
+        return data.values;
+    }
+    // TODO: Handle data.url - load remote data
+    if (data.url) {
+        // Remote data URLs are not yet supported
+        return [];
+    }
+    // TODO: Handle data.name - resolve named datasets
+    if (data.name) {
+        // Named datasets are not yet supported
+        return [];
+    }
+    return [];
+}
+/**
+ * Applies a fold transform to convert wide-format data to long-format
+ * The fold transform unpivots specified fields into key-value pairs
+ *
+ * @param data - Array of data records in wide format
+ * @param foldFields - Array of field names to fold
+ * @param asFields - [keyName, valueName] for the new columns (defaults to ['key', 'value'])
+ * @returns Array of data records in long format
+ */ function applyFoldTransform(data, foldFields, asFields = [
+    'key',
+    'value'
+]) {
+    const [keyField, valueField] = asFields;
+    const result = [];
+    for (const row of data){
+        // Create a base row without the fields being folded
+        const baseRow = {};
+        for (const [key, value] of Object.entries(row)){
+            if (!foldFields.includes(key)) {
+                baseRow[key] = value;
+            }
+        }
+        // Create a new row for each folded field
+        for (const field of foldFields){
+            if (field in row) {
+                result.push({
+                    ...baseRow,
+                    [keyField]: field,
+                    [valueField]: row[field]
+                });
+            }
+        }
+    }
+    return result;
+}
+/**
+ * Applies transforms from a Vega-Lite spec to data
+ * Currently supports: fold transform
+ *
+ * @param data - Array of data records
+ * @param transforms - Array of Vega-Lite transform specifications
+ * @returns Transformed data array
+ */ function applyTransforms(data, transforms) {
+    if (!transforms || transforms.length === 0) {
+        return data;
+    }
+    let result = data;
+    for (const transform of transforms){
+        // Handle fold transform
+        if ('fold' in transform && Array.isArray(transform.fold)) {
+            const foldFields = transform.fold;
+            const asFields = transform.as || [
+                'key',
+                'value'
+            ];
+            result = applyFoldTransform(result, foldFields, asFields);
+        }
+        // Handle filter transform
+        if ('filter' in transform) {
+            const filterExpr = transform.filter;
+            if (typeof filterExpr === 'string') {
+                result = result.filter((row)=>{
+                    try {
+                        return safeEvaluateExpression(filterExpr, row);
+                    } catch  {
+                        return true;
+                    }
+                });
+            }
+        }
+        // Handle calculate transform
+        if ('calculate' in transform && 'as' in transform) {
+            const expr = transform.calculate;
+            const asField = transform.as;
+            result = result.map((row)=>{
+                try {
+                    const value = safeEvaluateExpression(expr, row);
+                    return {
+                        ...row,
+                        [asField]: value
+                    };
+                } catch  {
+                    return row;
+                }
+            });
+        }
+        // Handle aggregate transform
+        if ('aggregate' in transform && Array.isArray(transform.aggregate)) {
+            const aggSpecs = transform.aggregate;
+            const groupby = transform.groupby || [];
+            const groups = new Map();
+            result.forEach((row)=>{
+                const key = groupby.map((g)=>String(row[g])).join('|');
+                if (!groups.has(key)) {
+                    groups.set(key, []);
+                }
+                groups.get(key).push(row);
+            });
+            result = Array.from(groups.entries()).map(([key, rows])=>{
+                const baseRow = {};
+                groupby.forEach((g, i)=>{
+                    baseRow[g] = rows[0][g];
+                });
+                aggSpecs.forEach((spec)=>{
+                    const values = spec.field ? rows.map((r)=>Number(r[spec.field])).filter((v)=>!isNaN(v)) : [];
+                    switch(spec.op){
+                        case 'count':
+                            baseRow[spec.as] = rows.length;
+                            break;
+                        case 'sum':
+                            baseRow[spec.as] = d3Sum(values);
+                            break;
+                        case 'mean':
+                        case 'average':
+                            var _d3Mean;
+                            baseRow[spec.as] = (_d3Mean = d3Mean(values)) !== null && _d3Mean !== void 0 ? _d3Mean : 0;
+                            break;
+                        case 'min':
+                            var _d3Min;
+                            baseRow[spec.as] = (_d3Min = d3Min(values)) !== null && _d3Min !== void 0 ? _d3Min : 0;
+                            break;
+                        case 'max':
+                            var _d3Max;
+                            baseRow[spec.as] = (_d3Max = d3Max(values)) !== null && _d3Max !== void 0 ? _d3Max : 0;
+                            break;
+                        default:
+                            baseRow[spec.as] = rows.length;
+                    }
+                });
+                return baseRow;
+            });
+        }
+        // Handle window transform
+        if ('window' in transform && Array.isArray(transform.window)) {
+            const windowOps = transform.window;
+            const sortFields = transform.sort || [];
+            const groupby = transform.groupby || [];
+            // Group data
+            const groups = new Map();
+            result.forEach((row)=>{
+                const key = groupby.length > 0 ? groupby.map((g)=>String(row[g])).join('|') : '__all__';
+                if (!groups.has(key)) {
+                    groups.set(key, []);
+                }
+                groups.get(key).push(row);
+            });
+            const newResult = [];
+            groups.forEach((rows)=>{
+                // Sort within group
+                if (sortFields.length > 0) {
+                    rows.sort((a, b)=>{
+                        for (const sf of sortFields){
+                            const va = Number(a[sf.field]) || 0;
+                            const vb = Number(b[sf.field]) || 0;
+                            const cmp = sf.order === 'descending' ? vb - va : va - vb;
+                            if (cmp !== 0) {
+                                return cmp;
+                            }
+                        }
+                        return 0;
+                    });
+                }
+                let runningSum = 0;
+                rows.forEach((row, idx)=>{
+                    const newRow = {
+                        ...row
+                    };
+                    windowOps.forEach((op)=>{
+                        switch(op.op){
+                            case 'sum':
+                                runningSum += Number(row[op.field]) || 0;
+                                newRow[op.as] = runningSum;
+                                break;
+                            case 'rank':
+                                newRow[op.as] = idx + 1;
+                                break;
+                            case 'row_number':
+                                newRow[op.as] = idx + 1;
+                                break;
+                            case 'count':
+                                newRow[op.as] = idx + 1;
+                                break;
+                            default:
+                                newRow[op.as] = idx + 1;
+                        }
+                    });
+                    newResult.push(newRow);
+                });
+            });
+            result = newResult;
+        }
+        // Handle joinaggregate transform
+        if ('joinaggregate' in transform && Array.isArray(transform.joinaggregate)) {
+            const aggSpecs = transform.joinaggregate;
+            const groupby = transform.groupby || [];
+            // Compute aggregates
+            const groups = new Map();
+            result.forEach((row)=>{
+                const key = groupby.length > 0 ? groupby.map((g)=>String(row[g])).join('|') : '__all__';
+                if (!groups.has(key)) {
+                    groups.set(key, []);
+                }
+                groups.get(key).push(row);
+            });
+            const aggResults = new Map();
+            groups.forEach((rows, key)=>{
+                const aggs = {};
+                aggSpecs.forEach((spec)=>{
+                    const values = spec.field ? rows.map((r)=>Number(r[spec.field])).filter((v)=>!isNaN(v)) : [];
+                    switch(spec.op){
+                        case 'mean':
+                        case 'average':
+                            var _d3Mean;
+                            aggs[spec.as] = (_d3Mean = d3Mean(values)) !== null && _d3Mean !== void 0 ? _d3Mean : 0;
+                            break;
+                        case 'sum':
+                            aggs[spec.as] = d3Sum(values);
+                            break;
+                        case 'count':
+                            aggs[spec.as] = rows.length;
+                            break;
+                        case 'min':
+                            var _d3Min;
+                            aggs[spec.as] = (_d3Min = d3Min(values)) !== null && _d3Min !== void 0 ? _d3Min : 0;
+                            break;
+                        case 'max':
+                            var _d3Max;
+                            aggs[spec.as] = (_d3Max = d3Max(values)) !== null && _d3Max !== void 0 ? _d3Max : 0;
+                            break;
+                        default:
+                            aggs[spec.as] = rows.length;
+                    }
+                });
+                aggResults.set(key, aggs);
+            });
+            // Join back: add aggregate values to each row
+            result = result.map((row)=>{
+                const key = groupby.length > 0 ? groupby.map((g)=>String(row[g])).join('|') : '__all__';
+                return {
+                    ...row,
+                    ...aggResults.get(key) || {}
+                };
+            });
+        }
+        // Handle regression transform (simple linear regression)
+        if ('regression' in transform && 'on' in transform) {
+            const yField = transform.regression;
+            const xField = transform.on;
+            const points = result.map((r)=>({
+                    x: Number(r[xField]),
+                    y: Number(r[yField])
+                })).filter((p)=>!isNaN(p.x) && !isNaN(p.y));
+            if (points.length >= 2) {
+                const n = points.length;
+                const sumX = d3Sum(points.map((p)=>p.x));
+                const sumY = d3Sum(points.map((p)=>p.y));
+                const sumXY = d3Sum(points.map((p)=>p.x * p.y));
+                const sumX2 = d3Sum(points.map((p)=>p.x * p.x));
+                const slope = (n * sumXY - sumX * sumY) / (n * sumX2 - sumX * sumX);
+                const intercept = (sumY - slope * sumX) / n;
+                var _d3Min;
+                const xMin = (_d3Min = d3Min(points.map((p)=>p.x))) !== null && _d3Min !== void 0 ? _d3Min : 0;
+                var _d3Max;
+                const xMax = (_d3Max = d3Max(points.map((p)=>p.x))) !== null && _d3Max !== void 0 ? _d3Max : 0;
+                result = [
+                    {
+                        [xField]: xMin,
+                        [yField]: slope * xMin + intercept
+                    },
+                    {
+                        [xField]: xMax,
+                        [yField]: slope * xMax + intercept
+                    }
+                ];
+            }
+        }
+        // Handle loess transform (simplified: moving average approximation)
+        if ('loess' in transform && 'on' in transform) {
+            const yField = transform.loess;
+            const xField = transform.on;
+            const sorted = [
+                ...result
+            ].filter((r)=>!isNaN(Number(r[xField])) && !isNaN(Number(r[yField]))).sort((a, b)=>Number(a[xField]) - Number(b[xField]));
+            const windowSize = Math.max(3, Math.floor(sorted.length / 4));
+            result = sorted.map((row, i)=>{
+                const start = Math.max(0, i - Math.floor(windowSize / 2));
+                const end = Math.min(sorted.length, start + windowSize);
+                const windowSlice = sorted.slice(start, end);
+                var _d3Mean;
+                const avgY = (_d3Mean = d3Mean(windowSlice.map((r)=>Number(r[yField])))) !== null && _d3Mean !== void 0 ? _d3Mean : Number(row[yField]);
+                return {
+                    [xField]: row[xField],
+                    [yField]: avgY
+                };
+            });
+        }
+        // Handle density transform (simplified: histogram-based density estimation)
+        if ('density' in transform) {
+            const field = transform.density;
+            const groupby = transform.groupby || [];
+            const groups = new Map();
+            result.forEach((row)=>{
+                const key = groupby.length > 0 ? groupby.map((g)=>String(row[g])).join('|') : '__all__';
+                if (!groups.has(key)) {
+                    groups.set(key, []);
+                }
+                groups.get(key).push(Number(row[field]));
+            });
+            const densityResult = [];
+            groups.forEach((values, key)=>{
+                var _d3Min;
+                const min = (_d3Min = d3Min(values)) !== null && _d3Min !== void 0 ? _d3Min : 0;
+                var _d3Max;
+                const max = (_d3Max = d3Max(values)) !== null && _d3Max !== void 0 ? _d3Max : 0;
+                const range = max - min || 1;
+                const bins = 20;
+                const bandwidth = range / bins;
+                const groupFields = {};
+                if (groupby.length > 0) {
+                    const sampleRow = result.find((r)=>groupby.map((g)=>String(r[g])).join('|') === key);
+                    groupby.forEach((g)=>{
+                        groupFields[g] = sampleRow === null || sampleRow === void 0 ? void 0 : sampleRow[g];
+                    });
+                }
+                for(let i = 0; i <= bins; i++){
+                    const x = min + i / bins * range;
+                    const count = values.filter((v)=>Math.abs(v - x) < bandwidth).length;
+                    const density = count / (values.length * bandwidth);
+                    densityResult.push({
+                        value: x,
+                        density,
+                        ...groupFields
+                    });
+                }
+            });
+            result = densityResult;
+        }
+        // Handle quantile transform
+        if ('quantile' in transform) {
+            const field = transform.quantile;
+            const probs = transform.probs || [
+                0.25,
+                0.5,
+                0.75
+            ];
+            const values = result.map((r)=>Number(r[field])).filter((v)=>!isNaN(v)).sort((a, b)=>a - b);
+            if (values.length > 0) {
+                result = probs.map((p)=>{
+                    const idx = Math.min(Math.floor(p * values.length), values.length - 1);
+                    return {
+                        prob: String(p),
+                        value: values[idx]
+                    };
+                });
+            }
+        }
+        // Handle impute transform (fill missing values)
+        if ('impute' in transform && 'key' in transform) {
+            const field = transform.impute;
+            const keyField = transform.key;
+            const method = transform.method || 'value';
+            var _transform_value;
+            const fillValue = (_transform_value = transform.value) !== null && _transform_value !== void 0 ? _transform_value : 0;
+            const existingKeys = new Set(result.map((r)=>r[keyField]));
+            const allKeyValues = result.map((r)=>Number(r[keyField])).filter((v)=>!isNaN(v));
+            if (allKeyValues.length > 0) {
+                var _d3Min1;
+                const minKey = (_d3Min1 = d3Min(allKeyValues)) !== null && _d3Min1 !== void 0 ? _d3Min1 : 0;
+                var _d3Max1;
+                const maxKey = (_d3Max1 = d3Max(allKeyValues)) !== null && _d3Max1 !== void 0 ? _d3Max1 : 0;
+                for(let k = minKey; k <= maxKey; k++){
+                    if (!existingKeys.has(k)) {
+                        const imputed = {
+                            [keyField]: k
+                        };
+                        imputed[field] = method === 'value' ? fillValue : 0;
+                        result.push(imputed);
+                    }
+                }
+                result.sort((a, b)=>Number(a[keyField]) - Number(b[keyField]));
+            }
+        }
+        // Handle lookup transform (join with secondary dataset)
+        if ('lookup' in transform && 'from' in transform) {
+            var _fromSpec_data;
+            const lookupField = transform.lookup;
+            const fromSpec = transform.from;
+            if (((_fromSpec_data = fromSpec.data) === null || _fromSpec_data === void 0 ? void 0 : _fromSpec_data.values) && fromSpec.key && fromSpec.fields) {
+                const lookupMap = new Map();
+                fromSpec.data.values.forEach((row)=>{
+                    lookupMap.set(String(row[fromSpec.key]), row);
+                });
+                result = result.map((row)=>{
+                    const lookupRow = lookupMap.get(String(row[lookupField]));
+                    if (lookupRow) {
+                        const extra = {};
+                        fromSpec.fields.forEach((f)=>{
+                            extra[f] = lookupRow[f];
+                        });
+                        return {
+                            ...row,
+                            ...extra
+                        };
+                    }
+                    return row;
+                });
+            }
+        }
+    }
+    return result;
+}
+/**
+ * Normalizes a Vega-Lite spec into an array of unit specs with resolved data and encoding
+ * Handles both single-view and layered specifications
+ */ function normalizeSpec(spec) {
+    if (isLayerSpec(spec)) {
+        // Layered spec: merge shared data and encoding with each layer
+        const sharedData = spec.data;
+        const sharedEncoding = spec.encoding;
+        return spec.layer.map((layer)=>({
+                ...layer,
+                data: layer.data || sharedData,
+                encoding: {
+                    ...sharedEncoding,
+                    ...layer.encoding
+                }
+            }));
+    }
+    if (isUnitSpec(spec)) {
+        // Single unit spec
+        return [
+            {
+                mark: spec.mark,
+                encoding: spec.encoding,
+                data: spec.data
+            }
+        ];
+    }
+    // Unsupported spec structure
+    return [];
+}
+/**
+ * Parses a value to a Date if it's temporal, otherwise returns as number or string
+ */ function parseValue(value, isTemporalType) {
+    if (value === null || value === undefined) {
+        return '';
+    }
+    if (isTemporalType) {
+        // Try parsing as date
+        const dateValue = new Date(value);
+        if (!isNaN(dateValue.getTime())) {
+            return dateValue;
+        }
+    }
+    if (typeof value === 'number') {
+        return value;
+    }
+    return String(value);
+}
+/**
+ * Maps Vega-Lite interpolate to Fluent curve options
+ * Note: Only maps to curve types supported by LineChartLineOptions
+ */ function mapInterpolateToCurve(interpolate) {
+    if (!interpolate) {
+        return undefined;
+    }
+    switch(interpolate){
+        case 'linear':
+        case 'linear-closed':
+            return 'linear';
+        case 'step':
+            return 'step';
+        case 'step-before':
+            return 'stepBefore';
+        case 'step-after':
+            return 'stepAfter';
+        case 'natural':
+            return 'natural';
+        case 'monotone':
+            return 'linear';
+        // Note: basis, cardinal, catmull-rom are not supported by LineChartLineOptions
+        default:
+            return 'linear';
+    }
+}
+/**
+ * Extracts mark properties from VegaLiteMarkDef
+ */ function getMarkProperties(mark) {
+    if (typeof mark === 'string') {
+        return {};
+    }
+    return {
+        color: mark.color,
+        interpolate: mark.interpolate,
+        strokeWidth: mark.strokeWidth,
+        strokeDash: mark.strokeDash,
+        point: mark.point
+    };
+}
+/**
+ * Extracts annotations from Vega-Lite layers with text or rule marks
+ * Text marks become text annotations, rule marks become reference lines
+ */ function extractAnnotations(spec) {
+    const annotations = [];
+    if (!spec.layer || !Array.isArray(spec.layer)) {
+        return annotations;
+    }
+    spec.layer.forEach((layer, index)=>{
+        const mark = getMarkType(layer.mark);
+        const encoding = layer.encoding || {};
+        // Text marks become annotations
+        if (mark === 'text' && encoding.x && encoding.y) {
+            var _encoding_text, _encoding_text1, _encoding_text2;
+            const textValue = ((_encoding_text = encoding.text) === null || _encoding_text === void 0 ? void 0 : _encoding_text.datum) || ((_encoding_text1 = encoding.text) === null || _encoding_text1 === void 0 ? void 0 : _encoding_text1.value) || ((_encoding_text2 = encoding.text) === null || _encoding_text2 === void 0 ? void 0 : _encoding_text2.field) || '';
+            const xValue = encoding.x.datum || encoding.x.value || encoding.x.field;
+            const yValue = encoding.y.datum || encoding.y.value || encoding.y.field;
+            if (textValue && (xValue !== undefined || encoding.x.datum !== undefined) && (yValue !== undefined || encoding.y.datum !== undefined)) {
+                annotations.push({
+                    id: `text-annotation-${index}`,
+                    text: String(textValue),
+                    coordinates: {
+                        type: 'data',
+                        x: encoding.x.datum || xValue || 0,
+                        y: encoding.y.datum || yValue || 0
+                    },
+                    style: {
+                        textColor: typeof layer.mark === 'object' ? layer.mark.color : undefined
+                    }
+                });
+            }
+        }
+        // Rule marks can become reference lines (horizontal or vertical)
+        if (mark === 'rule') {
+            const markColor = typeof layer.mark === 'object' ? layer.mark.color : '#000';
+            const markStrokeWidth = typeof layer.mark === 'object' ? layer.mark.strokeWidth || 1 : 1;
+            const markStrokeDash = typeof layer.mark === 'object' ? layer.mark.strokeDash : undefined;
+            // Horizontal rule (y value constant)
+            if (encoding.y && (encoding.y.value !== undefined || encoding.y.datum !== undefined)) {
+                var _spec_layer, _companionText_encoding_text, _companionText_encoding, _companionText_encoding_text1, _companionText_encoding1;
+                var _encoding_y_value;
+                const yValue = (_encoding_y_value = encoding.y.value) !== null && _encoding_y_value !== void 0 ? _encoding_y_value : encoding.y.datum;
+                // Look for a companion text annotation at the same y-value
+                const companionText = (_spec_layer = spec.layer) === null || _spec_layer === void 0 ? void 0 : _spec_layer.find((l, i)=>{
+                    var _l_encoding;
+                    if (i === index) {
+                        return false;
+                    }
+                    const m = getMarkType(l.mark);
+                    var _l_encoding_y_datum;
+                    return m === 'text' && ((_l_encoding = l.encoding) === null || _l_encoding === void 0 ? void 0 : _l_encoding.y) && ((_l_encoding_y_datum = l.encoding.y.datum) !== null && _l_encoding_y_datum !== void 0 ? _l_encoding_y_datum : l.encoding.y.value) === yValue;
+                });
+                const ruleText = companionText ? String(((_companionText_encoding = companionText.encoding) === null || _companionText_encoding === void 0 ? void 0 : (_companionText_encoding_text = _companionText_encoding.text) === null || _companionText_encoding_text === void 0 ? void 0 : _companionText_encoding_text.datum) || ((_companionText_encoding1 = companionText.encoding) === null || _companionText_encoding1 === void 0 ? void 0 : (_companionText_encoding_text1 = _companionText_encoding1.text) === null || _companionText_encoding_text1 === void 0 ? void 0 : _companionText_encoding_text1.value) || yValue) : String(yValue);
+                annotations.push({
+                    id: `rule-h-${index}`,
+                    text: ruleText,
+                    coordinates: {
+                        type: 'data',
+                        x: 0,
+                        y: yValue
+                    },
+                    style: {
+                        textColor: markColor,
+                        borderColor: markColor,
+                        borderWidth: markStrokeWidth,
+                        ...markStrokeDash && Array.isArray(markStrokeDash) ? {
+                            borderRadius: 0
+                        } // Indicate dashed style
+                         : {}
+                    }
+                });
+            } else if (encoding.x && (encoding.x.value !== undefined || encoding.x.datum !== undefined)) {
+                var _encoding_x_value;
+                const xValue = (_encoding_x_value = encoding.x.value) !== null && _encoding_x_value !== void 0 ? _encoding_x_value : encoding.x.datum;
+                annotations.push({
+                    id: `rule-v-${index}`,
+                    text: String(xValue),
+                    coordinates: {
+                        type: 'data',
+                        x: xValue,
+                        y: 0
+                    },
+                    style: {
+                        textColor: markColor,
+                        borderColor: markColor,
+                        borderWidth: markStrokeWidth
+                    }
+                });
+            }
+        }
+    });
+    return annotations;
+}
+/**
+ * Extracts color fill bars (background regions) from rect marks with x/x2 or y/y2 encodings
+ */ function extractColorFillBars(spec, colorMap, isDarkTheme) {
+    const colorFillBars = [];
+    if (!spec.layer || !Array.isArray(spec.layer)) {
+        return colorFillBars;
+    }
+    // Detect if x-axis is temporal by checking the primary data layer (non-rect layer)
+    const isXTemporal = spec.layer.some((layer)=>{
+        var _layer_encoding_x, _layer_encoding;
+        const layerMark = getMarkType(layer.mark);
+        // Skip rect layers, look at line/point/area layers
+        if (layerMark === 'rect') {
+            return false;
+        }
+        return ((_layer_encoding = layer.encoding) === null || _layer_encoding === void 0 ? void 0 : (_layer_encoding_x = _layer_encoding.x) === null || _layer_encoding_x === void 0 ? void 0 : _layer_encoding_x.type) === 'temporal';
+    });
+    spec.layer.forEach((layer, index)=>{
+        const mark = getMarkType(layer.mark);
+        const encoding = layer.encoding || {};
+        // Rect marks with x and x2 become color fill bars (vertical regions)
+        if (mark === 'rect' && encoding.x && encoding.x2) {
+            const legend = `region-${index}`;
+            const color = typeof layer.mark === 'object' && layer.mark.color ? layer.mark.color : getVegaColorFromMap(legend, colorMap, undefined, undefined, isDarkTheme);
+            // Extract start and end x values
+            const rawStartX = encoding.x.datum || encoding.x.value;
+            const rawEndX = encoding.x2.datum || encoding.x2.value;
+            if (rawStartX !== undefined && rawEndX !== undefined) {
+                // Convert to Date if x-axis is temporal and values are date-like strings
+                let startX = rawStartX;
+                let endX = rawEndX;
+                if (isXTemporal) {
+                    const parsedStart = new Date(rawStartX);
+                    const parsedEnd = new Date(rawEndX);
+                    if (!isNaN(parsedStart.getTime())) {
+                        startX = parsedStart;
+                    }
+                    if (!isNaN(parsedEnd.getTime())) {
+                        endX = parsedEnd;
+                    }
+                }
+                colorFillBars.push({
+                    legend,
+                    color,
+                    data: [
+                        {
+                            startX,
+                            endX
+                        }
+                    ],
+                    applyPattern: false
+                });
+            }
+        }
+    });
+    return colorFillBars;
+}
+/**
+ * Extracts tick configuration from axis properties
+ */ function extractTickConfig(spec) {
+    var _encoding_x, _encoding_y;
+    const config = {};
+    const encoding = spec.encoding || {};
+    if ((_encoding_x = encoding.x) === null || _encoding_x === void 0 ? void 0 : _encoding_x.axis) {
+        if (encoding.x.axis.values) {
+            config.tickValues = encoding.x.axis.values;
+        }
+        if (encoding.x.axis.tickCount) {
+            config.xAxisTickCount = encoding.x.axis.tickCount;
+        }
+    }
+    if ((_encoding_y = encoding.y) === null || _encoding_y === void 0 ? void 0 : _encoding_y.axis) {
+        if (encoding.y.axis.tickCount) {
+            config.yAxisTickCount = encoding.y.axis.tickCount;
+        }
+    }
+    return config;
+}
+/**
+ * Validates that data array is not empty and contains valid values for the specified field
+ * @param data - Array of data objects
+ * @param field - Field name to validate
+ * @param chartType - Chart type for error message context
+ * @throws Error if data is empty or field has no valid values
+ */ function validateDataArray(data, field, chartType) {
+    if (!data || data.length === 0) {
+        throw new Error(`VegaLiteSchemaAdapter: Empty data array for ${chartType}`);
+    }
+    const hasValidValues = data.some((row)=>row[field] !== undefined && row[field] !== null);
+    if (!hasValidValues) {
+        throw new Error(`VegaLiteSchemaAdapter: No valid values found for field '${field}' in ${chartType}`);
+    }
+}
+/**
+ * Validates that nested arrays are not present in the data field (unsupported)
+ * @param data - Array of data objects
+ * @param field - Field name to validate
+ * @throws Error if nested arrays are detected
+ */ function validateNoNestedArrays(data, field) {
+    const hasNestedArrays = data.some((row)=>Array.isArray(row[field]));
+    if (hasNestedArrays) {
+        throw new Error(`VegaLiteSchemaAdapter: Nested arrays not supported for field '${field}'. ` + `Use flat data structures only.`);
+    }
+}
+/**
+ * Validates data type compatibility with encoding type
+ * @param data - Array of data objects
+ * @param field - Field name to validate
+ * @param expectedType - Expected Vega-Lite type (quantitative, temporal, nominal, ordinal)
+ * @throws Error if data type doesn't match encoding type
+ */ /**
+ * Validates and potentially auto-corrects encoding types based on actual data
+ * Returns the corrected type if auto-correction was applied
+ *
+ * @param data - Array of data values
+ * @param field - Field name to validate
+ * @param expectedType - Expected Vega-Lite type from schema
+ * @param encoding - Encoding object to potentially modify
+ * @param channelName - Name of encoding channel (x, y, etc.) for auto-correction
+ * @returns Corrected type if auto-correction was applied, otherwise undefined
+ */ function validateEncodingType(data, field, expectedType, encoding, channelName) {
+    if (!expectedType || expectedType === 'nominal' || expectedType === 'ordinal' || expectedType === 'geojson') {
+        return; // Nominal, ordinal, and geojson accept any type
+    }
+    // Find first non-null value to check type
+    const sampleValue = data.map((row)=>row[field]).find((v)=>v !== null && v !== undefined);
+    if (!sampleValue) {
+        return; // No values to validate
+    }
+    if (expectedType === 'quantitative') {
+        if (typeof sampleValue !== 'number' && !isFinite(Number(sampleValue))) {
+            // Type mismatch: quantitative declared but data is not numeric
+            const actualType = typeof sampleValue;
+            if (actualType === 'string') {
+                // Auto-correct: treat as nominal for categorical string data
+                // This matches Plotly behavior - render as categorical chart
+                // Modify encoding to use nominal type
+                if (encoding && channelName && encoding[channelName]) {
+                    encoding[channelName].type = 'nominal';
+                }
+                return 'nominal';
+            }
+            // For non-string types, still throw error (truly invalid)
+            throw new Error(`VegaLiteSchemaAdapter: Field '${field}' marked as quantitative but contains non-numeric values (${actualType}).`);
+        }
+    } else if (expectedType === 'temporal') {
+        const isValidDate = sampleValue instanceof Date || typeof sampleValue === 'string' && !isNaN(Date.parse(sampleValue));
+        if (!isValidDate) {
+            let suggestion = '';
+            if (typeof sampleValue === 'number') {
+                suggestion = ' The data contains numbers. Change the type to "quantitative" instead.';
+            } else if (typeof sampleValue === 'string') {
+                suggestion = ` The data contains strings that are not valid dates (e.g., "${sampleValue}"). Ensure dates are in ISO format (YYYY-MM-DD) or valid date strings.`;
+            }
+            throw new Error(`VegaLiteSchemaAdapter: Field '${field}' marked as temporal but contains invalid date values.${suggestion}`);
+        }
+    }
+    return undefined;
+}
+/**
+ * Validates X and Y encodings for charts requiring both axes
+ * Performs comprehensive validation including data array, nested arrays, and encoding types
+ * Can auto-correct type mismatches (e.g., quantitative with string data → nominal)
+ *
+ * @param data - Array of data objects
+ * @param xField - X field name
+ * @param yField - Y field name
+ * @param xType - Expected X encoding type
+ * @param yType - Expected Y encoding type
+ * @param chartType - Chart type for error message context
+ * @param encoding - Encoding object (optional, for auto-correction)
+ * @throws Error if validation fails
+ */ function validateXYEncodings(data, xField, yField, xType, yType, chartType, encoding) {
+    validateDataArray(data, xField, chartType);
+    validateDataArray(data, yField, chartType);
+    validateNoNestedArrays(data, xField);
+    validateNoNestedArrays(data, yField);
+    // Validate types with auto-correction support
+    validateEncodingType(data, xField, xType, encoding, 'x');
+    validateEncodingType(data, yField, yType, encoding, 'y');
+}
+/**
+ * Extracts Y-axis scale type from encoding
+ * Returns 'log' if logarithmic scale is specified, undefined otherwise
+ */ function extractYAxisType(encoding) {
+    var _encoding_y;
+    const yScale = encoding === null || encoding === void 0 ? void 0 : (_encoding_y = encoding.y) === null || _encoding_y === void 0 ? void 0 : _encoding_y.scale;
+    return (yScale === null || yScale === void 0 ? void 0 : yScale.type) === 'log' ? 'log' : undefined;
+}
+/**
+ * Extracts y-axis min/max considering both scale.domain and scale.zero.
+ * When scale.zero is false and no explicit domain, yMinValue is computed from data.
+ */ function extractYMinMax(encoding, dataValues) {
+    var _encoding_y;
+    const yScale = encoding === null || encoding === void 0 ? void 0 : (_encoding_y = encoding.y) === null || _encoding_y === void 0 ? void 0 : _encoding_y.scale;
+    const domain = yScale === null || yScale === void 0 ? void 0 : yScale.domain;
+    // Explicit domain takes priority
+    if (Array.isArray(domain)) {
+        return {
+            yMinValue: domain[0],
+            yMaxValue: domain[1]
+        };
+    }
+    // When zero is explicitly false, compute min from data so y-axis doesn't start at 0
+    if ((yScale === null || yScale === void 0 ? void 0 : yScale.zero) === false) {
+        var _encoding_y1;
+        const yField = encoding === null || encoding === void 0 ? void 0 : (_encoding_y1 = encoding.y) === null || _encoding_y1 === void 0 ? void 0 : _encoding_y1.field;
+        if (yField) {
+            const yValues = dataValues.map((row)=>Number(row[yField])).filter((v)=>!isNaN(v));
+            if (yValues.length > 0) {
+                var _d3Min;
+                const dataMin = (_d3Min = d3Min(yValues)) !== null && _d3Min !== void 0 ? _d3Min : 0;
+                var _d3Max;
+                const dataMax = (_d3Max = d3Max(yValues)) !== null && _d3Max !== void 0 ? _d3Max : 0;
+                const padding = (dataMax - dataMin) * 0.05;
+                return {
+                    yMinValue: dataMin - padding
+                };
+            }
+        }
+    }
+    return {};
+}
+/**
+ * Creates a value formatter from a d3-format specifier string.
+ * Returns undefined if no format is specified or if the format is invalid.
+ */ function createValueFormatter(formatSpec) {
+    if (!formatSpec) {
+        return undefined;
+    }
+    try {
+        const formatter = d3Format(formatSpec);
+        return formatter;
+    } catch  {
+        return undefined;
+    }
+}
+/**
+ * Converts Vega-Lite sort specification to Fluent Charts AxisCategoryOrder
+ * Supports: 'ascending', 'descending', null, array, or object with op/order
+ * @param sort - Vega-Lite sort specification
+ * @returns AxisCategoryOrder compatible value
+ */ function convertVegaSortToAxisCategoryOrder(sort) {
+    if (!sort) {
+        return undefined;
+    }
+    // Handle string sorts: 'ascending' | 'descending'
+    if (typeof sort === 'string') {
+        if (sort === 'ascending') {
+            return 'category ascending';
+        }
+        if (sort === 'descending') {
+            return 'category descending';
+        }
+        return undefined;
+    }
+    // Handle array sort (explicit ordering)
+    if (Array.isArray(sort)) {
+        return sort;
+    }
+    // Handle object sort with op and order
+    if (typeof sort === 'object' && sort.op && sort.order) {
+        const op = sort.op === 'average' ? 'mean' : sort.op; // Map 'average' to 'mean'
+        const order = sort.order === 'ascending' ? 'ascending' : 'descending';
+        return `${op} ${order}`;
+    }
+    return undefined;
+}
+/**
+ * Extracts axis category ordering from Vega-Lite encoding
+ * Returns props for xAxisCategoryOrder and yAxisCategoryOrder
+ */ function extractAxisCategoryOrderProps(encoding) {
+    var _encoding_x, _encoding_y;
+    const result = {};
+    if (encoding === null || encoding === void 0 ? void 0 : (_encoding_x = encoding.x) === null || _encoding_x === void 0 ? void 0 : _encoding_x.sort) {
+        const xOrder = convertVegaSortToAxisCategoryOrder(encoding.x.sort);
+        if (xOrder) {
+            result.xAxisCategoryOrder = xOrder;
+        }
+    }
+    if (encoding === null || encoding === void 0 ? void 0 : (_encoding_y = encoding.y) === null || _encoding_y === void 0 ? void 0 : _encoding_y.sort) {
+        const yOrder = convertVegaSortToAxisCategoryOrder(encoding.y.sort);
+        if (yOrder) {
+            result.yAxisCategoryOrder = yOrder;
+        }
+    }
+    return result;
+}
+/**
+ * Initializes the transformation context by normalizing spec and extracting common data
+ * This reduces boilerplate across all transformer functions
+ *
+ * @param spec - Vega-Lite specification
+ * @returns Normalized context with unit specs, data values, encoding, and mark properties
+ */ function initializeTransformContext(spec) {
+    var _colorEnc_condition, _encoding_x, _encoding_x1;
+    const unitSpecs = normalizeSpec(spec);
+    if (unitSpecs.length === 0) {
+        throw new Error('VegaLiteSchemaAdapter: No valid unit specs found in specification');
+    }
+    const primarySpec = unitSpecs[0];
+    const rawDataValues = extractDataValues(primarySpec.data);
+    // Apply any transforms from both top-level spec and primary unit spec
+    let dataValues = applyTransforms(rawDataValues, spec.transform);
+    dataValues = applyTransforms(dataValues, primarySpec.transform);
+    const encoding = primarySpec.encoding || {};
+    // Handle conditional color encoding — evaluate test expressions and materialize color values
+    const colorEnc = encoding.color;
+    if ((colorEnc === null || colorEnc === void 0 ? void 0 : colorEnc.condition) && typeof ((_colorEnc_condition = colorEnc.condition) === null || _colorEnc_condition === void 0 ? void 0 : _colorEnc_condition.test) === 'string') {
+        const condition = colorEnc.condition;
+        const elseValue = colorEnc.value || '#999';
+        const colorField = '__conditional_color__';
+        dataValues.forEach((row)=>{
+            try {
+                const testResult = safeEvaluateExpression(condition.test, row);
+                row[colorField] = testResult ? condition.value : elseValue;
+            } catch  {
+                row[colorField] = elseValue;
+            }
+        });
+        // Replace conditional color with a field-based color encoding using the materialized values
+        encoding.color = {
+            field: colorField,
+            type: 'nominal',
+            scale: {
+                domain: [
+                    condition.value,
+                    elseValue
+                ],
+                range: [
+                    condition.value,
+                    elseValue
+                ]
+            },
+            legend: null
+        };
+    }
+    // Handle timeUnit on x/y encodings — aggregate data by time unit
+    if (((_encoding_x = encoding.x) === null || _encoding_x === void 0 ? void 0 : _encoding_x.timeUnit) && ((_encoding_x1 = encoding.x) === null || _encoding_x1 === void 0 ? void 0 : _encoding_x1.field)) {
+        var _encoding_y, _encoding_y1, _encoding_y2;
+        const field = encoding.x.field;
+        const unit = encoding.x.timeUnit;
+        const yField = (_encoding_y = encoding.y) === null || _encoding_y === void 0 ? void 0 : _encoding_y.field;
+        const yAgg = ((_encoding_y1 = encoding.y) === null || _encoding_y1 === void 0 ? void 0 : _encoding_y1.aggregate) || (yField ? 'mean' : 'count');
+        const groups = new Map();
+        dataValues.forEach((row)=>{
+            const dateVal = new Date(row[field]);
+            if (isNaN(dateVal.getTime())) {
+                return;
+            }
+            let key;
+            switch(unit){
+                case 'year':
+                    key = String(dateVal.getFullYear());
+                    break;
+                case 'quarter':
+                    key = `Q${Math.floor(dateVal.getMonth() / 3) + 1}`;
+                    break;
+                case 'month':
+                    key = dateVal.toLocaleString('en', {
+                        month: 'short'
+                    });
+                    break;
+                case 'day':
+                    key = String(dateVal.getDate());
+                    break;
+                case 'hours':
+                    key = String(dateVal.getHours());
+                    break;
+                default:
+                    key = String(dateVal);
+            }
+            if (!groups.has(key)) {
+                groups.set(key, []);
+            }
+            groups.get(key).push(row);
+        });
+        dataValues = Array.from(groups.entries()).map(([key, rows])=>{
+            const result = {
+                [field]: key
+            };
+            if (yField && yAgg !== 'count') {
+                const vals = rows.map((r)=>Number(r[yField])).filter((v)=>!isNaN(v));
+                var _d3Mean;
+                result[yField] = yAgg === 'sum' ? d3Sum(vals) : (_d3Mean = d3Mean(vals)) !== null && _d3Mean !== void 0 ? _d3Mean : 0;
+            } else {
+                result[yField || '__count'] = rows.length;
+            }
+            return result;
+        });
+        // Switch x from temporal to ordinal since we've aggregated
+        encoding.x.type = 'ordinal';
+        delete encoding.x.timeUnit;
+        if ((_encoding_y2 = encoding.y) === null || _encoding_y2 === void 0 ? void 0 : _encoding_y2.aggregate) {
+            delete encoding.y.aggregate;
+        }
+    }
+    const markProps = getMarkProperties(primarySpec.mark);
+    return {
+        unitSpecs,
+        primarySpec,
+        dataValues,
+        encoding,
+        markProps
+    };
+}
+/**
+ * Extracts common encoding fields and aggregates from Vega-Lite encoding
+ *
+ * @param encoding - Vega-Lite encoding specification
+ * @returns Object containing extracted field names and aggregates
+ */ function extractEncodingFields(encoding) {
+    var _encoding_x, _encoding_y, _encoding_x2, _encoding_color, _encoding_size, _encoding_theta, _encoding_radius, _encoding_x1, _encoding_y1;
+    return {
+        xField: (_encoding_x = encoding.x) === null || _encoding_x === void 0 ? void 0 : _encoding_x.field,
+        yField: (_encoding_y = encoding.y) === null || _encoding_y === void 0 ? void 0 : _encoding_y.field,
+        x2Field: (_encoding_x2 = encoding.x2) === null || _encoding_x2 === void 0 ? void 0 : _encoding_x2.field,
+        colorField: (_encoding_color = encoding.color) === null || _encoding_color === void 0 ? void 0 : _encoding_color.field,
+        sizeField: (_encoding_size = encoding.size) === null || _encoding_size === void 0 ? void 0 : _encoding_size.field,
+        thetaField: (_encoding_theta = encoding.theta) === null || _encoding_theta === void 0 ? void 0 : _encoding_theta.field,
+        radiusField: (_encoding_radius = encoding.radius) === null || _encoding_radius === void 0 ? void 0 : _encoding_radius.field,
+        xAggregate: (_encoding_x1 = encoding.x) === null || _encoding_x1 === void 0 ? void 0 : _encoding_x1.aggregate,
+        yAggregate: (_encoding_y1 = encoding.y) === null || _encoding_y1 === void 0 ? void 0 : _encoding_y1.aggregate
+    };
+}
+/**
+ * Computes aggregate values for bar charts
+ * Supports count, sum, mean, min, max aggregations
+ *
+ * @param data - Array of data values
+ * @param groupField - Field to group by (x-axis field)
+ * @param valueField - Field to aggregate (y-axis field, optional for count)
+ * @param aggregate - Aggregate function (count, sum, mean, min, max)
+ * @returns Array of {category, value} objects
+ */ function computeAggregateData(data, groupField, valueField, aggregate) {
+    // Group data by category
+    const groups = new Map();
+    data.forEach((row)=>{
+        const category = String(row[groupField]);
+        if (aggregate === 'count') {
+            // For count, just track the count
+            if (!groups.has(category)) {
+                groups.set(category, []);
+            }
+            groups.get(category).push(1);
+        } else if (valueField && row[valueField] !== undefined && row[valueField] !== null) {
+            // For other aggregates, collect values
+            const value = Number(row[valueField]);
+            if (!isNaN(value)) {
+                if (!groups.has(category)) {
+                    groups.set(category, []);
+                }
+                groups.get(category).push(value);
+            }
+        }
+    });
+    // Compute aggregate for each group
+    const result = [];
+    groups.forEach((values, category)=>{
+        let aggregatedValue;
+        switch(aggregate){
+            case 'count':
+                aggregatedValue = values.length;
+                break;
+            case 'sum':
+                aggregatedValue = values.reduce((a, b)=>a + b, 0);
+                break;
+            case 'mean':
+            case 'average':
+                aggregatedValue = values.reduce((a, b)=>a + b, 0) / values.length;
+                break;
+            case 'min':
+                var _d3Min;
+                aggregatedValue = (_d3Min = d3Min(values)) !== null && _d3Min !== void 0 ? _d3Min : 0;
+                break;
+            case 'max':
+                var _d3Max;
+                aggregatedValue = (_d3Max = d3Max(values)) !== null && _d3Max !== void 0 ? _d3Max : 0;
+                break;
+            default:
+                aggregatedValue = values.length; // Default to count
+        }
+        result.push({
+            category,
+            value: aggregatedValue
+        });
+    });
+    return result;
+}
+/**
+ * Counts rows per x-category, optionally grouped by a secondary (color) field.
+ * Returns a Map<xKey, Map<legend, count>>.
+ */ function countByCategory(dataValues, xField, colorField, defaultLegend) {
+    const countMap = new Map();
+    dataValues.forEach((row)=>{
+        const xValue = row[xField];
+        if (xValue === undefined) {
+            return;
+        }
+        const xKey = String(xValue);
+        const legend = colorField && row[colorField] !== undefined ? String(row[colorField]) : defaultLegend;
+        if (!countMap.has(xKey)) {
+            countMap.set(xKey, new Map());
+        }
+        const legendMap = countMap.get(xKey);
+        legendMap.set(legend, (legendMap.get(legend) || 0) + 1);
+    });
+    return countMap;
+}
+/**
+ * Extracts color configuration from Vega-Lite encoding
+ *
+ * @param encoding - Vega-Lite encoding specification
+ * @returns Color scheme and range configuration
+ */ function extractColorConfig(encoding) {
+    var _encoding_color_scale, _encoding_color, _encoding_color_scale1, _encoding_color1;
+    return {
+        colorScheme: (_encoding_color = encoding.color) === null || _encoding_color === void 0 ? void 0 : (_encoding_color_scale = _encoding_color.scale) === null || _encoding_color_scale === void 0 ? void 0 : _encoding_color_scale.scheme,
+        colorRange: (_encoding_color1 = encoding.color) === null || _encoding_color1 === void 0 ? void 0 : (_encoding_color_scale1 = _encoding_color1.scale) === null || _encoding_color_scale1 === void 0 ? void 0 : _encoding_color_scale1.range
+    };
+}
+/**
+ * Groups data rows into series based on color encoding field
+ * Returns a map of series name to data points and ordinal mapping for categorical x-axis
+ */ function groupDataBySeries(dataValues, xField, yField, colorField, isXTemporal, isYTemporal, xType, sizeField, yType) {
+    const seriesMap = new Map();
+    if (!xField || !yField) {
+        return {
+            seriesMap
+        };
+    }
+    // Check if x-axis is ordinal/nominal (categorical)
+    const isXOrdinal = xType === 'ordinal' || xType === 'nominal';
+    const ordinalMapping = isXOrdinal ? new Map() : undefined;
+    const ordinalLabels = [];
+    // Check if y-axis is ordinal/nominal (categorical)
+    const isYOrdinal = yType === 'ordinal' || yType === 'nominal';
+    const yOrdinalMapping = isYOrdinal ? new Map() : undefined;
+    const yOrdinalLabels = [];
+    dataValues.forEach((row)=>{
+        const xValue = parseValue(row[xField], isXTemporal);
+        const yValue = parseValue(row[yField], isYTemporal);
+        // Skip invalid values using chart-utilities validation
+        if (isInvalidValue(xValue) || isInvalidValue(yValue)) {
+            return;
+        }
+        // Skip if x or y is empty string (from null/undefined) or y is not a valid number/string
+        if (xValue === '' || yValue === '' || typeof yValue !== 'number' && typeof yValue !== 'string') {
+            return;
+        }
+        const seriesName = colorField && row[colorField] !== undefined ? String(row[colorField]) : 'default';
+        if (!seriesMap.has(seriesName)) {
+            seriesMap.set(seriesName, []);
+        }
+        // Handle x-value based on type
+        let numericX;
+        if (isXOrdinal && typeof xValue === 'string') {
+            // For ordinal data, map each unique string to a sequential index
+            if (!ordinalMapping.has(xValue)) {
+                ordinalMapping.set(xValue, ordinalMapping.size);
+                ordinalLabels.push(xValue);
+            }
+            numericX = ordinalMapping.get(xValue);
+        } else if (typeof xValue === 'string') {
+            // For non-ordinal strings, try to parse as float (fallback to 0)
+            const parsed = parseFloat(xValue);
+            if (isNaN(parsed)) {
+                return;
+            }
+            numericX = parsed;
+        } else {
+            numericX = xValue;
+        }
+        const markerSize = sizeField && row[sizeField] !== undefined ? Number(row[sizeField]) : undefined;
+        // Handle y-value: numeric or ordinal mapping
+        let numericY;
+        if (isYOrdinal && typeof yValue === 'string') {
+            if (!yOrdinalMapping.has(yValue)) {
+                yOrdinalMapping.set(yValue, yOrdinalMapping.size);
+                yOrdinalLabels.push(yValue);
+            }
+            numericY = yOrdinalMapping.get(yValue);
+        } else {
+            numericY = typeof yValue === 'number' ? yValue : 0;
+        }
+        seriesMap.get(seriesName).push({
+            x: numericX,
+            y: numericY,
+            ...markerSize !== undefined && !isNaN(markerSize) && {
+                markerSize
+            }
+        });
+    });
+    return {
+        seriesMap,
+        ordinalMapping,
+        ordinalLabels: ordinalLabels.length > 0 ? ordinalLabels : undefined,
+        yOrdinalLabels: yOrdinalLabels.length > 0 ? yOrdinalLabels : undefined
+    };
+}
+/**
+ * Finds the primary data layer from unit specs for line/area charts
+ * Skips rect layers (used for color fill bars) and finds the actual line/point/area layer
+ *
+ * @param unitSpecs - Array of normalized unit specs
+ * @returns The primary spec containing the actual chart data, or undefined if not found
+ */ function findPrimaryLineSpec(unitSpecs) {
+    // First, try to find a line, point, or area layer
+    const lineSpec = unitSpecs.find((spec)=>{
+        const markType = getMarkType(spec.mark);
+        return markType === 'line' || markType === 'point' || markType === 'area';
+    });
+    if (lineSpec) {
+        return lineSpec;
+    }
+    // If no line/point/area layer, find first layer with actual field encodings (not just datum)
+    const dataSpec = unitSpecs.find((spec)=>{
+        var _encoding_x, _encoding_y;
+        const encoding = spec.encoding || {};
+        return ((_encoding_x = encoding.x) === null || _encoding_x === void 0 ? void 0 : _encoding_x.field) || ((_encoding_y = encoding.y) === null || _encoding_y === void 0 ? void 0 : _encoding_y.field);
+    });
+    return dataSpec || unitSpecs[0];
+}
+/**
+ * Transforms Vega-Lite specification to Fluent LineChart props
+ *
+ * @param spec - Vega-Lite specification
+ * @param colorMap - Color mapping ref for consistent coloring
+ * @param isDarkTheme - Whether dark theme is active
+ * @returns LineChartProps for rendering with Fluent LineChart component
+ */ /**
+ * Auto-corrects encoding types in a Vega-Lite spec based on actual data values.
+ * Call this before chart type detection so routing decisions use corrected types.
+ *
+ * Corrections applied:
+ * - quantitative + string data → nominal (render as categorical)
+ *
+ * This mutates the spec encoding in place.
+ */ export function autoCorrectEncodingTypes(spec) {
+    var _encoding_x, _encoding_y;
+    const unitSpec = spec.layer ? spec.layer[0] : spec;
+    if (!unitSpec) {
+        return;
+    }
+    const encoding = unitSpec.encoding;
+    var _unitSpec_data;
+    const data = extractDataValues((_unitSpec_data = unitSpec.data) !== null && _unitSpec_data !== void 0 ? _unitSpec_data : spec.data);
+    if (!encoding || data.length === 0) {
+        return;
+    }
+    // Check x encoding
+    if ((_encoding_x = encoding.x) === null || _encoding_x === void 0 ? void 0 : _encoding_x.field) {
+        const sample = data.map((row)=>row[encoding.x.field]).find((v)=>v !== null && v !== undefined);
+        if (sample !== undefined) {
+            if (encoding.x.type === 'quantitative') {
+                if (typeof sample === 'string' && !isFinite(Number(sample))) {
+                    encoding.x.type = 'nominal';
+                } else if (typeof sample === 'object') {
+                    encoding.x.type = 'nominal';
+                }
+            } else if (encoding.x.type === 'temporal') {
+                const isValidDate = sample instanceof Date || typeof sample === 'string' && !isNaN(Date.parse(sample));
+                if (!isValidDate) {
+                    encoding.x.type = typeof sample === 'number' ? 'quantitative' : 'nominal';
+                }
+            }
+        }
+    }
+    // Check y encoding
+    if ((_encoding_y = encoding.y) === null || _encoding_y === void 0 ? void 0 : _encoding_y.field) {
+        const sample = data.map((row)=>row[encoding.y.field]).find((v)=>v !== null && v !== undefined);
+        if (sample !== undefined) {
+            if (encoding.y.type === 'quantitative') {
+                if (typeof sample === 'string' && !isFinite(Number(sample))) {
+                    encoding.y.type = 'nominal';
+                } else if (typeof sample === 'object' && sample !== null && !Array.isArray(sample) && !(sample instanceof Date)) {
+                    // Try to extract a numeric value from the object
+                    const numericKeys = Object.keys(sample).filter((k)=>typeof sample[k] === 'number');
+                    if (numericKeys.length === 1) {
+                        // Object has exactly one numeric property - use it as the value
+                        const numericKey = numericKeys[0];
+                        const yField = encoding.y.field;
+                        data.forEach((row)=>{
+                            const obj = row[yField];
+                            if (typeof obj === 'object' && obj !== null) {
+                                row[yField] = obj[numericKey];
+                            }
+                        });
+                    // Keep type as quantitative since we extracted numeric values
+                    } else {
+                        encoding.y.type = 'nominal';
+                    }
+                } else if (typeof sample === 'object') {
+                    encoding.y.type = 'nominal';
+                }
+            } else if (encoding.y.type === 'temporal') {
+                const isValidDate = sample instanceof Date || typeof sample === 'string' && !isNaN(Date.parse(sample));
+                if (!isValidDate) {
+                    encoding.y.type = typeof sample === 'number' ? 'quantitative' : 'nominal';
+                }
+            }
+        }
+    }
+}
+/**
+ * Determines the chart type based on Vega-Lite spec
+ */ export function getChartType(spec) {
+    var _spec_layer_, _spec_layer_1, _encoding_color, _encoding_x, _encoding_y, _encoding_color1;
+    // Auto-correct encoding types based on actual data BEFORE chart type detection
+    autoCorrectEncodingTypes(spec);
+    // Handle layered specs - check if it's a bar+line combo for stacked bar with lines
+    if (spec.layer && spec.layer.length > 1) {
+        const marks = spec.layer.map((layer)=>getMarkType(layer.mark));
+        const hasBar = marks.includes('bar');
+        const hasLine = marks.includes('line') || marks.includes('point');
+        // Bar + line combo should use stacked bar chart (which supports line overlays)
+        if (hasBar && hasLine) {
+            var _barLayer_encoding_color, _barLayer_encoding;
+            const barLayer = spec.layer.find((layer)=>getMarkType(layer.mark) === 'bar');
+            if (barLayer === null || barLayer === void 0 ? void 0 : (_barLayer_encoding = barLayer.encoding) === null || _barLayer_encoding === void 0 ? void 0 : (_barLayer_encoding_color = _barLayer_encoding.color) === null || _barLayer_encoding_color === void 0 ? void 0 : _barLayer_encoding_color.field) {
+                return {
+                    type: 'stacked-bar',
+                    mark: 'bar'
+                };
+            }
+            return {
+                type: 'stacked-bar',
+                mark: 'bar'
+            };
+        }
+    }
+    // Handle layered specs - use first layer's mark for other cases
+    const mark = spec.layer ? (_spec_layer_ = spec.layer[0]) === null || _spec_layer_ === void 0 ? void 0 : _spec_layer_.mark : spec.mark;
+    const markType = getMarkType(mark);
+    const encoding = spec.layer ? (_spec_layer_1 = spec.layer[0]) === null || _spec_layer_1 === void 0 ? void 0 : _spec_layer_1.encoding : spec.encoding;
+    const hasColorEncoding = !!(encoding === null || encoding === void 0 ? void 0 : (_encoding_color = encoding.color) === null || _encoding_color === void 0 ? void 0 : _encoding_color.field);
+    // Polar charts with arc marks: theta AND radius encodings
+    if (markType === 'arc' && (encoding === null || encoding === void 0 ? void 0 : encoding.theta) && (encoding === null || encoding === void 0 ? void 0 : encoding.radius)) {
+        return {
+            type: 'polar',
+            mark: markType
+        };
+    }
+    // Arc marks for pie/donut charts (theta only, no radius)
+    if (markType === 'arc' && (encoding === null || encoding === void 0 ? void 0 : encoding.theta)) {
+        return {
+            type: 'donut',
+            mark: markType
+        };
+    }
+    // Polar charts: non-arc marks with theta and radius encodings
+    if ((encoding === null || encoding === void 0 ? void 0 : encoding.theta) && (encoding === null || encoding === void 0 ? void 0 : encoding.radius)) {
+        return {
+            type: 'polar',
+            mark: markType
+        };
+    }
+    // Rect marks for heatmaps (quantitative or nominal color)
+    if (markType === 'rect' && (encoding === null || encoding === void 0 ? void 0 : (_encoding_x = encoding.x) === null || _encoding_x === void 0 ? void 0 : _encoding_x.field) && (encoding === null || encoding === void 0 ? void 0 : (_encoding_y = encoding.y) === null || _encoding_y === void 0 ? void 0 : _encoding_y.field) && (encoding === null || encoding === void 0 ? void 0 : (_encoding_color1 = encoding.color) === null || _encoding_color1 === void 0 ? void 0 : _encoding_color1.field)) {
+        return {
+            type: 'heatmap',
+            mark: markType
+        };
+    }
+    // Bar charts
+    if (markType === 'bar') {
+        var _encoding_x1, _encoding_x2, _encoding_x3, _encoding_y1, _encoding_y2, _encoding_x4, _spec_data;
+        if (encoding === null || encoding === void 0 ? void 0 : (_encoding_x1 = encoding.x) === null || _encoding_x1 === void 0 ? void 0 : _encoding_x1.bin) {
+            return {
+                type: 'histogram',
+                mark: markType
+            };
+        }
+        const isXNominal = (encoding === null || encoding === void 0 ? void 0 : (_encoding_x2 = encoding.x) === null || _encoding_x2 === void 0 ? void 0 : _encoding_x2.type) === 'nominal' || (encoding === null || encoding === void 0 ? void 0 : (_encoding_x3 = encoding.x) === null || _encoding_x3 === void 0 ? void 0 : _encoding_x3.type) === 'ordinal';
+        const isYNominal = (encoding === null || encoding === void 0 ? void 0 : (_encoding_y1 = encoding.y) === null || _encoding_y1 === void 0 ? void 0 : _encoding_y1.type) === 'nominal' || (encoding === null || encoding === void 0 ? void 0 : (_encoding_y2 = encoding.y) === null || _encoding_y2 === void 0 ? void 0 : _encoding_y2.type) === 'ordinal';
+        if (isYNominal && !isXNominal) {
+            return {
+                type: 'horizontal-bar',
+                mark: markType
+            };
+        }
+        if (hasColorEncoding) {
+            const hasXOffset = !!(encoding === null || encoding === void 0 ? void 0 : encoding.xOffset);
+            if (hasXOffset) {
+                return {
+                    type: 'grouped-bar',
+                    mark: markType
+                };
+            }
+            return {
+                type: 'stacked-bar',
+                mark: markType
+            };
+        }
+        const xField = encoding === null || encoding === void 0 ? void 0 : (_encoding_x4 = encoding.x) === null || _encoding_x4 === void 0 ? void 0 : _encoding_x4.field;
+        const dataValues = (_spec_data = spec.data) === null || _spec_data === void 0 ? void 0 : _spec_data.values;
+        if (xField && Array.isArray(dataValues) && dataValues.length > 0) {
+            const xValues = dataValues.map((row)=>row[xField]);
+            const uniqueXValues = new Set(xValues);
+            if (uniqueXValues.size < xValues.length) {
+                return {
+                    type: 'stacked-bar',
+                    mark: markType
+                };
+            }
+        }
+        return {
+            type: 'bar',
+            mark: markType
+        };
+    }
+    if (markType === 'area') {
+        return {
+            type: 'area',
+            mark: markType
+        };
+    }
+    if (markType === 'point' || markType === 'circle' || markType === 'square' || markType === 'tick') {
+        return {
+            type: 'scatter',
+            mark: markType
+        };
+    }
+    // Trail marks rendered as line charts (size encoding as markerSize)
+    if (markType === 'trail') {
+        return {
+            type: 'line',
+            mark: 'line'
+        };
+    }
+    // Error bar/band marks rendered as line charts
+    if (markType === 'errorbar' || markType === 'errorband') {
+        return {
+            type: 'line',
+            mark: 'line'
+        };
+    }
+    return {
+        type: 'line',
+        mark: markType || 'line'
+    };
+}
+export function transformVegaLiteToLineChartProps(spec, colorMap, isDarkTheme) {
+    var _encoding_x, _encoding_y, _encoding_x1, _encoding_y1, _encoding_x2, _encoding_y2, _spec_title, _encoding_x_axis, _encoding_x3, _encoding_y_axis, _encoding_y3, _encoding_x_axis1, _encoding_x4, _encoding_y_axis1, _encoding_y4, _encoding_x_axis2, _encoding_x5, _encoding_y_axis2, _encoding_y5, _encoding_color_legend, _encoding_color;
+    // Initialize transformation context, but find the primary line/point layer for layered specs
+    const unitSpecs = normalizeSpec(spec);
+    if (unitSpecs.length === 0) {
+        throw new Error('VegaLiteSchemaAdapter: No valid unit specs found in specification');
+    }
+    // For layered specs, find the actual line/point layer (not rect layers for color fill bars)
+    const primarySpec = findPrimaryLineSpec(unitSpecs);
+    if (!primarySpec) {
+        throw new Error('VegaLiteSchemaAdapter: No valid line/point layer found in specification');
+    }
+    // Check if there's a point layer in addition to line layer (for line+point combo charts)
+    const hasPointLayer = unitSpecs.some((unitSpec)=>getMarkType(unitSpec.mark) === 'point');
+    const hasLineLayer = unitSpecs.some((unitSpec)=>getMarkType(unitSpec.mark) === 'line');
+    const shouldShowPoints = hasPointLayer && hasLineLayer;
+    const rawDataValues = extractDataValues(primarySpec.data);
+    // Apply any transforms (fold, etc.) from the spec
+    const dataValues = applyTransforms(rawDataValues, spec.transform);
+    const encoding = primarySpec.encoding || {};
+    const markProps = getMarkProperties(primarySpec.mark);
+    // Extract field names
+    const { xField, yField, colorField } = extractEncodingFields(encoding);
+    // Check for size encoding from any layer (e.g., point layer with size in line+point combo)
+    let sizeField;
+    if (unitSpecs.length > 1) {
+        for (const unitSpec of unitSpecs){
+            var _unitEncoding_size;
+            const unitEncoding = unitSpec.encoding || {};
+            if ((_unitEncoding_size = unitEncoding.size) === null || _unitEncoding_size === void 0 ? void 0 : _unitEncoding_size.field) {
+                sizeField = unitEncoding.size.field;
+                break;
+            }
+        }
+    } else {
+        var _encoding_size;
+        sizeField = (_encoding_size = encoding.size) === null || _encoding_size === void 0 ? void 0 : _encoding_size.field;
+    }
+    // Validate data and encodings
+    if (!xField || !yField) {
+        throw new Error('VegaLiteSchemaAdapter: Line chart requires both x and y encodings with field names');
+    }
+    validateXYEncodings(dataValues, xField, yField, (_encoding_x = encoding.x) === null || _encoding_x === void 0 ? void 0 : _encoding_x.type, (_encoding_y = encoding.y) === null || _encoding_y === void 0 ? void 0 : _encoding_y.type, 'LineChart', encoding);
+    const isXTemporal = ((_encoding_x1 = encoding.x) === null || _encoding_x1 === void 0 ? void 0 : _encoding_x1.type) === 'temporal';
+    const isYTemporal = ((_encoding_y1 = encoding.y) === null || _encoding_y1 === void 0 ? void 0 : _encoding_y1.type) === 'temporal';
+    // Group data into series
+    const { seriesMap, ordinalLabels, yOrdinalLabels } = groupDataBySeries(dataValues, xField, yField, colorField, isXTemporal, isYTemporal, (_encoding_x2 = encoding.x) === null || _encoding_x2 === void 0 ? void 0 : _encoding_x2.type, sizeField, (_encoding_y2 = encoding.y) === null || _encoding_y2 === void 0 ? void 0 : _encoding_y2.type);
+    // Extract color configuration
+    const { colorScheme, colorRange } = extractColorConfig(encoding);
+    // Convert series map to LineChartPoints array
+    const lineChartData = [];
+    const colorIndex = new Map();
+    let currentColorIndex = 0;
+    seriesMap.forEach((dataPoints, seriesName)=>{
+        if (!colorIndex.has(seriesName)) {
+            colorIndex.set(seriesName, currentColorIndex++);
+        }
+        const color = resolveColor(seriesName, colorIndex.get(seriesName), undefined, markProps.color, colorMap, colorScheme, colorRange, isDarkTheme);
+        const curveOption = mapInterpolateToCurve(markProps.interpolate);
+        // Build line options with curve, strokeDash, and strokeWidth
+        const lineOptions = {};
+        if (curveOption) {
+            lineOptions.curve = curveOption;
+        }
+        if (markProps.strokeDash) {
+            lineOptions.strokeDasharray = markProps.strokeDash.join(' ');
+        }
+        if (markProps.strokeWidth) {
+            lineOptions.strokeWidth = markProps.strokeWidth;
+        }
+        lineChartData.push({
+            legend: seriesName,
+            data: dataPoints,
+            color,
+            hideNonActiveDots: !shouldShowPoints,
+            ...Object.keys(lineOptions).length > 0 && {
+                lineOptions
+            }
+        });
+    });
+    // Extract chart title
+    const chartTitle = typeof spec.title === 'string' ? spec.title : (_spec_title = spec.title) === null || _spec_title === void 0 ? void 0 : _spec_title.text;
+    var _encoding_x_axis_title;
+    // Extract axis titles and formats
+    const xAxisTitle = (_encoding_x_axis_title = (_encoding_x3 = encoding.x) === null || _encoding_x3 === void 0 ? void 0 : (_encoding_x_axis = _encoding_x3.axis) === null || _encoding_x_axis === void 0 ? void 0 : _encoding_x_axis.title) !== null && _encoding_x_axis_title !== void 0 ? _encoding_x_axis_title : undefined;
+    var _encoding_y_axis_title;
+    const yAxisTitle = (_encoding_y_axis_title = (_encoding_y3 = encoding.y) === null || _encoding_y3 === void 0 ? void 0 : (_encoding_y_axis = _encoding_y3.axis) === null || _encoding_y_axis === void 0 ? void 0 : _encoding_y_axis.title) !== null && _encoding_y_axis_title !== void 0 ? _encoding_y_axis_title : undefined;
+    const tickFormat = (_encoding_x4 = encoding.x) === null || _encoding_x4 === void 0 ? void 0 : (_encoding_x_axis1 = _encoding_x4.axis) === null || _encoding_x_axis1 === void 0 ? void 0 : _encoding_x_axis1.format;
+    const yAxisTickFormat = (_encoding_y4 = encoding.y) === null || _encoding_y4 === void 0 ? void 0 : (_encoding_y_axis1 = _encoding_y4.axis) === null || _encoding_y_axis1 === void 0 ? void 0 : _encoding_y_axis1.format;
+    // Extract tick values and counts
+    // Use ordinalLabels for ordinal x-axis, otherwise use explicit values from spec
+    const tickValues = ordinalLabels || ((_encoding_x5 = encoding.x) === null || _encoding_x5 === void 0 ? void 0 : (_encoding_x_axis2 = _encoding_x5.axis) === null || _encoding_x_axis2 === void 0 ? void 0 : _encoding_x_axis2.values);
+    const yAxisTickCount = (_encoding_y5 = encoding.y) === null || _encoding_y5 === void 0 ? void 0 : (_encoding_y_axis2 = _encoding_y5.axis) === null || _encoding_y_axis2 === void 0 ? void 0 : _encoding_y_axis2.tickCount;
+    // Extract domain/range for min/max values
+    const { yMinValue, yMaxValue } = extractYMinMax(encoding, dataValues);
+    // Extract annotations and color fill bars from layers
+    const annotations = extractAnnotations(spec);
+    const colorFillBars = extractColorFillBars(spec, colorMap, isDarkTheme);
+    // Convert rule marks in layered specs to reference line series
+    // Each horizontal rule becomes a 2-point line at constant y spanning the data x-range
+    if (spec.layer && Array.isArray(spec.layer) && lineChartData.length > 0) {
+        const allXValues = lineChartData.flatMap((series)=>series.data.map((p)=>p.x));
+        const xMin = allXValues.length > 0 ? allXValues.reduce((a, b)=>a < b ? a : b) : 0;
+        const xMax = allXValues.length > 0 ? allXValues.reduce((a, b)=>a > b ? a : b) : 0;
+        spec.layer.forEach((layer, layerIndex)=>{
+            var _ruleEncoding_y, _ruleEncoding_y1, _textLayer_encoding_text, _textLayer_encoding, _textLayer_encoding_text1, _textLayer_encoding1;
+            const layerMark = getMarkType(layer.mark);
+            if (layerMark !== 'rule') {
+                return;
+            }
+            const ruleEncoding = layer.encoding || {};
+            var _ruleEncoding_y_datum;
+            const yDatum = (_ruleEncoding_y_datum = (_ruleEncoding_y = ruleEncoding.y) === null || _ruleEncoding_y === void 0 ? void 0 : _ruleEncoding_y.datum) !== null && _ruleEncoding_y_datum !== void 0 ? _ruleEncoding_y_datum : (_ruleEncoding_y1 = ruleEncoding.y) === null || _ruleEncoding_y1 === void 0 ? void 0 : _ruleEncoding_y1.value;
+            if (yDatum === undefined) {
+                return;
+            }
+            const ruleMarkProps = getMarkProperties(layer.mark);
+            const ruleColor = ruleMarkProps.color || '#d62728';
+            // Find companion text annotation for legend name
+            const textLayer = spec.layer.find((l)=>{
+                var _l_encoding;
+                const m = getMarkType(l.mark);
+                var _l_encoding_y_datum;
+                return m === 'text' && ((_l_encoding = l.encoding) === null || _l_encoding === void 0 ? void 0 : _l_encoding.y) && ((_l_encoding_y_datum = l.encoding.y.datum) !== null && _l_encoding_y_datum !== void 0 ? _l_encoding_y_datum : l.encoding.y.value) === yDatum;
+            });
+            const ruleLegend = textLayer ? String(((_textLayer_encoding = textLayer.encoding) === null || _textLayer_encoding === void 0 ? void 0 : (_textLayer_encoding_text = _textLayer_encoding.text) === null || _textLayer_encoding_text === void 0 ? void 0 : _textLayer_encoding_text.datum) || ((_textLayer_encoding1 = textLayer.encoding) === null || _textLayer_encoding1 === void 0 ? void 0 : (_textLayer_encoding_text1 = _textLayer_encoding1.text) === null || _textLayer_encoding_text1 === void 0 ? void 0 : _textLayer_encoding_text1.value) || `y=${yDatum}`) : `y=${yDatum}`;
+            const ruleLineOptions = {};
+            if (ruleMarkProps.strokeDash) {
+                ruleLineOptions.strokeDasharray = ruleMarkProps.strokeDash.join(' ');
+            }
+            if (ruleMarkProps.strokeWidth) {
+                ruleLineOptions.strokeWidth = ruleMarkProps.strokeWidth;
+            }
+            lineChartData.push({
+                legend: ruleLegend,
+                data: [
+                    {
+                        x: xMin,
+                        y: yDatum
+                    },
+                    {
+                        x: xMax,
+                        y: yDatum
+                    }
+                ],
+                color: ruleColor,
+                hideNonActiveDots: true,
+                ...Object.keys(ruleLineOptions).length > 0 && {
+                    lineOptions: ruleLineOptions
+                }
+            });
+        });
+    }
+    // Check for log scale on Y-axis
+    const yAxisType = extractYAxisType(encoding);
+    // Extract axis category ordering
+    const categoryOrderProps = extractAxisCategoryOrderProps(encoding);
+    // Build LineChartProps
+    const chartProps = {
+        lineChartData,
+        ...chartTitle && {
+            chartTitle
+        }
+    };
+    var _encoding_color_legend_disable;
+    return {
+        data: chartProps,
+        width: typeof spec.width === 'number' ? spec.width : undefined,
+        height: typeof spec.height === 'number' ? spec.height : undefined,
+        ...xAxisTitle && {
+            chartTitle: xAxisTitle
+        },
+        ...yAxisTitle && {
+            yAxisTitle
+        },
+        ...tickFormat && {
+            tickFormat
+        },
+        ...yAxisTickFormat && {
+            yAxisTickFormat
+        },
+        ...tickValues && {
+            tickValues
+        },
+        ...yAxisTickCount && {
+            yAxisTickCount
+        },
+        ...yMinValue !== undefined && {
+            yMinValue
+        },
+        ...yMaxValue !== undefined && {
+            yMaxValue
+        },
+        ...annotations.length > 0 && {
+            annotations
+        },
+        ...colorFillBars.length > 0 && {
+            colorFillBars
+        },
+        ...yAxisType && {
+            yScaleType: yAxisType
+        },
+        // For nominal y-axis, provide tick values and labels
+        ...yOrdinalLabels && yOrdinalLabels.length > 0 && {
+            yAxisTickValues: Array.from({
+                length: yOrdinalLabels.length
+            }, (_, i)=>i),
+            yAxisTickFormat: (val)=>{
+                var _yOrdinalLabels_val;
+                return (_yOrdinalLabels_val = yOrdinalLabels[val]) !== null && _yOrdinalLabels_val !== void 0 ? _yOrdinalLabels_val : String(val);
+            },
+            yMinValue: -0.5,
+            yMaxValue: yOrdinalLabels.length - 0.5
+        },
+        ...categoryOrderProps,
+        hideLegend: (_encoding_color_legend_disable = (_encoding_color = encoding.color) === null || _encoding_color === void 0 ? void 0 : (_encoding_color_legend = _encoding_color.legend) === null || _encoding_color_legend === void 0 ? void 0 : _encoding_color_legend.disable) !== null && _encoding_color_legend_disable !== void 0 ? _encoding_color_legend_disable : false
+    };
+}
+/**
+ * Generates legend props from Vega-Lite specification
+ * Used for multi-plot scenarios where legends are rendered separately
+ *
+ * @param spec - Vega-Lite specification
+ * @param colorMap - Color mapping ref for consistent coloring
+ * @param isDarkTheme - Whether dark theme is active
+ * @returns LegendsProps for rendering legends
+ */ export function getVegaLiteLegendsProps(spec, colorMap, isDarkTheme) {
+    var _encoding_color;
+    const unitSpecs = normalizeSpec(spec);
+    const legends = [];
+    if (unitSpecs.length === 0) {
+        return {
+            legends,
+            centerLegends: true,
+            enabledWrapLines: true,
+            canSelectMultipleLegends: true
+        };
+    }
+    const primarySpec = unitSpecs[0];
+    const dataValues = extractDataValues(primarySpec.data);
+    const encoding = primarySpec.encoding || {};
+    const colorField = (_encoding_color = encoding.color) === null || _encoding_color === void 0 ? void 0 : _encoding_color.field;
+    if (!colorField) {
+        return {
+            legends,
+            centerLegends: true,
+            enabledWrapLines: true,
+            canSelectMultipleLegends: true
+        };
+    }
+    // Extract unique series names
+    const seriesNames = new Set();
+    dataValues.forEach((row)=>{
+        if (row[colorField] !== undefined) {
+            seriesNames.add(String(row[colorField]));
+        }
+    });
+    // Generate legends
+    seriesNames.forEach((seriesName)=>{
+        const color = getVegaColorFromMap(seriesName, colorMap, undefined, undefined, isDarkTheme);
+        legends.push({
+            title: seriesName,
+            color
+        });
+    });
+    return {
+        legends,
+        centerLegends: true,
+        enabledWrapLines: true,
+        canSelectMultipleLegends: true
+    };
+}
+/**
+ * Extracts chart titles and title styles from Vega-Lite specification
+ */ export function getVegaLiteTitles(spec) {
+    var _spec_title, _encoding_x, _encoding_x_axis, _encoding_x1, _encoding_y, _encoding_y_axis, _encoding_y1;
+    const unitSpecs = normalizeSpec(spec);
+    if (unitSpecs.length === 0) {
+        return {};
+    }
+    const primarySpec = unitSpecs[0];
+    const encoding = primarySpec.encoding || {};
+    // Extract chart title
+    const chartTitle = typeof spec.title === 'string' ? spec.title : (_spec_title = spec.title) === null || _spec_title === void 0 ? void 0 : _spec_title.text;
+    // Extract title styles if title is an object
+    let titleStyles;
+    if (typeof spec.title === 'object' && spec.title !== null) {
+        const titleObj = spec.title;
+        // Build titleFont object if any font properties are present
+        const titleFont = {};
+        if (titleObj.font) {
+            titleFont.family = titleObj.font;
+        }
+        if (titleObj.fontSize) {
+            titleFont.size = titleObj.fontSize;
+        }
+        if (titleObj.fontWeight) {
+            // Convert string weights to numbers (Font interface expects number)
+            const weight = titleObj.fontWeight;
+            if (typeof weight === 'string') {
+                const weightMap = {
+                    normal: 400,
+                    bold: 700,
+                    lighter: 300,
+                    bolder: 600
+                };
+                titleFont.weight = weightMap[weight.toLowerCase()] || 400;
+            } else {
+                titleFont.weight = weight;
+            }
+        }
+        if (titleObj.color) {
+            titleFont.color = titleObj.color;
+        }
+        // Map Vega-Lite anchor values to TitleStyles anchor values
+        const anchorMap = {
+            start: 'left',
+            middle: 'center',
+            end: 'right'
+        };
+        titleStyles = {
+            ...Object.keys(titleFont).length > 0 ? {
+                titleFont
+            } : {},
+            ...titleObj.anchor && anchorMap[titleObj.anchor] ? {
+                titleXAnchor: anchorMap[titleObj.anchor]
+            } : {},
+            ...titleObj.offset !== undefined || titleObj.subtitlePadding !== undefined ? {
+                titlePad: {
+                    t: titleObj.offset,
+                    b: titleObj.subtitlePadding
+                }
+            } : {}
+        };
+        // Only include titleStyles if it has properties
+        if (Object.keys(titleStyles).length === 0) {
+            titleStyles = undefined;
+        }
+    }
+    var _encoding_x_title, _ref, _encoding_y_title, _ref1;
+    return {
+        chartTitle,
+        xAxisTitle: (_ref = (_encoding_x_title = (_encoding_x = encoding.x) === null || _encoding_x === void 0 ? void 0 : _encoding_x.title) !== null && _encoding_x_title !== void 0 ? _encoding_x_title : (_encoding_x1 = encoding.x) === null || _encoding_x1 === void 0 ? void 0 : (_encoding_x_axis = _encoding_x1.axis) === null || _encoding_x_axis === void 0 ? void 0 : _encoding_x_axis.title) !== null && _ref !== void 0 ? _ref : undefined,
+        yAxisTitle: (_ref1 = (_encoding_y_title = (_encoding_y = encoding.y) === null || _encoding_y === void 0 ? void 0 : _encoding_y.title) !== null && _encoding_y_title !== void 0 ? _encoding_y_title : (_encoding_y1 = encoding.y) === null || _encoding_y1 === void 0 ? void 0 : (_encoding_y_axis = _encoding_y1.axis) === null || _encoding_y_axis === void 0 ? void 0 : _encoding_y_axis.title) !== null && _ref1 !== void 0 ? _ref1 : undefined,
+        ...titleStyles ? {
+            titleStyles
+        } : {}
+    };
+}
+/**
+ * Transforms Vega-Lite specification to Fluent VerticalBarChart props
+ *
+ * Supports bar mark with quantitative y-axis and nominal/ordinal x-axis
+ *
+ * @param spec - Vega-Lite specification
+ * @param colorMap - Color mapping ref for consistent coloring
+ * @param isDarkTheme - Whether dark theme is active
+ * @returns VerticalBarChartProps for rendering
+ */ export function transformVegaLiteToVerticalBarChartProps(spec, colorMap, isDarkTheme) {
+    var _encoding_color, _encoding_y_axis, _encoding_y, _barData_, _encoding_color_legend, _encoding_color1;
+    // Initialize transformation context
+    const { dataValues, encoding, markProps } = initializeTransformContext(spec);
+    // Extract field names and aggregates
+    const { xField, yField, colorField, yAggregate } = extractEncodingFields(encoding);
+    // Check if this is an aggregate bar chart
+    // Aggregate can be: count (no field needed) or sum/mean/etc (with field)
+    const isAggregate = !!yAggregate;
+    if (!xField && !isAggregate) {
+        throw new Error('VegaLiteSchemaAdapter: x encoding is required for bar charts');
+    }
+    // For aggregate charts, compute aggregated data
+    let aggregatedData;
+    if (isAggregate && xField) {
+        aggregatedData = computeAggregateData(dataValues, xField, yField, yAggregate);
+    }
+    // Validate data and encodings (skip for aggregate charts)
+    if (!isAggregate && xField && yField) {
+        var _encoding_x, _encoding_y1;
+        validateXYEncodings(dataValues, xField, yField, (_encoding_x = encoding.x) === null || _encoding_x === void 0 ? void 0 : _encoding_x.type, (_encoding_y1 = encoding.y) === null || _encoding_y1 === void 0 ? void 0 : _encoding_y1.type, 'VerticalBarChart', encoding);
+    }
+    // Extract color configuration
+    const { colorScheme, colorRange } = extractColorConfig(encoding);
+    const colorValue = (_encoding_color = encoding.color) === null || _encoding_color === void 0 ? void 0 : _encoding_color.value;
+    const barData = [];
+    const colorIndex = new Map();
+    let currentColorIndex = 0;
+    // When there's no color field, all bars share a single legend
+    const useSingleLegendForAggregate = !colorField;
+    if (aggregatedData) {
+        // Use aggregated data
+        aggregatedData.forEach(({ category, value })=>{
+            const legend = useSingleLegendForAggregate ? 'Bar' : String(category);
+            if (!colorIndex.has(legend)) {
+                colorIndex.set(legend, currentColorIndex++);
+            }
+            const color = resolveColor(legend, colorIndex.get(legend), colorValue, markProps.color, colorMap, colorScheme, colorRange, isDarkTheme);
+            barData.push({
+                x: category,
+                y: value,
+                legend,
+                color
+            });
+        });
+    } else if (xField && yField) {
+        var _dataValues_find;
+        // Check if y values are numeric; if not, fall back to count aggregation
+        const firstYValue = (_dataValues_find = dataValues.find((r)=>r[yField] !== undefined)) === null || _dataValues_find === void 0 ? void 0 : _dataValues_find[yField];
+        const yIsNumeric = typeof firstYValue === 'number';
+        if (!yIsNumeric) {
+            // y values are non-numeric: compute count per x category
+            const counts = countByCategory(dataValues, xField, undefined, '');
+            counts.forEach((legendMap, xKey)=>{
+                // No color grouping - each xKey gets one bar; use xKey as legend
+                const totalCount = Array.from(legendMap.values()).reduce((a, b)=>a + b, 0);
+                const legend = xKey;
+                if (!colorIndex.has(legend)) {
+                    colorIndex.set(legend, currentColorIndex++);
+                }
+                const color = resolveColor(legend, colorIndex.get(legend), colorValue, markProps.color, colorMap, colorScheme, colorRange, isDarkTheme);
+                barData.push({
+                    x: xKey,
+                    y: totalCount,
+                    legend,
+                    color
+                });
+            });
+        } else {
+            var _encoding_y_axis1, _encoding_y2;
+            // When there's no color field encoding, use a single legend name for all bars
+            // This ensures: uniform bar color, single legend entry, no tooltip duplication
+            const useSingleLegend = !colorField;
+            // Create value formatter for bar data labels
+            const yFormatter = createValueFormatter((_encoding_y2 = encoding.y) === null || _encoding_y2 === void 0 ? void 0 : (_encoding_y_axis1 = _encoding_y2.axis) === null || _encoding_y_axis1 === void 0 ? void 0 : _encoding_y_axis1.format);
+            // Use raw data (normal numeric y values)
+            dataValues.forEach((row)=>{
+                const xValue = row[xField];
+                const yValue = row[yField];
+                // Use chart-utilities validation
+                if (isInvalidValue(xValue) || isInvalidValue(yValue) || typeof yValue !== 'number') {
+                    return;
+                }
+                const legend = colorField && row[colorField] !== undefined ? String(row[colorField]) : useSingleLegend ? 'Bar' : String(xValue);
+                if (!colorIndex.has(legend)) {
+                    colorIndex.set(legend, currentColorIndex++);
+                }
+                const color = resolveColor(legend, colorIndex.get(legend), colorValue, markProps.color, colorMap, colorScheme, colorRange, isDarkTheme);
+                // For bar charts, x-axis values are treated as categories (even if numeric)
+                // Convert to string to ensure consistent categorical positioning
+                const xCategory = typeof xValue === 'number' ? String(xValue) : xValue;
+                barData.push({
+                    x: xCategory,
+                    y: yValue,
+                    legend,
+                    color,
+                    ...yFormatter && {
+                        yAxisCalloutData: yFormatter(yValue),
+                        barLabel: yFormatter(yValue)
+                    }
+                });
+            });
+        }
+    }
+    const titles = getVegaLiteTitles(spec);
+    // Extract axis category ordering
+    const categoryOrderProps = extractAxisCategoryOrderProps(encoding);
+    // Extract tick configuration
+    const tickConfig = extractTickConfig(spec);
+    // Extract y-axis formatting and scale props
+    const yAxisTickFormat = (_encoding_y = encoding.y) === null || _encoding_y === void 0 ? void 0 : (_encoding_y_axis = _encoding_y.axis) === null || _encoding_y_axis === void 0 ? void 0 : _encoding_y_axis.format;
+    const { yMinValue, yMaxValue } = extractYMinMax(encoding, dataValues);
+    const yAxisType = extractYAxisType(encoding);
+    // Compute truncation based on number of unique x-axis categories
+    const uniqueXCount = new Set(barData.map((d)=>String(d.x))).size;
+    const barTruncateChars = uniqueXCount > 20 ? 6 : uniqueXCount > 10 ? 10 : DEFAULT_TRUNCATE_CHARS;
+    var _encoding_color_legend_disable;
+    const result = {
+        data: barData,
+        chartTitle: titles.chartTitle,
+        xAxisTitle: titles.xAxisTitle,
+        yAxisTitle: titles.yAxisTitle,
+        ...titles.titleStyles ? titles.titleStyles : {},
+        roundCorners: true,
+        wrapXAxisLables: typeof ((_barData_ = barData[0]) === null || _barData_ === void 0 ? void 0 : _barData_.x) === 'string',
+        hideTickOverlap: true,
+        noOfCharsToTruncate: barTruncateChars,
+        xAxis: {
+            tickLayout: 'auto'
+        },
+        ...yAxisTickFormat && {
+            yAxisTickFormat
+        },
+        ...yMinValue !== undefined && {
+            yMinValue
+        },
+        ...yMaxValue !== undefined && {
+            yMaxValue
+        },
+        ...yAxisType && {
+            yScaleType: yAxisType
+        },
+        ...categoryOrderProps,
+        // Hide legend for single-series bar charts (no color encoding) to avoid showing "Bar" legend
+        hideLegend: !colorField ? true : (_encoding_color_legend_disable = (_encoding_color1 = encoding.color) === null || _encoding_color1 === void 0 ? void 0 : (_encoding_color_legend = _encoding_color1.legend) === null || _encoding_color_legend === void 0 ? void 0 : _encoding_color_legend.disable) !== null && _encoding_color_legend_disable !== void 0 ? _encoding_color_legend_disable : false
+    };
+    if (tickConfig.tickValues) {
+        result.tickValues = tickConfig.tickValues;
+    }
+    if (tickConfig.xAxisTickCount) {
+        result.xAxisTickCount = tickConfig.xAxisTickCount;
+    }
+    return result;
+}
+/**
+ * Transforms Vega-Lite specification to Fluent VerticalStackedBarChart props
+ *
+ * Supports stacked bar charts with color encoding for stacking
+ *
+ * @param spec - Vega-Lite specification
+ * @param colorMap - Color mapping ref for consistent coloring
+ * @param isDarkTheme - Whether dark theme is active
+ * @returns VerticalStackedBarChartProps for rendering
+ */ export function transformVegaLiteToVerticalStackedBarChartProps(spec, colorMap, isDarkTheme) {
+    var _encoding_color, _encoding_y_axis, _encoding_y, _encoding_color_legend, _encoding_color1, _chartData_;
+    // Initialize transformation context (skip warnings as we handle layered spec differently)
+    const { unitSpecs } = initializeTransformContext(spec);
+    // Separate bar, line, and rule specs from layered specifications
+    const barSpecs = unitSpecs.filter((s)=>getMarkType(s.mark) === 'bar');
+    const lineSpecs = unitSpecs.filter((s)=>{
+        const mark = getMarkType(s.mark);
+        return mark === 'line' || mark === 'point';
+    });
+    const ruleSpecs = unitSpecs.filter((s)=>getMarkType(s.mark) === 'rule');
+    // Use bar specs if available, otherwise fall back to first unit spec
+    const primarySpec = barSpecs.length > 0 ? barSpecs[0] : unitSpecs[0];
+    const rawDataValues = extractDataValues(primarySpec.data);
+    // Apply transforms from both top-level spec and primary spec
+    let dataValues = applyTransforms(rawDataValues, spec.transform);
+    dataValues = applyTransforms(dataValues, primarySpec.transform);
+    const encoding = primarySpec.encoding || {};
+    const markProps = getMarkProperties(primarySpec.mark);
+    // Extract field names and aggregates
+    const { xField, yField, colorField, yAggregate } = extractEncodingFields(encoding);
+    const colorValue = (_encoding_color = encoding.color) === null || _encoding_color === void 0 ? void 0 : _encoding_color.value; // Static color value
+    // Support aggregate encodings (e.g., count, sum)
+    const isAggregate = !!yAggregate;
+    if (!xField) {
+        throw new Error('VegaLiteSchemaAdapter: x encoding is required for stacked bar charts');
+    }
+    // For aggregate charts, compute aggregated data
+    let aggregatedData;
+    if (isAggregate) {
+        aggregatedData = computeAggregateData(dataValues, xField, yField, yAggregate);
+    } else if (!yField) {
+        throw new Error('VegaLiteSchemaAdapter: y encoding is required for stacked bar charts');
+    }
+    // Extract color configuration
+    const { colorScheme, colorRange } = extractColorConfig(encoding);
+    // Group data by x value, then by color (stack)
+    const mapXToDataPoints = {};
+    const colorIndex = new Map();
+    let currentColorIndex = 0;
+    if (aggregatedData) {
+        // Use aggregated data
+        aggregatedData.forEach(({ category, value })=>{
+            const xKey = String(category);
+            const legend = 'Bar';
+            if (!mapXToDataPoints[xKey]) {
+                mapXToDataPoints[xKey] = {
+                    xAxisPoint: category,
+                    chartData: [],
+                    lineData: []
+                };
+            }
+            if (!colorIndex.has(legend)) {
+                colorIndex.set(legend, currentColorIndex++);
+            }
+            const color = resolveColor(legend, colorIndex.get(legend), colorValue, markProps.color, colorMap, colorScheme, colorRange, isDarkTheme);
+            mapXToDataPoints[xKey].chartData.push({
+                legend,
+                data: value,
+                color
+            });
+        });
+    } else {
+        var _dataValues_find;
+        // Check if y values are actually numeric; if not, fall back to count aggregation
+        const firstYValue = (_dataValues_find = dataValues.find((r)=>r[yField] !== undefined)) === null || _dataValues_find === void 0 ? void 0 : _dataValues_find[yField];
+        const yIsNumeric = typeof firstYValue === 'number';
+        if (!yIsNumeric && yField) {
+            // y values are non-numeric (e.g., strings after auto-correction from quantitative to nominal)
+            // Fall back to count aggregation: count rows per x category and color
+            const counts = countByCategory(dataValues, xField, colorField, 'Bar');
+            counts.forEach((legendMap, xKey)=>{
+                mapXToDataPoints[xKey] = {
+                    xAxisPoint: xKey,
+                    chartData: [],
+                    lineData: []
+                };
+                legendMap.forEach((count, legend)=>{
+                    if (!colorIndex.has(legend)) {
+                        colorIndex.set(legend, currentColorIndex++);
+                    }
+                    const color = resolveColor(legend, colorIndex.get(legend), colorValue, markProps.color, colorMap, colorScheme, colorRange, isDarkTheme);
+                    mapXToDataPoints[xKey].chartData.push({
+                        legend,
+                        data: count,
+                        color
+                    });
+                });
+            });
+        } else {
+            // Process bar data (normal numeric y values)
+            dataValues.forEach((row)=>{
+                var _encoding_y_axis, _encoding_y;
+                const xValue = row[xField];
+                const yValue = row[yField];
+                const stackValue = colorField ? row[colorField] : 'Bar'; // Default legend if no color field
+                if (isInvalidValue(xValue) || isInvalidValue(yValue) || typeof yValue !== 'number') {
+                    return;
+                }
+                const xKey = String(xValue);
+                const legend = stackValue !== undefined ? String(stackValue) : 'Bar';
+                if (!mapXToDataPoints[xKey]) {
+                    // For bar charts, x-axis values are treated as categories (even if numeric)
+                    const xCategory = typeof xValue === 'number' ? String(xValue) : xValue;
+                    mapXToDataPoints[xKey] = {
+                        xAxisPoint: xCategory,
+                        chartData: [],
+                        lineData: []
+                    };
+                }
+                if (!colorIndex.has(legend)) {
+                    colorIndex.set(legend, currentColorIndex++);
+                }
+                // Use static color if provided, otherwise use color scheme/scale
+                const color = resolveColor(legend, colorIndex.get(legend), colorValue, markProps.color, colorMap, colorScheme, colorRange, isDarkTheme);
+                const stackYFormatter = createValueFormatter((_encoding_y = encoding.y) === null || _encoding_y === void 0 ? void 0 : (_encoding_y_axis = _encoding_y.axis) === null || _encoding_y_axis === void 0 ? void 0 : _encoding_y_axis.format);
+                mapXToDataPoints[xKey].chartData.push({
+                    legend,
+                    data: yValue,
+                    color,
+                    ...stackYFormatter && {
+                        yAxisCalloutData: stackYFormatter(yValue),
+                        barLabel: stackYFormatter(yValue)
+                    }
+                });
+            });
+        }
+    } // end else (non-aggregate)
+    // Process line data from additional layers (if any)
+    lineSpecs.forEach((lineSpec, lineIndex)=>{
+        var _lineEncoding_x, _lineEncoding_y, _lineEncoding_color;
+        let lineDataValues = extractDataValues(lineSpec.data);
+        // Apply transforms from both top-level spec and line spec
+        lineDataValues = applyTransforms(lineDataValues, spec.transform);
+        lineDataValues = applyTransforms(lineDataValues, lineSpec.transform);
+        const lineEncoding = lineSpec.encoding || {};
+        const lineMarkProps = getMarkProperties(lineSpec.mark);
+        const lineXField = (_lineEncoding_x = lineEncoding.x) === null || _lineEncoding_x === void 0 ? void 0 : _lineEncoding_x.field;
+        const lineYField = (_lineEncoding_y = lineEncoding.y) === null || _lineEncoding_y === void 0 ? void 0 : _lineEncoding_y.field;
+        const lineColorField = (_lineEncoding_color = lineEncoding.color) === null || _lineEncoding_color === void 0 ? void 0 : _lineEncoding_color.field;
+        if (!lineXField || !lineYField) {
+            return; // Skip if required fields are missing
+        }
+        const lineLegendBase = lineColorField ? 'Line' : `Line ${lineIndex + 1}`;
+        lineDataValues.forEach((row)=>{
+            var _spec_resolve_scale, _spec_resolve;
+            const xValue = row[lineXField];
+            const yValue = row[lineYField];
+            if (isInvalidValue(xValue) || isInvalidValue(yValue)) {
+                return;
+            }
+            const xKey = String(xValue);
+            const lineLegend = lineColorField && row[lineColorField] !== undefined ? String(row[lineColorField]) : lineLegendBase;
+            // Ensure x-axis point exists
+            if (!mapXToDataPoints[xKey]) {
+                mapXToDataPoints[xKey] = {
+                    xAxisPoint: xValue,
+                    chartData: [],
+                    lineData: []
+                };
+            }
+            // Determine line color
+            if (!colorIndex.has(lineLegend)) {
+                colorIndex.set(lineLegend, currentColorIndex++);
+            }
+            let lineColor;
+            if (lineMarkProps.color) {
+                lineColor = lineMarkProps.color;
+            } else {
+                // Use lineLegend for consistent color assignment
+                lineColor = resolveColor(lineLegend, colorIndex.get(lineLegend), undefined, undefined, colorMap, undefined, undefined, isDarkTheme);
+            }
+            // Determine if this line should use secondary Y-axis
+            // Check if spec has independent Y scales AND line uses different Y field than bars
+            const hasIndependentYScales = ((_spec_resolve = spec.resolve) === null || _spec_resolve === void 0 ? void 0 : (_spec_resolve_scale = _spec_resolve.scale) === null || _spec_resolve_scale === void 0 ? void 0 : _spec_resolve_scale.y) === 'independent';
+            const useSecondaryYScale = hasIndependentYScales && lineYField !== yField;
+            const lineData = {
+                y: yValue,
+                color: lineColor,
+                legend: lineLegend,
+                legendShape: 'triangle',
+                data: typeof yValue === 'number' ? yValue : undefined,
+                useSecondaryYScale
+            };
+            // Add line options if available
+            if (lineMarkProps.strokeWidth || lineMarkProps.strokeDash) {
+                lineData.lineOptions = {
+                    ...lineMarkProps.strokeWidth && {
+                        strokeWidth: lineMarkProps.strokeWidth
+                    },
+                    ...lineMarkProps.strokeDash && {
+                        strokeDasharray: lineMarkProps.strokeDash.join(' ')
+                    }
+                };
+            }
+            mapXToDataPoints[xKey].lineData.push(lineData);
+        });
+    });
+    // Process rule specs as horizontal reference lines
+    // Each rule with a constant y-value becomes a flat line across all x-axis points
+    ruleSpecs.forEach((ruleSpec, ruleIndex)=>{
+        var _ruleEncoding_y, _ruleEncoding_y1;
+        const ruleEncoding = ruleSpec.encoding || {};
+        const ruleMarkProps = getMarkProperties(ruleSpec.mark);
+        var _ruleEncoding_y_datum;
+        const yDatum = (_ruleEncoding_y_datum = (_ruleEncoding_y = ruleEncoding.y) === null || _ruleEncoding_y === void 0 ? void 0 : _ruleEncoding_y.datum) !== null && _ruleEncoding_y_datum !== void 0 ? _ruleEncoding_y_datum : (_ruleEncoding_y1 = ruleEncoding.y) === null || _ruleEncoding_y1 === void 0 ? void 0 : _ruleEncoding_y1.value;
+        if (yDatum !== undefined) {
+            var _textSpec_encoding_text, _textSpec_encoding, _textSpec_encoding_text1, _textSpec_encoding1;
+            const ruleLegend = `Reference_${ruleIndex}`;
+            const ruleColor = ruleMarkProps.color || '#d62728';
+            if (!colorIndex.has(ruleLegend)) {
+                colorIndex.set(ruleLegend, currentColorIndex++);
+            }
+            const lineOptions = {};
+            if (ruleMarkProps.strokeDash) {
+                lineOptions.strokeDasharray = ruleMarkProps.strokeDash.join(' ');
+            }
+            if (ruleMarkProps.strokeWidth) {
+                lineOptions.strokeWidth = ruleMarkProps.strokeWidth;
+            }
+            // Look for companion text annotation at the same y-value
+            const textSpec = unitSpecs.find((s, i)=>{
+                var _s_encoding;
+                var _s_encoding_y_datum;
+                return getMarkType(s.mark) === 'text' && ((_s_encoding = s.encoding) === null || _s_encoding === void 0 ? void 0 : _s_encoding.y) && ((_s_encoding_y_datum = s.encoding.y.datum) !== null && _s_encoding_y_datum !== void 0 ? _s_encoding_y_datum : s.encoding.y.value) === yDatum;
+            });
+            const ruleText = textSpec ? String(((_textSpec_encoding = textSpec.encoding) === null || _textSpec_encoding === void 0 ? void 0 : (_textSpec_encoding_text = _textSpec_encoding.text) === null || _textSpec_encoding_text === void 0 ? void 0 : _textSpec_encoding_text.datum) || ((_textSpec_encoding1 = textSpec.encoding) === null || _textSpec_encoding1 === void 0 ? void 0 : (_textSpec_encoding_text1 = _textSpec_encoding1.text) === null || _textSpec_encoding_text1 === void 0 ? void 0 : _textSpec_encoding_text1.value) || yDatum) : String(yDatum);
+            // Add the constant y-value line to every x-axis point
+            Object.keys(mapXToDataPoints).forEach((xKey)=>{
+                mapXToDataPoints[xKey].lineData.push({
+                    y: yDatum,
+                    legend: ruleText,
+                    color: ruleColor,
+                    ...Object.keys(lineOptions).length > 0 && {
+                        lineOptions
+                    },
+                    useSecondaryYScale: false
+                });
+            });
+        }
+    });
+    const chartData = Object.values(mapXToDataPoints);
+    const titles = getVegaLiteTitles(spec);
+    // Check if we have secondary Y-axis data
+    const hasSecondaryYAxis = chartData.some((point)=>{
+        var _point_lineData;
+        return (_point_lineData = point.lineData) === null || _point_lineData === void 0 ? void 0 : _point_lineData.some((line)=>line.useSecondaryYScale);
+    });
+    // Extract secondary Y-axis properties from line layers
+    let secondaryYAxisProps = {};
+    if (hasSecondaryYAxis && lineSpecs.length > 0) {
+        var _lineEncoding_y;
+        const lineSpec = lineSpecs[0];
+        const lineEncoding = lineSpec.encoding || {};
+        const lineYAxis = (_lineEncoding_y = lineEncoding.y) === null || _lineEncoding_y === void 0 ? void 0 : _lineEncoding_y.axis;
+        if (lineYAxis === null || lineYAxis === void 0 ? void 0 : lineYAxis.title) {
+            secondaryYAxisProps.secondaryYAxistitle = lineYAxis.title;
+        }
+        // Compute secondary Y scale domain from line data values
+        const allLineYValues = [];
+        chartData.forEach((point)=>{
+            var _point_lineData;
+            (_point_lineData = point.lineData) === null || _point_lineData === void 0 ? void 0 : _point_lineData.forEach((line)=>{
+                if (line.useSecondaryYScale && typeof line.y === 'number') {
+                    allLineYValues.push(line.y);
+                }
+            });
+        });
+        if (allLineYValues.length > 0) {
+            var _lineEncoding_y_scale, _lineEncoding_y1;
+            // Use explicit domain from line encoding if available, otherwise compute from data
+            const lineDomain = (_lineEncoding_y1 = lineEncoding.y) === null || _lineEncoding_y1 === void 0 ? void 0 : (_lineEncoding_y_scale = _lineEncoding_y1.scale) === null || _lineEncoding_y_scale === void 0 ? void 0 : _lineEncoding_y_scale.domain;
+            var _d3Min;
+            const secYMin = Array.isArray(lineDomain) ? lineDomain[0] : (_d3Min = d3Min(allLineYValues)) !== null && _d3Min !== void 0 ? _d3Min : 0;
+            var _d3Max;
+            const secYMax = Array.isArray(lineDomain) ? lineDomain[1] : (_d3Max = d3Max(allLineYValues)) !== null && _d3Max !== void 0 ? _d3Max : 0;
+            secondaryYAxisProps.secondaryYScaleOptions = {
+                yMinValue: secYMin,
+                yMaxValue: secYMax
+            };
+        }
+    }
+    // Check for log scale on primary Y-axis
+    const yAxisType = extractYAxisType(encoding);
+    // Extract y-axis formatting and domain props
+    const yAxisTickFormat = (_encoding_y = encoding.y) === null || _encoding_y === void 0 ? void 0 : (_encoding_y_axis = _encoding_y.axis) === null || _encoding_y_axis === void 0 ? void 0 : _encoding_y_axis.format;
+    const { yMinValue, yMaxValue } = extractYMinMax(encoding, dataValues);
+    // Extract axis category ordering
+    const categoryOrderProps = extractAxisCategoryOrderProps(encoding);
+    var _spec_height, _encoding_color_legend_disable;
+    return {
+        data: chartData,
+        chartTitle: titles.chartTitle,
+        xAxisTitle: titles.xAxisTitle,
+        yAxisTitle: titles.yAxisTitle,
+        ...titles.titleStyles ? titles.titleStyles : {},
+        width: spec.width,
+        height: (_spec_height = spec.height) !== null && _spec_height !== void 0 ? _spec_height : DEFAULT_CHART_HEIGHT,
+        hideLegend: (_encoding_color_legend_disable = (_encoding_color1 = encoding.color) === null || _encoding_color1 === void 0 ? void 0 : (_encoding_color_legend = _encoding_color1.legend) === null || _encoding_color_legend === void 0 ? void 0 : _encoding_color_legend.disable) !== null && _encoding_color_legend_disable !== void 0 ? _encoding_color_legend_disable : false,
+        showYAxisLables: true,
+        roundCorners: true,
+        hideTickOverlap: true,
+        barGapMax: 2,
+        noOfCharsToTruncate: DEFAULT_TRUNCATE_CHARS,
+        showYAxisLablesTooltip: true,
+        wrapXAxisLables: typeof ((_chartData_ = chartData[0]) === null || _chartData_ === void 0 ? void 0 : _chartData_.xAxisPoint) === 'string',
+        xAxis: {
+            tickLayout: 'auto'
+        },
+        ...yAxisTickFormat && {
+            yAxisTickFormat
+        },
+        ...yMinValue !== undefined && {
+            yMinValue
+        },
+        ...yMaxValue !== undefined && {
+            yMaxValue
+        },
+        ...yAxisType && {
+            yScaleType: yAxisType
+        },
+        ...secondaryYAxisProps,
+        ...categoryOrderProps
+    };
+}
+/**
+ * Transforms Vega-Lite specification to Fluent GroupedVerticalBarChart props
+ *
+ * Supports grouped bar charts with color encoding for grouping
+ *
+ * @param spec - Vega-Lite specification
+ * @param colorMap - Color mapping ref for consistent coloring
+ * @param isDarkTheme - Whether dark theme is active
+ * @returns GroupedVerticalBarChartProps for rendering
+ */ export function transformVegaLiteToGroupedVerticalBarChartProps(spec, colorMap, isDarkTheme) {
+    var _encoding_y_axis, _encoding_y;
+    // Initialize transformation context
+    const { dataValues, encoding } = initializeTransformContext(spec);
+    // Extract field names
+    const { xField, yField, colorField } = extractEncodingFields(encoding);
+    if (!xField || !yField || !colorField) {
+        throw new Error('VegaLiteSchemaAdapter: x, y, and color encodings are required for grouped bar charts');
+    }
+    // Extract color configuration
+    const { colorScheme, colorRange } = extractColorConfig(encoding);
+    // Group data by x value (name), then by color (series)
+    const groupedData = {};
+    const colorIndex = new Map();
+    let currentColorIndex = 0;
+    dataValues.forEach((row)=>{
+        const xValue = row[xField];
+        const yValue = row[yField];
+        const groupValue = row[colorField];
+        if (isInvalidValue(xValue) || isInvalidValue(yValue) || typeof yValue !== 'number' || isInvalidValue(groupValue)) {
+            return;
+        }
+        const xKey = String(xValue);
+        const legend = String(groupValue);
+        if (!groupedData[xKey]) {
+            groupedData[xKey] = {};
+        }
+        groupedData[xKey][legend] = yValue;
+        if (!colorIndex.has(legend)) {
+            colorIndex.set(legend, currentColorIndex++);
+        }
+    });
+    // Convert to GroupedVerticalBarChartData format
+    const chartData = Object.keys(groupedData).map((name)=>{
+        const series = Object.keys(groupedData[name]).map((legend)=>({
+                key: legend,
+                data: groupedData[name][legend],
+                legend,
+                color: resolveColor(legend, colorIndex.get(legend), undefined, undefined, colorMap, colorScheme, colorRange, isDarkTheme)
+            }));
+        return {
+            name,
+            series
+        };
+    });
+    const titles = getVegaLiteTitles(spec);
+    // Extract y-axis formatting and scale props
+    const yAxisTickFormat = (_encoding_y = encoding.y) === null || _encoding_y === void 0 ? void 0 : (_encoding_y_axis = _encoding_y.axis) === null || _encoding_y_axis === void 0 ? void 0 : _encoding_y_axis.format;
+    const { yMinValue, yMaxValue } = extractYMinMax(encoding, dataValues);
+    const yAxisType = extractYAxisType(encoding);
+    return {
+        data: chartData,
+        chartTitle: titles.chartTitle,
+        xAxisTitle: titles.xAxisTitle,
+        yAxisTitle: titles.yAxisTitle,
+        ...titles.titleStyles ? titles.titleStyles : {},
+        ...yAxisTickFormat && {
+            yAxisTickFormat
+        },
+        ...yMinValue !== undefined && {
+            yMinValue
+        },
+        ...yMaxValue !== undefined && {
+            yMaxValue
+        },
+        ...yAxisType && {
+            yScaleType: yAxisType
+        }
+    };
+}
+/**
+ * Transforms Vega-Lite specification to Fluent HorizontalBarChartWithAxis props
+ *
+ * Supports horizontal bar charts with quantitative x-axis and nominal/ordinal y-axis
+ *
+ * @param spec - Vega-Lite specification
+ * @param colorMap - Color mapping ref for consistent coloring
+ * @param isDarkTheme - Whether dark theme is active
+ * @returns HorizontalBarChartWithAxisProps for rendering
+ */ export function transformVegaLiteToHorizontalBarChartProps(spec, colorMap, isDarkTheme) {
+    var _encoding_color, _encoding_color_legend, _encoding_color1;
+    // Initialize transformation context
+    const { dataValues, encoding, markProps } = initializeTransformContext(spec);
+    // Extract field names and aggregates
+    const { xField, yField, colorField, xAggregate, x2Field } = extractEncodingFields(encoding);
+    // Check if this is an aggregate bar chart
+    // Aggregate can be: count (no field needed) or sum/mean/etc (with field)
+    const isAggregate = !!xAggregate;
+    if (!yField && !isAggregate) {
+        throw new Error('VegaLiteSchemaAdapter: y encoding is required for horizontal bar charts');
+    }
+    // For aggregate charts, compute aggregated data
+    let aggregatedData;
+    if (isAggregate && yField) {
+        aggregatedData = computeAggregateData(dataValues, yField, xField, xAggregate);
+    }
+    const colorValue = (_encoding_color = encoding.color) === null || _encoding_color === void 0 ? void 0 : _encoding_color.value;
+    const barData = [];
+    const colorIndex = new Map();
+    let currentColorIndex = 0;
+    if (aggregatedData) {
+        // Use aggregated data
+        aggregatedData.forEach(({ category, value })=>{
+            const legend = String(category);
+            if (!colorIndex.has(legend)) {
+                colorIndex.set(legend, currentColorIndex++);
+            }
+            const color = resolveColor(legend, colorIndex.get(legend), colorValue, markProps.color, colorMap, undefined, undefined, isDarkTheme);
+            barData.push({
+                x: value,
+                y: category,
+                legend,
+                color
+            });
+        });
+    } else if (x2Field && xField && yField) {
+        var _encoding_x;
+        // Gantt chart: bar mark with x/x2 temporal range encoding
+        const isXTemporal = ((_encoding_x = encoding.x) === null || _encoding_x === void 0 ? void 0 : _encoding_x.type) === 'temporal';
+        dataValues.forEach((row)=>{
+            const startVal = row[xField];
+            const endVal = row[x2Field];
+            const yValue = row[yField];
+            if (startVal === undefined || endVal === undefined || yValue === undefined) {
+                return;
+            }
+            let xNumeric;
+            if (isXTemporal) {
+                const startDate = new Date(startVal);
+                const endDate = new Date(endVal);
+                if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
+                    return;
+                }
+                xNumeric = Math.round((endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24));
+            } else {
+                xNumeric = Number(endVal) - Number(startVal);
+                if (isNaN(xNumeric)) {
+                    return;
+                }
+            }
+            const legend = colorField && row[colorField] !== undefined ? String(row[colorField]) : String(yValue);
+            if (!colorIndex.has(legend)) {
+                colorIndex.set(legend, currentColorIndex++);
+            }
+            const color = resolveColor(legend, colorIndex.get(legend), colorValue, markProps.color, colorMap, undefined, undefined, isDarkTheme);
+            barData.push({
+                x: xNumeric,
+                y: yValue,
+                legend,
+                color
+            });
+        });
+    } else if (xField && yField) {
+        // Use raw data
+        dataValues.forEach((row)=>{
+            const xValue = row[xField];
+            const yValue = row[yField];
+            if (isInvalidValue(xValue) || isInvalidValue(yValue) || typeof xValue !== 'number') {
+                return;
+            }
+            // When no color field, use single legend to avoid tooltip duplication with y-axis labels
+            const legend = colorField && row[colorField] !== undefined ? String(row[colorField]) : !colorField ? 'Bar' : String(yValue);
+            if (!colorIndex.has(legend)) {
+                colorIndex.set(legend, currentColorIndex++);
+            }
+            const color = resolveColor(legend, colorIndex.get(legend), colorValue, markProps.color, colorMap, undefined, undefined, isDarkTheme);
+            barData.push({
+                x: xValue,
+                y: yValue,
+                legend,
+                color
+            });
+        });
+    }
+    const titles = getVegaLiteTitles(spec);
+    const annotations = extractAnnotations(spec);
+    const tickConfig = extractTickConfig(spec);
+    var _encoding_color_legend_disable;
+    const result = {
+        data: barData,
+        chartTitle: titles.chartTitle,
+        xAxisTitle: titles.xAxisTitle,
+        yAxisTitle: titles.yAxisTitle,
+        ...titles.titleStyles ? titles.titleStyles : {},
+        // Hide legend for single-series horizontal bars (no color encoding)
+        hideLegend: !colorField ? true : (_encoding_color_legend_disable = (_encoding_color1 = encoding.color) === null || _encoding_color1 === void 0 ? void 0 : (_encoding_color_legend = _encoding_color1.legend) === null || _encoding_color_legend === void 0 ? void 0 : _encoding_color_legend.disable) !== null && _encoding_color_legend_disable !== void 0 ? _encoding_color_legend_disable : false
+    };
+    if (annotations.length > 0) {
+        result.annotations = annotations;
+    }
+    if (tickConfig.tickValues) {
+        result.tickValues = tickConfig.tickValues;
+    }
+    if (tickConfig.xAxisTickCount) {
+        result.xAxisTickCount = tickConfig.xAxisTickCount;
+    }
+    if (tickConfig.yAxisTickCount) {
+        result.yAxisTickCount = tickConfig.yAxisTickCount;
+    }
+    return result;
+}
+/**
+ * Transforms Vega-Lite specification to Fluent AreaChart props
+ *
+ * Area charts use the same data structure as line charts but with filled areas.
+ * Supports temporal/quantitative x-axis and quantitative y-axis with color-encoded series
+ *
+ * Vega-Lite Stacking Behavior:
+ * - If y.stack is null or undefined with no color encoding: mode = 'tozeroy' (fill to zero baseline)
+ * - If y.stack is 'zero' or color encoding exists: mode = 'tonexty' (stacked areas)
+ * - Multiple series with color encoding automatically stack
+ *
+ * @param spec - Vega-Lite specification
+ * @param colorMap - Color mapping ref for consistent coloring
+ * @param isDarkTheme - Whether dark theme is active
+ * @returns AreaChartProps for rendering
+ */ export function transformVegaLiteToAreaChartProps(spec, colorMap, isDarkTheme) {
+    var _encoding_color, _encoding_y;
+    // Area charts use the same structure as line charts in Fluent Charts
+    // The only difference is the component renders with filled areas
+    const lineChartProps = transformVegaLiteToLineChartProps(spec, colorMap, isDarkTheme);
+    // Determine stacking mode based on Vega-Lite spec
+    const unitSpecs = normalizeSpec(spec);
+    // Use findPrimaryLineSpec to skip auxiliary layers (like rect for color fill bars)
+    const primarySpec = findPrimaryLineSpec(unitSpecs);
+    const encoding = (primarySpec === null || primarySpec === void 0 ? void 0 : primarySpec.encoding) || {};
+    // Check if stacking is enabled
+    // In Vega-Lite, area charts stack by default when color encoding is present
+    // stack can be explicitly set to null to disable stacking
+    const hasColorEncoding = !!((_encoding_color = encoding.color) === null || _encoding_color === void 0 ? void 0 : _encoding_color.field);
+    const stackConfig = (_encoding_y = encoding.y) === null || _encoding_y === void 0 ? void 0 : _encoding_y.stack;
+    const isStacked = stackConfig !== null && (stackConfig === 'zero' || hasColorEncoding);
+    // Set mode: 'tozeroy' for single series, 'tonexty' for stacked
+    const mode = isStacked ? 'tonexty' : 'tozeroy';
+    return {
+        ...lineChartProps,
+        mode
+    };
+}
+/**
+ * Transforms Vega-Lite specification to Fluent ScatterChart props
+ *
+ * Supports scatter plots with quantitative x and y axes and color-encoded series
+ *
+ * @param spec - Vega-Lite specification
+ * @param colorMap - Color mapping ref for consistent coloring
+ * @param isDarkTheme - Whether dark theme is active
+ * @returns ScatterChartProps for rendering
+ */ export function transformVegaLiteToScatterChartProps(spec, colorMap, isDarkTheme) {
+    var _encoding_x, _encoding_y, _encoding_y1, _encoding_y2, _encoding_y_axis, _encoding_y3, _encoding_color_legend, _encoding_color;
+    // Initialize transformation context
+    const { dataValues, encoding, markProps } = initializeTransformContext(spec);
+    // Extract field names
+    const { xField, yField, colorField, sizeField } = extractEncodingFields(encoding);
+    if (!xField || !yField) {
+        throw new Error('VegaLiteSchemaAdapter: Both x and y encodings are required for scatter charts');
+    }
+    const isXTemporal = ((_encoding_x = encoding.x) === null || _encoding_x === void 0 ? void 0 : _encoding_x.type) === 'temporal';
+    const isYTemporal = ((_encoding_y = encoding.y) === null || _encoding_y === void 0 ? void 0 : _encoding_y.type) === 'temporal';
+    // Check if y-values are strings (nominal/ordinal) and build ordinal mapping
+    const yIsNominal = ((_encoding_y1 = encoding.y) === null || _encoding_y1 === void 0 ? void 0 : _encoding_y1.type) === 'nominal' || ((_encoding_y2 = encoding.y) === null || _encoding_y2 === void 0 ? void 0 : _encoding_y2.type) === 'ordinal';
+    const yOrdinalMap = new Map();
+    const yOrdinalLabels = [];
+    if (yIsNominal) {
+        // Collect unique y-values in order
+        dataValues.forEach((row)=>{
+            const yVal = row[yField];
+            if (yVal !== undefined) {
+                const key = String(yVal);
+                if (!yOrdinalMap.has(key)) {
+                    yOrdinalMap.set(key, yOrdinalMap.size);
+                    yOrdinalLabels.push(key);
+                }
+            }
+        });
+    }
+    // Group data by series (color encoding)
+    const groupedData = {};
+    dataValues.forEach((row)=>{
+        const seriesName = colorField && row[colorField] !== undefined ? String(row[colorField]) : 'default';
+        if (!groupedData[seriesName]) {
+            groupedData[seriesName] = [];
+        }
+        groupedData[seriesName].push(row);
+    });
+    const seriesNames = Object.keys(groupedData);
+    const colorIndex = new Map();
+    let currentColorIndex = 0;
+    const chartData = seriesNames.map((seriesName, index)=>{
+        var _encoding_color_scale, _encoding_color;
+        if (!colorIndex.has(seriesName)) {
+            colorIndex.set(seriesName, currentColorIndex++);
+        }
+        const seriesData = groupedData[seriesName];
+        const points = seriesData.map((row)=>{
+            const xValue = parseValue(row[xField], isXTemporal);
+            const yValue = parseValue(row[yField], isYTemporal);
+            const markerSize = sizeField && row[sizeField] !== undefined ? Number(row[sizeField]) : undefined;
+            // Map nominal y-values to numeric indices
+            let numericY;
+            if (yIsNominal && typeof yValue === 'string') {
+                var _yOrdinalMap_get;
+                numericY = (_yOrdinalMap_get = yOrdinalMap.get(yValue)) !== null && _yOrdinalMap_get !== void 0 ? _yOrdinalMap_get : 0;
+            } else {
+                numericY = typeof yValue === 'number' ? yValue : 0;
+            }
+            return {
+                x: typeof xValue === 'number' || xValue instanceof Date ? xValue : String(xValue),
+                y: numericY,
+                ...markerSize !== undefined && {
+                    markerSize
+                }
+            };
+        });
+        // Get color for this series
+        const colorValue = colorField && ((_encoding_color = encoding.color) === null || _encoding_color === void 0 ? void 0 : (_encoding_color_scale = _encoding_color.scale) === null || _encoding_color_scale === void 0 ? void 0 : _encoding_color_scale.range) && Array.isArray(encoding.color.scale.range) ? encoding.color.scale.range[index] : markProps.color;
+        const color = typeof colorValue === 'string' ? colorValue : resolveColor(seriesName, colorIndex.get(seriesName), undefined, undefined, colorMap, undefined, undefined, isDarkTheme);
+        return {
+            legend: seriesName,
+            data: points,
+            color,
+            legendShape: 'circle'
+        };
+    });
+    const titles = getVegaLiteTitles(spec);
+    const annotations = extractAnnotations(spec);
+    const tickConfig = extractTickConfig(spec);
+    // Check for log scale on Y-axis
+    const yAxisType = extractYAxisType(encoding);
+    // Extract y-axis formatting and domain props
+    const yAxisTickFormat = (_encoding_y3 = encoding.y) === null || _encoding_y3 === void 0 ? void 0 : (_encoding_y_axis = _encoding_y3.axis) === null || _encoding_y_axis === void 0 ? void 0 : _encoding_y_axis.format;
+    const { yMinValue, yMaxValue } = extractYMinMax(encoding, dataValues);
+    // Extract axis category ordering
+    const categoryOrderProps = extractAxisCategoryOrderProps(encoding);
+    var _encoding_color_legend_disable;
+    const result = {
+        data: {
+            chartTitle: titles.chartTitle,
+            scatterChartData: chartData
+        },
+        xAxisTitle: titles.xAxisTitle,
+        yAxisTitle: titles.yAxisTitle,
+        ...titles.titleStyles ? titles.titleStyles : {},
+        ...yAxisTickFormat && {
+            yAxisTickFormat
+        },
+        ...yMinValue !== undefined && {
+            yMinValue
+        },
+        ...yMaxValue !== undefined && {
+            yMaxValue
+        },
+        ...yAxisType && {
+            yScaleType: yAxisType
+        },
+        // For nominal y-axis, provide tick values and labels
+        ...yIsNominal && yOrdinalLabels.length > 0 && {
+            yAxisTickValues: Array.from({
+                length: yOrdinalLabels.length
+            }, (_, i)=>i),
+            yAxisTickFormat: (val)=>{
+                var _yOrdinalLabels_val;
+                return (_yOrdinalLabels_val = yOrdinalLabels[val]) !== null && _yOrdinalLabels_val !== void 0 ? _yOrdinalLabels_val : String(val);
+            },
+            yMinValue: -0.5,
+            yMaxValue: yOrdinalLabels.length - 0.5
+        },
+        ...categoryOrderProps,
+        hideLegend: (_encoding_color_legend_disable = (_encoding_color = encoding.color) === null || _encoding_color === void 0 ? void 0 : (_encoding_color_legend = _encoding_color.legend) === null || _encoding_color_legend === void 0 ? void 0 : _encoding_color_legend.disable) !== null && _encoding_color_legend_disable !== void 0 ? _encoding_color_legend_disable : false
+    };
+    if (annotations.length > 0) {
+        result.annotations = annotations;
+    }
+    if (tickConfig.tickValues) {
+        result.tickValues = tickConfig.tickValues;
+    }
+    if (tickConfig.xAxisTickCount) {
+        result.xAxisTickCount = tickConfig.xAxisTickCount;
+    }
+    if (tickConfig.yAxisTickCount) {
+        result.yAxisTickCount = tickConfig.yAxisTickCount;
+    }
+    return result;
+}
+/**
+ * Transforms Vega-Lite specification to Fluent DonutChart props
+ *
+ * Supports pie/donut charts with arc marks and theta encoding
+ *
+ * @param spec - Vega-Lite specification
+ * @param colorMap - Color mapping ref for consistent coloring
+ * @param isDarkTheme - Whether dark theme is active
+ * @returns DonutChartProps for rendering
+ */ export function transformVegaLiteToDonutChartProps(spec, colorMap, isDarkTheme) {
+    // Initialize transformation context
+    const { dataValues, encoding, primarySpec } = initializeTransformContext(spec);
+    // Extract field names
+    const { thetaField, colorField } = extractEncodingFields(encoding);
+    if (!thetaField) {
+        throw new Error('VegaLiteSchemaAdapter: Theta encoding is required for donut charts');
+    }
+    // Extract color configuration
+    const { colorScheme, colorRange } = extractColorConfig(encoding);
+    // Extract innerRadius from mark properties if available
+    const mark = primarySpec.mark;
+    const innerRadius = typeof mark === 'object' && (mark === null || mark === void 0 ? void 0 : mark.innerRadius) !== undefined ? mark.innerRadius : 0;
+    const chartData = [];
+    const colorIndex = new Map();
+    let currentColorIndex = 0;
+    dataValues.forEach((row)=>{
+        const value = row[thetaField];
+        const legend = colorField && row[colorField] !== undefined ? String(row[colorField]) : String(value);
+        if (value === undefined || typeof value !== 'number') {
+            return;
+        }
+        if (!colorIndex.has(legend)) {
+            colorIndex.set(legend, currentColorIndex++);
+        }
+        chartData.push({
+            legend,
+            data: value,
+            color: resolveColor(legend, colorIndex.get(legend), undefined, undefined, colorMap, colorScheme, colorRange, isDarkTheme)
+        });
+    });
+    const titles = getVegaLiteTitles(spec);
+    return {
+        data: {
+            chartTitle: titles.chartTitle,
+            chartData
+        },
+        innerRadius,
+        width: typeof spec.width === 'number' ? spec.width : undefined,
+        height: typeof spec.height === 'number' ? spec.height : undefined,
+        ...titles.titleStyles ? titles.titleStyles : {}
+    };
+}
+/**
+ * Transforms Vega-Lite specification to Fluent HeatMapChart props
+ *
+ * Supports heatmaps with rect marks and x/y/color encodings
+ *
+ * @param spec - Vega-Lite specification
+ * @param colorMap - Color mapping ref for consistent coloring
+ * @param isDarkTheme - Whether dark theme is active
+ * @returns HeatMapChartProps for rendering
+ */ export function transformVegaLiteToHeatMapChartProps(spec, colorMap, isDarkTheme) {
+    var _encoding_color, _encoding_color1, _encoding_x, _encoding_x1, _encoding_color_scale, _encoding_color2, _encoding_color_scale1, _encoding_color3;
+    // Initialize transformation context
+    const { dataValues, encoding } = initializeTransformContext(spec);
+    // Extract field names
+    const { xField, yField, colorField } = extractEncodingFields(encoding);
+    if (!xField || !yField || !colorField) {
+        throw new Error('VegaLiteSchemaAdapter: x, y, and color encodings are required for heatmap charts');
+    }
+    const heatmapDataPoints = [];
+    let minValue = Number.POSITIVE_INFINITY;
+    let maxValue = Number.NEGATIVE_INFINITY;
+    // Check if color values are nominal (strings) rather than quantitative (numbers)
+    const isNominalColor = ((_encoding_color = encoding.color) === null || _encoding_color === void 0 ? void 0 : _encoding_color.type) === 'nominal' || ((_encoding_color1 = encoding.color) === null || _encoding_color1 === void 0 ? void 0 : _encoding_color1.type) === 'ordinal' || dataValues.some((row)=>row[colorField] !== undefined && typeof row[colorField] !== 'number');
+    const nominalColorMap = new Map();
+    dataValues.forEach((row)=>{
+        const xValue = row[xField];
+        const yValue = row[yField];
+        const colorValue = row[colorField];
+        if (isInvalidValue(xValue) || isInvalidValue(yValue) || isInvalidValue(colorValue)) {
+            return;
+        }
+        let value;
+        if (isNominalColor) {
+            // Map nominal color values to sequential numeric indices
+            const key = String(colorValue);
+            if (!nominalColorMap.has(key)) {
+                nominalColorMap.set(key, nominalColorMap.size);
+            }
+            value = nominalColorMap.get(key);
+        } else {
+            value = typeof colorValue === 'number' ? colorValue : 0;
+        }
+        minValue = Math.min(minValue, value);
+        maxValue = Math.max(maxValue, value);
+        heatmapDataPoints.push({
+            x: xValue,
+            y: yValue,
+            value,
+            rectText: isNominalColor ? String(colorValue) : value
+        });
+    });
+    // Validate that we have complete grid data
+    if (heatmapDataPoints.length === 0) {
+        throw new Error('VegaLiteSchemaAdapter: Heatmap requires data points with x, y, and color values');
+    }
+    // Extract unique x and y values and create complete grid
+    const uniqueXValues = new Set(heatmapDataPoints.map((p)=>String(p.x)));
+    const uniqueYValues = new Set(heatmapDataPoints.map((p)=>String(p.y)));
+    // Build a map of existing data points for quick lookup
+    const dataPointMap = new Map();
+    const rectTextMap = new Map();
+    heatmapDataPoints.forEach((point)=>{
+        const key = `${String(point.x)}|${String(point.y)}`;
+        dataPointMap.set(key, point.value);
+        var _point_rectText;
+        rectTextMap.set(key, (_point_rectText = point.rectText) !== null && _point_rectText !== void 0 ? _point_rectText : point.value);
+    });
+    // Generate complete grid - fill missing cells with 0
+    const completeGridDataPoints = [];
+    let xValuesArray = Array.from(uniqueXValues);
+    const yValuesArray = Array.from(uniqueYValues);
+    // Sort x-values chronologically if they appear to be dates
+    const isXTemporal = ((_encoding_x = encoding.x) === null || _encoding_x === void 0 ? void 0 : _encoding_x.type) === 'temporal' || ((_encoding_x1 = encoding.x) === null || _encoding_x1 === void 0 ? void 0 : _encoding_x1.type) === 'ordinal';
+    if (isXTemporal) {
+        const firstX = xValuesArray[0];
+        const parsedDate = new Date(firstX);
+        if (!isNaN(parsedDate.getTime())) {
+            // Values are parseable as dates — sort chronologically
+            xValuesArray = xValuesArray.sort((a, b)=>new Date(a).getTime() - new Date(b).getTime());
+        }
+    }
+    yValuesArray.forEach((yVal)=>{
+        xValuesArray.forEach((xVal)=>{
+            const key = `${xVal}|${yVal}`;
+            var _dataPointMap_get;
+            const value = (_dataPointMap_get = dataPointMap.get(key)) !== null && _dataPointMap_get !== void 0 ? _dataPointMap_get : 0; // Use 0 for missing cells
+            // Update min/max to include filled values
+            if (value !== 0 || dataPointMap.has(key)) {
+                minValue = Math.min(minValue, value);
+                maxValue = Math.max(maxValue, value);
+            }
+            var _rectTextMap_get;
+            completeGridDataPoints.push({
+                x: xVal,
+                y: yVal,
+                value,
+                rectText: (_rectTextMap_get = rectTextMap.get(key)) !== null && _rectTextMap_get !== void 0 ? _rectTextMap_get : value
+            });
+        });
+    });
+    const heatmapData = {
+        legend: '',
+        data: completeGridDataPoints,
+        value: 0
+    };
+    const titles = getVegaLiteTitles(spec);
+    // Create color scale domain and range
+    let domainValues = [];
+    let rangeValues = [];
+    // Check for named color scheme or custom range from encoding
+    const colorScheme = (_encoding_color2 = encoding.color) === null || _encoding_color2 === void 0 ? void 0 : (_encoding_color_scale = _encoding_color2.scale) === null || _encoding_color_scale === void 0 ? void 0 : _encoding_color_scale.scheme;
+    const customRange = (_encoding_color3 = encoding.color) === null || _encoding_color3 === void 0 ? void 0 : (_encoding_color_scale1 = _encoding_color3.scale) === null || _encoding_color_scale1 === void 0 ? void 0 : _encoding_color_scale1.range;
+    if (isNominalColor && nominalColorMap.size > 0) {
+        // For nominal colors, use categorical color scale
+        const numCategories = nominalColorMap.size;
+        domainValues = Array.from({
+            length: numCategories
+        }, (_, i)=>i);
+        if (customRange && customRange.length >= numCategories) {
+            rangeValues = customRange.slice(0, numCategories);
+        } else {
+            // Use distinct categorical colors for each category
+            for(let i = 0; i < numCategories; i++){
+                rangeValues.push(getVegaColor(i, colorScheme, customRange, isDarkTheme !== null && isDarkTheme !== void 0 ? isDarkTheme : false));
+            }
+        }
+    } else {
+        // Quantitative color scale
+        const steps = 5;
+        for(let i = 0; i < steps; i++){
+            const t = i / (steps - 1);
+            domainValues.push(minValue + (maxValue - minValue) * t);
+        }
+        if (customRange && customRange.length > 0) {
+            rangeValues = customRange.length >= steps ? customRange.slice(0, steps) : customRange;
+        } else if (colorScheme) {
+            const schemeColors = getSequentialSchemeColors(colorScheme, steps);
+            if (schemeColors) {
+                var _encoding_color4, _encoding_color_scale2, _encoding_color5;
+                const isReversed = ((_encoding_color4 = encoding.color) === null || _encoding_color4 === void 0 ? void 0 : _encoding_color4.sort) === 'descending' || ((_encoding_color5 = encoding.color) === null || _encoding_color5 === void 0 ? void 0 : (_encoding_color_scale2 = _encoding_color5.scale) === null || _encoding_color_scale2 === void 0 ? void 0 : _encoding_color_scale2.reverse) === true;
+                rangeValues = isReversed ? schemeColors.reverse() : schemeColors;
+            }
+        }
+        // Fall back to default blue-to-red gradient if no scheme matched
+        if (rangeValues.length === 0) {
+            for(let i = 0; i < steps; i++){
+                const t = i / (steps - 1);
+                if (isDarkTheme) {
+                    const r = Math.round(0 + 255 * t);
+                    const g = Math.round(100 + (165 - 100) * t);
+                    const b = Math.round(255 - 255 * t);
+                    rangeValues.push(`rgb(${r}, ${g}, ${b})`);
+                } else {
+                    const r = Math.round(0 + 255 * t);
+                    const g = Math.round(150 - 150 * t);
+                    const b = Math.round(255 - 255 * t);
+                    rangeValues.push(`rgb(${r}, ${g}, ${b})`);
+                }
+            }
+        }
+    }
+    var _spec_height;
+    return {
+        chartTitle: titles.chartTitle,
+        data: [
+            heatmapData
+        ],
+        domainValuesForColorScale: domainValues,
+        rangeValuesForColorScale: rangeValues,
+        xAxisTitle: titles.xAxisTitle,
+        yAxisTitle: titles.yAxisTitle,
+        ...titles.titleStyles ? titles.titleStyles : {},
+        width: spec.width,
+        height: (_spec_height = spec.height) !== null && _spec_height !== void 0 ? _spec_height : DEFAULT_CHART_HEIGHT,
+        hideLegend: true,
+        showYAxisLables: true,
+        sortOrder: 'none',
+        hideTickOverlap: true,
+        noOfCharsToTruncate: xValuesArray.length > 20 ? 6 : xValuesArray.length > 10 ? 10 : DEFAULT_TRUNCATE_CHARS,
+        showYAxisLablesTooltip: true,
+        wrapXAxisLables: true
+    };
+}
+/**
+ * Helper function to get bin center for display
+ */ function getBinCenter(bin) {
+    return (bin.x0 + bin.x1) / 2;
+}
+/**
+ * Helper function to calculate histogram aggregation function
+ *
+ * @param aggregate - Aggregation type (count, sum, mean, min, max)
+ * @param bin - Binned data values
+ * @returns Aggregated value
+ */ function calculateHistogramAggregate(aggregate, bin) {
+    switch(aggregate){
+        case 'sum':
+            return d3Sum(bin);
+        case 'mean':
+        case 'average':
+            var _d3Mean;
+            return bin.length === 0 ? 0 : (_d3Mean = d3Mean(bin)) !== null && _d3Mean !== void 0 ? _d3Mean : 0;
+        case 'min':
+            var _d3Min;
+            return (_d3Min = d3Min(bin)) !== null && _d3Min !== void 0 ? _d3Min : 0;
+        case 'max':
+            var _d3Max;
+            return (_d3Max = d3Max(bin)) !== null && _d3Max !== void 0 ? _d3Max : 0;
+        case 'count':
+        default:
+            return bin.length;
+    }
+}
+/**
+ * Transforms Vega-Lite specification to Fluent VerticalBarChart props for histogram rendering
+ *
+ * Supports histograms with binned x-axis and aggregated y-axis
+ * Vega-Lite syntax: `{ "mark": "bar", "encoding": { "x": { "field": "value", "bin": true }, "y": { "aggregate": "count" } } }`
+ *
+ * @param spec - Vega-Lite specification
+ * @param colorMap - Color mapping ref for consistent coloring
+ * @param isDarkTheme - Whether dark theme is active
+ * @returns VerticalBarChartProps for rendering histogram
+ */ export function transformVegaLiteToHistogramProps(spec, colorMap, isDarkTheme) {
+    var _encoding_y, _encoding_x, _encoding_color, _dataValues_, _encoding_y1, _encoding_y_axis, _encoding_y2;
+    // Initialize transformation context
+    const { dataValues, encoding } = initializeTransformContext(spec);
+    // Extract field names
+    const { xField } = extractEncodingFields(encoding);
+    const yAggregate = ((_encoding_y = encoding.y) === null || _encoding_y === void 0 ? void 0 : _encoding_y.aggregate) || 'count';
+    const binConfig = (_encoding_x = encoding.x) === null || _encoding_x === void 0 ? void 0 : _encoding_x.bin;
+    if (!xField || !binConfig) {
+        throw new Error('VegaLiteSchemaAdapter: Histogram requires x encoding with bin property');
+    }
+    // Validate data
+    validateDataArray(dataValues, xField, 'Histogram');
+    validateNoNestedArrays(dataValues, xField);
+    // Extract numeric values from the field
+    const allValues = dataValues.map((row)=>row[xField]).filter((val)=>!isInvalidValue(val));
+    const values = allValues.filter((val)=>typeof val === 'number');
+    if (values.length === 0) {
+        // Provide helpful error message based on actual data type
+        const sampleValue = allValues[0];
+        const actualType = typeof sampleValue;
+        let suggestion = '';
+        if (actualType === 'string') {
+            // Check if strings contain numbers
+            const hasEmbeddedNumbers = allValues.some((val)=>typeof val === 'string' && /\d/.test(val));
+            if (hasEmbeddedNumbers) {
+                suggestion = ' The data contains strings with embedded numbers (e.g., "40 salads"). ' + 'Consider extracting the numeric values first, or change the encoding type to "nominal" or "ordinal" for a categorical bar chart.';
+            } else {
+                suggestion = ` The data contains categorical strings (e.g., "${sampleValue}"). ` + 'Change the x encoding type to "nominal" or "ordinal" for a categorical bar chart, ' + 'or remove bin: true to create a simple bar chart.';
+            }
+        } else if (actualType === 'undefined') {
+            suggestion = ' The field may not exist in the data.';
+        }
+        throw new Error(`VegaLiteSchemaAdapter: No numeric values found for histogram binning on field "${xField}". ` + `Found ${actualType} values instead.${suggestion}`);
+    }
+    // Create bins using d3
+    const [minVal, maxVal] = d3Extent(values);
+    const binGenerator = d3Bin().domain([
+        minVal,
+        maxVal
+    ]);
+    // Apply bin configuration
+    if (typeof binConfig === 'object') {
+        if (binConfig.maxbins) {
+            binGenerator.thresholds(binConfig.maxbins);
+        }
+        if (binConfig.extent) {
+            binGenerator.domain(binConfig.extent);
+        }
+    }
+    const bins = binGenerator(values);
+    // Calculate histogram data points
+    const legend = ((_encoding_color = encoding.color) === null || _encoding_color === void 0 ? void 0 : _encoding_color.field) ? String((_dataValues_ = dataValues[0]) === null || _dataValues_ === void 0 ? void 0 : _dataValues_[encoding.color.field]) : 'Frequency';
+    const color = resolveColor(legend, 0, undefined, undefined, colorMap, undefined, undefined, isDarkTheme);
+    const yField = (_encoding_y1 = encoding.y) === null || _encoding_y1 === void 0 ? void 0 : _encoding_y1.field;
+    const histogramData = bins.map((bin)=>{
+        const x = getBinCenter(bin);
+        let y;
+        if (yAggregate !== 'count' && yField) {
+            // For non-count aggregates, collect y-field values for rows whose x-value falls in this bin
+            const yValues = dataValues.filter((row)=>{
+                const xVal = Number(row[xField]);
+                return !isNaN(xVal) && xVal >= bin.x0 && xVal < bin.x1;
+            }).map((row)=>Number(row[yField])).filter((v)=>!isNaN(v));
+            // Include the last bin's upper bound (x1 is inclusive for the last bin)
+            if (bin === bins[bins.length - 1]) {
+                const extraRows = dataValues.filter((row)=>Number(row[xField]) === bin.x1).map((row)=>Number(row[yField])).filter((v)=>!isNaN(v));
+                yValues.push(...extraRows);
+            }
+            y = calculateHistogramAggregate(yAggregate, yValues);
+        } else {
+            y = calculateHistogramAggregate(yAggregate, bin);
+        }
+        const xAxisCalloutData = `[${bin.x0} - ${bin.x1})`;
+        return {
+            x,
+            y,
+            legend,
+            color,
+            xAxisCalloutData
+        };
+    });
+    const titles = getVegaLiteTitles(spec);
+    const annotations = extractAnnotations(spec);
+    const yAxisTickFormat = (_encoding_y2 = encoding.y) === null || _encoding_y2 === void 0 ? void 0 : (_encoding_y_axis = _encoding_y2.axis) === null || _encoding_y_axis === void 0 ? void 0 : _encoding_y_axis.format;
+    return {
+        data: histogramData,
+        chartTitle: titles.chartTitle,
+        xAxisTitle: titles.xAxisTitle || xField,
+        yAxisTitle: titles.yAxisTitle || yAggregate,
+        ...titles.titleStyles ? titles.titleStyles : {},
+        roundCorners: true,
+        hideTickOverlap: true,
+        maxBarWidth: DEFAULT_MAX_BAR_WIDTH,
+        ...annotations.length > 0 && {
+            annotations
+        },
+        ...yAxisTickFormat && {
+            yAxisTickFormat
+        },
+        mode: 'histogram'
+    };
+}
+/**
+ * Transforms Vega-Lite specification with theta/radius encodings to Fluent PolarChart props
+ * Supports line, point, and area marks with polar coordinates
+ *
+ * @param spec - Vega-Lite specification with theta and radius encodings
+ * @param colorMap - Color mapping ref for consistent coloring
+ * @param isDarkTheme - Whether dark theme is active
+ * @returns PolarChartProps for rendering with Fluent PolarChart component
+ */ export function transformVegaLiteToPolarChartProps(spec, colorMap, isDarkTheme) {
+    var _encoding_theta, _encoding_color_legend, _encoding_color;
+    // Initialize transformation context
+    const { dataValues, encoding, markProps, primarySpec } = initializeTransformContext(spec);
+    // Extract field names
+    const { thetaField, radiusField, colorField } = extractEncodingFields(encoding);
+    // Validate polar encodings
+    if (!thetaField || !radiusField) {
+        throw new Error('VegaLiteSchemaAdapter: Both theta and radius encodings are required for polar charts');
+    }
+    validateDataArray(dataValues, thetaField, 'PolarChart');
+    validateDataArray(dataValues, radiusField, 'PolarChart');
+    // Determine mark type for polar chart series type
+    const mark = primarySpec.mark;
+    const markType = typeof mark === 'string' ? mark : mark === null || mark === void 0 ? void 0 : mark.type;
+    // Arc marks with theta+radius should be treated as area polar (radial/rose charts)
+    const isAreaMark = markType === 'area' || markType === 'arc';
+    const isLineMark = markType === 'line';
+    // Extract color configuration
+    const { colorScheme, colorRange } = extractColorConfig(encoding);
+    // Group data by series (color field)
+    const seriesMap = new Map();
+    const colorIndex = new Map();
+    let currentColorIndex = 0;
+    dataValues.forEach((row)=>{
+        const thetaValue = row[thetaField];
+        const radiusValue = row[radiusField];
+        // Skip invalid values
+        if (isInvalidValue(thetaValue) || isInvalidValue(radiusValue)) {
+            return;
+        }
+        const seriesName = colorField && row[colorField] !== undefined ? String(row[colorField]) : 'default';
+        if (!colorIndex.has(seriesName)) {
+            colorIndex.set(seriesName, currentColorIndex++);
+        }
+        if (!seriesMap.has(seriesName)) {
+            seriesMap.set(seriesName, []);
+        }
+        // Convert theta value - handle different types
+        let theta;
+        if (typeof thetaValue === 'number') {
+            // Numeric theta - assume degrees
+            theta = thetaValue;
+        } else {
+            // Categorical theta
+            theta = String(thetaValue);
+        }
+        // Convert radius value
+        const r = typeof radiusValue === 'number' ? radiusValue : Number(radiusValue);
+        seriesMap.get(seriesName).push({
+            theta,
+            r
+        });
+    });
+    // Convert series map to polar chart data array
+    const polarData = [];
+    seriesMap.forEach((dataPoints, seriesName)=>{
+        const color = resolveColor(seriesName, colorIndex.get(seriesName), undefined, markProps.color, colorMap, colorScheme, colorRange, isDarkTheme);
+        const curveOption = mapInterpolateToCurve(markProps.interpolate);
+        // Build line options with curve, strokeDash, and strokeWidth
+        const lineOptions = {};
+        if (curveOption) {
+            lineOptions.curve = curveOption;
+        }
+        if (markProps.strokeDash) {
+            lineOptions.strokeDasharray = markProps.strokeDash.join(' ');
+        }
+        if (markProps.strokeWidth) {
+            lineOptions.strokeWidth = markProps.strokeWidth;
+        }
+        if (isAreaMark) {
+            const series = {
+                type: 'areapolar',
+                legend: seriesName,
+                color,
+                data: dataPoints,
+                ...Object.keys(lineOptions).length > 0 && {
+                    lineOptions
+                }
+            };
+            polarData.push(series);
+        } else if (isLineMark) {
+            const series = {
+                type: 'linepolar',
+                legend: seriesName,
+                color,
+                data: dataPoints,
+                ...Object.keys(lineOptions).length > 0 && {
+                    lineOptions
+                }
+            };
+            polarData.push(series);
+        } else {
+            // Default to scatter polar for point marks
+            const series = {
+                type: 'scatterpolar',
+                legend: seriesName,
+                color,
+                data: dataPoints
+            };
+            polarData.push(series);
+        }
+    });
+    // Extract chart titles
+    const titles = getVegaLiteTitles(spec);
+    // Build axis props from encoding
+    const radialAxis = {};
+    const angularAxis = {};
+    // Determine angular axis category order if theta is categorical
+    const thetaType = (_encoding_theta = encoding.theta) === null || _encoding_theta === void 0 ? void 0 : _encoding_theta.type;
+    if (thetaType === 'nominal' || thetaType === 'ordinal') {
+        // Get unique theta values in order for category order
+        const thetaValues = Array.from(new Set(dataValues.map((row)=>String(row[thetaField]))));
+        angularAxis.categoryOrder = thetaValues;
+    }
+    var _encoding_color_legend_disable;
+    return {
+        data: polarData,
+        ...titles.chartTitle && {
+            chartTitle: titles.chartTitle
+        },
+        ...titles.titleStyles ? titles.titleStyles : {},
+        width: typeof spec.width === 'number' ? spec.width : undefined,
+        height: typeof spec.height === 'number' ? spec.height : 400,
+        hideLegend: (_encoding_color_legend_disable = (_encoding_color = encoding.color) === null || _encoding_color === void 0 ? void 0 : (_encoding_color_legend = _encoding_color.legend) === null || _encoding_color_legend === void 0 ? void 0 : _encoding_color_legend.disable) !== null && _encoding_color_legend_disable !== void 0 ? _encoding_color_legend_disable : false,
+        radialAxis,
+        angularAxis
+    };
+}