@proef/common-ui 0.0.0-stage → 2.2.1

package/dist/esm/legacy/components/atoms/MultiTagPickerTag/MultiTagPickerTag.css

@@ -0,0 +1,40 @@
+.cui-multitag-container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 45px;
+  background-color: var(--light-gray-01);
+  border-radius: 100px;
+  gap: 10px;
+  justify-content: space-between;
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
+}
+.cui-multitag-container.selected {
+  background-color: var(--dark-blue);
+}
+.cui-multitag-container .cui-icon {
+  margin-right: 20px;
+  cursor: pointer;
+}
+
+.cui-multitag-name-container {
+  flex: 1;
+  min-width: 0;
+  padding-left: 20px;
+}
+
+.cui-multitag-name {
+  color: var(--dark-blue);
+  font-family: var(--primary-font);
+  font-size: 16px;
+  width: 100%;
+  max-width: 100%;
+  text-wrap: nowrap;
+  text-align: start;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.cui-multitag-name.selected {
+  color: var(--almost-white);
+}

package/dist/esm/legacy/components/atoms/MultiTagPickerTag/MultiTagPickerTag.js

@@ -0,0 +1,21 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import './MultiTagPickerTag.css';/* empty css                       */
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
+const Select = (props) => {
+  const { id, label, selected, handleTagChange } = props;
+  if (selected)
+    return /* @__PURE__ */ jsxs("div", { title: label, className: "cui-multitag-container selected", children: [
+      /* @__PURE__ */ jsx("div", { className: "cui-multitag-name-container", children: /* @__PURE__ */ jsx("p", { className: "cui-multitag-name selected", children: label }) }),
+      /* @__PURE__ */ jsx(FontAwesomeIcon, { size: "xl", icon: faMinus, className: "cui-icon", color: "#F8F8F8", onClick: () => handleTagChange(false) })
+    ] });
+  else
+    return /* @__PURE__ */ jsxs("div", { title: label, className: "cui-multitag-container", children: [
+      /* @__PURE__ */ jsx("div", { className: "cui-multitag-name-container", children: /* @__PURE__ */ jsx("p", { className: "cui-multitag-name", children: label }) }),
+      /* @__PURE__ */ jsx(FontAwesomeIcon, { size: "xl", icon: faPlus, className: "cui-icon", color: "#010060", onClick: () => handleTagChange(true) })
+    ] });
+};
+export {
+  Select as default
+};
+//# sourceMappingURL=MultiTagPickerTag.js.map

package/dist/esm/legacy/components/atoms/MultiTagPickerTag/MultiTagPickerTag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiTagPickerTag.js","sources":["../../../../../../src/legacy/components/atoms/MultiTagPickerTag/MultiTagPickerTag.tsx"],"sourcesContent":["import React from 'react'\r\nimport './MultiTagPickerTag.scss'\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\r\nimport { faMinus, faPlus } from '@fortawesome/free-solid-svg-icons'\r\n\r\ninterface TagProps {\r\n    id: string,\r\n    label: string,\r\n    selected: boolean,\r\n    handleTagChange: (changedTo: boolean) => void\r\n}\r\n\r\nconst Select: React.FC<TagProps> = (props: TagProps) => {\r\n\r\n    const { id, label, selected, handleTagChange } = props\r\n\r\n    if (selected)\r\n        return (\r\n            <div title={label} className='cui-multitag-container selected'>\r\n                <div className='cui-multitag-name-container'>\r\n                    <p className='cui-multitag-name selected'>{label}</p>\r\n                </div>\r\n                <FontAwesomeIcon size='xl' icon={faMinus} className=\"cui-icon\" color='#F8F8F8' onClick={() => handleTagChange(false)}/>\r\n            </div>\r\n        )\r\n    else\r\n        return (\r\n            <div title={label} className=\"cui-multitag-container\">\r\n                <div className='cui-multitag-name-container'>\r\n                    <p className='cui-multitag-name'>{label}</p>\r\n                </div>\r\n                <FontAwesomeIcon size='xl' icon={faPlus} className=\"cui-icon\" color='#010060' onClick={() => handleTagChange(true)}/>\r\n            </div>\r\n        )\r\n}\r\n\r\nexport default Select\r\n"],"names":[],"mappings":";;;;AAYA,MAAM,SAA6B,CAAC,UAAoB;AAEpD,QAAM,EAAE,IAAI,OAAO,UAAU,oBAAoB;AAEjD,MAAI;AACA,WACI,qBAAC,OAAA,EAAI,OAAO,OAAO,WAAU,mCACzB,UAAA;AAAA,MAAA,oBAAC,OAAA,EAAI,WAAU,+BACX,UAAA,oBAAC,OAAE,WAAU,8BAA8B,iBAAM,EAAA,CACrD;AAAA,MACA,oBAAC,iBAAA,EAAgB,MAAK,MAAK,MAAM,SAAS,WAAU,YAAW,OAAM,WAAU,SAAS,MAAM,gBAAgB,KAAK,EAAA,CAAE;AAAA,IAAA,GACzH;AAAA;AAGJ,WACI,qBAAC,OAAA,EAAI,OAAO,OAAO,WAAU,0BACzB,UAAA;AAAA,MAAA,oBAAC,OAAA,EAAI,WAAU,+BACX,UAAA,oBAAC,OAAE,WAAU,qBAAqB,iBAAM,EAAA,CAC5C;AAAA,MACA,oBAAC,iBAAA,EAAgB,MAAK,MAAK,MAAM,QAAQ,WAAU,YAAW,OAAM,WAAU,SAAS,MAAM,gBAAgB,IAAI,EAAA,CAAE;AAAA,IAAA,GACvH;AAEZ;"}

package/dist/esm/legacy/components/atoms/Select/Select.css

@@ -0,0 +1,16 @@
+.cui-select {
+  padding: clamp(6px, 1vw, 8px);
+  border: 1px solid var(--light-gray-02);
+  border-radius: clamp(8px, 2vw, 12px);
+  font-size: clamp(14px, 1.5vw, 16px);
+  background-color: var(--almost-white);
+  cursor: pointer;
+  width: 100%; /* Takes full width of container */
+  max-width: clamp(150px, 20vw, 300px); /* Optional max-width constraint */
+  box-sizing: border-box; /* Ensures padding/border don't add to width */
+}
+
+.cui-select:disabled {
+  background-color: var(--almost-gray);
+  cursor: not-allowed;
+}

package/dist/esm/legacy/components/atoms/Select/Select.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import './Select.css';/* empty css            */
+const Select = ({
+  placeholder,
+  options,
+  value,
+  onChange,
+  disabled = false
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "select",
+    {
+      value,
+      onChange: (e) => onChange(e.target.value),
+      disabled,
+      className: "cui-select",
+      children: [
+        /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }),
+        options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+      ]
+    }
+  );
+};
+export {
+  Select as default
+};
+//# sourceMappingURL=Select.js.map

