Skip to content

Commit 9e12e87

Browse files
keller-markkeller-mark
committed
Two.js rendering redirection for all plots
1 parent 4d6dd45 commit 9e12e87

File tree

11 files changed

+305
-228
lines changed

11 files changed

+305
-228
lines changed

‎examples-src/App.vue‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -319,6 +319,7 @@
319319
:pMarginLeft="120"
320320
:pMarginRight="10"
321321
:pMarginBottom="180"
322+
:showDownloadButton="true"
322323
>
323324
<Axis
324325
slot="axisLeft"
@@ -354,9 +355,10 @@
354355
:pWidth="700"
355356
:pHeight="40"
356357
:pMarginTop="10"
357-
:pMarginLeft="10"
358+
:pMarginLeft="40"
358359
:pMarginRight="10"
359360
:pMarginBottom="180"
361+
:showDownloadButton="true"
360362
>
361363
<TrackPlot
362364
slot="plot"
@@ -463,6 +465,7 @@
463465
:pMarginLeft="180"
464466
:pMarginRight="20"
465467
:pMarginBottom="20"
468+
:showDownloadButton="true"
466469
>
467470
<Axis
468471
slot="axisLeft"
@@ -803,6 +806,7 @@
803806
:pMarginLeft="120"
804807
:pMarginRight="10"
805808
:pMarginBottom="180"
809+
:showDownloadButton="true"
806810
>
807811
<Axis
808812
slot="axisLeft"
@@ -883,9 +887,10 @@
883887
:pWidth="50"
884888
:pHeight="30"
885889
:pMarginTop="5"
886-
:pMarginLeft="20"
887-
:pMarginRight="20"
890+
:pMarginLeft="40"
891+
:pMarginRight="40"
888892
:pMarginBottom="50"
893+
:showDownloadButton="true"
889894
>
890895
<RectPlot
891896
slot="plot"
@@ -907,6 +912,7 @@
907912
:pMarginLeft="120"
908913
:pMarginRight="10"
909914
:pMarginBottom="180"
915+
:showDownloadButton="true"
910916
>
911917
<Axis
912918
slot="axisLeft"

