@spaced-out/ui-design-system 0.4.12 → 0.4.13-beta.0

package/lib/components/Card/Card.tsx

@@ -0,0 +1,172 @@
+import {Flow} from 'flow-to-typescript-codemod';
+
+import * as React from 'react';
+
+import * as SPACES from '../../styles/variables/_space';
+import classify from '../../utils/classify';
+import {capitalize} from '../../utils/string';
+
+import css from './Card.module.css';
+
+
+type ClassNames = Readonly<{
+  wrapper?: string;
+}>;
+
+export const PADDING_SIZES = Object.freeze({
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
+  none: 'none',
+});
+
+export type PaddingSizeType = typeof PADDING_SIZES[keyof typeof PADDING_SIZES];
+
+export type CardProps = {
+  classNames?: ClassNames;
+  children: React.ReactNode;
+  paddingTop?: PaddingSizeType;
+  paddingRight?: PaddingSizeType;
+  paddingBottom?: PaddingSizeType;
+  paddingLeft?: PaddingSizeType;
+};
+
+export type CardChildProps = {
+  className?: string;
+  children: React.ReactNode;
+};
+
+export type ClickableCardProps = ((CardProps) & {
+  onClick?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
+  disabled?: boolean;
+});
+
+const getPaddingValue = (size: PaddingSizeType): string => {
+  const spaceKey = 'space' + capitalize(size);
+// @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'typeof import("/Users/diwaker/SpacedOut/ui-design-system/src/styles/variables/_space")'.
+  return SPACES[spaceKey] || SPACES['spaceNone'];
+};
+
+export const CardHeader = (
+  {
+    className,
+    children,
+    ...props
+  }: CardChildProps,
+) => (<div {...props} className={classify(css.cardHeader, className)}>
+  {children}
+</div>);
+
+export const CardTitle = (
+  {
+    className,
+    children,
+    ...props
+  }: CardChildProps,
+) => (<div {...props} className={classify(css.cardTitle, className)}>
+  {children}
+</div>);
+
+export const CardActions = (
+  {
+    className,
+    children,
+    ...props
+  }: CardChildProps,
+) => (<div {...props} className={classify(css.cardActions, className)}>
+  {children}
+</div>);
+
+export const CardFooter = (
+  {
+    className,
+    children,
+    ...props
+  }: CardChildProps,
+) => (<div {...props} className={classify(css.cardFooter, className)}>
+  {children}
+</div>);
+
+export const CardContent = (
+  {
+    className,
+    children,
+    ...props
+  }: CardChildProps,
+) => (<div {...props} className={classify(css.cardContent, className)}>
+  {children}
+</div>);
+
+export const Card: Flow.AbstractComponent<CardProps, HTMLDivElement> =
+  React.forwardRef<HTMLDivElement, CardProps>((
+    {
+      children,
+      classNames,
+      paddingTop = 'medium',
+      paddingRight = 'medium',
+      paddingBottom = 'medium',
+      paddingLeft = 'medium',
+      ...props
+    }: CardProps,
+    ref,
+  ) => (<div
+    {...props}
+    style={{
+      '--card-padding-top': getPaddingValue(paddingTop),
+      '--card-padding-right': getPaddingValue(paddingRight),
+      '--card-padding-bottom': getPaddingValue(paddingBottom),
+      '--card-padding-left': getPaddingValue(paddingLeft),
+    }}
+    data-testid="Card"
+    className={classify(css.cardWrapper, classNames?.wrapper)}
+    ref={ref}
+  >
+    {children}
+  </div>));
+
+export const ClickableCard: Flow.AbstractComponent<ClickableCardProps, HTMLDivElement> = React.forwardRef<HTMLDivElement, ClickableCardProps>((
+  {
+    classNames,
+    onClick,
+    disabled = false,
+    ...props
+  }: ClickableCardProps,
+  ref,
+) => {
+  const componentRef = React.useRef(null);
+// @ts-ignore - TS2322 - Type 'null' is not assignable to type 'HTMLDivElement'.
+  React.useImperativeHandle(ref, () => componentRef.current);
+  React.useEffect(() => {
+    if (disabled) {
+// @ts-ignore - TS2339 - Property 'blur' does not exist on type 'never'.
+      componentRef.current?.blur();
+    }
+  }, [disabled]);
+  const onClickHandler = (e: any) => {
+    if (!disabled) {
+      onClick && onClick(e);
+    }
+  };
+  const onKeyDownHandler = (e: any) => {
+    if (e.key === 'Enter') {
+      onClickHandler(e);
+    }
+  };
+  return (
+    <Card
+      {...props}
+      classNames={{
+        wrapper: classify(
+          css.clickableCard,
+          {[css.disabled]: disabled},
+          classNames?.wrapper,
+        ),
+      }}
+// @ts-ignore - TS2322 - Type '{ classNames: { wrapper: string; }; tabIndex: number; onClick: (e: any) => void; onKeyDown: (e: any) => void; ref: ForwardedRef<HTMLDivElement>; children: React.ReactNode; paddingTop?: string | undefined; paddingRight?: string | undefined; paddingBottom?: string | undefined; paddingLeft?: string | undefined; }' is not assignable to type 'IntrinsicAttributes & CardProps & RefAttributes<HTMLDivElement>'.
+      tabIndex={disabled ? -1 : 0}
+      onClick={onClickHandler}
+      onKeyDown={onKeyDownHandler}
+      ref={ref}
+    />
+  );
+});

