@visactor/vseed 0.0.20 → 0.0.21

package/dist/index.js

@@ -1,4 +1,5 @@
 import { clone, groupBy, isArray, isEmpty, isNullish, isNumber, isString, mergeDeep, omit, pick, unique } from "remeda";
+import { color as external_d3_color_color } from "d3-color";
 import { z } from "zod";
 const initAdvancedVSeed = (advancedVSeed, context)=>{
     const { vseed } = context;
@@ -4574,7 +4575,19 @@ const initTable = (spec, context)=>{
         heightMode: 'autoHeight',
         autoWrapText: true,
         columnResizeMode: 'all',
-        showHeader: true
+        showHeader: true,
+        tooltip: {
+            isShowOverflowTextTooltip: true
+        },
+        animationAppear: {
+            duration: 300,
+            delay: 250,
+            type: 'one-by-one',
+            direction: 'row'
+        },
+        theme: {
+            underlayBackgroundColor: 'transparent'
+        }
     };
 };
 const initPivotTable = (spec, context)=>{
@@ -4586,7 +4599,30 @@ const initPivotTable = (spec, context)=>{
         widthMode: 'standard',
         heightMode: 'autoHeight',
         autoWrapText: true,
-        columnResizeMode: 'all'
+        columnResizeMode: 'all',
+        columnResizeType: 'column',
+        showColumnHeader: true,
+        showRowHeader: true,
+        select: {
+            highlightMode: 'cell',
+            headerSelectMode: 'inline'
+        },
+        hover: {
+            highlightMode: 'cross'
+        },
+        tooltip: {
+            isShowOverflowTextTooltip: true
+        },
+        widthAdaptiveMode: 'all',
+        animationAppear: {
+            duration: 300,
+            delay: 250,
+            type: 'one-by-one',
+            direction: 'row'
+        },
+        theme: {
+            underlayBackgroundColor: 'transparent'
+        }
     };
 };
 const measureTreeToColumns = (spec, context)=>{
@@ -4595,7 +4631,13 @@ const measureTreeToColumns = (spec, context)=>{
     const result = {
         ...spec
     };
-    const columns = treeTreeToColumns(measures);
+    const eachNode = (node)=>{
+        if ('children' in node) return {};
+        return {
+            width: 'auto'
+        };
+    };
+    const columns = treeTreeToColumns(measures, eachNode);
     return {
         ...result,
         columns: [
@@ -4610,7 +4652,13 @@ const dimensionTreeToColumns = (spec, context)=>{
     const result = {
         ...spec
     };
-    const columns = treeTreeToColumns(dimensions);
+    const eachNode = (node)=>{
+        if ('children' in node) return {};
+        return {
+            width: 'auto'
+        };
+    };
+    const columns = treeTreeToColumns(dimensions, eachNode);
     return {
         ...result,
         columns: [
@@ -4619,19 +4667,30 @@ const dimensionTreeToColumns = (spec, context)=>{
         ]
     };
 };
-const treeTreeToColumns = (tree = [])=>{
+const treeTreeToColumns = (tree, callback)=>{
     const result = tree.map((item)=>{
-        const field = item.id;
-        const title = item.alias ?? item.id;
-        if ('children' in item && Array.isArray(item.children)) return {
-            field,
-            title,
-            columns: treeTreeToColumns(item.children)
-        };
-        return {
-            field,
-            title
-        };
+        if ('children' in item && Array.isArray(item.children)) {
+            const groupNode = item;
+            const field = groupNode.id;
+            const title = groupNode.alias ?? groupNode.id;
+            const props = callback?.(groupNode) || {};
+            return {
+                field,
+                title,
+                columns: treeTreeToColumns(item.children, callback),
+                ...props
+            };
+        }
+        {
+            const field = item.id;
+            const title = item.alias ?? item.id;
+            const props = callback?.(item) || {};
+            return {
+                field,
+                title,
+                ...props
+            };
+        }
     });
     return result || [];
 };
@@ -4667,6 +4726,7 @@ const pivotIndicators_pivotIndicators = (spec, context)=>{
     return {
         ...spec,
         indicatorsAsCol: true,
+        indicatorTitle: intl.i18n`指标名称`,
         indicators: measures.map((item)=>({
                 cellType: 'text',
                 indicatorKey: item.id,
@@ -4675,16 +4735,254 @@ const pivotIndicators_pivotIndicators = (spec, context)=>{
             }))
     };
 };
+const bodyStyle = (spec, context)=>{
+    const result = {
+        ...spec
+    };
+    const { advancedVSeed } = context;
+    const { customTheme, chartType } = advancedVSeed;
+    const themConfig = customTheme?.config?.[chartType];
+    if (!result.theme || !themConfig) return result;
+    const borderColor = themConfig.borderColor || 'rgb(224, 224, 224)';
+    const backgroundColor = themConfig.bodyBackgroundColor || '#fff';
+    const fontColor = themConfig.bodyFontColor || '#1B1F23';
+    const fontSize = themConfig.bodyFontSize || 12;
+    const hoverCellBgColor = themConfig.hoverBodyBackgroundColor || '#bedaff';
+    const hoverInlineColor = external_d3_color_color(hoverCellBgColor)?.copy({
+        opacity: 0.1
+    }).toString();
+    result.theme.bodyStyle = {
+        borderColor: borderColor,
+        borderLineWidth: 1,
+        padding: [
+            8.6,
+            12,
+            8.6,
+            12
+        ],
+        textAlign: 'right',
+        hover: {
+            cellBgColor: hoverCellBgColor,
+            inlineRowBgColor: hoverInlineColor,
+            inlineColumnBgColor: hoverInlineColor
+        },
+        color: fontColor,
+        fontSize: fontSize,
+        fontStyle: 'normal',
+        fontWeight: 'normal',
+        fontVariant: 'normal',
+        bgColor: backgroundColor,
+        lineHeight: 1.5 * fontSize
+    };
+    return result;
+};
+const headerStyle = (spec, context)=>{
+    const result = {
+        ...spec
+    };
+    const { advancedVSeed } = context;
+    const { customTheme, chartType } = advancedVSeed;
+    const themConfig = customTheme?.config?.[chartType];
+    if (!result.theme || !themConfig) return result;
+    const borderColor = themConfig.borderColor || 'rgb(224, 224, 224)';
+    const backgroundColor = themConfig.headerBackgroundColor || '#EEF1F5';
+    const fontColor = themConfig.headerFontColor || '#1B1F23';
+    const fontSize = themConfig.headerFontSize || 12;
+    const hoverCellBgColor = themConfig.hoverHeaderBackgroundColor || '#bedaff';
+    const hoverInlineColor = themConfig.hoverHeaderBackgroundColor;
+    result.theme.headerStyle = {
+        borderColor: borderColor,
+        borderLineWidth: 1,
+        padding: [
+            8,
+            12,
+            8,
+            12
+        ],
+        textAlign: 'center',
+        hover: {
+            cellBgColor: external_d3_color_color(hoverCellBgColor)?.copy({
+                opacity: 1
+            }).brighter(0.5).toString(),
+            inlineRowBgColor: hoverInlineColor,
+            inlineColumnBgColor: hoverInlineColor
+        },
+        frameStyle: {
+            borderColor: [
+                null,
+                null,
+                borderColor,
+                null
+            ],
+            borderLineWidth: 1
+        },
+        fontSize: fontSize,
+        fontVariant: 'normal',
+        fontStyle: 'normal',
+        fontWeight: 'bold',
+        color: fontColor,
+        bgColor: backgroundColor,
+        lineHeight: 1.5 * fontSize
+    };
+    return result;
+};
+const rowHeaderStyle = (spec, context)=>{
+    const result = {
+        ...spec
+    };
+    const { advancedVSeed } = context;
+    const { customTheme, chartType } = advancedVSeed;
+    const themConfig = customTheme?.config?.[chartType];
+    if (!result.theme || !themConfig) return result;
+    const borderColor = themConfig.borderColor || 'rgb(224, 224, 224)';
+    const backgroundColor = themConfig.headerBackgroundColor || '#EEF1F5';
+    const fontColor = themConfig.headerFontColor || '#1B1F23';
+    const fontSize = themConfig.headerFontSize || 12;
+    const hoverCellBgColor = themConfig.hoverHeaderBackgroundColor || '#bedaff';
+    const hoverInlineColor = themConfig.hoverHeaderBackgroundColor;
+    result.theme.rowHeaderStyle = {
+        borderColor: borderColor,
+        borderLineWidth: 1,
+        padding: [
+            8.6,
+            12,
+            8.6,
+            12
+        ],
+        textAlign: 'left',
+        hover: {
+            cellBgColor: external_d3_color_color(hoverCellBgColor)?.copy({
+                opacity: 1
+            }).brighter(0.5).toString(),
+            inlineRowBgColor: hoverInlineColor,
+            inlineColumnBgColor: hoverInlineColor
+        },
+        frameStyle: {
+            borderColor: [
+                null,
+                borderColor,
+                null,
+                null
+            ],
+            borderLineWidth: 1
+        },
+        fontSize: fontSize,
+        fontVariant: 'normal',
+        fontStyle: 'normal',
+        fontWeight: 'bold',
+        color: fontColor,
+        bgColor: backgroundColor,
+        lineHeight: 1.5 * fontSize
+    };
+    return result;
+};
+const cornerHeaderStyle = (spec, context)=>{
+    const result = {
+        ...spec
+    };
+    const { advancedVSeed } = context;
+    const { customTheme, chartType } = advancedVSeed;
+    const themConfig = customTheme?.config?.[chartType];
+    if (!result.theme || !themConfig) return result;
+    const borderColor = themConfig.borderColor || 'rgb(224, 224, 224)';
+    const backgroundColor = themConfig.headerBackgroundColor || '#EEF1F5';
+    const fontColor = themConfig.headerFontColor || '#1B1F23';
+    const fontSize = themConfig.headerFontSize || 12;
+    const hoverCellBgColor = themConfig.hoverHeaderBackgroundColor || '#bedaff';
+    const hoverInlineColor = themConfig.hoverHeaderBackgroundColor;
+    result.theme.cornerHeaderStyle = {
+        borderColor: [
+            borderColor,
+            borderColor
+        ],
+        borderLineWidth: 1,
+        padding: [
+            8,
+            12,
+            8,
+            12
+        ],
+        textAlign: 'left',
+        hover: {
+            cellBgColor: external_d3_color_color(hoverCellBgColor)?.copy({
+                opacity: 1
+            }).brighter(0.5).toString(),
+            inlineRowBgColor: hoverInlineColor,
+            inlineColumnBgColor: hoverInlineColor
+        },
+        frameStyle: {
+            borderColor: [
+                null,
+                borderColor,
+                borderColor,
+                null
+            ],
+            borderLineWidth: 1
+        },
+        fontSize: fontSize,
+        fontVariant: 'normal',
+        fontStyle: 'normal',
+        fontWeight: 'bold',
+        color: fontColor,
+        bgColor: backgroundColor,
+        lineHeight: 1.5 * fontSize
+    };
+    return result;
+};
+const frameStyle = (spec, context)=>{
+    const result = {
+        ...spec
+    };
+    const { advancedVSeed } = context;
+    const { customTheme, chartType } = advancedVSeed;
+    const themConfig = customTheme?.config?.[chartType];
+    if (!result.theme || !themConfig) return result;
+    const borderColor = themConfig.borderColor || 'rgb(224, 224, 224)';
+    result.theme.frameStyle = {
+        borderColor,
+        borderLineWidth: 0,
+        cornerRadius: 0
+    };
+    return result;
+};
+const selectionStyle = (spec, context)=>{
+    const result = {
+        ...spec
+    };
+    const { advancedVSeed } = context;
+    const { customTheme, chartType } = advancedVSeed;
+    const themConfig = customTheme?.config?.[chartType];
+    if (!result.theme || !themConfig) return result;
+    const borderColor = themConfig.selectedBorderColor || 'rgb(224, 224, 224)';
+    result.theme.selectionStyle = {
+        cellBorderColor: borderColor,
+        cellBorderLineWidth: 2,
+        cellBgColor: external_d3_color_color(borderColor)?.copy({
+            opacity: 0.15
+        }).toString()
+    };
+    return result;
+};
 const tableSpecPipeline = [
     initTable,
     dimensionTreeToColumns,
-    measureTreeToColumns
+    measureTreeToColumns,
+    bodyStyle,
+    headerStyle,
+    frameStyle,
+    selectionStyle
 ];
 const pivotTableSpecPipeline = [
     initPivotTable,
     pivotColumns,
     pivotRows,
-    pivotIndicators_pivotIndicators
+    pivotIndicators_pivotIndicators,
+    bodyStyle,
+    headerStyle,
+    rowHeaderStyle,
+    cornerHeaderStyle,
+    frameStyle,
+    selectionStyle
 ];
 const buildAdvanced = (builder)=>{
     const { chartType } = builder.vseed;
@@ -4981,8 +5279,22 @@ const darkTheme = ()=>{
             labelFontWeight: 400
         }
     };
+    const tableConfig = {
+        borderColor: '#4b4e53',
+        bodyFontSize: 12,
+        bodyFontColor: '#fdfdfd',
+        bodyBackgroundColor: 'transparent',
+        headerFontSize: 12,
+        headerFontColor: '#fdfdfd',
+        headerBackgroundColor: '#36393e',
+        hoverBodyBackgroundColor: '#4284ff66',
+        hoverHeaderBackgroundColor: '#5f5f5f88',
+        selectedBorderColor: '#3073F2'
+    };
     return {
         config: {
+            table: tableConfig,
+            pivotTable: tableConfig,
             line: {
                 ...baseConfig,
                 xAxis: bandAxis,
@@ -5261,8 +5573,22 @@ const lightTheme = ()=>{
             labelFontWeight: 400
         }
     };
+    const tableConfig = {
+        borderColor: '#e3e5eb',
+        bodyFontSize: 12,
+        bodyFontColor: '#141414',
+        bodyBackgroundColor: 'transparent',
+        headerFontSize: 12,
+        headerFontColor: '#21252c',
+        headerBackgroundColor: '#f6f7f9',
+        hoverBodyBackgroundColor: '#bedaff',
+        hoverHeaderBackgroundColor: '#D9DDE488',
+        selectedBorderColor: '#4080ff'
+    };
     return {
         config: {
+            table: tableConfig,
+            pivotTable: tableConfig,
             line: {
                 ...baseConfig,
                 xAxis: bandAxis,
@@ -5466,7 +5792,7 @@ const zDimension = z.object({
         'dimension',
         'rowDimension',
         'columnDimension'
-    ]).default('dimension').optional()
+    ]).default('dimension')
 });
 const zDimensionGroup = z.object({
     id: z.string(),
@@ -5510,8 +5836,8 @@ const zNumFormat = z.object({
 const zMeasure = z.object({
     id: z.string(),
     alias: z.string().optional(),
-    autoFormat: z.boolean().default(true).optional(),
-    format: zNumFormat["default"]({}).optional()
+    autoFormat: z.boolean().default(true),
+    format: zNumFormat["default"]({})
 });
 const zMeasureGroup = z.object({
     id: z.string(),
@@ -5719,6 +6045,19 @@ const zLegend = z.object({
 const zTooltip = z.object({
     enable: z.boolean().default(true).optional()
 });
+const zTableConfig = z.object({
+    borderColor: z.string().optional(),
+    bodyFontSize: z.number().optional(),
+    bodyFontColor: z.string().optional(),
+    bodyBackgroundColor: z.string().optional(),
+    hoverBodyBackgroundColor: z.string().optional(),
+    headerFontSize: z.number().optional(),
+    headerFontColor: z.string().optional(),
+    headerBackgroundColor: z.string().optional(),
+    hoverHeaderBackgroundColor: z.string().optional(),
+    selectedBorderColor: z.string().optional()
+});
+const zPivotTableConfig = zTableConfig;
 const zLineConfig = z.object({
     backgroundColor: zBackgroundColor.optional(),
     label: zLabel.optional(),
@@ -5807,8 +6146,8 @@ const zFunnelConfig = z.object({
     legend: zLegend.optional()
 });
 const zConfig = z.object({
-    table: z.object({}).optional(),
-    pivotTable: z.object({}).optional(),
+    table: zTableConfig.optional(),
+    pivotTable: zPivotTableConfig.optional(),
     line: zLineConfig.optional(),
     column: zColumnConfig.optional(),
     columnParallel: zColumnParallelConfig.optional(),
@@ -6521,6 +6860,6 @@ const zAdvancedVSeed = z.object({
     annotation: zAnnotation,
     locale: zLocale
 });
-export { Builder, FoldMeasureId, FoldMeasureName, FoldMeasureValue, ORIGINAL_DATA, Separator, UnfoldDimensionGroup, UnfoldDimensionGroupId, areaAdvancedPipeline, areaPercentAdvancedPipeline, areaPercentSpecPipeline, areaSpecPipeline, autoFormatter, autoNumFormatter, barAdvancedPipeline, barParallelAdvancedPipeline, barParallelSpecPipeline, barPercentAdvancedPipeline, barPercentSpecPipeline, barSpecPipeline, columnAdvancedPipeline, columnParallelAdvancedPipeline, columnParallelSpecPipeline, columnPercentAdvancedPipeline, columnPercentSpecPipeline, columnSpecPipeline, createFormatter, createNumFormatter, darkTheme, dataReshapeFor1D1M, dataReshapeFor1D2M, dataReshapeFor2D1M, donutAdvancedPipeline, donutSpecPipeline, execPipeline, findAllDimensions, findAllMeasures, findDimensionById, findFirstDimension, findFirstMeasure, findMeasureById, foldMeasures, funnelAdvancedPipeline, funnelSpecPipeline, i18n, intl, isPivotChart, isPivotTable, isTable, isVChart, isVTable, lightTheme, lineAdvancedPipeline, lineSpecPipeline, pieAdvancedPipeline, pieSpecPipeline, pivotTableAdvancedPipeline, pivotTableSpecPipeline, preorderTraverse, registerAll, registerArea, registerAreaPercent, registerBar, registerBarParallel, registerBarPercent, registerColumn, registerColumnParallel, registerColumnPercent, registerCustomTheme, registerDarkTheme, registerDonut, registerFunnel, registerLightTheme, registerLine, registerPie, registerPivotTable, registerRose, registerRoseParallel, registerScatter, registerTable, roseAdvancedPipeline, roseParallelAdvancedPipeline, roseParallelSpecPipeline, roseSpecPipeline, scatterAdvancedPipeline, scatterSpecPipeline, tableAdvancedPipeline, tableSpecPipeline, unfoldDimensions, zAdvancedVSeed, zAnnotation, zAnnotationArea, zAnnotationHorizontalLine, zAnnotationPoint, zAnnotationVerticalLine, zArea, zAreaConfig, zAreaPercent, zAreaPercentConfig, zAreaStyle, zAxis, zBackgroundColor, zBar, zBarConfig, zBarParallel, zBarParallelConfig, zBarPercent, zBarPercentConfig, zBarStyle, zChartType, zColor, zColumn, zColumnConfig, zColumnParallel, zColumnParallelConfig, zColumnPercent, zColumnPercentConfig, zConfig, zCrosshairLine, zCrosshairRect, zCustomTheme, zCustomThemeConfig, zDataset, zDatasetReshapeInfo, zDatum, zDimension, zDimensionGroup, zDimensionTree, zDimensions, zDonut, zDonutConfig, zDualAxisConfig, zEncoding, zFoldInfo, zFunnel, zFunnelConfig, zLabel, zLegend, zLine, zLineConfig, zLineStyle, zLocale, zMarkStyle, zMeasure, zMeasureGroup, zMeasureTree, zMeasures, zNumFormat, zPie, zPieConfig, zPivotTable, zPointStyle, zRose, zRoseConfig, zRoseParallel, zRoseParallelConfig, zScatter, zScatterConfig, zStackCornerRadius, zTable, zTheme, zTooltip, zUnfoldInfo, zVSeed, zXBandAxis, zXLinearAxis, zYBandAxis, zYLinearAxis };
+export { Builder, FoldMeasureId, FoldMeasureName, FoldMeasureValue, ORIGINAL_DATA, Separator, UnfoldDimensionGroup, UnfoldDimensionGroupId, areaAdvancedPipeline, areaPercentAdvancedPipeline, areaPercentSpecPipeline, areaSpecPipeline, autoFormatter, autoNumFormatter, barAdvancedPipeline, barParallelAdvancedPipeline, barParallelSpecPipeline, barPercentAdvancedPipeline, barPercentSpecPipeline, barSpecPipeline, columnAdvancedPipeline, columnParallelAdvancedPipeline, columnParallelSpecPipeline, columnPercentAdvancedPipeline, columnPercentSpecPipeline, columnSpecPipeline, createFormatter, createNumFormatter, darkTheme, dataReshapeFor1D1M, dataReshapeFor1D2M, dataReshapeFor2D1M, donutAdvancedPipeline, donutSpecPipeline, execPipeline, findAllDimensions, findAllMeasures, findDimensionById, findFirstDimension, findFirstMeasure, findMeasureById, foldMeasures, funnelAdvancedPipeline, funnelSpecPipeline, i18n, intl, isPivotChart, isPivotTable, isTable, isVChart, isVTable, lightTheme, lineAdvancedPipeline, lineSpecPipeline, pieAdvancedPipeline, pieSpecPipeline, pivotTableAdvancedPipeline, pivotTableSpecPipeline, preorderTraverse, registerAll, registerArea, registerAreaPercent, registerBar, registerBarParallel, registerBarPercent, registerColumn, registerColumnParallel, registerColumnPercent, registerCustomTheme, registerDarkTheme, registerDonut, registerFunnel, registerLightTheme, registerLine, registerPie, registerPivotTable, registerRose, registerRoseParallel, registerScatter, registerTable, roseAdvancedPipeline, roseParallelAdvancedPipeline, roseParallelSpecPipeline, roseSpecPipeline, scatterAdvancedPipeline, scatterSpecPipeline, tableAdvancedPipeline, tableSpecPipeline, unfoldDimensions, zAdvancedVSeed, zAnnotation, zAnnotationArea, zAnnotationHorizontalLine, zAnnotationPoint, zAnnotationVerticalLine, zArea, zAreaConfig, zAreaPercent, zAreaPercentConfig, zAreaStyle, zAxis, zBackgroundColor, zBar, zBarConfig, zBarParallel, zBarParallelConfig, zBarPercent, zBarPercentConfig, zBarStyle, zChartType, zColor, zColumn, zColumnConfig, zColumnParallel, zColumnParallelConfig, zColumnPercent, zColumnPercentConfig, zConfig, zCrosshairLine, zCrosshairRect, zCustomTheme, zCustomThemeConfig, zDataset, zDatasetReshapeInfo, zDatum, zDimension, zDimensionGroup, zDimensionTree, zDimensions, zDonut, zDonutConfig, zDualAxisConfig, zEncoding, zFoldInfo, zFunnel, zFunnelConfig, zLabel, zLegend, zLine, zLineConfig, zLineStyle, zLocale, zMarkStyle, zMeasure, zMeasureGroup, zMeasureTree, zMeasures, zNumFormat, zPie, zPieConfig, zPivotTable, zPivotTableConfig, zPointStyle, zRose, zRoseConfig, zRoseParallel, zRoseParallelConfig, zScatter, zScatterConfig, zStackCornerRadius, zTable, zTableConfig, zTheme, zTooltip, zUnfoldInfo, zVSeed, zXBandAxis, zXLinearAxis, zYBandAxis, zYLinearAxis };
 
 //# sourceMappingURL=index.js.map