| <!doctype html> |
| <!-- |
| Copyright 2024 The Dawn & Tint Authors |
| |
| Redistribution and use in source and binary forms, with or without |
| modification, are permitted provided that the following conditions are met: |
| |
| 1. Redistributions of source code must retain the above copyright notice, this |
| list of conditions and the following disclaimer. |
| |
| 2. Redistributions in binary form must reproduce the above copyright notice, |
| this list of conditions and the following disclaimer in the documentation |
| and/or other materials provided with the distribution. |
| |
| 3. Neither the name of the copyright holder nor the names of its |
| contributors may be used to endorse or promote products derived from |
| this software without specific prior written permission. |
| |
| THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" |
| AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE |
| IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE |
| DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE |
| FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL |
| DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR |
| SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER |
| CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, |
| OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE |
| OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
| --> |
| |
| <html> |
| <head> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet"> |
| <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> |
| <style> |
| html, body { |
| width: 100%; height: 100%; |
| margin: 0; padding: 0; |
| } |
| body { |
| font-family: 'Roboto', serif; |
| font-size: 12px; |
| background-color: #e4e4e4; |
| } |
| </style> |
| <script type="text/javascript"> |
| const add_commas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") |
| |
| addEventListener('beforeunload', () => { |
| fetch("viewer.closed"); |
| }); |
| |
| google.charts.load('current', {'packages':['treemap']}); |
| google.charts.setOnLoadCallback(drawChart); |
| function drawChart() { |
| fetch("data.json").then(response => response.json()).then(json => { |
| document.getElementById('desc_div').innerHTML = json.desc; |
| var data = google.visualization.arrayToDataTable(json.data); |
| tree = new google.visualization.TreeMap(document.getElementById('chart_div')); |
| |
| tree.draw(data, { |
| maxDepth: 3, |
| maxPostDepth: 10, |
| hintOpacity: 0.1, |
| minColorValue: 1, |
| maxColorValue: json.limit, |
| minColor: '#00cc00', |
| midColor: '#cccc00', |
| maxColor: '#cc00cc', |
| headerHeight: 15, |
| fontColor: 'black', |
| showScale: true, |
| generateTooltip: (row, size, value) => { |
| return ` |
| <div style="background:#fd9; padding:10px; border-style:solid"> |
| <code>${data.getValue(row, 0)}</code><br>${data.getColumnLabel(2)}: ${add_commas(size)} |
| </div>`; |
| }, |
| }); |
| }); |
| } |
| </script> |
| </head> |
| <body> |
| <div id="desc_div"></div> |
| <div id="chart_div" style="width: 100%; height: 90%;"></div> |
| </body> |
| </html> |
