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]) { if (this.props[valueName]) {
const valueFormatted = series.formatValue(series.stats[valueName]); const valueFormatted = series.formatValue(series.stats[valueName]);
legendValueItems.push( 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; value: string;
valueName: string; valueName: string;
asTable?: boolean; asTable?: boolean;
onValueClick?: (event: any) => void;
} }
function LegendValue(props: LegendValueProps) { function LegendValue({ value, valueName, asTable, onValueClick }: LegendValueProps) {
const value = props.value; if (asTable) {
const valueName = props.valueName; return (
if (props.asTable) { <td className={`graph-legend-value ${valueName}`} onClick={onValueClick}>
return <td className={`graph-legend-value ${valueName}`}>{value}</td>; {value}
</td>
);
} }
return <div className={`graph-legend-value ${valueName}`}>{value}</div>; return (
<div className={`graph-legend-value ${valueName}`} onClick={onValueClick}>
{value}
</div>
);
} }