analytica-frontend-lib/dist/chunk-GFO2Z4ZT.mjs

Repositório público dos componentes utilizados nas plataformas da Analytica Ensino

import {
  Tooltip
} from "./chunk-QBKJAKGY.mjs";
import {
  bgClassToCssVar
} from "./chunk-REYQHCVW.mjs";
import {
  Text_default
} from "./chunk-IMCIR6TJ.mjs";
import {
  cn
} from "./chunk-53ICLDGS.mjs";

// src/components/SimpleBarChart/SimpleBarChart.tsx
import { jsx, jsxs } from "react/jsx-runtime";
var calculateTicks = (maxValue) => {
  if (maxValue <= 0) return [0];
  const niceMax = Math.ceil(maxValue / 4) * 4;
  const step = niceMax / 4;
  return [niceMax, step * 3, step * 2, step, 0];
};
var YAxis = ({
  ticks,
  chartHeight
}) => /* @__PURE__ */ jsx(
  "div",
  {
    className: "flex flex-col justify-between items-end pr-3",
    style: { height: chartHeight },
    "aria-hidden": "true",
    children: ticks.map((tick, index) => /* @__PURE__ */ jsx(
      Text_default,
      {
        size: "xs",
        weight: "medium",
        className: "text-text-500",
        children: tick
      },
      `${tick}-${index}`
    ))
  }
);
var GridLines = ({
  ticks,
  chartHeight
}) => /* @__PURE__ */ jsx(
  "div",
  {
    className: "absolute inset-0 flex flex-col justify-between pointer-events-none",
    style: { height: chartHeight },
    children: ticks.map((tick, index) => /* @__PURE__ */ jsx(
      "div",
      {
        className: "w-full border-t border-dashed border-border-200"
      },
      `grid-${tick}-${index}`
    ))
  }
);
var Bar = ({
  item,
  maxValue,
  chartHeight,
  barColor
}) => {
  const barHeight = maxValue === 0 ? 0 : item.value / maxValue * chartHeight;
  const tooltipContent = item.value > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
    /* @__PURE__ */ jsx(
      "div",
      {
        className: "w-2 h-2 rounded-full shrink-0",
        style: { background: bgClassToCssVar(barColor) }
      }
    ),
    /* @__PURE__ */ jsxs(Text_default, { as: "span", size: "xs", weight: "medium", color: "text-white", children: [
      item.label,
      ": ",
      item.value
    ] })
  ] }) : null;
  return /* @__PURE__ */ jsx(
    Tooltip,
    {
      content: tooltipContent ?? "",
      disabled: !tooltipContent,
      position: "top",
      className: "flex-1",
      contentClassName: "whitespace-normal",
      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 w-full cursor-pointer group/bar", children: [
        /* @__PURE__ */ jsxs(
          "div",
          {
            className: "w-full flex flex-col-reverse items-center justify-start relative",
            style: { height: chartHeight },
            children: [
              barHeight > 0 && /* @__PURE__ */ jsx(
                "div",
                {
                  "data-testid": `bar-${item.label}`,
                  className: cn("w-8 rounded-md", barColor),
                  style: { height: `${barHeight}px` },
                  "aria-label": `${item.label}: ${item.value}`
                }
              ),
              item.value > 0 && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-white/50 opacity-0 group-hover/bar:opacity-100 transition-opacity duration-200 rounded-md pointer-events-none z-20" })
            ]
          }
        ),
        /* @__PURE__ */ jsx(
          Text_default,
          {
            size: "xs",
            weight: "medium",
            className: "text-text-600 text-center",
            "data-testid": `label-${item.label}`,
            children: item.label
          }
        )
      ] })
    }
  );
};
var SimpleBarChart = ({
  data,
  title,
  chartHeight = 180,
  barColor = "bg-info-500",
  className,
  ...props
}) => {
  const maxValue = Math.max(...data.map((item) => item.value), 0);
  const yAxisTicks = calculateTicks(maxValue);
  const adjustedMax = yAxisTicks[0];
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: cn(
        "flex flex-col p-5 gap-4 bg-background border border-border-50 rounded-xl",
        className
      ),
      "aria-label": title,
      ...props,
      children: [
        /* @__PURE__ */ jsx(
          Text_default,
          {
            as: "h3",
            size: "lg",
            weight: "bold",
            className: "text-text-950 tracking-[0.2px]",
            children: title
          }
        ),
        /* @__PURE__ */ jsxs("div", { className: "flex flex-row", children: [
          /* @__PURE__ */ jsx(YAxis, { ticks: yAxisTicks, chartHeight }),
          /* @__PURE__ */ jsx("div", { className: "w-4" }),
          /* @__PURE__ */ jsxs("div", { className: "flex-1 relative", children: [
            /* @__PURE__ */ jsx(GridLines, { ticks: yAxisTicks, chartHeight }),
            /* @__PURE__ */ jsx("div", { className: "flex flex-row flex-1 gap-2 relative z-10", children: data.map((item, index) => (
              // Equal-width column wrapper: keeps every bucket the same width even
              // when a bar's value is 0 (its Tooltip is disabled and would
              // otherwise drop the flex-1 class, collapsing the column).
              /* @__PURE__ */ jsx(
                "div",
                {
                  className: "flex-1 flex min-w-0",
                  children: /* @__PURE__ */ jsx(
                    Bar,
                    {
                      item,
                      maxValue: adjustedMax,
                      chartHeight,
                      barColor
                    }
                  )
                },
                `${item.label}-${index}`
              )
            )) })
          ] })
        ] })
      ]
    }
  );
};
var SimpleBarChart_default = SimpleBarChart;

export {
  SimpleBarChart,
  SimpleBarChart_default
};
//# sourceMappingURL=chunk-GFO2Z4ZT.mjs.map