@visactor/vseed 0.0.7 → 0.0.8

package/dist/index.js

@@ -1,5 +1,128 @@
 import { clone as external_remeda_clone, mergeDeep as external_remeda_mergeDeep, pick as external_remeda_pick, unique } from "remeda";
 import { z } from "zod";
+const initAdvancedVSeed = (advancedVSeed, context)=>{
+    const { vseed } = context;
+    const { chartType = 'table' } = vseed;
+    return {
+        ...advancedVSeed,
+        chartType
+    };
+};
+const execPipeline = (pipeline, context, initialValue = {})=>{
+    const result = pipeline.reduce((prev, cur)=>cur(prev, context), initialValue);
+    return result;
+};
+const isVTable = (chartType)=>[
+        'table',
+        'pivotTable'
+    ].includes(chartType);
+const isVChart = (chartType)=>!isVTable(chartType);
+const isPivotChart = (vseed)=>{
+    const { measures, dimensions } = vseed;
+    const hasRowOrColumnDimension = dimensions && dimensions.some((dimension)=>'rowDimension' === dimension.location || 'columnDimension' === dimension.location);
+    const hasMeasureGroup = measures && measures.find((measure)=>measure && measure.children);
+    return hasRowOrColumnDimension || hasMeasureGroup;
+};
+const autoMeasures = (advancedVSeed, context)=>{
+    const result = {
+        ...advancedVSeed
+    };
+    const { vseed } = context;
+    const { measures, dataset } = vseed;
+    if (!dataset) throw new Error('dataset is required');
+    if (0 === dataset.length) return result;
+    if (isPivotChart(vseed)) return autoMeasureGroup(advancedVSeed, context);
+    if (measures) {
+        result.measures = measures;
+        return result;
+    }
+    const top100dataset = dataset.slice(0, 100);
+    const sample = top100dataset.reduce((prev, cur)=>({
+            ...prev,
+            ...cur
+        }), {});
+    result.measures = Object.keys(sample).filter((key)=>top100dataset.some((item)=>'number' == typeof item[key]) && ![
+            '',
+            null,
+            void 0
+        ].includes(key)).map((measure)=>({
+            id: measure,
+            alias: measure
+        }));
+    return result;
+};
+const autoMeasureGroup = (advancedVSeed, context)=>{
+    const { vseed } = context;
+    const { measures } = vseed;
+    const hasMeasureGroup = measures?.some((measure)=>measure.children);
+    if (!measures) return advancedVSeed;
+    if (!hasMeasureGroup) {
+        const newMeasures = [
+            {
+                id: 'measureGroup',
+                alias: 'measureGroup',
+                children: measures
+            }
+        ];
+        return {
+            ...advancedVSeed,
+            measures: newMeasures
+        };
+    }
+    let currentGroup = createEmptyMeasureGroup();
+    const measureGroups = [];
+    for (const measure of measures)if ('children' in measure) {
+        if (currentGroup.children?.length) {
+            currentGroup.id = currentGroup.children.map((item)=>item.id).join('-');
+            currentGroup.alias = currentGroup.children.map((item)=>item.alias).join('-');
+            measureGroups.push(currentGroup);
+            currentGroup = createEmptyMeasureGroup();
+        }
+        measureGroups.push(measure);
+    } else currentGroup.children?.push(measure);
+    if (currentGroup.children?.length) {
+        currentGroup.id = currentGroup.children.map((item)=>item.id).join('-');
+        currentGroup.alias = currentGroup.children.map((item)=>item.alias).join('-');
+        measureGroups.push(currentGroup);
+        currentGroup = createEmptyMeasureGroup();
+    }
+    advancedVSeed.measures = measureGroups;
+    return advancedVSeed;
+};
+const createEmptyMeasureGroup = ()=>({
+        id: '',
+        alias: '',
+        children: []
+    });
+const autoDimensions = (advancedVSeed, context)=>{
+    const result = {
+        ...advancedVSeed
+    };
+    const { vseed } = context;
+    const { dimensions, dataset } = vseed;
+    const { measures = [] } = advancedVSeed;
+    if (!dataset) throw new Error('dataset is required');
+    if (0 === dataset.length) return result;
+    if (dimensions) {
+        result.dimensions = dimensions;
+        return result;
+    }
+    const top100dataset = dataset.slice(0, 100);
+    const sample = top100dataset.reduce((prev, cur)=>({
+            ...prev,
+            ...cur
+        }), {});
+    result.dimensions = Object.keys(sample).filter((key)=>top100dataset.some((item)=>'string' == typeof item[key]) && ![
+            '',
+            null,
+            void 0
+        ].includes(key) && !measures.some((measure)=>measure.id === key)).map((dim)=>({
+            id: dim,
+            alias: dim,
+            location: 'dimension'
+        }));
+    return result;
+};
 const FoldMeasureName = '__MeaName__';
 const FoldMeasureValue = '__MeaValue__';
 const FoldMeasureId = '__MeaId__';