package/lib/components/Card/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Card';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Card/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

package/lib/components/Card/index.ts

@@ -0,0 +1 @@
+export * from './Card';

package/lib/components/Charts/ChartTooltip/index.d.ts

@@ -0,0 +1,3 @@
+import type { Tooltip } from '../../../types/charts';
+export declare const tooltipTheme: Tooltip;
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Charts/ChartTooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Charts/ChartTooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAMnD,eAAO,MAAM,YAAY,EAAE,OAM1B,CAAC"}

package/lib/components/Charts/ChartTooltip/index.ts

@@ -0,0 +1,13 @@
+import type {Tooltip} from '../../../types/charts';
+
+import typographyCss from '../../../styles/typography.module.css';
+import css from './ChartTooltip.module.css';
+
+
+export const tooltipTheme: Tooltip = {
+  headerFormat: `<span class="${typographyCss.bodySmall} ${css.tooltipHeader}">{point.key}</span>`,
+  pointFormat: `<span class=${css.tooltipPoint}>
+      <span style="background-color:{point.color};" class=${css.indicatorCircle}></span>
+      <span class="${css.tooltipContent} ${typographyCss.bodyMedium}"> {series.name}: {point.y}</span>
+    </span>`,
+};

package/lib/components/Charts/ChartWrapper/ChartWrapper.d.ts

@@ -0,0 +1,50 @@
+import { Flow } from 'flow-to-typescript-codemod';
+import * as React from 'react';
+export type ExportOptionType = {
+    key: string;
+    label: string;
+    format: string;
+};
+export declare const EXPORT_OPTIONS: Readonly<{
+    download_as_png: {
+        key: string;
+        label: string;
+        format: string;
+    };
+    download_as_jpeg: {
+        key: string;
+        label: string;
+        format: string;
+    };
+    download_as_pdf: {
+        key: string;
+        label: string;
+        format: string;
+    };
+    download_as_svg: {
+        key: string;
+        label: string;
+        format: string;
+    };
+}>;
+export type ChartWrapperClassNames = Readonly<{
+    wrapper?: string;
+    header?: string;
+    title?: string;
+    actions?: string;
+    content?: string;
+    loader?: string;
+}>;
+type ChartWrapperProps = {
+    isLoading?: boolean;
+    title: React.ReactNode;
+    children?: React.ReactNode;
+    classNames?: ChartWrapperClassNames;
+    customExportOptions?: Array<ExportOptionType> | null;
+    headerActions?: React.ReactNode;
+    hasEmptyData?: boolean;
+    emptyText?: React.ReactNode;
+};
+export declare const ChartWrapper: Flow.AbstractComponent<ChartWrapperProps, HTMLDivElement>;
+export {};
+//# sourceMappingURL=ChartWrapper.d.ts.map

