Feat: 创建了连续型图例

__tests__/unit/ui/legend/continuous-spec.ts

@@ -0,0 +1,244 @@
+import { Canvas } from '@antv/g';
+import { Renderer as CanvasRenderer } from '@antv/g-canvas';
+import { Continuous } from '../../../../src';
+import { createDiv } from '../../../utils';
+
+// const webglRenderer = new WebGLRenderer();
+
+const renderer = new CanvasRenderer({
+  enableDirtyRectangleRenderingDebug: false,
+  enableAutoRendering: true,
+  enableDirtyRectangleRendering: true,
+});
+
+const div = createDiv();
+
+// @ts-ignore
+const canvas = new Canvas({
+  container: div,
+  width: 600,
+  height: 600,
+  renderer,
+});
+
+const continuous = new Continuous({
+  attrs: {
+    title: {
+      content: '连续图例',
+    },
+    label: {
+      align: 'outside',
+    },
+    rail: {
+      type: 'size',
+      width: 300,
+      height: 30,
+    },
+    min: 0,
+    max: 100,
+    color: '#f1a545',
+  },
+});
+
+canvas.appendChild(continuous);
+canvas.render();
+
+describe('continuous', () => {
+  test('basic', async () => {
+    // const continuous = new Continuous({
+    // attrs: {
+    //   // x: 50,
+    //   // y: 50,
+    //   title: {
+    //     content: "I'm title",
+    //     spacing: 20,
+    //     align: 'left',
+    //     style: {
+    //       fill: 'gray',
+    //       fontSize: 16,
+    //       fontWeight: 'bold',
+    //     },
+    //   },
+    //   padding: 10,
+    //   // label: false,
+    //   label: {
+    //     // align: 'rail',
+    //     // align: 'outside',
+    //     align: 'outside',
+    //     spacing: 10,
+    //     // formatter: (val, idx) => {
+    //     //   if (val === 100 || val === 200) {
+    //     //     return String(val);
+    //     //   }
+    //     //   return '';
+    //     // },
+    //   },
+    //   backgroundStyle: {
+    //     default: {
+    //       fill: '#f3f3f3',
+    //     },
+    //   },
+    //   // handle: false,
+    //   // handle: {
+    //   //   text: {
+    //   //     align: 'inside',
+    //   //   },
+    //   // },
+    //   rail: {
+    //     width: 280,
+    //     height: 30,
+    //     // type: 'size',
+    //     chunked: true,
+    //     ticks: [110, 120, 130, 140, 150, 160, 170, 180, 190],
+    //     backgroundColor: '#eee8d5',
+    //   },
+    //   // slidable: false,
+    //   min: 100,
+    //   max: 200,
+    //   // start: 110,
+    //   // end: 190,
+    //   step: 10,
+    //   color: ['#d0e3fa', '#acc7f6', '#8daaf2', '#6d8eea', '#4d73cd', '#325bb1', '#5a3e75', '#8c3c79', '#e23455', '#e7655b'],
+    //   value: [100, 200],
+    // },
+
+    // });
+
+    // title
+    expect(continuous.firstChild.attr('text')).toBe('连续图例');
+    expect(continuous.getElementById('startHandle').attr('x')).toBe(0);
+    expect(continuous.getElementById('endHandle').attr('x')).toBe(300);
+
+    continuous.update({
+      start: 10,
+      end: 50,
+    });
+
+    expect(continuous.getElementById('startHandle').attr('x')).toBe(30);
+    expect(continuous.getElementById('endHandle').attr('x')).toBe(150);
+
+    console.log(continuous);
+  });
+
+  test('size', async () => {
+    expect(continuous.getElementById('railPathGroup').children.length).toBe(1);
+    expect(continuous.getElementById('railPathGroup').firstChild.attr('path')[0][2]).toBe(30);
+    expect(continuous.getElementById('railPathGroup').firstChild.attr('path')[2][2]).toBe(0);
+  });
+
+  test('size chunked', async () => {
+    continuous.update({
+      rail: {
+        chunked: true,
+        ticks: [20, 30, 60, 80],
+      },
+      color: [
+        '#d0e3fa',
+        '#acc7f6',
+        '#8daaf2',
+        '#6d8eea',
+        '#4d73cd',
+        '#325bb1',
+        '#5a3e75',
+        '#8c3c79',
+        '#e23455',
+        '#e7655b',
+      ],
+    });
+    expect(continuous.getElementById('railPathGroup').children.length).toBe(5);
+    expect(continuous.getElementById('railPathGroup').children[0].attr('fill')).toBe('#d0e3fa');
+    expect(continuous.getElementById('railPathGroup').children[1].attr('fill')).toBe('#acc7f6');
+    expect(continuous.getElementById('railPathGroup').children[2].attr('fill')).toBe('#8daaf2');
+    expect(continuous.getElementById('railPathGroup').children[3].attr('fill')).toBe('#6d8eea');
+    expect(continuous.getElementById('railPathGroup').children[4].attr('fill')).toBe('#4d73cd');
+    expect(continuous.getElementById('railPathGroup').firstChild.attr('path')[2][2]).toBe(30 - 30 * 0.2);
+    expect(continuous.getElementById('railPathGroup').firstChild.attr('path')[3][2]).toBe(30);
+  });
+
+  test('color', async () => {
+    continuous.update({
+      rail: {
+        type: 'color',
+        chunked: false,
+      },
+    });
+    expect(continuous.getElementById('railPathGroup').children.length).toBe(1);
+    expect(continuous.getElementById('railPathGroup').children[0].attr('fill')).toBe('#d0e3fa');
+  });
+
+  test('color chunked', async () => {
+    continuous.update({
+      rail: {
+        type: 'color',
+        chunked: true,
+      },
+      color: [
+        '#d0e3fa',
+        '#acc7f6',
+        '#8daaf2',
+        '#6d8eea',
+        '#4d73cd',
+        '#325bb1',
+        '#5a3e75',
+        '#8c3c79',
+        '#e23455',
+        '#e7655b',
+      ],
+    });
+    expect(continuous.getElementById('railPathGroup').children.length).toBe(5);
+    expect(continuous.getElementById('railPathGroup').children[0].attr('fill')).toBe('#d0e3fa');
+    expect(continuous.getElementById('railPathGroup').children[1].attr('fill')).toBe('#acc7f6');
+    expect(continuous.getElementById('railPathGroup').children[2].attr('fill')).toBe('#8daaf2');
+    expect(continuous.getElementById('railPathGroup').children[3].attr('fill')).toBe('#6d8eea');
+    expect(continuous.getElementById('railPathGroup').children[4].attr('fill')).toBe('#4d73cd');
+    expect(continuous.getElementById('railPathGroup').firstChild.attr('path')[2][2]).toBe(0);
+  });
+
+  // test('vertical', async () => {
+  //   const div = createDiv();
+
+  //   // @ts-ignore
+  //   const canvas = new Canvas({
+  //     container: div,
+  //     width: 600,
+  //     height: 600,
+  //     renderer,
+  //   });
+
+  //   const continuous = new Continuous({
+  //     attrs: {
+  //       x: 50,
+  //       y: 0,
+  //       title: {
+  //         content: "I'm title",
+  //       },
+  //       label: {
+  //         align: 'rail',
+  //         spacing: 0
+  //       },
+  //       orient: 'vertical',
+  //       width: 100,
+  //       height: 300,
+  //       backgroundStyle: {
+  //         default: {
+  //           fill: 'gray',
+  //         },
+  //       },
+  //       handle: false,
+  //       rail: {
+  //         width: 50,
+  //         height: 200,
+  //         // type: 'size',
+  //         chunked: true,
+  //         ticks: [120, 140, 160, 180],
+  //       },
+  //       min: 100,
+  //       max: 200,
+  //       color: ['#d0e3fa', '#acc7f6', '#8daaf2', '#6d8eea', '#4d73cd', '#325bb1'],
+  //       value: [100, 200],
+  //     },
+  //   });
+  //   canvas.appendChild(continuous);
+  //   canvas.render();
+  // });
+});

