From 2df58fe22e70cbf85098e7e93b89076241619a1c Mon Sep 17 00:00:00 2001 From: Alex P Date: Fri, 30 Jun 2017 09:53:46 -0700 Subject: [PATCH] Polish Legend MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 | 80 ++++++---- ui/src/style/components/dygraphs.scss | 175 +++++++++++++++------- 2 files changed, 167 insertions(+), 88 deletions(-) diff --git a/ui/src/shared/components/DygraphLegend.js b/ui/src/shared/components/DygraphLegend.js index 75bc71d25..aa421e6d6 100644 --- a/ui/src/shared/components/DygraphLegend.js +++ b/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 = ( +
onSort('alphabetic')} + > +
+
A
+
Z
+
+ ) + const renderSortNum = ( + + ) + return (
- - -
{filtered.map(({label, color, yHTML, isHighlighted}) => { + const seriesClass = isHighlighted + ? 'dygraph-legend--row highlight' + : 'dygraph-legend--row' return ( - - - - {isSnipped ? removeMeasurement(label) : label} - : - {' '} - {yHTML || 'no value'} - - - +
+ + {isSnipped ? removeMeasurement(label) : label} + +
{yHTML || 'no value'}
+
) })}
diff --git a/ui/src/style/components/dygraphs.scss b/ui/src/style/components/dygraphs.scss index 1900fd396..90d8330e9 100644 --- a/ui/src/style/components/dygraphs.scss +++ b/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; +}