Commit 0b4bb953 authored by Sascha Herzinger's avatar Sascha Herzinger
Browse files

Heavily improved font-size calculation for labels

parent 496b6e8d
......@@ -20,9 +20,6 @@
let values = [];
let rows = [];
let cols = [];
const randomHeight = Math.floor(Math.random() * (50 - 20 + 1) + 20);
const randomWidth = Math.floor(Math.random() * (50 - 20 + 1) + 20);
/**
* Ignore the code below. It's just some hacks to generate some random data for demo
......@@ -70,6 +67,8 @@
}
function update() {
const randomHeight = Math.floor(Math.random() * (50 - 20 + 1) + 20);
const randomWidth = Math.floor(Math.random() * (50 - 20 + 1) + 20);
generateRandomMatrix(randomWidth, randomHeight, -1, 1, true);
heatmap.update({ values, rows, cols, valueRange: [-1, 1], sequential: true });
}
......
......@@ -10,8 +10,8 @@
font-weight: bold;
}
.ac-col-label {
font-size: 0.9em;
.ac-row-label,.ac-col-label {
}
.ac-vert-hl,.ac-hori-hl {
......
......@@ -60,10 +60,10 @@ export default class extends Chart {
}
this.margin = {
top: this.containerWidth / 10,
top: this.containerWidth / 8,
right: 10,
bottom: 10,
left: this.containerWidth / 10,
left: this.containerWidth / 8,
};
this.width = this.containerWidth - this.margin.left - this.margin.right;
this.height = this.containerWidth - this.margin.top - this.margin.bottom;
......@@ -131,16 +131,16 @@ export default class extends Chart {
rect.exit()
.remove();
const wrap = (d, i, arr) => {
const node = d3.select(arr[i]);
function wrap(selection, maxWidth) {
const node = d3.select(selection);
let textLength = node.node().getComputedTextLength();
let text = node.text();
while (textLength > (this.margin.left) && text.length > 0) {
while (textLength > maxWidth && text.length > 0) {
text = text.slice(0, -1);
node.text(`${text}..`);
textLength = node.node().getComputedTextLength();
}
};
}
const rowLabels = this.svg.selectAll('text.ac-row-label')
.data(this.rows, d => d);
......@@ -164,7 +164,8 @@ export default class extends Chart {
this.update({});
})
.merge(rowLabels)
.each(wrap);
.style('font-size', `${this.yScale.bandwidth() > 20 ? 20 : this.yScale.bandwidth()}px`)
.each((_, i, arr) => wrap(arr[i], this.margin.left - 5));
rowLabels
.transition()
......@@ -196,7 +197,8 @@ export default class extends Chart {
this.update({});
})
.merge(colLabels)
.each(wrap);
.style('font-size', `${this.xScale.bandwidth() > 20 ? 20 : this.xScale.bandwidth()}px`)
.each((_, i, arr) => wrap(arr[i], this.margin.top));
colLabels
.transition()
......
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