%PDF- %PDF-
| Direktori : /data/www_bck/varak.net_bck/stats.varak.net/plugins/Dashboard/vue/src/Dashboard/ |
| Current File : //data/www_bck/varak.net_bck/stats.varak.net/plugins/Dashboard/vue/src/Dashboard/Dashboard.ts |
/*!
* Matomo - free/libre analytics platform
*
* @link https://matomo.org
* @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
*/
import { DirectiveBinding, watch } from 'vue';
import { Matomo, MatomoUrl } from 'CoreHome';
import DashboardStore from './Dashboard.store';
import { Dashboard, DashboardLayout } from '../types';
interface DashboardDirectiveArgs {
idDashboard: string|number;
layout?: unknown;
}
const { $ } = window;
function renderDashboard(
dashboardId: string|number,
dashboard: Dashboard,
layout: DashboardLayout,
) {
const $settings = $('.dashboardSettings');
$settings.show();
window.initTopControls();
// Embed dashboard / exported as widget
if (!$('#topBars').length) {
$settings.after($('#Dashboard'));
$('#Dashboard ul li').removeClass('active');
$(`#Dashboard_embeddedIndex_${dashboardId}`).addClass('active');
}
window.widgetsHelper.getAvailableWidgets();
// eslint-disable-next-line @typescript-eslint/no-explicit-any
($('#dashboardWidgetsArea') as any)
.off('dashboardempty', window.showEmptyDashboardNotification)
.on('dashboardempty', window.showEmptyDashboardNotification)
.dashboard({
idDashboard: dashboardId,
layout,
name: dashboard ? dashboard.name : '',
});
const divElements = $('#columnPreview').find('>div');
divElements.each(function eachPreview() {
const width: string[] = [];
$('div', this).each(function eachDiv() {
width.push(this.className.replace(/width-/, ''));
});
$(this).attr('layout', width.join('-'));
});
divElements.off('click.renderDashboard');
divElements.on('click.renderDashboard', function onRenderDashboard() {
divElements.removeClass('choosen');
$(this).addClass('choosen');
});
}
function fetchDashboard(dashboardId: string|number) {
window.globalAjaxQueue.abort();
return new Promise((resolve) => setTimeout(resolve)).then(
() => Promise.resolve(window.widgetsHelper.firstGetAvailableWidgetsCall),
).then(() => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const dashboardElement = $('#dashboardWidgetsArea') as any;
dashboardElement.dashboard('destroyWidgets');
dashboardElement.empty();
return Promise.all([
DashboardStore.getDashboard(dashboardId),
DashboardStore.getDashboardLayout(dashboardId),
]);
}).then(([dashboard, layout]) => new Promise<void>((resolve) => {
$(() => {
renderDashboard(dashboardId, dashboard as Dashboard, layout as DashboardLayout);
resolve();
});
}));
}
function clearDashboard() {
$('.top_controls .dashboard-manager').hide();
// eslint-disable-next-line @typescript-eslint/no-explicit-any
($('#dashboardWidgetsArea') as any).dashboard('destroy');
}
function onLocationChange(parsed: (typeof MatomoUrl)['urlParsed']['value']) {
if (parsed.module !== 'Widgetize' && parsed.category !== 'Dashboard_Dashboard') {
// we remove the dashboard only if we no longer show a dashboard.
clearDashboard();
}
}
interface LoadPageArgs {
category: string;
subcategory: string;
promise?: Promise<void>;
}
function onLoadPage(params: LoadPageArgs) {
if (params.category === 'Dashboard_Dashboard'
&& $.isNumeric(params.subcategory)
) {
params.promise = fetchDashboard(parseInt(params.subcategory, 10));
}
}
function onLoadDashboard(idDashboard: string|number) {
fetchDashboard(idDashboard);
}
export default {
mounted(el: HTMLElement, binding: DirectiveBinding<DashboardDirectiveArgs>): void {
fetchDashboard(binding.value.idDashboard);
watch(() => MatomoUrl.parsed.value, (parsed) => {
onLocationChange(parsed);
});
// load dashboard directly since it will be faster than going through reporting page API
Matomo.on('ReportingPage.loadPage', onLoadPage);
Matomo.on('Dashboard.loadDashboard', onLoadDashboard);
},
unmounted(): void {
onLocationChange(MatomoUrl.parsed.value);
Matomo.off('ReportingPage.loadPage', onLoadPage);
Matomo.off('Dashboard.loadDashboard', onLoadDashboard);
},
};