@visactor/vseed 0.0.8 → 0.0.10

package/dist/index.js

@@ -1,4 +1,4 @@
-import { clone as external_remeda_clone, mergeDeep as external_remeda_mergeDeep, pick as external_remeda_pick, unique } from "remeda";
+import { clone as external_remeda_clone, mergeDeep as external_remeda_mergeDeep, omit, pick as external_remeda_pick, unique } from "remeda";
 import { z } from "zod";
 const initAdvancedVSeed = (advancedVSeed, context)=>{
     const { vseed } = context;
@@ -128,6 +128,7 @@ const FoldMeasureValue = '__MeaValue__';
 const FoldMeasureId = '__MeaId__';
 const UnfoldDimensionGroup = '__DimGroup__';
 const Separator = '-';
+const ORIGINAL_DATA = '__OriginalData__';
 const unfoldDimensions = (dataset, dimensions, measures, unfoldStartIndex = 0, foldGroupName = UnfoldDimensionGroup, dimensionsSeparator = Separator)=>{
     if (unfoldStartIndex < 0 || unfoldStartIndex >= dimensions.length) throw new Error('unfoldStartIndex is out of range');
     const dimensionsToBeUnfolded = dimensions.slice(unfoldStartIndex);
@@ -165,12 +166,15 @@ const foldMeasures = (dataset, measures, measureId = FoldMeasureId, measureName
     };
     const result = new Array(dataset.length * measures.length);
     let index = 0;
+    const ids = measures.map((d)=>d.id);
     for(let i = 0; i < dataset.length; i++)for(let j = 0; j < measures.length; j++){
-        const datum = {
+        const datum = omit({
             ...dataset[i]
-        };
+        }, ids);
+        datum[ORIGINAL_DATA] = dataset[i];
         const measure = measures[j];
         const { id, alias } = measure;
+        datum[id] = dataset[i][id];
         datum[measureId] = id;
         datum[measureName] = alias;
         datum[measureValue] = dataset[i][id];
@@ -433,15 +437,16 @@ const encodingXY = (advancedVSeed)=>{
     if (!datasetReshapeInfo || !dimensions) return result;
     const encoding = datasetReshapeInfo.reduce((prev, cur)=>{
         const { foldInfo, unfoldInfo } = cur;
-        const isSingleDimension = 0 === dimensions.length;
+        const isSingleDimension = 1 === dimensions.length;
+        const isZeroDimension = 0 === dimensions.length;
         const x = [
-            isSingleDimension ? foldInfo.measureName : dimensions[0].id
+            isZeroDimension ? foldInfo.measureName : dimensions[0].id
         ];
         const y = [
             foldInfo.measureValue
         ];
         const group = [
-            isSingleDimension ? foldInfo.measureName : unfoldInfo.groupName
+            isSingleDimension || isZeroDimension ? foldInfo.measureName : unfoldInfo.groupName
         ];
         const color = [
             foldInfo.measureName
@@ -469,15 +474,16 @@ const encodingYX = (advancedVSeed)=>{
     if (!datasetReshapeInfo || !dimensions) return result;
     const encoding = datasetReshapeInfo.reduce((prev, cur)=>{
         const { foldInfo, unfoldInfo } = cur;
-        const isSingleDimension = 0 === dimensions.length;
+        const isZeroDimension = 0 === dimensions.length;
+        const isSingleDimension = 1 === dimensions.length;
         const y = [
-            isSingleDimension ? foldInfo.measureName : dimensions[0].id
+            isZeroDimension ? foldInfo.measureName : dimensions[0].id
         ];
         const x = [
             foldInfo.measureValue
         ];
         const group = [
-            isSingleDimension ? foldInfo.measureName : unfoldInfo.groupName
+            isSingleDimension || isZeroDimension ? foldInfo.measureName : unfoldInfo.groupName
         ];
         const color = [
             foldInfo.measureName
@@ -623,6 +629,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 = external_remeda_pick(vseed, [
+        'barStyle'
+    ]);
+    return {
+        ...advancedVSeed,
+        markStyle
+    };
+};
+const annotation_annotation = (advancedVSeed, context)=>{
+    const { vseed } = context;
+    const annotation = external_remeda_pick(vseed, [
+        'annotationPoint'
+    ]);
+    return {
+        ...advancedVSeed,
+        annotation
+    };
+};
 const lineAdvancedPipeline = [
     initAdvancedVSeed,
     autoMeasures,
@@ -635,7 +661,8 @@ const lineAdvancedPipeline = [
     encodingXY,
     vchartBaseConfig,
     lineConfig,
-    vchartTheme
+    vchartTheme,
+    annotation_annotation
 ];
 const barAdvancedPipeline = [
     initAdvancedVSeed,
@@ -649,7 +676,9 @@ const barAdvancedPipeline = [
     encodingYX,
     barConfig,
     vchartBaseConfig,
-    vchartTheme
+    vchartTheme,
+    markStyle_markStyle,
+    annotation_annotation
 ];
 const barParallelAdvancedPipeline = [
     initAdvancedVSeed,
@@ -663,7 +692,9 @@ const barParallelAdvancedPipeline = [
     encodingYX,
     barParallelConfig,
     vchartBaseConfig,
-    vchartTheme
+    vchartTheme,
+    markStyle_markStyle,
+    annotation_annotation
 ];
 const barPercentAdvancedPipeline = [
     initAdvancedVSeed,
@@ -677,7 +708,9 @@ const barPercentAdvancedPipeline = [
     encodingYX,
     barPercentConfig,
     vchartBaseConfig,
-    vchartTheme
+    vchartTheme,
+    markStyle_markStyle,
+    annotation_annotation
 ];
 const columnAdvancedPipeline = [
     initAdvancedVSeed,
@@ -691,7 +724,9 @@ const columnAdvancedPipeline = [
     encodingXY,
     columnConfig,
     vchartBaseConfig,
-    vchartTheme
+    vchartTheme,
+    markStyle_markStyle,
+    annotation_annotation
 ];
 const columnParallelAdvancedPipeline = [
     initAdvancedVSeed,
@@ -705,7 +740,9 @@ const columnParallelAdvancedPipeline = [
     encodingXY,
     columnParallelConfig,
     vchartBaseConfig,
-    vchartTheme
+    vchartTheme,
+    markStyle_markStyle,
+    annotation_annotation
 ];
 const columnPercentAdvancedPipeline = [
     initAdvancedVSeed,
@@ -719,7 +756,9 @@ const columnPercentAdvancedPipeline = [
     encodingXY,
     columnPercentConfig,
     vchartBaseConfig,
-    vchartTheme
+    vchartTheme,
+    markStyle_markStyle,
+    annotation_annotation
 ];
 const areaAdvancedPipeline = [
     initAdvancedVSeed,
@@ -733,7 +772,8 @@ const areaAdvancedPipeline = [
     encodingXY,
     areaConfig,
     vchartBaseConfig,
-    vchartTheme
+    vchartTheme,
+    annotation_annotation
 ];
 const areaPercentAdvancedPipeline = [
     initAdvancedVSeed,
@@ -747,7 +787,8 @@ const areaPercentAdvancedPipeline = [
     encodingXY,
     areaPercentConfig,
     vchartBaseConfig,
-    vchartTheme
+    vchartTheme,
+    annotation_annotation
 ];
 const pieAdvancedPipeline = [
     initAdvancedVSeed,
@@ -761,7 +802,8 @@ const pieAdvancedPipeline = [
     encodingPolar,
     pieConfig,
     vchartBaseConfig,
-    vchartTheme
+    vchartTheme,
+    annotation_annotation
 ];
 const dataset_dataset = (spec, context)=>{
     const { advancedVSeed } = context;
@@ -1290,11 +1332,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)=>{
@@ -1340,24 +1382,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
     };
@@ -1367,38 +1488,94 @@ const pivotLegend = (spec, context)=>{
     const { datasetReshapeInfo } = advancedVSeed;
     const colorItems = unique(datasetReshapeInfo.flatMap((d)=>d.unfoldInfo.colorItems));
     const { legend, color } = baseConfig;
-    const { enable } = legend;
     const { colorScheme } = color;
+    const { enable, position = 'bottom', labelFontColor, labelFontSize = 12, labelFontWeight, maxSize, border, shapeType = 'rectRound' } = legend || {};
+    const orient = [
+        'bottom',
+        'bottomLeft',
+        'bottomRight',
+        'bl',
+        'br'
+    ].includes(position) ? 'bottom' : [
+        'top',
+        'topLeft',
+        'topRight',
+        'tl',
+        'tr'
+    ].includes(position) ? 'top' : [
+        'left',
+        'leftTop',
+        'leftBottom',
+        'lt',
+        'lb'
+    ].includes(position) ? 'left' : 'right';
+    const legendPosition = [
+        'topLeft',
+        'bottomLeft',
+        'leftTop',
+        'rightTop',
+        'lt',
+        'rt',
+        'tl',
+        'bl'
+    ].includes(position) ? 'start' : [
+        'topRight',
+        'bottomRight',
+        'leftBottom',
+        'rightBottom',
+        'lb',
+        'rb',
+        'rt',
+        'br'
+    ].includes(position) ? 'end' : 'middle';
     const legends = {
         visible: enable,
-        alignSelf: 'end',
         type: 'discrete',
-        position: 'middle',
+        orient,
+        position: legendPosition,
+        maxCol: maxSize,
+        maxRow: maxSize,
         data: colorItems.map((d, index)=>({
                 label: d,
                 shape: {
-                    symbolType: 'square',
+                    outerBorder: border ? {
+                        stroke: colorScheme[index],
+                        distance: 3,
+                        lineWidth: 1
+                    } : void 0,
                     fill: colorScheme[index]
                 }
             })),
         item: {
+            focus: true,
+            focusIconStyle: {
+                size: labelFontSize + 2,
+                fill: labelFontColor,
+                fontWeight: labelFontWeight
+            },
+            shape: {
+                space: border ? 6 : 4,
+                style: {
+                    symbolType: shapeType,
+                    size: border ? 8 : 10
+                }
+            },
+            label: {
+                style: {
+                    fontSize: labelFontSize,
+                    fill: labelFontColor,
+                    fontWeight: labelFontWeight
+                }
+            },
             background: {
-                visible: true,
                 state: {
                     selectedHover: {
-                        fill: '#000000',
+                        fill: labelFontColor,
                         fillOpacity: 0.05
                     }
                 }
-            },
-            label: {
-                style: {
-                    fontSize: 12,
-                    fill: '#6F6F6F'
-                }
             }
-        },
-        orient: 'bottom'
+        }
     };
     return {
         ...result,
@@ -1647,6 +1824,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,
@@ -1656,7 +2019,8 @@ const line_line = [
     yLinear,
     label_label,
     tooltip_tooltip,
-    legend_legend
+    discreteLegend,
+    annotationPoint_annotationPoint
 ];
 const pivotLine = [
     initPivot,
@@ -1671,17 +2035,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,
@@ -1689,7 +2055,9 @@ const column = [
     yLinear,
     label_label,
     tooltip_tooltip,
-    legend_legend
+    discreteLegend,
+    barStyle_barStyle,
+    annotationPoint_annotationPoint
 ];
 const pivotColumn = [
     initPivot,
@@ -1698,17 +2066,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)
@@ -1722,7 +2093,9 @@ const columnParallel = [
     yLinear,
     label_label,
     tooltip_tooltip,
-    legend_legend
+    discreteLegend,
+    barStyle_barStyle,
+    annotationPoint_annotationPoint
 ];
 const pivotColumnParallel = [
     initPivot,
@@ -1737,17 +2110,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,
@@ -1756,7 +2132,9 @@ const columnPercent = [
     yLinear,
     label_label,
     tooltip_tooltip,
-    legend_legend
+    discreteLegend,
+    barStyle_barStyle,
+    annotationPoint_annotationPoint
 ];
 const pivotColumnPercent = [
     initPivot,
@@ -1765,6 +2143,7 @@ const pivotColumnPercent = [
     datasetPivot,
     pivotIndicators([
         initColumn,
+        stackInverse,
         color_color,
         percent,
         background_backgroundColor,
@@ -1772,11 +2151,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)
@@ -1790,7 +2171,9 @@ const bar = [
     yBand,
     label_label,
     tooltip_tooltip,
-    legend_legend
+    discreteLegend,
+    barStyle_barStyle,
+    annotationPoint_annotationPoint
 ];
 const pivotBar = [
     initPivot,
@@ -1805,11 +2188,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)
@@ -1823,7 +2208,9 @@ const barParallel = [
     yBand,
     label_label,
     tooltip_tooltip,
-    legend_legend
+    discreteLegend,
+    barStyle_barStyle,
+    annotationPoint_annotationPoint
 ];
 const pivotBarParallel = [
     initPivot,
@@ -1838,11 +2225,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)
@@ -1857,7 +2246,9 @@ const barPercent = [
     yBand,
     label_label,
     tooltip_tooltip,
-    legend_legend
+    discreteLegend,
+    barStyle_barStyle,
+    annotationPoint_annotationPoint
 ];
 const pivotBarPercent = [
     initPivot,
@@ -1873,26 +2264,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,
@@ -1903,22 +2297,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,
@@ -1927,7 +2323,8 @@ const areaPercent = [
     yLinear,
     label_label,
     tooltip_tooltip,
-    legend_legend
+    discreteLegend,
+    annotationPoint_annotationPoint
 ];
 const pivotAreaPercent = [
     initPivot,
@@ -1936,6 +2333,7 @@ const pivotAreaPercent = [
     datasetPivot,
     pivotIndicators([
         initArea,
+        stackInverse,
         color_color,
         background_backgroundColor,
         percent,
@@ -1943,11 +2341,12 @@ const pivotAreaPercent = [
         xBand,
         yLinear,
         label_label,
-        tooltip_tooltip
+        tooltip_tooltip,
+        annotationPoint_annotationPoint
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotLegend
+    pivotDiscreteLegend
 ];
 const areaPercentSpecPipeline = [
     pivotAdapter_pivotAdapter(areaPercent, pivotAreaPercent)
@@ -1959,7 +2358,8 @@ const pie = [
     dataset_dataset,
     label_label,
     tooltip_tooltip,
-    legend_legend
+    discreteLegend,
+    annotationPoint_annotationPoint
 ];
 const pivotPie = [
     initPivot,
@@ -1972,11 +2372,12 @@ const pivotPie = [
         background_backgroundColor,
         datasetPivotPlaceholder,
         label_label,
-        tooltip_tooltip
+        tooltip_tooltip,
+        annotationPoint_annotationPoint
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotLegend
+    pivotDiscreteLegend
 ];
 const pieSpecPipeline = [
     pivotAdapter_pivotAdapter(pie, pivotPie)
@@ -2172,10 +2573,10 @@ const darkTheme = ()=>{
     return {
         baseConfig: {
             vtable: {
-                backgroundColor: '#141414'
+                backgroundColor: 'transparent'
             },
             vchart: {
-                backgroundColor: '#141414',
+                backgroundColor: 'transparent',
                 color: {
                     colorScheme: [
                         '#2E62F1',
@@ -2197,7 +2598,14 @@ const darkTheme = ()=>{
                     enable: true
                 },
                 legend: {
-                    enable: true
+                    enable: true,
+                    border: true,
+                    maxSize: 1,
+                    position: 'rt',
+                    shapeType: 'rectRound',
+                    labelFontColor: '#FDFDFD',
+                    labelFontSize: 12,
+                    labelFontWeight: 400
                 }
             }
         },
@@ -2262,18 +2670,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
         }
     };
@@ -2304,18 +2712,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
         }
     };
@@ -2335,10 +2743,10 @@ const lightTheme = ()=>{
     return {
         baseConfig: {
             vtable: {
-                backgroundColor: '#ffffff'
+                backgroundColor: 'transparent'
             },
             vchart: {
-                backgroundColor: '#ffffff',
+                backgroundColor: 'transparent',
                 color: {
                     colorScheme: [
                         '#8D72F6',
@@ -2360,7 +2768,14 @@ const lightTheme = ()=>{
                     enable: true
                 },
                 legend: {
-                    enable: true
+                    enable: true,
+                    border: true,
+                    maxSize: 1,
+                    shapeType: 'rectRound',
+                    position: 'rt',
+                    labelFontColor: '#646A73',
+                    labelFontSize: 12,
+                    labelFontWeight: 400
                 }
             }
         },
@@ -2526,7 +2941,58 @@ const zTooltip = z.object({
     enable: z.boolean().default(true).optional()
 });
 const zLegend = z.object({
-    enable: z.boolean().default(true).optional()
+    enable: z.boolean().default(true).optional(),
+    border: z.boolean().default(true).optional(),
+    maxSize: z.number().default(1).optional(),
+    shapeType: z["enum"]([
+        'circle',
+        'cross',
+        'diamond',
+        'square',
+        'arrow',
+        'arrow2Left',
+        'arrow2Right',
+        'wedge',
+        'thinTriangle',
+        'triangle',
+        'triangleUp',
+        'triangleDown',
+        'triangleRight',
+        'triangleLeft',
+        'stroke',
+        'star',
+        'wye',
+        'rect',
+        'arrowLeft',
+        'arrowRight',
+        'rectRound',
+        'roundLine'
+    ]).default('rectRound').optional(),
+    position: z["enum"]([
+        'left',
+        'leftTop',
+        'leftBottom',
+        'lt',
+        'lb',
+        'top',
+        'topLeft',
+        'topRight',
+        'tl',
+        'tr',
+        'right',
+        'rightTop',
+        'rightBottom',
+        'rt',
+        'rb',
+        'bottom',
+        'bottomLeft',
+        'bottomRight',
+        'bl',
+        'br'
+    ]).default('bottom').optional(),
+    labelFontSize: z.number().default(12).optional(),
+    labelFontColor: z.string().default('#fff').optional(),
+    labelFontWeight: z.number().or(z.string()).default(400).optional()
 });
 const zVChartBaseConfig = z.object({
     backgroundColor: zBackgroundColor,
@@ -2723,6 +3189,88 @@ const zCustomThemeConfig = z.object({
 });
 const zCustomTheme = z.record(z.string(), zCustomThemeConfig).optional();
 const zTheme = z.string();
-export { Builder, FoldMeasureId, FoldMeasureName, FoldMeasureValue, Separator, UnfoldDimensionGroup, areaAdvancedPipeline, areaPercentAdvancedPipeline, areaPercentSpecPipeline, areaSpecPipeline, barAdvancedPipeline, barParallelAdvancedPipeline, barParallelSpecPipeline, barPercentAdvancedPipeline, barPercentSpecPipeline, barSpecPipeline, columnAdvancedPipeline, columnParallelAdvancedPipeline, columnParallelSpecPipeline, columnPercentAdvancedPipeline, columnPercentSpecPipeline, columnSpecPipeline, darkTheme, dataReshapeFor1D1M, dataReshapeFor2D1M, execPipeline, foldMeasures, isPivotChart, isVChart, isVTable, lightTheme, lineAdvancedPipeline, lineSpecPipeline, pieAdvancedPipeline, pieSpecPipeline, all_registerAll as registerAll, registerArea, registerAreaPercent, registerBar, registerBarParallel, registerBarPercent, registerColumn, registerColumnParallel, registerColumnPercent, registerCustomTheme, registerDarkTheme, registerLightTheme, registerLine, unfoldDimensions, zAxis, zBackgroundColor, zBaseConfig, zChartType, zColor, zConfig, zCustomTheme, zCustomThemeConfig, zDataset, zDatasetReshapeInfo, zDatum, zDimension, zDimensions, zEncoding, zFoldInfo, zLabel, zLegend, zMeasure, zMeasureGroup, zMeasures, zTheme, zTooltip, zUnfoldInfo, zXBandAxis, zXLinearAxis, zYBandAxis, zYLinearAxis };
+const zSelector = z.union([
+    z.string(),
+    z.number(),
+    z.object({
+        field: z.string(),
+        operator: z.string(),
+        value: z.union([
+            z.string(),
+            z.number(),
+            z.array(z.union([
+                z.string(),
+                z.number()
+            ]))
+        ])
+    }),
+    z.object({
+        field: z.string(),
+        operator: z.string(),
+        value: z.union([
+            z.string(),
+            z.number(),
+            z.array(z.union([
+                z.string(),
+                z.number()
+            ]))
+        ])
+    })
+]);
+const zSelectors = z.array(zSelector);
+const zBarStyle = z.object({
+    selector: z.union([
+        zSelector,
+        zSelectors
+    ]).optional(),
+    barColor: z.string().optional(),
+    barColorOpacity: z.number().optional(),
+    barBorderColor: z.string().optional(),
+    barBorderWidth: z.number().optional(),
+    barBorderStyle: z.union([
+        z.literal('solid'),
+        z.literal('dashed'),
+        z.literal('dotted')
+    ]).optional(),
+    barRadius: z.union([
+        z.number(),
+        z.array(z.number())
+    ]).optional()
+});
+const zMarkStyle = z.object({
+    barStyle: zBarStyle.optional()
+});
+const zAnnotationPoint = z.object({
+    selector: z.union([
+        zSelector,
+        zSelectors
+    ]),
+    text: z.string().or(z.array(z.string())).optional(),
+    textColor: z.string().default('#ffffff').optional(),
+    textFontSize: z.number().default(12).optional(),
+    textFontWeight: z.number().default(400).optional(),
+    textAlign: z["enum"]([
+        'left',
+        'right',
+        'center'
+    ]).default('center').optional(),
+    textBaseline: z["enum"]([
+        'top',
+        'middle',
+        'bottom'
+    ]).default('middle').optional(),
+    backgroundVisible: z.boolean().default(true).optional(),
+    backgroundColor: z.string().default('#212121').optional(),
+    backgroundBorderColor: z.string().optional(),
+    backgroundBorderWidth: z.number().default(1).optional(),
+    backgroundBorderRadius: z.number().default(4).optional(),
+    backgroundPadding: z.number().optional(),
+    offsetY: z.number().default(0).optional(),
+    offsetX: z.number().default(0).optional()
+});
+const zAnnotation = z.object({
+    annotationPoint: zAnnotationPoint.or(z.array(zAnnotationPoint)).optional()
+});
+export { Builder, FoldMeasureId, FoldMeasureName, FoldMeasureValue, ORIGINAL_DATA, Separator, UnfoldDimensionGroup, areaAdvancedPipeline, areaPercentAdvancedPipeline, areaPercentSpecPipeline, areaSpecPipeline, barAdvancedPipeline, barParallelAdvancedPipeline, barParallelSpecPipeline, barPercentAdvancedPipeline, barPercentSpecPipeline, barSpecPipeline, columnAdvancedPipeline, columnParallelAdvancedPipeline, columnParallelSpecPipeline, columnPercentAdvancedPipeline, columnPercentSpecPipeline, columnSpecPipeline, darkTheme, dataReshapeFor1D1M, dataReshapeFor2D1M, execPipeline, foldMeasures, isPivotChart, isVChart, isVTable, lightTheme, lineAdvancedPipeline, lineSpecPipeline, pieAdvancedPipeline, pieSpecPipeline, all_registerAll as registerAll, registerArea, registerAreaPercent, registerBar, registerBarParallel, registerBarPercent, registerColumn, registerColumnParallel, registerColumnPercent, registerCustomTheme, registerDarkTheme, registerLightTheme, registerLine, unfoldDimensions, zAnnotation, zAnnotationPoint, zAxis, zBackgroundColor, zBarStyle, zBaseConfig, zChartType, zColor, zConfig, zCustomTheme, zCustomThemeConfig, zDataset, zDatasetReshapeInfo, zDatum, zDimension, zDimensions, zEncoding, zFoldInfo, zLabel, zLegend, zMarkStyle, zMeasure, zMeasureGroup, zMeasures, zTheme, zTooltip, zUnfoldInfo, zXBandAxis, zXLinearAxis, zYBandAxis, zYLinearAxis };
 
 //# sourceMappingURL=index.js.map