@visactor/vseed 0.1.51 → 0.2.0

package/dist/umd/index.js

@@ -51,9 +51,10 @@
             pivotTableAdvancedPipeline: ()=>pivotTableAdvancedPipeline,
             zLogisticRegressionLine: ()=>zLogisticRegressionLine,
             zAnnotationHorizontalLine: ()=>zAnnotationHorizontalLine,
-            zYLinearAxis: ()=>zYLinearAxis,
+            zOutlierStyle: ()=>zOutlierStyle,
             zMarkStyle: ()=>zMarkStyle,
             registerFunnel: ()=>registerFunnel,
+            zYLinearAxis: ()=>zYLinearAxis,
             columnAdvancedPipeline: ()=>columnAdvancedPipeline,
             zLabel: ()=>zLabel,
             registerColumn: ()=>registerColumn,
@@ -78,6 +79,7 @@
             FoldXMeasureId: ()=>FoldXMeasureId,
             zAnnotationAreaConfig: ()=>zAnnotationAreaConfig,
             zAnnotationVerticalLineConfig: ()=>zAnnotationVerticalLineConfig,
+            zBoxPlotStyle: ()=>zBoxPlotStyle,
             zHistogram: ()=>zHistogram,
             zAnnotationConfig: ()=>zAnnotationConfig,
             registerBarPercent: ()=>registerBarPercent,
@@ -172,13 +174,13 @@
             Q3MeasureValue: ()=>"__Q3__",
             createFormatter: ()=>createFormatter,
             columnPercentSpecPipeline: ()=>columnPercentSpecPipeline,
-            BAND_AXIS_INNER_OFFSET_IN_PIVOT: ()=>2,
             selectByPartial: ()=>selectByPartial,
             isMeasureSelector: ()=>isMeasureSelector,
-            zBarConfig: ()=>zBarConfig,
             areaAdvancedPipeline: ()=>areaAdvancedPipeline,
+            zBarConfig: ()=>zBarConfig,
             areaPercentSpecPipeline: ()=>areaPercentSpecPipeline,
             barParallelSpecPipeline: ()=>barParallelSpecPipeline,
+            BAND_AXIS_INNER_OFFSET_IN_PIVOT: ()=>2,
             zPie: ()=>zPie,
             zBar: ()=>zBar,
             pieAdvancedPipeline: ()=>pieAdvancedPipeline,
@@ -211,6 +213,7 @@
             registerHistogram: ()=>registerHistogram,
             zRoseParallel: ()=>zRoseParallel,
             MeasureName: ()=>MeasureName,
+            hasMultipleMeasureInSingleView: ()=>hasMultipleMeasureInSingleView,
             selectorDatum: ()=>selectorDatum,
             zRegressionLine: ()=>zRegressionLine,
             zNumFormat: ()=>zNumFormat,
@@ -881,6 +884,18 @@
             });
             return result;
         };
+        const hasMultipleMeasureInSingleView = (measures = [])=>{
+            if (measures.every((m)=>!('children' in m))) return measures.length > 1;
+            let found = false;
+            preorderTraverse(measures, (node)=>{
+                if (node.children && node.children.length > 1) {
+                    found = true;
+                    return true;
+                }
+                return false;
+            });
+            return found;
+        };
         const defaultDimensions = (advancedVSeed, context)=>{
             const result = {
                 ...advancedVSeed
@@ -2309,7 +2324,7 @@
                 if (parent && 'children' in parent) {
                     parent.children = parent.children || [];
                     parent.children.push(measure);
-                } else if (measure.parentId) measureTree.push({
+                } else if (common_isValid(measure.parentId)) measureTree.push({
                     id: measure.parentId,
                     children: [
                         measure
@@ -2595,7 +2610,7 @@
                     omitIds: allMeasures.map((item)=>item.id)
                 });
                 const reshapeInfo = {
-                    id: groupId,
+                    id: `${groupId}`,
                     index,
                     foldInfo,
                     unfoldInfo
@@ -2707,7 +2722,9 @@
                 'barStyle',
                 'pointStyle',
                 'lineStyle',
-                'areaStyle'
+                'areaStyle',
+                'boxPlotStyle',
+                'outlierStyle'
             ]);
             const markStyle = replaceNullToUndefined(pickedMarkStyle);
             return {
@@ -4849,10 +4866,10 @@
                 widthMode: 'standard',
                 autoFillWidth: true,
                 defaultHeaderColWidth: 'auto',
-                defaultColWidth: 200,
+                defaultColWidth: 240,
                 heightMode: 'standard',
                 autoFillHeight: true,
-                defaultRowHeight: 100,
+                defaultRowHeight: 180,
                 defaultHeaderRowHeight: 'auto',
                 indicatorsAsCol: false,
                 select: {
@@ -4907,7 +4924,7 @@
                                 0 === arg.row ? outlineBorderLineWidth : 1,
                                 outlineBorderLineWidth,
                                 0,
-                                0 === arg.col || noYAxis && 1 === arg.col ? outlineBorderLineWidth : 1
+                                0 === arg.col || noYAxis && 1 === arg.col && arg.table.colCount <= 2 ? outlineBorderLineWidth : 1
                             ];
                         },
                         bgColor: transparent,
@@ -5111,7 +5128,7 @@
                 const colorItems = chunk_QJLMYOTX_i(datasetReshapeInfo.flatMap((d)=>d.unfoldInfo.colorItems));
                 const allMeasureIds = chunk_QJLMYOTX_i(datasetReshapeInfo.flatMap((d)=>Object.keys(d.foldInfo.foldMap || {})));
                 const indicators = datasetReshapeInfo.map((reshapeInfo, index)=>{
-                    const measureGroup = measures?.find((d)=>d.id === reshapeInfo.id);
+                    const measureGroup = measures?.find((d)=>`${d.id}` === reshapeInfo.id);
                     const subMeasuresId = (measureGroup?.children || []).map((d)=>d.id);
                     const invalideMeasuresIds = allMeasureIds.filter((id)=>!subMeasuresId.includes(id));
                     const newDataset = dataset[index];
@@ -5139,7 +5156,7 @@
                     };
                     const chartSpec = execPipeline(chartPipeline, newContext, {});
                     return {
-                        indicatorKey: reshapeInfo.id,
+                        indicatorKey: `${reshapeInfo.id}`,
                         title: measureGroup?.alias,
                         cellType: 'chart',
                         chartModule: 'vchart',
@@ -5214,6 +5231,8 @@
                                 left: 2,
                                 right: 2
                             };
+                        } else if ('linear' === axis.type) {
+                            if ('top' === axis.orient || 'bottom' === axis.orient) axis.label.flush = true;
                         }
                     });
                 }
