Cleanup
This commit is contained in:
parent
b931afd7cc
commit
dfa31a0bd7
|
@ -9,9 +9,8 @@
|
||||||
.pieText,
|
.pieText,
|
||||||
.labelText {
|
.labelText {
|
||||||
fill: white;
|
fill: white;
|
||||||
font-size: 20px;
|
font-size: 40px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
font-family: "Inconsolata", "sans-serif";
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pieText {
|
.pieText {
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import { Group } from "@visx/group";
|
import { Group } from "@visx/group";
|
||||||
import { Arc } from "@visx/shape";
|
|
||||||
import Pie, { ProvidedProps } from "@visx/shape/lib/shapes/Pie";
|
import Pie, { ProvidedProps } from "@visx/shape/lib/shapes/Pie";
|
||||||
import React, { useState } from "react";
|
import React from "react";
|
||||||
|
|
||||||
import styles from "./PieChart.module.css";
|
import styles from "./PieChart.module.css";
|
||||||
|
|
||||||
|
@ -28,8 +27,8 @@ export function PieChart({ width, textPadding, ...props }: PieChartProps) {
|
||||||
pieValue={(d: PieChartData) => d.value}
|
pieValue={(d: PieChartData) => d.value}
|
||||||
cornerRadius={10}
|
cornerRadius={10}
|
||||||
padAngle={0.075}
|
padAngle={0.075}
|
||||||
padRadius={width * 0.7}
|
padRadius={width * 0.35}
|
||||||
innerRadius={width * 0.03}
|
innerRadius={width * 0.015}
|
||||||
outerRadius={pieWidth}
|
outerRadius={pieWidth}
|
||||||
>
|
>
|
||||||
{(pie) => <PieSlices {...pie} isLabel={false} />}
|
{(pie) => <PieSlices {...pie} isLabel={false} />}
|
||||||
|
@ -58,7 +57,7 @@ export function PieSlices({ isLabel, ...props }: PieSlicesProps<PieChartData>) {
|
||||||
<>
|
<>
|
||||||
{props.arcs.map((arc) => {
|
{props.arcs.map((arc) => {
|
||||||
const [centroidX, centroidY] = props.path.centroid(arc);
|
const [centroidX, centroidY] = props.path.centroid(arc);
|
||||||
const pathArc = props.path(arc);
|
const pathArc = props.path(arc) as string;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<g className={styles.group} key={`arc-${arc.data.category}`}>
|
<g className={styles.group} key={`arc-${arc.data.category}`}>
|
||||||
|
|
|
@ -47,6 +47,6 @@ export const mockPieData = [
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
category: "Cuckoo",
|
category: "Cuckoo",
|
||||||
value: 19,
|
value: 20,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
|
@ -9,7 +9,7 @@ export default function Home() {
|
||||||
<h1>Playground</h1>
|
<h1>Playground</h1>
|
||||||
<p>Show off your components here!</p>
|
<p>Show off your components here!</p>
|
||||||
<div style={{ padding: "30px" }}>
|
<div style={{ padding: "30px" }}>
|
||||||
<PieChart data={mockPieData} width={600} textPadding={100} />
|
<PieChart data={mockPieData} width={800} textPadding={200} />
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue