fix: decorateHaloIcons empty and value label textAlign problem

VisActor · Jan 7, 2025 · d83b142 · d83b142
1 parent 32a1a40
commit d83b142
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 11 deletions.
diff --git a/packages/vchart-extension/src/charts/ranking-list/ranking-list-transformer.ts b/packages/vchart-extension/src/charts/ranking-list/ranking-list-transformer.ts
@@ -54,6 +54,7 @@ export class RankingListChartSpecTransformer extends CommonChartSpecTransformer
     ];
 
     this.transformPaddingSpec(spec);
+    // console.log('original-spec', spec);
 
     super.transformSpec(spec);
   }
@@ -64,7 +65,7 @@ export class RankingListChartSpecTransformer extends CommonChartSpecTransformer
     applyVisible(spec, [
       'barBackground',
       'rankingIcon',
-      'decorateHaloIcon',
+      'decorateHaloIcons',
       'orderLabel',
       'nameLabel',
       'valueLabel'
@@ -209,7 +210,7 @@ export class RankingListChartSpecTransformer extends CommonChartSpecTransformer
 
   generateDecorateHaloIcons(spec: any) {
     const totalDuration = spec.animation.duration;
-    return spec.decorateHaloIcons.map((decorateHaloIcon: any) => {
+    return spec.decorateHaloIcons?.map((decorateHaloIcon: any) => {
       return {
         type: 'symbol',
         dataId: 'data',
@@ -416,7 +417,7 @@ export class RankingListChartSpecTransformer extends CommonChartSpecTransformer
           return ctx.valueToY([datum[spec.yField]]) + ctx.yBandwidth() / 2 - spec.bar.height / 2 - LABEL_PADDING_BOTTOM;
         },
         ...spec.valueLabel.style,
-        textAlign: 'right',
+        textAlign: spec.labelLayout === 'bothEnd' ? 'left' : 'right',
         textBaseline: spec.labelLayout === 'bothEnd' ? 'middle' : 'bottom',
         visible: (datum: Datum) => {
           if (datum[SUPPLY_DATA_KEY]) {
@@ -433,7 +434,10 @@ export class RankingListChartSpecTransformer extends CommonChartSpecTransformer
   }
 
   transformPaddingSpec(spec: any) {
-    const maxHaloIconSize = Math.max(...spec.decorateHaloIcons.map((icon: any) => icon.style.size ?? 18));
+    const maxHaloIconSize =
+      spec.decorateHaloIcons.length > 0
+        ? Math.max(...spec.decorateHaloIcons.map((icon: any) => icon.style?.size ?? 18))
+        : 0;
     spec.padding = {
       left:
         spec.labelLayout === 'bothEnd'

diff --git a/packages/vchart-extension/src/charts/ranking-list/utils.ts b/packages/vchart-extension/src/charts/ranking-list/utils.ts
@@ -1,14 +1,27 @@
 import { Datum } from '@visactor/vchart/src/typings';
+import { isArray } from '@visactor/vutils';
 
 export const applyVisible = (spec: any, keyList: string[]) => {
   keyList.forEach(key => {
-    spec[key] = {
-      ...spec[key],
-      style: {
-        ...spec[key]?.style,
-        visible: spec[key]?.style?.visible ?? spec[key]?.visible ?? true
-      }
-    };
+    if (isArray(spec[key])) {
+      spec[key].forEach((s, i) => {
+        spec[key][i] = {
+          ...s,
+          style: {
+            ...s?.style,
+            visible: s?.style?.visible ?? s?.visible ?? true
+          }
+        };
+      });
+    } else {
+      spec[key] = {
+        ...spec[key],
+        style: {
+          ...spec[key]?.style,
+          visible: spec[key]?.style?.visible ?? spec[key]?.visible ?? true
+        }
+      };
+    }
   });
 };