@hackoregon/component-library/es/GradientScale/GradientScale.js

Official repo for Hack Oregon React component library

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }

function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }

import React from "react";
import PropTypes from "prop-types";
import { VictoryGroup, VictoryScatter } from "victory";
import GradientLine from "./GradientLine";
import GradientBox from "./GradientBox";
var colorScales = {
  "default": ["#ffffff", "#19B7AA"],
  thermal: ["#ffffd2", "#ffefac", "#fee296", "#fec375", "#fd9b54", "#fc6443", "#e63638", "#c51f40", "#8f1f40"],
  space: ["#f8fcfd", "#e4eff6", "#c8dae9", "#abc7df", "#9da6cd", "#9081bc", "#9d5daa", "#972e8f", "#6b2866"],
  ocean: ["#ffffe1", "#effac1", "#ceedc2", "#8cd5c6", "#4fc1cc", "#28a1c8", "#3e76b3", "#4752a2", "#2d4070"],
  planet: ["#f8f6fa", "#ece6f1", "#dcc4df", "#d4a4cf", "#e87bbc", "#f0479b", "#ab3271", "#ab2861", "#812844"],
  earth: ["#fff8fc", "#f027f2", "#d7d8e9", "#b2c7e0", "#ab6d5", "#4ba1c8", "#28959b", "#288373", "#286356"]
};

var GradientScale = function GradientScale(_ref) {
  var width = _ref.width,
      height = _ref.height,
      domain = _ref.domain,
      primary = _ref.primary,
      _ref$secondary = _ref.secondary,
      secondary = _ref$secondary === void 0 ? [] : _ref$secondary,
      _ref$colorScale = _ref.colorScale,
      colorScale = _ref$colorScale === void 0 ? "default" : _ref$colorScale;
  var data = [].concat(_toConsumableArray(secondary.map(function (num) {
    return {
      x: num,
      y: 0,
      type: "secondary"
    };
  })), [{
    x: primary,
    y: 0,
    type: "primary"
  }]);
  return React.createElement("div", null, React.createElement("svg", {
    style: {
      position: "absolute"
    },
    height: "0",
    width: "0"
  }, React.createElement("defs", null, colorScales[colorScale].length === 2 ? React.createElement("linearGradient", {
    id: "myGradient"
  }, React.createElement("stop", {
    offset: "0%",
    stopColor: colorScales[colorScale][0]
  }), React.createElement("stop", {
    offset: "100%",
    stopColor: colorScales[colorScale][colorScales[colorScale].length - 1]
  })) : React.createElement("linearGradient", {
    id: "myGradient"
  }, React.createElement("stop", {
    offset: "0%",
    stopColor: "white"
  }), colorScales[colorScale].map(function (color, index) {
    return React.createElement("stop", {
      offset: "".concat(index * 9.09 + 9.09, "%"),
      stopColor: color
    });
  }), React.createElement("stop", {
    offset: "100%",
    stopColor: "black"
  })))), React.createElement(VictoryGroup, {
    padding: {
      top: 10,
      bottom: 10
    },
    domain: {
      x: domain,
      y: [0, 1]
    },
    height: height,
    width: width
  }, React.createElement(GradientBox, {
    padding: 0,
    fill: "url(#myGradient)"
  }), React.createElement(VictoryScatter, {
    data: data,
    dataComponent: React.createElement(GradientLine, null)
  }), React.createElement(VictoryScatter, {
    data: data,
    dataComponent: React.createElement(GradientLine, null)
  })));
};

GradientScale.propTypes = {
  width: PropTypes.number,
  height: PropTypes.number,
  domain: PropTypes.arrayOf(PropTypes.number).isRequired,
  primary: PropTypes.number.isRequired,
  secondary: PropTypes.arrayOf(PropTypes.number)
};
GradientScale.defaultProps = {
  width: 500,
  height: 100
};
export default GradientScale;