@visactor/vseed 0.1.13 → 0.1.15

package/dist/umd/index.js

@@ -106,6 +106,7 @@
             columnAdvancedPipeline: ()=>columnAdvancedPipeline,
             zLabel: ()=>zLabel,
             registerColumn: ()=>registerColumn,
+            createFormatterByMeasure: ()=>createFormatterByMeasure,
             findAllMeasures: ()=>findAllMeasures,
             funnelSpecPipeline: ()=>funnelSpecPipeline,
             isDimensionSelector: ()=>isDimensionSelector,
@@ -193,21 +194,20 @@
             darkTheme: ()=>darkTheme,
             createNumFormatter: ()=>createNumFormatter,
             zAreaConfig: ()=>zAreaConfig,
-            zAxis: ()=>zAxis,
-            isVTable: ()=>isVTable,
             zMeasures: ()=>zMeasures,
+            isVTable: ()=>isVTable,
             zRadar: ()=>zRadar,
+            zRadarConfig: ()=>zRadarConfig,
             zLine: ()=>zLine,
             columnSpecPipeline: ()=>columnSpecPipeline,
             zFoldInfo: ()=>zFoldInfo,
             zDatasetReshapeInfo: ()=>zDatasetReshapeInfo,
             zLinearColor: ()=>zLinearColor,
-            zRadarConfig: ()=>zRadarConfig,
+            zStackCornerRadius: ()=>zStackCornerRadius,
             zAreaStyle: ()=>zAreaStyle,
             ORIGINAL_DATA: ()=>ORIGINAL_DATA,
-            zStackCornerRadius: ()=>zStackCornerRadius,
-            zAnnotationArea: ()=>zAnnotationArea,
             zUnfoldInfo: ()=>zUnfoldInfo,
+            zAnnotationArea: ()=>zAnnotationArea,
             DetailEncoding: ()=>DetailEncoding,
             zRose: ()=>zRose,
             columnParallelSpecPipeline: ()=>columnParallelSpecPipeline,
@@ -982,9 +982,6 @@
             });
             return result || [];
         };
-        function chunk_VCYTMP4D_n(e) {
-            return void 0 === e ? !0 : "string" == typeof e || Array.isArray(e) ? 0 === e.length : 0 === Object.keys(e).length;
-        }
         const createNumFormatter = (format, locale = intl.getLocale())=>{
             const { type = 'number', ratio = 1, symbol = '', thousandSeparator = true, prefix = '', suffix = '', fractionDigits = 2, significantDigits, roundingMode = 'halfExpand', roundingPriority = 'auto' } = format || {};
             const numFormatterOptions = {
@@ -1041,11 +1038,21 @@
             });
             return numFormatter.format(Number(value));
         };
-        const createFormatter = (format)=>createNumFormatter(format);
-        const autoFormatter = (value, locale)=>autoNumFormatter(value, locale);
+        const createFormatter = (format, locale)=>createNumFormatter(format, locale);
+        const autoFormatter = (value, locale = intl.getLocale())=>autoNumFormatter(value, locale);
+        function chunk_VCYTMP4D_n(e) {
+            return void 0 === e ? !0 : "string" == typeof e || Array.isArray(e) ? 0 === e.length : 0 === Object.keys(e).length;
+        }
+        const createFormatterByMeasure = (measure)=>{
+            if (!measure) return (v)=>String(v);
+            const { numFormat, format, autoFormat = true } = measure;
+            const formatterFormat = numFormat || format || {};
+            if (!chunk_VCYTMP4D_n(formatterFormat)) return createFormatter(formatterFormat);
+            if (autoFormat) return autoFormatter;
+            return (v)=>String(v);
+        };
         const measureTreeToColumns = (spec, context)=>{
             const { advancedVSeed } = context;
-            const { locale } = advancedVSeed;
             const measures = advancedVSeed.measures;
             const result = {
                 ...spec
@@ -1053,7 +1060,7 @@
             const eachNode = (node)=>{
                 if (isMeasure(node)) return {
                     width: 'auto',
-                    fieldFormat: fieldFormat(node, locale)
+                    fieldFormat: fieldFormat(node)
                 };
                 return {};
             };
@@ -1066,15 +1073,14 @@
                 ]
             };
         };
