Metric slider with loading bar and captions.

OasisDataPlatform/client/src/MetricSlider.css

@@ -0,0 +1,85 @@
+/*
+#E5E9F2
+*/
+
+.holder {
+}
+
+.metric-text {
+    color: #47525E;
+    font-family: Lato;
+    font-size: 24px;
+    font-weight: 700;
+    line-height: 34px;
+    width: 187px;
+    text-align: left;
+    float:left;
+  }
+
+.goal-text {
+    color: #47525E;
+  font-family: Lato;
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 34px;
+  width: 124px;
+  text-align: center;
+  float:left;
+  overflow:hidden;
+  margin-right:142px;
+}
+
+.bar {
+  background-color: #E5E9F2;
+  width: 407.23px;
+  height: 8px;
+  border: 1px;
+  float:left;
+  overflow:hidden;
+  margin-right:-20px;
+  margin-top:14px;
+}
+
+.filler {
+    background: #8190A5;
+    height: 100%;
+    /* transition: width .2s ease-in; */
+}
+
+.percentage-text {
+    color: #47525E;
+  font-family: Lato;
+  font-size: 26px;
+  font-weight: 400;
+  line-height: 33px;
+  width: 124px;
+  float:left;
+  overflow:hidden;
+}
+
+.no-check {
+  background-color: #FFFFFF;
+  border: 2px solid #8492A6;
+  border-radius: 100%;
+  width: 22px;
+  height: 22px;
+  overflow: hidden;
+}
+
+.check {
+    background-color: #47525E;
+  border: 2px solid #47525E;
+  border-radius: 100%;
+  width: 22px;
+  height: 22px;
+  justify-content: center;
+  overflow: hidden;
+}
+
+
+.checkmark {
+    background-color: rgba(255, 255, 255, 0);
+  width: 11.88px;
+  height: 9.5px;
+  padding-bottom: 0px;
+}

OasisDataPlatform/client/src/MetricSlider.js

@@ -0,0 +1,76 @@
+import React, {Component} from "react";
+import "./MetricSlider.css";
+const checkImg = require("./check.png");
+
+//Takes 5 arguments: title, total, current, goal, showPercents
+// title is name of metric
+// total is the overall number of students
+// current is the number currently reached
+// goal is the desired number of kids to reach
+// showPercents is false to show explicit values of current/goal/total.
+//          it is true to show current percentage/goal percentage.
+
+class MetricSlider extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            title: this.props.title,
+            current: this.props.current,
+            goal: this.props.goal,
+            total: this.props.total,
+            showPercents: this.props.showPercents
+        }
+    }
+
+    render(){
+        return(
+            <div className="holder">
+                <div className="metric-text">{this.state.title}</div>
+                <GoalText
+                     current={this.state.current}
+                     goal={this.state.goal}
+                     total={this.state.total}
+                     showPercents={this.state.showPercents}/>
+
+
+                <Bar percentage={this.state.current/this.state.goal*100}/>
+                <div className="percentage-text">{(this.state.current/this.state.goal*100).toFixed(0)}%</div>
+                <CheckBox percentage={this.state.current/this.state.goal*100}/>
+            </div>
+        )
+    }
+}
+const Bar = (props) => {
+    return (
+        <div className="bar">
+            <Filler percentage={props.percentage}/>
+        </div>
+    )
+}
+const Filler = (props) => {
+    return <div className="filler" style={{width: `${props.percentage}%`}}/>
+}
+
+const CheckBox = (props) => {
+    if(props.percentage===100) {
+        return (<div className="check">
+            <img src={checkImg} className="checkmark" alt="check"/>
+        </div>)
+    }
+    else {
+        return <div className="no-check"/>
+    }
+}
+
+const GoalText = (props) => {
+    if(props.showPercents===true) {
+        return (<div className="goal-text"> {(props.current/props.total*100).toFixed(0)}%/
+        {(props.goal/props.total*100).toFixed(0)}%</div>)
+    }
+    else {
+        return (<div className="goal-text"> {props.current}/ {props.goal}/ {props.total}</div>)
+    }
+}
+
+export default MetricSlider;