Skip to content

GitLab

Commit 2648fde7 authored by Jakub Beránek's avatar Jakub Beránek
Browse files

ENH: add warning about missing attributes in measurements

parent 83620d12
Hide whitespace changes
Inline Side-by-side
dashboard/src/components/charts/chart/bar-chart/bar-chart.tsx
View file @ 2648fde7
import chroma from 'chroma-js';
import memoizeOne from 'memoize-one';
import React, {PureComponent, RefObject} from 'react';
import {Alert} from 'reactstrap';
import {
AxisDomain,
Bar,
......@@ -72,6 +73,7 @@ export class BarChart extends PureComponent<Props>
this.props.xAxis, yAxes, this.props.dateFormat, this.props.sortMode);
const empty = data.length === 0;
let showMissingAttributesWarning = false;
if (empty)
{
data = [{
......@@ -80,39 +82,46 @@ export class BarChart extends PureComponent<Props>
hasDateAxis: false,
measurements: []
}];
showMissingAttributesWarning = this.props.measurements.length > 0;
}
const yDomain: [AxisDomain, AxisDomain] = this.props.fitToDomain ? ['dataMin', 'auto'] : [0, 'auto'];
return (
<ReBarChart data={data}
width={this.props.width}
height={this.props.height}
ref={this.props.chartRef}>
<CartesianGrid strokeDasharray='3 3' />
<XAxis
dataKey='x'
interval='preserveStartEnd'
height={40}
tick={props => <Tick {...props} />}>
{empty && <Label value='No data available' position='center' />}
</XAxis>
<YAxis domain={yDomain} tickFormatter={formatYAxis} />
{!empty && <Tooltip wrapperStyle={{ zIndex: 999 }}
offset={50}
content={<BarTooltip xAxis={this.props.xAxis} />} />}
<Legend align='right' />
{yAxes.map((axis, index) =>
<Bar key={`${axis}.${index}`}
isAnimationActive={false}
dataKey={`items["${axis}"].average`}
stackId='0'
onClick={this.handleBarClick}
maxBarSize={60}
name={formatKey(axis)}
fill={BAR_COLORS.getColor(index)} />
)}
</ReBarChart>
<div>
{showMissingAttributesWarning &&
<Alert color='warning'>
Some measurements are not displayed because of missing X or Y axis value.
</Alert>}
<ReBarChart data={data}
width={this.props.width}
height={this.props.height}
ref={this.props.chartRef}>
<CartesianGrid strokeDasharray='3 3' />
<XAxis
dataKey='x'
interval='preserveStartEnd'
height={40}
tick={props => <Tick {...props} />}>
{empty && <Label value='No data available' position='center' />}
</XAxis>
<YAxis domain={yDomain} tickFormatter={formatYAxis} />
{!empty && <Tooltip wrapperStyle={{ zIndex: 999 }}
offset={50}
content={<BarTooltip xAxis={this.props.xAxis} />} />}
<Legend align='right' />
{yAxes.map((axis, index) =>
<Bar key={`${axis}.${index}`}
isAnimationActive={false}
dataKey={`items["${axis}"].average`}
stackId='0'
onClick={this.handleBarClick}
maxBarSize={60}
name={formatKey(axis)}
fill={BAR_COLORS.getColor(index)} />
)}
</ReBarChart>
</div>
);
}
......
dashboard/src/components/charts/chart/line-chart/line-chart.tsx
View file @ 2648fde7
import chroma from 'chroma-js';
import memoizeOne from 'memoize-one';
import {reduce} from 'ramda';
import React, {PureComponent, RefObject} from 'react';
import {Alert} from 'reactstrap';
import {
AxisDomain,
CartesianGrid,
......@@ -89,37 +91,47 @@ export class LineChart extends PureComponent<Props>
let {points, groups} = this.lineData(this.props.datasets, this.props.groupMode, this.props.xAxis,
this.props.dateFormat, this.props.settings.showAverageTrend, this.props.sortMode);
let showMissingAttributesWarning = false;
const empty = points.length === 0;
if (empty)
{
points = [{x: '', data: []}];
const measurementLength = reduce((count, dataset) => count + dataset.measurements.length, 0,
this.props.datasets);
showMissingAttributesWarning = !this.props.preview && measurementLength > 0;
}
const yDomain: [AxisDomain, AxisDomain] = this.props.fitToDomain ? ['dataMin', 'auto'] : [0, 'auto'];
return (
<ReLineChart data={points}
width={this.props.width}
height={this.props.height}
ref={this.props.chartRef}>
<CartesianGrid stroke='#CCCCCC' />
<XAxis
dataKey='x'
interval='preserveStartEnd'
tickLine={!preview}
tick={props => !this.props.preview && <Tick {...props} />}
padding={{left: padding, right: padding}}>
{empty && <Label value='No data available' position='center' />}
</XAxis>
<YAxis padding={{bottom: padding, top: padding}}
domain={yDomain}
tickFormatter={formatYAxis} />
{!preview && <Tooltip wrapperStyle={{ zIndex: 999 }}
offset={50}
content={<PointTooltip xAxis={this.props.xAxis} />} />}
{!preview && <Legend content={<LineLegend groups={groups} />} />}
{groups.map((g, i) => this.renderLine(g, i, preview))}
</ReLineChart>
<div>
{showMissingAttributesWarning &&
<Alert color='warning'>
Some measurements are not displayed because of missing X or Y axis value.
</Alert>}
<ReLineChart data={points}
width={this.props.width}
height={this.props.height}
ref={this.props.chartRef}>
<CartesianGrid stroke='#CCCCCC' />
<XAxis
dataKey='x'
interval='preserveStartEnd'
tickLine={!preview}
tick={props => !this.props.preview && <Tick {...props} />}
padding={{left: padding, right: padding}}>
{empty && <Label value='No data available' position='center' />}
</XAxis>
<YAxis padding={{bottom: padding, top: padding}}
domain={yDomain}
tickFormatter={formatYAxis} />
{!preview && <Tooltip wrapperStyle={{ zIndex: 999 }}
offset={50}
content={<PointTooltip xAxis={this.props.xAxis} />} />}
{!preview && <Legend content={<LineLegend groups={groups} />} />}
{groups.map((g, i) => this.renderLine(g, i, preview))}
</ReLineChart>
</div>
);
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment