Merge pull request #15 from hang1017/hang

feat:点图初版完成

docs/point.mdx

@@ -0,0 +1,182 @@
+---
+route: /point
+name: 'Point'
+---
+
+import { Playground, Props } from 'docz';
+import Point from '@charts/point';
+
+# Point charts
+
+## 散点图
+
+<Playground>
+  <Point
+    data={
+      [
+        {"x": 180, "y": 90, "type": "A"},
+        {"x": 178, "y": 70, "type": "A"},
+        {"x": 175, "y": 68, "type": "A"},
+        {"x": 172, "y": 65, "type": "A"},
+        {"x": 170, "y": 60, "type": "A"},
+        {"x": 165, "y": 59, "type": "A"},
+        {"x": 183, "y": 71, "type": "A"},
+        {"x": 177, "y": 66, "type": "A"},
+        {"x": 176, "y": 59, "type": "A"},
+        {"x": 170, "y": 62, "type": "A"}
+      ]
+    }
+    height={200}
+    pointSize={6}
+    title={'散点图'}
+    titlePosition={'center'}
+    padding={[10, 40, 20, 40]}
+    valueSection={{
+      'x': [160, 190],
+      'y': [30, 100],
+    }}
+    titleMap={{
+      'x': '身高',
+      'y': '体重'
+    }}
+    units={{
+      'x': 'cm',
+      'y': 'kg'
+    }}
+  />
+</Playground>
+
+## 多色散点图
+
+<Playground>
+  <Point
+    data={[
+      {"x": 180, "y": 90, "type": "A"},
+      {"x": 178, "y": 70, "type": "A"},
+      {"x": 175, "y": 68, "type": "A"},
+      {"x": 172, "y": 65, "type": "A"},
+      {"x": 170, "y": 60, "type": "A"},
+      {"x": 165, "y": 59, "type": "A"},
+      {"x": 183, "y": 71, "type": "A"},
+      {"x": 177, "y": 66, "type": "A"},
+      {"x": 176, "y": 59, "type": "A"},
+      {"x": 170, "y": 62, "type": "A"},
+      {"x": 180, "y": 85, "type": "B"},
+      {"x": 178, "y": 66, "type": "B"},
+      {"x": 175, "y": 63, "type": "B"},
+      {"x": 172, "y": 61, "type": "B"},
+      {"x": 179, "y": 59, "type": "B"},
+      {"x": 165, "y": 58, "type": "B"},
+      {"x": 183, "y": 75, "type": "B"},
+      {"x": 177, "y": 70, "type": "B"},
+      {"x": 176, "y": 68, "type": "B"},
+      {"x": 173, "y": 61, "type": "B"}
+    ]}
+    height={300}
+    colors={['rgb(77, 201, 115)', 'red']}
+    titleMap={{
+      'x': '身高',
+      'y': '体重'
+    }}
+    units={{
+      'x': 'cm',
+      'y': 'kg'
+    }}
+  />
+</Playground>
+
+## 多形状散点图
+
+<Playground>
+  <Point
+    data={[
+      {"x": 180, "y": 90, "type": "A"},
+      {"x": 178, "y": 70, "type": "A"},
+      {"x": 175, "y": 68, "type": "A"},
+      {"x": 172, "y": 65, "type": "A"},
+      {"x": 170, "y": 60, "type": "A"},
+      {"x": 165, "y": 59, "type": "A"},
+      {"x": 183, "y": 71, "type": "A"},
+      {"x": 177, "y": 66, "type": "A"},
+      {"x": 176, "y": 59, "type": "A"},
+      {"x": 170, "y": 62, "type": "A"},
+      {"x": 180, "y": 85, "type": "B"},
+      {"x": 178, "y": 66, "type": "B"},
+      {"x": 175, "y": 63, "type": "B"},
+      {"x": 172, "y": 61, "type": "B"},
+      {"x": 179, "y": 59, "type": "B"},
+      {"x": 165, "y": 58, "type": "B"},
+      {"x": 183, "y": 75, "type": "B"},
+      {"x": 177, "y": 70, "type": "B"},
+      {"x": 176, "y": 68, "type": "B"},
+      {"x": 173, "y": 61, "type": "B"}
+    ]}
+    height={300}
+    colors={['rgb(28, 146, 255)', 'rgb(77, 201, 115)']}
+    shapes={['circle', 'square']}
+    titleMap={{
+      'x': '身高',
+      'y': '体重'
+    }}
+    units={{
+      'x': 'cm',
+      'y': 'kg'
+    }}
+  />
+</Playground>
+
+## 扰动点图
+
+<Playground>
+  <Point
+    data={[
+      {"x": "春天", "y": 90, "type": "A"},
+      {"x": "春天", "y": 70, "type": "A"},
+      {"x": "春天", "y": 68, "type": "A"},
+      {"x": "春天", "y": 65, "type": "A"},
+      {"x": "春天", "y": 60, "type": "A"},
+      {"x": "夏天", "y": 59, "type": "A"},
+      {"x": "夏天", "y": 71, "type": "A"},
+      {"x": "夏天", "y": 66, "type": "A"},
+      {"x": "夏天", "y": 59, "type": "A"},
+      {"x": "夏天", "y": 62, "type": "A"},
+      {"x": "秋天", "y": 85, "type": "B"},
+      {"x": "秋天", "y": 66, "type": "B"},
+      {"x": "秋天", "y": 63, "type": "B"},
+      {"x": "秋天", "y": 61, "type": "B"},
+      {"x": "秋天", "y": 59, "type": "B"},
+      {"x": "冬天", "y": 58, "type": "B"},
+      {"x": "冬天", "y": 75, "type": "B"},
+      {"x": "冬天", "y": 70, "type": "B"},
+      {"x": "冬天", "y": 68, "type": "B"},
+      {"x": "冬天", "y": 61, "type": "B"}
+    ]}
+    height={400}
+    colors={['rgb(28, 146, 255)', 'rgb(77, 201, 115)']}
+    units={{
+      'y': 'ml'
+    }}
+  />
+</Playground>
+
+## API
+
+|参数|说明|类型|默认值|
+|--|--|--|--|
+|height|指定图表的高度，单位为 'px'|number|400|
+|data|图表的数据源|Array|[]|
+|colors|自定义颜色|string[]|--|
+|title|标题|string|--|
+|titlePosition|标题的位置,可选：`left`、`center`、`right`|string|`left`|
+|titleMap|`x`轴和`y`轴对应的坐标名称|object|{}|
+|units|`x`轴和`y`轴对应坐标的单位|object|{}|
+|valueSection|`x`轴和`y`轴对应坐标的区间|object|{}|
+|shapes|散点的形状|string[]|['circle']|
+|pointSize|散点的大小|number|4|
+|padding|内边距属性|number[]|auto|
+|xAxis|x坐标轴的配置|object|{}|
+|yAxis|y坐标轴的配置|object|{}|
+|legend|图例样式|object|{}|
+|showTitle|`Tooltip`的标题展示|boolean|false|
+|tooltip|提示信息的样式配置|object|{}|
+

