@visactor/vseed 0.1.29 → 0.1.31

package/dist/umd/index.js

@@ -119,6 +119,7 @@
             zMeasureTree: ()=>zMeasureTree,
             zStackCornerRadius: ()=>zStackCornerRadius,
             registerRose: ()=>registerRose,
+            zPivotChartGridConfig: ()=>zPivotChartGridConfig,
             zRose: ()=>zRose,
             registerTable: ()=>registerTable,
             isMeasureGroup: ()=>isMeasureGroup,
@@ -294,10 +295,11 @@
             zScatterConfig: ()=>zScatterConfig,
             donutAdvancedPipeline: ()=>donutAdvancedPipeline,
             zTooltip: ()=>zTooltip,
+            isBarLikeChart: ()=>isBarLikeChart,
             barParallelAdvancedPipeline: ()=>barParallelAdvancedPipeline,
             deleteMeasureTreeByCallback: ()=>deleteMeasureTreeByCallback,
-            barPercentSpecPipeline: ()=>barPercentSpecPipeline,
             zBarPercentConfig: ()=>zBarPercentConfig,
+            barPercentSpecPipeline: ()=>barPercentSpecPipeline,
             dataReshapeByEncoding: ()=>dataReshapeByEncoding,
             lineSpecPipeline: ()=>lineSpecPipeline,
             zDimensionGroup: ()=>zDimensionGroup
@@ -561,6 +563,7 @@
         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.BarPercent || vseed.chartType === ChartTypeEnum.BarParallel;
         const isVTable = (vseed)=>[
                 'table',
                 'pivotTable'
@@ -1333,11 +1336,12 @@
             const result = {
                 ...advancedVSeed
             };
-            const MeaName = {
+            const measures = findAllMeasures(advancedVSeed.measures);
+            if (measures.length > 1 && !result.dimensions?.some((dim)=>dim.id === MeasureName)) result.dimensions?.push({
                 id: MeasureName,
-                alias: intl.i18n`指标名称`
-            };
-            if (!result.dimensions?.some((dim)=>dim.id === MeasureName)) result.dimensions?.push(MeaName);
+                alias: intl.i18n`指标名称`,
+                encoding: 'column'
+            });
             return result;
         };
         const encodingForPivotTable = (advancedVSeed)=>{
@@ -1596,20 +1600,31 @@
                     }))
             };
         };
