From df1cd98a22f2efeb7d79cbc511ff89e0dee4a58a Mon Sep 17 00:00:00 2001
From: Kevin Qi <iqnivek@gmail.com>
Date: Sun, 29 May 2016 18:05:45 -0400
Subject: [PATCH] WIP on making colors configurably change depending on
 percentage

---
 demo/demo.jsx  |  6 +++++-
 src/index.jsx  |  2 +-
 src/styles.css | 16 +++++++++++++++-
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/demo/demo.jsx b/demo/demo.jsx
index e92d796..fe207d0 100644
--- a/demo/demo.jsx
+++ b/demo/demo.jsx
@@ -40,7 +40,7 @@ class ChangingProgressbar extends React.Component {
   }
 
   render() {
-    return <CircularProgressbar percentage={this.state.percentage} />;
+    return <CircularProgressbar {...this.props} percentage={this.state.percentage} />;
   }
 }
 
@@ -60,6 +60,10 @@ class Demo extends React.Component {
         <div className="row m-b-3">
           <div className="col-xs-6 offset-xs-3 col-md-2 offset-md-5">
             <ChangingProgressbar />
+
+            <ChangingProgressbar
+              classForPercentage={(percentage) => (percentage < 50 ? 'low' : 'high')}
+            />
           </div>
         </div>
 
diff --git a/src/index.jsx b/src/index.jsx
index 80eac64..fc5f7be 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -21,7 +21,7 @@ class CircularProgressbar extends React.Component {
 
     return (
       <svg
-        className="CircularProgressbar"
+        className={`CircularProgressbar ${this.props.classForPercentage ? this.props.classForPercentage(this.percentage) : ''}`}
         viewBox="0 0 100 100"
       >
         <path
diff --git a/src/styles.css b/src/styles.css
index 2b56fa9..745d259 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -5,7 +5,7 @@
  */
 
 .CircularProgressbar .CircularProgressbar-path {
-  stroke: #3c3;
+  stroke: #3e98c7;
   stroke-linecap: round;
   transition: stroke-dashoffset 0.5s ease 0s;
 }
@@ -15,7 +15,21 @@
 }
 
 .CircularProgressbar .CircularProgressbar-text {
+  fill: #3e98c7;
   font-size: 20px;
   dominant-baseline: middle;
   text-anchor: middle;
 }
+
+.CircularProgressbar.low .CircularProgressbar-path {
+  stroke: #00f;
+}
+.CircularProgressbar.low .CircularProgressbar-text {
+  fill: #00f;
+}
+.CircularProgressbar.low .CircularProgressbar-path {
+  stroke: #f00;
+}
+.CircularProgressbar.high .CircularProgressbar-text {
+  fill: #f00;
+}