‎src/components/PlotContainer.vue‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<script>
2-
import { getRetinaRatio } from './../helpers.js';
32
import { DOWNLOAD_PATH } from './../icons.js';
43
import { create as d3_create } from 'd3';
54
@@ -51,7 +50,8 @@ const svgToUri = function(svg) {
5150
source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
5251
5352
// Convert svg source to URI.
54-
return "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);
53+
//return "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);
54+
return source;
5555
};
5656
5757
@@ -218,9 +218,10 @@ export default {
218218
},
219219
methods: {
220220
downloadViaButton() {
221-
const uri = this.download()
221+
const blob = this.download();
222+
const url = URL.createObjectURL(blob);
222223
const downloadAnchorNode = document.createElement('a');
223-
downloadAnchorNode.setAttribute("href", uri);
224+
downloadAnchorNode.setAttribute("href", url);
224225
downloadAnchorNode.setAttribute("download", this.downloadName + ".svg");
225226
document.body.appendChild(downloadAnchorNode); // required for firefox
226227
downloadAnchorNode.click();
@@ -288,6 +289,8 @@ export default {
288289
this.$slots.plot[0].componentInstance.drawPlot(plotSvg);
289290
this.$slots.plot[0].componentInstance.drawPlot();
290291
292+
console.log(plotSvg.node().innerHTML.length)
293+
291294
const plotG = svg
292295
.append("g")
293296
.attr("class", `download-g-plot`)
@@ -305,7 +308,11 @@ export default {
305308
renderAxisToContext("axisRight");
306309
renderAxisToContext("axisBottom");
307310
308-
return svgToUri(svg.node());
311+
const svgContent = svgToUri(svg.node());
312+
313+
const blob = new Blob([svgContent], {'type': 'image/svg+xml'});
314+
315+
return blob;
309316
}
310317
}
311318
}

‎src/components/plots/MultiBoxPlot.vue‎

Lines changed: 52 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@
7575
</template>
7676

7777
<script>
78+
import Two from 'two.js';
7879
import { scaleBand as d3_scaleBand, scaleLinear as d3_scaleLinear, scaleQuantile as d3_scaleQuantile } from 'd3-scale';
7980
import { select as d3_select } from 'd3-selection';
8081
import { mouse as d3_mouse, event as d3_event } from 'd3';
@@ -249,7 +250,7 @@ export default {
249250
this.highlightX1 = null;
250251
this.highlightX2 = null;
251252
},
252-
drawPlot() {
253+
drawPlot(d3Node) {
253254
const vm = this;
254255
255256
if(vm._dataContainer.isLoading || vm._xScale.isLoading || vm._yScale.isLoading || (vm.hasO && vm._oScale.isLoading)) {
@@ -280,26 +281,31 @@ export default {
280281
vm.barWidth = barWidth;
281282
282283
283-
284-
285284
/*
286285
* Scale up the canvas
287286
*/
288-
const canvas = d3_select(this.plotSelector);
289-
const context = canvas.node().getContext('2d');
287+
let canvas;
288+
if(d3Node) {
289+
canvas = d3Node;
290+
} else {
291+
canvas = d3_select(this.plotSelector);
292+
}
293+
294+
const canvasNode = canvas.node();
295+
296+
const two = new Two({
297+
width: vm.pWidth,
298+
height: vm.pHeight,
299+
domElement: canvasNode
300+
});
290301
291302
const canvasHidden = d3_select(this.hiddenPlotSelector);
292303
const contextHidden = canvasHidden.node().getContext('2d');
293304
294-
const ratio = getRetinaRatio(context);
305+
const ratio = getRetinaRatio(contextHidden);
295306
const scaledWidth = vm.pWidth * ratio;
296307
const scaledHeight = vm.pHeight * ratio;
297308
298-
canvas
299-
.attr("width", scaledWidth)
300-
.attr("height", scaledHeight);
301-
context.scale(ratio, ratio);
302-
303309
canvasHidden
304310
.attr("width", scaledWidth)
305311
.attr("height", scaledHeight);
@@ -340,7 +346,6 @@ export default {
340346
const diamondSize = vm.pointSize + 2;
341347
342348
xScale.domainFiltered.forEach((boxVar) => {
343-
context.fillStyle = xScale.color(boxVar);
344349
345350
let boxData = data.map((el) => el[boxVar] || 0);
346351
let quantile = d3_scaleQuantile()
@@ -361,48 +366,39 @@ export default {
361366
362367
let boxX1 = x(boxVar) + boxMargin;
363368
let boxX2 = boxX1 + boxWidth;
364-
let boxX = boxX1 + (boxWidth / 2)
365-
366-
context.strokeStyle = "black";
367-
context.beginPath();
368-
// Upper Fence
369-
context.moveTo(boxX1,y(upperFence));
370-
context.lineTo(boxX2,y(upperFence));
371-
// Vertical Line
372-
context.moveTo(boxX1 + (boxWidth / 2),y(upperFence));
373-
context.lineTo(boxX1 + (boxWidth / 2),y(lowerFence));
374-
// Lower Fence
375-
context.moveTo(boxX1,y(lowerFence));
376-
context.lineTo(boxX2,y(lowerFence));
377-
378-
context.stroke();
379-
380-
// Draw the box rect
381-
context.strokeRect(boxX1, y(q3), boxWidth, y(q1) - y(q3));
382-
context.fillRect(boxX1, y(q3), boxWidth, y(q1) - y(q3));
383-
384-
// Draw the median line
385-
context.beginPath();
386-
context.moveTo(boxX1, y(median));
387-
context.lineTo(boxX2, y(median));
388-
context.stroke();
389-
390-
// Draw the mean diamond
391-
context.beginPath();
392-
context.moveTo(boxX - (diamondSize/2), y(mean));
393-
context.lineTo(boxX, y(mean) - (diamondSize/2));
394-
context.lineTo(boxX + (diamondSize/2), y(mean));
395-
context.lineTo(boxX, y(mean) + (diamondSize/2));
396-
context.lineTo(boxX - (diamondSize/2), y(mean));
397-
context.stroke();
369+
let boxX = boxX1 + (boxWidth / 2);
370+
371+
372+
const verticalLine = two.makeLine(boxX1 + (boxWidth / 2),y(upperFence), boxX1 + (boxWidth / 2),y(lowerFence));
373+
verticalLine.stroke = "black";
374+
375+
const boxRect = two.makeRectangle(boxX1 + boxWidth/2, y(q3) + (y(q1) - y(q3))/2, boxWidth, y(q1) - y(q3));
376+
boxRect.linewidth = 1;
377+
boxRect.fill = xScale.color(boxVar);
378+
boxRect.stroke = "black";
379+
380+
const upperFenceLine = two.makeLine(boxX1,y(upperFence), boxX2,y(upperFence));
381+
upperFenceLine.stroke = "black";
382+
383+
const lowerFenceLine = two.makeLine(boxX1,y(lowerFence), boxX2,y(lowerFence));
384+
lowerFenceLine.stroke = "black";
385+
386+
const medianLine = two.makeLine(boxX1,y(median), boxX2,y(median));
387+
medianLine.stroke = "black";
388+
389+
const meanDiamond = two.makeRectangle(boxX,y(mean), diamondSize-2, diamondSize-2);
390+
meanDiamond.stroke = "black";
391+
meanDiamond.noFill();
392+
meanDiamond.rotation = Math.PI/4;
398393
399394
// Draw the outliers
400395
if(vm.drawOutliers) {
401396
let outliers = boxData.filter((el) => (el > upperFence) || (el < lowerFence));
402397
outliers.forEach((outlier) => {
403-
context.beginPath();
404-
context.arc(boxX, y(outlier), (vm.pointSize / 2), 0, 2*Math.PI);
405-
context.stroke();
398+
const circle = two.makeCircle(boxX, y(outlier), (vm.pointSize / 2));
399+
circle.linewidth = 1;
400+
circle.stroke = "black";
401+
circle.noFill();
406402
});
407403
}
408404
@@ -420,12 +416,17 @@ export default {
420416
contextHidden.fillStyle = col;
421417
contextHidden.fillRect(x(boxVar), 0, barWidth, vm.pHeight);
422418
});
419+
420+
two.update();
421+
422+
if(d3Node) {
423+
/* Ignore interactivity if SVG was passed in (for download). */
424+
return;
425+
}
423426
424427
/*
425428
* Listen for mouse events
426429
*/
427-
const canvasNode = canvas.node();
428-
429430
const getDataFromMouse = (mouseX, mouseY) => {
430431
// Get the corresponding pixel color on the hidden canvas
431432
const col = contextHidden.getImageData(mouseX * ratio, mouseY * ratio, scaledWidth, scaledHeight).data;

‎src/components/plots/MultiDataTrackPlot.vue‎

Lines changed: 28 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@
7676
</template>
7777

7878
<script>
79+
import Two from 'two.js';
7980
import { scaleBand as d3_scaleBand } from 'd3-scale';
8081
import { select as d3_select } from 'd3-selection';
8182
import { mouse as d3_mouse, event as d3_event } from 'd3';
@@ -257,7 +258,7 @@ export default {
257258
this.highlightY1 = null;
258259
this.highlightY2 = null;
259260
},
260-
drawPlot() {
261+
drawPlot(d3Node) {
261262
const vm = this;
262263
263264
if(vm._xScale.isLoading || vm._yScale.isLoading || vm._cScale.isLoading) {
@@ -305,21 +306,28 @@ export default {
305306
/*
306307
* Scale up the canvas
307308
*/
308-
const canvas = d3_select(this.plotSelector);
309-
const context = canvas.node().getContext('2d');
309+
let canvas;
310+
if(d3Node) {
311+
canvas = d3Node;
312+
} else {
313+
canvas = d3_select(this.plotSelector);
314+
}
315+
316+
const canvasNode = canvas.node();
317+
318+
const two = new Two({
319+
width: vm.pWidth,
320+
height: vm.pHeight,
321+
domElement: canvasNode
322+
});
310323
311324
const canvasHidden = d3_select(this.hiddenPlotSelector);
312325
const contextHidden = canvasHidden.node().getContext('2d');
313326
314-
const ratio = getRetinaRatio(context);
327+
const ratio = getRetinaRatio(contextHidden);
315328
const scaledWidth = vm.pWidth * ratio;
316329
const scaledHeight = vm.pHeight * ratio;
317330
318-
canvas
319-
.attr("width", scaledWidth)
320-
.attr("height", scaledHeight);
321-
context.scale(ratio, ratio);
322-
323331
canvasHidden
324332
.attr("width", scaledWidth)
325333
.attr("height", scaledHeight);
@@ -367,17 +375,24 @@ export default {
367375
colToNode[col] = { "x": d[vm.x], "y": yVar, "c": d[vm.c] };
368376
contextHidden.fillStyle = col;
369377
370-
context.fillStyle = cScale.color(d[vm.c]);
371-
context.fillRect(x(d[vm.x]) + (barMarginX/2), y(yVar) + (barMarginY/2), barWidth - barMarginX, barHeight - barMarginY);
378+
const rect = two.makeRectangle(x(d[vm.x]) + (barMarginX/2) + (barWidth - barMarginX)/2, y(yVar) + (barMarginY/2) + (barHeight - barMarginY)/2, barWidth - barMarginX, barHeight - barMarginY);
379+
rect.fill = cScale.color(d[vm.c]);
380+
rect.noStroke();
381+
372382
contextHidden.fillRect(x(d[vm.x]), y(yVar), barWidth, barHeight);
373383
});
374384
});
385+
386+
two.update();
387+
388+
if(d3Node) {
389+
/* Ignore interactivity if SVG was passed in (for download). */
390+
return;
391+
}
375392
376393
/*
377394
* Listen for mouse events
378395
*/
379-
const canvasNode = canvas.node();
380-
381396
const getDataFromMouse = (mouseX, mouseY) => {
382397
// Get the corresponding pixel color on the hidden canvas
383398
const col = contextHidden.getImageData(mouseX * ratio, mouseY * ratio, scaledWidth, scaledHeight).data;

0 commit comments

Comments
 (0)