diff --git a/.storybook/global.css b/.storybook/global.css
index 32d95f6e4..73464846c 100644
--- a/.storybook/global.css
+++ b/.storybook/global.css
@@ -16,3 +16,5 @@ body {
background-color: orange;
}
}
+
+@import "../frontend/tailwindsetup.css";
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 831ce237f..5be93fed6 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -45,5 +45,8 @@
},
"[md]": {
"editor.wordWrap": "on"
+ },
+ "files.associations": {
+ "*.css": "tailwindcss"
}
}
diff --git a/electron.vite.config.ts b/electron.vite.config.ts
index 0077b808d..4ab0bd4b9 100644
--- a/electron.vite.config.ts
+++ b/electron.vite.config.ts
@@ -1,6 +1,7 @@
// Copyright 2025, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0
+import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react-swc";
import { defineConfig } from "electron-vite";
import flow from "rollup-plugin-flow";
@@ -63,15 +64,23 @@ export default defineConfig({
server: {
open: false,
},
+ css: {
+ preprocessorOptions: {
+ scss: {
+ silenceDeprecations: ["mixed-decls"],
+ },
+ },
+ },
plugins: [
ViteImageOptimizer(),
tsconfigPaths(),
+ flow(),
svgr({
svgrOptions: { exportType: "default", ref: true, svgo: false, titleProp: true },
include: "**/*.svg",
}),
react({}),
- flow(),
+ tailwindcss(),
viteStaticCopy({
targets: [{ src: "node_modules/monaco-editor/min/vs/*", dest: "monaco" }],
}),
diff --git a/frontend/app/app.tsx b/frontend/app/app.tsx
index c935dfa91..880a034d2 100644
--- a/frontend/app/app.tsx
+++ b/frontend/app/app.tsx
@@ -29,6 +29,9 @@ import { NotificationBubbles } from "./notification/notificationbubbles";
import "./app.scss";
+// this should come after app.scss (don't remove the newline above otherwise prettier will reorder these imports)
+import "../tailwindsetup.css";
+
const dlog = debug("wave:app");
const focusLog = debug("wave:focus");
diff --git a/frontend/app/element/donutchart.stories.tsx b/frontend/app/element/donutchart.stories.tsx
new file mode 100644
index 000000000..1f065ae92
--- /dev/null
+++ b/frontend/app/element/donutchart.stories.tsx
@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import DonutChart from "./donutchart";
+
+const meta = {
+ title: "Components/DonutChart",
+ component: DonutChart,
+ parameters: {
+ layout: "centered",
+ docs: {
+ description: {
+ component:
+ "The `DonutChart` component displays data in a donut-style chart with customizable colors, labels, and tooltip. Useful for visualizing proportions or percentages.",
+ },
+ },
+ },
+ argTypes: {
+ data: {
+ description:
+ "The data for the chart, where each item includes `label`, `value`, and optional `displayvalue`.",
+ control: { type: "object" },
+ },
+ config: {
+ description: "config for the chart",
+ control: { type: "object" },
+ },
+ innerLabel: {
+ description: "The label displayed inside the donut chart (e.g., percentages).",
+ control: { type: "text" },
+ },
+ },
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ config: {
+ chrome: { label: "Chrome", color: "#8884d8" },
+ safari: { label: "Safari", color: "#82ca9d" },
+ firefox: { label: "Firefox", color: "#ffc658" },
+ edge: { label: "Edge", color: "#ff8042" },
+ other: { label: "Other", color: "#8dd1e1" },
+ },
+ data: [
+ { label: "chrome", value: 275, fill: "#8884d8" }, // Purple
+ { label: "safari", value: 200, fill: "#82ca9d" }, // Green
+ { label: "firefox", value: 287, fill: "#ffc658" }, // Yellow
+ { label: "edge", value: 173, fill: "#ff8042" }, // Orange
+ { label: "other", value: 190, fill: "#8dd1e1" }, // Light Blue
+ ],
+ innerLabel: "50%",
+ innerSubLabel: "50/100",
+ dataKey: "value",
+ nameKey: "label",
+ },
+};
diff --git a/frontend/app/element/donutchart.tsx b/frontend/app/element/donutchart.tsx
new file mode 100644
index 000000000..7dd32afcc
--- /dev/null
+++ b/frontend/app/element/donutchart.tsx
@@ -0,0 +1,92 @@
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/app/shadcn/chart";
+import { isBlank } from "@/util/util";
+import { Label, Pie, PieChart } from "recharts";
+import { ViewBox } from "recharts/types/util/types";
+
+const DEFAULT_COLORS = [
+ "#3498db", // blue
+ "#2ecc71", // green
+ "#e74c3c", // red
+ "#f1c40f", // yellow
+ "#9b59b6", // purple
+ "#1abc9c", // turquoise
+ "#e67e22", // orange
+ "#34495e", // dark blue
+];
+
+const NO_DATA_COLOR = "#E0E0E0";
+
+const PieInnerLabel = ({
+ innerLabel,
+ innerSubLabel,
+ viewBox,
+}: {
+ innerLabel: string;
+ innerSubLabel: string;
+ viewBox: ViewBox;
+}) => {
+ if (isBlank(innerLabel)) {
+ return null;
+ }
+ if (!viewBox || !("cx" in viewBox) || !("cy" in viewBox)) {
+ return null;
+ }
+ return (
+
+
+ {innerLabel}
+
+ {innerSubLabel && (
+
+ {innerSubLabel}
+
+ )}
+
+ );
+};
+
+const DonutChart = ({
+ data,
+ config,
+ innerLabel,
+ innerSubLabel,
+ dataKey,
+ nameKey,
+}: {
+ data: any[];
+ config: ChartConfig;
+ innerLabel?: string;
+ innerSubLabel?: string;
+ dataKey: string;
+ nameKey: string;
+}) => {
+ return (
+
+
+
+ } />
+
+
+
+
+
+
+ {children}
+
+
+ );
+});
+ChartContainer.displayName = "Chart";
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+ const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
+
+ if (!colorConfig.length) {
+ return null;
+ }
+
+ return (
+