lucid-ui/lib/components/Points/examples/basic.js

A UI component library from AppNexus.

import _map from "lodash/map";
import _reduce from "lodash/reduce";
import _max from "lodash/max";
import React from 'react';
import createClass from 'create-react-class';
import { Points, d3Scale } from '../../../index';
var width = 1000;
var height = 400;
var margin = {
  top: 10,
  right: 10,
  bottom: 10,
  left: 10
};
var innerWidth = width - margin.left - margin.right;
var innerHeight = height - margin.top - margin.bottom;
var data = [{
  x: 'one',
  y0: 4,
  y1: 5,
  y2: 6,
  y3: 7
}, {
  x: 'two',
  y0: 3,
  y1: 4,
  y2: 5,
  y3: 6
}, {
  x: 'three',
  y0: 2,
  y1: 3,
  y2: 4,
  y3: 5
}, {
  x: 'four',
  y0: 1,
  y1: 2,
  y2: 3,
  y3: 4
}, {
  x: 'five',
  y0: 2,
  y1: 3,
  y2: 4,
  y3: 5
}, {
  x: 'six',
  y0: 3,
  y1: 4,
  y2: 5,
  y3: 6
}, {
  x: 'seven',
  y0: 4,
  y1: 5,
  y2: 6,
  y3: 7
}];
var yFields = ['y0', 'y1', 'y2', 'y3'];

var yMax = _max(_reduce(yFields, function (acc, field) {
  return acc.concat(_map(data, field));
}, []));

var xScale = d3Scale.scalePoint().domain(_map(data, 'x')).range([0, innerWidth]);
var yScale = d3Scale.scaleLinear().domain([0, yMax]).range([innerHeight, 0]);
export default createClass({
  render: function render() {
    return /*#__PURE__*/React.createElement("svg", {
      width: width,
      height: height
    }, /*#__PURE__*/React.createElement("g", {
      transform: "translate(".concat(margin.left, ", ").concat(margin.top, ")")
    }, /*#__PURE__*/React.createElement(Points, {
      data: data,
      xScale: xScale,
      yScale: yScale,
      yFields: yFields
    })));
  }
});