@visactor/vseed 0.0.37 → 0.0.39

package/dist/index.cjs

@@ -1085,6 +1085,9 @@ const initPivotTable = (spec, context)=>{
         tooltip: {
             isShowOverflowTextTooltip: true
         },
+        corner: {
+            titleOnDimension: 'all'
+        },
         widthAdaptiveMode: 'all',
         animationAppear: {
             duration: 300,
@@ -1947,22 +1950,44 @@ const color_color = (spec, context)=>{
     const colorIdMap = unfoldInfo.colorIdMap;
     const { color } = baseConfig;
     const { colorScheme, colorMapping } = color;
-    const mappingList = [];
-    if (colorMapping) Object.entries(colorMapping).sort((a, b)=>a[0].split(Separator).length - b[0].split(Separator).length).forEach(([key, value])=>{
-        const idMap = Object.entries(colorIdMap).filter(([_, v])=>v.includes(key));
-        for (const [colorId] of idMap)mappingList.push([
-            colorId,
-            value
-        ]);
-    });
     result.color = {
         type: 'ordinal',
         domain: colorItems,
         range: colorScheme,
-        specified: Object.fromEntries(mappingList)
+        specified: createSpecifiedForColorMapping(colorMapping, colorIdMap, colorItems)
     };
     return result;
 };
+const createSpecifiedForColorMapping = (colorMapping, colorIdMap, colorItems)=>{
+    if (!colorMapping || !colorIdMap || !colorItems) return;
+    const matchedList = [];
+    const colors = Object.entries(colorMapping).sort((a, b)=>b[0].length - a[0].length);
+    const accurateMap = colors.reduce((prev, cur)=>{
+        const name = cur[0];
+        const colorValue = cur[1];
+        const accurateMatchedList = Object.entries(colorIdMap).filter(([colorKey, colorAlias])=>colorKey === name || colorAlias === name);
+        accurateMatchedList.forEach((item)=>{
+            prev[item[0]] = colorValue;
+            matchedList.push(name);
+        });
+        return prev;
+    }, {});
+    const fuzzyMap = colors.reduce((prev, cur)=>{
+        const name = cur[0];
+        const colorValue = cur[1];
+        if (matchedList.includes(name)) return prev;
+        const fuzzyMatchedList = Object.entries(colorIdMap).filter(([colorKey, colorAlias])=>colorKey.includes(name) || colorAlias.includes(name));
+        fuzzyMatchedList.forEach((item)=>{
+            if (prev[item[0]]) return;
+            prev[item[0]] = colorValue;
+        });
+        return prev;
+    }, {});
+    return {
+        ...fuzzyMap,
+        ...accurateMap
+    };
+};
 const background_backgroundColor = (spec, context)=>{
     const result = {
         ...spec
@@ -2129,6 +2154,8 @@ const xBand = (spec, context)=>{
 };
 const ANNOTATION_Z_INDEX = 1000;
 const LINEAR_AXIS_INNER_OFFSET_TOP = 7;
+const DUAL_AXIS_CHART_COLUMN_Z_INDEX = 1000;
+const DUAL_AXIS_CHART_NON_COLUMN_Z_INDEX = 1001;
 const yLinear = (spec, context)=>{
     const result = {
         ...spec
@@ -2570,7 +2597,7 @@ const pointStyle_pointStyle = (spec, context)=>{
         pointStyle
     ];
     const customMap = pointStyles.reduce((result, style, index)=>{
-        const { pointBorderColor, pointBorderStyle, pointBorderWidth = 1, pointColor, pointColorOpacity, pointSize } = style;
+        const { pointBorderColor, pointBorderStyle, pointBorderWidth = 1, pointColor, pointColorOpacity, pointSize, pointVisible = true } = style;
         const lineDash = 'dashed' === pointBorderStyle ? [
             5,
             2
@@ -2590,6 +2617,7 @@ const pointStyle_pointStyle = (spec, context)=>{
                     return false;
                 },
                 style: {
+                    visible: pointVisible,
                     size: pointSize,
                     fill: pointColor,
                     fillOpacity: pointColorOpacity,
@@ -2622,7 +2650,12 @@ const pointStateDimensionHover = (spec)=>{
                 ...point.state || {},
                 dimension_hover: {
                     scaleX: 1.4,
-                    scaleY: 1.4
+                    scaleY: 1.4,
+                    outerBorder: {
+                        lineWidth: 4,
+                        strokeOpacity: 0.25,
+                        distance: 2
+                    }
                 }
             }
         }
@@ -2669,9 +2702,9 @@ const lineStyle_lineStyle = (spec, context)=>{
     const group = encoding[0]?.group?.[0];
     const lineGroups = (0, external_remeda_namespaceObject.groupBy)(dataset, (d)=>d[group ?? '']);
     const customMap = lineStyles.reduce((result, style, index)=>{
-        const { lineColor, lineColorOpacity, lineSmooth, lineStyle, lineWidth } = style;
-        const dashSegment = (lineWidth ?? 2) * 2;
-        const dashGap = lineWidth ?? 2;
+        const { lineColor, lineColorOpacity, lineSmooth, lineStyle, lineWidth = 2, lineVisible = true } = style;
+        const dashSegment = 2 * lineWidth;
+        const dashGap = lineWidth;
         const lineDash = 'dashed' === lineStyle ? [
             dashSegment,
             dashSegment
@@ -2693,6 +2726,7 @@ const lineStyle_lineStyle = (spec, context)=>{
                     return false;
                 },
                 style: {
+                    visible: lineVisible,
                     curveType: curveType,
                     strokeOpacity: lineColorOpacity,
                     stroke: lineColor,
@@ -2797,13 +2831,11 @@ const annotationVerticalLine_annotationVerticalLine = (spec, context)=>{
         insideEnd: 'insideEndTop'
     };
     const markLine = annotationVerticalLineList.flatMap((annotationVerticalLine)=>{
-        const { selector: selectorPoint, xValue, text = '', textPosition = 'insideEnd', textColor = '#ffffff', textFontSize = 12, textFontWeight = 400, textAlign = 'right', textBaseline = 'top', textBackgroundVisible = true, textBackgroundBorderColor = '#212121', textBackgroundColor = '#212121', textBackgroundBorderRadius = 4, textBackgroundBorderWidth = 1, textBackgroundPadding = 2, lineVisible = true, lineColor = '#212121', lineWidth = 1, lineStyle = 'dashed', offsetX = 0, offsetY = 0 } = annotationVerticalLine;
+        const { selector: selectorPoint, xValue, text = '', textPosition = 'insideEnd', textColor = '#ffffff', textFontSize = 12, textFontWeight = 400, textAlign = 'right', textBaseline = 'top', textBackgroundVisible = true, textBackgroundBorderColor = '#212121', textBackgroundColor = '#212121', textBackgroundBorderRadius = 4, textBackgroundBorderWidth = 1, textBackgroundPadding = 2, lineVisible = true, lineColor = '#212121', lineWidth = 1, lineStyle = 'dashed' } = annotationVerticalLine;
         const dataset = advancedVSeed.dataset.flat();
         const generateOneMarkLine = (x)=>({
                 x: x,
                 zIndex: ANNOTATION_Z_INDEX,
-                offsetX,
-                offsetY,
                 line: {
                     style: {
                         visible: lineVisible,
@@ -2896,12 +2928,10 @@ const annotationHorizontalLine_annotationHorizontalLine = (spec, context)=>{
         insideEnd: 'insideEndTop'
     };
     const markLine = annotationVerticalLineList.flatMap((annotationVerticalLine)=>{
-        const { selector: selectorPoint, yValue, text = '', textPosition = 'insideEnd', textColor = '#ffffff', textFontSize = 12, textFontWeight = 400, textAlign = 'right', textBaseline = 'top', lineColor = '#212121', lineStyle = 'dashed', lineVisible = true, lineWidth = 1, textBackgroundVisible = true, textBackgroundColor = '#212121', textBackgroundBorderColor = '#212121', textBackgroundBorderRadius = 4, textBackgroundBorderWidth = 1, textBackgroundPadding = 2, offsetX = 0, offsetY = 0 } = annotationVerticalLine;
+        const { selector: selectorPoint, yValue, text = '', textPosition = 'insideEnd', textColor = '#ffffff', textFontSize = 12, textFontWeight = 400, textAlign = 'right', textBaseline = 'top', lineColor = '#212121', lineStyle = 'dashed', lineVisible = true, lineWidth = 1, textBackgroundVisible = true, textBackgroundColor = '#212121', textBackgroundBorderColor = '#212121', textBackgroundBorderRadius = 4, textBackgroundBorderWidth = 1, textBackgroundPadding = 2 } = annotationVerticalLine;
         const dataset = advancedVSeed.dataset.flat();
         const generateOneMarkLine = (y)=>({
                 y,
-                offsetX,
-                offsetY,
                 zIndex: ANNOTATION_Z_INDEX,
                 line: {
                     style: {
@@ -2997,7 +3027,7 @@ const annotationArea_annotationArea = (spec, context)=>{
         right: 'insideRight'
     };
     const markArea = annotationAreaList.flatMap((annotationArea)=>{
-        const { selector: selectorPoint, text = '', textPosition = 'top', textColor = '#ffffff', textFontSize = 12, textFontWeight = 400, textAlign = 'center', textBaseline = 'top', textBackgroundVisible = true, textBackgroundColor = '#191d24', textBackgroundBorderColor = '#191d24', textBackgroundBorderWidth = 1, textBackgroundBorderRadius = 4, textBackgroundPadding = 4, areaColor = '#888888', areaColorOpacity = 0.15, areaBorderColor = '#888888', areaBorderRadius = 4, areaBorderWidth = 1, outerPadding = 4, offsetX = 0, offsetY = 0 } = annotationArea;
+        const { selector: selectorPoint, text = '', textPosition = 'top', textColor = '#ffffff', textFontSize = 12, textFontWeight = 400, textAlign = 'center', textBaseline = 'top', textBackgroundVisible = true, textBackgroundColor = '#191d24', textBackgroundBorderColor = '#191d24', textBackgroundBorderWidth = 1, textBackgroundBorderRadius = 4, textBackgroundPadding = 4, areaColor = '#888888', areaColorOpacity = 0.15, areaBorderColor = '#888888', areaBorderRadius = 4, areaBorderWidth = 1, outerPadding = 4 } = annotationArea;
         const dataset = advancedVSeed.dataset.flat();
         const selectedData = selectorPoint ? dataset.filter((datum)=>selector_selector(datum, selectorPoint)) : [];
         const labelPosition = positionMap[textPosition || 'top'];
@@ -3005,8 +3035,6 @@ const annotationArea_annotationArea = (spec, context)=>{
         return {
             zIndex: ANNOTATION_Z_INDEX,
             regionRelative: true,
-            offsetX,
-            offsetY,
             positions: (data, context)=>{
                 const positionData = data.filter((item)=>selectedData.some((datum)=>isSubset(datum, item)));
                 const xyList = positionData.map((datum)=>context.dataToPosition(datum));
@@ -3246,13 +3274,14 @@ const pivotIndicators_pivotIndicators = (chartPipeline)=>(spec, context)=>{
             ...spec
         };
         const { advancedVSeed } = context;
-        const { measures, datasetReshapeInfo, encoding } = advancedVSeed;
+        const { measures, datasetReshapeInfo, encoding, dataset } = advancedVSeed;
         const colorItems = (0, external_remeda_namespaceObject.unique)(datasetReshapeInfo.flatMap((d)=>d.unfoldInfo.colorItems));
         const indicators = datasetReshapeInfo.map((reshapeInfo, index)=>{
             const measure = measures?.find((d)=>d.id === reshapeInfo.id);
             const newEncoding = [
                 encoding[index]
             ];
+            const newDataset = dataset[index];
             const newDatasetReshapeInfo = [
                 {
                     ...reshapeInfo,
@@ -3267,6 +3296,7 @@ const pivotIndicators_pivotIndicators = (chartPipeline)=>(spec, context)=>{
                 advancedVSeed: {
                     ...advancedVSeed,
                     datasetReshapeInfo: newDatasetReshapeInfo,
+                    dataset: newDataset,
                     encoding: newEncoding
                 }
             };
@@ -3375,7 +3405,8 @@ const pivotDiscreteLegend = (spec, context)=>{
             ...cur.unfoldInfo.colorIdMap
         }), {});
     const { legend, color } = baseConfig;
-    const { colorScheme } = color;
+    const { colorScheme, colorMapping } = color;
+    const colorSpecified = createSpecifiedForColorMapping(colorMapping, colorIdMap, colorItems);
     const { enable, position = 'bottom', labelFontColor, labelFontSize = 12, labelFontWeight = 400, maxSize = 1, border, shapeType = 'rectRound' } = legend || {};
     const orient = [
         'bottom',
@@ -3422,17 +3453,20 @@ const pivotDiscreteLegend = (spec, context)=>{
         position: legendPosition,
         maxCol: Math.max(1, maxSize),
         maxRow: Math.max(1, maxSize),
-        data: colorItems.map((d, index)=>({
+        data: colorItems.map((d, index)=>{
+            const color = colorSpecified?.[d] ?? colorScheme?.[index % colorScheme.length];
+            return {
                 label: d,
                 shape: {
                     outerBorder: border ? {
-                        stroke: colorScheme?.[index],
+                        stroke: color,
                         distance: 3,
                         lineWidth: 1
                     } : void 0,
-                    fill: colorScheme?.[index]
+                    fill: color
                 }
-            })),
+            };
+        }),
         item: {
             focus: true,
             maxWidth: '30%',
@@ -3782,7 +3816,7 @@ const barStyle_barStyle = (spec, context)=>{
         barStyle
     ];
     const customMap = barStyles.reduce((result, style, index)=>{
-        const { barBorderColor, barBorderStyle, barBorderWidth = 1, barColor, barColorOpacity, barRadius } = style;
+        const { barBorderColor, barBorderStyle, barBorderWidth = 1, barColor, barColorOpacity, barRadius, barVisible = true } = style;
         const lineDash = 'dashed' === barBorderStyle ? [
             5,
             2
@@ -3802,6 +3836,7 @@ const barStyle_barStyle = (spec, context)=>{
                     return false;
                 },
                 style: {
+                    visible: barVisible,
                     fill: barColor,
                     fillOpacity: barColorOpacity,
                     cornerRadius: barRadius,
@@ -3843,14 +3878,12 @@ const annotationAreaBand = (spec, context)=>{
         right: 'insideRight'
     };
     const markArea = annotationAreaList.flatMap((annotationArea)=>{
-        const { selector: selectorPoint, text = '', textPosition = 'top', textColor = '#ffffff', textFontSize = 12, textFontWeight = 400, textAlign = 'center', textBaseline = 'top', textBackgroundVisible = true, textBackgroundColor = '#191d24', textBackgroundBorderColor = '#191d24', textBackgroundBorderWidth = 1, textBackgroundBorderRadius = 4, textBackgroundPadding = 4, areaColor = '#888888', areaColorOpacity = 0.15, areaBorderColor = '#888888', areaBorderRadius = 4, areaBorderWidth = 1, outerPadding = 4, offsetX = 0, offsetY = 0 } = annotationArea;
+        const { selector: selectorPoint, text = '', textPosition = 'top', textColor = '#ffffff', textFontSize = 12, textFontWeight = 400, textAlign = 'center', textBaseline = 'top', textBackgroundVisible = true, textBackgroundColor = '#191d24', textBackgroundBorderColor = '#191d24', textBackgroundBorderWidth = 1, textBackgroundBorderRadius = 4, textBackgroundPadding = 4, areaColor = '#888888', areaColorOpacity = 0.15, areaBorderColor = '#888888', areaBorderRadius = 4, areaBorderWidth = 1, outerPadding = 4 } = annotationArea;
         const dataset = advancedVSeed.dataset.flat();
         const selectedData = selectorPoint ? dataset.filter((datum)=>selector_selector(datum, selectorPoint)) : [];
         return {
             zIndex: ANNOTATION_Z_INDEX,
             regionRelative: true,
-            offsetX,
-            offsetY,
             positions: (data, context)=>{
                 const positionData = data.filter((item)=>selectedData.some((datum)=>isSubset(datum, item)));
                 const xyList = positionData.map((datum)=>context.dataToPosition(datum));
@@ -4782,7 +4815,12 @@ const areaStyle_areaStyle = (spec, context)=>{
     const { advancedVSeed } = context;
     const { markStyle, encoding, dataset } = advancedVSeed;
     const { areaStyle } = markStyle;
-    if (!areaStyle) return spec;
+    if (!areaStyle) return {
+        ...spec,
+        area: {
+            visible: true
+        }
+    };
     const result = {
         ...spec
     };
@@ -4790,19 +4828,20 @@ const areaStyle_areaStyle = (spec, context)=>{
         areaStyle
     ];
     const group = encoding[0]?.group?.[0];
-    const lineGroups = (0, external_remeda_namespaceObject.groupBy)(dataset, (d)=>d[group ?? '']);
+    const areaGroups = (0, external_remeda_namespaceObject.groupBy)(dataset, (d)=>d[group ?? '']);
     const customMap = areaStyles.reduce((result, style, index)=>{
-        const { areaColor, areaColorOpacity } = style;
+        const { areaColor, areaColorOpacity, areaVisible = true } = style;
         return {
             ...result,
             [`custom${index + 1}`]: {
                 level: index + 1,
                 filter: (datum)=>{
-                    const lineData = lineGroups[datum[group ?? '']];
+                    const lineData = areaGroups[datum[group ?? '']];
                     for (const d of lineData)if (selector_selector(d, style.selector)) return true;
                     return false;
                 },
                 style: {
+                    visible: areaVisible,
                     fill: areaColor,
                     fillOpacity: areaColorOpacity
                 }
@@ -4812,6 +4851,7 @@ const areaStyle_areaStyle = (spec, context)=>{
     return {
         ...result,
         area: {
+            visible: true,
             state: {
                 ...customMap
             }
@@ -5925,6 +5965,7 @@ const dualAxisConfig = (advancedVSeed, context)=>{
         'legend',
         'tooltip',
         'dualChartType',
+        'alignTicks',
         'primaryYAxis',
         'secondaryYAxis',
         'crosshairLine'
@@ -6077,7 +6118,8 @@ const initDualAxisSecondary = (spec, context)=>{
 };
 const dualChartTypePrimary = (spec, context)=>{
     const result = {
-        ...spec
+        ...spec,
+        zIndex: DUAL_AXIS_CHART_NON_COLUMN_Z_INDEX
     };
     const { advancedVSeed, vseed } = context;
     const { chartType } = vseed;
@@ -6088,12 +6130,16 @@ const dualChartTypePrimary = (spec, context)=>{
         secondary: 'line'
     };
     const primary = Array.isArray(config) ? config[index].primary || config[0].primary : config.primary;
-    switch(primary){
+    const secondary = Array.isArray(config) ? config[index].secondary || config[0].secondary : config.secondary;
+    const bothColumn = 'column' === primary && 'column' === secondary;
+    const type = bothColumn ? 'columnParallel' : primary;
+    switch(type){
         case 'line':
             result.type = 'line';
             break;
         case 'column':
             result.type = 'bar';
+            result.zIndex = DUAL_AXIS_CHART_COLUMN_Z_INDEX;
             break;
         case 'columnParallel':
             {
@@ -6104,6 +6150,7 @@ const dualChartTypePrimary = (spec, context)=>{
                     datasetReshapeInfo[0].unfoldInfo.groupId
                 ];
                 columnSpec.type = 'bar';
+                result.zIndex = DUAL_AXIS_CHART_COLUMN_Z_INDEX;
                 break;
             }
         case 'columnPercent':
@@ -6127,7 +6174,8 @@ const dualChartTypePrimary = (spec, context)=>{
 };
 const dualChartTypeSecondary = (spec, context)=>{
     const result = {
-        ...spec
+        ...spec,
+        zIndex: DUAL_AXIS_CHART_NON_COLUMN_Z_INDEX
     };
     const { advancedVSeed, vseed } = context;
     const { chartType } = vseed;
@@ -6137,13 +6185,17 @@ const dualChartTypeSecondary = (spec, context)=>{
         secondary: 'line'
     };
     const index = datasetReshapeInfo[0].index;
+    const primary = Array.isArray(config) ? config[index].primary || config[0].primary : config.primary;
     const secondary = Array.isArray(config) ? config[index].secondary || config[0].secondary : config.secondary;
-    switch(secondary){
+    const bothColumn = 'column' === primary && 'column' === secondary;
+    const type = bothColumn ? 'columnParallel' : secondary;
+    switch(type){
         case 'line':
             result.type = 'line';
             break;
         case 'column':
             result.type = 'bar';
+            result.zIndex = DUAL_AXIS_CHART_COLUMN_Z_INDEX;
             break;
         case 'columnParallel':
             {
@@ -6154,6 +6206,7 @@ const dualChartTypeSecondary = (spec, context)=>{
                     datasetReshapeInfo[0].unfoldInfo.groupId
                 ];
                 columnSpec.type = 'bar';
+                result.zIndex = DUAL_AXIS_CHART_COLUMN_Z_INDEX;
                 break;
             }
         case 'columnPercent':
@@ -6492,12 +6545,18 @@ const yLinearPrimary = (spec, context)=>{
     const { locale, datasetReshapeInfo } = advancedVSeed;
     const index = datasetReshapeInfo[0].index;
     const primaryYAxis = advancedVSeed.config?.[chartType]?.primaryYAxis;
-    const config = Array.isArray(primaryYAxis) ? primaryYAxis[index] || primaryYAxis[0] : primaryYAxis;
+    const yAxisConfig = Array.isArray(primaryYAxis) ? primaryYAxis[index] || primaryYAxis[0] : primaryYAxis;
+    const alignTicks = advancedVSeed.config?.[chartType]?.alignTicks;
+    const alignTicksConfig = Array.isArray(alignTicks) ? alignTicks[index] || alignTicks[0] : alignTicks;
     if (datasetReshapeInfo[0].foldInfoList?.[0] && (0, external_remeda_namespaceObject.isEmpty)(datasetReshapeInfo[0].foldInfoList[0].foldMap)) return result;
     const id = `${datasetReshapeInfo[0].id}-primary-axis`;
-    const seriesId = `${datasetReshapeInfo[0].id}-primary-series`;
+    const seriesIds = [
+        `${datasetReshapeInfo[0].id}-primary-series`,
+        `${datasetReshapeInfo[0].id}-secondary-series`
+    ];
+    const seriesId = alignTicksConfig ? seriesIds : seriesIds[0];
     if (!result.axes) result.axes = [];
-    if (!config) {
+    if (!yAxisConfig) {
         result.axes = [
             ...result.axes,
             {
@@ -6505,26 +6564,16 @@ const yLinearPrimary = (spec, context)=>{
                 id,
                 seriesId,
                 type: 'linear',
-                orient: 'left',
-                sync: {
-                    axisId: `${datasetReshapeInfo[0].id}-secondary-axis`,
-                    tickAlign: false,
-                    zeroAlign: true
-                }
+                orient: 'left'
             }
         ];
         return result;
     }
-    const { visible = true, label, tick, title, grid, line, zero, nice, inverse, max, min, log, logBase = 10 } = config;
+    const { visible = true, label, tick, title, grid, line, zero, nice, inverse, max, min, log, logBase = 10 } = yAxisConfig;
     const linearAxis = {
         visible,
         id,
         seriesId,
-        sync: {
-            axisId: `${datasetReshapeInfo[0].id}-secondary-axis`,
-            tickAlign: false,
-            zeroAlign: true
-        },
         type: log ? 'log' : 'linear',
         base: logBase,
         orient: 'left',
@@ -6593,12 +6642,22 @@ const yLinearSecondary = (spec, context)=>{
     const { locale, datasetReshapeInfo } = advancedVSeed;
     const index = datasetReshapeInfo[0].index;
     const secondaryYAxis = advancedVSeed.config?.[chartType]?.secondaryYAxis;
-    const config = Array.isArray(secondaryYAxis) ? secondaryYAxis[index] || secondaryYAxis[0] : secondaryYAxis;
+    const yAxisConfig = Array.isArray(secondaryYAxis) ? secondaryYAxis[index] || secondaryYAxis[0] : secondaryYAxis;
+    const alignTicks = advancedVSeed.config?.[chartType]?.alignTicks;
+    const alignTicksConfig = Array.isArray(alignTicks) ? alignTicks[index] || alignTicks[0] : alignTicks;
     if ((0, external_remeda_namespaceObject.isNullish)(datasetReshapeInfo[0].foldInfoList?.[1])) return result;
+    const sync = {
+        axisId: `${datasetReshapeInfo[0].id}-primary-axis`,
+        zeroAlign: true
+    };
     const id = `${datasetReshapeInfo[0].id}-secondary-axis`;
-    const seriesId = `${datasetReshapeInfo[0].id}-secondary-series`;
+    const seriesIds = [
+        `${datasetReshapeInfo[0].id}-primary-series`,
+        `${datasetReshapeInfo[0].id}-secondary-series`
+    ];
+    const seriesId = alignTicksConfig ? seriesIds : seriesIds[1];
     if (!result.axes) result.axes = [];
-    if (!config) {
+    if (!yAxisConfig) {
         result.axes = [
             ...result.axes,
             {
@@ -6606,16 +6665,18 @@ const yLinearSecondary = (spec, context)=>{
                 id,
                 seriesId,
                 type: 'linear',
-                orient: 'right'
+                orient: 'right',
+                sync
             }
         ];
         return result;
     }
-    const { visible = true, label, tick, title, grid, line, zero, nice, inverse, max, min, log, logBase = 10 } = config;
+    const { visible = true, label, tick, title, grid, line, zero, nice, inverse, max, min, log, logBase = 10 } = yAxisConfig;
     const linearAxis = {
         visible,
         id,
         seriesId,
+        sync,
         type: log ? 'log' : 'linear',
         base: logBase,
         orient: 'right',
@@ -6719,7 +6780,7 @@ const pivotDualAxis = [
     pivotIndicators_pivotIndicatorsAsRow,
     datasetPivot,
     pivotIndicators_pivotIndicators([
-        seriesDualAxis([
+        series([
             initDualAxisPrimary,
             dualChartTypePrimary,
             datasetPrimary,
@@ -9083,6 +9144,7 @@ const zDualAxisConfig = external_zod_namespaceObject.z.object({
     tooltip: zTooltip.nullish(),
     legend: zLegend.nullish(),
     dualChartType: external_zod_namespaceObject.z.array(zDualChartType).or(zDualChartType).nullish(),
+    alignTicks: external_zod_namespaceObject.z.array(external_zod_namespaceObject.z.boolean()).or(external_zod_namespaceObject.z.boolean()).nullish(),
     primaryYAxis: external_zod_namespaceObject.z.array(zYLinearAxis).or(zYLinearAxis).nullish(),
     secondaryYAxis: external_zod_namespaceObject.z.array(zYLinearAxis).or(zYLinearAxis).nullish(),
     xAxis: zXBandAxis.nullish(),
@@ -9255,6 +9317,7 @@ const zBarStyle = external_zod_namespaceObject.z.object({
         zSelector,
         zSelectors
     ]).nullish(),
+    barVisible: external_zod_namespaceObject.z.boolean().nullish(),
     barColor: external_zod_namespaceObject.z.string().nullish(),
     barColorOpacity: external_zod_namespaceObject.z.number().nullish(),
     barBorderColor: external_zod_namespaceObject.z.string().nullish(),
@@ -9274,6 +9337,7 @@ const zPointStyle = external_zod_namespaceObject.z.object({
         zSelector,
         zSelectors
     ]).nullish(),
+    pointVisible: external_zod_namespaceObject.z.boolean().nullish(),
     pointSize: external_zod_namespaceObject.z.number().nullish(),
     pointColor: external_zod_namespaceObject.z.string().nullish(),
     pointColorOpacity: external_zod_namespaceObject.z.number().nullish(),
@@ -9292,6 +9356,7 @@ const zLineStyle = external_zod_namespaceObject.z.object({
         zSelector,
         zSelectors
     ]).nullish(),
+    lineVisible: external_zod_namespaceObject.z.boolean().nullish(),
     lineSmooth: external_zod_namespaceObject.z.boolean().nullish(),
     lineColor: external_zod_namespaceObject.z.string().nullish(),
     lineColorOpacity: external_zod_namespaceObject.z.number().nullish(),
@@ -9309,6 +9374,7 @@ const zAreaStyle = external_zod_namespaceObject.z.object({
         zSelector,
         zSelectors
     ]).nullish(),
+    areaVisible: external_zod_namespaceObject.z.boolean().nullish(),
     areaColor: external_zod_namespaceObject.z.string().nullish(),
     areaColorOpacity: external_zod_namespaceObject.z.number().nullish()
 });
@@ -9394,9 +9460,7 @@ const zAnnotationVerticalLine = external_zod_namespaceObject.z.object({
         external_zod_namespaceObject.z.literal('solid'),
         external_zod_namespaceObject.z.literal('dashed'),
         external_zod_namespaceObject.z.literal('dotted')
-    ]).default('dashed').nullish(),
-    offsetX: external_zod_namespaceObject.z.number().default(0),
-    offsetY: external_zod_namespaceObject.z.number().default(0)
+    ]).default('dashed').nullish()
 });
 const zAnnotationHorizontalLine = external_zod_namespaceObject.z.object({
     selector: external_zod_namespaceObject.z.union([
@@ -9446,9 +9510,7 @@ const zAnnotationHorizontalLine = external_zod_namespaceObject.z.object({
     textBackgroundBorderColor: external_zod_namespaceObject.z.string().default('#212121').nullish(),
     textBackgroundBorderRadius: external_zod_namespaceObject.z.number().default(4).nullish(),
     textBackgroundBorderWidth: external_zod_namespaceObject.z.number().default(1).nullish(),
-    textBackgroundPadding: external_zod_namespaceObject.z.number().default(2).nullish(),
-    offsetX: external_zod_namespaceObject.z.number().default(0),
-    offsetY: external_zod_namespaceObject.z.number().default(0)
+    textBackgroundPadding: external_zod_namespaceObject.z.number().default(2).nullish()
 });
 const zAnnotationArea = external_zod_namespaceObject.z.object({
     selector: external_zod_namespaceObject.z.union([
@@ -9490,9 +9552,7 @@ const zAnnotationArea = external_zod_namespaceObject.z.object({
     areaBorderColor: external_zod_namespaceObject.z.string().default('#888888').nullish(),
     areaBorderWidth: external_zod_namespaceObject.z.number().default(1).nullish(),
     areaBorderRadius: external_zod_namespaceObject.z.number().default(4).nullish(),
-    outerPadding: external_zod_namespaceObject.z.number().default(4).nullish(),
-    offsetX: external_zod_namespaceObject.z.number().default(0).nullish(),
-    offsetY: external_zod_namespaceObject.z.number().default(0).nullish()
+    outerPadding: external_zod_namespaceObject.z.number().default(4).nullish()
 });
 const zAnnotation = external_zod_namespaceObject.z.object({
     annotationPoint: zAnnotationPoint.or(external_zod_namespaceObject.z.array(zAnnotationPoint)).nullish(),
@@ -9817,6 +9877,7 @@ const zDualAxis = external_zod_namespaceObject.z.object({
     measures: zMeasureTree.nullish(),
     dualMeasures: zDualMeasures.nullish(),
     dualChartType: external_zod_namespaceObject.z.array(zDualChartType).or(zDualChartType).nullish(),
+    alignTicks: external_zod_namespaceObject.z.array(external_zod_namespaceObject.z.boolean()).or(external_zod_namespaceObject.z.boolean()).nullish(),
     primaryYAxis: external_zod_namespaceObject.z.array(zYLinearAxis).or(zYLinearAxis).nullish(),
     secondaryYAxis: external_zod_namespaceObject.z.array(zYLinearAxis).or(zYLinearAxis).nullish(),
     xAxis: zXBandAxis.nullish(),