stories/feat.connect.stories.js

import React from 'react';

import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';

import { Wcontainer, Wline, Wbar, Util, Wscatter } from '@alicloud/cloud-charts';

const lineData = [
  {
    name: '机房A',
    data: [
      [1483372800000, 1592],
      [1483459200000, 4092],
      [1483545600000, 3714],
      [1483632000000, 3984],
      [1483718400000, 6514],
      [1483804800000, 6666],
      [1483891200000, 6023],
      [1483977600000, 4018],
    ],
  },
  {
    name: '机房B',
    data: [
      [1483372800000, 3592],
      [1483459200000, 6092],
      [1483545600000, 5714],
      [1483632000000, 5984],
      [1483718400000, 8514],
      [1483804800000, 8666],
      [1483891200000, 8023],
      [1483977600000, 6018],
    ],
  },
];

const bugData2 = [
  {
      "name": "cluster_c59744a96652c4887a0d2ee0eefd6d6d1",
      "data": [
          [
              1725948060000,
              9.239
          ],
          // [
          //     1725948120000,
          //     9.132
          // ],
          [
              1725948180000,
              9.01
          ],
          [
              1725948240000,
              9.147
          ],
          [
              1725948300000,
              9.162
          ]
      ]
  }
];
const bugData = [
  {
      "name": "cluster_c59744a96652c4887a0d2ee0eefd6d6d1",
      "data": [
          [
              1725948060000,
              55.88
          ],
          [
              1725948120000,
              56.53
          ],
          [
              1725948180000,
              56.324
          ],
          [
              1725948240000,
              56.284
          ],
          [
              1725948300000,
              56.304
          ]
      ]
  }
]

const barData = [
  {
    name: '柱1',
    data: [
      ['一', 59],
      ['二', 23],
      ['三', 19],
      ['四', 27],
      ['五', 77],
      ['六', 100],
      ['七', 70],
      ['八', 61],
      ['九', 15],
    ],
  },
  {
    name: '柱2',
    data: [
      ['一', 92],
      ['二', 15],
      ['三', 4],
      ['四', 49],
      ['五', 64],
      ['六', 76],
      ['七', 21],
      ['八', 100],
      ['九', 71],
    ],
  },
];

const stories = storiesOf('connect', module);

class ConnectDemo extends React.Component {
  chart1 = null;
  chart2 = null;
  chart3 = null;
  componentDidMount() {
    new Util.Connect([this.chart1, this.chart2], {
      custom(e, target, source) {
        console.log(e, target);
        target.showTooltip({ x: e.x, y: e.y });
      },
    });
  }
  render() {
    return (
      <div style={{ display: 'flex', flexDirection: 'column', padding: 20 }}>
        <Wline height="280" getChartInstance={(c) => (this.chart1 = c)} config={{}} data={lineData} />
        <Wbar height="280" getChartInstance={(c) => (this.chart2 = c)} config={{}} data={barData} />
        <Wscatter height="280" getChartInstance={(c) => (this.chart3 = c)} config={{}} data={lineData} />
      </div>
    );
  }
}
stories.add('线柱联动', () => <ConnectDemo />);

class ConnectDataDemo extends React.Component {
  chart1 = null;
  chart2 = null;
  chart3 = null;
  componentDidMount() {
    new Util.Connect([this.chart1, this.chart2, this.chart3], {
      type: 'data',
    });
  }
  render() {
    return (
      <div style={{ display: 'flex', flexDirection: 'column', padding: 20 }}>
        <Wline
          height="280"
          width="300"
          getChartInstance={(c) => (this.chart1 = c)}
          config={{
            padding: [40, 400, 'auto', 40],
          }}
          data={bugData2}
        />
        {/* <Wbar height="280" getChartInstance={(c) => (this.chart2 = c)} config={{}} data={barData} /> */}
        <Wline
          height="280"
          // width="300"
          getChartInstance={(c) => (this.chart3 = c)}
          config={{
            // padding: [40, 10, 24, 400],
            xAxis: {
              type: "time"
            }
          }}
          data={bugData}
        />
      </div>
    );
  }
}
stories.add('按数据联动', () => <ConnectDataDemo />);