+        const titleOnDimension = (spec)=>{
+            const { rows = [], columns = [] } = spec;
+            return {
+                ...spec,
+                corner: {
+                    titleOnDimension: rows.length <= 1 && columns.length >= 1 ? 'column' : 'row'
+                }
+            };
+        };
         const pivotIndicators = (spec, context)=>{
             const { advancedVSeed } = context;
             const { measures, datasetReshapeInfo } = advancedVSeed;
             const { foldInfo } = datasetReshapeInfo[0];
+            const hasRow = spec?.rows?.length > 0;
+            const foldMapValues = Object.values(foldInfo.foldMap);
             return {
                 ...spec,
-                indicatorsAsCol: true,
                 indicatorTitle: intl.i18n`指标名称`,
-                hideIndicatorName: true,
+                indicatorsAsCol: hasRow,
+                hideIndicatorName: hasRow,
                 indicators: [
                     {
                         cellType: 'text',
                         indicatorKey: foldInfo.measureValue,
-                        title: 'indicator',
+                        title: foldMapValues.length > 1 ? '' : foldMapValues[0],
                         width: 'auto',
                         format: pivotIndicators_fieldFormat(measures, foldInfo)
                     }
@@ -1752,6 +1767,7 @@
             initPivotTable,
             pivotColumns,
             pivotRows,
+            titleOnDimension,
             pivotIndicators,
             bodyStyle,
             headerStyle,
@@ -3549,29 +3565,31 @@
             const annotationPointList = Array.isArray(annotationPoint) ? annotationPoint : [
                 annotationPoint
             ];
+            const isHorizontalBar = isBarLikeChart(advancedVSeed);
+            const defaultStyle = isHorizontalBar ? {
+                textAlign: 'right',
+                textBaseline: 'middle'
+            } : {
+                textAlign: 'center',
+                textBaseline: 'top'
+            };
             const markPoint = annotationPointList.flatMap((annotationPoint)=>{
-                const { selector: selectorPoint, text = '', textColor = '#ffffff', textFontSize = 12, textFontWeight = 400, textAlign = 'center', textBaseline = 'top', textBackgroundBorderColor, textBackgroundBorderRadius = 4, textBackgroundBorderWidth = 1, textBackgroundColor = '#212121', textBackgroundPadding = 2, textBackgroundVisible = true, offsetX = 0, offsetY = 0 } = annotationPoint;
+                const { selector: selectorPoint, text = '', textColor = '#ffffff', textFontSize = 12, textFontWeight = 400, textAlign = defaultStyle.textAlign, textBaseline = defaultStyle.textBaseline, textBackgroundBorderColor, textBackgroundBorderRadius = 4, textBackgroundBorderWidth = 1, textBackgroundColor = '#212121', textBackgroundPadding = 2, textBackgroundVisible = true, offsetX = 0, offsetY = 0 } = annotationPoint;
                 const dataset = advancedVSeed.dataset.flat();
                 const selectedData = selectorPoint ? dataset.filter((datum)=>selector_selector(datum, selectorPoint)) : [];
+                const dx = -10 - (isHorizontalBar ? textFontSize : 0);
+                const dy = isHorizontalBar ? 0 : textFontSize;
                 return selectedData.map((datum)=>({
                         zIndex: 1000,
                         regionRelative: true,
-                        position: (data, context)=>{
-                            const targetDatum = data.find((item)=>isSubset(datum, item));
-                            if (targetDatum) {
-                                const { x, y } = context.dataToPosition(targetDatum);
-                                return {
-                                    x,
-                                    y
-                                };
-                            }
-                        },
+                        coordinate: (data)=>data.find((item)=>isSubset(datum, item)),
                         itemLine: {
                             visible: false
                         },
                         itemContent: {
                             offsetY,
                             offsetX,
+                            confine: true,
                             text: {
                                 text: text,
                                 style: {
@@ -3583,7 +3601,8 @@
                                     lineWidth: 1,
                                     fontSize: textFontSize,
                                     fontWeight: textFontWeight,
-                                    dy: textFontSize
+                                    dx,
+                                    dy
                                 },
                                 labelBackground: {
                                     visible: textBackgroundVisible,
@@ -3593,7 +3612,8 @@
                                         fill: textBackgroundColor,
                                         stroke: textBackgroundBorderColor,
                                         lineWidth: textBackgroundBorderWidth,
-                                        dy: textFontSize
+                                        dx,
+                                        dy
                                     }
                                 }
                             }
@@ -3966,18 +3986,20 @@
             };
         };
         const pivotGridStyle = (spec, context)=>{
-            const { vseed } = context;
+            const { vseed, advancedVSeed } = context;
+            const { config, chartType } = advancedVSeed;
+            const themConfig = config?.[chartType]?.pivotGrid ?? {};
             const onlyCombination = !isPivot(vseed) && isCombination(vseed);
             const result = {
                 ...spec
             };
             const transparent = 'rgba(0,0,0,0)';
-            const borderColor = '#e3e5eb';
-            const bodyFontColor = '#141414';
-            const headerFontColor = '#21252c';
-            const headerBackgroundColor = 'rgba(0,0,0,0)';
-            const hoverHeaderBackgroundColor = onlyCombination ? transparent : '#D9DDE4';
-            const hoverHeaderInlineBackgroundColor = onlyCombination ? transparent : '#D9DDE455';
+            const borderColor = themConfig.borderColor ?? '#e3e5eb';
+            const bodyFontColor = themConfig.bodyFontColor ?? '#141414';
+            const headerFontColor = themConfig.headerFontColor ?? '#21252c';
+            const headerBackgroundColor = themConfig.headerBackgroundColor ?? 'rgba(0,0,0,0)';
+            const hoverHeaderBackgroundColor = onlyCombination ? transparent : themConfig.hoverHeaderBackgroundColor ?? '#D9DDE4';
+            const hoverHeaderInlineBackgroundColor = onlyCombination ? transparent : themConfig.hoverHeaderInlineBackgroundColor ?? '#D9DDE455';
             return {
                 ...result,
                 theme: {
@@ -4239,6 +4261,7 @@
                     dimensionKey: dim.id,
                     title: dim.alias || dim.id
                 }));
+            console.log('Pivot Column Dimensions:', columns);
             return {
                 ...result,
                 columns: columns
@@ -9213,6 +9236,16 @@
                 selectedBorderColor: '#3073f2',
                 selectedBackgroundColor: '#4284ff33'
             });
+        const pickPivotChartGridConfig = (tableConfig)=>({
+                borderColor: tableConfig.borderColor,
+                bodyFontColor: tableConfig.bodyFontColor,
+                headerFontColor: tableConfig.headerFontColor,
+                headerBackgroundColor: tableConfig.headerBackgroundColor,
+                hoverHeaderBackgroundColor: tableConfig.hoverHeaderBackgroundColor,
+                hoverHeaderInlineBackgroundColor: tableConfig.hoverHeaderInlineBackgroundColor
+            });
+        const getLightPivotChartGridConfig = ()=>pickPivotChartGridConfig(getLightTableConfig());
+        const getDarkPivotChartGridConfig = ()=>pickPivotChartGridConfig(getDarkTableConfig());
         const getDefaultTooltip = ()=>({
                 enable: true
             });
@@ -9403,7 +9436,8 @@
                         ...baseConfig,
                         xAxis: bandAxis,
                         yAxis: linearAxis,
-                        crosshairLine
+                        crosshairLine,
+                        pivotGrid: getLightPivotChartGridConfig()
                     },
                     column: {
                         ...baseConfig,
@@ -9415,7 +9449,8 @@
                             4,
                             0,
                             0
-                        ]
+                        ],
+                        pivotGrid: getLightPivotChartGridConfig()
                     },
                     columnParallel: {
                         ...baseConfig,
@@ -9427,7 +9462,8 @@
                             4,
                             0,
                             0
-                        ]
+                        ],
+                        pivotGrid: getLightPivotChartGridConfig()
                     },
                     columnPercent: {
                         ...baseConfig,
@@ -9441,7 +9477,8 @@
                             4,
                             0,
                             0
-                        ]
+                        ],
+                        pivotGrid: getLightPivotChartGridConfig()
                     },
                     bar: {
                         ...baseConfig,
@@ -9453,7 +9490,8 @@
                             4,
                             4,
                             0
-                        ]
+                        ],
+                        pivotGrid: getLightPivotChartGridConfig()
                     },
                     barParallel: {
                         ...baseConfig,
@@ -9465,7 +9503,8 @@
                             4,
                             4,
                             0
-                        ]
+                        ],
+                        pivotGrid: getLightPivotChartGridConfig()
                     },
                     barPercent: {
                         ...baseConfig,
@@ -9479,13 +9518,15 @@
                             4,
                             4,
                             0
-                        ]
+                        ],
+                        pivotGrid: getLightPivotChartGridConfig()
                     },
                     area: {
                         ...baseConfig,
                         xAxis: bandAxis,
                         yAxis: linearAxis,
-                        crosshairLine
+                        crosshairLine,
+                        pivotGrid: getLightPivotChartGridConfig()
                     },
                     areaPercent: {
                         ...baseConfig,
@@ -9493,7 +9534,8 @@
                         yAxis: {
                             ...linearAxis
                         },
-                        crosshairLine
+                        crosshairLine,
+                        pivotGrid: getLightPivotChartGridConfig()
                     },
                     scatter: {
                         ...baseConfig,
@@ -9520,7 +9562,8 @@
                             ...baseConfig.label,
                             showValue: false,
                             showValuePercent: false
-                        }
+                        },
+                        pivotGrid: getLightPivotChartGridConfig()
                     },
                     dualAxis: {
                         ...baseConfig,
@@ -9536,7 +9579,8 @@
                             primary: 'column',
                             secondary: 'line'
                         },
