From 8cb26623f8292954328bc5e700c3e07471146ab8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Tue, 10 Jan 2017 19:12:50 +0000 Subject: [PATCH] make MiniMetrics almost responsive --- ui/src/components/mini-metric/graph.js | 31 ++- ui/src/components/mini-metric/meta.js | 23 +- ui/src/components/mini-metric/subtitle.js | 17 ++ ui/src/components/mini-metric/title.js | 10 +- ui/src/components/mini-metric/view.js | 48 +++-- ui/stories/index.js | 246 ++++++++++++---------- 6 files changed, 231 insertions(+), 144 deletions(-) diff --git a/ui/src/components/mini-metric/graph.js b/ui/src/components/mini-metric/graph.js index ccf02606..2cff5813 100644 --- a/ui/src/components/mini-metric/graph.js +++ b/ui/src/components/mini-metric/graph.js @@ -1,10 +1,31 @@ const buildArray = require('build-array'); const Chart = require('chart.js'); +const fns = require('../../shared/functions'); const React = require('react'); +const Styled = require('styled-components'); const whisker = require('chartjs-chart-box-plot'); whisker(Chart); +const { + remcalc +} = fns; + +const { + default: styled +} = Styled; + +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 { @@ -75,11 +96,11 @@ class Graph extends React.Component { } render() { return ( - + + + ); } } diff --git a/ui/src/components/mini-metric/meta.js b/ui/src/components/mini-metric/meta.js index a80fadef..985f2809 100644 --- a/ui/src/components/mini-metric/meta.js +++ b/ui/src/components/mini-metric/meta.js @@ -1,4 +1,5 @@ const constants = require('../../shared/constants'); +const fns = require('../../shared/functions'); const React = require('react'); const Styled = require('styled-components'); @@ -6,27 +7,23 @@ const { colors } = constants; +const { + remcalc +} = fns; + const { default: styled } = Styled; const OuterBox = styled.div` - height: 38px; - padding: 8px 12px; - border-bottom: 1px solid ${colors.seperator}; + height: ${remcalc(53)}; + padding: ${remcalc(8)} ${remcalc(12)}; + border-bottom: ${remcalc(1)} solid ${colors.seperator}; `; const InnerBox = styled.div` - width: 136px; - height: 36px; - font-family: 'Libre Franklin', sans-serif; - font-size: 12px; - font-weight: normal; - font-style: normal; - font-stretch: normal; - line-height: 18px; - text-align: right; - color: ${colors.regular}; + width: 100%; + height: ${remcalc(36)}; `; const Meta = (props) => ( diff --git a/ui/src/components/mini-metric/subtitle.js b/ui/src/components/mini-metric/subtitle.js index 7acbe708..119d076b 100644 --- a/ui/src/components/mini-metric/subtitle.js +++ b/ui/src/components/mini-metric/subtitle.js @@ -1,9 +1,26 @@ +const constants = require('../../shared/constants'); +const fns = require('../../shared/functions'); const Styled = require('styled-components'); +const { + remcalc +} = fns; + +const { + colors +} = constants; + const { default: styled } = Styled; module.exports = styled.p` margin: 0; + text-align: right; + font-size: ${remcalc(12)}; + line-height: ${remcalc(18)}; + font-weight: normal; + font-style: normal; + font-stretch: normal; + color: ${colors.regular}; `; diff --git a/ui/src/components/mini-metric/title.js b/ui/src/components/mini-metric/title.js index 428d5155..339d7a44 100644 --- a/ui/src/components/mini-metric/title.js +++ b/ui/src/components/mini-metric/title.js @@ -1,18 +1,26 @@ const constants = require('../../shared/constants'); +const fns = require('../../shared/functions'); const Styled = require('styled-components'); const { colors } = constants; +const { + remcalc +} = fns; + const { default: styled } = Styled; module.exports = styled.h3` margin: 0; - font-size: 14px; + text-align: right; + font-size: ${remcalc(14)}; font-weight: 600; + font-style: normal; line-height: 1.29; color: ${colors.semibold}; + margin-bottom: ${remcalc(3)} !important; `; diff --git a/ui/src/components/mini-metric/view.js b/ui/src/components/mini-metric/view.js index 124dc855..f0d13005 100644 --- a/ui/src/components/mini-metric/view.js +++ b/ui/src/components/mini-metric/view.js @@ -1,27 +1,47 @@ const constants = require('../../shared/constants'); +const fns = require('../../shared/functions'); +const React = require('react'); const Styled = require('styled-components'); const { colors } = constants; +const { + remcalc +} = fns; + const { default: styled } = Styled; -module.exports = styled.div` - height: 127px; - width: 158px; +const Container = styled.div` + position: relative; + height: 100%; + width: 100%; background-color: ${colors.miniBackground}; - border: solid 1px ${colors.borderSecondary}; - - &::before { - position: absolute; - z-index: 1; - width: 9px; - height: 127px; - content: ''; - background-image: - linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(216, 216, 216, 0)); - } + border: solid ${remcalc(1)} ${colors.borderSecondary}; `; + +const Shadow = styled.div` + position: absolute; + height: 100%; + width: ${remcalc(9)}; + left: 0; + top: 0; + background-image: + linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(216, 216, 216, 0)); +`; + +const View = (props) => ( + + + {props.children} + +); + +View.propTypes = { + children: React.PropTypes.node +}; + +module.exports = View; \ No newline at end of file diff --git a/ui/stories/index.js b/ui/stories/index.js index d831dba0..c320f950 100644 --- a/ui/stories/index.js +++ b/ui/stories/index.js @@ -412,119 +412,143 @@ storiesOf('Widget', module) )); +const minMetricData = [{ + 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, +}]; + storiesOf('Metrics', module) .add('Mini Metric', () => ( - - - Memory: 54% - (1280/3000 MB) - - - + + + + + + Memory: 54% + (1280/3000 MB) + + + + + + + + Memory: 54% + (1280/3000 MB) + + + + + + + + Memory: 54% + (1280/3000 MB) + + + + + + )); storiesOf('ListItem', module)