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 _ from 'lodash';
import React from 'react'; import React from 'react';
import { TimeSeries } from 'app/core/core'; import { TimeSeries } from 'app/core/core';
import withScrollBar from 'app/core/components/ScrollBar/withScrollBar';
const LEGEND_STATS = ['min', 'max', 'avg', 'current', 'total']; 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 seriesHideProps = { hideEmpty, hideZero };
const sortProps = { sort, sortDesc }; const sortProps = { sort, sortDesc };
const seriesList = _.filter(this.sortLegend(), series => !series.hideFromLegend(seriesHideProps)); 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 min-width if side style and there is a value, otherwise remove the CSS property
// Set width so it works with IE11 // Set width so it works with IE11
@ -106,10 +107,8 @@ export class GraphLegend extends React.PureComponent<GraphLegendProps, GraphLege
}; };
return ( return (
<div className={`graph-legend-content ${legendCustomClasses}`} style={legendStyle}> <div className={`graph-legend-content ${legendClass}`} style={legendStyle}>
<div className="graph-legend-scroll"> {this.props.alignAsTable ? <LegendTable {...legendProps} /> : <LegendSeriesList {...legendProps} />}
{this.props.alignAsTable ? <LegendTable {...legendProps} /> : <LegendSeriesList {...legendProps} />}
</div>
</div> </div>
); );
} }
@ -309,3 +308,6 @@ function getOptionSeriesCSSClasses(series, hiddenSeries) {
} }
return classes.join(' '); 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 config from 'app/core/config';
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { GraphLegend, GraphLegendProps } from './Legend'; import { Legend, GraphLegendProps } from './Legend';
import { GraphCtrl } from './module'; import { GraphCtrl } from './module';
@ -86,7 +86,6 @@ class GraphElement {
updateLegendValues(this.data, this.panel, graphHeight); updateLegendValues(this.data, this.panel, graphHeight);
// this.ctrl.events.emit('render-legend'); // this.ctrl.events.emit('render-legend');
// console.log(this.ctrl);
const { values, min, max, avg, current, total } = this.panel.legend; const { values, min, max, avg, current, total } = this.panel.legend;
const { alignAsTable, rightSide, sideWidth, sort, sortDesc, hideEmpty, hideZero } = this.panel.legend; const { alignAsTable, rightSide, sideWidth, sort, sortDesc, hideEmpty, hideZero } = this.panel.legend;
const legendOptions = { alignAsTable, rightSide, sideWidth, sort, sortDesc, hideEmpty, hideZero }; const legendOptions = { alignAsTable, rightSide, sideWidth, sort, sortDesc, hideEmpty, hideZero };
@ -99,7 +98,7 @@ class GraphElement {
onToggleSeries: this.ctrl.toggleSeries.bind(this.ctrl), onToggleSeries: this.ctrl.toggleSeries.bind(this.ctrl),
onToggleSort: this.ctrl.toggleSort.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'); const legendElem = this.elem.parent().find('.graph-legend');
ReactDOM.render(legendReactElem, legendElem[0]); ReactDOM.render(legendReactElem, legendElem[0]);
this.onLegendRenderingComplete(); this.onLegendRenderingComplete();

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

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