feat: bullet mark

__tests__/plots/static/bullet-custom-color.ts

@@ -0,0 +1,21 @@
+import { G2Spec } from '../../../src';
+
+export function bulletCustomColor(): G2Spec {
+  return {
+    type: 'bullet',
+    coordinate: { transform: [{ type: 'transpose' }] },
+    data: [
+      {
+        title: '重庆',
+        ranges: [30, 90, 120],
+        measures: [65],
+        target: [80],
+      },
+    ],
+    scale: {
+      rangesColor: {
+        ranges: ['#ccc', '#aaa', '#555', '#000'],
+      },
+    },
+  };
+}

__tests__/plots/static/bullet-default.ts

@@ -0,0 +1,16 @@
+import { G2Spec } from '../../../src';
+
+export function bulletDefault(): G2Spec {
+  return {
+    type: 'bullet',
+    coordinate: { transform: [{ type: 'transpose' }] },
+    data: [
+      {
+        title: '重庆',
+        ranges: [30, 90, 120],
+        measures: [65],
+        target: [80],
+      },
+    ],
+  };
+}

__tests__/plots/static/bullet-group.ts

@@ -0,0 +1,34 @@
+import { G2Spec } from '../../../src';
+
+export function bulletGroup(): G2Spec {
+  return {
+    type: 'bullet',
+    coordinate: { transform: [{ type: 'transpose' }] },
+    data: [
+      {
+        title: '重庆',
+        ranges: [30, 90, 120],
+        measures: [65],
+        target: [80],
+      },
+      {
+        title: '杭州',
+        ranges: [30, 90, 150],
+        measures: [50],
+        target: [100],
+      },
+      {
+        title: '广州',
+        ranges: [30, 90, 120],
+        measures: [40],
+        target: [85],
+      },
+      {
+        title: '深圳',
+        ranges: [30, 90, 120],
+        measures: [50],
+        target: [100],
+      },
+    ],
+  };
+}

__tests__/plots/static/bullet-space.ts

@@ -0,0 +1,53 @@
+import { G2Spec } from '../../../src';
+
+export function bulletSpace(): G2Spec {
+  return {
+    type: 'spaceFlex',
+    children: [
+      {
+        type: 'bullet',
+        data: [
+          {
+            title: 'Revenue',
+            ranges: [150, 225, 300],
+            measures: [220, 270],
+            target: [250],
+          },
+        ],
+      },
+      {
+        type: 'bullet',
+        data: [
+          {
+            title: 'Profit',
+            ranges: [20, 25, 60],
+            measures: [21, 23],
+            target: [55],
+          },
+        ],
+      },
+      {
+        type: 'bullet',
+        data: [
+          {
+            title: 'Order Size',
+            ranges: [350, 500, 600],
+            measures: [100, 320],
+            target: [550],
+          },
+        ],
+      },
+      {
+        type: 'bullet',
+        data: [
+          {
+            title: 'Satisfaction',
+            ranges: [1400, 2000, 2600],
+            measures: [1000, 1650],
+            target: [2100],
+          },
+        ],
+      },
+    ],
+  };
+}

__tests__/plots/static/index.ts

@@ -192,4 +192,8 @@ export { soldIntervalCustomShape } from './sold-interval-custom-shape';
 export { gaugeDefault } from './gauge-default';
 export { gaugeCustomColor } from './gauge-custom-color';
 export { gaugeCustomShape } from './gauge-custom-shape';
+export { bulletDefault } from './bullet-default';
+export { bulletCustomColor } from './bullet-custom-color';
+export { bulletSpace } from './bullet-space';
+export { bulletGroup } from './bullet-group';
 export { scoreByItemAreaRadarSize } from './score-by-item-area-radar-size';

__tests__/unit/api/mark.spec.ts

@@ -26,6 +26,7 @@ import {
   Tree,
   WordCloud,
   Gauge,
+  Bullet,
 } from '../../../src/api/mark/mark';
 
 type Mark =
