@visactor/vseed 0.0.37 → 0.0.38

package/dist/umd/index.js

@@ -1259,6 +1259,9 @@
                 tooltip: {
                     isShowOverflowTextTooltip: true
                 },
+                corner: {
+                    titleOnDimension: 'all'
+                },
                 widthAdaptiveMode: 'all',
                 animationAppear: {
                     duration: 300,
@@ -2151,22 +2154,44 @@
             const colorIdMap = unfoldInfo.colorIdMap;
             const { color } = baseConfig;
             const { colorScheme, colorMapping } = color;
-            const mappingList = [];
-            if (colorMapping) Object.entries(colorMapping).sort((a, b)=>a[0].split(Separator).length - b[0].split(Separator).length).forEach(([key, value])=>{
-                const idMap = Object.entries(colorIdMap).filter(([_, v])=>v.includes(key));
-                for (const [colorId] of idMap)mappingList.push([
-                    colorId,
-                    value
-                ]);
-            });
             result.color = {
                 type: 'ordinal',
                 domain: colorItems,
                 range: colorScheme,
-                specified: Object.fromEntries(mappingList)
+                specified: createSpecifiedForColorMapping(colorMapping, colorIdMap, colorItems)
             };
             return result;
         };
+        const createSpecifiedForColorMapping = (colorMapping, colorIdMap, colorItems)=>{
+            if (!colorMapping || !colorIdMap || !colorItems) return;
+            const matchedList = [];
+            const colors = Object.entries(colorMapping).sort((a, b)=>b[0].length - a[0].length);
+            const accurateMap = colors.reduce((prev, cur)=>{
+                const name = cur[0];
+                const colorValue = cur[1];
+                const accurateMatchedList = Object.entries(colorIdMap).filter(([colorKey, colorAlias])=>colorKey === name || colorAlias === name);
+                accurateMatchedList.forEach((item)=>{
+                    prev[item[0]] = colorValue;
+                    matchedList.push(name);
+                });
+                return prev;
+            }, {});
+            const fuzzyMap = colors.reduce((prev, cur)=>{
+                const name = cur[0];
+                const colorValue = cur[1];
+                if (matchedList.includes(name)) return prev;
+                const fuzzyMatchedList = Object.entries(colorIdMap).filter(([colorKey, colorAlias])=>colorKey.includes(name) || colorAlias.includes(name));
+                fuzzyMatchedList.forEach((item)=>{
+                    if (prev[item[0]]) return;
+                    prev[item[0]] = colorValue;
+                });
+                return prev;
+            }, {});
+            return {
+                ...fuzzyMap,
+                ...accurateMap
+            };
+        };
         const background_backgroundColor = (spec, context)=>{
             const result = {
                 ...spec
@@ -2333,6 +2358,8 @@
         };
         const ANNOTATION_Z_INDEX = 1000;
         const LINEAR_AXIS_INNER_OFFSET_TOP = 7;
+        const DUAL_AXIS_CHART_COLUMN_Z_INDEX = 1000;
+        const DUAL_AXIS_CHART_NON_COLUMN_Z_INDEX = 1001;
         const yLinear = (spec, context)=>{
             const result = {
                 ...spec
@@ -2826,7 +2853,12 @@
                         ...point.state || {},
                         dimension_hover: {
                             scaleX: 1.4,
-                            scaleY: 1.4
+                            scaleY: 1.4,
+                            outerBorder: {
+                                lineWidth: 4,
+                                strokeOpacity: 0.25,
+                                distance: 2
+                            }
                         }
                     }
                 }
@@ -3020,13 +3052,11 @@
                 insideEnd: 'insideEndTop'
             };
             const markLine = annotationVerticalLineList.flatMap((annotationVerticalLine)=>{
-                const { selector: selectorPoint, xValue, text = '', textPosition = 'insideEnd', textColor = '#ffffff', textFontSize = 12, textFontWeight = 400, textAlign = 'right', textBaseline = 'top', textBackgroundVisible = true, textBackgroundBorderColor = '#212121', textBackgroundColor = '#212121', textBackgroundBorderRadius = 4, textBackgroundBorderWidth = 1, textBackgroundPadding = 2, lineVisible = true, lineColor = '#212121', lineWidth = 1, lineStyle = 'dashed', offsetX = 0, offsetY = 0 } = annotationVerticalLine;
+                const { selector: selectorPoint, xValue, text = '', textPosition = 'insideEnd', textColor = '#ffffff', textFontSize = 12, textFontWeight = 400, textAlign = 'right', textBaseline = 'top', textBackgroundVisible = true, textBackgroundBorderColor = '#212121', textBackgroundColor = '#212121', textBackgroundBorderRadius = 4, textBackgroundBorderWidth = 1, textBackgroundPadding = 2, lineVisible = true, lineColor = '#212121', lineWidth = 1, lineStyle = 'dashed' } = annotationVerticalLine;
                 const dataset = advancedVSeed.dataset.flat();
                 const generateOneMarkLine = (x)=>({
                         x: x,
                         zIndex: ANNOTATION_Z_INDEX,
-                        offsetX,
-                        offsetY,
                         line: {
                             style: {
                                 visible: lineVisible,
@@ -3119,12 +3149,10 @@
                 insideEnd: 'insideEndTop'
             };
             const markLine = annotationVerticalLineList.flatMap((annotationVerticalLine)=>{
-                const { selector: selectorPoint, yValue, text = '', textPosition = 'insideEnd', textColor = '#ffffff', textFontSize = 12, textFontWeight = 400, textAlign = 'right', textBaseline = 'top', lineColor = '#212121', lineStyle = 'dashed', lineVisible = true, lineWidth = 1, textBackgroundVisible = true, textBackgroundColor = '#212121', textBackgroundBorderColor = '#212121', textBackgroundBorderRadius = 4, textBackgroundBorderWidth = 1, textBackgroundPadding = 2, offsetX = 0, offsetY = 0 } = annotationVerticalLine;
+                const { selector: selectorPoint, yValue, text = '', textPosition = 'insideEnd', textColor = '#ffffff', textFontSize = 12, textFontWeight = 400, textAlign = 'right', textBaseline = 'top', lineColor = '#212121', lineStyle = 'dashed', lineVisible = true, lineWidth = 1, textBackgroundVisible = true, textBackgroundColor = '#212121', textBackgroundBorderColor = '#212121', textBackgroundBorderRadius = 4, textBackgroundBorderWidth = 1, textBackgroundPadding = 2 } = annotationVerticalLine;
                 const dataset = advancedVSeed.dataset.flat();
                 const generateOneMarkLine = (y)=>({
                         y,
-                        offsetX,
-                        offsetY,
                         zIndex: ANNOTATION_Z_INDEX,
                         line: {
                             style: {
@@ -3220,7 +3248,7 @@
                 right: 'insideRight'
             };
             const markArea = annotationAreaList.flatMap((annotationArea)=>{
-                const { selector: selectorPoint, text = '', textPosition = 'top', textColor = '#ffffff', textFontSize = 12, textFontWeight = 400, textAlign = 'center', textBaseline = 'top', textBackgroundVisible = true, textBackgroundColor = '#191d24', textBackgroundBorderColor = '#191d24', textBackgroundBorderWidth = 1, textBackgroundBorderRadius = 4, textBackgroundPadding = 4, areaColor = '#888888', areaColorOpacity = 0.15, areaBorderColor = '#888888', areaBorderRadius = 4, areaBorderWidth = 1, outerPadding = 4, offsetX = 0, offsetY = 0 } = annotationArea;
+                const { selector: selectorPoint, text = '', textPosition = 'top', textColor = '#ffffff', textFontSize = 12, textFontWeight = 400, textAlign = 'center', textBaseline = 'top', textBackgroundVisible = true, textBackgroundColor = '#191d24', textBackgroundBorderColor = '#191d24', textBackgroundBorderWidth = 1, textBackgroundBorderRadius = 4, textBackgroundPadding = 4, areaColor = '#888888', areaColorOpacity = 0.15, areaBorderColor = '#888888', areaBorderRadius = 4, areaBorderWidth = 1, outerPadding = 4 } = annotationArea;
                 const dataset = advancedVSeed.dataset.flat();
                 const selectedData = selectorPoint ? dataset.filter((datum)=>selector_selector(datum, selectorPoint)) : [];
                 const labelPosition = positionMap[textPosition || 'top'];
@@ -3228,8 +3256,6 @@
                 return {
                     zIndex: ANNOTATION_Z_INDEX,
                     regionRelative: true,
-                    offsetX,
-                    offsetY,
                     positions: (data, context)=>{
                         const positionData = data.filter((item)=>selectedData.some((datum)=>isSubset(datum, item)));
                         const xyList = positionData.map((datum)=>context.dataToPosition(datum));
@@ -3649,11 +3675,11 @@
                         label: d,
                         shape: {
                             outerBorder: border ? {
-                                stroke: colorScheme?.[index],
+                                stroke: colorScheme?.[index % colorScheme.length],
                                 distance: 3,
                                 lineWidth: 1
                             } : void 0,
-                            fill: colorScheme?.[index]
+                            fill: colorScheme?.[index % colorScheme.length]
                         }
                     })),
                 item: {
@@ -4066,14 +4092,12 @@
                 right: 'insideRight'
             };
             const markArea = annotationAreaList.flatMap((annotationArea)=>{
-                const { selector: selectorPoint, text = '', textPosition = 'top', textColor = '#ffffff', textFontSize = 12, textFontWeight = 400, textAlign = 'center', textBaseline = 'top', textBackgroundVisible = true, textBackgroundColor = '#191d24', textBackgroundBorderColor = '#191d24', textBackgroundBorderWidth = 1, textBackgroundBorderRadius = 4, textBackgroundPadding = 4, areaColor = '#888888', areaColorOpacity = 0.15, areaBorderColor = '#888888', areaBorderRadius = 4, areaBorderWidth = 1, outerPadding = 4, offsetX = 0, offsetY = 0 } = annotationArea;
+                const { selector: selectorPoint, text = '', textPosition = 'top', textColor = '#ffffff', textFontSize = 12, textFontWeight = 400, textAlign = 'center', textBaseline = 'top', textBackgroundVisible = true, textBackgroundColor = '#191d24', textBackgroundBorderColor = '#191d24', textBackgroundBorderWidth = 1, textBackgroundBorderRadius = 4, textBackgroundPadding = 4, areaColor = '#888888', areaColorOpacity = 0.15, areaBorderColor = '#888888', areaBorderRadius = 4, areaBorderWidth = 1, outerPadding = 4 } = annotationArea;
                 const dataset = advancedVSeed.dataset.flat();
                 const selectedData = selectorPoint ? dataset.filter((datum)=>selector_selector(datum, selectorPoint)) : [];
                 return {
                     zIndex: ANNOTATION_Z_INDEX,
                     regionRelative: true,
-                    offsetX,
-                    offsetY,
                     positions: (data, context)=>{
                         const positionData = data.filter((item)=>selectedData.some((datum)=>isSubset(datum, item)));
                         const xyList = positionData.map((datum)=>context.dataToPosition(datum));
@@ -6148,6 +6172,7 @@
                 'legend',
                 'tooltip',
                 'dualChartType',
+                'alignTicks',
                 'primaryYAxis',
                 'secondaryYAxis',
                 'crosshairLine'
@@ -6300,7 +6325,8 @@
         };
         const dualChartTypePrimary = (spec, context)=>{
             const result = {
-                ...spec
+                ...spec,
+                zIndex: DUAL_AXIS_CHART_NON_COLUMN_Z_INDEX
             };
             const { advancedVSeed, vseed } = context;
             const { chartType } = vseed;
@@ -6311,12 +6337,16 @@
                 secondary: 'line'
             };
             const primary = Array.isArray(config) ? config[index].primary || config[0].primary : config.primary;
-            switch(primary){
+            const secondary = Array.isArray(config) ? config[index].secondary || config[0].secondary : config.secondary;
+            const bothColumn = 'column' === primary && 'column' === secondary;
+            const type = bothColumn ? 'columnParallel' : primary;
+            switch(type){
                 case 'line':
                     result.type = 'line';
                     break;
                 case 'column':
                     result.type = 'bar';
+                    result.zIndex = DUAL_AXIS_CHART_COLUMN_Z_INDEX;
                     break;
                 case 'columnParallel':
                     {
@@ -6327,6 +6357,7 @@
                             datasetReshapeInfo[0].unfoldInfo.groupId
                         ];
                         columnSpec.type = 'bar';
+                        result.zIndex = DUAL_AXIS_CHART_COLUMN_Z_INDEX;
                         break;
                     }
                 case 'columnPercent':
@@ -6350,7 +6381,8 @@
         };
         const dualChartTypeSecondary = (spec, context)=>{
             const result = {
-                ...spec
+                ...spec,
+                zIndex: DUAL_AXIS_CHART_NON_COLUMN_Z_INDEX
             };
             const { advancedVSeed, vseed } = context;
             const { chartType } = vseed;
@@ -6360,13 +6392,17 @@
                 secondary: 'line'
             };
             const index = datasetReshapeInfo[0].index;
+            const primary = Array.isArray(config) ? config[index].primary || config[0].primary : config.primary;
             const secondary = Array.isArray(config) ? config[index].secondary || config[0].secondary : config.secondary;
-            switch(secondary){
+            const bothColumn = 'column' === primary && 'column' === secondary;
+            const type = bothColumn ? 'columnParallel' : secondary;
+            switch(type){
                 case 'line':
                     result.type = 'line';
                     break;
                 case 'column':
                     result.type = 'bar';
+                    result.zIndex = DUAL_AXIS_CHART_COLUMN_Z_INDEX;
                     break;
                 case 'columnParallel':
                     {
@@ -6377,6 +6413,7 @@
                             datasetReshapeInfo[0].unfoldInfo.groupId
                         ];
                         columnSpec.type = 'bar';
+                        result.zIndex = DUAL_AXIS_CHART_COLUMN_Z_INDEX;
                         break;
                     }
                 case 'columnPercent':
@@ -6715,12 +6752,18 @@
             const { locale, datasetReshapeInfo } = advancedVSeed;
             const index = datasetReshapeInfo[0].index;
             const primaryYAxis = advancedVSeed.config?.[chartType]?.primaryYAxis;
-            const config = Array.isArray(primaryYAxis) ? primaryYAxis[index] || primaryYAxis[0] : primaryYAxis;
+            const yAxisConfig = Array.isArray(primaryYAxis) ? primaryYAxis[index] || primaryYAxis[0] : primaryYAxis;
+            const alignTicks = advancedVSeed.config?.[chartType]?.alignTicks;
+            const alignTicksConfig = Array.isArray(alignTicks) ? alignTicks[index] || alignTicks[0] : alignTicks;
             if (datasetReshapeInfo[0].foldInfoList?.[0] && chunk_VCYTMP4D_n(datasetReshapeInfo[0].foldInfoList[0].foldMap)) return result;
             const id = `${datasetReshapeInfo[0].id}-primary-axis`;
-            const seriesId = `${datasetReshapeInfo[0].id}-primary-series`;
+            const seriesIds = [
+                `${datasetReshapeInfo[0].id}-primary-series`,
+                `${datasetReshapeInfo[0].id}-secondary-series`
+            ];
+            const seriesId = alignTicksConfig ? seriesIds : seriesIds[0];
             if (!result.axes) result.axes = [];
-            if (!config) {
+            if (!yAxisConfig) {
                 result.axes = [
                     ...result.axes,
                     {
@@ -6728,26 +6771,16 @@
                         id,
                         seriesId,
                         type: 'linear',
-                        orient: 'left',
-                        sync: {
-                            axisId: `${datasetReshapeInfo[0].id}-secondary-axis`,
-                            tickAlign: false,
-                            zeroAlign: true
-                        }
+                        orient: 'left'
                     }
                 ];
                 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 } = yAxisConfig;
             const linearAxis = {
                 visible,
                 id,
                 seriesId,
-                sync: {
-                    axisId: `${datasetReshapeInfo[0].id}-secondary-axis`,
-                    tickAlign: false,
-                    zeroAlign: true
-                },
                 type: log ? 'log' : 'linear',
                 base: logBase,
                 orient: 'left',
@@ -6816,12 +6849,22 @@
             const { locale, datasetReshapeInfo } = advancedVSeed;
             const index = datasetReshapeInfo[0].index;
             const secondaryYAxis = advancedVSeed.config?.[chartType]?.secondaryYAxis;
-            const config = Array.isArray(secondaryYAxis) ? secondaryYAxis[index] || secondaryYAxis[0] : secondaryYAxis;
+            const yAxisConfig = Array.isArray(secondaryYAxis) ? secondaryYAxis[index] || secondaryYAxis[0] : secondaryYAxis;
+            const alignTicks = advancedVSeed.config?.[chartType]?.alignTicks;
+            const alignTicksConfig = Array.isArray(alignTicks) ? alignTicks[index] || alignTicks[0] : alignTicks;
             if (chunk_JK3VNB42_n(datasetReshapeInfo[0].foldInfoList?.[1])) return result;
+            const sync = {
+                axisId: `${datasetReshapeInfo[0].id}-primary-axis`,
+                zeroAlign: true
+            };
             const id = `${datasetReshapeInfo[0].id}-secondary-axis`;
-            const seriesId = `${datasetReshapeInfo[0].id}-secondary-series`;
+            const seriesIds = [
+                `${datasetReshapeInfo[0].id}-primary-series`,
+                `${datasetReshapeInfo[0].id}-secondary-series`
+            ];
+            const seriesId = alignTicksConfig ? seriesIds : seriesIds[1];
             if (!result.axes) result.axes = [];
-            if (!config) {
+            if (!yAxisConfig) {
                 result.axes = [
                     ...result.axes,
                     {
@@ -6829,16 +6872,18 @@
                         id,
                         seriesId,
                         type: 'linear',
-                        orient: 'right'
+                        orient: 'right',
+                        sync
                     }
                 ];
                 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 } = yAxisConfig;
             const linearAxis = {
                 visible,
                 id,
                 seriesId,
+                sync,
                 type: log ? 'log' : 'linear',
                 base: logBase,
                 orient: 'right',
@@ -12588,6 +12633,7 @@
             tooltip: zTooltip.nullish(),
             legend: zLegend.nullish(),
             dualChartType: schemas_array(zDualChartType).or(zDualChartType).nullish(),
+            alignTicks: schemas_array(schemas_boolean()).or(schemas_boolean()).nullish(),
             primaryYAxis: schemas_array(zYLinearAxis).or(zYLinearAxis).nullish(),
             secondaryYAxis: schemas_array(zYLinearAxis).or(zYLinearAxis).nullish(),
             xAxis: zXBandAxis.nullish(),
@@ -12899,9 +12945,7 @@
                 literal('solid'),
                 literal('dashed'),
                 literal('dotted')
-            ]).default('dashed').nullish(),
-            offsetX: schemas_number().default(0),
-            offsetY: schemas_number().default(0)
+            ]).default('dashed').nullish()
         });
         const zAnnotationHorizontalLine = schemas_object({
             selector: union([
@@ -12951,9 +12995,7 @@
             textBackgroundBorderColor: schemas_string().default('#212121').nullish(),
             textBackgroundBorderRadius: schemas_number().default(4).nullish(),
             textBackgroundBorderWidth: schemas_number().default(1).nullish(),
-            textBackgroundPadding: schemas_number().default(2).nullish(),
-            offsetX: schemas_number().default(0),
-            offsetY: schemas_number().default(0)
+            textBackgroundPadding: schemas_number().default(2).nullish()
         });
         const zAnnotationArea = schemas_object({
             selector: union([
@@ -12995,9 +13037,7 @@
             areaBorderColor: schemas_string().default('#888888').nullish(),
             areaBorderWidth: schemas_number().default(1).nullish(),
             areaBorderRadius: schemas_number().default(4).nullish(),
-            outerPadding: schemas_number().default(4).nullish(),
-            offsetX: schemas_number().default(0).nullish(),
-            offsetY: schemas_number().default(0).nullish()
+            outerPadding: schemas_number().default(4).nullish()
         });
         const zAnnotation = schemas_object({
             annotationPoint: zAnnotationPoint.or(schemas_array(zAnnotationPoint)).nullish(),
@@ -13322,6 +13362,7 @@
             measures: zMeasureTree.nullish(),
             dualMeasures: zDualMeasures.nullish(),
             dualChartType: schemas_array(zDualChartType).or(zDualChartType).nullish(),
+            alignTicks: schemas_array(schemas_boolean()).or(schemas_boolean()).nullish(),
             primaryYAxis: schemas_array(zYLinearAxis).or(zYLinearAxis).nullish(),
             secondaryYAxis: schemas_array(zYLinearAxis).or(zYLinearAxis).nullish(),
             xAxis: zXBandAxis.nullish(),