@visactor/vseed 0.0.6 → 0.0.8

package/dist/index.cjs

@@ -24,9 +24,10 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    columnPercentSpecPipeline: ()=>columnPercentSpecPipeline,
+    registerBar: ()=>registerBar,
     isVChart: ()=>isVChart,
-    registerAll: ()=>all_registerAll,
+    columnPercentSpecPipeline: ()=>columnPercentSpecPipeline,
+    pieAdvancedPipeline: ()=>pieAdvancedPipeline,
     execPipeline: ()=>execPipeline,
     areaSpecPipeline: ()=>areaSpecPipeline,
     registerCustomTheme: ()=>registerCustomTheme,
@@ -35,21 +36,29 @@ __webpack_require__.d(__webpack_exports__, {
     zMeasureGroup: ()=>zMeasureGroup,
     zUnfoldInfo: ()=>zUnfoldInfo,
     zMeasures: ()=>zMeasures,
+    FoldMeasureName: ()=>FoldMeasureName,
     darkTheme: ()=>darkTheme,
     columnPercentAdvancedPipeline: ()=>columnPercentAdvancedPipeline,
+    zAxis: ()=>zAxis,
     isVTable: ()=>isVTable,
     columnSpecPipeline: ()=>columnSpecPipeline,
-    zFoldInfo: ()=>zFoldInfo,
+    UnfoldDimensionGroup: ()=>UnfoldDimensionGroup,
     zDatasetReshapeInfo: ()=>zDatasetReshapeInfo,
-    columnParallelSpecPipeline: ()=>columnParallelSpecPipeline,
+    zFoldInfo: ()=>zFoldInfo,
+    zYBandAxis: ()=>zYBandAxis,
+    zYLinearAxis: ()=>zYLinearAxis,
+    Separator: ()=>Separator,
     columnAdvancedPipeline: ()=>columnAdvancedPipeline,
+    columnParallelSpecPipeline: ()=>columnParallelSpecPipeline,
     zLabel: ()=>zLabel,
     registerColumn: ()=>registerColumn,
     zDimension: ()=>zDimension,
     lightTheme: ()=>lightTheme,
     registerColumnParallel: ()=>registerColumnParallel,
+    isPivotChart: ()=>isPivotChart,
     zCustomTheme: ()=>zCustomTheme,
-    dataReshapeFor1D1M: ()=>dataReshapeFor1D1M_dataReshapeFor1D1M,
+    zXBandAxis: ()=>zXBandAxis,
+    dataReshapeFor1D1M: ()=>dataReshapeFor1D1M,
     registerArea: ()=>registerArea,
     zDataset: ()=>zDataset,
     barPercentAdvancedPipeline: ()=>barPercentAdvancedPipeline,
@@ -59,9 +68,12 @@ __webpack_require__.d(__webpack_exports__, {
     zMeasure: ()=>zMeasure,
     zDimensions: ()=>zDimensions,
     zLegend: ()=>zLegend,
+    FoldMeasureId: ()=>FoldMeasureId,
     zTheme: ()=>zTheme,
     zEncoding: ()=>zEncoding,
     registerAreaPercent: ()=>registerAreaPercent,
+    zXLinearAxis: ()=>zXLinearAxis,
+    zConfig: ()=>zConfig,
     zDatum: ()=>zDatum,
     barAdvancedPipeline: ()=>barAdvancedPipeline,
     zCustomThemeConfig: ()=>zCustomThemeConfig,
@@ -71,29 +83,150 @@ __webpack_require__.d(__webpack_exports__, {
     foldMeasures: ()=>foldMeasures,
     dataReshapeFor2D1M: ()=>dataReshapeFor2D1M,
     registerLightTheme: ()=>registerLightTheme,
-    registerDarkTheme: ()=>registerDarkTheme,
     zChartType: ()=>zChartType,
+    registerDarkTheme: ()=>registerDarkTheme,
     barParallelAdvancedPipeline: ()=>barParallelAdvancedPipeline,
+    FoldMeasureValue: ()=>FoldMeasureValue,
     barPercentSpecPipeline: ()=>barPercentSpecPipeline,
     lineAdvancedPipeline: ()=>lineAdvancedPipeline,
-    zTooltip: ()=>zTooltip,
+    pieSpecPipeline: ()=>pieSpecPipeline,
     barSpecPipeline: ()=>barSpecPipeline,
     lineSpecPipeline: ()=>lineSpecPipeline,
+    zTooltip: ()=>zTooltip,
     zBaseConfig: ()=>zBaseConfig,
     unfoldDimensions: ()=>unfoldDimensions,
     areaAdvancedPipeline: ()=>areaAdvancedPipeline,
     areaPercentSpecPipeline: ()=>areaPercentSpecPipeline,
     Builder: ()=>Builder,
     barParallelSpecPipeline: ()=>barParallelSpecPipeline,
-    registerBar: ()=>registerBar
+    registerAll: ()=>all_registerAll
 });
-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 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 external_remeda_namespaceObject = require("remeda");
-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 = {
@@ -121,7 +254,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,
@@ -161,7 +294,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) {
@@ -222,8 +355,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) {
@@ -290,6 +423,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
@@ -302,17 +496,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,
@@ -400,69 +595,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;
@@ -483,20 +649,70 @@ const vchartBaseConfig = (advancedVSeed, context)=>{
     };
     return result;
 };
+const lineConfig = (advancedVSeed, context)=>{
+    const { vseed } = context;
+    const { chartType } = vseed;
+    const result = {
+        ...advancedVSeed
+    };
+    const config = (0, external_remeda_namespaceObject.pick)(vseed, [
+        'xAxis',
+        'yAxis'
+    ]);
+    result.config = {
+        ...result.config || {},
+        [chartType]: {
+            ...config
+        }
+    };
+    return result;
+};
+const pieConfig = (advancedVSeed, context)=>{
+    const { vseed } = context;
+    const { chartType } = vseed;
+    const result = {
+        ...advancedVSeed
+    };
+    const config = (0, external_remeda_namespaceObject.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 = (0, external_remeda_namespaceObject.mergeDeep)(themeConfig, (0, external_remeda_namespaceObject.clone)(config));
-    result.baseConfig = {
-        vchart: mergedConfig
-    };
+    const baseConfigVChartTheme = customTheme?.[theme].baseConfig?.vchart;
+    if (baseConfigVChartTheme) {
+        const baseConfigVChart = result.baseConfig?.vchart || {};
+        const mergedConfig = (0, external_remeda_namespaceObject.mergeDeep)(baseConfigVChartTheme, (0, external_remeda_namespaceObject.clone)(baseConfigVChart));
+        result.baseConfig = {
+            vchart: mergedConfig
+        };
+    }
+    const chartConfigTheme = customTheme?.[theme].config?.[chartType];
+    if (chartConfigTheme) {
+        const chartConfig = result.config?.[chartType] || {};
+        const mergedConfig = (0, external_remeda_namespaceObject.mergeDeep)(chartConfigTheme, (0, external_remeda_namespaceObject.clone)(chartConfig));
+        result.config = {
+            [chartType]: mergedConfig
+        };
+    }
     return result;
 };
 const execPipeline = (pipeline, context, initialValue = {})=>{
@@ -505,8 +721,8 @@ const execPipeline = (pipeline, context, initialValue = {})=>{
 };
 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 = [
@@ -520,6 +736,7 @@ const lineAdvancedPipeline = [
     ]),
     encodingXY,
     vchartBaseConfig,
+    lineConfig,
     vchartTheme
 ];
 const barAdvancedPipeline = [
@@ -532,6 +749,7 @@ const barAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingYX,
+    barConfig,
     vchartBaseConfig,
     vchartTheme
 ];
@@ -545,6 +763,7 @@ const barParallelAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingYX,
+    barParallelConfig,
     vchartBaseConfig,
     vchartTheme
 ];
@@ -558,6 +777,7 @@ const barPercentAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingYX,
+    barPercentConfig,
     vchartBaseConfig,
     vchartTheme
 ];
@@ -571,6 +791,7 @@ const columnAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingXY,
+    columnConfig,
     vchartBaseConfig,
     vchartTheme
 ];
@@ -584,6 +805,7 @@ const columnParallelAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingXY,
+    columnParallelConfig,
     vchartBaseConfig,
     vchartTheme
 ];
@@ -597,6 +819,7 @@ const columnPercentAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingXY,
+    columnPercentConfig,
     vchartBaseConfig,
     vchartTheme
 ];
@@ -610,6 +833,7 @@ const areaAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingXY,
+    areaConfig,
     vchartBaseConfig,
     vchartTheme
 ];
@@ -623,6 +847,21 @@ const areaPercentAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingXY,
+    areaPercentConfig,
+    vchartBaseConfig,
+    vchartTheme
+];
+const pieAdvancedPipeline = [
+    initAdvancedVSeed,
+    autoMeasures,
+    autoDimensions,
+    pivotAdapter([
+        reshapeTo1D1M
+    ], [
+        pivotReshapeTo1D1M
+    ]),
+    encodingPolar,
+    pieConfig,
     vchartBaseConfig,
     vchartTheme
 ];
@@ -670,6 +909,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)=>{
@@ -685,6 +929,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)=>{
@@ -704,6 +953,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)=>{
@@ -719,6 +973,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)=>{
@@ -734,6 +993,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)=>{
@@ -753,6 +1017,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)=>{
@@ -770,67 +1060,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;
 };
@@ -920,11 +1471,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: {
@@ -932,9 +1483,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 = {
@@ -956,9 +1527,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)=>{
@@ -1030,7 +1601,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,
@@ -1043,6 +1762,7 @@ const line = [
 ];
 const pivotLine = [
     initPivot,
+    pivotGridStyle,
     pivotIndicators_pivotIndicatorsAsRow,
     datasetPivot,
     pivotIndicators([
@@ -1055,10 +1775,12 @@ const pivotLine = [
         label_label,
         tooltip_tooltip
     ]),
+    pivotRowDimensions,
+    pivotColumnDimensions,
     pivotLegend
 ];
 const lineSpecPipeline = [
-    pivotAdapter_pivotAdapter(line, pivotLine)
+    pivotAdapter_pivotAdapter(line_line, pivotLine)
 ];
 const column = [
     initColumn,
@@ -1073,6 +1795,7 @@ const column = [
 ];
 const pivotColumn = [
     initPivot,
+    pivotGridStyle,
     pivotIndicators_pivotIndicatorsAsRow,
     datasetPivot,
     pivotIndicators([
@@ -1085,6 +1808,8 @@ const pivotColumn = [
         label_label,
         tooltip_tooltip
     ]),
+    pivotRowDimensions,
+    pivotColumnDimensions,
     pivotLegend
 ];
 const columnSpecPipeline = [
@@ -1103,6 +1828,7 @@ const columnParallel = [
 ];
 const pivotColumnParallel = [
     initPivot,
+    pivotGridStyle,
     pivotIndicators_pivotIndicatorsAsRow,
     datasetPivot,
     pivotIndicators([
@@ -1115,6 +1841,8 @@ const pivotColumnParallel = [
         label_label,
         tooltip_tooltip
     ]),
+    pivotRowDimensions,
+    pivotColumnDimensions,
     pivotLegend
 ];
 const columnParallelSpecPipeline = [
@@ -1134,6 +1862,7 @@ const columnPercent = [
 ];
 const pivotColumnPercent = [
     initPivot,
+    pivotGridStyle,
     pivotIndicators_pivotIndicatorsAsRow,
     datasetPivot,
     pivotIndicators([
@@ -1147,6 +1876,8 @@ const pivotColumnPercent = [
         label_label,
         tooltip_tooltip
     ]),
+    pivotRowDimensions,
+    pivotColumnDimensions,
     pivotLegend
 ];
 const columnPercentSpecPipeline = [
@@ -1165,6 +1896,7 @@ const bar = [
 ];
 const pivotBar = [
     initPivot,
+    pivotGridStyle,
     pivotIndicators_pivotIndicatorsAsCol,
     datasetPivot,
     pivotIndicators([
@@ -1177,6 +1909,8 @@ const pivotBar = [
         label_label,
         tooltip_tooltip
     ]),
+    pivotRowDimensions,
+    pivotColumnDimensions,
     pivotLegend
 ];
 const barSpecPipeline = [
@@ -1195,6 +1929,7 @@ const barParallel = [
 ];
 const pivotBarParallel = [
     initPivot,
+    pivotGridStyle,
     pivotIndicators_pivotIndicatorsAsCol,
     datasetPivot,
     pivotIndicators([
@@ -1207,6 +1942,8 @@ const pivotBarParallel = [
         label_label,
         tooltip_tooltip
     ]),
+    pivotRowDimensions,
+    pivotColumnDimensions,
     pivotLegend
 ];
 const barParallelSpecPipeline = [
@@ -1226,6 +1963,7 @@ const barPercent = [
 ];
 const pivotBarPercent = [
     initPivot,
+    pivotGridStyle,
     pivotIndicators_pivotIndicatorsAsCol,
     datasetPivot,
     pivotIndicators([
@@ -1239,6 +1977,8 @@ const pivotBarPercent = [
         label_label,
         tooltip_tooltip
     ]),
+    pivotRowDimensions,
+    pivotColumnDimensions,
     pivotLegend
 ];
 const barPercentSpecPipeline = [
@@ -1258,6 +1998,7 @@ const area_area = [
 ];
 const pivotArea = [
     initPivot,
+    pivotGridStyle,
     pivotIndicators_pivotIndicatorsAsRow,
     datasetPivot,
     pivotIndicators([
@@ -1271,6 +2012,8 @@ const pivotArea = [
         label_label,
         tooltip_tooltip
     ]),
+    pivotRowDimensions,
+    pivotColumnDimensions,
     pivotLegend
 ];
 const areaSpecPipeline = [
@@ -1290,6 +2033,7 @@ const areaPercent = [
 ];
 const pivotAreaPercent = [
     initPivot,
+    pivotGridStyle,
     pivotIndicators_pivotIndicatorsAsRow,
     datasetPivot,
     pivotIndicators([
@@ -1303,16 +2047,42 @@ const pivotAreaPercent = [
         label_label,
         tooltip_tooltip
     ]),
+    pivotRowDimensions,
+    pivotColumnDimensions,
     pivotLegend
 ];
 const areaPercentSpecPipeline = [
     pivotAdapter_pivotAdapter(areaPercent, pivotAreaPercent)
 ];
-const isVTable = (chartType)=>[
-        'table',
-        'pivotTable'
-    ].includes(chartType);
-const isVChart = (chartType)=>!isVTable(chartType);
+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');
@@ -1420,7 +2190,102 @@ const registerBarParallel = ()=>{
     Builder._advancedPipelineMap.barParallel = barParallelAdvancedPipeline;
     Builder._specPipelineMap.barParallel = barParallelSpecPipeline;
 };
-const lightTheme = ()=>({
+const registerPie = ()=>{
+    Builder._advancedPipelineMap.pie = pieAdvancedPipeline;
+    Builder._specPipelineMap.pie = pieSpecPipeline;
+};
+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'
@@ -1451,9 +2316,125 @@ 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 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'
@@ -1484,8 +2465,47 @@ 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 registerCustomTheme = (key, themeConfig)=>{
     Builder._themeMap[key] = themeConfig;
 };
@@ -1505,6 +2525,7 @@ const all_registerAll = ()=>{
     registerBarPercent();
     registerArea();
     registerAreaPercent();
+    registerPie();
     registerLightTheme();
     registerDarkTheme();
 };
@@ -1624,12 +2645,193 @@ const zBaseConfig = external_zod_namespaceObject.z.object({
     vchart: zVChartBaseConfig.optional(),
     vtable: zVTableBaseConfig.optional()
 });
+const zAxis = external_zod_namespaceObject.z.object({
+    visible: external_zod_namespaceObject.z.boolean().default(true).optional(),
+    min: external_zod_namespaceObject.z.number().optional(),
+    max: external_zod_namespaceObject.z.number().optional(),
+    nice: external_zod_namespaceObject.z.boolean().default(true).optional(),
+    zero: external_zod_namespaceObject.z.boolean().default(true).optional(),
+    inverse: external_zod_namespaceObject.z.boolean().default(false).optional(),
+    labelAutoHide: external_zod_namespaceObject.z.boolean().default(true).optional(),
+    labelAutoHideGap: external_zod_namespaceObject.z.number().default(4).optional(),
+    labelAutoRotate: external_zod_namespaceObject.z.boolean().default(true).optional(),
+    labelAutoRotateAngleRange: external_zod_namespaceObject.z.array(external_zod_namespaceObject.z.number()).default([
+        0,
+        -45,
+        -90
+    ]).optional(),
+    labelAutoLimit: external_zod_namespaceObject.z.boolean().default(true).optional(),
+    labelAutoLimitLength: external_zod_namespaceObject.z.number().default(100).optional(),
+    label: external_zod_namespaceObject.z.object({
+        visible: external_zod_namespaceObject.z.boolean().default(true).optional(),
+        labelColor: external_zod_namespaceObject.z.string().default('#797B85').optional(),
+        labelFontSize: external_zod_namespaceObject.z.number().default(12).optional(),
+        labelFontWeight: external_zod_namespaceObject.z.number().default(400).optional(),
+        labelAngle: external_zod_namespaceObject.z.number().default(0).optional()
+    }).optional(),
+    line: external_zod_namespaceObject.z.object({
+        visible: external_zod_namespaceObject.z.boolean().default(true).optional(),
+        lineColor: external_zod_namespaceObject.z.string().default('rgba(54, 65, 89, 0.30)').optional(),
+        lineWidth: external_zod_namespaceObject.z.number().default(1).optional()
+    }).optional(),
+    tick: external_zod_namespaceObject.z.object({
+        visible: external_zod_namespaceObject.z.boolean().default(true).optional(),
+        tickInside: external_zod_namespaceObject.z.boolean().default(false).optional(),
+        tickColor: external_zod_namespaceObject.z.string().default('rgba(54, 65, 89, 0.30)').optional(),
+        tickSize: external_zod_namespaceObject.z.number().default(4).optional()
+    }).optional(),
+    title: external_zod_namespaceObject.z.object({
+        visible: external_zod_namespaceObject.z.boolean().default(false).optional(),
+        titleText: external_zod_namespaceObject.z.string().default('').optional(),
+        titleColor: external_zod_namespaceObject.z.string().default('#646A73').optional(),
+        titleFontSize: external_zod_namespaceObject.z.number().default(12).optional(),
+        titleFontWeight: external_zod_namespaceObject.z.number().default(400).optional()
+    }).optional(),
+    grid: external_zod_namespaceObject.z.object({
+        visible: external_zod_namespaceObject.z.boolean().default(false).optional(),
+        gridColor: external_zod_namespaceObject.z.string().default('rgba(54, 65, 89, 0.15)').optional(),
+        gridWidth: external_zod_namespaceObject.z.number().default(0.5).optional()
+    }).optional()
+});
+const zXBandAxis = external_zod_namespaceObject.z.object({
+    visible: external_zod_namespaceObject.z.boolean().default(true).optional(),
+    labelAutoHide: external_zod_namespaceObject.z.boolean().default(true).optional(),
+    labelAutoHideGap: external_zod_namespaceObject.z.number().default(0).optional(),
+    labelAutoRotate: external_zod_namespaceObject.z.boolean().default(true).optional(),
+    labelAutoRotateAngleRange: external_zod_namespaceObject.z.array(external_zod_namespaceObject.z.number()).default([
+        0,
+        -45,
+        -90
+    ]).optional(),
+    labelAutoLimit: external_zod_namespaceObject.z.boolean().default(true).optional(),
+    labelAutoLimitLength: external_zod_namespaceObject.z.number().default(100).optional(),
+    label: external_zod_namespaceObject.z.object({
+        visible: external_zod_namespaceObject.z.boolean().default(true).optional(),
+        labelColor: external_zod_namespaceObject.z.string().default('#797B85').optional(),
+        labelFontSize: external_zod_namespaceObject.z.number().default(12).optional(),
+        labelFontWeight: external_zod_namespaceObject.z.number().default(400).optional(),
+        labelAngle: external_zod_namespaceObject.z.number().default(0).optional()
+    }).optional(),
+    line: external_zod_namespaceObject.z.object({
+        visible: external_zod_namespaceObject.z.boolean().default(true).optional(),
+        lineColor: external_zod_namespaceObject.z.string().default('rgba(54, 65, 89, 0.30)').optional(),
+        lineWidth: external_zod_namespaceObject.z.number().default(1).optional()
+    }).optional(),
+    tick: external_zod_namespaceObject.z.object({
+        visible: external_zod_namespaceObject.z.boolean().default(true).optional(),
+        tickInside: external_zod_namespaceObject.z.boolean().default(false).optional(),
+        tickColor: external_zod_namespaceObject.z.string().default('rgba(54, 65, 89, 0.30)').optional(),
+        tickSize: external_zod_namespaceObject.z.number().default(4).optional()
+    }).optional(),
+    title: external_zod_namespaceObject.z.object({
+        visible: external_zod_namespaceObject.z.boolean().default(false).optional(),
+        titleText: external_zod_namespaceObject.z.string().default('').optional(),
+        titleColor: external_zod_namespaceObject.z.string().default('#646A73').optional(),
+        titleFontSize: external_zod_namespaceObject.z.number().default(12).optional(),
+        titleFontWeight: external_zod_namespaceObject.z.number().default(400).optional()
+    }).optional(),
+    grid: external_zod_namespaceObject.z.object({
+        visible: external_zod_namespaceObject.z.boolean().default(false).optional(),
+        gridColor: external_zod_namespaceObject.z.string().default('rgba(54, 65, 89, 0.15)').optional(),
+        gridWidth: external_zod_namespaceObject.z.number().default(0.5).optional()
+    }).optional()
+});
+const zYBandAxis = zXBandAxis;
+const zXLinearAxis = external_zod_namespaceObject.z.object({
+    visible: external_zod_namespaceObject.z.boolean().default(true).optional(),
+    min: external_zod_namespaceObject.z.number().optional(),
+    max: external_zod_namespaceObject.z.number().optional(),
+    nice: external_zod_namespaceObject.z.boolean().default(true).optional(),
+    zero: external_zod_namespaceObject.z.boolean().default(true).optional(),
+    inverse: external_zod_namespaceObject.z.boolean().default(false).optional(),
+    label: external_zod_namespaceObject.z.object({
+        visible: external_zod_namespaceObject.z.boolean().default(true).optional(),
+        labelColor: external_zod_namespaceObject.z.string().default('#797B85').optional(),
+        labelFontSize: external_zod_namespaceObject.z.number().default(12).optional(),
+        labelFontWeight: external_zod_namespaceObject.z.number().default(400).optional(),
+        labelAngle: external_zod_namespaceObject.z.number().default(0).optional()
+    }).optional(),
+    line: external_zod_namespaceObject.z.object({
+        visible: external_zod_namespaceObject.z.boolean().default(true).optional(),
+        lineColor: external_zod_namespaceObject.z.string().default('rgba(54, 65, 89, 0.30)').optional(),
+        lineWidth: external_zod_namespaceObject.z.number().default(1).optional()
+    }).optional(),
+    tick: external_zod_namespaceObject.z.object({
+        visible: external_zod_namespaceObject.z.boolean().default(true).optional(),
+        tickInside: external_zod_namespaceObject.z.boolean().default(false).optional(),
+        tickColor: external_zod_namespaceObject.z.string().default('rgba(54, 65, 89, 0.30)').optional(),
+        tickSize: external_zod_namespaceObject.z.number().default(4).optional()
+    }).optional(),
+    title: external_zod_namespaceObject.z.object({
+        visible: external_zod_namespaceObject.z.boolean().default(false).optional(),
+        titleText: external_zod_namespaceObject.z.string().default('').optional(),
+        titleColor: external_zod_namespaceObject.z.string().default('#646A73').optional(),
+        titleFontSize: external_zod_namespaceObject.z.number().default(12).optional(),
+        titleFontWeight: external_zod_namespaceObject.z.number().default(400).optional()
+    }).optional(),
+    grid: external_zod_namespaceObject.z.object({
+        visible: external_zod_namespaceObject.z.boolean().default(false).optional(),
+        gridColor: external_zod_namespaceObject.z.string().default('rgba(54, 65, 89, 0.15)').optional(),
+        gridWidth: external_zod_namespaceObject.z.number().default(0.5).optional()
+    }).optional()
+});
+const zYLinearAxis = zXLinearAxis;
+const zConfig = external_zod_namespaceObject.z.object({
+    line: external_zod_namespaceObject.z.object({
+        xAxis: zXBandAxis,
+        yAxis: zYLinearAxis
+    }).optional(),
+    column: external_zod_namespaceObject.z.object({
+        xAxis: zXBandAxis,
+        yAxis: zYLinearAxis
+    }).optional(),
+    columnParallel: external_zod_namespaceObject.z.object({
+        xAxis: zXBandAxis,
+        yAxis: zYLinearAxis
+    }).optional(),
+    columnPercent: external_zod_namespaceObject.z.object({
+        xAxis: zXBandAxis,
+        yAxis: zYLinearAxis
+    }).optional(),
+    bar: external_zod_namespaceObject.z.object({
+        xAxis: zXLinearAxis,
+        yAxis: zYBandAxis
+    }).optional(),
+    barParallel: external_zod_namespaceObject.z.object({
+        xAxis: zXLinearAxis,
+        yAxis: zYBandAxis
+    }).optional(),
+    barPercent: external_zod_namespaceObject.z.object({
+        xAxis: zXLinearAxis,
+        yAxis: zYBandAxis
+    }).optional(),
+    area: external_zod_namespaceObject.z.object({
+        xAxis: zXBandAxis,
+        yAxis: zYLinearAxis
+    }).optional(),
+    areaPercent: external_zod_namespaceObject.z.object({
+        xAxis: zXBandAxis,
+        yAxis: zYLinearAxis
+    }).optional(),
+    pie: external_zod_namespaceObject.z.object({}).optional(),
+    donut: external_zod_namespaceObject.z.object({}).optional(),
+    rose: external_zod_namespaceObject.z.object({}).optional(),
+    dualAxis: external_zod_namespaceObject.z.object({}).optional(),
+    table: external_zod_namespaceObject.z.object({}).optional(),
+    pivotTable: external_zod_namespaceObject.z.object({}).optional()
+});
 const zCustomThemeConfig = external_zod_namespaceObject.z.object({
-    baseConfig: zBaseConfig.optional()
+    baseConfig: zBaseConfig.optional(),
+    config: zConfig.optional()
 });
 const zCustomTheme = external_zod_namespaceObject.z.record(external_zod_namespaceObject.z.string(), zCustomThemeConfig).optional();
 const zTheme = external_zod_namespaceObject.z.string();
 exports.Builder = __webpack_exports__.Builder;
+exports.FoldMeasureId = __webpack_exports__.FoldMeasureId;
+exports.FoldMeasureName = __webpack_exports__.FoldMeasureName;
+exports.FoldMeasureValue = __webpack_exports__.FoldMeasureValue;
+exports.Separator = __webpack_exports__.Separator;
+exports.UnfoldDimensionGroup = __webpack_exports__.UnfoldDimensionGroup;
 exports.areaAdvancedPipeline = __webpack_exports__.areaAdvancedPipeline;
 exports.areaPercentAdvancedPipeline = __webpack_exports__.areaPercentAdvancedPipeline;
 exports.areaPercentSpecPipeline = __webpack_exports__.areaPercentSpecPipeline;
@@ -1651,11 +2853,14 @@ exports.dataReshapeFor1D1M = __webpack_exports__.dataReshapeFor1D1M;
 exports.dataReshapeFor2D1M = __webpack_exports__.dataReshapeFor2D1M;
 exports.execPipeline = __webpack_exports__.execPipeline;
 exports.foldMeasures = __webpack_exports__.foldMeasures;
+exports.isPivotChart = __webpack_exports__.isPivotChart;
 exports.isVChart = __webpack_exports__.isVChart;
 exports.isVTable = __webpack_exports__.isVTable;
 exports.lightTheme = __webpack_exports__.lightTheme;
 exports.lineAdvancedPipeline = __webpack_exports__.lineAdvancedPipeline;
 exports.lineSpecPipeline = __webpack_exports__.lineSpecPipeline;
+exports.pieAdvancedPipeline = __webpack_exports__.pieAdvancedPipeline;
+exports.pieSpecPipeline = __webpack_exports__.pieSpecPipeline;
 exports.registerAll = __webpack_exports__.registerAll;
 exports.registerArea = __webpack_exports__.registerArea;
 exports.registerAreaPercent = __webpack_exports__.registerAreaPercent;
@@ -1670,10 +2875,12 @@ exports.registerDarkTheme = __webpack_exports__.registerDarkTheme;
 exports.registerLightTheme = __webpack_exports__.registerLightTheme;
 exports.registerLine = __webpack_exports__.registerLine;
 exports.unfoldDimensions = __webpack_exports__.unfoldDimensions;
+exports.zAxis = __webpack_exports__.zAxis;
 exports.zBackgroundColor = __webpack_exports__.zBackgroundColor;
 exports.zBaseConfig = __webpack_exports__.zBaseConfig;
 exports.zChartType = __webpack_exports__.zChartType;
 exports.zColor = __webpack_exports__.zColor;
+exports.zConfig = __webpack_exports__.zConfig;
 exports.zCustomTheme = __webpack_exports__.zCustomTheme;
 exports.zCustomThemeConfig = __webpack_exports__.zCustomThemeConfig;
 exports.zDataset = __webpack_exports__.zDataset;
@@ -1691,8 +2898,17 @@ exports.zMeasures = __webpack_exports__.zMeasures;
 exports.zTheme = __webpack_exports__.zTheme;
 exports.zTooltip = __webpack_exports__.zTooltip;
 exports.zUnfoldInfo = __webpack_exports__.zUnfoldInfo;
+exports.zXBandAxis = __webpack_exports__.zXBandAxis;
+exports.zXLinearAxis = __webpack_exports__.zXLinearAxis;
+exports.zYBandAxis = __webpack_exports__.zYBandAxis;
+exports.zYLinearAxis = __webpack_exports__.zYLinearAxis;
 for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "Builder",
+    "FoldMeasureId",
+    "FoldMeasureName",
+    "FoldMeasureValue",
+    "Separator",
+    "UnfoldDimensionGroup",
     "areaAdvancedPipeline",
     "areaPercentAdvancedPipeline",
     "areaPercentSpecPipeline",
@@ -1714,11 +2930,14 @@ for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "dataReshapeFor2D1M",
     "execPipeline",
     "foldMeasures",
+    "isPivotChart",
     "isVChart",
     "isVTable",
     "lightTheme",
     "lineAdvancedPipeline",
     "lineSpecPipeline",
+    "pieAdvancedPipeline",
+    "pieSpecPipeline",
     "registerAll",
     "registerArea",
     "registerAreaPercent",
@@ -1733,10 +2952,12 @@ for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "registerLightTheme",
     "registerLine",
     "unfoldDimensions",
+    "zAxis",
     "zBackgroundColor",
     "zBaseConfig",
     "zChartType",
     "zColor",
+    "zConfig",
     "zCustomTheme",
     "zCustomThemeConfig",
     "zDataset",
@@ -1753,7 +2974,11 @@ for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "zMeasures",
     "zTheme",
     "zTooltip",
-    "zUnfoldInfo"
+    "zUnfoldInfo",
+    "zXBandAxis",
+    "zXLinearAxis",
+    "zYBandAxis",
+    "zYLinearAxis"
 ].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
 Object.defineProperty(exports, '__esModule', {
     value: true