matrix-synapse-diskspace-janitor/frontend/panel.gotemplate.html

<div class="horizontal">

  <div class="chart-container">
    <h3>disk space</h3>
    <canvas id="chart1"></canvas>
  </div>

  <div class="chart-container">
    <h3>database tables</h3>
    <canvas id="chart2"></canvas>
  </div>

  <div class="chart-container">
    <h3>matrix rooms</h3>
    <canvas id="chart3"></canvas>
  </div>

</div> 

<script src="static/vendor/chart.js"></script>
<script>

  const diskUsage = {{ .DiskUsage }};
  const dbTableSizes = {{ .DBTableSizes }};
  const rowCountByRoom = {{ .RowCountByRoom }};

  //     disk space chart 

  const freeSpace = diskUsage.DiskSizeBytes - (diskUsage.PostgresBytes+diskUsage.MediaBytes+diskUsage.OtherBytes);
  new Chart(document.getElementById('chart1'), {
    type: 'doughnut',
    data: {
      labels: ["Postgres DB", "Matrix Media", "Other", "Free Space" ],
      datasets: [{
        label: 'GB',
        data: [diskUsage.PostgresBytes, diskUsage.MediaBytes, diskUsage.OtherBytes, freeSpace].map(x => x / 1000000000),
        borderWidth: 2
      }]
    },
    options: {
    }
  });




  //      database tables chart 

  dbTableSizes.sort((a, b) => {
     return b.Bytes - a.Bytes;
  });

  const top6 = dbTableSizes.slice(0, 5);
  const others = dbTableSizes.slice(5, dbTableSizes.length)
  top6.push({
    Name: "others",
    Bytes: others.reduce((accumulator, table) => accumulator + table.Bytes, 0)
  })

  const totalBytes = top6.reduce((accumulator, table) => accumulator + table.Bytes, 0);

  new Chart(document.getElementById('chart2'), {
    type: 'doughnut',
    data: {
      labels: top6.map(table => table.Name),
      datasets: [{
        label: 'filesize %',
        data: top6.map(table => Math.round((table.Bytes/totalBytes)*100)),
        borderWidth: 2
      }]
    },
    options: {
    }
  });



  //      matrix room size chart 
  const rooms = Object.entries(rowCountByRoom).map(entry => ({roomid: entry[0], rows: entry[1]}));

  rooms.sort((a, b) => {
     return b.rows - a.rows;
  });

  const top8 = rooms.slice(0, 7);
  const otherRooms = rooms.slice(7, rooms.length)
  top8.push({
    roomid: "others",
    rows: otherRooms.reduce((accumulator, table) => accumulator + table.rows, 0)
  })

  const totalRows = top8.reduce((accumulator, table) => accumulator + table.rows, 0);

  new Chart(document.getElementById('chart3'), {
    type: 'doughnut',
    data: {
      labels: top6.map(table => table.roomid),
      datasets: [{
        label: '%',
        data: top6.map(table => Math.round((table.rows/totalRows)*100)),
        borderWidth: 2
      }]
    },
    options: {
    }
  });


</script>