diff --git a/frontend/app/element/donutchart.stories.tsx b/frontend/app/element/donutchart.stories.tsx
deleted file mode 100644
index 1f065ae923..0000000000
--- a/frontend/app/element/donutchart.stories.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-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
deleted file mode 100644
index 7dd32afcc7..0000000000
--- a/frontend/app/element/donutchart.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-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 (
-
-
-
- } />
-
-
-
-
-
- );
-};
-
-export default DonutChart;
diff --git a/frontend/app/shadcn/chart.tsx b/frontend/app/shadcn/chart.tsx
deleted file mode 100644
index 38b6ecc7f9..0000000000
--- a/frontend/app/shadcn/chart.tsx
+++ /dev/null
@@ -1,324 +0,0 @@
-// Copyright 2025, Command Line Inc.
-// SPDX-License-Identifier: Apache-2.0
-//
-// This file is based on components from shadcn/ui, which is licensed under the MIT License.
-// Original source: https://github.com/shadcn/ui
-// Modifications made by Command Line Inc.
-
-"use client";
-
-import * as React from "react";
-import * as RechartsPrimitive from "recharts";
-
-import { cn } from "@/shadcn/lib/utils";
-
-// Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const;
-
-export type ChartConfig = {
- [k in string]: {
- label?: React.ReactNode;
- icon?: React.ComponentType;
- } & ({ color?: string; theme?: never } | { color?: never; theme: Record });
-};
-
-type ChartContextProps = {
- config: ChartConfig;
-};
-
-const ChartContext = React.createContext(null);
-
-function useChart() {
- const context = React.useContext(ChartContext);
-
- if (!context) {
- throw new Error("useChart must be used within a ");
- }
-
- return context;
-}
-
-const ChartContainer = React.forwardRef<
- HTMLDivElement,
- React.ComponentProps<"div"> & {
- config: ChartConfig;
- children: React.ComponentProps["children"];
- }
->(({ id, className, children, config, ...props }, ref) => {
- const uniqueId = React.useId();
- const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
-
- 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 (
-