@visactor/vseed 0.0.37 → 0.0.38

package/dist/index.js

@@ -845,6 +845,9 @@ const initPivotTable = (spec, context)=>{
         tooltip: {
             isShowOverflowTextTooltip: true
         },
+        corner: {
+            titleOnDimension: 'all'
+        },
         widthAdaptiveMode: 'all',
         animationAppear: {
             duration: 300,
@@ -1707,22 +1710,44 @@ const color_color = (spec, context)=>{
     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
@@ -1889,6 +1914,8 @@ const xBand = (spec, context)=>{
 };
 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
@@ -2382,7 +2409,12 @@ const pointStateDimensionHover = (spec)=>{
                 ...point.state || {},
                 dimension_hover: {
                     scaleX: 1.4,
-                    scaleY: 1.4
+                    scaleY: 1.4,
+                    outerBorder: {
+                        lineWidth: 4,
+                        strokeOpacity: 0.25,
+                        distance: 2
+                    }
                 }
             }
         }
@@ -2557,13 +2589,11 @@ const annotationVerticalLine_annotationVerticalLine = (spec, context)=>{
         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,
@@ -2656,12 +2686,10 @@ const annotationHorizontalLine_annotationHorizontalLine = (spec, context)=>{
         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: {
@@ -2757,7 +2785,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', 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'];
@@ -2765,8 +2793,6 @@ const annotationArea_annotationArea = (spec, context)=>{
         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));
@@ -3186,11 +3212,11 @@ const pivotDiscreteLegend = (spec, context)=>{
                 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: {
@@ -3603,14 +3629,12 @@ const annotationAreaBand = (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', 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));
@@ -5685,6 +5709,7 @@ const dualAxisConfig = (advancedVSeed, context)=>{
         'legend',
         'tooltip',
         'dualChartType',
+        'alignTicks',
         'primaryYAxis',
         'secondaryYAxis',
         'crosshairLine'
@@ -5837,7 +5862,8 @@ const initDualAxisSecondary = (spec, context)=>{
 };
 const dualChartTypePrimary = (spec, context)=>{
     const result = {
-        ...spec
+        ...spec,
+        zIndex: DUAL_AXIS_CHART_NON_COLUMN_Z_INDEX
     };
     const { advancedVSeed, vseed } = context;
     const { chartType } = vseed;
@@ -5848,12 +5874,16 @@ const dualChartTypePrimary = (spec, context)=>{
         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':
             {
@@ -5864,6 +5894,7 @@ const dualChartTypePrimary = (spec, context)=>{
                     datasetReshapeInfo[0].unfoldInfo.groupId
                 ];
                 columnSpec.type = 'bar';
+                result.zIndex = DUAL_AXIS_CHART_COLUMN_Z_INDEX;
                 break;
             }
         case 'columnPercent':
@@ -5887,7 +5918,8 @@ const dualChartTypePrimary = (spec, context)=>{
 };
 const dualChartTypeSecondary = (spec, context)=>{
     const result = {
-        ...spec
+        ...spec,
+        zIndex: DUAL_AXIS_CHART_NON_COLUMN_Z_INDEX
     };
     const { advancedVSeed, vseed } = context;
     const { chartType } = vseed;
@@ -5897,13 +5929,17 @@ const dualChartTypeSecondary = (spec, context)=>{
         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':
             {
@@ -5914,6 +5950,7 @@ const dualChartTypeSecondary = (spec, context)=>{
                     datasetReshapeInfo[0].unfoldInfo.groupId
                 ];
                 columnSpec.type = 'bar';
+                result.zIndex = DUAL_AXIS_CHART_COLUMN_Z_INDEX;
                 break;
             }
         case 'columnPercent':
@@ -6252,12 +6289,18 @@ const yLinearPrimary = (spec, context)=>{
     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] && isEmpty(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,
             {
@@ -6265,26 +6308,16 @@ const yLinearPrimary = (spec, context)=>{
                 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',
@@ -6353,12 +6386,22 @@ const yLinearSecondary = (spec, context)=>{
     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 (isNullish(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,
             {
@@ -6366,16 +6409,18 @@ const yLinearSecondary = (spec, context)=>{
                 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',
@@ -8842,6 +8887,7 @@ const zDualAxisConfig = z.object({
     tooltip: zTooltip.nullish(),
     legend: zLegend.nullish(),
     dualChartType: z.array(zDualChartType).or(zDualChartType).nullish(),
+    alignTicks: z.array(z.boolean()).or(z.boolean()).nullish(),
     primaryYAxis: z.array(zYLinearAxis).or(zYLinearAxis).nullish(),
     secondaryYAxis: z.array(zYLinearAxis).or(zYLinearAxis).nullish(),
     xAxis: zXBandAxis.nullish(),
@@ -9153,9 +9199,7 @@ const zAnnotationVerticalLine = z.object({
         z.literal('solid'),
         z.literal('dashed'),
         z.literal('dotted')
-    ]).default('dashed').nullish(),
-    offsetX: z.number().default(0),
-    offsetY: z.number().default(0)
+    ]).default('dashed').nullish()
 });
 const zAnnotationHorizontalLine = z.object({
     selector: z.union([
@@ -9205,9 +9249,7 @@ const zAnnotationHorizontalLine = z.object({
     textBackgroundBorderColor: z.string().default('#212121').nullish(),
     textBackgroundBorderRadius: z.number().default(4).nullish(),
     textBackgroundBorderWidth: z.number().default(1).nullish(),
-    textBackgroundPadding: z.number().default(2).nullish(),
-    offsetX: z.number().default(0),
-    offsetY: z.number().default(0)
+    textBackgroundPadding: z.number().default(2).nullish()
 });
 const zAnnotationArea = z.object({
     selector: z.union([
@@ -9249,9 +9291,7 @@ const zAnnotationArea = z.object({
     areaBorderColor: z.string().default('#888888').nullish(),
     areaBorderWidth: z.number().default(1).nullish(),
     areaBorderRadius: z.number().default(4).nullish(),
-    outerPadding: z.number().default(4).nullish(),
-    offsetX: z.number().default(0).nullish(),
-    offsetY: z.number().default(0).nullish()
+    outerPadding: z.number().default(4).nullish()
 });
 const zAnnotation = z.object({
     annotationPoint: zAnnotationPoint.or(z.array(zAnnotationPoint)).nullish(),
@@ -9576,6 +9616,7 @@ const zDualAxis = z.object({
     measures: zMeasureTree.nullish(),
     dualMeasures: zDualMeasures.nullish(),
     dualChartType: z.array(zDualChartType).or(zDualChartType).nullish(),
+    alignTicks: z.array(z.boolean()).or(z.boolean()).nullish(),
     primaryYAxis: z.array(zYLinearAxis).or(zYLinearAxis).nullish(),
     secondaryYAxis: z.array(zYLinearAxis).or(zYLinearAxis).nullish(),
     xAxis: zXBandAxis.nullish(),