https://gv-lastfm-playground.vercel.app/js/charts/YearChart.js

1let baseConfig = (type, data) => {
2  return {
3    chart: {
4      type: "column",
5      backgroundColor: null,
6      spacing: [0, 0, 0, 0],
7      animation: false,
8    },
9    title: {
10      text: null,
11    },
12    credits: {
13      enabled: false,
14    },
15    xAxis: {
16      crosshair: false,
17      visible: false,
18    },
19    yAxis: {
20      visible: false,
21    },
22    legend: {
23      enabled: false,
24    },
25    tooltip: {
26      backgroundColor: null,
27      headerFormat: `<span class="year-chart-tooltip">Week {point.key}</span></br>`,
28      shadow: false,
29      useHTML: true,
30      pointFormat: null,
31      borderColor: "transparent",
32      positioner: function (width, height, point) {
33        if (viewportWidth() > 768) {
34          // Desktop
35          return {
36            x: point.plotX,
37            y: this.chart.plotHeight + this.chart.plotTop,
38          };
39        } else {
40          return {
41            x: 8,
42            y: this.chart.plotTop - 50,
43          };
44        }
45      },
46      pointFormatter: function () {
47        let point = this;
48        return `<span class="year-chart-tooltip-footer">${point.y} ${type}</span>`;
49      },
50    },
51    plotOptions: {
52      column: {
53        cursor: "pointer",
54        color: "#000",
55        crisp: false,
56        // Set a transparent border to the columns so
57        // the hover state doesn't disable as easly when
58        // hovering between columns
59        borderWidth: 2,
60        borderColor: "transparent",
61        borderRadius: 0,
62        pointWidth: 4,
63        pointPadding: 0,
64        pointPadding: 0,
65        groupPadding: 0,
66      },
67    },
68    series: [
69      {
70        animation: false,
71        data: data,
72        point: {
73          events: {
74            mouseOver() {
75              let series = this.series;
76              series.points.forEach((p) => {
77                p.graphic.css({
78                  opacity: 0.3,
79                });
80              });
81
82              this.graphic.css({
83                opacity: 1,
84              });
85            },
86            mouseOut() {
87              let series = this.series;
88              series.points.forEach((p) => {
89                p.graphic.css({
90                  opacity: 1,
91                });
92              });
93            },
94          },
95        },
96      },
97    ],
98  };
99};
100
101const populateData = (chartId, elementId, category, chartData, total) => {
102  let element = document.getElementById(elementId);
103  if (!element) return;
104  let totalData = total ? total : dummyData.catalogue_items[category].total;
105  let data = dummyData.weekly_unique_item_stats[chartData];
106  let chartOptions = baseConfig(category, data);
107
108  element.innerHTML = numberWithCommas(totalData);
109  Highcharts.chart(chartId, {
110    ...chartOptions,
111  });
112};
113
114export const renderYearCharts = () => {
115  populateData(
116    "artists-chart",
117    "artists-count",
118    "artists",
119    "unique_artist_activity"
120  );
121
122  populateData(
123    "album-chart",
124    "albums-count",
125    "albums",
126    "unique_album_activity"
127  );
128
129  populateData(
130    "tracks-chart",
131    "tracks-count",
132    "tracks",
133    "unique_track_activity"
134  );
135
136  populateData(
137    "scrobbles-chart",
138    "scrobbles-count",
139    "scrobbles",
140    // Data missing: we need scrobbles here
141    "unique_track_activity",
142    dummyData.scrobble_stats.total_scrobbles
143  );
144};