openpanel/templates/tabler/dashboard/usage_graphs.html

<!-- Content of get_started.html -->

    <style>
        .dismiss-graphs-button {
            display: none;
        }
        #history_usage_graphs:hover .dismiss-graphs-button {
            display: inline-block;
        }
    </style>



              <div class="col-md-4 g-3">
                <div id="history_usage_graphs" class="card card-one" style="min-height:28rem">

                <div class="card-header">
                    <div>
                        <form action="{{ url_for('dismiss_dashboard_widget', template_name='usage_graphs') }}" method="post">
                <h6 class="card-title">Usage <button data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Hide and never show these usage stats again" data-bs-original-title="Hide and never show these usage stats again"  class="dismiss-graphs-button btn btn-sm" type="submit">Dismiss</button></h6>
                    <p class="card-subtitle">Historical resource usage.</p>
                    </form>
                    </div>
                    <nav class="nav nav-icon nav-icon-sm ms-auto"><a data-bs-toggle="collapse" class="nav-link collapsed" href="#stats_info" role="button" aria-expanded="false" aria-controls="stats_info"><i class="bi bi-question-circle"></i></a></nav>
                </div>

                  <div class="card-body">
                    <div class="collapse p-2" id="stats_info" style="">
                        <p>Daily usage reports</p>
                    </div>

                    <div class="row">
                      <div class="col">
                        <div id="chart-active-users-2" style="min-height: 288px;"></div>
                      </div>
                      <div class="col-md-auto">
                        <div class="divide-y divide-y-fill">
                          <div class="px-3">
                            <div class="text-secondary">
                              <span class="status-dot bg-primary"></span> Websites
                            </div>
                            <div class="h2"  id="sites_count">...</div>
                          </div>
                          <div class="px-3">
                            <div class="text-secondary">
                              <span class="status-dot bg-azure"></span> Domains
                            </div>
                            <div class="h2" id="domains_count">...</div>
                          </div>
                          <div class="px-3">
                            <div class="text-secondary">
                              <span class="status-dot bg-green"></span> Users
                            </div>
                            <div class="h2" id="users_count">{{ user_count }}</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>



    <!-- Libs JS -->
    <script src="{{ url_for('static', filename='dist/libs/apexcharts/dist/apexcharts.min.js') }}?1695847769" defer></script>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    fetch('/json/show_usage_stats')
      .then(response => response.json())
      .then(data => {
        // Parse the usage_stats string into an array of JavaScript objects
        const parsedData = data.usage_stats.trim().split('\n').map(entry => JSON.parse(entry));

        // Extract data from the parsed objects
        const timestamps = parsedData.map(entry => entry.timestamp);
        const usersData = parsedData.map(entry => entry.users);
        const domainsData = parsedData.map(entry => entry.domains);
        const websitesData = parsedData.map(entry => entry.websites);

        // Get the latest timestamp and corresponding data
        const latestTimestamp = timestamps[timestamps.length - 1];
        const latestUsersCount = usersData[usersData.length - 1];
        const latestDomainsCount = domainsData[domainsData.length - 1];
        const latestWebsitesCount = websitesData[websitesData.length - 1];

        // Update the counts in the respective div elements
        document.getElementById("users_count").innerText = latestUsersCount;
        document.getElementById("sites_count").innerText = latestWebsitesCount;
        document.getElementById("domains_count").innerText = latestDomainsCount;

        // Render the chart with the extracted data
        new ApexCharts(document.getElementById('chart-active-users-2'), {
          chart: {
            type: "line",
            fontFamily: 'inherit',
            height: 350,
            parentHeightOffset: 0,
            toolbar: {
              show: false,
            },
            animations: {
              enabled: false
            },
          },
          fill: {
            opacity: 1,
          },
          stroke: {
            width: 2,
            lineCap: "round",
            curve: "smooth",
          },
          series: [{
              name: "Websites",
              data: websitesData
            },
            {
              name: "Domains",
              data: domainsData
            },
            {
              name: "Users",
              data: usersData
            }
          ],
          tooltip: {
            theme: 'dark',
            y: {
            formatter: function(value) {
                return Math.round(value);
            }
            }
          },
          grid: {
            padding: {
              top: -20,
              right: 0,
              left: -4,
              bottom: -4
            },
            strokeDashArray: 4,
          },
          xaxis: {
            labels: {
              padding: 0,
            },
            tooltip: {
              enabled: false
            },
            type: 'datetime',
            categories: timestamps,
          },
          yaxis: {
            labels: {
              padding: 4
            },
            forceNiceScale: true
          },
          colors: ["#008FFB", "#00E396", "#FEB019"],
          legend: {
            show: false,
          },
        }).render();
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  });
</script>