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