From f16ea8550e868ba9e378ca57a4c327899ffdf984 Mon Sep 17 00:00:00 2001 From: akatneni <57238903+akatneni@users.noreply.github.com> Date: Sun, 22 Mar 2020 16:31:33 -0400 Subject: [PATCH 1/2] Metric slider with loading bar and captions. --- OasisDataPlatform/client/src/MetricSlider.css | 74 ++++++++++++++++++ OasisDataPlatform/client/src/MetricSlider.js | 57 ++++++++++++++ OasisDataPlatform/client/src/check.png | Bin 0 -> 584 bytes 3 files changed, 131 insertions(+) create mode 100644 OasisDataPlatform/client/src/MetricSlider.css create mode 100644 OasisDataPlatform/client/src/MetricSlider.js create mode 100644 OasisDataPlatform/client/src/check.png diff --git a/OasisDataPlatform/client/src/MetricSlider.css b/OasisDataPlatform/client/src/MetricSlider.css new file mode 100644 index 0000000..e2d1c0f --- /dev/null +++ b/OasisDataPlatform/client/src/MetricSlider.css @@ -0,0 +1,74 @@ +/* +#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: 26px; + font-weight: 400; + line-height: 33px; + 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; */ +} + +.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; +} diff --git a/OasisDataPlatform/client/src/MetricSlider.js b/OasisDataPlatform/client/src/MetricSlider.js new file mode 100644 index 0000000..9daa10e --- /dev/null +++ b/OasisDataPlatform/client/src/MetricSlider.js @@ -0,0 +1,57 @@ +import React, {Component} from "react"; +import "./MetricSlider.css"; +const checkImg = require("./check.png"); + +//Takes 4 arguments: title, total, current, goal +// 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 + +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 + } + } + + render(){ + return( +
+
{this.state.title}
+
{(this.state.current/this.state.total*100).toFixed(0)}%/ + {(this.state.goal/this.state.total*100).toFixed(0)}%
+ + +
+ ) + } +} +const Bar = (props) => { + return ( +
+ +
+ ) +} +const Filler = (props) => { + return
+} + +const CheckBox = (props) => { + if(props.percentage===100) { + return (
+ check +
) + } + else { + return
+ } +} + +export default MetricSlider; \ No newline at end of file diff --git a/OasisDataPlatform/client/src/check.png b/OasisDataPlatform/client/src/check.png new file mode 100644 index 0000000000000000000000000000000000000000..aa0db948dd9368f59f05f905309262e874721e8a GIT binary patch literal 584 zcmV-O0=NB%P)QrPSC+2@9cy z(xf4wA(zNC*W8AW%_;Trn)m;IZ|7uw`~UCh+d1bszvubqa>E+d|0_&EQ`R9SpdXjf zl2wQ?==EEDn4C3;Mx67f?qXI}AR5r4upVP!+9B%DZD_s3@-%}SRJ`6{O&TF~3D+w$ zrwL+51jJXgr3qpyeg;AeqCHIz8}L2iX>^1Znv312s{q7We2#$V3@tPb_mjijXecAZ z3cQbi*c)1?6*u!tdeB$~h($@a3Dx1yLe02Z!0db}?GCf?Bm&|%>O(Wmg&|CP(Ha@Y z??phI#)#02bE-)5eoPJU9*-Ll5En5zG~*l#EHZ#OMR+&iN(97pj0=72o5krV7XQO{ z6wXHY-o~WZ4{={4%xkRti(frXM)*C%j8a=;XC%xAtjqH{8sYOC^UL+K>PWIosJ>uR z;&CA2{97z7cYJ71(q*UyBVVUaSY4?=*M^TOuWwji>2$gZZz>4!16!&UwU^*og+R7f zdv2JA2W5uns?`uQ9kwb2i zNQg^8alA$=&O<{$^kwEs0DB5R+{xlqz|Ooy+at`(>gCL~Bsjjnf?Sq`jaXLAn!f-L WXW Date: Sun, 22 Mar 2020 20:15:43 -0400 Subject: [PATCH 2/2] Updated Slider --- OasisDataPlatform/client/src/MetricSlider.css | 17 +++++++++--- OasisDataPlatform/client/src/MetricSlider.js | 27 ++++++++++++++++--- 2 files changed, 37 insertions(+), 7 deletions(-) diff --git a/OasisDataPlatform/client/src/MetricSlider.css b/OasisDataPlatform/client/src/MetricSlider.css index e2d1c0f..7ea2eea 100644 --- a/OasisDataPlatform/client/src/MetricSlider.css +++ b/OasisDataPlatform/client/src/MetricSlider.css @@ -19,9 +19,9 @@ .goal-text { color: #47525E; font-family: Lato; - font-size: 26px; + font-size: 24px; font-weight: 400; - line-height: 33px; + line-height: 34px; width: 124px; text-align: center; float:left; @@ -36,7 +36,7 @@ border: 1px; float:left; overflow:hidden; - margin-right: 20px; + margin-right:-20px; margin-top:14px; } @@ -46,6 +46,17 @@ /* 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; diff --git a/OasisDataPlatform/client/src/MetricSlider.js b/OasisDataPlatform/client/src/MetricSlider.js index 9daa10e..e7db34c 100644 --- a/OasisDataPlatform/client/src/MetricSlider.js +++ b/OasisDataPlatform/client/src/MetricSlider.js @@ -2,11 +2,13 @@ import React, {Component} from "react"; import "./MetricSlider.css"; const checkImg = require("./check.png"); -//Takes 4 arguments: title, total, current, goal +//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) { @@ -16,7 +18,8 @@ class MetricSlider extends Component { title: this.props.title, current: this.props.current, goal: this.props.goal, - total: this.props.total + total: this.props.total, + showPercents: this.props.showPercents } } @@ -24,9 +27,15 @@ class MetricSlider extends Component { return(
{this.state.title}
-
{(this.state.current/this.state.total*100).toFixed(0)}%/ - {(this.state.goal/this.state.total*100).toFixed(0)}%
+ + + +
{(this.state.current/this.state.goal*100).toFixed(0)}%
) @@ -54,4 +63,14 @@ const CheckBox = (props) => { } } +const GoalText = (props) => { + if(props.showPercents===true) { + return (
{(props.current/props.total*100).toFixed(0)}%/ + {(props.goal/props.total*100).toFixed(0)}%
) + } + else { + return (
{props.current}/ {props.goal}/ {props.total}
) + } +} + export default MetricSlider; \ No newline at end of file