stories/feat.ref.stories.js

import React, { useEffect, useMemo, useRef, useState } from 'react';
import { storiesOf } from '@storybook/react';

import {
  Wbar,
  Wline,
  Wpie,
  Wbox,
  Wcandlestick,
  Wfunnel,
  Wheatmap,
  Whistogram,
  Wlinebar,
  Wlinebox,
  Wlinescatter,
  Wmulticircle,
  WmultiPie,
  Wnightingale,
  Wradar,
  Wsankey,
  Wscatter,
} from '@alicloud/cloud-charts';

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 lineData = [
  {
    name: '机房A',
    data: [
      [1483372800000, 4092],
      [1483459200000, 1592],
      [1483545600000, 3714],
      [1483632000000, 4854],
      [1483718400000, 6514],
      [1483804800000, 9022],
      [1483891200000, 6023],
      [1483977600000, 4018],
    ],
  },
  {
    name: '机房B',
    yAxis: 1,
    // visible: false,
    data: [
      [1483372800000, 6051],
      [1483459200000, 3278],
      [1483545600000, 5175],
      [1483632000000, 6548],
      [1483718400000, 9048],
      [1483804800000, 11394],
      [1483891200000, 8597],
      [1483977600000, 6588],
    ],
  },
  {
    name: '异常点',
    data: [
      [1483372800000, 2051],
      [1483459200000, 3278],
      [1483545600000, 4175],
      [1483632000000, 2548],
      [1483718400000, 1048],
      [1483804800000, 1394],
      [1483891200000, 5597],
      [1483977600000, 3588],
    ],
  },
];

const pieData = [
  {
    name: '浏览器占比',
    data: [
      ['Firefox', 45.0],
      ['IE', 26.8],
      ['Chrome', 12.8],
      ['Safari', 8.5],
      ['Opera', 6.2],
      ['Others', 0.7],
    ],
  },
];

const boxData = [
  {
    name: '柱1',
    data: [['一', [1, 9, 16, 22, 24]]],
  },
  {
    name: '柱2',
    data: [['二', [3, 10, 17, 28, 32]]],
  },
  {
    name: '柱3',
    data: [['三', [2, 8, 12, 19, 26]]],
  },
  {
    name: '柱4',
    data: [['四', [5, 8, 12, 21, 35]]],
  },
  {
    name: '柱5',
    data: [['五', [1, 7, 10, 17, 22]]],
  },
];

const candleData = [
  {
    name: '股票价格',
    data: [
      [1186444800000, [22.75, 23.44, 23.7, 22.69]],
      [1186358400000, [23.03, 22.97, 23.15, 22.44]],
      [1186099200000, [23.2, 22.92, 23.39, 22.87]],
      [1186012800000, [22.65, 23.36, 23.7, 22.65]],
      [1185926400000, [23.17, 23.25, 23.4, 22.85]],
      [1185840000000, [23.88, 23.25, 23.93, 23.24]],
      [1185753600000, [23.55, 23.62, 23.88, 23.38]],
      [1185494400000, [23.98, 23.49, 24.49, 23.47]],
      [1185408000000, [24.4, 24.03, 24.49, 23.62]],
      [1185321600000, [25.01, 24.68, 25.32, 24.59]],
      [1185235200000, [24.8, 24.84, 25.34, 24.73]],
      [1185148800000, [25.43, 24.99, 25.46, 24.98]],
      [1184889600000, [25.7, 25.35, 25.89, 25.2]],
      [1184803200000, [26.32, 26.03, 26.34, 25.92]],
      [1184716800000, [26.07, 26.2, 26.72, 26.02]],
      [1184630400000, [26.74, 27.53, 27.8, 26.7]],
      [1184544000000, [26.48, 26.7, 26.74, 26.13]],
      [1184284800000, [26.87, 26.58, 26.97, 26.5]],
      [1184198400000, [26.7, 26.96, 26.97, 26.34]],
      [1184112000000, [27.03, 26.69, 27.05, 26.55]],
      [1184025600000, [27.09, 26.97, 27.57, 26.96]],
      [1183939200000, [26.92, 27.2, 27.33, 26.82]],
      [1183680000000, [27.01, 27.1, 27.14, 26.93]],
      [1183593600000, [26.92, 26.99, 27.14, 26.9]],
      [1183420800000, [26.95, 27, 27.25, 26.9]],
      [1183334400000, [27.19, 26.86, 27.27, 26.76]],
      [1183075200000, [27.21, 27.13, 27.38, 26.93]],
      [1182988800000, [27.44, 27.25, 27.49, 27.12]],
      [1182902400000, [27.51, 27.58, 27.66, 27.4]],
      [1182816000000, [27.73, 27.71, 28.18, 27.36]],
      [1182729600000, [27.6, 27.64, 27.77, 27.34]],
      [1182470400000, [27.68, 27.38, 27.79, 27.31]],
      [1182384000000, [27.69, 27.67, 27.94, 27.55]],
      [1182297600000, [27.89, 27.66, 28.17, 27.66]],
      [1182211200000, [29.4, 27.63, 29.4, 27.54]],
      [1182124800000, [27.72, 28.12, 28.34, 27.5]],
      [1181865600000, [27.49, 27.31, 27.52, 27.19]],
      [1181779200000, [27.38, 27.3, 27.64, 27.15]],
      [1181692800000, [27.12, 27.38, 27.41, 26.61]],
      [1181606400000, [27.3, 27.05, 27.66, 26.98]],
      [1181520000000, [27.27, 27.35, 27.52, 27.15]],
      [1181260800000, [27.02, 27.39, 27.45, 26.96]],
      [1181174400000, [27.34, 26.98, 27.73, 26.98]],
      [1181088000000, [28.05, 27.44, 28.11, 27.3]],
      [1181001600000, [28.4, 28.23, 28.59, 28.1]],
      [1180915200000, [28.6, 28.59, 28.78, 28.4]],
      [1180656000000, [28.9, 28.78, 29.13, 28.61]],
      [1180569600000, [28.76, 28.7, 28.85, 28.49]],
      [1180483200000, [28.19, 28, 28.38, 28]],
      [1180396800000, [28.36, 28.4, 28.73, 28.2]],
      [1180051200000, [28.44, 28.58, 28.73, 28.34]],
      [1179964800000, [28.65, 28.41, 28.88, 28.25]],
      [1179878400000, [29.1, 28.61, 29.37, 28.53]],
      [1179792000000, [29.33, 28.92, 29.35, 28.78]],
      [1179705600000, [29.62, 29.35, 29.86, 29.32]],
      [1179446400000, [28.9, 29.75, 29.8, 28.78]],
      [1179360000000, [28.99, 28.57, 29.13, 28.49]],
      [1179273600000, [28.89, 29.21, 29.37, 28.25]],
      [1179187200000, [29.16, 28.81, 29.42, 28.75]],
      [1179100800000, [29.79, 29.5, 30, 29.08]],
      [1178841600000, [29.62, 30.05, 30.08, 29.53]],
    ],
  },
];

const funnelData = [
  {
    name: '流量转化',
    data: [
      ['浏览网站', 50000],
      ['放入购物车', 35000],
      ['生成订单', 25000],
      ['支付订单', 15000],
      ['完成交易', 8000],
    ],
  },
];