@@ -5473,13 +5492,6 @@
                 legends
             };
         };
-        const defaultScatterFormatter = (val)=>{
-            if (chunk_JK3VNB42_n(val)) return '';
-            if ('string' == typeof val) return val;
-            if (0 === val) return '0';
-            if (Math.abs(val) < 1) return val.toFixed(2);
-            return val === Math.floor(val) ? `${val}` : val.toFixed(1);
-        };
         const dimensionLinkage = (spec, context)=>{
             const { advancedVSeed, vseed } = context;
             const { chartType } = vseed;
@@ -5489,18 +5501,24 @@
             const labelHoverOnAxis = {};
             const chartSpec = indicators?.[0]?.chartSpec;
             const crosshair = chartSpec?.crosshair;
-            if (crosshair?.xField) labelHoverOnAxis.bottom = {
-                visible: config.showLabel ?? crosshair.xField.label?.visible ?? true,
-                background: crosshair.xField.label?.labelBackground,
-                textStyle: crosshair.xField.label?.style,
-                formatMethod: 'scatter' === chartType ? defaultScatterFormatter : void 0
-            };
-            if (crosshair?.yField) labelHoverOnAxis.left = {
-                visible: config.showLabel ?? crosshair.yField.label?.visible ?? true,
-                background: crosshair.yField.label?.labelBackground,
-                textStyle: crosshair.yField.label?.style,
-                formatMethod: 'scatter' === chartType ? defaultScatterFormatter : void 0
-            };
+            if (crosshair?.xField) {
+                const labelFormat = crosshair.xField.label?.formatMethod;
+                labelHoverOnAxis.bottom = {
+                    visible: config.showLabel ?? crosshair.xField.label?.visible ?? true,
+                    background: crosshair.xField.label?.labelBackground,
+                    textStyle: crosshair.xField.label?.style,
+                    formatMethod: labelFormat ? (text)=>text || 0 === text ? labelFormat(text) : null : void 0
+                };
+            }
+            if (crosshair?.yField) {
+                const labelFormat = crosshair.yField.label?.formatMethod;
+                labelHoverOnAxis.left = {
+                    visible: config.showLabel ?? crosshair.yField.label?.visible ?? true,
+                    background: crosshair.yField.label?.labelBackground,
+                    textStyle: crosshair.yField.label?.style,
+                    formatMethod: labelFormat ? (text)=>text || 0 === text ? labelFormat(text) : null : void 0
+                };
+            }
             if (indicators && indicators.length) indicators.forEach((ind)=>{
                 const crosshair = ind?.chartSpec?.crosshair;
                 if (crosshair?.xField) crosshair.xField.label = {
@@ -5772,13 +5790,11 @@
             const { advancedVSeed, vseed } = context;
             const { chartType } = vseed;
             const stackCornerRadius = advancedVSeed.config?.[chartType]?.stackCornerRadius;
-            const { datasetReshapeInfo } = advancedVSeed;
-            const { foldInfo } = datasetReshapeInfo[0];
             if ('dualAxis' === chartType && 'bar' !== spec.type) return spec;
             return {
                 ...spec,
                 stackCornerRadius: (_, datum)=>{
-                    if (datum[foldInfo.measureValue] > 0) return stackCornerRadius;
+                    if (datum && datum[datum[FoldMeasureId]] > 0) return stackCornerRadius;
                     return 0;
                 }
             };
@@ -5821,7 +5837,7 @@
                     type: 'rect',
                     style: {
                         lineWidth: 0,
-                        opacity: 0.2,
+                        opacity: 0.26,
                         fill: rectColor
                     }
                 },
@@ -6353,6 +6369,7 @@
                 return points[points.length - 1]?.y;
             }
         };
+        const getAlphaByConfidenceLevel = (confidenceLevel = 0.95)=>1 - Math.max(Math.min(1, confidenceLevel), 0);
         const columnPolynomialRegressionLine = (spec, context)=>{
             const result = {
                 ...spec
@@ -6366,7 +6383,7 @@
             lineList.forEach((line, lineIndex)=>{
                 if (false === line.enable) return;
                 const theme = lineTheme.linearRegressionLine ?? {};
-                const { color, lineWidth, lineDash, text, textColor, textFontSize, textFontWeight, confidenceIntervalOpacity, confidenceIntervalVisible = theme.confidenceIntervalVisible } = line;
+                const { color, lineWidth, lineDash, text, textColor, textFontSize, textFontWeight, confidenceIntervalOpacity, confidenceLevel = 0.95, confidenceIntervalVisible = theme.confidenceIntervalVisible } = line;
                 const childrenMarks = [];
                 result.extensionMark.push({
                     type: 'group',
@@ -6395,7 +6412,8 @@
                                         y: Math.max(...filteredData.map((d)=>d[fieldY]))
                                     };
                                 }), void 0, void 0, {
-                                    degree: line.degree ?? 2
+                                    degree: line.degree ?? 2,
+                                    alpha: getAlphaByConfidenceLevel(confidenceLevel)
                                 });
                                 const N = xValues.length;
                                 const xAxisHelper = s.getXAxisHelper();
@@ -6476,6 +6494,7 @@
                     interactive: false,
                     zIndex: 500,
                     dataId: spec.data?.id,
+                    dataKey: ()=>`polynomialRegressionLine-label-${lineIndex}`,
                     style: {
                         textAlign: 'end',
                         fill: textColor ?? theme.textColor,
@@ -7245,7 +7264,7 @@
                     type: 'rect',
                     style: {
                         lineWidth: 0,
-                        opacity: 0.2,
+                        opacity: 0.26,
                         fill: rectColor
                     }
                 },
@@ -8757,6 +8776,7 @@
                         zIndex: 500,
                         animation: false,
                         dataId: spec.data?.id,
+                        dataKey: ()=>`regressionLine-label-${lineIndex}`,
                         style: {
                             textAlign: 'end',
                             fill: textColor ?? theme.textColor,
@@ -8782,9 +8802,12 @@
                 });
                 return result;
             };
-        const getDefaultRegressionOptions = (lineConfig)=>({
-                alpha: lineConfig?.confidenceLevel ?? 0.95
-            });
+        const getDefaultRegressionOptions = (lineConfig)=>{
+            const alpha = getAlphaByConfidenceLevel(lineConfig?.confidenceLevel);
+            return {
+                alpha
+            };
+        };
         const linearRegressionLine = generateRegressionLinePipe('linearRegressionLine', regressionLinear);
         const lowessRegressionLine = generateRegressionLinePipe('lowessRegressionLine', regressionLowess);
         const polynomialRegressionLine = generateRegressionLinePipe('polynomialRegressionLine', regressionPolynomial, (lineConfig)=>({
@@ -8842,7 +8865,9 @@
                 annotationHorizontalLine_annotationHorizontalLine,
                 annotationArea_annotationArea,
                 linearRegressionLine,
-                lowessRegressionLine
+                lowessRegressionLine,
+                polynomialRegressionLine,
+                logisticRegressionLine
             ]),
             pivotRowDimensions,
             pivotColumnDimensions,
@@ -9528,7 +9553,6 @@
             const foldInfoList = datasetReshapeInfo[0].foldInfoList;
             const unfoldInfo = datasetReshapeInfo[0].unfoldInfo;
             result.tooltip = {
-                style: getTooltipStyle(tooltip),
                 visible: enable,
                 mark: {
                     title: {
@@ -9576,6 +9600,37 @@
             };
             return result;
         };
+        const tooltipDualAxis = (spec, context)=>{
+            const result = {
+                ...spec
+            };
+            const { advancedVSeed } = context;
+            const { chartType } = advancedVSeed;
+            const baseConfig = advancedVSeed.config[chartType];
+            const { tooltip = {
+                enable: true
+            } } = baseConfig;
+            result.tooltip = {
+                style: getTooltipStyle(tooltip)
+            };
+            return result;
+        };
+        const barStyleFilter = (pipe)=>(spec, context)=>{
+                if ('bar' === spec.type) return pipe(spec, context);
+                return spec;
+            };
+        const pointStyleFilter = (pipe)=>(spec, context)=>{
+                if ('line' === spec.type || 'area' === spec.type) return pipe(spec, context);
+                return spec;
+            };
+        const lineStyleFilter = (pipe)=>(spec, context)=>{
+                if ('line' === spec.type) return pipe(spec, context);
+                return spec;
+            };
+        const areaStyleFilter = (pipe)=>(spec, context)=>{
+                if ('area' === spec.type) return pipe(spec, context);
+                return spec;
+            };
         const yLinearPrimary = (spec, context)=>{
             const result = {
                 ...spec
@@ -9791,21 +9846,21 @@
         };
         const isObjectLike = (value)=>"object" == typeof value && null !== value;
         const common_isObjectLike = isObjectLike;
-        const isPlainObject_isPlainObject = function(value) {
+        const isPlainObject = function(value) {
             if (!common_isObjectLike(value) || !isType(value, "Object")) return !1;
             if (null === Object.getPrototypeOf(value)) return !0;
             let proto = value;
             for(; null !== Object.getPrototypeOf(proto);)proto = Object.getPrototypeOf(proto);
             return Object.getPrototypeOf(value) === proto;
         };
-        const isPlainObject = isPlainObject_isPlainObject;
+        const common_isPlainObject = isPlainObject;
         const isString = (value, fuzzy = !1)=>{
             const type = typeof value;
             return fuzzy ? "string" === type : "string" === type || isType(value, "String");
         };
         const common_isString = isString;
         function pickWithout(obj, keys) {
-            if (!obj || !isPlainObject(obj)) return obj;
+            if (!obj || !common_isPlainObject(obj)) return obj;
             const result = {};
             return Object.keys(obj).forEach((k)=>{
                 const v = obj[k];
@@ -9910,11 +9965,11 @@
                 barMaxWidth_barMaxWidth,
                 barGapInGroup_barGapInGroup,
                 stackCornerRadius_stackCornerRadius,
-                colorBarStyleFill(barStyle_barStyle),
-                colorPointStyleFill(pointStyle_pointStyle),
-                pointStateDimensionHover,
-                colorLineStyleFill(lineStyle_lineStyle),
-                colorAreaStyleFill(areaStyle_areaStyle)
+                barStyleFilter(colorBarStyleFill(barStyle_barStyle)),
+                pointStyleFilter(colorPointStyleFill(pointStyle_pointStyle)),
+                pointStyleFilter(pointStateDimensionHover),
+                lineStyleFilter(colorLineStyleFill(lineStyle_lineStyle)),
+                areaStyleFilter(colorAreaStyleFill(areaStyle_areaStyle))
             ], [
                 initDualAxisSecondary,
                 dualChartTypeSecondary,
@@ -9925,11 +9980,11 @@
                 barMaxWidth_barMaxWidth,
                 barGapInGroup_barGapInGroup,
                 stackCornerRadius_stackCornerRadius,
-                colorBarStyleFill(barStyle_barStyle),
-                colorPointStyleFill(pointStyle_pointStyle),
-                pointStateDimensionHover,
-                colorLineStyleFill(lineStyle_lineStyle),
-                colorAreaStyleFill(areaStyle_areaStyle)
+                barStyleFilter(colorBarStyleFill(barStyle_barStyle)),
+                pointStyleFilter(colorPointStyleFill(pointStyle_pointStyle)),
+                pointStyleFilter(pointStateDimensionHover),
+                lineStyleFilter(colorLineStyleFill(lineStyle_lineStyle)),
+                areaStyleFilter(colorAreaStyleFill(areaStyle_areaStyle))
             ]),
             xBand,
             yLinearPrimary,
@@ -9941,7 +9996,8 @@
             annotationPointOfDualAxis,
             annotationVerticalLine_annotationVerticalLine,
             annotationHorizontalLine_annotationHorizontalLine,
-            annotationAreaBand
+            annotationAreaBand,
+            tooltipDualAxis
         ];
         const pivotDualAxis = [
             initPivot,
@@ -9989,7 +10045,8 @@
                 annotationPointOfDualAxis,
                 annotationVerticalLine_annotationVerticalLine,
                 annotationHorizontalLine_annotationHorizontalLine,
-                annotationAreaBand
+                annotationAreaBand,
+                tooltipDualAxis
             ]),
             pivotRowDimensions,
             pivotColumnDimensions,
@@ -10008,7 +10065,7 @@
             const { measures: vseedMeasures = [], dimensions = [] } = advancedVSeed;
             const measures = findAllMeasures(vseedMeasures);
             const encoding = {};
-            pie_generateDefaultDimensionEncoding(dimensions, encoding);
+            pie_generateDefaultDimensionEncoding(dimensions, encoding, hasMultipleMeasureInSingleView(vseedMeasures));
             pie_generateDefaultMeasureEncoding(measures, encoding);
             return {
                 ...advancedVSeed,
@@ -10021,8 +10078,9 @@
             const hasDimensionEncoding = dimensions.some((item)=>item.encoding);
             const hasMeasureEncoding = measures.some((item)=>item.encoding);
             const encoding = {};
-            if (hasDimensionEncoding) pie_generateDimensionEncoding(dimensions, encoding, measures.length > 1);
-            else pie_generateDefaultDimensionEncoding(dimensions, encoding);
+            const hasMulti = hasMultipleMeasureInSingleView(vseedMeasures);
+            if (hasDimensionEncoding) pie_generateDimensionEncoding(dimensions, encoding, hasMulti);
+            else pie_generateDefaultDimensionEncoding(dimensions, encoding, hasMulti);
             if (hasMeasureEncoding) pie_generateMeasureEncoding(measures, encoding);
             else pie_generateDefaultMeasureEncoding(measures, encoding);
             return {
@@ -10030,9 +10088,10 @@
                 encoding
             };
         };
-        const pie_generateDefaultDimensionEncoding = (dimensions, encoding)=>{
+        const pie_generateDefaultDimensionEncoding = (dimensions, encoding, isMultiMeasure)=>{
             const uniqueDimIds = chunk_QJLMYOTX_i(dimensions.map((d)=>d.id));
-            encoding.color = uniqueDimIds.slice(0);
+            if (isMultiMeasure) encoding.color = uniqueDimIds.slice(0);
+            else encoding.color = uniqueDimIds.filter((d)=>d !== MeasureId);
             encoding.detail = encoding.color;
             encoding.tooltip = uniqueDimIds.filter((d)=>d !== MeasureId);
             encoding.label = [];
@@ -10075,11 +10134,11 @@
             defaultDimensions_defaultDimensions,
             defaultMeasureId_defaultMeasureId,
             encodingAdapter([
-                defaultEncodingForPie,
-                buildMeasures
+                buildMeasures,
+                defaultEncodingForPie
             ], [
-                encodingForPie,
                 buildMeasures,
+                encodingForPie,
                 pickMeasuresForReshape([
                     'tooltip',
                     'label',
@@ -10236,11 +10295,11 @@
             defaultDimensions_defaultDimensions,
             defaultMeasureId_defaultMeasureId,
             encodingAdapter([
-                defaultEncodingForPie,
-                buildMeasures
+                buildMeasures,
+                defaultEncodingForPie
             ], [
-                encodingForPie,
                 buildMeasures,
+                encodingForPie,
                 pickMeasuresForReshape([
                     'tooltip',
                     'label',
@@ -11749,7 +11808,7 @@
                     unfoldInfo = res.unfoldInfo;
                 }
                 const reshapeInfo = {
-                    id: groupId,
+                    id: `${groupId}`,
                     index,
                     foldInfo,
                     unfoldInfo
@@ -11939,16 +11998,127 @@
                 defaultContent
             ];
         };
-        const boxLegend = (spec, context)=>{
-            const normalLegend = discreteLegend(spec, context);
-            normalLegend.legends = {
-                ...normalLegend.legends,
-                data: (data)=>data.map((obj)=>{
-                        obj.shape.fill = obj.shape.stroke;
-                        return obj;
-                    })
+        const colorBoxPlotStyleFill = (stylePipe)=>(spec, context)=>{
+                const result = stylePipe(spec, context);
+                const { advancedVSeed, vseed } = context;
+                const { datasetReshapeInfo } = advancedVSeed;
+                const { unfoldInfo } = datasetReshapeInfo[0];
+                if (isLinearColor(advancedVSeed, vseed)) {
+                    if (result?.boxPlot?.style) result.boxPlot.style.fill = {
+                        field: unfoldInfo.encodingColor,
+                        scale: 'color'
+                    };
+                }
+                return result;
+            };
+        const boxPlotStyle_boxPlotStyle = (spec, context)=>{
+            const { advancedVSeed, vseed } = context;
+            const { markStyle, config } = advancedVSeed;
+            const { boxPlotStyle } = markStyle;
+            const theme = config?.[vseed.chartType]?.boxPlotStyle;
+            const result = {
+                ...spec,
+                boxPlot: {
+                    style: {
+                        shaftShape: 'filled-line',
+                        visible: true,
+                        shaftWidth: '50%',
+                        stroke: theme?.boxBorderColor
+                    }
+                }
+            };
+            if (chunk_JK3VNB42_n(boxPlotStyle) || chunk_VCYTMP4D_n(boxPlotStyle)) return result;
+            const boxPlotStyles = Array.isArray(boxPlotStyle) ? boxPlotStyle : [
+                boxPlotStyle
+            ];
+            const customMap = boxPlotStyles.reduce((result, style, index)=>{
+                const { boxColor, boxColorOpacity, boxBorderColor, boxBorderWidth = 1, boxVisible = true, boxBorderOpacity } = style;
+                return {
+                    ...result,
+                    [`custom${index + 1}`]: {
+                        level: index + 1,
+                        filter: (datum)=>{
+                            if (selector_selector(datum, style.selector)) return true;
+                            return false;
+                        },
+                        style: {
+                            visible: boxVisible,
+                            fill: boxColor,
+                            fillOpacity: boxColorOpacity,
+                            lineWidth: boxBorderWidth,
+                            stroke: boxBorderColor,
+                            strokeOpacity: boxBorderOpacity
+                        }
+                    }
+                };
+            }, {});
+            result.boxPlot.state = {
+                ...result.boxPlot.state,
+                ...customMap
+            };
+            return result;
+        };
+        const outlierStyle_outlierStyle = (spec, context)=>{
+            const { advancedVSeed, vseed } = context;
+            const { markStyle, config } = advancedVSeed;
+            const { outlierStyle } = markStyle;
+            const theme = config?.[vseed.chartType]?.outlierStyle;
+            const result = {
+                ...spec,
+                outlier: {
+                    style: {
+                        fill: theme?.pointColor
+                    }
+                }
+            };
+            if (chunk_JK3VNB42_n(outlierStyle) || chunk_VCYTMP4D_n(outlierStyle)) return result;
+            const outlierStyles = Array.isArray(outlierStyle) ? outlierStyle : [
+                outlierStyle
+            ];
+            const customMap = outlierStyles.reduce((result, style, index)=>{
+                const { pointBorderColor, pointBorderStyle, pointBorderWidth = 1, pointColor, pointColorOpacity, pointSize, pointVisible = true } = style;
+                const lineDash = 'dashed' === pointBorderStyle ? [
+                    5,
+                    2
+                ] : 'dotted' === pointBorderStyle ? [
+                    2,
+                    5
+                ] : [
+                    0,
+                    0
+                ];
+                return {
+                    ...result,
+                    [`custom${index + 1}`]: {
+                        level: index + 1,
+                        filter: (datum)=>{
+                            if (selector_selector(datum, style.selector)) return true;
+                            return false;
+                        },
+                        style: {
+                            visible: pointVisible,
+                            size: pointSize,
+                            fill: pointColor,
+                            fillOpacity: pointColorOpacity,
+                            innerBorder: {
+                                stroke: pointBorderColor,
+                                lineWidth: pointBorderWidth,
+                                distance: (pointBorderWidth || 0) / 2,
+                                lineDash: lineDash
+                            }
+                        }
+                    }
+                };
+            }, {});
+            return {
+                ...result,
+                outlier: {
+                    ...result.outlier,
+                    state: {
+                        ...customMap
+                    }
+                }
             };
-            return normalLegend;
         };
         const pipeline_boxplot_boxplot = [
             initBoxplot,
@@ -11961,9 +12131,10 @@
             yLinear,
             label_label,
             tooltipBoxplot,
-            colorAdapter(boxLegend, colorLegend),
+            colorAdapter(discreteLegend, colorLegend),
             verticalCrosshairRect,
-            colorBarStyleFill(barStyle_barStyle),
+            colorBoxPlotStyleFill(boxPlotStyle_boxPlotStyle),
+            outlierStyle_outlierStyle,
             annotationPoint_annotationPoint,
             annotationVerticalLine_annotationVerticalLine,
             annotationHorizontalLine_annotationHorizontalLine,
@@ -11984,7 +12155,8 @@
                 pivotAxisStyle(yLinear),
                 label_label,
                 tooltipBoxplot,
-                colorBarStyleFill(barStyle_barStyle),
+                colorBoxPlotStyleFill(boxPlotStyle_boxPlotStyle),
+                outlierStyle_outlierStyle,
                 verticalCrosshairRect,
                 annotationPoint_annotationPoint,
                 annotationVerticalLine_annotationVerticalLine,
@@ -12462,7 +12634,7 @@
                     unfoldInfo = res.unfoldInfo;
                 }
                 const reshapeInfo = {
-                    id: groupId,
+                    id: `${groupId}`,
                     index,
                     foldInfo,
                     unfoldInfo
@@ -12480,7 +12652,6 @@
             initAdvancedVSeed_initAdvancedVSeed,
             default_defaultMeasures_defaultMeasures,
             defaultDimensions_defaultDimensions,
-            defaultMeasureId_defaultMeasureId,
             histogramConfig,
             encodingAdapter([
                 defaultEncodingForHistogram,
@@ -12750,6 +12921,7 @@
             const { chartType, encoding = {}, dimensions, regressionLine } = advancedVSeed;
             const { dataset } = vseed;
             const lineTheme = advancedVSeed.config[chartType]?.regressionLine;
+            const binValueType = advancedVSeed.config[chartType]?.binValueType;
             if (!regressionLine || !regressionLine.kdeRegressionLine) return result;
             const rowColumnFields = T(dimensions.filter((dim)=>'row' === dim.encoding || 'column' === dim.encoding), (item)=>item.id);
             const lineList = array_array(regressionLine.kdeRegressionLine).filter((kdeLine)=>false !== kdeLine.enable);
@@ -12782,7 +12954,10 @@
                                 });
                                 const N = Math.max(3, Math.floor(simpleData.length / 4));
                                 const lineData = res.evaluateGrid(N);
-                                const scaleR = (k)=>scaleY.scale(k * simpleData.length * res.bandwidth);
+                                const scaleR = (k)=>{
+                                    if ('percentage' === binValueType) return scaleY.scale(k * res.bandwidth);
+                                    return scaleY.scale(k * simpleData.length * res.bandwidth);
+                                };
                                 const linePoints = lineData.map((ld)=>{
                                     const d = {
                                         [fieldX]: ld.x
@@ -12823,6 +12998,7 @@
                     interactive: false,
                     zIndex: 500,
                     dataId: spec.data?.id,
+                    dataKey: ()=>`kdeRegressionLine-label-${lineIndex}`,
                     style: {
                         textAlign: 'end',
                         fill: textColor ?? theme.textColor,
@@ -12963,6 +13139,7 @@
                     interactive: false,
                     zIndex: 500,
                     dataId: spec.data?.id,
+                    dataKey: ()=>`ecdfRegressionLine-label-${lineIndex}`,
                     style: {
                         textAlign: 'end',
                         fill: textColor ?? theme.textColor,
@@ -13072,9 +13249,9 @@
         const getDarkCrosshairRect = ()=>({
                 visible: true,
                 labelVisible: true,
-                labelColor: '#4B4F54',
-                labelBackgroundColor: '#ffffff',
-                rectColor: '#E2E3E6'
+                labelColor: '#ffffff',
+                labelBackgroundColor: '#404349',
+                rectColor: '#4B4F54'
             });
         const getLightCrosshairLine = ()=>({
                 visible: true,
@@ -13088,7 +13265,7 @@
                 labelVisible: true,
                 labelColor: '#ffffff',
                 labelBackgroundColor: '#364159',
-                rectColor: '#3641594d'
+                rectColor: '#D9DDE4'
             });
         const getLightColorScheme = ()=>[
                 '#8D72F6',
@@ -13218,12 +13395,14 @@
             });
         const getLightPivotChartGridConfig = ()=>{
             const res = pickPivotChartGridConfig(getLightTableConfig());
+            res.hoverHeaderInlineBackgroundColor = '#D9DDE446';
             res.chartGridColor = '#F0F1F6';
             res.axisLabelColor = '#BCC1CB';
             return res;
         };
         const getDarkPivotChartGridConfig = ()=>{
             const res = pickPivotChartGridConfig(getDarkTableConfig());
+            res.hoverHeaderInlineBackgroundColor = '#4b4f5446';
             return res;
         };
         const getDefaultTooltip = ()=>({
@@ -13282,11 +13461,11 @@
                     visible: false,
                     tickInside: false,
                     tickSize: 4,
-                    tickColor: '#21252C'
+                    tickColor: '#E3E5EB'
                 },
                 line: {
                     visible: false,
-                    lineColor: '#21252C',
+                    lineColor: '#E3E5EB',
                     lineWidth: 1
                 }
             });
@@ -13328,11 +13507,11 @@
                     visible: false,
                     tickInside: false,
                     tickSize: 4,
-                    tickColor: '#21252C'
+                    tickColor: '#E3E5EB'
                 },
                 line: {
                     visible: true,
-                    lineColor: '#21252C',
+                    lineColor: '#E3E5EB',
                     lineWidth: 1
                 }
             });
@@ -13593,6 +13772,18 @@
                     confidenceIntervalOpacity: 0.2
                 }
             });
+        const getLightBoxPlotStyle = ()=>({
+                boxBorderColor: '#e3e5eb'
+            });
+        const getDarkBoxPlotStyle = ()=>({
+                boxBorderColor: '#4b4e53'
+            });
+        const getLightOutlierStyle = ()=>({
+                pointColor: '#8F959E'
+            });
+        const getDarkOutlierStyle = ()=>({
+                pointColor: '#36393e'
+            });
         const lightTheme = ()=>{
             const linearAxis = getLightLinearAxis();
             const bandAxis = getLightBandAxis();
@@ -13857,7 +14048,9 @@
                         yAxis: linearAxis,
                         crosshairRect,
                         pivotGrid: getLightPivotChartGridConfig(),
-                        annotation: getLightAnnotation()
+                        annotation: getLightAnnotation(),
+                        boxPlotStyle: getLightBoxPlotStyle(),
+                        outlierStyle: getLightOutlierStyle()
                     }
                 }
             };
@@ -14120,7 +14313,9 @@
                         yAxis: linearAxis,
                         crosshairRect: crosshairRect,
                         pivotGrid: getDarkPivotChartGridConfig(),
-                        annotation: getDarkAnnotation()
+                        annotation: getDarkAnnotation(),
+                        boxPlotStyle: getDarkBoxPlotStyle(),
+                        outlierStyle: getDarkOutlierStyle()
                     }
                 }
             };
@@ -16909,11 +17104,11 @@
                     arg
                 ]);
             inst.and = (arg)=>intersection(inst, arg);
-            inst.transform = (tx)=>pipe(inst, transform(tx));
+            inst.transform = (tx)=>schemas_pipe(inst, transform(tx));
             inst.default = (def)=>schemas_default(inst, def);
             inst.prefault = (def)=>prefault(inst, def);
             inst.catch = (params)=>schemas_catch(inst, params);
-            inst.pipe = (target)=>pipe(inst, target);
+            inst.pipe = (target)=>schemas_pipe(inst, target);
             inst.readonly = ()=>readonly(inst);
             inst.describe = (description)=>{
                 const cl = inst.clone();
@@ -17425,7 +17620,7 @@
             inst.in = def.in;
             inst.out = def.out;
         });
-        function pipe(in_, out) {
+        function schemas_pipe(in_, out) {
             return new ZodPipe({
                 type: "pipe",
                 in: in_,
@@ -18414,6 +18609,32 @@
         });
         const zPivotTableConfig = zTableConfig;
         const zWhiskersConfig = schemas_number().or(schemas_array(schemas_number())).default(1.5);
+        const zBoxPlotStyle = schemas_object({
+            selector: zSelector.or(zSelectors).nullish(),
+            boxVisible: schemas_boolean().nullish(),
+            boxColor: schemas_string().nullish(),
+            boxColorOpacity: schemas_number().min(0).max(1).nullish(),
+            boxBorderColor: schemas_string().nullish(),
+            boxBorderWidth: schemas_number().min(0).nullish(),
+            boxBorderOpacity: schemas_number().min(0).max(1).nullish()
+        });
+        const zOutlierStyle = schemas_object({
+            selector: union([
+                zSelector,
+                zSelectors
+            ]).optional(),
+            pointVisible: schemas_boolean().optional(),
+            pointSize: schemas_number().optional(),
+            pointColor: schemas_string().optional(),
+            pointColorOpacity: schemas_number().min(0).max(1).optional(),
+            pointBorderColor: schemas_string().optional(),
+            pointBorderWidth: schemas_number().min(0).optional(),
+            pointBorderStyle: schemas_enum([
+                'solid',
+                'dashed',
+                'dotted'
+            ]).optional()
+        });
         const zBoxplotConfig = schemas_object({
             backgroundColor: zBackgroundColor.nullish(),
             label: zLabel.nullish(),
@@ -18426,7 +18647,13 @@
             pivotGrid: zPivotChartGridConfig.nullish(),
             annotation: zAnnotationConfig.nullish(),
             whiskers: zWhiskersConfig.nullish(),
-            dimensionLinkage: zDimensionLinkage.nullish()
+            dimensionLinkage: zDimensionLinkage.nullish(),
+            boxPlotStyle: zBoxPlotStyle.omit({
+                selector: true
+            }).nullish(),
+            outlierStyle: zOutlierStyle.omit({
+                selector: true
+            }).nullish()
         });
         const zHistogramConfig = schemas_object({
             backgroundColor: zBackgroundColor.nullish(),
@@ -18545,7 +18772,9 @@
             barStyle: zBarStyle.or(schemas_array(zBarStyle)).nullish(),
             pointStyle: zPointStyle.or(schemas_array(zPointStyle)).nullish(),
             lineStyle: zLineStyle.or(schemas_array(zLineStyle)).nullish(),
-            areaStyle: zAreaStyle.or(schemas_array(zAreaStyle)).nullish()
+            areaStyle: zAreaStyle.or(schemas_array(zAreaStyle)).nullish(),
+            boxPlotStyle: zBoxPlotStyle.or(schemas_array(zBoxPlotStyle)).nullish(),
+            outlierStyle: zOutlierStyle.or(schemas_array(zOutlierStyle)).nullish()
         });
         const zAnnotationVerticalLine = schemas_object({
             selector: union([
@@ -19118,6 +19347,8 @@
             sort: zSort.nullish(),
             sortLegent: zSortLegend.nullish(),
             crosshairRect: zCrosshairRect.nullish(),
+            boxPlotStyle: schemas_array(zBoxPlotStyle).or(zBoxPlotStyle).nullish(),
+            outlierStyle: schemas_array(zOutlierStyle).or(zOutlierStyle).nullish(),
             theme: zTheme.nullish(),
             whiskers: zWhiskersConfig.nullish(),
             annotationPoint: schemas_array(zAnnotationPoint).or(zAnnotationPoint).nullish(),