package/dist/esm/legacy/components/atoms/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../../../../../src/legacy/components/atoms/Select/Select.tsx"],"sourcesContent":["import React from 'react'\r\nimport './Select.scss'\r\n\r\ninterface SelectOption {\r\n  value: string\r\n  label: string\r\n}\r\n\r\ninterface SelectProps {\r\n  placeholder: string\r\n  options: SelectOption[]\r\n  value: string\r\n  onChange: (value: string) => void\r\n  disabled?: boolean\r\n}\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nconst Select: React.FC<SelectProps> = ({\r\n  placeholder,\r\n  options,\r\n  value,\r\n  onChange,\r\n  disabled = false,\r\n}) => {\r\n  return (\r\n    <select\r\n      value={value}\r\n      onChange={(e) => onChange(e.target.value)}\r\n      disabled={disabled}\r\n      className=\"cui-select\"\r\n    >\r\n      <option value=\"\" disabled>\r\n        {placeholder}\r\n      </option>\r\n      {options.map((option) => (\r\n        <option key={option.value} value={option.value}>\r\n          {option.label}\r\n        </option>\r\n      ))}\r\n    </select>\r\n  )\r\n}\r\n\r\nexport default Select\r\n"],"names":[],"mappings":";;AAiBA,MAAM,SAAgC,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AACb,MAAM;AACJ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,MACxC;AAAA,MACA,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA,oBAAC,UAAA,EAAO,OAAM,IAAG,UAAQ,MACtB,UAAA,aACH;AAAA,QACC,QAAQ,IAAI,CAAC,WACZ,oBAAC,UAAA,EAA0B,OAAO,OAAO,OACtC,UAAA,OAAO,MAAA,GADG,OAAO,KAEpB,CACD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/legacy/components/atoms/Stack/Stack.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+const Stack = ({
+  children,
+  spacing = 2,
+  direction = "row",
+  wrap = false
+}) => {
+  const style = {
+    display: "flex",
+    gap: `${spacing * 0.25}rem`,
+    flexDirection: direction,
+    flexWrap: wrap ? "wrap" : "nowrap",
+    justifyContent: "center"
+  };
+  return /* @__PURE__ */ jsx("div", { style, children });
+};
+export {
+  Stack as default
+};
+//# sourceMappingURL=Stack.js.map

package/dist/esm/legacy/components/atoms/Stack/Stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.js","sources":["../../../../../../src/legacy/components/atoms/Stack/Stack.tsx"],"sourcesContent":["import React, { CSSProperties, PropsWithChildren } from 'react'\r\n\r\ntype Props = PropsWithChildren<{\r\n  spacing?: number\r\n  direction: 'row' | 'column'\r\n  wrap: boolean\r\n}>\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nconst Stack = ({\r\n  children,\r\n  spacing = 2,\r\n  direction = 'row',\r\n  wrap = false,\r\n}: Props) => {\r\n  const style: CSSProperties = {\r\n    display: 'flex',\r\n    gap: `${spacing * 0.25}rem`,\r\n    flexDirection: direction,\r\n    flexWrap: wrap ? 'wrap' : 'nowrap',\r\n    justifyContent: 'center',\r\n  }\r\n\r\n  return <div style={style}>{children}</div>\r\n}\r\n\r\nexport default Stack\r\n"],"names":[],"mappings":";AASA,MAAM,QAAQ,CAAC;AAAA,EACb;AAAA,EACA,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAO;AACT,MAAa;AACX,QAAM,QAAuB;AAAA,IAC3B,SAAS;AAAA,IACT,KAAK,GAAG,UAAU,IAAI;AAAA,IACtB,eAAe;AAAA,IACf,UAAU,OAAO,SAAS;AAAA,IAC1B,gBAAgB;AAAA,EAAA;AAGlB,SAAO,oBAAC,OAAA,EAAI,OAAe,SAAA,CAAS;AACtC;"}

package/dist/esm/legacy/components/atoms/Switch/CustomSwitch.css

@@ -0,0 +1,36 @@
+.cui-container {
+  color: var(--dark-blue);
+  display: flex;
+  align-items: center;
+}
+.cui-container .cui-label {
+  white-space: nowrap;
+}
+
+.cui-switch {
+  display: inline-block;
+}
+
+.cui-switch-size-default {
+  font-size: 0.95rem;
+  gap: 0.4rem;
+}
+.cui-switch-size-default .cui-switch {
+  transform: scale(1);
+}
+
+.cui-switch-size-compact {
+  font-size: 0.85rem;
+  gap: 0.2rem;
+}
+.cui-switch-size-compact .cui-switch {
+  transform: scale(0.85);
+}
+
+.cui-switch-size-large {
+  font-size: 1.1rem;
+  gap: 0.7rem;
+}
+.cui-switch-size-large .cui-switch {
+  transform: scale(1.15);
+}

package/dist/esm/legacy/components/atoms/Switch/CustomSwitch.js

@@ -0,0 +1,29 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import Switch from "react-switch";
+import './CustomSwitch.css';/* empty css                  */
+const CustomSwitch = ({
+  label,
+  activated,
+  onChange,
+  theme
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: `cui-container cui-switch-size-${theme.size}`, children: [
+    /* @__PURE__ */ jsx("label", { className: "cui-label", children: label }),
+    /* @__PURE__ */ jsx(
+      Switch,
+      {
+        onChange,
+        checked: activated,
+        offColor: "#888",
+        onColor: "#010060",
+        uncheckedIcon: false,
+        checkedIcon: false,
+        className: "cui-switch"
+      }
+    )
+  ] });
+};
+export {
+  CustomSwitch as default
+};
+//# sourceMappingURL=CustomSwitch.js.map

