diff options
| author | Mike Greiling <mike@pixelcog.com> | 2017-11-05 23:21:58 -0600 |
|---|---|---|
| committer | Mike Greiling <mike@pixelcog.com> | 2017-11-06 14:07:09 -0600 |
| commit | d6b0e23ac4e07598645a577664f74230ae264139 (patch) | |
| tree | 2ef8326f1dc46ce837b4daf956666e6a324b1e07 /app/assets/javascripts/monitoring | |
| parent | 5af31d6eb0b1bb7b872c5c520cb26d7c7dd5110c (diff) | |
| download | gitlab-ce-d6b0e23ac4e07598645a577664f74230ae264139.tar.gz | |
add dashed and dotted line styles for multiple-query graphs
Diffstat (limited to 'app/assets/javascripts/monitoring')
4 files changed, 31 insertions, 10 deletions
diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue index ccd9815c2b0..f8782fde927 100644 --- a/app/assets/javascripts/monitoring/components/graph.vue +++ b/app/assets/javascripts/monitoring/components/graph.vue @@ -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" /> diff --git a/app/assets/javascripts/monitoring/components/graph/legend.vue b/app/assets/javascripts/monitoring/components/graph/legend.vue index 85b6d7f4cbe..e9f209dc9eb 100644 --- a/app/assets/javascripts/monitoring/components/graph/legend.vue +++ b/app/assets/javascripts/monitoring/components/graph/legend.vue @@ -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" diff --git a/app/assets/javascripts/monitoring/components/graph/path.vue b/app/assets/javascripts/monitoring/components/graph/path.vue index 043f1bf66bb..9c9bed3ce30 100644 --- a/app/assets/javascripts/monitoring/components/graph/path.vue +++ b/app/assets/javascripts/monitoring/components/graph/path.vue @@ -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> diff --git a/app/assets/javascripts/monitoring/utils/measurements.js b/app/assets/javascripts/monitoring/utils/measurements.js index ee3c45efacc..d679b2d80f2 100644 --- a/app/assets/javascripts/monitoring/utils/measurements.js +++ b/app/assets/javascripts/monitoring/utils/measurements.js @@ -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, |