@spaced-out/ui-design-system/lib/components/Charts/ChartWrapper/ChartWrapper.js

Sense UI components library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.EXPORT_OPTIONS = exports.ChartWrapper = void 0;
var React = _interopRequireWildcard(require("react"));
var _highcharts = _interopRequireDefault(require("highcharts"));
var _accessibility = _interopRequireDefault(require("highcharts/modules/accessibility"));
var _drilldown = _interopRequireDefault(require("highcharts/modules/drilldown"));
var _exporting = _interopRequireDefault(require("highcharts/modules/exporting"));
var _size = require("../../../styles/variables/_size");
var _classify = _interopRequireDefault(require("../../../utils/classify"));
var _ButtonDropdown = require("../../ButtonDropdown");
var _Card = require("../../Card");
var _CircularLoader = require("../../CircularLoader");
var _ChartWrapperModule = _interopRequireDefault(require("./ChartWrapper.module.css"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
//$FlowFixMe[untyped-import]
//$FlowFixMe[untyped-import]
//$FlowFixMe[untyped-import]
//$FlowFixMe[untyped-import]
const EXPORT_OPTIONS = exports.EXPORT_OPTIONS = Object.freeze({
  download_as_png: {
    key: 'download_as_png',
    label: 'Download as PNG',
    format: 'image/png'
  },
  download_as_jpeg: {
    key: 'download_as_jpeg',
    label: 'Download as JPEG',
    format: 'image/jpeg'
  },
  download_as_pdf: {
    key: 'download_as_pdf',
    label: 'Download as PDF',
    format: 'application/pdf'
  },
  download_as_svg: {
    key: 'download_as_svg',
    label: 'Download as SVG',
    format: 'image/svg+xml'
  }
});

// on assumption that all export options will be shown by default
const DEFAULT_EXPORT_OPTIONS = Object.keys(EXPORT_OPTIONS).map(exportKey => EXPORT_OPTIONS[exportKey]);
const CustomExportButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
  let {
    customExportOptions = null
  } = _ref;
  (0, _exporting.default)(_highcharts.default);
  (0, _drilldown.default)(_highcharts.default);
  (0, _accessibility.default)(_highcharts.default);
  const exportOptions = customExportOptions ? customExportOptions : DEFAULT_EXPORT_OPTIONS;
  const menuOptions = exportOptions.map(exportOption => {
    const {
      key,
      label
    } = exportOption;
    return {
      key,
      label
    };
  });
  const handleDownload = exportKey => {
    const exportOptionObject = exportOptions.find(exportOption => exportOption.key === exportKey);
    const exportFormat = exportOptionObject?.format || '';
    if (ref.current) {
      // $FlowFixMe[prop-missing]
      // $FlowFixMe[incompatible-use]
      ref.current.chart?.exportChart({
        type: exportFormat
      });
    }
  };
  return /*#__PURE__*/React.createElement(_ButtonDropdown.ButtonDropdown, {
    ariaLabel: "Export Chart Menu",
    menu: {
      isFluid: true,
      menuDisabled: false,
      options: menuOptions,
      size: 'medium',
      width: _size.size180
    },
    iconLeftName: "ellipsis",
    onOptionSelect: option => handleDownload(option.key),
    size: "small",
    type: "ghost",
    anchorPosition: _ButtonDropdown.ANCHOR_POSITION_TYPE.bottomEnd
  });
});
const ChartWrapper = exports.ChartWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
  let {
    isLoading,
    title,
    children,
    classNames,
    customExportOptions,
    headerActions,
    hasEmptyData = false,
    emptyText
  } = _ref2;
  return /*#__PURE__*/React.createElement(_Card.Card, {
    classNames: {
      wrapper: (0, _classify.default)(_ChartWrapperModule.default.wrapper, {
        [_ChartWrapperModule.default.justifyCenter]: isLoading
      }, classNames?.wrapper)
    }
  }, isLoading ? /*#__PURE__*/React.createElement(_CircularLoader.CircularLoader, {
    size: "large",
    className: (0, _classify.default)(_ChartWrapperModule.default.loader, classNames?.loader)
  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Card.CardHeader, {
    className: classNames?.header
  }, /*#__PURE__*/React.createElement(_Card.CardTitle, {
    className: classNames?.title
  }, title), /*#__PURE__*/React.createElement(_Card.CardActions, {
    className: (0, _classify.default)(_ChartWrapperModule.default.chartCardActions, classNames?.actions)
  }, /*#__PURE__*/React.createElement(CustomExportButton, {
    ref: ref,
    customExportOptions: customExportOptions
  }), headerActions ? headerActions : null)), /*#__PURE__*/React.createElement(_Card.CardContent, {
    className: (0, _classify.default)(_ChartWrapperModule.default.chartContent, classNames?.content)
  }, hasEmptyData && emptyText ? emptyText : children)));
});