function _templateObject5() {
  var data = _taggedTemplateLiteral(["\n    margin: 0 auto;\n    width: 100%;\n    max-width: 900px;\n    height: calc(100vw / ", ");\n    max-height: ", "px;\n    background-color: ", ";\n    display: grid;\n    justify-items: center;\n    align-items: center;\n  "]);

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

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteral(["\n    position: relative;\n    padding-top: ", "%;\n    height: 100%;\n  "]);

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

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteral(["\n    margin: 0 auto;\n    max-width: 900px;\n    width: 100%;\n    ", ";\n  "]);

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

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n    margin: 0;\n  "]);

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

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  text-align: center;\n  background: #fdd;\n  height: 100%;\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 PropTypes from "prop-types";
import { jsx, css } from "@emotion/core";
import { BrandColors } from "../index";
import ChartTitle from "../ChartTitle";
import Logo from "../Logo/Logo";
var chartError = css(_templateObject());
var defaultVictoryAspectRatio = 650 / 350;

var ChartContainer = function ChartContainer(_ref) {
  var title = _ref.title,
      error = _ref.error,
      loading = _ref.loading,
      subtitle = _ref.subtitle,
      children = _ref.children,
      className = _ref.className,
      aspectRatio = _ref.aspectRatio;
  var figureWrapper = css(_templateObject2());
  var wrapperStyle = css(_templateObject3(), className);
  var fullHeight = css(_templateObject4(), 100 / aspectRatio);
  var skeletonStyle = css(_templateObject5(), aspectRatio, 900 / aspectRatio, BrandColors.subdued.hex);
  var content = jsx("div", {
    css: skeletonStyle
  }, jsx(Logo, {
    type: "squareLogoAnimated"
  }));

  if (!loading) {
    content = jsx("div", {
      css: wrapperStyle
    }, children);
  } else if (error) {
    content = jsx("div", {
      css: [wrapperStyle, fullHeight, chartError]
    }, error);
  }

  return jsx("figure", {
    css: figureWrapper
  }, jsx(ChartTitle, {
    title: title,
    subtitle: subtitle
  }), content);
};

ChartContainer.propTypes = {
  title: PropTypes.string,
  error: PropTypes.string,
  loading: PropTypes.bool,
  children: PropTypes.node,
  subtitle: PropTypes.string,
  className: PropTypes.string,
  aspectRatio: PropTypes.number
};
ChartContainer.defaultProps = {
  aspectRatio: defaultVictoryAspectRatio
};
export default ChartContainer;