docs/api/ui/legend.en.md

@@ -0,0 +1 @@
+`markdown:docs/api/ui/legend.zh.md`

docs/api/ui/legend.zh.md

@@ -0,0 +1,90 @@
+---
+title: Legend
+order: 5
+---
+
+# 图例
+
+> 图例（legend）是图表的辅助元素，使用颜色、大小、形状区分不同的数据类型，用于图表中数据的筛选
+
+## 引入
+
+```ts
+import { Category, Continuous } from '@antv/gui';
+```
+
+### 基本配置
+
+| **属性名**      | **类型**                                | **描述**       | **默认值**     |
+| --------------- | --------------------------------------- | -------------- | -------------- |
+| padding         | <code>number \| number []</code>        | 内边距         | `10`           |
+| orient          | <code>'horizontal' \| 'vertical'</code> | 横向、纵向模式 | `'horizontal'` |
+| backgroundStyle | <code>MixAttrs</code>                   | 图例背景样式   | `[]`           |
+| title           | <code>TitleCfg</code>                   | 图例标题配置   | `[]`           |
+| type            | <code>'category' \| 'continuous'</code> | 高度           | `[]`           |
+
+### 连续图例配置
+
+| **属性名** | **类型**                           | **描述**   | **默认值**     |
+| ---------- | ---------------------------------- | ---------- | -------------- |
+| min        | <code>number</code>                | 最小值     | `[]`           |
+| max        | <code>number</code>                | 最大值     | `[]`           |
+| start      | <code>number</code>                | 开始区间   | `min`          |
+| end        | <code>number</code>                | 结束区间   | `max`          |
+| color      | <code>string \| string[]</code>    | 颜色       | `[]`           |
+| label      | <code>false \| LabelCfg</code>     | 标签       | `[]`           |
+| rail       | <code>RailCfg</code>               | 色板       | `[]`           |
+| slidable   | <code>boolean</code>               | 是否可滑动 | `true`         |
+| step       | <code>number</code>                | 步长       | `(max-min)*1%` |
+| handle     | <code>false \| HandleCfg</code>    | 手柄配置   | `[]`           |
+| indicator  | <code>false \| indicatorCfg</code> | 指示器配置 | `[]`           |
+
+### TitleCfg
+
+| **属性名** | **类型**                                   | **描述**           | **默认值** |
+| ---------- | ------------------------------------------ | ------------------ | ---------- |
+| content    | <code>string</code>                        | 标题               |            |
+| spacing    | <code>number</code>                        | 标题与图例元素间距 |            |
+| align      | <code>'left' \| 'center' \| 'right'</code> | 标题对齐方式       |            |
+| style      | <code>ShapeAttrs</code>                    | 标题样式           |            |
+| formatter  | <code>(text:string)=>string</code>         | 标题格式化         |            |
+
+### LabelCfg
+
+| **属性名** | **类型**                                          | **描述**       | **默认值** |
+| ---------- | ------------------------------------------------- | -------------- | ---------- |
+| style      | <code>ShapeAttrs</code>                           | 标签样式       | `[]`       |
+| spacing    | <code>number</code>                               | 标签与图例间距 | `10`       |
+| formatter  | <code>(value: number, idx: number)=>string</code> | 标签文本格式化 | `[]`       |
+| align      | <code>'rail' \| 'inside' \| 'outside'</code>      | 标签对齐方式   | `rail`     |
+
+### RailCfg
+
+| **属性名**      | **类型**                       | **描述**                     | **默认值** |
+| --------------- | ------------------------------ | ---------------------------- | ---------- |
+| width           | <code>number</code>            | 色板宽度                     | `[]`       |
+| height          | <code>number</code>            | 色板高度                     | `[]`       |
+| type            | <code>'color' \| 'size'</code> | 色板类型                     | `color`    |
+| chunked         | <code>boolean</code>           | 是否分块                     | `false`    |
+| ticks           | <code>number[]</code>          | 分块分割点（label 显示的值） | `[]`       |
+| isGradient      | <code>boolean \| 'auto'</code> | 是否使用渐变色               | `auto`     |
+| backgroundColor | <code>string</code>            | 色板背景色                   | `[]`       |
+
+### HandleCfg
+
+| **属性名** | **类型**            | **描述**                 | **默认值**                                                                                        |
+| ---------- | ------------------- | ------------------------ | ------------------------------------------------------------------------------------------------- |
+| size       | <code>number</code> | 手柄大小                 | `4`                                                                                               |
+| text       | <code>Object</code> | 手柄文本                 | `{formatter: (value:number)=>string, style: ShapeAttrs, align: 'rail' \| 'inside' \| 'outside' }` |
+| icon       | <code>Object</code> | 手柄图标                 | `{marker: MarkerCfg}`                                                                             |
+| spacing    | <code>number</code> | 手柄文本到手柄图标的间距 | `10`                                                                                              |
+
+### IndicatorCfg
+
+| **属性名**      | **类型**                        | **描述**             | **默认值**                                               |
+| --------------- | ------------------------------- | -------------------- | -------------------------------------------------------- |
+| size            | <code>number</code>             | 指示器大小           | `8`                                                      |
+| spacing         | <code>number</code>             | 指示器文本到色板间距 | `5`                                                      |
+| padding         | <code>number \| number[]</code> | 指示器文本内边距     | `5`                                                      |
+| backgroundStyle | <code>ShapeAttrs</code>         | 指示器背景样式       | `[]`                                                     |
+| text            | <code>Object</code>             | 指示器文本样式       | `{style: ShapeAttrs, formatter:(value: number)=>string}` |

examples/legend/API.en.md

@@ -0,0 +1 @@
+`markdown:docs/api/ui/continuous.en.md`

examples/legend/API.zh.md

@@ -0,0 +1 @@
+`markdown:docs/api/ui/continuous.zh.md`

examples/legend/demo/basic.ts

@@ -0,0 +1,39 @@
+import { Canvas } from '@antv/g';
+import { Renderer as CanvasRenderer } from '@antv/g-canvas';
+import { Continuous } from '@antv/gui';
+
+const renderer = new CanvasRenderer({
+  enableDirtyRectangleRenderingDebug: false,
+  enableAutoRendering: true,
+  enableDirtyRectangleRendering: true,
+});
+
+// @ts-ignore
+const canvas = new Canvas({
+  container: 'container',
+  width: 600,
+  height: 300,
+  renderer,
+});
+
+const continuous = new Continuous({
+  attrs: {
+    title: {
+      content: '连续图例',
+    },
+    label: {
+      align: 'outside',
+    },
+    rail: {
+      width: 300,
+      height: 30,
+      ticks: [20, 40, 60, 80],
+    },
+    handle: false,
+    min: 0,
+    max: 100,
+    color: '#ef923c',
+  },
+});
+
+canvas.appendChild(continuous);