fix: Fixed issue with thresholds.

Author: daves-weblab

src/utils/metricUtils.ts

@@ -36,18 +36,22 @@ export function thresholdValue(max: number, percentage: number): number {
   return (percentage * max) / 100
 }
 
-export function useThresholds(defaultColor: Color, max: number, useDefaultThresholds = false) {
+export function useThresholds(
+  defaultColor: Color,
+  max: number,
+  useDefaultThresholds = false
+) {
   const warningThreshold = useNumberField({
     field: 'warning_threshold',
-    defaultValue: 50
+    defaultValue: useDefaultThresholds ? 50 : 0
   })
   const warningColor = useColorField({
     field: 'warning_color',
     defaultColor: useDefaultThresholds ? '#ffff1e' : undefined
   })
   const criticalThreshold = useNumberField({
     field: 'critical_threshold',
-    defaultValue: 90
+    defaultValue: useDefaultThresholds ? 90 : 0
   })
   const criticalColor = useColorField({
     field: 'critical_color',
@@ -65,11 +69,11 @@ export function useThresholds(defaultColor: Color, max: number, useDefaultThresh
     getColor(value: number) {
       let color = defaultColor
 
-      if (value >= warningValue && value < criticalValue) {
+      if (warningValue && warningColor.toRgbaCss() && value >= warningValue) {
         color = warningColor
       }
 
-      if (value >= criticalValue) {
+      if (criticalValue && criticalColor.toRgbaCss() && value >= criticalValue) {
         color = criticalColor
       }
 

src/widgets/DonutChart/DonutChart.tsx

@@ -21,7 +21,7 @@ const DonutChart: FunctionComponent = () => {
     radius,
     value
   } = useDefaultPieFields()
-  const { getColor } = useThresholds(color, max)
+  const { getColor } = useThresholds(color, max, false)
   const metricConfigured = useIsMetricFieldConfigured({ field: 'metric' })
 
   if (!metricConfigured) {