Skip to content

Commit

Permalink
ui: update metrics charts UX to show legend
Browse files Browse the repository at this point in the history
Update Metrics charts UX to always show the legend. The
option to show as a tooltip is still available. Now
single lines can also be selected when clicking on its name
on the legend.

Epic: none

Release note (ui change): Always show the legend on Metrics charts,
allowing single lines to be selected.
  • Loading branch information
maryliag committed Sep 18, 2023
1 parent 8316976 commit 096c49a
Show file tree
Hide file tree
Showing 6 changed files with 19 additions and 7 deletions.
2 changes: 1 addition & 1 deletion pkg/ui/pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion pkg/ui/workspaces/db-console/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,7 @@
"ts-loader": "^6.2.1",
"typescript": "5.1.6",
"uglify-js": "^2.8.15",
"uplot": "^1.6.8",
"uplot": "^1.6.19",
"url-loader": "4.1.1",
"us-atlas": "^1.0.2",
"webpack": "^4.41.5",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ export interface OwnProps extends MetricsDataComponentProps {
hoverOff?: typeof hoverOff;
hoverState?: HoverState;
preCalcGraphSize?: boolean;
legendAsTooltip?: boolean;
}

export type LineGraphProps = OwnProps & WithTimezoneProps;
Expand Down Expand Up @@ -354,6 +355,7 @@ export class InternalLineGraph extends React.Component<LineGraphProps, {}> {
this.setNewTimeRange,
() => this.xAxisDomain,
() => this.yAxisDomain,
this.props.legendAsTooltip,
);

if (this.u) {
Expand All @@ -371,8 +373,15 @@ export class InternalLineGraph extends React.Component<LineGraphProps, {}> {
}

render() {
const { title, subtitle, tooltip, data, tenantSource, preCalcGraphSize } =
this.props;
const {
title,
subtitle,
tooltip,
data,
tenantSource,
preCalcGraphSize,
legendAsTooltip,
} = this.props;
if (!this.hasDataPoints(data) && isSecondaryTenant(tenantSource)) {
return (
<div className="linegraph-empty">
Expand All @@ -390,6 +399,7 @@ export class InternalLineGraph extends React.Component<LineGraphProps, {}> {
</div>
);
}
const legendClassName = legendAsTooltip ? "linegraph-tooltip" : "linegraph";
return (
<Visualization
title={title}
Expand All @@ -398,7 +408,7 @@ export class InternalLineGraph extends React.Component<LineGraphProps, {}> {
loading={!data}
preCalcGraphSize={preCalcGraphSize}
>
<div className="linegraph">
<div className={legendClassName}>
<div ref={this.el} />
</div>
</Visualization>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,7 @@ describe("<LineGraph>", function () {
util.NanoToMilli(mockProps.timeInfo.start.toNumber()),
util.NanoToMilli(mockProps.timeInfo.end.toNumber()),
),
false,
);
instance.u = new uPlot(mockOptions);
const setDataSpy = jest.spyOn(instance.u, "setData");
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ $viz-sides = 62px
color gray
text-decoration underline

.linegraph
.linegraph-tooltip
height 100%
.uplot
display flex
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ export function configureUPlotLineChart(
setMetricsFixedWindow: (startMillis: number, endMillis: number) => void,
getLatestXAxisDomain: () => AxisDomain,
getLatestYAxisDomain: () => AxisDomain,
legendAsTooltip: boolean,
): uPlot.Options {
const formattedRaw = formatMetricData(metrics, data);
// Copy palette over since we mutate it in the `series` function
Expand Down Expand Up @@ -225,7 +226,7 @@ export function configureUPlotLineChart(
range: () => getLatestYAxisDomain().extent,
},
},
plugins: [tooltipPlugin()],
plugins: legendAsTooltip ? [tooltipPlugin()] : null,
hooks: {
// setSelect is a hook that fires when a selection is made on the graph
// by dragging a range to zoom.
Expand Down

0 comments on commit 096c49a

Please sign in to comment.