"DashboardMonitor/src/components/ActiveChart/index.tsx" did not exist on "6ef237e517a3a858b95ab13da5454f1751593a9d"
index.tsx 7.91 KB
Newer Older
陈帅's avatar
陈帅 committed
1 2 3 4 5 6 7 8 9 10 11
import React, { Component } from 'react';
import { Chart, Tooltip, Geom, Coord } from 'bizcharts';
import { DataView } from '@antv/data-set';
import { Divider } from 'antd';
import classNames from 'classnames';
import ReactFitText from 'react-fittext';
import Debounce from 'lodash-decorators/debounce';
import Bind from 'lodash-decorators/bind';
import autoHeight from '../autoHeight';

import styles from './index.less';
陈帅's avatar
陈帅 committed
12

陈帅's avatar
陈帅 committed
13 14 15 16 17 18 19 20 21 22
export interface IPieProps {
  animate?: boolean;
  color?: string;
  colors?: string[];
  selected?: boolean;
  height?: number;
  margin?: [number, number, number, number];
  hasLegend?: boolean;
  padding?: [number, number, number, number];
  percent?: number;
陈帅's avatar
陈帅 committed
23
  data?: {
陈帅's avatar
陈帅 committed
24 25
    x: string | string;
    y: number;
陈帅's avatar
陈帅 committed
26
  }[];
陈帅's avatar
陈帅 committed
27 28 29 30 31 32 33 34 35 36 37 38
  inner?: number;
  lineWidth?: number;
  forceFit?: boolean;
  style?: React.CSSProperties;
  className?: string;
  total?: React.ReactNode | number | (() => React.ReactNode | number);
  title?: React.ReactNode;
  tooltip?: boolean;
  valueFormat?: (value: string) => string | React.ReactNode;
  subTitle?: React.ReactNode;
}
interface IPieState {
陈帅's avatar
陈帅 committed
39
  legendData: { checked: boolean; x: string; color: string; percent: number; y: string }[];
陈帅's avatar
陈帅 committed
40 41 42 43 44 45 46 47 48
  legendBlock: boolean;
}
class Pie extends Component<IPieProps, IPieState> {
  state: IPieState = {
    legendData: [],
    legendBlock: false,
  };

  requestRef: number | undefined;
陈帅's avatar
陈帅 committed
49

陈帅's avatar
陈帅 committed
50
  root!: HTMLDivElement;
陈帅's avatar
陈帅 committed
51

陈帅's avatar
陈帅 committed
52
  chart: G2.Chart | undefined;
陈帅's avatar
陈帅 committed
53 54 55 56 57 58 59

  componentDidMount() {
    window.addEventListener(
      'resize',
      () => {
        this.requestRef = requestAnimationFrame(() => this.resize());
      },
陈帅's avatar
陈帅 committed
60
      { passive: true },
陈帅's avatar
陈帅 committed
61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77
    );
  }

  componentDidUpdate(preProps: IPieProps) {
    const { data } = this.props;
    if (data !== preProps.data) {
      // because of charts data create when rendered
      // so there is a trick for get rendered time
      this.getLegendData();
    }
  }

  componentWillUnmount() {
    if (this.requestRef) {
      window.cancelAnimationFrame(this.requestRef);
    }
    window.removeEventListener('resize', this.resize);
陈帅's avatar
陈帅 committed
78 79 80
    if (this.resize) {
      (this.resize as any).cancel();
    }
陈帅's avatar
陈帅 committed
81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97
  }

  getG2Instance = (chart: G2.Chart) => {
    this.chart = chart;
    requestAnimationFrame(() => {
      this.getLegendData();
      this.resize();
    });
  };

  // for custom lengend view
  getLegendData = () => {
    if (!this.chart) return;
    const geom = this.chart.getAllGeoms()[0]; // 获取所有的图形
    if (!geom) return;
    const items = geom.get('dataArray') || []; // 获取图形对应的

陈帅's avatar
陈帅 committed
98
    const legendData = items.map((item: { color: any; _origin: any }[]) => {
陈帅's avatar
陈帅 committed
99 100 101 102 103 104 105 106 107 108 109
      /* eslint no-underscore-dangle:0 */
      const origin = item[0]._origin;
      origin.color = item[0].color;
      origin.checked = true;
      return origin;
    });

    this.setState({
      legendData,
    });
  };
陈帅's avatar
陈帅 committed
110

陈帅's avatar
陈帅 committed
111 112 113 114 115 116 117 118 119 120 121 122 123 124
  handleRoot = (n: HTMLDivElement) => {
    this.root = n;
  };

  handleLegendClick = (item: any, i: string | number) => {
    const newItem = item;
    newItem.checked = !newItem.checked;

    const { legendData } = this.state;
    legendData[i] = newItem;

    const filteredLegendData = legendData.filter(l => l.checked).map(l => l.x);

    if (this.chart) {
陈帅's avatar
陈帅 committed
125
      this.chart.filter('x', val => filteredLegendData.indexOf(`${val}`) > -1);
陈帅's avatar
陈帅 committed
126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142
    }

    this.setState({
      legendData,
    });
  };