const heatmapData = [
  {
    name: '类型一',
    data: [['aws1', 'aws1', 10]],
  },
  {
    name: '类型二',
    data: [['aws2', 'aws1', 50]],
  },
  {
    name: '类型三',
    data: [['aws3', 'aws1', 120]],
  },
  {
    name: '类型四',
    data: [['aws4', 'aws1', 400]],
  },
];

const histogramData = [
  {
    name: 'Ideal',
    data: [
      61.4, 59.2, 60.9, 62.4, 61.3, 62.4, 61.2, 62.2, 61.8, 61.7, 61.8, 61.4, 61.7, 61.6, 61.1,
      62.6, 62.3, 62.4, 61, 62.5, 62.1, 63.8, 62.7, 62, 62, 60.6, 61.5, 62.3, 63, 62.6, 62.9, 61.4,
      61.3, 62.2, 60.1, 62.3, 64, 61.8, 62.1, 61.7, 61.5, 61.8, 62.4, 61.3, 61.2, 61.6, 62.8, 61.7,
      62.4, 61.7, 62.1, 61.1, 61.7, 62.3, 62.6, 61.6, 61.4, 61.2, 61, 61.7, 58.6, 61.1, 60.7, 61.5,
      61.9, 63.3, 61.6, 61.1, 61.4, 62.4, 61.4, 62.3, 61.5, 62.1, 62.4, 60.7, 61.3, 62, 61.5, 61.3,
      61.2, 61, 62, 61.9, 62.1, 62.3, 62.4, 61.4, 60.5, 61.6, 61.4, 62, 61.4, 62.4, 62.5, 62.9,
      60.8, 62.6, 61.9, 62.3, 62.6, 62.1, 61.9, 60.9, 60.9, 62.4, 62.6, 61.5, 60.9, 61.2, 61.5,
      61.5, 62.2, 61, 62.3, 62.2, 61.9, 61.9, 62.5, 61.8, 61.9, 62.8, 60.7, 61.6, 60.7, 62.6, 61.8,
      62.7, 61.3, 62.2, 60.2, 61.5, 62.4, 61.9, 61.5, 61.7, 62.7, 62.7, 60.7, 62.2, 59.5, 62.5,
      61.5, 61.7, 61.3, 61.6, 60.8, 62, 61.8, 61.1, 62.1, 60.1, 60.7, 62, 60.8, 61.2, 62.9, 62.7,
      62.5, 62.3, 61, 62.6, 61.4, 61.8, 62.3, 63, 61.9, 61.1, 61.9, 62.6, 62.6, 61, 61.9, 62.6,
      60.3, 62.1, 62, 61.8, 62.1, 60.4, 61.4, 61.7, 62.3, 62.1, 60.4, 62.3, 61.8, 62.4, 61.3, 62.3,
      62.7, 61.2, 62.5, 60.9, 62.1, 61.4, 62.1, 61.8, 62.4, 60, 62.3, 62, 61.4, 61, 61.2, 61.6,
      61.6, 62, 62.2, 61.7, 61.7, 61.7, 61.4, 61, 61.6, 62.5, 63, 61.4, 62, 62.3, 61.8, 60.9, 60.6,
      60.9, 61.5, 62.3, 62.5, 60.9, 62.6, 62.3, 61.4, 62, 61.7, 62.7, 61.3, 61.3, 61.2, 62.3, 62.6,
      61.8, 62.1, 62.8, 62, 62, 62.8, 61.9, 62.2, 62.2, 61.3, 61.6, 61.8, 61.1, 61.7, 60.8, 61.2,
      62.2, 61.2, 61.1, 61.1, 62.6, 62.3, 62.5, 63, 62.7, 61.8, 61.8, 61.6, 61.9, 61.4, 61.3, 61.3,
      60.8, 62.6, 61.6, 62.4, 61.6, 61.8, 61.9, 62.1, 62.6, 61.6, 62.3, 62.7, 62.2, 62.3, 61.9,
      59.9, 62, 61.4, 61.2, 61.1, 62, 62.4, 61.3, 62.3, 62, 61.5, 61.7, 62.4, 61.3, 61.3, 61.4,
      60.8, 61.1, 61.5, 61.7, 62, 61.8, 62.3, 61.6, 61.3, 61.6, 62, 61.4, 62.1, 60, 60.8, 61.3,
      62.3, 62.2, 61.8, 61.2, 62.7, 61.8, 61.5, 60.7, 62, 62, 61.1, 60.7, 59.8, 60.8, 61.1, 61.2,
      61.8, 61.7, 62.3, 62, 60.5, 61.2, 62.1, 62, 61.7, 62, 61.8, 62.6, 61.6, 61, 62.1, 62.2, 61.9,
      62.1, 61.6, 62.2, 61.6, 61.7, 60.5, 62.4, 62.2, 60.9, 62.3, 61.8, 60.9, 61.4, 61.8, 61.9,
      61.3, 62, 60.1, 61.6, 62.7, 61.1, 61.6, 61.1, 61.9, 61.7, 61.3, 61.6, 60.8, 61.6, 61.6, 63.3,
      62.6, 61.9, 62.2, 61.8, 62, 61.5, 61.9, 61.5, 62.2, 62.3, 61.5, 62.1, 61.1, 61.9, 62.2, 61.6,
      60.7, 61.2, 63, 62, 61.6, 62.3, 62, 61.6, 62.3, 61, 61.7, 62.1, 62.4, 61.1, 62.6, 62.3, 61.9,
      61.7, 62.5, 62, 62.2, 62.1, 62.5, 60.2, 61.8, 62.4, 61.7, 62.5, 61.5, 60.6, 60.6, 62, 59,
      61.8, 62.3, 62.1, 62.5, 62.5, 61.2, 61.5, 62.2, 60.9, 61.7, 61.5, 62.1, 63, 61.8, 61.5, 61.3,
      62.2, 62.2, 62.4, 62.3, 61.9, 61.6, 61.4, 61.9, 61.7, 62.6, 61.7, 61.3, 62, 61.4, 61.1, 60.2,
      61.9, 61.3, 62.3, 62.3, 62.7, 62, 61.3, 62.5, 62.9, 62, 61.2, 62.4, 61.3, 61.9, 61.7, 62.3,
      61.4, 61.8, 62.6, 61.8, 62.4, 61.7, 61.9, 59.8, 62, 62.2, 61.6, 61.6, 62.7, 63.2, 60.9, 61.1,
      61.9, 62.4, 60.8, 61.8, 62.1, 61.9, 62, 61, 61.2, 62.2, 60.7, 61.7, 62.2, 61.9, 61.4, 62.3,
      62.9, 61.1, 62, 62.7, 62.6, 61.8, 60.2, 61.2, 62.8, 60.5, 62.3, 63, 61.8, 62.1, 61.7, 60.4,
      62.5, 62.2, 62.2, 61.7, 60.8, 61.3, 61.2, 60.9, 62, 62.1, 62.3, 61.4, 61.7, 62, 62.3, 60.9,
      62.6, 62, 62, 61.7, 60.8, 62, 61.9, 61.4, 61.2, 61.8, 61.1, 61.3, 61.6, 61.7, 62.4, 61.8,
      62.4, 60.2, 61.2, 60.8, 62.7, 61.6, 61, 62, 61.6, 61.8, 61.5, 61.3, 61.2, 60.2, 62, 61.7,
      61.7, 62.6, 62.2, 62.4, 62.4, 62.6, 61.3, 61.7, 62.9, 61, 62, 61.7, 61.9, 62.5, 61.3, 62.2,
      61.1, 61.9, 62.1, 62.5, 61, 61.1, 61.4, 62.4, 61.8, 60.3, 61.9, 61.4, 62.1, 61.9, 61.3, 62,
      61.3, 61.8, 62, 61.8, 62, 62, 61.8, 62.7, 60.9, 61.4, 60.1, 61.9, 61, 61.7, 61.1, 61.8, 61.4,
      61.2, 62, 62.8, 61.3, 61.7, 62, 62.6, 60.8, 62, 61.8, 61.8, 62, 60.3, 61.2, 60.7, 62.3, 62.1,
      62, 61.9, 60.5, 61.2, 61.8, 61.9, 62.1, 62.2, 61.8, 60.8, 62, 61.9, 61.9, 61.1, 60.8, 62.2,
      61.5, 60.5, 62.6, 62.2, 61.1, 62.1, 61.3, 61.5, 62.4, 62.2, 62.4, 62, 61.9, 62.1, 62.3, 62.3,
      61.9, 62.6, 61.7, 62.2, 61.3, 61.5, 60.3, 62.5, 62.4, 60.2, 62.5, 62.2, 61.2, 62.9, 62.8,
      61.6, 62.2, 61.5, 62.7, 61.7, 62.5, 61.5, 61.9, 62.8, 61.1, 62, 61.4, 61.5, 61.6, 62.7, 62.1,
      60.9, 60.9, 61, 62.1, 60.3, 62.6, 62.1, 61.9, 61.9, 61.1, 61.4, 61.3, 62, 61.8, 61.5, 61.6,
      61.7, 61, 62.4, 60.5, 62, 61.7, 61.5, 61.9, 61.8, 58.8, 62.1, 61.7, 62.4, 61.7, 62.2, 61.6,
      61.2, 61.9, 62.7, 60.9, 61.1, 63, 62.2, 62.7, 62.6, 60.7, 62, 62.8, 61.4, 61.2, 61.3, 61.4,
      61.7, 61.9, 60.5, 61, 60.7, 63, 62, 62, 61, 62.2, 62.1, 62.2, 62.7, 61.6, 62.6, 62.2, 61.1,
      62.1, 62.2, 61.2, 62.2, 62, 60.3, 63,
    ],
  },
  {
    name: 'Good',
    data: [
      64, 63.6, 63.5, 56.9, 63.8, 58, 63.8, 64.3, 60, 57.8, 63.8, 60.3, 63.8, 63.9, 63.5, 64.1,
      63.9, 63, 63.4, 63.6, 63.1, 65, 58.7, 62.8, 63.3, 65.5, 63.5, 64.3, 63.8, 58.2, 63.2, 58.9,
      64.1, 63.2, 63.7, 61.8, 57.8, 63.3, 63.5, 58.2, 63.6, 64.3, 62.3, 63.9, 63.1, 58.7, 63.4,
      63.3, 60.4, 63.2, 63.1, 57.9, 59.2, 59.2, 63.1, 63.5, 63.8, 63.7, 63.7, 60.5, 63.7, 58.2,
      63.8, 64.2, 63.6, 63.2, 64.2, 57.6, 63.7, 63.5, 56.7, 64.8, 64.2, 58.4, 64.3, 61.2, 63.8,
      63.9, 63.1, 63.3, 59.2, 62.6, 57.2, 57.4, 63.6, 63.7, 57.6, 58.8, 63.9, 63.5, 59.4, 58.9,
      58.9, 56.9, 59.8, 63.5, 60.1, 60.1, 64, 62.7, 63.6, 63.6, 64.2, 63.2, 61.3, 63.8, 58.5, 59,
      64.2, 63.6, 63.6, 61.8, 63, 64.2, 63.2, 61.1, 63.7, 63.8, 63.8, 63.4, 63.8, 56.3, 63.7, 57.9,
      63.2, 64.1, 63.3, 63.7, 64.6, 60.2, 62.7, 63.9, 64.3, 63.3, 63.8, 64.4, 62.6, 63.7, 58.6,
      65.8, 59.2, 57.9, 63.8, 64.2, 59.4, 63.7, 64.2, 63.7, 62.5, 60.6, 63.3, 63.5, 63.8, 62.3,
      59.6, 63.9, 61.8, 63.5, 63.6, 63.2, 63.9, 62.4, 57.8, 58.5, 57.8, 63.3, 60.8, 60.2, 63.3,
      63.7, 57.9, 60.9, 57.3, 57.8, 63.6, 62.9, 57.8, 63.1, 61.3, 63.3, 61.4, 63.4, 63.7,
    ],
  },
  {
    name: 'Premium',
    data: [
      61.4, 62.5, 62.5, 61.1, 60.2, 61.2, 62, 61.5, 61.4, 59.1, 59.3, 61.2, 61.9, 62.2, 62.9, 61.2,
      62.2, 60.8, 60.9, 62.9, 59.5, 61.9, 59.2, 58.8, 61, 61.1, 61.1, 61.4, 61.5, 61.7, 59.3, 61.7,
      63, 61.7, 62.5, 62, 61.5, 62.7, 62.4, 61.3, 60.3, 61.3, 61.4, 60.1, 59.1, 59.5, 59.8, 61.1,
      61.5, 61, 62.8, 62, 58.8, 62, 61.2, 62.4, 61.2, 59.9, 59.8, 62.7, 59.6, 62.6, 62.9, 62.6,
      60.6, 60.8, 59.1, 62.4, 62.5, 60.7, 62.4, 59.9, 62.1, 61.6, 62.6, 58.6, 59.7, 61.2, 62.6,
      61.6, 60.1, 60.5, 61.8, 62.4, 62.3, 60.6, 62.3, 58, 62.1, 60.2, 62.8, 62.5, 61, 60.7, 60.5,
      62.3, 58.8, 61.9, 61.8, 61, 62.7, 63, 62.5, 61.7, 61.4, 60.5, 62.5, 61.6, 62.3, 62.6, 61.5,
      62.4, 61.1, 61.9, 59.3, 61.1, 62.2, 61.9, 61.9, 62.6, 63, 61.6, 59.7, 61.2, 62.1, 62.4, 61.3,
      62.2, 62.5, 62.8, 60.7, 62.7, 61.5, 62.8, 62.5, 58.2, 62.3, 62.7, 61.8, 62.5, 61.9, 61.1,
      62.3, 60.3, 62.6, 62.7, 61.8, 61.2, 62.7, 61.2, 61.9, 59.6, 62.4, 62.2, 59.3, 62.6, 62.1,
      62.3, 61.3, 62.2, 62, 61.5, 60.1, 60.1, 61.5, 58.4, 60.1, 62.3, 62.7, 60.8, 60.5, 60.6, 63,
      62, 61.5, 58.4, 61.6, 61.8, 62.8, 59.9, 58.8, 59.9, 62.1, 62.6, 62.6, 60.8, 62.5, 61.4, 62.6,
      60.4, 61.8, 59.3, 61, 60.6, 61.2, 62.6, 61.9, 60.9, 59, 62.1, 61.9, 61.5, 61.6, 58.4, 61, 61,
      60.5, 59.9, 61.6, 59.5, 62.4, 61.8, 62.2, 62.9, 58.8, 62.3, 62, 60.5, 62.4, 60.3, 61.2, 59.6,
      60.6, 59.5, 60.5, 62.4, 62, 62.8, 62.3, 59.4, 61.1, 61.6, 59.8, 60.5, 61.3, 62, 62.5, 61.2,
      60.2, 59.9, 59.8, 62.5, 61.3, 60.3, 62.6, 61.8, 60.9, 61.1, 61.1, 61.6, 61.8, 59.5, 61.5,
      59.4, 61.3, 61.7, 61, 60.1, 60.8, 60.4, 61.2, 61.5, 61.2, 62.5, 62.1, 60.4, 61.5, 61.3, 62.4,
      58.8, 62.1, 60.1, 62, 60.3, 61.4, 61.9, 59.8, 62.8, 59.3, 61.9, 61.1, 60.2, 62.5, 60.2, 60.1,
      61, 61.8, 60.5, 59.6, 62.1, 60.9, 61.7, 60.9, 61, 62, 62.4, 62.6, 60.5, 61.3, 61.5, 61.9,
      61.2, 62.5, 61.1, 62.2, 62.8, 62.2, 62.4, 61.3, 60.8, 60.9, 61.3, 62.9, 62, 61.8, 62.4, 60.1,
      59.3, 58.4, 60.7, 61.4, 60.5, 62, 59.2, 61.7, 62.6, 63, 61.1, 62.4, 62.2, 62.4, 59.1, 60.4,
      60.9, 59.6, 58.8, 62.1, 61, 59.5, 61.7, 62.2, 60.3, 62.6, 62.1, 60.1, 60.5, 61, 62, 60.6,
      61.4, 62.6, 61.3, 60.2, 62.2, 58, 61.2, 60.3, 62.3, 60.7, 61.5, 63, 61.3, 59.5, 61.7, 61.2,
      61.5, 61.5, 60.6, 58.3, 61.5, 59.2, 61.4, 62, 63, 62, 61.6, 60.9, 61.1, 59.5, 62.8, 60.7,
      62.6, 61, 62, 62.1, 61.3, 61.9, 62.7, 61.3, 61.3, 62.2, 61.8, 61.1, 62.1, 61.9, 62.7, 62,
      61.4, 61.3, 60.5, 61.1, 62.9, 62.4, 61.3, 60.5, 59.7, 60.3, 61.9, 60.7, 59.6, 60.1, 62.2,
      62.9, 60.5, 61.8, 60.5, 63, 61.2, 59.1, 62.1, 61.2, 62.7, 62.2, 60.7, 61.8, 62.2, 62.3, 62.3,
      61.3, 63, 62.3, 59.3, 62.2, 62.9, 60.2, 61.2, 61.5, 59.6, 59.9, 62.6, 62.8, 59.7, 62.3, 61,
      63, 58.9, 61.8, 62.6, 61.1, 62.1, 61.3, 60.9, 61.3, 58.6, 62.4, 59.6, 61.3, 59.7, 60.8, 60,
      61.9, 62.6, 61.1, 62.3, 59, 60.3, 62.1, 61, 60.2, 61.9, 61.2, 60.8, 62, 61.7, 61.9, 62.1,
      58.2, 62, 62.6, 62.2, 60, 62.9, 61.7, 62.8, 62.3, 62.6, 62.7, 62.5, 62.7, 62, 60.1, 61.4,
      59.6, 60.1, 62.6, 63, 61.4, 59.4, 62.8, 61.3, 61, 62.7, 61.9, 63, 61.2, 61.3, 62.4, 60.2,
      61.9, 62.7, 60.2, 61.9, 62.8, 62.3, 62.2, 60.6, 62.1, 60.7, 59.8, 60.9, 59.2, 62.3, 61.4,
      60.9, 63, 61.5, 60.3,
    ],
  },
  {
    name: 'Very-Good',
    data: [
      62.9, 62.3, 63.4, 62.1, 60.7, 61.7, 58.1, 62.2, 60.5, 61.5, 63, 63, 60.4, 59.6, 59.4, 63.1,
      63.4, 63.1, 61.4, 62.9, 59.6, 62.7, 61.9, 59.3, 61.5, 62.4, 61.2, 58.6, 62.3, 63.3, 63.2,
      62.6, 61.2, 60.2, 63, 63.7, 60.8, 63.4, 62.7, 62.8, 60.9, 61.5, 58.8, 62.8, 62.7, 62.9, 62.4,
      60.9, 62.9, 63.5, 63.2, 62.8, 62.1, 63.4, 60.3, 62.8, 62.9, 58.2, 61.8, 61.1, 63.2, 62.7,
      59.8, 62.4, 61.4, 61.9, 61.1, 61.4, 63.6, 62.9, 62.6, 61.9, 60, 62.7, 60.9, 62.4, 62.1, 60.7,
      61.6, 63.4, 62.9, 61.9, 62, 62.2, 62.2, 63.2, 63, 61, 62.2, 62.9, 62.5, 63.6, 59.9, 61.1,
      62.2, 62.5, 60.3, 60.2, 60.2, 61.7, 63.3, 62.9, 62.3, 63.1, 61.8, 62.5, 62.7, 63, 61.8, 62.9,
      60.5, 62.6, 61.2, 63.3, 61.1, 62.8, 62.6, 61.6, 62.3, 60.4, 62.9, 62, 60.4, 61, 62.1, 61.9,
      60.9, 62.2, 64.2, 62.4, 60.4, 61.2, 63.2, 62.8, 62.1, 59.2, 62.4, 60.7, 62.5, 64, 63.3, 60.7,
      62.7, 60.6, 60.1, 61.9, 62.4, 61.7, 63.5, 59.1, 61.6, 60.7, 62.8, 61.2, 60.8, 61.2, 59.2,
      62.2, 63.1, 61.9, 60, 61.1, 60.5, 62.3, 62.8, 63.1, 61.8, 60.9, 63.3, 61.4, 61.6, 62.4, 63.1,
      59.6, 63, 62.5, 62.7, 62.3, 60.1, 60.7, 58.4, 63.3, 63.4, 63.4, 62.6, 61.2, 61.9, 63.8, 59.3,
      60.6, 62.6, 62.4, 62.9, 62.6, 63.7, 62, 63.3, 62.1, 61.7, 61.5, 63.5, 62, 61.2, 62.9, 59.5,
      58.5, 61.8, 62.5, 62.7, 63.1, 63.5, 61.4, 64, 63.2, 62.8, 64.2, 62.4, 63.6, 60.7, 62.9, 62.2,
      59.3, 62.8, 61.1, 62.9, 63.3, 62.4, 63.7, 63.4, 63.5, 62.9, 62.1, 63.1, 61.8, 61.9, 61.8,
      62.1, 62.2, 61.7, 62.5, 60.6, 60.6, 63.7, 63.2, 60.5, 63.1, 61.3, 60.2, 62.6, 63.5, 61.4,
      63.2, 58.6, 63, 61, 63.2, 61.4, 60.9, 63.5, 62.7, 62.6, 62.9, 62, 62.6, 59.1, 59.1, 61.3,
      61.8, 62.1, 63.2, 62.1, 60, 59.8, 59.2, 63.8, 59.5, 62.2, 59.5, 60.4, 62.1, 63.7, 63.2, 60.1,
      63, 63.2, 63.5, 60.1, 62.9, 59.7, 62.8, 62.1, 61, 61, 58, 62.1, 61, 60.2, 62.2, 62.9, 59.4,
      58.9, 63.1, 63.7, 62.5, 61.4, 62.6, 62.8, 62, 61, 63.4, 61.3, 62.6, 63.5, 63.3, 58.8, 61.7,
      61.1, 60.3, 62.3, 60.7, 62.8, 61.5, 61.3, 63.3, 59.6, 62.5, 60.7, 61, 62.9, 63.3, 62, 63,
      61.6, 61.4, 61.2, 62, 59.6, 62.4, 64.4, 62.6, 63.1, 63.1, 58.7, 62.8, 63.1, 60.5, 63.3, 62.6,
      62.2, 59.6, 62.1, 62.2, 63.4, 62.8, 63.5, 63.1, 62.8, 63.2, 61.8, 61.3, 60.9, 63.5, 62.8,
      63.1, 62, 60.9, 59.6, 62.1, 61.3, 62.5, 59.8, 60.5, 63.2, 62.2, 62.9, 60.2, 62.2, 62.5, 63.1,
      63, 58.6, 61.4, 58.7, 61.9, 62.8, 60.4, 61.5, 60, 61, 63.1, 62.5, 61.8, 62.9, 63.2, 61.5,
      62.2, 58.6, 63.1, 59.8, 59.2, 62.3, 61.6, 63.1, 62.8, 59.6, 63.2, 61.3, 63.4, 63.6, 59.3, 62,
      61.9, 63.4, 62.8, 63.1, 61.9, 60.1, 60.6, 58.2, 62.3, 60.4, 63.3, 57.1, 62.6, 62.1, 60.7,
      61.3, 63.2, 61.8, 62.2, 60.5, 57.1, 62.5, 63.1, 63.3, 60.2, 61.9, 63.1, 61.7, 62.9, 60.9,
      62.1, 63, 61.6, 62.6, 60.4, 59.6, 63.1, 61.4, 63.4, 64.2, 62,
    ],
  },
  {
    name: 'Fair',
    data: [
      66, 64.7, 64.8, 64.5, 67.4, 65, 67.6, 55.1, 61.7, 64.6, 65, 67.1, 67.8, 65, 54.7, 68.7, 68.2,
      59.4, 65.9, 64.5, 65.5, 69.8, 65.7, 61.2, 58.9, 66, 66.4, 64.9, 58.9, 65.5, 64.4, 66.9, 65.4,
      65.1, 66.3, 64.3, 65.7, 65.4, 55.2, 64.5, 64.4, 55.9, 66, 56.9, 59.5, 60, 64, 64.7, 69.5,
      60.1, 65, 65, 66.2, 61.1, 65, 64.7, 66.1, 55.3, 65.7, 65.2, 65.2, 55.9,
    ],
  },
];

