patternfly-react/packages/react-charts/src/echarts/components/Line/examples/Theme.tsx at 3c5af5fa2da358e340770b85effb6b39e9a5adec · Mash707/patternfly-react · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
import { FunctionComponent } from 'react';
import { getComputedStyleValue, getCustomTheme, Charts, ThemeColor } from '@patternfly/react-charts/echarts';

import * as echarts from 'echarts/core';
import { LineChart } from 'echarts/charts';
import { GridComponent, TitleComponent, TooltipComponent } from 'echarts/components';
import { SVGRenderer } from 'echarts/renderers';

import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300';
import chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color_green_300';
import chart_color_purple_300 from '@patternfly/react-tokens/dist/esm/chart_color_purple_300';
import chart_color_teal_300 from '@patternfly/react-tokens/dist/esm/chart_color_teal_300';
import chart_color_yellow_300 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_300';

// Register required components
echarts.use([GridComponent, LineChart, SVGRenderer, TitleComponent, TooltipComponent]);

export const Theme: FunctionComponent = () => {
  const myCustomTheme = getCustomTheme(ThemeColor.default, {
    color: [
      getComputedStyleValue(chart_color_purple_300),
      getComputedStyleValue(chart_color_blue_300),
      getComputedStyleValue(chart_color_green_300),
      getComputedStyleValue(chart_color_teal_300),
      getComputedStyleValue(chart_color_yellow_300)
    ]
  });

  return (
    <Charts
      height={400}
      id="basic-chart"
      nodeSelector="html"
      option={{
        grid: {
          right: '100'
        },
        legend: {
          left: 'right',
          orient: 'vertical',
          top: 'middle'
        },
        xAxis: {
          type: 'category',
          data: ['2015', '2016', '2017', '2018']
        },
        yAxis: {
          axisLabel: {
            formatter: (value) => (value !== 0 ? `${value}` : '')
          },
          splitNumber: 3,
          type: 'value'
        },
        series: [
          {
            data: [1, 2, 5, 3],
            name: 'Cats',
            symbol: 'rect',
            type: 'line'
          },
          {
            data: [2, 1, 7, 4],
            name: 'Dogs',
            lineStyle: {
              type: 'dashed'
            },
            symbol: 'arrow',
            type: 'line'
          },
          {
            data: [3, 4, 9, 5],
            name: 'Birds',
            symbol: 'circle',
            type: 'line'
          },
          {
            data: [3, 3, 8, 7],
            name: 'Mice',
            symbol: 'emptyCircle',
            type: 'line'
          }
        ],
        title: {
          left: 'center',
          text: 'This is a Line chart'
        }
      }}
      theme={myCustomTheme}
      width={825}
    />
  );
};