Smart-Dashboard/restricted/footer.html

<!--begin::Footer-->
<footer class="app-footer">
  <!--begin::To the end-->
  <div class="float-end d-none d-sm-inline">Free simple code</div>
  <!--end::To the end-->
  <!--begin::Copyright-->
  <strong>
    No &copy; 2025&nbsp; by
    <a href="https://el-wa.org" class="text-decoration-none">m0</a>
  </strong>
  All rights don't care.
  <!--end::Copyright-->
</footer>
<!--end::Footer-->
<div class="modal fade" id="modalEV" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="modal-title">Charger settings:</h4>
        <div class="card-tools" style="position: absolute; right: 10px;">
          <button type="button" class="btn btn-tool" data-bs-dismiss="modal">
            <i class="bi bi-x-lg"></i>
          </button>
        </div>
      </div>
      <div class="modal-body p-0 m-0 shadow" id="modal-body">
        Loading...
      </div>
      <div class="modal-footer justify-content-between">
        <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
        <button type="button" id="modalSaveBtn" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvas" data-bs-backdrop="static">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvas-title">Offcanvas with backdrop</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body" id="offcanvas-body">
    <p>.....</p>
  </div>
</div>

</div>
<!--end::App Wrapper-->
<!--begin::Script-->
<!--begin::Third Party Plugin(OverlayScrollbars)
<script src="js/overlayscrollbars.browser.es6.min.js" crossorigin="anonymous"></script>-->
<!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
<script src="js/meteogram.js"></script>
<script src='js/mqtt.js'></script>
<script src="js/popper.min.js" crossorigin="anonymous"></script>
<!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
<script src="js/bootstrap.min.js" crossorigin="anonymous"></script>
<!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
<script src="js/adminlte.js"></script>
<!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
<script src="js/modal-dynamic.min.js"></script>


<!-- OPTIONAL SCRIPTS -->

<!-- sortablejs 
<script src="js/Sortable.min.js"></script>
-->
<!-- sortablejs 
<script>
  if (document.querySelector('.connectedSortable')) {
    new Sortable(document.querySelector('.connectedSortable'), {
      group: 'shared',
      handle: '.card-header',
    });
  }
  const cardHeaders = document.querySelectorAll('.connectedSortable .card-header');
  cardHeaders.forEach((cardHeader) => {
    cardHeader.style.cursor = 'move';
  });
</script>
-->

<!-- ChartJS -->
<script src="js/chart.min.js"></script>
<script src="js/chartjs-plugin-annotation.min.js"></script>
<script src="js/luxon.min.js"></script>
<script src="js/hammer.js"></script>
<script src="js/chartjs-scale-timestack.min.js"></script>
<script src="js/siprefix.min.js"></script>
<script>
  Chart.register('chartjs-plugin-annotation');
  const arraySum = (arr) => {
    return arr.reduce((total, current) => {
        return total + parseFloat(current);
    }, 0);
}

function tooltipLabel (context) {
  let label = context.dataset.label || '';
  if (label) {
    label += ': ';
  }
  if (context.dataset.yAxisID == "y1") {
    label += Math.round(context.parsed.y * 10) / 10 + " " + "%";
  } else {
    if (context.parsed.y !== null) {
      ret = scale(Math.round(context.parsed.y), false);
      label += ret[0] + " " + ret[1] + "W";
    }
  }
  return label;
};

function tooltipFooter (tooltipItems){
  let sum = 0;

  tooltipItems.forEach(function(tooltipItem) {
    if (tooltipItem.dataset.yAxisID == "y1") {
      //sum2 += tooltipItem.parsed.y;
    }else{
      sum += tooltipItem.parsed.y;
    }
  });
  //sum2 = Math.round(sum * 10) / 10 + " " + "%";
  ret = scale(Math.round(sum), false);
  sum = ret[0] + " " + ret[1] + "W";
  return 'Sum: ' + sum;
}

  Chart.defaults.font.size = 10;
  Chart.defaults.animations = true;
  Chart.defaults.plugins.legend.position = "bottom";
  Chart.defaults.plugins.legend.labels.pointStyleWidth = 10;
  Chart.defaults.plugins.legend.labels.usePointStyle = true;
  Chart.defaults.plugins.legend.labels.pointStyle = "line";
  Chart.defaults.plugins.tooltip.position = "nearest";
  Chart.defaults.plugins.tooltip.pointStyle = "circle";
  Chart.defaults.plugins.tooltip.usePointStyle= true;
  Chart.defaults.plugins.tooltip.boxWidth= 4;
  Chart.defaults.plugins.tooltip.callbacks.footer = tooltipFooter;
  Chart.defaults.plugins.tooltip.callbacks.label = tooltipLabel;

  /*
  tooltip: {
          position: 'nearest',
          pointStyle: "circle",
          boxWidth: 4,
          usePointStyle: true,
          callbacks: {
            label: function (context) {
              let label = context.dataset.label || '';
              if (label) {
                label += ': ';
              }
              if (context.dataset.yAxisID == "y1") {
                label += Math.round(context.parsed.y * 10) / 10 + " " + "%";
              } else {
                if (context.parsed.y !== null) {
                  ret = scale(Math.round(context.parsed.y), false);
                  label += ret[0] + " " + ret[1] + "W";
                }
              }
              return label;
            },
          },
        },*/
</script>

</body>
<!--end::Body-->

</html>