@anoki/fse-ui/dist/index.es195.js

FSE UI components library

import { j as s } from "./index.es278.js";
import './components/ui/MostVisitedHoursChart/MostVisitedHoursChart.css';/* empty css            */
import { Row as u } from "./index.es219.js";
import { Col as h } from "./index.es82.js";
const n = [
  { hour: 8, value: 100 },
  { hour: 9, value: 85 },
  { hour: 10, value: 65 },
  { hour: 11, value: 50 },
  { hour: 12, value: 50 },
  { hour: 13, value: 50 },
  { hour: 14, value: 75 },
  { hour: 15, value: 60 },
  { hour: 16, value: 60 },
  { hour: 17, value: 85 },
  { hour: 18, value: 85 },
  { hour: 19, value: 78, isActive: !0 },
  { hour: 20, value: 45 }
], d = ["08", "11", "14", "17", "20"], j = ({
  data: r = n,
  title: t = "Orari con il maggior numero di visite alla struttura",
  labels: l = d,
  updateValue: i = 5,
  updateUnit: o = "minuti",
  statusHighlightText: c = "più affollato del solito"
}) => /* @__PURE__ */ s.jsxs("article", { className: "bg-white shadow br-x4 ui-most-visited-hours", children: [
  /* @__PURE__ */ s.jsx(u, { as: "header", gap: "x16", className: "align-items-center", children: /* @__PURE__ */ s.jsx("h3", { className: "fs-5 md-fs-custom-2 fw-semibold text-slate-20", children: t }) }),
  /* @__PURE__ */ s.jsxs("div", { className: "ui-most-visited-hours-content", children: [
    /* @__PURE__ */ s.jsxs(h, { className: "status-bar", py: "x8", fw: "bold", fs: "6", children: [
      /* @__PURE__ */ s.jsxs("p", { className: "status-main text-slate-28", children: [
        "Adesso ",
        /* @__PURE__ */ s.jsx("span", { className: "status-highlight", children: c })
      ] }),
      /* @__PURE__ */ s.jsxs("p", { className: "status-update fw-regular text-grey-black", children: [
        "Dato aggiornato ogni ",
        i,
        " ",
        o
      ] })
    ] }),
    /* @__PURE__ */ s.jsxs("div", { className: "chart-container pt-x32", children: [
      /* @__PURE__ */ s.jsxs("div", { className: "chart-bars-wrapper", children: [
        /* @__PURE__ */ s.jsx("div", { className: "avg-line" }),
        r.map((a, e) => /* @__PURE__ */ s.jsx("div", { className: "chart-bar-container", children: /* @__PURE__ */ s.jsx(
          "div",
          {
            className: `chart-bar ${a.isActive ? "active" : ""}`,
            style: { height: `${a.value}%` }
          }
        ) }, e))
      ] }),
      /* @__PURE__ */ s.jsx("div", { className: "chart-labels", children: l.map((a, e) => /* @__PURE__ */ s.jsx("span", { className: "chart-label", children: a }, e)) })
    ] })
  ] })
] });
export {
  j as MostVisitedHoursChart
};
//# sourceMappingURL=index.es195.js.map