@visactor/vseed 0.4.26 → 0.4.28

package/dist/umd/index.js

@@ -1341,7 +1341,7 @@
                 registerScatter: ()=>registerScatter,
                 zAreaPercent: ()=>zAreaPercent,
                 isDimension: ()=>isDimension,
-                isBarLikeChart: ()=>isBarLikeChart,
+                isBarLikeChart: ()=>chatType_isBarLikeChart,
                 columnParallelAdvancedPipeline: ()=>columnParallelAdvancedPipeline,
                 deleteDimensionTreeByCallback: ()=>deleteDimensionTreeByCallback,
                 zBarConfig: ()=>zBarConfig,
@@ -3197,7 +3197,7 @@ self.R = R;
             const isAreaPercent = (vseed)=>vseed.chartType === ChartTypeEnum.AreaPercent;
             const isColumnPercent = (vseed)=>vseed.chartType === ChartTypeEnum.ColumnPercent;
             const isBarPercent = (vseed)=>vseed.chartType === ChartTypeEnum.BarPercent;
-            const isBarLikeChart = (vseed)=>vseed.chartType === ChartTypeEnum.Bar || vseed.chartType === ChartTypeEnum.RaceBar || vseed.chartType === ChartTypeEnum.BarPercent || vseed.chartType === ChartTypeEnum.BarParallel;
+            const chatType_isBarLikeChart = (vseed)=>vseed.chartType === ChartTypeEnum.Bar || vseed.chartType === ChartTypeEnum.RaceBar || vseed.chartType === ChartTypeEnum.BarPercent || vseed.chartType === ChartTypeEnum.BarParallel;
             const isVTable = (vseed)=>[
                     'table',
                     'pivotTable'
@@ -6986,8 +6986,11 @@ self.R = R;
             };
             const generateAnnotationPointPipe = (options)=>{
                 const findSelectedDatas = options.findSelectedDatas ?? ((opts)=>{
-                    const { dataset, selector: s, dynamicFilter } = opts;
-                    return dataset.filter((datum)=>dynamicFilter ? selectorWithDynamicFilter(datum, dynamicFilter, s) : selector_selector(datum, s));
+                    const { dataset, selector: s, measureId, dynamicFilter } = opts;
+                    return dataset.filter((datum)=>{
+                        const isSelected = dynamicFilter ? selectorWithDynamicFilter(datum, dynamicFilter, s) : selector_selector(datum, s);
+                        return isSelected && (!measureId || datum[MeasureId] === measureId);
+                    });
                 });
                 const generateMarkPoint = options.generateMarkPoint ?? ((datum)=>[
                         {
@@ -7016,7 +7019,7 @@ self.R = R;
                     const annotationPointList = Array.isArray(annotationPoint) ? annotationPoint : [
                         annotationPoint
                     ];
-                    const isHorizontalBar = isBarLikeChart(advancedVSeed);
+                    const isHorizontalBar = chatType_isBarLikeChart(advancedVSeed);
                     const defaultStyle = isHorizontalBar ? {
                         textAlign: 'right',
                         textBaseline: 'middle'
@@ -7025,11 +7028,12 @@ self.R = R;
                         textBaseline: 'top'
                     };
                     const markPoint = annotationPointList.flatMap((annotationPoint)=>{
-                        const { selector: selectorPoint, dynamicFilter, text = '', textColor = theme?.textColor ?? '#ffffff', textFontSize = theme?.textFontSize ?? 12, textFontWeight = theme?.textFontWeight ?? 400, textAlign = defaultStyle.textAlign, textBaseline = defaultStyle.textBaseline, textBackgroundBorderColor = theme?.textBackgroundBorderColor, textBackgroundBorderRadius = theme?.textBackgroundBorderRadius ?? 4, textBackgroundBorderWidth = theme?.textBackgroundBorderWidth ?? 1, textBackgroundColor = theme?.textBackgroundColor ?? '#212121', textBackgroundPadding = theme?.textBackgroundPadding ?? 2, textBackgroundVisible = theme?.textBackgroundVisible ?? true, offsetX = theme?.offsetX ?? 0, offsetY = theme?.offsetY ?? 0 } = annotationPoint;
+                        const { selector: selectorPoint, measureId, dynamicFilter, text = '', textColor = theme?.textColor ?? '#ffffff', textFontSize = theme?.textFontSize ?? 12, textFontWeight = theme?.textFontWeight ?? 400, textAlign = defaultStyle.textAlign, textBaseline = defaultStyle.textBaseline, textBackgroundBorderColor = theme?.textBackgroundBorderColor, textBackgroundBorderRadius = theme?.textBackgroundBorderRadius ?? 4, textBackgroundBorderWidth = theme?.textBackgroundBorderWidth ?? 1, textBackgroundColor = theme?.textBackgroundColor ?? '#212121', textBackgroundPadding = theme?.textBackgroundPadding ?? 2, textBackgroundVisible = theme?.textBackgroundVisible ?? true, offsetX = theme?.offsetX ?? 0, offsetY = theme?.offsetY ?? 0 } = annotationPoint;
                         const dataset = advancedVSeed.dataset.flat();
                         const selectedData = selectorPoint || dynamicFilter ? findSelectedDatas({
                             dataset,
                             selector: selectorPoint,
+                            measureId,
                             dynamicFilter,
                             spec,
                             context
@@ -7251,8 +7255,9 @@ self.R = R;
                 };
             };
             const getStackRuntimeTotal = (runtimeMatches)=>{
+                if (0 === runtimeMatches.length) return;
                 const stackEndValues = runtimeMatches.map((datum)=>Number(datum[STACK_END_FIELD]));
-                if (stackEndValues.some((value)=>Number.isNaN(value))) return;
+                if (stackEndValues.some((value)=>!Number.isFinite(value))) return;
                 if (hasMixedSigns(stackEndValues)) throw new Error('annotationDifferenceLine does not support mixed-sign runtime stack totals in v1');
                 return stackEndValues.some((value)=>value < 0) ? Math.min(...stackEndValues) : Math.max(...stackEndValues);
             };
@@ -7265,7 +7270,7 @@ self.R = R;
                     const runtimeStackEnd = Number(runtimeMatch?.[STACK_END_FIELD]);
                     return {
                         ...runtimeMatch ?? anchor.coordinateDatum,
-                        [relativeSeries.getStackValueField()]: Number.isNaN(runtimeStackEnd) ? anchor.value : runtimeStackEnd
+                        [relativeSeries.getStackValueField()]: Number.isFinite(runtimeStackEnd) ? runtimeStackEnd : anchor.value
                     };
                 }
                 const runtimeMatches = seriesData.filter((datum)=>isSubset(anchor.stackGroupDatum, datum));
@@ -7284,40 +7289,137 @@ self.R = R;
                 if (!useElementStackEnd || !anchor.matchedDatum) return anchor.value;
                 const runtimeMatch = seriesData.find((datum)=>isSubset(anchor.matchedDatum, datum));
                 const runtimeStackEnd = Number(runtimeMatch?.[STACK_END_FIELD]);
-                return Number.isNaN(runtimeStackEnd) ? anchor.value : runtimeStackEnd;
+                return Number.isFinite(runtimeStackEnd) ? runtimeStackEnd : anchor.value;
             };
-            const buildDifferenceText = (startValue, endValue, differenceType = 'absolute')=>{
+            const getDifferenceValue = (startValue, endValue, differenceType = 'absolute')=>{
                 if ('percent' === differenceType) {
                     if (0 === startValue) throw new Error('annotationDifferenceLine percent difference cannot be computed because start value is 0');
-                    return `${((endValue - startValue) / startValue * 100).toFixed(0)}%`;
+                    return (endValue - startValue) / startValue;
                 }
-                return `${endValue - startValue}`;
-            };
-            const inferDifferenceConnectDirection = (vseed, values)=>{
-                const isNegativeSide = values.every((value)=>value < 0);
-                if (isBarLikeChart(vseed)) return isNegativeSide ? 'left' : 'right';
-                return isNegativeSide ? 'bottom' : 'top';
+                return endValue - startValue;
             };
-            const inferDifferenceBracketDirection = (start, end)=>{
-                if (void 0 === start.bandIndex || void 0 === end.bandIndex) return 'right';
-                return start.bandIndex <= end.bandIndex ? 'right' : 'left';
+            const buildDifferenceText = (startValue, endValue, differenceType = 'absolute', formatter)=>{
+                const differenceValue = getDifferenceValue(startValue, endValue, differenceType);
+                if (formatter) return formatter(differenceValue);
+                if ('percent' === differenceType) return `${(100 * differenceValue).toFixed(2)}%`;
+                return `${differenceValue}`;
             };
             const DEFAULT_LINE_COLOR = '#BCC1CB';
             const DEFAULT_TEXT_COLOR = '#ffffff';
             const DEFAULT_TEXT_BACKGROUND_COLOR = '#BCC1CB';
             const DEFAULT_TEXT_FONT_SIZE = 12;
-            const DEFAULT_EXPAND_DISTANCE = 24;
             const DEFAULT_LINE_WIDTH = 2;
             const DEFAULT_CORNER_RADIUS = 4;
             const DEFAULT_LABEL_PADDING = 4;
             const DEFAULT_END_SYMBOL_SIZE = 12;
             const DEFAULT_END_SYMBOL_REF_X = -4;
-            const DEFAULT_BRACKET_EXPAND_DISTANCE = 80;
+            const DEFAULT_GUTTER_BASE_OFFSET = 20;
+            const DEFAULT_GUTTER_RIGHT_PADDING = 44;
+            const DEFAULT_GUTTER_TOP_PADDING = 36;
             const DEFAULT_BRACKET_LINE_DASH = [
                 2,
                 2
             ];
+            const DEFAULT_PERCENT_DIFFERENCE_FORMAT = {
+                type: 'percent',
+                fractionDigits: 2
+            };
             const getDifferenceLinePath = (index, total)=>1 === total ? 'annotationDifferenceLine' : `annotationDifferenceLine[${index}]`;
+            const annotationDifferenceLine_toArray = (value)=>{
+                if (Array.isArray(value)) return value;
+                return null == value ? [] : [
+                    value
+                ];
+            };
+            const normalizeRegionPadding = (padding)=>{
+                if ('number' == typeof padding) return {
+                    top: padding,
+                    right: padding,
+                    bottom: padding,
+                    left: padding
+                };
+                return {
+                    top: padding?.top ?? 0,
+                    right: padding?.right ?? 0,
+                    bottom: padding?.bottom ?? 0,
+                    left: padding?.left ?? 0
+                };
+            };
+            const mergeDifferenceLineRegionPadding = (spec, paddingPatch)=>{
+                const region = spec.region;
+                if (!Array.isArray(region) || 0 === region.length) return spec;
+                const mergedPadding = normalizeRegionPadding(region[0].padding);
+                if (void 0 !== paddingPatch.top) mergedPadding.top = Math.max(mergedPadding.top, paddingPatch.top);
+                if (void 0 !== paddingPatch.right) mergedPadding.right = Math.max(mergedPadding.right, paddingPatch.right);
+                if (void 0 !== paddingPatch.bottom) mergedPadding.bottom = Math.max(mergedPadding.bottom, paddingPatch.bottom);
+                if (void 0 !== paddingPatch.left) mergedPadding.left = Math.max(mergedPadding.left, paddingPatch.left);
+                return {
+                    ...spec,
+                    region: [
+                        {
+                            ...region[0],
+                            padding: mergedPadding
+                        },
+                        ...region.slice(1)
+                    ]
+                };
+            };
+            const buildFixedGutterExpandDistance = (isHorizontalChart)=>(_markerData, context)=>{
+                    const region = context?.region;
+                    const coordinatePoints = Array.isArray(context?.coordinatePoints) ? context.coordinatePoints : [];
+                    if (!region || 0 === coordinatePoints.length) return 0;
+                    const { x: regionStartX, y: regionStartY } = region.getLayoutStartPoint();
+                    const { width } = region.getLayoutRect();
+                    if (isHorizontalChart) {
+                        const targetY = regionStartY - DEFAULT_GUTTER_BASE_OFFSET;
+                        const minY = Math.min(...coordinatePoints.map((point)=>point.y));
+                        return Math.max(0, minY - targetY);
+                    }
+                    const targetX = regionStartX + width + DEFAULT_GUTTER_BASE_OFFSET;
+                    const maxX = Math.max(...coordinatePoints.map((point)=>point.x));
+                    return Math.max(0, targetX - maxX);
+                };
+            const getAxisFormatter = (spec)=>{
+                const valueAxisOrient = 'horizontal' === spec.direction ? 'bottom' : 'left';
+                const formatMethod = spec.axes?.find((axis)=>axis.orient === valueAxisOrient)?.label?.formatMethod;
+                return 'function' == typeof formatMethod ? (value)=>String(formatMethod(value) ?? value) : void 0;
+            };
+            const getExplicitMeasureFormat = (measure)=>{
+                if (measure?.numFormat && !chunk_VCYTMP4D_n(measure.numFormat)) return measure.numFormat;
+                if (measure?.format && !chunk_VCYTMP4D_n(measure.format)) return measure.format;
+            };
+            const inferMeasureIdFromDatum = (anchor, measureIds)=>{
+                const candidateValues = [
+                    anchor.matchedDatum,
+                    anchor.coordinateDatum
+                ];
+                for (const datum of candidateValues){
+                    if (!datum) continue;
+                    const candidates = measureIds.filter((measureId)=>Number(datum[measureId]) === anchor.value);
+                    if (1 === candidates.length) return candidates[0];
+                }
+            };
+            const inferMeasureIdFromSelector = (selectorValue, measureIdSet)=>{
+                const matchedMeasureIds = new Set();
+                for (const currentSelector of annotationDifferenceLine_toArray(selectorValue)){
+                    if (isMeasureSelector(currentSelector)) {
+                        if (measureIdSet.has(currentSelector.field)) matchedMeasureIds.add(currentSelector.field);
+                        continue;
+                    }
+                    if (!(isFieldSelector(currentSelector) || isDimensionSelector(currentSelector))) {
+                        if (isPartialDatumSelector(currentSelector)) Object.keys(currentSelector).forEach((field)=>{
+                            if (measureIdSet.has(field)) matchedMeasureIds.add(field);
+                        });
+                    }
+                }
+                return 1 === matchedMeasureIds.size ? Array.from(matchedMeasureIds)[0] : void 0;
+            };
+            const resolveDifferenceMeasureId = (anchor, selectorValue, measureIds)=>{
+                if ('element' !== anchor.mode) return;
+                if (1 === measureIds.length) return measureIds[0];
+                const measureIdSet = new Set(measureIds);
+                return inferMeasureIdFromSelector(selectorValue, measureIdSet) ?? inferMeasureIdFromDatum(anchor, measureIds);
+            };
             const assertDifferenceLineConfig = (value, path)=>{
                 if ('object' != typeof value || null === value || Array.isArray(value)) throw new Error(`${path} must be an object`);
                 const start = value.start;
@@ -7340,6 +7442,11 @@ self.R = R;
                 const stackResolveMode = getDifferenceLineStackResolveMode(vseed, advancedVSeed);
                 const useElementStackEnd = usesDifferenceLineElementStackEnd(vseed, advancedVSeed);
                 const isBracketChart = 'line' === vseed.chartType || 'area' === vseed.chartType;
+                const measures = findAllMeasures(advancedVSeed.measures);
+                const measureIds = measures.map((measure)=>measure.id);
+                const axisFormatter = getAxisFormatter(chartSpec);
+                const percentFormatter = createFormatter(DEFAULT_PERCENT_DIFFERENCE_FORMAT);
+                const isHorizontalChart = 'horizontal' === chartSpec.direction;
                 const markLine = annotationDifferenceLineList.flatMap((annotationDifferenceLine, index)=>{
                     try {
                         assertDifferenceLineConfig(annotationDifferenceLine, getDifferenceLinePath(index, annotationDifferenceLineList.length));
@@ -7363,16 +7470,18 @@ self.R = R;
                         if (start.mode !== end.mode) return [];
                         const usesRuntimeStackEnd = useElementStackEnd || ('column' === vseed.chartType || 'bar' === vseed.chartType) && 'element' === start.mode && 'auto' === stackResolveMode;
                         const useBracketStyle = isBracketChart || ('column' === vseed.chartType || 'bar' === vseed.chartType) && 'element' === start.mode && 'auto' === stackResolveMode;
-                        const isStackedBarElementBracket = 'bar' === vseed.chartType && 'element' === start.mode && 'auto' === stackResolveMode;
-                        const connectDirection = useBracketStyle ? isStackedBarElementBracket ? 'top' : inferDifferenceBracketDirection(start, end) : inferDifferenceConnectDirection(vseed, [
-                            start.value,
-                            end.value
-                        ]);
+                        const connectDirection = isHorizontalChart ? 'top' : 'right';
+                        const expandDistance = buildFixedGutterExpandDistance(isHorizontalChart);
                         const lineColor = annotationDifferenceLine.lineColor ?? theme?.lineColor ?? DEFAULT_LINE_COLOR;
                         const textColor = annotationDifferenceLine.textColor ?? theme?.textColor ?? DEFAULT_TEXT_COLOR;
                         const textBackgroundColor = annotationDifferenceLine.textBackgroundColor ?? theme?.textBackgroundColor ?? DEFAULT_TEXT_BACKGROUND_COLOR;
                         const textFontSize = annotationDifferenceLine.textFontSize ?? theme?.textFontSize ?? DEFAULT_TEXT_FONT_SIZE;
                         const differenceType = annotationDifferenceLine.differenceType ?? 'absolute';
+                        const startMeasureId = resolveDifferenceMeasureId(start, annotationDifferenceLine.start.selector, measureIds);
+                        const endMeasureId = resolveDifferenceMeasureId(end, annotationDifferenceLine.end.selector, measureIds);
+                        const sameMeasure = void 0 !== startMeasureId && startMeasureId === endMeasureId;
+                        const explicitMeasureFormat = sameMeasure ? getExplicitMeasureFormat(measures.find((measure)=>measure.id === startMeasureId)) : void 0;
+                        const differenceFormatter = 'percent' === differenceType ? percentFormatter : explicitMeasureFormat ? createFormatter(explicitMeasureFormat) : axisFormatter ?? autoFormatter;
                         const label = usesRuntimeStackEnd ? {
                             visible: true,
                             position: 'middle',
@@ -7387,7 +7496,7 @@ self.R = R;
                                         anchor: end,
                                         seriesData,
                                         useElementStackEnd: usesRuntimeStackEnd
-                                    }), differenceType);
+                                    }), differenceType, differenceFormatter);
                                 } catch  {
                                     return '';
                                 }
@@ -7411,7 +7520,7 @@ self.R = R;
                             visible: true,
                             position: 'middle',
                             refY: 0,
-                            text: buildDifferenceText(start.value, end.value, differenceType),
+                            text: buildDifferenceText(start.value, end.value, differenceType, differenceFormatter),
                             style: {
                                 fill: textColor,
                                 fontSize: textFontSize
@@ -7434,7 +7543,7 @@ self.R = R;
                                 autoRange: true,
                                 zIndex: 1000,
                                 connectDirection,
-                                expandDistance: useBracketStyle ? DEFAULT_BRACKET_EXPAND_DISTANCE : DEFAULT_EXPAND_DISTANCE,
+                                expandDistance,
                                 coordinates: (seriesData, relativeSeries)=>{
                                     try {
                                         return [
@@ -7507,13 +7616,19 @@ self.R = R;
                     }
                 });
                 const specMarkLine = chartSpec.markLine || [];
-                return {
+                const nextSpec = {
                     ...spec,
                     markLine: [
                         ...specMarkLine,
                         ...markLine
                     ]
                 };
+                if (0 === markLine.length) return nextSpec;
+                return mergeDifferenceLineRegionPadding(nextSpec, isHorizontalChart ? {
+                    top: DEFAULT_GUTTER_TOP_PADDING
+                } : {
+                    right: DEFAULT_GUTTER_RIGHT_PADDING
+                });
             };
             const annotationVerticalLine_annotationVerticalLine = (spec, context)=>{
                 const { advancedVSeed, vseed } = context;
@@ -7757,7 +7872,7 @@ self.R = R;
                     left: 'insideLeft',
                     right: 'insideRight'
                 };
-                const defaultTextPosition = isBarLikeChart(advancedVSeed) ? 'right' : 'top';
+                const defaultTextPosition = chatType_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, 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();
@@ -9616,7 +9731,7 @@ self.R = R;
                     left: 'insideLeft',
                     right: 'insideRight'
                 };
-                const defaultTextPosition = isBarLikeChart(advancedVSeed) ? 'right' : 'top';
+                const defaultTextPosition = chatType_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, 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;
@@ -15023,13 +15138,13 @@ self.R = R;
             }
             const annotationPointOfDualAxis = generateAnnotationPointPipe({
                 findSelectedDatas: (options)=>{
-                    const { dataset, selector: s, dynamicFilter, context } = options;
+                    const { dataset, selector: s, measureId, dynamicFilter, context } = options;
                     return dataset.reduce((res, d)=>{
                         const { advancedVSeed } = context;
                         const allMeasureIds = flatReshapeMeasures(advancedVSeed.reshapeMeasures ?? []).map((m)=>m.id);
                         const pickedDatum = pickWithout(d, allMeasureIds.filter((id)=>id !== d[MeasureId]));
                         const shouldSelect = dynamicFilter ? selectorWithDynamicFilter(pickedDatum, dynamicFilter, s) : selector_selector(pickedDatum, s);
-                        if (shouldSelect) res.push(pickedDatum);
+                        if (shouldSelect && (!measureId || pickedDatum[MeasureId] === measureId)) res.push(pickedDatum);
                         return res;
                     }, []);
                 },
@@ -25563,6 +25678,7 @@ self.R = R;
                     zSelector,
                     zSelectors
                 ]).nullish(),
+                measureId: schemas_string().nullish(),
                 dynamicFilter: zChartDynamicFilter.optional(),
                 text: schemas_string().or(schemas_array(schemas_string())).nullish(),
                 textColor: schemas_string().default('#ffffff').nullish(),
@@ -25703,6 +25819,7 @@ self.R = R;
             });
             const zAnnotationPointConfig = zAnnotationPoint.omit({
                 selector: true,
+                measureId: true,
                 text: true
             }).partial();
             const zAnnotationHorizontalLineConfig = zAnnotationHorizontalLine.pick({