Added animations to gauge

Author: Eric Frick

src/components/CircularGauge/CircularGauge.js

@@ -18,6 +18,13 @@ class CircularGauge extends React.Component {
     svg.append("g")
        .attr("transform", "translate(" + this.props.width / 2 + "," + this.props.height / 2 + ")");
 
+    d3.select(this._node).select("g").append("path")
+      .attr("class", "arc chart-empty");
+
+    d3.select(this._node).select("g").append("path")
+      .attr("class", "arc chart-filled");
+
+
     this._redraw(radians);
   }
 
@@ -49,7 +56,7 @@ class CircularGauge extends React.Component {
   _redraw(radians) {
     console.log("CircularGauge._redraw()", radians);
 
-    d3.select(this._node).select("g").selectAll("path").remove();
+    // d3.select(this._node).select("g").selectAll("path").remove();
     d3.select(this._node).select("g").selectAll("text").remove();
 
     var arc1 = d3.arc()
@@ -63,17 +70,21 @@ class CircularGauge extends React.Component {
       .innerRadius( (this.props.width / 2) * 0.7)
       .outerRadius(this.props.width / 2)
       .padAngle(0.02)
-      .startAngle(radians)
+      .startAngle(- (Math.PI / 2))
       .endAngle(Math.PI / 2);
 
-    d3.select(this._node).select("g").append("path")
-      .attr("class", "arc chart-filled")
-      .attr("d", arc1);
+    var foreground = d3.select(this._node).select("g").select(".chart-filled");
+    var background = d3.select(this._node).select("g").select(".chart-empty");
 
-    d3.select(this._node).select("g").append("path")
-      .attr("class", "arc chart-empty")
-      .attr("d", arc2);
+    foreground.transition()
+              .duration(1200)
+              .attrTween("d", () => {
+                return (d) => {
+                  return arc1.endAngle(d3.interpolate(- (Math.PI / 2), radians)(d))();
+                }
+              });
 
+    d3.select(this._node).select("g").select(".chart-empty").attr("d", arc2);
     d3.select(this._node).select("g").append("text")
       .attr("transform", "translate(-30, -5)")
       .text(this.props.value + "%");

src/index.js

@@ -4,6 +4,7 @@ import TextField from './components/TextField';
 import Button from './components/Button';
 import CircularGauge from './components/CircularGauge';
 import Notification from './components/Notification';
+import Dropdown from './components/Dropdown';
 import './styles/base.scss';
 
 let app = document.getElementById('app');
@@ -15,14 +16,20 @@ class Test extends React.Component {
 
     this.state = {
       gauge: {
-        value: 10
+        value1: 40,
+        value2: 20,
+        value3: 60,
+        value4: 90
       }
     }
 
     setInterval(() => {
       this.setState({
         gauge: {
-          value: (Math.ceil(Math.random() * 100))
+          value1: (Math.ceil(Math.random() * 100)),
+          value2: (Math.ceil(Math.random() * 100)),
+          value3: (Math.ceil(Math.random() * 100)),
+          value4: (Math.ceil(Math.random() * 100))
         }
       });
 
@@ -32,9 +39,12 @@ class Test extends React.Component {
 
   render() {
     return (
-      <div>
-        <CircularGauge width={200} height={200} value={this.state.gauge.value} />
-      </div>
+      <span>
+        <CircularGauge width={200} height={200} value={this.state.gauge.value1} />
+        <CircularGauge width={200} height={200} value={this.state.gauge.value2} />
+        <CircularGauge width={200} height={200} value={this.state.gauge.value3} />
+        <CircularGauge width={200} height={200} value={this.state.gauge.value4} />
+      </span>
     )
   }
 }
@@ -58,14 +68,10 @@ ReactDOM.render(
     <Test />
     <br />
     <p>
-      Here's just a boring plain old paragraph with some text in it
       Veniam magna consequat pariatur ullamco quis duis tempor ex anim in pariatur est. Labore sint elit elit et dolore proident proident dolore aliqua incididunt enim. Magna aliquip Lorem sit cupidatat anim velit velit esse. Qui velit amet ex ut labore adipisicing eiusmod non aliqua consequat quis cillum nisi. Consectetur sint in irure voluptate dolore dolor nisi ut ea aute. Amet anim pariatur consectetur anim do aute sit nisi cillum esse minim ipsum est velit.
-
-Deserunt incididunt labore et dolor fugiat mollit dolore officia ea excepteur. Qui ut irure consectetur proident occaecat tempor sunt anim ex proident nisi. Ut veniam anim eu non anim reprehenderit ea deserunt. Nulla nostrud aute dolor incididunt aute dolore consequat ex sint voluptate. Officia irure pariatur velit consectetur velit deserunt voluptate consectetur labore laborum non culpa minim. Sint qui aliqua consectetur aute labore Lorem excepteur esse incididunt sit esse eiusmod ipsum do reprehenderit eiusmod.
-
-Quis est laboris enim fugiat amet duis velit pariatur dolor. Exercitation occaecat ea id est enim anim enim nostrud. Fugiat dolore sit incididunt eiusmod fugiat ex minim est. Laborum aute culpa anim nostrud enim laborum consectetur labore sit cupidatat esse Lorem. Non sit nostrud consectetur ut adipisicing laborum quis irure veniam quis irure proident consequat.
-
-Est incididunt nulla elit eiusmod do dolore cupidatat eiusmod mollit labore ex do aliqua nulla dolor. Consequat ullamco voluptate amet occaecat cillum duis deserunt ex nostrud ad. Culpa irure ea mollit tempor non sint eiusmod dolor ex adipisicing sint. Consequat veniam cupidatat culpa do deserunt et nisi consequat occaecat nostrud elit occaecat. Ea voluptate consectetur fugiat occaecat aliqua in minim ipsum aliquip duis fugiat do velit culpa est. Qui tempor ad officia cupidatat Lorem adipisicing sint duis irure amet commodo est amet aliquip est aute.
+      Deserunt incididunt labore et dolor fugiat mollit dolore officia ea excepteur. Qui ut irure consectetur proident occaecat tempor sunt anim ex proident nisi. Ut veniam anim eu non anim reprehenderit ea deserunt. Nulla nostrud aute dolor incididunt aute dolore consequat ex sint voluptate. Officia irure pariatur velit consectetur velit deserunt voluptate consectetur labore laborum non culpa minim. Sint qui aliqua consectetur aute labore Lorem excepteur esse incididunt sit esse eiusmod ipsum do reprehenderit eiusmod.
+      Quis est laboris enim fugiat amet duis velit pariatur dolor. Exercitation occaecat ea id est enim anim enim nostrud. Fugiat dolore sit incididunt eiusmod fugiat ex minim est. Laborum aute culpa anim nostrud enim laborum consectetur labore sit cupidatat esse Lorem. Non sit nostrud consectetur ut adipisicing laborum quis irure veniam quis irure proident consequat.
+      Est incididunt nulla elit eiusmod do dolore cupidatat eiusmod mollit labore ex do aliqua nulla dolor. Consequat ullamco voluptate amet occaecat cillum duis deserunt ex nostrud ad. Culpa irure ea mollit tempor non sint eiusmod dolor ex adipisicing sint. Consequat veniam cupidatat culpa do deserunt et nisi consequat occaecat nostrud elit occaecat. Ea voluptate consectetur fugiat occaecat aliqua in minim ipsum aliquip duis fugiat do velit culpa est. Qui tempor ad officia cupidatat Lorem adipisicing sint duis irure amet commodo est amet aliquip est aute.
     </p>
     <Notification message="A longer notification you received some email" open={true} duration={2} />
   </div>,