NodeGraph: Fix rendering issues when values of arc are over 1 (#57460)

This commit is contained in:
Andrej Ocenas 2022-10-24 11:28:49 +02:00 committed by GitHub
parent 6ee69853dc
commit 67aa99af78
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -123,7 +123,7 @@ export const Node = memo(function Node(props: {
*/
function ColorCircle(props: { node: NodeDatum }) {
const { node } = props;
const fullStat = node.arcSections.find((s) => s.values.get(node.dataFrameRowIndex) === 1);
const fullStat = node.arcSections.find((s) => s.values.get(node.dataFrameRowIndex) >= 1);
const theme = useTheme2();
if (fullStat) {
@ -159,6 +159,7 @@ function ColorCircle(props: { node: NodeDatum }) {
(acc, section) => {
const color = section.config.color?.fixedColor || '';
const value = section.values.get(node.dataFrameRowIndex);
const el = (
<ArcSection
key={color}
@ -166,7 +167,13 @@ function ColorCircle(props: { node: NodeDatum }) {
x={node.x!}
y={node.y!}
startPercent={acc.percent}
percent={value}
percent={
value + acc.percent > 1
? // If the values aren't correct and add up to more than 100% lets still render correctly the amounts we
// already have and cap it at 100%
1 - acc.percent
: value
}
color={theme.visualization.getColorByName(color)}
strokeWidth={2}
/>