Gitlab is now using https://gitlab.lcsb.uni.lu as it's primary address. Please update your bookmarks. FAQ.

Commit 62349a97 authored by Sascha Herzinger's avatar Sascha Herzinger
Browse files

brush callback for numerical case

parent 348ce8bb
......@@ -26,6 +26,7 @@
const rng = Math.random();
const numCategories = Math.floor(Math.random() * 9 + 1);
const numGroups = Math.floor(Math.random() * 9 + 1);
let dataType = 'cat';
const categories = [];
for (let i = 0; i < numCategories; i += 1) {
......@@ -34,18 +35,18 @@
const groups = [];
for (let i = 0; i < numGroups; i += 1) {
groups.push(String.fromCharCode(97 + i));
groups.push('Group ' + String.fromCharCode(97 + i));
}
const series = [];
const values = [];
if (rng < 0.33) { // contains only negative
groups.forEach(group => {
series.push({
name: group,
values.push({
group,
data: categories.map(category => {
return {
name: category,
x: category,
y: -Math.floor(Math.random() * 10000)
}
})
......@@ -53,11 +54,11 @@
});
} else if (rng >= 0.33 && rng < 0.66) { // contains only positive
groups.forEach(group => {
series.push({
name: group,
values.push({
group,
data: categories.map(category => {
return {
name: category,
x: category,
y: Math.floor(Math.random() * 10000)
}
})
......@@ -65,11 +66,11 @@
});
} else { // contains negative and positive
groups.forEach(group => {
series.push({
name: group,
values.push({
group,
data: categories.map(category => {
return {
name: category,
x: category,
y: (Math.random() < 0.5 ? 1 : -1) * Math.floor(Math.random() * 10000)
}
})
......@@ -78,9 +79,8 @@
}
return {
groups,
categories,
series
values,
dataType
};
}
......@@ -94,9 +94,12 @@
const randomData = generateRandomData();
barplot.update({
title: "Random generated example",
categories: randomData.categories,
values: randomData.values,
dataType: randomData.dataType,
xAxisLabel: "X Axis",
yAxisLabel: "Y Axis",
brushCallback: d => console.log(d),
barClickCallback: d => console.log(d),
series: randomData.series,
});
}
......
......@@ -45,6 +45,10 @@ export default class extends Chart {
.attr('text-anchor', 'middle')
.style('dominant-baseline', 'central')
.append('text');
this.brush = this.svg
.append('g')
.attr('class', 'ac-bar-brush');
}
static get name() {
......@@ -57,6 +61,7 @@ export default class extends Chart {
dataType,
xAxisLabel,
yAxisLabel,
brushCallback,
barClickCallback,
}) {
const groups = values.map(d => d.group);
......@@ -148,7 +153,10 @@ export default class extends Chart {
const categoryWidth = width / uniXValues.length;
const catIdx = uniXValues.indexOf(d.x);
const groupIdx = groups.indexOf(d.group);
return catIdx * categoryWidth + groupIdx * barWidth + barWidth / 2 + width / uniXValues.length * CATEGORY_PADDING_FACTOR / 2;
return catIdx * categoryWidth
+ groupIdx * barWidth
+ barWidth / 2
+ width / uniXValues.length * CATEGORY_PADDING_FACTOR / 2;
}
const y = d3.scaleLinear()
......@@ -169,6 +177,21 @@ export default class extends Chart {
.attr('transform', `translate(${width}, ${0})`)
.call(d3.axisLeft(y).tickSizeInner(width).tickFormat(''));
d3.select('.ac-bar-brush').selectAll('*').remove();
if (dataType.startsWith('num') || dataType.startsWith('time')) {
const brush = d3.brushX()
.extent([[0, 0], [width, height]])
.on('end', () => {
if (!d3.event.sourceEvent || !d3.event.selection) return;
const [x0, x1] = d3.event.selection;
brushCallback([x.invert(x0), x.invert(x1)]);
});
this.brush
.call(brush);
}
const selectedGroups = [];
const bar = this.svg.selectAll('.ac-bar-bar')
......
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