const linebarData = [
  {
    name: '机房1',
    type: 'bar',
    data: [
      [1483372800000, 1892],
      [1483459200000, 7292],
      [1483545600000, 5714],
      [1483632000000, 5354],
      [1483718400000, 2014],
      [1483804800000, 22],
      [1483891200000, 11023],
      [1483977600000, 5218],
      [1484064000000, 8759],
      [1484150400000, 9981],
      [1484236800000, 4533],
      [1484323200000, 11398],
      [1484409600000, 1064],
      [1484496000000, 6494],
    ],
  },
  {
    name: '机房2',
    type: 'bar',
    data: [
      [1483372800000, 182],
      [1483459200000, 792],
      [1483545600000, 514],
      [1483632000000, 554],
      [1483718400000, 204],
      [1483804800000, 22],
      [1483891200000, 1023],
      [1483977600000, 528],
      [1484064000000, 879],
      [1484150400000, 981],
      [1484236800000, 453],
      [1484323200000, 1198],
      [1484409600000, 1064],
      [1484496000000, 694],
    ],
  },
  {
    name: '机房3',
    type: 'line',
    yAxis: 1,
    data: [
      [1483372800000, 11751],
      [1483459200000, 4078],
      [1483545600000, 2175],
      [1483632000000, 12048],
      [1483718400000, 1748],
      [1483804800000, 10494],
      [1483891200000, 9597],
      [1483977600000, 4788],
      [1484064000000, 2085],
      [1484150400000, 492],
      [1484236800000, 2965],
      [1484323200000, 4246],
      [1484409600000, 2160],
      [1484496000000, 11877],
    ],
  },
  {
    name: '机房4',
    type: 'line',
    yAxis: 1,
    data: [
      [1483372800000, 1151],
      [1483459200000, 4778],
      [1483545600000, 21175],
      [1483632000000, 19048],
      [1483718400000, 14748],
      [1483804800000, 18494],
      [1483891200000, 10597],
      [1483977600000, 8788],
      [1484064000000, 12985],
      [1484150400000, 2492],
      [1484236800000, 5965],
      [1484323200000, 10246],
      [1484409600000, 12160],
      [1484496000000, 6877],
    ],
  },
];

