data-explorer-mk2/test-github-pages.html at main · ChronicChannel-test/data-explorer-mk2 · 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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>GitHub Pages URL Test</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      margin: 0;
      padding: 20px;
      background: #f5f5f5;
      color: #333;
    }

    .container {
      max-width: 800px;
      margin: 0 auto;
      background: white;
      padding: 40px;
      border-radius: 12px;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

    .url-test {
      background: #f8f9fa;
      padding: 20px;
      border-radius: 8px;
      margin: 20px 0;
      font-family: monospace;
    }

    .test-button {
      background: #3498db;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 6px;
      cursor: pointer;
      margin: 10px 5px;
    }

    .test-button:hover {
      background: #2980b9;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>GitHub Pages URL Structure Test</h1>
    <p>This page simulates the GitHub Pages environment to test URL generation.</p>

    <div class="url-test">
      <h3>Current Environment:</h3>
      <p id="current-env"></p>

      <h3>Current URL:</h3>
      <p id="current-url"></p>

        <h3>Generated URLs:</h3>
      <p><strong>Bubble Chart (page=bubblechart):</strong> <span id="bubble-url"></span></p>
      <p><strong>Line Chart (page=linechart):</strong> <span id="line-url"></span></p>
    </div>

    <div>
      <h3>Test URL Generation:</h3>
  <button class="test-button" onclick="testBubbleChart()">Test Bubble Chart URL</button>
  <button class="test-button" onclick="testLineChart()">Test Line Chart URL</button>
    </div>

    <div id="results"></div>
  </div>

  <script>
    // Copy the same functions from index.html for testing
    function normalizeChartId(chartId) {
      if (!chartId) {
        return 'bubblechart';
      }
      const mapping = {
        '1': 'bubblechart',
        'bubble': 'bubblechart',
        'bubblechart': 'bubblechart',
        '2': 'linechart',
        'line': 'linechart',
        'linechart': 'linechart'
      };
      const lower = String(chartId).toLowerCase();
      return mapping[lower] || lower;
    }

    function getDefaultUrl(chartId) {
      // Handle both local and GitHub Pages URLs
      let baseUrl = window.location.pathname;
      if (!baseUrl.endsWith('/')) {
        baseUrl += '/';
      }

      const isGitHubPages = window.location.hostname.includes('github.io');
      if (isGitHubPages && !baseUrl.includes('CIC-test-uk-air-pollution-emissions-data-explorer')) {
        baseUrl = '/CIC-test-uk-air-pollution-emissions-data-explorer/';
      }

      const normalizedId = normalizeChartId(chartId);

      if (normalizedId === 'bubblechart') {
        // Bubble chart defaults: PM2.5 (id=5), Ecodesign Stove + Gas Boilers (ids 20,37), most recent year (2023)
        return `${baseUrl}?page=bubblechart&pollutant_id=5&category_ids=20,37&year=2023`;
      }
      if (normalizedId === 'linechart') {
        // Line chart defaults: PM2.5 (id=5), All category (id=1), full history
        return `${baseUrl}?page=linechart&pollutant_id=5&category_ids=1&start_year=1970&end_year=2023`;
      }

      return `${baseUrl}?page=bubblechart`;
    }

    function getRedirectUrl(chartId) {
      return getDefaultUrl(chartId);
    }

    // Display current environment info
    document.addEventListener('DOMContentLoaded', function() {
      const isGitHubPages = window.location.hostname.includes('github.io');
      const isLocal = window.location.hostname === 'localhost';

      document.getElementById('current-env').textContent =
        isGitHubPages ? 'GitHub Pages' :
        isLocal ? 'Local Development' : 'Other';

      document.getElementById('current-url').textContent = window.location.href;
      document.getElementById('bubble-url').textContent = getDefaultUrl('bubblechart');
      document.getElementById('line-url').textContent = getRedirectUrl('linechart');
    });

    function testBubbleChart() {
      const url = getDefaultUrl('bubblechart');
      showResult('Bubble Chart URL', url);
    }

    function testLineChart() {
      const url = getRedirectUrl('linechart');
      showResult('Line Chart URL', url);
    }

    function showResult(type, url) {
      const results = document.getElementById('results');
      results.innerHTML = `
        <div class="url-test">
          <h3>${type} Result:</h3>
          <p><strong>Generated URL:</strong> ${url}</p>
          <p><a href="${url}" target="_blank">Test this URL</a></p>
        </div>
      `;
    }
  </script>
</body>
</html>