@visactor/vseed 0.0.20 → 0.0.21

package/dist/index.cjs

@@ -67,6 +67,7 @@ __webpack_require__.d(__webpack_exports__, {
     barPercentAdvancedPipeline: ()=>barPercentAdvancedPipeline,
     findAllDimensions: ()=>findAllDimensions,
     findDimensionById: ()=>findDimensionById,
+    zPivotTableConfig: ()=>zPivotTableConfig,
     zArea: ()=>zArea,
     zColumnParallel: ()=>zColumnParallel,
     zDimensions: ()=>zDimensions,
@@ -146,6 +147,7 @@ __webpack_require__.d(__webpack_exports__, {
     zColumn: ()=>zColumn,
     zCustomTheme: ()=>zCustomTheme,
     zLineConfig: ()=>zLineConfig,
+    zTableConfig: ()=>zTableConfig,
     zXBandAxis: ()=>zXBandAxis,
     zColumnPercentConfig: ()=>zColumnPercentConfig,
     findMeasureById: ()=>findMeasureById,
@@ -4768,7 +4770,54 @@ 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)=>{
+    const { advancedVSeed } = context;
+    const { dataset } = advancedVSeed;
+    return {
+        ...spec,
+        records: dataset,
+        widthMode: 'standard',
+        heightMode: 'autoHeight',
+        autoWrapText: true,
+        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)=>{
@@ -4777,7 +4826,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: [
@@ -4792,7 +4847,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: [
@@ -4801,39 +4862,33 @@ 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 || [];
 };
-const tableSpecPipeline = [
-    initTable,
-    dimensionTreeToColumns,
-    measureTreeToColumns
-];
-const initPivotTable = (spec, context)=>{
-    const { advancedVSeed } = context;
-    const { dataset } = advancedVSeed;
-    return {
-        ...spec,
-        records: dataset,
-        widthMode: 'standard',
-        heightMode: 'autoHeight',
-        autoWrapText: true,
-        columnResizeMode: 'all'
-    };
-};
 const pivotColumns = (spec, context)=>{
     const { advancedVSeed } = context;
     const dimensions = advancedVSeed.dimensions;
@@ -4866,6 +4921,7 @@ const pivotIndicators_pivotIndicators = (spec, context)=>{
     return {
         ...spec,
         indicatorsAsCol: true,
+        indicatorTitle: intl.i18n`指标名称`,
         indicators: measures.map((item)=>({
                 cellType: 'text',
                 indicatorKey: item.id,
@@ -4874,11 +4930,255 @@ const pivotIndicators_pivotIndicators = (spec, context)=>{
             }))
     };
 };
+const external_d3_color_namespaceObject = require("d3-color");
+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 = (0, external_d3_color_namespaceObject.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: (0, external_d3_color_namespaceObject.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: (0, external_d3_color_namespaceObject.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: (0, external_d3_color_namespaceObject.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: (0, external_d3_color_namespaceObject.color)(borderColor)?.copy({
+            opacity: 0.15
+        }).toString()
+    };
+    return result;
+};
+const tableSpecPipeline = [
+    initTable,
+    dimensionTreeToColumns,
+    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;
@@ -5176,8 +5476,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,
@@ -5455,8 +5769,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,
@@ -5661,7 +5989,7 @@ const zDimension = external_zod_namespaceObject.z.object({
         'dimension',
         'rowDimension',
         'columnDimension'
-    ]).default('dimension').optional()
+    ]).default('dimension')
 });
 const zDimensionGroup = external_zod_namespaceObject.z.object({
     id: external_zod_namespaceObject.z.string(),
@@ -5705,8 +6033,8 @@ const zNumFormat = external_zod_namespaceObject.z.object({
 const zMeasure = external_zod_namespaceObject.z.object({
     id: external_zod_namespaceObject.z.string(),
     alias: external_zod_namespaceObject.z.string().optional(),
-    autoFormat: external_zod_namespaceObject.z.boolean().default(true).optional(),
-    format: zNumFormat["default"]({}).optional()
+    autoFormat: external_zod_namespaceObject.z.boolean().default(true),
+    format: zNumFormat["default"]({})
 });
 const zMeasureGroup = external_zod_namespaceObject.z.object({
     id: external_zod_namespaceObject.z.string(),
@@ -5914,6 +6242,19 @@ const zLegend = external_zod_namespaceObject.z.object({
 const zTooltip = external_zod_namespaceObject.z.object({
     enable: external_zod_namespaceObject.z.boolean().default(true).optional()
 });
+const zTableConfig = external_zod_namespaceObject.z.object({
+    borderColor: external_zod_namespaceObject.z.string().optional(),
+    bodyFontSize: external_zod_namespaceObject.z.number().optional(),
+    bodyFontColor: external_zod_namespaceObject.z.string().optional(),
+    bodyBackgroundColor: external_zod_namespaceObject.z.string().optional(),
+    hoverBodyBackgroundColor: external_zod_namespaceObject.z.string().optional(),
+    headerFontSize: external_zod_namespaceObject.z.number().optional(),
+    headerFontColor: external_zod_namespaceObject.z.string().optional(),
+    headerBackgroundColor: external_zod_namespaceObject.z.string().optional(),
+    hoverHeaderBackgroundColor: external_zod_namespaceObject.z.string().optional(),
+    selectedBorderColor: external_zod_namespaceObject.z.string().optional()
+});
+const zPivotTableConfig = zTableConfig;
 const zLineConfig = external_zod_namespaceObject.z.object({
     backgroundColor: zBackgroundColor.optional(),
     label: zLabel.optional(),
@@ -6002,8 +6343,8 @@ const zFunnelConfig = external_zod_namespaceObject.z.object({
     legend: zLegend.optional()
 });
 const zConfig = external_zod_namespaceObject.z.object({
-    table: external_zod_namespaceObject.z.object({}).optional(),
-    pivotTable: external_zod_namespaceObject.z.object({}).optional(),
+    table: zTableConfig.optional(),
+    pivotTable: zPivotTableConfig.optional(),
     line: zLineConfig.optional(),
     column: zColumnConfig.optional(),
     columnParallel: zColumnParallelConfig.optional(),
@@ -6867,6 +7208,7 @@ exports.zNumFormat = __webpack_exports__.zNumFormat;
 exports.zPie = __webpack_exports__.zPie;
 exports.zPieConfig = __webpack_exports__.zPieConfig;
 exports.zPivotTable = __webpack_exports__.zPivotTable;
+exports.zPivotTableConfig = __webpack_exports__.zPivotTableConfig;
 exports.zPointStyle = __webpack_exports__.zPointStyle;
 exports.zRose = __webpack_exports__.zRose;
 exports.zRoseConfig = __webpack_exports__.zRoseConfig;
@@ -6876,6 +7218,7 @@ exports.zScatter = __webpack_exports__.zScatter;
 exports.zScatterConfig = __webpack_exports__.zScatterConfig;
 exports.zStackCornerRadius = __webpack_exports__.zStackCornerRadius;
 exports.zTable = __webpack_exports__.zTable;
+exports.zTableConfig = __webpack_exports__.zTableConfig;
 exports.zTheme = __webpack_exports__.zTheme;
 exports.zTooltip = __webpack_exports__.zTooltip;
 exports.zUnfoldInfo = __webpack_exports__.zUnfoldInfo;
@@ -7036,6 +7379,7 @@ for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "zPie",
     "zPieConfig",
     "zPivotTable",
+    "zPivotTableConfig",
     "zPointStyle",
     "zRose",
     "zRoseConfig",
@@ -7045,6 +7389,7 @@ for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "zScatterConfig",
     "zStackCornerRadius",
     "zTable",
+    "zTableConfig",
     "zTheme",
     "zTooltip",
     "zUnfoldInfo",