const lineboxData = [
  {
    name: '机房1',
    type: 'box',
    data: [
      [1483372800000, [11000, 11300, 11751, 11900, 12100]],
      [1483459200000, [3000, 3428, 4078, 5098, 4178]],
      [1483545600000, [1100, 1600, 2175, 2500, 3000]],
    ],
  },
  {
    name: '机房3',
    type: 'line',
    yAxis: 1,
    data: [
      [1483372800000, 11751],
      [1483459200000, 4078],
      [1483545600000, 2175],
      [1483632000000, 12048],
      [1483718400000, 1748],
      [1483804800000, 10494],
      [1483891200000, 9597],
      [1483977600000, 4788],
      // [1484064000000, 2085],
      // [1484150400000, 492],
      // [1484236800000, 2965],
      // [1484323200000, 4246],
      // [1484409600000, 2160],
      // [1484496000000, 11877],
    ],
  },
  // {
  //   name: '机房4',
  //   type: 'line',
  //   yAxis: 1,
  //   data: [
  //     [1483372800000, 1151],
  //     [1483459200000, 4778],
  //     [1483545600000, 21175],
  //     [1483632000000, 19048],
  //     [1483718400000, 14748],
  //     [1483804800000, 18494],
  //     [1483891200000, 10597],
  //     [1483977600000, 8788],
  //     [1484064000000, 12985],
  //     [1484150400000, 2492],
  //     [1484236800000, 5965],
  //     [1484323200000, 10246],
  //     [1484409600000, 12160],
  //     [1484496000000, 6877],
  //   ],
  // },
];

