From afdef33aff2941406e0d77e307b08653a4b8d597 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Tue, 10 Jan 2017 18:06:01 +0000 Subject: [PATCH] split mini-metrics into multiple components --- ui/src/components/mini-metric/graph.js | 94 ++++++++ ui/src/components/mini-metric/index.js | 171 +-------------- ui/src/components/mini-metric/meta.js | 44 ++++ ui/src/components/mini-metric/subtitle.js | 9 + ui/src/components/mini-metric/title.js | 18 ++ ui/src/components/mini-metric/view.js | 27 +++ ui/stories/index.js | 252 ++++++++++------------ 7 files changed, 316 insertions(+), 299 deletions(-) create mode 100644 ui/src/components/mini-metric/graph.js create mode 100644 ui/src/components/mini-metric/meta.js create mode 100644 ui/src/components/mini-metric/subtitle.js create mode 100644 ui/src/components/mini-metric/title.js create mode 100644 ui/src/components/mini-metric/view.js diff --git a/ui/src/components/mini-metric/graph.js b/ui/src/components/mini-metric/graph.js new file mode 100644 index 00000000..ccf02606 --- /dev/null +++ b/ui/src/components/mini-metric/graph.js @@ -0,0 +1,94 @@ +const buildArray = require('build-array'); +const Chart = require('chart.js'); +const React = require('react'); +const whisker = require('chartjs-chart-box-plot'); + +whisker(Chart); + +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 +}; + +module.exports = Graph; diff --git a/ui/src/components/mini-metric/index.js b/ui/src/components/mini-metric/index.js index 1ea1ce0d..96d27b77 100644 --- a/ui/src/components/mini-metric/index.js +++ b/ui/src/components/mini-metric/index.js @@ -1,166 +1,7 @@ -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'); -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 { - datasets = [], - labels = 0, - max = 100, - min = 0 - } = this.props; - - const _labels = !Array.isArray(labels) - ? buildArray(labels).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: datasets - } - }); - } - componentWillReceiveProps(nextProps) { - const { - datasets = [], - labels = 0 - } = this.props; - - this._chart.data.datasets = datasets; - this._chart.data.labels = buildArray(labels).map((v, i) => ''); - this._chart.update(0); - } - ref(name) { - this._refs = this._refs || {}; - - return (el) => { - this._refs[name] = el; - }; - } - render() { - const { - name, - } = this.props; - - return ( - - - -

{name}: 54%

-

(1280/3000 MB)

- - - - - - ); - } -} - -MiniMetric.propTypes = { - datasets: React.PropTypes.array, - labels: React.PropTypes.number, - max: React.PropTypes.number, - min: React.PropTypes.number, - name: React.PropTypes.string, +module.exports = { + MiniMetricGraph: require('./graph'), + MiniMetricMeta: require('./meta'), + MiniMetricTitle: require('./title'), + MiniMetricSubtitle: require('./subtitle'), + MiniMetricView: require('./view') }; - -module.exports = MiniMetric; diff --git a/ui/src/components/mini-metric/meta.js b/ui/src/components/mini-metric/meta.js new file mode 100644 index 00000000..a80fadef --- /dev/null +++ b/ui/src/components/mini-metric/meta.js @@ -0,0 +1,44 @@ +const constants = require('../../shared/constants'); +const React = require('react'); +const Styled = require('styled-components'); + +const { + colors +} = constants; + +const { + default: styled +} = Styled; + +const OuterBox = styled.div` + height: 38px; + padding: 8px 12px; + border-bottom: 1px 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}; +`; + +const Meta = (props) => ( + + + {props.children} + + +); + +Meta.propTypes = { + children: React.PropTypes.node +}; + +module.exports = Meta; diff --git a/ui/src/components/mini-metric/subtitle.js b/ui/src/components/mini-metric/subtitle.js new file mode 100644 index 00000000..7acbe708 --- /dev/null +++ b/ui/src/components/mini-metric/subtitle.js @@ -0,0 +1,9 @@ +const Styled = require('styled-components'); + +const { + default: styled +} = Styled; + +module.exports = styled.p` + margin: 0; +`; diff --git a/ui/src/components/mini-metric/title.js b/ui/src/components/mini-metric/title.js new file mode 100644 index 00000000..428d5155 --- /dev/null +++ b/ui/src/components/mini-metric/title.js @@ -0,0 +1,18 @@ +const constants = require('../../shared/constants'); +const Styled = require('styled-components'); + +const { + colors +} = constants; + +const { + default: styled +} = Styled; + +module.exports = styled.h3` + margin: 0; + font-size: 14px; + font-weight: 600; + line-height: 1.29; + color: ${colors.semibold}; +`; diff --git a/ui/src/components/mini-metric/view.js b/ui/src/components/mini-metric/view.js new file mode 100644 index 00000000..124dc855 --- /dev/null +++ b/ui/src/components/mini-metric/view.js @@ -0,0 +1,27 @@ +const constants = require('../../shared/constants'); +const Styled = require('styled-components'); + +const { + colors +} = constants; + +const { + default: styled +} = Styled; + +module.exports = 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; + content: ''; + background-image: + linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(216, 216, 216, 0)); + } +`; diff --git a/ui/stories/index.js b/ui/stories/index.js index f7f171d5..d831dba0 100644 --- a/ui/stories/index.js +++ b/ui/stories/index.js @@ -27,7 +27,13 @@ const { ListItemView, ListItemGroupView }, - MiniMetric, + MiniMetric: { + MiniMetricGraph, + MiniMetricMeta, + MiniMetricTitle, + MiniMetricSubtitle, + MiniMetricView + }, Modal, Notificaton, Pagination, @@ -406,141 +412,119 @@ storiesOf('Widget', module) )); -const colors = { - perc: 'rgba(54, 74, 205, 0.2)', - alt: 'rgba(245, 93, 93, 0.2)' -}; storiesOf('Metrics', module) .add('Mini Metric', () => ( - + + + Memory: 54% + (1280/3000 MB) + + + )); storiesOf('ListItem', module)