-
-
Notifications
You must be signed in to change notification settings - Fork 227
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
20 changed files
with
642 additions
and
102 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import { Meta, StoryObj } from "@storybook/react"; | ||
| import { ChartTooltipContent } from "components/primitives/chart-primitives"; | ||
| import { RadarChart } from "./RadarChart"; | ||
|
|
||
| type Story = StoryObj<typeof RadarChart>; | ||
|
|
||
| const meta: Meta<typeof RadarChart> = { | ||
| title: "Components/Graphs/RadarChart", | ||
| component: RadarChart, | ||
| args: { | ||
| radarDataKey: "percentage", | ||
| polarAngleAxisDataKey: "type", | ||
| data: [ | ||
| { type: "Code review", percentage: 30 }, | ||
| { type: "Issues", percentage: 11 }, | ||
| { type: "Pull requests", percentage: 11 }, | ||
| { type: "Commits", percentage: 48 }, | ||
| ], | ||
| fill: "#ff5100", | ||
| }, | ||
| }; | ||
|
|
||
| export default meta; | ||
|
|
||
| export const Default: Story = {}; | ||
| export const WithDot: Story = { | ||
| args: { | ||
| dot: { | ||
| r: 4, | ||
| fillOpacity: 1, | ||
| }, | ||
| }, | ||
| }; | ||
| export const WithCustomTooltip: Story = { | ||
| args: { | ||
| chartTooltipContent: ( | ||
| <ChartTooltipContent | ||
| className="bg-white" | ||
| formatter={(value, name, item, index, payload) => { | ||
| return `${value}%`; | ||
| }} | ||
| /> | ||
| ), | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| "use client"; | ||
|
|
||
| // If you want to make improvements to the chart or extend it, see the examples at https://ui.shadcn.com/charts#radar-chart | ||
|
|
||
| import { PolarAngleAxis, PolarGrid, Radar, RadarChart as RawRadarChart } from "recharts"; | ||
| import { ComponentProps } from "react"; | ||
| import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "components/primitives/chart-primitives"; | ||
|
|
||
| const chartConfig = { | ||
| desktop: { | ||
| label: "Desktop", | ||
| color: "hsl(var(--chart-1))", | ||
| }, | ||
| } satisfies ChartConfig; | ||
|
|
||
| interface RadarChartProps { | ||
| data: ComponentProps<typeof RawRadarChart>["data"]; | ||
| cursor?: boolean; | ||
| radarDataKey: ComponentProps<typeof Radar>["dataKey"]; | ||
| polarAngleAxisDataKey: ComponentProps<typeof PolarAngleAxis>["dataKey"]; | ||
| children?: React.ReactNode; | ||
| opacity?: number; | ||
| // create an optional prop for the type that is the type of the RawRadarChart dot prop, but infer it from it's existing type | ||
| dot?: ComponentProps<typeof Radar>["dot"]; | ||
| fill: ComponentProps<typeof Radar>["fill"]; | ||
| // If you need a diffent unit, you can add it here | ||
| maxHeight?: `${number}${"px" | "rem"}` | "auto"; | ||
| labelFormatter?: ComponentProps<typeof ChartTooltipContent>["labelFormatter"]; | ||
| formatter?: ComponentProps<typeof ChartTooltipContent>["formatter"]; | ||
| chartTooltipContent?: ComponentProps<typeof ChartTooltip>["content"]; | ||
| } | ||
|
|
||
| export function RadarChart({ | ||
| data, | ||
| radarDataKey, | ||
| polarAngleAxisDataKey, | ||
| dot, | ||
| fill, | ||
| cursor = false, | ||
| opacity = 0.6, | ||
| maxHeight = "250px", | ||
| chartTooltipContent, | ||
| }: RadarChartProps) { | ||
| return ( | ||
| <ChartContainer config={chartConfig} className={`mx-auto aspect-square max-h-[${maxHeight}]`}> | ||
| <RawRadarChart data={data}> | ||
| <ChartTooltip | ||
| cursor={cursor} | ||
| content={chartTooltipContent ? chartTooltipContent : <ChartTooltipContent className="bg-white" />} | ||
| /> | ||
| <PolarAngleAxis dataKey={polarAngleAxisDataKey} /> | ||
| <PolarGrid /> | ||
| <Radar dataKey={radarDataKey} fill={fill} fillOpacity={opacity} dot={dot} /> | ||
| </RawRadarChart> | ||
| </ChartContainer> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.