const linescatterData = [
  {
    name: '平均值',
    type: 'line',
    yAxis: 0,
    data: [
      [1483372800000, 3592],
      [1483459200000, 6092],
      [1483545600000, 5714],
      [1483632000000, 5984],
      [1483718400000, 8514],
      [1483804800000, 8666],
      [1483891200000, 8023],
      [1483977600000, 6018],
      [1484064000000, 8759],
      [1484150400000, 9981],
      [1484236800000, 4533],
      [1484323200000, 11398],
      [1484409600000, 1064],
      [1484496000000, 6494],
    ],
  },
  {
    name: '范围',
    type: 'line',
    yAxis: 0,
    data: [
      [1483372800000, [1592, 5135]],
      [1483459200000, [4092, 8341]],
      [1483545600000, [3714, 7561]],
      [1483632000000, [3984, 8321]],
      [1483718400000, [6514, 10000]],
      [1483804800000, [6666, 10000]],
      [1483891200000, [6023, 10000]],
      [1483977600000, [4018, 8654]],
      [1484064000000, [6759, 10759]],
      [1484150400000, [7981, 11981]],
      [1484236800000, [533, 8533]],
      [1484323200000, [7398, 15398]],
      [1484409600000, [64, 3264]],
      [1484496000000, [2494, 10494]],
    ],
  },
  {
    name: '机房2',
    type: 'scatter',
    yAxis: 1,
    data: [
      [1483372800000, 11751],
      [1483459200000, 4078],
      [1483545600000, 2175],
      [1483632000000, 12048],
      [1483718400000, 1748],
      [1483804800000, 10494],
      [1483891200000, 9597],
      [1483977600000, 4788],
      [1484064000000, 2085],
      [1484150400000, 492],
      [1484236800000, 2965],
      [1484323200000, 4246],
      [1484409600000, 2160],
      [1484496000000, 11877],
    ],
  },
  {
    name: '均值',
    type: 'line',
    yAxis: 0,
    data: [
      [1483372800000, 7000],
      [1483459200000, 7000],
      [1483545600000, 7000],
      [1483632000000, 7000],
      [1483718400000, 7000],
      [1483804800000, 7000],
      [1483891200000, 7000],
      [1483977600000, 7000],
      [1484064000000, 7000],
      [1484150400000, 7000],
      [1484236800000, 7000],
      [1484323200000, 7000],
      [1484409600000, 7000],
      [1484496000000, 7000],
    ],
  },
];

