feat(Time Series): Now supports n datasets!

- ability to add as many datasets as you want - ability to choose 2 different points for comparison
IQTLabs · Feb 15, 2019 · 752558b · 752558b
1 parent 9361342
commit 752558b
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 7 deletions.
diff --git a/src/App.js b/src/App.js
@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import classNames from 'classnames';
 import Modal from 'react-modal';
 
+import { isNil } from "ramda";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { 
   faCheck, faDizzy, faPlus, faMinusCircle, faHome, faAngleDoubleDown, faAngleDoubleUp,
@@ -36,11 +37,16 @@ class App extends Component {
     showData: true,
     showGrouping: false,
     showFiltering: false,
-    uuids: [uuidv4()]
+    uuids: [uuidv4()],
+    startUuid: null,
+    endUuid: null,
   }
 
   componentWillReceiveProps = (nextProps) =>{
     const uniqueUuids = Array.from(new Set(nextProps.uuids.concat(this.state.uuids)));
+    if(!this.state.startUuid){
+      this.setState({startUuid: uniqueUuids[0]});
+    }
     this.setState({uuids: uniqueUuids});
   }
 
@@ -92,8 +98,12 @@ class App extends Component {
 
   addDatasetEntry = () => {
     const uuids = this.state.uuids;
-    uuids.push(uuidv4());
-    this.setState({uuids: uuids})
+    const newItem = uuidv4()
+    uuids.push(newItem);
+    this.setState({uuids: uuids});
+    if(this.state.endUuid === null){
+      this.setEndUuid(newItem);
+    }
   }
 
   removeDatasetEntry = (uuid) =>{
@@ -109,11 +119,21 @@ class App extends Component {
     this.props.removeDataset({'owner': uuid});
   }
 
+  setStartUuid = (uuid) =>{
+    this.setState({startUuid: uuid});
+  }
+
+  setEndUuid = (uuid) =>{
+    this.setState({endUuid: uuid});
+  }
+
   render() {
     const { dataset, darkTheme, error, lastUpdated} = this.props;
     const hasDataset = dataset && dataset.length > 0;
 
     const uuids = this.state.uuids;
+    const startUuid = this.state.startUuid;
+    const endUuid = this.state.endUuid;
     const showData = this.state.showData;
     const showComparison = this.state.showComparison;
     const showGrouping = this.state.showGrouping;
@@ -140,10 +160,10 @@ class App extends Component {
           <div className={style.accordionHeader} onClick={this.toggleShowData}>
             Data  {!showData && <FontAwesomeIcon icon={faAngleDoubleUp} />}{showData && <FontAwesomeIcon onClick={this.toggleShowData} icon={faAngleDoubleDown} />}
           </div>
-          <div>
+          <div className={ classNames({ [style.section]: true, [style.hidden]: !showData })}>
             {uuids.map((uuid, index) => {
               return(
-                <div  key={ uuid } className={ classNames({ [style.section]: true, [style.hidden]: !showData }) }>
+                <div  key={ uuid } >
                   <div className={style.dataControlHeader}>
                     t{index}
                     {index > 0 && <FontAwesomeIcon icon={faMinusCircle} onClick={ () => {this.removeDatasetEntry(uuid)}} />}
@@ -170,7 +190,47 @@ class App extends Component {
           </div>
           { hasDataset &&
             <div className={ classNames({ [style.section]: true, [style.hierarchySection]: true, [style.hidden]: !showComparison }) }>
-              <ComparisonSelector startUid={uuids[0]} endUid={uuids[1] || null} />
+              <ComparisonSelector startUid={startUuid} endUid={endUuid} />
+              <div className={style.selectorContainer}>
+                <span className={style.label}>Start</span>
+                <div className={style.selector}>
+                  <label className="select">
+                  <select
+                    onChange={(evt) => this.setStartUuid(evt.target.value)}
+                    value={isNil(startUuid) ? "" : startUuid}
+                  >
+                    <option value="">&mdash;None&mdash;</option>
+                    {uuids.map((uuid, index) => {
+                      return (
+                        <option key={uuid} value={uuid}>
+                          t{index}
+                        </option>
+                      );
+                    })}
+                  </select>
+                  </label>
+                </div>
+              </div>
+              <div className={style.selectorContainer}>
+                <span className={style.label}>End</span>
+                <div className={style.selector}>
+                  <label className="select">
+                  <select
+                    onChange={(evt) => this.setEndUuid(evt.target.value)}
+                    value={isNil(endUuid) ? "" : endUuid}
+                  >
+                    <option value="">&mdash;None&mdash;</option>
+                    {uuids.map((uuid, index) => {
+                      return (
+                        <option key={uuid} value={uuid}>
+                          t{index}
+                        </option>
+                      );
+                    })}
+                  </select>
+                  </label>
+                </div>
+              </div>
             </div>
           }
           { !hasDataset && 
@@ -208,7 +268,7 @@ class App extends Component {
         }
 
         <div className={ style.canvas }>
-          <Visualization startUid={uuids[0]} endUid={uuids[1] || null} />
+          <Visualization startUid={startUuid} endUid={endUuid} />
         </div>
         <Modal isOpen={ error !== null } onRequestClose={this.onErrorClose} contentLabel="An Error has occurred">
             <div className={ style.modal }>

diff --git a/src/App.module.css b/src/App.module.css
@@ -191,8 +191,27 @@ input[name=hideControls]:checked ~ .canvas {
   transform: translate(-50%,-50%);
 }
 
+.label {
+  font-weight: bold;
+  flex: 0 0 6rem;
+}
+
 .emptyDataset span {
   display: flex;
   flex-flow: row wrap;
   align-items: center;
+}
+
+.selectorContainer {
+  display: flex;
+  align-items: center;
+}
+
+.selector {
+  flex: 1;
+}
+
+.selector select {
+  width: 100%;
+  margin: 0;
 }