package/dist/esm/legacy/components/atoms/Switch/CustomSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomSwitch.js","sources":["../../../../../../src/legacy/components/atoms/Switch/CustomSwitch.tsx"],"sourcesContent":["import React from 'react'\r\nimport Switch from 'react-switch'\r\nimport { CustomSwitchTheme } from '../../../types/themes/CustomSwitchThemes'\r\n\r\nimport './CustomSwitch.scss'\r\n\r\ntype CustomSwitchProps = {\r\n  label: string\r\n  activated: boolean\r\n  onChange: () => void\r\n  theme: CustomSwitchTheme\r\n}\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nconst CustomSwitch: React.FC<CustomSwitchProps> = ({\r\n  label,\r\n  activated,\r\n  onChange,\r\n  theme,\r\n}) => {\r\n  return (\r\n    <div className={`cui-container cui-switch-size-${theme.size}`}>\r\n      <label className={'cui-label'}>{label}</label>\r\n      <Switch\r\n        onChange={onChange}\r\n        checked={activated}\r\n        offColor=\"#888\"\r\n        onColor=\"#010060\"\r\n        uncheckedIcon={false}\r\n        checkedIcon={false}\r\n        className={'cui-switch'}\r\n      />\r\n    </div>\r\n  )\r\n}\r\n\r\nexport default CustomSwitch\r\n"],"names":[],"mappings":";;;AAcA,MAAM,eAA4C,CAAC;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,8BACG,OAAA,EAAI,WAAW,iCAAiC,MAAM,IAAI,IACzD,UAAA;AAAA,IAAA,oBAAC,SAAA,EAAM,WAAW,aAAc,UAAA,OAAM;AAAA,IACtC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,SAAS;AAAA,QACT,UAAS;AAAA,QACT,SAAQ;AAAA,QACR,eAAe;AAAA,QACf,aAAa;AAAA,QACb,WAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EACb,GACF;AAEJ;"}

package/dist/esm/legacy/components/charts/Charts.js

