feat: add thresholds params in gauge mark (#5021)

antvis · May 15, 2023 · 66a4a8e · 66a4a8e
1 parent 88d0e02
commit 66a4a8e
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 66 deletions.
diff --git a/__tests__/plots/static/gauge-custom-color.ts b/__tests__/plots/static/gauge-custom-color.ts
@@ -8,11 +8,11 @@ export function gaugeCustomColor(): G2Spec {
         target: 120,
         total: 400,
         name: 'score',
+        thresholds: [100, 200, 400],
       },
     },
     scale: {
       color: {
-        domain: [100, 200, 400],
         range: ['#F4664A', '#FAAD14', 'green'],
       },
     },

diff --git a/site/docs/spec/mark/gauge.en.md b/site/docs/spec/mark/gauge.en.md
@@ -0,0 +1,6 @@
+---
+title: gauge
+order: 1
+---
+
+<embed src="@/docs/spec/mark/gauge.zh.md"></embed>
diff --git a/site/docs/spec/mark/gauge.zh.md b/site/docs/spec/mark/gauge.zh.md
@@ -0,0 +1,57 @@
+---
+title: gauge
+order: 1
+---
+
+仪表盘
+
+## 开始使用
+
+<img alt="wordCloud" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*hpjTRr6LM7IAAAAAAAAAAAAADmJ7AQ/original
+" width="600" />
+
+```js
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({
+  container: 'container',
+  theme: 'classic',
+  autoFit: true,
+});
+
+chart
+  .gauge()
+  .data({
+    value: {
+      target: 120,
+      total: 400,
+      name: 'score',
+    },
+  })
+  .legend(false);
+
+chart.render();
+```
+
+## 选项
+
+| 属性   | 描述                     | 类型        | 默认值 |
+| ------ | ------------------------ | ----------- | ------ |
+| data   | 数据                     | `GaugeData` | -      |
+| style  | 配置图形样式和标签样式   | -           | -      |
+| labels | 自定义节点数据标签的配置 | `label[]`   | `[]`   |
+
+## data
+
+| 属性       | 描述     | 类型       | 默认值 |
+| ---------- | -------- | ---------- | ------ |
+| target     | 目标值   | `number`   | -      |
+| total      | 总计值   | `number`   | -      |
+| percent    | 百分比   | `number`   | -      |
+| thresholds | 阈值区间 | `number[]` | -      |
+
+## style
+
+复合图形标记需要通过不同的前缀来区分图形的配置。
+
+- `<label>`: 数据标签的前缀，例如：`labelText` 设置标签的 text 文本。
diff --git a/site/examples/general/gauge/demo/gauge-custom-color.ts b/site/examples/general/gauge/demo/gauge-custom-color.ts
@@ -0,0 +1,28 @@
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({
+  container: 'container',
+  theme: 'classic',
+  autoFit: true,
+});
+
+chart
+  .gauge()
+  .data({
+    value: {
+      target: 159,
+      total: 400,
+      name: 'score',
+      thresholds: [100, 200, 400],
+    },
+  })
+  .scale('color', {
+    range: ['#F4664A', '#FAAD14', 'green'],
+  })
+  .style(
+    'textContent',
+    (target, total) => `得分：${target}\n占比：${(target / total) * 100}%`,
+  )
+  .legend(false);
+
+chart.render();
diff --git a/site/examples/general/gauge/demo/gauge-custom-shape.ts b/site/examples/general/gauge/demo/gauge-custom-shape.ts
diff --git a/site/examples/general/gauge/demo/meta.json b/site/examples/general/gauge/demo/meta.json
@@ -13,10 +13,10 @@
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*hpjTRr6LM7IAAAAAAAAAAAAADmJ7AQ/original"
     },
     {
-      "filename": "gauge-custom-shape.ts",
+      "filename": "gauge-custom-color.ts",
       "title": {
-        "zh": "自定义仪表盘指示器",
-        "en": "Custom Shape Gauge Chart"
+        "zh": "自定义仪表盘颜色",
+        "en": "Custom Color Gauge Chart"
       },
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*VSrGTYrM954AAAAAAAAAAAAADmJ7AQ/original"
     }

diff --git a/src/mark/gauge.ts b/src/mark/gauge.ts
@@ -10,20 +10,27 @@ import { Radial } from '../coordinate';
 import { applyStyle, getOrigin } from '../shape/utils';
 import { select } from '../utils/selection';
 
+export type GaugeData = {
+  target?: number;
+  total?: number;
+  percent?: number;
+  name?: string;
+  thresholds?: number[];
+};
+
 export type GaugeOptions = Omit<GaugeMark, 'type'>;
 
-function dataTransform(data, scale) {
-  const { name = 'score', target, total, percent } = data;
+function dataTransform(data: GaugeData, scale) {
+  const { name = 'score', target, total, percent, thresholds = [] } = data;
   const _target = percent || target;
   const _total = percent ? 1 : total;
-  const { color } = scale;
   const newScale = {
     y: {
       domain: [0, _total],
     },
     ...scale,
   };
-  if (!color) {
+  if (!thresholds.length) {
     return {
       targetData: [{ x: name, y: _target, color: 'target' }],
       totalData: [
@@ -35,12 +42,11 @@ function dataTransform(data, scale) {
       scale: newScale,
     };
   }
-  const { domain = [] } = color;
   return {
     targetData: [{ x: name, y: _target, color: 'target' }],
-    totalData: domain.map((d, i) => ({
+    totalData: thresholds.map((d, i) => ({
       x: name,
-      y: i >= 1 ? d - domain[i - 1] : d,
+      y: i >= 1 ? d - thresholds[i - 1] : d,
       color: i,
     })),
     target: _target,