chore: 迷你图走查 + demo (#1528)

* docs(tiny-line): add tiny demos

* fix(tiny-line): remove tiny lineStyle callback params

* docs(tiny-line): add tiny area demos

* docs(tiny-column): add tiny column demos

* docs(ring-progress): add tiny ring progress demos

* docs(progress): add tiny progress demos

* fix(progress): make ci passed

Author: hustcc

__tests__/unit/plots/progress/index-spec.ts

@@ -19,10 +19,8 @@ describe('progress', () => {
     expect(progress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
 
     progress.update({
-      width: 200,
-      height: 100,
+      ...progress.options,
       percent: 0.5,
-      autoFit: false,
     });
     expect(progress.chart.geometries[0].elements[0].getData().type).toBe('current');
     expect(progress.chart.geometries[0].elements[0].getData().percent).toBe(0.5);
@@ -50,11 +48,8 @@ describe('progress', () => {
     expect(progress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#654321');
 
     progress.update({
-      width: 200,
-      height: 100,
-      percent: 0.6,
-      color: () => ['#654321', '#123456'],
-      autoFit: false,
+      ...progress.options,
+      color: ['#654321', '#123456'],
     });
     expect(progress.chart.geometries[0].elements[0].getData().type).toBe('current');
     expect(progress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
@@ -91,7 +86,7 @@ describe('progress', () => {
     expect(progress.chart.geometries[0].elements[1].shape.attr('lineWidth')).toBe(2);
     expect(progress.chart.geometries[0].elements[1].shape.attr('lineDash')).toEqual([2, 2]);
 
-    const progressStyle = (x, percent, type) => {
+    const progressStyle = (percent, type) => {
       if (type === 'current') {
         return percent > 0.5
           ? {
@@ -120,11 +115,8 @@ describe('progress', () => {
     };
 
     progress.update({
-      width: 200,
-      height: 100,
-      percent: 0.6,
+      ...progress.options,
       progressStyle,
-      autoFit: false,
     });
     expect(progress.chart.geometries[0].elements[0].getData().type).toBe('current');
     expect(progress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
@@ -140,11 +132,8 @@ describe('progress', () => {
     expect(progress.chart.geometries[0].elements[1].shape.attr('lineDash')).toEqual([4, 4]);
 
     progress.update({
-      width: 200,
-      height: 100,
+      ...progress.options,
       percent: 0.4,
-      progressStyle,
-      autoFit: false,
     });
 
     expect(progress.chart.geometries[0].elements[0].getData().type).toBe('current');
@@ -160,4 +149,18 @@ describe('progress', () => {
     expect(progress.chart.geometries[0].elements[1].shape.attr('lineWidth')).toBe(4);
     expect(progress.chart.geometries[0].elements[1].shape.attr('lineDash')).toEqual([4, 4]);
   });
+
+  it('barWidthRatio', () => {
+    const progress = new Progress(createDiv(), {
+      width: 200,
+      height: 100,
+      percent: 0.6,
+      barWidthRatio: 0.1,
+      autoFit: false,
+    });
+
+    progress.render();
+
+    expect(progress.chart.getTheme().columnWidthRatio).toBe(0.1);
+  });
 });

__tests__/unit/plots/ring-progress/index-spec.ts

@@ -113,7 +113,6 @@ describe('tiny-area', () => {
           return item.value;
         }),
       autoFit: false,
-      tooltip: true,
     });
 
     tinyArea.render();
@@ -127,7 +126,7 @@ describe('tiny-area', () => {
     expect(tooltipOption.containerTpl).toBe('<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>');
     expect(tooltipOption.domStyles).toEqual({
       'g2-tooltip': {
-        padding: '2px',
+        padding: '2px 4px',
         fontSize: '10px',
       },
     });

__tests__/unit/plots/tiny-area/index-spec.ts

@@ -10,7 +10,7 @@ describe('tiny-column', () => {
       width: 200,
       height: 100,
       meta: {
-        value: {
+        y: {
           min: 0,
           max: 5000,
         },
@@ -86,7 +86,6 @@ describe('tiny-column', () => {
           return item.value;
         }),
       autoFit: false,
-      tooltip: true,
     });
 
     tinyColumn.render();
@@ -100,7 +99,7 @@ describe('tiny-column', () => {
     expect(tooltipOption.containerTpl).toBe('<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>');
     expect(tooltipOption.domStyles).toEqual({
       'g2-tooltip': {
-        padding: '2px',
+        padding: '2px 4px',
         fontSize: '10px',
       },
     });
@@ -150,4 +149,27 @@ describe('tiny-column', () => {
     expect(geometryTooltipOption.fields).toEqual(['x', 'y']);
     expect(geometryTooltipOption.callback(1, '3000')).toEqual({ value: '有3千' });
   });
+
+  it('columnWidthRatio', () => {
+    const tinyColumn = new TinyColumn(createDiv(), {
+      width: 400,
+      height: 100,
+      meta: {
+        y: {
+          min: 0,
+          max: 5000,
+        },
+      },
+      data: partySupport
+        .filter((o) => o.type === 'FF')
+        .map((item) => {
+          return item.value;
+        }),
+      autoFit: false,
+      columnWidthRatio: 0.9,
+    });
+
+    tinyColumn.render();
+    expect(tinyColumn.chart.getTheme().columnWidthRatio).toBe(0.9);
+  });
 });

__tests__/unit/plots/tiny-column/index-spec.ts

@@ -9,18 +9,12 @@ describe('tiny-line', () => {
     const tinyLine = new TinyLine(createDiv(), {
       width: 80,
       height: 40,
-      meta: {
-        value: {
-          min: 0,
-          max: 5000,
-        },
-      },
       data: partySupport
         .filter((o) => o.type === 'FF')
         .map((item) => {
           return item.value;
         }),
-      autoFit: false,
+      autoFit: true,
     });
 
     tinyLine.render();
@@ -32,7 +26,7 @@ describe('tiny-line', () => {
       width: 80,
       height: 40,
       meta: {
-        value: {
+        y: {
           min: 0,
           max: 5000,
         },
@@ -42,7 +36,7 @@ describe('tiny-line', () => {
         .map((item) => {
           return item.value;
         }),
-      autoFit: false,
+      autoFit: true,
       smooth: true,
     });
 
@@ -63,7 +57,11 @@ describe('tiny-line', () => {
       lineStyle: {
         lineDash: [2, 2],
       },
-      autoFit: false,
+      tooltip: {
+        showCrosshairs: true,
+        showMarkers: true,
+      },
+      autoFit: true,
       appendPadding: 10,
     });
 
@@ -91,8 +89,7 @@ describe('tiny-line', () => {
         .map((item) => {
           return item.value;
         }),
-      autoFit: false,
-      tooltip: true,
+      autoFit: true,
     });
 
     tinyLine.render();
@@ -106,7 +103,7 @@ describe('tiny-line', () => {
     expect(tooltipOption.containerTpl).toBe('<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>');
     expect(tooltipOption.domStyles).toEqual({
       'g2-tooltip': {
-        padding: '2px',
+        padding: '2px 4px',
         fontSize: '10px',
       },
     });

__tests__/unit/plots/tiny-line/index-spec.ts

@@ -0,0 +1,40 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "progress.ts",
+      "title": {
+        "zh": "迷你进度条图",
+        "en": "basic Progress chart"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*nBhpT5HbGOAAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "progress-style.ts",
+      "title": {
+        "zh": "迷你进度条图样式",
+        "en": "Tiny Progress style"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*fQihRrLMIWsAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "progress-style-callback.ts",
+      "title": {
+        "zh": "迷你进度条图回调样式",
+        "en": "Tiny Progress style callback"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*lSOiS4lGCaIAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "progress-width.ts",
+      "title": {
+        "zh": "迷你进度条图大小",
+        "en": "Tiny Progress width"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*4NmuSaVRZ44AAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}

examples/progress/basic/demo/meta.json

@@ -0,0 +1,16 @@
+import { Progress } from '@antv/g2plot';
+
+const progress = new Progress('container', {
+  height: 100,
+  width: 300,
+  autoFit: false,
+  percent: 0.7,
+  progressStyle: (percent: number, type: string) => {
+    if (type === 'current') {
+      return { fill: 'green' };
+    }
+    return { fill: '#999', lineDash: [1, 1], stroke: '#333' };
+  },
+});
+
+progress.render();

examples/progress/basic/demo/progress-style-callback.ts

@@ -0,0 +1,15 @@
+import { Progress } from '@antv/g2plot';
+
+const progress = new Progress('container', {
+  height: 100,
+  width: 300,
+  autoFit: false,
+  percent: 0.7,
+  progressStyle: {
+    stroke: 'grey',
+    lineDash: [4, 4],
+    lineWidth: 1,
+  },
+});
+
+progress.render();

examples/progress/basic/demo/progress-style.ts

@@ -0,0 +1,11 @@
+import { Progress } from '@antv/g2plot';
+
+const progress = new Progress('container', {
+  height: 100,
+  width: 300,
+  autoFit: false,
+  percent: 0.7,
+  barWidthRatio: 0.1,
+});
+
+progress.render();

examples/progress/basic/demo/progress-width.ts

@@ -0,0 +1,10 @@
+import { Progress } from '@antv/g2plot';
+
+const progress = new Progress('container', {
+  height: 100,
+  width: 300,
+  autoFit: false,
+  percent: 0.7,
+});
+
+progress.render();

examples/progress/basic/demo/progress.ts

@@ -0,0 +1,5 @@
+---
+title: 设计规范
+---
+
+设计规范

examples/progress/basic/design.en.md

@@ -0,0 +1,5 @@
+---
+title: 设计规范
+---
+
+设计规范

examples/progress/basic/design.zh.md

@@ -0,0 +1,4 @@
+---
+title: 进度条图
+order: 0
+---

examples/progress/basic/index.en.md

@@ -0,0 +1,4 @@
+---
+title: 进度条图
+order: 0
+---

examples/progress/basic/index.zh.md

@@ -0,0 +1,40 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "ring-progress.ts",
+      "title": {
+        "zh": "迷你进度环图",
+        "en": "basic Ring chart"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*nBhpT5HbGOAAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "ring-progress-style.ts",
+      "title": {
+        "zh": "迷你进度环图样式",
+        "en": "Tiny Ring style"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*fQihRrLMIWsAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "ring-progress-style-callback.ts",
+      "title": {
+        "zh": "迷你进度环图回调样式",
+        "en": "Tiny Ring style callback"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*lSOiS4lGCaIAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "ring-progress-radius.ts",
+      "title": {
+        "zh": "迷你进度环图半径大小",
+        "en": "Tiny Ring radius"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*4NmuSaVRZ44AAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}

examples/ring-progress/basic/demo/meta.json

@@ -0,0 +1,12 @@
+import { RingProgress } from '@antv/g2plot';
+
+const ringProgress = new RingProgress('container', {
+  height: 100,
+  width: 100,
+  autoFit: false,
+  percent: 0.7,
+  innerRadius: 0.95,
+  radius: 0.95,
+});
+
+ringProgress.render();