overview-components 1.0.83 → 1.0.89

package/dist/components/lit-chart.js

@@ -1,423 +1,392 @@
-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 { 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;
 };
-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();
-        }
-    }
-    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);
-        }
-        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);
+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";
         }
-    }
-    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,
+      }
+    });
+  }
+  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}`)
             },
-            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';
-                },
+            bodyFont: {
+              size: 13,
+              weight: 400
             },
-        });
-    }
-    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,
+            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
             },
-            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';
-                    }
-                },
+            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";
+        }
+      }
+    });
+  }
+  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}`;
+              }
+            },
+            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
+            },
+            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}`)
             },
-        });
-    }
-    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,
+            bodyFont: {
+              size: 13,
+              weight: 400
             },
-            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';
-                    }
-                },
+            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
             },
-        });
-    }
-    render() {
-        return html `${this.isLoading ? html `<lit-loader></lit-loader>` : html `<canvas></canvas>`}`;
-    }
+            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>`}`;
+  }
 };
-LitChart.styles = [
-    css `
+c.styles = [
+  x`
             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);
-LitChart = __decorate([
-    customElement('lit-chart')
-], LitChart);
-export { LitChart };
-//# sourceMappingURL=lit-chart.js.map
+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
+};