@konstructio/ui/dist/components/LineChart/LineChart.js

A set of reusable and customizable React components built for konstruct.io

import { i as l, t as _ } from "../../utils-COaoD3PI.js";
import { Typography as z } from "../Typography/Typography.js";
import { a as P, c as j, d as D, i as E, l as F, n as H, o as N, s as O, u as M } from "../../dist-BHslNQd82.js";
import { useMemo as h } from "react";
import { jsx as p, jsxs as V } from "react/jsx-runtime";
P.register(E, F, M, O, N, j, D);
var a = [
  "--color-aurora-500",
  "--color-rose-500",
  "--color-violet-500",
  "--color-emerald-500",
  "--color-sky-500",
  "--color-teal-500",
  "--color-amber-500",
  "--color-fuchsia-500",
  "--color-indigo-500",
  "--color-cyan-500"
], J = ({ title: n, titleProps: k, labels: u, datasets: i, yAxisFormatter: t, showLegend: b, height: C = 300, smooth: m = !0, axisColor: c = "#9F9FA9", gridColor: e = "#45556C", showGrid: g = !0, lineWidth: f = 2, showAxisBorder: s = !1, tooltipTextColor: d = l("--color-metal-100"), className: S }) => {
  const v = b !== void 0 ? b : i.length > 1, L = h(() => ({
    labels: u,
    datasets: i.map((o, r) => ({
      label: o.label,
      data: o.data,
      borderColor: o.color ?? l(a[r % a.length]),
      backgroundColor: o.color ?? l(a[r % a.length]),
      borderDash: o.borderDash,
      borderWidth: f,
      pointRadius: 0,
      pointHoverRadius: 4,
      tension: m ? 0.3 : 0,
      fill: !1
    }))
  }), [
    u,
    i,
    m,
    f
  ]), R = h(() => ({
    responsive: !0,
    maintainAspectRatio: !1,
    onHover: (o, r) => {
      const y = o.native?.target;
      y && (y.style.cursor = r.length > 0 ? "pointer" : "default");
    },
    interaction: {
      mode: "index",
      intersect: !1
    },
    plugins: {
      legend: {
        display: v,
        position: "top",
        align: "end",
        labels: {
          color: "#9FAFBC",
          font: {
            size: 12,
            weight: 500
          },
          usePointStyle: !0,
          pointStyle: "line",
          boxWidth: 24,
          padding: 16
        }
      },
      tooltip: {
        enabled: !0,
        backgroundColor: l("--color-metal-700"),
        titleColor: d,
        bodyColor: d,
        boxPadding: 6,
        callbacks: { labelTextColor: () => d }
      }
    },
    scales: {
      x: {
        grid: { color: "transparent" },
        ticks: {
          color: c,
          font: { size: 12 }
        },
        border: {
          display: s,
          color: e
        }
      },
      y: {
        grid: { color: g ? e : "transparent" },
        ticks: {
          color: c,
          font: { size: 12 },
          callback: t ? (o) => t(o) : void 0
        },
        border: {
          display: s,
          color: e
        }
      }
    }
  }), [
    v,
    t,
    c,
    e,
    g,
    s
  ]);
  return /* @__PURE__ */ V("div", {
    className: _("w-full", S),
    children: [n && /* @__PURE__ */ p(z, {
      variant: "subtitle2",
      className: "mb-6",
      ...k,
      children: n
    }), /* @__PURE__ */ p("div", {
      style: { height: C },
      children: /* @__PURE__ */ p(H, {
        "aria-label": n ?? "Line chart",
        data: L,
        options: R
      })
    })]
  });
};
export {
  J as LineChart
};