feat(size): support ordinal size channel (#5320)

__tests__/plots/static/cars2-point-constant-color-size.ts

@@ -0,0 +1,22 @@
+import { G2Spec } from '../../../src';
+
+// @todo Fix marker stroke of @antv/gui.
+export function cars2PointConstantColorSize(): G2Spec {
+  return {
+    type: 'point',
+    padding: 'auto',
+    data: {
+      type: 'fetch',
+      value: 'data/cars2.csv',
+    },
+    encode: {
+      y: 'Miles_per_Gallon',
+      x: 'Horsepower',
+      size: 'Origin',
+    },
+    scale: {
+      x: { nice: true },
+      y: { nice: true },
+    },
+  };
+}

__tests__/plots/static/cars2-point-ordinal-size.ts

@@ -0,0 +1,21 @@
+import { G2Spec } from '../../../src';
+
+// @todo Fix category item align in @antv/gui.
+export function cars2PointOrdinalSize(): G2Spec {
+  return {
+    type: 'point',
+    padding: 'auto',
+    data: {
+      type: 'fetch',
+      value: 'data/cars2.csv',
+    },
+    encode: {
+      y: 'Miles_per_Gallon',
+      x: 'Horsepower',
+      color: 'Origin',
+      size: 'Origin',
+      shape: 'point',
+    },
+    scale: { x: { nice: true }, y: { nice: true } },
+  };
+}

__tests__/plots/static/fuel-line-encode-propagate.ts

@@ -29,6 +29,7 @@ export function fuelLineEncodePropagate(): G2Spec {
           },
           x: { utc: true },
         },
+        legend: { shape: false },
         style: {
           stroke: '#fff',
         },

__tests__/plots/static/index.ts

@@ -271,3 +271,5 @@ export { mockLineSmallInterval } from './mock-line-small-interval';
 export { unemploymentAreaStackedLegendSize } from './unemployment-area-stacked-legend-size';
 export { alphabetIntervalAutoPaddingSlider } from './alphabet-interval-auto-padding-slider';
 export { countriesBubbleLegendSize } from './countries-bubble-legend-size';
+export { cars2PointOrdinalSize } from './cars2-point-ordinal-size';
+export { cars2PointConstantColorSize } from './cars2-point-constant-color-size';

src/component/legendCategory.ts

@@ -3,6 +3,7 @@ import type { DisplayObject } from '@antv/g';
 import { Category } from '@antv/gui';
 import { last } from '@antv/util';
 import { format } from 'd3-format';
+import { Identity, Point } from '@antv/scale';
 import type {
   FlexLayout,
   G2Library,
@@ -127,9 +128,8 @@ function inferItemMarkerOpacity(scales: Scale[]) {
 
 function inferItemMarkerSize(scales: Scale[], defaults: number) {
   const scale = scaleOf(scales, 'size');
-  // only support constant size scale.
-  // size in category legend means the marker radius.
-  if (scale) return scale.map(NaN) * 2;
+  if (scale instanceof Identity) return scale.map(NaN) * 2;
+  if (scale instanceof Point) return ({ id }) => scale.map(id) * 2;
   return defaults;
 }
 
@@ -150,16 +150,18 @@ function inferCategoryStyle(options, context: GuideComponentContext) {
       ? format(labelFormatter)
       : labelFormatter;
 
-  // here must exists a color scale
   const colorScale = scaleOf(scales, 'color');
   const domain = domainOf(scales);
+  const colorOf = colorScale
+    ? (d) => colorScale.map(d)
+    : () => context.theme.color;
 
   return {
     ...baseStyle,
     data: domain.map((d) => ({
       id: d,
       label: finalLabelFormatter(d),
-      color: colorScale.map(d),
+      color: colorOf(d),
     })),
   };
 }

src/mark/point.ts

@@ -81,7 +81,7 @@ Point.props = {
     { name: 'x', required: true },
     { name: 'y', required: true },
     { name: 'series', scale: 'band' },
-    { name: 'size', scale: 'sqrt' },
+    { name: 'size', quantitative: 'sqrt' },
     { name: 'dx', scale: 'identity' },
     { name: 'dy', scale: 'identity' },
   ],

src/runtime/component.ts

@@ -294,6 +294,18 @@ function inferLegendComponentType(
         combination,
         option: combination.map((scale) => [scale.name, getScaleType(scale)]),
       }));
