@visactor/vseed 0.1.44 → 0.1.45

package/dist/umd/index.js

@@ -2451,11 +2451,13 @@
                 unfoldInfo
             };
         };
-        const colorAdapter = (ordinalPipe, linearPipe)=>(spec, context)=>{
+        function colorAdapter(ordinalPipe, linearPipe) {
+            return (spec, context)=>{
                 const { advancedVSeed, vseed } = context;
                 if (isLinearColor(advancedVSeed, vseed)) return linearPipe(spec, context);
                 return ordinalPipe(spec, context);
             };
+        }
         const isLinearColor = (advancedVSeed, vseed)=>{
             const { encoding } = advancedVSeed;
             const measures = vseed.measures || advancedVSeed.measures;
@@ -3089,7 +3091,7 @@
             const baseConfig = advancedVSeed.config[chartType];
             if (!baseConfig || !baseConfig.legend) return result;
             const { legend } = baseConfig;
-            const { enable, position = 'bottom', labelFontColor, labelColor, labelFontSize = 12, labelFontWeight, maxSize = 1, border, shapeType = 'rectRound' } = legend || {};
+            const { enable, position = 'bottom', labelFontColor, labelColor, labelFontSize = 12, pagerIconColor, pagerIconDisableColor, labelFontWeight, maxSize = 1, border, shapeType = 'rectRound' } = legend || {};
             const orient = [
                 'bottom',
                 'bottomLeft',
@@ -3128,6 +3130,7 @@
                 'rt',
                 'br'
             ].includes(position) ? 'end' : 'middle';
+            const labelTextColor = labelColor || labelFontColor;
             result.legends = {
                 type: 'discrete',
                 visible: enable,
@@ -3141,7 +3144,7 @@
                     maxWidth: '30%',
                     focusIconStyle: {
                         size: labelFontSize + 2,
-                        fill: labelColor || labelFontColor,
+                        fill: labelTextColor,
                         fontWeight: labelFontWeight
                     },
                     shape: {
@@ -3191,6 +3194,21 @@
                         }
                     }
                 },
+                pager: {
+                    textStyle: {
+                        fill: labelTextColor
+                    },
+                    handler: {
+                        style: {
+                            fill: pagerIconColor
+                        },
+                        state: {
+                            disable: {
+                                fill: pagerIconDisableColor
+                            }
+                        }
+                    }
+                },
                 padding: 0
             };
             return result;
@@ -3261,6 +3279,12 @@
                     }
                 }
             };
+            const measures = findAllMeasures(advancedVSeed.measures);
+            const colorMeasure = measures.find((m)=>'color' === m.encoding);
+            if (colorMeasure) {
+                const formatter = createFormatterByMeasure(colorMeasure);
+                result.legends.handlerText.formatter = formatter;
+            }
             return result;
         };
         const colorPointStyleFill = (stylePipe)=>(spec, context)=>{
@@ -3698,6 +3722,40 @@
                 if ('number' == typeof value) return obj[key] === value;
                 return true;
             });
