Commit fdd1d59f authored by Jose Ivan Vargas's avatar Jose Ivan Vargas

Added legends for each of the time series

parent faf5363e
......@@ -7,10 +7,6 @@
type: Number,
required: true,
},
currentYCoordinate: {
type: Number,
required: true,
},
currentFlagPosition: {
type: Number,
required: true,
......@@ -60,15 +56,6 @@
:y2="calculatedHeight"
transform="translate(-5, 20)">
</line>
<circle
class="circle-metric"
:fill="circleColorRgb"
stroke="#000"
:cx="currentXCoordinate"
:cy="currentYCoordinate"
r="5"
transform="translate(-5, 20)">
</circle>
<svg
class="rect-text-metric"
:x="currentFlagPosition"
......
<script>
import { formatRelevantDigits } from '../../lib/utils/number_utils';
export default {
props: {
graphWidth: {
......@@ -29,10 +31,18 @@
type: String,
required: true,
},
metricUsage: {
timeSeries: {
type: Array,
required: true,
},
unitOfDisplay: {
type: String,
required: true,
},
currentDataIndex: {
type: Number,
required: true,
},
},
data() {
return {
......@@ -63,6 +73,16 @@
yPosition() {
return ((this.graphHeight - this.margin.top) + this.measurements.axisLabelLineOffset) || 0;
},
},
methods: {
translateLegendGroup(index) {
return `translate(${120 * index}, 0)`;
},
formatMetricUsage(series) {
return `${formatRelevantDigits(series.values[this.currentDataIndex].value)} ${this.unitOfDisplay}`;
},
},
mounted() {
this.$nextTick(() => {
......@@ -121,6 +141,10 @@
dy=".35em">
Time
</text>
<g class="legend-group"
v-for="(series, index) in timeSeries"
:key="index"
:transform="translateLegendGroup(index)">
<rect
:fill="areaColorRgb"
:width="measurements.legends.width"
......@@ -130,15 +154,22 @@
</rect>
<text
class="text-metric-title"
x="50"
:y="graphHeight - 25">
x="45"
:y="graphHeight - 30">
{{legendTitle}}
</text>
<text
class="text-metric-title"
x="45"
:y="graphHeight - 20">
Series {{index + 1}}
</text>
<text
class="text-metric-usage"
x="50"
x="45"
:y="graphHeight - 10">
{{metricUsage}}
{{formatMetricUsage(series)}}
</text>
</g>
</g>
</template>
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