ashie/elstat
1
1
Fork 0
Code Issues Pull requests Releases Wiki Activity

switch to recharts

Browse source 
* i'm actually done. this library has everything good
This commit is contained in:
Skip R. 2018-07-13 22:03:12 -07:00
parent 4fc4604496
commit 1e4e04c025
No known key found for this signature in database
GPG key ID: 1508C19D7436A26D
5 changed files with 145 additions and 180 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

200
priv/frontend/package-lock.json generated
View file

@ -1,6 +1,6 @@
{
"name": "elstatus",
"version": "0.1.0",
"version": "0.0.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@ -34,48 +34,6 @@
"prop-types": "^15.5.10"
}
},
"@nivo/core": {
"version": "0.42.1",
"resolved": "https://registry.npmjs.org/@nivo/core/-/core-0.42.1.tgz",
"integrity": "sha512-T3DgbV9x6snbHxNQ2vWZYJRCnI6iUqh9A6Kn1Fsy1L7Sn97fsf89e1qMp0CpILhyJu7Fj+VXRYtJwby0wH6GAA==",
"requires": {
"d3-color": "^1.0.3",
"d3-format": "^1.2.0",
"d3-hierarchy": "^1.1.5",
"d3-interpolate": "^1.1.5",
"d3-scale": "^1.0.6",
"d3-scale-chromatic": "^1.1.1",
"d3-shape": "^1.2.0",
"lodash": "^4.17.4",
"react-measure": "^2.0.2",
"react-motion": "^0.5.2",
"recompose": "^0.26.0"
}
},
"@nivo/legends": {
"version": "0.42.0",
"resolved": "https://registry.npmjs.org/@nivo/legends/-/legends-0.42.0.tgz",
"integrity": "sha512-t82aKNaFtbY0mlE12caiSkXml73APMibH+gKsXECwhSutfGfgQzUbqBjPsNKJcMiWfG46noJ1MrFhDB3a6204g==",
"requires": {
"lodash": "^4.17.4",
"recompose": "^0.26.0"
}
},
"@nivo/line": {
"version": "0.42.1",
"resolved": "https://registry.npmjs.org/@nivo/line/-/line-0.42.1.tgz",
"integrity": "sha512-X/nvNvwMqz10hACBL/owCONDeG78occ6Er0ay6/1n2h+Dm6zn2p6hiFyvu7QtsdwGeHOC5sePcz9O44bycbtoQ==",
"requires": {
"@nivo/core": "0.42.1",
"@nivo/legends": "0.42.0",
"d3-format": "^1.2.0",
"d3-scale": "^1.0.6",
"d3-shape": "^1.2.0",
"lodash": "^4.17.4",
"react-motion": "^0.5.2",
"recompose": "^0.26.0"
}
},
"abab": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/abab/-/abab-1.0.4.tgz",
@ -1827,11 +1785,6 @@
}
}
},
"change-emitter": {
"version": "0.1.6",
"resolved": "https://registry.npmjs.org/change-emitter/-/change-emitter-0.1.6.tgz",
"integrity": "sha1-6LL+PX8at9aaMhma/5HqaTFAlRU="
},
"chardet": {
"version": "0.4.2",
"resolved": "https://registry.npmjs.org/chardet/-/chardet-0.4.2.tgz",
@ -1948,6 +1901,11 @@
}
}
},
"classnames": {
"version": "2.2.5",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.5.tgz",
"integrity": "sha1-+zgB1FNGdknvNgPH1hoCvRKb3m0="
},
"clean-css": {
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.1.11.tgz",
@ -2590,11 +2548,6 @@
"resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.3.0.tgz",
"integrity": "sha512-ycfLEIzHVZC3rOvuBOKVyQXSiUyCDjeAPIj9n/wugrr+s5AcTQC2Bz6aKkubG7rQaQF0SGW/OV4UEJB9nfioFg=="
},
"d3-hierarchy": {
"version": "1.1.6",
"resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-1.1.6.tgz",
"integrity": "sha512-nn4bhBnwWnMSoZgkBXD7vRyZ0xVUsNMQRKytWYHhP1I4qHw+qzApCTgSQTZqMdf4XXZbTMqA59hFusga+THA/g=="
},
"d3-interpolate": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.2.0.tgz",
@ -2609,9 +2562,9 @@
"integrity": "sha1-JB6xhJvZ6egCHA0KeZ+KDo5EF2Q="
},
"d3-scale": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-1.0.7.tgz",
"integrity": "sha512-KvU92czp2/qse5tUfGms6Kjig0AhHOwkzXG0+PqIJB3ke0WUv088AHMZI0OssO9NCkXt4RP8yju9rpH8aGB7Lw==",
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-1.0.6.tgz",
"integrity": "sha1-vOGdqA06DPQiyVQ64zIghiILNO0=",
"requires": {
"d3-array": "^1.2.0",
"d3-collection": "1",
@ -2622,15 +2575,6 @@
"d3-time-format": "2"
}
},
"d3-scale-chromatic": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-1.3.0.tgz",
"integrity": "sha512-YwMbiaW2bStWvQFByK8hA6hk7ToWflspIo2TRukCqERd8isiafEMBXmwfh8c7/0Z94mVvIzIveRLVC6RAjhgeA==",
"requires": {
"d3-color": "1",
"d3-interpolate": "1"
}
},
"d3-shape": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.2.0.tgz",
@ -2896,6 +2840,11 @@
}
}
},
"dom-helpers": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.3.1.tgz",
"integrity": "sha512-2Sm+JaYn74OiTM2wHvxJOo3roiq/h25Yi69Fqk269cNUwIXsCvATB6CRSFC9Am/20G2b28hGv/+7NiWydIrPvg=="
},
"dom-serializer": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.0.tgz",
@ -4567,11 +4516,6 @@
"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
"integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w=="
},
"get-node-dimensions": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/get-node-dimensions/-/get-node-dimensions-1.2.1.tgz",
"integrity": "sha512-2MSPMu7S1iOTL+BOa6K1S62hB2zUAYNF/lV0gSVlOaacd087lc6nR1H1r0e3B1CerTo+RceOmi1iJW+vp21xcQ=="
},
"get-stdin": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
@ -4868,11 +4812,6 @@
"minimalistic-crypto-utils": "^1.0.1"
}
},
"hoist-non-react-statics": {
"version": "2.5.5",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
"integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
},
"home-or-tmp": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz",
@ -6631,6 +6570,11 @@
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
"integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg=="
},
"lodash-es": {
"version": "4.17.10",
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.10.tgz",
"integrity": "sha512-iesFYPmxYYGTcmQK0sL8bX3TGHyM6b2qREaB4kamHfQyfPJP0xgoGxp19nsH16nsfquLdiyKyX3mQkfiSGV8Rg=="
},
"lodash._reinterpolate": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
@ -9022,32 +8966,10 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-4.0.0.tgz",
"integrity": "sha512-FlsPxavEyMuR6TjVbSSywovXSEyOg6ZDj5+Z8nbsRl9EkOzAhEIcS+GLoQDC5fz/t9suhUXWmUrOBrgeUvrMxw=="
},
"react-measure": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/react-measure/-/react-measure-2.0.2.tgz",
"integrity": "sha1-ByqaX6/AHfutwfpfsJ/DUQN/Y2w=",
"requires": {
"get-node-dimensions": "^1.2.0",
"prop-types": "^15.5.10",
"resize-observer-polyfill": "^1.4.2"
}
},
"react-motion": {
"version": "0.5.2",
"resolved": "https://registry.npmjs.org/react-motion/-/react-motion-0.5.2.tgz",
"integrity": "sha512-9q3YAvHoUiWlP3cK0v+w1N5Z23HXMj4IF4YuvjvWegWqNPfLXsOBE/V7UvQGpXxHFKRQQcNcVQE31g9SB/6qgQ==",
"requires": {
"performance-now": "^0.2.0",
"prop-types": "^15.5.8",
"raf": "^3.1.0"
},
"dependencies": {
"performance-now": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz",
"integrity": "sha1-M+8wxcd9TqIcWlOGnZG1bY8lVeU="
}
}
"react-lifecycles-compat": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
},
"react-placeholder": {
"version": "3.0.1",
@ -9057,6 +8979,14 @@
"prop-types": "^15.6.0"
}
},
"react-resize-detector": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/react-resize-detector/-/react-resize-detector-1.1.0.tgz",
"integrity": "sha512-68KVcQlhcWQGXMAie82YueCa4f4yqwEoiQbVyYlSgJEin1zMtNBLLeU/+6FLNf1TTgjwSfpbMTJTw/uU0HNgtQ==",
"requires": {
"prop-types": "^15.5.10"
}
},
"react-scripts": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-1.1.4.tgz",
@ -9118,6 +9048,28 @@
}
}
},
"react-smooth": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-1.0.0.tgz",
"integrity": "sha1-sp2+vd3bBtIbWwiWIWf7nqwYl9g=",
"requires": {
"lodash": "~4.17.4",
"prop-types": "^15.6.0",
"raf": "^3.2.0",
"react-transition-group": "^2.2.1"
}
},
"react-transition-group": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.4.0.tgz",
"integrity": "sha512-Xv5d55NkJUxUzLCImGSanK8Cl/30sgpOEMGc5m86t8+kZwrPxPCPcFqyx83kkr+5Lz5gs6djuvE5By+gce+VjA==",
"requires": {
"dom-helpers": "^3.3.1",
"loose-envify": "^1.3.1",
"prop-types": "^15.6.2",
"react-lifecycles-compat": "^3.0.4"
}
},
"read-pkg": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
@ -9181,17 +9133,37 @@
"set-immediate-shim": "^1.0.1"
}
},
"recompose": {
"version": "0.26.0",
"resolved": "https://registry.npmjs.org/recompose/-/recompose-0.26.0.tgz",
"integrity": "sha512-KwOu6ztO0mN5vy3+zDcc45lgnaUoaQse/a5yLVqtzTK13czSWnFGmXbQVmnoMgDkI5POd1EwIKSbjU1V7xdZog==",
"recharts": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/recharts/-/recharts-1.0.1.tgz",
"integrity": "sha512-FYKL6eGAxSDm6t32MlgxKHRz/yTPzbxOS9vg/EFwANA2kVbPTabMBNPL7OTJl0NZHKMUr1/L/1Dh6d8HWpOpPQ==",
"requires": {
"change-emitter": "^0.1.2",
"fbjs": "^0.8.1",
"hoist-non-react-statics": "^2.3.1",
"symbol-observable": "^1.0.4"
"classnames": "2.2.5",
"core-js": "2.5.1",
"d3-interpolate": "^1.1.5",
"d3-scale": "1.0.6",
"d3-shape": "1.2.0",
"lodash": "~4.17.4",
"lodash-es": "~4.17.4",
"prop-types": "^15.6.0",
"react-resize-detector": "1.1.0",
"react-smooth": "1.0.0",
"recharts-scale": "0.3.2",
"reduce-css-calc": "1.3.0"
},
"dependencies": {
"core-js": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.1.tgz",
"integrity": "sha1-rmh03GaTd4m4B1T/VCjfZoGcpQs="
}
}
},
"recharts-scale": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.3.2.tgz",
"integrity": "sha1-2sdiFxSkdl0VLLKtvDDHO4MSCMk="
},
"recursive-readdir": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.1.tgz",
@ -9453,11 +9425,6 @@
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
},
"resize-observer-polyfill": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz",
"integrity": "sha512-M2AelyJDVR/oLnToJLtuDJRBBWUGUvvGigj1411hXhAdyFWqMaqHp7TixW3FpiLuVaikIcR1QL+zqoJoZlOgpg=="
},
"resolve": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.6.0.tgz",
@ -10277,11 +10244,6 @@
"serviceworker-cache-polyfill": "^4.0.0"
}
},
"symbol-observable": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
"integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
},
"symbol-tree": {
"version": "3.2.2",
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.2.tgz",

4
priv/frontend/package.json
View file

@ -7,13 +7,13 @@
"@fortawesome/fontawesome-svg-core": "^1.2.0-14",
"@fortawesome/free-solid-svg-icons": "^5.1.0-11",
"@fortawesome/react-fontawesome": "0.1.0-11",
"@nivo/line": "^0.42.1",
"ms": "^2.1.1",
"prop-types": "^15.6.2",
"react": "^16.4.0",
"react-dom": "^16.4.0",
"react-placeholder": "^3.0.1",
"react-scripts": "1.1.4"
"react-scripts": "1.1.4",
"recharts": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",

12
priv/frontend/src/components/Graph.css
View file

@ -1,4 +1,14 @@
.graph-container {
width: 100%;
height: 10rem;
}
.recharts-tooltip-wrapper .recharts-default-tooltip {
padding: 0 0.5rem !important;
border-radius: 0.2rem;
font-size: 0.85rem;
opacity: 0.85;
}
.recharts-tooltip-item-value {
font-family: PragmataPro, Menlo, "DejaVu Sans Mono", monospace;
}

107
priv/frontend/src/components/Graph.js
View file

@ -2,7 +2,16 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ms from 'ms';
import { ResponsiveLine } from '@nivo/line';
import {
ResponsiveContainer,
AreaChart,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Area,
ReferenceLine,
} from 'recharts';
import './Graph.css';
@ -30,20 +39,12 @@ export default class Graph extends Component {
}
processData() {
const { data: unprocessedData } = this.props;
const { data } = this.props;
const data = unprocessedData.map(([timestamp, latency]) => ({
x: timestamp,
y: latency,
})).sort(({ x: a }, { x: b }) => a - b);
return [
{
id: 'latency',
color: 'hsl(220, 100%, 75%)',
data,
},
];
return data.map(([timestamp, latency]) => ({
timestamp,
latency,
})).sort(({ timestamp: a }, { timestamp: b }) => a - b);
}
isSmallScreen() {
@ -51,51 +52,43 @@ export default class Graph extends Component {
}
render() {
const leftAxis = {
format: (d) => `${d}ms`,
tickCount: 3,
legend: 'latency',
legendPosition: 'center',
legendOffset: -55,
tickSize: 0,
};
const minutesAllocated = [];
return (
<div className="graph-container">
<ResponsiveLine
data={this.processData()}
margin={{ top: 30, left: this.isSmallScreen() ? 0 : 70, bottom: 50 }}
maxY="auto"
curve="monotoneX"
tooltipFormat={(d) => `${d}ms`}
axisLeft={this.isSmallScreen() ? null : leftAxis}
axisBottom={{
format: (epoch) => {
const interval = this.isSmallScreen() ? 7 : 5;
const minutesAgo = Math.floor((Date.now() - epoch) / (1000 * 60));
if (minutesAgo % interval !== 0 || minutesAgo === 0
|| minutesAllocated.includes(minutesAgo)) {
return '';
}
minutesAllocated.push(minutesAgo);
return ms(Date.now() - epoch);
},
tickSize: 0,
legend: 'time ago',
legendPosition: 'center',
legendOffset: 40,
}}
enableDots={false}
enableArea
/>
<ResponsiveContainer width="100%" height={175}>
<AreaChart
data={this.processData()}
>
<XAxis
dataKey="timestamp"
tickFormatter={(tick) => ms(Date.now() - tick)}
tickLine={false}
/>
<YAxis
dataKey="latency"
tickLine={false}
/>
<CartesianGrid strokeDasharray="1 1" />
<Tooltip
isAnimationActive={false}
formatter={(value) => `${value}ms`}
label="DAB"
separator=": "
labelFormatter={() => null}
/>
<ReferenceLine
y={1000}
label="1s"
stroke="pink"
/>
<Area
type="monotone"
dataKey="latency"
stroke="hsla(200, 100%, 55%, 1)"
fill="hsl(200, 100%, 85%)"
isAnimationActive={false}
/>
</AreaChart>
</ResponsiveContainer>
</div>
);
}

2
priv/frontend/src/components/ServicePlaceholder.js
View file

@ -38,7 +38,7 @@ const ServicePlaceholder = () => (
<ReactPlaceholder
type="rect"
ready={false}
style={{ width: '100%', height: '160px', marginTop: '1rem' }}
style={{ width: '100%', height: '175px', marginTop: '1rem' }}
showLoadingAnimation
>
{' '}