Playground
Show off your components here!
+
+ {""}
+
--
2.39.2
From 7f0faa5b2e94c94ce21b684be7db6b8a8b555955 Mon Sep 17 00:00:00 2001
From: Jared He <66887902+jaredjhe@users.noreply.github.com>
Date: Tue, 9 Aug 2022 18:00:22 -0400
Subject: [PATCH 13/17] Code review
---
components/PieChart.module.css | 8 ++--
components/PieChart.tsx | 83 +++++++++++++++++++++++++++-------
2 files changed, 69 insertions(+), 22 deletions(-)
diff --git a/components/PieChart.module.css b/components/PieChart.module.css
index e7e3414..29bb6dc 100644
--- a/components/PieChart.module.css
+++ b/components/PieChart.module.css
@@ -3,14 +3,12 @@
}
.labelPath {
- fill: var(--primary-background);
fill-opacity: 0;
}
.pieText,
.labelText {
fill: var(--label);
- font-size: 40px;
font-weight: 800;
}
@@ -20,9 +18,9 @@
.group:hover > .piePath {
fill: var(--primary-accent);
- filter: drop-shadow(0px 0px 6px var(--primary-accent));
+ filter: drop-shadow(0px 0px calc(6rem / 16) var(--primary-accent));
}
-.group:hover > .pieText {
- display: inline
+.group:hover .pieText {
+ display: inline;
}
\ No newline at end of file
diff --git a/components/PieChart.tsx b/components/PieChart.tsx
index 606a310..d860115 100644
--- a/components/PieChart.tsx
+++ b/components/PieChart.tsx
@@ -1,15 +1,28 @@
import { Group } from "@visx/group";
import Pie, { ProvidedProps } from "@visx/shape/lib/shapes/Pie";
+import { Text } from "@visx/text";
import React from "react";
import styles from "./PieChart.module.css";
interface PieChartProps {
data: PieChartData[];
+ /** Width of the entire graph, including labels, in pixels. */
width: number;
+ /** Width of the outer ring of labels, in pixels. */
labelWidth: number;
+ /** Distance between pie slices, in pixels */
padRadius?: number;
+ /** Distance of gap in center of pie graph, in pixels */
innerRadius?: number;
+ /** Font size of text inside the pie, in pixels*/
+ pieTextSize?: number;
+ /** Font size of labels outside the pie, in pixels */
+ labelTextSize?: number;
+ /** X-axis offset of the pie text, in pixels */
+ pieTextXOffset?: number;
+ /** Y-axis offset of the pie text, in pixels */
+ pieTextYOffset?: number;
className?: string;
}
@@ -19,18 +32,23 @@ interface PieChartData {
}
export function PieChart({
+ data,
width,
labelWidth,
padRadius = width * 0.35,
innerRadius = width * 0.015,
- ...props
+ pieTextSize = 40,
+ labelTextSize = 40,
+ pieTextXOffset = 0,
+ pieTextYOffset = 10,
+ className,
}: PieChartProps) {
const pieWidth = width * 0.5 - labelWidth;
return (
-
@@ -90,9 +79,7 @@ export function PieChart({
}
type PieSliceProps
= ProvidedProps & {
- isLabel: boolean;
pieTextSize: number;
- labelTextSize: number;
pieTextXOffset: number;
pieTextYOffset: number;
};
@@ -100,9 +87,7 @@ type PieSliceProps = ProvidedProps & {
export function PieSlice({
path,
arcs,
- isLabel,
pieTextSize,
- labelTextSize,
pieTextXOffset,
pieTextYOffset,
}: PieSliceProps) {
@@ -114,18 +99,49 @@ export function PieSlice({
return (
-
+
- {isLabel ? `${arc.data.category}` : `${arc.data.value}%`}
+ {`${arc.data.value}%`}
+
+
+ );
+ })}
+
+ );
+}
+
+type PieSliceLabelProps = ProvidedProps & {
+ labelTextSize: number;
+};
+
+export function PieSliceLabel({
+ path,
+ arcs,
+ labelTextSize,
+}: PieSliceLabelProps) {
+ return (
+ <>
+ {arcs.map((arc) => {
+ const [centroidX, centroidY] = path.centroid(arc);
+ const pathArc = path(arc) as string;
+
+ return (
+
+
+
+ {`${arc.data.category}`}
);
--
2.39.2
From 28a39696db0a4ae7b81800408337765fe06acaed Mon Sep 17 00:00:00 2001
From: Jared He <66887902+jaredjhe@users.noreply.github.com>
Date: Wed, 31 Aug 2022 20:13:02 -0400
Subject: [PATCH 15/17] Refactor into PieSlice and PieSliceLabel
---
components/PieChart.tsx | 45 +++++++++++++++++++++++++++++++++--------
1 file changed, 37 insertions(+), 8 deletions(-)
diff --git a/components/PieChart.tsx b/components/PieChart.tsx
index 7df31ee..1d89baa 100644
--- a/components/PieChart.tsx
+++ b/components/PieChart.tsx
@@ -17,12 +17,20 @@ interface PieChartProps {
innerRadius?: number;
/** Font size of text inside the pie, in pixels*/
pieTextSize?: number;
- /** Font size of labels outside the pie, in pixels */
- labelTextSize?: number;
/** X-axis offset of the pie text, in pixels */
pieTextXOffset?: number;
/** Y-axis offset of the pie text, in pixels */
pieTextYOffset?: number;
+ /** Accessor function to get value to display as pie text from datum */
+ getPieDisplayValueFromDatum?: (datum: PieChartData) => string;
+ /** Font size of labels outside the pie, in pixels */
+ labelTextSize?: number;
+ /** X-axis offset of the label text, in pixels */
+ labelTextXOffset?: number;
+ /** Y-axis offset of the label text, in pixels */
+ labelTextYOffset?: number;
+ /** Accessor function to get value to display as label text from datum */
+ getLabelDisplayValueFromDatum?: (datum: PieChartData) => string;
className?: string;
}
@@ -38,9 +46,13 @@ export function PieChart({
padRadius = width * 0.35,
innerRadius = width * 0.015,
pieTextSize = 40,
- labelTextSize = 40,
pieTextXOffset = 0,
pieTextYOffset = 10,
+ getPieDisplayValueFromDatum = (datum: PieChartData) => `${datum.value}%`,
+ labelTextSize = 40,
+ labelTextXOffset = 0,
+ labelTextYOffset = 0,
+ getLabelDisplayValueFromDatum = (datum: PieChartData) => `${datum.category}`,
className,
}: PieChartProps) {
const pieWidth = width * 0.5 - labelWidth;
@@ -62,6 +74,7 @@ export function PieChart({
pieTextSize={pieTextSize}
pieTextXOffset={pieTextXOffset}
pieTextYOffset={pieTextYOffset}
+ getPieDisplayValueFromDatum={getPieDisplayValueFromDatum}
/>
)}
@@ -71,7 +84,15 @@ export function PieChart({
innerRadius={pieWidth}
outerRadius={width * 0.5}
>
- {(pie) => }
+ {(pie) => (
+
+ )}
@@ -82,6 +103,7 @@ type PieSliceProps = ProvidedProps & {
pieTextSize: number;
pieTextXOffset: number;
pieTextYOffset: number;
+ getPieDisplayValueFromDatum: (datum: PieChartData) => string;
};
export function PieSlice({
@@ -90,6 +112,7 @@ export function PieSlice({
pieTextSize,
pieTextXOffset,
pieTextYOffset,
+ getPieDisplayValueFromDatum,
}: PieSliceProps) {
return (
<>
@@ -107,7 +130,7 @@ export function PieSlice({
textAnchor="middle"
fontSize={pieTextSize}
>
- {`${arc.data.value}%`}
+ {`${getPieDisplayValueFromDatum(arc.data)}`}
);
@@ -118,12 +141,18 @@ export function PieSlice({
type PieSliceLabelProps = ProvidedProps & {
labelTextSize: number;
+ labelTextXOffset: number;
+ labelTextYOffset: number;
+ getLabelDisplayValueFromDatum: (datum: PieChartData) => string;
};
export function PieSliceLabel({
path,
arcs,
labelTextSize,
+ labelTextXOffset,
+ labelTextYOffset,
+ getLabelDisplayValueFromDatum,
}: PieSliceLabelProps) {
return (
<>
@@ -136,12 +165,12 @@ export function PieSliceLabel({
- {`${arc.data.category}`}
+ {`${getLabelDisplayValueFromDatum(arc.data)}`}
);
--
2.39.2
From 321a455d02e85407bd050c75853f3038422f9557 Mon Sep 17 00:00:00 2001
From: Jared He <66887902+jaredjhe@users.noreply.github.com>
Date: Wed, 7 Sep 2022 20:49:11 -0400
Subject: [PATCH 16/17] Code review fixes
---
components/PieChart.tsx | 22 +++++++++++-----------
pages/playground.tsx | 2 +-
2 files changed, 12 insertions(+), 12 deletions(-)
diff --git a/components/PieChart.tsx b/components/PieChart.tsx
index 1d89baa..536ccfc 100644
--- a/components/PieChart.tsx
+++ b/components/PieChart.tsx
@@ -9,27 +9,27 @@ interface PieChartProps {
data: PieChartData[];
/** Width of the entire graph, including labels, in pixels. */
width: number;
- /** Width of the outer ring of labels, in pixels. */
+ /** Width of the outer ring of labels, in pixels. Label text may be cut off if specified value is too small. */
labelWidth: number;
- /** Distance between pie slices, in pixels */
+ /** Distance between pie slices, in pixels. */
padRadius?: number;
- /** Distance of gap in center of pie graph, in pixels */
+ /** Distance of gap in center of pie graph, in pixels. */
innerRadius?: number;
- /** Font size of text inside the pie, in pixels*/
+ /** Font size of text inside the pie, in pixels. */
pieTextSize?: number;
- /** X-axis offset of the pie text, in pixels */
+ /** X-axis offset of the pie text, in pixels. */
pieTextXOffset?: number;
- /** Y-axis offset of the pie text, in pixels */
+ /** Y-axis offset of the pie text, in pixels. */
pieTextYOffset?: number;
- /** Accessor function to get value to display as pie text from datum */
+ /** Accessor function to get value to display as pie text from datum. */
getPieDisplayValueFromDatum?: (datum: PieChartData) => string;
- /** Font size of labels outside the pie, in pixels */
+ /** Font size of labels outside the pie, in pixels. */
labelTextSize?: number;
- /** X-axis offset of the label text, in pixels */
+ /** X-axis offset of the label text, in pixels. */
labelTextXOffset?: number;
- /** Y-axis offset of the label text, in pixels */
+ /** Y-axis offset of the label text, in pixels. */
labelTextYOffset?: number;
- /** Accessor function to get value to display as label text from datum */
+ /** Accessor function to get value to display as label text from datum. */
getLabelDisplayValueFromDatum?: (datum: PieChartData) => string;
className?: string;
}
diff --git a/pages/playground.tsx b/pages/playground.tsx
index c23fd9f..b36e9c7 100644
--- a/pages/playground.tsx
+++ b/pages/playground.tsx
@@ -17,7 +17,7 @@ export default function Home() {
return (
Playground
-
Show off your components here!
``
+
Show off your components here!
{""}
--
2.39.2
From 0bb0341b51a16723c45eced5cb4d7f3472d7ec0a Mon Sep 17 00:00:00 2001
From: Jared He <66887902+jaredjhe@users.noreply.github.com>
Date: Wed, 7 Sep 2022 22:07:14 -0400
Subject: [PATCH 17/17] Add the PieChart
---
pages/playground.tsx | 1 +
1 file changed, 1 insertion(+)
diff --git a/pages/playground.tsx b/pages/playground.tsx
index 0d9224d..426da06 100644
--- a/pages/playground.tsx
+++ b/pages/playground.tsx
@@ -10,6 +10,7 @@ import {
} from "data/mocks";
import React from "react";
+import { PieChart } from "@/components/PieChart";
import { QuotationCarousel } from "@/components/QuotationCarousel";
import { ColorPalette } from "../components/ColorPalette";
--
2.39.2