@visactor/vseed 0.0.7 → 0.0.9

package/dist/index.js

@@ -1,10 +1,134 @@
-import { clone as external_remeda_clone, mergeDeep as external_remeda_mergeDeep, pick as external_remeda_pick, unique } from "remeda";
+import { clone as external_remeda_clone, mergeDeep as external_remeda_mergeDeep, omit, 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__';
 const UnfoldDimensionGroup = '__DimGroup__';
 const Separator = '-';
+const ORIGINAL_DATA = '__OriginalData__';
 const unfoldDimensions = (dataset, dimensions, measures, unfoldStartIndex = 0, foldGroupName = UnfoldDimensionGroup, dimensionsSeparator = Separator)=>{
     if (unfoldStartIndex < 0 || unfoldStartIndex >= dimensions.length) throw new Error('unfoldStartIndex is out of range');
     const dimensionsToBeUnfolded = dimensions.slice(unfoldStartIndex);
@@ -42,12 +166,15 @@ const foldMeasures = (dataset, measures, measureId = FoldMeasureId, measureName
     };
     const result = new Array(dataset.length * measures.length);
     let index = 0;
+    const ids = measures.map((d)=>d.id);
     for(let i = 0; i < dataset.length; i++)for(let j = 0; j < measures.length; j++){
-        const datum = {
+        const datum = omit({
             ...dataset[i]
-        };
+        }, ids);
+        datum[ORIGINAL_DATA] = dataset[i];
         const measure = measures[j];
         const { id, alias } = measure;
+        datum[id] = dataset[i][id];
         datum[measureId] = id;
         datum[measureName] = alias;
         datum[measureValue] = dataset[i][id];
@@ -283,10 +410,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,
@@ -310,15 +437,16 @@ const encodingXY = (advancedVSeed)=>{
     if (!datasetReshapeInfo || !dimensions) return result;
     const encoding = datasetReshapeInfo.reduce((prev, cur)=>{
         const { foldInfo, unfoldInfo } = cur;
-        const isSingleDimension = 0 === dimensions.length;
+        const isSingleDimension = 1 === dimensions.length;
+        const isZeroDimension = 0 === dimensions.length;
         const x = [
-            isSingleDimension ? foldInfo.measureName : dimensions[0].id
+            isZeroDimension ? foldInfo.measureName : dimensions[0].id
         ];
         const y = [
             foldInfo.measureValue
         ];
         const group = [
-            isSingleDimension ? foldInfo.measureName : unfoldInfo.groupName
+            isSingleDimension || isZeroDimension ? foldInfo.measureName : unfoldInfo.groupName
         ];
         const color = [
             foldInfo.measureName
@@ -346,15 +474,16 @@ const encodingYX = (advancedVSeed)=>{
     if (!datasetReshapeInfo || !dimensions) return result;
     const encoding = datasetReshapeInfo.reduce((prev, cur)=>{
         const { foldInfo, unfoldInfo } = cur;
-        const isSingleDimension = 0 === dimensions.length;
+        const isZeroDimension = 0 === dimensions.length;
+        const isSingleDimension = 1 === dimensions.length;
         const y = [
-            isSingleDimension ? foldInfo.measureName : dimensions[0].id
+            isZeroDimension ? foldInfo.measureName : dimensions[0].id
         ];
         const x = [
             foldInfo.measureValue
         ];
         const group = [
-            isSingleDimension ? foldInfo.measureName : unfoldInfo.groupName
+            isSingleDimension || isZeroDimension ? foldInfo.measureName : unfoldInfo.groupName
         ];
         const color = [
             foldInfo.measureName
@@ -409,162 +538,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)=>{
@@ -573,6 +629,16 @@ const pivotAdapter = (pipeline, pivotPipeline)=>(advancedVSeed, context)=>{
         if (usePivotChart) return execPipeline(pivotPipeline, context, advancedVSeed);
         return execPipeline(pipeline, context, advancedVSeed);
     };
+const markStyle_markStyle = (advancedVSeed, context)=>{
+    const { vseed } = context;
+    const markStyle = external_remeda_pick(vseed, [
+        'barStyle'
+    ]);
+    return {
+        ...advancedVSeed,
+        markStyle
+    };
+};
 const lineAdvancedPipeline = [
     initAdvancedVSeed,
     autoMeasures,
@@ -584,6 +650,7 @@ const lineAdvancedPipeline = [
     ]),
     encodingXY,
     vchartBaseConfig,
+    lineConfig,
     vchartTheme
 ];
 const barAdvancedPipeline = [
@@ -596,8 +663,10 @@ const barAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingYX,
+    barConfig,
     vchartBaseConfig,
-    vchartTheme
+    vchartTheme,
+    markStyle_markStyle
 ];
 const barParallelAdvancedPipeline = [
     initAdvancedVSeed,
@@ -609,8 +678,10 @@ const barParallelAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingYX,
+    barParallelConfig,
     vchartBaseConfig,
-    vchartTheme
+    vchartTheme,
+    markStyle_markStyle
 ];
 const barPercentAdvancedPipeline = [
     initAdvancedVSeed,
@@ -622,8 +693,10 @@ const barPercentAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingYX,
+    barPercentConfig,
     vchartBaseConfig,
-    vchartTheme
+    vchartTheme,
+    markStyle_markStyle
 ];
 const columnAdvancedPipeline = [
     initAdvancedVSeed,
@@ -635,8 +708,10 @@ const columnAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingXY,
+    columnConfig,
     vchartBaseConfig,
-    vchartTheme
+    vchartTheme,
+    markStyle_markStyle
 ];
 const columnParallelAdvancedPipeline = [
     initAdvancedVSeed,
@@ -648,8 +723,10 @@ const columnParallelAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingXY,
+    columnParallelConfig,
     vchartBaseConfig,
-    vchartTheme
+    vchartTheme,
+    markStyle_markStyle
 ];
 const columnPercentAdvancedPipeline = [
     initAdvancedVSeed,
@@ -661,8 +738,10 @@ const columnPercentAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingXY,
+    columnPercentConfig,
     vchartBaseConfig,
-    vchartTheme
+    vchartTheme,
+    markStyle_markStyle
 ];
 const areaAdvancedPipeline = [
     initAdvancedVSeed,
@@ -674,6 +753,7 @@ const areaAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingXY,
+    areaConfig,
     vchartBaseConfig,
     vchartTheme
 ];
@@ -687,6 +767,7 @@ const areaPercentAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingXY,
+    areaPercentConfig,
     vchartBaseConfig,
     vchartTheme
 ];
@@ -700,6 +781,7 @@ const pieAdvancedPipeline = [
         pivotReshapeTo1D1M
     ]),
     encodingPolar,
+    pieConfig,
     vchartBaseConfig,
     vchartTheme
 ];
@@ -747,6 +829,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 +849,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 +873,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 +893,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 +913,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 +937,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 +958,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 +980,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;
 };
@@ -934,11 +1312,11 @@ const percent = (spec, context)=>{
     result.percent = true;
     return result;
 };
-const stack = (spec, context)=>{
+const stackInverse = (spec)=>{
     const result = {
         ...spec
     };
-    result.stack = true;
+    result.stackInverse = true;
     return result;
 };
 const background_backgroundColor = (spec, context)=>{
@@ -984,24 +1362,103 @@ const label_label = (spec, context)=>{
     };
     return result;
 };
-const defaultLegend = {
-    enable: true
-};
-const legend_legend = (spec, context)=>{
+const discreteLegend = (spec, context)=>{
     const result = {
         ...spec
     };
     const { advancedVSeed } = context;
     const baseConfig = advancedVSeed.baseConfig.vchart;
     if (!baseConfig || !baseConfig.legend) return result;
-    const { legend = defaultLegend } = baseConfig;
-    const { enable } = legend;
+    const { legend } = baseConfig;
+    const { enable, position = 'bottom', labelFontColor, labelFontSize = 12, labelFontWeight, maxSize, border, shapeType = 'rectRound' } = legend || {};
+    const orient = [
+        'bottom',
+        'bottomLeft',
+        'bottomRight',
+        'bl',
+        'br'
+    ].includes(position) ? 'bottom' : [
+        'top',
+        'topLeft',
+        'topRight',
+        'tl',
+        'tr'
+    ].includes(position) ? 'top' : [
+        'left',
+        'leftTop',
+        'leftBottom',
+        'lt',
+        'lb'
+    ].includes(position) ? 'left' : 'right';
+    const legendPosition = [
+        'topLeft',
+        'bottomLeft',
+        'leftTop',
+        'rightTop',
+        'lt',
+        'rt',
+        'tl',
+        'bl'
+    ].includes(position) ? 'start' : [
+        'topRight',
+        'bottomRight',
+        'leftBottom',
+        'rightBottom',
+        'lb',
+        'rb',
+        'rt',
+        'br'
+    ].includes(position) ? 'end' : 'middle';
     result.legends = {
-        visible: enable
+        type: 'discrete',
+        visible: enable,
+        maxCol: maxSize,
+        maxRow: maxSize,
+        autoPage: true,
+        orient,
+        position: legendPosition,
+        data: border ? (items)=>items.map((item)=>{
+                item.shape.outerBorder = {
+                    stroke: item.shape.fill,
+                    distance: 3,
+                    lineWidth: 1
+                };
+                return item;
+            }) : void 0,
+        item: {
+            focus: true,
+            focusIconStyle: {
+                size: labelFontSize + 2,
+                fill: labelFontColor,
+                fontWeight: labelFontWeight
+            },
+            shape: {
+                space: border ? 6 : 4,
+                style: {
+                    symbolType: shapeType,
+                    size: border ? 8 : 10
+                }
+            },
+            label: {
+                style: {
+                    fontSize: labelFontSize,
+                    fill: labelFontColor,
+                    fontWeight: labelFontWeight
+                }
+            },
+            background: {
+                state: {
+                    selectedHover: {
+                        fill: labelFontColor,
+                        fillOpacity: 0.05
+                    }
+                }
+            }
+        }
     };
     return result;
 };
-const pivotLegend = (spec, context)=>{
+const pivotDiscreteLegend = (spec, context)=>{
     const result = {
         ...spec
     };
@@ -1011,38 +1468,94 @@ const pivotLegend = (spec, context)=>{
     const { datasetReshapeInfo } = advancedVSeed;
     const colorItems = unique(datasetReshapeInfo.flatMap((d)=>d.unfoldInfo.colorItems));
     const { legend, color } = baseConfig;
-    const { enable } = legend;
     const { colorScheme } = color;
+    const { enable, position = 'bottom', labelFontColor, labelFontSize = 12, labelFontWeight, maxSize, border, shapeType = 'rectRound' } = legend || {};
+    const orient = [
+        'bottom',
+        'bottomLeft',
+        'bottomRight',
+        'bl',
+        'br'
+    ].includes(position) ? 'bottom' : [
+        'top',
+        'topLeft',
+        'topRight',
+        'tl',
+        'tr'
+    ].includes(position) ? 'top' : [
+        'left',
+        'leftTop',
+        'leftBottom',
+        'lt',
+        'lb'
+    ].includes(position) ? 'left' : 'right';
+    const legendPosition = [
+        'topLeft',
+        'bottomLeft',
+        'leftTop',
+        'rightTop',
+        'lt',
+        'rt',
+        'tl',
+        'bl'
+    ].includes(position) ? 'start' : [
+        'topRight',
+        'bottomRight',
+        'leftBottom',
+        'rightBottom',
+        'lb',
+        'rb',
+        'rt',
+        'br'
+    ].includes(position) ? 'end' : 'middle';
     const legends = {
         visible: enable,
-        alignSelf: 'end',
         type: 'discrete',
-        position: 'middle',
+        orient,
+        position: legendPosition,
+        maxCol: maxSize,
+        maxRow: maxSize,
         data: colorItems.map((d, index)=>({
                 label: d,
                 shape: {
-                    symbolType: 'square',
+                    outerBorder: border ? {
+                        stroke: colorScheme[index],
+                        distance: 3,
+                        lineWidth: 1
+                    } : void 0,
                     fill: colorScheme[index]
                 }
             })),
         item: {
+            focus: true,
+            focusIconStyle: {
+                size: labelFontSize + 2,
+                fill: labelFontColor,
+                fontWeight: labelFontWeight
+            },
+            shape: {
+                space: border ? 6 : 4,
+                style: {
+                    symbolType: shapeType,
+                    size: border ? 8 : 10
+                }
+            },
+            label: {
+                style: {
+                    fontSize: labelFontSize,
+                    fill: labelFontColor,
+                    fontWeight: labelFontWeight
+                }
+            },
             background: {
-                visible: true,
                 state: {
                     selectedHover: {
-                        fill: '#000000',
+                        fill: labelFontColor,
                         fillOpacity: 0.05
                     }
                 }
-            },
-            label: {
-                style: {
-                    fontSize: 12,
-                    fill: '#6F6F6F'
-                }
             }
-        },
-        orient: 'bottom'
+        }
     };
     return {
         ...result,
@@ -1291,7 +1804,123 @@ const pivotRowDimensions = (spec, context)=>{
         rows: rows
     };
 };
-const line = [
+const selector_selector = (datum, selector)=>{
+    if (!selector) return true;
+    const selectors = Array.isArray(selector) ? selector : [
+        selector
+    ];
+    for (const selector of selectors)if (isValueSelector(selector)) {
+        if (Object.values(datum).find((v)=>v === selector)) return true;
+    } else if (isMeasureSelector(selector)) {
+        const selectorValueArr = Array.isArray(selector.value) ? selector.value : [
+            selector.value
+        ];
+        switch(selector.operator){
+            case '=':
+                if (datum[selector.field] === selectorValueArr[0]) return true;
+                break;
+            case '!=':
+                if (datum[selector.field] !== selectorValueArr[0]) return true;
+                break;
+            case '>':
+                if (datum[selector.field] > selectorValueArr[0]) return true;
+                break;
+            case '<':
+                if (datum[selector.field] < selectorValueArr[0]) return true;
+                break;
+            case '>=':
+                if (datum[selector.field] >= selectorValueArr[0]) return true;
+                break;
+            case '<=':
+                if (datum[selector.field] <= selectorValueArr[0]) return true;
+                break;
+            case 'between':
+                if (Array.isArray(selector.value) && datum[selector.field] >= selectorValueArr[0] && datum[selector.field] <= selectorValueArr[1]) return true;
+                break;
+            default:
+                break;
+        }
+    } else if (isDimensionSelector(selector)) {
+        const selectorValueArr = Array.isArray(selector.value) ? selector.value : [
+            selector.value
+        ];
+        if ('in' === selector.operator && selectorValueArr.includes(datum[selector.field])) return true;
+        if ('not in' === selector.operator && !selectorValueArr.includes(datum[selector.field])) return true;
+    } else if (isPartialDatumSelector(selector)) {
+        if (Object.keys(selector).every((key)=>datum[key] === selector[key])) return true;
+    }
+    return false;
+};
+const isValueSelector = (selector)=>'string' == typeof selector || 'number' == typeof selector;
+const isPartialDatumSelector = (selector)=>'object' == typeof selector && null !== selector;
+const isMeasureSelector = (selector)=>'object' == typeof selector && null !== selector && 'field' in selector && 'operator' in selector && 'value' in selector && [
+        '=',
+        '!=',
+        '>',
+        '<',
+        '>=',
+        '<=',
+        'between'
+    ].includes(selector.operator);
+const isDimensionSelector = (selector)=>'object' == typeof selector && null !== selector && 'field' in selector && 'operator' in selector && 'value' in selector && [
+        'in',
+        'not in'
+    ].includes(selector.operator);
+const barStyle_barStyle = (spec, context)=>{
+    const { advancedVSeed } = context;
+    const { markStyle, encoding } = advancedVSeed;
+    const { barStyle } = markStyle;
+    if (!barStyle) return spec;
+    const result = {
+        ...spec
+    };
+    const { selector: barSelector, barBorderColor, barBorderStyle, barBorderWidth, barColor, barColorOpacity, barRadius } = barStyle;
+    return {
+        ...result,
+        bar: {
+            style: {
+                fill: (datum, context)=>{
+                    if (selector_selector(datum, barSelector)) return barColor;
+                    return context.seriesColor(datum[encoding[0]?.group?.[0]]);
+                },
+                fillOpacity: (datum)=>{
+                    if (selector_selector(datum, barSelector)) return barColorOpacity;
+                    return 1;
+                },
+                stroke: (datum, context)=>{
+                    if (selector_selector(datum, barSelector)) return barBorderColor;
+                    return context.seriesColor(datum[encoding[0]?.group?.[0]]);
+                },
+                lineWidth: (datum)=>{
+                    if (selector_selector(datum, barSelector)) return barBorderWidth;
+                    return 0;
+                },
+                lineDash: (datum)=>{
+                    if (selector_selector(datum, barSelector)) {
+                        if ('solid' === barBorderStyle) ;
+                        else if ('dashed' === barBorderStyle) return [
+                            5,
+                            5
+                        ];
+                        else if ('dotted' === barBorderStyle) return [
+                            1,
+                            5
+                        ];
+                    }
+                    return [
+                        0,
+                        0
+                    ];
+                },
+                cornerRadius: (datum)=>{
+                    if (selector_selector(datum, barSelector)) return barRadius;
+                    return 0;
+                }
+            }
+        }
+    };
+};
+const line_line = [
     initLine,
     color_color,
     background_backgroundColor,
@@ -1300,7 +1929,7 @@ const line = [
     yLinear,
     label_label,
     tooltip_tooltip,
-    legend_legend
+    discreteLegend
 ];
 const pivotLine = [
     initPivot,
@@ -1319,13 +1948,14 @@ const pivotLine = [
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotLegend
+    pivotDiscreteLegend
 ];
 const lineSpecPipeline = [
-    pivotAdapter_pivotAdapter(line, pivotLine)
+    pivotAdapter_pivotAdapter(line_line, pivotLine)
 ];
 const column = [
     initColumn,
+    stackInverse,
     color_color,
     background_backgroundColor,
     dataset_dataset,
@@ -1333,7 +1963,8 @@ const column = [
     yLinear,
     label_label,
     tooltip_tooltip,
-    legend_legend
+    discreteLegend,
+    barStyle_barStyle
 ];
 const pivotColumn = [
     initPivot,
@@ -1342,17 +1973,19 @@ const pivotColumn = [
     datasetPivot,
     pivotIndicators([
         initColumn,
+        stackInverse,
         color_color,
         background_backgroundColor,
         datasetPivotPlaceholder,
         xBand,
         yLinear,
         label_label,
-        tooltip_tooltip
+        tooltip_tooltip,
+        barStyle_barStyle
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotLegend
+    pivotDiscreteLegend
 ];
 const columnSpecPipeline = [
     pivotAdapter_pivotAdapter(column, pivotColumn)
@@ -1366,7 +1999,8 @@ const columnParallel = [
     yLinear,
     label_label,
     tooltip_tooltip,
-    legend_legend
+    discreteLegend,
+    barStyle_barStyle
 ];
 const pivotColumnParallel = [
     initPivot,
@@ -1381,17 +2015,19 @@ const pivotColumnParallel = [
         xBand,
         yLinear,
         label_label,
-        tooltip_tooltip
+        tooltip_tooltip,
+        barStyle_barStyle
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotLegend
+    pivotDiscreteLegend
 ];
 const columnParallelSpecPipeline = [
     pivotAdapter_pivotAdapter(columnParallel, pivotColumnParallel)
 ];
 const columnPercent = [
     initColumn,
+    stackInverse,
     color_color,
     background_backgroundColor,
     percent,
@@ -1400,7 +2036,8 @@ const columnPercent = [
     yLinear,
     label_label,
     tooltip_tooltip,
-    legend_legend
+    discreteLegend,
+    barStyle_barStyle
 ];
 const pivotColumnPercent = [
     initPivot,
@@ -1409,6 +2046,7 @@ const pivotColumnPercent = [
     datasetPivot,
     pivotIndicators([
         initColumn,
+        stackInverse,
         color_color,
         percent,
         background_backgroundColor,
@@ -1416,11 +2054,12 @@ const pivotColumnPercent = [
         xBand,
         yLinear,
         label_label,
-        tooltip_tooltip
+        tooltip_tooltip,
+        barStyle_barStyle
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotLegend
+    pivotDiscreteLegend
 ];
 const columnPercentSpecPipeline = [
     pivotAdapter_pivotAdapter(columnPercent, pivotColumnPercent)
@@ -1434,7 +2073,8 @@ const bar = [
     yBand,
     label_label,
     tooltip_tooltip,
-    legend_legend
+    discreteLegend,
+    barStyle_barStyle
 ];
 const pivotBar = [
     initPivot,
@@ -1449,11 +2089,12 @@ const pivotBar = [
         yBand,
         label_label,
         label_label,
-        tooltip_tooltip
+        tooltip_tooltip,
+        barStyle_barStyle
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotLegend
+    pivotDiscreteLegend
 ];
 const barSpecPipeline = [
     pivotAdapter_pivotAdapter(bar, pivotBar)
@@ -1467,7 +2108,8 @@ const barParallel = [
     yBand,
     label_label,
     tooltip_tooltip,
-    legend_legend
+    discreteLegend,
+    barStyle_barStyle
 ];
 const pivotBarParallel = [
     initPivot,
@@ -1482,11 +2124,12 @@ const pivotBarParallel = [
         yBand,
         xLinear,
         label_label,
-        tooltip_tooltip
+        tooltip_tooltip,
+        barStyle_barStyle
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotLegend
+    pivotDiscreteLegend
 ];
 const barParallelSpecPipeline = [
     pivotAdapter_pivotAdapter(barParallel, pivotBarParallel)
@@ -1501,7 +2144,8 @@ const barPercent = [
     yBand,
     label_label,
     tooltip_tooltip,
-    legend_legend
+    discreteLegend,
+    barStyle_barStyle
 ];
 const pivotBarPercent = [
     initPivot,
@@ -1517,26 +2161,27 @@ const pivotBarPercent = [
         yBand,
         xLinear,
         label_label,
-        tooltip_tooltip
+        tooltip_tooltip,
+        barStyle_barStyle
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotLegend
+    pivotDiscreteLegend
 ];
 const barPercentSpecPipeline = [
     pivotAdapter_pivotAdapter(barPercent, pivotBarPercent)
 ];
 const area_area = [
     initArea,
+    stackInverse,
     color_color,
     background_backgroundColor,
-    stack,
     dataset_dataset,
     xBand,
     yLinear,
     label_label,
     tooltip_tooltip,
-    legend_legend
+    discreteLegend
 ];
 const pivotArea = [
     initPivot,
@@ -1547,7 +2192,7 @@ const pivotArea = [
         initArea,
         color_color,
         background_backgroundColor,
-        stack,
+        stackInverse,
         datasetPivotPlaceholder,
         xBand,
         yLinear,
@@ -1556,13 +2201,14 @@ const pivotArea = [
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotLegend
+    pivotDiscreteLegend
 ];
 const areaSpecPipeline = [
     pivotAdapter_pivotAdapter(area_area, pivotArea)
 ];
 const areaPercent = [
     initArea,
+    stackInverse,
     color_color,
     background_backgroundColor,
     percent,
@@ -1571,7 +2217,7 @@ const areaPercent = [
     yLinear,
     label_label,
     tooltip_tooltip,
-    legend_legend
+    discreteLegend
 ];
 const pivotAreaPercent = [
     initPivot,
@@ -1580,6 +2226,7 @@ const pivotAreaPercent = [
     datasetPivot,
     pivotIndicators([
         initArea,
+        stackInverse,
         color_color,
         background_backgroundColor,
         percent,
@@ -1591,7 +2238,7 @@ const pivotAreaPercent = [
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotLegend
+    pivotDiscreteLegend
 ];
 const areaPercentSpecPipeline = [
     pivotAdapter_pivotAdapter(areaPercent, pivotAreaPercent)
@@ -1603,7 +2250,7 @@ const pie = [
     dataset_dataset,
     label_label,
     tooltip_tooltip,
-    legend_legend
+    discreteLegend
 ];
 const pivotPie = [
     initPivot,
@@ -1620,7 +2267,7 @@ const pivotPie = [
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotLegend
+    pivotDiscreteLegend
 ];
 const pieSpecPipeline = [
     pivotAdapter_pivotAdapter(pie, pivotPie)
@@ -1736,13 +2383,90 @@ 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'
+                backgroundColor: 'transparent'
             },
             vchart: {
-                backgroundColor: '#141414',
+                backgroundColor: 'transparent',
                 color: {
                     colorScheme: [
                         '#2E62F1',
@@ -1764,18 +2488,155 @@ const darkTheme = ()=>({
                     enable: true
                 },
                 legend: {
-                    enable: true
+                    enable: true,
+                    border: true,
+                    maxSize: 1,
+                    position: 'rt',
+                    shapeType: 'rectRound',
+                    labelFontColor: '#FDFDFD',
+                    labelFontSize: 12,
+                    labelFontWeight: 400
                 }
             }
+        },
+        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: '#36415926',
+            gridWidth: 0.5
+        },
+        tick: {
+            visible: false,
+            tickInside: false,
+            tickSize: 4,
+            tickColor: '#3641594d'
+        },
+        line: {
+            visible: false,
+            lineColor: '#3641594d',
+            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: '#36415926',
+            gridWidth: 0.5
+        },
+        tick: {
+            visible: false,
+            tickInside: false,
+            tickSize: 4,
+            tickColor: '#3641594d'
+        },
+        line: {
+            visible: true,
+            lineColor: '#3641594d',
+            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'
+                backgroundColor: 'transparent'
             },
             vchart: {
-                backgroundColor: '#ffffff',
+                backgroundColor: 'transparent',
                 color: {
                     colorScheme: [
                         '#8D72F6',
@@ -1797,11 +2658,57 @@ const lightTheme = ()=>({
                     enable: true
                 },
                 legend: {
-                    enable: true
+                    enable: true,
+                    border: true,
+                    maxSize: 1,
+                    shapeType: 'rectRound',
+                    position: 'rt',
+                    labelFontColor: '#646A73',
+                    labelFontSize: 12,
+                    labelFontWeight: 400
                 }
             }
+        },
+        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;
 };
@@ -1924,7 +2831,58 @@ const zTooltip = z.object({
     enable: z.boolean().default(true).optional()
 });
 const zLegend = z.object({
-    enable: z.boolean().default(true).optional()
+    enable: z.boolean().default(true).optional(),
+    border: z.boolean().default(true).optional(),
+    maxSize: z.number().default(1).optional(),
+    shapeType: z["enum"]([
+        'circle',
+        'cross',
+        'diamond',
+        'square',
+        'arrow',
+        'arrow2Left',
+        'arrow2Right',
+        'wedge',
+        'thinTriangle',
+        'triangle',
+        'triangleUp',
+        'triangleDown',
+        'triangleRight',
+        'triangleLeft',
+        'stroke',
+        'star',
+        'wye',
+        'rect',
+        'arrowLeft',
+        'arrowRight',
+        'rectRound',
+        'roundLine'
+    ]).default('rectRound').optional(),
+    position: z["enum"]([
+        'left',
+        'leftTop',
+        'leftBottom',
+        'lt',
+        'lb',
+        'top',
+        'topLeft',
+        'topRight',
+        'tl',
+        'tr',
+        'right',
+        'rightTop',
+        'rightBottom',
+        'rt',
+        'rb',
+        'bottom',
+        'bottomLeft',
+        'bottomRight',
+        'bl',
+        'br'
+    ]).default('bottom').optional(),
+    labelFontSize: z.number().default(12).optional(),
+    labelFontColor: z.string().default('#fff').optional(),
+    labelFontWeight: z.number().or(z.string()).default(400).optional()
 });
 const zVChartBaseConfig = z.object({
     backgroundColor: zBackgroundColor,
@@ -1940,11 +2898,238 @@ 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 };
+const zSelector = z.union([
+    z.string(),
+    z.number(),
+    z.object({
+        field: z.string(),
+        operator: z.string(),
+        value: z.union([
+            z.string(),
+            z.number(),
+            z.array(z.union([
+                z.string(),
+                z.number()
+            ]))
+        ])
+    }),
+    z.object({
+        field: z.string(),
+        operator: z.string(),
+        value: z.union([
+            z.string(),
+            z.number(),
+            z.array(z.union([
+                z.string(),
+                z.number()
+            ]))
+        ])
+    })
+]);
+const zSelectors = z.array(zSelector);
+const zBarStyle = z.object({
+    selector: z.union([
+        zSelector,
+        zSelectors
+    ]),
+    barColor: z.string(),
+    barColorOpacity: z.number(),
+    barBorderColor: z.string(),
+    barBorderWidth: z.number(),
+    barBorderStyle: z.union([
+        z.literal('solid'),
+        z.literal('dashed'),
+        z.literal('dotted')
+    ]),
+    barRadius: z.union([
+        z.number(),
+        z.array(z.number())
+    ])
+});
+const zMarkStyle = z.object({
+    barStyle: zBarStyle.optional()
+});
+export { Builder, FoldMeasureId, FoldMeasureName, FoldMeasureValue, ORIGINAL_DATA, 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, zBarStyle, zBaseConfig, zChartType, zColor, zConfig, zCustomTheme, zCustomThemeConfig, zDataset, zDatasetReshapeInfo, zDatum, zDimension, zDimensions, zEncoding, zFoldInfo, zLabel, zLegend, zMarkStyle, zMeasure, zMeasureGroup, zMeasures, zTheme, zTooltip, zUnfoldInfo, zXBandAxis, zXLinearAxis, zYBandAxis, zYLinearAxis };
 
 //# sourceMappingURL=index.js.map