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

Official repo for Hack Oregon React component library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _victory = require("victory");

var _GradientLine = _interopRequireDefault(require("./GradientLine"));

var _GradientBox = _interopRequireDefault(require("./GradientBox"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

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; } }

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["default"].createElement("div", null, _react["default"].createElement("svg", {
    style: {
      position: "absolute"
    },
    height: "0",
    width: "0"
  }, _react["default"].createElement("defs", null, colorScales[colorScale].length === 2 ? _react["default"].createElement("linearGradient", {
    id: "myGradient"
  }, _react["default"].createElement("stop", {
    offset: "0%",
    stopColor: colorScales[colorScale][0]
  }), _react["default"].createElement("stop", {
    offset: "100%",
    stopColor: colorScales[colorScale][colorScales[colorScale].length - 1]
  })) : _react["default"].createElement("linearGradient", {
    id: "myGradient"
  }, _react["default"].createElement("stop", {
    offset: "0%",
    stopColor: "white"
  }), colorScales[colorScale].map(function (color, index) {
    return _react["default"].createElement("stop", {
      offset: "".concat(index * 9.09 + 9.09, "%"),
      stopColor: color
    });
  }), _react["default"].createElement("stop", {
    offset: "100%",
    stopColor: "black"
  })))), _react["default"].createElement(_victory.VictoryGroup, {
    padding: {
      top: 10,
      bottom: 10
    },
    domain: {
      x: domain,
      y: [0, 1]
    },
    height: height,
    width: width
  }, _react["default"].createElement(_GradientBox["default"], {
    padding: 0,
    fill: "url(#myGradient)"
  }), _react["default"].createElement(_victory.VictoryScatter, {
    data: data,
    dataComponent: _react["default"].createElement(_GradientLine["default"], null)
  }), _react["default"].createElement(_victory.VictoryScatter, {
    data: data,
    dataComponent: _react["default"].createElement(_GradientLine["default"], null)
  })));
};

GradientScale.propTypes = {
  width: _propTypes["default"].number,
  height: _propTypes["default"].number,
  domain: _propTypes["default"].arrayOf(_propTypes["default"].number).isRequired,
  primary: _propTypes["default"].number.isRequired,
  secondary: _propTypes["default"].arrayOf(_propTypes["default"].number)
};
GradientScale.defaultProps = {
  width: 500,
  height: 100
};
var _default = GradientScale;
exports["default"] = _default;