Commit 91595804 authored by Sascha Herzinger's avatar Sascha Herzinger
Browse files

toPNG / sorting with undefined

parent 21dc9c41
......@@ -6,27 +6,40 @@
<script src="http://localhost:8080/ada-charts.js"></script>
</head>
<body>
<div id="heatmap-container"></div>
<div id="heatmap-controls">
<button onclick="heatmap.toPNG()">toPNG()</button>
</div>
<div id="heatmap-container"></div>
</body>
</html>
<script>
const values = [];
const rows = [];
const cols = [];
const min = -1;
const max = 1;
for (let i = 0; i < 50; i += 1) {
rows.push(`row: ${i}`);
for (let j = 0; j < 50; j += 1) {
values.push(Math.random() * (max - min + 1) + min);
if (i === 0) {
cols.push(`col: ${j}`);
let values = [];
let rows = [];
let cols = [];
(function generateRandomMatrix(width, height, minValue, maxValue, undefinedValues) {
values = [];
rows = [];
cols = [];
for (let i = 0; i < height; i += 1) {
rows.push(`row - ${i}`);
for (let j = 0; j < width; j += 1) {
if (undefinedValues && Math.random() > 0.9) {
values.push(undefined);
} else {
values.push(Math.random() * (maxValue - minValue + 1) + minValue);
}
if (i === 0) {
cols.push(`col - ${j}`);
}
}
}
}
})(20, 20, -1, 1, true);
/**
* API "Documentation" below this point
*/
const container = document.querySelector('#heatmap-container');
const heatmap = AdaCharts.chart({ chartType: 'heatmap', container });
heatmap.update({
......@@ -42,8 +55,17 @@
</script>
<style>
body {
display: flex;
flex-direction: row;
}
#heatmap-controls {
display: flex;
flex-direction: column;
}
#heatmap-container {
width: 100vw;
height: 100vh;
width: 50vw;
height: 50vh;
}
</style>
......@@ -590,6 +590,11 @@
}
}
},
"base64-arraybuffer": {
"version": "0.1.5",
"resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz",
"integrity": "sha1-c5JncZI7Whl0etZmqlzUv5xunOg="
},
"base64-inline-loader": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/base64-inline-loader/-/base64-inline-loader-1.1.1.tgz",
......@@ -1315,6 +1320,14 @@
"randomfill": "^1.0.3"
}
},
"css-line-break": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.0.1.tgz",
"integrity": "sha1-GfIGOjPpX7KDG4ZEbAuAwYivRQo=",
"requires": {
"base64-arraybuffer": "^0.1.5"
}
},
"css-loader": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-1.0.1.tgz",
......@@ -3677,6 +3690,14 @@
"integrity": "sha1-DfKTUfByEWNRXfueVUPl9u7VFi8=",
"dev": true
},
"html2canvas": {
"version": "1.0.0-alpha.12",
"resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.0.0-alpha.12.tgz",
"integrity": "sha1-OxmS48mz9WBjw1/WIElPN+uohRM=",
"requires": {
"css-line-break": "1.0.1"
}
},
"http-deceiver": {
"version": "1.2.7",
"resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
......
......@@ -9,7 +9,8 @@
"devserver": "webpack-dev-server --mode development"
},
"dependencies": {
"d3": "5.7.0"
"d3": "5.7.0",
"html2canvas": "1.0.0-alpha.12"
},
"devDependencies": {
"webpack": "4.26.1",
......
......@@ -18,6 +18,7 @@
}
.ac-tooltip {
font-size: 1.25rem;
position: absolute;
background: rgba(0,0,0,0.7);
pointer-events: none;
......
import html2canvas from 'html2canvas';
export default class {
constructor({ container }) {
this.container = container;
}
static get name() {
get name() {
throw Error('name getter not implemented.');
}
update() {
throw Error('update() not implemented.');
}
prepareSVGForCapture() {
throw Error('prepareSVGForCapture() not implemented.');
}
toPNG() {
html2canvas(this.container).then((canvas) => {
const img = canvas.toDataURL('image/png');
const a = document.createElement('a');
a.href = img;
a.download = 'foo.png';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
});
}
}
......@@ -53,6 +53,10 @@ export default class extends Chart {
return 'heatmap';
}
prepareSVGForCapture() {
return this.svg;
}
prepareValues({ values, rows, cols }) {
this.data = [];
rows.forEach((row, i) => {
......@@ -109,13 +113,13 @@ export default class extends Chart {
.attr('height', this.yScale.bandwidth())
.attr('x', d => this.xScale(d.col))
.attr('y', d => this.yScale(d.row))
.attr('fillStyle', d => colorScale(d.value));
rect
.merge(rect)
.attr('fillStyle', (d) => {
if (typeof d.value === 'undefined') return 'black';
if (typeof d.value === 'undefined') return '#000';
return colorScale(d.value);
})
});
rect
.transition()
.duration(ANIMATION_DURATION)
.attr('width', this.xScale.bandwidth())
......@@ -132,7 +136,7 @@ export default class extends Chart {
let text = self.text();
while (textLength > (margin.left) && text.length > 0) {
text = text.slice(0, -1);
self.text(`${text}...`);
self.text(`${text}..`);
textLength = self.node().getComputedTextLength();
}
}
......@@ -149,7 +153,11 @@ export default class extends Chart {
.on('click', (row) => {
this.cols = this.data
.filter(d => d.row === row)
.sort((a, b) => b.value - a.value)
.sort((a, b) => {
if (typeof a.value === 'undefined') return 1;
if (typeof b.value === 'undefined') return 0;
return b.value - a.value;
})
.map(d => d.col);
this.update({});
})
......@@ -176,7 +184,11 @@ export default class extends Chart {
.on('click', (col) => {
this.rows = this.data
.filter(d => d.col === col)
.sort((a, b) => b.value - a.value)
.sort((a, b) => {
if (typeof a.value === 'undefined') return 1;
if (typeof b.value === 'undefined') return 0;
return b.value - a.value;
})
.map(d => d.row);
this.update({});
})
......
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