let arr = [
  {
    name: 'CPU使用率',
    data: [
      [1687303860000, 4.054],
      [1687303920000, 4.058],
      [1687303980000, 4.127],
      [1687304040000, 4.059],
      [1687304100000, 5.72],
      [1687304160000, 7.188],
      [1687304220000, 7.006],
      [1687304280000, 5.675],
      [1687304340000, 5.121],
      [1687304400000, 5.115],
      [1687304460000, 5.051],
      [1687304520000, 4.677],
      [1687304580000, 5.033],
      [1687304640000, 4.499],
      [1687304700000, 4.375],
      [1687304760000, 4.327],
      [1687304820000, 4.352],
      [1687304880000, 4.419],
      [1687304940000, 4.422],
      [1687305000000, 4.307],
      [1687305060000, 4.393],
      [1687305120000, 4.184],
      [1687305180000, 4.238],
      [1687305240000, 4.303],
      [1687305300000, 4.312],
      [1687305360000, 4.376],
      [1687305420000, 4.352],
      [1687305480000, 4.309],
      [1687305540000, 4.819],
      [1687305600000, 4.376],
      [1687305660000, 5.208],
      [1687305720000, 5.615],
      [1687305780000, 4.511],
      [1687305840000, 4.362],
      [1687305900000, 4.331],
      [1687305960000, 4.362],
      [1687306020000, 4.387],
      [1687306080000, 4.391],
      [1687306140000, 4.35],
      [1687306200000, 4.583],
      [1687306260000, 4.821],
      [1687306320000, 4.602],
      [1687306380000, 4.687],
      [1687306440000, 4.704],
      [1687306500000, 4.314],
      [1687306560000, 4.665],
      [1687306620000, 4.841],
      [1687306680000, 4.488],
      [1687306740000, 4.343],
      [1687306800000, 4.357],
      [1687306860000, 4.565],
      [1687306920000, 4.533],
      [1687306980000, 4.656],
      [1687307040000, 4.418],
      [1687307100000, 4.434],
      [1687307160000, 4.396],
      [1687307220000, 4.235],
      [1687307280000, 4.3],
      [1687307340000, 4.176],
      [1687307400000, 4.132],
      [1687307460000, 4.293],
      [1687307520000, 4.152],
      [1687307580000, 4.116],
      [1687307640000, 4.218],
      [1687307700000, 4.322],
      [1687307760000, 4.518],
      [1687307820000, 4.211],
      [1687307880000, 4.236],
      [1687307940000, 4.207],
      [1687308000000, 4.165],
      [1687308060000, 4.276],
      [1687308120000, 4.276],
      [1687308180000, 4.25],
      [1687308240000, 4.206],
      [1687308300000, 4.217],
      [1687308360000, 4.256],
      [1687308420000, 4.248],
      [1687308480000, 4.215],
      [1687308540000, 4.108],
      [1687308600000, 4.115],
      [1687308660000, 4.056],
      [1687308720000, 4.558],
      [1687308780000, 4.428],
      [1687308840000, 4.232],
      [1687308900000, 4.299],
      [1687308960000, 4.303],
      [1687309020000, 4.151],
      [1687309080000, 4.185],
      [1687309140000, 4.182],
      [1687309200000, 4.221],
      [1687309260000, 4.561],
      [1687309320000, 4.626],
      [1687309380000, 4.654],
      [1687309440000, 4.459],
      [1687309500000, 4.428],
      [1687309560000, 4.416],
      [1687309620000, 4.389],
      [1687309680000, 4.364],
      [1687309740000, 4.434],
      [1687309800000, 4.519],
      [1687309860000, 4.407],
      [1687309920000, 4.309],
      [1687309980000, 4.404],
      [1687310040000, 4.424],
      [1687310100000, 4.398],
      [1687310160000, 4.693],
      [1687310220000, 4.65],
      [1687310280000, 4.484],
      [1687310340000, 4.616],
      [1687310400000, 4.541],
      [1687310460000, 4.568],
      [1687310520000, 4.421],
      [1687310580000, 4.311],
      [1687310640000, 4.256],
      [1687310700000, 4.488],
      [1687310760000, 4.572],
      [1687310820000, 4.706],
      [1687310880000, 4.505],
      [1687310940000, 4.515],
      [1687311000000, 4.391],
      [1687311060000, 4.426],
      [1687311120000, 4.466],
      [1687311180000, 4.843],
      [1687311240000, 4.598],
      [1687311300000, 4.645],
      [1687311360000, 4.601],
      [1687311420000, 4.461],
      [1687311480000, 4.994],
      [1687311540000, 4.73],
      [1687311600000, 4.493],
      [1687311660000, 4.458],
      [1687311720000, 4.52],
      [1687311780000, 4.716],
      [1687311840000, 4.64],
      [1687311900000, 4.737],
      [1687311960000, 4.707],
      [1687312020000, 4.783],
      [1687312080000, 4.451],
      [1687312140000, 4.554],
      [1687312200000, 4.415],
      [1687312260000, 4.599],
      [1687312320000, 4.653],
      [1687312380000, 4.59],
      [1687312440000, 4.801],
      [1687312500000, 4.634],
      [1687312560000, 4.582],
      [1687312620000, 4.97],
      [1687312680000, 4.936],
      [1687312740000, 5.324],
      [1687312800000, 4.629],
      [1687312860000, 4.786],
      [1687312920000, 4.716],
      [1687312980000, 4.899],
      [1687313040000, 4.675],
      [1687313100000, 4.813],
      [1687313160000, 4.898],
      [1687313220000, 4.63],
      [1687313280000, 4.731],
      [1687313340000, 4.936],
      [1687313400000, 4.936],
      [1687313460000, 4.817],
      [1687313520000, 4.585],
      [1687313580000, 4.586],
      [1687313640000, 4.752],
      [1687313700000, 4.853],
      [1687313760000, 4.937],
      [1687313820000, 4.938],
      [1687313880000, 4.778],
      [1687313940000, 4.724],
      [1687314000000, 5.17],
      [1687314060000, 5.059],
      [1687314120000, 5.044],
      [1687314180000, 4.997],
      [1687314240000, 5.015],
      [1687314300000, 4.741],
      [1687314360000, 4.974],
      [1687314420000, 4.712],
      [1687314480000, 4.932],
      [1687314540000, 5.422],
      [1687314600000, 5.168],
    ],
  },
];
let arr1 = [
  {
    name: 'load1',
    data: [
      [1687303860000, 0.219],
      [1687303920000, 0.204],
      [1687303980000, 0.184],
      [1687304040000, 0.164],
      [1687304100000, 0.207],
      [1687304160000, 0.256],
      [1687304220000, 0.291],
      [1687304280000, 0.327],
      [1687304340000, 0.271],
      [1687304400000, 0.246],
      [1687304460000, 0.246],
      [1687304520000, 0.259],
      [1687304580000, 0.246],
      [1687304640000, 0.224],
      [1687304700000, 0.247],
      [1687304760000, 0.259],
      [1687304820000, 0.216],
      [1687304880000, 0.221],
      [1687304940000, 0.213],
      [1687305000000, 0.189],
      [1687305060000, 0.173],
      [1687305120000, 0.182],
      [1687305180000, 0.186],
      [1687305240000, 0.22],
      [1687305300000, 0.205],
      [1687305360000, 0.219],
      [1687305420000, 0.232],
      [1687305480000, 0.247],
      [1687305540000, 0.201],
      [1687305600000, 0.266],
      [1687305660000, 0.253],
      [1687305720000, 0.229],
      [1687305780000, 0.212],
      [1687305840000, 0.178],
      [1687305900000, 0.159],
      [1687305960000, 0.179],
      [1687306020000, 0.195],
      [1687306080000, 0.197],
      [1687306140000, 0.19],
      [1687306200000, 0.192],
      [1687306260000, 0.229],
      [1687306320000, 0.21],
      [1687306380000, 0.181],
      [1687306440000, 0.197],
      [1687306500000, 0.196],
      [1687306560000, 0.229],
      [1687306620000, 0.206],
      [1687306680000, 0.236],
      [1687306740000, 0.213],
      [1687306800000, 0.216],
      [1687306860000, 0.25],
      [1687306920000, 0.258],
      [1687306980000, 0.235],
      [1687307040000, 0.201],
      [1687307100000, 0.188],
      [1687307160000, 0.189],
      [1687307220000, 0.197],
      [1687307280000, 0.235],
      [1687307340000, 0.195],
      [1687307400000, 0.216],
      [1687307460000, 0.268],
      [1687307520000, 0.264],
      [1687307580000, 0.237],
      [1687307640000, 0.189],
      [1687307700000, 0.159],
      [1687307760000, 0.195],
      [1687307820000, 0.193],
      [1687307880000, 0.214],
      [1687307940000, 0.212],
      [1687308000000, 0.248],
      [1687308060000, 0.254],
      [1687308120000, 0.215],
      [1687308180000, 0.203],
      [1687308240000, 0.197],
      [1687308300000, 0.183],
      [1687308360000, 0.211],
      [1687308420000, 0.196],
      [1687308480000, 0.189],
      [1687308540000, 0.172],
      [1687308600000, 0.181],
      [1687308660000, 0.197],
      [1687308720000, 0.208],
      [1687308780000, 0.233],
      [1687308840000, 0.211],
      [1687308900000, 0.189],
      [1687308960000, 0.199],
      [1687309020000, 0.202],
      [1687309080000, 0.178],
      [1687309140000, 0.223],
      [1687309200000, 0.248],
      [1687309260000, 0.248],
      [1687309320000, 0.262],
      [1687309380000, 0.241],
      [1687309440000, 0.264],
      [1687309500000, 0.298],
      [1687309560000, 0.254],
      [1687309620000, 0.244],
      [1687309680000, 0.231],
      [1687309740000, 0.222],
      [1687309800000, 0.205],
      [1687309860000, 0.183],
      [1687309920000, 0.19],
      [1687309980000, 0.196],
      [1687310040000, 0.226],
      [1687310100000, 0.258],
      [1687310160000, 0.222],
      [1687310220000, 0.222],
      [1687310280000, 0.258],
      [1687310340000, 0.264],
      [1687310400000, 0.24],
      [1687310460000, 0.242],
      [1687310520000, 0.245],
      [1687310580000, 0.226],
      [1687310640000, 0.212],
      [1687310700000, 0.229],
      [1687310760000, 0.26],
      [1687310820000, 0.237],
      [1687310880000, 0.246],
      [1687310940000, 0.232],
      [1687311000000, 0.22],
      [1687311060000, 0.185],
      [1687311120000, 0.195],
      [1687311180000, 0.213],
      [1687311240000, 0.193],
      [1687311300000, 0.211],
      [1687311360000, 0.211],
      [1687311420000, 0.218],
      [1687311480000, 0.224],
      [1687311540000, 0.232],
      [1687311600000, 0.242],
      [1687311660000, 0.248],
      [1687311720000, 0.247],
      [1687311780000, 0.252],
      [1687311840000, 0.235],
      [1687311900000, 0.266],
      [1687311960000, 0.224],
      [1687312020000, 0.233],
      [1687312080000, 0.241],
      [1687312140000, 0.26],
      [1687312200000, 0.306],
      [1687312260000, 0.267],
      [1687312320000, 0.223],
      [1687312380000, 0.226],
      [1687312440000, 0.247],
      [1687312500000, 0.24],
      [1687312560000, 0.207],
      [1687312620000, 0.247],
      [1687312680000, 0.29],
      [1687312740000, 0.294],
      [1687312800000, 0.265],
      [1687312860000, 0.276],
      [1687312920000, 0.301],
      [1687312980000, 0.268],
      [1687313040000, 0.249],
      [1687313100000, 0.282],
      [1687313160000, 0.303],
      [1687313220000, 0.294],
      [1687313280000, 0.269],
      [1687313340000, 0.269],
      [1687313400000, 0.274],
      [1687313460000, 0.261],
      [1687313520000, 0.261],
      [1687313580000, 0.268],
      [1687313640000, 0.3],
      [1687313700000, 0.256],
      [1687313760000, 0.28],
      [1687313820000, 0.277],
      [1687313880000, 0.294],
      [1687313940000, 0.297],
      [1687314000000, 0.255],
      [1687314060000, 0.27],
      [1687314120000, 0.244],
      [1687314180000, 0.256],
      [1687314240000, 0.259],
      [1687314300000, 0.238],
      [1687314360000, 0.248],
      [1687314420000, 0.248],
      [1687314480000, 0.243],
      [1687314540000, 0.264],
      [1687314600000, 0.264],
    ],
  },
  {
    name: 'load5',
    data: [
      [1687303860000, 0.195],
      [1687303920000, 0.193],
      [1687303980000, 0.188],
      [1687304040000, 0.181],
      [1687304100000, 0.188],
      [1687304160000, 0.203],
      [1687304220000, 0.221],
      [1687304280000, 0.24],
      [1687304340000, 0.236],
      [1687304400000, 0.232],
      [1687304460000, 0.23],
      [1687304520000, 0.234],
      [1687304580000, 0.232],
      [1687304640000, 0.225],
      [1687304700000, 0.229],
      [1687304760000, 0.235],
      [1687304820000, 0.228],
      [1687304880000, 0.227],
      [1687304940000, 0.225],
      [1687305000000, 0.216],
      [1687305060000, 0.207],
      [1687305120000, 0.204],
      [1687305180000, 0.199],
      [1687305240000, 0.205],
      [1687305300000, 0.203],
      [1687305360000, 0.206],
      [1687305420000, 0.212],
      [1687305480000, 0.22],
      [1687305540000, 0.209],
      [1687305600000, 0.228],
      [1687305660000, 0.229],
      [1687305720000, 0.225],
      [1687305780000, 0.22],
      [1687305840000, 0.209],
      [1687305900000, 0.199],
      [1687305960000, 0.197],
      [1687306020000, 0.197],
      [1687306080000, 0.197],
      [1687306140000, 0.193],
      [1687306200000, 0.193],
      [1687306260000, 0.202],
      [1687306320000, 0.199],
      [1687306380000, 0.191],
      [1687306440000, 0.193],
      [1687306500000, 0.193],
      [1687306560000, 0.201],
      [1687306620000, 0.199],
      [1687306680000, 0.206],
      [1687306740000, 0.203],
      [1687306800000, 0.205],
      [1687306860000, 0.215],
      [1687306920000, 0.222],
      [1687306980000, 0.22],
      [1687307040000, 0.211],
      [1687307100000, 0.206],
      [1687307160000, 0.203],
      [1687307220000, 0.202],
      [1687307280000, 0.212],
      [1687307340000, 0.204],
      [1687307400000, 0.206],
      [1687307460000, 0.22],
      [1687307520000, 0.225],
      [1687307580000, 0.221],
      [1687307640000, 0.208],
      [1687307700000, 0.195],
      [1687307760000, 0.196],
      [1687307820000, 0.196],
      [1687307880000, 0.2],
      [1687307940000, 0.199],
      [1687308000000, 0.209],
      [1687308060000, 0.217],
      [1687308120000, 0.211],
      [1687308180000, 0.206],
      [1687308240000, 0.201],
      [1687308300000, 0.196],
      [1687308360000, 0.201],
      [1687308420000, 0.197],
      [1687308480000, 0.194],
      [1687308540000, 0.189],
      [1687308600000, 0.188],
      [1687308660000, 0.191],
      [1687308720000, 0.194],
      [1687308780000, 0.201],
      [1687308840000, 0.199],
      [1687308900000, 0.192],
      [1687308960000, 0.191],
      [1687309020000, 0.191],
      [1687309080000, 0.185],
      [1687309140000, 0.194],
      [1687309200000, 0.203],
      [1687309260000, 0.208],
      [1687309320000, 0.217],
      [1687309380000, 0.218],
      [1687309440000, 0.226],
      [1687309500000, 0.241],
      [1687309560000, 0.236],
      [1687309620000, 0.236],
      [1687309680000, 0.234],
      [1687309740000, 0.23],
      [1687309800000, 0.223],
      [1687309860000, 0.211],
      [1687309920000, 0.207],
      [1687309980000, 0.206],
      [1687310040000, 0.212],
      [1687310100000, 0.225],
      [1687310160000, 0.22],
      [1687310220000, 0.221],
      [1687310280000, 0.229],
      [1687310340000, 0.233],
      [1687310400000, 0.23],
      [1687310460000, 0.23],
      [1687310520000, 0.233],
      [1687310580000, 0.228],
      [1687310640000, 0.223],
      [1687310700000, 0.225],
      [1687310760000, 0.232],
      [1687310820000, 0.228],
      [1687310880000, 0.231],
      [1687310940000, 0.228],
      [1687311000000, 0.226],
      [1687311060000, 0.215],
      [1687311120000, 0.212],
      [1687311180000, 0.215],
      [1687311240000, 0.209],
      [1687311300000, 0.211],
      [1687311360000, 0.212],
      [1687311420000, 0.214],
      [1687311480000, 0.214],
      [1687311540000, 0.217],
      [1687311600000, 0.221],
      [1687311660000, 0.223],
      [1687311720000, 0.225],
      [1687311780000, 0.228],
      [1687311840000, 0.224],
      [1687311900000, 0.234],
      [1687311960000, 0.228],
      [1687312020000, 0.226],
      [1687312080000, 0.227],
      [1687312140000, 0.232],
      [1687312200000, 0.247],
      [1687312260000, 0.246],
      [1687312320000, 0.235],
      [1687312380000, 0.231],
      [1687312440000, 0.235],
      [1687312500000, 0.235],
      [1687312560000, 0.225],
      [1687312620000, 0.231],
      [1687312680000, 0.244],
      [1687312740000, 0.252],
      [1687312800000, 0.251],
      [1687312860000, 0.254],
      [1687312920000, 0.264],
      [1687312980000, 0.259],
      [1687313040000, 0.253],
      [1687313100000, 0.258],
      [1687313160000, 0.267],
      [1687313220000, 0.268],
      [1687313280000, 0.263],
      [1687313340000, 0.262],
      [1687313400000, 0.262],
      [1687313460000, 0.258],
      [1687313520000, 0.26],
      [1687313580000, 0.263],
      [1687313640000, 0.274],
      [1687313700000, 0.267],
      [1687313760000, 0.272],
      [1687313820000, 0.272],
      [1687313880000, 0.276],
      [1687313940000, 0.28],
      [1687314000000, 0.27],
      [1687314060000, 0.272],
      [1687314120000, 0.264],
      [1687314180000, 0.261],
      [1687314240000, 0.26],
      [1687314300000, 0.253],
      [1687314360000, 0.254],
      [1687314420000, 0.252],
      [1687314480000, 0.249],
      [1687314540000, 0.255],
      [1687314600000, 0.256],
    ],
  },
  {
    name: 'load15',
    data: [
      [1687303860000, 0.178],
      [1687303920000, 0.177],
      [1687303980000, 0.174],
      [1687304040000, 0.171],
      [1687304100000, 0.173],
      [1687304160000, 0.179],
      [1687304220000, 0.185],
      [1687304280000, 0.193],
      [1687304340000, 0.193],
      [1687304400000, 0.193],
      [1687304460000, 0.193],
      [1687304520000, 0.195],
      [1687304580000, 0.195],
      [1687304640000, 0.193],
      [1687304700000, 0.196],
      [1687304760000, 0.199],
      [1687304820000, 0.197],
      [1687304880000, 0.197],
      [1687304940000, 0.197],
      [1687305000000, 0.194],
      [1687305060000, 0.191],
      [1687305120000, 0.19],
      [1687305180000, 0.189],
      [1687305240000, 0.19],
      [1687305300000, 0.19],
      [1687305360000, 0.191],
      [1687305420000, 0.192],
      [1687305480000, 0.195],
      [1687305540000, 0.192],
      [1687305600000, 0.198],
      [1687305660000, 0.199],
      [1687305720000, 0.197],
      [1687305780000, 0.197],
      [1687305840000, 0.194],
      [1687305900000, 0.19],
      [1687305960000, 0.189],
      [1687306020000, 0.189],
      [1687306080000, 0.188],
      [1687306140000, 0.186],
      [1687306200000, 0.186],
      [1687306260000, 0.188],
      [1687306320000, 0.188],
      [1687306380000, 0.185],
      [1687306440000, 0.185],
      [1687306500000, 0.185],
      [1687306560000, 0.186],
      [1687306620000, 0.186],
      [1687306680000, 0.188],
      [1687306740000, 0.187],
      [1687306800000, 0.187],
      [1687306860000, 0.191],
      [1687306920000, 0.193],
      [1687306980000, 0.193],
      [1687307040000, 0.189],
      [1687307100000, 0.188],
      [1687307160000, 0.186],
      [1687307220000, 0.186],
      [1687307280000, 0.188],
      [1687307340000, 0.186],
      [1687307400000, 0.187],
      [1687307460000, 0.191],
      [1687307520000, 0.194],
      [1687307580000, 0.193],
      [1687307640000, 0.189],
      [1687307700000, 0.184],
      [1687307760000, 0.183],
      [1687307820000, 0.183],
      [1687307880000, 0.183],
      [1687307940000, 0.183],
      [1687308000000, 0.185],
      [1687308060000, 0.188],
      [1687308120000, 0.186],
      [1687308180000, 0.185],
      [1687308240000, 0.184],
      [1687308300000, 0.181],
      [1687308360000, 0.183],
      [1687308420000, 0.181],
      [1687308480000, 0.18],
      [1687308540000, 0.177],
      [1687308600000, 0.177],
      [1687308660000, 0.177],
      [1687308720000, 0.178],
      [1687308780000, 0.18],
      [1687308840000, 0.178],
      [1687308900000, 0.176],
      [1687308960000, 0.176],
      [1687309020000, 0.175],
      [1687309080000, 0.173],
      [1687309140000, 0.175],
      [1687309200000, 0.178],
      [1687309260000, 0.179],
      [1687309320000, 0.183],
      [1687309380000, 0.183],
      [1687309440000, 0.187],
      [1687309500000, 0.193],
      [1687309560000, 0.193],
      [1687309620000, 0.194],
      [1687309680000, 0.195],
      [1687309740000, 0.195],
      [1687309800000, 0.193],
      [1687309860000, 0.19],
      [1687309920000, 0.189],
      [1687309980000, 0.188],
      [1687310040000, 0.19],
      [1687310100000, 0.195],
      [1687310160000, 0.195],
      [1687310220000, 0.195],
      [1687310280000, 0.199],
      [1687310340000, 0.201],
      [1687310400000, 0.202],
      [1687310460000, 0.202],
      [1687310520000, 0.204],
      [1687310580000, 0.204],
      [1687310640000, 0.203],
      [1687310700000, 0.205],
      [1687310760000, 0.207],
      [1687310820000, 0.207],
      [1687310880000, 0.208],
      [1687310940000, 0.208],
      [1687311000000, 0.208],
      [1687311060000, 0.205],
      [1687311120000, 0.203],
      [1687311180000, 0.205],
      [1687311240000, 0.202],
      [1687311300000, 0.204],
      [1687311360000, 0.203],
      [1687311420000, 0.204],
      [1687311480000, 0.204],
      [1687311540000, 0.204],
      [1687311600000, 0.206],
      [1687311660000, 0.207],
      [1687311720000, 0.208],
      [1687311780000, 0.209],
      [1687311840000, 0.208],
      [1687311900000, 0.211],
      [1687311960000, 0.209],
      [1687312020000, 0.209],
      [1687312080000, 0.209],
      [1687312140000, 0.211],
      [1687312200000, 0.216],
      [1687312260000, 0.217],
      [1687312320000, 0.213],
      [1687312380000, 0.212],
      [1687312440000, 0.212],
      [1687312500000, 0.213],
      [1687312560000, 0.21],
      [1687312620000, 0.212],
      [1687312680000, 0.217],
      [1687312740000, 0.219],
      [1687312800000, 0.22],
      [1687312860000, 0.221],
      [1687312920000, 0.225],
      [1687312980000, 0.225],
      [1687313040000, 0.222],
      [1687313100000, 0.226],
      [1687313160000, 0.23],
      [1687313220000, 0.231],
      [1687313280000, 0.229],
      [1687313340000, 0.231],
      [1687313400000, 0.23],
      [1687313460000, 0.23],
      [1687313520000, 0.231],
      [1687313580000, 0.232],
      [1687313640000, 0.236],
      [1687313700000, 0.235],
      [1687313760000, 0.237],
      [1687313820000, 0.238],
      [1687313880000, 0.24],
      [1687313940000, 0.243],
      [1687314000000, 0.239],
      [1687314060000, 0.242],
      [1687314120000, 0.239],
      [1687314180000, 0.239],
      [1687314240000, 0.239],
      [1687314300000, 0.237],
      [1687314360000, 0.237],
      [1687314420000, 0.236],
      [1687314480000, 0.235],
      [1687314540000, 0.237],
      [1687314600000, 0.237],
    ],
  },
];
let arr2 = [
  {
    name: 'inode使用率',
    data: [
      [1687303860000, 0.877],
      [1687303920000, 0.881],
      [1687303980000, 0.881],
      [1687304040000, 0.877],
      [1687304100000, 0.877],
      [1687304160000, 0.886],
      [1687304220000, 0.878],
      [1687304280000, 0.885],
      [1687304340000, 0.878],
      [1687304400000, 0.878],
      [1687304460000, 0.878],
      [1687304520000, 0.878],
      [1687304580000, 0.878],
      [1687304640000, 0.878],
      [1687304700000, 0.878],
      [1687304760000, 0.878],
      [1687304820000, 0.882],
      [1687304880000, 0.878],
      [1687304940000, 0.878],
      [1687305000000, 0.878],
      [1687305060000, 0.878],
      [1687305120000, 0.878],
      [1687305180000, 0.878],
      [1687305240000, 0.878],
      [1687305300000, 0.878],
      [1687305360000, 0.878],
      [1687305420000, 0.878],
      [1687305480000, 0.878],
      [1687305540000, 0.878],
      [1687305600000, 0.878],
      [1687305660000, 0.878],
      [1687305720000, 0.878],
      [1687305780000, 0.878],
      [1687305840000, 0.878],
      [1687305900000, 0.878],
      [1687305960000, 0.878],
      [1687306020000, 0.878],
      [1687306080000, 0.878],
      [1687306140000, 0.878],
      [1687306200000, 0.878],
      [1687306260000, 0.878],
      [1687306320000, 0.878],
      [1687306380000, 0.878],
      [1687306440000, 0.878],
      [1687306500000, 0.878],
      [1687306560000, 0.878],
      [1687306620000, 0.882],
      [1687306680000, 0.883],
      [1687306740000, 0.878],
      [1687306800000, 0.878],
      [1687306860000, 0.878],
      [1687306920000, 0.878],
      [1687306980000, 0.878],
      [1687307040000, 0.878],
      [1687307100000, 0.878],
      [1687307160000, 0.878],
      [1687307220000, 0.878],
      [1687307280000, 0.878],
      [1687307340000, 0.878],
      [1687307400000, 0.878],
      [1687307460000, 0.878],
      [1687307520000, 0.878],
      [1687307580000, 0.882],
      [1687307640000, 0.878],
      [1687307700000, 0.878],
      [1687307760000, 0.878],
      [1687307820000, 0.878],
      [1687307880000, 0.878],
      [1687307940000, 0.878],
      [1687308000000, 0.878],
      [1687308060000, 0.883],
      [1687308120000, 0.878],
      [1687308180000, 0.878],
      [1687308240000, 0.878],
      [1687308300000, 0.882],
      [1687308360000, 0.878],
      [1687308420000, 0.878],
      [1687308480000, 0.878],
      [1687308540000, 0.878],
      [1687308600000, 0.878],
      [1687308660000, 0.878],
      [1687308720000, 0.878],
      [1687308780000, 0.878],
      [1687308840000, 0.878],
      [1687308900000, 0.878],
      [1687308960000, 0.878],
      [1687309020000, 0.878],
      [1687309080000, 0.878],
      [1687309140000, 0.878],
      [1687309200000, 0.878],
      [1687309260000, 0.878],
      [1687309320000, 0.878],
      [1687309380000, 0.878],
      [1687309440000, 0.878],
      [1687309500000, 0.878],
      [1687309560000, 0.878],
      [1687309620000, 0.878],
      [1687309680000, 0.878],
      [1687309740000, 0.882],
      [1687309800000, 0.878],
      [1687309860000, 0.878],
      [1687309920000, 0.878],
      [1687309980000, 0.878],
      [1687310040000, 0.878],
      [1687310100000, 0.878],
      [1687310160000, 0.878],
      [1687310220000, 0.878],
      [1687310280000, 0.878],
      [1687310340000, 0.878],
      [1687310400000, 0.878],
      [1687310460000, 0.878],
      [1687310520000, 0.878],
      [1687310580000, 0.878],
      [1687310640000, 0.878],
      [1687310700000, 0.878],
      [1687310760000, 0.878],
      [1687310820000, 0.878],
      [1687310880000, 0.878],
      [1687310940000, 0.878],
      [1687311000000, 0.878],
      [1687311060000, 0.878],
      [1687311120000, 0.878],
      [1687311180000, 0.878],
      [1687311240000, 0.878],
      [1687311300000, 0.878],
      [1687311360000, 0.878],
      [1687311420000, 0.878],
      [1687311480000, 0.879],
      [1687311540000, 0.879],
      [1687311600000, 0.879],
      [1687311660000, 0.879],
      [1687311720000, 0.879],
      [1687311780000, 0.879],
      [1687311840000, 0.879],
      [1687311900000, 0.879],
      [1687311960000, 0.879],
      [1687312020000, 0.878],
      [1687312080000, 0.878],
      [1687312140000, 0.879],
      [1687312200000, 0.879],
      [1687312260000, 0.878],
      [1687312320000, 0.878],
      [1687312380000, 0.879],
      [1687312440000, 0.879],
      [1687312500000, 0.878],
      [1687312560000, 0.879],
      [1687312620000, 0.879],
      [1687312680000, 0.878],
      [1687312740000, 0.878],
      [1687312800000, 0.879],
      [1687312860000, 0.878],
      [1687312920000, 0.883],
      [1687312980000, 0.878],
      [1687313040000, 0.879],
      [1687313100000, 0.879],
      [1687313160000, 0.879],
      [1687313220000, 0.879],
      [1687313280000, 0.879],
      [1687313340000, 0.879],
      [1687313400000, 0.879],
      [1687313460000, 0.879],
      [1687313520000, 0.879],
      [1687313580000, 0.879],
      [1687313640000, 0.879],
      [1687313700000, 0.879],
      [1687313760000, 0.879],
      [1687313820000, 0.879],
      [1687313880000, 0.879],
      [1687313940000, 0.879],
      [1687314000000, 0.879],
      [1687314060000, 0.879],
      [1687314120000, 0.879],
      [1687314180000, 0.879],
      [1687314240000, 0.879],
      [1687314300000, 0.879],
      [1687314360000, 0.879],
      [1687314420000, 0.879],
      [1687314480000, 0.879],
      [1687314540000, null],
      [1687314600000, null],
    ],
  },
];

