@visactor/vseed 0.0.12 → 0.0.14

package/dist/index.cjs

@@ -26,6 +26,7 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     registerBar: ()=>registerBar,
     isVChart: ()=>isVChart,
+    autoFormatter: ()=>autoFormatter,
     zBaseConfig: ()=>zBaseConfig,
     zTooltip: ()=>zTooltip,
     pieAdvancedPipeline: ()=>pieAdvancedPipeline,
@@ -39,6 +40,7 @@ __webpack_require__.d(__webpack_exports__, {
     zMeasures: ()=>zMeasures,
     zCrosshairRect: ()=>zCrosshairRect,
     FoldMeasureName: ()=>FoldMeasureName,
+    intl: ()=>intl,
     darkTheme: ()=>darkTheme,
     createNumFormatter: ()=>createNumFormatter,
     columnPercentAdvancedPipeline: ()=>columnPercentAdvancedPipeline,
@@ -60,6 +62,7 @@ __webpack_require__.d(__webpack_exports__, {
     columnAdvancedPipeline: ()=>columnAdvancedPipeline,
     columnParallelSpecPipeline: ()=>columnParallelSpecPipeline,
     zLabel: ()=>zLabel,
+    i18n: ()=>i18n,
     registerColumn: ()=>registerColumn,
     zAnnotationPoint: ()=>zAnnotationPoint,
     lightTheme: ()=>lightTheme,
@@ -74,6 +77,7 @@ __webpack_require__.d(__webpack_exports__, {
     registerArea: ()=>registerArea,
     findMeasureById: ()=>findMeasureById,
     zDataset: ()=>zDataset,
+    UnfoldDimensionGroupId: ()=>UnfoldDimensionGroupId,
     zNumFormat: ()=>zNumFormat,
     barPercentAdvancedPipeline: ()=>barPercentAdvancedPipeline,
     areaPercentAdvancedPipeline: ()=>areaPercentAdvancedPipeline,
@@ -86,6 +90,7 @@ __webpack_require__.d(__webpack_exports__, {
     zTheme: ()=>zTheme,
     zEncoding: ()=>zEncoding,
     registerAreaPercent: ()=>registerAreaPercent,
+    autoNumFormatter: ()=>autoNumFormatter,
     zXLinearAxis: ()=>zXLinearAxis,
     zConfig: ()=>zConfig,
     zDatum: ()=>zDatum,
@@ -112,11 +117,11 @@ __webpack_require__.d(__webpack_exports__, {
     zChartType: ()=>zChartType,
     createFormatter: ()=>createFormatter,
     unfoldDimensions: ()=>unfoldDimensions,
+    columnPercentSpecPipeline: ()=>columnPercentSpecPipeline,
     areaAdvancedPipeline: ()=>areaAdvancedPipeline,
-    areaPercentSpecPipeline: ()=>areaPercentSpecPipeline,
     Builder: ()=>Builder,
     barParallelSpecPipeline: ()=>barParallelSpecPipeline,
-    columnPercentSpecPipeline: ()=>columnPercentSpecPipeline,
+    areaPercentSpecPipeline: ()=>areaPercentSpecPipeline,
     registerAll: ()=>all_registerAll
 });
 const initAdvancedVSeed = (advancedVSeed, context)=>{
@@ -127,6 +132,10 @@ const initAdvancedVSeed = (advancedVSeed, context)=>{
         chartType
     };
 };
+const execPipeline = (pipeline, context, initialValue = {})=>{
+    const result = pipeline.reduce((prev, cur)=>cur(prev, context), initialValue);
+    return result;
+};
 const isVTable = (chartType)=>[
         'table',
         'pivotTable'
@@ -138,6 +147,146 @@ const isPivotChart = (vseed)=>{
     const hasMeasureGroup = measures && measures.find((measure)=>measure && measure.children);
     return hasRowOrColumnDimension || hasMeasureGroup;
 };
+const external_remeda_namespaceObject = require("remeda");
+var i18n_namespaceObject = JSON.parse('{"指标名称":{"en-US":"MeasureName","zh-CN":"指标名称"},"指标Id":{"en-US":"MeasureId","zh-CN":"指标Id"},"指标值":{"en-US":"MeasureValue","zh-CN":"指标值"}}');
+class Intl {
+    static instance;
+    translateMap = i18n_namespaceObject;
+    locale = 'zh-CN';
+    canTranslate = (value)=>!!this.translateMap[value];
+    i18n = (segments, ...values)=>{
+        const text = segments.map((segment, index)=>segment + (values[index] || '')).join('');
+        const translatedText = this.translateMap?.[text]?.[this.locale];
+        if ((0, external_remeda_namespaceObject.isNullish)(translatedText)) {
+            console.warn(`i18n ${this.locale} no translate: ${text}`);
+            return text;
+        }
+        return translatedText;
+    };
+    setLocale = (locale)=>{
+        this.locale = locale;
+    };
+    getLocale = ()=>this.locale;
+    static getInstance() {
+        if (!Intl.instance) Intl.instance = new Intl();
+        return Intl.instance;
+    }
+}
+const intl = Intl.getInstance();
+const i18n = intl.i18n;
+const createNumFormatter = (format)=>{
+    const { type = 'number', ratio = 1, symbol = '', thousandSeparator = true, decimalPlaces = 2, round = 'round', prefix = '', suffix = '' } = format || {};
+    return (value)=>{
+        let num = Number(value);
+        let typeSymbol = '';
+        if (Number.isNaN(num)) return num.toString();
+        if ('percent' === type) {
+            num *= 100;
+            typeSymbol = '%';
+        } else if ('permille' === type) {
+            num *= 1000;
+            typeSymbol = "\u2030";
+        } else if ('number' === type) num /= ratio || 1;
+        const multiplier = 10 ** decimalPlaces;
+        num = Math[round](num * multiplier) / multiplier;
+        let numStr = num.toFixed(decimalPlaces);
+        if (thousandSeparator) {
+            const parts = numStr.split('.');
+            parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+            numStr = parts.join('.');
+        }
+        return `${prefix}${numStr}${typeSymbol}${symbol}${suffix}`;
+    };
+};
+const autoNumFormatter = (value, locale = intl.getLocale())=>{
+    if (null == value) return String(value);
+    const num = Number(value);
+    if (Number.isNaN(num)) return String(value);
+    const countDecimalPlaces = (num)=>{
+        if (Number.isInteger(num)) return 0;
+        const str = num.toString();
+        if (str.indexOf('e-') > -1) return parseInt(str.split('e-')[1]);
+        const decimalPart = str.split('.')[1];
+        if (!decimalPart) return 0;
+        const decimalPlaces = decimalPart.replace(/0+$/, '').length;
+        return Math.max(2, decimalPlaces);
+    };
+    const numFormat = {
+        type: 'number',
+        decimalPlaces: countDecimalPlaces(num),
+        round: 'round',
+        thousandSeparator: true
+    };
+    const rules = NUMBER_FORMAT_RULES[locale] || NUMBER_FORMAT_RULES['default'];
+    for (const rule of rules)if (num >= rule.threshold) {
+        numFormat.ratio = rule.ratio;
+        numFormat.symbol = rule.symbol;
+        break;
+    }
+    return createNumFormatter(numFormat)(value);
+};
+const NUMBER_FORMAT_RULES = {
+    'zh-CN': [
+        {
+            threshold: 100000000,
+            ratio: 100000000,
+            symbol: "\u4EBF"
+        },
+        {
+            threshold: 10000,
+            ratio: 10000,
+            symbol: "\u4E07"
+        }
+    ],
+    'en-US': [
+        {
+            threshold: 1000000000,
+            ratio: 1000000000,
+            symbol: 'B'
+        },
+        {
+            threshold: 1000000,
+            ratio: 1000000,
+            symbol: 'M'
+        },
+        {
+            threshold: 1000,
+            ratio: 1000,
+            symbol: 'K'
+        }
+    ],
+    default: [
+        {
+            threshold: 1000000000,
+            ratio: 1000000000,
+            symbol: 'B'
+        },
+        {
+            threshold: 1000000,
+            ratio: 1000000,
+            symbol: 'M'
+        },
+        {
+            threshold: 1000,
+            ratio: 1000,
+            symbol: 'K'
+        }
+    ]
+};
+const createFormatter = (format)=>createNumFormatter(format);
+const autoFormatter = (value, locale)=>autoNumFormatter(value, locale);
+function findMeasureById(measures, id) {
+    if (!measures) return;
+    const stack = [
+        ...measures
+    ];
+    while(stack.length > 0){
+        const current = stack.pop();
+        if (!current) continue;
+        if (current.id === id && !('children' in current)) return current;
+        if ('children' in current && current.children) stack.push(...current.children);
+    }
+}
 const autoMeasures = (advancedVSeed, context)=>{
     const result = {
         ...advancedVSeed
@@ -242,31 +391,40 @@ const FoldMeasureName = '__MeaName__';
 const FoldMeasureValue = '__MeaValue__';
 const FoldMeasureId = '__MeaId__';
 const UnfoldDimensionGroup = '__DimGroup__';
+const UnfoldDimensionGroupId = '__DimGroupID__';
 const Separator = '-';
 const ORIGINAL_DATA = '__OriginalData__';
-const external_remeda_namespaceObject = require("remeda");
-const unfoldDimensions = (dataset, dimensions, measures, unfoldStartIndex = 0, foldGroupName = UnfoldDimensionGroup, dimensionsSeparator = Separator)=>{
+const unfoldDimensions = (dataset, dimensions, measures, unfoldStartIndex = 0, unfoldGroupName = UnfoldDimensionGroup, unfoldGroupId = UnfoldDimensionGroupId, foldMeasureId = FoldMeasureId, dimensionsSeparator = Separator)=>{
     if (unfoldStartIndex < 0 || unfoldStartIndex >= dimensions.length) throw new Error('unfoldStartIndex is out of range');
     const dimensionsToBeUnfolded = dimensions.slice(unfoldStartIndex);
     const unfoldInfo = {
-        groupName: foldGroupName,
-        colorItems: []
+        groupName: unfoldGroupName,
+        groupId: unfoldGroupId,
+        colorItems: [],
+        colorIdMap: {}
     };
     if (0 === dimensions.length || 0 === measures.length) return {
         dataset,
         unfoldInfo: {
-            groupName: foldGroupName,
-            colorItems: []
+            groupName: unfoldGroupName,
+            groupId: unfoldGroupId,
+            colorItems: [],
+            colorIdMap: {}
         }
     };
     const colorItems = [];
+    const colorMap = {};
     for(let i = 0; i < dataset.length; i++){
         const datum = dataset[i];
-        const colorItem = generateDimGroupName(dimensionsToBeUnfolded, datum, dimensionsSeparator);
-        datum[foldGroupName] = colorItem;
-        colorItems.push(colorItem);
+        const colorName = generateDimGroupName(dimensionsToBeUnfolded, datum, dimensionsSeparator);
+        const colorId = colorName + (datum[foldMeasureId] || '');
+        datum[unfoldGroupName] = colorName;
+        datum[unfoldGroupId] = colorId;
+        colorItems.push(colorId);
+        colorMap[colorId] = colorName;
     }
     unfoldInfo.colorItems = (0, external_remeda_namespaceObject.unique)(colorItems);
+    unfoldInfo.colorIdMap = colorMap;
     return {
         dataset,
         unfoldInfo
@@ -292,7 +450,7 @@ const foldMeasures = (dataset, measures, measureId = FoldMeasureId, measureName
         const { id, alias } = measure;
         datum[id] = dataset[i][id];
         datum[measureId] = id;
-        datum[measureName] = alias;
+        datum[measureName] = alias || id;
         datum[measureValue] = dataset[i][id];
         foldInfo.foldMap[id] = alias;
         result[index++] = datum;
@@ -311,32 +469,34 @@ const emptyReshapeResult = {
         measureValue: ''
     },
     unfoldInfo: {
+        groupName: '',
+        groupId: '',
         colorItems: [],
-        groupName: ''
+        colorIdMap: {}
     }
 };
 const dataReshapeFor2D1M = (dataset, dimensions, measures, options)=>{
-    const { foldMeasureId = FoldMeasureId, foldMeasureName = FoldMeasureName, foldMeasureValue = FoldMeasureValue, unfoldDimensionGroup = UnfoldDimensionGroup } = options || {};
+    const { foldMeasureId = FoldMeasureId, foldMeasureName = FoldMeasureName, foldMeasureValue = FoldMeasureValue, unfoldDimensionGroup = UnfoldDimensionGroup, unfoldDimensionGroupId = UnfoldDimensionGroupId } = options || {};
     if (0 === dimensions.length && 0 === measures.length) return emptyReshapeResult;
     const { dataset: foldedDataset, foldInfo } = foldMeasures(dataset, measures, foldMeasureId, foldMeasureName, foldMeasureValue);
     if (0 === dimensions.length) {
         const { dataset: finalDataset, unfoldInfo } = unfoldDimensions(foldedDataset, [
             {
                 id: foldMeasureId,
-                alias: "\u6307\u6807Id",
+                alias: i18n`指标Id`,
                 location: 'dimension'
             },
             {
                 id: foldMeasureName,
-                alias: "\u6307\u6807\u540D\u79F0",
+                alias: i18n`指标名称`,
                 location: 'dimension'
             }
         ], [
             {
                 id: foldMeasureValue,
-                alias: "\u6307\u6807\u503C"
+                alias: i18n`指标值`
             }
-        ], 1, unfoldDimensionGroup);
+        ], 1, unfoldDimensionGroup, unfoldDimensionGroupId, foldMeasureId);
         return {
             dataset: finalDataset,
             foldInfo,
@@ -348,15 +508,15 @@ const dataReshapeFor2D1M = (dataset, dimensions, measures, options)=>{
             ...dimensions,
             {
                 id: foldMeasureName,
-                alias: "\u6307\u6807\u540D\u79F0",
+                alias: i18n`指标名称`,
                 location: 'dimension'
             }
         ], [
             {
                 id: foldMeasureValue,
-                alias: "\u6307\u6807\u503C"
+                alias: i18n`指标值`
             }
-        ], 1, unfoldDimensionGroup);
+        ], 1, unfoldDimensionGroup, unfoldDimensionGroupId, foldMeasureId);
         return {
             dataset: finalDataset,
             foldInfo,
@@ -374,26 +534,28 @@ const dataReshapeFor1D1M_emptyReshapeResult = {
     },
     unfoldInfo: {
         groupName: '',
-        colorItems: []
+        groupId: '',
+        colorItems: [],
+        colorIdMap: {}
     }
 };
 const dataReshapeFor1D1M = (dataset, dimensions, measures, options)=>{
-    const { foldMeasureId = FoldMeasureId, foldMeasureName = FoldMeasureName, foldMeasureValue = FoldMeasureValue, unfoldDimensionGroup = UnfoldDimensionGroup } = options || {};
+    const { foldMeasureId = FoldMeasureId, foldMeasureName = FoldMeasureName, foldMeasureValue = FoldMeasureValue, unfoldDimensionGroup = UnfoldDimensionGroup, unfoldDimensionGroupId = UnfoldDimensionGroupId } = options || {};
     if (0 === dimensions.length && 0 === measures.length) return dataReshapeFor1D1M_emptyReshapeResult;
     const { dataset: foldedDataset, foldInfo } = foldMeasures(dataset, measures, foldMeasureId, foldMeasureName, foldMeasureValue);
     if (0 === dimensions.length) {
         const { dataset: finalDataset, unfoldInfo } = unfoldDimensions(foldedDataset, [
             {
                 id: foldMeasureName,
-                alias: "\u6307\u6807\u540D\u79F0",
+                alias: i18n`指标名称`,
                 location: 'dimension'
             }
         ], [
             {
                 id: foldMeasureValue,
-                alias: "\u6307\u6807\u503C"
+                alias: i18n`指标值`
             }
-        ], 0, unfoldDimensionGroup);
+        ], 0, unfoldDimensionGroup, unfoldDimensionGroupId, foldMeasureId);
         return {
             dataset: finalDataset,
             foldInfo,
@@ -405,15 +567,15 @@ const dataReshapeFor1D1M = (dataset, dimensions, measures, options)=>{
             ...dimensions,
             {
                 id: foldMeasureName,
-                alias: "\u6307\u6807\u540D\u79F0",
+                alias: i18n`指标名称`,
                 location: 'dimension'
             }
         ], [
             {
                 id: foldMeasureValue,
-                alias: "\u6307\u6807\u503C"
+                alias: i18n`指标值`
             }
-        ], 0, unfoldDimensionGroup);
+        ], 0, unfoldDimensionGroup, unfoldDimensionGroupId, foldMeasureId);
         return {
             dataset: finalDataset,
             foldInfo,
@@ -553,7 +715,6 @@ const encodingXY = (advancedVSeed)=>{
     if (!datasetReshapeInfo || !dimensions) return result;
     const encoding = datasetReshapeInfo.reduce((prev, cur)=>{
         const { foldInfo, unfoldInfo } = cur;
-        const isSingleDimension = 1 === dimensions.length;
         const isZeroDimension = 0 === dimensions.length;
         const x = [
             isZeroDimension ? foldInfo.measureName : dimensions[0].id
@@ -562,7 +723,7 @@ const encodingXY = (advancedVSeed)=>{
             foldInfo.measureValue
         ];
         const group = [
-            isSingleDimension || isZeroDimension ? foldInfo.measureName : unfoldInfo.groupName
+            unfoldInfo.groupId
         ];
         const color = [
             foldInfo.measureName
@@ -591,7 +752,6 @@ const encodingYX = (advancedVSeed)=>{
     const encoding = datasetReshapeInfo.reduce((prev, cur)=>{
         const { foldInfo, unfoldInfo } = cur;
         const isZeroDimension = 0 === dimensions.length;
-        const isSingleDimension = 1 === dimensions.length;
         const y = [
             isZeroDimension ? foldInfo.measureName : dimensions[0].id
         ];
@@ -599,7 +759,7 @@ const encodingYX = (advancedVSeed)=>{
             foldInfo.measureValue
         ];
         const group = [
-            isSingleDimension || isZeroDimension ? foldInfo.measureName : unfoldInfo.groupName
+            unfoldInfo.groupId
         ];
         const color = [
             foldInfo.measureName
@@ -631,13 +791,13 @@ const encodingPolar = (advancedVSeed)=>{
             foldInfo.measureValue
         ];
         const angle = [
-            unfoldInfo.groupName
+            unfoldInfo.groupId
         ];
         const group = [
-            unfoldInfo.groupName
+            unfoldInfo.groupId
         ];
         const color = [
-            unfoldInfo.groupName
+            unfoldInfo.groupId
         ];
         return [
             ...prev,
@@ -759,10 +919,6 @@ const vchartTheme = (advancedVSeed, context)=>{
     }
     return result;
 };
-const execPipeline = (pipeline, context, initialValue = {})=>{
-    const result = pipeline.reduce((prev, cur)=>cur(prev, context), initialValue);
-    return result;
-};
 const pivotAdapter = (pipeline, pivotPipeline)=>(advancedVSeed, context)=>{
         const { vseed } = context;
         const usePivotChart = isPivotChart(vseed);
@@ -795,8 +951,17 @@ const annotation_annotation = (advancedVSeed, context)=>{
         annotation
     };
 };
+const locale_locale = (advancedVSeed, context)=>{
+    const { vseed } = context;
+    const { locale } = vseed;
+    return {
+        ...advancedVSeed,
+        locale: locale || 'zh-CN'
+    };
+};
 const lineAdvancedPipeline = [
     initAdvancedVSeed,
+    locale_locale,
     autoMeasures,
     autoDimensions,
     pivotAdapter([
@@ -813,6 +978,7 @@ const lineAdvancedPipeline = [
 ];
 const barAdvancedPipeline = [
     initAdvancedVSeed,
+    locale_locale,
     autoMeasures,
     autoDimensions,
     pivotAdapter([
@@ -829,6 +995,7 @@ const barAdvancedPipeline = [
 ];
 const barParallelAdvancedPipeline = [
     initAdvancedVSeed,
+    locale_locale,
     autoMeasures,
     autoDimensions,
     pivotAdapter([
@@ -845,6 +1012,7 @@ const barParallelAdvancedPipeline = [
 ];
 const barPercentAdvancedPipeline = [
     initAdvancedVSeed,
+    locale_locale,
     autoMeasures,
     autoDimensions,
     pivotAdapter([
@@ -861,6 +1029,7 @@ const barPercentAdvancedPipeline = [
 ];
 const columnAdvancedPipeline = [
     initAdvancedVSeed,
+    locale_locale,
     autoMeasures,
     autoDimensions,
     pivotAdapter([
@@ -877,6 +1046,7 @@ const columnAdvancedPipeline = [
 ];
 const columnParallelAdvancedPipeline = [
     initAdvancedVSeed,
+    locale_locale,
     autoMeasures,
     autoDimensions,
     pivotAdapter([
@@ -893,6 +1063,7 @@ const columnParallelAdvancedPipeline = [
 ];
 const columnPercentAdvancedPipeline = [
     initAdvancedVSeed,
+    locale_locale,
     autoMeasures,
     autoDimensions,
     pivotAdapter([
@@ -909,6 +1080,7 @@ const columnPercentAdvancedPipeline = [
 ];
 const areaAdvancedPipeline = [
     initAdvancedVSeed,
+    locale_locale,
     autoMeasures,
     autoDimensions,
     pivotAdapter([
@@ -925,6 +1097,7 @@ const areaAdvancedPipeline = [
 ];
 const areaPercentAdvancedPipeline = [
     initAdvancedVSeed,
+    locale_locale,
     autoMeasures,
     autoDimensions,
     pivotAdapter([
@@ -941,6 +1114,7 @@ const areaPercentAdvancedPipeline = [
 ];
 const pieAdvancedPipeline = [
     initAdvancedVSeed,
+    locale_locale,
     autoMeasures,
     autoDimensions,
     pivotAdapter([
@@ -1244,13 +1418,14 @@ const xBand = (spec, context)=>{
     return result;
 };
 const ANNOTATION_Z_INDEX = 1000;
-const LINEAR_AXIS_INNER_OFFSET_TOP = 5;
+const LINEAR_AXIS_INNER_OFFSET_TOP = 7;
 const xLinear = (spec, context)=>{
     const result = {
         ...spec
     };
     const { advancedVSeed, vseed } = context;
     const { chartType } = vseed;
+    const { locale } = advancedVSeed;
     const config = advancedVSeed.config?.[chartType]?.xAxis;
     if (!result.axes) result.axes = [];
     if (!config) {
@@ -1276,6 +1451,7 @@ const xLinear = (spec, context)=>{
         min,
         label: {
             visible: label?.visible,
+            formatMethod: (value)=>autoFormatter(value, locale),
             style: {
                 fill: label?.labelColor,
                 angle: label?.labelAngle,
@@ -1425,6 +1601,7 @@ const yLinear = (spec, context)=>{
     };
     const { advancedVSeed, vseed } = context;
     const { chartType } = vseed;
+    const { locale } = advancedVSeed;
     const config = advancedVSeed.config?.[chartType]?.yAxis;
     if (!result.axes) result.axes = [];
     if (!config) {
@@ -1450,6 +1627,7 @@ const yLinear = (spec, context)=>{
         min,
         label: {
             visible: label?.visible,
+            formatMethod: (value)=>autoFormatter(value, locale),
             style: {
                 fill: label?.labelColor,
                 angle: label?.labelAngle,
@@ -1534,43 +1712,6 @@ const background_backgroundColor = (spec, context)=>{
         background: backgroundColor
     };
 };
-function findMeasureById(measures, id) {
-    if (!measures) return;
-    const stack = [
-        ...measures
-    ];
-    while(stack.length > 0){
-        const current = stack.pop();
-        if (!current) continue;
-        if (current.id === id && !('children' in current)) return current;
-        if ('children' in current && current.children) stack.push(...current.children);
-    }
-}
-const createNumFormatter = (format)=>{
-    const { type = 'number', ratio = 1, symbol = '', thousandSeparator = true, decimalPlaces = 2, round = 'round', prefix = '', suffix = '' } = format || {};
-    return (value)=>{
-        let num = Number(value);
-        let typeSymbol = '';
-        if (Number.isNaN(num)) return num.toString();
-        if ('percent' === type) {
-            num *= 100;
-            typeSymbol = '%';
-        } else if ('permille' === type) {
-            num *= 1000;
-            typeSymbol = "\u2030";
-        } else if ('number' === type) num /= ratio || 1;
-        const multiplier = 10 ** decimalPlaces;
-        num = Math[round](num * multiplier) / multiplier;
-        let numStr = num.toFixed(decimalPlaces);
-        if (thousandSeparator) {
-            const parts = numStr.split('.');
-            parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-            numStr = parts.join('.');
-        }
-        return `${prefix}${numStr}${typeSymbol}${symbol}${suffix}`;
-    };
-};
-const createFormatter = (format)=>createNumFormatter(format);
 const defaultTooltip = {
     enable: true
 };
@@ -1598,10 +1739,11 @@ const tooltip_tooltip = (spec, context)=>{
                         const measure = findMeasureById(measures, id);
                         if (!measure) return String(value);
                         const { format = {}, autoFormat = true } = measure;
-                        if (format || autoFormat) {
+                        if (!(0, external_remeda_namespaceObject.isEmpty)(format)) {
                             const formatter = createFormatter(format);
                             return formatter(value);
                         }
+                        if (autoFormat) return autoFormatter(value);
                         return String(value);
                     }
                 }
@@ -1619,10 +1761,11 @@ const tooltip_tooltip = (spec, context)=>{
                         const measure = findMeasureById(measures, id);
                         if (!measure) return String(value);
                         const { format = {}, autoFormat = true } = measure;
-                        if (format || autoFormat) {
+                        if (!(0, external_remeda_namespaceObject.isEmpty)(format)) {
                             const formatter = createFormatter(format);
                             return formatter(value);
                         }
+                        if (autoFormat) return autoFormatter(value);
                         return String(value);
                     }
                 }
@@ -1636,23 +1779,30 @@ const label_label = (spec, context)=>{
         ...spec
     };
     const { advancedVSeed } = context;
-    const { measures, datasetReshapeInfo } = advancedVSeed;
+    const { measures, datasetReshapeInfo, locale } = advancedVSeed;
     const baseConfig = advancedVSeed.baseConfig.vchart;
     if (!baseConfig || !baseConfig.label) return result;
-    const { measureId } = datasetReshapeInfo[0].foldInfo;
+    const { measureId, measureValue } = datasetReshapeInfo[0].foldInfo;
     const { label } = baseConfig;
     const { enable } = label;
     result.label = {
         visible: enable,
         formatMethod: (value, datum)=>{
-            const id = datum[measureId];
-            const measure = findMeasureById(measures, id);
-            if (!measure) return value;
-            const { format = {}, autoFormat = true } = measure;
-            if (format || autoFormat) {
-                const formatter = createFormatter(format);
-                return formatter(value);
-            }
+            const result = [];
+            const formatValue = (value)=>{
+                const id = datum[measureId];
+                const measure = findMeasureById(measures, id);
+                if (!measure) return value;
+                const { format = {}, autoFormat = true } = measure;
+                if (!(0, external_remeda_namespaceObject.isEmpty)(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(' ');
         }
     };
     return result;
@@ -1662,6 +1812,8 @@ const discreteLegend = (spec, context)=>{
         ...spec
     };
     const { advancedVSeed } = context;
+    const { datasetReshapeInfo } = advancedVSeed;
+    const { unfoldInfo } = datasetReshapeInfo[0];
     const baseConfig = advancedVSeed.baseConfig.vchart;
     if (!baseConfig || !baseConfig.legend) return result;
     const { legend } = baseConfig;
@@ -1735,6 +1887,7 @@ const discreteLegend = (spec, context)=>{
                 }
             },
             label: {
+                formatMethod: (value)=>unfoldInfo.colorIdMap[String(value)] ?? value,
                 style: {
                     fontSize: labelFontSize,
                     fill: labelFontColor,
@@ -1762,6 +1915,10 @@ const pivotDiscreteLegend = (spec, context)=>{
     if (!baseConfig || !baseConfig.legend) return result;
     const { datasetReshapeInfo } = advancedVSeed;
     const colorItems = (0, external_remeda_namespaceObject.unique)(datasetReshapeInfo.flatMap((d)=>d.unfoldInfo.colorItems));
+    const colorIdMap = datasetReshapeInfo.reduce((prev, cur)=>({
+            ...prev,
+            ...cur.unfoldInfo.colorIdMap
+        }), {});
     const { legend, color } = baseConfig;
     const { colorScheme } = color;
     const { enable, position = 'bottom', labelFontColor, labelFontSize = 12, labelFontWeight, maxSize, border, shapeType = 'rectRound' } = legend || {};
@@ -1836,6 +1993,7 @@ const pivotDiscreteLegend = (spec, context)=>{
                 }
             },
             label: {
+                formatMethod: (value)=>colorIdMap[String(value)] ?? value,
                 style: {
                     fontSize: labelFontSize,
                     fill: labelFontColor,
@@ -1868,11 +2026,19 @@ const color_color = (spec, context)=>{
     if (!baseConfig || !baseConfig.color) return result;
     const { color } = baseConfig;
     const { colorScheme, colorMapping } = color;
+    const mappingList = [];
+    if (colorMapping) Object.entries(colorMapping).forEach(([key, value])=>{
+        const idMap = Object.entries(unfoldInfo.colorIdMap).filter(([_, v])=>key === v);
+        for (const [colorId] of idMap)mappingList.push([
+            colorId,
+            value
+        ]);
+    });
     result.color = {
         type: 'ordinal',
         domain: unfoldInfo.colorItems,
         range: colorScheme,
-        specified: colorMapping
+        specified: Object.fromEntries(mappingList)
     };
     return result;
 };
@@ -2353,8 +2519,7 @@ const lineStyle_lineStyle = (spec, context)=>{
                 },
                 style: {
                     curveType: curveType,
-                    fill: lineColor,
-                    fillOpacity: lineColorOpacity,
+                    strokeOpacity: lineColorOpacity,
                     stroke: lineColor,
                     lineWidth: lineWidth,
                     lineDash: lineDash
@@ -2689,7 +2854,7 @@ const annotationArea_annotationArea = (spec, context)=>{
         right: 'insideRight'
     };
     const markArea = annotationAreaList.flatMap((annotationArea)=>{
-        const { selector: selectorPoint, text = '', textPosition = 'top', textColor = '#ffffff', textFontSize = 12, textFontWeight = 400, textAlign = 'center', textBaseline = 'top', backgroundBorderColor, backgroundBorderRadius = 4, backgroundBorderWidth = 1, backgroundColor = '#191d24', backgroundPadding = 4, backgroundVisible = true, outerPadding = 0, areaColor = '#888888', areaColorOpacity = 0.15, areaBorderColor, areaBorderRadius, areaBorderWidth } = annotationArea;
+        const { selector: selectorPoint, text = '', textPosition = 'top', textColor = '#ffffff', textFontSize = 12, textFontWeight = 400, textAlign = 'center', textBaseline = 'top', backgroundBorderColor, backgroundBorderRadius = 4, backgroundBorderWidth = 1, backgroundColor = '#191d24', backgroundPadding = 10, backgroundVisible = true, outerPadding = 4, areaColor = '#888888', areaColorOpacity = 0.15, areaBorderColor, areaBorderRadius, areaBorderWidth } = annotationArea;
         const dataset = advancedVSeed.dataset.flat();
         const selectedData = dataset.filter((datum)=>selector_selector(datum, selectorPoint));
         return {
@@ -3552,6 +3717,7 @@ class Builder {
     _spec = null;
     constructor(vseed){
         this._vseed = vseed;
+        this._vseed.locale = vseed.locale || intl.getLocale();
     }
     build = ()=>build(this);
     buildSpec = (advanced)=>buildSpec(this, advanced);
@@ -4161,7 +4327,7 @@ const zMeasure = external_zod_namespaceObject.z.object({
     alias: external_zod_namespaceObject.z.string().optional(),
     visible: external_zod_namespaceObject.z.boolean().default(true).optional(),
     autoFormat: external_zod_namespaceObject.z.boolean().default(true).optional(),
-    format: zNumFormat.optional()
+    format: zNumFormat["default"]({}).optional()
 });
 const zMeasureGroup = external_zod_namespaceObject.z.object({
     id: external_zod_namespaceObject.z.string(),
@@ -4180,6 +4346,8 @@ const zFoldInfo = external_zod_namespaceObject.z.object({
 });
 const zUnfoldInfo = external_zod_namespaceObject.z.object({
     colorItems: external_zod_namespaceObject.z.array(external_zod_namespaceObject.z.string()),
+    groupId: external_zod_namespaceObject.z.string(),
+    colorIdMap: external_zod_namespaceObject.z.record(external_zod_namespaceObject.z.string(), external_zod_namespaceObject.z.string()),
     groupName: external_zod_namespaceObject.z.string()
 });
 const zDatasetReshapeInfo = external_zod_namespaceObject.z.array(external_zod_namespaceObject.z.object({
@@ -4803,10 +4971,13 @@ exports.FoldMeasureValue = __webpack_exports__.FoldMeasureValue;
 exports.ORIGINAL_DATA = __webpack_exports__.ORIGINAL_DATA;
 exports.Separator = __webpack_exports__.Separator;
 exports.UnfoldDimensionGroup = __webpack_exports__.UnfoldDimensionGroup;
+exports.UnfoldDimensionGroupId = __webpack_exports__.UnfoldDimensionGroupId;
 exports.areaAdvancedPipeline = __webpack_exports__.areaAdvancedPipeline;
 exports.areaPercentAdvancedPipeline = __webpack_exports__.areaPercentAdvancedPipeline;
 exports.areaPercentSpecPipeline = __webpack_exports__.areaPercentSpecPipeline;
 exports.areaSpecPipeline = __webpack_exports__.areaSpecPipeline;
+exports.autoFormatter = __webpack_exports__.autoFormatter;
+exports.autoNumFormatter = __webpack_exports__.autoNumFormatter;
 exports.barAdvancedPipeline = __webpack_exports__.barAdvancedPipeline;
 exports.barParallelAdvancedPipeline = __webpack_exports__.barParallelAdvancedPipeline;
 exports.barParallelSpecPipeline = __webpack_exports__.barParallelSpecPipeline;
@@ -4827,6 +4998,8 @@ exports.dataReshapeFor2D1M = __webpack_exports__.dataReshapeFor2D1M;
 exports.execPipeline = __webpack_exports__.execPipeline;
 exports.findMeasureById = __webpack_exports__.findMeasureById;
 exports.foldMeasures = __webpack_exports__.foldMeasures;
+exports.i18n = __webpack_exports__.i18n;
+exports.intl = __webpack_exports__.intl;
 exports.isPivotChart = __webpack_exports__.isPivotChart;
 exports.isVChart = __webpack_exports__.isVChart;
 exports.isVTable = __webpack_exports__.isVTable;
@@ -4898,10 +5071,13 @@ for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "ORIGINAL_DATA",
     "Separator",
     "UnfoldDimensionGroup",
+    "UnfoldDimensionGroupId",
     "areaAdvancedPipeline",
     "areaPercentAdvancedPipeline",
     "areaPercentSpecPipeline",
     "areaSpecPipeline",
+    "autoFormatter",
+    "autoNumFormatter",
     "barAdvancedPipeline",
     "barParallelAdvancedPipeline",
     "barParallelSpecPipeline",
@@ -4922,6 +5098,8 @@ for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "execPipeline",
     "findMeasureById",
     "foldMeasures",
+    "i18n",
+    "intl",
     "isPivotChart",
     "isVChart",
     "isVTable",