github/weave-scope
1
0
Fork 0
mirror of https://github.com/weaveworks/scope.git synced 2026-03-03 02:00:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1230 from weaveworks/1224-format-sparkline

Browse Source 
Apply format to tooltips in sparkline hovers
This commit is contained in:
David
2016-04-07 09:14:17 +02:00
parent 0badd9384f d803e00b00
commit b7c2db6cc2
2 changed files with 7 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/app/scripts/components/node-details/node-details-health-item.js
View File

@@ -9,7 +9,7 @@ function NodeDetailsHealthItem(props) {
<div className="node-details-health-item">
<div className="node-details-health-item-value">{formatMetric(props.value, props)}</div>
<div className="node-details-health-item-sparkline">
<Sparkline data={props.samples} max={props.max}
<Sparkline data={props.samples} max={props.max} format={props.format}
first={props.first} last={props.last} />
</div>
<div className="node-details-health-item-label">{props.label}</div>

9
client/app/scripts/components/sparkline.js
View File

@@ -2,6 +2,8 @@
import React from 'react';
import d3 from 'd3';
import { formatMetricSvg } from '../utils/string-utils';
const parseDate = d3.time.format.iso.parse;
export default class Sparkline extends React.Component {
@@ -56,10 +58,11 @@ export default class Sparkline extends React.Component {
const lastValue = data[data.length - 1].value;
const lastX = this.x(lastDate);
const lastY = this.y(lastValue);
const min = formatMetricSvg(d3.min(data, d => d.value), this.props);
const max = formatMetricSvg(d3.max(data, d => d.value), this.props);
const mean = formatMetricSvg(d3.mean(data, d => d.value), this.props);
const title = `Last ${d3.round((lastDate - firstDate) / 1000)} seconds, ` +
`${data.length} samples, min: ${d3.round(d3.min(data, d => d.value), 2)}` +
`, max: ${d3.round(d3.max(data, d => d.value), 2)}` +
`, mean: ${d3.round(d3.mean(data, d => d.value), 2)}`;
`${data.length} samples, min: ${min}, max: ${max}, mean: ${mean}`;
return {title, lastX, lastY, data};
}