+ {folded.map((d, i) => {
+ const pct = (d.count / total) * 100;
+ const color = isOther(i) ? (dark ? OTHER_COLOR_DARK : OTHER_COLOR_LIGHT) : categoricalColor(i, dark);
+ return (
+
{
+ const rect = e.currentTarget.getBoundingClientRect();
+ const parent = e.currentTarget.parentElement!.parentElement!.getBoundingClientRect();
+ setTooltip({
+ x: rect.left - parent.left + rect.width / 2,
+ y: rect.top - parent.top,
+ label: d.label,
+ value: `${d.count} (${pct.toFixed(1)}%)`,
+ swatch: color,
+ });
+ }}
+ onMouseLeave={() => setTooltip(null)}
+ onFocus={() =>
+ setTooltip({ x: 0, y: 0, label: d.label, value: `${d.count} (${pct.toFixed(1)}%)`, swatch: color })
+ }
+ onBlur={() => setTooltip(null)}
+ />
+ );
+ })}
+
+
+
+ {folded.map((d, i) => {
+ const pct = (d.count / total) * 100;
+ const color = isOther(i) ? (dark ? OTHER_COLOR_DARK : OTHER_COLOR_LIGHT) : categoricalColor(i, dark);
+ return (
+
+
+ {d.label} — {d.count} ({pct.toFixed(1)}%)
+
+ );
+ })}
+
+
+
+
+ );
+}
diff --git a/stats-react/src/components/icons.tsx b/stats-react/src/components/icons.tsx
new file mode 100644
index 0000000..8bd3813
--- /dev/null
+++ b/stats-react/src/components/icons.tsx
@@ -0,0 +1,67 @@
+// Небольшой набор inline-SVG иконок (замена Material Icons из Flet-версии).
+import type { SVGProps } from "react";
+
+type P = SVGProps