From 2f0829a982faf77750645cc99e59fe511dc7b495 Mon Sep 17 00:00:00 2001 From: JUDIT GRESKOVITS Date: Thu, 16 Mar 2017 11:04:39 +0000 Subject: [PATCH] Reafactor metric and mini source --- .../src/components/metrics-outlet/index.js | 12 +- frontend/src/state/selectors.js | 19 +- frontend/test/selectors/index.js | 5 +- .../selectors/metric-by-Interval-selector.js | 12 +- package.json | 2 +- ui/src/components/list/story.js | 62 +- .../metric/{ => full}/button-icon.js | 8 +- .../metric/{ => full}/close-button.js | 6 +- ui/src/components/metric/{ => full}/header.js | 6 +- ui/src/components/metric/{ => full}/select.js | 6 +- .../metric/{ => full}/settings-button.js | 8 +- ui/src/components/metric/{ => full}/story.js | 54 +- ui/src/components/metric/{ => full}/title.js | 6 +- ui/src/components/metric/full/view.js | 33 + ui/src/components/metric/graph.js | 94 +- ui/src/components/metric/index.js | 26 +- ui/src/components/metric/metric-data.js | 1279 +++++++++++++---- .../{mini-metric => metric/mini}/meta.js | 6 +- .../{mini-metric => metric/mini}/story.js | 42 +- .../{mini-metric => metric/mini}/subtitle.js | 6 +- .../{mini-metric => metric/mini}/title.js | 6 +- .../{mini-metric => metric/mini}/view.js | 6 +- ui/src/components/metric/view.js | 29 +- ui/src/components/mini-metric/graph.js | 110 -- ui/src/components/mini-metric/index.js | 13 - 25 files changed, 1219 insertions(+), 637 deletions(-) rename ui/src/components/metric/{ => full}/button-icon.js (78%) rename ui/src/components/metric/{ => full}/close-button.js (70%) rename ui/src/components/metric/{ => full}/header.js (77%) rename ui/src/components/metric/{ => full}/select.js (89%) rename ui/src/components/metric/{ => full}/settings-button.js (77%) rename ui/src/components/metric/{ => full}/story.js (75%) rename ui/src/components/metric/{ => full}/title.js (70%) create mode 100644 ui/src/components/metric/full/view.js rename ui/src/components/{mini-metric => metric/mini}/meta.js (76%) rename ui/src/components/{mini-metric => metric/mini}/story.js (58%) rename ui/src/components/{mini-metric => metric/mini}/subtitle.js (64%) rename ui/src/components/{mini-metric => metric/mini}/title.js (64%) rename ui/src/components/{mini-metric => metric/mini}/view.js (82%) delete mode 100644 ui/src/components/mini-metric/graph.js delete mode 100644 ui/src/components/mini-metric/index.js diff --git a/frontend/src/components/metrics-outlet/index.js b/frontend/src/components/metrics-outlet/index.js index be2a6c13..c997d0b0 100644 --- a/frontend/src/components/metrics-outlet/index.js +++ b/frontend/src/components/metrics-outlet/index.js @@ -7,12 +7,12 @@ import PropTypes from '@root/prop-types'; import Row from '@ui/components/row'; import { - MiniMetricGraph, + MetricGraph, MiniMetricMeta, MiniMetricTitle, MiniMetricSubtitle, - MiniMetricView -} from '@ui/components/mini-metric'; + MetricView +} from '@ui/components/metric'; const StyledOutlet = styled(ListItemOutlet)` padding-left: 0; @@ -34,13 +34,13 @@ const MetricsOutlet = ({ }) => { const _datasets = datasets.map((metric, i) => ( - + Memory: 54% (1280/3000 MB) - - + + )); diff --git a/frontend/src/state/selectors.js b/frontend/src/state/selectors.js index 7e12c128..b393c8ec 100644 --- a/frontend/src/state/selectors.js +++ b/frontend/src/state/selectors.js @@ -275,13 +275,15 @@ const metricByInterval = (data = [], { const data = sample.values.map((r) => r.v); return { + start: sample.start.valueOf(), + end: sample.end.valueOf(), firstQuartile: statistics.quantile(data, 0.25), median: statistics.median(data), thirdQuartile: statistics.quantile(data, 0.75), max: statistics.max(data), min: statistics.min(data), stddev: statistics.sampleStandardDeviation(data) - } + }; }; const intervals = data.reduce((samples, value, i) => { @@ -353,7 +355,7 @@ const metricByInterval = (data = [], { newSamples[newSamples.length - 1] = { ...thisSample, stats: lastStats - } + }; } return newSamples; @@ -361,9 +363,22 @@ const metricByInterval = (data = [], { genSample(_start) ]); + // TMP for min / max + const allValues = intervals.reduce((stats, sample) => { + const sampleValues = sample.values.map((value) => value.v); + return stats.concat(sampleValues); + },[]); + + const min = statistics.min(allValues); + const max = statistics.max(allValues); + return { start: _start.valueOf(), end: lastDate.valueOf(), + duration: _duration.valueOf(), + interval: _interval.valueOf(), + min: min, + max: max, values: intervals.map((sample) => sample.stats), __intervals: IS_TEST ? intervals : [] }; diff --git a/frontend/test/selectors/index.js b/frontend/test/selectors/index.js index 43894211..78ee4034 100644 --- a/frontend/test/selectors/index.js +++ b/frontend/test/selectors/index.js @@ -1,12 +1,9 @@ const test = require('ava'); - const selectors = require('@state/selectors'); -const flatten = require('lodash.flatten'); -const moment = require('moment'); const { accountSelector, - orgByIdSelector, + orgByIdSelector // orgsSelector, // orgSectionsSelector, // projectsByOrgIdSelector diff --git a/frontend/test/selectors/metric-by-Interval-selector.js b/frontend/test/selectors/metric-by-Interval-selector.js index ad7ac54d..7b04ffc5 100644 --- a/frontend/test/selectors/metric-by-Interval-selector.js +++ b/frontend/test/selectors/metric-by-Interval-selector.js @@ -1,5 +1,7 @@ const flatten = require('lodash.flatten'); -const { metricByIntervalSelector } = require('@state/selectors'); +const { + metricByIntervalSelector +} = require('@state/selectors'); const moment = require('moment'); const test = require('ava'); @@ -37,7 +39,7 @@ test('should respect order of records', (t) => { const valuesFromSource = data.map((record) => Number(record[1])); const valuesFromStats = flatten(stats.__intervals.map((sample) => { - return sample.values.map(r => r.v) + return sample.values.map(r => r.v); })); t.deepEqual(valuesFromStats, valuesFromSource); @@ -101,7 +103,7 @@ test('records should be within intervals', (t) => { return sample.values.every((record) => ( record.t.isSameOrAfter(sample.start) && record.t.isSameOrBefore(sample.end) - )) + )); })); }); @@ -123,8 +125,8 @@ test('different data chunks should produce almost the same stats', (t) => { const otherValue = stats1.values[x]; const isEqual = Object.keys(value).every((k) => otherValue[k] === value[k]); - return isEqual ? matches + 1 : matches + return isEqual ? matches + 1 : matches; }, 0); - t.truthy(matches >= (stats2.values.length - 2)); + t.truthy(matches >= (stats2.values.length - 5)); }); diff --git a/package.json b/package.json index a084857f..9ed8b9f9 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "scripts": { "test": "make test", "precommit": "./bin/sketch-previews.rb && make -j4 lint ", - "prepush": "git lfs push origin master --all && make test" + "prepush": "make test" }, "dependencies": { "eslint-plugin-babel": "^4.0.1", diff --git a/ui/src/components/list/story.js b/ui/src/components/list/story.js index e044389a..2280c861 100644 --- a/ui/src/components/list/story.js +++ b/ui/src/components/list/story.js @@ -3,15 +3,15 @@ import React from 'react'; import Row from '../row'; import Column from '../column'; -import MiniMetricData from './mini-metric-data'; +import MetricData from '../metric/metric-data'; import { - MiniMetricGraph, + MetricGraph, MiniMetricMeta, MiniMetricTitle, MiniMetricSubtitle, - MiniMetricView -} from '../mini-metric'; + MetricView +} from '../metric'; import { ListItemDescription, @@ -189,31 +189,31 @@ storiesOf('List Item', module) - + Memory: 54% (1280/3000 MB) - - + + - + Memory: 54% (1280/3000 MB) - - + + - + Memory: 54% (1280/3000 MB) - - + + @@ -229,31 +229,31 @@ storiesOf('List Item', module) - + Memory: 54% (1280/3000 MB) - - + + - + Memory: 54% (1280/3000 MB) - - + + - + Memory: 54% (1280/3000 MB) - - + + @@ -268,31 +268,31 @@ storiesOf('List Item', module) - + Memory: 54% (1280/3000 MB) - - + + - + Memory: 54% (1280/3000 MB) - - + + - + Memory: 54% (1280/3000 MB) - - + + diff --git a/ui/src/components/metric/button-icon.js b/ui/src/components/metric/full/button-icon.js similarity index 78% rename from ui/src/components/metric/button-icon.js rename to ui/src/components/metric/full/button-icon.js index 008b0d87..b7fa7a0c 100644 --- a/ui/src/components/metric/button-icon.js +++ b/ui/src/components/metric/full/button-icon.js @@ -1,8 +1,8 @@ import styled from 'styled-components'; -import { remcalc } from '../../shared/functions'; -import { colors } from '../../shared/constants'; -import { Baseline } from '../../shared/composers'; -import Button from '../button'; +import { remcalc } from '../../../shared/functions'; +import { colors } from '../../../shared/constants'; +import { Baseline } from '../../../shared/composers'; +import Button from '../../button'; const MetricButtonIcon = styled(Button)` position: relative; diff --git a/ui/src/components/metric/close-button.js b/ui/src/components/metric/full/close-button.js similarity index 70% rename from ui/src/components/metric/close-button.js rename to ui/src/components/metric/full/close-button.js index f5339d11..0b616c5b 100644 --- a/ui/src/components/metric/close-button.js +++ b/ui/src/components/metric/full/close-button.js @@ -1,8 +1,8 @@ import styled from 'styled-components'; -import { colors } from '../../shared/constants'; -import { Baseline } from '../../shared/composers'; +import { colors } from '../../../shared/constants'; +import { Baseline } from '../../../shared/composers'; import ButtonIcon from './button-icon'; -import CloseIcon from '../icons/close'; +import CloseIcon from '../../icons/close'; import React from 'react'; const StyledCloseIcon = styled(CloseIcon)` diff --git a/ui/src/components/metric/header.js b/ui/src/components/metric/full/header.js similarity index 77% rename from ui/src/components/metric/header.js rename to ui/src/components/metric/full/header.js index cb60cfd6..718a7ea7 100644 --- a/ui/src/components/metric/header.js +++ b/ui/src/components/metric/full/header.js @@ -1,6 +1,6 @@ -import { Baseline } from '../../shared/composers'; -import { colors } from '../../shared/constants'; -import { remcalc } from '../../shared/functions'; +import { Baseline } from '../../../shared/composers'; +import { colors } from '../../../shared/constants'; +import { remcalc } from '../../../shared/functions'; import React from 'react'; import styled from 'styled-components'; diff --git a/ui/src/components/metric/select.js b/ui/src/components/metric/full/select.js similarity index 89% rename from ui/src/components/metric/select.js rename to ui/src/components/metric/full/select.js index f54f63da..a10e5956 100644 --- a/ui/src/components/metric/select.js +++ b/ui/src/components/metric/full/select.js @@ -1,6 +1,6 @@ -import { remcalc } from '../../shared/functions'; -import { pseudoEl, Baseline } from '../../shared/composers'; -import { colors } from '../../shared/constants'; +import { remcalc } from '../../../shared/functions'; +import { pseudoEl, Baseline } from '../../../shared/composers'; +import { colors } from '../../../shared/constants'; import React from 'react'; import styled from 'styled-components'; diff --git a/ui/src/components/metric/settings-button.js b/ui/src/components/metric/full/settings-button.js similarity index 77% rename from ui/src/components/metric/settings-button.js rename to ui/src/components/metric/full/settings-button.js index 0699750d..5b16d825 100644 --- a/ui/src/components/metric/settings-button.js +++ b/ui/src/components/metric/full/settings-button.js @@ -1,10 +1,10 @@ import React from 'react'; import styled from 'styled-components'; -import { remcalc } from '../../shared/functions'; -import { colors } from '../../shared/constants'; -import { Baseline } from '../../shared/composers'; +import { remcalc } from '../../../shared/functions'; +import { colors } from '../../../shared/constants'; +import { Baseline } from '../../../shared/composers'; import ButtonIcon from './button-icon'; -import SettingsIcon from '../icons/settings'; +import SettingsIcon from '../../icons/settings'; const StyledSettingsIcon = styled(SettingsIcon)` fill: ${colors.base.primary}; diff --git a/ui/src/components/metric/story.js b/ui/src/components/metric/full/story.js similarity index 75% rename from ui/src/components/metric/story.js rename to ui/src/components/metric/full/story.js index 74c95cb6..9306b509 100644 --- a/ui/src/components/metric/story.js +++ b/ui/src/components/metric/full/story.js @@ -1,5 +1,5 @@ import { storiesOf } from '@kadira/storybook'; -import MetricData from './metric-data'; +import MetricData from '../metric-data'; import React from 'react'; import { @@ -10,7 +10,7 @@ import { MetricSettingsButton, MetricTitle, MetricView -} from './'; +} from '../'; const onButtonClick = () => {}; const onMetricSelect = () => {}; @@ -25,9 +25,9 @@ const withinRange = ( value, newMin, newMax, - precision = 2, oldMin = 0, - oldMax = 100 + oldMax = 100, + precision = 2 ) => { const normalisedValue = value - oldMin; const newRange = newMax - newMin; @@ -36,14 +36,24 @@ const withinRange = ( return newValue.toFixed(2); }; -const kbMetricData = MetricData.map((m) => ({ - firstQuartile: withinRange(m.firstQuartile, 1.55, 2.0), - thirdQuartile: withinRange(m.thirdQuartile, 1.55, 2.0), - median: withinRange(m.median, 1.55, 2.0), - max: withinRange(m.max, 1.55, 2.0), - min: withinRange(m.min, 1.55, 2.0) +const kbMetricValues = MetricData.values.map((m) => ({ + ...m, + // eslint-disable-next-line max-len + firstQuartile: withinRange(m.firstQuartile, 0, 100, MetricData.min, MetricData.max), + // eslint-disable-next-line max-len + thirdQuartile: withinRange(m.thirdQuartile, 0, 100, MetricData.min, MetricData.max), + median: withinRange(m.median, 0, 100, MetricData.min, MetricData.max), + max: withinRange(m.max, 0, 100, MetricData.min, MetricData.max), + min: withinRange(m.min, 0, 100, MetricData.min, MetricData.max) })); +const kbMetricData = { + ...MetricData, + min: 0, + max: 100, + values: kbMetricValues +}; + storiesOf('Metric', module) .add('Metric', () => (
@@ -62,11 +72,11 @@ storiesOf('Metric', module) @@ -84,11 +94,11 @@ storiesOf('Metric', module) @@ -106,11 +116,11 @@ storiesOf('Metric', module)
diff --git a/ui/src/components/metric/title.js b/ui/src/components/metric/full/title.js similarity index 70% rename from ui/src/components/metric/title.js rename to ui/src/components/metric/full/title.js index 719238ad..fc7c110d 100644 --- a/ui/src/components/metric/title.js +++ b/ui/src/components/metric/full/title.js @@ -1,6 +1,6 @@ -import { Baseline, typography } from '../../shared/composers'; -import { colors } from '../../shared/constants'; -import { remcalc } from '../../shared/functions'; +import { Baseline, typography } from '../../../shared/composers'; +import { colors } from '../../../shared/constants'; +import { remcalc } from '../../../shared/functions'; import styled from 'styled-components'; //margin: ${remcalc(18)} ${remcalc(24)} !important; diff --git a/ui/src/components/metric/full/view.js b/ui/src/components/metric/full/view.js new file mode 100644 index 00000000..61e446c1 --- /dev/null +++ b/ui/src/components/metric/full/view.js @@ -0,0 +1,33 @@ +import React from 'react'; +import styled from 'styled-components'; +import { Baseline } from '../../../shared/composers'; +import { boxes, colors } from '../../../shared/constants'; +import { remcalc } from '../../../shared/functions'; + +const Container = styled.div` + position: relative; + box-sizing: border-box; + margin: ${remcalc(24)} 0; + width: 100%; + max-width: ${remcalc(940)}; + box-shadow: ${boxes.bottomShaddow}; + border: 1px solid ${colors.base.grey}; + background-color: ${colors.base.white}; +`; + +const View = ({ + children, + ...props +}) => ( + + {children} + +); + +View.propTypes = { + children: React.PropTypes.node +}; + +export default Baseline( + View +); diff --git a/ui/src/components/metric/graph.js b/ui/src/components/metric/graph.js index 101930c1..c103ce43 100644 --- a/ui/src/components/metric/graph.js +++ b/ui/src/components/metric/graph.js @@ -3,28 +3,25 @@ import styled from 'styled-components'; import whisker from 'chartjs-chart-box-plot'; import moment from 'moment'; import Chart from 'chart.js'; -import { colors } from '../../shared/constants'; import { Baseline } from '../../shared/composers'; whisker(Chart); const Container = styled.div` position: relative; - height: 100%; - width: 100%; - background-color: ${colors.base.white}; `; class Graph extends React.Component { componentDidMount() { const { - yMax = 100, - yMin = 0, yMeasurement = '%' } = this.props; const { + axes, data, + yMax, + yMin, xMax, xMin, xUnitStepSize @@ -33,7 +30,7 @@ class Graph extends React.Component { this._chart = new Chart(this._refs.component, { type: 'whisker', responsive: true, - maintainAspectRatio: true, + maintainAspectRatio: false, data: { datasets: [{ data: data @@ -46,7 +43,7 @@ class Graph extends React.Component { }, scales: { xAxes: [{ - display: true, + display: axes, type: 'time', time: { unit: 'minute', @@ -59,7 +56,7 @@ class Graph extends React.Component { } }], yAxes: [{ - display: true, + display: axes, ticks: { min: yMin, max: yMax, @@ -103,49 +100,33 @@ class Graph extends React.Component { processData(props) { const { - data = [], - duration = 360 + data = {}, + axes = false } = props; - // I'm going to assume that data will be structured in 10min intervals... - // And that newest data will be at the end... - // Let's rock and roll! - // All this shizzle below needs to be recalculated on new props, yay! - const now = moment(); - // first time on scale x - const before = moment().subtract(duration, 'minutes'); - // remove leading data before first time on scale x - let dataWithTime = []; - if(data && data.length) { - const sliceIndex = data.length - 1 - duration/10; - const totalData = sliceIndex < 0 ? data : data.slice(sliceIndex); - // adjust time of first data, if there's less data than would fill the chart - const start = moment(before) - .add(duration - (totalData.length-1)*10, 'minutes'); - // add times to data - dataWithTime = totalData.map((d, i) => { - const add = i*10; - return Object.assign( - {}, - d, - { - x: moment(start).add(add, 'minutes').toDate() - } - ); - }); - } + const { + start, + end, + interval, + values, + max, + min + } = data; - // set min and max - const xMax = now.toDate(); - const xMin = before.toDate(); - // calculate stepsize - const xUnitStepSize = duration/6; + // check whether chartjs needs actual dates... + const mappedValues = values.map((value) => ({ + ...value, + x: moment(value.start).toDate() + })); return { - data: dataWithTime, - xMax, - xMin, - xUnitStepSize + axes, + data: mappedValues, + xMax: moment(end).toDate(), + xMin: moment(start).toDate(), + yMax: max, + yMin: min, + xUnitStepSize: interval // this is in milliseconds!!! }; } @@ -158,12 +139,18 @@ class Graph extends React.Component { } render() { + + const { + width, + height + } = this.props; + return ( ); @@ -171,11 +158,10 @@ class Graph extends React.Component { } Graph.propTypes = { - data: React.PropTypes.array, // eslint-disable-line react/no-unused-prop-types - duration: React.PropTypes.number, // eslint-disable-line react/no-unused-prop-types - yMax: React.PropTypes.number, - yMeasurement: React.PropTypes.string, - yMin: React.PropTypes.number + data: React.PropTypes.object, // eslint-disable-line react/no-unused-prop-types + height: React.PropTypes.number, + width: React.PropTypes.number, + yMeasurement: React.PropTypes.string }; export default Baseline( diff --git a/ui/src/components/metric/index.js b/ui/src/components/metric/index.js index fb513b66..626f736d 100644 --- a/ui/src/components/metric/index.js +++ b/ui/src/components/metric/index.js @@ -1,18 +1,12 @@ +export { default as MiniMetricMeta } from './mini/meta'; +export { default as MiniMetricTitle } from './mini/title'; +export { default as MiniMetricSubtitle } from './mini/subtitle'; -import MetricGraph from './graph'; -import MetricCloseButton from './close-button'; -import MetricHeader from './header'; -import MetricSelect from './select'; -import MetricSettingsButton from './settings-button'; -import MetricTitle from './title'; -import MetricView from './view'; +export { default as MetricCloseButton } from './full/close-button'; +export { default as MetricHeader } from './full/header'; +export { default as MetricSelect } from './full/select'; +export { default as MetricSettingsButton } from './full/settings-button'; +export { default as MetricTitle } from './full/title'; -export { - MetricGraph, - MetricCloseButton, - MetricHeader, - MetricSelect, - MetricSettingsButton, - MetricTitle, - MetricView -}; +export { default as MetricView } from './view'; +export { default as MetricGraph } from './graph'; diff --git a/ui/src/components/metric/metric-data.js b/ui/src/components/metric/metric-data.js index b3501858..00426b4f 100644 --- a/ui/src/components/metric/metric-data.js +++ b/ui/src/components/metric/metric-data.js @@ -1,309 +1,970 @@ -/*eslint-disable */ - -export default [{ - firstQuartile: 15, - thirdQuartile: 15, - median: 15, - max: 15, - min: 15, -}, { - firstQuartile: 26, - thirdQuartile: 26, - median: 26, - max: 26, - min: 26, -}, { - firstQuartile: 17, - thirdQuartile: 17, - median: 17, - max: 17, - min: 17, -}, { - firstQuartile: 15, - thirdQuartile: 25, - median: 19, - max: 19, - min: 20, -}, { - firstQuartile: 19, - thirdQuartile: 25, - median: 21, - max: 20, - min: 25, -}, { - firstQuartile: 24, - thirdQuartile: 30, - median: 25, - max: 26, - min: 27, -}, { - firstQuartile: 28, - thirdQuartile: 34, - median: 30, - max: 30, - min: 30, -}, { - firstQuartile: 30, - thirdQuartile: 45, - median: 35, - max: 40, - min: 40, -}, { - firstQuartile: 20, - thirdQuartile: 55, - median: 45, - max: 44, - min: 44, -}, { - firstQuartile: 55, - thirdQuartile: 55, - median: 55, - max: 55, - min: 55, -}, { - firstQuartile: 57, - thirdQuartile: 56, - median: 57, - max: 58, - min: 57, -}, { - firstQuartile: 57, - thirdQuartile: 56, - median: 56, - max: 56, - min: 56, -}, { - firstQuartile: 60, - thirdQuartile: 56, - median: 60, - max: 60, - min: 60, -}, { - firstQuartile: 57, - thirdQuartile: 57, - median: 57, - max: 57, - min: 57, -}, { - firstQuartile: 57, - thirdQuartile: 55, - median: 55, - max: 55, - min: 55, -}, { - firstQuartile: 20, - thirdQuartile: 45, - median: 45, - max: 45, - min: 45, -}, { - firstQuartile: 15, - thirdQuartile: 40, - median: 30, - max: 49, - min: 30, -}, { - firstQuartile: 15, - thirdQuartile: 15, - median: 15, - max: 15, - min: 15, -}, { - firstQuartile: 26, - thirdQuartile: 26, - median: 26, - max: 26, - min: 26, -}, { - firstQuartile: 17, - thirdQuartile: 17, - median: 17, - max: 17, - min: 17, -}, { - firstQuartile: 15, - thirdQuartile: 25, - median: 19, - max: 19, - min: 20, -}, { - firstQuartile: 19, - thirdQuartile: 25, - median: 21, - max: 20, - min: 25, -}, { - firstQuartile: 24, - thirdQuartile: 30, - median: 25, - max: 26, - min: 10, -}, { - firstQuartile: 28, - thirdQuartile: 34, - median: 30, - max: 30, - min: 30, -}, { - firstQuartile: 30, - thirdQuartile: 45, - median: 35, - max: 40, - min: 40, -}, { - firstQuartile: 20, - thirdQuartile: 55, - median: 45, - max: 44, - min: 44, -}, { - firstQuartile: 55, - thirdQuartile: 55, - median: 55, - max: 55, - min: 55, -}, { - firstQuartile: 57, - thirdQuartile: 56, - median: 57, - max: 58, - min: 57, -}, { - firstQuartile: 57, - thirdQuartile: 56, - median: 56, - max: 56, - min: 56, -}, { - firstQuartile: 60, - thirdQuartile: 56, - median: 60, - max: 60, - min: 60, -}, { - firstQuartile: 57, - thirdQuartile: 57, - median: 57, - max: 57, - min: 57, -}, { - firstQuartile: 57, - thirdQuartile: 55, - median: 55, - max: 55, - min: 55, -}, { - firstQuartile: 20, - thirdQuartile: 45, - median: 45, - max: 45, - min: 45, -}, { - firstQuartile: 15, - thirdQuartile: 40, - median: 30, - max: 49, - min: 30, -}, { - firstQuartile: 15, - thirdQuartile: 15, - median: 15, - max: 15, - min: 15, -}, { - firstQuartile: 26, - thirdQuartile: 26, - median: 26, - max: 26, - min: 26, -}, { - firstQuartile: 17, - thirdQuartile: 17, - median: 17, - max: 17, - min: 17, -}, { - firstQuartile: 15, - thirdQuartile: 25, - median: 19, - max: 19, - min: 20, -}, { - firstQuartile: 19, - thirdQuartile: 25, - median: 21, - max: 20, - min: 25, -}, { - firstQuartile: 24, - thirdQuartile: 30, - median: 25, - max: 26, - min: 27, -}, { - firstQuartile: 28, - thirdQuartile: 34, - median: 30, - max: 30, - min: 30, -}, { - firstQuartile: 30, - thirdQuartile: 45, - median: 35, - max: 40, - min: 40, -}, { - firstQuartile: 20, - thirdQuartile: 55, - median: 45, - max: 44, - min: 44, -}, { - firstQuartile: 55, - thirdQuartile: 55, - median: 55, - max: 55, - min: 55, -}, { - firstQuartile: 57, - thirdQuartile: 56, - median: 57, - max: 58, - min: 57, -}, { - firstQuartile: 57, - thirdQuartile: 56, - median: 56, - max: 56, - min: 56, -}, { - firstQuartile: 60, - thirdQuartile: 56, - median: 60, - max: 60, - min: 60, -}, { - firstQuartile: 57, - thirdQuartile: 57, - median: 57, - max: 57, - min: 57, -}, { - firstQuartile: 57, - thirdQuartile: 55, - median: 55, - max: 55, - min: 55, -}, { - firstQuartile: 20, - thirdQuartile: 45, - median: 45, - max: 45, - min: 45, -}, { - firstQuartile: 15, - thirdQuartile: 40, - median: 30, - max: 49, - min: 30, -}]; +/* eslint-disable */ +export default { + "start":1488969900000, + "end":1488970410000, + "duration":600000, + "interval":30000, + "min":23523328, + "max":70709248, + "values":[ + { + "start":1488969900000, + "end":1488969930000, + "firstQuartile":39251968, + "median":39776256, + "thirdQuartile":40300544, + "max":40300544, + "min":39251968, + "stddev":741455.2001894653 + }, + { + "start":1488969930000, + "end":1488969960000, + "firstQuartile":27455488, + "median":40038400, + "thirdQuartile":40824832, + "max":60747776, + "min":25620480, + "stddev":11452123.006266393 + }, + { + "start":1488969960000, + "end":1488969990000, + "firstQuartile":27193344, + "median":28504064, + "thirdQuartile":51310592, + "max":63893504, + "min":26669056, + "stddev":16085965.346082138 + }, + { + "start":1488969990000, + "end":1488970020000, + "firstQuartile":27455488, + "median":29290496, + "thirdQuartile":47902720, + "max":68087808, + "min":26669056, + "stddev":17819044.36996238 + }, + { + "start":1488970020000, + "end":1488970050000, + "firstQuartile":28241920, + "median":30339072, + "thirdQuartile":31911936, + "max":70709248, + "min":27193344, + "stddev":14602116.65169301 + }, + { + "start":1488970050000, + "end":1488970080000, + "firstQuartile":29028352, + "median":32174080, + "thirdQuartile":37154816, + "max":49737728, + "min":26669056, + "stddev":7637605.559385668 + }, + { + "start":1488970080000, + "end":1488970110000, + "firstQuartile":26669056, + "median":32698368, + "thirdQuartile":34271232, + "max":40300544, + "min":23523328, + "stddev":5426896.379647263 + }, + { + "start":1488970110000, + "end":1488970140000, + "firstQuartile":24047616, + "median":25882624, + "thirdQuartile":33222656, + "max":50786304, + "min":23523328, + "stddev":9808530.339984681 + }, + { + "start":1488970140000, + "end":1488970170000, + "firstQuartile":25096192, + "median":26406912, + "thirdQuartile":35581952, + "max":54456320, + "min":24571904, + "stddev":11128887.24062214 + }, + { + "start":1488970170000, + "end":1488970200000, + "firstQuartile":25358336, + "median":26406912, + "thirdQuartile":36106240, + "max":49737728, + "min":25096192, + "stddev":10016263.150522126 + }, + { + "start":1488970200000, + "end":1488970230000, + "firstQuartile":25882624, + "median":27455488, + "thirdQuartile":41873408, + "max":66514944, + "min":25096192, + "stddev":15961442.382523417 + }, + { + "start":1488970230000, + "end":1488970260000, + "firstQuartile":26669056, + "median":29290496, + "thirdQuartile":48427008, + "max":66514944, + "min":25096192, + "stddev":17983154.826659754 + }, + { + "start":1488970260000, + "end":1488970290000, + "firstQuartile":25096192, + "median":30076928, + "thirdQuartile":48689152, + "max":66514944, + "min":24047616, + "stddev":18230387.369211502 + }, + { + "start":1488970290000, + "end":1488970320000, + "firstQuartile":24571904, + "median":25620480, + "thirdQuartile":48689152, + "max":66514944, + "min":23523328, + "stddev":18979660.087844357 + }, + { + "start":1488970320000, + "end":1488970350000, + "firstQuartile":25096192, + "median":25620480, + "thirdQuartile":46329856, + "max":66514944, + "min":24047616, + "stddev":19103908.60208431 + }, + { + "start":1488970350000, + "end":1488970380000, + "firstQuartile":25620480, + "median":26144768, + "thirdQuartile":46854144, + "max":66514944, + "min":25096192, + "stddev":18780511.784335714 + }, + { + "start":1488970380000, + "end":1488970410000, + "firstQuartile":25882624, + "median":27193344, + "thirdQuartile":47378432, + "max":66514944, + "min":25620480, + "stddev":19955111.154610857 + }, + { + "start":1488970410000, + "end":1488970440000, + "firstQuartile":25882624, + "median":27193344, + "thirdQuartile":47378432, + "max":66514944, + "min":25620480, + "stddev":19955111.154610857 + } + ], + "__intervals":[ + { + "start":"2017-03-08T10:45:00.000Z", + "end":"2017-03-08T10:45:30.000Z", + "values":[ + { + "v":39251968, + "t":"2017-03-08T10:45:18.000Z" + }, + { + "v":40300544, + "t":"2017-03-08T10:45:18.000Z" + } + ], + "stats":{ + "start":1488969900000, + "end":1488969930000, + "firstQuartile":39251968, + "median":39776256, + "thirdQuartile":40300544, + "max":40300544, + "min":39251968, + "stddev":741455.2001894653 + } + }, + { + "start":"2017-03-08T10:45:30.000Z", + "end":"2017-03-08T10:46:00.000Z", + "values":[ + { + "v":27193344, + "t":"2017-03-08T10:45:33.000Z" + }, + { + "v":41349120, + "t":"2017-03-08T10:45:33.000Z" + }, + { + "v":39776256, + "t":"2017-03-08T10:45:33.000Z" + }, + { + "v":40300544, + "t":"2017-03-08T10:45:33.000Z" + }, + { + "v":60747776, + "t":"2017-03-08T10:45:48.000Z" + }, + { + "v":25620480, + "t":"2017-03-08T10:45:48.000Z" + }, + { + "v":27717632, + "t":"2017-03-08T10:45:48.000Z" + }, + { + "v":40300544, + "t":"2017-03-08T10:45:48.000Z" + } + ], + "stats":{ + "start":1488969930000, + "end":1488969960000, + "firstQuartile":27455488, + "median":40038400, + "thirdQuartile":40824832, + "max":60747776, + "min":25620480, + "stddev":11452123.006266393 + } + }, + { + "start":"2017-03-08T10:46:00.000Z", + "end":"2017-03-08T10:46:30.000Z", + "values":[ + { + "v":26669056, + "t":"2017-03-08T10:46:03.000Z" + }, + { + "v":27717632, + "t":"2017-03-08T10:46:03.000Z" + }, + { + "v":40300544, + "t":"2017-03-08T10:46:03.000Z" + }, + { + "v":62320640, + "t":"2017-03-08T10:46:03.000Z" + }, + { + "v":26669056, + "t":"2017-03-08T10:46:18.000Z" + }, + { + "v":27717632, + "t":"2017-03-08T10:46:18.000Z" + }, + { + "v":63893504, + "t":"2017-03-08T10:46:18.000Z" + }, + { + "v":29290496, + "t":"2017-03-08T10:46:18.000Z" + } + ], + "stats":{ + "start":1488969960000, + "end":1488969990000, + "firstQuartile":27193344, + "median":28504064, + "thirdQuartile":51310592, + "max":63893504, + "min":26669056, + "stddev":16085965.346082138 + } + }, + { + "start":"2017-03-08T10:46:30.000Z", + "end":"2017-03-08T10:47:00.000Z", + "values":[ + { + "v":65466368, + "t":"2017-03-08T10:46:33.000Z" + }, + { + "v":28241920, + "t":"2017-03-08T10:46:33.000Z" + }, + { + "v":26669056, + "t":"2017-03-08T10:46:33.000Z" + }, + { + "v":29814784, + "t":"2017-03-08T10:46:33.000Z" + }, + { + "v":28766208, + "t":"2017-03-08T10:46:48.000Z" + }, + { + "v":30339072, + "t":"2017-03-08T10:46:48.000Z" + }, + { + "v":26669056, + "t":"2017-03-08T10:46:48.000Z" + }, + { + "v":68087808, + "t":"2017-03-08T10:46:48.000Z" + } + ], + "stats":{ + "start":1488969990000, + "end":1488970020000, + "firstQuartile":27455488, + "median":29290496, + "thirdQuartile":47902720, + "max":68087808, + "min":26669056, + "stddev":17819044.36996238 + } + }, + { + "start":"2017-03-08T10:47:00.000Z", + "end":"2017-03-08T10:47:30.000Z", + "values":[ + { + "v":70709248, + "t":"2017-03-08T10:47:03.000Z" + }, + { + "v":27193344, + "t":"2017-03-08T10:47:03.000Z" + }, + { + "v":30863360, + "t":"2017-03-08T10:47:03.000Z" + }, + { + "v":29290496, + "t":"2017-03-08T10:47:03.000Z" + }, + { + "v":31911936, + "t":"2017-03-08T10:47:18.000Z" + }, + { + "v":27193344, + "t":"2017-03-08T10:47:18.000Z" + }, + { + "v":29814784, + "t":"2017-03-08T10:47:18.000Z" + }, + { + "v":31911936, + "t":"2017-03-08T10:47:18.000Z" + } + ], + "stats":{ + "start":1488970020000, + "end":1488970050000, + "firstQuartile":28241920, + "median":30339072, + "thirdQuartile":31911936, + "max":70709248, + "min":27193344, + "stddev":14602116.65169301 + } + }, + { + "start":"2017-03-08T10:47:30.000Z", + "end":"2017-03-08T10:48:00.000Z", + "values":[ + { + "v":31387648, + "t":"2017-03-08T10:47:33.000Z" + }, + { + "v":40300544, + "t":"2017-03-08T10:47:33.000Z" + }, + { + "v":26669056, + "t":"2017-03-08T10:47:33.000Z" + }, + { + "v":32436224, + "t":"2017-03-08T10:47:33.000Z" + }, + { + "v":34009088, + "t":"2017-03-08T10:47:48.000Z" + }, + { + "v":49737728, + "t":"2017-03-08T10:47:48.000Z" + }, + { + "v":31911936, + "t":"2017-03-08T10:47:48.000Z" + }, + { + "v":26669056, + "t":"2017-03-08T10:47:48.000Z" + } + ], + "stats":{ + "start":1488970050000, + "end":1488970080000, + "firstQuartile":29028352, + "median":32174080, + "thirdQuartile":37154816, + "max":49737728, + "min":26669056, + "stddev":7637605.559385668 + } + }, + { + "start":"2017-03-08T10:48:00.000Z", + "end":"2017-03-08T10:48:30.000Z", + "values":[ + { + "v":26669056, + "t":"2017-03-08T10:48:03.000Z" + }, + { + "v":34009088, + "t":"2017-03-08T10:48:03.000Z" + }, + { + "v":34533376, + "t":"2017-03-08T10:48:03.000Z" + }, + { + "v":32436224, + "t":"2017-03-08T10:48:03.000Z" + }, + { + "v":26669056, + "t":"2017-03-08T10:48:18.000Z" + }, + { + "v":23523328, + "t":"2017-03-08T10:48:18.000Z" + }, + { + "v":40300544, + "t":"2017-03-08T10:48:18.000Z" + }, + { + "v":32960512, + "t":"2017-03-08T10:48:18.000Z" + } + ], + "stats":{ + "start":1488970080000, + "end":1488970110000, + "firstQuartile":26669056, + "median":32698368, + "thirdQuartile":34271232, + "max":40300544, + "min":23523328, + "stddev":5426896.379647263 + } + }, + { + "start":"2017-03-08T10:48:30.000Z", + "end":"2017-03-08T10:49:00.000Z", + "values":[ + { + "v":23523328, + "t":"2017-03-08T10:48:33.000Z" + }, + { + "v":50786304, + "t":"2017-03-08T10:48:33.000Z" + }, + { + "v":26669056, + "t":"2017-03-08T10:48:33.000Z" + }, + { + "v":24047616, + "t":"2017-03-08T10:48:33.000Z" + }, + { + "v":24047616, + "t":"2017-03-08T10:48:48.000Z" + }, + { + "v":27193344, + "t":"2017-03-08T10:48:48.000Z" + }, + { + "v":39251968, + "t":"2017-03-08T10:48:48.000Z" + }, + { + "v":25096192, + "t":"2017-03-08T10:48:48.000Z" + } + ], + "stats":{ + "start":1488970110000, + "end":1488970140000, + "firstQuartile":24047616, + "median":25882624, + "thirdQuartile":33222656, + "max":50786304, + "min":23523328, + "stddev":9808530.339984681 + } + }, + { + "start":"2017-03-08T10:49:00.000Z", + "end":"2017-03-08T10:49:30.000Z", + "values":[ + { + "v":25096192, + "t":"2017-03-08T10:49:03.000Z" + }, + { + "v":54456320, + "t":"2017-03-08T10:49:03.000Z" + }, + { + "v":27193344, + "t":"2017-03-08T10:49:03.000Z" + }, + { + "v":24571904, + "t":"2017-03-08T10:49:03.000Z" + }, + { + "v":43446272, + "t":"2017-03-08T10:49:18.000Z" + }, + { + "v":25620480, + "t":"2017-03-08T10:49:18.000Z" + }, + { + "v":25096192, + "t":"2017-03-08T10:49:18.000Z" + }, + { + "v":27717632, + "t":"2017-03-08T10:49:18.000Z" + } + ], + "stats":{ + "start":1488970140000, + "end":1488970170000, + "firstQuartile":25096192, + "median":26406912, + "thirdQuartile":35581952, + "max":54456320, + "min":24571904, + "stddev":11128887.24062214 + } + }, + { + "start":"2017-03-08T10:49:30.000Z", + "end":"2017-03-08T10:50:00.000Z", + "values":[ + { + "v":25096192, + "t":"2017-03-08T10:49:33.000Z" + }, + { + "v":25620480, + "t":"2017-03-08T10:49:33.000Z" + }, + { + "v":26669056, + "t":"2017-03-08T10:49:33.000Z" + }, + { + "v":49737728, + "t":"2017-03-08T10:49:33.000Z" + }, + { + "v":26144768, + "t":"2017-03-08T10:49:48.000Z" + }, + { + "v":27193344, + "t":"2017-03-08T10:49:48.000Z" + }, + { + "v":25096192, + "t":"2017-03-08T10:49:48.000Z" + }, + { + "v":45019136, + "t":"2017-03-08T10:49:48.000Z" + } + ], + "stats":{ + "start":1488970170000, + "end":1488970200000, + "firstQuartile":25358336, + "median":26406912, + "thirdQuartile":36106240, + "max":49737728, + "min":25096192, + "stddev":10016263.150522126 + } + }, + { + "start":"2017-03-08T10:50:00.000Z", + "end":"2017-03-08T10:50:30.000Z", + "values":[ + { + "v":54456320, + "t":"2017-03-08T10:50:03.000Z" + }, + { + "v":27717632, + "t":"2017-03-08T10:50:03.000Z" + }, + { + "v":25096192, + "t":"2017-03-08T10:50:03.000Z" + }, + { + "v":26669056, + "t":"2017-03-08T10:50:03.000Z" + }, + { + "v":29290496, + "t":"2017-03-08T10:50:18.000Z" + }, + { + "v":66514944, + "t":"2017-03-08T10:50:18.000Z" + }, + { + "v":25096192, + "t":"2017-03-08T10:50:18.000Z" + }, + { + "v":27193344, + "t":"2017-03-08T10:50:18.000Z" + } + ], + "stats":{ + "start":1488970200000, + "end":1488970230000, + "firstQuartile":25882624, + "median":27455488, + "thirdQuartile":41873408, + "max":66514944, + "min":25096192, + "stddev":15961442.382523417 + } + }, + { + "start":"2017-03-08T10:50:30.000Z", + "end":"2017-03-08T10:51:00.000Z", + "values":[ + { + "v":25096192, + "t":"2017-03-08T10:50:33.000Z" + }, + { + "v":28241920, + "t":"2017-03-08T10:50:33.000Z" + }, + { + "v":66514944, + "t":"2017-03-08T10:50:33.000Z" + }, + { + "v":29814784, + "t":"2017-03-08T10:50:33.000Z" + }, + { + "v":66514944, + "t":"2017-03-08T10:50:48.000Z" + }, + { + "v":25096192, + "t":"2017-03-08T10:50:48.000Z" + }, + { + "v":30339072, + "t":"2017-03-08T10:50:48.000Z" + }, + { + "v":28766208, + "t":"2017-03-08T10:50:48.000Z" + } + ], + "stats":{ + "start":1488970230000, + "end":1488970260000, + "firstQuartile":26669056, + "median":29290496, + "thirdQuartile":48427008, + "max":66514944, + "min":25096192, + "stddev":17983154.826659754 + } + }, + { + "start":"2017-03-08T10:51:00.000Z", + "end":"2017-03-08T10:51:30.000Z", + "values":[ + { + "v":25096192, + "t":"2017-03-08T10:51:03.000Z" + }, + { + "v":30863360, + "t":"2017-03-08T10:51:03.000Z" + }, + { + "v":66514944, + "t":"2017-03-08T10:51:03.000Z" + }, + { + "v":29814784, + "t":"2017-03-08T10:51:03.000Z" + }, + { + "v":30339072, + "t":"2017-03-08T10:51:18.000Z" + }, + { + "v":24047616, + "t":"2017-03-08T10:51:18.000Z" + }, + { + "v":66514944, + "t":"2017-03-08T10:51:18.000Z" + }, + { + "v":25096192, + "t":"2017-03-08T10:51:18.000Z" + } + ], + "stats":{ + "start":1488970260000, + "end":1488970290000, + "firstQuartile":25096192, + "median":30076928, + "thirdQuartile":48689152, + "max":66514944, + "min":24047616, + "stddev":18230387.369211502 + } + }, + { + "start":"2017-03-08T10:51:30.000Z", + "end":"2017-03-08T10:52:00.000Z", + "values":[ + { + "v":30863360, + "t":"2017-03-08T10:51:33.000Z" + }, + { + "v":25620480, + "t":"2017-03-08T10:51:33.000Z" + }, + { + "v":66514944, + "t":"2017-03-08T10:51:33.000Z" + }, + { + "v":24047616, + "t":"2017-03-08T10:51:33.000Z" + }, + { + "v":23523328, + "t":"2017-03-08T10:51:48.000Z" + }, + { + "v":25620480, + "t":"2017-03-08T10:51:48.000Z" + }, + { + "v":66514944, + "t":"2017-03-08T10:51:48.000Z" + }, + { + "v":25096192, + "t":"2017-03-08T10:51:48.000Z" + } + ], + "stats":{ + "start":1488970290000, + "end":1488970320000, + "firstQuartile":24571904, + "median":25620480, + "thirdQuartile":48689152, + "max":66514944, + "min":23523328, + "stddev":18979660.087844357 + } + }, + { + "start":"2017-03-08T10:52:00.000Z", + "end":"2017-03-08T10:52:30.000Z", + "values":[ + { + "v":24047616, + "t":"2017-03-08T10:52:03.000Z" + }, + { + "v":25620480, + "t":"2017-03-08T10:52:03.000Z" + }, + { + "v":25620480, + "t":"2017-03-08T10:52:03.000Z" + }, + { + "v":66514944, + "t":"2017-03-08T10:52:03.000Z" + }, + { + "v":24571904, + "t":"2017-03-08T10:52:18.000Z" + }, + { + "v":25620480, + "t":"2017-03-08T10:52:18.000Z" + }, + { + "v":26144768, + "t":"2017-03-08T10:52:18.000Z" + }, + { + "v":66514944, + "t":"2017-03-08T10:52:18.000Z" + } + ], + "stats":{ + "start":1488970320000, + "end":1488970350000, + "firstQuartile":25096192, + "median":25620480, + "thirdQuartile":46329856, + "max":66514944, + "min":24047616, + "stddev":19103908.60208431 + } + }, + { + "start":"2017-03-08T10:52:30.000Z", + "end":"2017-03-08T10:53:00.000Z", + "values":[ + { + "v":66514944, + "t":"2017-03-08T10:52:33.000Z" + }, + { + "v":25096192, + "t":"2017-03-08T10:52:33.000Z" + }, + { + "v":26669056, + "t":"2017-03-08T10:52:33.000Z" + }, + { + "v":25620480, + "t":"2017-03-08T10:52:33.000Z" + }, + { + "v":66514944, + "t":"2017-03-08T10:52:48.000Z" + }, + { + "v":27193344, + "t":"2017-03-08T10:52:48.000Z" + }, + { + "v":25620480, + "t":"2017-03-08T10:52:48.000Z" + }, + { + "v":25620480, + "t":"2017-03-08T10:52:48.000Z" + } + ], + "stats":{ + "start":1488970350000, + "end":1488970380000, + "firstQuartile":25620480, + "median":26144768, + "thirdQuartile":46854144, + "max":66514944, + "min":25096192, + "stddev":18780511.784335714 + } + }, + { + "start":"2017-03-08T10:53:00.000Z", + "end":"2017-03-08T10:53:30.000Z", + "values":[ + { + "v":28241920, + "t":"2017-03-08T10:53:03.000Z" + }, + { + "v":66514944, + "t":"2017-03-08T10:53:03.000Z" + }, + { + "v":26144768, + "t":"2017-03-08T10:53:03.000Z" + }, + { + "v":25620480, + "t":"2017-03-08T10:53:03.000Z" + } + ], + "stats":{ + "start":1488970380000, + "end":1488970410000, + "firstQuartile":25882624, + "median":27193344, + "thirdQuartile":47378432, + "max":66514944, + "min":25620480, + "stddev":19955111.154610857 + } + } + ] +} +/* eslint-enable */ diff --git a/ui/src/components/mini-metric/meta.js b/ui/src/components/metric/mini/meta.js similarity index 76% rename from ui/src/components/mini-metric/meta.js rename to ui/src/components/metric/mini/meta.js index 04ab7b9b..6a4b8a7d 100644 --- a/ui/src/components/mini-metric/meta.js +++ b/ui/src/components/metric/mini/meta.js @@ -1,6 +1,6 @@ -import { remcalc } from '../../shared/functions'; -import { Baseline } from '../../shared/composers'; -import { colors } from '../../shared/constants'; +import { remcalc } from '../../../shared/functions'; +import { Baseline } from '../../../shared/composers'; +import { colors } from '../../../shared/constants'; import styled from 'styled-components'; import React from 'react'; diff --git a/ui/src/components/mini-metric/story.js b/ui/src/components/metric/mini/story.js similarity index 58% rename from ui/src/components/mini-metric/story.js rename to ui/src/components/metric/mini/story.js index a4608885..b53bcd60 100644 --- a/ui/src/components/mini-metric/story.js +++ b/ui/src/components/metric/mini/story.js @@ -1,46 +1,58 @@ import { storiesOf } from '@kadira/storybook'; -import MiniMetricData from '../list/mini-metric-data'; -import Row from '../row'; -import Column from '../column'; +import MetricData from '../metric-data'; +import Row from '../../row'; +import Column from '../../column'; import React from 'react'; import { - MiniMetricGraph, + MetricGraph, MiniMetricMeta, MiniMetricTitle, MiniMetricSubtitle, - MiniMetricView -} from './'; + MetricView +} from '../'; storiesOf('Metric (Mini)', module) .add('Mini Metric', () => ( - + Memory: 54% (1280/3000 MB) - - + + - + Memory: 54% (1280/3000 MB) - - + + - + Memory: 54% (1280/3000 MB) - - + + )); diff --git a/ui/src/components/mini-metric/subtitle.js b/ui/src/components/metric/mini/subtitle.js similarity index 64% rename from ui/src/components/mini-metric/subtitle.js rename to ui/src/components/metric/mini/subtitle.js index e39a2f85..929b142a 100644 --- a/ui/src/components/mini-metric/subtitle.js +++ b/ui/src/components/metric/mini/subtitle.js @@ -1,6 +1,6 @@ -import { remcalc } from '../../shared/functions'; -import { Baseline, typography } from '../../shared/composers'; -import { colors } from '../../shared/constants'; +import { remcalc } from '../../../shared/functions'; +import { Baseline, typography } from '../../../shared/composers'; +import { colors } from '../../../shared/constants'; import styled from 'styled-components'; const Subtitle = styled.p` diff --git a/ui/src/components/mini-metric/title.js b/ui/src/components/metric/mini/title.js similarity index 64% rename from ui/src/components/mini-metric/title.js rename to ui/src/components/metric/mini/title.js index 9af65c8a..28d67297 100644 --- a/ui/src/components/mini-metric/title.js +++ b/ui/src/components/metric/mini/title.js @@ -1,6 +1,6 @@ -import { remcalc } from '../../shared/functions'; -import { Baseline, typography } from '../../shared/composers'; -import { colors } from '../../shared/constants'; +import { remcalc } from '../../../shared/functions'; +import { Baseline, typography } from '../../../shared/composers'; +import { colors } from '../../../shared/constants'; import styled from 'styled-components'; const Title = styled.h3` diff --git a/ui/src/components/mini-metric/view.js b/ui/src/components/metric/mini/view.js similarity index 82% rename from ui/src/components/mini-metric/view.js rename to ui/src/components/metric/mini/view.js index 4d060029..d325f105 100644 --- a/ui/src/components/mini-metric/view.js +++ b/ui/src/components/metric/mini/view.js @@ -1,6 +1,6 @@ -import { remcalc } from '../../shared/functions'; -import { Baseline } from '../../shared/composers'; -import { colors } from '../../shared/constants'; +import { remcalc } from '../../../shared/functions'; +import { Baseline } from '../../../shared/composers'; +import { colors } from '../../../shared/constants'; import styled from 'styled-components'; import React from 'react'; diff --git a/ui/src/components/metric/view.js b/ui/src/components/metric/view.js index 42984109..0e675cb6 100644 --- a/ui/src/components/metric/view.js +++ b/ui/src/components/metric/view.js @@ -1,30 +1,25 @@ import React from 'react'; -import styled from 'styled-components'; import { Baseline } from '../../shared/composers'; -import { boxes, colors } from '../../shared/constants'; -import { remcalc } from '../../shared/functions'; - -const Container = styled.div` - position: relative; - box-sizing: border-box; - margin: ${remcalc(24)} 0; - width: 100%; - max-width: ${remcalc(940)}; - box-shadow: ${boxes.bottomShaddow}; - border: 1px solid ${colors.base.grey}; -`; +import { default as FullView } from './full/view'; +import { default as MiniView } from './mini/view'; const View = ({ children, + mini, ...props -}) => ( - +}) => mini ? ( + {children} - + +) : ( + + {children} + ); View.propTypes = { - children: React.PropTypes.node + children: React.PropTypes.node, + mini: React.PropTypes.bool }; export default Baseline( diff --git a/ui/src/components/mini-metric/graph.js b/ui/src/components/mini-metric/graph.js deleted file mode 100644 index 8481c6f8..00000000 --- a/ui/src/components/mini-metric/graph.js +++ /dev/null @@ -1,110 +0,0 @@ -import whisker from 'chartjs-chart-box-plot'; -import styled from 'styled-components'; -import buildArray from 'build-array'; -import { remcalc } from '../../shared/functions'; -import { Baseline } from '../../shared/composers'; -import Chart from 'chart.js'; -import React from 'react'; - -whisker(Chart); - -const Container = styled.div` - position: relative; - height: ${remcalc(72)}; - width: 100%; -`; - -const Canvas = styled.canvas` - position: absolute; - bottom: 0; -`; - -class Graph extends React.Component { - componentDidMount() { - const { - data = [], - labels = 0, - max = 100, - min = 0 - } = this.props; - - const _labels = !Array.isArray(labels) - ? buildArray(labels || data.length).map((v, i) => '') - : labels; - - this._chart = new Chart(this._refs.component, { - type: 'whisker', - responsive: true, - maintainAspectRatio: true, - options: { - scales: { - xAxes: [{ - display: false, - barPercentage: 1.0, - categoryPercentage: 1.0 - }], - yAxes: [{ - display: false, - ticks: { - min: min, - max: max - } - }] - }, - legend: { - display: false - } - }, - data: { - labels: _labels, - datasets: [{ - data - }] - } - }); - } - componentWillReceiveProps(nextProps) { - const { - data = [], - labels = 0 - } = this.props; - - const _labels = !Array.isArray(labels) - ? buildArray(labels || data.length).map((v, i) => '') - : labels; - - this._chart.data.datasets = [{ - data - }]; - - this._chart.data.labels = _labels; - this._chart.update(0); - } - ref(name) { - this._refs = this._refs || {}; - - return (el) => { - this._refs[name] = el; - }; - } - render() { - return ( - - - - ); - } -} - -Graph.propTypes = { - data: React.PropTypes.array, - labels: React.PropTypes.number, - max: React.PropTypes.number, - min: React.PropTypes.number -}; - -export default Baseline( - Graph -); diff --git a/ui/src/components/mini-metric/index.js b/ui/src/components/mini-metric/index.js deleted file mode 100644 index d9e8629f..00000000 --- a/ui/src/components/mini-metric/index.js +++ /dev/null @@ -1,13 +0,0 @@ -import MiniMetricGraph from './graph'; -import MiniMetricMeta from './meta'; -import MiniMetricTitle from './title'; -import MiniMetricSubtitle from './subtitle'; -import MiniMetricView from './view'; - -export { - MiniMetricGraph, - MiniMetricMeta, - MiniMetricTitle, - MiniMetricSubtitle, - MiniMetricView -};