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

Official repo for Hack Oregon React component library

"use strict";

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

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

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

var _emotion = require("emotion");

var _PieChart = _interopRequireDefault(require("../PieChart/PieChart"));

var _HorizontalBarChart = _interopRequireDefault(require("../HorizontalBarChart/HorizontalBarChart"));

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

var _styleConstants = require("../styleConstants");

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

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }

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

var container = (0, _emotion.css)(_templateObject());
var dashboardOpen = (0, _emotion.css)(_templateObject2());
var dashboardClosed = (0, _emotion.css)(_templateObject3());
var contentContainer = (0, _emotion.css)(_templateObject4());
var toggleContainer = (0, _emotion.css)(_templateObject5());
var toggleTitle = (0, _emotion.css)(_templateObject6());
var toggleArrow = (0, _emotion.css)(_templateObject7());
var watermarkContainer = (0, _emotion.css)(_templateObject8());
var buttonContainer = (0, _emotion.css)(_templateObject9());
var icon = (0, _emotion.css)(_templateObject10());
var iconActive = (0, _emotion.css)(_templateObject11());
var viz = (0, _emotion.css)(_templateObject12());
var donutPercent = (0, _emotion.css)(_templateObject13());

var createTextViz = function createTextViz(text, index) {
  return _react["default"].createElement("div", {
    className: viz,
    key: index
  }, _react["default"].createElement("h2", null, text.title), _react["default"].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["default"].createElement("div", {
    className: viz,
    key: index
  }, _react["default"].createElement("h2", null, donut.title), _react["default"].createElement("h2", {
    className: donutPercent
  }, percentValue.y < 1 ? _civicFormat["default"].percentage(percentValue.y) : "".concat(percentValue.y.toFixed(1), "%")), _react["default"].createElement(_PieChart["default"], {
    data: donut.data,
    colors: [salmon, gray],
    width: 400,
    height: 400,
    innerRadius: 110,
    halfDoughnut: true
  }));
};

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

var placeholder = _react["default"].createElement("div", {
  className: viz
}, _react["default"].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 = (0, _react.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["default"].createElement("div", {
    className: watermarkContainer
  }, _react["default"].createElement("svg", {
    width: "134",
    height: "135",
    xmlns: "http://www.w3.org/2000/svg"
  }, _react["default"].createElement("g", {
    fill: "none",
    fillRule: "evenodd"
  }, _react["default"].createElement("path", {
    d: "M0 134.658V0l11.566 11.597v123.061H0z",
    fill: "#191119"
  }), _react["default"].createElement("path", {
    d: "M133.864 0v11.597H11.566v.008L0 .008V0h133.864z",
    fill: "#DC4556"
  }))));

  var visualizationButtons = _react["default"].createElement("div", {
    className: buttonContainer
  }, _react["default"].createElement("div", {
    className: display === "description" ? iconActive : icon,
    onClick: function onClick() {
      return setDisplay("description");
    },
    onKeyPress: function onKeyPress() {
      return setDisplay("description");
    },
    tabIndex: 0,
    role: "button"
  }, _react["default"].createElement("div", {
    className: _styleConstants.ICONS.info
  })), _react["default"].createElement("div", {
    className: display === "visualizations" ? iconActive : icon,
    onClick: function onClick() {
      return setDisplay("visualizations");
    },
    onKeyPress: function onKeyPress() {
      return setDisplay("visualizations");
    },
    tabIndex: 0,
    role: "button"
  }, _react["default"].createElement("div", {
    className: _styleConstants.ICONS.eye
  })));

  var dashboardToggleButton = _react["default"].createElement("div", {
    className: toggleContainer,
    onClick: function onClick() {
      return _onClick();
    },
    onKeyPress: function onKeyPress() {
      return _onClick();
    },
    tabIndex: 0,
    role: "button"
  }, _react["default"].createElement("div", {
    className: toggleTitle
  }, isDashboardOpen ? "" : "Please select a polygon"), _react["default"].createElement("div", {
    className: toggleArrow
  }, _react["default"].createElement("div", {
    className: isDashboardOpen ? _styleConstants.ICONS.arrowDown : _styleConstants.ICONS.arrowUp
  })));

  return _react["default"].createElement("div", {
    className: container
  }, _react["default"].createElement("div", {
    className: isDashboardOpen ? dashboardOpen : dashboardClosed
  }, _react["default"].createElement("div", {
    className: contentContainer
  }, display === "description" ? children : visualizations), civicWatermark, children ? visualizationButtons : null), dashboardToggleButton);
};

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