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

AngularGraph: Fixes issues with legend wrapping after legend refactoring (#30283)

Browse Source
This commit is contained in:
Torkel Ödegaard 2021-01-15 15:17:46 +01:00 committed by GitHub
parent d6b468187e
commit 1ccde2a173
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
public/app/plugins/panel/graph/Legend/LegendSeriesItem.tsx
View File

@ -1,7 +1,7 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { TimeSeries } from 'app/core/core'; import { TimeSeries } from 'app/core/core';
import { Icon, SeriesColorPicker } from '@grafana/ui'; import { SeriesColorPicker, SeriesIcon } from '@grafana/ui';
import { selectors } from '@grafana/e2e-selectors'; import { selectors } from '@grafana/e2e-selectors';
export const LEGEND_STATS = ['min', 'max', 'avg', 'current', 'total']; export const LEGEND_STATS = ['min', 'max', 'avg', 'current', 'total'];
@ -105,7 +105,9 @@ export class LegendItem extends PureComponent<LegendItemProps, LegendItemState>
if (asTable) { if (asTable) {
return ( return (
<tr className={`graph-legend-series ${seriesOptionClasses}`}> <tr className={`graph-legend-series ${seriesOptionClasses}`}>
<td>{seriesLabel}</td> <td>
<div className="graph-legend-series__table-name">{seriesLabel}</div>
</td>
{valueItems} {valueItems}
</tr> </tr>
); );
@ -170,10 +172,6 @@ interface LegendSeriesIconState {
color: string; color: string;
} }
function SeriesIcon({ color }: { color: string }) {
return <Icon name="minus" style={{ color }} />;
}
class LegendSeriesIcon extends PureComponent<LegendSeriesIconProps, LegendSeriesIconState> { class LegendSeriesIcon extends PureComponent<LegendSeriesIconProps, LegendSeriesIconState> {
static defaultProps: Partial<LegendSeriesIconProps> = { static defaultProps: Partial<LegendSeriesIconProps> = {
yaxis: undefined, yaxis: undefined,
@ -197,9 +195,13 @@ class LegendSeriesIcon extends PureComponent<LegendSeriesIconProps, LegendSeries
enableNamedColors enableNamedColors
> >
{({ ref, showColorPicker, hideColorPicker }) => ( {({ ref, showColorPicker, hideColorPicker }) => (
<span ref={ref} onClick={showColorPicker} onMouseLeave={hideColorPicker}> <SeriesIcon
<SeriesIcon color={this.props.color} /> color={this.props.color}
</span> ref={ref}
onClick={showColorPicker}
onMouseLeave={hideColorPicker}
className="graph-legend-icon"
/>
)} )}
</SeriesColorPicker> </SeriesColorPicker>
); );

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

@ -76,7 +76,7 @@
display: inline; display: inline;
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
font-size: 85%; font-size: 12px;
text-align: left; text-align: left;
&.current::before { &.current::before {
content: 'Current: '; content: 'Current: ';
@ -105,6 +105,8 @@
float: left; float: left;
white-space: nowrap; white-space: nowrap;
padding-left: 10px; padding-left: 10px;
display: flex;
align-items: center;
&--right-y { &--right-y {
float: right; float: right;
@ -146,17 +148,12 @@
float: none; float: none;
display: table-cell; display: table-cell;
white-space: nowrap; white-space: nowrap;
padding: 2px 10px; padding: 2px;
text-align: right; text-align: right;
} }
.graph-legend-icon { .graph-legend-icon {
width: 5px; cursor: pointer;
padding: 0;
top: 0;
.fa {
top: 4px;
}
} }
.graph-legend-value { .graph-legend-value {
@ -164,9 +161,7 @@
} }
.graph-legend-alias { .graph-legend-alias {
padding-left: 7px;
text-align: left; text-align: left;
width: 95%;
max-width: 650px; max-width: 650px;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
@ -198,6 +193,11 @@
} }
} }
.graph-legend-series__table-name {
display: flex;
align-items: center;
}
.graph-legend-series-hidden { .graph-legend-series-hidden {
.graph-legend-value, .graph-legend-value,
.graph-legend-alias { .graph-legend-alias {