From 95491b7291e3a119a62fbcf6f7df1713f86fded0 Mon Sep 17 00:00:00 2001 From: John Furrow Date: Sun, 3 Jan 2016 20:58:01 -0500 Subject: [PATCH] Add dotted line indicating throttle speed to speed graphs --- client/source/sass/objects/_client-stats.scss | 41 +++++++--- client/source/sass/objects/_dropdown.scss | 5 ++ client/source/sass/objects/_sidebar.scss | 12 +++ client/source/sass/tools/_colors.scss | 4 + .../scripts/components/sidebar/ClientStats.js | 7 +- .../scripts/components/sidebar/LineChart.js | 75 ++++++++++--------- 6 files changed, 96 insertions(+), 48 deletions(-) diff --git a/client/source/sass/objects/_client-stats.scss b/client/source/sass/objects/_client-stats.scss index fe7f1f31..3836179a 100644 --- a/client/source/sass/objects/_client-stats.scss +++ b/client/source/sass/objects/_client-stats.scss @@ -49,9 +49,8 @@ border: none; color: $client-stats--limits--foreground; display: block; - margin: 15px 0 0 0; outline: none; - padding: 2px 0 2px 25px; + padding: 10px 15px; font-size: 0.85em; text-align: left; transition: color 0.25s; @@ -107,9 +106,17 @@ width: 100%; } - &--line { + &__line { fill: none; - stroke-width: 2px; + + &--limit { + stroke-dasharray: 4px; + stroke-width: 1px; + } + + &--rate { + stroke-width: 2px; + } } } @@ -146,12 +153,19 @@ stop-color: $client-stats--download--graph--fill--bottom; } - &--area { + &__area { fill: url('#graph--download--gradient') } - &--line { - stroke: $client-stats--download--graph--stroke; + &__line { + + &--limit { + stroke: $client-stats--download--limits--line; + } + + &--rate { + stroke: $client-stats--download--graph--stroke; + } } } @@ -190,12 +204,19 @@ stop-color: $client-stats--upload--graph--fill--bottom; } - &--area { + &__area { fill: url('#graph--upload--gradient') } - &--line { - stroke: $client-stats--upload--graph--stroke; + &__line { + + &--limit { + stroke: $client-stats--upload--limits--line; + } + + &--rate { + stroke: $client-stats--upload--graph--stroke; + } } } diff --git a/client/source/sass/objects/_dropdown.scss b/client/source/sass/objects/_dropdown.scss index 17f62928..c9e47a0c 100644 --- a/client/source/sass/objects/_dropdown.scss +++ b/client/source/sass/objects/_dropdown.scss @@ -86,9 +86,14 @@ } &__items { + display: flex; padding: 10px 0; } + &__list { + flex: 1; + } + &__item { cursor: pointer; display: block; diff --git a/client/source/sass/objects/_sidebar.scss b/client/source/sass/objects/_sidebar.scss index d62224f7..29321f0a 100644 --- a/client/source/sass/objects/_sidebar.scss +++ b/client/source/sass/objects/_sidebar.scss @@ -63,5 +63,17 @@ } } } + + &--speed-limit { + padding-left: 5px; + padding-top: 5px; + + .dropdown { + + &__content { + min-width: 180px; + } + } + } } } diff --git a/client/source/sass/tools/_colors.scss b/client/source/sass/tools/_colors.scss index ed86f04a..764e0eb2 100644 --- a/client/source/sass/tools/_colors.scss +++ b/client/source/sass/tools/_colors.scss @@ -49,17 +49,21 @@ $action--border--hover: rgba(#333e4a, 0.15); $sidebar--foreground: #53718a; $sidebar--border: rgba(darken($sidebar--foreground, 40%), 0.3); +$client-stats--limits--opacity: 0.2; + $client-stats--download--primary--foreground: #2bae6c; $client-stats--download--secondary--foreground: rgba($client-stats--download--primary--foreground, 0.75); $client-stats--download--graph--stroke: rgba(#2bae6c, 0.4); $client-stats--download--graph--fill--top: rgba(#2bae6c, 0.2); $client-stats--download--graph--fill--bottom: rgba(#2bae6c, 0); +$client-stats--download--limits--line: rgba(lighten($client-stats--download--primary--foreground, 20%), $client-stats--limits--opacity); $client-stats--upload--primary--foreground: #2387d9; $client-stats--upload--secondary--foreground: rgba($client-stats--upload--primary--foreground, 0.75); $client-stats--upload--graph--stroke: rgba(#2387d9, 0.4); $client-stats--upload--graph--fill--top: rgba(#2387d9, 0.2); $client-stats--upload--graph--fill--bottom: rgba(#2387d9, 0); +$client-stats--upload--limits--line: rgba(lighten($client-stats--upload--primary--foreground, 20%), $client-stats--limits--opacity); $client-stats--limits--foreground: $foreground; $client-stats--limits--icon--hover: $blue; diff --git a/client/source/scripts/components/sidebar/ClientStats.js b/client/source/scripts/components/sidebar/ClientStats.js index b4efe19c..da0a3226 100644 --- a/client/source/scripts/components/sidebar/ClientStats.js +++ b/client/source/scripts/components/sidebar/ClientStats.js @@ -66,14 +66,15 @@ class ClientStats extends React.Component { return
Loading
; } + let throttles = ClientDataStore.getThrottles(); let transferRate = ClientDataStore.getTransferRate(); let transferRates = ClientDataStore.getTransferRates(); let transferTotals = ClientDataStore.getTransferTotals(); - let uploadRate = format.data(transferRate.upload, '/s'); - let uploadTotal = format.data(transferTotals.upload); let downloadRate = format.data(transferRate.download, '/s'); let downloadTotal = format.data(transferTotals.download); + let uploadRate = format.data(transferRate.upload, '/s'); + let uploadTotal = format.data(transferTotals.upload); return (
@@ -95,6 +96,7 @@ class ClientStats extends React.Component { data={transferRates.download} height={100} id="graph--download" + limit={throttles.download} slug="graph--download" width={this.state.sidebarWidth} />
@@ -116,6 +118,7 @@ class ClientStats extends React.Component { data={transferRates.upload} height={100} id="graph--upload" + limit={throttles.upload} slug="graph--upload" width={this.state.sidebarWidth} /> diff --git a/client/source/scripts/components/sidebar/LineChart.js b/client/source/scripts/components/sidebar/LineChart.js index 86a7207d..366a842c 100644 --- a/client/source/scripts/components/sidebar/LineChart.js +++ b/client/source/scripts/components/sidebar/LineChart.js @@ -2,14 +2,14 @@ import d3 from 'd3'; import React from 'react'; export default class LineChart extends React.Component { - constructor() { super(); } componentDidUpdate() { let graph = d3.select('#' + this.props.id); - let lineData = this.props.data; + let transferData = this.props.data; + let transferLimit = this.props.limit; let margin = { bottom: 10, top: 10 @@ -22,52 +22,55 @@ export default class LineChart extends React.Component { .linear() .range([0, width]) .domain([ - d3.min(lineData, function(d,i) { - return i; + d3.min(transferData, function(dataPoint, index) { + return index; }), - d3.max(lineData, function(d,i) { - return i; + d3.max(transferData, function(dataPoint, index) { + return index; }) ]); let yRange = d3 .scale .linear() - .range([height - margin.bottom - margin.top, 0]) + .range([height - margin.top, margin.bottom]) .domain([ - d3.min(lineData, function(d) { - return d; - }), - d3.max(lineData, function(d) { - return d; + 0, + d3.max(transferData, function(dataPoint, index) { + if (dataPoint >= transferLimit[index]) { + return dataPoint; + } else { + return transferLimit[index]; + } }) ]); let lineFunc = d3 .svg .line() - .x(function(d,i) { - return xRange(i); + .x(function(dataPoint, index) { + return xRange(index); }) - .y(function(d) { - return yRange(d); + .y(function(dataPoint) { + return yRange(dataPoint); }) .interpolate('basis'); let areaFunc = d3 .svg .area() - .x(function(d,i) { - return xRange(i); + .x(function(dataPoint, index) { + return xRange(index); }) .y0(height) - .y1(function(d) { - return yRange(d); + .y1(function(dataPoint) { + return yRange(dataPoint); }) .interpolate('basis'); - let points = lineFunc(lineData); - let area = areaFunc(lineData); + let transferDataLinePoints = lineFunc(transferData); + let transferLimitLinePoints = lineFunc(transferLimit); + let transferDataAreaPoints = areaFunc(transferData); graph .select('g') @@ -76,30 +79,30 @@ export default class LineChart extends React.Component { graph .append('g') .append('svg:path') - .attr('class', 'graph--area') - .attr('d', area) - .attr('transform', 'translate(0,' + margin.top + ')');; + .attr('class', 'graph__area') + .attr('d', transferDataAreaPoints); graph .select('g') .append('svg:path') - .attr('class', 'graph--line') - .attr('d', points) - .attr('transform', 'translate(0,' + margin.top + ')'); + .attr('class', 'graph__line graph__line--limit') + .attr('d', transferLimitLinePoints); + + graph + .select('g') + .append('svg:path') + .attr('class', 'graph__line graph__line--rate') + .attr('d', transferDataLinePoints); } render() { return ( - - - + + +