+
+      // For category legend.
+      for (const { option, combination } of options) {
+        // If every scale is constant, do not display legend.
+        if (option.every((d) => d[1] === 'constant')) continue;
+        if (option.every((d) => d[1] === 'discrete' || d[1] === 'constant')) {
+          return ['legendCategory', combination] as [string, G2ScaleOptions[]];
+        }
+      }
+
+      // For reset legend.
+      // @todo Remove this.
       for (const [componentType, accords] of LEGEND_INFER_STRATEGIES) {
         for (const { option, combination } of options) {
           if (accords.some((accord) => isEqual(sort(accord), sort(option)))) {
@@ -745,9 +757,20 @@ function computeCategoryLegendSize(
   theme: G2Theme,
   library: G2Library,
 ) {
+  const itemMakerSizeOf = () => {
+    const { itemMarkerSize } = component.style || {};
+    if (itemMarkerSize) return itemMarkerSize;
+    const { scales } = component;
+    const size = scales.find((d) => d.name === 'size');
+    if (!size) return itemMarkerSize;
+    return size.range[1] * 2;
+  };
+
   const styleOf = () => {
     const { legendCategory } = theme;
-    return deepMix({}, legendCategory, component.style);
+    return deepMix({}, legendCategory, component.style, {
+      itemMarkerSize: itemMakerSizeOf(),
+    });
   };
 
   const {

src/runtime/mark.ts

@@ -78,7 +78,14 @@ export async function initializeMark(
       return false;
     })
     .flatMap((descriptor) => {
-      const { name, scale: scaleType, scaleKey, range } = descriptor;
+      const {
+        name,
+        scale: scaleType,
+        scaleKey,
+        range,
+        quantitative,
+        ordinal,
+      } = descriptor;
       const valuesArray = nameChannels.filter(([channel]) =>
         channel.startsWith(name),
       );
@@ -106,6 +113,8 @@ export async function initializeMark(
             type,
             range: finalRange,
             ...scaleOptions,
+            quantitative,
+            ordinal,
           },
         };
       });

src/runtime/scale.ts

@@ -23,7 +23,14 @@ import { isTheta } from './coordinate';
 import { useLibrary } from './library';
 import { MarkChannel } from './types/mark';
 
-export function inferScale(name, values, options, coordinates, theme, library) {
+export function inferScale(
+  name: string,
+  values: Primitive[][],
+  options: Record<string, any>,
+  coordinates: G2CoordinateOptions[],
+  theme: G2Theme,
+  library: G2Library,
+) {
   const { guide = {} } = options;
   const type = inferScaleType(name, values, options);
   if (typeof type !== 'string') return options;
@@ -292,19 +299,19 @@ function inferScaleType(
   values: Primitive[][],
   options: G2ScaleOptions,
 ): string | ScaleComponent {
-  const { type, domain, range } = options;
+  const { type, domain, range, quantitative, ordinal } = options;
   if (type !== undefined) return type;
   if (isObject(values)) return 'identity';
   if (typeof range === 'string') return 'linear';
-  if ((domain || range || []).length > 2) return asOrdinalType(name);
+  if ((domain || range || []).length > 2) return asOrdinalType(name, ordinal);
   if (domain !== undefined) {
-    if (isOrdinal([domain])) return asOrdinalType(name);
+    if (isOrdinal([domain])) return asOrdinalType(name, ordinal);
     if (isTemporal(values)) return 'time';
-    return asQuantitativeType(name, range);
+    return asQuantitativeType(name, range, quantitative);
   }
-  if (isOrdinal(values)) return asOrdinalType(name);
+  if (isOrdinal(values)) return asOrdinalType(name, ordinal);
   if (isTemporal(values)) return 'time';
-  return asQuantitativeType(name, range);
+  return asQuantitativeType(name, range, quantitative);
 }
 
 function inferScaleDomain(
@@ -361,8 +368,11 @@ function inferScaleRange(
       return [rangeMin || r0, rangeMax || r1];
     }
     case 'band':
-    case 'point':
-      return [rangeMin || 0, rangeMax || 1];
+    case 'point': {
+      const min = name === 'size' ? 5 : 0;
+      const max = name === 'size' ? 10 : 1;
+      return [rangeMin || min, rangeMax || max];
+    }
     case 'ordinal': {
       return categoricalColors(values, options, domain, theme, library);
     }
@@ -505,20 +515,25 @@ function inferPadding(
   // The scale for enterDelay and enterDuration should has zero padding by default.
   // Because there is no need to add extra delay for the start and the end.
   if (name === 'enterDelay' || name === 'enterDuration') return 0;
-  if (type === 'band') {
-    return isTheta(coordinates) ? 0 : 0.1;
-  }
+  if (name === 'size') return 0;
+  if (type === 'band') return isTheta(coordinates) ? 0 : 0.1;
   // Point scale need 0.5 padding to make interval between first and last point
   // equal to other intervals in polar coordinate.
   if (type === 'point') return 0.5;
   return 0;
 }
 
-function asOrdinalType(name: string) {
+function asOrdinalType(name: string, defaults: string) {
+  if (defaults) return defaults;
   return isQuantitative(name) ? 'point' : 'ordinal';
 }
 
-function asQuantitativeType(name: string, range: Primitive[]) {
+function asQuantitativeType(
+  name: string,
+  range: Primitive[],
+  defaults: string,
+) {
+  if (defaults) return defaults;
   if (name !== 'color') return 'linear';
   return range ? 'linear' : 'sequential';
 }

src/runtime/types/common.ts

@@ -116,6 +116,8 @@ export type ChannelValue = MaybeArray<Primitive>[];
 export type Channel = {
   name?: string;
   scale?: string;
+  quantitative?: string;
+  ordinal?: string;
   scaleName?: string;
   required?: boolean;
   value?: Primitive[];