npmcharts.com/packages/frontend/src/graph/legend/legend.stories.js at 53a6555b2193c897e43da37af52a638972cd4111 · cheapsteak/npmcharts.com · 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
93
94
95
/* eslint-disable react/react-in-jsx-scope, react/no-this-in-sfc */

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

import legend from './legend.vue';

const makeLegend = data => ({
  components: { graphLegend: legend },
  data() {
    return data;
  },
  template: `
    <div class="chart">
      <graphLegend
        :modules="legendData.modules"
        :interval="interval"
        :date="legendData.date"
        @package-focus="handlePackageFocus"
        @package-blur="handlePackageBlur"
        @legend-blur="handleLegendBlur"
        @legend-focus="handleLegendFocus"
      >
      </graphLegend>
    </div>
  `,
  methods: {
    handlePackageFocus: action('packageFocus'),
    handlePackageBlur: action('packageBlur'),
    handleLegendFocus: action('legendFocus'),
    handleLegendBlur: action('legendBlur'),
  },
});

storiesOf('legend', module)
  .add('weekly', () =>
    makeLegend({
      legendData: {
        modules: [
          {
            color: '#2196F3',
            downloads: 1606437,
            name: 'log4js',
          },
          {
            color: '#f44336',
            downloads: 3228961,
            name: 'winston',
          },
        ],
        date: new Date(1543467600000),
      },
      interval: 7,
    }),
  )
  .add('daily', () =>
    makeLegend({
      legendData: {
        modules: [
          {
            color: '#2196F3',
            downloads: 310143,
            name: 'log4js',
          },
          {
            color: '#f44336',
            downloads: 615741,
            name: 'winston',
          },
        ],
        date: new Date(1543467600000),
      },
      interval: 1,
    }),
  )
  .add('monthly', () =>
    makeLegend({
      legendData: {
        modules: [
          {
            color: '#2196F3',
            downloads: 6343252,
            name: 'log4js',
          },
          {
            color: '#f44336',
            downloads: 13840361,
            name: 'winston',
          },
        ],
        date: new Date(1543467600000),
      },
      interval: 30,
    }),
  );