@hackoregon/component-library/es/Sandbox/SandboxMapLegend.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 { scaleQuantize, extent, format } from "d3";
import { css } from "emotion";
import civicFormat from "../utils/civicFormat";
var legendContainer = 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 = 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 = css("\n  position: absolute;\n  bottom: -20px;\n  right: 0;\n  font-size: 14px;\n");
var tickNumsThreshold = css("\n  position: absolute;\n  bottom: -20px;\n  right: -7px;\n  font-size: 14px;\n");
var tickNumsOrdinal = 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 = scaleQuantize().domain(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 = format(".3s");
  var percentFormat = format(".1%");
  var ticksFormatted = ticks.map(function (d) {
    return d === "" ? "" : d >= 1000000 || d <= -1000000 ? civicFormat.numeric(d) : d >= 1000 || d <= -1000 ? thousandsFormat(d) : d > 1 || d < -1 ? civicFormat.numeric(d) : d === 0 ? "0  " : d <= 1 && d >= -1 ? percentFormat(d) : d && typeof d === "string" ? d : civicFormat.numeric(d);
  });
  var tickStyle = mapProps.scaleType === "threshold" ? tickNumsThreshold : mapProps.scaleType === "ordinal" ? tickNumsOrdinal : tickNums;
  var legend = mapColorsArr.map(function (d, i) {
    return React.createElement("div", {
      key: "legend-pt-".concat(d.slice(5, 12).replace(/,/g, "")),
      className: colorBox,
      style: {
        backgroundColor: d
      }
    }, React.createElement("div", {
      className: tickStyle
    }, React.createElement("span", null, ticksFormatted[i])));
  });
  return React.createElement("div", {
    className: legendContainer
  }, legend);
};

SandboxMapLegend.propTypes = {
  data: PropTypes.shape({}).isRequired,
  mapProps: PropTypes.shape({}).isRequired
};
export default SandboxMapLegend;