fix(legend): right align and opacity

antvis · Jul 18, 2023 · 914a49b · 914a49b
1 parent 1a9501d
commit 914a49b
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 27 deletions.
diff --git a/__tests__/plots/static/cars2-point-ordinal-size.ts b/__tests__/plots/static/cars2-point-ordinal-size.ts
@@ -16,6 +16,10 @@ export function cars2PointOrdinalSize(): G2Spec {
       size: 'Origin',
       shape: 'point',
     },
-    scale: { x: { nice: true }, y: { nice: true } },
+    scale: {
+      x: { nice: true },
+      y: { nice: true },
+      size: { rangeMax: 20 },
+    },
   };
 }
diff --git a/src/component/legendCategory.ts b/src/component/legendCategory.ts
@@ -38,19 +38,6 @@ export type LegendCategoryOptions = {
   [key: string]: any;
 };
 
-function createShape(
-  shape: string,
-  library: G2Library,
-  coordinate: Coordinate,
-  theme: G2Theme,
-  style: Record<string, any> = {},
-) {
-  const marker =
-    (library[`shape.${shape}`]?.props?.defaultMarker as string) ||
-    last(shape.split('.'));
-  return () => useMarker(marker, style)(0, 0, 6);
-}
-
 function inferShape(scales: Scale[], markState: Map<G2Mark, G2MarkState>) {
   const shapeScale = scaleOf(scales, 'shape');
   const colorScale = scaleOf(scales, 'color');
@@ -96,25 +83,31 @@ function inferItemMarker(
   { scales, library, coordinate, theme, markState }: GuideComponentContext,
 ): ((datum: any, i: number, data: any) => () => DisplayObject) | undefined {
   const [namespace, shapes] = inferShape(scales, markState);
-  const create = (name, color) =>
-    createShape(name, library, coordinate, theme, {
-      color,
-    });
+
+  const { itemMarker, itemMarkerSize: size } = options;
+
+  const create = (name, d) => {
+    const marker =
+      (library[`shape.${name}`]?.props?.defaultMarker as string) ||
+      last(name.split('.'));
+    const radius = typeof size === 'function' ? size(d) : size;
+    return () => useMarker(marker, { color: d.color })(0, 0, radius);
+  };
+
   const shapeOf = (i) => `${namespace}.${shapes[i]}`;
 
-  const { itemMarker } = options;
   const shapeScale = scaleOf(scales, 'shape');
-  if (shapeScale && !itemMarker) return (d, i) => create(shapeOf(i), d.color);
+  if (shapeScale && !itemMarker) return (d, i) => create(shapeOf(i), d);
   if (typeof itemMarker === 'function') {
     return (d, i) => {
       // @todo Fix this in GUI.
       // It should pass primitive value rather object.
       const node = itemMarker(d.id, i);
-      if (typeof node === 'string') return create(node, d.color);
+      if (typeof node === 'string') return create(node, d);
       return node;
     };
   }
-  return (d, i) => create(itemMarker || shapeOf(i), d.color);
+  return (d, i) => create(itemMarker || shapeOf(i), d);
 }
 
 function inferItemMarkerOpacity(scales: Scale[]) {
@@ -133,15 +126,22 @@ function inferItemMarkerSize(scales: Scale[], defaults: number) {
   return defaults;
 }
 
+function inferItemMarkerSizeMax(scales: Scale[], defaults: number) {
+  const scale = scaleOf(scales, 'size');
+  if (scale instanceof Point) return scale.getOptions().range[1] * 2;
+  return defaults;
+}
+
 function inferCategoryStyle(options, context: GuideComponentContext) {
   const { labelFormatter = (d) => `${d}` } = options;
   const { scales, theme } = context;
+  const defaultSize = theme.legendCategory.itemMarkerSize;
+  const itemMarkerSize = inferItemMarkerSize(scales, defaultSize);
+  const itemMarkerSizeMax = inferItemMarkerSizeMax(scales, defaultSize);
   const baseStyle = {
-    itemMarker: inferItemMarker(options, context),
-    itemMarkerSize: inferItemMarkerSize(
-      scales,
-      theme.legendCategory.itemMarkerSize,
-    ),
+    itemMarker: inferItemMarker({ ...options, itemMarkerSize }, context),
+    itemMarkerSize: itemMarkerSize,
+    itemMarkerSizeMax: itemMarkerSizeMax,
     itemMarkerOpacity: inferItemMarkerOpacity(scales),
   };