📦 navidrome / insights

📄 index.html · 99 lines
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
98
99<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Navidrome Insights</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Oxygen, Ubuntu, sans-serif;
        background-color: #f5f5f5;
        padding: 20px;
      }
      h1 {
        text-align: center;
        color: #333;
        margin-bottom: 30px;
      }
      #charts-container {
        max-width: 1024px;
        margin: 0 auto;
      }
      .chart-container {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
        padding: 20px;
      }
      .chart {
        width: 100%;
        height: 500px;
      }
      .loading {
        text-align: center;
        padding: 50px;
        color: #666;
      }
      .error {
        text-align: center;
        padding: 50px;
        color: #d32f2f;
      }
    </style>
  </head>
  <body>
    <h1>Navidrome Insights</h1>
    <div id="charts-container">
      <div class="loading">Loading charts...</div>
    </div>

    <script>
      async function loadCharts() {
        const container = document.getElementById("charts-container");

        try {
          const response = await fetch("/chartdata/charts.json");
          if (!response.ok) {
            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
          }
          const data = await response.json();
          const chartsData = data.charts || data; // Support both new and old format

          container.innerHTML = "";

          for (const { id, options } of chartsData) {
            const wrapper = document.createElement("div");
            wrapper.className = "chart-container";

            const chartDiv = document.createElement("div");
            chartDiv.id = id;
            chartDiv.className = "chart";

            wrapper.appendChild(chartDiv);
            container.appendChild(wrapper);

            const chart = echarts.init(chartDiv);
            chart.setOption(options);

            // Handle resize
            window.addEventListener("resize", () => chart.resize());
          }
        } catch (error) {
          container.innerHTML = `<div class="error">Failed to load charts: ${error.message}</div>`;
          console.error("Error loading charts:", error);
        }
      }

      loadCharts();
    </script>
  </body>
</html>