From da99a118798755c8ff0a1e18f8066e126085d112 Mon Sep 17 00:00:00 2001
From: "madhusudan.byregowda@mendix.com" <madhusudan.byregowda@mendix.com>
Date: Tue, 13 Aug 2019 15:55:38 +0200
Subject: [PATCH] added overshoot value color feature to the widget

---
 src/ProgressCircle.webmodeler.ts          |  1 +
 src/ProgressCircle.xml                    | 14 ++++++++++++++
 src/components/ProgressCircle.ts          |  6 ++++--
 src/components/ProgressCircleContainer.ts |  2 ++
 4 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/ProgressCircle.webmodeler.ts b/src/ProgressCircle.webmodeler.ts
index 2286a25..c0fd537 100644
--- a/src/ProgressCircle.webmodeler.ts
+++ b/src/ProgressCircle.webmodeler.ts
@@ -24,6 +24,7 @@ export class preview extends Component<ContainerProps, {}> {
             displayTextValue: this.getDisplayTextValue(),
             maximumValue: props.staticMaximumValue,
             positiveValueColor: props.positiveValueColor,
+            overshootValueColor: props.overshootValueColor,
             style: ProgressCircleContainer.parseStyle(props.style),
             textSize: props.textSize,
             value: props.staticValue
diff --git a/src/ProgressCircle.xml b/src/ProgressCircle.xml
index 29adc82..da0d684 100644
--- a/src/ProgressCircle.xml
+++ b/src/ProgressCircle.xml
@@ -106,6 +106,20 @@
                 <enumerationValue key="danger">Danger</enumerationValue>
             </enumerationValues>
         </property>
+        <property key="overshootValueColor" type="enumeration" defaultValue="danger">
+            <caption>Overshoot style</caption>
+            <category>Appearance</category>
+            <description>Color of the circle with a overshooted progress value</description>
+            <enumerationValues>
+                <enumerationValue key="default">Default</enumerationValue>
+                <enumerationValue key="primary">Primary</enumerationValue>
+                <enumerationValue key="inverse">Inverse</enumerationValue>
+                <enumerationValue key="info">Info</enumerationValue>
+                <enumerationValue key="success">Success</enumerationValue>
+                <enumerationValue key="warning">Warning</enumerationValue>
+                <enumerationValue key="danger">Danger</enumerationValue>
+            </enumerationValues>
+        </property>
         <property key="circleThickness" type="integer" defaultValue="6">
             <caption>Circle thickness</caption>
             <category>Appearance</category>
diff --git a/src/components/ProgressCircle.ts b/src/components/ProgressCircle.ts
index dcf8b66..8e23d0c 100644
--- a/src/components/ProgressCircle.ts
+++ b/src/components/ProgressCircle.ts
@@ -17,6 +17,7 @@ export interface ProgressCircleProps {
     negativeValueColor?: BootstrapStyle;
     onClickAction?: () => void;
     positiveValueColor?: BootstrapStyle;
+    overshootValueColor?: BootstrapStyle;
     style?: object;
     displayText?: DisplayText;
     textSize?: ProgressTextSize;
@@ -63,7 +64,7 @@ export class ProgressCircle extends Component<ProgressCircleProps, { alertMessag
     }
 
     render() {
-        const { maximumValue, textSize, negativeValueColor, positiveValueColor, value } = this.props;
+        const { maximumValue, textSize, negativeValueColor, positiveValueColor, overshootValueColor, value } = this.props;
         const textClass = textSize === "text" ? "mx-text" : textSize;
         const validMax = typeof maximumValue === "number" ? maximumValue > 0 : false;
         return createElement("div",
@@ -78,7 +79,8 @@ export class ProgressCircle extends Component<ProgressCircleProps, { alertMessag
                     this.progressCircleColorClass,
                     {
                         [`widget-progress-circle-${negativeValueColor}`]: value ? value < 0 : false,
-                        [`widget-progress-circle-${positiveValueColor}`]: value ? value > 0 : false,
+                        [`widget-progress-circle-${positiveValueColor}`]: value ? value > 0 && value < (maximumValue || 0) : false,
+                        [`widget-progress-circle-${overshootValueColor}`]: value ? value >= (maximumValue || 0) : false,
                         "widget-progress-circle-alert": !validMax,
                         "widget-progress-circle-clickable": this.props.clickable
                     }
diff --git a/src/components/ProgressCircleContainer.ts b/src/components/ProgressCircleContainer.ts
index 1db4299..b4b49b0 100644
--- a/src/components/ProgressCircleContainer.ts
+++ b/src/components/ProgressCircleContainer.ts
@@ -23,6 +23,7 @@ export interface ContainerProps extends WrapperProps {
     page?: string;
     progressAttribute: string;
     positiveValueColor: BootstrapStyle;
+    overshootValueColor: BootstrapStyle;
     textSize: ProgressTextSize;
     openPageAs: PageLocation;
     staticValue: number;
@@ -88,6 +89,7 @@ export default class ProgressCircleContainer extends Component<ContainerProps, C
             negativeValueColor: this.props.negativeValueColor,
             onClickAction: this.handleOnClick,
             positiveValueColor: this.props.positiveValueColor,
+            overshootValueColor: this.props.overshootValueColor,
             style: ProgressCircleContainer.parseStyle(this.props.style),
             textSize: this.props.textSize,
             value: this.props.progressAttribute ? this.state.progressValue || 0 : this.props.staticValue