@@ -0,0 +1,349 @@
+import { jsx } from "react/jsx-runtime";
+import { Chart, registerables } from "chart.js";
+import ChartDataLabels from "chartjs-plugin-datalabels";
+import { Doughnut, Bar, Bubble, Line } from "react-chartjs-2";
+import { useIsDark } from "../../../v1/capabilities/theme/useIsDark.js";
+function euros(v) {
+  if (v == null) return "—";
+  const negativo = v < 0;
+  const [inteiro, decimal] = Math.abs(v).toFixed(2).split(".");
+  const comMilhares = inteiro.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+  return `${negativo ? "-" : ""}${comMilhares},${decimal} €`;
+}
+function labelBucket(b) {
+  if (/^\d{4}-S\d{2}$/.test(b)) return `S${b.slice(6)}/${b.slice(2, 4)}`;
+  if (/^\d{4}-\d{2}$/.test(b)) return `${b.slice(5)}/${b.slice(0, 4)}`;
+  if (/^\d{4}-\d{2}-\d{2}$/.test(b)) return `${b.slice(8)}/${b.slice(5, 7)}`;
+  return b;
+}
+Chart.register(...registerables, ChartDataLabels);
+Chart.defaults.set("plugins.datalabels", { display: false });
+Chart.defaults.font.family = "'Montserrat', sans-serif";
+Chart.defaults.color = "#5B6577";
+const PALETA = [
+  "#1868B0",
+  "#1F8A55",
+  "#B96E00",
+  "#C23B34",
+  "#7C3AED",
+  "#0891B2",
+  "#DB2777",
+  "#65A30D",
+  "#4B5563",
+  "#D97706",
+  "#2563EB",
+  "#059669"
+];
+function cor(i) {
+  return PALETA[i % PALETA.length];
+}
+function useTema() {
+  const escuro = useIsDark();
+  return escuro ? { texto: "#CBD5E1", forte: "#E2E8F0", grelha: "#1E293B" } : { texto: "#5B6577", forte: "#182238", grelha: "#EEF1F5" };
+}
+function legendaBaixo(tema) {
+  return {
+    position: "bottom",
+    labels: { boxWidth: 10, font: { size: 11 }, color: tema.forte, usePointStyle: true, pointStyle: "circle" }
+  };
+}
+function clique(labels, series, onClick) {
+  if (!onClick) return {};
+  return {
+    onClick: (_e, els) => {
+      const el = els[0];
+      if (!el) return;
+      onClick(labels[el.index], el.index, series?.[el.datasetIndex]?.nome);
+    },
+    onHover: (e, els) => {
+      const alvo = e.native?.target;
+      if (alvo) alvo.style.cursor = els.length ? "pointer" : "default";
+    }
+  };
+}
+function Barras({
+  labels: todas,
+  series: todasSeries,
+  horizontal = false,
+  empilhado = false,
+  altura,
+  limite,
+  cores,
+  formatar = (v) => String(v),
+  valores = true,
+  percentagem = false,
+  legenda,
+  formatarEtiqueta = labelBucket,
+  onClick
+}) {
+  const tema = useTema();
+  const labels = limite ? todas.slice(0, limite) : todas;
+  const series = todasSeries.map((s) => ({ ...s, valores: limite ? s.valores.slice(0, limite) : s.valores }));
+  const uma = series.length === 1;
+  const total = uma ? todasSeries[0].valores.reduce((a, b) => a + (b || 0), 0) : 0;
+  const etiqueta = (v) => percentagem && uma && total > 0 ? `${formatar(v)} (${Math.round(v / total * 100)}%)` : formatar(v);
+  const alturaFinal = altura ?? (horizontal ? Math.max(200, labels.length * 30 + 40) : 260);
+  const eixoValor = { beginAtZero: true, stacked: empilhado, grid: { color: tema.grelha }, ticks: { color: tema.texto, callback: (v) => formatar(Number(v)) } };
+  const eixoEtiqueta = { stacked: empilhado, grid: { display: false }, ticks: { color: tema.texto } };
+  return /* @__PURE__ */ jsx("div", { style: { height: alturaFinal }, children: /* @__PURE__ */ jsx(
+    Bar,
+    {
+      data: {
+        labels: labels.map(formatarEtiqueta),
+        datasets: series.map((s, i) => ({
+          label: s.nome,
+          data: s.valores,
+          backgroundColor: uma && cores ? labels.map((_, j) => cores[j % cores.length]) : s.cor ?? cor(i),
+          borderRadius: 4,
+          maxBarThickness: 40
+        }))
+      },
+      options: {
+        indexAxis: horizontal ? "y" : "x",
+        maintainAspectRatio: false,
+        responsive: true,
+        ...clique(labels, series, onClick),
+        plugins: {
+          legend: legenda ?? !uma ? legendaBaixo(tema) : { display: false },
+          tooltip: { callbacks: { label: (c) => `${c.dataset.label ? `${c.dataset.label}: ` : ""}${etiqueta(Number(c.parsed[horizontal ? "x" : "y"]))}` } },
+          datalabels: {
+            display: (c) => valores && !empilhado && Number(c.dataset.data[c.dataIndex]) > 0,
+            anchor: "end",
+            align: "end",
+            color: tema.forte,
+            font: { size: 10, weight: 600 },
+            formatter: (v) => etiqueta(v)
+          }
+        },
+        scales: horizontal ? { x: eixoValor, y: eixoEtiqueta } : { x: eixoEtiqueta, y: eixoValor },
+        layout: { padding: horizontal ? { right: valores ? percentagem ? 56 : 32 : 8 } : { top: valores ? 18 : 4 } }
+      }
+    }
+  ) });
+}
+function BarrasEmpilhadas({ serie, altura = 280, onClick }) {
+  return /* @__PURE__ */ jsx(Barras, { labels: serie.labels, series: serie.series, empilhado: true, altura, onClick, legenda: true });
+}
+function BarrasHorizontais({
+  dados,
+  altura = 280,
+  limite = 12,
+  onClick
+}) {
+  const n = Math.min(limite, dados.labels.length);
+  return /* @__PURE__ */ jsx(
+    Barras,
+    {
+      horizontal: true,
+      labels: dados.labels,
+      series: [{ nome: "", valores: dados.valores }],
+      cores: Array.from({ length: n }, (_, i) => cor(i)),
+      limite,
+      altura,
+      onClick
+    }
+  );
+}
+function Anel({
+  dados,
+  altura = 260,
+  cores,
+  formatar = (v) => String(v),
+  onClick
+}) {
+  const tema = useTema();
+  const total = dados.valores.reduce((a, b) => a + (b || 0), 0);
+  return /* @__PURE__ */ jsx("div", { style: { height: altura }, children: /* @__PURE__ */ jsx(
+    Doughnut,
+    {
+      data: {
+        labels: dados.labels,
+        datasets: [
+          {
+            data: dados.valores,
+            backgroundColor: cores ?? dados.labels.map((_, i) => cor(i)),
+            borderWidth: 0
+          }
+        ]
+      },
+      options: {
+        maintainAspectRatio: false,
+        responsive: true,
+        cutout: "58%",
+        ...clique(dados.labels, void 0, onClick),
+        plugins: {
+          legend: legendaBaixo(tema),
+          tooltip: {
+            callbacks: {
+              label: (c) => {
+                const v = Number(c.parsed);
+                return ` ${c.label}: ${formatar(v)}${total > 0 ? ` (${Math.round(v / total * 100)}%)` : ""}`;
+              }
+            }
+          },
+          datalabels: {
+            // Só nas fatias que têm espaço para o número.
+            display: (c) => total > 0 && Number(c.dataset.data[c.dataIndex]) / total >= 0.05,
+            color: "#FFFFFF",
+            font: { size: 11, weight: 700 },
+            formatter: (v) => formatar(v)
+          }
+        }
+      }
+    }
+  ) });
+}
+function Linha({
+  dados,
+  altura = 260,
+  euros: emEuros = false,
+  onClick
+}) {
+  const tema = useTema();
+  return /* @__PURE__ */ jsx("div", { style: { height: altura }, children: /* @__PURE__ */ jsx(
+    Line,
+    {
+      data: {
+        labels: dados.labels.map(labelBucket),
+        datasets: [
+          {
+            label: "",
+            data: dados.valores,
+            borderColor: "#C23B34",
+            backgroundColor: "rgba(194,59,52,0.12)",
+            fill: true,
+            tension: 0.25,
+            pointRadius: 3
+          }
+        ]
+      },
+      options: {
+        maintainAspectRatio: false,
+        responsive: true,
+        ...clique(dados.labels, void 0, onClick),
+        plugins: {
+          legend: { display: false },
+          tooltip: {
+            callbacks: {
+              label: (c) => emEuros ? euros(Number(c.parsed.y)) : String(c.parsed.y)
+            }
+          }
+        },
+        scales: {
+          x: { grid: { display: false }, ticks: { color: tema.texto } },
+          y: {
+            beginAtZero: true,
+            grid: { color: tema.grelha },
+            ticks: { color: tema.texto, callback: (v) => emEuros ? euros(Number(v)) : String(v) }
+          }
+        }
+      }
+    }
+  ) });
+}
+function Linhas({
+  serie,
+  altura = 280,
+  area = false,
+  cores,
+  formatar = (v) => String(v),
+  formatarEtiqueta = labelBucket,
+  onClick
+}) {
+  const tema = useTema();
+  const corDe = (i) => cores?.[i] ?? cor(i);
+  return /* @__PURE__ */ jsx("div", { style: { height: altura }, children: /* @__PURE__ */ jsx(
+    Line,
+    {
+      data: {
+        labels: serie.labels.map(formatarEtiqueta),
+        datasets: serie.series.map((s, i) => ({
+          label: s.nome,
+          data: s.valores,
+          borderColor: corDe(i),
+          backgroundColor: area ? `${corDe(i)}22` : corDe(i),
+          fill: area,
+          tension: 0.25,
+          pointRadius: serie.labels.length > 24 ? 0 : 3,
+          pointHoverRadius: 4
+        }))
+      },
+      options: {
+        maintainAspectRatio: false,
+        responsive: true,
+        interaction: { mode: "index", intersect: false },
+        ...clique(serie.labels, serie.series, onClick),
+        plugins: {
+          legend: legendaBaixo(tema),
+          tooltip: { callbacks: { label: (c) => `${c.dataset.label}: ${formatar(Number(c.parsed.y))}` } }
+        },
+        scales: {
+          x: { grid: { display: false }, ticks: { color: tema.texto, autoSkip: true, maxRotation: 0 } },
+          y: { beginAtZero: true, grid: { color: tema.grelha }, ticks: { color: tema.texto, callback: (v) => formatar(Number(v)) } }
+        }
+      }
+    }
+  ) });
+}
+function Bolhas({
+  pontos,
+  altura = 280,
+  onClick,
+  xTitle = "Active OTs",
+  yTitle = "% overdue",
+  tooltipLabel = (p) => `${p.responsavel}: ${p.otsAtivas} active, ${p.percentagemForaPrazo}% overdue, ${euros(p.valorPenalizado)}`
+}) {
+  const tema = useTema();
+  const maxValor = Math.max(1, ...pontos.map((p) => p.valorPenalizado));
+  return /* @__PURE__ */ jsx("div", { style: { height: altura }, children: /* @__PURE__ */ jsx(
+    Bubble,
+    {
+      data: {
+        datasets: pontos.map((p, i) => ({
+          label: p.responsavel,
+          data: [
+            {
+              x: p.otsAtivas,
+              y: p.percentagemForaPrazo,
+              r: 6 + p.valorPenalizado / maxValor * 18
+            }
+          ],
+          backgroundColor: `${cor(i)}CC`,
+          borderColor: cor(i)
+        }))
+      },
+      options: {
+        maintainAspectRatio: false,
+        responsive: true,
+        onClick: (_e, elements) => {
+          const idx = elements[0]?.datasetIndex;
+          if (idx != null && onClick) onClick(pontos[idx]);
+        },
+        plugins: {
+          legend: { display: false },
+          tooltip: {
+            callbacks: {
+              label: (c) => tooltipLabel(pontos[c.datasetIndex])
+            }
+          }
+        },
+        scales: {
+          x: { beginAtZero: true, title: { display: true, text: xTitle, color: tema.texto }, grid: { color: tema.grelha }, ticks: { color: tema.texto } },
+          y: { beginAtZero: true, title: { display: true, text: yTitle, color: tema.texto }, grid: { color: tema.grelha }, ticks: { color: tema.texto } }
+        }
+      }
+    }
+  ) });
+}
+export {
+  Anel,
+  Barras,
+  BarrasEmpilhadas,
+  BarrasHorizontais,
+  Bolhas,
+  Linha,
+  Linhas,
+  PALETA,
+  cor
+};
+//# sourceMappingURL=Charts.js.map