-                        crosshairRect
+                        crosshairRect,
+                        pivotGrid: getLightPivotChartGridConfig()
                     },
                     pie: {
                         ...baseConfig,
@@ -9545,7 +9589,8 @@
                             showValuePercent: true,
                             labelLayout: 'labelLine',
                             showDimension: true
-                        }
+                        },
+                        pivotGrid: getLightPivotChartGridConfig()
                     },
                     donut: {
                         ...baseConfig,
@@ -9554,10 +9599,12 @@
                             showValuePercent: true,
                             labelLayout: 'labelLine',
                             showDimension: true
-                        }
+                        },
+                        pivotGrid: getLightPivotChartGridConfig()
                     },
                     radar: {
-                        ...baseConfig
+                        ...baseConfig,
+                        pivotGrid: getLightPivotChartGridConfig()
                     },
                     rose: {
                         ...baseConfig,
@@ -9565,7 +9612,8 @@
                             ...baseConfig.label,
                             showValuePercent: true,
                             showDimension: true
-                        }
+                        },
+                        pivotGrid: getLightPivotChartGridConfig()
                     },
                     roseParallel: {
                         ...baseConfig,
@@ -9573,17 +9621,20 @@
                             ...baseConfig.label,
                             showValuePercent: true,
                             showDimension: true
-                        }
+                        },
+                        pivotGrid: getLightPivotChartGridConfig()
                     },
                     funnel: {
-                        ...baseConfig
+                        ...baseConfig,
+                        pivotGrid: getLightPivotChartGridConfig()
                     },
                     heatmap: {
                         ...baseConfig,
                         label: {
                             ...baseConfig.label,
                             labelColorSmartInvert: true
-                        }
+                        },
+                        pivotGrid: getLightPivotChartGridConfig()
                     }
                 }
             };