package/lib/components/Charts/ChartWrapper/ChartWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartWrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/Charts/ChartWrapper/ChartWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAEhD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsB/B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;EAqBzB,CAAC;AA4DH,MAAM,MAAM,sBAAsB,GAAG,QAAQ,CAAC;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC,CAAC;AAEH,KAAK,iBAAiB,GAAG;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,sBAAsB,CAAC;IACpC,mBAAmB,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;IACrD,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,iBAAiB,EAAE,cAAc,CA+C1E,CAAC"}

package/lib/components/Charts/ChartWrapper/ChartWrapper.js

@@ -17,10 +17,6 @@ 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',
@@ -45,7 +41,9 @@ const EXPORT_OPTIONS = exports.EXPORT_OPTIONS = Object.freeze({
 });
 
 // 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 DEFAULT_EXPORT_OPTIONS = Object.keys(EXPORT_OPTIONS).map(
+// @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Readonly<{ download_as_png: { key: string; label: string; format: string; }; download_as_jpeg: { key: string; label: string; format: string; }; download_as_pdf: { key: string; label: string; format: string; }; download_as_svg: { ...; }; }>'.
+exportKey => EXPORT_OPTIONS[exportKey]);
 const CustomExportButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     customExportOptions = null
@@ -67,9 +65,9 @@ const CustomExportButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const handleDownload = exportKey => {
     const exportOptionObject = exportOptions.find(exportOption => exportOption.key === exportKey);
     const exportFormat = exportOptionObject?.format || '';
+    // @ts-ignore - TS2531 - Object is possibly 'null'. | TS2339 - Property 'current' does not exist on type '((instance: HTMLDivElement | null) => void) | MutableRefObject<HTMLDivElement | null>'.
     if (ref.current) {
-      // $FlowFixMe[prop-missing]
-      // $FlowFixMe[incompatible-use]
+      // @ts-ignore - TS2531 - Object is possibly 'null'. | TS2339 - Property 'current' does not exist on type '((instance: HTMLDivElement | null) => void) | MutableRefObject<HTMLDivElement | null>'.
       ref.current.chart?.exportChart({
         type: exportFormat
       });

package/lib/components/Charts/ChartWrapper/ChartWrapper.tsx

@@ -0,0 +1,179 @@
+import {Flow} from 'flow-to-typescript-codemod';
+
+import * as React from 'react';
+import Highcharts from 'highcharts';
+import accessibility from 'highcharts/modules/accessibility';
+import drilldown from 'highcharts/modules/drilldown';
+import exporting from 'highcharts/modules/exporting';
+
+import {size180} from '../../../styles/variables/_size';
+import classify from '../../../utils/classify';
+import {ANCHOR_POSITION_TYPE, ButtonDropdown} from '../../ButtonDropdown';
+import {
+  Card,
+  CardActions,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '../../Card';
+import {CircularLoader} from '../../CircularLoader';
+import type {MenuOption} from '../../Menu';
+
+import css from './ChartWrapper.module.css';
+
+
+export type ExportOptionType = {
+  key: string;
+  label: string;
+  format: string;
+};
+
+export const 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(
+// @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Readonly<{ download_as_png: { key: string; label: string; format: string; }; download_as_jpeg: { key: string; label: string; format: string; }; download_as_pdf: { key: string; label: string; format: string; }; download_as_svg: { ...; }; }>'.
+  (exportKey) => EXPORT_OPTIONS[exportKey],
+);
+
+type CustomExportButtonProps = {
+  ref?: HTMLDivElement;
+  customExportOptions?: Array<ExportOptionType> | null;
+};
+
+const CustomExportButton = React.forwardRef<HTMLDivElement, CustomExportButtonProps>(({
+  customExportOptions = null,
+}: CustomExportButtonProps, ref) => {
+  exporting(Highcharts);
+  drilldown(Highcharts);
+  accessibility(Highcharts);
+
+  const exportOptions = customExportOptions
+    ? customExportOptions
+    : DEFAULT_EXPORT_OPTIONS;
+
+  const menuOptions: Array<MenuOption> = exportOptions.map((exportOption) => {
+    const {key, label} = exportOption;
+    return {key, label};
+  });
+
+  const handleDownload = (exportKey: string): void => {
+    const exportOptionObject = exportOptions.find(
+      (exportOption) => exportOption.key === exportKey,
+    );
+    const exportFormat = exportOptionObject?.format || '';
+// @ts-ignore - TS2531 - Object is possibly 'null'. | TS2339 - Property 'current' does not exist on type '((instance: HTMLDivElement | null) => void) | MutableRefObject<HTMLDivElement | null>'.
+    if (ref.current) {
+// @ts-ignore - TS2531 - Object is possibly 'null'. | TS2339 - Property 'current' does not exist on type '((instance: HTMLDivElement | null) => void) | MutableRefObject<HTMLDivElement | null>'.
+      ref.current.chart?.exportChart({type: exportFormat});
+    }
+  };
+
+  return (
+    <ButtonDropdown
+      ariaLabel="Export Chart Menu"
+      menu={{
+        isFluid: true,
+        menuDisabled: false,
+        options: menuOptions,
+        size: 'medium',
+        width: size180,
+      }}
+      iconLeftName="ellipsis"
+      onOptionSelect={(option) => handleDownload(option.key)}
+      size="small"
+      type="ghost"
+      anchorPosition={ANCHOR_POSITION_TYPE.bottomEnd}
+    />
+  );
+});
+
+export type ChartWrapperClassNames = Readonly<{
+  wrapper?: string;
+  header?: string;
+  title?: string;
+  actions?: string;
+  content?: string;
+  loader?: string;
+}>;
+
+type ChartWrapperProps = {
+  isLoading?: boolean;
+  title: React.ReactNode;
+  children?: React.ReactNode;
+  classNames?: ChartWrapperClassNames;
+  customExportOptions?: Array<ExportOptionType> | null;
+  headerActions?: React.ReactNode;
+  hasEmptyData?: boolean;
+  emptyText?: React.ReactNode;
+};
+
+export const ChartWrapper: Flow.AbstractComponent<ChartWrapperProps, HTMLDivElement> = React.forwardRef<HTMLDivElement, ChartWrapperProps>((
+  {
+    isLoading,
+    title,
+    children,
+    classNames,
+    customExportOptions,
+    headerActions,
+    hasEmptyData = false,
+    emptyText,
+  }: ChartWrapperProps,
+  ref,
+) => (<Card
+  classNames={{
+    wrapper: classify(
+      css.wrapper,
+      {[css.justifyCenter]: isLoading},
+      classNames?.wrapper,
+    ),
+  }}
+>
+  {isLoading ? (
+    <CircularLoader
+      size="large"
+      className={classify(css.loader, classNames?.loader)}
+    />
+  ) : (
+    <>
+      <CardHeader className={classNames?.header}>
+        <CardTitle className={classNames?.title}>{title}</CardTitle>
+        <CardActions
+          className={classify(css.chartCardActions, classNames?.actions)}
+        >
+          <CustomExportButton
+            ref={ref}
+            customExportOptions={customExportOptions}
+          />
+          {headerActions ? headerActions : null}
+        </CardActions>
+      </CardHeader>
+      <CardContent
+        className={classify(css.chartContent, classNames?.content)}
+      >
+        {hasEmptyData && emptyText ? emptyText : children}
+      </CardContent>
+    </>
+  )}
+</Card>));

package/lib/components/Charts/ChartWrapper/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ChartWrapper';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Charts/ChartWrapper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Charts/ChartWrapper/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/lib/components/Charts/ChartWrapper/index.ts

@@ -0,0 +1 @@
+export * from './ChartWrapper';

package/lib/components/Charts/ColumnChart/ColumnChart.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { ChartOptions, DataOptionsType, Drilldown } from '../../../types/charts';
+import { ChartWrapperClassNames, ExportOptionType } from '../ChartWrapper';
+export type ClassNames = Readonly<((ChartWrapperClassNames) & {
+    highChart?: string;
+})>;
+export type ColumnSeries = {
+    name: string;
+    data: DataOptionsType[];
+};
+export type ColumnChartProps = ((ChartOptions) & {
+    isLoading?: boolean;
+    classNames?: ClassNames;
+    cardTitle?: React.ReactNode;
+    customExportOptions?: Array<ExportOptionType> | null;
+    series: Array<ColumnSeries>;
+    drilldown?: Drilldown;
+    headerActions?: React.ReactNode;
+    hasEmptyData?: boolean;
+    emptyText?: React.ReactNode;
+});
+export declare const ColumnChart: ({ isLoading, classNames, cardTitle, customExportOptions, series, drilldown, headerActions, hasEmptyData, emptyText, ...userOptions }: ColumnChartProps) => React.JSX.Element;
+//# sourceMappingURL=ColumnChart.d.ts.map

package/lib/components/Charts/ColumnChart/ColumnChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Charts/ColumnChart/ColumnChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EACV,YAAY,EACZ,eAAe,EACf,SAAS,EACV,MAAM,uBAAuB,CAAC;AAQ/B,OAAO,EACL,sBAAsB,EACtB,gBAAgB,EAEjB,MAAM,iBAAiB,CAAC;AAKzB,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,GAAG;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC,CAAC;AAEJ,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,eAAe,EAAE,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,CAAC,CAAC,YAAY,CAAC,GAAG;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,mBAAmB,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;IACrD,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,CAAC,CAAC;AAEH,eAAO,MAAM,WAAW,GACtB,sIAWG,gBAAgB,sBAkEpB,CAAC"}

package/lib/components/Charts/ColumnChart/ColumnChart.js

@@ -13,8 +13,6 @@ var _ChartWrapper = require("../ChartWrapper");
 var _ColumnChartModule = _interopRequireDefault(require("./ColumnChart.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]
 const ColumnChart = _ref => {
   let {
     isLoading,
@@ -36,8 +34,13 @@ const ColumnChart = _ref => {
     color: (0, _charts.getDataVizColor)(index),
     pointWidth: _charts.columnPlotWidth
   }));
-  const addColorToDrilldownSeries = series => series?.map(seriesItem => ({
+
+  //@ts-ignore - TS2322 - Type 'SeriesOptionsType' is not assignable to type 'SeriesOptionsType'.
+  const addColorToDrilldownSeries = series =>
+  //@ts-ignore - TS2322 - Type 'SeriesOptionsType' is not assignable to type 'SeriesOptionsType'.
+  series?.map(seriesItem => ({
     ...seriesItem,
+    // @ts-ignore - TS7006 - Parameter 'dataItem' implicitly has an 'any' type. | TS7006 - Parameter 'index' implicitly has an 'any' type.
     data: seriesItem.data.map((dataItem, index) => ({
       ...dataItem,
       color: (0, _charts.getDataVizColor)(index),
@@ -52,8 +55,6 @@ const ColumnChart = _ref => {
     }
   } : {};
   const defaultColumnChartOptions = (0, _charts.getColumnChartOptions)();
-
-  //$FlowFixMe[cannot-spread-inexact]
   const chartOptions = (0, _charts.mergeChartUserOptions)(defaultColumnChartOptions, {
     series: columnChartSeries,
     drilldown: columnDrilldown,
@@ -65,7 +66,9 @@ const ColumnChart = _ref => {
   } = classNames || {};
   return /*#__PURE__*/React.createElement(_ChartWrapper.ChartWrapper, {
     isLoading: isLoading,
-    title: cardTitle,
+    title: cardTitle
+    // @ts-ignore - TS2769 - No overload matches this call.
+    ,
     ref: chartRef,
     classNames: wrapperClassNames,
     customExportOptions: customExportOptions,
@@ -76,7 +79,9 @@ const ColumnChart = _ref => {
     highcharts: _highcharts.default,
     containerProps: {
       className: (0, _classify.default)(_ColumnChartModule.default.columnChartContainer, highChart)
-    },
+    }
+    // @ts-ignore - TS2322 - Type 'RefObject<unknown>' is not assignable to type 'Ref<HighchartsReactRefObject> | undefined'.
+    ,
     ref: chartRef,
     options: chartOptions
   }));