@visactor/vseed 0.0.6 → 0.0.8

package/dist/index.js

@@ -1,11 +1,134 @@
 import { clone as external_remeda_clone, mergeDeep as external_remeda_mergeDeep, pick as external_remeda_pick, unique } from "remeda";
 import { z } from "zod";
-const constant_FoldMeasureName = '__MeaName__';
-const constant_FoldMeasureValue = '__MeaValue__';
-const constant_FoldMeasureId = '__MeaId__';
-const constant_UnfoldDimensionGroup = '__DimGroup__';
+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 unfoldDimensions = (dataset, dimensions, measures, unfoldStartIndex = 0, foldGroupName = constant_UnfoldDimensionGroup, dimensionsSeparator = Separator)=>{
+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);
     const unfoldInfo = {
@@ -33,7 +156,7 @@ const unfoldDimensions = (dataset, dimensions, measures, unfoldStartIndex = 0, f
     };
 };
 const generateDimGroupName = (dimensionsToBeGrouped, datum, dimensionsSeparator)=>dimensionsToBeGrouped.map((dim)=>String(datum[dim.id])).join(dimensionsSeparator);
-const foldMeasures = (dataset, measures, measureId = constant_FoldMeasureId, measureName = constant_FoldMeasureName, measureValue = constant_FoldMeasureValue)=>{
+const foldMeasures = (dataset, measures, measureId = FoldMeasureId, measureName = FoldMeasureName, measureValue = FoldMeasureValue)=>{
     const foldInfo = {
         measureId,
         measureName,
@@ -73,7 +196,7 @@ const emptyReshapeResult = {
     }
 };
 const dataReshapeFor2D1M = (dataset, dimensions, measures, options)=>{
-    const { foldMeasureId = constant_FoldMeasureId, foldMeasureName = constant_FoldMeasureName, foldMeasureValue = constant_FoldMeasureValue, unfoldDimensionGroup = constant_UnfoldDimensionGroup } = options || {};
+    const { foldMeasureId = FoldMeasureId, foldMeasureName = FoldMeasureName, foldMeasureValue = FoldMeasureValue, unfoldDimensionGroup = UnfoldDimensionGroup } = options || {};
     if (0 === dimensions.length && 0 === measures.length) return emptyReshapeResult;
     const { dataset: foldedDataset, foldInfo } = foldMeasures(dataset, measures, foldMeasureId, foldMeasureName, foldMeasureValue);
     if (0 === dimensions.length) {
@@ -134,8 +257,8 @@ const dataReshapeFor1D1M_emptyReshapeResult = {
         colorItems: []
     }
 };
-const dataReshapeFor1D1M_dataReshapeFor1D1M = (dataset, dimensions, measures, options)=>{
-    const { foldMeasureId = constant_FoldMeasureId, foldMeasureName = constant_FoldMeasureName, foldMeasureValue = constant_FoldMeasureValue, unfoldDimensionGroup = constant_UnfoldDimensionGroup } = options || {};
+const dataReshapeFor1D1M = (dataset, dimensions, measures, options)=>{
+    const { foldMeasureId = FoldMeasureId, foldMeasureName = FoldMeasureName, foldMeasureValue = FoldMeasureValue, unfoldDimensionGroup = UnfoldDimensionGroup } = options || {};
     if (0 === dimensions.length && 0 === measures.length) return dataReshapeFor1D1M_emptyReshapeResult;
     const { dataset: foldedDataset, foldInfo } = foldMeasures(dataset, measures, foldMeasureId, foldMeasureName, foldMeasureValue);
     if (0 === dimensions.length) {
@@ -202,6 +325,67 @@ const reshapeTo2D1M = (advancedVSeed, context)=>{
         measures
     };
 };
+const reshapeTo1D1M = (advancedVSeed, context)=>{
+    const result = {
+        ...advancedVSeed
+    };
+    const { vseed } = context;
+    const { dataset } = vseed;
+    const { dimensions, measures } = advancedVSeed;
+    if (!measures || !dimensions || !dataset) return result;
+    if (0 === measures.length) throw new Error('measures can not be empty');
+    const { dataset: newDatasets, foldInfo, unfoldInfo } = dataReshapeFor1D1M(dataset, dimensions, measures);
+    return {
+        ...result,
+        dataset: newDatasets,
+        datasetReshapeInfo: [
+            {
+                id: '1D1M',
+                foldInfo,
+                unfoldInfo
+            }
+        ]
+    };
+};
+const pivotReshapeTo1D1M = (advancedVSeed, context)=>{
+    const result = {
+        ...advancedVSeed
+    };
+    const { vseed } = context;
+    const { dataset } = vseed;
+    const { dimensions, measures } = advancedVSeed;
+    if (!measures || !dimensions) return result;
+    const measureGroups = [];
+    if (measures) measures.forEach((measure)=>{
+        if (measure.children && measure.children.length > 0) measureGroups.push(measure);
+    });
+    const newDatasets = [];
+    const datasetReshapeInfo = [];
+    measureGroups.forEach((measureGroup)=>{
+        const measures = measureGroup.children;
+        if (!measures) return;
+        const commonDimensions = dimensions.filter((dim)=>'dimension' === dim.location);
+        const groupId = measureGroup.id;
+        const { dataset: newSubDataset, foldInfo, unfoldInfo } = dataReshapeFor1D1M(dataset, commonDimensions, measures, {
+            foldMeasureId: FoldMeasureId,
+            foldMeasureName: FoldMeasureName,
+            foldMeasureValue: FoldMeasureValue + groupId,
+            unfoldDimensionGroup: UnfoldDimensionGroup
+        });
+        const reshapeInfo = {
+            id: groupId,
+            foldInfo,
+            unfoldInfo
+        };
+        newDatasets.push(newSubDataset);
+        datasetReshapeInfo.push(reshapeInfo);
+    });
+    return {
+        ...result,
+        dataset: newDatasets,
+        datasetReshapeInfo: datasetReshapeInfo
+    };
+};
 const pivotReshapeTo2D1M = (advancedVSeed, context)=>{
     const result = {
         ...advancedVSeed
@@ -214,17 +398,18 @@ const pivotReshapeTo2D1M = (advancedVSeed, context)=>{
     if (measures) measures.forEach((measure)=>{
         if (measure.children && measure.children.length > 0) measureGroups.push(measure);
     });
+    const commonDimensions = dimensions.filter((dim)=>'dimension' === dim.location);
     const newDatasets = [];
     const datasetReshapeInfo = [];
     measureGroups.forEach((measureGroup)=>{
         const measures = measureGroup.children;
         if (!measures) return;
         const groupId = measureGroup.id;
-        const { dataset: newSubDataset, foldInfo, unfoldInfo } = dataReshapeFor2D1M(dataset, dimensions, measures, {
-            foldMeasureId: constant_FoldMeasureId + groupId,
-            foldMeasureName: constant_FoldMeasureName + groupId,
-            foldMeasureValue: constant_FoldMeasureValue + groupId,
-            unfoldDimensionGroup: constant_UnfoldDimensionGroup + groupId
+        const { dataset: newSubDataset, foldInfo, unfoldInfo } = dataReshapeFor2D1M(dataset, commonDimensions, measures, {
+            foldMeasureId: FoldMeasureId,
+            foldMeasureName: FoldMeasureName,
+            foldMeasureValue: FoldMeasureValue + groupId,
+            unfoldDimensionGroup: UnfoldDimensionGroup
         });
         const reshapeInfo = {
             id: groupId,
@@ -312,69 +497,40 @@ const encodingYX = (advancedVSeed)=>{
         encoding
     };
 };
-const initAdvancedVSeed = (advancedVSeed, context)=>{
-    const { vseed } = context;
-    const { chartType = 'table' } = vseed;
-    return {
-        ...advancedVSeed,
-        chartType
-    };
-};
-const autoMeasures = (advancedVSeed, context)=>{
+const encodingPolar = (advancedVSeed)=>{
     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 (measures) {
-        result.measures = measures;
-        return result;
-    }
-    const top100dataset = dataset.slice(0, 100);
-    const sample = top100dataset.reduce((prev, cur)=>({
+    const { datasetReshapeInfo, dimensions } = advancedVSeed;
+    if (!datasetReshapeInfo || !dimensions) return result;
+    const encoding = datasetReshapeInfo.reduce((prev, cur)=>{
+        const { foldInfo, unfoldInfo } = cur;
+        const radius = [
+            foldInfo.measureValue
+        ];
+        const angle = [
+            unfoldInfo.groupName
+        ];
+        const group = [
+            unfoldInfo.groupName
+        ];
+        const color = [
+            unfoldInfo.groupName
+        ];
+        return [
             ...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 autoDimensions = (advancedVSeed, context)=>{
-    const result = {
-        ...advancedVSeed
+            {
+                angle,
+                radius,
+                group,
+                color
+            }
+        ];
+    }, []);
+    return {
+        ...result,
+        encoding
     };
-    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 vchartBaseConfig = (advancedVSeed, context)=>{
     const { vseed } = context;
@@ -395,35 +551,76 @@ const vchartBaseConfig = (advancedVSeed, context)=>{
     };
     return result;
 };
-const vchartTheme = (advancedVSeed, context)=>{
-    const { customTheme, vseed } = context;
-    const { theme = 'light' } = vseed;
+const lineConfig = (advancedVSeed, context)=>{
+    const { vseed } = context;
+    const { 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 config = external_remeda_pick(vseed, [
+        'xAxis',
+        'yAxis'
+    ]);
+    result.config = {
+        ...result.config || {},
+        [chartType]: {
+            ...config
+        }
     };
     return result;
 };
-const execPipeline = (pipeline, context, initialValue = {})=>{
-    const result = pipeline.reduce((prev, cur)=>cur(prev, context), initialValue);
+const pieConfig = (advancedVSeed, context)=>{
+    const { vseed } = context;
+    const { chartType } = vseed;
+    const result = {
+        ...advancedVSeed
+    };
+    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', chartType } = vseed;
+    const result = {
+        ...advancedVSeed
+    };
+    if (!customTheme || !customTheme[theme]) return result;
+    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 isVTable = (chartType)=>[
-        'table',
-        'pivotTable'
-    ].includes(chartType);
-const isVChart = (chartType)=>!isVTable(chartType);
 const pivotAdapter = (pipeline, pivotPipeline)=>(advancedVSeed, context)=>{
         const { vseed } = context;
-        const { measures } = vseed;
-        if (measures && measures.find((measure)=>measure && measure.children)) return execPipeline(pivotPipeline, context, advancedVSeed);
+        const usePivotChart = isPivotChart(vseed);
+        if (usePivotChart) return execPipeline(pivotPipeline, context, advancedVSeed);
         return execPipeline(pipeline, context, advancedVSeed);
     };
 const lineAdvancedPipeline = [
@@ -437,6 +634,7 @@ const lineAdvancedPipeline = [
     ]),
     encodingXY,
     vchartBaseConfig,
+    lineConfig,
     vchartTheme
 ];
 const barAdvancedPipeline = [
@@ -449,6 +647,7 @@ const barAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingYX,
+    barConfig,
     vchartBaseConfig,
     vchartTheme
 ];
@@ -462,6 +661,7 @@ const barParallelAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingYX,
+    barParallelConfig,
     vchartBaseConfig,
     vchartTheme
 ];
@@ -475,6 +675,7 @@ const barPercentAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingYX,
+    barPercentConfig,
     vchartBaseConfig,
     vchartTheme
 ];
@@ -488,6 +689,7 @@ const columnAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingXY,
+    columnConfig,
     vchartBaseConfig,
     vchartTheme
 ];
@@ -501,6 +703,7 @@ const columnParallelAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingXY,
+    columnParallelConfig,
     vchartBaseConfig,
     vchartTheme
 ];
@@ -514,6 +717,7 @@ const columnPercentAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingXY,
+    columnPercentConfig,
     vchartBaseConfig,
     vchartTheme
 ];
@@ -527,6 +731,7 @@ const areaAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingXY,
+    areaConfig,
     vchartBaseConfig,
     vchartTheme
 ];
@@ -540,6 +745,21 @@ const areaPercentAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingXY,
+    areaPercentConfig,
+    vchartBaseConfig,
+    vchartTheme
+];
+const pieAdvancedPipeline = [
+    initAdvancedVSeed,
+    autoMeasures,
+    autoDimensions,
+    pivotAdapter([
+        reshapeTo1D1M
+    ], [
+        pivotReshapeTo1D1M
+    ]),
+    encodingPolar,
+    pieConfig,
     vchartBaseConfig,
     vchartTheme
 ];
@@ -587,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)=>{
@@ -602,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)=>{
@@ -621,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)=>{
@@ -636,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)=>{
@@ -651,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)=>{
@@ -670,6 +915,32 @@ 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)=>{
+    const result = {
+        ...spec
+    };
+    const { advancedVSeed } = context;
+    const { encoding } = advancedVSeed;
+    if (!encoding[0].angle || !encoding[0].radius || !encoding[0].group) return result;
+    result.type = 'pie';
+    result.outerRadius = 0.8;
+    result.innerRadius = 0;
+    result.valueField = encoding[0].radius[0];
+    result.categoryField = encoding[0].angle[0];
+    result.seriesField = encoding[0].group[0];
+    result.padding = 0;
+    result.region = [
+        {
+            clip: true
+        }
+    ];
     return result;
 };
 const initPivot = (spec)=>{
@@ -687,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;
 };
@@ -837,11 +1369,11 @@ const pivotLegend = (spec, context)=>{
     const { legend, color } = baseConfig;
     const { enable } = legend;
     const { colorScheme } = color;
-    result.legends = {
+    const legends = {
         visible: enable,
         alignSelf: 'end',
         type: 'discrete',
-        position: 'start',
+        position: 'middle',
         data: colorItems.map((d, index)=>({
                 label: d,
                 shape: {
@@ -849,9 +1381,29 @@ const pivotLegend = (spec, context)=>{
                     fill: colorScheme[index]
                 }
             })),
+        item: {
+            background: {
+                visible: true,
+                state: {
+                    selectedHover: {
+                        fill: '#000000',
+                        fillOpacity: 0.05
+                    }
+                }
+            },
+            label: {
+                style: {
+                    fontSize: 12,
+                    fill: '#6F6F6F'
+                }
+            }
+        },
         orient: 'bottom'
     };
-    return result;
+    return {
+        ...result,
+        legends
+    };
 };
 const color_color = (spec, context)=>{
     const result = {
@@ -873,9 +1425,9 @@ const color_color = (spec, context)=>{
     return result;
 };
 const pivotAdapter_pivotAdapter = (pipeline, pivotPipeline)=>(spec, context)=>{
-        const { advancedVSeed } = context;
-        const { measures } = advancedVSeed;
-        if (measures && measures.find((measure)=>measure && measure.children)) return execPipeline(pivotPipeline, context, spec);
+        const { vseed } = context;
+        const usePivotChart = isPivotChart(vseed);
+        if (usePivotChart) return execPipeline(pivotPipeline, context, spec);
         return execPipeline(pipeline, context, spec);
     };
 const pivotIndicators = (chartPipeline)=>(spec, context)=>{
@@ -947,7 +1499,155 @@ const pivotIndicators_pivotIndicatorsAsCol = (spec)=>{
         indicatorsAsCol: true
     };
 };
-const line = [
+const pivotGridStyle = (spec)=>{
+    const result = {
+        ...spec
+    };
+    const transparent = 'rgba(0,0,0,0)';
+    return {
+        ...result,
+        theme: {
+            underlayBackgroundColor: transparent,
+            bodyStyle: {
+                borderColor: 'rgba(0,4,20,0.2)',
+                borderLineWidth: [
+                    0,
+                    0,
+                    2,
+                    0
+                ],
+                bgColor: transparent,
+                padding: [
+                    0,
+                    0,
+                    1,
+                    0
+                ]
+            },
+            headerStyle: {
+                borderColor: 'rgba(0,4,20,0.2)',
+                fontSize: 12,
+                color: '#333333',
+                textAlign: 'center',
+                borderLineWidth: 0,
+                bgColor: transparent,
+                hover: {
+                    cellBgColor: 'rgba(178,186,207, 0.2)'
+                }
+            },
+            rowHeaderStyle: {
+                borderColor: 'rgba(0,4,20,0.2)',
+                fontSize: 12,
+                color: '#333333',
+                borderLineWidth: 0,
+                bgColor: transparent,
+                hover: {
+                    cellBgColor: 'rgba(178,186,207, 0.2)'
+                }
+            },
+            cornerHeaderStyle: {
+                borderColor: 'rgba(0,4,20,0.2)',
+                textAlign: 'center',
+                fontSize: 12,
+                color: '#333333',
+                fontWeight: 'bold',
+                borderLineWidth: [
+                    0,
+                    0,
+                    0,
+                    0
+                ],
+                bgColor: transparent,
+                hover: {
+                    cellBgColor: ''
+                }
+            },
+            cornerRightTopCellStyle: {
+                borderColor: 'rgba(0,4,20,0.2)',
+                borderLineWidth: 0,
+                bgColor: transparent,
+                hover: {
+                    cellBgColor: ''
+                }
+            },
+            cornerLeftBottomCellStyle: {
+                borderColor: 'rgba(0,4,20,0.2)',
+                borderLineWidth: 0,
+                bgColor: transparent,
+                hover: {
+                    cellBgColor: ''
+                }
+            },
+            cornerRightBottomCellStyle: {
+                borderColor: 'rgba(0,4,20,0.2)',
+                borderLineWidth: 0,
+                bgColor: transparent,
+                hover: {
+                    cellBgColor: ''
+                }
+            },
+            rightFrozenStyle: {
+                borderColor: 'rgba(0,4,20,0.2)',
+                borderLineWidth: 0,
+                bgColor: transparent,
+                hover: {
+                    cellBgColor: 'rgba(178,186,207, 0.2)'
+                }
+            },
+            bottomFrozenStyle: {
+                borderColor: 'rgba(0,4,20,0.2)',
+                borderLineWidth: 0,
+                bgColor: transparent,
+                hover: {
+                    cellBgColor: 'rgba(178,186,207, 0.2)'
+                }
+            },
+            selectionStyle: {
+                cellBgColor: '',
+                cellBorderColor: ''
+            },
+            frameStyle: {
+                borderLineWidth: 0,
+                bgColor: transparent
+            }
+        }
+    };
+};
+const pivotColumnDimensions = (spec, context)=>{
+    const result = {
+        ...spec
+    };
+    const { advancedVSeed } = context;
+    const { dimensions } = advancedVSeed;
+    if (!dimensions) return result;
+    const columnDimensions = dimensions.filter((dim)=>'columnDimension' === dim.location);
+    const columns = columnDimensions.map((dim)=>({
+            dimensionKey: dim.id,
+            title: dim.alias || dim.id
+        }));
+    return {
+        ...result,
+        columns: columns
+    };
+};
+const pivotRowDimensions = (spec, context)=>{
+    const result = {
+        ...spec
+    };
+    const { advancedVSeed } = context;
+    const { dimensions } = advancedVSeed;
+    if (!dimensions) return result;
+    const rowDimensions = dimensions.filter((dim)=>'rowDimension' === dim.location);
+    const rows = rowDimensions.map((dim)=>({
+            dimensionKey: dim.id,
+            title: dim.alias || dim.id
+        }));
+    return {
+        ...result,
+        rows: rows
+    };
+};
+const line_line = [
     initLine,
     color_color,
     background_backgroundColor,
@@ -960,6 +1660,7 @@ const line = [
 ];
 const pivotLine = [
     initPivot,
+    pivotGridStyle,
     pivotIndicators_pivotIndicatorsAsRow,
     datasetPivot,
     pivotIndicators([
@@ -972,10 +1673,12 @@ const pivotLine = [
         label_label,
         tooltip_tooltip
     ]),
+    pivotRowDimensions,
+    pivotColumnDimensions,
     pivotLegend
 ];
 const lineSpecPipeline = [
-    pivotAdapter_pivotAdapter(line, pivotLine)
+    pivotAdapter_pivotAdapter(line_line, pivotLine)
 ];
 const column = [
     initColumn,
@@ -990,6 +1693,7 @@ const column = [
 ];
 const pivotColumn = [
     initPivot,
+    pivotGridStyle,
     pivotIndicators_pivotIndicatorsAsRow,
     datasetPivot,
     pivotIndicators([
@@ -1002,6 +1706,8 @@ const pivotColumn = [
         label_label,
         tooltip_tooltip
     ]),
+    pivotRowDimensions,
+    pivotColumnDimensions,
     pivotLegend
 ];
 const columnSpecPipeline = [
@@ -1020,6 +1726,7 @@ const columnParallel = [
 ];
 const pivotColumnParallel = [
     initPivot,
+    pivotGridStyle,
     pivotIndicators_pivotIndicatorsAsRow,
     datasetPivot,
     pivotIndicators([
@@ -1032,6 +1739,8 @@ const pivotColumnParallel = [
         label_label,
         tooltip_tooltip
     ]),
+    pivotRowDimensions,
+    pivotColumnDimensions,
     pivotLegend
 ];
 const columnParallelSpecPipeline = [
@@ -1051,6 +1760,7 @@ const columnPercent = [
 ];
 const pivotColumnPercent = [
     initPivot,
+    pivotGridStyle,
     pivotIndicators_pivotIndicatorsAsRow,
     datasetPivot,
     pivotIndicators([
@@ -1064,6 +1774,8 @@ const pivotColumnPercent = [
         label_label,
         tooltip_tooltip
     ]),
+    pivotRowDimensions,
+    pivotColumnDimensions,
     pivotLegend
 ];
 const columnPercentSpecPipeline = [
@@ -1082,6 +1794,7 @@ const bar = [
 ];
 const pivotBar = [
     initPivot,
+    pivotGridStyle,
     pivotIndicators_pivotIndicatorsAsCol,
     datasetPivot,
     pivotIndicators([
@@ -1094,6 +1807,8 @@ const pivotBar = [
         label_label,
         tooltip_tooltip
     ]),
+    pivotRowDimensions,
+    pivotColumnDimensions,
     pivotLegend
 ];
 const barSpecPipeline = [
@@ -1112,6 +1827,7 @@ const barParallel = [
 ];
 const pivotBarParallel = [
     initPivot,
+    pivotGridStyle,
     pivotIndicators_pivotIndicatorsAsCol,
     datasetPivot,
     pivotIndicators([
@@ -1124,6 +1840,8 @@ const pivotBarParallel = [
         label_label,
         tooltip_tooltip
     ]),
+    pivotRowDimensions,
+    pivotColumnDimensions,
     pivotLegend
 ];
 const barParallelSpecPipeline = [
@@ -1143,6 +1861,7 @@ const barPercent = [
 ];
 const pivotBarPercent = [
     initPivot,
+    pivotGridStyle,
     pivotIndicators_pivotIndicatorsAsCol,
     datasetPivot,
     pivotIndicators([
@@ -1156,6 +1875,8 @@ const pivotBarPercent = [
         label_label,
         tooltip_tooltip
     ]),
+    pivotRowDimensions,
+    pivotColumnDimensions,
     pivotLegend
 ];
 const barPercentSpecPipeline = [
@@ -1175,6 +1896,7 @@ const area_area = [
 ];
 const pivotArea = [
     initPivot,
+    pivotGridStyle,
     pivotIndicators_pivotIndicatorsAsRow,
     datasetPivot,
     pivotIndicators([
@@ -1188,6 +1910,8 @@ const pivotArea = [
         label_label,
         tooltip_tooltip
     ]),
+    pivotRowDimensions,
+    pivotColumnDimensions,
     pivotLegend
 ];
 const areaSpecPipeline = [
@@ -1207,6 +1931,7 @@ const areaPercent = [
 ];
 const pivotAreaPercent = [
     initPivot,
+    pivotGridStyle,
     pivotIndicators_pivotIndicatorsAsRow,
     datasetPivot,
     pivotIndicators([
@@ -1220,11 +1945,42 @@ const pivotAreaPercent = [
         label_label,
         tooltip_tooltip
     ]),
+    pivotRowDimensions,
+    pivotColumnDimensions,
     pivotLegend
 ];
 const areaPercentSpecPipeline = [
     pivotAdapter_pivotAdapter(areaPercent, pivotAreaPercent)
 ];
+const pie = [
+    initPie,
+    color_color,
+    background_backgroundColor,
+    dataset_dataset,
+    label_label,
+    tooltip_tooltip,
+    legend_legend
+];
+const pivotPie = [
+    initPivot,
+    pivotGridStyle,
+    pivotIndicators_pivotIndicatorsAsRow,
+    datasetPivot,
+    pivotIndicators([
+        initPie,
+        color_color,
+        background_backgroundColor,
+        datasetPivotPlaceholder,
+        label_label,
+        tooltip_tooltip
+    ]),
+    pivotRowDimensions,
+    pivotColumnDimensions,
+    pivotLegend
+];
+const pieSpecPipeline = [
+    pivotAdapter_pivotAdapter(pie, pivotPie)
+];
 const buildAdvanced = (builder)=>{
     const { chartType } = builder.vseed;
     if (!chartType) throw new Error('chartType is nil in buildAdvanced');
@@ -1332,7 +2088,88 @@ const registerBarParallel = ()=>{
     Builder._advancedPipelineMap.barParallel = barParallelAdvancedPipeline;
     Builder._specPipelineMap.barParallel = barParallelSpecPipeline;
 };
-const darkTheme = ()=>({
+const registerPie = ()=>{
+    Builder._advancedPipelineMap.pie = pieAdvancedPipeline;
+    Builder._specPipelineMap.pie = pieSpecPipeline;
+};
+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'
@@ -1363,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'
@@ -1396,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;
 };
@@ -1417,6 +2423,7 @@ const all_registerAll = ()=>{
     registerBarPercent();
     registerArea();
     registerAreaPercent();
+    registerPie();
     registerLightTheme();
     registerDarkTheme();
 };
@@ -1535,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_dataReshapeFor1D1M as dataReshapeFor1D1M, dataReshapeFor2D1M, execPipeline, foldMeasures, isVChart, isVTable, lightTheme, lineAdvancedPipeline, lineSpecPipeline, 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