const multicircleData = [
  {
    name: '柱1',
    data: [
      ['一', 0.58],
      ['二', 0.23],
      // ['三', 0.19],
      // ['四', 0.27],
      // ['五', 1.29],
      // ['22', 0.27],
      // ['五22', 1.29],
    ],
  },
];

const multipieData = {
  name: 'root',
  value: 0,
  children: [
    {
      name: 'root-0',
      children: [
        {
          name: 'root-0-0',
          value: 150,
        },
      ],
    },
    {
      name: 'root-1',
      children: [
        {
          name: 'root-1-0',
          value: 60,
        },
        {
          name: 'root-1-1',
          value: 86,
        },
      ],
    },
    {
      name: 'root-2',
      children: [
        {
          name: 'root-2-0',
          value: 85,
        },
        {
          name: 'root-2-1',
          value: 100,
        },
      ],
    },
  ],
};

const nightData = [
  {
    name: '人口比例',
    data: [
      ['2001', 41.8],
      ['2002', 38],
      ['2003', 33.7],
      ['2004', 30.7],
      ['2005', 25.8],
      ['2006', 31.7],
      ['2007', 33],
      ['2008', 46],
      ['2009', 38.3],
      ['2010', 28],
      ['2011', 42.5],
      ['2012', 30.3],
    ],
  },
];

const radarData = [
  {
    name: '平均水准',
    data: [
      ['2001', 41],
      ['2002', 38],
      ['2003', 33],
      ['2004', 30],
      ['2005', 25],
      ['2006', 42],
    ],
  },
  {
    name: '个人水准',
    data: [
      ['2001', 25],
      ['2002', 72],
      ['2003', 35],
      ['2004', 27],
      ['2005', 54],
      ['2006', 52],
    ],
  },
];

const sankeyData = {
  nodes: [
    {
      name: 'a',
      id: 'a',
    },
    {
      name: 'b',
    },
    {
      name: 'a1',
    },
    {
      name: 'a2',
    },
    {
      name: 'b1',
    },
    {
      name: 'c',
    },
  ],
  links: [
    {
      source: 'a',
      target: 'a1',
      value: 5,
    },
    {
      source: 'a',
      target: 'a2',
      value: 3,
    },
    {
      source: 'b',
      target: 'b1',
      value: 8,
    },
    {
      source: 'a',
      target: 'b1',
      value: 3,
    },
    {
      source: 'b1',
      target: 'a1',
      value: 1,
    },
    {
      source: 'b1',
      target: 'c',
      value: 2,
    },
  ],
};

const scatterData = [
  {
    name: '机房1',
    data: [
      [1483372800000, 1892],
      [1483459200000, 7292],
      [1483545600000, 5714],
      [1483632000000, 5354],
      [1483718400000, 2014],
      [1483804800000, 22],
      [1483891200000, 11023],
      [1483977600000, 5218],
      [1484064000000, 8759],
      [1484150400000, 9981],
      [1484236800000, 4533],
      [1484323200000, 11398],
      [1484409600000, 1064],
      [1484496000000, 6494],
    ],
  },
  {
    name: '机房2',
    data: [
      [1483372800000, 3242],
      [1483459200000, 2292],
      [1483545600000, 4714],
      [1483632000000, 2354],
      [1483718400000, 5014],
      [1483804800000, 2322],
      [1483891200000, 12023],
      [1483977600000, 4218],
      [1484064000000, 2759],
      [1484150400000, 6981],
      [1484236800000, 12533],
      [1484323200000, 8398],
      [1484409600000, 2064],
      [1484496000000, 4494],
    ],
  },
];

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

stories.add('getLegendItems', () => {
  const barRef = useRef({});
  const lineRef = useRef({});
  const pieRef = useRef({});
  const boxRef = useRef({});
  const candleRef = useRef({});
  const funnelRef = useRef({});
  const heatmapRef = useRef({});
  const histogramRef = useRef({});
  const linebarRef = useRef({});
  const lineboxRef = useRef({});
  const linescatterRef = useRef({});
  const multicircleRef = useRef({});
  const multipieRef = useRef({});
  const nightRef = useRef({});
  const radarRef = useRef({});
  const sankeyRef = useRef({});
  const scatterRef = useRef({});

  useEffect(() => {
    setTimeout(() => {
      console.log(barRef.current.getLegendItems());
      console.log(lineRef.current.getLegendItems());
      console.log(pieRef.current.getLegendItems());
      console.log(boxRef.current.getLegendItems());
      console.log(candleRef.current.getLegendItems());
      console.log(funnelRef.current.getLegendItems());
      console.log(heatmapRef.current.getLegendItems());
      console.log(histogramRef.current.getLegendItems());
      console.log(linebarRef.current.getLegendItems());
      console.log(lineboxRef.current.getLegendItems());
      console.log(linescatterRef.current.getLegendItems());
      console.log(multicircleRef.current.getLegendItems());
      console.log(multipieRef.current.getLegendItems());
      console.log(nightRef.current.getLegendItems());
      console.log(radarRef.current.getLegendItems());
      console.log(sankeyRef.current.getLegendItems());
      console.log(scatterRef.current.getLegendItems());
    }, 3000);
  }, []);

  return (
    <div>
      <Wbar height="300" chartRef={barRef} data={barData} />
      <Wline
        height="300"
        chartRef={lineRef}
        data={lineData}
        config={{ colors: ['#aaa', '#cc0000', '#00bb00'] }}
      />
      <Wpie height="300" chartRef={pieRef} data={pieData} />
      <Wbox height="300" chartRef={boxRef} data={boxData} />
      <Wcandlestick height="300" chartRef={candleRef} data={candleData} />
      <Wfunnel height="300" chartRef={funnelRef} data={funnelData} />
      <Wheatmap height="300" chartRef={heatmapRef} data={heatmapData} />
      <Whistogram height="300" chartRef={histogramRef} data={histogramData} />
      <Wlinebar height="300" chartRef={linebarRef} data={linebarData} />
      <Wlinebox height="300" chartRef={lineboxRef} data={lineboxData} />
      <Wlinescatter height="300" chartRef={linescatterRef} data={linescatterData} />
      <Wmulticircle height="300" chartRef={multicircleRef} data={multicircleData} />
      <WmultiPie height="300" chartRef={multipieRef} data={multipieData} />
      <Wnightingale height="300" chartRef={nightRef} data={nightData} />
      <Wradar height="300" chartRef={radarRef} data={radarData} />
      <Wsankey
        height="300"
        chartRef={sankeyRef}
        data={sankeyData}
        config={{
          primaryKey: 'name',
          edgeStyle: {
            color: 'source', // source | gradient
          },
        }}
      />
      <Wscatter height="300" chartRef={scatterRef} data={scatterData} />
    </div>
  );
});