package/dist/esm/legacy/components/charts/Charts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Charts.js","sources":["../../../../../src/legacy/components/charts/Charts.tsx"],"sourcesContent":["import React from 'react'\r\nimport { Chart as ChartJS, registerables, type ActiveElement, type ChartEvent } from 'chart.js'\r\nimport ChartDataLabels from 'chartjs-plugin-datalabels'\r\nimport { Bar, Doughnut, Line, Bubble } from 'react-chartjs-2'\r\nimport { useIsDark } from '../../../v1/capabilities/theme/useIsDark'\r\n\r\n// ---------------------------------------------------------------------------\r\n// Local types (inlined — originally imported from CRE `../types`).\r\n// ---------------------------------------------------------------------------\r\n\r\n/**\r\n * Stacked series over a set of shared labels (e.g. a dimension over time).\r\n * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.\r\n */\r\nexport interface SerieEmpilhada {\r\n  labels: string[]\r\n  series: { nome: string; valores: number[] }[]\r\n}\r\n\r\n/**\r\n * A simple distribution: parallel arrays of labels and values.\r\n * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.\r\n */\r\nexport interface Distribuicao {\r\n  labels: string[]\r\n  valores: number[]\r\n}\r\n\r\n/**\r\n * Clique num elemento do gráfico: a etiqueta (ex: \"Incidente\"), a posição dela\r\n * e o nome da série (quando há várias). Serve para filtrar ao clicar.\r\n */\r\nexport type CliqueGrafico = (label: string, indice: number, serie?: string) => void\r\n\r\n// ---------------------------------------------------------------------------\r\n// Local formatting helpers (inlined — originally imported from CRE `../lib/format`).\r\n// Behavior kept close to the originals; the library stays self-contained.\r\n// ---------------------------------------------------------------------------\r\n\r\n/**\r\n * Currency formatter. Thousands separated by '.', decimals by ',', suffixed ' €'.\r\n * Independent of Intl/ICU so the thousands separator is stable across browsers.\r\n */\r\nfunction euros(v: number | null | undefined): string {\r\n  if (v == null) return '—'\r\n  const negativo = v < 0\r\n  const [inteiro, decimal] = Math.abs(v).toFixed(2).split('.')\r\n  const comMilhares = inteiro.replace(/\\B(?=(\\d{3})+(?!\\d))/g, '.')\r\n  return `${negativo ? '-' : ''}${comMilhares},${decimal} €`\r\n}\r\n\r\n/** 'YYYY-Sxx' / 'YYYY-MM' / 'YYYY-MM-DD' → short axis label. */\r\nfunction labelBucket(b: string): string {\r\n  if (/^\\d{4}-S\\d{2}$/.test(b)) return `S${b.slice(6)}/${b.slice(2, 4)}`\r\n  if (/^\\d{4}-\\d{2}$/.test(b)) return `${b.slice(5)}/${b.slice(0, 4)}`\r\n  if (/^\\d{4}-\\d{2}-\\d{2}$/.test(b)) return `${b.slice(8)}/${b.slice(5, 7)}`\r\n  return b\r\n}\r\n\r\n// ---------------------------------------------------------------------------\r\n// Chart.js registration (once, at module load).\r\n// ---------------------------------------------------------------------------\r\n\r\n// Regista TUDO (registerables inclui Filler, controllers, scales) + o plugin de\r\n// datalabels. O registo parcial degenerava a geometria (doughnut colapsado) e o\r\n// aviso \"fill sem Filler\". registerables = equivalente a chart.js/auto.\r\nChartJS.register(...registerables, ChartDataLabels)\r\n// Datalabels off by default — enabled only where it improves readability.\r\nChartJS.defaults.set('plugins.datalabels', { display: false })\r\nChartJS.defaults.font.family = \"'Montserrat', sans-serif\"\r\nChartJS.defaults.color = '#5B6577'\r\n\r\n/**\r\n * Categorical palette. Stable order so the same dimension always maps to the same color.\r\n * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.\r\n */\r\nexport const PALETA = [\r\n  '#1868B0',\r\n  '#1F8A55',\r\n  '#B96E00',\r\n  '#C23B34',\r\n  '#7C3AED',\r\n  '#0891B2',\r\n  '#DB2777',\r\n  '#65A30D',\r\n  '#4B5563',\r\n  '#D97706',\r\n  '#2563EB',\r\n  '#059669',\r\n]\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport function cor(i: number): string {\r\n  return PALETA[i % PALETA.length]!\r\n}\r\n\r\n/**\r\n * Cores do texto e da grelha conforme o tema: as do claro sobre o fundo escuro\r\n * deixavam os eixos e os valores ilegíveis.\r\n */\r\nfunction useTema() {\r\n  const escuro = useIsDark()\r\n  return escuro\r\n    ? { texto: '#CBD5E1', forte: '#E2E8F0', grelha: '#1E293B' }\r\n    : { texto: '#5B6577', forte: '#182238', grelha: '#EEF1F5' }\r\n}\r\n\r\nfunction legendaBaixo(tema: ReturnType<typeof useTema>) {\r\n  return {\r\n    position: 'bottom' as const,\r\n    labels: { boxWidth: 10, font: { size: 11 }, color: tema.forte, usePointStyle: true, pointStyle: 'circle' as const },\r\n  }\r\n}\r\n\r\n/** Liga o clique do Chart.js ao `onClick` da biblioteca, com a mão por cima dos elementos. */\r\nfunction clique(labels: string[], series: { nome: string }[] | undefined, onClick?: CliqueGrafico) {\r\n  if (!onClick) return {}\r\n  return {\r\n    onClick: (_e: ChartEvent, els: ActiveElement[]) => {\r\n      const el = els[0]\r\n      if (!el) return\r\n      onClick(labels[el.index]!, el.index, series?.[el.datasetIndex]?.nome)\r\n    },\r\n    onHover: (e: ChartEvent, els: ActiveElement[]) => {\r\n      const alvo = e.native?.target as HTMLElement | undefined\r\n      if (alvo) alvo.style.cursor = els.length ? 'pointer' : 'default'\r\n    },\r\n  }\r\n}\r\n\r\n// ---------------------------------------------------------------------------\r\n// Barras — o componente geral; BarrasEmpilhadas e BarrasHorizontais são atalhos.\r\n// ---------------------------------------------------------------------------\r\n\r\nexport interface BarrasProps {\r\n  labels: string[]\r\n  /** Uma ou várias séries (ex: \"Atribuídos\" e \"Resolvidos\"), lado a lado ou empilhadas. */\r\n  series: { nome: string; valores: number[]; cor?: string }[]\r\n  /** Barras deitadas, com as etiquetas à esquerda (bom para nomes compridos e rankings). */\r\n  horizontal?: boolean\r\n  /** Séries empilhadas em vez de lado a lado. */\r\n  empilhado?: boolean\r\n  /** Altura em px. Nas horizontais, por omissão cresce com o número de barras. */\r\n  altura?: number\r\n  /** Só as primeiras N (ex: top 10). */\r\n  limite?: number\r\n  /** Cor de cada barra, quando há uma só série (ex: a cor de cada estado). */\r\n  cores?: string[]\r\n  /** Formato dos valores no tooltip, nas etiquetas e no eixo (ex: minutos → \"7h30\"). */\r\n  formatar?: (v: number) => string\r\n  /** Mostra o valor na ponta de cada barra. */\r\n  valores?: boolean\r\n  /** Junta a percentagem do total ao valor (ex: \"12 (34%)\"); só com uma série. */\r\n  percentagem?: boolean\r\n  /** Legenda das séries. Por omissão, só quando há mais do que uma. */\r\n  legenda?: boolean\r\n  /** Formato das etiquetas do eixo (ex: datas). Por omissão, datas ISO ficam curtas. */\r\n  formatarEtiqueta?: (label: string) => string\r\n  /** Clique numa barra: devolve a etiqueta, a posição e a série. */\r\n  onClick?: CliqueGrafico\r\n}\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport function Barras({\r\n  labels: todas,\r\n  series: todasSeries,\r\n  horizontal = false,\r\n  empilhado = false,\r\n  altura,\r\n  limite,\r\n  cores,\r\n  formatar = (v) => String(v),\r\n  valores = true,\r\n  percentagem = false,\r\n  legenda,\r\n  formatarEtiqueta = labelBucket,\r\n  onClick,\r\n}: BarrasProps) {\r\n  const tema = useTema()\r\n  const labels = limite ? todas.slice(0, limite) : todas\r\n  const series = todasSeries.map((s) => ({ ...s, valores: limite ? s.valores.slice(0, limite) : s.valores }))\r\n  const uma = series.length === 1\r\n  // A percentagem é do total, não só das barras mostradas (com `limite` seria das top N).\r\n  const total = uma ? todasSeries[0]!.valores.reduce((a, b) => a + (b || 0), 0) : 0\r\n  const etiqueta = (v: number) => (percentagem && uma && total > 0 ? `${formatar(v)} (${Math.round((v / total) * 100)}%)` : formatar(v))\r\n  const alturaFinal = altura ?? (horizontal ? Math.max(200, labels.length * 30 + 40) : 260)\r\n  const eixoValor = { beginAtZero: true, stacked: empilhado, grid: { color: tema.grelha }, ticks: { color: tema.texto, callback: (v: string | number) => formatar(Number(v)) } }\r\n  const eixoEtiqueta = { stacked: empilhado, grid: { display: false }, ticks: { color: tema.texto } }\r\n\r\n  return (\r\n    <div style={{ height: alturaFinal }}>\r\n      <Bar\r\n        data={{\r\n          labels: labels.map(formatarEtiqueta),\r\n          datasets: series.map((s, i) => ({\r\n            label: s.nome,\r\n            data: s.valores,\r\n            backgroundColor: uma && cores ? labels.map((_, j) => cores[j % cores.length]!) : (s.cor ?? cor(i)),\r\n            borderRadius: 4,\r\n            maxBarThickness: 40,\r\n          })),\r\n        }}\r\n        options={{\r\n          indexAxis: horizontal ? 'y' : 'x',\r\n          maintainAspectRatio: false,\r\n          responsive: true,\r\n          ...clique(labels, series, onClick),\r\n          plugins: {\r\n            legend: legenda ?? !uma ? legendaBaixo(tema) : { display: false },\r\n            tooltip: { callbacks: { label: (c) => `${c.dataset.label ? `${c.dataset.label}: ` : ''}${etiqueta(Number(c.parsed[horizontal ? 'x' : 'y']))}` } },\r\n            datalabels: {\r\n              display: (c) => valores && !empilhado && Number(c.dataset.data[c.dataIndex]) > 0,\r\n              anchor: 'end',\r\n              align: 'end',\r\n              color: tema.forte,\r\n              font: { size: 10, weight: 600 },\r\n              formatter: (v: number) => etiqueta(v),\r\n            },\r\n          },\r\n          scales: horizontal ? { x: eixoValor, y: eixoEtiqueta } : { x: eixoEtiqueta, y: eixoValor },\r\n          layout: { padding: horizontal ? { right: valores ? (percentagem ? 56 : 32) : 8 } : { top: valores ? 18 : 4 } },\r\n        }}\r\n      />\r\n    </div>\r\n  )\r\n}\r\n\r\n/**\r\n * Stacked bars for a dimension over time.\r\n * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.\r\n */\r\nexport function BarrasEmpilhadas({ serie, altura = 280, onClick }: { serie: SerieEmpilhada; altura?: number; onClick?: CliqueGrafico }) {\r\n  return <Barras labels={serie.labels} series={serie.series} empilhado altura={altura} onClick={onClick} legenda />\r\n}\r\n\r\n/**\r\n * Horizontal bars of a distribution (top N).\r\n * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.\r\n */\r\nexport function BarrasHorizontais({\r\n  dados,\r\n  altura = 280,\r\n  limite = 12,\r\n  onClick,\r\n}: {\r\n  dados: Distribuicao\r\n  altura?: number\r\n  limite?: number\r\n  onClick?: CliqueGrafico\r\n}) {\r\n  const n = Math.min(limite, dados.labels.length)\r\n  return (\r\n    <Barras\r\n      horizontal\r\n      labels={dados.labels}\r\n      series={[{ nome: '', valores: dados.valores }]}\r\n      cores={Array.from({ length: n }, (_, i) => cor(i))}\r\n      limite={limite}\r\n      altura={altura}\r\n      onClick={onClick}\r\n    />\r\n  )\r\n}\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport function Anel({\r\n  dados,\r\n  altura = 260,\r\n  cores,\r\n  formatar = (v) => String(v),\r\n  onClick,\r\n}: {\r\n  dados: Distribuicao\r\n  altura?: number\r\n  cores?: string[]\r\n  /** Formato dos valores no tooltip. */\r\n  formatar?: (v: number) => string\r\n  /** Clique numa fatia: devolve a etiqueta e a posição. */\r\n  onClick?: CliqueGrafico\r\n}) {\r\n  const tema = useTema()\r\n  const total = dados.valores.reduce((a, b) => a + (b || 0), 0)\r\n  return (\r\n    <div style={{ height: altura }}>\r\n      <Doughnut\r\n        data={{\r\n          labels: dados.labels,\r\n          datasets: [\r\n            {\r\n              data: dados.valores,\r\n              backgroundColor: cores ?? dados.labels.map((_, i) => cor(i)),\r\n              borderWidth: 0,\r\n            },\r\n          ],\r\n        }}\r\n        options={{\r\n          maintainAspectRatio: false,\r\n          responsive: true,\r\n          cutout: '58%',\r\n          ...clique(dados.labels, undefined, onClick),\r\n          plugins: {\r\n            legend: legendaBaixo(tema),\r\n            tooltip: {\r\n              callbacks: {\r\n                label: (c) => {\r\n                  const v = Number(c.parsed)\r\n                  return ` ${c.label}: ${formatar(v)}${total > 0 ? ` (${Math.round((v / total) * 100)}%)` : ''}`\r\n                },\r\n              },\r\n            },\r\n            datalabels: {\r\n              // Só nas fatias que têm espaço para o número.\r\n              display: (c) => total > 0 && Number(c.dataset.data[c.dataIndex]) / total >= 0.05,\r\n              color: '#FFFFFF',\r\n              font: { size: 11, weight: 700 },\r\n              formatter: (v: number) => formatar(v),\r\n            },\r\n          },\r\n        }}\r\n      />\r\n    </div>\r\n  )\r\n}\r\n\r\n/**\r\n * Simple line chart — optionally formats values as currency.\r\n * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.\r\n */\r\nexport function Linha({\r\n  dados,\r\n  altura = 260,\r\n  euros: emEuros = false,\r\n  onClick,\r\n}: {\r\n  dados: Distribuicao\r\n  altura?: number\r\n  euros?: boolean\r\n  onClick?: CliqueGrafico\r\n}) {\r\n  const tema = useTema()\r\n  return (\r\n    <div style={{ height: altura }}>\r\n      <Line\r\n        data={{\r\n          labels: dados.labels.map(labelBucket),\r\n          datasets: [\r\n            {\r\n              label: '',\r\n              data: dados.valores,\r\n              borderColor: '#C23B34',\r\n              backgroundColor: 'rgba(194,59,52,0.12)',\r\n              fill: true,\r\n              tension: 0.25,\r\n              pointRadius: 3,\r\n            },\r\n          ],\r\n        }}\r\n        options={{\r\n          maintainAspectRatio: false,\r\n          responsive: true,\r\n          ...clique(dados.labels, undefined, onClick),\r\n          plugins: {\r\n            legend: { display: false },\r\n            tooltip: {\r\n              callbacks: {\r\n                label: (c) => (emEuros ? euros(Number(c.parsed.y)) : String(c.parsed.y)),\r\n              },\r\n            },\r\n          },\r\n          scales: {\r\n            x: { grid: { display: false }, ticks: { color: tema.texto } },\r\n            y: {\r\n              beginAtZero: true,\r\n              grid: { color: tema.grelha },\r\n              ticks: { color: tema.texto, callback: (v) => (emEuros ? euros(Number(v)) : String(v)) },\r\n            },\r\n          },\r\n        }}\r\n      />\r\n    </div>\r\n  )\r\n}\r\n\r\n/**\r\n * Several lines over the same labels — NOT stacked.\r\n *\r\n * Separate from `BarrasEmpilhadas` on purpose: two series that measure the same\r\n * thing at two moments (created vs closed) must be read against each other, and\r\n * stacking them would draw their sum, which means nothing.\r\n * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.\r\n */\r\nexport function Linhas({\r\n  serie,\r\n  altura = 280,\r\n  area = false,\r\n  cores,\r\n  formatar = (v) => String(v),\r\n  formatarEtiqueta = labelBucket,\r\n  onClick,\r\n}: {\r\n  serie: SerieEmpilhada\r\n  altura?: number\r\n  /// Fill under each line. Only legible with one or two series.\r\n  area?: boolean\r\n  /** Cor de cada série, pela ordem. */\r\n  cores?: string[]\r\n  /** Formato dos valores no tooltip e no eixo. */\r\n  formatar?: (v: number) => string\r\n  /** Formato das etiquetas do eixo (ex: datas). */\r\n  formatarEtiqueta?: (label: string) => string\r\n  /** Clique num ponto: devolve a etiqueta (ex: o dia) e a série. */\r\n  onClick?: CliqueGrafico\r\n}) {\r\n  const tema = useTema()\r\n  const corDe = (i: number) => cores?.[i] ?? cor(i)\r\n  return (\r\n    <div style={{ height: altura }}>\r\n      <Line\r\n        data={{\r\n          labels: serie.labels.map(formatarEtiqueta),\r\n          datasets: serie.series.map((s, i) => ({\r\n            label: s.nome,\r\n            data: s.valores,\r\n            borderColor: corDe(i),\r\n            backgroundColor: area ? `${corDe(i)}22` : corDe(i),\r\n            fill: area,\r\n            tension: 0.25,\r\n            pointRadius: serie.labels.length > 24 ? 0 : 3,\r\n            pointHoverRadius: 4,\r\n          })),\r\n        }}\r\n        options={{\r\n          maintainAspectRatio: false,\r\n          responsive: true,\r\n          interaction: { mode: 'index', intersect: false },\r\n          ...clique(serie.labels, serie.series, onClick),\r\n          plugins: {\r\n            legend: legendaBaixo(tema),\r\n            tooltip: { callbacks: { label: (c) => `${c.dataset.label}: ${formatar(Number(c.parsed.y))}` } },\r\n          },\r\n          scales: {\r\n            x: { grid: { display: false }, ticks: { color: tema.texto, autoSkip: true, maxRotation: 0 } },\r\n            y: { beginAtZero: true, grid: { color: tema.grelha }, ticks: { color: tema.texto, callback: (v) => formatar(Number(v)) } },\r\n          },\r\n        }}\r\n      />\r\n    </div>\r\n  )\r\n}\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport interface PontoRisco {\r\n  responsavel: string\r\n  otsAtivas: number\r\n  percentagemForaPrazo: number\r\n  valorPenalizado: number\r\n}\r\n\r\n/**\r\n * Risk-map bubbles: x = active OTs, y = % overdue, r = penalized value.\r\n * The radius is normalized against the max so bubbles stay readable at any scale.\r\n *\r\n * Axis titles and the tooltip formatter are exposed as optional props with\r\n * neutral English defaults (previously hardcoded Portuguese) so the component\r\n * carries no locale of its own.\r\n * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.\r\n */\r\nexport function Bolhas({\r\n  pontos,\r\n  altura = 280,\r\n  onClick,\r\n  xTitle = 'Active OTs',\r\n  yTitle = '% overdue',\r\n  tooltipLabel = (p) => `${p.responsavel}: ${p.otsAtivas} active, ${p.percentagemForaPrazo}% overdue, ${euros(p.valorPenalizado)}`,\r\n}: {\r\n  pontos: PontoRisco[]\r\n  altura?: number\r\n  onClick?: (p: PontoRisco) => void\r\n  xTitle?: string\r\n  yTitle?: string\r\n  tooltipLabel?: (p: PontoRisco) => string\r\n}) {\r\n  const tema = useTema()\r\n  const maxValor = Math.max(1, ...pontos.map((p) => p.valorPenalizado))\r\n  return (\r\n    <div style={{ height: altura }}>\r\n      <Bubble\r\n        data={{\r\n          datasets: pontos.map((p, i) => ({\r\n            label: p.responsavel,\r\n            data: [\r\n              {\r\n                x: p.otsAtivas,\r\n                y: p.percentagemForaPrazo,\r\n                r: 6 + (p.valorPenalizado / maxValor) * 18,\r\n              },\r\n            ],\r\n            backgroundColor: `${cor(i)}CC`,\r\n            borderColor: cor(i),\r\n          })),\r\n        }}\r\n        options={{\r\n          maintainAspectRatio: false,\r\n          responsive: true,\r\n          onClick: (_e, elements) => {\r\n            const idx = elements[0]?.datasetIndex\r\n            if (idx != null && onClick) onClick(pontos[idx]!)\r\n          },\r\n          plugins: {\r\n            legend: { display: false },\r\n            tooltip: {\r\n              callbacks: {\r\n                label: (c) => tooltipLabel(pontos[c.datasetIndex]!),\r\n              },\r\n            },\r\n          },\r\n          scales: {\r\n            x: { beginAtZero: true, title: { display: true, text: xTitle, color: tema.texto }, grid: { color: tema.grelha }, ticks: { color: tema.texto } },\r\n            y: { beginAtZero: true, title: { display: true, text: yTitle, color: tema.texto }, grid: { color: tema.grelha }, ticks: { color: tema.texto } },\r\n          },\r\n        }}\r\n      />\r\n    </div>\r\n  )\r\n}\r\n"],"names":["ChartJS"],"mappings":"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"}