chore: opt treemap (#2152)

packages/plots/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ant-design/plots",
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-beta.2",
   "description": "G2Plot Statistical chart",
   "bugs": {
     "url": "https://github.com/ant-design/ant-design-charts/issues"

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

@@ -14,7 +14,15 @@ export class Area extends Plot<AreaOptions> {
    * 供外部使用
    */
   static getDefaultOptions(): Partial<AreaOptions> {
-    return { type: 'view', children: [{ type: 'area' }] };
+    return {
+      type: 'view',
+      children: [{ type: 'area' }],
+      interaction: {
+        tooltip: {
+          shared: true,
+        },
+      },
+    };
   }
 
   /**

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

@@ -1,6 +1,6 @@
 import { mark } from '../../components';
 import type { Adaptor } from '../../types';
-import { flow, transformOptions } from '../../utils';
+import { flow, transformOptions, get, isArray } from '../../utils';
 import type { BarOptions } from './type';
 
 type Params = Adaptor<BarOptions>;
@@ -17,5 +17,37 @@ export function adaptor(params: Params) {
     return params;
   };
 
-  return flow(init, transformOptions, mark)(params);
+  /**
+   * @title 背景图
+   * @description 通过新增 interval 实现
+   */
+  const background = (params: Params) => {
+    const { options } = params;
+    const { scale, markBackground, data, children } = options;
+    const domain = get(scale, 'y.domain', []);
+    if (markBackground && domain.length && isArray(data)) {
+      const domainMax = 'domainMax';
+      const backgroundData = data.map((item) => {
+        return {
+          ...item,
+          [domainMax]: domain[domain.length - 1],
+        };
+      });
+      children.unshift({
+        type: 'interval',
+        data: backgroundData,
+        yField: domainMax,
+        tooltip: false,
+        legend: false,
+        style: {
+          fill: '#eee',
+        },
+        label: false,
+        ...markBackground,
+      });
+    }
+    return params;
+  };
+
+  return flow(init, background, transformOptions, mark)(params);
 }

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

@@ -14,7 +14,16 @@ export class Bar extends Plot<BarOptions> {
    * 供外部使用
    */
   static getDefaultOptions(): Partial<BarOptions> {
-    return { type: 'view', children: [{ type: 'interval', coordinate: { transform: [{ type: 'transpose' }] } }] };
+    return {
+      type: 'view',
+      coordinate: { transform: [{ type: 'transpose' }] },
+      children: [{ type: 'interval' }],
+      interaction: {
+        tooltip: {
+          shared: true,
+        },
+      },
+    };
   }
 
   /**

packages/plots/src/core/plots/bar/type.ts

@@ -1,3 +1,11 @@
 import type { BaseOptions, Options } from '../../types/common';
 
-export type BarOptions = Options & BaseOptions;
+type CommonOptions = Options & BaseOptions;
+
+export type BarOptions = Options &
+  BaseOptions & {
+    /**
+     * @title mark 背景配置
+     */
+    markBackground?: CommonOptions;
+  };

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

@@ -1,6 +1,6 @@
 import { Plot } from '../../base';
 import type { Adaptor } from '../../types';
-import { adaptor } from './adaptor';
+import { adaptor } from '../bar/adaptor';
 import { ColumnOptions } from './type';
 
 export type { ColumnOptions };

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

@@ -1,3 +1,3 @@
-import type { BaseOptions, Options } from '../../types/common';
+import type { BarOptions } from '../bar/type';
 
-export type ColumnOptions = Options & BaseOptions;
+export type ColumnOptions = BarOptions;

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

@@ -19,6 +19,11 @@ export class Line extends Plot<LineOptions> {
       scale: {
         y: { nice: true },
       },
+      interaction: {
+        tooltip: {
+          shared: true,
+        },
+      },
       animate: {
         enter: { type: 'growInX' },
       },

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

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

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

@@ -20,6 +20,7 @@ export {
   includes,
   map,
   maxBy,
+  isObject,
 } from 'lodash-es';
 export { getCustomKeys } from './get-custom-keys';
 export { isCompositePlot } from './is-composite-plot';

packages/plots/src/util/is-valid-element.ts

@@ -1,5 +1,5 @@
 export const isValidElement = (jsxCode: string): boolean => {
-  const jsxRegex = /react(.*?).createElement/gi;
+  const jsxRegex = /react/i;
 
   return jsxRegex.test(jsxCode);
 };

site/examples/statistics/bar/demo/background.js

@@ -0,0 +1,71 @@
+import { Bar } from '@ant-design/plots';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+const data = [
+  {
+    labelName: '蓝领',
+    value: 110,
+  },
+  {
+    labelName: '白领',
+    value: 220,
+  },
+  {
+    labelName: '制造业蓝领',
+    value: 330,
+  },
+  {
+    labelName: '退休人员',
+    value: 440,
+  },
+];
+
+const DemoBar = () => {
+  const config = {
+    data,
+    xField: 'labelName',
+    yField: 'value',
+    paddingRight: 80,
+    style: {
+      maxWidth: 25,
+    },
+    markBackground: {
+      label: {
+        text: (d) => {
+          return `${(d.value / 1000) * 100}% | ${d.value}`;
+        },
+        position: 'right',
+        dx: 80,
+        style: {
+          fill: '#aaa',
+          fillOpacity: 1,
+          fontSize: 14,
+        },
+      },
+      style: {
+        fill: '#eee',
+      },
+    },
+    scale: {
+      y: {
+        domain: [0, 1000],
+      },
+    },
+    axis: {
+      x: {
+        tick: false,
+        title: false,
+      },
+      y: {
+        grid: false,
+        tick: false,
+        label: false,
+        title: false,
+      },
+    },
+  };
+  return <Bar {...config} />;
+};
+
+ReactDOM.render(<DemoBar />, document.getElementById('container'));

site/examples/statistics/bar/demo/meta.json

@@ -32,9 +32,17 @@
       "filename": "normalized-stacked.js",
       "title": {
         "zh": "归一化条形图",
-        "en": "Normalized Stacked Chart"
+        "en": "Normalized Bar Chart"
       },
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*m6vKSptL6qkAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "background.js",
+      "title": {
+        "zh": "背景条形图",
+        "en": "Background Bar Chart"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*oDkdRodUnXwAAAAAAAAAAAAADmJ7AQ/original"
     }
   ]
 }

site/examples/statistics/treemap/demo/meta.json

@@ -10,7 +10,7 @@
         "zh": "矩阵树图",
         "en": "Treemap Chart"
       },