stories.add('filterLegend', () => {
  const barRef = useRef({});
  const lineRef = useRef({});
  const pieRef = useRef({});
  const boxRef = useRef({});
  const candleRef = useRef({});
  const funnelRef = useRef({});
  const heatmapRef = useRef({});
  const histogramRef = useRef({});
  const linebarRef = useRef({});
  const lineboxRef = useRef({});
  const linescatterRef = useRef({});
  const multicircleRef = useRef({});
  const multipieRef = useRef({});
  const nightRef = useRef({});
  const radarRef = useRef({});
  const sankeyRef = useRef({});
  const scatterRef = useRef({});

  useEffect(() => {
    setTimeout(() => {
      barRef.current.filterLegend((value) => value !== '柱1');
      lineRef.current.filterLegend((value) => value !== '异常点');
      pieRef.current.filterLegend((value) => value !== 'IE');
      boxRef.current.filterLegend((value) => value !== '柱1');
      candleRef.current.filterLegend((value) => value !== 'up');
      funnelRef.current.filterLegend((value) => value !== '放入购物车');
      heatmapRef.current.filterLegend((value) => value !== '类型一');
      histogramRef.current.filterLegend((value) => value !== 'Good');
      linebarRef.current.filterLegend((value) => value !== '机房3');
      lineboxRef.current.filterLegend((value) => value !== '机房3');
      linescatterRef.current.filterLegend((value) => value !== '范围');
      multicircleRef.current.filterLegend((value) => value !== '一');
      multipieRef.current.filterLegend((value) => value !== 'root-0');
      nightRef.current.filterLegend((value) => value !== '2012');
      radarRef.current.filterLegend((value) => value !== '平均水准');
      sankeyRef.current.filterLegend((value) => value !== 'a');
      scatterRef.current.filterLegend((value) => value !== '机房1');
    }, 3000);
  }, []);

  return (
    <div>
      <Wbar height="300" chartRef={barRef} data={barData} />
      <Wline height="300" chartRef={lineRef} data={lineData} />
      <Wpie height="300" chartRef={pieRef} data={pieData} />
      <Wbox height="300" chartRef={boxRef} data={boxData} />
      <Wcandlestick height="300" chartRef={candleRef} data={candleData} />
      <Wfunnel height="300" chartRef={funnelRef} data={funnelData} />
      <Wheatmap height="300" chartRef={heatmapRef} data={heatmapData} />
      <Whistogram height="300" chartRef={histogramRef} data={histogramData} />
      <Wlinebar height="300" chartRef={linebarRef} data={linebarData} />
      <Wlinebox height="300" chartRef={lineboxRef} data={lineboxData} />
      <Wlinescatter height="300" chartRef={linescatterRef} data={linescatterData} />
      <Wmulticircle height="300" chartRef={multicircleRef} data={multicircleData} />
      <WmultiPie height="300" chartRef={multipieRef} data={multipieData} />
      <Wnightingale height="300" chartRef={nightRef} data={nightData} />
      <Wradar height="300" chartRef={radarRef} data={radarData} />
      <Wsankey
        height="300"
        chartRef={sankeyRef}
        data={sankeyData}
        config={{
          primaryKey: 'name',
          edgeStyle: {
            color: 'source', // source | gradient
          },
        }}
      />
      <Wscatter height="300" chartRef={scatterRef} data={scatterData} />
    </div>
  );
});

stories.add('highlight', () => {
  const barRef = useRef({});
  const lineRef = useRef({});
  const pieRef = useRef({});
  const boxRef = useRef({});
  const candleRef = useRef({});
  const funnelRef = useRef({});
  const heatmapRef = useRef({});
  const histogramRef = useRef({});
  const linebarRef = useRef({});
  const lineboxRef = useRef({});
  const linescatterRef = useRef({});
  const multicircleRef = useRef({});
  const multipieRef = useRef({});
  const nightRef = useRef({});
  const radarRef = useRef({});
  const sankeyRef = useRef({});
  const scatterRef = useRef({});

  useEffect(() => {
    setTimeout(() => {
      barRef.current.highlightLegend((value) => value === '柱1');
      lineRef.current.highlightLegend((value) => value === '异常点');
      pieRef.current.highlightLegend((value) => value === 'IE');
      boxRef.current.highlightLegend((value) => value === '柱1');
      candleRef.current.highlightLegend((value) => value === 'up');
      funnelRef.current.highlightLegend((value) => value === '放入购物车');
      heatmapRef.current.highlightLegend((value) => value === '类型一');
      histogramRef.current.highlightLegend((value) => value === 'Good');
      linebarRef.current.highlightLegend((value) => value === '机房3');
      lineboxRef.current.highlightLegend((value) => value === '机房3');
      linescatterRef.current.highlightLegend((value) => value === '平均值');
      multicircleRef.current.highlightLegend((value) => value === '一');
      multipieRef.current.highlightLegend((value) => value === 'root-0');
      nightRef.current.highlightLegend((value) => value === '2012');
      radarRef.current.highlightLegend((value) => value === '平均水准');
      sankeyRef.current.highlightLegend((value) => value === 'a');
      scatterRef.current.highlightLegend((value) => value === '机房1');
    }, 3000);

    setTimeout(() => {
      barRef.current.clearHighlight();
      lineRef.current.clearHighlight();
      pieRef.current.clearHighlight();
      boxRef.current.clearHighlight();
      candleRef.current.clearHighlight();
      funnelRef.current.clearHighlight();
      heatmapRef.current.clearHighlight();
      histogramRef.current.clearHighlight();
      linebarRef.current.clearHighlight();
      lineboxRef.current.clearHighlight();
      linescatterRef.current.clearHighlight();
      multicircleRef.current.clearHighlight();
      multipieRef.current.clearHighlight();
      nightRef.current.clearHighlight();
      radarRef.current.clearHighlight();
      sankeyRef.current.clearHighlight();
      scatterRef.current.clearHighlight();
    }, 5000);
  }, []);

  return (
    <div>
      <Wbar height="300" chartRef={barRef} data={barData} />
      <Wline height="300" chartRef={lineRef} data={lineData} />
      <Wpie height="300" chartRef={pieRef} data={pieData} />
      <Wbox height="300" chartRef={boxRef} data={boxData} />
      <Wcandlestick height="300" chartRef={candleRef} data={candleData} />
      <Wfunnel height="300" chartRef={funnelRef} data={funnelData} />
      <Wheatmap height="300" chartRef={heatmapRef} data={heatmapData} />
      <Whistogram height="300" chartRef={histogramRef} data={histogramData} />
      <Wlinebar height="300" chartRef={linebarRef} data={linebarData} />
      <Wlinebox height="300" chartRef={lineboxRef} data={lineboxData} />
      <Wlinescatter height="300" chartRef={linescatterRef} data={linescatterData} />
      <Wmulticircle height="300" chartRef={multicircleRef} data={multicircleData} />
      <WmultiPie height="300" chartRef={multipieRef} data={multipieData} />
      <Wnightingale height="300" chartRef={nightRef} data={nightData} />
      <Wradar height="300" chartRef={radarRef} data={radarData} />
      <Wsankey
        height="300"
        chartRef={sankeyRef}
        data={sankeyData}
        config={{
          primaryKey: 'name',
          edgeStyle: {
            color: 'source', // source | gradient
          },
        }}
      />
      <Wscatter height="300" chartRef={scatterRef} data={scatterData} />
    </div>
  );
});

