class Legend { constructor(labels, options) { this.headerHeight = 13; this.data = labels; this.options = options || {}; this.cells = this.getCells(labels, options); const dim = this.getDimensions(this.data, this.cells, options); let isDraggable = this.options.isDraggable || false; this.node = svg` X `; d3.select(this.node).on("mouseover", () => d3.select(this.node).classed("active", true)); d3.select(this.node).on("mouseout", () => d3.select(this.node).classed("active", false)); if (isDraggable) d3.select(this.node).select('.legend-header rect').classed('draggable group-only', true); d3.select(this.node).select('.legend-hide').on('click', e => this.hide.call(this)); this.buildLegend(this.data); let x = this.options.x || 0; let y = this.options.y || 0; this.node.setAttribute("transform", `translate(${x},${y})`); } getCells(labels, options) { let maxRows = options.maxRows || 4; let maxCols = options.maxCols || 2; let cols = Math.min(labels.length, maxCols); let rows = Math.ceil(labels.length / cols); return [cols, rows]; } getDimensions(labels, cells, options) { const dim = [150, 120]; if (options.width) dim[0] = options.width; else { dim[0] = cells[0]*150; } if (options.height) dim[1] = options.height; else dim[1] = this.headerHeight + cells[1]*25 + 20; return dim; } appendTo(svgD3) { let defs = svgD3.select('defs'); if (defs.empty()) defs = svgD3.insert('defs'); const dropShadow = svg` `; defs.append(() => dropShadow); svgD3.append(() => this.node); } buildLegend(data) { const size = 20; const border_padding = 15; const item_padding = 5; const text_offset = 2; const cell_width = 150; // Border legend /* .append('rect') .attr("width", 120) .attr("height", 125) .style("fill", "none") .style("stroke-width", 1) .style("stroke", "black");*/ // Boxes d3.select(this.node).selectAll("boxes") .data(this.data) .enter() .append("rect") .attr("class", "swatch") .attr("x", (d, i) => border_padding + (i%this.cells[0] * cell_width)) .attr("y", (d, i) => this.headerHeight + border_padding + ((Math.floor(i/this.cells[0]))*(size + item_padding))) .attr("width", size) .attr("height", size) .style("fill", (label) => colors(label)); // Labels d3.select(this.node).selectAll("labels") .data(this.data) .enter() .append("text") .attr("class", "swatch-label") .classed('hidden', (label) => seriesToggler.isHidden(label)) .attr("x", (d,i) => border_padding + (i%this.cells[0] * cell_width + size + item_padding)) .attr("y", (d, i) => this.headerHeight + border_padding + ((Math.floor(i/this.cells[0])) * (size + item_padding) + (size / 2) + text_offset)) // .style("fill", (d) => color(d)) .text((label) => label) .attr("text-anchor", "left") .style("alignment-baseline", "middle") .style("font-family", "sans-serif") .on("click", (event, d) => this.toggleSeries(d3.select(event.currentTarget))); } show(x,y) { if (x & y) { this.options.x = x; this.options.y = y; this.node.setAttribute("transform", `translate(${this.options.x},${this.options.y})`); } this.node.removeAttribute("display"); } hide() { this.node.setAttribute('display', 'none'); } toggleSeries(textEl) { textEl.classed('hidden', !textEl.classed('hidden')); seriesToggler.toggleSeries(textEl.text()); } getPosition() { return [this.x, this.y]; } destroy() { if (this.node) { this.node.remove(); this.node = null; } } }