-      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*BD2zQIr7D5MAAAAAAAAAAAAADmJ7AQ/original"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*Ob1jSbCUl8cAAAAAAAAAAABkARQnAQ"
     }
   ]
 }

site/examples/statistics/treemap/demo/treemap.js

@@ -3,49 +3,52 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 const DemoTreemap = () => {
+  const data = {
+    name: 'root',
+    children: [
+      { name: '分类 1', value: 560 },
+      { name: '分类 2', value: 500 },
+      { name: '分类 3', value: 150 },
+      { name: '分类 4', value: 140 },
+      { name: '分类 5', value: 115 },
+      { name: '分类 6', value: 95 },
+      { name: '分类 7', value: 90 },
+      { name: '分类 8', value: 75 },
+      { name: '分类 9', value: 98 },
+      { name: '分类 10', value: 60 },
+      { name: '分类 11', value: 45 },
+      { name: '分类 12', value: 40 },
+      { name: '分类 13', value: 40 },
+      { name: '分类 14', value: 35 },
+      { name: '分类 15', value: 40 },
+      { name: '分类 16', value: 40 },
+      { name: '分类 17', value: 40 },
+      { name: '分类 18', value: 30 },
+      { name: '分类 19', value: 28 },
+      { name: '分类 20', value: 16 },
+    ],
+  };
   const config = {
-    width: 1100,
-    height: 900,
-    autoFit: false,
-    data: {
-      type: "fetch",
-      value: "https://assets.antv.antgroup.com/g2/flare-treemap.json",
-    },
-    valueField: 'size',
-    colorField: (d) => d.parent.data.name.split(".")[1],
-    layout: {
-      // 
-      path: (d) => d.name.replace(/\./g, "/"),
-      // treemapBinary、treemapDice、treemapSlice、treemapSliceDice、treemapSquarify、treemapResquarify
-      tile: "treemapBinary",
-      paddingInner: 1,
-    },
-    meta: {
+    data,
+    colorField: 'value',
+    valueField: 'value',
+    scale: {
       color: {
         range: [
-          "#4e79a7",
-          "#f28e2c",
-          "#e15759",
-          "#76b7b2",
-          "#59a14f",
-          "#edc949",
-          "#af7aa1",
-          "#ff9da7",
-          "#9c755f",
-          "#bab0ab",
+          '#4e79a7',
+          '#f28e2c',
+          '#e15759',
+          '#76b7b2',
+          '#59a14f',
+          '#edc949',
+          '#af7aa1',
+          '#ff9da7',
+          '#9c755f',
+          '#bab0ab',
         ],
       },
     },
-    style: {
-      labelText: (d) =>
-        d.data.name
-          .split(".")
-          .pop()
-          .split(/(?=[A-Z][a-z])/g)[0],
-      labelFill: "#000",
-      labelPosition: "top-left",
-      fillOpacity: 0.5,
-    },
+    legend: false,
   };
   return <Treemap {...config} />;
 };