feat(Time Series): Add key for symbols. closes #276

IQTLabs · May 2, 2019 · d3cc4c9 · d3cc4c9
1 parent 49de557
commit d3cc4c9
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 2 deletions.
diff --git a/src/App.js b/src/App.js
@@ -361,6 +361,28 @@ class App extends Component {
         <div className={ style.canvas }>
           <Visualization startUid={startUuid} endUid={endUuid} />
         </div>
+        <div className={classNames({ [style.key]: true, [style.hidden]: datasetCount < 2 }) }>
+          <svg width="100%" height="60">
+            <g>
+              <g class="viz-isAdded-fixed">
+                <circle cx="15" cy="15" r="10"/>
+              </g>
+              <text x="30" y="15">Added</text>
+            </g>
+            <g>
+              <g class="viz-isChanged-fixed">
+                <circle cx="100" cy="15" r="10"/>
+              </g>
+              <text x="115" y="15">Changed</text>
+            </g>
+            <g>
+              <g class="viz-isRemoved-fixed">
+                <circle cx="200" cy="15" r="10"/>
+              </g>
+              <text x="215" y="15">Removed</text>
+            </g>
+          </svg>
+        </div>
         <div className={ classNames({ [style.sliderContainer]: true, [style.hidden]: datasetCount < 2 }) } >
           <DatasetSlider points={uuids} startUuid={startUuid} endUuid={endUuid} 
             setStartUuid={this.setStartUuid} setEndUuid={this.setEndUuid} />

diff --git a/src/App.module.css b/src/App.module.css
@@ -308,4 +308,16 @@ input[name=hideControls]:checked ~ .canvas {
   left: 0;
   width: 160px;
   height: 160px;
+}
+
+.key {
+  padding-right: 2em;
+  position:absolute;
+  width: 405px;
+  bottom:80px;
+  right:0;
+}
+
+.key text {
+  dominant-baseline: middle;
 }
diff --git a/src/features/visualization/Visualization.module.css b/src/features/visualization/Visualization.module.css
@@ -46,7 +46,7 @@
   }
 }
 
-.viz :global(.viz-isAdded-fixed) circle {
+:global(.viz-isAdded-fixed) circle {
   fill: black;
   -webkit-clip-path: polygon(0% 33%, 33% 33%, 33% 0%, 66% 0%, 66% 33%, 100% 33%, 100% 66%, 66% 66%, 66% 100%, 33% 100%, 33% 66%, 0% 66%, 0% 33%);
   clip-path: polygon(0% 33%, 33% 33%, 33% 0%, 66% 0%, 66% 33%, 100% 33%, 100% 66%, 66% 66%, 66% 100%, 33% 100%, 33% 66%, 0% 66%, 0% 33%);
@@ -76,7 +76,7 @@
   }
 }
 
-.viz :global(.viz-isRemoved-fixed) circle {
+:global(.viz-isRemoved-fixed) circle {
   fill: black;
   -webkit-clip-path: polygon(0% 33%, 100% 33%, 100% 66%, 0% 66%);
   clip-path: polygon(0% 33%, 100% 33%, 100% 66%, 0% 66%);