const CustomLegend = (props) => {
  const { chartRef } = props;

  const legendItems = useMemo(() => chartRef?.current?.getLegendItems(), []);

  const [filteredItems, setFilteredItems] = useState([]);
  const [visibleIcon, setVisibleIcon] = useState(-1);

  useEffect(() => {
    clearActive();
    chartRef?.current?.filterLegend((value: any) => {
      return !filteredItems.includes(value);
    });
  }, [filteredItems]);

  const activeItem = (itemName: string) => {
    if (filteredItems.includes(itemName)) {
      return;
    }
    chartRef?.current?.highlightLegend((value: any) => value === itemName);
  };

  const clearActive = () => {
    chartRef?.current?.clearHighlight();
  };

  return (
    <div>
      <table>
        <tbody>
          {legendItems.map((item: any, index: number) => (
            <tr
              key={item.name}
              style={{
                cursor: 'pointer',
              }}
              onMouseEnter={() => {
                activeItem(item.name);
              }}
              onMouseLeave={() => {
                clearActive();
              }}
            >
              <td>
                <div
                  style={{
                    width: 15,
                    height: 15,
                    background: !filteredItems.includes(item.name) ? item.color : '#000',
                  }}
                  onClick={() => {
                    if (filteredItems.includes(item.name)) {
                      setFilteredItems((pre) =>
                        pre.filter((filteredItem) => filteredItem !== item.name),
                      );
                    } else if (filteredItems.length !== legendItems.length - 1) {
                      setFilteredItems((pre) => [...pre, item.name]);
                    }
                  }}
                  onMouseEnter={() => {
                    setVisibleIcon(index);
                  }}
                  onMouseLeave={() => {
                    setVisibleIcon(-1);
                  }}
                >
                  {visibleIcon === index && !filteredItems.includes(item.name) && (
                    <svg viewBox="0 0 1024 1024" width="15" height="15">
                      <path
                        fill="#fff"
                        d="M557.44 512l234.24-234.24c10.24-10.24 12.8-32.64 0-45.44s-35.2-10.24-45.44 0L512 466.56 277.76 232.32c-10.24-10.24-32.64-12.8-45.44 0s-10.24 35.2 0 45.44L466.56 512l-234.24 234.24c-10.24 10.24-12.8 32.64 0 45.44s35.2 10.24 45.44 0L512 557.44l234.24 234.24c10.24 10.24 32.64 12.8 45.44 0s10.24-35.2 0-45.44L557.44 512z"
                      ></path>
                    </svg>
                  )}
                </div>
              </td>
              <td
                onClick={() => {
                  setFilteredItems(
                    legendItems
                      .map((legendItem) => legendItem.name)
                      .filter((legendName) => legendName !== item.name),
                  );
                }}
              >
                {item.name}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

stories.add('自定义legend（线图）', () => {
  const ref = useRef({});
  const [visible, setVisible] = useState(false);
  return (
    <div>
      <Wline
        height="300"
        data={lineData}
        config={{
          legend: false,
        }}
        chartRef={ref}
        event={{
          afterpaint: () => {
            setVisible(true);
          },
        }}
      />
      {visible && <CustomLegend chartRef={ref} />}
    </div>
  );
});

const testData = [
  {
    name: '类型一',
    data: [['aws1', 'aws1', 10]],
  },
  {
    name: '类型二',
    data: [['aws2', 'aws1', 50]],
  },
  {
    name: '类型三',
    data: [['aws3', 'aws1', 120]],
  },
  {
    name: '类型四',
    data: [['aws4', 'aws1', 400]],
  },
];

const CustomLegend2 = (props) => {
  const { chartRef } = props;

  const legendItems = useMemo(() => chartRef?.current?.getLegendItems(), []);

  const activeItem = (itemName: string) => {
    chartRef?.current?.highlightLegend((value: any) => value === itemName);
  };
  const clearActive = () => {
    chartRef?.current?.clearHighlight();
  };
  return (
    <div style={{ position: 'relative', height: 50 }}>
      <div style={{ display: 'flex', flexDirection: 'row', cursor: 'pointer' }}>
        {legendItems.map((legendItem: any) => {
          return (
            <div
              key={legendItem.name}
              style={{ width: 50, height: 20, background: legendItem.color }}
              onMouseEnter={() => {
                activeItem(legendItem.name);
              }}
              onMouseLeave={() => {
                clearActive();
              }}
            />
          );
        })}
      </div>
      <div
        style={{ display: 'flex', flexDirection: 'row', position: 'absolute', left: -10, top: 25 }}
      >
        {[0, 20, 100, 200, 500].map((value, index) => (
          <div key={value} style={{ position: 'absolute', left: index * 50 }}>
            <span>{value}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

stories.add('自定义legend（热力图）', () => {
  const ref = useRef({});
  const [visible, setVisible] = useState(false);

  return (
    <div>
      <Wheatmap
        height="600"
        data={testData}
        config={{
          xAxis: false,
          yAxis: false,
          legend: false,
        }}
        chartRef={ref}
        event={{
          afterpaint: () => {
            setVisible(true);
          },
        }}
      />
      {visible && <CustomLegend2 chartRef={ref} />}
    </div>
  );
});

const lineData2 = [
  {
    name: '年度增长',
    data: [
      [1483372800000, 4],
      [1483459200000, 3.5],
      [1483545600000, 5],
      [1483632000000, 4.9],
      [1483718400000, 6],
      [1483804800000, 7],
      [1483891200000, 9],
      [1483977600000, 13],
    ],
  },
];

stories.add('数据改变', () => {
  const ref = useRef(null);
  const [data, setData] = useState(lineData);

  useEffect(() => {
    setTimeout(() => {
      console.log(ref?.current?.getLegendItems());
      ref.current?.filterLegend((value) => value !== '异常点');
    }, 1000);

    setTimeout(() => {
      setData(lineData2);
    }, 3000);

    setTimeout(() => {
      console.log(ref?.current?.getLegendItems());
    }, 5000);
  }, []);

  return (
    <div>
      <Wline height="300" data={data} chartRef={ref} />
    </div>
  );
});