Commit 55ceeda8 authored by Tim Zallmann's avatar Tim Zallmann

Merge branch '34655-label-field-for-setting-a-chart-s-legend-text-is-not-working' into 'master'

Resolve "`label` field for setting a chart's legend text is not working"

Closes #34655

See merge request !12628
parents 9274c3c1 42d4b013
......@@ -105,9 +105,9 @@
this.measurements = measurements.small;
}
this.data = query.result[0].values;
this.unitOfDisplay = query.unit || 'N/A';
this.unitOfDisplay = query.unit || '';
this.yAxisLabel = this.columnData.y_label || 'Values';
this.legendTitle = query.legend || 'Average';
this.legendTitle = query.label || 'Average';
this.graphWidth = this.$refs.baseSvg.clientWidth -
this.margin.left - this.margin.right;
this.graphHeight = this.graphHeight - this.margin.top - this.margin.bottom;
......@@ -219,16 +219,16 @@
};
</script>
<template>
<div
<div
:class="classType">
<h5
<h5
class="text-center graph-title">
{{columnData.title}}
</h5>
<div
class="prometheus-svg-container"
:style="paddingBottomRootSvg">
<svg
<svg
:viewBox="outterViewBox"
ref="baseSvg">
<g
......@@ -239,7 +239,7 @@
class="y-axis"
transform="translate(70, 20)">
</g>
<monitoring-legends
<monitoring-legends
:graph-width="graphWidth"
:graph-height="graphHeight"
:margin="margin"
......@@ -249,7 +249,7 @@
:y-axis-label="yAxisLabel"
:metric-usage="metricUsage"
/>
<svg
<svg
class="graph-data"
:viewBox="innerViewBox"
ref="graphData">
......@@ -267,7 +267,7 @@
stroke-width="2"
transform="translate(-5, 20)">
</path>
<rect
<rect
class="prometheus-graph-overlay"
:width="(graphWidth - 70)"
:height="(graphHeight - 100)"
......@@ -281,7 +281,7 @@
:graph-height="graphHeight"
:graph-height-offset="graphHeightOffset"
/>
<monitoring-flag
<monitoring-flag
v-if="showFlag"
:current-x-coordinate="currentXCoordinate"
:current-y-coordinate="currentYCoordinate"
......
---
title: Fixed the chart legend not being set correctly
merge_request: 12628
author:
......@@ -2481,6 +2481,7 @@ export const singleRowMetrics = [
'queries': [
{
'query_range': 'avg(rate(container_cpu_usage_seconds_total{%{environment_filter}}[2m])) * 100',
'label': 'Container CPU',
'result': [
{
'metric': {
......
......@@ -95,7 +95,7 @@ describe('MonitoringColumn', () => {
});
});
it('has a title for the y-axis that comes from the backend', () => {
it('has a title for the y-axis and the chart legend that comes from the backend', () => {
const component = createComponent({
columnData: singleRowMetrics[0],
classType: 'col-md-6',
......@@ -104,5 +104,6 @@ describe('MonitoringColumn', () => {
});
expect(component.yAxisLabel).toEqual(component.columnData.y_label);
expect(component.legendTitle).toEqual(component.columnData.queries[0].label);
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment