@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 _qa = require("../../../utils/qa");
var _ButtonDropdown = require("../../ButtonDropdown");
var _Card = require("../../Card");
var _CircularLoader = require("../../CircularLoader");
var _ChartWrapperModule = _interopRequireDefault(require("./ChartWrapper.module.css"));
var _jsxRuntime = require("react/jsx-runtime");
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); }
// Type definitions for Highcharts chart ref

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,
    testId
  } = _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' in ref && ref.current) {
      ref.current.chart?.exportChart({
        type: exportFormat
      }, {});
    }
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonDropdown.ButtonDropdown, {
    ariaLabel: "Export Chart Menu",
    menu: {
      isFluid: false,
      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,
    testId: (0, _qa.generateTestId)({
      base: testId,
      slot: 'export-button'
    })
  });
});
const ChartWrapper = exports.ChartWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
  let {
    isLoading,
    title,
    children,
    classNames,
    customExportOptions,
    headerActions,
    hasEmptyData = false,
    emptyText,
    testId
  } = _ref2;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.Card, {
    classNames: {
      wrapper: (0, _classify.default)(_ChartWrapperModule.default.wrapper, {
        [_ChartWrapperModule.default.justifyCenter]: isLoading
      }, classNames?.wrapper)
    },
    testId: (0, _qa.generateTestId)({
      base: testId,
      slot: 'card'
    }),
    children: isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularLoader.CircularLoader, {
      size: "large",
      className: (0, _classify.default)(_ChartWrapperModule.default.loader, classNames?.loader),
      testId: (0, _qa.generateTestId)({
        base: testId,
        slot: 'loader'
      })
    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.CardHeader, {
        className: classNames?.header,
        testId: (0, _qa.generateTestId)({
          base: testId,
          slot: 'header'
        }),
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardTitle, {
          className: classNames?.title,
          testId: (0, _qa.generateTestId)({
            base: testId,
            slot: 'title'
          }),
          children: title
        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.CardActions, {
          className: (0, _classify.default)(_ChartWrapperModule.default.chartCardActions, classNames?.actions),
          testId: (0, _qa.generateTestId)({
            base: testId,
            slot: 'actions'
          }),
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CustomExportButton, {
            ref: ref,
            customExportOptions: customExportOptions,
            testId: testId
          }), headerActions ? headerActions : null]
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardContent, {
        className: (0, _classify.default)(_ChartWrapperModule.default.chartContent, classNames?.content),
        testId: (0, _qa.generateTestId)({
          base: testId,
          slot: 'content'
        }),
        children: hasEmptyData && emptyText ? emptyText : children
      })]
    })
  });
});