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

Official repo for Hack Oregon React component library

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

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

function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function _templateObject13() {
  var data = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: 35px;\n  left: 28%;\n  width: 50%;\n  margin: auto;\n  text-align: center;\n"]);

  _templateObject13 = function _templateObject13() {
    return data;
  };

  return data;
}

function _templateObject12() {
  var data = _taggedTemplateLiteral(["\n  width: 90%;\n  margin: 2% 2% 2% 8%;\n  padding-bottom: 25px;\n  overflow-y: hidden;\n"]);

  _templateObject12 = function _templateObject12() {
    return data;
  };

  return data;
}

function _templateObject11() {
  var data = _taggedTemplateLiteral(["\n  text-align: center;\n  border: 1px solid lightGray;\n  background-color: #f0f0f0;\n  color: #dc4556;\n  font-size: 20px;\n  height: 98%;\n  width: 50%;\n  margin: 0 auto;\n"]);

  _templateObject11 = function _templateObject11() {
    return data;
  };

  return data;
}

function _templateObject10() {
  var data = _taggedTemplateLiteral(["\n  text-align: center;\n  border: 1px solid lightGray;\n  background-color: #f0f0f0;\n  color: dimGray;\n  font-size: 20px;\n  height: 98%;\n  width: 50%;\n  margin: 0 auto;\n"]);

  _templateObject10 = function _templateObject10() {
    return data;
  };

  return data;
}

function _templateObject9() {
  var data = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: 40px;\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n"]);

  _templateObject9 = function _templateObject9() {
    return data;
  };

  return data;
}

function _templateObject8() {
  var data = _taggedTemplateLiteral(["\n  position: absolute;\n  left: -1px;\n  top: -1px;\n"]);

  _templateObject8 = function _templateObject8() {
    return data;
  };

  return data;
}

function _templateObject7() {
  var data = _taggedTemplateLiteral(["\n  flex: 1;\n  margin 1% auto;\n  font-size: 20px;\n  text-align: center;\n"]);

  _templateObject7 = function _templateObject7() {
    return data;
  };

  return data;
}

function _templateObject6() {
  var data = _taggedTemplateLiteral(["\n  flex: 3;\n  margin auto 20px;\n"]);

  _templateObject6 = function _templateObject6() {
    return data;
  };

  return data;
}

