text: import React from 'react';
  import { Chart, Tooltip, Geom, Legend, Axis } from 'bizcharts';
  import DataSet from '@antv/data-set';
  import Slider from 'bizcharts-plugin-slider';
  import autoHeight from '../autoHeight';
  import styles from './index.less';
  
  @autoHeight()
  export default class TimelineChart extends React.Component {
    render() {
      const {
        title,
        height = 400,
        padding = [60, 20, 40, 40],
        titleMap = {
          y1: 'y1',
          y2: 'y2',
        },
        borderWidth = 2,
        data = [
          {
            x: 0,
            y1: 0,
            y2: 0,
          },
        ],
      } = this.props;
  
      data.sort((a, b) => a.x - b.x);
  
      let max;
      if (data[0] && data[0].y1 && data[0].y2) {
        max = Math.max(
          [...data].sort((a, b) => b.y1 - a.y1)[0].y1,
          [...data].sort((a, b) => b.y2 - a.y2)[0].y2
        );
      }
  
      const ds = new DataSet({
        state: {
          start: data[0].x,
          end: data[data.length - 1].x,
        },
      });
  
      const dv = ds.createView();
      dv
        .source(data)
        .transform({
          type: 'filter',
          callback: obj => {
            const date = obj.x;
            return date <= ds.state.end && date >= ds.state.start;
          },
        })
        .transform({
          type: 'map',
          callback(row) {
            const newRow = { ...row };
            newRow[titleMap.y1] = row.y1;
            newRow[titleMap.y2] = row.y2;
            return newRow;
          },
        })
        .transform({
          type: 'fold',
          fields: [titleMap.y1, titleMap.y2], // 展开字段集
          key: 'key', // key字段
          value: 'value', // value字段
        });
  
      const timeScale = {
        type: 'time',
        tickInterval: 60 * 60 * 1000,
        mask: 'HH:mm',
        range: [0, 1],
      };
  
      const cols = {
        x: timeScale,
        value: {
          max,
          min: 0,
        },
      };
  
      const SliderGen = () => (
        <Slider
          padding={[0, padding[1] + 20, 0, padding[3]]}
          width="auto"
          height={26}
          xAxis="x"
          yAxis="y1"
          scales={{ x: timeScale }}
          data={data}
          start={ds.state.start}
          end={ds.state.end}
          backgroundChart={{ type: 'line' }}
          onChange={({ startValue, endValue }) => {
            ds.setState('start', startValue);
            ds.setState('end', endValue);
          }}
        />
      );
  
      return (
        <div className={styles.timelineChart} style={{ height: height + 30 }}>
          <div>
            {title && <h4>{title}</h4>}
            <Chart height={height} padding={padding} data={dv} scale={cols} forceFit>
              <Axis name="x" />
              <Tooltip />
              <Legend name="key" position="top" />
              <Geom type="line" position="x*value" size={borderWidth} color="key" />
            </Chart>
            <div style={{ marginRight: -20 }}>
              <SliderGen />
            </div>
          </div>
        </div>
      );
    }
  }
  