From 1e50e4d7aae126fdd02fa5cbe32a07ed52ca5118 Mon Sep 17 00:00:00 2001 From: Tom Gallacher Date: Fri, 6 Jan 2017 11:06:02 +0000 Subject: [PATCH] Update styles for MiniMetric's --- ui/.storybook/head.html | 1 + ui/src/components/mini-metric/index.js | 95 ++++++++++++++++-- ui/src/shared/constants/colors.js | 14 ++- ui/stories/index.js | 134 ++++++++++++++++++++++++- 4 files changed, 236 insertions(+), 8 deletions(-) create mode 100644 ui/.storybook/head.html diff --git a/ui/.storybook/head.html b/ui/.storybook/head.html new file mode 100644 index 00000000..fe250b6b --- /dev/null +++ b/ui/.storybook/head.html @@ -0,0 +1 @@ + diff --git a/ui/src/components/mini-metric/index.js b/ui/src/components/mini-metric/index.js index 4427cd2d..1ea1ce0d 100644 --- a/ui/src/components/mini-metric/index.js +++ b/ui/src/components/mini-metric/index.js @@ -1,4 +1,14 @@ const React = require('react'); +const Styled = require('styled-components'); +const constants = require('../../shared/constants'); + +const { + colors +} = constants; + +const { + default: styled +} = Styled; const buildArray = require('build-array'); const Chart = require('chart.js'); @@ -6,6 +16,62 @@ const whisker = require('chartjs-chart-box-plot'); whisker(Chart); +const StyledDiv = styled.div` + height: 127px; + width: 158px; + background-color: ${colors.miniBackground}; + border: solid 1px ${colors.borderSecondary}; + + &::before { + position: absolute; + z-index: 1; + width: 9px; + height: 127px; + background-image: + linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(216, 216, 216, 0)); + content: ''; + } +`; + +const Devider = styled.div` + width: 158px; + height: 1px; + background-color: ${colors.seperator} +`; + +const TextMetric = styled.div` + height: 38px; + padding: 8px 12px; +`; + +const InnerTextBox = 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}; + + & p { + margin: 0; + } + + & h3 { + margin: 0; + font-size: 14px; + font-weight: 600; + line-height: 1.29; + color: ${colors.semibold}; + } +`; + +const StyledCanvas = styled.canvas` +`; + class MiniMetric extends React.Component { componentDidMount() { const { @@ -22,13 +88,16 @@ class MiniMetric extends React.Component { 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 @@ -36,7 +105,7 @@ class MiniMetric extends React.Component { }] }, legend: { - display: true + display: false } }, data: { @@ -63,12 +132,25 @@ class MiniMetric extends React.Component { }; } render() { + const { + name, + } = this.props; + return ( - + + + +

{name}: 54%

+

(1280/3000 MB)

+
+
+ + +
); } } @@ -78,6 +160,7 @@ MiniMetric.propTypes = { labels: React.PropTypes.number, max: React.PropTypes.number, min: React.PropTypes.number, + name: React.PropTypes.string, }; module.exports = MiniMetric; diff --git a/ui/src/shared/constants/colors.js b/ui/src/shared/constants/colors.js index 879644c3..8026a1d9 100644 --- a/ui/src/shared/constants/colors.js +++ b/ui/src/shared/constants/colors.js @@ -1,3 +1,8 @@ +const fonts = { + semibold: '#464646', + regular: '#646464' +}; + const brandPrimary = { brandPrimary: '#3B46CC', brandPrimaryDark: '#1838C0', @@ -32,11 +37,18 @@ const notifications = { warningLight: '#FFFAED', }; +const metrics = { + miniBackground: '#F3F4F9', + seperator: '#D9DEF3' +}; + const colors = { ...brandPrimary, ...brandSecondary, ...brandInactive, - ...notifications + ...notifications, + ...metrics, + ...fonts }; module.exports = colors; diff --git a/ui/stories/index.js b/ui/stories/index.js index 55cda12f..2e37db61 100644 --- a/ui/stories/index.js +++ b/ui/stories/index.js @@ -306,7 +306,139 @@ storiesOf('Widget', module) )); +const colors = { + perc: 'rgba(54, 74, 205, 0.2)', + alt: 'rgba(245, 93, 93, 0.2)' +}; storiesOf('Metrics', module) .add('mini', () => ( - + ));