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

more eye candy

parent 58b7b9e7
...@@ -194,7 +194,7 @@ export default class extends Chart { ...@@ -194,7 +194,7 @@ export default class extends Chart {
.text(this.title); .text(this.title);
const point = this.memory.selectAll('circle') const point = this.memory.selectAll('circle')
.data(this.values, d => `${d[0]}:${d[1]}:${d[2]}`); .data(this.values);
point.enter() point.enter()
.append('circle') .append('circle')
...@@ -206,7 +206,7 @@ export default class extends Chart { ...@@ -206,7 +206,7 @@ export default class extends Chart {
.delay((_, i) => i * (ANIMATION_DURATION / this.values.length)) .delay((_, i) => i * (ANIMATION_DURATION / this.values.length))
.attr('dx', d => x(d[0])) .attr('dx', d => x(d[0]))
.attr('dy', d => y(d[1])) .attr('dy', d => y(d[1]))
.attr('data-category', d => d[2]) .style('opacity', d => ((typeof _selectedCategory !== 'undefined' && d[2] !== _selectedCategory) ? 0.3 : 1))
.attr('r', Math.ceil(width / 150)) .attr('r', Math.ceil(width / 150))
.attr('fillStyle', d => color(d[2])) .attr('fillStyle', d => color(d[2]))
.attr('title', d => ` .attr('title', d => `
...@@ -278,9 +278,9 @@ ${!categoryKeys ? d[2] : this.categories[d[2]]}</br> ...@@ -278,9 +278,9 @@ ${!categoryKeys ? d[2] : this.categories[d[2]]}</br>
.merge(legendElement) .merge(legendElement)
.on('click', (d) => { .on('click', (d) => {
if (d === _selectedCategory) { if (d === _selectedCategory) {
this.render({ _skipAnimation: true }); this.render({ _skipAnimation: false });
} else { } else {
this.render({ _selectedCategory: d, _skipAnimation: true }); this.render({ _selectedCategory: d, _skipAnimation: false });
} }
}) })
.style('opacity', d => ((typeof _selectedCategory === 'undefined' || d === _selectedCategory) ? 1 : 0.3)); .style('opacity', d => ((typeof _selectedCategory === 'undefined' || d === _selectedCategory) ? 1 : 0.3));
...@@ -318,11 +318,7 @@ ${!categoryKeys ? d[2] : this.categories[d[2]]}</br> ...@@ -318,11 +318,7 @@ ${!categoryKeys ? d[2] : this.categories[d[2]]}</br>
2 * Math.PI, 2 * Math.PI,
false, false,
); );
ctx.globalAlpha = 1; ctx.globalAlpha = node.style.opacity;
if (typeof _selectedCategory !== 'undefined'
&& parseInt(node.getAttribute('data-category'), 10) !== _selectedCategory) {
ctx.globalAlpha = 0.2;
}
ctx.fillStyle = node.getAttribute('fillStyle'); ctx.fillStyle = node.getAttribute('fillStyle');
ctx.fill(); ctx.fill();
ctx.strokeStyle = '#fff'; ctx.strokeStyle = '#fff';
......
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