-        const fieldFormat = (node, locale)=>(datum)=>{
-                const { format = {}, autoFormat = true, id } = node;
+        const fieldFormat = (node)=>{
+            const formatter = createFormatterByMeasure(node);
+            return (datum)=>{
+                const { id } = node;
                 const value = datum[id];
-                if (!chunk_VCYTMP4D_n(format)) {
-                    const formatter = createFormatter(format);
-                    return formatter(value);
-                }
-                if (autoFormat) return autoFormatter(value, locale);
+                return formatter(value);
             };
+        };
         const measuresToColumns_treeTreeToColumns = (tree, callback)=>{
             const result = tree.map((item)=>{
                 if ('children' in item && Array.isArray(item.children)) {
@@ -1515,7 +1521,7 @@
         };
         const pivotIndicators = (spec, context)=>{
             const { advancedVSeed } = context;
-            const { locale, measures, datasetReshapeInfo } = advancedVSeed;
+            const { measures, datasetReshapeInfo } = advancedVSeed;
             const { foldInfo } = datasetReshapeInfo[0];
             return {
                 ...spec,
@@ -1528,25 +1534,20 @@
                         indicatorKey: foldInfo.measureValue,
                         title: 'indicator',
                         width: 'auto',
-                        format: pivotIndicators_fieldFormat(measures, foldInfo, locale)
+                        format: pivotIndicators_fieldFormat(measures, foldInfo)
                     }
                 ]
             };
         };
-        const pivotIndicators_fieldFormat = (measures, foldInfo, locale)=>(value, col, row, table)=>{
+        const pivotIndicators_fieldFormat = (measures, foldInfo)=>(value, col, row, table)=>{
                 if (!chunk_6GTAPB47_e(col) || !chunk_6GTAPB47_e(row) || !table) return value;
                 const datum = table.getCellOriginRecord(col, row);
                 if (!datum[0]) return value;
                 const { measureId: foldMeasureId } = foldInfo;
                 const measureId = datum[0][foldMeasureId];
-                const node = findMeasureById(measures, measureId);
-                if (!node) return value;
-                const { format = {}, autoFormat = true } = node;
-                if (!chunk_VCYTMP4D_n(format)) {
-                    const formatter = createFormatter(format);
-                    return formatter(value);
-                }
-                if (autoFormat) return autoFormatter(value, locale);
+                const measure = findMeasureById(measures, measureId);
+                const formatter = createFormatterByMeasure(measure);
+                return formatter(value);
             };
         const rowHeaderStyle = (spec, context)=>{
             const result = {
@@ -1776,6 +1777,14 @@
                 if (hasEncoding) return execPipeline(hasEncodingPipeline, context, advancedVSeed);
                 return execPipeline(noEncodingPipeline, context, advancedVSeed);
             };
+        const addColorToEncoding = (dimensions, encoding, isMultiMeasure)=>{
+            encoding.color = chunk_QJLMYOTX_i(dimensions.filter((item)=>'color' === item.encoding).map((item)=>item.id));
+            const measureName = dimensions.find((item)=>item.id === MeasureName);
+            if (isMultiMeasure && measureName && !measureName.encoding) encoding.color.push(MeasureName);
+            if (0 === encoding.color.length) encoding.color = [
+                MeasureName
+            ];
+        };
         const defaultEncodingForLine = (advancedVSeed)=>{
             const { measures: vseedMeasures = [], dimensions = [] } = advancedVSeed;
             const measures = findAllMeasures(vseedMeasures);
@@ -1793,7 +1802,7 @@
             const hasDimensionEncoding = dimensions.some((item)=>item.encoding);
             const hasMeasureEncoding = measures.some((item)=>item.encoding);
             const encoding = {};
-            if (hasDimensionEncoding) line_generateDimensionEncoding(dimensions, encoding);
+            if (hasDimensionEncoding) line_generateDimensionEncoding(dimensions, encoding, measures.length > 1);
             else line_generateDefaultDimensionEncoding(dimensions, encoding);
             if (hasMeasureEncoding) line_generateMeasureEncoding(measures, encoding);
             else line_generateDefaultMeasureEncoding(measures, encoding);
@@ -1812,15 +1821,12 @@
             encoding.row = [];
             encoding.column = [];
         };
-        const line_generateDimensionEncoding = (dimensions, encoding)=>{
+        const line_generateDimensionEncoding = (dimensions, encoding, isMultiMeasure)=>{
             encoding.x = chunk_QJLMYOTX_i(dimensions.filter((item)=>'xAxis' === item.encoding).map((item)=>item.id));
             if (0 === encoding.x.length) encoding.x = [
                 dimensions[0].id
             ];
-            encoding.color = chunk_QJLMYOTX_i(dimensions.filter((item)=>'color' === item.encoding).map((item)=>item.id));
-            if (0 === encoding.color.length) encoding.color = [
-                MeasureName
-            ];
+            addColorToEncoding(dimensions, encoding, isMultiMeasure);
             encoding.detail = chunk_QJLMYOTX_i(dimensions.filter((item)=>'detail' === item.encoding).map((item)=>item.id));
             if (0 === encoding.detail.length) encoding.detail = [
                 MeasureName
@@ -2682,7 +2688,8 @@
                 ];
                 return result;
             }
-            const { visible = true, label, tick, title, grid, line, zero, nice, inverse, max, min, log, logBase = 10 } = config;
+            const { visible = true, label, tick, title, grid, line, zero, nice, inverse, max, min, log, logBase = 10, autoFormat = true, numFormat = {} } = config;
+            const formatter = createNumFormatter(numFormat);
             const linearAxis = {
                 visible,
                 type: log ? 'log' : 'linear',
@@ -2695,7 +2702,11 @@
                 min,
                 label: {
                     visible: label?.visible,
-                    formatMethod: (value)=>autoFormatter(value, locale),
+                    formatMethod: (value)=>{
+                        if (!chunk_VCYTMP4D_n(numFormat)) return formatter(value);
+                        if (autoFormat) return autoFormatter(value, locale);
+                        return value;
+                    },
                     style: {
                         fill: label?.labelColor,
                         angle: label?.labelAngle,
@@ -2798,7 +2809,7 @@
             const baseConfig = advancedVSeed.config[chartType];
             if (!baseConfig || !baseConfig.legend) return result;
             const { legend } = baseConfig;
-            const { enable, position = 'bottom', labelFontColor, labelFontSize = 12, labelFontWeight, maxSize = 1, border, shapeType = 'rectRound' } = legend || {};
+            const { enable, position = 'bottom', labelFontColor, labelColor, labelFontSize = 12, labelFontWeight, maxSize = 1, border, shapeType = 'rectRound' } = legend || {};
             const orient = [
                 'bottom',
                 'bottomLeft',
@@ -2858,7 +2869,7 @@
                     maxWidth: '30%',
                     focusIconStyle: {
                         size: labelFontSize + 2,
-                        fill: labelFontColor,
+                        fill: labelColor || labelFontColor,
                         fontWeight: labelFontWeight
                     },
                     shape: {
@@ -2872,14 +2883,14 @@
                         formatMethod: (value)=>unfoldInfo.colorIdMap[String(value)] ?? value,
                         style: {
                             fontSize: labelFontSize,
-                            fill: labelFontColor,
+                            fill: labelColor || labelFontColor,
                             fontWeight: labelFontWeight
                         }
                     },
                     background: {
                         state: {
                             selectedHover: {
-                                fill: labelFontColor,
+                                fill: labelColor || labelFontColor,
                                 fillOpacity: 0.05
                             }
                         }
@@ -2899,7 +2910,7 @@
             const baseConfig = advancedVSeed.config[chartType];
             if (!baseConfig || !baseConfig.legend) return result;
             const { legend } = baseConfig;
-            const { enable, position = 'bottom', labelFontColor, labelFontSize = 12, labelFontWeight } = legend || {};
+            const { enable, position = 'bottom', labelFontColor, labelColor, labelFontSize = 12, labelFontWeight } = legend || {};
             const orient = [
                 'bottom',
                 'bottomLeft',
@@ -2949,7 +2960,7 @@
                 startText: {
                     visible: true,
                     style: {
-                        fill: labelFontColor,
+                        fill: labelColor || labelFontColor,
                         fontSize: labelFontSize,
                         fontWeight: labelFontWeight
                     }
@@ -2957,7 +2968,7 @@
                 endText: {
                     visible: true,
                     style: {
-                        fill: labelFontColor,
+                        fill: labelColor || labelFontColor,
                         fontSize: labelFontSize,
                         fontWeight: labelFontWeight
                     }
@@ -3273,61 +3284,83 @@
                 ...spec
             };
             const { advancedVSeed, vseed } = context;
-            const { measures, datasetReshapeInfo } = advancedVSeed;
+            const { datasetReshapeInfo } = advancedVSeed;
             const { chartType, encoding } = advancedVSeed;
             const baseConfig = advancedVSeed.config[chartType];
-            if (!baseConfig || !baseConfig.label) return result;
-            const { measureId, measureValue, statistics } = datasetReshapeInfo[0].foldInfo;
+            const foldInfo = datasetReshapeInfo[0].foldInfo;
+            if (!baseConfig || chunk_VCYTMP4D_n(baseConfig.label)) return result;
             const { label } = baseConfig;
-            const { enable, wrap, showValue, showValuePercent } = label;
-            const labelDims = T((vseed.dimensions || []).filter((item)=>encoding.label?.includes(item.id)), (item)=>item.id);
-            const labelMeas = T((vseed.measures || []).filter((item)=>encoding.label?.includes(item.id)), (item)=>item.id);
-            const format = {
-                type: 'percent'
+            result.label = buildLabel(label, vseed.measures, vseed.dimensions, advancedVSeed.measures, encoding, [
+                foldInfo
+            ]);
+            return result;
+        };
+        const generateMeasureValue = (value, measure, labelAutoFormat = true, numFormat = {})=>{
+            if (!measure) return value;
+            const format = chunk_5S4PYKVY_t(numFormat, measure.numFormat || measure.format);
+            const mergedMeasure = {
+                ...measure,
+                numFormat: format,
+                autoFormat: labelAutoFormat || measure.autoFormat
             };
-            const formatter = createFormatter(format);
-            result.label = {
+            const formatter = createFormatterByMeasure(mergedMeasure);
+            return formatter(value);
+        };
+        const generateMeasurePercent = (value, sum, formatter)=>{
+            if (null == value) return String(value);
+            const num = Number(value);
+            if (Number.isNaN(num)) return String(value);
+            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 = true, 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 percentFormat = chunk_5S4PYKVY_t(numFormat, {
+                type: 'percent'
+            });
+            const percentFormatter = createFormatter(percentFormat);
+            const result = {
                 visible: enable,
                 formatMethod: (_, datum)=>{
                     const result = [];
-                    const measure = findMeasureById(measures, datum[measureId]);
                     const dimLabels = labelDims.map((item)=>item.alias || item.id);
-                    const meaLabels = labelMeas.map((item)=>generateMeasureValue(datum[item.id], item));
-                    const measureValueLabel = generateMeasureValue(datum[measureValue], measure);
-                    const measurePercentLabel = generateMeasurePercent(datum[measureValue], statistics.sum, formatter);
+                    const meaLabels = labelMeas.map((item)=>generateMeasureValue(datum[item.id], item, autoFormat, numFormat));
                     result.push(...dimLabels);
-                    if (showValue) result.push(measureValueLabel);
-                    if (showValuePercent) result.push(measurePercentLabel);
+                    foldInfoList.forEach((foldInfo)=>{
+                        const { measureId, measureValue, statistics } = foldInfo;
+                        const measure = findMeasureById(advancedVSeedMeasures, datum[measureId]);
+                        const measureValueLabel = generateMeasureValue(datum[measureValue], measure, autoFormat, numFormat);
+                        const measurePercentLabel = generateMeasurePercent(datum[measureValue], statistics.sum, percentFormatter);
+                        if (showValue) result.push(measureValueLabel);
+                        if (showValuePercent) result.push(measurePercentLabel);
+                    });
                     result.push(...meaLabels);
                     if (wrap) return result;
                     return result.join(' ');
-                }
+                },
+                position: labelPosition,
+                style: {
+                    fill: labelColor,
+                    fontSize: labelFontSize,
+                    fontWeight: labelFontWeight,
+                    background: labelBackgroundColor
+                },
+                smartInvert: labelColorSmartInvert
+            };
+            if (labelOverlap) result.overlap = {
+                hideOnHit: true,
+                clampForce: true
             };
             return result;
         };
-        const generateMeasureValue = (value, measure)=>{
-            if (!measure) return value;
-            const { format = {}, autoFormat = true } = measure;
-            if (!chunk_VCYTMP4D_n(format)) {
-                const formatter = createFormatter(format);
-                return formatter(value);
-            }
-            if (autoFormat) return autoFormatter(value, intl.getLocale());
-            return String(value);
-        };
-        const generateMeasurePercent = (value, sum, formatter)=>{
-            if (null == value) return String(value);
-            const num = Number(value);
-            if (Number.isNaN(num)) return String(value);
-            const percentValue = num / sum;
-            return formatter(percentValue);
-        };
         const tooltip_tooltip = (spec, context)=>{
             const result = {
                 ...spec
             };
             const { advancedVSeed, vseed } = context;
-            const { measures, datasetReshapeInfo, chartType, locale, dimensions, encoding } = advancedVSeed;
+            const { measures, datasetReshapeInfo, chartType, dimensions, encoding } = advancedVSeed;
             const baseConfig = advancedVSeed.config[chartType];
             const { tooltip = {
                 enable: true
@@ -3340,18 +3373,18 @@
                     title: {
                         visible: false
                     },
-                    content: createMarkContent(encoding.tooltip || [], dimensions, findAllMeasures(vseed.measures), locale, foldInfo, unfoldInfo)
+                    content: createMarkContent(encoding.tooltip || [], dimensions, findAllMeasures(vseed.measures), foldInfo, unfoldInfo)
                 },
                 dimension: {
                     title: {
                         visible: true
                     },
-                    content: createDimensionContent(measures, foldInfo, unfoldInfo, locale)
+                    content: createDimensionContent(measures, foldInfo, unfoldInfo)
                 }
             };
             return result;
         };
-        const createDimensionContent = (measures, foldInfo, unfoldInfo, locale)=>{
+        const createDimensionContent = (measures, foldInfo, unfoldInfo)=>{
             const { measureId, measureValue } = foldInfo;
             const { encodingColor } = unfoldInfo;
             return [
@@ -3369,19 +3402,13 @@
                         const value = datum[measureValue];
                         const id = datum[measureId];
                         const measure = findMeasureById(measures, id);
-                        if (!measure) return String(value);
-                        const { format = {}, autoFormat = true } = measure;
-                        if (!chunk_VCYTMP4D_n(format)) {
-                            const formatter = createFormatter(format);
-                            return formatter(value);
-                        }
-                        if (autoFormat) return autoFormatter(value, locale);
-                        return String(value);
+                        const formatter = createFormatterByMeasure(measure);
+                        return formatter(value);
                     }
                 }
             ];
         };
-        const createMarkContent = (tooltip, dimensions, measures, locale, foldInfo, unfoldInfo)=>{
+        const createMarkContent = (tooltip, dimensions, measures, foldInfo, unfoldInfo)=>{
             const dims = C(dimensions.filter((item)=>tooltip.includes(item.id)), T((item)=>item.id), T((item)=>item.alias));
             const meas = C(measures.filter((item)=>tooltip.includes(item.id)), T((item)=>item.id), T((item)=>item.alias));
             const dimContent = dims.map((item)=>({
@@ -3411,14 +3438,8 @@
                         const originalData = datum[ORIGINAL_DATA];
                         const value = originalData[id];
                         const measure = findMeasureById(measures, id);
-                        if (!measure) return String(value);
-                        const { format = {}, autoFormat = true } = measure;
-                        if (!chunk_VCYTMP4D_n(format)) {
-                            const formatter = createFormatter(format);
-                            return formatter(value);
-                        }
-                        if (autoFormat) return autoFormatter(value, locale);
-                        return String(value);
+                        const formatter = createFormatterByMeasure(measure);
+                        return formatter(value);
                     }
                 }));
             const defaultContent = {
@@ -3439,13 +3460,8 @@
                     const id = datum[measureId];
                     const measure = findMeasureById(measures, id);
                     if (!measure) return String(value);
-                    const { format = {}, autoFormat = true } = measure;
-                    if (!chunk_VCYTMP4D_n(format)) {
-                        const formatter = createFormatter(format);
-                        return formatter(value);
-                    }
-                    if (autoFormat) return autoFormatter(value, locale);
-                    return String(value);
+                    const formatter = createFormatterByMeasure(measure);
+                    return formatter(value);
                 }
             };
             return [
@@ -4117,7 +4133,7 @@
             const { legend, color } = baseConfig;
             const { colorScheme, colorMapping } = color;
             const colorSpecified = createSpecifiedForColorMapping(colorMapping, colorIdMap, colorItems);
-            const { enable, position = 'bottom', labelFontColor, labelFontSize = 12, labelFontWeight = 400, maxSize = 1, border, shapeType = 'rectRound' } = legend || {};
+            const { enable, position = 'bottom', labelFontColor, labelColor, labelFontSize = 12, labelFontWeight = 400, maxSize = 1, border, shapeType = 'rectRound' } = legend || {};
             const orient = [
                 'bottom',
                 'bottomLeft',
@@ -4182,7 +4198,7 @@
                     maxWidth: '30%',
                     focusIconStyle: {
                         size: labelFontSize + 2,
-                        fill: labelFontColor,
+                        fill: labelColor || labelFontColor,
                         fontWeight: labelFontWeight
                     },
                     shape: {
@@ -4196,14 +4212,14 @@
                         formatMethod: (value)=>colorIdMap[value] ?? value,
                         style: {
                             fontSize: labelFontSize,
-                            fill: labelFontColor,
+                            fill: labelColor || labelFontColor,
                             fontWeight: labelFontWeight
                         }
                     },
                     background: {
                         state: {
                             selectedHover: {
-                                fill: labelFontColor,
+                                fill: labelColor || labelFontColor,
                                 fillOpacity: 0.05
                             }
                         }
@@ -4228,7 +4244,7 @@
             const min = Math.min(...datasetReshapeInfo.map((d)=>d.foldInfo.statistics.colorMax));
             const { legend, color } = baseConfig;
             const { colorScheme, linearColorScheme } = color;
-            const { enable, position = 'bottom', labelFontColor, labelFontSize = 12, labelFontWeight = 400 } = legend || {};
+            const { enable, position = 'bottom', labelFontColor, labelColor, labelFontSize = 12, labelFontWeight = 400 } = legend || {};
             const orient = [
                 'bottom',
                 'bottomLeft',
@@ -4283,7 +4299,7 @@
                 startText: {
                     visible: true,
                     style: {
-                        fill: labelFontColor,
+                        fill: labelColor || labelFontColor,
                         fontSize: labelFontSize,
                         fontWeight: labelFontWeight
                     }
@@ -4291,7 +4307,7 @@
                 endText: {
                     visible: true,
                     style: {
-                        fill: labelFontColor,
+                        fill: labelColor || labelFontColor,
                         fontSize: labelFontSize,
                         fontWeight: labelFontWeight
                     }
@@ -4380,7 +4396,7 @@
             const hasDimensionEncoding = dimensions.some((item)=>item.encoding);
             const hasMeasureEncoding = measures.some((item)=>item.encoding);
             const encoding = {};
-            if (hasDimensionEncoding) column_generateDimensionEncoding(dimensions, encoding);
+            if (hasDimensionEncoding) column_generateDimensionEncoding(dimensions, encoding, measures.length > 1);
             else column_generateDefaultDimensionEncoding(dimensions, encoding);
             if (hasMeasureEncoding) column_generateMeasureEncoding(measures, encoding);
             else column_generateDefaultMeasureEncoding(measures, encoding);
@@ -4400,15 +4416,12 @@
             encoding.row = [];
             encoding.column = [];
         };
-        const column_generateDimensionEncoding = (dimensions, encoding)=>{
+        const column_generateDimensionEncoding = (dimensions, encoding, isMultiMeasure)=>{
             encoding.x = chunk_QJLMYOTX_i(dimensions.filter((item)=>'xAxis' === item.encoding).map((item)=>item.id));
             if (0 === encoding.x.length) encoding.x = [
                 dimensions[0].id
             ];
-            encoding.color = chunk_QJLMYOTX_i(dimensions.filter((item)=>'color' === item.encoding).map((item)=>item.id));
-            if (0 === encoding.color.length) encoding.color = [
-                MeasureName
-            ];
+            addColorToEncoding(dimensions, encoding, isMultiMeasure);
             encoding.detail = chunk_QJLMYOTX_i(dimensions.filter((item)=>'detail' === item.encoding).map((item)=>item.id));
             if (0 === encoding.detail.length) encoding.detail = encoding.color;
             encoding.tooltip = chunk_QJLMYOTX_i(dimensions.map((item)=>item.id));
@@ -5019,7 +5032,7 @@
             const hasDimensionEncoding = dimensions.some((item)=>item.encoding);
             const hasMeasureEncoding = measures.some((item)=>item.encoding);
             const encoding = {};
-            if (hasDimensionEncoding) bar_generateDimensionEncoding(dimensions, encoding);
+            if (hasDimensionEncoding) bar_generateDimensionEncoding(dimensions, encoding, measures.length > 1);
             else bar_generateDefaultDimensionEncoding(dimensions, encoding);
             if (hasMeasureEncoding) bar_generateMeasureEncoding(measures, encoding);
             else bar_generateDefaultMeasureEncoding(measures, encoding);
@@ -5039,15 +5052,12 @@
             encoding.row = [];
             encoding.column = [];
         };
-        const bar_generateDimensionEncoding = (dimensions, encoding)=>{
+        const bar_generateDimensionEncoding = (dimensions, encoding, isMultiMeasure)=>{
             encoding.y = chunk_QJLMYOTX_i(dimensions.filter((item)=>'yAxis' === item.encoding).map((item)=>item.id));
             if (0 === encoding.y.length) encoding.y = [
                 dimensions[0].id
             ];
-            encoding.color = chunk_QJLMYOTX_i(dimensions.filter((item)=>'color' === item.encoding).map((item)=>item.id));
-            if (0 === encoding.color.length) encoding.color = [
-                MeasureName
-            ];
+            addColorToEncoding(dimensions, encoding, isMultiMeasure);
             encoding.detail = chunk_QJLMYOTX_i(dimensions.filter((item)=>'detail' === item.encoding).map((item)=>item.id));
             if (0 === encoding.detail.length) encoding.detail = encoding.color;
             encoding.tooltip = chunk_QJLMYOTX_i(dimensions.map((item)=>item.id));
@@ -5201,7 +5211,8 @@
                 ];
                 return result;
             }
-            const { visible = true, label, tick, title, grid, line, zero, nice, inverse, max, min, log, logBase = 10 } = config;
+            const { visible = true, label, tick, title, grid, line, zero, nice, inverse, max, min, log, logBase = 10, autoFormat = true, numFormat = {} } = config;
+            const formatter = createNumFormatter(numFormat, locale);
             const linearAxis = {
                 visible,
                 type: log ? 'log' : 'linear',
@@ -5214,7 +5225,11 @@
                 min,
                 label: {
                     visible: label?.visible,
-                    formatMethod: (value)=>autoFormatter(value, locale),
+                    formatMethod: (value)=>{
+                        if (!chunk_VCYTMP4D_n(numFormat)) return formatter(value);
+                        if (autoFormat) return autoFormatter(value, locale);
+                        return value;
+                    },
                     style: {
                         fill: label?.labelColor,
                         angle: label?.labelAngle,
@@ -5928,10 +5943,7 @@
             encoding.column = [];
         };
         const scatter_generateDimensionEncoding = (dimensions, encoding)=>{
-            encoding.color = chunk_QJLMYOTX_i(dimensions.filter((item)=>'color' === item.encoding).map((item)=>item.id));
-            if (0 === encoding.color.length) encoding.color = [
-                MeasureName
-            ];
+            addColorToEncoding(dimensions, encoding, false);
             encoding.detail = chunk_QJLMYOTX_i(dimensions.filter((item)=>'detail' === item.encoding).map((item)=>item.id));
             if (0 === encoding.detail.length) encoding.detail = [
                 MeasureName
@@ -6248,6 +6260,20 @@
                 }
             };
         };
+        const labelScatter = (spec, context)=>{
+            const result = {
+                ...spec
+            };
+            const { advancedVSeed, vseed } = context;
+            const { datasetReshapeInfo } = advancedVSeed;
+            const { chartType, encoding } = advancedVSeed;
+            const baseConfig = advancedVSeed.config[chartType];
+            if (!baseConfig || chunk_VCYTMP4D_n(baseConfig.label)) return result;
+            const foldInfoList = datasetReshapeInfo[0].foldInfoList;
+            const { label } = baseConfig;
+            result.label = buildLabel(label, vseed.measures, vseed.dimensions, advancedVSeed.measures, encoding, foldInfoList);
+            return result;
+        };
         const tooltipScatter = (spec, context)=>{
             const result = {
                 ...spec
@@ -6304,14 +6330,8 @@
                         const originalData = datum[ORIGINAL_DATA];
                         const value = originalData[id];
                         const measure = findMeasureById(measures, id);
-                        if (!measure) return String(value);
-                        const { format = {}, autoFormat = true } = measure;
-                        if (!chunk_VCYTMP4D_n(format)) {
-                            const formatter = createFormatter(format);
-                            return formatter(value);
-                        }
-                        if (autoFormat) return autoFormatter(value, locale);
-                        return String(value);
+                        const formatter = createFormatterByMeasure(measure);
+                        return formatter(value);
                     }
                 }));
             const foldMeaContent = foldInfoList.map((foldInfo)=>({
@@ -6331,14 +6351,8 @@
                         const value = datum[measureValue];
                         const id = datum[measureId];
                         const measure = findMeasureById(measures, id);
-                        if (!measure) return String(value);
-                        const { format = {}, autoFormat = true } = measure;
-                        if (!chunk_VCYTMP4D_n(format)) {
-                            const formatter = createFormatter(format);
-                            return formatter(value);
-                        }
-                        if (autoFormat) return autoFormatter(value, locale);
-                        return String(value);
+                        const formatter = createFormatterByMeasure(measure);
+                        return formatter(value);
                     }
                 }));
             return [
@@ -6399,7 +6413,7 @@
             progressive,
             xLinear,
             yLinear,
-            label_label,
+            labelScatter,
             tooltipScatter,
             colorAdapter(discreteLegend, colorLegend),
             verticalCrosshairLine,
@@ -6424,7 +6438,7 @@
                 progressive,
                 xLinear,
                 yLinear,
-                label_label,
+                labelScatter,
                 tooltipScatter,
                 verticalCrosshairLine,
                 horizontalCrosshairLine,
@@ -6463,7 +6477,7 @@
             const hasDimensionEncoding = dimensions.some((item)=>item.encoding);
             const hasMeasureEncoding = measures.some((item)=>item.encoding);
             const encoding = {};
-            if (hasDimensionEncoding) dualAxis_generateDimensionEncoding(dimensions, encoding);
+            if (hasDimensionEncoding) dualAxis_generateDimensionEncoding(dimensions, encoding, measures.length > 1);
             else dualAxis_generateDefaultDimensionEncoding(dimensions, encoding);
             if (hasMeasureEncoding) dualAxis_generateMeasureEncoding(measures, encoding);
             else dualAxis_generateDefaultMeasureEncoding(measures, encoding);
@@ -6483,15 +6497,12 @@
             encoding.row = [];
             encoding.column = [];
         };
-        const dualAxis_generateDimensionEncoding = (dimensions, encoding)=>{
+        const dualAxis_generateDimensionEncoding = (dimensions, encoding, isMultiMeasure)=>{
             encoding.x = chunk_QJLMYOTX_i(dimensions.filter((item)=>'xAxis' === item.encoding).map((item)=>item.id));
             if (0 === encoding.x.length) encoding.x = [
                 dimensions[0].id
             ];
-            encoding.color = chunk_QJLMYOTX_i(dimensions.filter((item)=>'color' === item.encoding).map((item)=>item.id));
-            if (0 === encoding.color.length) encoding.color = [
-                MeasureName
-            ];
+            addColorToEncoding(dimensions, encoding, isMultiMeasure);
             encoding.detail = chunk_QJLMYOTX_i(dimensions.filter((item)=>'detail' === item.encoding).map((item)=>item.id));
             if (0 === encoding.detail.length) encoding.detail = encoding.color;
             encoding.tooltip = chunk_QJLMYOTX_i(dimensions.map((item)=>item.id));
@@ -6813,6 +6824,7 @@
             const result = {
                 type: 'common',
                 padding: 0,
+                labelLayout: 'region',
                 region: [
                     {
                         clip: true
@@ -7068,71 +7080,33 @@
             const result = {
                 ...spec
             };
-            const { advancedVSeed } = context;
-            const { measures, datasetReshapeInfo, locale } = advancedVSeed;
+            const { advancedVSeed, vseed } = context;
+            const { datasetReshapeInfo, encoding } = advancedVSeed;
             const { chartType } = advancedVSeed;
             const baseConfig = advancedVSeed.config[chartType];
             if (!baseConfig || !baseConfig.label) return result;
             const foldInfoList = datasetReshapeInfo[0].foldInfoList;
-            const { measureId, measureValue } = foldInfoList[0];
-            const { label } = baseConfig;
-            const { enable } = label;
-            result.label = {
-                visible: enable,
-                formatMethod: (value, datum)=>{
-                    const result = [];
-                    const formatValue = (value)=>{
-                        const id = datum[measureId];
-                        const measure = findMeasureById(measures, id);
-                        if (!measure) return value;
-                        const { format = {}, autoFormat = true } = measure;
-                        if (!chunk_VCYTMP4D_n(format)) {
-                            const formatter = createFormatter(format);
-                            return formatter(value);
-                        }
-                        if (autoFormat) return autoFormatter(value, locale);
-                        return String(value);
-                    };
-                    result.push(formatValue(datum[measureValue]));
-                    return result.join(' ');
-                }
-            };
+            result.label = buildLabel(baseConfig.label, vseed.measures, vseed.dimensions, advancedVSeed.measures, encoding, [
+                foldInfoList[0]
+            ]);
+            result.label.zIndex = 1002;
             return result;
         };
         const labelSecondary = (spec, context)=>{
             const result = {
                 ...spec
             };
-            const { advancedVSeed } = context;
-            const { measures, datasetReshapeInfo, locale } = advancedVSeed;
+            const { advancedVSeed, vseed } = context;
+            const { datasetReshapeInfo, encoding } = advancedVSeed;
             const { chartType } = advancedVSeed;
             const baseConfig = advancedVSeed.config[chartType];
             if (!baseConfig || !baseConfig.label) return result;
             if (chunk_JK3VNB42_n(datasetReshapeInfo[0].foldInfoList?.[1])) return result;
             const foldInfoList = datasetReshapeInfo[0].foldInfoList;
-            const { measureId, measureValue } = foldInfoList[1];
-            const { label } = baseConfig;
-            const { enable } = label;
-            result.label = {
-                visible: enable,
-                formatMethod: (value, datum)=>{
-                    const result = [];
-                    const formatValue = (value)=>{
-                        const id = datum[measureId];
-                        const measure = findMeasureById(measures, id);
-                        if (!measure) return value;
-                        const { format = {}, autoFormat = true } = measure;
-                        if (!chunk_VCYTMP4D_n(format)) {
-                            const formatter = createFormatter(format);
-                            return formatter(value);
-                        }
-                        if (autoFormat) return autoFormatter(value, locale);
-                        return String(value);
-                    };
-                    result.push(formatValue(datum[measureValue]));
-                    return result.join(' ');
-                }
-            };
+            result.label = buildLabel(baseConfig.label, vseed.measures, vseed.dimensions, advancedVSeed.measures, encoding, [
+                foldInfoList[1]
+            ]);
+            result.label.zIndex = 1002;
             return result;
         };
         const tooltipPrimary = (spec, context)=>{
@@ -7140,7 +7114,7 @@
                 ...spec
             };
             const { advancedVSeed, vseed } = context;
-            const { measures, datasetReshapeInfo, chartType, locale, dimensions, encoding } = advancedVSeed;
+            const { measures, datasetReshapeInfo, chartType, dimensions, encoding } = advancedVSeed;
             const baseConfig = advancedVSeed.config[chartType];
             const { tooltip = {
                 enable: true
@@ -7154,13 +7128,13 @@
                     title: {
                         visible: false
                     },
-                    content: createMarkContent(encoding.tooltip || [], dimensions, findAllMeasures(vseed.measures), locale, foldInfoList[0], unfoldInfo)
+                    content: createMarkContent(encoding.tooltip || [], dimensions, findAllMeasures(vseed.measures), foldInfoList[0], unfoldInfo)
                 },
                 dimension: {
                     title: {
                         visible: true
                     },
-                    content: createDimensionContent(measures, foldInfoList[0], unfoldInfo, locale)
+                    content: createDimensionContent(measures, foldInfoList[0], unfoldInfo)
                 }
             };
             return result;
@@ -7170,7 +7144,7 @@
                 ...spec
             };
             const { advancedVSeed, vseed } = context;
-            const { measures, datasetReshapeInfo, chartType, locale, dimensions, encoding } = advancedVSeed;
+            const { measures, datasetReshapeInfo, chartType, dimensions, encoding } = advancedVSeed;
             const baseConfig = advancedVSeed.config[chartType];
             const { tooltip = {
                 enable: true
@@ -7185,13 +7159,13 @@
                     title: {
                         visible: false
                     },
-                    content: createMarkContent(encoding.tooltip || [], dimensions, findAllMeasures(vseed.measures), locale, foldInfoList[1], unfoldInfo)
+                    content: createMarkContent(encoding.tooltip || [], dimensions, findAllMeasures(vseed.measures), foldInfoList[1], unfoldInfo)
                 },
                 dimension: {
                     title: {
                         visible: true
                     },
-                    content: createDimensionContent(measures, foldInfoList[1], unfoldInfo, locale)
+                    content: createDimensionContent(measures, foldInfoList[1], unfoldInfo)
                 }
             };
             return result;
@@ -7230,7 +7204,8 @@
                 ];
                 return result;
             }
-            const { visible = true, label, tick, title, grid, line, zero, nice, inverse, max, min, log, logBase = 10 } = yAxisConfig;
+            const { visible = true, label, tick, title, grid, line, zero, nice, inverse, max, min, log, logBase = 10, autoFormat = true, numFormat = {} } = yAxisConfig;
+            const formatter = createNumFormatter(numFormat, locale);
             const linearAxis = {
                 visible: isEmptySecondary ? false : visible,
                 id,
@@ -7245,7 +7220,11 @@
                 min,
                 label: {
                     visible: label?.visible,
-                    formatMethod: (value)=>autoFormatter(value, locale),
+                    formatMethod: (value)=>{
+                        if (!chunk_VCYTMP4D_n(numFormat)) return formatter(value);
+                        if (autoFormat) return autoFormatter(value, locale);
+                        return value;
+                    },
                     style: {
                         fill: label?.labelColor,
                         angle: label?.labelAngle,
@@ -7334,7 +7313,8 @@
                 ];
                 return result;
             }
-            const { visible = true, label, tick, title, grid, line, zero, nice, inverse, max, min, log, logBase = 10 } = yAxisConfig;
+            const { visible = true, label, tick, title, grid, line, zero, nice, inverse, max, min, log, logBase = 10, numFormat = {}, autoFormat = true } = yAxisConfig;
+            const formatter = createNumFormatter(numFormat, locale);
             const linearAxis = {
                 visible: isEmptySecondary ? false : visible,
                 id,
@@ -7350,7 +7330,11 @@
                 min,
                 label: {
                     visible: label?.visible,
-                    formatMethod: (value)=>autoFormatter(value, locale),
+                    formatMethod: (value)=>{
+                        if (!chunk_VCYTMP4D_n(numFormat)) return formatter(value);
+                        if (autoFormat) return autoFormatter(value, locale);
+                        return value;
+                    },
                     style: {
                         fill: label?.labelColor,
                         angle: label?.labelAngle,
@@ -7538,7 +7522,7 @@
             const hasDimensionEncoding = dimensions.some((item)=>item.encoding);
             const hasMeasureEncoding = measures.some((item)=>item.encoding);
             const encoding = {};
-            if (hasDimensionEncoding) pie_generateDimensionEncoding(dimensions, encoding);
+            if (hasDimensionEncoding) pie_generateDimensionEncoding(dimensions, encoding, measures.length > 1);
             else pie_generateDefaultDimensionEncoding(dimensions, encoding);
             if (hasMeasureEncoding) pie_generateMeasureEncoding(measures, encoding);
             else pie_generateDefaultMeasureEncoding(measures, encoding);
@@ -7556,11 +7540,8 @@
             encoding.row = [];
             encoding.column = [];
         };
-        const pie_generateDimensionEncoding = (dimensions, encoding)=>{
-            encoding.color = chunk_QJLMYOTX_i(dimensions.filter((item)=>'color' === item.encoding).map((item)=>item.id));
-            if (0 === encoding.color.length) encoding.color = [
-                MeasureName
-            ];
+        const pie_generateDimensionEncoding = (dimensions, encoding, isMultiMeasure)=>{
+            addColorToEncoding(dimensions, encoding, isMultiMeasure);
             encoding.detail = chunk_QJLMYOTX_i(dimensions.filter((item)=>'detail' === item.encoding).map((item)=>item.id));
             if (0 === encoding.detail.length) encoding.detail = [
                 MeasureName
@@ -7822,7 +7803,7 @@
             const hasDimensionEncoding = dimensions.some((item)=>item.encoding);
             const hasMeasureEncoding = measures.some((item)=>item.encoding);
             const encoding = {};
-            if (hasDimensionEncoding) rose_generateDimensionEncoding(dimensions, encoding);
+            if (hasDimensionEncoding) rose_generateDimensionEncoding(dimensions, encoding, measures.length > 1);
             else rose_generateDefaultDimensionEncoding(dimensions, encoding);
             if (hasMeasureEncoding) rose_generateMeasureEncoding(measures, encoding);
             else rose_generateDefaultMeasureEncoding(measures, encoding);
@@ -7842,15 +7823,12 @@
             encoding.row = [];
             encoding.column = [];
         };
-        const rose_generateDimensionEncoding = (dimensions, encoding)=>{
+        const rose_generateDimensionEncoding = (dimensions, encoding, isMultiMeasure)=>{
             encoding.angle = chunk_QJLMYOTX_i(dimensions.filter((item)=>'angle' === item.encoding).map((item)=>item.id));
             if (0 === encoding.angle.length) encoding.angle = [
                 dimensions[0].id
             ];
-            encoding.color = chunk_QJLMYOTX_i(dimensions.filter((item)=>'color' === item.encoding).map((item)=>item.id));
-            if (0 === encoding.color.length) encoding.color = [
-                MeasureName
-            ];
+            addColorToEncoding(dimensions, encoding, isMultiMeasure);
             encoding.detail = chunk_QJLMYOTX_i(dimensions.filter((item)=>'detail' === item.encoding).map((item)=>item.id));
             if (0 === encoding.detail.length) encoding.detail = encoding.color;
             encoding.tooltip = chunk_QJLMYOTX_i(dimensions.map((item)=>item.id));
@@ -7937,6 +7915,7 @@
             const showAxis = !(is0D || is1M1D);
             if (!result.axes) result.axes = [];
             result.axes.push({
+                type: 'band',
                 orient: 'angle',
                 visible: showAxis,
                 zero: true,
@@ -7979,6 +7958,7 @@
             const showAxis = !(is0D || is1M1D);
             if (!result.axes) result.axes = [];
             result.axes.push({
+                type: 'linear',
                 orient: 'radius',
                 visible: showAxis,
                 zero: true,
@@ -8220,7 +8200,7 @@
             const hasDimensionEncoding = dimensions.some((item)=>item.encoding);
             const hasMeasureEncoding = measures.some((item)=>item.encoding);
             const encoding = {};
-            if (hasDimensionEncoding) radar_generateDimensionEncoding(dimensions, encoding);
+            if (hasDimensionEncoding) radar_generateDimensionEncoding(dimensions, encoding, measures.length > 1);
             else radar_generateDefaultDimensionEncoding(dimensions, encoding);
             if (hasMeasureEncoding) radar_generateMeasureEncoding(measures, encoding);
             else radar_generateDefaultMeasureEncoding(measures, encoding);
@@ -8239,15 +8219,12 @@
             encoding.row = [];
             encoding.column = [];
         };
-        const radar_generateDimensionEncoding = (dimensions, encoding)=>{
+        const radar_generateDimensionEncoding = (dimensions, encoding, isMultiMeasure)=>{
             encoding.angle = chunk_QJLMYOTX_i(dimensions.filter((item)=>'angle' === item.encoding).map((item)=>item.id));
             if (0 === encoding.angle.length) encoding.angle = [
                 dimensions[0].id
             ];
-            encoding.color = chunk_QJLMYOTX_i(dimensions.filter((item)=>'color' === item.encoding).map((item)=>item.id));
-            if (0 === encoding.color.length) encoding.color = [
-                MeasureName
-            ];
+            addColorToEncoding(dimensions, encoding, isMultiMeasure);
             encoding.detail = [];
             if (0 === encoding.detail.length) encoding.detail = [
                 MeasureName
@@ -8440,7 +8417,7 @@
             const hasDimensionEncoding = dimensions.some((item)=>item.encoding);
             const hasMeasureEncoding = measures.some((item)=>item.encoding);
             const encoding = {};
-            if (hasDimensionEncoding) funnel_generateDimensionEncoding(dimensions, encoding);
+            if (hasDimensionEncoding) funnel_generateDimensionEncoding(dimensions, encoding, measures.length > 1);
             else funnel_generateDefaultDimensionEncoding(dimensions, encoding);
             if (hasMeasureEncoding) funnel_generateMeasureEncoding(measures, encoding);
             else funnel_generateDefaultMeasureEncoding(measures, encoding);
@@ -8458,11 +8435,8 @@
             encoding.row = [];
             encoding.column = [];
         };
-        const funnel_generateDimensionEncoding = (dimensions, encoding)=>{
-            encoding.color = chunk_QJLMYOTX_i(dimensions.filter((item)=>'color' === item.encoding).map((item)=>item.id));
-            if (0 === encoding.color.length) encoding.color = [
-                MeasureName
-            ];
+        const funnel_generateDimensionEncoding = (dimensions, encoding, isMultiMeasure)=>{
+            addColorToEncoding(dimensions, encoding, isMultiMeasure);
             encoding.detail = chunk_QJLMYOTX_i(dimensions.filter((item)=>'detail' === item.encoding).map((item)=>item.id));
             if (0 === encoding.detail.length) encoding.detail = [
                 MeasureName
@@ -8636,7 +8610,7 @@
             const hasDimensionEncoding = dimensions.some((item)=>item.encoding);
             const hasMeasureEncoding = measures.some((item)=>item.encoding);
             const encoding = {};
-            if (hasDimensionEncoding) heatmap_generateDimensionEncoding(dimensions, encoding);
+            if (hasDimensionEncoding) heatmap_generateDimensionEncoding(dimensions, encoding, measures.length > 1);
             else heatmap_generateDefaultDimensionEncoding(dimensions, encoding);
             if (hasMeasureEncoding) heatmap_generateMeasureEncoding(measures, encoding);
             else heatmap_generateDefaultMeasureEncoding(measures, encoding);
@@ -8657,7 +8631,7 @@
             encoding.row = [];
             encoding.column = [];
         };
-        const heatmap_generateDimensionEncoding = (dimensions, encoding)=>{
+        const heatmap_generateDimensionEncoding = (dimensions, encoding, isMultiMeasure)=>{
             encoding.x = chunk_QJLMYOTX_i(dimensions.filter((item)=>'xAxis' === item.encoding).map((item)=>item.id));
             if (0 === encoding.x.length) encoding.x = [
                 dimensions[0].id
@@ -8665,10 +8639,7 @@
             encoding.y = chunk_QJLMYOTX_i(dimensions.filter((item)=>'yAxis' === item.encoding).map((item)=>item.id));
             if (0 === encoding.y.length) if (dimensions.length > 1) encoding.y = dimensions.slice(1).map((item)=>item.id);
             else encoding.y = dimensions.slice(0).map((item)=>item.id);
-            encoding.color = chunk_QJLMYOTX_i(dimensions.filter((item)=>'color' === item.encoding).map((item)=>item.id));
-            if (0 === encoding.color.length) encoding.color = [
-                MeasureName
-            ];
+            addColorToEncoding(dimensions, encoding, isMultiMeasure);
             encoding.detail = chunk_QJLMYOTX_i(dimensions.filter((item)=>'detail' === item.encoding).map((item)=>item.id));
             if (0 === encoding.detail.length) encoding.detail = encoding.color;
             encoding.tooltip = chunk_QJLMYOTX_i(dimensions.map((item)=>item.id));
@@ -8724,16 +8695,6 @@
             markStyle_markStyle,
             annotation_annotation
         ];
-        const labelColorInversion = (spec)=>{
-            const result = {
-                ...spec
-            };
-            if (result.label) result.label.smartInvert = true;
-            else result.label = {
-                smartInvert: true
-            };
-            return result;
-        };
         const colorCellStyleFill = (stylePipe)=>(spec, context)=>{
                 const result = stylePipe(spec, context);
                 const { advancedVSeed } = context;
@@ -8821,14 +8782,8 @@
                         const originalData = datum[ORIGINAL_DATA];
                         const value = originalData[id];
                         const measure = findMeasureById(measures, id);
-                        if (!measure) return String(value);
-                        const { format = {}, autoFormat = true } = measure;
-                        if (!chunk_VCYTMP4D_n(format)) {
-                            const formatter = createFormatter(format);
-                            return formatter(value);
-                        }
-                        if (autoFormat) return autoFormatter(value, locale);
-                        return String(value);
+                        const formatter = createFormatterByMeasure(measure);
+                        return formatter(value);
                     }
                 }));
             const foldMeaContent = [
@@ -8850,14 +8805,8 @@
                         const value = datum[measureValue];
                         const id = datum[measureId];
                         const measure = findMeasureById(measures, id);
-                        if (!measure) return String(value);
-                        const { format = {}, autoFormat = true } = measure;
-                        if (!chunk_VCYTMP4D_n(format)) {
-                            const formatter = createFormatter(format);
-                            return formatter(value);
-                        }
-                        if (autoFormat) return autoFormatter(value, locale);
-                        return String(value);
+                        const formatter = createFormatterByMeasure(measure);
+                        return formatter(value);
                     }
                 }));
             return [
@@ -8906,7 +8855,6 @@
             datasetXY,
             colorAdapter(color_color, linearColor),
             label_label,
-            labelColorInversion,
             colorAdapter(discreteLegend, colorLegend),
             colorCellStyleFill(cellStyle),
             tooltipHeatmap,
@@ -8926,7 +8874,6 @@
                 datasetXY,
                 colorAdapter(color_color, linearColor),
                 label_label,
-                labelColorInversion,
                 discreteLegend,
                 tooltipHeatmap,
                 colorCellStyleFill(cellStyle),
@@ -9075,7 +9022,9 @@
                     enable: true,
                     wrap: true,
                     showValue: true,
-                    showValuePercent: false
+                    showValuePercent: false,
+                    labelColorSmartInvert: false,
+                    labelOverlap: true
                 },
                 tooltip: {
                     enable: true
@@ -9086,7 +9035,7 @@
                     maxSize: 1,
                     shapeType: 'rectRound',
                     position: 'rt',
-                    labelFontColor: '#646A73',
+                    labelColor: '#646A73',
                     labelFontSize: 12,
                     labelFontWeight: 400
                 }
@@ -9144,7 +9093,12 @@
                     columnPercent: {
                         ...baseConfig,
                         xAxis: bandAxis,
-                        yAxis: linearAxis,
+                        yAxis: {
+                            ...linearAxis,
+                            numFormat: {
+                                type: 'percent'
+                            }
+                        },
                         crosshairRect,
                         stackCornerRadius: [
                             4,
@@ -9179,7 +9133,12 @@
                     },
                     barPercent: {
                         ...baseConfig,
-                        xAxis: linearAxis,
+                        xAxis: {
+                            ...linearAxis,
+                            numFormat: {
+                                type: 'percent'
+                            }
+                        },
                         yAxis: barBandAxis,
                         crosshairRect,
                         stackCornerRadius: [
@@ -9198,7 +9157,12 @@
                     areaPercent: {
                         ...baseConfig,
                         xAxis: bandAxis,
-                        yAxis: linearAxis,
+                        yAxis: {
+                            ...linearAxis,
+                            numFormat: {
+                                type: 'percent'
+                            }
+                        },
                         crosshairLine
                     },
                     scatter: {
@@ -9266,7 +9230,11 @@
                         ...baseConfig
                     },
                     heatmap: {
-                        ...baseConfig
+                        ...baseConfig,
+                        label: {
+                            ...baseConfig.label,
+                            labelColorSmartInvert: true
+                        }
                     }
                 }
             };
@@ -9399,7 +9367,9 @@
                     enable: true,
                     wrap: true,
                     showValue: true,
-                    showValuePercent: false
+                    showValuePercent: false,
+                    labelColorSmartInvert: false,
+                    labelOverlap: true
                 },
                 tooltip: {
                     enable: true
@@ -9410,7 +9380,7 @@
                     maxSize: 1,
                     position: 'rt',
                     shapeType: 'rectRound',
-                    labelFontColor: '#FDFDFD',
+                    labelColor: '#FDFDFD',
                     labelFontSize: 12,
                     labelFontWeight: 400
                 }
@@ -9589,7 +9559,11 @@
                         ...baseConfig
                     },
                     heatmap: {
-                        ...baseConfig
+                        ...baseConfig,
+                        label: {
+                            ...baseConfig.label,
+                            labelColorSmartInvert: true
+                        }
                     }
                 }
             };
@@ -13018,6 +12992,7 @@
             id: schemas_string(),
             alias: schemas_string().optional(),
             autoFormat: schemas_boolean().default(true),
+            numFormat: zNumFormat["default"]({}),
             format: zNumFormat["default"]({}),
             encoding: schemas_enum([
                 'primaryYAxis',
@@ -13218,6 +13193,7 @@
             log: schemas_boolean().default(false).nullish(),
             logBase: schemas_number().default(10).nullish(),
             inverse: schemas_boolean().default(false).nullish(),
+            numFormat: zNumFormat.nullish(),
             label: schemas_object({
                 visible: schemas_boolean().default(true).nullish(),
                 labelColor: schemas_string().default('#797B85').nullish(),
@@ -13283,7 +13259,16 @@
             enable: schemas_boolean().nullish(),
             wrap: schemas_boolean().nullish(),
             showValue: schemas_boolean().nullish(),
-            showValuePercent: schemas_boolean().nullish()
+            showValuePercent: schemas_boolean().nullish(),
+            autoFormat: schemas_boolean().nullish(),
+            numFormat: zNumFormat.nullish(),
+            labelFontSize: schemas_number().nullish(),
+            labelFontWeight: schemas_number().or(schemas_string()).nullish(),
+            labelBackgroundColor: schemas_string().nullish(),
+            labelColor: schemas_string().nullish(),
+            labelColorSmartInvert: schemas_boolean().nullish(),
+            labelPosition: schemas_string().nullish(),
+            labelOverlap: schemas_boolean().nullish()
         });
         const zLegend = schemas_object({
             enable: schemas_boolean().default(true).nullish(),
@@ -13335,8 +13320,8 @@
                 'bl',
                 'br'
             ]).default('bottom').nullish(),
+            labelColor: schemas_string().default('#fff').nullish(),
             labelFontSize: schemas_number().default(12).nullish(),
-            labelFontColor: schemas_string().default('#fff').nullish(),
             labelFontWeight: schemas_number().or(schemas_string()).default(400).nullish()
         });
         const zColorLegend = schemas_object({
@@ -13495,56 +13480,6 @@
             funnel: zFunnelConfig.nullish(),
             heatmap: zHeatmapConfig.nullish()
         });
-        const zAxis = schemas_object({
-            visible: schemas_boolean().default(true).nullish(),
-            min: schemas_number().nullish(),
-            max: schemas_number().nullish(),
-            nice: schemas_boolean().default(true).nullish(),
-            zero: schemas_boolean().default(true).nullish(),
-            inverse: schemas_boolean().default(false).nullish(),
-            log: schemas_boolean().default(false).nullish(),
-            logBase: schemas_number().default(10).nullish(),
-            labelAutoHide: schemas_boolean().default(true).nullish(),
-            labelAutoHideGap: schemas_number().default(4).nullish(),
-            labelAutoRotate: schemas_boolean().default(true).nullish(),
-            labelAutoRotateAngleRange: schemas_array(schemas_number()).default([
-                0,
-                -45,
-                -90
-            ]).nullish(),
-            labelAutoLimit: schemas_boolean().default(true).nullish(),
-            labelAutoLimitLength: schemas_number().default(100).nullish(),
-            label: schemas_object({
-                visible: schemas_boolean().default(true).nullish(),
-                labelColor: schemas_string().default('#797B85').nullish(),
-                labelFontSize: schemas_number().default(12).nullish(),
-                labelFontWeight: schemas_number().default(400).nullish(),
-                labelAngle: schemas_number().default(0).nullish()
-            }).nullish(),
-            line: schemas_object({
-                visible: schemas_boolean().default(true).nullish(),
-                lineColor: schemas_string().default('rgba(54, 65, 89, 0.30)').nullish(),
-                lineWidth: schemas_number().default(1).nullish()
-            }).nullish(),
-            tick: schemas_object({
-                visible: schemas_boolean().default(true).nullish(),
-                tickInside: schemas_boolean().default(false).nullish(),
-                tickColor: schemas_string().default('rgba(54, 65, 89, 0.30)').nullish(),
-                tickSize: schemas_number().default(4).nullish()
-            }).nullish(),
-            title: schemas_object({
-                visible: schemas_boolean().default(false).nullish(),
-                titleText: schemas_string().default('').nullish(),
-                titleColor: schemas_string().default('#646A73').nullish(),
-                titleFontSize: schemas_number().default(12).nullish(),
-                titleFontWeight: schemas_number().default(400).nullish()
-            }).nullish(),
-            grid: schemas_object({
-                visible: schemas_boolean().default(false).nullish(),
-                gridColor: schemas_string().default('rgba(54, 65, 89, 0.15)').nullish(),
-                gridWidth: schemas_number().default(0.5).nullish()
-            }).nullish()
-        });
         const zCustomThemeConfig = schemas_object({
             config: zConfig.nullish()
         });