overview-components 1.0.91 → 1.0.93

package/dist/components/lit-chart.js

@@ -1,392 +1,423 @@
-import { customElement as w } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
-import { property as b } from "../node_modules/@lit/reactive-element/decorators/property.js";
-import { LitElement as v, html as y, css as x } from "lit";
-import { Chart as p, registerables as D } from "chart.js";
-var k = Object.defineProperty, S = Object.getOwnPropertyDescriptor, u = (a, r, n, e) => {
-  for (var t = e > 1 ? void 0 : e ? S(r, n) : r, s = a.length - 1, o; s >= 0; s--)
-    (o = a[s]) && (t = (e ? o(r, n, t) : o(t)) || t);
-  return e && t && k(r, n, t), t;
+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;
 };
-p.register(...D);
-let c = class extends v {
-  constructor() {
-    super(...arguments), this.type = "bar", this.data = { labels: [], datasets: [], title: "" }, this.isLoading = !1, this.chart = null;
-  }
-  updated(a) {
-    (a.has("type") || a.has("data")) && this.renderChart();
-  }
-  generateColors(a) {
-    return Array.from(
-      { length: a },
-      () => `rgba(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, 0.6)`
-    );
-  }
-  renderChart() {
-    var r;
-    const a = (r = this.shadowRoot) == null ? void 0 : r.querySelector("canvas");
-    a && (this.type === "bar" || this.type === "line" ? this.renderBarAndLineChart(a) : this.type === "bubble" ? this.renderBubbleChart(a) : this.type === "pie" || this.type === "doughnut" ? this.renderPieAndDoughnutChart(a) : this.type === "gantt" && this.renderGanttChart(a));
-  }
-  renderGanttChart(a) {
-    var f;
-    this.chart && this.chart.destroy();
-    const r = this.generateColors(((f = this.data.datasets[0]) == null ? void 0 : f.data.length) || 0), n = this.data.datasets.map((l, i) => ({
-      label: l.label || `Dataset ${i + 1}`,
-      data: l.data.map((d) => {
-        const h = new Date(d.x[0]), m = new Date(d.x[1]);
-        return {
-          x: [
-            isNaN(h.getTime()) ? Date.now() : h.getTime(),
-            isNaN(m.getTime()) ? Date.now() : m.getTime()
-          ],
-          y: d.y
-        };
-      }),
-      backgroundColor: r,
-      borderColor: r,
-      borderWidth: 1,
-      barThickness: 16,
-      borderRadius: 4,
-      borderSkipped: !1
-    })), e = this.data.datasets.flatMap(
-      (l) => l.data.flatMap((i) => {
-        var d, h;
-        return [
-          new Date((d = i == null ? void 0 : i.x) == null ? void 0 : d[0]).getTime(),
-          new Date((h = i == null ? void 0 : i.x) == null ? void 0 : h[1]).getTime()
-        ];
-      })
-    ), t = Math.min(...e), s = Math.max(...e), C = (s - t) / 20;
-    this.chart = new p(a, {
-      type: "bar",
-      data: {
-        datasets: n
-      },
-      options: {
-        indexAxis: "y",
-        responsive: !0,
-        maintainAspectRatio: !1,
-        scales: {
-          x: {
-            type: "linear",
-            ticks: {
-              stepSize: C,
-              // 30 dní v milisekundách
-              autoSkip: !1,
-              callback: (l) => new Date(l).toLocaleDateString("sk-SK", {
-                day: "2-digit",
-                month: "2-digit",
-                year: "numeric"
-              })
-            },
-            min: t,
-            max: s
-          },
-          y: {
-            type: "category"
-          }
-        },
-        plugins: {
-          tooltip: {
-            callbacks: {
-              label: function(l) {
-                const i = new Date(l.raw.x[0]).toLocaleDateString(
-                  "sk-SK",
-                  {
-                    day: "2-digit",
-                    month: "2-digit",
-                    year: "numeric"
-                  }
-                ), d = new Date(l.raw.x[1]).toLocaleDateString("sk-SK", {
-                  day: "2-digit",
-                  month: "2-digit",
-                  year: "numeric"
-                });
-                return `  Začiatok: ${i}, Koniec: ${d}`;
-              }
-            },
-            bodyFont: {
-              size: 13,
-              weight: 400
-            },
-            displayColors: !0,
-            usePointStyle: !0,
-            backgroundColor: "black",
-            cornerRadius: 8
-          },
-          legend: {
-            display: !1
-          },
-          title: {
-            display: !0,
-            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: (l, i) => {
-          var h;
-          const d = (h = l.native) == null ? void 0 : h.target;
-          d.style.cursor = i.length ? "pointer" : "default";
+import { customElement, property } from 'lit/decorators.js';
+import { html, css, LitElement } from 'lit';
+import { Chart, registerables } from 'chart.js';
+import '../shared/lit-loader.js';
+Chart.register(...registerables);
+let LitChart = class LitChart extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.type = 'bar';
+        this.data = { labels: [], datasets: [], title: '' };
+        this.isLoading = false;
+        this.chart = null;
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('type') || changedProperties.has('data')) {
+            this.renderChart();
         }
-      }
-    });
-  }
-  renderPieAndDoughnutChart(a) {
-    var e;
-    this.chart && this.chart.destroy();
-    const r = this.generateColors(((e = this.data.datasets[0]) == null ? void 0 : e.data.length) || 0), n = this.data.datasets.map((t) => ({
-      ...t,
-      backgroundColor: r,
-      borderColor: r,
-      borderWidth: 2,
-      pointBorderWidth: 2
-    }));
-    this.chart = new p(a, {
-      type: this.type,
-      data: {
-        labels: this.data.labels,
-        datasets: n
-      },
-      options: {
-        responsive: !0,
-        maintainAspectRatio: !1,
-        plugins: {
-          legend: {
-            position: "top",
-            labels: {
-              usePointStyle: !0,
-              pointStyle: "circle",
-              font: {
-                size: 13,
-                weight: 500
-              }
-            }
-          },
-          tooltip: {
-            callbacks: {
-              title: () => "",
-              label: (t) => (t.raw, `  ${t.label}: ${t.raw}`)
-            },
-            bodyFont: {
-              size: 13,
-              weight: 400
-            },
-            displayColors: !0,
-            usePointStyle: !0,
-            // Použitie kruhového symbolu
-            xAlign: "center",
-            yAlign: "bottom",
-            padding: 16,
-            backgroundColor: "black",
-            cornerRadius: 8
-          },
-          title: {
-            display: !0,
-            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: (t, s) => {
-          var g;
-          const o = (g = t.native) == null ? void 0 : g.target;
-          s.length ? o.style.cursor = "pointer" : o.style.cursor = "default";
+    }
+    generateColors(numColors) {
+        return Array.from({ length: numColors }, () => `rgba(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, 0.6)`);
+    }
+    renderChart() {
+        const canvas = this.shadowRoot?.querySelector('canvas');
+        if (!canvas)
+            return;
+        if (this.type === 'bar' || this.type === 'line') {
+            this.renderBarAndLineChart(canvas);
         }
-      }
-    });
-  }
-  renderBubbleChart(a) {
-    this.chart && this.chart.destroy();
-    const r = this.generateColors(this.data.datasets.length), n = this.data.datasets.map((e, t) => ({
-      ...e,
-      backgroundColor: r[t],
-      borderColor: r[t],
-      borderWidth: 1,
-      hoverRadius: 10,
-      pointBorderWidth: 2
-    }));
-    this.chart = new p(a, {
-      type: "bubble",
-      data: { datasets: n },
-      options: {
-        responsive: !0,
-        scales: {
-          x: { beginAtZero: !0 },
-          y: { beginAtZero: !0 }
-        },
-        plugins: {
-          legend: {
-            position: "top",
-            labels: {
-              usePointStyle: !0,
-              // Použitie kruhového symbolu
-              pointStyle: "circle"
-              // Špecifický tvar pre symbol v legende
-            }
-          },
-          tooltip: {
-            callbacks: {
-              label: (e) => {
-                const t = e.raw;
-                return `  x: ${t.x}, y: ${t.y}, r: ${t.r}`;
-              }
+        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,
+            borderWidth: 1,
+            barThickness: 16,
+            borderRadius: 4,
+            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,
             },
-            bodyFont: {
-              size: 13,
-              weight: 400
+            options: {
+                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,
+                    },
+                    y: {
+                        type: 'category',
+                    },
+                },
+                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\u00A0Začiatok: ${start}, Koniec: ${end}`;
+                            },
+                        },
+                        bodyFont: {
+                            size: 13,
+                            weight: 400,
+                        },
+                        displayColors: true,
+                        usePointStyle: true,
+                        backgroundColor: 'black',
+                        cornerRadius: 8,
+                    },
+                    legend: {
+                        display: false,
+                    },
+                    title: {
+                        display: true,
+                        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';
+                },
             },
-            displayColors: !0,
-            usePointStyle: !0,
-            // Použitie kruhového symbolu
-            xAlign: "center",
-            yAlign: "bottom",
-            padding: 16,
-            backgroundColor: "black",
-            cornerRadius: 8
-          },
-          title: {
-            display: !0,
-            text: this.data.title,
-            // Text, ktorý sa zobrazí nad grafom
-            font: {
-              size: 17,
-              weight: 500
+        });
+    }
+    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: colors,
+            borderColor: colors,
+            borderWidth: 2,
+            pointBorderWidth: 2,
+        }));
+        this.chart = new Chart(canvas, {
+            type: this.type,
+            data: {
+                labels: this.data.labels,
+                datasets: datasetsWithColors,
             },
-            color: "var(--text-primary, #111827)",
-            padding: {
-              top: 10,
-              bottom: 20
-            }
-          }
-        },
-        onHover: (e, t) => {
-          var o;
-          const s = (o = e.native) == null ? void 0 : o.target;
-          t.length ? s.style.cursor = "pointer" : s.style.cursor = "default";
-        }
-      }
-    });
-  }
-  renderBarAndLineChart(a) {
-    this.chart && this.chart.destroy();
-    const r = this.generateColors(this.data.datasets.length), n = this.data.datasets.map((e, t) => ({
-      ...e,
-      backgroundColor: r[t],
-      borderColor: r[t],
-      borderWidth: 2,
-      ...this.type === "bar" ? { borderRadius: 4 } : {},
-      ...this.type === "line" ? {
-        pointStyle: "circle",
-        pointRadius: 3,
-        pointBorderWidth: 2,
-        pointBorderColor: r[t]
-      } : {}
-    }));
-    this.chart = new p(a, {
-      type: this.type,
-      data: {
-        labels: this.data.labels,
-        datasets: n
-      },
-      options: {
-        responsive: !0,
-        maintainAspectRatio: !1,
-        plugins: {
-          legend: {
-            position: "top",
-            labels: {
-              usePointStyle: !0,
-              // Použitie kruhového symbolu
-              pointStyle: "circle"
-              // Špecifický tvar pre symbol v legende
-            }
-          },
-          tooltip: {
-            callbacks: {
-              title: () => "",
-              label: (e) => (e.raw, `  ${e.label}: ${e.raw}`)
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        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: true,
+                        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';
+                    }
+                },
             },
-            bodyFont: {
-              size: 13,
-              weight: 400
+        });
+    }
+    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: colors[index],
+            borderColor: colors[index],
+            borderWidth: 1,
+            hoverRadius: 10,
+            pointBorderWidth: 2,
+        }));
+        this.chart = new Chart(canvas, {
+            type: 'bubble',
+            data: { datasets },
+            options: {
+                responsive: true,
+                scales: {
+                    x: { beginAtZero: true },
+                    y: { beginAtZero: true },
+                },
+                plugins: {
+                    legend: {
+                        position: 'top',
+                        labels: {
+                            usePointStyle: true, // Použitie kruhového symbolu
+                            pointStyle: 'circle', // Špecifický tvar pre symbol v legende
+                        },
+                    },
+                    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: true,
+                        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';
+                    }
+                },
             },
-            displayColors: !0,
-            usePointStyle: !0,
-            // Použitie kruhového symbolu
-            xAlign: "center",
-            yAlign: "bottom",
-            padding: 16,
-            backgroundColor: "black",
-            cornerRadius: 8
-          },
-          title: {
-            display: !0,
-            text: this.data.title,
-            // Text, ktorý sa zobrazí nad grafom
-            font: {
-              size: 17,
-              weight: 500
+        });
+    }
+    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: colors[index],
+            borderColor: colors[index],
+            borderWidth: 2,
+            ...(this.type === 'bar' ? { borderRadius: 4 } : {}),
+            ...(this.type === 'line'
+                ? {
+                    pointStyle: 'circle',
+                    pointRadius: 3,
+                    pointBorderWidth: 2,
+                    pointBorderColor: colors[index],
+                }
+                : {}),
+        }));
+        this.chart = new Chart(canvas, {
+            type: this.type,
+            data: {
+                labels: this.data.labels,
+                datasets: datasetsWithColors,
             },
-            color: "var(--text-primary, #111827)",
-            padding: {
-              top: 10,
-              bottom: 20
-            }
-          }
-        },
-        onHover: (e, t) => {
-          var o;
-          const s = (o = e.native) == null ? void 0 : o.target;
-          t.length ? s.style.cursor = "pointer" : s.style.cursor = "default";
-        }
-      }
-    });
-  }
-  render() {
-    return y`${this.isLoading ? y`<lit-loader></lit-loader>` : y`<canvas></canvas>`}`;
-  }
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        position: 'top',
+                        labels: {
+                            usePointStyle: true, // Použitie kruhového symbolu
+                            pointStyle: 'circle', // Špecifický tvar pre symbol v legende
+                        },
+                    },
+                    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: true,
+                        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>`}`;
+    }
 };
-c.styles = [
-  x`
+LitChart.styles = [
+    css `
             canvas {
                 width: 100%;
                 height: 100%;
                 font-family: 'Inter', sans-serif;
                 margin: 0 auto;
             }
-        `
+        `,
 ];
-u([
-  b({ type: String })
-], c.prototype, "type", 2);
-u([
-  b({ type: Array })
-], c.prototype, "data", 2);
-u([
-  b({ type: Boolean })
-], c.prototype, "isLoading", 2);
-c = u([
-  w("lit-chart")
-], c);
-export {
-  c as LitChart
-};
+__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);
+LitChart = __decorate([
+    customElement('lit-chart')
+], LitChart);
+export { LitChart };
+//# sourceMappingURL=lit-chart.js.map