Skip to content

N
nexpie-grafana-theme
Commit fa5fad5c by Alexander Zobnin
Options

graph legend: review fixes

parent 5a4c3629
Showing with 32 additions and 48 deletions
public/app/plugins/panel/graph/Legend/Legend.tsx
...@@ -58,7 +58,7 @@ export type LegendComponentProps = LegendProps & ...@@ -58,7 +58,7 @@ export type LegendComponentProps = LegendProps &
LegendComponentEventHandlers; LegendComponentEventHandlers;
interface LegendState { interface LegendState {
hiddenSeries: any; hiddenSeries: { [seriesAlias: string]: boolean };
} }
export class GraphLegend extends React.PureComponent<GraphLegendProps, LegendState> { export class GraphLegend extends React.PureComponent<GraphLegendProps, LegendState> {
...@@ -127,7 +127,7 @@ export class GraphLegend extends React.PureComponent<GraphLegendProps, LegendSta ...@@ -127,7 +127,7 @@ export class GraphLegend extends React.PureComponent<GraphLegendProps, LegendSta
} }
// check if every other series is hidden // check if every other series is hidden
const alreadyExclusive = _.every(this.props.seriesList, value => { const alreadyExclusive = this.props.seriesList.every(value => {
if (value.alias === series.alias) { if (value.alias === series.alias) {
return true; return true;
} }
...@@ -137,12 +137,12 @@ export class GraphLegend extends React.PureComponent<GraphLegendProps, LegendSta ...@@ -137,12 +137,12 @@ export class GraphLegend extends React.PureComponent<GraphLegendProps, LegendSta
if (alreadyExclusive) { if (alreadyExclusive) {
// remove all hidden series // remove all hidden series
_.each(this.props.seriesList, value => { this.props.seriesList.forEach(value => {
delete hiddenSeries[value.alias]; delete hiddenSeries[value.alias];
}); });
} else { } else {
// hide all but this serie // hide all but this serie
_.each(this.props.seriesList, value => { this.props.seriesList.forEach(value => {
if (value.alias === series.alias) { if (value.alias === series.alias) {
return; return;
} }
...@@ -155,13 +155,26 @@ export class GraphLegend extends React.PureComponent<GraphLegendProps, LegendSta ...@@ -155,13 +155,26 @@ export class GraphLegend extends React.PureComponent<GraphLegendProps, LegendSta
} }
render() { render() {
const { optionalClass, rightSide, sideWidth, sort, sortDesc, hideEmpty, hideZero } = this.props; const {
const { values, min, max, avg, current, total } = this.props; optionalClass,
rightSide,
sideWidth,
sort,
sortDesc,
hideEmpty,
hideZero,
values,
min,
max,
avg,
current,
total,
} = this.props;
const seriesValuesProps = { values, min, max, avg, current, total }; const seriesValuesProps = { values, min, max, avg, current, total };
const hiddenSeries = this.state.hiddenSeries; const hiddenSeries = this.state.hiddenSeries;
const seriesHideProps = { hideEmpty, hideZero }; const seriesHideProps = { hideEmpty, hideZero };
const sortProps = { sort, sortDesc }; const sortProps = { sort, sortDesc };
const seriesList = _.filter(this.sortLegend(), series => !series.hideFromLegend(seriesHideProps)); const seriesList = this.sortLegend().filter(series => !series.hideFromLegend(seriesHideProps));
const legendClass = `${this.props.alignAsTable ? 'graph-legend-table' : ''} ${optionalClass}`; const legendClass = `${this.props.alignAsTable ? 'graph-legend-table' : ''} ${optionalClass}`;
// Set min-width if side style and there is a value, otherwise remove the CSS property // Set min-width if side style and there is a value, otherwise remove the CSS property
...@@ -198,7 +211,9 @@ class LegendSeriesList extends React.PureComponent<LegendComponentProps> { ...@@ -198,7 +211,9 @@ class LegendSeriesList extends React.PureComponent<LegendComponentProps> {
const seriesValuesProps = { values, min, max, avg, current, total }; const seriesValuesProps = { values, min, max, avg, current, total };
return seriesList.map((series, i) => ( return seriesList.map((series, i) => (
<LegendItem <LegendItem
key={i} // This trick required because TimeSeries.id is not unique (it's just TimeSeries.alias).
// In future would be good to make id unique across the series list.
key={`${series.id}-${i}`}
series={series} series={series}
hidden={hiddenSeries[series.alias]} hidden={hiddenSeries[series.alias]}
{...seriesValuesProps} {...seriesValuesProps}
...@@ -253,7 +268,7 @@ class LegendTable extends React.PureComponent<Partial<LegendComponentProps>> { ...@@ -253,7 +268,7 @@ class LegendTable extends React.PureComponent<Partial<LegendComponentProps>> {
</tr> </tr>
{seriesList.map((series, i) => ( {seriesList.map((series, i) => (
<LegendItem <LegendItem
key={i} key={`${series.id}-${i}`}
asTable={true} asTable={true}
series={series} series={series}
hidden={hiddenSeries[series.alias]} hidden={hiddenSeries[series.alias]}
......
public/app/plugins/panel/graph/Legend/LegendSeriesItem.tsx
import React from 'react'; import React from 'react';
import classNames from 'classnames';
import { TimeSeries } from 'app/core/core'; import { TimeSeries } from 'app/core/core';
import { SeriesColorPicker } from 'app/core/components/colorpicker/SeriesColorPicker'; import { SeriesColorPicker } from 'app/core/components/colorpicker/SeriesColorPicker';
...@@ -61,18 +62,6 @@ export class LegendItem extends React.PureComponent<LegendItemProps, LegendItemS ...@@ -61,18 +62,6 @@ export class LegendItem extends React.PureComponent<LegendItemProps, LegendItemS
this.forceUpdate(); this.forceUpdate();
}; };
getOptionSeriesCSSClasses() {
const { series, hidden } = this.props;
const classes = [];
if (series.yaxis === 2) {
classes.push('graph-legend-series--right-y');
}
if (hidden) {
classes.push('graph-legend-series-hidden');
}
return classes.join(' ');
}
renderLegendValues() { renderLegendValues() {
const { series, asTable } = this.props; const { series, asTable } = this.props;
const legendValueItems = []; const legendValueItems = [];
...@@ -88,8 +77,11 @@ export class LegendItem extends React.PureComponent<LegendItemProps, LegendItemS ...@@ -88,8 +77,11 @@ export class LegendItem extends React.PureComponent<LegendItemProps, LegendItemS
} }
render() { render() {
const { series, values, asTable } = this.props; const { series, values, asTable, hidden } = this.props;
const seriesOptionClasses = this.getOptionSeriesCSSClasses(); const seriesOptionClasses = classNames({
'graph-legend-series-hidden': hidden,
'graph-legend-series--right-y': series.yaxis === 2,
});
const valueItems = values ? this.renderLegendValues() : []; const valueItems = values ? this.renderLegendValues() : [];
const seriesLabel = ( const seriesLabel = (
<LegendSeriesLabel <LegendSeriesLabel
...@@ -173,25 +165,13 @@ class LegendSeriesIcon extends React.PureComponent<LegendSeriesIconProps, Legend ...@@ -173,25 +165,13 @@ class LegendSeriesIcon extends React.PureComponent<LegendSeriesIconProps, Legend
onToggleAxis: () => {}, onToggleAxis: () => {},
}; };
constructor(props) {
super(props);
this.state = {
color: this.props.color,
};
}
onColorChange = color => {
this.setState({ color: color });
this.props.onColorChange(color);
};
render() { render() {
return ( return (
<SeriesColorPicker <SeriesColorPicker
optionalClass="graph-legend-icon" optionalClass="graph-legend-icon"
yaxis={this.props.yaxis} yaxis={this.props.yaxis}
color={this.state.color} color={this.props.color}
onColorChange={this.onColorChange} onColorChange={this.props.onColorChange}
onToggleAxis={this.props.onToggleAxis} onToggleAxis={this.props.onToggleAxis}
> >
<SeriesIcon color={this.props.color} /> <SeriesIcon color={this.props.color} />
......
public/sass/components/_panel_graph.scss
...@@ -61,13 +61,6 @@ ...@@ -61,13 +61,6 @@
position: relative; position: relative;
} }
// @TODO: delete unused class
.graph-legend-scroll {
position: relative;
overflow: auto !important;
padding: 1px;
}
.graph-legend-icon { .graph-legend-icon {
position: relative; position: relative;
padding-right: 4px; padding-right: 4px;
...@@ -133,10 +126,6 @@ ...@@ -133,10 +126,6 @@
.graph-legend-table { .graph-legend-table {
display: table; display: table;
width: auto; width: auto;
.graph-legend-scroll {
display: table;
}
} }
} }
} }
......
Markdown is supported
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