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;
|
||||
/** 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}
|
||||
/>
|
||||
)}
|
||||
</Pie>
|
||||
|
@ -71,7 +84,15 @@ export function PieChart({
|
|||
innerRadius={pieWidth}
|
||||
outerRadius={width * 0.5}
|
||||
>
|
||||
{(pie) => <PieSliceLabel {...pie} labelTextSize={labelTextSize} />}
|
||||
{(pie) => (
|
||||
<PieSliceLabel
|
||||
{...pie}
|
||||
labelTextSize={labelTextSize}
|
||||
labelTextXOffset={labelTextXOffset}
|
||||
labelTextYOffset={labelTextYOffset}
|
||||
getLabelDisplayValueFromDatum={getLabelDisplayValueFromDatum}
|
||||
/>
|
||||
)}
|
||||
</Pie>
|
||||
</Group>
|
||||
</svg>
|
||||
|
@ -82,6 +103,7 @@ type PieSliceProps<PieChartData> = ProvidedProps<PieChartData> & {
|
|||
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<PieChartData>) {
|
||||
return (
|
||||
<>
|
||||
|
@ -107,7 +130,7 @@ export function PieSlice({
|
|||
textAnchor="middle"
|
||||
fontSize={pieTextSize}
|
||||
>
|
||||
{`${arc.data.value}%`}
|
||||
{`${getPieDisplayValueFromDatum(arc.data)}`}
|
||||
</Text>
|
||||
</Group>
|
||||
);
|
||||
|
@ -118,12 +141,18 @@ export function PieSlice({
|
|||
|
||||
type PieSliceLabelProps<PieChartData> = ProvidedProps<PieChartData> & {
|
||||
labelTextSize: number;
|
||||
labelTextXOffset: number;
|
||||
labelTextYOffset: number;
|
||||
getLabelDisplayValueFromDatum: (datum: PieChartData) => string;
|
||||
};
|
||||
|
||||
export function PieSliceLabel({
|
||||
path,
|
||||
arcs,
|
||||
labelTextSize,
|
||||
labelTextXOffset,
|
||||
labelTextYOffset,
|
||||
getLabelDisplayValueFromDatum,
|
||||
}: PieSliceLabelProps<PieChartData>) {
|
||||
return (
|
||||
<>
|
||||
|
@ -136,12 +165,12 @@ export function PieSliceLabel({
|
|||
<path className={styles.labelPath} d={pathArc} />
|
||||
<Text
|
||||
className={styles.labelText}
|
||||
x={centroidX}
|
||||
y={centroidY}
|
||||
x={centroidX + labelTextXOffset}
|
||||
y={centroidY + labelTextYOffset}
|
||||
textAnchor="middle"
|
||||
fontSize={labelTextSize}
|
||||
>
|
||||
{`${arc.data.category}`}
|
||||
{`${getLabelDisplayValueFromDatum(arc.data)}`}
|
||||
</Text>
|
||||
</Group>
|
||||
);
|
||||
|
|
Loading…
Reference in New Issue