blob: 5ee0e0b3954d3d0004500733da3d5a577e93a6e2 [file] [log] [blame]
/* eslint-disable no-use-before-define */
import d3 from 'd3';
import cloudLayout from 'd3-cloud';
import { getColorFromScheme } from '../javascripts/modules/colors';
function wordCloudChart(slice, payload) {
const chart = d3.select(slice.selector);
const data = payload.data;
const fd = slice.formData;
const range = [
fd.size_from,
fd.size_to,
];
const rotation = fd.rotation;
let fRotation;
if (rotation === 'square') {
fRotation = () => Math.floor((Math.random() * 2) * 90);
} else if (rotation === 'flat') {
fRotation = () => 0;
} else {
fRotation = () => Math.floor(((Math.random() * 6) - 3) * 30);
}
const size = [slice.width(), slice.height()];
const scale = d3.scale.linear()
.range(range)
.domain(d3.extent(data, function (d) {
return d.size;
}));
function draw(words) {
chart.selectAll('*').remove();
chart.append('svg')
.attr('width', layout.size()[0])
.attr('height', layout.size()[1])
.append('g')
.attr('transform', `translate(${layout.size()[0] / 2},${layout.size()[1] / 2})`)
.selectAll('text')
.data(words)
.enter()
.append('text')
.style('font-size', d => d.size + 'px')
.style('font-family', 'Impact')
.style('fill', d => getColorFromScheme(d.text, fd.color_scheme))
.attr('text-anchor', 'middle')
.attr('transform', d => `translate(${d.x}, ${d.y}) rotate(${d.rotate})`)
.text(d => d.text);
}
const layout = cloudLayout()
.size(size)
.words(data)
.padding(5)
.rotate(fRotation)
.font('serif')
.fontSize(d => scale(d.size))
.on('end', draw);
layout.start();
}
module.exports = wordCloudChart;