@hackoregon/component-library/dist/Sandbox/SandboxMapLegend.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 _d = require("d3");

var _emotion = require("emotion");

var _civicFormat = _interopRequireDefault(require("../utils/civicFormat"));

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 legendContainer = (0, _emotion.css)("\n  border-top: 2px solid gainsboro;\n  border-bottom: 2px solid gainsboro;\n  margin: 2% 0 8% 2%;\n  display: flex;\n  flex-wrap: nowrap;\n  height: 25px;\n  width: 96%;\n");
var colorBox = (0, _emotion.css)("\n  display: flex;\n  position: relative;\n  flex-basis: 100%;\n  border-left: 2px solid gainsboro;\n  justify-content: end;\n  align-items: end;\n");
var tickNums = (0, _emotion.css)("\n  position: absolute;\n  bottom: -20px;\n  right: 0;\n  font-size: 14px;\n");
var tickNumsThreshold = (0, _emotion.css)("\n  position: absolute;\n  bottom: -20px;\n  right: -7px;\n  font-size: 14px;\n");
var tickNumsOrdinal = (0, _emotion.css)("\n  position: absolute;\n  bottom: -20px;\n  right: unset;\n  left: 0;\n  font-size: 14px;\n");

var SandboxMapLegend = function SandboxMapLegend(props) {
  var data = props.data,
      mapProps = props.mapProps;

  var createEqualBins = function createEqualBins(slide, color, getPropValue) {
    var scale = (0, _d.scaleQuantize)().domain((0, _d.extent)(slide.slide_data.features, getPropValue)).range(color).nice();
    return scale;
  };

  var colorScale = mapProps.scaleType === "ordinal" || mapProps.scaleType === "threshold" ? mapProps.categories : createEqualBins(data, mapProps.color, mapProps.getPropValue);

  var formatColor = function formatColor(arr) {
    return arr.reduce(function (acc, cur, i) {
      return i < 3 ? "".concat(acc + cur, ",") : "".concat(acc, "1)");
    }, "rgba(");
  };

  var mapColorsArr = mapProps.scaleType === "ordinal" || mapProps.scaleType === "threshold" ? mapProps.color.map(function (arr) {
    return formatColor(arr);
  }) : colorScale.range().map(function (arr) {
    return formatColor(arr);
  });
  var bins = mapProps.scaleType === "ordinal" || mapProps.scaleType === "threshold" ? colorScale : colorScale.range().map(function (d) {
    return colorScale.invertExtent(d);
  });
  var ticks = mapProps.scaleType === "ordinal" || mapProps.scaleType === "threshold" ? bins : bins.reduce(function (a, c) {
    return c[1] ? [].concat(_toConsumableArray(a), [c[1]]) : [].concat(_toConsumableArray(a), [""]);
  }, []);
  var thousandsFormat = (0, _d.format)(".3s");
  var percentFormat = (0, _d.format)(".1%");
  var ticksFormatted = ticks.map(function (d) {
    return d === "" ? "" : d >= 1000000 || d <= -1000000 ? _civicFormat["default"].numeric(d) : d >= 1000 || d <= -1000 ? thousandsFormat(d) : d > 1 || d < -1 ? _civicFormat["default"].numeric(d) : d === 0 ? "0  " : d <= 1 && d >= -1 ? percentFormat(d) : d && typeof d === "string" ? d : _civicFormat["default"].numeric(d);
  });
  var tickStyle = mapProps.scaleType === "threshold" ? tickNumsThreshold : mapProps.scaleType === "ordinal" ? tickNumsOrdinal : tickNums;
  var legend = mapColorsArr.map(function (d, i) {
    return _react["default"].createElement("div", {
      key: "legend-pt-".concat(d.slice(5, 12).replace(/,/g, "")),
      className: colorBox,
      style: {
        backgroundColor: d
      }
    }, _react["default"].createElement("div", {
      className: tickStyle
    }, _react["default"].createElement("span", null, ticksFormatted[i])));
  });
  return _react["default"].createElement("div", {
    className: legendContainer
  }, legend);
};

SandboxMapLegend.propTypes = {
  data: _propTypes["default"].shape({}).isRequired,
  mapProps: _propTypes["default"].shape({}).isRequired
};
var _default = SandboxMapLegend;
exports["default"] = _default;