@@ -283,10 +406,10 @@ const pivotReshapeTo2D1M = (advancedVSeed, context)=>{
         if (!measures) return;
         const groupId = measureGroup.id;
         const { dataset: newSubDataset, foldInfo, unfoldInfo } = dataReshapeFor2D1M(dataset, commonDimensions, measures, {
-            foldMeasureId: FoldMeasureId + groupId,
-            foldMeasureName: FoldMeasureName + groupId,
+            foldMeasureId: FoldMeasureId,
+            foldMeasureName: FoldMeasureName,
             foldMeasureValue: FoldMeasureValue + groupId,
-            unfoldDimensionGroup: UnfoldDimensionGroup + groupId
+            unfoldDimensionGroup: UnfoldDimensionGroup
         });
         const reshapeInfo = {
             id: groupId,
@@ -409,162 +532,89 @@ const encodingPolar = (advancedVSeed)=>{
         encoding
     };
 };
-const initAdvancedVSeed = (advancedVSeed, context)=>{
+const vchartBaseConfig = (advancedVSeed, context)=>{
     const { vseed } = context;
-    const { chartType = 'table' } = vseed;
-    return {
-        ...advancedVSeed,
-        chartType
-    };
-};
-const execPipeline = (pipeline, context, initialValue = {})=>{
-    const result = pipeline.reduce((prev, cur)=>cur(prev, context), initialValue);
-    return result;
-};
-const isVTable = (chartType)=>[
-        'table',
-        'pivotTable'
-    ].includes(chartType);
-const isVChart = (chartType)=>!isVTable(chartType);
-const isPivotChart = (vseed)=>{
-    const { measures, dimensions } = vseed;
-    const hasRowOrColumnDimension = dimensions && dimensions.some((dimension)=>'rowDimension' === dimension.location || 'columnDimension' === dimension.location);
-    const hasMeasureGroup = measures && measures.find((measure)=>measure && measure.children);
-    return hasRowOrColumnDimension || hasMeasureGroup;
-};
-const autoMeasures = (advancedVSeed, context)=>{
     const result = {
         ...advancedVSeed
     };
-    const { vseed } = context;
-    const { measures, dataset } = vseed;
-    if (!dataset) throw new Error('dataset is required');
-    if (0 === dataset.length) return result;
-    if (isPivotChart(vseed)) return autoMeasureGroup(advancedVSeed, context);
-    if (measures) {
-        result.measures = measures;
-        return result;
-    }
-    const top100dataset = dataset.slice(0, 100);
-    const sample = top100dataset.reduce((prev, cur)=>({
-            ...prev,
-            ...cur
-        }), {});
-    result.measures = Object.keys(sample).filter((key)=>top100dataset.some((item)=>'number' == typeof item[key]) && ![
-            '',
-            null,
-            void 0
-        ].includes(key)).map((measure)=>({
-            id: measure,
-            alias: measure
-        }));
+    const config = external_remeda_pick(vseed, [
+        'backgroundColor',
+        'color',
+        'label',
+        'legend',
+        'tooltip'
+    ]);
+    result.baseConfig = {
+        vchart: {
+            ...config
+        }
+    };
     return result;
 };
-const autoMeasureGroup = (advancedVSeed, context)=>{
+const lineConfig = (advancedVSeed, context)=>{
     const { vseed } = context;
-    const { measures } = vseed;
-    const hasMeasureGroup = measures?.some((measure)=>measure.children);
-    if (!measures) return advancedVSeed;
-    if (!hasMeasureGroup) {
-        const newMeasures = [
-            {
-                id: 'measureGroup',
-                alias: 'measureGroup',
-                children: measures
-            }
-        ];
-        return {
-            ...advancedVSeed,
-            measures: newMeasures
-        };
-    }
-    let currentGroup = createEmptyMeasureGroup();
-    const measureGroups = [];
-    for (const measure of measures)if ('children' in measure) {
-        if (currentGroup.children?.length) {
-            currentGroup.id = currentGroup.children.map((item)=>item.id).join('-');
-            currentGroup.alias = currentGroup.children.map((item)=>item.alias).join('-');
-            measureGroups.push(currentGroup);
-            currentGroup = createEmptyMeasureGroup();
-        }
-        measureGroups.push(measure);
-    } else currentGroup.children?.push(measure);
-    if (currentGroup.children?.length) {
-        currentGroup.id = currentGroup.children.map((item)=>item.id).join('-');
-        currentGroup.alias = currentGroup.children.map((item)=>item.alias).join('-');
-        measureGroups.push(currentGroup);
-        currentGroup = createEmptyMeasureGroup();
-    }
-    advancedVSeed.measures = measureGroups;
-    return advancedVSeed;
-};
-const createEmptyMeasureGroup = ()=>({
-        id: '',
-        alias: '',
-        children: []
-    });
-const autoDimensions = (advancedVSeed, context)=>{
+    const { chartType } = vseed;
     const result = {
         ...advancedVSeed
     };
-    const { vseed } = context;
-    const { dimensions, dataset } = vseed;
-    const { measures = [] } = advancedVSeed;
-    if (!dataset) throw new Error('dataset is required');
-    if (0 === dataset.length) return result;
-    if (dimensions) {
-        result.dimensions = dimensions;
-        return result;
-    }
-    const top100dataset = dataset.slice(0, 100);
-    const sample = top100dataset.reduce((prev, cur)=>({
-            ...prev,
-            ...cur
-        }), {});
-    result.dimensions = Object.keys(sample).filter((key)=>top100dataset.some((item)=>'string' == typeof item[key]) && ![
-            '',
-            null,
-            void 0
-        ].includes(key) && !measures.some((measure)=>measure.id === key)).map((dim)=>({
-            id: dim,
-            alias: dim,
-            location: 'dimension'
-        }));
+    const config = external_remeda_pick(vseed, [
+        'xAxis',
+        'yAxis'
+    ]);
+    result.config = {
+        ...result.config || {},
+        [chartType]: {
+            ...config
+        }
+    };
     return result;
 };
-const vchartBaseConfig = (advancedVSeed, context)=>{
+const pieConfig = (advancedVSeed, context)=>{
     const { vseed } = context;
+    const { chartType } = vseed;
     const result = {
         ...advancedVSeed
     };
-    const config = external_remeda_pick(vseed, [
-        'backgroundColor',
-        'color',
-        'label',
-        'legend',
-        'tooltip'
-    ]);
-    result.baseConfig = {
-        vchart: {
+    const config = external_remeda_pick(vseed, []);
+    result.config = {
+        ...result.config || {},
+        [chartType]: {
             ...config
         }
     };
     return result;
 };
+const barConfig = lineConfig;
+const barParallelConfig = lineConfig;
+const barPercentConfig = lineConfig;
+const columnConfig = lineConfig;
+const columnParallelConfig = lineConfig;
+const columnPercentConfig = lineConfig;
+const areaConfig = lineConfig;
+const areaPercentConfig = lineConfig;
 const vchartTheme = (advancedVSeed, context)=>{
     const { customTheme, vseed } = context;
-    const { theme = 'light' } = vseed;
+    const { theme = 'light', chartType } = vseed;
     const result = {
         ...advancedVSeed
     };
     if (!customTheme || !customTheme[theme]) return result;
-    const config = result.baseConfig?.vchart;
-    const themeConfig = customTheme?.[theme].baseConfig?.vchart;
-    if (!themeConfig || !config) return result;
-    const mergedConfig = external_remeda_mergeDeep(themeConfig, external_remeda_clone(config));
-    result.baseConfig = {
-        vchart: mergedConfig
-    };
+    const baseConfigVChartTheme = customTheme?.[theme].baseConfig?.vchart;
+    if (baseConfigVChartTheme) {
+        const baseConfigVChart = result.baseConfig?.vchart || {};
+        const mergedConfig = external_remeda_mergeDeep(baseConfigVChartTheme, external_remeda_clone(baseConfigVChart));
+        result.baseConfig = {
+            vchart: mergedConfig
+        };
+    }
+    const chartConfigTheme = customTheme?.[theme].config?.[chartType];
+    if (chartConfigTheme) {
+        const chartConfig = result.config?.[chartType] || {};
+        const mergedConfig = external_remeda_mergeDeep(chartConfigTheme, external_remeda_clone(chartConfig));
+        result.config = {
+            [chartType]: mergedConfig
+        };
+    }
     return result;
 };
 const pivotAdapter = (pipeline, pivotPipeline)=>(advancedVSeed, context)=>{
@@ -584,6 +634,7 @@ const lineAdvancedPipeline = [
     ]),
     encodingXY,
     vchartBaseConfig,
+    lineConfig,
     vchartTheme
 ];
 const barAdvancedPipeline = [
@@ -596,6 +647,7 @@ const barAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingYX,
+    barConfig,
     vchartBaseConfig,
     vchartTheme
 ];
@@ -609,6 +661,7 @@ const barParallelAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingYX,
+    barParallelConfig,
     vchartBaseConfig,
     vchartTheme
 ];
@@ -622,6 +675,7 @@ const barPercentAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingYX,
+    barPercentConfig,
     vchartBaseConfig,
     vchartTheme
 ];
@@ -635,6 +689,7 @@ const columnAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingXY,
+    columnConfig,
     vchartBaseConfig,
     vchartTheme
 ];
@@ -648,6 +703,7 @@ const columnParallelAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingXY,
+    columnParallelConfig,
     vchartBaseConfig,
     vchartTheme
 ];
@@ -661,6 +717,7 @@ const columnPercentAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingXY,
+    columnPercentConfig,
     vchartBaseConfig,
     vchartTheme
 ];
