lucid-ui/lib/components/Lines/examples/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 { Lines, d3Scale, chartConstants } from '../../../index';
var width = 1000;
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: 20,
  y1: 8,
  y2: 9,
  y3: 1
}];
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, width]);
var yScale = d3Scale.scaleLinear().domain([0, yMax]).range([height, 0]);
export default createClass({
  render: function render() {
    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("svg", {
      width: width,
      height: height
    }, /*#__PURE__*/React.createElement(Lines, {
      data: data,
      xScale: xScale,
      yScale: yScale,
      yFields: yFields,
      colorMap: {
        y0: chartConstants.COLOR_BAD,
        y1: chartConstants.COLOR_GOOD,
        y2: '#ff8800',
        y3: '#abc123'
      }
    })));
  }
});