src/point/index.tsx

@@ -0,0 +1,4 @@
+import PointChart from './point-chart';
+
+export { IDataItem } from './point-chart';
+export default PointChart;

src/point/point-chart.less

@@ -0,0 +1,7 @@
+@import '~antd/lib/style/themes/default.less';
+
+@prefix-cls: ~'rc-line-chart';
+
+.@{prefix-cls} {
+  position: relative;
+}

src/point/point-chart.tsx

@@ -0,0 +1,164 @@
+import React from 'react';
+import classNames from 'classnames';
+import { G2, Chart, Tooltip, Geom, Coord, Axis, Legend, LegendProps, AxisProps, View, TooltipProps } from 'bizcharts';
+import { DataView } from '@antv/data-set';
+import { isArray } from 'awe-utils';
+import { TPadding } from '../global';
+import Title, { TPosition } from '../components/title';
+
+const prefixCls = 'rc-line-chart';
+
+export interface IDataItem {
+  x: any;
+  [key: string]: number;
+}
+
+export interface IPointChartProps {
+  className?: string;
+  style?: React.CSSProperties;
+  padding?: TPadding;
+  height?: number;
+  colors?: string[];
+  data: IDataItem[];
+  title?: string ;
+  titlePosition?: TPosition;
+  legend?: LegendProps;
+  xAxis?: AxisProps;
+  // y轴相关配置
+  yAxis?: Partial<AxisProps>;
+  tooltip?: TooltipProps;
+  showTitle?: boolean;
+  titleMap?: {
+    [key: string]: any;
+  };
+  units?: {
+    [key: string]:any;
+  }
+  valueSection?: object;
+  shapes?: string[];
+  pointSize?: number;
+}
+
+const PointChart: React.FC<IPointChartProps> = (props) => {
+  const {
+    className,
+    style,
+    padding,
+    height,
+    colors,
+    data,
+    title,
+    titlePosition,
+    legend,
+    xAxis,
+    yAxis,
+    tooltip,
+    showTitle,
+    titleMap,
+    units,
+    valueSection,
+    shapes,
+    pointSize,
+  } = props;
+
+  // 检测 x 值是数值还是字符串
+  // false: number; true: string
+  let xFlag = false;
+  if(isArray(data)) {
+    const item = data[0];
+    if(!item) return;
+    typeof(item[`x`]) === 'string' ? xFlag = true : xFlag = false;
+  }
+
+  // scale cols
+  let cols = {};
+  if(valueSection[`y`] && valueSection[`y`].length > 1) {
+    cols[`y`] = {
+      min: valueSection[`y`][0],
+      max: valueSection[`y`][1],
+    }
+  }
+  if(valueSection[`x`] && valueSection[`x`].length > 1) {
+    cols[`x`] = {
+      min: valueSection[`x`][0],
+      max: valueSection[`x`][1],
+    }
+  }
+
+  const [chartData, setChartData] = React.useState([]);
+
+  React.useEffect(() => {
+    if(isArray(data)) {
+      const item = data[0];
+      if(!item) return ;
+      setChartData(props.data);
+    }
+  }, [props.data]);
+
+  return (
+    <div
+      className={classNames(className, {
+        [`${prefixCls}`]: true
+      })}
+      style={style}
+    >
+      <Title
+        position={titlePosition}
+        text={title}
+      />
+      <Chart
+        height={height}
+        padding={padding}
+        data={chartData}
+        scale={cols}
+        forceFit
+      >
+        <Tooltip 
+          showTitle={showTitle}
+          crosshairs={{
+            type: "cross"
+          }}
+          itemTpl="<li data-index={index} style=&quot;margin-bottom:4px;&quot;><span style=&quot;background-color:{color};&quot; class=&quot;g2-tooltip-marker&quot;></span>{name}<br/>{value}</li>"
+          {...tooltip}
+        />
+        <Legend {...legend} />
+        <Axis name="x" {...xAxis} />
+        <Axis name="y" {...yAxis} />
+        <Geom
+          type="point"
+          position="x*y"
+          opacity={0.65}
+          shape={['type', shapes]}
+          color={['type', colors]}
+          size={pointSize}
+          adjust="jitter"
+          tooltip={[
+            "x*y*type", 
+            (x, y, type) => {
+              return {
+                name: type, 
+                value: xFlag ? x+' : '+y+units[`y`] : titleMap[`x`]+': '+x+units[`x`]+' ,'+titleMap[`y`]+': '+y+units[`y`], 
+              }
+            }
+          ]}
+        />
+      </Chart>
+    </div>
+  )
+}
+
+PointChart.defaultProps = {
+  height: 400,
+  pointSize: 4,
+  padding: 'auto',
+  showTitle: false,
+  shapes: ['circle'],
+  valueSection: {},
+}
+
+export default PointChart;
+
+
+
+
+