feat: add tiny ring (#2142)

packages/plots/src/components/tiny/index.ts

@@ -1,13 +1,15 @@
-import Line from './tiny-line';
-import Area from './tiny-area';
-import Column from './tiny-column';
-import Progress from './tiny-progress';
+import Line from './line';
+import Area from './area';
+import Column from './column';
+import Progress from './progress';
+import Ring from './ring';
 
-export type { TinyLineConfig } from './tiny-line';
-export type { TinyAreaConfig } from './tiny-area';
-export type { TinyColumnConfig } from './tiny-column';
-export type { TinyProgressConfig } from './tiny-progress';
+export type { TinyLineConfig } from './line';
+export type { TinyAreaConfig } from './area';
+export type { TinyColumnConfig } from './column';
+export type { TinyProgressConfig } from './progress';
+export type { TinyRingConfig } from './ring';
 
-type TinyOptions = Record<string, typeof Line | typeof Area | typeof Column | typeof Progress>;
+type TinyOptions = Record<string, typeof Line | typeof Area | typeof Column | typeof Progress | typeof Ring>;
 
-export const Tiny: TinyOptions = { Line, Area, Column, Progress };
+export const Tiny: TinyOptions = { Line, Area, Column, Progress, Ring };

packages/plots/src/components/tiny/ring/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TinyRingOptions } from '../../../core';
+import { CommonConfig } from '../../../interface';
+import { BaseChart } from '../../base';
+
+export type TinyRingConfig = CommonConfig<TinyRingOptions>;
+
+const TinyRingChart = (props: TinyRingOptions) => <BaseChart {...props} chartType="TinyRing" />;
+
+export default TinyRingChart;

packages/plots/src/core/base/index.ts

