geoiq-frontend-ui-kit/dist/index.es123.js

This project is a UI kit for GeoIQ's frontend. It's built with React, TypeScript, and Vite.

import e from "react";
import { Typography as r } from "./index.es17.js";
import { ResponsiveContainer as c, PieChart as o, Pie as m, Cell as i } from "recharts";
function p({
  list: l
}) {
  const n = l?.reduce(
    (t, a) => t + a.count,
    0
  ) || 1;
  return /* @__PURE__ */ e.createElement("div", { className: "flex gap-2 p-4 border rounded-lg border-neutral-1 bg-light-1" }, /* @__PURE__ */ e.createElement("div", { className: "w-[180px] h-[164px] flex items-center justify-center" }, /* @__PURE__ */ e.createElement(c, { width: "100%", height: "100%" }, /* @__PURE__ */ e.createElement(o, null, /* @__PURE__ */ e.createElement(
    m,
    {
      data: l,
      labelLine: !1,
      outerRadius: "100%",
      dataKey: "count"
    },
    l?.map(
      (t, a) => /* @__PURE__ */ e.createElement(
        i,
        {
          key: `cell-${a}`,
          fill: t.color,
          stroke: "none"
        }
      )
    )
  )))), /* @__PURE__ */ e.createElement("div", { className: "flex flex-col gap-4" }, l?.map(
    (t, a) => /* @__PURE__ */ e.createElement("div", { key: a, className: "flex flex-col gap-1" }, /* @__PURE__ */ e.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ e.createElement("img", { src: t.icon_url, alt: t.name || "Brand icon" }), /* @__PURE__ */ e.createElement(r, { variant: "body4", className: "text-light-3" }, t.name)), /* @__PURE__ */ e.createElement(r, { variant: "body4", className: "text-light-2" }, (t.count / n * 100).toFixed(2), "% (", t.count, ")"))
  )));
}
export {
  p as ClusterHoverCard
};
//# sourceMappingURL=index.es123.js.map