@visactor/vseed 0.0.8 → 0.0.10

package/dist/index.cjs

@@ -41,20 +41,24 @@ __webpack_require__.d(__webpack_exports__, {
     columnPercentAdvancedPipeline: ()=>columnPercentAdvancedPipeline,
     zAxis: ()=>zAxis,
     isVTable: ()=>isVTable,
+    zAnnotation: ()=>zAnnotation,
     columnSpecPipeline: ()=>columnSpecPipeline,
     UnfoldDimensionGroup: ()=>UnfoldDimensionGroup,
     zDatasetReshapeInfo: ()=>zDatasetReshapeInfo,
     zFoldInfo: ()=>zFoldInfo,
     zYBandAxis: ()=>zYBandAxis,
+    ORIGINAL_DATA: ()=>ORIGINAL_DATA,
     zYLinearAxis: ()=>zYLinearAxis,
+    zMarkStyle: ()=>zMarkStyle,
     Separator: ()=>Separator,
     columnAdvancedPipeline: ()=>columnAdvancedPipeline,
     columnParallelSpecPipeline: ()=>columnParallelSpecPipeline,
     zLabel: ()=>zLabel,
     registerColumn: ()=>registerColumn,
-    zDimension: ()=>zDimension,
+    zAnnotationPoint: ()=>zAnnotationPoint,
     lightTheme: ()=>lightTheme,
     registerColumnParallel: ()=>registerColumnParallel,
+    zDimension: ()=>zDimension,
     isPivotChart: ()=>isPivotChart,
     zCustomTheme: ()=>zCustomTheme,
     zXBandAxis: ()=>zXBandAxis,
@@ -75,6 +79,7 @@ __webpack_require__.d(__webpack_exports__, {
     zXLinearAxis: ()=>zXLinearAxis,
     zConfig: ()=>zConfig,
     zDatum: ()=>zDatum,
+    zBarStyle: ()=>zBarStyle,
     barAdvancedPipeline: ()=>barAdvancedPipeline,
     zCustomThemeConfig: ()=>zCustomThemeConfig,
     columnParallelAdvancedPipeline: ()=>columnParallelAdvancedPipeline,
@@ -83,8 +88,8 @@ __webpack_require__.d(__webpack_exports__, {
     foldMeasures: ()=>foldMeasures,
     dataReshapeFor2D1M: ()=>dataReshapeFor2D1M,
     registerLightTheme: ()=>registerLightTheme,
-    zChartType: ()=>zChartType,
     registerDarkTheme: ()=>registerDarkTheme,
+    zChartType: ()=>zChartType,
     barParallelAdvancedPipeline: ()=>barParallelAdvancedPipeline,
     FoldMeasureValue: ()=>FoldMeasureValue,
     barPercentSpecPipeline: ()=>barPercentSpecPipeline,
@@ -225,6 +230,7 @@ const FoldMeasureValue = '__MeaValue__';
 const FoldMeasureId = '__MeaId__';
 const UnfoldDimensionGroup = '__DimGroup__';
 const Separator = '-';
+const ORIGINAL_DATA = '__OriginalData__';
 const external_remeda_namespaceObject = require("remeda");
 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');
@@ -263,12 +269,15 @@ const foldMeasures = (dataset, measures, measureId = FoldMeasureId, measureName
     };
     const result = new Array(dataset.length * measures.length);
     let index = 0;
+    const ids = measures.map((d)=>d.id);
     for(let i = 0; i < dataset.length; i++)for(let j = 0; j < measures.length; j++){
-        const datum = {
+        const datum = (0, external_remeda_namespaceObject.omit)({
             ...dataset[i]
-        };
+        }, ids);
+        datum[ORIGINAL_DATA] = dataset[i];
         const measure = measures[j];
         const { id, alias } = measure;
+        datum[id] = dataset[i][id];
         datum[measureId] = id;
         datum[measureName] = alias;
         datum[measureValue] = dataset[i][id];
@@ -531,15 +540,16 @@ const encodingXY = (advancedVSeed)=>{
     if (!datasetReshapeInfo || !dimensions) return result;
     const encoding = datasetReshapeInfo.reduce((prev, cur)=>{
         const { foldInfo, unfoldInfo } = cur;
-        const isSingleDimension = 0 === dimensions.length;
+        const isSingleDimension = 1 === dimensions.length;
+        const isZeroDimension = 0 === dimensions.length;
         const x = [
-            isSingleDimension ? foldInfo.measureName : dimensions[0].id
+            isZeroDimension ? foldInfo.measureName : dimensions[0].id
         ];
         const y = [
             foldInfo.measureValue
         ];
         const group = [
-            isSingleDimension ? foldInfo.measureName : unfoldInfo.groupName
+            isSingleDimension || isZeroDimension ? foldInfo.measureName : unfoldInfo.groupName
         ];
         const color = [
             foldInfo.measureName
@@ -567,15 +577,16 @@ const encodingYX = (advancedVSeed)=>{
     if (!datasetReshapeInfo || !dimensions) return result;
     const encoding = datasetReshapeInfo.reduce((prev, cur)=>{
         const { foldInfo, unfoldInfo } = cur;
-        const isSingleDimension = 0 === dimensions.length;
+        const isZeroDimension = 0 === dimensions.length;
+        const isSingleDimension = 1 === dimensions.length;
         const y = [
-            isSingleDimension ? foldInfo.measureName : dimensions[0].id
+            isZeroDimension ? foldInfo.measureName : dimensions[0].id
         ];
         const x = [
             foldInfo.measureValue
         ];
         const group = [
-            isSingleDimension ? foldInfo.measureName : unfoldInfo.groupName
+            isSingleDimension || isZeroDimension ? foldInfo.measureName : unfoldInfo.groupName
         ];
         const color = [
             foldInfo.measureName
@@ -725,6 +736,26 @@ const pivotAdapter = (pipeline, pivotPipeline)=>(advancedVSeed, context)=>{
         if (usePivotChart) return execPipeline(pivotPipeline, context, advancedVSeed);
         return execPipeline(pipeline, context, advancedVSeed);
     };
+const markStyle_markStyle = (advancedVSeed, context)=>{
+    const { vseed } = context;
+    const markStyle = (0, external_remeda_namespaceObject.pick)(vseed, [
+        'barStyle'
+    ]);
+    return {
+        ...advancedVSeed,
+        markStyle
+    };
+};
+const annotation_annotation = (advancedVSeed, context)=>{
+    const { vseed } = context;
+    const annotation = (0, external_remeda_namespaceObject.pick)(vseed, [
+        'annotationPoint'
+    ]);
+    return {
+        ...advancedVSeed,
+        annotation
+    };
+};
 const lineAdvancedPipeline = [
     initAdvancedVSeed,
     autoMeasures,
@@ -737,7 +768,8 @@ const lineAdvancedPipeline = [
     encodingXY,
     vchartBaseConfig,
     lineConfig,
-    vchartTheme
+    vchartTheme,
+    annotation_annotation
 ];
 const barAdvancedPipeline = [
     initAdvancedVSeed,
@@ -751,7 +783,9 @@ const barAdvancedPipeline = [
     encodingYX,
     barConfig,
     vchartBaseConfig,
-    vchartTheme
+    vchartTheme,
+    markStyle_markStyle,
+    annotation_annotation
 ];
 const barParallelAdvancedPipeline = [
     initAdvancedVSeed,
@@ -765,7 +799,9 @@ const barParallelAdvancedPipeline = [
     encodingYX,
     barParallelConfig,
     vchartBaseConfig,
-    vchartTheme
+    vchartTheme,
+    markStyle_markStyle,
+    annotation_annotation
 ];
 const barPercentAdvancedPipeline = [
     initAdvancedVSeed,
@@ -779,7 +815,9 @@ const barPercentAdvancedPipeline = [
     encodingYX,
     barPercentConfig,
     vchartBaseConfig,
-    vchartTheme
+    vchartTheme,
+    markStyle_markStyle,
+    annotation_annotation
 ];
 const columnAdvancedPipeline = [
     initAdvancedVSeed,
@@ -793,7 +831,9 @@ const columnAdvancedPipeline = [
     encodingXY,
     columnConfig,
     vchartBaseConfig,
-    vchartTheme
+    vchartTheme,
+    markStyle_markStyle,
+    annotation_annotation
 ];
 const columnParallelAdvancedPipeline = [
     initAdvancedVSeed,
@@ -807,7 +847,9 @@ const columnParallelAdvancedPipeline = [
     encodingXY,
     columnParallelConfig,
     vchartBaseConfig,
-    vchartTheme
+    vchartTheme,
+    markStyle_markStyle,
+    annotation_annotation
 ];
 const columnPercentAdvancedPipeline = [
     initAdvancedVSeed,
@@ -821,7 +863,9 @@ const columnPercentAdvancedPipeline = [
     encodingXY,
     columnPercentConfig,
     vchartBaseConfig,
-    vchartTheme
+    vchartTheme,
+    markStyle_markStyle,
+    annotation_annotation
 ];
 const areaAdvancedPipeline = [
     initAdvancedVSeed,
@@ -835,7 +879,8 @@ const areaAdvancedPipeline = [
     encodingXY,
     areaConfig,
     vchartBaseConfig,
-    vchartTheme
+    vchartTheme,
+    annotation_annotation
 ];
 const areaPercentAdvancedPipeline = [
     initAdvancedVSeed,
@@ -849,7 +894,8 @@ const areaPercentAdvancedPipeline = [
     encodingXY,
     areaPercentConfig,
     vchartBaseConfig,
-    vchartTheme
+    vchartTheme,
+    annotation_annotation
 ];
 const pieAdvancedPipeline = [
     initAdvancedVSeed,
@@ -863,7 +909,8 @@ const pieAdvancedPipeline = [
     encodingPolar,
     pieConfig,
     vchartBaseConfig,
-    vchartTheme
+    vchartTheme,
+    annotation_annotation
 ];
 const dataset_dataset = (spec, context)=>{
     const { advancedVSeed } = context;
@@ -1392,11 +1439,11 @@ const percent = (spec, context)=>{
     result.percent = true;
     return result;
 };
-const stack = (spec, context)=>{
+const stackInverse = (spec)=>{
     const result = {
         ...spec
     };
-    result.stack = true;
+    result.stackInverse = true;
     return result;
 };
 const background_backgroundColor = (spec, context)=>{
@@ -1442,24 +1489,103 @@ const label_label = (spec, context)=>{
     };
     return result;
 };
-const defaultLegend = {
-    enable: true
-};
-const legend_legend = (spec, context)=>{
+const discreteLegend = (spec, context)=>{
     const result = {
         ...spec
     };
     const { advancedVSeed } = context;
     const baseConfig = advancedVSeed.baseConfig.vchart;
     if (!baseConfig || !baseConfig.legend) return result;
-    const { legend = defaultLegend } = baseConfig;
-    const { enable } = legend;
+    const { legend } = baseConfig;
+    const { enable, position = 'bottom', labelFontColor, labelFontSize = 12, labelFontWeight, maxSize, border, shapeType = 'rectRound' } = legend || {};
+    const orient = [
+        'bottom',
+        'bottomLeft',
+        'bottomRight',
+        'bl',
+        'br'
+    ].includes(position) ? 'bottom' : [
+        'top',
+        'topLeft',
+        'topRight',
+        'tl',
+        'tr'
+    ].includes(position) ? 'top' : [
+        'left',
+        'leftTop',
+        'leftBottom',
+        'lt',
+        'lb'
+    ].includes(position) ? 'left' : 'right';
+    const legendPosition = [
+        'topLeft',
+        'bottomLeft',
+        'leftTop',
+        'rightTop',
+        'lt',
+        'rt',
+        'tl',
+        'bl'
+    ].includes(position) ? 'start' : [
+        'topRight',
+        'bottomRight',
+        'leftBottom',
+        'rightBottom',
+        'lb',
+        'rb',
+        'rt',
+        'br'
+    ].includes(position) ? 'end' : 'middle';
     result.legends = {
-        visible: enable
+        type: 'discrete',
+        visible: enable,
+        maxCol: maxSize,
+        maxRow: maxSize,
+        autoPage: true,
+        orient,
+        position: legendPosition,
+        data: border ? (items)=>items.map((item)=>{
+                item.shape.outerBorder = {
+                    stroke: item.shape.fill,
+                    distance: 3,
+                    lineWidth: 1
+                };
+                return item;
+            }) : void 0,
+        item: {
+            focus: true,
+            focusIconStyle: {
+                size: labelFontSize + 2,
+                fill: labelFontColor,
+                fontWeight: labelFontWeight
+            },
+            shape: {
+                space: border ? 6 : 4,
+                style: {
+                    symbolType: shapeType,
+                    size: border ? 8 : 10
+                }
+            },
+            label: {
+                style: {
+                    fontSize: labelFontSize,
+                    fill: labelFontColor,
+                    fontWeight: labelFontWeight
+                }
+            },
+            background: {
+                state: {
+                    selectedHover: {
+                        fill: labelFontColor,
+                        fillOpacity: 0.05
+                    }
+                }
+            }
+        }
     };
     return result;
 };
-const pivotLegend = (spec, context)=>{
+const pivotDiscreteLegend = (spec, context)=>{
     const result = {
         ...spec
     };
@@ -1469,38 +1595,94 @@ const pivotLegend = (spec, context)=>{
     const { datasetReshapeInfo } = advancedVSeed;
     const colorItems = (0, external_remeda_namespaceObject.unique)(datasetReshapeInfo.flatMap((d)=>d.unfoldInfo.colorItems));
     const { legend, color } = baseConfig;
-    const { enable } = legend;
     const { colorScheme } = color;
+    const { enable, position = 'bottom', labelFontColor, labelFontSize = 12, labelFontWeight, maxSize, border, shapeType = 'rectRound' } = legend || {};
+    const orient = [
+        'bottom',
+        'bottomLeft',
+        'bottomRight',
+        'bl',
+        'br'
+    ].includes(position) ? 'bottom' : [
+        'top',
+        'topLeft',
+        'topRight',
+        'tl',
+        'tr'
+    ].includes(position) ? 'top' : [
+        'left',
+        'leftTop',
+        'leftBottom',
+        'lt',
+        'lb'
+    ].includes(position) ? 'left' : 'right';
+    const legendPosition = [
+        'topLeft',
+        'bottomLeft',
+        'leftTop',
+        'rightTop',
+        'lt',
+        'rt',
+        'tl',
+        'bl'
+    ].includes(position) ? 'start' : [
+        'topRight',
+        'bottomRight',
+        'leftBottom',
+        'rightBottom',
+        'lb',
+        'rb',
+        'rt',
+        'br'
+    ].includes(position) ? 'end' : 'middle';
     const legends = {
         visible: enable,
-        alignSelf: 'end',
         type: 'discrete',
-        position: 'middle',
+        orient,
+        position: legendPosition,
+        maxCol: maxSize,
+        maxRow: maxSize,
         data: colorItems.map((d, index)=>({
                 label: d,
                 shape: {
-                    symbolType: 'square',
+                    outerBorder: border ? {
+                        stroke: colorScheme[index],
+                        distance: 3,
+                        lineWidth: 1
+                    } : void 0,
                     fill: colorScheme[index]
                 }
             })),
         item: {
+            focus: true,
+            focusIconStyle: {
+                size: labelFontSize + 2,
+                fill: labelFontColor,
+                fontWeight: labelFontWeight
+            },
+            shape: {
+                space: border ? 6 : 4,
+                style: {
+                    symbolType: shapeType,
+                    size: border ? 8 : 10
+                }
+            },
+            label: {
+                style: {
+                    fontSize: labelFontSize,
+                    fill: labelFontColor,
+                    fontWeight: labelFontWeight
+                }
+            },
             background: {
-                visible: true,
                 state: {
                     selectedHover: {
-                        fill: '#000000',
+                        fill: labelFontColor,
                         fillOpacity: 0.05
                     }
                 }
-            },
-            label: {
-                style: {
-                    fontSize: 12,
-                    fill: '#6F6F6F'
-                }
             }
-        },
-        orient: 'bottom'
+        }
     };
     return {
         ...result,
@@ -1749,6 +1931,192 @@ const pivotRowDimensions = (spec, context)=>{
         rows: rows
     };
 };
+const selector_selector = (datum, selector)=>{
+    if (!selector) return true;
+    const selectors = Array.isArray(selector) ? selector : [
+        selector
+    ];
+    for (const selector of selectors)if (isValueSelector(selector)) {
+        if (Object.values(datum).find((v)=>v === selector)) return true;
+    } else if (isMeasureSelector(selector)) {
+        const selectorValueArr = Array.isArray(selector.value) ? selector.value : [
+            selector.value
+        ];
+        switch(selector.operator){
+            case '=':
+                if (datum[selector.field] === selectorValueArr[0]) return true;
+                break;
+            case '!=':
+                if (datum[selector.field] !== selectorValueArr[0]) return true;
+                break;
+            case '>':
+                if (datum[selector.field] > selectorValueArr[0]) return true;
+                break;
+            case '<':
+                if (datum[selector.field] < selectorValueArr[0]) return true;
+                break;
+            case '>=':
+                if (datum[selector.field] >= selectorValueArr[0]) return true;
+                break;
+            case '<=':
+                if (datum[selector.field] <= selectorValueArr[0]) return true;
+                break;
+            case 'between':
+                if (Array.isArray(selector.value) && datum[selector.field] >= selectorValueArr[0] && datum[selector.field] <= selectorValueArr[1]) return true;
+                break;
+            default:
+                break;
+        }
+    } else if (isDimensionSelector(selector)) {
+        const selectorValueArr = Array.isArray(selector.value) ? selector.value : [
+            selector.value
+        ];
+        if ('in' === selector.operator && selectorValueArr.includes(datum[selector.field])) return true;
+        if ('not in' === selector.operator && !selectorValueArr.includes(datum[selector.field])) return true;
+    } else if (isPartialDatumSelector(selector)) {
+        if (Object.keys(selector).every((key)=>datum[key] === selector[key])) return true;
+    }
+    return false;
+};
+const isValueSelector = (selector)=>'string' == typeof selector || 'number' == typeof selector;
+const isPartialDatumSelector = (selector)=>'object' == typeof selector && null !== selector;
+const isMeasureSelector = (selector)=>'object' == typeof selector && null !== selector && 'field' in selector && 'operator' in selector && 'value' in selector && [
+        '=',
+        '!=',
+        '>',
+        '<',
+        '>=',
+        '<=',
+        'between'
+    ].includes(selector.operator);
+const isDimensionSelector = (selector)=>'object' == typeof selector && null !== selector && 'field' in selector && 'operator' in selector && 'value' in selector && [
+        'in',
+        'not in'
+    ].includes(selector.operator);
+const barStyle_barStyle = (spec, context)=>{
+    const { advancedVSeed } = context;
+    const { markStyle, encoding } = advancedVSeed;
+    const { barStyle } = markStyle;
+    if (!barStyle) return spec;
+    const result = {
+        ...spec
+    };
+    const { selector: barSelector, barBorderColor, barBorderStyle, barBorderWidth, barColor, barColorOpacity, barRadius } = barStyle;
+    return {
+        ...result,
+        bar: {
+            style: {
+                fill: barColor ? (datum, context)=>{
+                    if (selector_selector(datum, barSelector)) return barColor;
+                    return context.seriesColor(datum[encoding[0]?.group?.[0]]);
+                } : void 0,
+                fillOpacity: barColorOpacity ? (datum)=>{
+                    if (selector_selector(datum, barSelector)) return barColorOpacity;
+                    return 1;
+                } : void 0,
+                stroke: barBorderColor ? (datum, context)=>{
+                    if (selector_selector(datum, barSelector)) return barBorderColor;
+                    return context.seriesColor(datum[encoding[0]?.group?.[0]]);
+                } : void 0,
+                lineWidth: barBorderWidth ? (datum)=>{
+                    if (selector_selector(datum, barSelector)) return barBorderWidth;
+                    return 0;
+                } : void 0,
+                lineDash: barBorderStyle ? (datum)=>{
+                    if (selector_selector(datum, barSelector)) {
+                        if ('solid' === barBorderStyle) ;
+                        else if ('dashed' === barBorderStyle) return [
+                            5,
+                            5
+                        ];
+                        else if ('dotted' === barBorderStyle) return [
+                            1,
+                            5
+                        ];
+                    }
+                    return [
+                        0,
+                        0
+                    ];
+                } : void 0,
+                cornerRadius: barRadius ? (datum)=>{
+                    if (selector_selector(datum, barSelector)) return barRadius;
+                    return 0;
+                } : void 0
+            }
+        }
+    };
+};
+const annotationPoint_annotationPoint = (spec, context)=>{
+    const { advancedVSeed } = context;
+    const { annotation } = advancedVSeed;
+    if (!annotation || !annotation.annotationPoint) return spec;
+    const { annotationPoint } = annotation;
+    const annotationPointList = Array.isArray(annotationPoint) ? annotationPoint : [
+        annotationPoint
+    ];
+    const markPoint = annotationPointList.flatMap((annotationPoint)=>{
+        const { selector: selectorPoint, text = '', textColor = '#ffffff', textFontSize = 12, textFontWeight = 400, textAlign = 'center', textBaseline = 'middle', backgroundBorderColor, backgroundBorderRadius = 4, backgroundBorderWidth = 1, backgroundColor = '#212121', backgroundPadding = 4, backgroundVisible = true, offsetX = 0, offsetY = 0 } = annotationPoint;
+        const dataset = advancedVSeed.dataset.flat();
+        const selectedData = dataset.filter((datum)=>selector_selector(datum, selectorPoint));
+        return selectedData.map((datum)=>({
+                regionRelative: true,
+                position: (data, context)=>{
+                    const targetDatum = data.find((item)=>isSubset(datum, item));
+                    if (targetDatum) {
+                        const { x, y } = context.dataToPosition(targetDatum);
+                        const xBandWidth = context.scaleX?.bandwidth?.();
+                        const yBandWidth = context.scaleY?.bandwidth?.();
+                        if (xBandWidth) return {
+                            x: x,
+                            y: y
+                        };
+                        if (yBandWidth) return {
+                            x,
+                            y: y
+                        };
+                    }
+                },
+                itemLine: {
+                    visible: false
+                },
+                itemContent: {
+                    offsetY,
+                    offsetX,
+                    text: {
+                        visible: true,
+                        text: text,
+                        style: {
+                            textAlign: textAlign,
+                            textBaseline: textBaseline,
+                            fill: textColor,
+                            fontSize: textFontSize,
+                            fontWeight: textFontWeight
+                        },
+                        labelBackground: {
+                            visible: backgroundVisible,
+                            padding: backgroundPadding,
+                            style: {
+                                cornerRadius: backgroundBorderRadius ?? 4,
+                                fill: backgroundColor,
+                                stroke: backgroundBorderColor,
+                                strokeWidth: backgroundBorderWidth
+                            }
+                        }
+                    }
+                }
+            }));
+    });
+    return {
+        ...spec,
+        markPoint
+    };
+};
+const isSubset = (sub, obj)=>Object.entries(sub).every(([key, value])=>{
+        if ('string' == typeof value) return obj[key] === value;
+        if ('number' == typeof value) return obj[key] === value;
+        return true;
+    });
 const line_line = [
     initLine,
     color_color,
@@ -1758,7 +2126,8 @@ const line_line = [
     yLinear,
     label_label,
     tooltip_tooltip,
-    legend_legend
+    discreteLegend,
+    annotationPoint_annotationPoint
 ];
 const pivotLine = [
     initPivot,
@@ -1773,17 +2142,19 @@ const pivotLine = [
         xBand,
         yLinear,
         label_label,
-        tooltip_tooltip
+        tooltip_tooltip,
+        annotationPoint_annotationPoint
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotLegend
+    pivotDiscreteLegend
 ];
 const lineSpecPipeline = [
     pivotAdapter_pivotAdapter(line_line, pivotLine)
 ];
 const column = [
     initColumn,
+    stackInverse,
     color_color,
     background_backgroundColor,
     dataset_dataset,
@@ -1791,7 +2162,9 @@ const column = [
     yLinear,
     label_label,
     tooltip_tooltip,
-    legend_legend
+    discreteLegend,
+    barStyle_barStyle,
+    annotationPoint_annotationPoint
 ];
 const pivotColumn = [
     initPivot,
@@ -1800,17 +2173,20 @@ const pivotColumn = [
     datasetPivot,
     pivotIndicators([
         initColumn,
+        stackInverse,
         color_color,
         background_backgroundColor,
         datasetPivotPlaceholder,
         xBand,
         yLinear,
         label_label,
-        tooltip_tooltip
+        tooltip_tooltip,
+        barStyle_barStyle,
+        annotationPoint_annotationPoint
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotLegend
+    pivotDiscreteLegend
 ];
 const columnSpecPipeline = [
     pivotAdapter_pivotAdapter(column, pivotColumn)
@@ -1824,7 +2200,9 @@ const columnParallel = [
     yLinear,
     label_label,
     tooltip_tooltip,
-    legend_legend
+    discreteLegend,
+    barStyle_barStyle,
+    annotationPoint_annotationPoint
 ];
 const pivotColumnParallel = [
     initPivot,
@@ -1839,17 +2217,20 @@ const pivotColumnParallel = [
         xBand,
         yLinear,
         label_label,
-        tooltip_tooltip
+        tooltip_tooltip,
+        barStyle_barStyle,
+        annotationPoint_annotationPoint
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotLegend
+    pivotDiscreteLegend
 ];
 const columnParallelSpecPipeline = [
     pivotAdapter_pivotAdapter(columnParallel, pivotColumnParallel)
 ];
 const columnPercent = [
     initColumn,
+    stackInverse,
     color_color,
     background_backgroundColor,
     percent,
@@ -1858,7 +2239,9 @@ const columnPercent = [
     yLinear,
     label_label,
     tooltip_tooltip,
-    legend_legend
+    discreteLegend,
+    barStyle_barStyle,
+    annotationPoint_annotationPoint
 ];
 const pivotColumnPercent = [
     initPivot,
@@ -1867,6 +2250,7 @@ const pivotColumnPercent = [
     datasetPivot,
     pivotIndicators([
         initColumn,
+        stackInverse,
         color_color,
         percent,
         background_backgroundColor,
@@ -1874,11 +2258,13 @@ const pivotColumnPercent = [
         xBand,
         yLinear,
         label_label,
-        tooltip_tooltip
+        tooltip_tooltip,
+        barStyle_barStyle,
+        annotationPoint_annotationPoint
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotLegend
+    pivotDiscreteLegend
 ];
 const columnPercentSpecPipeline = [
     pivotAdapter_pivotAdapter(columnPercent, pivotColumnPercent)
@@ -1892,7 +2278,9 @@ const bar = [
     yBand,
     label_label,
     tooltip_tooltip,
-    legend_legend
+    discreteLegend,
+    barStyle_barStyle,
+    annotationPoint_annotationPoint
 ];
 const pivotBar = [
     initPivot,
@@ -1907,11 +2295,13 @@ const pivotBar = [
         yBand,
         label_label,
         label_label,
-        tooltip_tooltip
+        tooltip_tooltip,
+        barStyle_barStyle,
+        annotationPoint_annotationPoint
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotLegend
+    pivotDiscreteLegend
 ];
 const barSpecPipeline = [
     pivotAdapter_pivotAdapter(bar, pivotBar)
@@ -1925,7 +2315,9 @@ const barParallel = [
     yBand,
     label_label,
     tooltip_tooltip,
-    legend_legend
+    discreteLegend,
+    barStyle_barStyle,
+    annotationPoint_annotationPoint
 ];
 const pivotBarParallel = [
     initPivot,
@@ -1940,11 +2332,13 @@ const pivotBarParallel = [
         yBand,
         xLinear,
         label_label,
-        tooltip_tooltip
+        tooltip_tooltip,
+        barStyle_barStyle,
+        annotationPoint_annotationPoint
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotLegend
+    pivotDiscreteLegend
 ];
 const barParallelSpecPipeline = [
     pivotAdapter_pivotAdapter(barParallel, pivotBarParallel)
@@ -1959,7 +2353,9 @@ const barPercent = [
     yBand,
     label_label,
     tooltip_tooltip,
-    legend_legend
+    discreteLegend,
+    barStyle_barStyle,
+    annotationPoint_annotationPoint
 ];
 const pivotBarPercent = [
     initPivot,
@@ -1975,26 +2371,29 @@ const pivotBarPercent = [
         yBand,
         xLinear,
         label_label,
-        tooltip_tooltip
+        tooltip_tooltip,
+        barStyle_barStyle,
+        annotationPoint_annotationPoint
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotLegend
+    pivotDiscreteLegend
 ];
 const barPercentSpecPipeline = [
     pivotAdapter_pivotAdapter(barPercent, pivotBarPercent)
 ];
 const area_area = [
     initArea,
+    stackInverse,
     color_color,
     background_backgroundColor,
-    stack,
     dataset_dataset,
     xBand,
     yLinear,
     label_label,
     tooltip_tooltip,
-    legend_legend
+    discreteLegend,
+    annotationPoint_annotationPoint
 ];
 const pivotArea = [
     initPivot,
@@ -2005,22 +2404,24 @@ const pivotArea = [
         initArea,
         color_color,
         background_backgroundColor,
-        stack,
+        stackInverse,
         datasetPivotPlaceholder,
         xBand,
         yLinear,
         label_label,
-        tooltip_tooltip
+        tooltip_tooltip,
+        annotationPoint_annotationPoint
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotLegend
+    pivotDiscreteLegend
 ];
 const areaSpecPipeline = [
     pivotAdapter_pivotAdapter(area_area, pivotArea)
 ];
 const areaPercent = [
     initArea,
+    stackInverse,
     color_color,
     background_backgroundColor,
     percent,
@@ -2029,7 +2430,8 @@ const areaPercent = [
     yLinear,
     label_label,
     tooltip_tooltip,
-    legend_legend
+    discreteLegend,
+    annotationPoint_annotationPoint
 ];
 const pivotAreaPercent = [
     initPivot,
@@ -2038,6 +2440,7 @@ const pivotAreaPercent = [
     datasetPivot,
     pivotIndicators([
         initArea,
+        stackInverse,
         color_color,
         background_backgroundColor,
         percent,
@@ -2045,11 +2448,12 @@ const pivotAreaPercent = [
         xBand,
         yLinear,
         label_label,
-        tooltip_tooltip
+        tooltip_tooltip,
+        annotationPoint_annotationPoint
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotLegend
+    pivotDiscreteLegend
 ];
 const areaPercentSpecPipeline = [
     pivotAdapter_pivotAdapter(areaPercent, pivotAreaPercent)
@@ -2061,7 +2465,8 @@ const pie = [
     dataset_dataset,
     label_label,
     tooltip_tooltip,
-    legend_legend
+    discreteLegend,
+    annotationPoint_annotationPoint
 ];
 const pivotPie = [
     initPivot,
@@ -2074,11 +2479,12 @@ const pivotPie = [
         background_backgroundColor,
         datasetPivotPlaceholder,
         label_label,
-        tooltip_tooltip
+        tooltip_tooltip,
+        annotationPoint_annotationPoint
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotLegend
+    pivotDiscreteLegend
 ];
 const pieSpecPipeline = [
     pivotAdapter_pivotAdapter(pie, pivotPie)
@@ -2215,18 +2621,18 @@ const lightTheme = ()=>{
         },
         grid: {
             visible: true,
-            gridColor: 'rgba(54, 65, 89, 0.15)',
+            gridColor: '#36415926',
             gridWidth: 0.5
         },
         tick: {
             visible: false,
             tickInside: false,
             tickSize: 4,
-            tickColor: 'rgba(54, 65, 89, 0.30)'
+            tickColor: '#3641594d'
         },
         line: {
             visible: false,
-            lineColor: 'rgba(54, 65, 89, 0.30)',
+            lineColor: '#3641594d',
             lineWidth: 1
         }
     };
@@ -2257,18 +2663,18 @@ const lightTheme = ()=>{
         },
         grid: {
             visible: false,
-            gridColor: 'rgba(54, 65, 89, 0.15)',
+            gridColor: '#36415926',
             gridWidth: 0.5
         },
         tick: {
             visible: false,
             tickInside: false,
             tickSize: 4,
-            tickColor: 'rgba(54, 65, 89, 0.30)'
+            tickColor: '#3641594d'
         },
         line: {
             visible: true,
-            lineColor: 'rgba(54, 65, 89, 0.30)',
+            lineColor: '#3641594d',
             lineWidth: 1
         }
     };
@@ -2288,10 +2694,10 @@ const lightTheme = ()=>{
     return {
         baseConfig: {
             vtable: {
-                backgroundColor: '#ffffff'
+                backgroundColor: 'transparent'
             },
             vchart: {
-                backgroundColor: '#ffffff',
+                backgroundColor: 'transparent',
                 color: {
                     colorScheme: [
                         '#8D72F6',
@@ -2313,7 +2719,14 @@ const lightTheme = ()=>{
                     enable: true
                 },
                 legend: {
-                    enable: true
+                    enable: true,
+                    border: true,
+                    maxSize: 1,
+                    shapeType: 'rectRound',
+                    position: 'rt',
+                    labelFontColor: '#646A73',
+                    labelFontSize: 12,
+                    labelFontWeight: 400
                 }
             }
         },
@@ -2437,10 +2850,10 @@ const darkTheme = ()=>{
     return {
         baseConfig: {
             vtable: {
-                backgroundColor: '#141414'
+                backgroundColor: 'transparent'
             },
             vchart: {
-                backgroundColor: '#141414',
+                backgroundColor: 'transparent',
                 color: {
                     colorScheme: [
                         '#2E62F1',
@@ -2462,7 +2875,14 @@ const darkTheme = ()=>{
                     enable: true
                 },
                 legend: {
-                    enable: true
+                    enable: true,
+                    border: true,
+                    maxSize: 1,
+                    position: 'rt',
+                    shapeType: 'rectRound',
+                    labelFontColor: '#FDFDFD',
+                    labelFontSize: 12,
+                    labelFontWeight: 400
                 }
             }
         },
@@ -2629,7 +3049,58 @@ const zTooltip = external_zod_namespaceObject.z.object({
     enable: external_zod_namespaceObject.z.boolean().default(true).optional()
 });
 const zLegend = external_zod_namespaceObject.z.object({
-    enable: external_zod_namespaceObject.z.boolean().default(true).optional()
+    enable: external_zod_namespaceObject.z.boolean().default(true).optional(),
+    border: external_zod_namespaceObject.z.boolean().default(true).optional(),
+    maxSize: external_zod_namespaceObject.z.number().default(1).optional(),
+    shapeType: external_zod_namespaceObject.z["enum"]([
+        'circle',
+        'cross',
+        'diamond',
+        'square',
+        'arrow',
+        'arrow2Left',
+        'arrow2Right',
+        'wedge',
+        'thinTriangle',
+        'triangle',
+        'triangleUp',
+        'triangleDown',
+        'triangleRight',
+        'triangleLeft',
+        'stroke',
+        'star',
+        'wye',
+        'rect',
+        'arrowLeft',
+        'arrowRight',
+        'rectRound',
+        'roundLine'
+    ]).default('rectRound').optional(),
+    position: external_zod_namespaceObject.z["enum"]([
+        'left',
+        'leftTop',
+        'leftBottom',
+        'lt',
+        'lb',
+        'top',
+        'topLeft',
+        'topRight',
+        'tl',
+        'tr',
+        'right',
+        'rightTop',
+        'rightBottom',
+        'rt',
+        'rb',
+        'bottom',
+        'bottomLeft',
+        'bottomRight',
+        'bl',
+        'br'
+    ]).default('bottom').optional(),
+    labelFontSize: external_zod_namespaceObject.z.number().default(12).optional(),
+    labelFontColor: external_zod_namespaceObject.z.string().default('#fff').optional(),
+    labelFontWeight: external_zod_namespaceObject.z.number().or(external_zod_namespaceObject.z.string()).default(400).optional()
 });
 const zVChartBaseConfig = external_zod_namespaceObject.z.object({
     backgroundColor: zBackgroundColor,
@@ -2826,10 +3297,93 @@ const zCustomThemeConfig = external_zod_namespaceObject.z.object({
 });
 const zCustomTheme = external_zod_namespaceObject.z.record(external_zod_namespaceObject.z.string(), zCustomThemeConfig).optional();
 const zTheme = external_zod_namespaceObject.z.string();
+const zSelector = external_zod_namespaceObject.z.union([
+    external_zod_namespaceObject.z.string(),
+    external_zod_namespaceObject.z.number(),
+    external_zod_namespaceObject.z.object({
+        field: external_zod_namespaceObject.z.string(),
+        operator: external_zod_namespaceObject.z.string(),
+        value: external_zod_namespaceObject.z.union([
+            external_zod_namespaceObject.z.string(),
+            external_zod_namespaceObject.z.number(),
+            external_zod_namespaceObject.z.array(external_zod_namespaceObject.z.union([
+                external_zod_namespaceObject.z.string(),
+                external_zod_namespaceObject.z.number()
+            ]))
+        ])
+    }),
+    external_zod_namespaceObject.z.object({
+        field: external_zod_namespaceObject.z.string(),
+        operator: external_zod_namespaceObject.z.string(),
+        value: external_zod_namespaceObject.z.union([
+            external_zod_namespaceObject.z.string(),
+            external_zod_namespaceObject.z.number(),
+            external_zod_namespaceObject.z.array(external_zod_namespaceObject.z.union([
+                external_zod_namespaceObject.z.string(),
+                external_zod_namespaceObject.z.number()
+            ]))
+        ])
+    })
+]);
+const zSelectors = external_zod_namespaceObject.z.array(zSelector);
+const zBarStyle = external_zod_namespaceObject.z.object({
+    selector: external_zod_namespaceObject.z.union([
+        zSelector,
+        zSelectors
+    ]).optional(),
+    barColor: external_zod_namespaceObject.z.string().optional(),
+    barColorOpacity: external_zod_namespaceObject.z.number().optional(),
+    barBorderColor: external_zod_namespaceObject.z.string().optional(),
+    barBorderWidth: external_zod_namespaceObject.z.number().optional(),
+    barBorderStyle: external_zod_namespaceObject.z.union([
+        external_zod_namespaceObject.z.literal('solid'),
+        external_zod_namespaceObject.z.literal('dashed'),
+        external_zod_namespaceObject.z.literal('dotted')
+    ]).optional(),
+    barRadius: external_zod_namespaceObject.z.union([
+        external_zod_namespaceObject.z.number(),
+        external_zod_namespaceObject.z.array(external_zod_namespaceObject.z.number())
+    ]).optional()
+});
+const zMarkStyle = external_zod_namespaceObject.z.object({
+    barStyle: zBarStyle.optional()
+});
+const zAnnotationPoint = external_zod_namespaceObject.z.object({
+    selector: external_zod_namespaceObject.z.union([
+        zSelector,
+        zSelectors
+    ]),
+    text: external_zod_namespaceObject.z.string().or(external_zod_namespaceObject.z.array(external_zod_namespaceObject.z.string())).optional(),
+    textColor: external_zod_namespaceObject.z.string().default('#ffffff').optional(),
+    textFontSize: external_zod_namespaceObject.z.number().default(12).optional(),
+    textFontWeight: external_zod_namespaceObject.z.number().default(400).optional(),
+    textAlign: external_zod_namespaceObject.z["enum"]([
+        'left',
+        'right',
+        'center'
+    ]).default('center').optional(),
+    textBaseline: external_zod_namespaceObject.z["enum"]([
+        'top',
+        'middle',
+        'bottom'
+    ]).default('middle').optional(),
+    backgroundVisible: external_zod_namespaceObject.z.boolean().default(true).optional(),
+    backgroundColor: external_zod_namespaceObject.z.string().default('#212121').optional(),
+    backgroundBorderColor: external_zod_namespaceObject.z.string().optional(),
+    backgroundBorderWidth: external_zod_namespaceObject.z.number().default(1).optional(),
+    backgroundBorderRadius: external_zod_namespaceObject.z.number().default(4).optional(),
+    backgroundPadding: external_zod_namespaceObject.z.number().optional(),
+    offsetY: external_zod_namespaceObject.z.number().default(0).optional(),
+    offsetX: external_zod_namespaceObject.z.number().default(0).optional()
+});
+const zAnnotation = external_zod_namespaceObject.z.object({
+    annotationPoint: zAnnotationPoint.or(external_zod_namespaceObject.z.array(zAnnotationPoint)).optional()
+});
 exports.Builder = __webpack_exports__.Builder;
 exports.FoldMeasureId = __webpack_exports__.FoldMeasureId;
 exports.FoldMeasureName = __webpack_exports__.FoldMeasureName;
 exports.FoldMeasureValue = __webpack_exports__.FoldMeasureValue;
+exports.ORIGINAL_DATA = __webpack_exports__.ORIGINAL_DATA;
 exports.Separator = __webpack_exports__.Separator;
 exports.UnfoldDimensionGroup = __webpack_exports__.UnfoldDimensionGroup;
 exports.areaAdvancedPipeline = __webpack_exports__.areaAdvancedPipeline;
@@ -2875,8 +3429,11 @@ exports.registerDarkTheme = __webpack_exports__.registerDarkTheme;
 exports.registerLightTheme = __webpack_exports__.registerLightTheme;
 exports.registerLine = __webpack_exports__.registerLine;
 exports.unfoldDimensions = __webpack_exports__.unfoldDimensions;
+exports.zAnnotation = __webpack_exports__.zAnnotation;
+exports.zAnnotationPoint = __webpack_exports__.zAnnotationPoint;
 exports.zAxis = __webpack_exports__.zAxis;
 exports.zBackgroundColor = __webpack_exports__.zBackgroundColor;
+exports.zBarStyle = __webpack_exports__.zBarStyle;
 exports.zBaseConfig = __webpack_exports__.zBaseConfig;
 exports.zChartType = __webpack_exports__.zChartType;
 exports.zColor = __webpack_exports__.zColor;
@@ -2892,6 +3449,7 @@ exports.zEncoding = __webpack_exports__.zEncoding;
 exports.zFoldInfo = __webpack_exports__.zFoldInfo;
 exports.zLabel = __webpack_exports__.zLabel;
 exports.zLegend = __webpack_exports__.zLegend;
+exports.zMarkStyle = __webpack_exports__.zMarkStyle;
 exports.zMeasure = __webpack_exports__.zMeasure;
 exports.zMeasureGroup = __webpack_exports__.zMeasureGroup;
 exports.zMeasures = __webpack_exports__.zMeasures;
@@ -2907,6 +3465,7 @@ for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "FoldMeasureId",
     "FoldMeasureName",
     "FoldMeasureValue",
+    "ORIGINAL_DATA",
     "Separator",
     "UnfoldDimensionGroup",
     "areaAdvancedPipeline",
@@ -2952,8 +3511,11 @@ for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "registerLightTheme",
     "registerLine",
     "unfoldDimensions",
+    "zAnnotation",
+    "zAnnotationPoint",
     "zAxis",
     "zBackgroundColor",
+    "zBarStyle",
     "zBaseConfig",
     "zChartType",
     "zColor",
@@ -2969,6 +3531,7 @@ for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "zFoldInfo",
     "zLabel",
     "zLegend",
+    "zMarkStyle",
     "zMeasure",
     "zMeasureGroup",
     "zMeasures",