function _templateObject5() {
  var data = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  width: 100%;\n  color: #dc4556;\n  z-index: 4;\n  opacity: 0.9;\n  border: 1px solid #ddd;\n  border-radius: 2px;\n  box-shadow: 5px 5px 15px -3px rgba(0, 0, 0, 0.2);\n"]);

  _templateObject5 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  overflow-x: hidden;\n"]);

  _templateObject4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteral(["\n  height: 0;\n  opacity: 0;\n  transition: height 750ms ease-out, opacity 0s linear;\n"]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n  height: 400px;\n  overflow-y: auto;\n  overflow-x: hidden;\n  opacity: 0.9;\n  transition: height 750ms ease-out, opacity 1.5s ease-in;\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: 50px;\n  left: 25px;\n  display: flex;\n  flex-direction: column;\n  width: 500px;\n  background: rgba(243, 242, 243, 0.9);\n  color: rgb(85, 85, 85);\n  border: 1px solid #ddd;\n  border-radius: 2px;\n  box-shadow: 5px 5px 15px -3px rgba(0, 0, 0, 0.2);\n  @media (max-width: 900px) {\n    width: 92%;\n    left: 1%;\n  }\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

import React, { useState } from "react";
import { arrayOf, bool, func, node, number, oneOfType, shape, string } from "prop-types";
import { css } from "emotion";
import PieChart from "../PieChart/PieChart";
import HorizontalBarChart from "../HorizontalBarChart/HorizontalBarChart";
import civicFormat from "../utils/civicFormat";
import { ICONS } from "../styleConstants";
var container = css(_templateObject());
var dashboardOpen = css(_templateObject2());
var dashboardClosed = css(_templateObject3());
var contentContainer = css(_templateObject4());
var toggleContainer = css(_templateObject5());
var toggleTitle = css(_templateObject6());
var toggleArrow = css(_templateObject7());
var watermarkContainer = css(_templateObject8());
var buttonContainer = css(_templateObject9());
var icon = css(_templateObject10());
var iconActive = css(_templateObject11());
var viz = css(_templateObject12());
var donutPercent = css(_templateObject13());

var createTextViz = function createTextViz(text, index) {
  return React.createElement("div", {
    className: viz,
    key: index
  }, React.createElement("h2", null, text.title), React.createElement("h3", null, text.data.toLocaleString()));
};

var createDonutViz = function createDonutViz(donut, index) {
  var _donut$data = _slicedToArray(donut.data, 1),
      percentValue = _donut$data[0];

  var salmon = "#EE495C";
  var gray = "#a9a9a9";
  return React.createElement("div", {
    className: viz,
    key: index
  }, React.createElement("h2", null, donut.title), React.createElement("h2", {
    className: donutPercent
  }, percentValue.y < 1 ? civicFormat.percentage(percentValue.y) : "".concat(percentValue.y.toFixed(1), "%")), React.createElement(PieChart, {
    data: donut.data,
    colors: [salmon, gray],
    width: 400,
    height: 400,
    innerRadius: 110,
    halfDoughnut: true
  }));
};

var createBarsViz = function createBarsViz(bars, index) {
  return React.createElement("div", {
    className: viz,
    key: index
  }, React.createElement("h2", null, bars.title), React.createElement(HorizontalBarChart, {
    minimalist: bars.minimalist,
    data: bars.data,
    sortOrder: bars.sortOrder,
    dataValue: bars.dataValue,
    dataLabel: bars.dataLabel,
    dataKeyLabel: "",
    title: "",
    subtitle: "",
    xLabel: "",
    yLabel: ""
  }));
};

var placeholder = React.createElement("div", {
  className: viz
}, React.createElement("h2", null, "Please select a polygon"));

var CivicDashboard = function CivicDashboard(props) {
  var data = props.data,
      children = props.children,
      isDashboardOpen = props.isDashboardOpen,
      _onClick = props.onClick;

  var _useState = useState("visualizations"),
      _useState2 = _slicedToArray(_useState, 2),
      display = _useState2[0],
      setDisplay = _useState2[1];

  var createVisualizations = data.map(function (object, index) {
    var vizType = object.visualizationType;
    return vizType === "Text" ? createTextViz(object, index) : vizType === "PercentDonut" ? createDonutViz(object, index) : vizType === "ComparisonBar" ? createBarsViz(object, index) : null;
  });

  var _createVisualizations = _slicedToArray(createVisualizations, 1),
      hasVisualizations = _createVisualizations[0];

  var visualizations = hasVisualizations ? createVisualizations : placeholder;
  var civicWatermark = React.createElement("div", {
    className: watermarkContainer
  }, React.createElement("svg", {
    width: "134",
    height: "135",
    xmlns: "http://www.w3.org/2000/svg"
  }, React.createElement("g", {
    fill: "none",
    fillRule: "evenodd"
  }, React.createElement("path", {
    d: "M0 134.658V0l11.566 11.597v123.061H0z",
    fill: "#191119"
  }), React.createElement("path", {
    d: "M133.864 0v11.597H11.566v.008L0 .008V0h133.864z",
    fill: "#DC4556"
  }))));
  var visualizationButtons = React.createElement("div", {
    className: buttonContainer
  }, React.createElement("div", {
    className: display === "description" ? iconActive : icon,
    onClick: function onClick() {
      return setDisplay("description");
    },
    onKeyPress: function onKeyPress() {
      return setDisplay("description");
    },
    tabIndex: 0,
    role: "button"
  }, React.createElement("div", {
    className: ICONS.info
  })), React.createElement("div", {
    className: display === "visualizations" ? iconActive : icon,
    onClick: function onClick() {
      return setDisplay("visualizations");
    },
    onKeyPress: function onKeyPress() {
      return setDisplay("visualizations");
    },
    tabIndex: 0,
    role: "button"
  }, React.createElement("div", {
    className: ICONS.eye
  })));
  var dashboardToggleButton = React.createElement("div", {
    className: toggleContainer,
    onClick: function onClick() {
      return _onClick();
    },
    onKeyPress: function onKeyPress() {
      return _onClick();
    },
    tabIndex: 0,
    role: "button"
  }, React.createElement("div", {
    className: toggleTitle
  }, isDashboardOpen ? "" : "Please select a polygon"), React.createElement("div", {
    className: toggleArrow
  }, React.createElement("div", {
    className: isDashboardOpen ? ICONS.arrowDown : ICONS.arrowUp
  })));
  return React.createElement("div", {
    className: container
  }, React.createElement("div", {
    className: isDashboardOpen ? dashboardOpen : dashboardClosed
  }, React.createElement("div", {
    className: contentContainer
  }, display === "description" ? children : visualizations), civicWatermark, children ? visualizationButtons : null), dashboardToggleButton);
};

CivicDashboard.propTypes = {
  data: arrayOf(shape({
    data: oneOfType([arrayOf(shape({})), number, string]),
    id: oneOfType([number, string]),
    title: string,
    visualizationType: string
  })),
  children: node,
  isDashboardOpen: bool,
  onClick: func
};
export default CivicDashboard;