@vector-business-services/cristal-ds-web 0.24.0 → 0.25.0

package/dist/index.d.cts

@@ -199,8 +199,13 @@ interface ChartProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'chi
     helpLabel?: string;
     /** Botões à direita do título (IconButton tertiary xsmall no Figma). */
     actions?: ReactNode;
-    /** Altura da área do gráfico, com os eixos. Padrão: 266px, a do Figma. */
-    height?: number;
+    /**
+     * Altura da área do gráfico, com os eixos: em px, ou `'100%'` para ocupar a altura do contêiner
+     * (que precisa ter altura definida). Padrão: 266px, a do Figma.
+     */
+    height?: number | '100%';
+    /** Legenda abaixo do gráfico. Padrão: com 2 ou mais séries. */
+    legend?: boolean;
     id?: string;
     className?: string;
 }

package/dist/index.d.ts

@@ -199,8 +199,13 @@ interface ChartProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'chi
     helpLabel?: string;
     /** Botões à direita do título (IconButton tertiary xsmall no Figma). */
     actions?: ReactNode;
-    /** Altura da área do gráfico, com os eixos. Padrão: 266px, a do Figma. */
-    height?: number;
+    /**
+     * Altura da área do gráfico, com os eixos: em px, ou `'100%'` para ocupar a altura do contêiner
+     * (que precisa ter altura definida). Padrão: 266px, a do Figma.
+     */
+    height?: number | '100%';
+    /** Legenda abaixo do gráfico. Padrão: com 2 ou mais séries. */
+    legend?: boolean;
     id?: string;
     className?: string;
 }

package/dist/index.js

@@ -603,6 +603,26 @@ var comAlfa = (cor, alfa) => {
   const [r = 0, g = 0, b = 0] = normal.match(/[\d.]+/g)?.map(Number) ?? [];
   return `rgba(${r}, ${g}, ${b}, ${alfa})`;
 };
+var senoide = {
+  id: "crSenoide",
+  beforeDatasetsDraw(chart) {
+    chart.data.datasets.forEach((_, indice) => {
+      const meta = chart.getDatasetMeta(indice);
+      if (meta.type !== "line" || !meta.dataset || !chart.isDatasetVisible(indice)) return;
+      const linha = meta.dataset;
+      linha.updateControlPoints(chart.chartArea, meta.iScale?.axis);
+      const pontos = linha.points;
+      pontos.forEach((ponto, i) => {
+        const antes = pontos[i - 1];
+        const depois = pontos[i + 1];
+        ponto.cp1x = antes && !antes.skip ? (antes.x + ponto.x) / 2 : ponto.x;
+        ponto.cp1y = ponto.y;
+        ponto.cp2x = depois && !depois.skip ? (ponto.x + depois.x) / 2 : ponto.x;
+        ponto.cp2y = ponto.y;
+      });
+    });
+  }
+};
 var cruz = (cor) => ({
   id: "crCruz",
   afterDatasetsDraw(chart) {
@@ -619,59 +639,7 @@ var cruz = (cor) => ({
     ctx.restore();
   }
 });
-var tracar = (ctx, pontos) => {
-  pontos.forEach((ponto, i) => {
-    const antes = pontos[i - 1];
-    if (!antes) return ctx.moveTo(ponto.x, ponto.y);
-    const meio = (antes.x + ponto.x) / 2;
-    ctx.bezierCurveTo(meio, antes.y, meio, ponto.y, ponto.x, ponto.y);
-  });
-};
-var trechos = (pontos) => pontos.reduce(
-  (lista, ponto) => {
-    if (ponto.skip) lista.push([]);
-    else lista[lista.length - 1].push(ponto);
-    return lista;
-  },
-  [[]]
-).filter((trecho) => trecho.length > 0);
-var curvaDoFigma = {
-  id: "crCurva",
-  beforeDatasetsDraw(chart) {
-    const { ctx, chartArea } = chart;
-    const series = chart.data.datasets.map((dataset, indice) => ({ dataset, meta: chart.getDatasetMeta(indice), indice })).filter(({ indice }) => chart.isDatasetVisible(indice)).reverse();
-    ctx.save();
-    ctx.beginPath();
-    ctx.rect(chartArea.left, chartArea.top, chartArea.width, chartArea.height);
-    ctx.clip();
-    series.forEach(({ dataset, meta }) => {
-      const cor = String(dataset.borderColor);
-      const base = Math.min(meta.yScale?.getPixelForValue(0) ?? chartArea.bottom, chartArea.bottom);
-      const degrade = ctx.createLinearGradient(0, chartArea.top, 0, chartArea.bottom);
-      degrade.addColorStop(0, comAlfa(cor, 0.1));
-      degrade.addColorStop(1, comAlfa(cor, 0.02));
-      trechos(meta.data).forEach((trecho) => {
-        ctx.beginPath();
-        tracar(ctx, trecho);
-        ctx.lineTo(trecho[trecho.length - 1].x, base);
-        ctx.lineTo(trecho[0].x, base);
-        ctx.closePath();
-        ctx.fillStyle = degrade;
-        ctx.fill();
-      });
-    });
-    series.forEach(({ dataset, meta }) => {
-      ctx.strokeStyle = String(dataset.borderColor);
-      ctx.lineWidth = 2;
-      trechos(meta.data).forEach((trecho) => {
-        ctx.beginPath();
-        tracar(ctx, trecho);
-        ctx.stroke();
-      });
-    });
-    ctx.restore();
-  }
-};
+var semMovimento = () => typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
 var formatar = (eixo, valor) => eixo?.format ? eixo.format(valor) : String(valor);
 var Chart = forwardRef(function Chart2({
   type = "line",
@@ -685,6 +653,7 @@ var Chart = forwardRef(function Chart2({
   helpLabel = "Ajuda",
   actions,
   height = 266,
+  legend,
   id,
   className,
   ...props
@@ -723,8 +692,19 @@ var Chart = forwardRef(function Chart2({
           data: s.data,
           yAxisID: s.axis === "right" ? "y2" : "y",
           borderColor: cor,
-          // A linha e a área são desenhadas pelo plugin curvaDoFigma.
-          showLine: false,
+          borderWidth: 2,
+          // Liga a curva (Béziers) do Chart.js; os controles viram os da senoide (plugin senoide).
+          cubicInterpolationMode: "monotone",
+          // Área até o zero, em degradê da cor da série: 10% em cima e 2% embaixo.
+          fill: "origin",
+          backgroundColor: ({ chart }) => {
+            const area = chart.chartArea;
+            if (!area) return comAlfa(cor, 0.1);
+            const degrade = chart.ctx.createLinearGradient(0, area.top, 0, area.bottom);
+            degrade.addColorStop(0, comAlfa(cor, 0.1));
+            degrade.addColorStop(1, comAlfa(cor, 0.02));
+            return degrade;
+          },
           pointRadius: 0,
           pointHoverRadius: 4,
           pointHoverBorderWidth: 2,
@@ -734,6 +714,18 @@ var Chart = forwardRef(function Chart2({
       })
     };
   }, [tema, labels, series, type, stacked]);
+  const ultimoQuadro = useRef(0);
+  const marcarAnimando = useCallback(() => {
+    ultimoQuadro.current = performance.now();
+    raiz.current?.setAttribute("data-cr-animando", "");
+  }, []);
+  const desmarcarAnimando = useCallback(() => {
+    const tentar = () => {
+      if (performance.now() - ultimoQuadro.current < 100) setTimeout(tentar, 50);
+      else raiz.current?.removeAttribute("data-cr-animando");
+    };
+    setTimeout(tentar, 50);
+  }, []);
   const options = useMemo(() => {
     if (!tema) return void 0;
     const fonte = { ...tema.fonte, weight: tema.fonte.weight };
@@ -756,7 +748,9 @@ var Chart = forwardRef(function Chart2({
     return {
       responsive: true,
       maintainAspectRatio: false,
-      animation: false,
+      // A animação do Chart.js (a do p-chart), sem ela com prefers-reduced-motion. Enquanto anima, a
+      // raiz leva data-cr-animando (os testes de imagem esperam o fim).
+      animation: semMovimento() ? false : { onProgress: marcarAnimando, onComplete: desmarcarAnimando },
       interaction: { mode: "index", intersect: false },
       layout: { padding: { top: 8 } },
       scales: {
@@ -794,9 +788,14 @@ var Chart = forwardRef(function Chart2({
         }
       }
     };
-  }, [tema, yAxis, y2Axis, temDireita, series, type, stacked]);
+  }, [tema, yAxis, y2Axis, temDireita, series, type, stacked, marcarAnimando, desmarcarAnimando]);
+  useLayoutEffect(() => {
+    if (data && options && !semMovimento()) raiz.current?.setAttribute("data-cr-animando", "");
+  }, [data, options]);
   const card = Boolean(title || actions);
-  const classes2 = ["cr-chart", card && "cr-chart--card", className].filter(Boolean).join(" ");
+  const preencher = height === "100%";
+  const comLegenda = legend ?? series.length > 1;
+  const classes2 = ["cr-chart", card && "cr-chart--card", preencher && "cr-chart--fill", className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("div", { ...props, ref: raiz, id, className: classes2, children: [
     card && /* @__PURE__ */ jsxs("div", { className: "cr-chart__header", children: [
       /* @__PURE__ */ jsxs("div", { className: "cr-chart__title-row", children: [
@@ -809,13 +808,13 @@ var Chart = forwardRef(function Chart2({
       actions && /* @__PURE__ */ jsx("div", { className: "cr-chart__actions", children: actions })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "cr-chart__body", children: [
-      /* @__PURE__ */ jsx("div", { className: "cr-chart__plot", style: { height }, children: data && options && /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "cr-chart__plot", style: preencher ? void 0 : { height }, children: data && options && /* @__PURE__ */ jsx(
         Chart$1,
         {
           type,
           data,
           options,
-          plugins: type === "line" ? [curvaDoFigma, cruz(tema.cruz)] : [],
+          plugins: type === "line" ? [senoide, cruz(tema.cruz)] : [],
           width: "100%",
           height: "100%",
           pt: {
@@ -828,7 +827,7 @@ var Chart = forwardRef(function Chart2({
         },
         type
       ) }),
-      series.length > 1 && /* @__PURE__ */ jsx("ul", { className: "cr-chart__legend", children: series.map((s, i) => /* @__PURE__ */ jsxs("li", { className: "cr-chart__legend-item", children: [
+      comLegenda && /* @__PURE__ */ jsx("ul", { className: "cr-chart__legend", children: series.map((s, i) => /* @__PURE__ */ jsxs("li", { className: "cr-chart__legend-item", children: [
         /* @__PURE__ */ jsx(
           "span",
           {