Refactor into PieSlice and PieSliceLabel
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
29fdbffab1
commit
28a39696db
|
@ -17,12 +17,20 @@ interface PieChartProps {
|
||||||
innerRadius?: number;
|
innerRadius?: number;
|
||||||
/** Font size of text inside the pie, in pixels*/
|
/** Font size of text inside the pie, in pixels*/
|
||||||
pieTextSize?: number;
|
pieTextSize?: number;
|
||||||
/** Font size of labels outside the pie, in pixels */
|
|
||||||
labelTextSize?: number;
|
|
||||||
/** X-axis offset of the pie text, in pixels */
|
/** X-axis offset of the pie text, in pixels */
|
||||||
pieTextXOffset?: number;
|
pieTextXOffset?: number;
|
||||||
/** Y-axis offset of the pie text, in pixels */
|
/** Y-axis offset of the pie text, in pixels */
|
||||||
pieTextYOffset?: number;
|
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;
|
className?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -38,9 +46,13 @@ export function PieChart({
|
||||||
padRadius = width * 0.35,
|
padRadius = width * 0.35,
|
||||||
innerRadius = width * 0.015,
|
innerRadius = width * 0.015,
|
||||||
pieTextSize = 40,
|
pieTextSize = 40,
|
||||||
labelTextSize = 40,
|
|
||||||
pieTextXOffset = 0,
|
pieTextXOffset = 0,
|
||||||
pieTextYOffset = 10,
|
pieTextYOffset = 10,
|
||||||
|
getPieDisplayValueFromDatum = (datum: PieChartData) => `${datum.value}%`,
|
||||||
|
labelTextSize = 40,
|
||||||
|
labelTextXOffset = 0,
|
||||||
|
labelTextYOffset = 0,
|
||||||
|
getLabelDisplayValueFromDatum = (datum: PieChartData) => `${datum.category}`,
|
||||||
className,
|
className,
|
||||||
}: PieChartProps) {
|
}: PieChartProps) {
|
||||||
const pieWidth = width * 0.5 - labelWidth;
|
const pieWidth = width * 0.5 - labelWidth;
|
||||||
|
@ -62,6 +74,7 @@ export function PieChart({
|
||||||
pieTextSize={pieTextSize}
|
pieTextSize={pieTextSize}
|
||||||
pieTextXOffset={pieTextXOffset}
|
pieTextXOffset={pieTextXOffset}
|
||||||
pieTextYOffset={pieTextYOffset}
|
pieTextYOffset={pieTextYOffset}
|
||||||
|
getPieDisplayValueFromDatum={getPieDisplayValueFromDatum}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</Pie>
|
</Pie>
|
||||||
|
@ -71,7 +84,15 @@ export function PieChart({
|
||||||
innerRadius={pieWidth}
|
innerRadius={pieWidth}
|
||||||
outerRadius={width * 0.5}
|
outerRadius={width * 0.5}
|
||||||
>
|
>
|
||||||
{(pie) => <PieSliceLabel {...pie} labelTextSize={labelTextSize} />}
|
{(pie) => (
|
||||||
|
<PieSliceLabel
|
||||||
|
{...pie}
|
||||||
|
labelTextSize={labelTextSize}
|
||||||
|
labelTextXOffset={labelTextXOffset}
|
||||||
|
labelTextYOffset={labelTextYOffset}
|
||||||
|
getLabelDisplayValueFromDatum={getLabelDisplayValueFromDatum}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</Pie>
|
</Pie>
|
||||||
</Group>
|
</Group>
|
||||||
</svg>
|
</svg>
|
||||||
|
@ -82,6 +103,7 @@ type PieSliceProps<PieChartData> = ProvidedProps<PieChartData> & {
|
||||||
pieTextSize: number;
|
pieTextSize: number;
|
||||||
pieTextXOffset: number;
|
pieTextXOffset: number;
|
||||||
pieTextYOffset: number;
|
pieTextYOffset: number;
|
||||||
|
getPieDisplayValueFromDatum: (datum: PieChartData) => string;
|
||||||
};
|
};
|
||||||
|
|
||||||
export function PieSlice({
|
export function PieSlice({
|
||||||
|
@ -90,6 +112,7 @@ export function PieSlice({
|
||||||
pieTextSize,
|
pieTextSize,
|
||||||
pieTextXOffset,
|
pieTextXOffset,
|
||||||
pieTextYOffset,
|
pieTextYOffset,
|
||||||
|
getPieDisplayValueFromDatum,
|
||||||
}: PieSliceProps<PieChartData>) {
|
}: PieSliceProps<PieChartData>) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
@ -107,7 +130,7 @@ export function PieSlice({
|
||||||
textAnchor="middle"
|
textAnchor="middle"
|
||||||
fontSize={pieTextSize}
|
fontSize={pieTextSize}
|
||||||
>
|
>
|
||||||
{`${arc.data.value}%`}
|
{`${getPieDisplayValueFromDatum(arc.data)}`}
|
||||||
</Text>
|
</Text>
|
||||||
</Group>
|
</Group>
|
||||||
);
|
);
|
||||||
|
@ -118,12 +141,18 @@ export function PieSlice({
|
||||||
|
|
||||||
type PieSliceLabelProps<PieChartData> = ProvidedProps<PieChartData> & {
|
type PieSliceLabelProps<PieChartData> = ProvidedProps<PieChartData> & {
|
||||||
labelTextSize: number;
|
labelTextSize: number;
|
||||||
|
labelTextXOffset: number;
|
||||||
|
labelTextYOffset: number;
|
||||||
|
getLabelDisplayValueFromDatum: (datum: PieChartData) => string;
|
||||||
};
|
};
|
||||||
|
|
||||||
export function PieSliceLabel({
|
export function PieSliceLabel({
|
||||||
path,
|
path,
|
||||||
arcs,
|
arcs,
|
||||||
labelTextSize,
|
labelTextSize,
|
||||||
|
labelTextXOffset,
|
||||||
|
labelTextYOffset,
|
||||||
|
getLabelDisplayValueFromDatum,
|
||||||
}: PieSliceLabelProps<PieChartData>) {
|
}: PieSliceLabelProps<PieChartData>) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
@ -136,12 +165,12 @@ export function PieSliceLabel({
|
||||||
<path className={styles.labelPath} d={pathArc} />
|
<path className={styles.labelPath} d={pathArc} />
|
||||||
<Text
|
<Text
|
||||||
className={styles.labelText}
|
className={styles.labelText}
|
||||||
x={centroidX}
|
x={centroidX + labelTextXOffset}
|
||||||
y={centroidY}
|
y={centroidY + labelTextYOffset}
|
||||||
textAnchor="middle"
|
textAnchor="middle"
|
||||||
fontSize={labelTextSize}
|
fontSize={labelTextSize}
|
||||||
>
|
>
|
||||||
{`${arc.data.category}`}
|
{`${getLabelDisplayValueFromDatum(arc.data)}`}
|
||||||
</Text>
|
</Text>
|
||||||
</Group>
|
</Group>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue