</div> <footer class="footer footer-transparent d-print-none"> <div class="container-xl"> <div class="row text-center align-items-center flex-row-reverse"> <div class="col-lg-auto ms-lg-auto"> <ul class="list-inline list-inline-dots mb-0"> <li class="list-inline-item"><a href="https://tabler.io/docs" target="_blank" class="link-secondary" rel="noopener">Documentation</a></li> <li class="list-inline-item"><a href="./license.html" class="link-secondary">License</a></li> <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li> <li class="list-inline-item"> <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener"> <!-- Download SVG icon from http://tabler.io/icons/icon/heart --> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-pink icon-inline"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg> Sponsor </a> </li> </ul> </div> <div class="col-12 col-lg-auto mt-3 mt-lg-0"> <ul class="list-inline list-inline-dots mb-0"> <li class="list-inline-item"> Copyright © 2025 <a href="." class="link-secondary">Tabler</a>. All rights reserved. </li> <li class="list-inline-item"> <a href="./changelog.html" class="link-secondary" rel="noopener"> v1.0.0-beta22 </a> </li> </ul> </div> </div> </div> </footer> </div> </div> <div class="modal modal-blur fade" id="modal-report" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">New report</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div class="mb-3"> <label class="form-label">Name</label> <input type="text" class="form-control" name="example-text-input" placeholder="Your report name"> </div> <label class="form-label">Report type</label> <div class="form-selectgroup-boxes row mb-3"> <div class="col-lg-6"> <label class="form-selectgroup-item"> <input type="radio" name="report-type" value="1" class="form-selectgroup-input" checked> <span class="form-selectgroup-label d-flex align-items-center p-3"> <span class="me-3"> <span class="form-selectgroup-check"></span> </span> <span class="form-selectgroup-label-content"> <span class="form-selectgroup-title strong mb-1">Simple</span> <span class="d-block text-secondary">Provide only basic data needed for the report</span> </span> </span> </label> </div> <div class="col-lg-6"> <label class="form-selectgroup-item"> <input type="radio" name="report-type" value="1" class="form-selectgroup-input"> <span class="form-selectgroup-label d-flex align-items-center p-3"> <span class="me-3"> <span class="form-selectgroup-check"></span> </span> <span class="form-selectgroup-label-content"> <span class="form-selectgroup-title strong mb-1">Advanced</span> <span class="d-block text-secondary">Insert charts and additional advanced analyses to be inserted in the report</span> </span> </span> </label> </div> </div> <div class="row"> <div class="col-lg-8"> <div class="mb-3"> <label class="form-label">Report url</label> <div class="input-group input-group-flat"> <span class="input-group-text"> https://tabler.io/reports/ </span> <input type="text" class="form-control ps-0" value="report-01" autocomplete="off"> </div> </div> </div> <div class="col-lg-4"> <div class="mb-3"> <label class="form-label">Visibility</label> <select class="form-select"> <option value="1" selected>Private</option> <option value="2">Public</option> <option value="3">Hidden</option> </select> </div> </div> </div> </div> <div class="modal-body"> <div class="row"> <div class="col-lg-6"> <div class="mb-3"> <label class="form-label">Client name</label> <input type="text" class="form-control"> </div> </div> <div class="col-lg-6"> <div class="mb-3"> <label class="form-label">Reporting period</label> <input type="date" class="form-control"> </div> </div> <div class="col-lg-12"> <div> <label class="form-label">Additional information</label> <textarea class="form-control" rows="3"></textarea> </div> </div> </div> </div> <div class="modal-footer"> <a href="#" class="btn btn-link link-secondary" data-bs-dismiss="modal"> Cancel </a> <a href="#" class="btn btn-primary ms-auto" data-bs-dismiss="modal"> <!-- Download SVG icon from http://tabler.io/icons/icon/plus --> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M5 12l14 0" /></svg> Create new report </a> </div> </div> </div> </div> <!-- Libs JS --> <script src="apexcharts/dist/apexcharts.min.js?1735862657" defer></script> <!-- Tabler Core --> <script src="js/demo.min.js?1735862657" defer></script> <script> // @formatter:off document.addEventListener("DOMContentLoaded", function () { window.ApexCharts && (new ApexCharts(document.getElementById('chart-revenue-bg'), { chart: { type: "area", fontFamily: 'inherit', height: 40.0, sparkline: { enabled: true }, animations: { enabled: false }, }, dataLabels: { enabled: false, }, fill: { opacity: .16, type: 'solid' }, stroke: { width: 2, lineCap: "round", curve: "smooth", }, series: [{ name: "Profits", data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 19, 46, 39, 62, 51, 35, 41, 67] }], tooltip: { theme: 'dark' }, grid: { strokeDashArray: 4, }, xaxis: { labels: { padding: 0, }, tooltip: { enabled: false }, axisBorder: { show: false, }, type: 'datetime', }, yaxis: { labels: { padding: 4 }, }, labels: [ '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17', '2020-07-18', '2020-07-19', '2020-07-20' ], colors: [tabler.getColor("primary")], legend: { show: false, }, })).render(); }); // @formatter:on </script> <script> // @formatter:off document.addEventListener("DOMContentLoaded", function () { window.ApexCharts && (new ApexCharts(document.getElementById('chart-new-clients'), { chart: { type: "line", fontFamily: 'inherit', height: 40.0, sparkline: { enabled: true }, animations: { enabled: false }, }, fill: { opacity: 1, }, stroke: { width: [2, 1], dashArray: [0, 3], lineCap: "round", curve: "smooth", }, series: [{ name: "Execution Time", data: [] },{ name: "AVG", data: [] }], tooltip: { theme: 'dark' }, grid: { strokeDashArray: 4, }, xaxis: { labels: { padding: 0, }, tooltip: { enabled: false }, type: 'datetime', }, yaxis: { labels: { padding: 4 }, }, labels: [ ], colors: [tabler.getColor("primary"), tabler.getColor("gray-600")], legend: { show: false, }, })).render(); }); // @formatter:on </script> <script> // @formatter:off document.addEventListener("DOMContentLoaded", function () { window.ApexCharts && (new ApexCharts(document.getElementById('chart-active-users'), { chart: { type: "bar", fontFamily: 'inherit', height: 40.0, sparkline: { enabled: true }, animations: { enabled: false }, }, plotOptions: { bar: { columnWidth: '50%', } }, dataLabels: { enabled: false, }, fill: { opacity: 1, }, series: [{ name: "Profits", data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51] }], tooltip: { theme: 'dark' }, grid: { strokeDashArray: 4, }, xaxis: { labels: { padding: 0, }, tooltip: { enabled: false }, axisBorder: { show: false, }, type: 'time', }, yaxis: { labels: { padding: 4 }, }, labels: [ '00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00' ], colors: [tabler.getColor("primary")], legend: { show: false, }, })).render(); }); // @formatter:on </script> <script> // @formatter:off document.addEventListener("DOMContentLoaded", function () { window.ApexCharts && (new ApexCharts(document.getElementById('chart-mentions'), { chart: { type: "bar", fontFamily: 'inherit', height: 240, parentHeightOffset: 0, toolbar: { show: false, }, animations: { enabled: false }, stacked: true, }, plotOptions: { bar: { columnWidth: '50%', } }, dataLabels: { enabled: false, }, fill: { opacity: 1, }, series: [{ name: "Executions", data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24] }], tooltip: { theme: 'dark' }, grid: { padding: { top: -20, right: 0, left: -4, bottom: -4 }, strokeDashArray: 4, xaxis: { lines: { show: true } }, }, xaxis: { labels: { padding: 0, }, tooltip: { enabled: false }, axisBorder: { show: false, }, type: 'datetime', }, yaxis: { labels: { padding: 4 }, }, labels: [ ], colors: [tabler.getColor("primary"), tabler.getColor("primary", 0.8), tabler.getColor("green", 0.8)], legend: { show: false, }, })).render(); }); // @formatter:on </script> <script defer src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon='{"rayId":"8fbf3bbd6a4d43bd","serverTiming":{"name":{"cfExtPri":true,"cfL4":true,"cfSpeedBrain":true,"cfCacheStatus":true}},"version":"2024.10.5","token":"84cae67e72b342399609db8f32d1c3ff"}' crossorigin="anonymous"></script> </body> </html>