Skip to content

Commit

Permalink
Fix: Scale the pie chart arc values
Browse files Browse the repository at this point in the history
Fix: Scale the pie chart arc values
  • Loading branch information
mmioana committed Oct 29, 2024
1 parent ffc25c8 commit dd07b23
Show file tree
Hide file tree
Showing 5 changed files with 92 additions and 1 deletion.
1 change: 1 addition & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -156,12 +156,13 @@
"@colony/redux-promise-listener": "^1.2.0",
"@colony/unicode-confusables-noascii": "^0.1.2",
"@hookform/resolvers": "^2.9.10",
"@magicbell/react-headless": "^5.0.1",
"@nivo/arcs": "^0.87.0",
"@nivo/axes": "^0.87.0",
"@nivo/bar": "^0.87.0",
"@nivo/core": "^0.87.0",
"@nivo/pie": "^0.87.0",
"@nivo/tooltip": "^0.87.0",
"@magicbell/react-headless": "^5.0.1",
"@phosphor-icons/react": "^2.1.5",
"@popperjs/core": "^2.3.3",
"@tanstack/react-table": "^8.10.0",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,13 @@ export const summaryLegendColor = {
default: 'bg-blue-400',
};

export const pieChartArcsLayerConfig = {
startAngle: 0,
endAngle: 2 * Math.PI,
borderColor: 'none',
borderWidth: 0,
};

export const pieChartConfig: Partial<PieSvgProps<ReputationChartDataItem>> = {
colors: ({ data }) => `var(${data.color})`,
innerRadius: 0.75,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { useReputationChartContext } from '~context/ReputationChartContext/Reput
import { pieChartConfig } from '../consts.ts';
import { type ReputationChartDataItem } from '../types.ts';

import { ChartCustomArcsLayer } from './ChartCustomArcsLayer.tsx';
import { ChartLoadingLayer } from './ChartLoadingLayer.tsx';
import { ChartTooltip } from './ChartTooltip.tsx';
import Legend from './Legend.tsx';
Expand All @@ -20,6 +21,7 @@ interface ChartProps {

export const Chart: FC<ChartProps> = ({ data, emptyChartItem, isLoading }) => {
const { setActiveLegendItem } = useReputationChartContext();

return (
<>
<div className="relative mb-3.5 mt-5 flex h-[136px] w-full flex-shrink-0 items-center justify-center">
Expand All @@ -30,6 +32,7 @@ export const Chart: FC<ChartProps> = ({ data, emptyChartItem, isLoading }) => {
isInteractive={!!data.length}
onActiveIdChange={setActiveLegendItem}
tooltip={ChartTooltip}
layers={[ChartCustomArcsLayer]}
/>
</div>

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
import { ArcsLayer } from '@nivo/arcs';
import { type ComputedDatum, type PieCustomLayerProps } from '@nivo/pie';
import { useTooltip } from '@nivo/tooltip';
import { pie as d3Pie } from 'd3-shape';
import React, { type FC } from 'react';

import { useReputationChartContext } from '~context/ReputationChartContext/ReputationChartContext.ts';
import { ChartCustomTooltip } from '~v5/frame/ColonyHome/partials/ChartCustomTooltip/ChartCustomTooltip.tsx';

import { pieChartArcsLayerConfig } from '../consts.ts';
import { type ReputationChartDataItem } from '../types.ts';

interface ChartCustomBarGroupLayerProps
extends PieCustomLayerProps<ReputationChartDataItem> {}

export const ChartCustomArcsLayer: FC<ChartCustomBarGroupLayerProps> = ({
dataWithArc,
arcGenerator,
centerX,
centerY,
}) => {
const { showTooltipFromEvent, hideTooltip } = useTooltip();
const { setActiveLegendItem, resetActiveLegendItem } =
useReputationChartContext();

const getScaledPieArcValues = d3Pie<
Omit<ComputedDatum<ReputationChartDataItem>, 'arc' | 'fill'>
>()
.value((d) => d.value * 100)
.startAngle(pieChartArcsLayerConfig.startAngle)
.endAngle(pieChartArcsLayerConfig.endAngle)
// This needs to be smaller than the one used for nivo due to library internal adjustments
.padAngle(0.15);

const scaledPieArcValues = getScaledPieArcValues([...dataWithArc]);

const updatedData = dataWithArc.map((datum, index) => ({
...datum,
arc: {
...datum.arc,
startAngle: scaledPieArcValues[index].startAngle,
endAngle: scaledPieArcValues[index].endAngle,
},
}));

const mouseInteractionHandler = (datum, event) => {
setActiveLegendItem(datum.id);
showTooltipFromEvent(
<ChartCustomTooltip>
{datum.label} {datum.value}%
</ChartCustomTooltip>,
event,
);
};

const mouseLeaveHandler = () => {
hideTooltip();
resetActiveLegendItem();
};

const toggleTooltipHandler = (datum, event) => {
mouseInteractionHandler(datum, event);
};

return (
<ArcsLayer
center={[centerX, centerY]}
data={updatedData}
arcGenerator={arcGenerator}
borderWidth={pieChartArcsLayerConfig.borderWidth}
borderColor={pieChartArcsLayerConfig.borderColor}
transitionMode="startAngle"
onClick={toggleTooltipHandler}
onMouseEnter={mouseInteractionHandler}
onMouseMove={mouseInteractionHandler}
onMouseLeave={mouseLeaveHandler}
/>
);
};

0 comments on commit dd07b23

Please sign in to comment.