let options = {
  xAxis: {
    type: 'timeCat',
    mask: 'MM-DD HH:mm:ss',
  },
};

class BidDataConnectDemo extends React.Component {
  chart1 = null;
  chart2 = null;
  chart3 = null;
  componentDidMount() {
    new Util.Connect([this.chart1, this.chart2, this.chart3], {
      type: 'data',
      coordinate: 'x',
      // custom(e, chart, chartInstance) {
      //   // console.log(e);
      //   const record = getRecord(chartInstance, e);
      //
      //   const point = chart.getXY(record);
      //   console.log(record, point);
      //
      //   chart.showTooltip({
      //     ...point,
      //     y: e.y
      //   });
      // },
    });
  }
  render() {
    return (
      <div>
        arr2
        <Wline height="150" getChartInstance={(c) => (this.chart1 = c)} config={options} data={arr} />
        <Wline height="150" getChartInstance={(c) => (this.chart2 = c)} config={options} data={arr1} />
        <Wline height="150" getChartInstance={(c) => (this.chart3 = c)} config={options} data={arr2} />
      </div>
    );
  }
}

stories.add('密集数据联动', () => <BidDataConnectDemo />);

function getRecord(chart, e) {
  let record = e.data;
  // 在折线图中选中的record.data为数组，改为用最贴近数据读取
  if (!record || Array.isArray(record.data)) {
    record = chart.getSnapRecords(e);
    if (Array.isArray(record) && record[0]) {
      record = record[0]._origin;
    } else {
      record = null;
    }
  } else if (record.data) {
    record = record.data;
  }
  return record;
}

const lineData1 = [
  {
    name: '机房A',
    data: [
      [1483372800000, 1592],
      [1483459200000, 1092],
      [1483545600000, 1714],
      [1483632000000, 2984],
      [1483718400000, 3514],
      [1483804800000, 3666],
      [1483891200000, 3023],
      [1483977600000, 3018],
    ],
  },
  {
    name: '机房B',
    data: [
      [1483372800000, 2592],
      [1483459200000, 2092],
      [1483545600000, 3714],
      [1483632000000, 4984],
      [1483718400000, 7514],
      [1483804800000, 7666],
      [1483891200000, 7023],
      [1483977600000, 5018],
    ],
  },
];

const lineData2 = [
  {
    name: '机房C',
    data: [
      [1483372800000, 7592],
      [1483459200000, 9092],
      [1483545600000, 8714],
      [1483632000000, 8984],
      [1483718400000, 11514],
      [1483804800000, 11666],
      [1483891200000, 11023],
      [1483977600000, 9018],
    ],
  },
];

class ConnectFilterDemo extends React.Component {
  chart1 = null;
  chart2 = null;
  componentDidMount() {
    new Util.ConnectFilter([this.chart1, this.chart2]);
  }
  render() {
    return (
      <div style={{ display: 'flex', flexDirection: 'column', padding: 20 }}>
        <Wline height="280" getChartInstance={(c) => (this.chart1 = c)} config={{}} data={lineData1} />
        <Wline height="280" getChartInstance={(c) => (this.chart2 = c)} config={{}} data={lineData2} />
      </div>
    );
  }
}
stories.add('filter联动', () => <ConnectFilterDemo />);