overview-components 1.1.159 → 1.1.161

package/dist/components/lit-chart.js

@@ -1,727 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { property } from 'lit/decorators.js';
-import { html, css, LitElement } from 'lit';
-import { msg } from '@lit/localize';
-import { Chart, registerables } from 'chart.js';
-import '../shared/lit-loader.js';
-Chart.register(...registerables);
-export class LitChart extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.type = 'bar';
-        this.data = { labels: [], datasets: [], title: '' };
-        this.isLoading = false;
-        this.colorPalette = 'modern';
-        this.useGradients = true;
-        this.showLegend = true;
-        this.chart = null;
-        // Modern color palettes
-        this.colorPalettes = {
-            modern: [
-                '#6366f1', // Indigo
-                '#8b5cf6', // Purple
-                '#ec4899', // Pink
-                '#f43f5e', // Rose
-                '#f97316', // Orange
-                '#eab308', // Yellow
-                '#22c55e', // Green
-                '#14b8a6', // Teal
-                '#06b6d4', // Cyan
-                '#3b82f6', // Blue
-            ],
-            vibrant: [
-                '#ff6b6b', // Red
-                '#4ecdc4', // Turquoise
-                '#45b7d1', // Sky Blue
-                '#f9ca24', // Yellow
-                '#6c5ce7', // Purple
-                '#fd79a8', // Pink
-                '#00b894', // Green
-                '#fdcb6e', // Light Orange
-                '#e17055', // Orange
-                '#74b9ff', // Light Blue
-            ],
-            pastel: [
-                '#a8dadc', // Pale Blue
-                '#f1faee', // Cream
-                '#e9c46a', // Sand
-                '#f4a261', // Peach
-                '#e76f51', // Coral
-                '#264653', // Dark Blue
-                '#2a9d8f', // Teal
-                '#e9d8a6', // Light Yellow
-                '#ee9b00', // Orange
-                '#ca6702', // Dark Orange
-            ],
-            ocean: [
-                '#0077b6', // Ocean Blue
-                '#00b4d8', // Sky Blue
-                '#90e0ef', // Light Blue
-                '#caf0f8', // Pale Blue
-                '#023e8a', // Deep Blue
-                '#48cae4', // Cyan
-                '#ade8f4', // Light Cyan
-                '#0096c7', // Blue
-                '#00b4d8', // Bright Blue
-                '#90e0ef', // Light Blue
-            ],
-        };
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        // Clean up chart when component is removed
-        if (this.chart) {
-            this.chart.destroy();
-            this.chart = null;
-        }
-    }
-    getPrimaryColor() {
-        // Get CSS variable from document root
-        const cssVar = getComputedStyle(document.documentElement)
-            .getPropertyValue('--color-primary-main')
-            .trim();
-        return cssVar || '#6366f1'; // Fallback if CSS variable is not defined
-    }
-    updated(changedProperties) {
-        if (changedProperties.has('type') ||
-            changedProperties.has('data') ||
-            changedProperties.has('colorPalette') ||
-            changedProperties.has('useGradients') ||
-            changedProperties.has('showLegend')) {
-            this.renderChart();
-        }
-    }
-    hexToHSL(hex) {
-        // Remove # if present
-        hex = hex.replace('#', '');
-        // Convert hex to RGB
-        const r = parseInt(hex.substring(0, 2), 16) / 255;
-        const g = parseInt(hex.substring(2, 4), 16) / 255;
-        const b = parseInt(hex.substring(4, 6), 16) / 255;
-        const max = Math.max(r, g, b);
-        const min = Math.min(r, g, b);
-        let h = 0, s = 0;
-        const l = (max + min) / 2;
-        if (max !== min) {
-            const d = max - min;
-            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-            switch (max) {
-                case r:
-                    h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
-                    break;
-                case g:
-                    h = ((b - r) / d + 2) / 6;
-                    break;
-                case b:
-                    h = ((r - g) / d + 4) / 6;
-                    break;
-            }
-        }
-        return { h: h * 360, s: s * 100, l: l * 100 };
-    }
-    hslToHex(h, s, l) {
-        h = h / 360;
-        s = s / 100;
-        l = l / 100;
-        let r, g, b;
-        if (s === 0) {
-            r = g = b = l;
-        }
-        else {
-            const hue2rgb = (p, q, t) => {
-                if (t < 0)
-                    t += 1;
-                if (t > 1)
-                    t -= 1;
-                if (t < 1 / 6)
-                    return p + (q - p) * 6 * t;
-                if (t < 1 / 2)
-                    return q;
-                if (t < 2 / 3)
-                    return p + (q - p) * (2 / 3 - t) * 6;
-                return p;
-            };
-            const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-            const p = 2 * l - q;
-            r = hue2rgb(p, q, h + 1 / 3);
-            g = hue2rgb(p, q, h);
-            b = hue2rgb(p, q, h - 1 / 3);
-        }
-        const toHex = (x) => {
-            const hex = Math.round(x * 255).toString(16);
-            return hex.length === 1 ? '0' + hex : hex;
-        };
-        return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
-    }
-    generatePrimaryColorPalette(baseColor, numColors) {
-        const hsl = this.hexToHSL(baseColor);
-        const colors = [];
-        for (let i = 0; i < numColors; i++) {
-            // Create variations by adjusting hue and lightness
-            const hueShift = (i * 30) % 360; // Shift hue for variety
-            const newHue = (hsl.h + hueShift) % 360;
-            const lightnessVariation = 50 + (i % 3) * 15; // Vary lightness
-            const saturationVariation = Math.max(40, Math.min(90, hsl.s + (i % 2) * 20));
-            colors.push(this.hslToHex(newHue, saturationVariation, lightnessVariation));
-        }
-        return colors;
-    }
-    generateColors(numColors) {
-        if (this.colorPalette === 'primary') {
-            return this.generatePrimaryColorPalette(this.getPrimaryColor(), numColors);
-        }
-        const palette = this.colorPalettes[this.colorPalette];
-        return Array.from({ length: numColors }, (_, i) => palette[i % palette.length]);
-    }
-    createGradient(ctx, color, chartArea, isHorizontal = false) {
-        const gradient = isHorizontal
-            ? ctx.createLinearGradient(chartArea.left, 0, chartArea.right, 0)
-            : ctx.createLinearGradient(0, chartArea.top, 0, chartArea.bottom);
-        // Convert hex to rgba and create gradient
-        const r = parseInt(color.slice(1, 3), 16);
-        const g = parseInt(color.slice(3, 5), 16);
-        const b = parseInt(color.slice(5, 7), 16);
-        gradient.addColorStop(0, `rgba(${r}, ${g}, ${b}, 0.8)`);
-        gradient.addColorStop(0.5, `rgba(${r}, ${g}, ${b}, 0.6)`);
-        gradient.addColorStop(1, `rgba(${r}, ${g}, ${b}, 0.3)`);
-        return gradient;
-    }
-    createRadialGradient(ctx, color, chartArea) {
-        const centerX = (chartArea.left + chartArea.right) / 2;
-        const centerY = (chartArea.top + chartArea.bottom) / 2;
-        const radius = Math.min((chartArea.right - chartArea.left) / 2, (chartArea.bottom - chartArea.top) / 2);
-        const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, radius);
-        // Convert hex to rgba and create radial gradient
-        const r = parseInt(color.slice(1, 3), 16);
-        const g = parseInt(color.slice(3, 5), 16);
-        const b = parseInt(color.slice(5, 7), 16);
-        gradient.addColorStop(0, `rgba(${r}, ${g}, ${b}, 1)`);
-        gradient.addColorStop(0.5, `rgba(${r}, ${g}, ${b}, 0.8)`);
-        gradient.addColorStop(1, `rgba(${r}, ${g}, ${b}, 0.6)`);
-        return gradient;
-    }
-    renderChart() {
-        const canvas = this.shadowRoot?.querySelector('canvas');
-        if (!canvas)
-            return;
-        if (this.type === 'bar' || this.type === 'line') {
-            this.renderBarAndLineChart(canvas);
-        }
-        else if (this.type === 'bubble') {
-            this.renderBubbleChart(canvas);
-        }
-        else if (this.type === 'pie' || this.type === 'doughnut') {
-            this.renderPieAndDoughnutChart(canvas);
-        }
-        else if (this.type === 'gantt') {
-            this.renderGanttChart(canvas);
-        }
-    }
-    renderGanttChart(canvas) {
-        if (this.chart)
-            this.chart.destroy();
-        const colors = this.generateColors(this.data.datasets[0]?.data.length || 0);
-        const datasetsWithColors = this.data.datasets.map((dataset, index) => ({
-            label: dataset.label || `Dataset ${index + 1}`,
-            data: dataset.data.map((entry) => {
-                const startDate = new Date(entry.x[0]);
-                const endDate = new Date(entry.x[1]);
-                return {
-                    x: [
-                        isNaN(startDate.getTime()) ? Date.now() : startDate.getTime(),
-                        isNaN(endDate.getTime()) ? Date.now() : endDate.getTime(),
-                    ],
-                    y: entry.y,
-                };
-            }),
-            backgroundColor: colors,
-            borderColor: colors.map((color) => color),
-            borderWidth: 0,
-            barThickness: 20,
-            borderRadius: 8,
-            borderSkipped: false,
-        }));
-        const allDates = this.data.datasets.flatMap((dataset) => dataset.data.flatMap((entry) => [
-            new Date(entry?.x?.[0]).getTime(),
-            new Date(entry?.x?.[1]).getTime(),
-        ]));
-        const minDate = Math.min(...allDates);
-        const maxDate = Math.max(...allDates);
-        // Vypočítanie stepSize pre 20 hodnôt na osi X
-        const dateDifference = maxDate - minDate;
-        const desiredTicks = 20; // Počet požadovaných hodnôt na osi X
-        const stepSize = dateDifference / desiredTicks; // Vypočítanie stepSize
-        this.chart = new Chart(canvas, {
-            type: 'bar',
-            data: {
-                datasets: datasetsWithColors,
-            },
-            options: {
-                animation: false,
-                indexAxis: 'y',
-                responsive: true,
-                maintainAspectRatio: false,
-                scales: {
-                    x: {
-                        type: 'linear',
-                        ticks: {
-                            stepSize: stepSize, // 30 dní v milisekundách
-                            autoSkip: false,
-                            callback: (value) => {
-                                return new Date(value).toLocaleDateString('sk-SK', {
-                                    day: '2-digit',
-                                    month: '2-digit',
-                                    year: 'numeric',
-                                });
-                            },
-                        },
-                        min: minDate,
-                        max: maxDate,
-                        title: {
-                            display: !!this.data.xAxisLabel,
-                            text: this.data.xAxisLabel || '',
-                            font: {
-                                size: 11,
-                                weight: 400,
-                            },
-                            color: 'var(--text-secondary, #111827)',
-                        },
-                    },
-                    y: {
-                        type: 'category',
-                        title: {
-                            display: !!this.data.yAxisLabel,
-                            text: this.data.yAxisLabel || '',
-                            font: {
-                                size: 11,
-                                weight: 400,
-                            },
-                            color: 'var(--text-secondary, #111827)',
-                        },
-                    },
-                },
-                plugins: {
-                    tooltip: {
-                        callbacks: {
-                            label: function (context) {
-                                const start = new Date(context.raw.x[0]).toLocaleDateString('sk-SK', {
-                                    day: '2-digit',
-                                    month: '2-digit',
-                                    year: 'numeric',
-                                });
-                                const end = new Date(context.raw.x[1]).toLocaleDateString('sk-SK', {
-                                    day: '2-digit',
-                                    month: '2-digit',
-                                    year: 'numeric',
-                                });
-                                return `\u00A0\u00A0${msg('Začátek')}: ${start}, ${msg('Konec')}: ${end}`;
-                            },
-                        },
-                        bodyFont: {
-                            size: 13,
-                            weight: 400,
-                        },
-                        displayColors: true,
-                        usePointStyle: true,
-                        backgroundColor: 'black',
-                        cornerRadius: 8,
-                    },
-                    legend: {
-                        display: this.showLegend,
-                        position: 'top',
-                        labels: {
-                            usePointStyle: true,
-                            pointStyle: 'circle',
-                            font: {
-                                size: 13,
-                                weight: 500,
-                            },
-                        },
-                    },
-                    title: {
-                        display: !!this.data.title,
-                        text: this.data.title, // Text, ktorý sa zobrazí nad grafom
-                        font: {
-                            size: 17,
-                            weight: 500,
-                        },
-                        color: 'var(--text-primary, #111827)',
-                        padding: {
-                            top: 10,
-                            bottom: 20,
-                        },
-                    },
-                },
-                onHover: (event, chartElement) => {
-                    const target = event.native?.target;
-                    target.style.cursor = chartElement.length ? 'pointer' : 'default';
-                },
-            },
-        });
-    }
-    renderPieAndDoughnutChart(canvas) {
-        if (this.chart)
-            this.chart.destroy();
-        const colors = this.generateColors(this.data.datasets[0]?.data.length || 0);
-        const datasetsWithColors = this.data.datasets.map((dataset) => ({
-            ...dataset,
-            backgroundColor: this.useGradients
-                ? (context) => {
-                    const chart = context.chart;
-                    const { ctx, chartArea } = chart;
-                    if (!chartArea)
-                        return colors[context.dataIndex] || colors[0];
-                    return this.createRadialGradient(ctx, colors[context.dataIndex] || colors[0], chartArea);
-                }
-                : colors,
-            borderColor: '#ffffff',
-            borderWidth: 3,
-            hoverBorderWidth: 4,
-            hoverOffset: 8,
-        }));
-        this.chart = new Chart(canvas, {
-            type: this.type,
-            data: {
-                labels: this.data.labels,
-                datasets: datasetsWithColors,
-            },
-            options: {
-                animation: false,
-                responsive: true,
-                maintainAspectRatio: false,
-                plugins: {
-                    legend: {
-                        display: this.showLegend,
-                        position: 'top',
-                        labels: {
-                            usePointStyle: true,
-                            pointStyle: 'circle',
-                            font: {
-                                size: 13,
-                                weight: 500,
-                            },
-                        },
-                    },
-                    tooltip: {
-                        callbacks: {
-                            title: () => '',
-                            label: (tooltipItem) => {
-                                const value = tooltipItem.raw || 0;
-                                return `\u00A0\u00A0${tooltipItem.label}: ${tooltipItem.raw}`;
-                            },
-                        },
-                        bodyFont: {
-                            size: 13,
-                            weight: 400,
-                        },
-                        displayColors: true,
-                        usePointStyle: true, // Použitie kruhového symbolu
-                        xAlign: 'center',
-                        yAlign: 'bottom',
-                        padding: 16,
-                        backgroundColor: 'black',
-                        cornerRadius: 8,
-                    },
-                    title: {
-                        display: !!this.data.title,
-                        text: this.data.title, // Text, ktorý sa zobrazí nad grafom
-                        font: {
-                            size: 17,
-                            weight: 500,
-                        },
-                        color: 'var(--text-primary, #111827)',
-                        padding: {
-                            top: 10,
-                            bottom: 20,
-                        },
-                    },
-                },
-                ...(this.type === 'doughnut' && {
-                    cutout: '70%',
-                }),
-                onHover: (event, chartElement) => {
-                    const target = event.native?.target;
-                    if (chartElement.length) {
-                        target.style.cursor = 'pointer'; // Zmena kurzora na ruku
-                    }
-                    else {
-                        target.style.cursor = 'default';
-                    }
-                },
-            },
-        });
-    }
-    renderBubbleChart(canvas) {
-        if (this.chart)
-            this.chart.destroy();
-        const colors = this.generateColors(this.data.datasets.length);
-        const datasets = this.data.datasets.map((dataset, index) => ({
-            ...dataset,
-            backgroundColor: this.useGradients
-                ? (context) => {
-                    const chart = context.chart;
-                    const { ctx, chartArea } = chart;
-                    if (!chartArea)
-                        return colors[index];
-                    return this.createGradient(ctx, colors[index], chartArea, false);
-                }
-                : colors[index],
-            borderColor: colors[index],
-            borderWidth: 2,
-            hoverRadius: 12,
-            pointBorderWidth: 2,
-        }));
-        this.chart = new Chart(canvas, {
-            type: 'bubble',
-            data: { datasets },
-            options: {
-                animation: false,
-                responsive: true,
-                scales: {
-                    x: {
-                        beginAtZero: true,
-                        title: {
-                            display: !!this.data.xAxisLabel,
-                            text: this.data.xAxisLabel || '',
-                            font: {
-                                size: 11,
-                                weight: 400,
-                            },
-                            color: 'var(--text-secondary, #111827)',
-                        },
-                    },
-                    y: {
-                        beginAtZero: true,
-                        title: {
-                            display: !!this.data.yAxisLabel,
-                            text: this.data.yAxisLabel || '',
-                            font: {
-                                size: 11,
-                                weight: 400,
-                            },
-                            color: 'var(--text-secondary, #111827)',
-                        },
-                    },
-                },
-                plugins: {
-                    legend: {
-                        display: this.showLegend,
-                        position: 'top',
-                        labels: {
-                            usePointStyle: true, // Použitie kruhového symbolu
-                            pointStyle: 'circle', // Špecifický tvar pre symbol v legende
-                            font: {
-                                size: 13,
-                                weight: 500,
-                            },
-                        },
-                    },
-                    tooltip: {
-                        callbacks: {
-                            label: (tooltipItem) => {
-                                const dataPoint = tooltipItem.raw;
-                                return `\u00A0\u00A0x: ${dataPoint.x}, y: ${dataPoint.y}, r: ${dataPoint.r}`;
-                            },
-                        },
-                        bodyFont: {
-                            size: 13,
-                            weight: 400,
-                        },
-                        displayColors: true,
-                        usePointStyle: true, // Použitie kruhového symbolu
-                        xAlign: 'center',
-                        yAlign: 'bottom',
-                        padding: 16,
-                        backgroundColor: 'black',
-                        cornerRadius: 8,
-                    },
-                    title: {
-                        display: !!this.data.title,
-                        text: this.data.title, // Text, ktorý sa zobrazí nad grafom
-                        font: {
-                            size: 17,
-                            weight: 500,
-                        },
-                        color: 'var(--text-primary, #111827)',
-                        padding: {
-                            top: 10,
-                            bottom: 20,
-                        },
-                    },
-                },
-                onHover: (event, chartElement) => {
-                    const target = event.native?.target;
-                    if (chartElement.length) {
-                        target.style.cursor = 'pointer'; // Zmena kurzora na ruku
-                    }
-                    else {
-                        target.style.cursor = 'default';
-                    }
-                },
-            },
-        });
-    }
-    renderBarAndLineChart(canvas) {
-        if (this.chart)
-            this.chart.destroy();
-        const colors = this.generateColors(this.data.datasets.length);
-        const datasetsWithColors = this.data.datasets.map((dataset, index) => ({
-            ...dataset,
-            backgroundColor: this.useGradients
-                ? (context) => {
-                    const chart = context.chart;
-                    const { ctx, chartArea } = chart;
-                    if (!chartArea)
-                        return colors[index];
-                    return this.createGradient(ctx, colors[index], chartArea, false);
-                }
-                : colors[index],
-            borderColor: colors[index],
-            borderWidth: 2,
-            ...(this.type === 'bar' ? { borderRadius: 8, borderSkipped: false } : {}),
-            ...(this.type === 'line'
-                ? {
-                    pointStyle: 'circle',
-                    pointRadius: 4,
-                    pointBorderWidth: 2,
-                    pointBorderColor: colors[index],
-                    pointBackgroundColor: '#fff',
-                    tension: 0.4,
-                    fill: true,
-                }
-                : {}),
-        }));
-        this.chart = new Chart(canvas, {
-            type: this.type,
-            data: {
-                labels: this.data.labels,
-                datasets: datasetsWithColors,
-            },
-            options: {
-                animation: false,
-                responsive: true,
-                maintainAspectRatio: false,
-                scales: {
-                    x: {
-                        title: {
-                            display: !!this.data.xAxisLabel,
-                            text: this.data.xAxisLabel || '',
-                            font: {
-                                size: 11,
-                                weight: 400,
-                            },
-                            color: 'var(--text-secondary, #111827)',
-                        },
-                    },
-                    y: {
-                        title: {
-                            display: !!this.data.yAxisLabel,
-                            text: this.data.yAxisLabel || '',
-                            font: {
-                                size: 11,
-                                weight: 400,
-                            },
-                            color: 'var(--text-secondary, #111827)',
-                        },
-                    },
-                },
-                plugins: {
-                    legend: {
-                        display: this.showLegend,
-                        position: 'top',
-                        labels: {
-                            usePointStyle: true, // Použitie kruhového symbolu
-                            pointStyle: 'circle', // Špecifický tvar pre symbol v legende
-                            font: {
-                                size: 13,
-                                weight: 500,
-                            },
-                        },
-                    },
-                    tooltip: {
-                        callbacks: {
-                            title: () => '',
-                            label: (tooltipItem) => {
-                                const value = tooltipItem.raw || 0;
-                                return `\u00A0\u00A0${tooltipItem.label}: ${tooltipItem.raw}`;
-                            },
-                        },
-                        bodyFont: {
-                            size: 13,
-                            weight: 400,
-                        },
-                        displayColors: true,
-                        usePointStyle: true, // Použitie kruhového symbolu
-                        xAlign: 'center',
-                        yAlign: 'bottom',
-                        padding: 16,
-                        backgroundColor: 'black',
-                        cornerRadius: 8,
-                    },
-                    title: {
-                        display: !!this.data.title,
-                        text: this.data.title, // Text, ktorý sa zobrazí nad grafom
-                        font: {
-                            size: 17,
-                            weight: 500,
-                        },
-                        color: 'var(--text-primary, #111827)',
-                        padding: {
-                            top: 10,
-                            bottom: 20,
-                        },
-                    },
-                },
-                onHover: (event, chartElement) => {
-                    const target = event.native?.target;
-                    if (chartElement.length) {
-                        target.style.cursor = 'pointer'; // Zmena kurzora na ruku
-                    }
-                    else {
-                        target.style.cursor = 'default';
-                    }
-                },
-            },
-        });
-    }
-    render() {
-        return html `${this.isLoading ? html `<lit-loader></lit-loader>` : html `<canvas></canvas>`}`;
-    }
-}
-LitChart.styles = [
-    css `
-            canvas {
-                width: 100%;
-                height: 100%;
-                font-family: 'Inter', sans-serif;
-                margin: 0 auto;
-            }
-        `,
-];
-__decorate([
-    property({ type: String })
-], LitChart.prototype, "type", void 0);
-__decorate([
-    property({ type: Array })
-], LitChart.prototype, "data", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitChart.prototype, "isLoading", void 0);
-__decorate([
-    property({ type: String })
-], LitChart.prototype, "colorPalette", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitChart.prototype, "useGradients", void 0);
-__decorate([
-    property({ type: Boolean })
-], LitChart.prototype, "showLegend", void 0);
-if (!window.customElements.get('lit-chart')) {
-    window.customElements.define('lit-chart', LitChart);
-}
-//# sourceMappingURL=lit-chart.js.map