@@ -9622,7 +9673,8 @@
                         ...baseConfig,
                         xAxis: bandAxis,
                         yAxis: linearAxis,
-                        crosshairLine: crosshairLine
+                        crosshairLine: crosshairLine,
+                        pivotGrid: getDarkPivotChartGridConfig()
                     },
                     column: {
                         ...baseConfig,
@@ -9634,7 +9686,8 @@
                             4,
                             0,
                             0
-                        ]
+                        ],
+                        pivotGrid: getDarkPivotChartGridConfig()
                     },
                     columnParallel: {
                         ...baseConfig,
@@ -9646,7 +9699,8 @@
                             4,
                             0,
                             0
-                        ]
+                        ],
+                        pivotGrid: getDarkPivotChartGridConfig()
                     },
                     columnPercent: {
                         ...baseConfig,
@@ -9658,7 +9712,8 @@
                             4,
                             0,
                             0
-                        ]
+                        ],
+                        pivotGrid: getDarkPivotChartGridConfig()
                     },
                     bar: {
                         ...baseConfig,
@@ -9670,7 +9725,8 @@
                             4,
                             4,
                             0
-                        ]
+                        ],
+                        pivotGrid: getDarkPivotChartGridConfig()
                     },
                     barParallel: {
                         ...baseConfig,
@@ -9682,7 +9738,8 @@
                             4,
                             4,
                             0
-                        ]
+                        ],
+                        pivotGrid: getDarkPivotChartGridConfig()
                     },
                     barPercent: {
                         ...baseConfig,
@@ -9694,19 +9751,22 @@
                             4,
                             4,
                             0
-                        ]
+                        ],
+                        pivotGrid: getDarkPivotChartGridConfig()
                     },
                     area: {
                         ...baseConfig,
                         xAxis: bandAxis,
                         yAxis: linearAxis,
-                        crosshairLine: crosshairLine
+                        crosshairLine: crosshairLine,
+                        pivotGrid: getDarkPivotChartGridConfig()
                     },
                     areaPercent: {
                         ...baseConfig,
                         xAxis: bandAxis,
                         yAxis: linearAxis,
-                        crosshairLine: crosshairLine
+                        crosshairLine: crosshairLine,
+                        pivotGrid: getDarkPivotChartGridConfig()
                     },
                     scatter: {
                         ...baseConfig,
@@ -9733,7 +9793,8 @@
                             ...baseConfig.label,
                             showValue: false,
                             showValuePercent: false
-                        }
+                        },
+                        pivotGrid: getDarkPivotChartGridConfig()
                     },
                     dualAxis: {
                         ...baseConfig,
@@ -9749,7 +9810,8 @@
                             primary: 'column',
                             secondary: 'line'
                         },