@@ -87,7 +87,7 @@ export abstract class Plot<O extends Options> extends EE {
   /**
    * 获取默认的 options 配置项，每个组件都可以复写
    */
-  protected getDefaultOptions(): Partial<Options> | void { }
+  protected getDefaultOptions(): Partial<Options> | void {}
 
   /**
    * 绘制

packages/plots/src/core/constants/index.ts

@@ -9,11 +9,22 @@ export const CHART_OPTIONS = [
   'canvas',
   'theme',
   'inset',
+  'insetLeft',
+  'insetRight',
+  'insetTop',
+  'insetBottom',
   'padding',
   'paddingTop',
   'paddingRight',
   'paddingBottom',
   'paddingLeft',
+  'margin',
+  'marginTop',
+  'marginRight',
+  'marginBottom',
+  'marginLeft',
+  'depth',
+  'title',
 ];
 
 /** 最终透传给 G2 Spec 的保留字 */
@@ -162,6 +173,8 @@ const EXTEND_KEYS = [
   'keyField',
   'positionField',
   'meta',
+  'tooltip',
+  'animate',
 ];
 export const CONFIG_SHAPE = [
   {

packages/plots/src/core/index.ts

@@ -11,6 +11,7 @@ export type { TinyLineOptions } from './plots/tiny-line';
 export type { TinyAreaOptions } from './plots/tiny-area';
 export type { TinyColumnOptions } from './plots/tiny-column';
 export type { TinyProgressOptions } from './plots/tiny-progress';
+export type { TinyRingOptions } from './plots/tiny-ring';
 export type { RoseOptions } from './plots/rose';
 export type { WaterfallOptions } from './plots/waterfall';
 export type { HistogramOptions } from './plots/histogram';
@@ -36,6 +37,7 @@ import { TinyLine } from './plots/tiny-line';
 import { TinyArea } from './plots/tiny-area';
 import { TinyColumn } from './plots/tiny-column';
 import { TinyProgress } from './plots/tiny-progress';
+import { TinyRing } from './plots/tiny-ring';
 import { Rose } from './plots/rose';
 import { Waterfall } from './plots/waterfall';
 import { Histogram } from './plots/histogram';
@@ -62,6 +64,7 @@ export const Plots = {
   TinyArea,
   TinyColumn,
   TinyProgress,
+  TinyRing,
   Waterfall,
   Histogram,
   Heatmap,

packages/plots/src/core/plots/column/index.ts

@@ -16,6 +16,9 @@ export class Column extends Plot<ColumnOptions> {
   static getDefaultOptions(): Partial<ColumnOptions> {
     return {
       type: 'view',
+      scale: {
+        y: { nice: true },
+      },
       children: [
         {
           type: 'interval',

packages/plots/src/core/plots/gauge/index.ts

@@ -14,7 +14,11 @@ export class Gauge extends Plot<GaugeOptions> {
    * 供外部使用
    */
   static getDefaultOptions(): Partial<GaugeOptions> {
-    return { type: 'view', children: [{ type: 'gauge' }] };
+    return {
+      type: 'view',
+      legend: false,
+      children: [{ type: 'gauge' }],
+    };
   }
 
   /**

packages/plots/src/core/plots/line/index.ts

@@ -14,7 +14,16 @@ export class Line extends Plot<LineOptions> {
    * 供外部使用
    */
   static getDefaultOptions(): Partial<LineOptions> {
-    return { type: 'view', children: [{ type: 'line' }] };
+    return {
+      type: 'view',
+      scale: {
+        y: { nice: true },
+      },
+      animate: {
+        enter: { type: 'growInX' },
+      },
+      children: [{ type: 'line' }],
+    };
   }
 
   /**

packages/plots/src/core/plots/liquid/adaptor.ts

@@ -1,4 +1,4 @@
-import { flow, transformOptions } from '../../utils';
+import { flow, transformOptions, isNumber, set } from '../../utils';
 import { mark } from '../../components';
 import type { Adaptor } from '../../types';
 import type { LiquidOptions } from './type';
@@ -14,6 +14,13 @@ export function adaptor(params: Params) {
    * 图表差异化处理
    */
   const init = (params: Params) => {
+    const {
+      options: { percent },
+    } = params;
+
+    if (isNumber(percent)) {
+      set(params, 'options.data', percent);
+    }
     return params;
   };
 

packages/plots/src/core/plots/radar/index.ts

@@ -16,6 +16,12 @@ export class Radar extends Plot<RadarOptions> {
    */
   static getDefaultOptions(): Partial<RadarOptions> {
     return {
+      axis: {
+        x: { grid: true, line: true },
+        y: { zIndex: 1, title: false, line: true , nice: true},
+      },
+      meta: { x: { padding: 0.5, align: 0 } },
+      interaction: { tooltip: { style: { crosshairsLineDash: [4, 4] } } },
       children: [{ type: 'line' }],
       // 有  polar 和 radar 两种极坐标形式
       coordinateType: 'polar',

packages/plots/src/core/plots/tiny-area/index.ts

@@ -16,8 +16,14 @@ export class TinyArea extends Plot<TinyAreaOptions> {
   static getDefaultOptions(): Partial<TinyAreaOptions> {
     return {
       type: 'view',
+      animate: {
+        enter: { type: 'growInX', duration: 500 },
+      },
       children: [{ type: 'area', axis: false }],
       autoFit: false,
+      padding: 0,
+      margin: 0,
+      tooltip: false
     };
   }
 

packages/plots/src/core/plots/tiny-column/index.ts

@@ -18,6 +18,9 @@ export class TinyColumn extends Plot<TinyColumnOptions> {
       type: 'view',
       children: [{ type: 'interval', axis: false }],
       autoFit: false,
+      padding: 0,
+      margin: 0,
+      tooltip: false,
     };
   }
 

packages/plots/src/core/plots/tiny-line/index.ts

@@ -18,6 +18,12 @@ export class TinyLine extends Plot<TinyLineOptions> {
       type: 'view',
       children: [{ type: 'line', axis: false }],
       autoFit: false,
+      animate: {
+        enter: { type: 'growInX', duration: 500 },
+      },
+      padding: 0,
+      margin: 0,
+      tooltip: false,
     };
   }
 

packages/plots/src/core/plots/tiny-progress/index.ts

@@ -17,6 +17,10 @@ export class TinyProgress extends Plot<TinyProgressOptions> {
     return {
       type: 'view',
       data: [],
+      autoFit: false,
+      margin: 0,
+      padding: 0,
+      tooltip: false,
       children: [
         {
           interaction: { tooltip: false },
@@ -25,7 +29,7 @@ export class TinyProgress extends Plot<TinyProgressOptions> {
           axis: false,
           legend: false,
           encode: { y: (d) => d, color: (d, idx) => idx },
-        }
+        },
       ],
     };
   }

packages/plots/src/core/plots/tiny-ring/adaptor.ts

@@ -0,0 +1,43 @@
+import { flow, transformOptions, set } from '../../utils';
+import { mark } from '../../components';
+import type { Adaptor } from '../../types';
+import type { TinyRingOptions } from './type';
+
+type Params = Adaptor<TinyRingOptions>;
+
+/**
+ * @param chart
+ * @param options
+ */
+export function adaptor(params: Params) {
+  /**
+   * @description radius
+   */
+  const radius = (params: Params) => {
+    const { options } = params;
+    const { radius = 0.8 } = options;
+    set(params, 'options.coordinate.innerRadius', radius);
+    return params;
+  };
+
+  /**
+   * @description 数据转换
+   */
+  const transformData = (params: Params) => {
+    const { options } = params;
+    const { percent, color = [] } = options;
+    if (!percent) return params;
+
+    const transformOption = {
+      scale: {
+        color: { range: color.length ? color : [] },
+      },
+      data: [1, percent],
+    };
+
+    Object.assign(options, { ...transformOption });
+    return params;
+  };
+
+  return flow(radius, transformData, transformOptions, mark)(params);
+}

packages/plots/src/core/plots/tiny-ring/index.ts

@@ -0,0 +1,51 @@
+import { Plot } from '../../base';
+import type { Adaptor } from '../../types';
+import { adaptor } from './adaptor';
+import { TinyRingOptions } from './type';
+
+export type { TinyRingOptions };
+
+export class TinyRing extends Plot<TinyRingOptions> {
+  /** 图表类型 */
+  public type = 'TinyRing';
+
+  /**
+   * 获取进度图默认配置项
+   * 供外部使用
+   */
+  static getDefaultOptions(): Partial<TinyRingOptions> {
+    return {
+      type: 'view',
+      data: [],
+      autoFit: false,
+      margin: 0,
+      padding: 0,
+      coordinate: { type: 'theta' },
+      animate: { enter: { type: 'waveIn' } },
+      interaction: { tooltip: false },
+      tooltip: false,
+      children: [
+        {
+          type: 'interval',
+          axis: false,
+          legend: false,
+          encode: { y: (d) => d, color: (d, idx) => idx },
+        },
+      ],
+    };
+  }
+
+  /**
+   * 获取 进度图 默认配置
+   */
+  protected getDefaultOptions() {
+    return TinyRing.getDefaultOptions();
+  }
+
+  /**
+   * 迷你折线图适配器
+   */
+  protected getSchemaAdaptor(): (params: Adaptor<TinyRingOptions>) => void {
+    return adaptor;
+  }
+}

packages/plots/src/core/plots/tiny-ring/type.ts

@@ -0,0 +1,20 @@
+import type { BaseOptions, Options } from '../../types/common';
+
+export type TinyRingOptions = Options &
+  BaseOptions & {
+    /**
+     * @title 进度
+     */
+    percent: number;
+    /**
+     * @title 颜色
+     * @description [ backgroundColor, progressColor]
+     */
+    color?: [string, string];
+    /**
+     * @title 内径
+     * @description 0 ~ 1
+     * @default 0.8
+     */
+    radius?: number;
+  };

packages/plots/src/core/plots/wordCloud/index.ts

@@ -15,7 +15,7 @@ export class WordCloud extends Plot<WordCloudOptions> {
    * 供外部使用
    */
   static getDefaultOptions(): Partial<WordCloudOptions> {
-    return { type: 'view', children: [{ type: 'wordCloud' }] };
+    return { type: 'view', legend: false, children: [{ type: 'wordCloud' }] };
   }
 
   /**

site/examples/statistics/liquid/demo/liquid-background.js

@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom';
 
 const DemoLiquid = () => {
   const config = {
-    data: .3,
+    percent: .3,
     style: {
       backgroundFill: 'pink',
     },

site/examples/statistics/liquid/demo/liquid-custom-shape.js

@@ -4,12 +4,12 @@ import ReactDOM from 'react-dom';
 
 const DemoLiquid = () => {
   const config = {
-    data: .3,
+    percent: 0.3,
     style: {
       shape: (x, y, r) => {
         const path = [];
         const w = r * 2;
-  
+
         for (let i = 0; i < 5; i++) {
           path.push([
             i === 0 ? 'M' : 'L',

site/examples/statistics/liquid/demo/liquid-pin.js

@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom';
 
 const DemoLiquid = () => {
   const config = {
-    data: .7,
+    percent: 0.7,
     style: {
       shape: 'pin',
       textFill: '#fff',