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

fixed text trimming for legend

parent b81ecd62
import * as d3 from 'd3'; import * as d3 from 'd3';
import Chart from '../Chart'; import Chart from '../Chart';
import '../../assets/css/piechart.css'; import '../../assets/css/piechart.css';
import textUtils from '../../utils/textwrappers';
export default class extends Chart { export default class extends Chart {
constructor({ container }) { constructor({ container }) {
...@@ -39,7 +40,7 @@ export default class extends Chart { ...@@ -39,7 +40,7 @@ export default class extends Chart {
const groups = [...new Set(values.reduce((acc, cur) => acc.concat(cur.map(d => d.group)), []))]; const groups = [...new Set(values.reduce((acc, cur) => acc.concat(cur.map(d => d.group)), []))];
const customSchemeSet3 = d3.schemeSet3; const customSchemeSet3 = d3.schemeSet3.slice();
customSchemeSet3.splice(1, 1); customSchemeSet3.splice(1, 1);
const color = d3.scaleOrdinal() const color = d3.scaleOrdinal()
.domain(groups) .domain(groups)
...@@ -82,15 +83,14 @@ export default class extends Chart { ...@@ -82,15 +83,14 @@ export default class extends Chart {
.attr('fill', d => color(d.data.group)) .attr('fill', d => color(d.data.group))
.on('click', d => clickCallback(d.data)); .on('click', d => clickCallback(d.data));
const legendX = d3.scalePoint() const legendX = d3.scaleBand()
.domain(circleGroups) .domain(circleGroups)
.range([0, width]) .range([0, width]);
.padding(0.1);
const legendY = d3.scalePoint() const legendY = d3.scaleBand()
.domain([...Array(circleNum).keys()]) .domain([...Array(circleNum).keys()])
.range([height + margin.bottom, height]) .range([height + margin.bottom, height])
.padding(0.3); .paddingOuter(0.7);
const legendElement = this.svg.selectAll(`.ac-pie-legend-element.ac-pie-circle-idx-${circleIdx}`) const legendElement = this.svg.selectAll(`.ac-pie-legend-element.ac-pie-circle-idx-${circleIdx}`)
.data(circleGroups, d => d); .data(circleGroups, d => d);
...@@ -100,7 +100,7 @@ export default class extends Chart { ...@@ -100,7 +100,7 @@ export default class extends Chart {
.attr('class', `ac-pie-legend-element ac-pie-circle-idx-${circleIdx}`) .attr('class', `ac-pie-legend-element ac-pie-circle-idx-${circleIdx}`)
.attr('x', d => legendX(d)) .attr('x', d => legendX(d))
.attr('y', legendY(circleIdx)) .attr('y', legendY(circleIdx))
.style('text-anchor', 'middle') .style('text-anchor', 'start')
.style('dominant-baseline', 'central') .style('dominant-baseline', 'central')
.attr('fill', color) .attr('fill', color)
.text(d => d) .text(d => d)
...@@ -112,7 +112,8 @@ export default class extends Chart { ...@@ -112,7 +112,8 @@ export default class extends Chart {
.on('mouseleave', () => { .on('mouseleave', () => {
this.svg.selectAll('.ac-pie-slice') this.svg.selectAll('.ac-pie-slice')
.style('fill', e => color(e.data.group)); .style('fill', e => color(e.data.group));
}); })
.each((_, i, arr) => textUtils.sliceFitText(arr[i], legendX.bandwidth()));
} }
} }
} }
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