From dd07b231dd6425d4a6290208bf78e22f56e95e56 Mon Sep 17 00:00:00 2001 From: Mihaela-Ioana Mot <32430018+mmioana@users.noreply.github.com> Date: Tue, 29 Oct 2024 23:09:47 +0100 Subject: [PATCH] Fix: Scale the pie chart arc values Fix: Scale the pie chart arc values --- package-lock.json | 1 + package.json | 3 +- .../partials/ReputationChart/consts.ts | 7 ++ .../ReputationChart/partials/Chart.tsx | 3 + .../partials/ChartCustomArcsLayer.tsx | 79 +++++++++++++++++++ 5 files changed, 92 insertions(+), 1 deletion(-) create mode 100644 src/components/v5/frame/ColonyHome/partials/ReputationChart/partials/ChartCustomArcsLayer.tsx diff --git a/package-lock.json b/package-lock.json index d290b4ab5f..fcd345b18e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "@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", diff --git a/package.json b/package.json index ab0995bbff..8865cd79a3 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/v5/frame/ColonyHome/partials/ReputationChart/consts.ts b/src/components/v5/frame/ColonyHome/partials/ReputationChart/consts.ts index 6eda8318e1..ca64ded13e 100644 --- a/src/components/v5/frame/ColonyHome/partials/ReputationChart/consts.ts +++ b/src/components/v5/frame/ColonyHome/partials/ReputationChart/consts.ts @@ -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> = { colors: ({ data }) => `var(${data.color})`, innerRadius: 0.75, diff --git a/src/components/v5/frame/ColonyHome/partials/ReputationChart/partials/Chart.tsx b/src/components/v5/frame/ColonyHome/partials/ReputationChart/partials/Chart.tsx index 9c8fec1f30..976fdf8809 100644 --- a/src/components/v5/frame/ColonyHome/partials/ReputationChart/partials/Chart.tsx +++ b/src/components/v5/frame/ColonyHome/partials/ReputationChart/partials/Chart.tsx @@ -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'; @@ -20,6 +21,7 @@ interface ChartProps { export const Chart: FC = ({ data, emptyChartItem, isLoading }) => { const { setActiveLegendItem } = useReputationChartContext(); + return ( <>
@@ -30,6 +32,7 @@ export const Chart: FC = ({ data, emptyChartItem, isLoading }) => { isInteractive={!!data.length} onActiveIdChange={setActiveLegendItem} tooltip={ChartTooltip} + layers={[ChartCustomArcsLayer]} />
diff --git a/src/components/v5/frame/ColonyHome/partials/ReputationChart/partials/ChartCustomArcsLayer.tsx b/src/components/v5/frame/ColonyHome/partials/ReputationChart/partials/ChartCustomArcsLayer.tsx new file mode 100644 index 0000000000..cc6b43fa88 --- /dev/null +++ b/src/components/v5/frame/ColonyHome/partials/ReputationChart/partials/ChartCustomArcsLayer.tsx @@ -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 {} + +export const ChartCustomArcsLayer: FC = ({ + dataWithArc, + arcGenerator, + centerX, + centerY, +}) => { + const { showTooltipFromEvent, hideTooltip } = useTooltip(); + const { setActiveLegendItem, resetActiveLegendItem } = + useReputationChartContext(); + + const getScaledPieArcValues = d3Pie< + Omit, '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( + + {datum.label} {datum.value}% + , + event, + ); + }; + + const mouseLeaveHandler = () => { + hideTooltip(); + resetActiveLegendItem(); + }; + + const toggleTooltipHandler = (datum, event) => { + mouseInteractionHandler(datum, event); + }; + + return ( + + ); +};