From 1573285f21b138d0154faa231de4e5c5b27befce Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Mon, 24 Oct 2022 14:59:20 +0200
Subject: [PATCH]  NodeGraph: Fix rendering issues when values of arc are over
 1 (#57460) (#57513)

(cherry picked from commit 67aa99af78e5f2c98e840931c9dd1cfbf02261fd)

Co-authored-by: Andrej Ocenas <mr.ocenas@gmail.com>
---
 public/app/plugins/panel/nodeGraph/Node.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/public/app/plugins/panel/nodeGraph/Node.tsx b/public/app/plugins/panel/nodeGraph/Node.tsx
index 1dcdf97828c..f22b031fb1f 100644
--- a/public/app/plugins/panel/nodeGraph/Node.tsx
+++ b/public/app/plugins/panel/nodeGraph/Node.tsx
@@ -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}
         />