Polish Legend

- Sort buttons reflect the direction of the sort and which is actively
sorting
- “Snip Measurement” shortened to “Snip”
- Can display about 7 rows before overflow

ui/src/shared/components/DygraphLegend.js

@@ -1,5 +1,6 @@
 import React, {PropTypes} from 'react'
 import _ from 'lodash'
+import classnames from 'classnames'
 
 const removeMeasurement = (label = '') => {
   const [measurement] = label.match(/^(.*)[.]/g) || ['']
@@ -27,54 +28,69 @@ const DygraphLegend = ({
   const filtered = ordered.filter(s => s.label.match(filterText))
   const hidden = isHidden ? 'hidden' : ''
 
+  const renderSortAlpha = (
+    <div
+      className={classnames('sort-btn btn btn-sm btn-square', {
+        'btn-primary': sortType !== 'numeric',
+        'btn-default': sortType === 'numeric',
+        'sort-btn--asc': isAscending && sortType !== 'numeric',
+        'sort-btn--desc': !isAscending && sortType !== 'numeric',
+      })}
+      onClick={() => onSort('alphabetic')}
+    >
+      <div className="sort-btn--arrow" />
+      <div className="sort-btn--top">A</div>
+      <div className="sort-btn--bottom">Z</div>
+    </div>
+  )
+  const renderSortNum = (
+    <button
+      className={classnames('sort-btn btn btn-sm btn-square', {
+        'btn-primary': sortType === 'numeric',
+        'btn-default': sortType !== 'numeric',
+        'sort-btn--asc': isAscending && sortType === 'numeric',
+        'sort-btn--desc': !isAscending && sortType === 'numeric',
+      })}
+      onClick={() => onSort('numeric')}
+    >
+      <div className="sort-btn--arrow" />
+      <div className="sort-btn--top">0</div>
+      <div className="sort-btn--bottom">9</div>
+    </button>
+  )
+
   return (
     <div
-      style={{
-        userSelect: 'text',
-        transform: 'translate(-50%)',
-      }}
-      className={`container--dygraph-legend ${hidden}`}
+      className={`dygraph-legend ${hidden}`}
       ref={legendRef}
       onMouseLeave={onHide}
     >
       <div className="dygraph-legend--header">
         <input
-          className="form-control input-xs"
+          className="dygraph-legend--filter form-control input-sm"
           type="text"
           value={filterText}
           onChange={onInputChange}
+          placeholder="Filter items..."
         />
-        <button
-          className="btn btn-primary btn-xs"
-          onClick={() => onSort('alphabetic')}
-        >
-          A-Z
-        </button>
-        <button
-          className="btn btn-primary btn-xs"
-          onClick={() => onSort('numeric')}
-        >
-          0-9
-        </button>
-        <button className="btn btn-primary btn-xs" onClick={onSnip}>
-          Snip Measurement
+        {renderSortAlpha}
+        {renderSortNum}
+        <button className="btn btn-default btn-sm" onClick={onSnip}>
+          Snip
         </button>
       </div>
       <div className="dygraph-legend--contents">
         {filtered.map(({label, color, yHTML, isHighlighted}) => {
+          const seriesClass = isHighlighted
+            ? 'dygraph-legend--row highlight'
+            : 'dygraph-legend--row'
           return (
-            <span key={label + color}>
-              <b>
-                <span
-                  style={{color, fontWeight: isHighlighted ? 'bold' : 'normal'}}
-                >
+            <div key={label + color} className={seriesClass}>
+              <caption style={{color}}>
                 {isSnipped ? removeMeasurement(label) : label}
-                  :
-                  {' '}
-                  {yHTML || 'no value'}
-                </span>
-              </b>
-            </span>
+              </caption>
+              <figure>{yHTML || 'no value'}</figure>
+            </div>
           )
         })}
       </div>

ui/src/style/components/dygraphs.scss

@@ -20,61 +20,6 @@
   background: linear-gradient(to bottom,  fade-out($g20-white, 1) 0%,fade-out($g20-white, 0.71) 6%,fade-out($g20-white, 0.71) 80%,fade-out($g20-white, 1) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='fade-out($g20-white, 0.71)', endColorstr='fade-out($g20-white, 0.71)',GradientType=0 );
 }
-.container--dygraph-legend {
-  background-color: $g0-obsidian;
-  display: block !important;
-  position: absolute;
-  padding: 11px;
-  z-index: 500;
-  border-radius: 3px;
-
-  &.hidden {
-    display: none !important;
-  }
-}
-.dygraph-legend--contents {
-  font-size: 13px;
-  color: $g12-forge;
-  font-weight: 600;
-  line-height: 13px;
-  
-  /* Row */
-  /* Styles for Key go here, get overrided by > b */
-  > span {
-    width: 100%;
-    justify-content: space-between;
-    align-items: center;
-    display: flex;
-    opacity: 0.5;
-    padding-top: 4px;
-    font-size: 13px;
-    line-height: 13px;
-    font-weight: 600 !important;
-    color: $g19-ghost;
-    margin: 0;
-
-    /* Border on top of first row */
-    &:first-child {
-      border-top: 2px solid $g4-onyx;
-      padding-top: 6px;
-      margin-top: 6px;
-    }
-
-    /* Legend Key */
-    > b {
-      font-weight: 600 !important;
-    }
-  }
-
-  .highlight {
-    font-weight: 600;
-    opacity: 1;
-
-    > b {
-     font-weight: 600;
-    }
-  }
-}
 
 /* Axis Labels */
 .dygraph-axis-label {
@@ -127,7 +72,7 @@
 }
 
 
-
+/* Single Stat Cells */
 .single-stat {
   position: absolute;
   width: 100%;
@@ -178,3 +123,121 @@
 .single-stat--small .single-stat--shadow:after {
   box-shadow: fade-out($g2-kevlar, 0.3) 0 0 30px 10px;
 }
+
+
+/*
+  Legend Styles
+  ------------------------------------------------------------------------------
+*/
+.dygraph-child-container .dygraph-legend {
+  display: none !important; // hide default legend
+}
+.dygraph-legend {
+  background-color: $g0-obsidian;
+  display: block !important;
+  position: absolute;
+  padding: 11px;
+  z-index: 500;
+  border-radius: 3px;
+  min-width: 350px;
+  user-select: text;
+  transform: translateX(-50%);
+
+  &.hidden {
+    display: none !important;
+  }
+}
+.dygraph-legend--header {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  padding-bottom: 8px;
+  border-bottom: 2px solid $g5-pepper;
+  margin-bottom: 8px;
+
+  > .btn { margin-left: 4px; }
+}
+.dygraph-legend--filter {
+  flex: 1 0 0;
+}
+.dygraph-legend--contents {
+  font-size: 13px;
+  color: $g12-forge;
+  font-weight: 600;
+  line-height: 13px;
+  max-height: 123px;
+  overflow-y: scroll;
+}
+.dygraph-legend--row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  flex-wrap: nowrap;
+  opacity: 0.5;
+  font-size: 13px;
+  line-height: 13px;
+  padding: 3px 0;
+
+  caption {
+    font-weight: 600;
+    padding: 0;
+    white-space: nowrap;
+  }
+  figure {
+    padding-left: 10px;
+    font-family: $code-font;
+  }
+
+  &.highlight {
+    opacity: 1;
+    background-color: $g3-castle;
+    figure {color: $g20-white;}
+  }
+  &.highlight:only-child {
+    background-color: transparent;
+  }
+}
+
+/* Sorting Buttons */
+.sort-btn {
+  position: relative;
+}
+.sort-btn--arrow {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  height: calc(100% - 16px);
+  width: 2px;
+  background-color: $g20-white;
+  transform: rotate(0deg);
+  transition: transform 0.25s ease;
+
+  &:after {
+    content: '';
+    position: absolute;
+    top: -8px;
+    left: 50%;
+    transform: translateX(-50%) scaleX(0.7);
+    border-style: solid;
+    border-width: 6px;
+    border-color: transparent;
+    border-bottom-color: $g20-white;
+  }
+}
+.sort-btn--asc .sort-btn--arrow {
+  transform: rotate(180deg);
+}
+.sort-btn--top,
+.sort-btn--bottom {
+  position: absolute;
+  font-size: 10px;
+  font-weight: 900;
+  color: $g20-white;
+  left: 6px;
+}
+.sort-btn--top {
+  top: -5px;
+}
+.sort-btn--bottom {
+  bottom: -6px;
+}