Mercurial > gemma

comparison client/src/components/gauge/HydrologicalConditions.vue @ 4809:b6d8570b8480

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: image-export: add diagram legend
author Fadi Abbud <fadi.abbud@intevation.de>
date Tue, 29 Oct 2019 16:29:29 +0100
parents db450fcc8ed7
children 008bc1ae8897
comparison
equal deleted inserted replaced
4808:db450fcc8ed7 4809:b6d8570b8480
220 this.initialDiagramValues(); 220 this.initialDiagramValues();
221 this.drawDiagram(); 221 this.drawDiagram();
222 } 222 }
223 }, 223 },
224 methods: { 224 methods: {
225 addLegendToCanvas(ctx, { width, height }) {
226 let x = width / 12,
227 y = height - 25;
228 ctx.font = "12px sans-serif";
229 ctx.textAlign = "start";
230 ctx.beginPath();
231 ctx.fillStyle = "red";
232 ctx.strokeStyle = "red";
233 ctx.arc(x, y, 8, 0, 2 * Math.PI);
234 ctx.fill();
235 ctx.stroke();
236 ctx.fillStyle = "black";
237 ctx.fillText(this.yearCompare, x + 14, y + 5);
238 ctx.closePath();
239
240 ctx.beginPath();
241 ctx.fillStyle = "orange";
242 ctx.strokeStyle = "orange";
243 ctx.arc(x, (y += 20), 8, 0, 2 * Math.PI);
244 ctx.fill();
245 ctx.stroke();
246 ctx.fillStyle = "black";
247 ctx.fillText(this.$gettext("Q25%"), x + 14, y + 5);
248 ctx.closePath();
249
250 ctx.beginPath();
251 ctx.fillStyle = "black";
252 ctx.strokeStyle = "black";
253 ctx.arc(x, (y += 20), 8, 0, 2 * Math.PI);
254 ctx.fill();
255 ctx.stroke();
256 ctx.fillStyle = "black";
257 ctx.fillText(this.$gettext("Median"), x + 14, y + 5);
258 ctx.closePath();
259
260 ctx.beginPath();
261 ctx.fillStyle = "purple";
262 ctx.strokeStyle = "purple";
263 ctx.arc(x, (y += 20), 8, 0, 2 * Math.PI);
264 ctx.fill();
265 ctx.stroke();
266 ctx.fillStyle = "black";
267 ctx.fillText(this.$gettext("Q75%"), x + 14, y + 5);
268 ctx.closePath();
269
270 ctx.beginPath();
271 ctx.fillStyle = "lightsteelblue";
272 ctx.strokeStyle = "lightsteelblue";
273 ctx.arc(x, (y += 20), 8, 0, 2 * Math.PI);
274 ctx.fill();
275 ctx.stroke();
276 ctx.fillStyle = "black";
277 ctx.fillText(this.$gettext("Long-term Amplitude"), x + 14, y + 5);
278 ctx.closePath();
279 },
225 initialDiagramValues() { 280 initialDiagramValues() {
226 this.selectedGaugeD = this.selectedGauge; 281 this.selectedGaugeD = this.selectedGauge;
227 this.longtermIntervalD = this.longtermInterval; 282 this.longtermIntervalD = this.longtermInterval;
228 this.yearCompareD = this.yearCompare; 283 this.yearCompareD = this.yearCompare;
229 }, 284 },