overview-components 1.0.90 → 1.0.92

package/dist/components/lit-chart.js

@@ -1,392 +0,0 @@
-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;
-};
-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";
-        }
-      }
-    });
-  }
-  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";
-        }
-      }
-    });
-  }
-  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
-            },
-            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}`)
-            },
-            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
-            }
-          }
-        },
-        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>`}`;
-  }
-};
-c.styles = [
-  x`
-            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
-};