overview-components 1.1.161 → 1.1.165

package/dist/components/lit-chart.js

@@ -0,0 +1,727 @@
+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