Auto-Shodanner/modules/main/Dashboard.html

<main class="container">
  <h2>Auto-Shodanner</h2>
  <p id="scanText">No scan is running, but this is where statistics will show up!</p>
  <canvas id="pingChart" style="display: none;"></canvas>
  <canvas id="threadChart" style="display: none;"></canvas>
</main>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const scanText = document.getElementById('scanText')

const pingChartctx = document.getElementById('pingChart')
const pingChart = new Chart(pingChartctx, {
  type: 'line',
  responsive: true,
  labels: Array.from(Array(10).keys()),
  data: {
    datasets: [{
      label: 'IPs UP Per second',
      data: [],
      borderWidth: 1
    },{
      label: 'IPs DOWN Per second',
      data: [],
      borderWidth: 1
    },{
      label: 'IPs with ports Per second',
      data: [],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      x: {
        type: 'linear'
      }
    }
  }
})

const threadChartctx = document.getElementById('threadChart')
const threadChart = new Chart(threadChartctx, {
  type: 'line',
  responsive: true,
  labels: Array.from(Array(10).keys()),
  data: {
    datasets: [{
      label: 'Ping scanning',
      fill: true,
      data: [],
      borderWidth: 1
    },{
      label: 'Nmap scanning',
      fill: true,
      data: [],
      borderWidth: 1
    },{
      label: 'Extended scanning',
      fill: true,
      data: [],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      x: {
        type: 'linear'
      },
      y: {
        min: 0,
        max: 500
      }
    }
  }
})

let dataCount = 0

window.main = () => {
  window.addListener('Scanner-Metrics', (data)=>{
    data = data.data
    utils.getel("pingChart").style.display = ""
    utils.getel("threadChart").style.display = ""

    pingChart.data.datasets[0].data.push(data.upIpsPS)
    pingChart.data.datasets[1].data.push(data.downIpsPS)
    pingChart.data.datasets[2].data.push(data.extendedIpsPS)

    pingChart.data.labels.push(dataCount)
    pingChart.update()

    threadChart.data.datasets[0].data.push(data.hostSearchingCount)
    threadChart.data.datasets[1].data.push(data.hostSearchingCount+data.nmapScanningCount)
    threadChart.data.datasets[2].data.push(data.numJobs)

    threadChart.data.labels.push(dataCount)
    threadChart.update()

    dataCount += 1

    scanText.innerText = '' +
    `Total addresses scanned: ${data.countScannedBeforeStart+data.upIps+data.downIps}\n` +
    `Down this session: ${data.downIps}\n` +
    `Up this session: ${data.upIps}\n` +
    `With ports this session: ${data.extendedIps}`
  })
}


</script>