redash/client/app/visualizations/box-plot/Renderer.jsx

import { map, each } from 'lodash';
import d3 from 'd3';
import React, { useState, useEffect } from 'react';
import resizeObserver from '@/services/resizeObserver';
import { RendererPropTypes } from '@/visualizations';
import box from './d3box';
import './renderer.less';

function calcIqr(k) {
  return (d) => {
    const q1 = d.quartiles[0];
    const q3 = d.quartiles[2];
    const iqr = (q3 - q1) * k;

    let i = -1;
    let j = d.length;

    i += 1;
    while (d[i] < q1 - iqr) {
      i += 1;
    }

    j -= 1;
    while (d[j] > q3 + iqr) {
      j -= 1;
    }

    return [i, j];
  };
}

function render(container, data, { xAxisLabel, yAxisLabel }) {
  container = d3.select(container);

  const containerBounds = container.node().getBoundingClientRect();
  const containerWidth = Math.floor(containerBounds.width);
  const containerHeight = Math.floor(containerBounds.height);

  const margin = {
    top: 10, right: 50, bottom: 40, left: 50, inner: 25,
  };
  const width = containerWidth - margin.right - margin.left;
  const height = containerHeight - margin.top - margin.bottom;

  let min = Infinity;
  let max = -Infinity;
  const mydata = [];
  let value = 0;
  let d = [];

  const columns = map(data.columns, col => col.name);
  const xscale = d3.scale.ordinal()
    .domain(columns)
    .rangeBands([0, containerWidth - margin.left - margin.right]);

  let boxWidth;
  if (columns.length > 1) {
    boxWidth = Math.min(xscale(columns[1]), 120.0);
  } else {
    boxWidth = 120.0;
  }
  margin.inner = boxWidth / 3.0;

  each(columns, (column, i) => {
    d = mydata[i] = [];
    each(data.rows, (row) => {
      value = row[column];
      d.push(value);
      if (value > max) max = Math.ceil(value);
      if (value < min) min = Math.floor(value);
    });
  });

  const yscale = d3.scale.linear()
    .domain([min * 0.99, max * 1.01])
    .range([height, 0]);

  const chart = box()
    .whiskers(calcIqr(1.5))
    .width(boxWidth - 2 * margin.inner)
    .height(height)
    .domain([min * 0.99, max * 1.01]);
  const xAxis = d3.svg.axis()
    .scale(xscale)
    .orient('bottom');


  const yAxis = d3.svg.axis()
    .scale(yscale)
    .orient('left');

  const xLines = d3.svg.axis()
    .scale(xscale)
    .tickSize(height)
    .orient('bottom');

  const yLines = d3.svg.axis()
    .scale(yscale)
    .tickSize(width)
    .orient('right');

  function barOffset(i) {
    return xscale(columns[i]) + (xscale(columns[1]) - margin.inner) / 2.0;
  }

  container.selectAll('*').remove();

  const svg = container.append('svg')
    .attr('width', containerWidth)
    .attr('height', height + margin.bottom + margin.top);

  const plot = svg.append('g')
    .attr('width', containerWidth - margin.left - margin.right)
    .attr('transform', `translate(${margin.left},${margin.top})`);

  svg.append('text')
    .attr('class', 'box')
    .attr('x', containerWidth / 2.0)
    .attr('text-anchor', 'middle')
    .attr('y', height + margin.bottom)
    .text(xAxisLabel);

  svg.append('text')
    .attr('class', 'box')
    .attr('transform', `translate(10,${(height + margin.top + margin.bottom) / 2.0})rotate(-90)`)
    .attr('text-anchor', 'middle')
    .text(yAxisLabel);

  plot.append('rect')
    .attr('class', 'grid-background')
    .attr('width', width)
    .attr('height', height);

  plot.append('g')
    .attr('class', 'grid')
    .call(yLines);

  plot.append('g')
    .attr('class', 'grid')
    .call(xLines);

  plot.append('g')
    .attr('class', 'x axis')
    .attr('transform', `translate(0,${height})`)
    .call(xAxis);

  plot.append('g')
    .attr('class', 'y axis')
    .call(yAxis);

  plot.selectAll('.box').data(mydata)
    .enter().append('g')
    .attr('class', 'box')
    .attr('width', boxWidth)
    .attr('height', height)
    .attr('transform', (_, i) => `translate(${barOffset(i)},${0})`)
    .call(chart);
}

export default function Renderer({ data, options }) {
  const [container, setContainer] = useState(null);

  useEffect(() => {
    if (container) {
      render(container, data, options);
      const unwatch = resizeObserver(container, () => {
        render(container, data, options);
      });
      return unwatch;
    }
  }, [container, data, options]);

  return (<div className="box-plot-deprecated-visualization-container" ref={setContainer} />);
}

Renderer.propTypes = RendererPropTypes;