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

GraphPanel: Make legend values clickable series toggles (#25581)

Browse Source 
fixes: #25402
This commit is contained in:
Harrison Shoff 2020-06-15 08:39:02 -04:00 committed by GitHub
parent 91c24e1f56
commit 66f6b05d5e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -71,7 +71,13 @@ export class LegendItem extends PureComponent<LegendItemProps, LegendItemState>
if (this.props[valueName]) {
const valueFormatted = series.formatValue(series.stats[valueName]);
legendValueItems.push(
<LegendValue key={valueName} valueName={valueName} value={valueFormatted} asTable={asTable} />
<LegendValue
key={valueName}
valueName={valueName}
value={valueFormatted}
asTable={asTable}
onValueClick={this.onLabelClick}
/>
);
}
}
@ -196,13 +202,20 @@ interface LegendValueProps {
value: string;
valueName: string;
asTable?: boolean;
onValueClick?: (event: any) => void;
}
function LegendValue(props: LegendValueProps) {
const value = props.value;
const valueName = props.valueName;
if (props.asTable) {
return <td className={`graph-legend-value ${valueName}`}>{value}</td>;
function LegendValue({ value, valueName, asTable, onValueClick }: LegendValueProps) {
if (asTable) {
return (
<td className={`graph-legend-value ${valueName}`} onClick={onValueClick}>
{value}
</td>
);
}
return <div className={`graph-legend-value ${valueName}`}>{value}</div>;
return (
<div className={`graph-legend-value ${valueName}`} onClick={onValueClick}>
{value}
</div>
);
}