geoiq-frontend-ui-kit
Version:
This project is a UI kit for GeoIQ's frontend. It's built with React, TypeScript, and Vite.
39 lines (38 loc) • 2.02 kB
JavaScript
import e from "react";
import { Typography as n } from "./index.es19.js";
import { ResponsiveContainer as o, PieChart as i, Pie as m, Cell as s } from "recharts";
function p({
list: l,
total: r
}) {
const c = 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: "relative w-[180px] h-[164px] flex items-center justify-center" }, /* @__PURE__ */ e.createElement(o, { width: "100%", height: "100%" }, /* @__PURE__ */ e.createElement(i, null, /* @__PURE__ */ e.createElement(
m,
{
data: l,
labelLine: !1,
outerRadius: "100%",
innerRadius: r != null ? "40%" : void 0,
dataKey: "count"
},
l?.map(
(t, a) => /* @__PURE__ */ e.createElement(
s,
{
key: `cell-${a}`,
fill: t.color,
stroke: "none"
}
)
)
))), r != null && /* @__PURE__ */ e.createElement("div", { className: "absolute inset-0 flex flex-col items-center justify-center pointer-events-none" }, /* @__PURE__ */ e.createElement(n, { variant: "body4", className: "text-light-1" }, "Total"), /* @__PURE__ */ e.createElement(n, { variant: "body2", className: "text-light-1 font-semibold" }, r))), /* @__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(n, { variant: "body4", className: "text-light-3" }, t.name)), /* @__PURE__ */ e.createElement(n, { variant: "body4", className: "text-light-2" }, (t.count / c * 100).toFixed(2), "% (", t.count, ")"))
)));
}
export {
p as ClusterHoverCard
};
//# sourceMappingURL=index.es126.js.map