fix(legend): pass legend.style (#5084)

antvis · May 24, 2023 · f915d02 · f915d02
1 parent 106b807
commit f915d02
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 4 deletions.
diff --git a/__tests__/integration/snapshots/static/athletesRectBinLegendStyle.png b/__tests__/integration/snapshots/static/athletesRectBinLegendStyle.png
diff --git a/__tests__/plots/static/athletes-rect-bin-legend-style.ts b/__tests__/plots/static/athletes-rect-bin-legend-style.ts
@@ -0,0 +1,31 @@
+import { G2Spec } from '../../../src';
+
+export function athletesRectBinLegendStyle(): G2Spec {
+  return {
+    type: 'rect',
+    data: {
+      type: 'fetch',
+      value: 'data/athletes.csv',
+    },
+    transform: [
+      { type: 'binX', y: 'count' },
+      { type: 'stackY', orderBy: 'series' },
+    ],
+    encode: {
+      x: 'weight',
+      color: 'sex',
+    },
+    legend: {
+      color: {
+        style: {
+          itemMarkerFill: 'red',
+          itemValueFill: 'black',
+          itemLabelFontSize: 30,
+        },
+      },
+    },
+    style: {
+      inset: 0.5,
+    },
+  };
+}
diff --git a/__tests__/plots/static/index.ts b/__tests__/plots/static/index.ts
@@ -227,3 +227,4 @@ export { tranLineMultiAxesAutoPaddingTickMethod } from './train-line-multi-axes-
 export { vaccinesCellScaleRelationAutoPaddingTickFilter } from './vaccines-cell-scale-relation-auto-padding-tick-filter';
 export { marketIntervalMarimekkoAutoPaddingFlex } from './market-interval-marimekko-auto-padding-flex';
 export { aaplIntervalDateEncodeX } from './aapl-interval-date-encode-x';
+export { athletesRectBinLegendStyle } from './athletes-rect-bin-legend-style';
diff --git a/src/component/utils.ts b/src/component/utils.ts
@@ -158,11 +158,16 @@ export function adaptor<T>(style: T) {
     'title',
     'trunc',
   ];
+  // @ts-ignore
+  const { style: styles, ...rest } = style;
   const finalStyle = {};
-  Object.entries(style).forEach(([key, value]) => {
-    if (reservedKeys.includes(key))
+  Object.entries(rest).forEach(([key, value]) => {
+    if (reservedKeys.includes(key)) {
       finalStyle[`show${upperFirst(key)}`] = value;
-    else finalStyle[key] = value;
+    } else finalStyle[key] = value;
   });
-  return finalStyle as T;
+  return {
+    ...finalStyle,
+    ...styles,
+  };
 }