+        const ANNOTATION_AREA_TEXT_STYLE_BY_POSITION = {
+            top: {
+                textAlign: 'center',
+                textBaseline: 'top'
+            },
+            topRight: {
+                textAlign: 'right',
+                textBaseline: 'top'
+            },
+            topLeft: {
+                textAlign: 'left',
+                textBaseline: 'top'
+            },
+            bottom: {
+                textAlign: 'center',
+                textBaseline: 'bottom'
+            },
+            bottomLeft: {
+                textAlign: 'left',
+                textBaseline: 'bottom'
+            },
+            bottomRight: {
+                textAlign: 'right',
+                textBaseline: 'bottom'
+            },
+            left: {
+                textAlign: 'left',
+                textBaseline: 'middle'
+            },
+            right: {
+                textAlign: 'right',
+                textBaseline: 'middle'
+            }
+        };
         const annotationPoint_annotationPoint = (spec, context)=>{
             const { advancedVSeed, vseed } = context;
             const { annotation, config } = advancedVSeed;
@@ -3794,23 +3852,8 @@
                 const { selector: selectorPoint, xValue, text = '', textPosition = 'insideEnd', textColor = theme?.textColor ?? '#ffffff', textFontSize = theme?.textFontSize ?? 12, textFontWeight = theme?.textFontWeight ?? 400, textAlign = 'center', textBaseline = 'top', lineColor = theme?.lineColor ?? '#212121', lineStyle = theme?.lineStyle ?? 'dashed', lineVisible = theme?.lineStyle ?? true, lineWidth = theme?.lineWidth ?? 1, textBackgroundVisible = theme?.textBackgroundVisible ?? true, textBackgroundColor = theme?.textBackgroundColor ?? '#212121', textBackgroundBorderColor = theme?.textBackgroundBorderColor ?? '#212121', textBackgroundBorderRadius = theme?.textBackgroundBorderRadius ?? 4, textBackgroundBorderWidth = theme?.textBackgroundBorderWidth ?? 1, textBackgroundPadding = theme?.textBackgroundPadding ?? 2 } = annotationVerticalLine;
                 const dataset = advancedVSeed.dataset.flat();
                 const generateOneMarkLine = (x)=>({
-                        positions: (datum, series)=>{
-                            const regionStart = series.getRegion()?.getLayoutStartPoint();
-                            const xAxisHelper = series.getXAxisHelper();
-                            const yAxisHelper = series.getYAxisHelper();
-                            const xPos = xAxisHelper.getScale(0).scale(x) + regionStart.x;
-                            const yRange = yAxisHelper.getScale(0).range();
-                            return [
-                                {
-                                    x: xPos,
-                                    y: yRange ? yRange[0] + regionStart.y : 0
-                                },
-                                {
-                                    x: xPos,
-                                    y: yRange ? yRange[1] + regionStart.y : 0
-                                }
-                            ];
-                        },
+                        x,
+                        autoRange: true,
                         zIndex: 1000,
                         line: {
                             style: {
@@ -3923,23 +3966,8 @@
                 const { selector: selectorPoint, yValue, text = '', textPosition = 'insideEnd', textColor = theme?.textColor ?? '#ffffff', textFontSize = theme?.textFontSize ?? 12, textFontWeight = theme?.textFontWeight ?? 400, textAlign = 'right', textBaseline = 'bottom', lineColor = theme?.lineColor ?? '#212121', lineStyle = theme?.lineStyle ?? 'dashed', lineVisible = theme?.lineStyle ?? true, lineWidth = theme?.lineWidth ?? 1, textBackgroundVisible = theme?.textBackgroundVisible ?? true, textBackgroundColor = theme?.textBackgroundColor ?? '#212121', textBackgroundBorderColor = theme?.textBackgroundBorderColor ?? '#212121', textBackgroundBorderRadius = theme?.textBackgroundBorderRadius ?? 4, textBackgroundBorderWidth = theme?.textBackgroundBorderWidth ?? 1, textBackgroundPadding = theme?.textBackgroundPadding ?? 2 } = annotationHorizontalLine;
                 const dataset = advancedVSeed.dataset.flat();
                 const generateOneMarkLine = (y)=>({
-                        positions: (datum, series)=>{
-                            const regionStart = series.getRegion()?.getLayoutStartPoint();
-                            const xAxisHelper = series.getXAxisHelper();
-                            const yAxisHelper = series.getYAxisHelper();
-                            const yPos = yAxisHelper.getScale(0).scale(y) + regionStart.y;
-                            const xRange = xAxisHelper.getScale(0).range();
-                            return [
-                                {
-                                    x: xRange ? xRange[0] + regionStart.x : 0,
-                                    y: yPos
-                                },
-                                {
-                                    x: xRange ? xRange[1] + regionStart.x : 0,
-                                    y: yPos
-                                }
-                            ];
-                        },
+                        y,
+                        autoRange: true,
                         zIndex: 1000,
                         line: {
                             style: {
@@ -4048,12 +4076,14 @@
                 left: 'insideLeft',
                 right: 'insideRight'
             };
+            const defaultTextPosition = isBarLikeChart(advancedVSeed) ? 'right' : 'top';
             const markArea = annotationAreaList.flatMap((annotationArea)=>{
-                const { selector: selectorPoint, text = '', textPosition = 'top', textColor = theme?.textColor ?? '#ffffff', textFontSize = theme?.textFontSize ?? 12, textFontWeight = theme?.textFontWeight ?? 400, textAlign = 'center', textBaseline = 'top', textBackgroundVisible = theme?.textBackgroundVisible ?? true, textBackgroundColor = theme?.textBackgroundColor ?? '#191d24', textBackgroundBorderColor = theme?.textBackgroundBorderColor ?? '#191d24', textBackgroundBorderWidth = theme?.textBackgroundBorderWidth ?? 1, textBackgroundBorderRadius = theme?.textBackgroundBorderRadius ?? 4, textBackgroundPadding = theme?.textBackgroundPadding ?? 4, areaColor = theme?.areaColor ?? '#888888', areaColorOpacity = theme?.areaColorOpacity ?? 0.15, areaBorderColor = theme?.areaBorderColor ?? '#888888', areaBorderRadius = theme?.areaBorderRadius ?? 4, areaBorderWidth = theme?.areaBorderWidth ?? 1, areaLineDash = theme?.areaLineDash, outerPadding = theme?.outerPadding ?? 4 } = annotationArea;
+                const { selector: selectorPoint, text = '', textColor = theme?.textColor ?? '#ffffff', textFontSize = theme?.textFontSize ?? 12, textFontWeight = theme?.textFontWeight ?? 400, textBackgroundVisible = theme?.textBackgroundVisible ?? true, textBackgroundColor = theme?.textBackgroundColor ?? '#191d24', textBackgroundBorderColor = theme?.textBackgroundBorderColor ?? '#191d24', textBackgroundBorderWidth = theme?.textBackgroundBorderWidth ?? 1, textBackgroundBorderRadius = theme?.textBackgroundBorderRadius ?? 4, textBackgroundPadding = theme?.textBackgroundPadding ?? 4, areaColor = theme?.areaColor ?? '#888888', areaColorOpacity = theme?.areaColorOpacity ?? 0.15, areaBorderColor = theme?.areaBorderColor ?? '#888888', areaBorderRadius = theme?.areaBorderRadius ?? 4, areaBorderWidth = theme?.areaBorderWidth ?? 1, areaLineDash = theme?.areaLineDash, outerPadding = theme?.outerPadding ?? 4 } = annotationArea;
                 const dataset = advancedVSeed.dataset.flat();
                 const selectedData = selectorPoint ? dataset.filter((datum)=>selector_selector(datum, selectorPoint)) : [];
-                const labelPosition = positionMap[textPosition || 'top'];
-                const isBottom = labelPosition.toLocaleLowerCase().includes('bottom');
+                const textPosition = annotationArea.textPosition ?? defaultTextPosition;
+                const textAlign = annotationArea.textAlign ?? ANNOTATION_AREA_TEXT_STYLE_BY_POSITION[textPosition].textAlign;
+                const textBaseline = annotationArea.textBaseline ?? ANNOTATION_AREA_TEXT_STYLE_BY_POSITION[textPosition].textBaseline;
                 return {
                     zIndex: 1000,
                     regionRelative: true,
@@ -4063,11 +4093,11 @@
                         const yAxisHelper = context.getYAxisHelper();
                         const xAxisHelper = context.getXAxisHelper();
                         if ('function' == typeof xAxisHelper?.getBandwidth) {
-                            const yScale = yAxisHelper.getScale();
+                            const regionRect = context.getRegion().getLayoutRect();
                             const minX = Math.min(...xyList.map((item)=>item.x)) - (outerPadding || 4);
                             const maxX = Math.max(...xyList.map((item)=>item.x)) + (outerPadding || 4);
-                            const minY = Math.min(...yScale.range());
-                            const maxY = Math.max(...yScale.range());
+                            const minY = 0;
+                            const maxY = regionRect.height;
                             return [
                                 {
                                     x: minX,
@@ -4088,11 +4118,11 @@
                             ];
                         }
                         if ('function' == typeof yAxisHelper?.getBandwidth) {
-                            const xScale = xAxisHelper.getScale();
+                            const regionRect = context.getRegion().getLayoutRect();
                             const minY = Math.min(...xyList.map((item)=>item.y)) - (outerPadding || 4);
                             const maxY = Math.max(...xyList.map((item)=>item.y)) + (outerPadding || 4);
-                            const minX = Math.min(...xScale.range());
-                            const maxX = Math.max(...xScale.range());
+                            const minX = 0;
+                            const maxX = regionRect.width;
                             return [
                                 {
                                     x: minX,
@@ -4115,12 +4145,11 @@
                         return [];
                     },
                     label: {
-                        position: labelPosition,
+                        position: positionMap[textPosition],
                         visible: true,
                         text: text,
                         style: {
                             opacity: 0.95,
-                            dy: isBottom ? 2 * -(textFontSize || 12) : 0,
                             textAlign: textAlign,
                             textBaseline: textBaseline,
                             fill: textColor,
@@ -4134,7 +4163,6 @@
                             padding: textBackgroundPadding,
                             style: {
                                 opacity: 0.95,
-                                dy: isBottom ? 2 * -(textFontSize || 12) : 0,
                                 cornerRadius: textBackgroundBorderRadius ?? 4,
                                 fill: textBackgroundColor,
                                 stroke: textBackgroundBorderColor,
@@ -4702,11 +4730,11 @@
                 if (!seriesSpec.point.style) seriesSpec.point.style = {};
                 if (!seriesSpec.line.style) seriesSpec.line.style = {};
                 const measureValueKey = datasetReshapeInfo[0].foldInfo.measureValue;
-                seriesSpec.point.style.fill = (datum)=>datum?.[measureValueKey] >= splitValue ? colorConfig.positiveColor : colorConfig.negativeColor;
-                seriesSpec.line.style.stroke = (datum)=>datum?.[measureValueKey] >= splitValue ? colorConfig.positiveColor : colorConfig.negativeColor;
+                seriesSpec.point.style.fill = (datum)=>datum?.[measureValueKey] < splitValue ? colorConfig.negativeColor : colorConfig.positiveColor;
+                seriesSpec.line.style.stroke = (datum)=>datum?.[measureValueKey] < splitValue ? colorConfig.negativeColor : colorConfig.positiveColor;
                 if (seriesSpec.label && seriesSpec.label.visible && chunk_JK3VNB42_n(seriesSpec.label.style?.fill)) seriesSpec.label.style = {
                     ...seriesSpec.label.style,
-                    fill: (datum)=>datum?.[measureValueKey] >= splitValue ? colorConfig.positiveColor : colorConfig.negativeColor
+                    fill: (datum)=>datum?.[measureValueKey] < splitValue ? colorConfig.negativeColor : colorConfig.positiveColor
                 };
             }
             return result;
@@ -5333,12 +5361,15 @@
                 legends
             };
         };
-        const pivotAdapter_pivotAdapter = (pipeline, pivotPipeline)=>(spec, context)=>{
+        const pivotAdapter_pivotAdapter = (pipeline, pivotPipeline)=>{
+            const adapted = (spec, context)=>{
                 const { vseed } = context;
                 const usePivotChart = isPivotChart(vseed);
                 if (usePivotChart) return execPipeline(pivotPipeline, context, spec);
                 return execPipeline(pipeline, context, spec);
             };
+            return adapted;
+        };
         const line_line = [
             initLine,
             colorAdapter(color_color, linearColor),
@@ -5745,17 +5776,12 @@
                 left: 'insideLeft',
                 right: 'insideRight'
             };
-            const defaultOptions = isBarLikeChart(advancedVSeed) ? {
-                textPosition: 'right',
-                textAlign: 'right'
-            } : {
-                textPosition: 'top',
-                textAlign: 'center'
-            };
+            const defaultTextPosition = isBarLikeChart(advancedVSeed) ? 'right' : 'top';
             const markArea = annotationAreaList.flatMap((annotationArea)=>{
-                const { selector: selectorPoint, text = '', textColor = theme?.textColor ?? '#ffffff', textFontSize = theme?.textFontSize ?? 12, textFontWeight = theme?.textFontWeight ?? 400, textAlign = defaultOptions.textAlign, textBaseline = 'middle', textBackgroundVisible = theme?.textBackgroundVisible ?? true, textBackgroundColor = theme?.textBackgroundColor ?? '#191d24', textBackgroundBorderColor = theme?.textBackgroundBorderColor ?? '#191d24', textBackgroundBorderWidth = theme?.textBackgroundBorderWidth ?? 1, textBackgroundBorderRadius = theme?.textBackgroundBorderRadius ?? 4, textBackgroundPadding = theme?.textBackgroundPadding ?? 4, areaColor = theme?.areaColor ?? '#888888', areaColorOpacity = theme?.areaColorOpacity ?? 0.15, areaBorderColor = theme?.areaBorderColor ?? '#888888', areaBorderRadius = theme?.areaBorderRadius ?? 4, areaBorderWidth = theme?.areaBorderWidth ?? 1, areaLineDash = theme?.areaLineDash, outerPadding = theme?.outerPadding ?? 4 } = annotationArea;
-                const textPosition = annotationArea.textPosition ?? defaultOptions.textPosition;
-                const dy = textPosition.includes('bottom') ? -1 * textFontSize : 0;
+                const { selector: selectorPoint, text = '', textColor = theme?.textColor ?? '#ffffff', textFontSize = theme?.textFontSize ?? 12, textFontWeight = theme?.textFontWeight ?? 400, textBackgroundVisible = theme?.textBackgroundVisible ?? true, textBackgroundColor = theme?.textBackgroundColor ?? '#191d24', textBackgroundBorderColor = theme?.textBackgroundBorderColor ?? '#191d24', textBackgroundBorderWidth = theme?.textBackgroundBorderWidth ?? 1, textBackgroundBorderRadius = theme?.textBackgroundBorderRadius ?? 4, textBackgroundPadding = theme?.textBackgroundPadding ?? 4, areaColor = theme?.areaColor ?? '#888888', areaColorOpacity = theme?.areaColorOpacity ?? 0.15, areaBorderColor = theme?.areaBorderColor ?? '#888888', areaBorderRadius = theme?.areaBorderRadius ?? 4, areaBorderWidth = theme?.areaBorderWidth ?? 1, areaLineDash = theme?.areaLineDash, outerPadding = theme?.outerPadding ?? 4 } = annotationArea;
+                const textPosition = annotationArea.textPosition ?? defaultTextPosition;
+                const textAlign = annotationArea.textAlign ?? ANNOTATION_AREA_TEXT_STYLE_BY_POSITION[textPosition].textAlign;
+                const textBaseline = annotationArea.textBaseline ?? ANNOTATION_AREA_TEXT_STYLE_BY_POSITION[textPosition].textBaseline;
                 const dataset = advancedVSeed.dataset.flat();
                 const selectedData = selectorPoint ? dataset.filter((datum)=>selector_selector(datum, selectorPoint)) : [];
                 return {
@@ -5770,15 +5796,15 @@
                         if ('function' == typeof xAxisHelper?.getBandwidth) {
                             const depth = context.fieldX.length ?? 0;
                             const xBandWidth = xAxisHelper?.getBandwidth?.(depth - 1);
-                            const yScale = yAxisHelper.getScale();
+                            const regionRect = context.getRegion().getLayoutRect();
                             const startX = Math.min(...xyList.map((item)=>item.x)) - (outerPadding || 4);
                             const endX = Math.max(...xyList.map((item)=>item.x)) + (outerPadding || 4);
                             const width = endX - startX + xBandWidth;
                             const middleX = (endX + startX) / 2 + xBandWidth * (0.5 - bandPosition);
                             const minX = middleX - width / 2;
                             const maxX = middleX + width / 2;
-                            const minY = Math.min(...yScale.range());
-                            const maxY = Math.max(...yScale.range());
+                            const minY = 0;
+                            const maxY = regionRect.height;
                             return [
                                 {
                                     x: minX,
@@ -5801,15 +5827,15 @@
                         if ('function' == typeof yAxisHelper?.getBandwidth) {
                             const depth = context.fieldY.length ?? 0;
                             const yBandWidth = yAxisHelper?.getBandwidth?.(depth - 1);
-                            const xScale = xAxisHelper.getScale();
+                            const regionRect = context.getRegion().getLayoutRect();
                             const startY = Math.min(...xyList.map((item)=>item.y)) - (outerPadding || 4);
                             const endY = Math.max(...xyList.map((item)=>item.y)) + (outerPadding || 4);
                             const width = endY - startY + yBandWidth;
                             const middleY = (endY + startY) / 2 + yBandWidth * (0.5 - bandPosition);
                             const minY = middleY - width / 2;
                             const maxY = middleY + width / 2;
-                            const minX = Math.min(...xScale.range());
-                            const maxX = Math.max(...xScale.range());
+                            const minX = 0;
+                            const maxX = regionRect.width;
                             return [
                                 {
                                     x: minX,
@@ -5837,7 +5863,6 @@
                         text: text,
                         style: {
                             opacity: 0.95,
-                            dy: dy,
                             textAlign: textAlign,
                             textBaseline: textBaseline,
                             stroke: textBackgroundColor,
@@ -5851,7 +5876,6 @@
                             padding: textBackgroundPadding,
                             style: {
                                 opacity: 0.95,
-                                dy: dy,
                                 cornerRadius: textBackgroundBorderRadius ?? 4,
                                 fill: textBackgroundColor,
                                 stroke: textBackgroundBorderColor,
@@ -11732,42 +11756,9 @@
                 ...tooltip
             ]);
         };
-        const bin_bin = (data, options)=>{
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-            const field = null == options ? void 0 : options.field;
-            if (!field) return [];
-            const countField = options.countField, n = data.length;
-            let thresholds, min = 1 / 0, max = -1 / 0;
-            if (options.extent) min = options.extent[0], max = options.extent[1];
-            else for(let i = 0; i < n; i++){
-                const v = data[i][field];
-                if (common_isNil(v)) continue;
-                const num = +v;
-                Number.isFinite(num) && (num < min && (min = num), num > max && (max = num));
-            }
-            if (!Number.isFinite(min) || !Number.isFinite(max) || 0 === n) return [];
-            if (options.thresholds && options.thresholds.length) thresholds = options.thresholds.slice(), thresholds.sort((a, b)=>a - b);
-            else if ("number" == typeof options.step && options.step > 0) {
-                const stepSize = options.step;
-                let startMin = min;
-                for(options.extent || (startMin = Math.floor(min / stepSize) * stepSize), thresholds = [
-                    startMin
-                ]; startMin <= max;)startMin += stepSize, thresholds.push(startMin);
-            } else {
-                const bins = options.bins && options.bins > 0 ? Math.floor(options.bins) : 10;
-                if (max - min > 1) {
-                    const start = Math.floor(min), stepSizeInt = Math.ceil((max - start) / bins);
-                    thresholds = new Array(bins + 1);
-                    for(let i = 0; i <= bins; i++)thresholds[i] = start + stepSizeInt * i;
-                } else {
-                    const stepSize = (max - min) / bins;
-                    thresholds = new Array(bins + 1);
-                    for(let i = 0; i <= bins; i++)thresholds[i] = min + stepSize * i;
-                }
-            }
-            const numBins = Math.max(0, thresholds.length - 1);
-            if (0 === numBins) return [];
-            const x0Name = null != (_b = null == (_a = options.outputNames) ? void 0 : _a.x0) ? _b : "x0", x1Name = null != (_d = null == (_c = options.outputNames) ? void 0 : _c.x1) ? _d : "x1", countName = null != (_f = null == (_e = options.outputNames) ? void 0 : _e.count) ? _f : "count", valuesName = null != (_h = null == (_g = options.outputNames) ? void 0 : _g.values) ? _h : "values", percentageName = null != (_k = null == (_j = options.outputNames) ? void 0 : _j.percentage) ? _k : "percentage", out = [];
+        const subBin = (data, options)=>{
+            var _a, _b;
+            const { numBins: numBins, thresholds: thresholds, countName: countName, percentageName: percentageName, valuesName: valuesName, countField: countField, field: field, n: n, x0Name: x0Name, x1Name: x1Name } = options, out = [];
             if (!options.groupField) for(let i = 0; i < numBins; i++){
                 const rec = {
                     [x0Name]: thresholds[i],
@@ -11784,11 +11775,11 @@
                 if (Number.isFinite(num)) for(let j = 0; j < numBins; j++){
                     const left = thresholds[j], right = thresholds[j + 1];
                     if (num >= left && num < right || j === numBins - 1 && num <= right) {
-                        const datumCount = null != (_l = data[i][countField]) ? _l : 1;
+                        const datumCount = null != (_a = data[i][countField]) ? _a : 1;
                         if (usingGroup) {
                             let gk;
                             gk = common_isArray(groupField) ? groupField.map((f)=>String(data[i][f])).join("||") : String(data[i][groupField]);
-                            const m = binGroupCounts[j], prev = null != (_m = m.get(gk)) ? _m : 0;
+                            const m = binGroupCounts[j], prev = null != (_b = m.get(gk)) ? _b : 0;
                             m.set(gk, prev + datumCount);
                             const repMap = binGroupRepr[j];
                             if (repMap.has(gk) || (common_isArray(groupField) ? repMap.set(gk, Object.fromEntries(groupField.map((f)=>[
@@ -11830,6 +11821,72 @@
             }
             return finalOut;
         };
+        const bin_bin = (data, options)=>{
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+            const field = null == options ? void 0 : options.field;
+            if (!field) return [];
+            const countField = options.countField, n = data.length;
+            let thresholds, min = 1 / 0, max = -1 / 0;
+            if (options.extent) min = options.extent[0], max = options.extent[1];
+            else for(let i = 0; i < n; i++){
+                const v = data[i][field];
+                if (common_isNil(v)) continue;
+                const num = +v;
+                Number.isFinite(num) && (num < min && (min = num), num > max && (max = num));
+            }
+            if (!Number.isFinite(min) || !Number.isFinite(max) || 0 === n) return [];
+            if (options.thresholds && options.thresholds.length) thresholds = options.thresholds.slice(), thresholds.sort((a, b)=>a - b);
+            else if ("number" == typeof options.step && options.step > 0) {
+                const stepSize = options.step;
+                let startMin = min;
+                for(options.extent || (startMin = Math.floor(min / stepSize) * stepSize), thresholds = [
+                    startMin
+                ]; startMin <= max;)startMin += stepSize, thresholds.push(startMin);
+            } else {
+                const bins = options.bins && options.bins > 0 ? Math.floor(options.bins) : 10;
+                if (max - min > 1) {
+                    const start = Math.floor(min), stepSizeInt = Math.ceil((max - start) / bins);
+                    thresholds = new Array(bins + 1);
+                    for(let i = 0; i <= bins; i++)thresholds[i] = start + stepSizeInt * i;
+                } else {
+                    const stepSize = (max - min) / bins;
+                    thresholds = new Array(bins + 1);
+                    for(let i = 0; i <= bins; i++)thresholds[i] = min + stepSize * i;
+                }
+            }
+            const numBins = Math.max(0, thresholds.length - 1);
+            if (0 === numBins) return [];
+            const x0Name = null != (_b = null == (_a = options.outputNames) ? void 0 : _a.x0) ? _b : "x0", x1Name = null != (_d = null == (_c = options.outputNames) ? void 0 : _c.x1) ? _d : "x1", countName = null != (_f = null == (_e = options.outputNames) ? void 0 : _e.count) ? _f : "count", valuesName = null != (_h = null == (_g = options.outputNames) ? void 0 : _g.values) ? _h : "values", percentageName = null != (_k = null == (_j = options.outputNames) ? void 0 : _j.percentage) ? _k : "percentage", facetField = common_isArray(null == options ? void 0 : options.facetField) ? null == options ? void 0 : options.facetField : (null == options ? void 0 : options.facetField) ? [
+                options.facetField
+            ] : [], groupField = common_isArray(null == options ? void 0 : options.groupField) ? null == options ? void 0 : options.groupField : (null == options ? void 0 : options.groupField) ? [
+                options.groupField
+            ] : [], subViewOptions = Object.assign(Object.assign({}, options), {
+                numBins: numBins,
+                thresholds: thresholds,
+                countName: countName,
+                percentageName: percentageName,
+                valuesName: valuesName,
+                countField: countField,
+                field: field,
+                n: n,
+                x0Name: x0Name,
+                x1Name: x1Name
+            });
+            if (!facetField.length) return subBin(data, subViewOptions);
+            const subViewMap = {};
+            return data.forEach((dataItem)=>{
+                const subViewKey = facetField.map((field)=>null == dataItem ? void 0 : dataItem[field]).join("-&&-");
+                subViewMap[subViewKey] ? subViewMap[subViewKey].push(dataItem) : subViewMap[subViewKey] = [
+                    dataItem
+                ];
+            }), Object.values(subViewMap).map((subDataset)=>subBin(subDataset, Object.assign(Object.assign({}, subViewOptions), {
+                    groupField: [
+                        ...groupField,
+                        ...facetField
+                    ],
+                    n: subDataset.length
+                }))).flat();
+        };
         const reshapeWithHistogramEncoding = (advancedVSeed, context)=>{
             const result = {
                 ...advancedVSeed
@@ -12306,7 +12363,7 @@
                                 const scaleY = s.getYAxisHelper().getScale?.(0);
                                 const viewData = s.getViewData()?.latestData;
                                 if (!dataset || !dataset.length || !viewData || !viewData.length || !scaleY) return null;
-                                const simpleData = dataset.filter((entry)=>rowColumnFields.length ? rowColumnFields.every((dim)=>entry[dim.id] === viewData[0][dim.id]) : true).map((d)=>d[encoding.value?.[0]]);
+                                const simpleData = dataset.filter((entry)=>rowColumnFields.length ? rowColumnFields.every((dim)=>entry[dim.id] === viewData[0][dim.id]) : true).map((d)=>+d[encoding.value?.[0]]);
                                 const res = kde_kde(simpleData, {
                                     bandwidth: Math.abs(viewData[0][BinEndMeasureId] - viewData[0][BinStartMeasureId])
                                 });
@@ -12442,7 +12499,7 @@
                                 const scaleY = s.getYAxisHelper().getScale?.(0);
                                 const viewData = s.getViewData()?.latestData;
                                 if (!dataset || !dataset.length || !viewData || !viewData.length || !scaleY) return null;
-                                const simpleData = dataset.filter((entry)=>rowColumnFields.length ? rowColumnFields.every((dim)=>entry[dim.id] === viewData[0][dim.id]) : true).map((d)=>d[encoding.value?.[0]]);
+                                const simpleData = dataset.filter((entry)=>rowColumnFields.length ? rowColumnFields.every((dim)=>entry[dim.id] === viewData[0][dim.id]) : true).map((d)=>+d[encoding.value?.[0]]);
                                 const res = ecdf(simpleData);
                                 const N = Math.max(3, Math.floor(simpleData.length / 4));
                                 const lineData = res.evaluateGrid(N);
@@ -12650,10 +12707,21 @@
                 maxSize: 1,
                 shapeType: 'rectRound',
                 position: 'rt',
-                labelColor: '#646A73',
                 labelFontSize: 12,
                 labelFontWeight: 400
             });
+        const getDarkLegend = ()=>({
+                ...getDefaultLegend(),
+                labelColor: '#BBBDC3',
+                pagerIconColor: '#89909D',
+                pagerIconDisableColor: '#2A2D33'
+            });
+        const getLightLegend = ()=>({
+                ...getDefaultLegend(),
+                labelColor: '#606773',
+                pagerIconColor: '#89909D',
+                pagerIconDisableColor: '#F1F2F5'
+            });
         const getDefaultTableConfig = ()=>({
                 bodyFontSize: 12,
                 bodyBackgroundColor: 'transparent',
@@ -12707,8 +12775,6 @@
         };
         const getDarkPivotChartGridConfig = ()=>{
             const res = pickPivotChartGridConfig(getDarkTableConfig());
-            res.chartGridColor = '#303339';
-            res.axisLabelColor = '#E2E3E6';
             return res;
         };
         const getDefaultTooltip = ()=>({
@@ -12750,13 +12816,13 @@
                 title: {
                     visible: false,
                     titleText: '',
-                    titleColor: '#646A73',
+                    titleColor: '#606773',
                     titleFontSize: 12,
                     titleFontWeight: 400
                 },
                 grid: {
                     visible: true,
-                    gridColor: '#36415926',
+                    gridColor: '#E3E5EB',
                     gridWidth: 0.5,
                     gridLineDash: [
                         4,
@@ -12767,11 +12833,11 @@
                     visible: false,
                     tickInside: false,
                     tickSize: 4,
-                    tickColor: '#3641594d'
+                    tickColor: '#21252C'
                 },
                 line: {
                     visible: false,
-                    lineColor: '#3641594d',
+                    lineColor: '#21252C',
                     lineWidth: 1
                 }
             });
@@ -12796,13 +12862,13 @@
                 title: {
                     visible: false,
                     titleText: '',
-                    titleColor: '#646A73',
+                    titleColor: '#606773',
                     titleFontSize: 12,
                     titleFontWeight: 400
                 },
                 grid: {
                     visible: false,
-                    gridColor: '#36415926',
+                    gridColor: '#E3E5EB',
                     gridWidth: 0.5,
                     gridLineDash: [
                         4,
@@ -12813,11 +12879,11 @@
                     visible: false,
                     tickInside: false,
                     tickSize: 4,
-                    tickColor: '#3641594d'
+                    tickColor: '#21252C'
                 },
                 line: {
                     visible: true,
-                    lineColor: '#3641594d',
+                    lineColor: '#21252C',
                     lineWidth: 1
                 }
             });
@@ -12827,14 +12893,14 @@
                 label: {
                     visible: true,
                     labelAngle: 0,
-                    labelColor: '#E2E3E6',
+                    labelColor: '#888C93',
                     labelFontSize: 12,
                     labelFontWeight: 400
                 },
                 title: {
                     visible: false,
                     titleText: '',
-                    titleColor: '#FDFDFD',
+                    titleColor: '#BBBDC3',
                     titleFontSize: 12,
                     titleFontWeight: 400
                 },
@@ -12851,11 +12917,11 @@
                     visible: false,
                     tickInside: false,
                     tickSize: 4,
-                    tickColor: '#4B4F54'
+                    tickColor: '#303339'
                 },
                 line: {
                     visible: false,
-                    lineColor: '#4B4F54',
+                    lineColor: '#303339',
                     lineWidth: 1
                 }
             });
@@ -12873,14 +12939,14 @@
                 label: {
                     visible: true,
                     labelAngle: 0,
-                    labelColor: '#E2E3E6',
+                    labelColor: '#888C93',
                     labelFontSize: 12,
                     labelFontWeight: 400
                 },
                 title: {
                     visible: false,
                     titleText: '',
-                    titleColor: '#FDFDFD',
+                    titleColor: '#BBBDC3',
                     titleFontSize: 12,
                     titleFontWeight: 400
                 },
@@ -12897,11 +12963,11 @@
                     visible: false,
                     tickInside: false,
                     tickSize: 4,
-                    tickColor: '#4B4F54'
+                    tickColor: '#303339'
                 },
                 line: {
                     visible: true,
-                    lineColor: '#4B4F54',
+                    lineColor: '#303339',
                     lineWidth: 1
                 }
             });
@@ -12909,15 +12975,15 @@
                 textBackgroundVisible: true,
                 textFontSize: 12,
                 textFontWeight: 400,
-                textBackgroundBorderRadius: 4,
+                textBackgroundBorderRadius: 0,
                 textBackgroundBorderWidth: 1,
                 textBackgroundPadding: 2
             });
         const getLightAnnotationPoint = ()=>({
                 ...getDefaultAnnotationPoint(),
                 textColor: '#ffffff',
-                textBackgroundColor: '#364159',
-                textBackgroundBorderColor: '#3641594d'
+                textBackgroundColor: '#BCC1CB',
+                textBackgroundBorderColor: '#BCC1CB'
             });
         const getDefaultAnnotationLine = ()=>({
                 lineVisible: true,
@@ -12946,7 +13012,7 @@
                 textBackgroundVisible: true,
                 textBackgroundBorderWidth: 1,
                 textBackgroundBorderRadius: 0,
-                textBackgroundPadding: 4,
+                textBackgroundPadding: 2,
                 areaBorderWidth: 0,
                 areaBorderRadius: 0,
                 areaLineDash: [
@@ -12972,9 +13038,9 @@
             });
         const getDarkAnnotationPoint = ()=>({
                 ...getDefaultAnnotationPoint(),
-                textColor: '#4B4F54',
-                textBackgroundColor: '#ffffff',
-                textBackgroundBorderColor: '#ffffff'
+                textColor: '#E2E3E6',
+                textBackgroundColor: '#55595F',
+                textBackgroundBorderColor: '#55595F'
             });
         const getDarkAnnotationHorizontalLine = ()=>({
                 ...getDefaultAnnotationLine(),
@@ -13100,7 +13166,7 @@
                 backgroundColor: 'transparent',
                 color: getLightColor(),
                 label: getLightLabel(),
-                legend: getDefaultLegend(),
+                legend: getLightLegend(),
                 tooltip: getLightTooltip()
             };
             const tableConfig = getLightTableConfig();
@@ -13369,7 +13435,7 @@
                 backgroundColor: 'transparent',
                 color: getDarkColor(),
                 label: getDarkLabel(),
-                legend: getDefaultLegend(),
+                legend: getDarkLegend(),
                 tooltip: getDarkTooltip()
             };
             const tableConfig = getDarkTableConfig();
@@ -17464,6 +17530,8 @@
                 'br'
             ]).default('bottom').nullish(),
             labelColor: schemas_string().default('#fff').nullish(),
+            pagerIconColor: schemas_string().nullish(),
+            pagerIconDisableColor: schemas_string().nullish(),
             labelFontSize: schemas_number().default(12).nullish(),
             labelFontWeight: schemas_number().or(schemas_string()).default(400).nullish()
         });