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 ( -