Mercurial > gemma

comparison client/src/components/gauge/Waterlevel.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
215 this.initialDiagramValues(); 215 this.initialDiagramValues();
216 this.drawDiagram(); 216 this.drawDiagram();
217 } 217 }
218 }, 218 },
219 methods: { 219 methods: {
220 addLegendToCanvas(ctx, { width, height }) {
221 let x = width / 10,
222 y = height - 25;
223 ctx.font = "12px sans-serif";
224 ctx.textAlign = "start";
225
226 ctx.beginPath();
227 ctx.fillStyle = "steelblue";
228 ctx.strokeStyle = "white";
229 ctx.arc(x, y, 8, 0, 2 * Math.PI);
230 ctx.fill();
231 ctx.stroke();
232 ctx.fillStyle = "black";
233 ctx.fillText(this.$gettext("Waterlevel"), x + 14, y + 5);
234 ctx.closePath();
235
236 ctx.beginPath();
237 ctx.fillStyle = "#90b4d2";
238 ctx.strokeStyle = "#90b4d2";
239 ctx.arc(x, (y += 20), 8, 0, 2 * Math.PI);
240 ctx.fill();
241 ctx.stroke();
242 ctx.closePath();
243 ctx.beginPath();
244 ctx.fillStyle = "#4682B4";
245 ctx.strokeStyle = "#4682B4";
246 ctx.arc(x, y, 2, 0, 2 * Math.PI);
247 ctx.fill();
248 ctx.stroke();
249 ctx.fillStyle = "black";
250 ctx.fillText(this.$gettext("prediction"), x + 14, y + 5);
251 ctx.closePath();
252
253 ctx.beginPath();
254 ctx.fillStyle = "rgba(0, 255, 0, 0.1)";
255 ctx.strokeStyle = "rgba(0, 255, 0, 0.1)";
256 ctx.arc(x, (y += 20), 8, 0, 2 * Math.PI);
257 ctx.fill();
258 ctx.stroke();
259 ctx.fillStyle = "black";
260 ctx.fillText(this.$gettext("Navigable Range"), x + 14, y + 5);
261 ctx.closePath();
262 },
220 initialDiagramValues() { 263 initialDiagramValues() {
221 this.dateFromD = this.dateFrom; 264 this.dateFromD = this.dateFrom;
222 this.dateToD = this.dateTo; 265 this.dateToD = this.dateTo;
223 this.selectedGaugeD = this.selectedGauge; 266 this.selectedGaugeD = this.selectedGauge;
224 }, 267 },