Verified Commit d6b0e23a authored by Mike Greiling's avatar Mike Greiling 🚀

add dashed and dotted line styles for multiple-query graphs

parent 5af31d6e
......@@ -247,6 +247,7 @@
:key="index"
:generated-line-path="path.linePath"
:generated-area-path="path.areaPath"
:line-style="path.lineStyle"
:line-color="path.lineColor"
:area-color="path.areaColor"
/>
......
......@@ -92,6 +92,12 @@
}
return `${this.legendTitle} series ${index + 1} ${this.formatMetricUsage(series)}`;
},
strokeDashArray(type) {
if (type === 'dashed') return '6, 3';
if (type === 'dotted') return '3, 3';
return null;
},
},
mounted() {
this.$nextTick(() => {
......@@ -162,13 +168,15 @@
v-for="(series, index) in timeSeries"
:key="index"
:transform="translateLegendGroup(index)">
<rect
:fill="series.areaColor"
:width="measurements.legends.width"
:height="measurements.legends.height"
x="20"
:y="graphHeight - measurements.legendOffset">
</rect>
<line
:stroke="series.lineColor"
:stroke-width="measurements.legends.height"
:stroke-dasharray="strokeDashArray(series.lineStyle)"
x1="20"
:x2="20 + measurements.legends.width"
:y1="graphHeight - measurements.legendOffset"
:y2="graphHeight - measurements.legendOffset">
</line>
<text
v-if="timeSeries.length > 1"
class="legend-metric-title"
......
......@@ -9,6 +9,10 @@
type: String,
required: true,
},
lineStyle: {
type: String,
required: true,
},
lineColor: {
type: String,
required: true,
......@@ -18,6 +22,13 @@
required: true,
},
},
computed: {
strokeDashArray() {
if (this.lineStyle === 'dashed') return '3, 1';
if (this.lineStyle === 'dotted') return '1, 1';
return null;
},
},
};
</script>
<template>
......@@ -34,6 +45,7 @@
:stroke="lineColor"
fill="none"
stroke-width="1"
:stroke-dasharray="strokeDashArray"
transform="translate(-5, 20)">
</path>
</g>
......
......@@ -7,7 +7,7 @@ export default {
left: 40,
},
legends: {
width: 10,
width: 15,
height: 3,
},
backgroundLegend: {
......@@ -15,7 +15,7 @@ export default {
height: 50,
},
axisLabelLineOffset: -20,
legendOffset: 33,
legendOffset: 32,
},
large: { // This covers both md and lg screen sizes
margin: {
......@@ -33,7 +33,7 @@ export default {
height: 150,
},
axisLabelLineOffset: 20,
legendOffset: 36,
legendOffset: 34,
},
xTicks: 8,
yTicks: 3,
......
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