npmcharts.com/packages/frontend/src/graph/graph.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
96
97
import { storiesOf } from '@storybook/vue';

import { processPackagesStats } from 'frontend/src/utils/processPackagesStats';
import standardizeNpmPackageResponse from 'utils/stats/standardizeNpmPackageResponse';
import dummyData from 'utils/dummyData';

import graph from './graph.vue';

const makeGraph = data => ({
  components: { graph },
  data() {
    return data;
  },
  template: `
    <main style="height: 100%;">
      <div class="chart-container">
        <graph
          class="chart"
          :module-names="packageNames"
          :package-download-stats="packageDownloadStats"
          :interval="interval"
          :is-minimal-mode="isMinimalMode === 'true'"
          :useLogScale="useLogScale"
        >
        </graph>
      </div>
    </main>
  `,
});

storiesOf('graph', module)
  .add('log4js, winston | weekly', () =>
    makeGraph({
      packageNames: ['log4js', 'winston'],
      packageDownloadStats: processPackagesStats(
        standardizeNpmPackageResponse(dummyData['log4js,winston']),
      ),
      isMinimalMode: false,
      interval: 7,
      useLogScale: false,
    }),
  )
  .add('log4js, winston | daily', () =>
    makeGraph({
      packageNames: ['log4js', 'winston'],
      packageDownloadStats: processPackagesStats(
        standardizeNpmPackageResponse(dummyData['log4js,winston']),
      ),
      isMinimalMode: false,
      interval: 1,
      useLogScale: false,
    }),
  )
  .add('log4js, winston | monthly', () =>
    makeGraph({
      packageNames: ['log4js', 'winston'],
      packageDownloadStats: processPackagesStats(
        standardizeNpmPackageResponse(dummyData['log4js,winston']),
      ),
      isMinimalMode: false,
      interval: 30,
      useLogScale: false,
    }),
  )
  .add('log4js, winston | weekly | log scale', () =>
    makeGraph({
      packageNames: ['log4js', 'winston'],
      packageDownloadStats: processPackagesStats(
        standardizeNpmPackageResponse(dummyData['log4js,winston']),
      ),
      isMinimalMode: false,
      interval: 7,
      useLogScale: true,
    }),
  )
  .add('log4js, winston | daily | log scale', () =>
    makeGraph({
      packageNames: ['log4js', 'winston'],
      packageDownloadStats: processPackagesStats(
        standardizeNpmPackageResponse(dummyData['log4js,winston']),
      ),
      isMinimalMode: false,
      interval: 1,
      useLogScale: true,
    }),
  )
  .add('log4js, winston | monthly | log scale', () =>
    makeGraph({
      packageNames: ['log4js', 'winston'],
      packageDownloadStats: processPackagesStats(
        standardizeNpmPackageResponse(dummyData['log4js,winston']),
      ),
      isMinimalMode: false,
      interval: 30,
      useLogScale: true,
    }),
  );