mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
AngularGraph: Fixes issues with legend wrapping after legend refactoring (#30283)
This commit is contained in:
parent
d6b468187e
commit
1ccde2a173
@ -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>
|
||||||
);
|
);
|
||||||
|
@ -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 {
|
||||||
|
Loading…
Reference in New Issue
Block a user