{{-- __('!! Statistiques') --}}
{{-- Matomo Stats API Helper --}}
-<!DOCTYPE html>
+ <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
-->
<form class="options w-full space-y-2 flex-grow-0" @submit.prevent="loadAPI">
<div class="flex items-center space-x-2">
- <a href="https://developer.matomo.org/api-reference/reporting-api" class="text-yellow-200 hover:text-yellow-300 font-bold" target="_blank">Matomo API</a>
+ <a href="https://developer.matomo.org/api-reference/reporting-api"
+ class="text-yellow-200 hover:text-yellow-300 font-bold" target="_blank">Matomo API</a>
<input x-model="generatedURL" class="flex-1 text-xs text-gray-500" @click="$el.select()">
</div>
period: 'month',
date: '{{ date('Y') }}-01-01,today',
- get server() {
- if (!this.siteID) return false;
- let ID = parseInt(this.siteID)
+ get server() {
+ if (!this.siteID) return false;
+ let ID = parseInt(this.siteID)
- if (ID < 21210) return 'stats3.fluidbook.com';
- else if (ID >= 21210 && ID % 2 === 0) return 'stats4.fluidbook.com';
- else return 'stats5.fluidbook.com';
+ if (ID < 21210) return 'stats3.fluidbook.com';
+ else if (ID >= 21210 && ID % 2 === 0) return 'stats4.fluidbook.com';
+ else return 'stats5.fluidbook.com';
- },
+ },
- get generatedURL() {
- return `https://${this.server}/?idSite=${this.siteID}&method=${this.method}&date=${this.date}&period=${this.period}&module=API&token_auth=${this.servers[this.server]}&format=JSON`
- },
+ get generatedURL() {
+ return `https://${this.server}/?idSite=${this.siteID}&method=${this.method}&date=${this.date}&period=${this.period}&module=API&token_auth=${this.servers[this.server]}&format=JSON`
+ },
- loadAPI() {
- let $this = this;
+ loadAPI() {
+ let $this = this;
- if (this.method === '') return false;
+ if (this.method === '') return false;
- fetch(this.generatedURL)
- .then(response => response.json())
- .then((data) => {
- //$this.result = JSON.stringify(data, null, 2)
- // let filteredData = Object.entries(data).filter(([key, value]) => !Array.isArray(value));
- // Filter out empty results from the API...
- let filteredData = Object.fromEntries(Object.entries(data).filter(([key, value]) => !Array.isArray(value) || (Array.isArray(value) && value.length > 0)));
- // window.formatter = new JSONFormatter(filteredData, Infinity, { animateClose: false });
- // $this.$refs.result.insertAdjacentHTML('afterbegin', window.formatter.render().innerHTML + '<br><hr><br>');
+ fetch(this.generatedURL)
+ .then(response => response.json())
+ .then((data) => {
+ //$this.result = JSON.stringify(data, null, 2)
+ // let filteredData = Object.entries(data).filter(([key, value]) => !Array.isArray(value));
+ // Filter out empty results from the API...
+ let filteredData = Object.fromEntries(Object.entries(data).filter(([key, value]) => !Array.isArray(value) || (Array.isArray(value) && value.length > 0)));
+ // window.formatter = new JSONFormatter(filteredData, Infinity, { animateClose: false });
+ // $this.$refs.result.insertAdjacentHTML('afterbegin', window.formatter.render().innerHTML + '<br><hr><br>');
- console.log("data:", data);
- console.log("filtered:", filteredData);
- // return false;
+ console.log("data:", data);
+ console.log("filtered:", filteredData);
+ // return false;
- if ($this.period === 'range') { // When doing a range, data structure returned isn't the same as others
- filteredData = { [$this.date]: filteredData }
- }
+ if ($this.period === 'range') { // When doing a range, data structure returned isn't the same as others
+ filteredData = {[$this.date]: filteredData}
+ }
- let requestDetails = `<h2 class="mb-4 font-medium text-sm flex">
+ let requestDetails = `<h2 class="mb-4 font-medium text-sm flex">
<span @click="expanded = ! expanded" class="cursor-pointer">
<span class="inline-block transition" :class="expanded || '-rotate-90 opacity-50'">▼</span>
${Object.values(filteredData).length} results for <span class="text-blue-600">${$this.method}</span>
<button class="leading-none ml-2 text-red-500 text-xl" @click="$event.target.parentElement.parentElement.remove()" title="Remove">×</button>
</h2>`;
- let result = '';
-
- // See if the API has returned an array instead of an object
- // This test is done on the unfiltered data because the filtering process turns it into an object
- if (Array.isArray(data)) {
- result += $this.tableFromData(data, true);
-
- // Also check first item of filteredData object to see if it contains a nested array of data
- } else if (Array.isArray(Object.values(filteredData)[0])) {
- for (const [date, nestedData] of Object.entries(filteredData)) {
- console.log(date, nestedData)
- result += `<h3 class="bg-gray-700 font-bold mt-4 mb-2 rounded px-3 py-1 text-white text-sm w-max">${date}</h3>`;
- result += $this.tableFromData(nestedData, true);
- }
- } else {
- result += $this.tableFromData(filteredData);
- }
-
- let html = `<div class="API-result" x-data="{ expanded: true }">
+ let result = '';
+
+ // See if the API has returned an array instead of an object
+ // This test is done on the unfiltered data because the filtering process turns it into an object
+ if (Array.isArray(data)) {
+ result += $this.tableFromData(data, true);
+
+ // Also check first item of filteredData object to see if it contains a nested array of data
+ } else if (Array.isArray(Object.values(filteredData)[0])) {
+ for (const [date, nestedData] of Object.entries(filteredData)) {
+ console.log(date, nestedData)
+ result += `<h3 class="bg-gray-700 font-bold mt-4 mb-2 rounded px-3 py-1 text-white text-sm w-max">${date}</h3>`;
+ result += $this.tableFromData(nestedData, true);
+ }
+ } else {
+ result += $this.tableFromData(filteredData);
+ }
+
+
let html = `<div class="API-result" x-data="{ expanded: true }">
${requestDetails}
<div class="API-result-content" x-show="expanded" x-collapse>${result}</div>
</div>`;
- $this.$refs.result.insertAdjacentHTML('afterbegin', html)
+ $this.$refs.result.insertAdjacentHTML('afterbegin', html)
- });
- },
+ });
+ },
- tableFromData(filteredData, hideDateColumn) {
- let tableClasses = 'border-collapse border border-slate-500 p-2 text-xs';
- let table = `<table class="${tableClasses}">`;
- let firstRow = Object.values(filteredData)[0];
+ tableFromData(filteredData, hideDateColumn) {
+ let tableClasses = 'border-collapse border border-slate-500 p-2 text-xs';
+
let table = `<table class="${tableClasses}">`;
+ let firstRow = Object.values(filteredData)[0];
- let headings = (typeof firstRow === 'object') ?
- Object.keys(firstRow).map(heading => `<th class="${tableClasses}">${heading}</th>`).join("")
- :
- `<th class="${tableClasses}"> </th>`; // Only a singular value returned by API
+ let headings = (typeof firstRow === 'object') ?
+ Object.keys(firstRow).map(heading => `<th class="${tableClasses}">${heading}</th>`).join("")
+ :
+ `<th class="${tableClasses}"> </th>`; // Only a singular value returned by API
- table += `<tr class="bg-gray-400 sticky" style="top: calc(-1.5rem - 1px)">`;
+ table += `<tr class="bg-gray-400 sticky" style="top: calc(-1.5rem - 1px)">`;
- if (!hideDateColumn) {
- table += `<th class="${tableClasses}">Date</th>`
- }
+ if (!hideDateColumn) {
+ table += `<th class="${tableClasses}">Date</th>`
+ }
- table += headings;
- table += `</tr>`;
+ table += headings;
+ table += `</tr>`;
- Object.entries(filteredData).forEach(function(datedSet, index) {
+ Object.entries(filteredData).forEach(function (datedSet, index) {
- // console.log('datedSet...', datedSet);
+ // console.log('datedSet...', datedSet);
- let date = datedSet[0];
- let dateData = datedSet[1];
+ let date = datedSet[0];
+ let dateData = datedSet[1];
- table += `<tr class="transition hover:bg-yellow-100 ${ index % 2 === 1 ? 'bg-gray-200' : '' }">`;
+ table += `<tr class="transition hover:bg-yellow-100 ${index % 2 === 1 ? 'bg-gray-200' : ''}">`;
- if (!hideDateColumn) {
- table += `<td class="${tableClasses}">${date}</td>`;
- }
+ if (!hideDateColumn) {
+ table += `<td class="${tableClasses}">${date}</td>`;
+ }
- if (typeof dateData === 'object') {
- // The table headings are based on the object keys from the first row but the API doesn't always
- // return the same set of data. As such, we need to check that the key exists for each row...
- table += Object.keys(firstRow).map(heading_key =>
- `<td class="${tableClasses}">${ typeof dateData[heading_key] === 'undefined' ? '–' : dateData[heading_key] }</td>`
- ).join("");
- //table += dateData.map(value => `<td class="${tableClasses}">${value}</td>`).join("");
- } else {
- table += `<td class="${tableClasses}">${dateData}</td>`;
- }
+ if (typeof dateData === 'object') {
+ // The table headings are based on the object keys from the first row but the API doesn't always
+ // return the same set of data. As such, we need to check that the key exists for each row...
+ table += Object.keys(firstRow).map(heading_key =>
+ `<td class="${tableClasses}">${typeof dateData[heading_key] === 'undefined' ? '–' : dateData[heading_key]}</td>`
+ ).join("");
+ //table += dateData.map(value => `<td class="${tableClasses}">${value}</td>`).join("");
+ } else {
+ table += `<td class="${tableClasses}">${dateData}</td>`;
+ }
- table += `</tr>`;
+ table += `</tr>`;
- // dateData.forEach(function(data) {
- // console.log('... data', data);
- // table += `<tr>`;
- // table += `<td>${date}</td>`;
- // table += data.map(value => `<td>${value}</td>`).join("");
- // table += `</tr>`;
- // })
- });
+ // dateData.forEach(function(data) {
+ // console.log('... data', data);
+ // table += `<tr>`;
+ // table += `<td>${date}</td>`;
+ // table += data.map(value => `<td>${value}</td>`).join("");
+ // table += `</tr>`;
+ // })
+ });
- table += '</table>';
+ table += '</table>';
- return table;
- }
+ return table;
+ }
+ }
}
- }
</script>
<!-- Alpine Plugins -->
-<script defer src="https://unpkg.com/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
+<script defer src="/cdnproxy/unpkg.com/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
<!-- Alpine Core -->
-<script src="//unpkg.com/alpinejs" defer></script>
-{{--<script src="https://unpkg.com/json-formatter-js"></script>--}}
+<script src="/cdnproxy/unpkg.com/alpinejs" defer></script>
+{{--<script src="/cdnproxy/unpkg.com/json-formatter-js"></script>--}}
</body>
</html>
@if ($crud->exportButtons())
- <script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js" type="text/javascript"></script>
- <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.bootstrap4.min.js" type="text/javascript"></script>
- <script src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js" type="text/javascript"></script>
- <script src="//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.18/pdfmake.min.js" type="text/javascript"></script>
- <script src="//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.18/vfs_fonts.js" type="text/javascript"></script>
- <script src="//cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js" type="text/javascript"></script>
- <script src="//cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js" type="text/javascript"></script>
- <script src="//cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js" type="text/javascript"></script>
+ <script src="/cdnproxy/cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js" type="text/javascript"></script>
+ <script src="/cdnproxy/cdn.datatables.net/buttons/1.5.6/js/buttons.bootstrap4.min.js" type="text/javascript"></script>
+ <script src="/cdnproxy/cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js" type="text/javascript"></script>
+ <script src="/cdnproxy/cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.18/pdfmake.min.js" type="text/javascript"></script>
+ <script src="/cdnproxy/cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.18/vfs_fonts.js" type="text/javascript"></script>
+ <script src="/cdnproxy/cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js" type="text/javascript"></script>
+ <script src="/cdnproxy/cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js" type="text/javascript"></script>
+ <script src="/cdnproxy/cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js" type="text/javascript"></script>
<script>
let dataTablesExportStrip = text => {
if ( typeof text !== 'string' ) {
// move the datatable buttons in the top-right corner and make them smaller
function moveExportButtonsToTopRight() {
- crud.table.buttons().each(function(button) {
- if (button.node.className.indexOf('buttons-columnVisibility') == -1 && button.node.nodeName=='BUTTON')
- {
- button.node.className = button.node.className + " btn-sm";
- }
- })
+ try {
+ crud.table.buttons().each(function (button) {
+ if (button.node.className.indexOf('buttons-columnVisibility') == -1 && button.node.nodeName == 'BUTTON') {
+ button.node.className = button.node.className + " btn-sm";
+ }
+ })
- $(".dt-buttons").appendTo($('#datatable_button_stack' ));
- $('.dt-buttons').addClass('d-xs-block')
- .addClass('d-sm-inline-block')
- .addClass('d-md-inline-block')
- .addClass('d-lg-inline-block');
+ $(".dt-buttons").appendTo($('#datatable_button_stack'));
+ $('.dt-buttons').addClass('d-xs-block')
+ .addClass('d-sm-inline-block')
+ .addClass('d-md-inline-block')
+ .addClass('d-lg-inline-block');
+ }catch (e) {
+
+ }
}
crud.addFunctionToDataTablesDrawEventQueue('moveExportButtonsToTopRight');
projects / fluidbook-toolbox.git / commitdiff