@visactor/vseed 0.1.26 → 0.1.28

package/dist/umd/index.js

@@ -2162,7 +2162,6 @@
                 return ordinalPipe(spec, context);
             };
         const isLinearColor = (advancedVSeed, vseed)=>{
-            console.log(vseed);
             const { encoding } = advancedVSeed;
             const measures = vseed.measures || advancedVSeed.measures;
             const measureIdList = findAllMeasures(measures).map((measure)=>measure.id);
@@ -3081,6 +3080,8 @@
                     ];
                     switch(op){
                         case '=':
+                            if (String(datum[selector.field]) === String(selectorValueArr[0])) return true;
+                            break;
                         case '==':
                             if (datum[selector.field] === selectorValueArr[0]) return true;
                             break;
@@ -3102,8 +3103,6 @@
                         case 'between':
                             if (Array.isArray(selector.value) && datum[selector.field] >= selectorValueArr[0] && datum[selector.field] <= selectorValueArr[1]) return true;
                             break;
-                        default:
-                            break;
                     }
                 } else if (isDimensionSelector(selector)) {
                     const op = selector.operator || selector.op;
@@ -3117,8 +3116,6 @@
                         case 'not in':
                             if (!selectorValueArr.includes(datum[selector.field])) return true;
                             break;
-                        default:
-                            break;
                     }
                 } else if (isPartialDatumSelector(selector)) {
                     if (Object.keys(selector).every((key)=>datum[key] === selector[key])) return true;
@@ -3354,7 +3351,7 @@
             const baseConfig = advancedVSeed.config[chartType];
             const foldInfo = datasetReshapeInfo[0].foldInfo;
             const { label } = baseConfig;
-            result.label = buildLabel(label, vseed.measures, vseed.dimensions, advancedVSeed.measures, encoding, [
+            result.label = buildLabel(label, vseed.measures, vseed.dimensions, advancedVSeed.dimensions, advancedVSeed.measures, encoding, [
                 foldInfo
             ]);
             return result;
@@ -3376,10 +3373,11 @@
             const percentValue = num / sum;
             return formatter(percentValue);
         };
-        const buildLabel = (label, vseedMeasures = [], vseedDimensions = [], advancedVSeedMeasures, encoding, foldInfoList)=>{
-            const { enable, wrap, showValue, showValuePercent, labelOverlap, labelColorSmartInvert, labelColor, labelFontSize, labelFontWeight, labelBackgroundColor, labelPosition, autoFormat, numFormat = {} } = label;
-            const labelDims = T((vseedDimensions || []).filter((item)=>encoding.label?.includes(item.id)), (item)=>item.id);
-            const labelMeas = T((vseedMeasures || []).filter((item)=>encoding.label?.includes(item.id)), (item)=>item.id);
+        const buildLabel = (label, vseedMeasures = [], vseedDimensions = [], advancedVSeedDimensions, advancedVSeedMeasures, encoding, foldInfoList)=>{
+            const { enable, wrap, showValue, showValuePercent, showDimension, labelOverlap, labelColorSmartInvert, labelColor, labelFontSize, labelFontWeight, labelBackgroundColor, labelPosition, autoFormat, numFormat = {} } = label;
+            const hasDimLabelEncoding = vseedDimensions.some((item)=>encoding.label?.includes(item.id));
+            const labelDims = T(hasDimLabelEncoding ? vseedDimensions.filter((item)=>encoding.label?.includes(item.id)) : showDimension ? advancedVSeedDimensions.filter((d)=>d.id !== MeasureName) : [], (item)=>item.id);
+            const labelMeas = T(vseedMeasures.filter((item)=>encoding.label?.includes(item.id)), (item)=>item.id);
             const percentFormat = chunk_5S4PYKVY_t(numFormat, {
                 type: 'percent'
             });
@@ -3388,7 +3386,10 @@
                 visible: enable,
                 formatMethod: (_, datum)=>{
                     const result = [];
-                    const dimLabels = labelDims.map((item)=>item.alias || item.id);
+                    const dimLabels = labelDims.map((item)=>{
+                        const id = item.id;
+                        return datum[id];
+                    });
                     const meaLabels = labelMeas.map((item)=>generateMeasureValue(datum[item.id], item, autoFormat, numFormat));
                     result.push(...dimLabels);
                     foldInfoList.forEach((foldInfo)=>{
@@ -4175,7 +4176,7 @@
                     indicators: indicators
                 };
             };
-        const pivotIndicators_pivotIndicatorsAsRow = (spec)=>{
+        const pivotIndicatorsAsRow = (spec)=>{
             const result = {
                 ...spec
             };
@@ -4184,7 +4185,7 @@
                 indicatorsAsCol: false
             };
         };
-        const pivotIndicators_pivotIndicatorsAsCol = (spec)=>{
+        const pivotIndicatorsAsCol = (spec)=>{
             const result = {
                 ...spec
             };
@@ -4466,7 +4467,7 @@
         const pivotLine = [
             initPivot,
             pivotGridStyle,
-            pivotIndicators_pivotIndicatorsAsRow,
+            pivotIndicatorsAsRow,
             datasetPivot,
             pivotIndicators_pivotIndicators([
                 initLine,
@@ -4920,7 +4921,7 @@
         const pivotColumn = [
             initPivot,
             pivotGridStyle,
-            pivotIndicators_pivotIndicatorsAsRow,
+            pivotIndicatorsAsRow,
             datasetPivot,
             pivotIndicators_pivotIndicators([
                 initColumn,
@@ -5032,12 +5033,13 @@
             const sameDimensionsMode = chunk_HGKLN5KY_k(encoding.x, encoding.color);
             result.type = 'bar';
             result.direction = 'vertical';
-            result.xField = sameDimensionsMode ? [
+            result.xField = [
                 unfoldInfo.encodingX
-            ] : [
-                unfoldInfo.encodingX,
-                unfoldInfo.encodingDetail
             ];
+            if (!sameDimensionsMode) {
+                result.xField.push(unfoldInfo.encodingDetail);
+                if (encoding.detail?.[0] === MeasureName && encoding.y?.length === 1) result.xField.pop();
+            }
             result.yField = foldInfo.measureValue;
             result.seriesField = unfoldInfo.encodingColorId;
             result.padding = 0;
@@ -5071,7 +5073,7 @@
         const pivotColumnParallel = [
             initPivot,
             pivotGridStyle,
-            pivotIndicators_pivotIndicatorsAsRow,
+            pivotIndicatorsAsRow,
             datasetPivot,
             pivotIndicators_pivotIndicators([
                 initColumnParallel,
@@ -5163,7 +5165,7 @@
         const pivotColumnPercent = [
             initPivot,
             pivotGridStyle,
-            pivotIndicators_pivotIndicatorsAsRow,
+            pivotIndicatorsAsRow,
             datasetPivot,
             pivotIndicators_pivotIndicators([
                 initColumn,
@@ -5601,7 +5603,7 @@
         const pivotBar = [
             initPivot,
             pivotGridStyle,
-            pivotIndicators_pivotIndicatorsAsCol,
+            pivotIndicatorsAsCol,
             datasetPivot,
             pivotIndicators_pivotIndicators([
                 initBar,
@@ -5673,12 +5675,13 @@
             const sameDimensionsMode = chunk_HGKLN5KY_k(encoding.y, encoding.color);
             result.type = 'bar';
             result.direction = 'horizontal';
-            result.yField = sameDimensionsMode ? [
+            result.yField = [
                 unfoldInfo.encodingY
-            ] : [
-                unfoldInfo.encodingY,
-                unfoldInfo.encodingDetail
             ];
+            if (!sameDimensionsMode) {
+                result.yField.push(unfoldInfo.encodingDetail);
+                if (encoding.detail?.[0] === MeasureName && encoding.x?.length === 1) result.yField.pop();
+            }
             result.xField = foldInfo.measureValue;
             result.seriesField = unfoldInfo.encodingColorId;
             result.padding = 0;
@@ -5712,7 +5715,7 @@
         const pivotBarParallel = [
             initPivot,
             pivotGridStyle,
-            pivotIndicators_pivotIndicatorsAsCol,
+            pivotIndicatorsAsCol,
             datasetPivot,
             pivotIndicators_pivotIndicators([
                 initBarParallel,
@@ -5795,7 +5798,7 @@
         const pivotBarPercent = [
             initPivot,
             pivotGridStyle,
-            pivotIndicators_pivotIndicatorsAsCol,
+            pivotIndicatorsAsCol,
             datasetPivot,
             pivotIndicators_pivotIndicators([
                 initBar,
@@ -5986,7 +5989,7 @@
         const pivotArea = [
             initPivot,
             pivotGridStyle,
-            pivotIndicators_pivotIndicatorsAsRow,
+            pivotIndicatorsAsRow,
             datasetPivot,
             pivotIndicators_pivotIndicators([
                 initArea,
@@ -6076,7 +6079,7 @@
         const pivotAreaPercent = [
             initPivot,
             pivotGridStyle,
-            pivotIndicators_pivotIndicatorsAsRow,
+            pivotIndicatorsAsRow,
             datasetPivot,
             pivotIndicators_pivotIndicators([
                 initArea,
@@ -6523,7 +6526,7 @@
             const baseConfig = advancedVSeed.config[chartType];
             const foldInfoList = datasetReshapeInfo[0].foldInfoList;
             const { label } = baseConfig;
-            result.label = buildLabel(label, vseed.measures, vseed.dimensions, advancedVSeed.measures, encoding, foldInfoList);
+            result.label = buildLabel(label, vseed.measures, vseed.dimensions, advancedVSeed.dimensions, advancedVSeed.measures, encoding, foldInfoList);
             return result;
         };
         const tooltipScatter = (spec, context)=>{
@@ -6681,7 +6684,7 @@
         const pivotScatter = [
             initPivot,
             pivotGridStyle,
-            pivotIndicators_pivotIndicatorsAsRow,
+            pivotIndicatorsAsRow,
             datasetPivot,
             pivotIndicators_pivotIndicators([
                 initScatter,
@@ -7339,7 +7342,7 @@
             const { chartType } = advancedVSeed;
             const baseConfig = advancedVSeed.config[chartType];
             const foldInfoList = datasetReshapeInfo[0].foldInfoList;
-            result.label = buildLabel(baseConfig.label, vseed.measures, vseed.dimensions, advancedVSeed.measures, encoding, [
+            result.label = buildLabel(baseConfig.label, vseed.measures, vseed.dimensions, advancedVSeed.dimensions, advancedVSeed.measures, encoding, [
                 foldInfoList[0]
             ]);
             result.label.zIndex = 1002;
@@ -7354,7 +7357,7 @@
             const { chartType } = advancedVSeed;
             const baseConfig = advancedVSeed.config[chartType];
             const foldInfoList = datasetReshapeInfo[0].foldInfoList;
-            result.label = buildLabel(baseConfig.label, vseed.measures, vseed.dimensions, advancedVSeed.measures, encoding, [
+            result.label = buildLabel(baseConfig.label, vseed.measures, vseed.dimensions, advancedVSeed.dimensions, advancedVSeed.measures, encoding, [
                 foldInfoList[1]
             ]);
             result.label.zIndex = 1002;
@@ -7671,7 +7674,7 @@
         const pivotDualAxis = [
             initPivot,
             pivotGridStyle,
-            pivotIndicators_pivotIndicatorsAsRow,
+            pivotIndicatorsAsRow,
             datasetPivot,
             pivotIndicators_pivotIndicators([
                 series([
@@ -7882,7 +7885,7 @@
             const baseConfig = advancedVSeed.config[chartType];
             const foldInfo = datasetReshapeInfo[0].foldInfo;
             const { label } = baseConfig;
-            result.label = buildLabel(label, vseed.measures, vseed.dimensions, advancedVSeed.measures, encoding, [
+            result.label = buildLabel(label, vseed.measures, vseed.dimensions, advancedVSeed.dimensions, advancedVSeed.measures, encoding, [
                 foldInfo
             ]);
             if (label.labelLayout) result.label.layout = {
@@ -7912,7 +7915,7 @@
         const pivotPie = [
             initPivot,
             pivotGridStyle,
-            pivotIndicators_pivotIndicatorsAsRow,
+            pivotIndicatorsAsRow,
             pivotHideIndicatorName,
             datasetPivot,
             pivotIndicators_pivotIndicators([
@@ -8006,7 +8009,7 @@
         const pivotDonut = [
             initPivot,
             pivotGridStyle,
-            pivotIndicators_pivotIndicatorsAsRow,
+            pivotIndicatorsAsRow,
             pivotHideIndicatorName,
             datasetPivot,
             pivotIndicators_pivotIndicators([
@@ -8226,7 +8229,7 @@
         const pivotRose = [
             initPivot,
             pivotGridStyle,
-            pivotIndicators_pivotIndicatorsAsRow,
+            pivotIndicatorsAsRow,
             pivotHideIndicatorName,
             datasetPivot,
             pivotIndicators_pivotIndicators([
@@ -8291,12 +8294,13 @@
             const { unfoldInfo, foldInfo } = datasetReshapeInfo[0];
             const sameDimensionsMode = chunk_HGKLN5KY_k(encoding.angle, encoding.color);
             result.type = 'rose';
-            result.angleField = sameDimensionsMode ? [
+            result.angleField = [
                 unfoldInfo.encodingAngle
-            ] : [
-                unfoldInfo.encodingAngle,
-                unfoldInfo.encodingDetail
             ];
+            if (!sameDimensionsMode) {
+                result.angleField.push(unfoldInfo.encodingDetail);
+                if (encoding.detail?.[0] === MeasureName && encoding.radius?.length === 1) result.angleField.pop();
+            }
             result.valueField = foldInfo.measureValue;
             result.seriesField = unfoldInfo.encodingColorId;
             result.padding = 0;
@@ -8345,7 +8349,7 @@
         const pivotRoseParallel = [
             initPivot,
             pivotGridStyle,
-            pivotIndicators_pivotIndicatorsAsRow,
+            pivotIndicatorsAsRow,
             pivotHideIndicatorName,
             datasetPivot,
             pivotIndicators_pivotIndicators([
@@ -8562,7 +8566,7 @@
         const pivotRadar = [
             initPivot,
             pivotGridStyle,
-            pivotIndicators_pivotIndicatorsAsRow,
+            pivotIndicatorsAsRow,
             pivotHideIndicatorName,
             datasetPivot,
             pivotIndicators_pivotIndicators([
@@ -8763,7 +8767,7 @@
         const pivotFunnel = [
             initPivot,
             pivotGridStyle,
-            pivotIndicators_pivotIndicatorsAsRow,
+            pivotIndicatorsAsRow,
             pivotHideIndicatorName,
             datasetPivot,
             pivotIndicators_pivotIndicators([
@@ -9066,7 +9070,7 @@
         const pivotHeatmap = [
             initPivot,
             pivotGridStyle,
-            pivotIndicators_pivotIndicatorsAsRow,
+            pivotIndicatorsAsRow,
             datasetPivot,
             pivotIndicators_pivotIndicators([
                 initHeatmap,
@@ -9092,8 +9096,127 @@
             Builder._advancedPipelineMap.heatmap = heatmapAdvancedPipeline;
             Builder._specPipelineMap.heatmap = heatmapSpecPipeline;
         };
-        const lightTheme = ()=>{
-            const linearAxis = {
+        const getDarkCrosshairLine = ()=>({
+                visible: true,
+                labelVisible: true,
+                labelColor: '#4B4F54',
+                labelBackgroundColor: '#ffffff',
+                lineColor: '#E2E3E6'
+            });
+        const getDarkCrosshairRect = ()=>({
+                visible: true,
+                labelVisible: true,
+                labelColor: '#4B4F54',
+                labelBackgroundColor: '#ffffff',
+                rectColor: '#E2E3E6'
+            });
+        const getLightCrosshairLine = ()=>({
+                visible: true,
+                labelVisible: true,
+                labelColor: '#ffffff',
+                labelBackgroundColor: '#364159',
+                lineColor: '#3641594d'
+            });
+        const getLightCrosshairRect = ()=>({
+                visible: true,
+                labelVisible: true,
+                labelColor: '#ffffff',
+                labelBackgroundColor: '#364159',
+                rectColor: '#3641594d'
+            });
+        const getLightColorScheme = ()=>[
+                '#8D72F6',
+                '#5766EC',
+                '#66A3FE',
+                '#51D5E6',
+                '#4EC0B3',
+                '#F9DF90',
+                '#F9AD71',
+                '#ED8888',
+                '#E9A0C3',
+                '#D77DD3'
+            ];
+        const getDarkColorScheme = ()=>[
+                '#2E62F1',
+                '#4DC36A',
+                '#FF8406',
+                '#FFCC00',
+                '#4F44CF',
+                '#5AC8FA',
+                '#003A8C',
+                '#B08AE2',
+                '#FF6341',
+                '#98DD62'
+            ];
+        const getLightLinearColorScheme = ()=>[
+                '#C2CEFF',
+                '#5766EC'
+            ];
+        const getDarkLinearColorScheme = ()=>[
+                '#A0CEFF',
+                '#2E62F1'
+            ];
+        const getLightColor = ()=>({
+                linearColorScheme: getLightLinearColorScheme(),
+                colorScheme: getLightColorScheme()
+            });
+        const getDarkColor = ()=>({
+                linearColorScheme: getDarkLinearColorScheme(),
+                colorScheme: getDarkColorScheme()
+            });
+        const getDefaultLabel = ()=>({
+                enable: true,
+                wrap: true,
+                showValue: true,
+                showValuePercent: false,
+                labelColorSmartInvert: false,
+                labelOverlap: true
+            });
+        const getDefaultLegend = ()=>({
+                enable: true,
+                border: true,
+                maxSize: 1,
+                shapeType: 'rectRound',
+                position: 'rt',
+                labelColor: '#646A73',
+                labelFontSize: 12,
+                labelFontWeight: 400
+            });
+        const getLightTableConfig = ()=>({
+                borderColor: '#e3e5eb',
+                bodyFontSize: 12,
+                bodyFontColor: '#141414',
+                bodyBackgroundColor: 'transparent',
+                headerFontSize: 12,
+                headerFontColor: '#21252c',
+                headerBackgroundColor: '#f6f7f9',
+                hoverBodyBackgroundColor: '#bedaff',
+                hoverBodyInlineBackgroundColor: '#bedaff33',
+                hoverHeaderBackgroundColor: '#D9DDE4',
+                hoverHeaderInlineBackgroundColor: '#D9DDE455',
+                selectedBorderColor: '#4080ff',
+                selectedBackgroundColor: '#bedaff33',
+                backgroundColor: 'transparent'
+            });
+        const getDarkTableConfig = ()=>({
+                borderColor: '#4b4e53',
+                bodyFontSize: 12,
+                bodyFontColor: '#fdfdfd',
+                bodyBackgroundColor: 'transparent',
+                headerFontSize: 12,
+                headerFontColor: '#fdfdfd',
+                headerBackgroundColor: '#36393e',
+                hoverBodyBackgroundColor: '#4284ff66',
+                hoverBodyInlineBackgroundColor: '#4284ff10',
+                hoverHeaderBackgroundColor: '#6f7984cc',
+                hoverHeaderInlineBackgroundColor: '#4b4f54',
+                selectedBorderColor: '#3073f2',
+                selectedBackgroundColor: '#4284ff33'
+            });
+        const getDefaultTooltip = ()=>({
+                enable: true
+            });
+        const getLightLinearAxis = ()=>({
                 nice: true,
                 zero: true,
                 inverse: false,
@@ -9127,8 +9250,8 @@
                     lineColor: '#3641594d',
                     lineWidth: 1
                 }
-            };
-            const bandAxis = {
+            });
+        const getLightBandAxis = ()=>({
                 labelAutoHide: true,
                 labelAutoHideGap: 4,
                 labelAutoLimit: true,
@@ -9169,7 +9292,86 @@
                     lineColor: '#3641594d',
                     lineWidth: 1
                 }
-            };
+            });
+        const getDarkLinearAxis = ()=>({
+                nice: true,
+                zero: true,
+                label: {
+                    visible: true,
+                    labelAngle: 0,
+                    labelColor: '#E2E3E6',
+                    labelFontSize: 12,
+                    labelFontWeight: 400
+                },
+                title: {
+                    visible: false,
+                    titleText: '',
+                    titleColor: '#FDFDFD',
+                    titleFontSize: 12,
+                    titleFontWeight: 400
+                },
+                grid: {
+                    visible: true,
+                    gridColor: '#404349',
+                    gridWidth: 0.5
+                },
+                tick: {
+                    visible: false,
+                    tickInside: false,
+                    tickSize: 4,
+                    tickColor: '#4B4F54'
+                },
+                line: {
+                    visible: false,
+                    lineColor: '#4B4F54',
+                    lineWidth: 1
+                }
+            });
+        const getDarkBandAxis = ()=>({
+                labelAutoHide: true,
+                labelAutoHideGap: 4,
+                labelAutoLimit: true,
+                labelAutoLimitLength: 80,
+                labelAutoRotate: false,
+                labelAutoRotateAngleRange: [
+                    0,
+                    -45,
+                    -90
+                ],
+                label: {
+                    visible: true,
+                    labelAngle: 0,
+                    labelColor: '#E2E3E6',
+                    labelFontSize: 12,
+                    labelFontWeight: 400
+                },
+                title: {
+                    visible: false,
+                    titleText: '',
+                    titleColor: '#FDFDFD',
+                    titleFontSize: 12,
+                    titleFontWeight: 400
+                },
+                grid: {
+                    visible: false,
+                    gridColor: '#404349',
+                    gridWidth: 0.5
+                },
+                tick: {
+                    visible: false,
+                    tickInside: false,
+                    tickSize: 4,
+                    tickColor: '#4B4F54'
+                },
+                line: {
+                    visible: true,
+                    lineColor: '#4B4F54',
+                    lineWidth: 1
+                }
+            });
+        const lightTheme = ()=>{
+            const linearAxis = getLightLinearAxis();
+            const bandAxis = getLightBandAxis();
             const barBandAxis = {
                 ...bandAxis,
                 labelAutoHide: false,
@@ -9183,78 +9385,16 @@
                     -90
                 ]
             };
-            const crosshairLine = {
-                visible: true,
-                labelVisible: true,
-                lineColor: '#3641594d',
-                labelColor: '#ffffff',
-                labelBackgroundColor: '#364159'
-            };
-            const crosshairRect = {
-                visible: true,
-                labelVisible: true,
-                rectColor: '#3641594d',
-                labelColor: '#ffffff',
-                labelBackgroundColor: '#364159'
-            };
+            const crosshairLine = getLightCrosshairLine();
+            const crosshairRect = getLightCrosshairRect();
             const baseConfig = {
                 backgroundColor: 'transparent',
-                color: {
-                    linearColorScheme: [
-                        '#C2CEFF',
-                        '#5766EC'
-                    ],
-                    colorScheme: [
-                        '#8D72F6',
-                        '#5766EC',
-                        '#66A3FE',
-                        '#51D5E6',
-                        '#4EC0B3',
-                        '#F9DF90',
-                        '#F9AD71',
-                        '#ED8888',
-                        '#E9A0C3',
-                        '#D77DD3'
-                    ]
-                },
-                label: {
-                    enable: true,
-                    wrap: true,
-                    showValue: true,
-                    showValuePercent: false,
-                    labelColorSmartInvert: false,
-                    labelOverlap: true
-                },
-                tooltip: {
-                    enable: true
-                },
-                legend: {
-                    enable: true,
-                    border: true,
-                    maxSize: 1,
-                    shapeType: 'rectRound',
-                    position: 'rt',
-                    labelColor: '#646A73',
-                    labelFontSize: 12,
-                    labelFontWeight: 400
-                }
-            };
-            const tableConfig = {
-                borderColor: '#e3e5eb',
-                bodyFontSize: 12,
-                bodyFontColor: '#141414',
-                bodyBackgroundColor: 'transparent',
-                headerFontSize: 12,
-                headerFontColor: '#21252c',
-                headerBackgroundColor: '#f6f7f9',
-                hoverBodyBackgroundColor: '#bedaff',
-                hoverBodyInlineBackgroundColor: '#bedaff33',
-                hoverHeaderBackgroundColor: '#D9DDE4',
-                hoverHeaderInlineBackgroundColor: '#D9DDE455',
-                selectedBorderColor: '#4080ff',
-                selectedBackgroundColor: '#bedaff33',
-                backgroundColor: 'transparent'
+                color: getLightColor(),
+                label: getDefaultLabel(),
+                legend: getDefaultLegend(),
+                tooltip: getDefaultTooltip()
             };
+            const tableConfig = getLightTableConfig();
             return {
                 config: {
                     table: tableConfig,
@@ -9357,6 +9497,11 @@
                     },
                     scatter: {
                         ...baseConfig,
+                        crosshairLine,
+                        sizeRange: [
+                            8,
+                            24
+                        ],
                         xAxis: {
                             ...linearAxis,
                             line: {
@@ -9371,11 +9516,11 @@
                                 visible: true
                             }
                         },
-                        crosshairLine,
-                        sizeRange: [
-                            8,
-                            24
-                        ]
+                        label: {
+                            ...baseConfig.label,
+                            showValue: false,
+                            showValuePercent: false
+                        }
                     },
                     dualAxis: {
                         ...baseConfig,
@@ -9398,7 +9543,8 @@
                         label: {
                             ...baseConfig.label,
                             showValuePercent: true,
-                            labelLayout: 'labelLine'
+                            labelLayout: 'labelLine',
+                            showDimension: true
                         }
                     },
                     donut: {
@@ -9406,7 +9552,8 @@
                         label: {
                             ...baseConfig.label,
                             showValuePercent: true,
-                            labelLayout: 'labelLine'
+                            labelLayout: 'labelLine',
+                            showDimension: true
                         }
                     },
                     radar: {
@@ -9416,14 +9563,16 @@
                         ...baseConfig,
                         label: {
                             ...baseConfig.label,
-                            showValuePercent: true
+                            showValuePercent: true,
+                            showDimension: true
                         }
                     },
                     roseParallel: {
                         ...baseConfig,
                         label: {
                             ...baseConfig.label,
-                            showValuePercent: true
+                            showValuePercent: true,
+                            showDimension: true
                         }
                     },
                     funnel: {
@@ -9440,82 +9589,8 @@
             };
         };
         const darkTheme = ()=>{
-            const linearAxis = {
-                nice: true,
-                zero: true,
-                label: {
-                    visible: true,
-                    labelAngle: 0,
-                    labelColor: '#E2E3E6',
-                    labelFontSize: 12,
-                    labelFontWeight: 400
-                },
-                title: {
-                    visible: false,
-                    titleText: '',
-                    titleColor: '#FDFDFD',
-                    titleFontSize: 12,
-                    titleFontWeight: 400
-                },
-                grid: {
-                    visible: true,
-                    gridColor: '#404349',
-                    gridWidth: 0.5
-                },
-                tick: {
-                    visible: false,
-                    tickInside: false,
-                    tickSize: 4,
-                    tickColor: '#4B4F54'
-                },
-                line: {
-                    visible: false,
-                    lineColor: '#4B4F54',
-                    lineWidth: 1
-                }
-            };
-            const bandAxis = {
-                labelAutoHide: true,
-                labelAutoHideGap: 4,
-                labelAutoLimit: true,
-                labelAutoLimitLength: 80,
-                labelAutoRotate: false,
-                labelAutoRotateAngleRange: [
-                    0,
-                    -45,
-                    -90
-                ],
-                label: {
-                    visible: true,
-                    labelAngle: 0,
-                    labelColor: '#E2E3E6',
-                    labelFontSize: 12,
-                    labelFontWeight: 400
-                },
-                title: {
-                    visible: false,
-                    titleText: '',
-                    titleColor: '#FDFDFD',
-                    titleFontSize: 12,
-                    titleFontWeight: 400
-                },
-                grid: {
-                    visible: false,
-                    gridColor: '#404349',
-                    gridWidth: 0.5
-                },
-                tick: {
-                    visible: false,
-                    tickInside: false,
-                    tickSize: 4,
-                    tickColor: '#4B4F54'
-                },
-                line: {
-                    visible: true,
-                    lineColor: '#4B4F54',
-                    lineWidth: 1
-                }
-            };
+            const linearAxis = getDarkLinearAxis();
+            const bandAxis = getDarkBandAxis();
             const barBandAxis = {
                 ...bandAxis,
                 labelAutoHide: false,
@@ -9529,77 +9604,16 @@
                     -90
                 ]
             };
-            const crosshairLine = {
-                visible: true,
-                labelVisible: true,
-                lineColor: '#E2E3E6',
-                labelColor: '#4B4F54',
-                labelBackgroundColor: '#ffffff'
-            };
-            const crosshairRect = {
-                visible: true,
-                labelVisible: true,
-                lineColor: '#E2E3E6',
-                labelColor: '#4B4F54',
-                labelBackgroundColor: '#ffffff'
-            };
+            const crosshairLine = getDarkCrosshairLine();
+            const crosshairRect = getDarkCrosshairRect();
             const baseConfig = {
                 backgroundColor: 'transparent',
-                color: {
-                    linearColorScheme: [
-                        '#A0CEFF',
-                        '#2E62F1'
-                    ],
-                    colorScheme: [
-                        '#2E62F1',
-                        '#4DC36A',
-                        '#FF8406',
-                        '#FFCC00',
-                        '#4F44CF',
-                        '#5AC8FA',
-                        '#003A8C',
-                        '#B08AE2',
-                        '#FF6341',
-                        '#98DD62'
-                    ]
-                },
-                label: {
-                    enable: true,
-                    wrap: true,
-                    showValue: true,
-                    showValuePercent: false,
-                    labelColorSmartInvert: false,
-                    labelOverlap: true
-                },
-                tooltip: {
-                    enable: true
-                },
-                legend: {
-                    enable: true,
-                    border: true,
-                    maxSize: 1,
-                    position: 'rt',
-                    shapeType: 'rectRound',
-                    labelColor: '#FDFDFD',
-                    labelFontSize: 12,
-                    labelFontWeight: 400
-                }
-            };
-            const tableConfig = {
-                borderColor: '#4b4e53',
-                bodyFontSize: 12,
-                bodyFontColor: '#fdfdfd',
-                bodyBackgroundColor: 'transparent',
-                headerFontSize: 12,
-                headerFontColor: '#fdfdfd',
-                headerBackgroundColor: '#36393e',
-                hoverBodyBackgroundColor: '#4284ff66',
-                hoverBodyInlineBackgroundColor: '#4284ff10',
-                hoverHeaderBackgroundColor: '#6f7984cc',
-                hoverHeaderInlineBackgroundColor: '#4b4f54',
-                selectedBorderColor: '#3073f2',
-                selectedBackgroundColor: '#4284ff33'
+                color: getDarkColor(),
+                label: getDefaultLabel(),
+                legend: getDefaultLegend(),
+                tooltip: getDefaultTooltip()
             };
+            const tableConfig = getDarkTableConfig();
             return {
                 config: {
                     table: tableConfig,
@@ -9696,6 +9710,11 @@
                     },
                     scatter: {
                         ...baseConfig,
+                        crosshairLine,
+                        sizeRange: [
+                            8,
+                            24
+                        ],
                         xAxis: {
                             ...linearAxis,
                             line: {
@@ -9710,11 +9729,11 @@
                                 visible: true
                             }
                         },
-                        crosshairLine,
-                        sizeRange: [
-                            8,
-                            24
-                        ]
+                        label: {
+                            ...baseConfig.label,
+                            showValue: false,
+                            showValuePercent: false
+                        }
                     },
                     dualAxis: {
                         ...baseConfig,
@@ -9737,7 +9756,8 @@
                         label: {
                             ...baseConfig.label,
                             showValuePercent: true,
-                            labelLayout: 'labelLine'
+                            labelLayout: 'labelLine',
+                            showDimension: true
                         }
                     },
                     donut: {
@@ -9745,7 +9765,8 @@
                         label: {
                             ...baseConfig.label,
                             showValuePercent: true,
-                            labelLayout: 'labelLine'
+                            labelLayout: 'labelLine',
+                            showDimension: true
                         }
                     },
                     radar: {
@@ -9755,14 +9776,16 @@
                         ...baseConfig,
                         label: {
                             ...baseConfig.label,
-                            showValuePercent: true
+                            showValuePercent: true,
+                            showDimension: true
                         }
                     },
                     roseParallel: {
                         ...baseConfig,
                         label: {
                             ...baseConfig.label,
-                            showValuePercent: true
+                            showValuePercent: true,
+                            showDimension: true
                         }
                     },
                     funnel: {
@@ -13482,6 +13505,7 @@
             wrap: schemas_boolean().nullish(),
             showValue: schemas_boolean().nullish(),
             showValuePercent: schemas_boolean().nullish(),
+            showDimension: schemas_boolean().nullish(),
             autoFormat: schemas_boolean().nullish(),
             numFormat: zNumFormat.nullish(),
             labelFontSize: schemas_number().nullish(),
@@ -13847,7 +13871,7 @@
             selector: union([
                 zSelector,
                 zSelectors
-            ]),
+            ]).nullish(),
             text: schemas_string().or(schemas_array(schemas_string())).nullish(),
             textColor: schemas_string().default('#ffffff').nullish(),
             textFontSize: schemas_number().default(12).nullish(),
@@ -13975,7 +13999,7 @@
             selector: union([
                 zSelector,
                 zSelectors
-            ]),
+            ]).nullish(),
             textPosition: schemas_enum([
                 'top',
                 'topRight',