lucid-ui/lib/components/Bars/examples/02.custom-colors.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 { Bars, d3Scale, chartConstants } from '../../../index';
var width = 750;
var height = 400;
var data = [{
  x: 'one',
  y0: 1,
  y1: 2,
  y2: 3,
  y3: 5
}, {
  x: 'two',
  y0: 2,
  y1: 3,
  y2: 4,
  y3: 6
}, {
  x: 'three',
  y0: 2,
  y1: 4,
  y2: 5,
  y3: 6
}, {
  x: 'four',
  y0: 3,
  y1: 6,
  y2: 7,
  y3: 7
}, {
  x: 'five',
  y0: 4,
  y1: 8,
  y2: 9,
  y3: 8
}, {
  x: 'six',
  y0: 11,
  y1: 8,
  y2: 9,
  y3: 5
}];
var yFields = ['y0', 'y1', 'y2', 'y3'];

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

var xScale = d3Scale.scaleBand().domain(_map(data, 'x')).range([0, width]).round(true).paddingInner(0.1);
var yScale = d3Scale.scaleLinear().domain([0, yMax]).range([height, 0]);
var style = {
  paddingTop: '9rem'
};
export default createClass({
  render: function render() {
    return /*#__PURE__*/React.createElement("div", {
      style: style
    }, /*#__PURE__*/React.createElement("svg", {
      width: width,
      height: height
    }, /*#__PURE__*/React.createElement(Bars, {
      data: data,
      xScale: xScale,
      yScale: yScale,
      yFields: yFields,
      colorMap: {
        y0: chartConstants.COLOR_GOOD,
        y2: chartConstants.COLOR_BAD
      },
      hasToolTips: true
    })));
  }
});