  // for window resize auto responsive legend
  @Bind()
  @Debounce(300)
  resize() {
    const { hasLegend } = this.props;
    const { legendBlock } = this.state;
    if (!hasLegend || !this.root) {
      window.removeEventListener('resize', this.resize);
      return;
    }
陈帅's avatar
陈帅 committed
143 144 145 146 147
    if (
      this.root &&
      this.root.parentNode &&
      (this.root.parentNode as HTMLElement).clientWidth <= 380
    ) {
陈帅's avatar
陈帅 committed
148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167
      if (!legendBlock) {
        this.setState({
          legendBlock: true,
        });
      }
    } else if (legendBlock) {
      this.setState({
        legendBlock: false,
      });
    }
  }

  render() {
    const {
      valueFormat,
      subTitle,
      total,
      hasLegend = false,
      className,
      style,
陈帅's avatar
陈帅 committed
168
      height = 0,
陈帅's avatar
陈帅 committed
169 170
      forceFit = true,
      percent,
陈帅's avatar
陈帅 committed
171
      color,
陈帅's avatar
陈帅 committed
172 173
      inner = 0.75,
      animate = true,
陈帅's avatar
陈帅 committed
174
      colors,
陈帅's avatar
陈帅 committed
175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192
      lineWidth = 1,
    } = this.props;

    const { legendData, legendBlock } = this.state;
    const pieClassName = classNames(styles.pie, className, {
      [styles.hasLegend]: !!hasLegend,
      [styles.legendBlock]: legendBlock,
    });

    const {
      data: propsData,
      selected: propsSelected = true,
      tooltip: propsTooltip = true,
    } = this.props;

    let data = propsData || [];
    let selected = propsSelected;
    let tooltip = propsTooltip;
陈帅's avatar
陈帅 committed
193 194

    const defaultColors = colors;
陈帅's avatar
陈帅 committed
195 196 197
    data = data || [];
    selected = selected || true;
    tooltip = tooltip || true;
陈帅's avatar
陈帅 committed
198
    let formatColor;
陈帅's avatar
陈帅 committed
199 200 201 202 203 204 205 206 207 208 209 210 211 212

    const scale = {
      x: {
        type: 'cat',
        range: [0, 1],
      },
      y: {
        min: 0,
      },
    };

    if (percent || percent === 0) {
      selected = false;
      tooltip = false;
陈帅's avatar
陈帅 committed
213 214 215 216 217 218
      formatColor = (value: string) => {
        if (value === '占比') {
          return color || 'rgba(24, 144, 255, 0.85)';
        }
        return '#F0F2F5';
      };
陈帅's avatar
陈帅 committed
219 220 221 222

      data = [
        {
          x: '占比',
陈帅's avatar
陈帅 committed
223
          y: parseFloat(`${percent}`),
陈帅's avatar
陈帅 committed
224 225 226
        },
        {
          x: '反比',
陈帅's avatar
陈帅 committed
227
          y: 100 - parseFloat(`${percent}`),
陈帅's avatar
陈帅 committed
228 229 230 231 232 233 234 235 236 237 238 239
        },
      ];
    }

    const tooltipFormat: [string, (...args: any[]) => { name?: string; value: string }] = [
      'x*percent',
      (x: string, p: number) => ({
        name: x,
        value: `${(p * 100).toFixed(2)}%`,
      }),
    ];

陈帅's avatar
陈帅 committed
240
    const padding = [12, 0, 12, 0] as [number, number, number, number];
陈帅's avatar
陈帅 committed
241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266

    const dv = new DataView();
    dv.source(data).transform({
      type: 'percent',
      field: 'y',
      dimension: 'x',
      as: 'percent',
    });

    return (
      <div ref={this.handleRoot} className={pieClassName} style={style}>
        <ReactFitText maxFontSize={25}>
          <div className={styles.chart}>
            <Chart
              scale={scale}
              height={height}
              forceFit={forceFit}
              data={dv}
              padding={padding}
              animate={animate}
              onGetG2Instance={this.getG2Instance}
            >
              {!!tooltip && <Tooltip showTitle={false} />}
              <Coord type="theta" innerRadius={inner} />
              <Geom
                style={{ lineWidth, stroke: '#fff' }}
陈帅's avatar
陈帅 committed
267
                tooltip={tooltip ? tooltipFormat : undefined}
陈帅's avatar
陈帅 committed
268 269
                type="intervalStack"
                position="percent"
陈帅's avatar
陈帅 committed
270
                color={['x', percent || percent === 0 ? formatColor : defaultColors] as any}
陈帅's avatar
陈帅 committed
271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312
                selected={selected}
              />
            </Chart>

            {(subTitle || total) && (
              <div className={styles.total}>
                {subTitle && <h4 className="pie-sub-title">{subTitle}</h4>}
                {/* eslint-disable-next-line */}
                {total && (
                  <div className="pie-stat">{typeof total === 'function' ? total() : total}</div>
                )}
              </div>
            )}
          </div>
        </ReactFitText>

        {hasLegend && (
          <ul className={styles.legend}>
            {legendData.map((item, i) => (
              <li key={item.x} onClick={() => this.handleLegendClick(item, i)}>
                <span
                  className={styles.dot}
                  style={{
                    backgroundColor: !item.checked ? '#aaa' : item.color,
                  }}
                />
                <span className={styles.legendTitle}>{item.x}</span>
                <Divider type="vertical" />
                <span className={styles.percent}>
                  {`${(Number.isNaN(item.percent) ? 0 : item.percent * 100).toFixed(2)}%`}
                </span>
                <span className={styles.value}>{valueFormat ? valueFormat(item.y) : item.y}</span>
              </li>
            ))}
          </ul>
        )}
      </div>
    );
  }
}

export default autoHeight()(Pie);