@@ -674,6 +731,7 @@ const areaAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingXY,
+    areaConfig,
     vchartBaseConfig,
     vchartTheme
 ];
@@ -687,6 +745,7 @@ const areaPercentAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingXY,
+    areaPercentConfig,
     vchartBaseConfig,
     vchartTheme
 ];
@@ -700,6 +759,7 @@ const pieAdvancedPipeline = [
         pivotReshapeTo1D1M
     ]),
     encodingPolar,
+    pieConfig,
     vchartBaseConfig,
     vchartTheme
 ];
@@ -747,6 +807,11 @@ const initColumn = (spec, context)=>{
     result.yField = encoding[0].y[0];
     result.seriesField = encoding[0].group[0];
     result.padding = 0;
+    result.region = [
+        {
+            clip: true
+        }
+    ];
     return result;
 };
 const initBar = (spec, context)=>{
@@ -762,6 +827,11 @@ const initBar = (spec, context)=>{
     result.xField = encoding[0].x?.[0];
     result.seriesField = encoding[0].group?.[0];
     result.padding = 0;
+    result.region = [
+        {
+            clip: true
+        }
+    ];
     return result;
 };
 const initBarParallel = (spec, context)=>{
@@ -781,6 +851,11 @@ const initBarParallel = (spec, context)=>{
     result.xField = encoding[0].x[0];
     result.seriesField = encoding[0].group[0];
     result.padding = 0;
+    result.region = [
+        {
+            clip: true
+        }
+    ];
     return result;
 };
 const initArea = (spec, context)=>{
@@ -796,6 +871,11 @@ const initArea = (spec, context)=>{
     result.yField = encoding[0].y[0];
     result.seriesField = encoding[0].group[0];
     result.padding = 0;
+    result.region = [
+        {
+            clip: true
+        }
+    ];
     return result;
 };
 const initLine = (spec, context)=>{
@@ -811,6 +891,11 @@ const initLine = (spec, context)=>{
     result.yField = encoding[0].y[0];
     result.seriesField = encoding[0].group[0];
     result.padding = 0;
+    result.region = [
+        {
+            clip: true
+        }
+    ];
     return result;
 };
 const initColumnParallel = (spec, context)=>{
@@ -830,6 +915,11 @@ const initColumnParallel = (spec, context)=>{
     result.yField = encoding[0].y[0];
     result.seriesField = encoding[0].group[0];
     result.padding = 0;
+    result.region = [
+        {
+            clip: true
+        }
+    ];
     return result;
 };
 const initPie = (spec, context)=>{
@@ -846,6 +936,11 @@ const initPie = (spec, context)=>{
     result.categoryField = encoding[0].angle[0];
     result.seriesField = encoding[0].group[0];
     result.padding = 0;
+    result.region = [
+        {
+            clip: true
+        }
+    ];
     return result;
 };
 const initPivot = (spec)=>{
@@ -863,67 +958,328 @@ const initPivot = (spec)=>{
         indicatorsAsCol: false
     };
 };
-const xBand = (spec)=>{
+const xBand = (spec, context)=>{
     const result = {
         ...spec
     };
+    const { advancedVSeed, vseed } = context;
+    const { chartType } = vseed;
+    const config = advancedVSeed.config?.[chartType]?.xAxis;
     if (!result.axes) result.axes = [];
+    if (!config) {
+        result.axes = [
+            ...result.axes,
+            {
+                visible: true,
+                type: 'band',
+                orient: 'bottom'
+            }
+        ];
+        return result;
+    }
+    const { visible = true, label, tick, title, grid, line, labelAutoHide, labelAutoHideGap, labelAutoLimit, labelAutoLimitLength, labelAutoRotate, labelAutoRotateAngleRange } = config;
+    const sampling = !(labelAutoHide || labelAutoRotate || labelAutoLimit);
+    const bandAxis = {
+        visible,
+        type: 'band',
+        orient: 'bottom',
+        maxHeight: labelAutoLimitLength,
+        sampling,
+        hover: true,
+        label: {
+            visible: label?.visible,
+            flush: true,
+            space: 8,
+            style: {
+                maxLineWidth: labelAutoLimitLength,
+                fill: label?.labelColor,
+                angle: label?.labelAngle,
+                fontSize: label?.labelFontSize,
+                fontWeight: label?.labelFontWeight
+            },
+            minGap: labelAutoHideGap,
+            autoHide: labelAutoHide,
+            autoHideMethod: 'greedy',
+            autoHideSeparation: labelAutoHideGap,
+            autoLimit: labelAutoLimit,
+            autoRotate: labelAutoRotate,
+            autoRotateAngle: labelAutoRotateAngleRange,
+            lastVisible: true
+        },
+        title: {
+            visible: title?.visible,
+            text: title?.titleText,
+            style: {
+                fill: title?.titleColor,
+                fontSize: title?.titleFontSize,
+                fontWeight: title?.titleFontWeight
+            }
+        },
+        tick: {
+            visible: tick?.visible,
+            tickSize: tick?.tickSize,
+            inside: tick?.tickInside,
+            style: {
+                stroke: tick?.tickColor
+            }
+        },
+        grid: {
+            visible: grid?.visible,
+            style: {
+                lineWidth: grid?.gridWidth,
+                stroke: grid?.gridColor
+            }
+        },
+        domainLine: {
+            visible: line?.visible,
+            style: {
+                lineWidth: line?.lineWidth,
+                stroke: line?.lineColor
+            }
+        }
+    };
     result.axes = [
         ...result.axes,
-        {
-            visible: true,
-            type: 'band',
-            orient: 'bottom'
-        }
+        bandAxis
     ];
     return result;
 };
-const xLinear = (spec)=>{
+const xLinear = (spec, context)=>{
     const result = {
         ...spec
     };
+    const { advancedVSeed, vseed } = context;
+    const { chartType } = vseed;
+    const config = advancedVSeed.config?.[chartType]?.xAxis;
     if (!result.axes) result.axes = [];
+    if (!config) {
+        result.axes = [
+            ...result.axes,
+            {
+                visible: true,
+                type: 'linear',
+                orient: 'bottom'
+            }
+        ];
+        return result;
+    }
+    const { visible = true, label, tick, title, grid, line, zero, nice, inverse, max, min } = config;
+    const linearAxis = {
+        visible,
+        type: 'linear',
+        orient: 'bottom',
+        nice,
+        zero,
+        inverse,
+        max,
+        min,
+        label: {
+            visible: label?.visible,
+            style: {
+                fill: label?.labelColor,
+                angle: label?.labelAngle,
+                fontSize: label?.labelFontSize,
+                fontWeight: label?.labelFontWeight
+            }
+        },
+        title: {
+            visible: title?.visible,
+            text: title?.titleText,
+            style: {
+                fill: title?.titleColor,
+                fontSize: title?.titleFontSize,
+                fontWeight: title?.titleFontWeight
+            }
+        },
+        tick: {
+            visible: tick?.visible,
+            tickSize: tick?.tickSize,
+            inside: tick?.tickInside,
+            style: {
+                stroke: tick?.tickColor
+            }
+        },
+        grid: {
+            visible: grid?.visible,
+            style: {
+                lineWidth: grid?.gridWidth,
+                stroke: grid?.gridColor
+            }
+        },
+        domainLine: {
+            visible: line?.visible,
+            style: {
+                lineWidth: line?.lineWidth,
+                stroke: line?.lineColor
+            }
+        }
+    };
     result.axes = [
         ...result.axes,
-        {
-            visible: true,
-            type: 'linear',
-            orient: 'bottom',
-            nice: true,
-            zero: true
-        }
+        linearAxis
     ];
     return result;
 };
-const yBand = (spec)=>{
+const yBand = (spec, context)=>{
     const result = {
         ...spec
     };
+    const { advancedVSeed, vseed } = context;
+    const { chartType } = vseed;
+    const config = advancedVSeed.config?.[chartType]?.yAxis;
     if (!result.axes) result.axes = [];
+    if (!config) {
+        result.axes = [
+            ...result.axes,
+            {
+                visible: true,
+                type: 'band',
+                orient: 'left'
+            }
+        ];
+        return result;
+    }
+    const { visible = true, label, tick, title, grid, line, labelAutoHide, labelAutoHideGap, labelAutoLimit, labelAutoLimitLength, labelAutoRotate, labelAutoRotateAngleRange } = config;
+    const sampling = !(labelAutoHide || labelAutoRotate || labelAutoLimit);
+    const bandAxis = {
+        visible,
+        type: 'band',
+        orient: 'left',
+        maxWidth: labelAutoLimitLength,
+        sampling,
+        hover: true,
+        label: {
+            visible: label?.visible,
+            flush: true,
+            containerAlign: 'left',
+            space: 8,
+            style: {
+                maxLineWidth: labelAutoLimitLength,
+                fill: label?.labelColor,
+                angle: label?.labelAngle,
+                fontSize: label?.labelFontSize,
+                fontWeight: label?.labelFontWeight
+            },
+            minGap: labelAutoHideGap,
+            autoHide: labelAutoHide,
+            autoHideMethod: 'greedy',
+            autoHideSeparation: labelAutoHideGap,
+            autoLimit: labelAutoLimit,
+            autoRotate: labelAutoRotate,
+            autoRotateAngle: labelAutoRotateAngleRange,
+            lastVisible: true
+        },
+        title: {
+            visible: title?.visible,
+            text: title?.titleText,
+            style: {
+                fill: title?.titleColor,
+                fontSize: title?.titleFontSize,
+                fontWeight: title?.titleFontWeight
+            }
+        },
+        tick: {
+            visible: tick?.visible,
+            tickSize: tick?.tickSize,
+            inside: tick?.tickInside,
+            style: {
+                stroke: tick?.tickColor
+            }
+        },
+        grid: {
+            visible: grid?.visible,
+            style: {
+                lineWidth: grid?.gridWidth,
+                stroke: grid?.gridColor
+            }
+        },
+        domainLine: {
+            visible: line?.visible,
+            style: {
+                lineWidth: line?.lineWidth,
+                stroke: line?.lineColor
+            }
+        }
+    };
     result.axes = [
         ...result.axes,
-        {
-            visible: true,
-            type: 'band',
-            orient: 'left'
-        }
+        bandAxis
     ];
     return result;
 };
-const yLinear = (spec)=>{
+const yLinear = (spec, context)=>{
     const result = {
         ...spec
     };
+    const { advancedVSeed, vseed } = context;
+    const { chartType } = vseed;
+    const config = advancedVSeed.config?.[chartType]?.yAxis;
     if (!result.axes) result.axes = [];
+    if (!config) {
+        result.axes = [
+            ...result.axes,
+            {
+                visible: true,
+                type: 'linear',
+                orient: 'left'
+            }
+        ];
+        return result;
+    }
+    const { visible = true, label, tick, title, grid, line, zero, nice, inverse, max, min } = config;
+    const linearAxis = {
+        visible,
+        type: 'linear',
+        orient: 'left',
+        nice,
+        zero,
+        inverse,
+        max,
+        min,
+        label: {
+            visible: label?.visible,
+            style: {
+                fill: label?.labelColor,
+                angle: label?.labelAngle,
+                fontSize: label?.labelFontSize,
+                fontWeight: label?.labelFontWeight
+            }
+        },
+        title: {
+            visible: title?.visible,
+            text: title?.titleText,
+            style: {
+                fill: title?.titleColor,
+                fontSize: title?.titleFontSize,
+                fontWeight: title?.titleFontWeight
+            }
+        },
+        tick: {
+            visible: tick?.visible,
+            tickSize: tick?.tickSize,
+            inside: tick?.tickInside,
+            style: {
+                stroke: tick?.tickColor
+            }
+        },
+        grid: {
+            visible: grid?.visible,
+            style: {
+                lineWidth: grid?.gridWidth,
+                stroke: grid?.gridColor
+            }
+        },
+        domainLine: {
+            visible: line?.visible,
+            style: {
+                lineWidth: line?.lineWidth,
+                stroke: line?.lineColor
+            }
+        }
+    };
     result.axes = [
         ...result.axes,
-        {
-            visible: true,
-            type: 'linear',
-            orient: 'left',
-            nice: true,
-            zero: true
-        }
+        linearAxis
     ];
     return result;
 };
@@ -1291,7 +1647,7 @@ const pivotRowDimensions = (spec, context)=>{
         rows: rows
     };
 };
-const line = [
+const line_line = [
     initLine,
     color_color,
     background_backgroundColor,
@@ -1322,7 +1678,7 @@ const pivotLine = [
     pivotLegend
 ];
 const lineSpecPipeline = [
-    pivotAdapter_pivotAdapter(line, pivotLine)
+    pivotAdapter_pivotAdapter(line_line, pivotLine)
 ];
 const column = [
     initColumn,
@@ -1736,7 +2092,84 @@ const registerPie = ()=>{
     Builder._advancedPipelineMap.pie = pieAdvancedPipeline;
     Builder._specPipelineMap.pie = pieSpecPipeline;
 };
-const darkTheme = ()=>({
+const darkTheme = ()=>{
+    const linearAxis = {
+        nice: true,
+        zero: true,
+        label: {
+            visible: true,
+            labelAngle: 0,
+            labelColor: '#E2E3E6',
+            labelFontSize: 12,
+            labelFontWeight: 400
+        },
+        title: {
+            visible: false,
+            titleText: '',
+            titleColor: '#FDFDFD',
+            titleFontSize: 12,
+            titleFontWeight: 400
+        },
+        grid: {
+            visible: true,
+            gridColor: '#404349',
+            gridWidth: 0.5
+        },
+        tick: {
+            visible: false,
+            tickInside: false,
+            tickSize: 4,
+            tickColor: '#4B4F54'
+        },
+        line: {
+            visible: false,
+            lineColor: '#4B4F54',
+            lineWidth: 1
+        }
+    };
+    const bandAxis = {
+        labelAutoHide: true,
+        labelAutoHideGap: 4,
+        labelAutoLimit: true,
+        labelAutoLimitLength: 100,
+        labelAutoRotate: true,
+        labelAutoRotateAngleRange: [
+            0,
+            -45,
+            -90
+        ],
+        label: {
+            visible: true,
+            labelAngle: 0,
+            labelColor: '#E2E3E6',
+            labelFontSize: 12,
+            labelFontWeight: 400
+        },
+        title: {
+            visible: false,
+            titleText: '',
+            titleColor: '#FDFDFD',
+            titleFontSize: 12,
+            titleFontWeight: 400
+        },
+        grid: {
+            visible: false,
+            gridColor: '#404349',
+            gridWidth: 0.5
+        },
+        tick: {
+            visible: false,
+            tickInside: false,
+            tickSize: 4,
+            tickColor: '#4B4F54'
+        },
+        line: {
+            visible: true,
+            lineColor: '#4B4F54',
+            lineWidth: 1
+        }
+    };
+    return {
         baseConfig: {
             vtable: {
                 backgroundColor: '#141414'
@@ -1767,9 +2200,139 @@ const darkTheme = ()=>({
                     enable: true
                 }
             }
+        },
+        config: {
+            line: {
+                xAxis: bandAxis,
+                yAxis: linearAxis
+            },
+            column: {
+                xAxis: bandAxis,
+                yAxis: linearAxis
+            },
+            columnParallel: {
+                xAxis: bandAxis,
+                yAxis: linearAxis
+            },
+            columnPercent: {
+                xAxis: bandAxis,
+                yAxis: linearAxis
+            },
+            bar: {
+                xAxis: linearAxis,
+                yAxis: bandAxis
+            },
+            barParallel: {
+                xAxis: linearAxis,
+                yAxis: bandAxis
+            },
+            barPercent: {
+                xAxis: linearAxis,
+                yAxis: bandAxis
+            },
+            area: {
+                xAxis: bandAxis,
+                yAxis: linearAxis
+            },
+            areaPercent: {
+                xAxis: bandAxis,
+                yAxis: linearAxis
+            }
         }
-    });
-const lightTheme = ()=>({
+    };
+};
+const lightTheme = ()=>{
+    const linearAxis = {
+        nice: true,
+        zero: true,
+        inverse: false,
+        label: {
+            visible: true,
+            labelAngle: 0,
+            labelColor: '#797B85',
+            labelFontSize: 12,
+            labelFontWeight: 400
+        },
+        title: {
+            visible: false,
+            titleText: '',
+            titleColor: '#646A73',
+            titleFontSize: 12,
+            titleFontWeight: 400
+        },
+        grid: {
+            visible: true,
+            gridColor: 'rgba(54, 65, 89, 0.15)',
+            gridWidth: 0.5
+        },
+        tick: {
+            visible: false,
+            tickInside: false,
+            tickSize: 4,
+            tickColor: 'rgba(54, 65, 89, 0.30)'
+        },
+        line: {
+            visible: false,
+            lineColor: 'rgba(54, 65, 89, 0.30)',
+            lineWidth: 1
+        }
+    };
+    const bandAxis = {
+        labelAutoHide: true,
+        labelAutoHideGap: 4,
+        labelAutoLimit: true,
+        labelAutoLimitLength: 100,
+        labelAutoRotate: true,
+        labelAutoRotateAngleRange: [
+            0,
+            -45,
+            -90
+        ],
+        label: {
+            visible: true,
+            labelAngle: 0,
+            labelColor: '#797B85',
+            labelFontSize: 12,
+            labelFontWeight: 400
+        },
+        title: {
+            visible: false,
+            titleText: '',
+            titleColor: '#646A73',
+            titleFontSize: 12,
+            titleFontWeight: 400
+        },
+        grid: {
+            visible: false,
+            gridColor: 'rgba(54, 65, 89, 0.15)',
+            gridWidth: 0.5
+        },
+        tick: {
+            visible: false,
+            tickInside: false,
+            tickSize: 4,
+            tickColor: 'rgba(54, 65, 89, 0.30)'
+        },
+        line: {
+            visible: true,
+            lineColor: 'rgba(54, 65, 89, 0.30)',
+            lineWidth: 1
+        }
+    };
+    const barBandAxis = {
+        ...bandAxis,
+        labelAutoHide: false,
+        labelAutoHideGap: 1,
+        labelAutoLimit: false,
+        labelAutoLimitLength: void 0,
+        labelAutoRotate: false,
+        labelAutoRotateAngleRange: [
+            0,
+            -45,
+            -90
+        ]
+    };
+    return {
         baseConfig: {
             vtable: {
                 backgroundColor: '#ffffff'
@@ -1800,8 +2363,47 @@ const lightTheme = ()=>({
                     enable: true
                 }
             }
+        },
+        config: {
+            line: {
+                xAxis: bandAxis,
+                yAxis: linearAxis
+            },
+            column: {
+                xAxis: bandAxis,
+                yAxis: linearAxis
+            },
+            columnParallel: {
+                xAxis: bandAxis,
+                yAxis: linearAxis
+            },
+            columnPercent: {
+                xAxis: bandAxis,
+                yAxis: linearAxis
+            },
+            bar: {
+                xAxis: linearAxis,
+                yAxis: barBandAxis
+            },
+            barParallel: {
+                xAxis: linearAxis,
+                yAxis: barBandAxis
+            },
+            barPercent: {
+                xAxis: linearAxis,
+                yAxis: barBandAxis
+            },
+            area: {
+                xAxis: bandAxis,
+                yAxis: linearAxis
+            },
+            areaPercent: {
+                xAxis: bandAxis,
+                yAxis: linearAxis
+            }
         }
-    });
+    };
+};
 const registerCustomTheme = (key, themeConfig)=>{
     Builder._themeMap[key] = themeConfig;
 };
@@ -1940,11 +2542,187 @@ const zBaseConfig = z.object({
     vchart: zVChartBaseConfig.optional(),
     vtable: zVTableBaseConfig.optional()
 });
+const zAxis = z.object({
+    visible: z.boolean().default(true).optional(),
+    min: z.number().optional(),
+    max: z.number().optional(),
+    nice: z.boolean().default(true).optional(),
+    zero: z.boolean().default(true).optional(),
+    inverse: z.boolean().default(false).optional(),
+    labelAutoHide: z.boolean().default(true).optional(),
+    labelAutoHideGap: z.number().default(4).optional(),
+    labelAutoRotate: z.boolean().default(true).optional(),
+    labelAutoRotateAngleRange: z.array(z.number()).default([
+        0,
+        -45,
+        -90
+    ]).optional(),
+    labelAutoLimit: z.boolean().default(true).optional(),
+    labelAutoLimitLength: z.number().default(100).optional(),
+    label: z.object({
+        visible: z.boolean().default(true).optional(),
+        labelColor: z.string().default('#797B85').optional(),
+        labelFontSize: z.number().default(12).optional(),
+        labelFontWeight: z.number().default(400).optional(),
+        labelAngle: z.number().default(0).optional()
+    }).optional(),
+    line: z.object({
+        visible: z.boolean().default(true).optional(),
+        lineColor: z.string().default('rgba(54, 65, 89, 0.30)').optional(),
+        lineWidth: z.number().default(1).optional()
+    }).optional(),
+    tick: z.object({
+        visible: z.boolean().default(true).optional(),
+        tickInside: z.boolean().default(false).optional(),
+        tickColor: z.string().default('rgba(54, 65, 89, 0.30)').optional(),
+        tickSize: z.number().default(4).optional()
+    }).optional(),
+    title: z.object({
+        visible: z.boolean().default(false).optional(),
+        titleText: z.string().default('').optional(),
+        titleColor: z.string().default('#646A73').optional(),
+        titleFontSize: z.number().default(12).optional(),
+        titleFontWeight: z.number().default(400).optional()
+    }).optional(),
+    grid: z.object({
+        visible: z.boolean().default(false).optional(),
+        gridColor: z.string().default('rgba(54, 65, 89, 0.15)').optional(),
+        gridWidth: z.number().default(0.5).optional()
+    }).optional()
+});
+const zXBandAxis = z.object({
+    visible: z.boolean().default(true).optional(),
+    labelAutoHide: z.boolean().default(true).optional(),
+    labelAutoHideGap: z.number().default(0).optional(),
+    labelAutoRotate: z.boolean().default(true).optional(),
+    labelAutoRotateAngleRange: z.array(z.number()).default([
+        0,
+        -45,
+        -90
+    ]).optional(),
+    labelAutoLimit: z.boolean().default(true).optional(),
+    labelAutoLimitLength: z.number().default(100).optional(),
+    label: z.object({
+        visible: z.boolean().default(true).optional(),
+        labelColor: z.string().default('#797B85').optional(),
+        labelFontSize: z.number().default(12).optional(),
+        labelFontWeight: z.number().default(400).optional(),
+        labelAngle: z.number().default(0).optional()
+    }).optional(),
+    line: z.object({
+        visible: z.boolean().default(true).optional(),
+        lineColor: z.string().default('rgba(54, 65, 89, 0.30)').optional(),
+        lineWidth: z.number().default(1).optional()
+    }).optional(),
+    tick: z.object({
+        visible: z.boolean().default(true).optional(),
+        tickInside: z.boolean().default(false).optional(),
+        tickColor: z.string().default('rgba(54, 65, 89, 0.30)').optional(),
+        tickSize: z.number().default(4).optional()
+    }).optional(),
+    title: z.object({
+        visible: z.boolean().default(false).optional(),
+        titleText: z.string().default('').optional(),
+        titleColor: z.string().default('#646A73').optional(),
+        titleFontSize: z.number().default(12).optional(),
+        titleFontWeight: z.number().default(400).optional()
+    }).optional(),
+    grid: z.object({
+        visible: z.boolean().default(false).optional(),
+        gridColor: z.string().default('rgba(54, 65, 89, 0.15)').optional(),
+        gridWidth: z.number().default(0.5).optional()
+    }).optional()
+});
+const zYBandAxis = zXBandAxis;
+const zXLinearAxis = z.object({
+    visible: z.boolean().default(true).optional(),
+    min: z.number().optional(),
+    max: z.number().optional(),
+    nice: z.boolean().default(true).optional(),
+    zero: z.boolean().default(true).optional(),
+    inverse: z.boolean().default(false).optional(),
+    label: z.object({
+        visible: z.boolean().default(true).optional(),
+        labelColor: z.string().default('#797B85').optional(),
+        labelFontSize: z.number().default(12).optional(),
+        labelFontWeight: z.number().default(400).optional(),
+        labelAngle: z.number().default(0).optional()
+    }).optional(),
+    line: z.object({
+        visible: z.boolean().default(true).optional(),
+        lineColor: z.string().default('rgba(54, 65, 89, 0.30)').optional(),
+        lineWidth: z.number().default(1).optional()
+    }).optional(),
+    tick: z.object({
+        visible: z.boolean().default(true).optional(),
+        tickInside: z.boolean().default(false).optional(),
+        tickColor: z.string().default('rgba(54, 65, 89, 0.30)').optional(),
+        tickSize: z.number().default(4).optional()
+    }).optional(),
+    title: z.object({
+        visible: z.boolean().default(false).optional(),
+        titleText: z.string().default('').optional(),
+        titleColor: z.string().default('#646A73').optional(),
+        titleFontSize: z.number().default(12).optional(),
+        titleFontWeight: z.number().default(400).optional()
+    }).optional(),
+    grid: z.object({
+        visible: z.boolean().default(false).optional(),
+        gridColor: z.string().default('rgba(54, 65, 89, 0.15)').optional(),
+        gridWidth: z.number().default(0.5).optional()
+    }).optional()
+});
+const zYLinearAxis = zXLinearAxis;
+const zConfig = z.object({
+    line: z.object({
+        xAxis: zXBandAxis,
+        yAxis: zYLinearAxis
+    }).optional(),
+    column: z.object({
+        xAxis: zXBandAxis,
+        yAxis: zYLinearAxis
+    }).optional(),
+    columnParallel: z.object({
+        xAxis: zXBandAxis,
+        yAxis: zYLinearAxis
+    }).optional(),
+    columnPercent: z.object({
+        xAxis: zXBandAxis,
+        yAxis: zYLinearAxis
+    }).optional(),
+    bar: z.object({
+        xAxis: zXLinearAxis,
+        yAxis: zYBandAxis
+    }).optional(),
+    barParallel: z.object({
+        xAxis: zXLinearAxis,
+        yAxis: zYBandAxis
+    }).optional(),
+    barPercent: z.object({
+        xAxis: zXLinearAxis,
+        yAxis: zYBandAxis
+    }).optional(),
+    area: z.object({
+        xAxis: zXBandAxis,
+        yAxis: zYLinearAxis
+    }).optional(),
+    areaPercent: z.object({
+        xAxis: zXBandAxis,
+        yAxis: zYLinearAxis
+    }).optional(),
+    pie: z.object({}).optional(),
+    donut: z.object({}).optional(),
+    rose: z.object({}).optional(),
+    dualAxis: z.object({}).optional(),
+    table: z.object({}).optional(),
+    pivotTable: z.object({}).optional()
+});
 const zCustomThemeConfig = z.object({
-    baseConfig: zBaseConfig.optional()
+    baseConfig: zBaseConfig.optional(),
+    config: zConfig.optional()
 });
 const zCustomTheme = z.record(z.string(), zCustomThemeConfig).optional();
 const zTheme = z.string();
-export { Builder, areaAdvancedPipeline, areaPercentAdvancedPipeline, areaPercentSpecPipeline, areaSpecPipeline, barAdvancedPipeline, barParallelAdvancedPipeline, barParallelSpecPipeline, barPercentAdvancedPipeline, barPercentSpecPipeline, barSpecPipeline, columnAdvancedPipeline, columnParallelAdvancedPipeline, columnParallelSpecPipeline, columnPercentAdvancedPipeline, columnPercentSpecPipeline, columnSpecPipeline, darkTheme, dataReshapeFor1D1M, dataReshapeFor2D1M, execPipeline, foldMeasures, isPivotChart, isVChart, isVTable, lightTheme, lineAdvancedPipeline, lineSpecPipeline, pieAdvancedPipeline, pieSpecPipeline, all_registerAll as registerAll, registerArea, registerAreaPercent, registerBar, registerBarParallel, registerBarPercent, registerColumn, registerColumnParallel, registerColumnPercent, registerCustomTheme, registerDarkTheme, registerLightTheme, registerLine, unfoldDimensions, zBackgroundColor, zBaseConfig, zChartType, zColor, zCustomTheme, zCustomThemeConfig, zDataset, zDatasetReshapeInfo, zDatum, zDimension, zDimensions, zEncoding, zFoldInfo, zLabel, zLegend, zMeasure, zMeasureGroup, zMeasures, zTheme, zTooltip, zUnfoldInfo };
+export { Builder, FoldMeasureId, FoldMeasureName, FoldMeasureValue, Separator, UnfoldDimensionGroup, areaAdvancedPipeline, areaPercentAdvancedPipeline, areaPercentSpecPipeline, areaSpecPipeline, barAdvancedPipeline, barParallelAdvancedPipeline, barParallelSpecPipeline, barPercentAdvancedPipeline, barPercentSpecPipeline, barSpecPipeline, columnAdvancedPipeline, columnParallelAdvancedPipeline, columnParallelSpecPipeline, columnPercentAdvancedPipeline, columnPercentSpecPipeline, columnSpecPipeline, darkTheme, dataReshapeFor1D1M, dataReshapeFor2D1M, execPipeline, foldMeasures, isPivotChart, isVChart, isVTable, lightTheme, lineAdvancedPipeline, lineSpecPipeline, pieAdvancedPipeline, pieSpecPipeline, all_registerAll as registerAll, registerArea, registerAreaPercent, registerBar, registerBarParallel, registerBarPercent, registerColumn, registerColumnParallel, registerColumnPercent, registerCustomTheme, registerDarkTheme, registerLightTheme, registerLine, unfoldDimensions, zAxis, zBackgroundColor, zBaseConfig, zChartType, zColor, zConfig, zCustomTheme, zCustomThemeConfig, zDataset, zDatasetReshapeInfo, zDatum, zDimension, zDimensions, zEncoding, zFoldInfo, zLabel, zLegend, zMeasure, zMeasureGroup, zMeasures, zTheme, zTooltip, zUnfoldInfo, zXBandAxis, zXLinearAxis, zYBandAxis, zYLinearAxis };
 
 //# sourceMappingURL=index.js.map