Fixed pie chart spacing issues
This commit is contained in:
parent
9eaaa4f35f
commit
52d52f9a95
|
@ -24,6 +24,8 @@ interface PieChartProps {
|
|||
labelTextXOffset?: number;
|
||||
/** Y-axis offset of the label text, in pixels. */
|
||||
labelTextYOffset?: number;
|
||||
/** The radial offset of the label text, in pixels. */
|
||||
labelTextRadialOffset?: number;
|
||||
/** If set, the minimum width of this graph */
|
||||
minWidth?: number;
|
||||
/** Accessor function to get value to display as label text from datum. */
|
||||
|
@ -46,6 +48,7 @@ export const PieChart = withTooltip<PieChartProps>(
|
|||
labelTextSize = 40,
|
||||
labelTextXOffset = 0,
|
||||
labelTextYOffset = 0,
|
||||
labelTextRadialOffset = -20,
|
||||
minWidth,
|
||||
getLabelDisplayValueFromDatum = (datum: PieChartData) =>
|
||||
`${datum.category}`,
|
||||
|
@ -116,6 +119,7 @@ export const PieChart = withTooltip<PieChartProps>(
|
|||
labelTextSize={labelTextSize}
|
||||
labelTextXOffset={labelTextXOffset}
|
||||
labelTextYOffset={labelTextYOffset}
|
||||
labelTextRadialOffset={labelTextRadialOffset}
|
||||
getLabelDisplayValueFromDatum={getLabelDisplayValueFromDatum}
|
||||
/>
|
||||
)}
|
||||
|
@ -139,6 +143,7 @@ type PieSliceLabelProps<PieChartData> = ProvidedProps<PieChartData> & {
|
|||
labelTextSize: number;
|
||||
labelTextXOffset: number;
|
||||
labelTextYOffset: number;
|
||||
labelTextRadialOffset: number;
|
||||
getLabelDisplayValueFromDatum: (datum: PieChartData) => string;
|
||||
};
|
||||
|
||||
|
@ -148,6 +153,7 @@ export function PieSliceLabel({
|
|||
labelTextSize,
|
||||
labelTextXOffset,
|
||||
labelTextYOffset,
|
||||
labelTextRadialOffset,
|
||||
getLabelDisplayValueFromDatum,
|
||||
}: PieSliceLabelProps<PieChartData>) {
|
||||
return (
|
||||
|
@ -161,9 +167,21 @@ export function PieSliceLabel({
|
|||
<path className={styles.labelPath} d={pathArc} />
|
||||
<Text
|
||||
className={styles.labelText}
|
||||
x={centroidX + labelTextXOffset}
|
||||
y={centroidY + labelTextYOffset}
|
||||
textAnchor="middle"
|
||||
x={
|
||||
(labelTextRadialOffset * centroidX) /
|
||||
Math.sqrt(centroidX ** 2 + centroidY ** 2) +
|
||||
centroidX +
|
||||
labelTextXOffset
|
||||
}
|
||||
y={
|
||||
(labelTextRadialOffset * centroidY) /
|
||||
Math.sqrt(centroidX ** 2 + centroidY ** 2) +
|
||||
centroidY +
|
||||
labelTextYOffset
|
||||
}
|
||||
textAnchor={
|
||||
centroidX > 100 ? "start" : centroidX < -100 ? "end" : "middle"
|
||||
}
|
||||
fontSize={labelTextSize}
|
||||
>
|
||||
{`${getLabelDisplayValueFromDatum(arc.data)}`}
|
||||
|
|
|
@ -72,7 +72,12 @@ export default function Demographics() {
|
|||
align="right"
|
||||
>
|
||||
<div className={styles.graphContainer}>
|
||||
<PieChart data={F2} {...pieChartProps(isMobile, pageWidth)} />
|
||||
<PieChart
|
||||
data={F2}
|
||||
{...pieChartProps(isMobile, pageWidth)}
|
||||
labelWidth={145}
|
||||
labelTextRadialOffset={-50}
|
||||
/>
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
|
@ -120,7 +125,11 @@ export default function Demographics() {
|
|||
align="right"
|
||||
>
|
||||
<div className={styles.graphContainer}>
|
||||
<PieChart data={F6} {...pieChartProps(isMobile, pageWidth)} />
|
||||
<PieChart
|
||||
data={F6}
|
||||
{...pieChartProps(isMobile, pageWidth)}
|
||||
labelTextRadialOffset={-30}
|
||||
/>
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
|
|
|
@ -32,7 +32,7 @@ export const barGraphMargin = {
|
|||
export const DefaultProp: { [key in PropName]: number } = {
|
||||
graphHeight: 500,
|
||||
labelSize: 24,
|
||||
labelWidth: 100,
|
||||
labelWidth: 120,
|
||||
};
|
||||
|
||||
export const barGraphProps = (isMobile: boolean, pageWidth: number) => {
|
||||
|
|
Loading…
Reference in New Issue