-                        crosshairRect
+                        crosshairRect,
+                        pivotGrid: getDarkPivotChartGridConfig()
                     },
                     pie: {
                         ...baseConfig,
@@ -9758,7 +9820,8 @@
                             showValuePercent: true,
                             labelLayout: 'labelLine',
                             showDimension: true
-                        }
+                        },
+                        pivotGrid: getDarkPivotChartGridConfig()
                     },
                     donut: {
                         ...baseConfig,
@@ -9767,10 +9830,12 @@
                             showValuePercent: true,
                             labelLayout: 'labelLine',
                             showDimension: true
-                        }
+                        },
+                        pivotGrid: getDarkPivotChartGridConfig()
                     },
                     radar: {
-                        ...baseConfig
+                        ...baseConfig,
+                        pivotGrid: getDarkPivotChartGridConfig()
                     },
                     rose: {
                         ...baseConfig,
@@ -9778,7 +9843,8 @@
                             ...baseConfig.label,
                             showValuePercent: true,
                             showDimension: true
-                        }
+                        },
+                        pivotGrid: getDarkPivotChartGridConfig()
                     },
                     roseParallel: {
                         ...baseConfig,
@@ -9786,17 +9852,20 @@
                             ...baseConfig.label,
                             showValuePercent: true,
                             showDimension: true
-                        }
+                        },
+                        pivotGrid: getDarkPivotChartGridConfig()
                     },
                     funnel: {
-                        ...baseConfig
+                        ...baseConfig,
+                        pivotGrid: getDarkPivotChartGridConfig()
                     },
                     heatmap: {
                         ...baseConfig,
                         label: {
                             ...baseConfig.label,
                             labelColorSmartInvert: true
-                        }
+                        },
+                        pivotGrid: getDarkPivotChartGridConfig()
                     }
                 }
             };
@@ -13622,6 +13691,14 @@
             selectedBackgroundColor: schemas_string().nullish()
         });
         const zPivotTableConfig = zTableConfig;
+        const zPivotChartGridConfig = schemas_object({
+            borderColor: schemas_string().nullish(),
+            bodyFontColor: schemas_string().nullish(),
+            headerFontColor: schemas_string().nullish(),
+            headerBackgroundColor: schemas_string().nullish(),
+            hoverHeaderBackgroundColor: schemas_string().nullish(),
+            hoverHeaderInlineBackgroundColor: schemas_string().nullish()
+        });
         const zLineConfig = schemas_object({
             backgroundColor: zBackgroundColor.nullish(),
             label: zLabel.nullish(),
@@ -13630,7 +13707,8 @@
             legend: zLegend.nullish(),
             xAxis: zXBandAxis.nullish(),
             yAxis: zYLinearAxis.nullish(),
-            crosshairLine: zCrosshairLine.nullish()
+            crosshairLine: zCrosshairLine.nullish(),
+            pivotGrid: zPivotChartGridConfig.nullish()
         });
         const zColumnConfig = schemas_object({
             backgroundColor: zBackgroundColor.nullish(),
@@ -13641,7 +13719,8 @@
             xAxis: zXBandAxis.nullish(),
             yAxis: zYLinearAxis.nullish(),
             crosshairRect: zCrosshairRect.nullish(),
-            stackCornerRadius: zStackCornerRadius.nullish()
+            stackCornerRadius: zStackCornerRadius.nullish(),
+            pivotGrid: zPivotChartGridConfig.nullish()
         });
         const zColumnParallelConfig = zColumnConfig;
         const zColumnPercentConfig = zColumnConfig;
@@ -13654,7 +13733,8 @@
             xAxis: zXLinearAxis.nullish(),
             yAxis: zYBandAxis.nullish(),
             crosshairRect: zCrosshairRect.nullish(),
-            stackCornerRadius: zStackCornerRadius.nullish()
+            stackCornerRadius: zStackCornerRadius.nullish(),
+            pivotGrid: zPivotChartGridConfig.nullish()
         });
         const zBarParallelConfig = zBarConfig;
         const zBarPercentConfig = zBarConfig;
@@ -13666,7 +13746,8 @@
             legend: zLegend.nullish(),
             xAxis: zXBandAxis.nullish(),
             yAxis: zYLinearAxis.nullish(),
-            crosshairLine: zCrosshairLine.nullish()
+            crosshairLine: zCrosshairLine.nullish(),
+            pivotGrid: zPivotChartGridConfig.nullish()
         });
         const zAreaPercentConfig = zAreaConfig;
         const zDualAxisConfig = schemas_object({
@@ -13680,7 +13761,8 @@
             primaryYAxis: schemas_array(zYLinearAxis).or(zYLinearAxis).nullish(),
             secondaryYAxis: schemas_array(zYLinearAxis).or(zYLinearAxis).nullish(),
             xAxis: zXBandAxis.nullish(),
-            crosshairRect: zCrosshairRect.nullish()
+            crosshairRect: zCrosshairRect.nullish(),
+            pivotGrid: zPivotChartGridConfig.nullish()
         });
         const zScatterConfig = schemas_object({
             backgroundColor: zBackgroundColor.nullish(),
@@ -13692,14 +13774,16 @@
             yAxis: zYLinearAxis.nullish(),
             crosshairLine: zCrosshairLine.nullish(),
             size: schemas_number().or(schemas_array(schemas_number())).nullish(),
-            sizeRange: schemas_number().or(schemas_array(schemas_number())).nullish()
+            sizeRange: schemas_number().or(schemas_array(schemas_number())).nullish(),
+            pivotGrid: zPivotChartGridConfig.nullish()
         });
         const zRoseConfig = schemas_object({
             backgroundColor: zBackgroundColor.nullish(),
             label: zPieLabel.nullish(),
             color: zColor.nullish(),
             tooltip: zTooltip.nullish(),
-            legend: zLegend.nullish()
+            legend: zLegend.nullish(),
+            pivotGrid: zPivotChartGridConfig.nullish()
         });
         const zRoseParallelConfig = zRoseConfig;
         const zPieConfig = schemas_object({
@@ -13707,7 +13791,8 @@
             label: zPieLabel.nullish(),
             color: zColor.nullish(),
             tooltip: zTooltip.nullish(),
-            legend: zLegend.nullish()
+            legend: zLegend.nullish(),
+            pivotGrid: zPivotChartGridConfig.nullish()
         });
         const zDonutConfig = zPieConfig;
         const zRadarConfig = zPieConfig;