statoscope.tech/reports.js at main · statoscope/statoscope.tech · 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
/* eslint-env node */

const fs = require('fs');
const buildStats = require('./demo-bundle-history');

const customReport1DemoText = `
### This is a custom report

It allows you to construct any view and pass any data to that view.

Also, you can share the link to your reports with your colleagues.

For example, this report shows you top 20 of biggest modules in your bundle.

Please, see [docs](https://github.com/statoscope/statoscope/tree/master/packages/webpack-plugin#optionsreports-report) to learn more.
`;

module.exports = [
  {
    id: 'top-20-biggest-modules',
    name: 'Top 20 biggest modules',
    data: { this: { is: ['a custom data', 'that passed', 'to the report'] } }, // or () => fetchAsyncData()
    view: [
      `md:${JSON.stringify(customReport1DemoText)}`,
      'struct',
      {
        data: `#.stats.compilations.(
              $compilation: $;
              modules.({
                module: $,
                hash: $compilation.hash,
                size: getModuleSize($compilation.hash)
              })
            ).sort(size.size desc)[:20]`,
        view: 'list',
        item: 'module-item',
      },
    ],
  },
  {
    id: 'report-with-a-chart',
    name: 'Report with a chart',
    data: buildStats,
    view: {
      view: 'box',
      options: { height: '400px' },
      content: {
        view: 'chart',
        data: `{
          type: 'line',
          data: {
            labels: .date,
            datasets: [{
              label: 'Build Time (sec)',
              data: .size,
              borderColor: '#f00',
              backgroundColor: '#f00',
            }, {
                label: 'Bundle Size (mb)',
                data: .time,
                borderColor: '#00f',
                backgroundColor: '#00f',
            }]
          },
          options: {
            responsive: true,
            plugins: {
              legend: {
                position: 'top',
              },
              title: {
                display: true,
                text: 'Bundle history'
              }
            }
          },
        }`,
      },
    },
  },
  {
    id: 'report-view-can-be-a-script',
    name: 'Report view can be a script',
    view: fs.readFileSync('./custom-report.js', 'utf8'),
  },
];