overview-components 1.0.68 → 1.0.70

package/dist/components/lit-chart.js

@@ -0,0 +1,392 @@
+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
+};