IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

graph legend: use 'react-custom-scrollbars' for legend scroll

Browse Source
This commit is contained in:
Alexander Zobnin 2018-09-06 15:06:54 +03:00
parent b2ba9c5166
commit 8db2960d0d
No known key found for this signature in database
GPG Key ID: E17E9ABACEFA59EB
3 changed files with 10 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
public/app/plugins/panel/graph/Legend.tsx
View File

@ -1,6 +1,7 @@
import _ from 'lodash';
import React from 'react';
import { TimeSeries } from 'app/core/core';
import withScrollBar from 'app/core/components/ScrollBar/withScrollBar';
const LEGEND_STATS = ['min', 'max', 'avg', 'current', 'total'];
@ -85,7 +86,7 @@ export class GraphLegend extends React.PureComponent<GraphLegendProps, GraphLege
const seriesHideProps = { hideEmpty, hideZero };
const sortProps = { sort, sortDesc };
const seriesList = _.filter(this.sortLegend(), series => !series.hideFromLegend(seriesHideProps));
const legendCustomClasses = `${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 width so it works with IE11
@ -106,10 +107,8 @@ export class GraphLegend extends React.PureComponent<GraphLegendProps, GraphLege
};
return (
<div className={`graph-legend-content ${legendCustomClasses}`} style={legendStyle}>
<div className="graph-legend-scroll">
{this.props.alignAsTable ? <LegendTable {...legendProps} /> : <LegendSeriesList {...legendProps} />}
</div>
<div className={`graph-legend-content ${legendClass}`} style={legendStyle}>
{this.props.alignAsTable ? <LegendTable {...legendProps} /> : <LegendSeriesList {...legendProps} />}
</div>
);
}
@ -309,3 +308,6 @@ function getOptionSeriesCSSClasses(series, hiddenSeries) {
}
return classes.join(' ');
}
export const Legend = withScrollBar(GraphLegend);
export default Legend;

5
public/app/plugins/panel/graph/graph.ts
View File

@ -22,7 +22,7 @@ import { alignYLevel } from './align_yaxes';
import config from 'app/core/config';
import React from 'react';
import ReactDOM from 'react-dom';
import { GraphLegend, GraphLegendProps } from './Legend';
import { Legend, GraphLegendProps } from './Legend';
import { GraphCtrl } from './module';
@ -86,7 +86,6 @@ class GraphElement {
updateLegendValues(this.data, this.panel, graphHeight);
// this.ctrl.events.emit('render-legend');
// console.log(this.ctrl);
const { values, min, max, avg, current, total } = this.panel.legend;
const { alignAsTable, rightSide, sideWidth, sort, sortDesc, hideEmpty, hideZero } = this.panel.legend;
const legendOptions = { alignAsTable, rightSide, sideWidth, sort, sortDesc, hideEmpty, hideZero };
@ -99,7 +98,7 @@ class GraphElement {
onToggleSeries: this.ctrl.toggleSeries.bind(this.ctrl),
onToggleSort: this.ctrl.toggleSort.bind(this.ctrl),
};
const legendReactElem = React.createElement(GraphLegend, legendProps);
const legendReactElem = React.createElement(Legend, legendProps);
const legendElem = this.elem.parent().find('.graph-legend');
ReactDOM.render(legendReactElem, legendElem[0]);
this.onLegendRenderingComplete();

7
public/sass/components/_panel_graph.scss
View File

@ -57,9 +57,6 @@
padding-top: 6px;
position: relative;
// fix for Firefox (white stripe on the right of scrollbar)
width: calc(100% - 1px);
.popover-content {
padding: 0;
}
@ -67,11 +64,9 @@
.graph-legend-content {
position: relative;
// fix for Firefox (white stripe on the right of scrollbar)
width: calc(100% - 1px);
}
// @TODO: delete unused class
.graph-legend-scroll {
position: relative;
overflow: auto !important;