@@ -376,4 +377,10 @@ describe('mark.[node]()', () => {
     expect(node.type).toBe('gauge');
     expect(setCompositeOptions(node).value).toEqual(getOptions());
   });
+
+  it('Bullet() should specify options by API', () => {
+    const node = new Bullet();
+    expect(node.type).toBe('bullet');
+    expect(setCompositeOptions(node).value).toEqual(getOptions());
+  });
 });

__tests__/unit/stdlib/index.spec.ts

@@ -40,6 +40,7 @@ import {
   Tree as TreeGeometry,
   WordCloud as WordCloudGeometry,
   Gauge,
+  Bullet,
 } from '../../../src/mark';
 import { Category10, Category20 } from '../../../src/palette';
 import {
@@ -364,6 +365,7 @@ describe('stdlib', () => {
       'mark.tree': TreeGeometry,
       'mark.wordCloud': WordCloudGeometry,
       'mark.gauge': Gauge,
+      'mark.bullet': Bullet,
       'palette.category10': Category10,
       'palette.category20': Category20,
       'scale.linear': Linear,

src/api/mark/index.ts

@@ -28,6 +28,7 @@ import {
   WordCloud,
   HOMMark,
   Gauge,
+  Bullet,
 } from './mark';
 
 export interface Mark {
@@ -59,6 +60,7 @@ export interface Mark {
   tree(): Tree;
   wordCloud(): WordCloud;
   gauge(): Gauge;
+  bullet(): Bullet;
 }
 
 export { MarkNode } from './base';
@@ -92,4 +94,5 @@ export const mark = {
   tree: Tree,
   wordCloud: WordCloud,
   gauge: Gauge,
+  bullet: Bullet,
 };

src/api/mark/mark.ts

@@ -27,6 +27,7 @@ import {
   WordCloudMark,
   HOMMarkMark,
   GaugeMark,
+  BulletMark,
 } from '../../spec';
 import { NodePropertyDescriptor, defineProps } from '../props';
 import { Concrete } from '../types';
@@ -140,6 +141,10 @@ export interface Gauge extends API<Concrete<GaugeMark>, Gauge> {
   type: 'gauge';
 }
 
+export interface Bullet extends API<Concrete<BulletMark>, Bullet> {
+  type: 'bullet';
+}
+
 export interface HOMMark extends API<Concrete<HOMMarkMark>, HOMMark> {
   type: 'interval';
 }
@@ -357,3 +362,10 @@ export class Gauge extends MarkNode<GaugeMark> {
     super({}, 'gauge');
   }
 }
+
+@defineProps(props)
+export class Bullet extends MarkNode<BulletMark> {
+  constructor() {
+    super({}, 'bullet');
+  }
+}

src/mark/bullet.ts

@@ -0,0 +1,156 @@
+import { deepMix } from '@antv/util';
+import { subObject } from '../utils/helper';
+import { CompositionComponent as CC } from '../runtime';
+import { BulletMark } from '../spec';
+import { maybeAnimation } from '../utils/mark';
+
+export type BulletOptions = Omit<BulletMark, 'type'>;
+
+function dataTransform(data, encode) {
+  const {
+    target = 'target',
+    measures = 'measures',
+    ranges = 'ranges',
+  } = encode || {};
+
+  const dataMap = (data, key: string) => {
+    return data.flatMap((d) => {
+      const keyMeasure = d[key] || [];
+      return keyMeasure.map((m, i) => ({
+        x: d.title,
+        y: m,
+        color: `${key}-${i}`,
+      }));
+    });
+  };
+
+  return {
+    measuresData: dataMap(data, measures),
+    targetData: dataMap(data, target),
+    rangesData: dataMap(data, ranges),
+  };
+}
+
+export const Bullet: CC<BulletOptions> = (options) => {
+  const PUBLIC_OPTIONS = {
+    encode: {
+      x: 'x',
+      y: 'y',
+      color: 'color',
+    },
+  };
+  const DEFAULT_RANGES_OPTIONS = {
+    type: 'interval',
+    transform: [{ type: 'stackY' }],
+    encode: {
+      size: 50,
+    },
+    scale: {
+      color: {
+        range: ['#FFBCB8', '#FFE0B0', '#BFEEC8'],
+        independent: true,
+      },
+    },
+    axis: {
+      x: {
+        title: '',
+        tick: null,
+        labelFontWeight: 600,
+      },
+      y: {
+        grid: null,
+        title: null,
+      },
+    },
+    legend: false,
+    style: {
+      fillOpacity: 0.5,
+    },
+  };
+  const DEFAULT_MEASURES_OPTIONS = {
+    type: 'interval',
+    transform: [{ type: 'stackY' }],
+    scale: {
+      color: {
+        range: ['#5B8FF9', '#61DDAA'],
+        independent: true,
+      },
+    },
+    encode: {
+      size: 40,
+    },
+    labels: [
+      {
+        text: 'y',
+        position: 'inside',
+      },
+    ],
+    legend: false,
+  };
+  const DEFAULT_TARGET_OPTIONS = {
+    type: 'point',
+    encode: {
+      size: 10,
+    },
+    scale: {
+      color: {
+        range: '#39a3f4',
+        independent: true,
+      },
+    },
+    style: {
+      lineWidth: 2,
+    },
+    legend: false,
+  };
+  return (viewOptions) => {
+    const { coordinate = {} } = viewOptions;
+    const {
+      data = {},
+      encode = {},
+      scale = {},
+      style = {},
+      animate = {},
+      ...rest
+    } = options;
+
+    const { measuresData, targetData, rangesData } = dataTransform(
+      data,
+      encode,
+    );
+    const isTranspose = coordinate?.transform?.some(
+      (tran) => tran.type === 'transpose',
+    );
+    return [
+      deepMix({}, PUBLIC_OPTIONS, DEFAULT_RANGES_OPTIONS, {
+        data: rangesData,
+        encode: subObject(encode, 'ranges'),
+        scale: subObject(scale, 'ranges'),
+        style: subObject(style, 'ranges'),
+        animate: maybeAnimation(animate, 'ranges'),
+        ...rest,
+      }),
+      deepMix({}, PUBLIC_OPTIONS, DEFAULT_MEASURES_OPTIONS, {
+        data: measuresData,
+        encode: subObject(encode, 'measures'),
+        scale: subObject(scale, 'measures'),
+        style: subObject(style, 'measures'),
+        animate: maybeAnimation(animate, 'measures'),
+        ...rest,
+      }),
+      deepMix({}, PUBLIC_OPTIONS, DEFAULT_TARGET_OPTIONS, {
+        data: targetData,
+        encode: {
+          shape: isTranspose ? 'line' : 'hyphen',
+          ...subObject(encode, 'target'),
+        },
+        scale: subObject(scale, 'target'),
+        style: subObject(style, 'target'),
+        animate: maybeAnimation(animate, 'target'),
+        ...rest,
+      }),
+    ];
+  };
+};
+
+Bullet.props = {};

src/mark/index.ts

@@ -26,6 +26,7 @@ export { ForceGraph } from './forceGraph';
 export { Tree } from './tree';
 export { WordCloud } from './wordCloud';
 export { Gauge } from './gauge';
+export { Bullet } from './bullet';
 
 export type { IntervalOptions } from './interval';
 export type { RectOptions } from './rect';
@@ -53,3 +54,4 @@ export type { ForceGraphOptions } from './forceGraph';
 export type { TreeOptions } from './tree';
 export type { WordCloudOptions } from './wordCloud';
 export type { GaugeOptions } from './gauge';
+export type { BulletOptions } from './bullet';