stories/chart.candlestick.stories.js

import React from 'react';
import { storiesOf } from '@storybook/react';
import { Wcandlestick, Wcontainer } from '@alicloud/cloud-charts';

const data = [
  {
    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 options = {
  tooltip: {
    // showTitle: true, // default: true
    labelAlias: {
      start: '开盘价',
      end: '收盘价',
      max: '最高价',
      min: '最低价',
    },
  },
};

const stories = storiesOf('Wcandlestick', module);
stories.add('烛形图', () => (
  <Wcontainer className="demos">
    <Wcandlestick height="300" config={options} data={data} />
  </Wcontainer>
));