feat(legend): support config category legend

antvis · May 31, 2022 · a69a471 · a69a471
1 parent 4e3790c
commit a69a471
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/__tests__/unit/runtime/statistic.spec.ts b/__tests__/unit/runtime/statistic.spec.ts
@@ -106,9 +106,11 @@ describe('statistic', () => {
         },
         { type: 'stackY', orderBy: 'series' },
       ],
+      paddingTop: 68,
       scale: {
         x: { field: 'Date', utc: true },
         y: { guide: { label: { formatter: (d) => `${+d.text / 1000}k` } } },
+        color: { guide: { autoWrap: true, size: 68, maxRows: 3, cols: 4 } },
       },
       encode: {
         shape: 'smoothArea',

diff --git a/src/component/legendCategory.ts b/src/component/legendCategory.ts
@@ -1,4 +1,5 @@
 import { Category } from '@antv/gui';
+import { deepMix } from '@antv/util';
 import {
   GuideComponentComponent as GCC,
   GuideComponentPosition,
@@ -23,19 +24,23 @@ export const LegendCategory: GCC<LegendCategoryOptions> = (options) => {
       name: formatter(d),
       color: scale.map(d),
     }));
-    return new Category({
-      style: {
+    const { cols, autoWrap, ...guideCfg } = scale.getOptions().guide || {};
+    const maxItemWidth = autoWrap && cols ? width / cols : undefined;
+    const legendStyle = deepMix(
+      {},
+      {
         items,
         x,
         y,
         maxWidth: width,
         maxHeight: height,
+        autoWrap,
+        maxItemWidth,
+        itemWidth: maxItemWidth,
         spacing: [8, 0],
         itemName: {
           style: {
-            default: {
-              fontSize: 12,
-            },
+            fontSize: 12,
           },
         },
         ...(field && {
@@ -53,7 +58,9 @@ export const LegendCategory: GCC<LegendCategoryOptions> = (options) => {
           symbol: 'circle',
         },
       },
-    });
+      guideCfg,
+    );
+    return new Category({ style: legendStyle });
   };
 };