@grafana/components 0.0.15 → 0.0.16

package/dist/esm/components/GenericSkeleton/GenericSkeleton.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GenericSkeleton.styles.js","sources":["../../../../src/components/GenericSkeleton/GenericSkeleton.styles.ts"],"sourcesContent":["import { css, keyframes } from '@emotion/css';\nimport { CSSVariables, getDesignTokens } from '@grafana/design-tokens';\n\nexport const cssVariables = (): CSSVariables => {\n  const { legacy } = getDesignTokens({ valueType: 'css' });\n\n  return {\n    dark: {\n      'skeleton-gradient-background-color': legacy.palette.whiteBaseOpacity12,\n    },\n    light: {\n      'skeleton-gradient-background-color': legacy.palette.blackBaseOpacity12,\n    },\n  };\n};\n\nconst shimmer = keyframes({\n  '0%': {\n    transform: 'translateX(-100%);',\n  },\n  '100%': {\n    transform: 'translateX(100%);',\n  },\n});\n\nexport const getStyles = (animationDuration: number) => {\n  return css({\n    display: 'flex',\n    width: '100%',\n    height: '100%',\n    background: 'transparent',\n    position: 'relative',\n    overflow: 'hidden',\n    borderRadius: '5px',\n    '&::before': {\n      content: \"''\",\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      width: '100%',\n      height: '100%',\n      animation: `${shimmer} ${animationDuration}s ease-in-out infinite`,\n      transform: 'translateX(-100%)',\n      background:\n        'linear-gradient(90deg, transparent, var(--skeleton-gradient-background-color), transparent)',\n    },\n  });\n};\n"],"names":["getStyles"],"mappings":";;;AAGO,MAAM,eAAe,MAAoB;AAC9C,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,gBAAgB,EAAE,SAAA,EAAW,OAAO,CAAA;AAEvD,EAAA,OAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,oCAAA,EAAsC,OAAO,OAAA,CAAQ;AAAA,KACvD;AAAA,IACA,KAAA,EAAO;AAAA,MACL,oCAAA,EAAsC,OAAO,OAAA,CAAQ;AAAA;AACvD,GACF;AACF;AAEA,MAAM,UAAU,SAAA,CAAU;AAAA,EACxB,IAAA,EAAM;AAAA,IACJ,SAAA,EAAW;AAAA,GACb;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,SAAA,EAAW;AAAA;AAEf,CAAC,CAAA;AAEM,MAAMA,WAAA,GAAY,CAAC,iBAAA,KAA8B;AACtD,EAAA,OAAO,GAAA,CAAI;AAAA,IACT,OAAA,EAAS,MAAA;AAAA,IACT,KAAA,EAAO,MAAA;AAAA,IACP,MAAA,EAAQ,MAAA;AAAA,IACR,UAAA,EAAY,aAAA;AAAA,IACZ,QAAA,EAAU,UAAA;AAAA,IACV,QAAA,EAAU,QAAA;AAAA,IACV,YAAA,EAAc,KAAA;AAAA,IACd,WAAA,EAAa;AAAA,MACX,OAAA,EAAS,IAAA;AAAA,MACT,QAAA,EAAU,UAAA;AAAA,MACV,GAAA,EAAK,CAAA;AAAA,MACL,IAAA,EAAM,CAAA;AAAA,MACN,KAAA,EAAO,MAAA;AAAA,MACP,MAAA,EAAQ,MAAA;AAAA,MACR,SAAA,EAAW,CAAA,EAAG,OAAO,CAAA,CAAA,EAAI,iBAAiB,CAAA,sBAAA,CAAA;AAAA,MAC1C,SAAA,EAAW,mBAAA;AAAA,MACX,UAAA,EACE;AAAA;AACJ,GACD,CAAA;AACH;;;;"}

package/dist/esm/components/Popover/Popover.styles.js

@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 import { getDesignTokens } from '@grafana/design-tokens';
 
-const getStyles$1 = () => {
+const getStyles$6 = () => {
   const {
     legacy,
     primitives: { spacing, typography }
@@ -25,5 +25,5 @@ const getStyles$1 = () => {
   };
 };
 
-export { getStyles$1 as getStyles };
+export { getStyles$6 as getStyles };
 //# sourceMappingURL=Popover.styles.js.map

package/dist/esm/components/StackedChart/StackedChart.js

@@ -0,0 +1,158 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useState, useMemo } from 'react';
+import { StackedChartSegment } from '../StackedChartSegment/StackedChartSegment.js';
+import { getStyles } from './StackedChart.styles.js';
+import { StackedChartSegmentTooltip } from '../StackedChartSegmentTooltip/StackedChartSegmentTooltip.js';
+import { StackedChartSkeleton } from '../StackedChartSkeleton/StackedChartSkeleton.js';
+
+const StackedChart = ({
+  categories: _categories,
+  highlightedCategoryId: initialHighlightedCategoryId,
+  isSkeleton = false,
+  isDimmed = false,
+  sortOrder = "largest-first",
+  height = 24,
+  onSegmentMouseOver,
+  onSegmentMouseOut
+}) => {
+  if (isSkeleton || !_categories) return /* @__PURE__ */ jsx(StackedChartSkeleton, { height });
+  let highlightedSegmentRef = useRef(null);
+  const [highlightedCategoryId, setHighlightedCategoryId] = useState(
+    /**
+     * Using a type assertion here ultimately because you can’t pass a generic
+     * type argument to the type of props in React.forwardRef (it is inferred as
+     * of type string).
+     *
+     * See: https://stackoverflow.com/questions/51884498/using-react-forwardref-with-typescript-generic-jsx-arguments
+     */
+    initialHighlightedCategoryId
+  );
+  const [isHovered, setHovered] = useState(false);
+  const timer = useRef(void 0);
+  const categories = useMemo(() => {
+    switch (sortOrder) {
+      case "largest-first":
+      case "smallest-first":
+      default:
+        return _categories;
+    }
+  }, [_categories, sortOrder]);
+  const total = useMemo(() => {
+    const roundedTotal = Math.round(
+      Object.entries(categories).reduce(
+        (sum, [, category]) => sum + category.value,
+        0
+      )
+    );
+    if (roundedTotal > 100) {
+      console.error(`StackedChartCategories have a total value exceeding 100% (${roundedTotal})`);
+    } else {
+      console.info(`Total of all category value values is ${roundedTotal}`);
+    }
+    return roundedTotal;
+  }, [categories]);
+  const styles = getStyles({ height });
+  const onMouseOver = ({ ref, categoryId }) => () => {
+    clearTimeout(timer.current);
+    setHovered(true);
+    if (!initialHighlightedCategoryId) {
+      setHighlightedCategoryId(categoryId);
+    }
+    if (onSegmentMouseOver) onSegmentMouseOver({ ref, categoryId });
+  };
+  const onMouseOut = ({ ref, categoryId }) => () => {
+    timer.current = window.setTimeout(() => {
+      setHovered(false);
+      if (!initialHighlightedCategoryId) {
+        setHighlightedCategoryId(void 0);
+      }
+    }, 50);
+    if (onSegmentMouseOut) onSegmentMouseOut({ ref, categoryId });
+  };
+  const highlightedCategory = initialHighlightedCategoryId ? {
+    ...categories[initialHighlightedCategoryId],
+    index: Object.keys(categories).indexOf(initialHighlightedCategoryId)
+  } : void 0;
+  const content = /* @__PURE__ */ jsx("div", { className: styles.container, children: Object.entries(categories).map(
+    ([categoryId, category], categoryIndex) => {
+      const ref = useRef(null);
+      if (categoryId === initialHighlightedCategoryId) highlightedSegmentRef = ref;
+      const segmentState = (() => {
+        switch (true) {
+          /**
+           * If no initial highlighted category was set, and a category is
+           * moused over, use the _active_ state for that category rather
+           * than the color state; this adds a drop shadow to the segment.
+           * Also, if an initial highlighted category _was_ set, and it
+           * receives a hover event, also set it to active.
+           */
+          case (!initialHighlightedCategoryId && highlightedCategoryId === categoryId && !isDimmed):
+          case (initialHighlightedCategoryId === categoryId && isHovered && !isDimmed):
+            return "active";
+          /**
+           * - no initial highlighted category ID was passed _and_ there is
+           *   no highlightedCategoryId (i.e. all segments in colour)
+           * - the highlighted category is this category (but the chart
+           *   isn’t dimmed)
+           * - the initial highlighted category is this category (but the
+           *   chart isn’t dimmed)
+           */
+          case (!initialHighlightedCategoryId && !highlightedCategoryId && !isDimmed):
+          case (initialHighlightedCategoryId === categoryId && !isDimmed):
+            return "color";
+          /**
+           * Has an initial highlighted category, but is dimmed (i.e. all
+           * segments excepted the highlighted category)
+           */
+          case (Boolean(initialHighlightedCategoryId) && initialHighlightedCategoryId !== categoryId && isDimmed):
+          case (!initialHighlightedCategoryId && !highlightedCategoryId && isDimmed):
+          case (highlightedCategoryId !== categoryId && isDimmed):
+            return "dimmed";
+          /**
+           * In any other case, the segment should be the default grey
+           */
+          default:
+            return "default";
+        }
+      })();
+      const segment = /* @__PURE__ */ jsx(
+        StackedChartSegment,
+        {
+          ref,
+          categoryId,
+          index: categoryIndex,
+          title: category.title,
+          value: category.value,
+          total,
+          state: segmentState,
+          onMouseOver,
+          onMouseOut
+        },
+        categoryId
+      );
+      return initialHighlightedCategoryId ? segment : /* @__PURE__ */ jsx(
+        StackedChartSegmentTooltip,
+        {
+          title: category.title,
+          value: category.value,
+          index: categoryIndex,
+          hideDelay: 0,
+          trigger: segment
+        },
+        categoryId
+      );
+    }
+  ) });
+  return initialHighlightedCategoryId && highlightedCategory ? /* @__PURE__ */ jsx(
+    StackedChartSegmentTooltip,
+    {
+      hideDelay: 0,
+      trigger: content,
+      virtualElement: highlightedSegmentRef,
+      ...highlightedCategory
+    }
+  ) : content;
+};
+
+export { StackedChart };
+//# sourceMappingURL=StackedChart.js.map

package/dist/esm/components/StackedChart/StackedChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackedChart.js","sources":["../../../../src/components/StackedChart/StackedChart.tsx"],"sourcesContent":["import { useMemo, useRef, useState } from 'react';\nimport { StackedChartSegment } from '../StackedChartSegment';\nimport { getStyles } from './StackedChart.styles';\nimport { StackedChartSegmentState, SegmentMouseEventHandler } from '../StackedChartSegment/types';\nimport { StackedChartSegmentTooltip } from '../StackedChartSegmentTooltip';\nimport { StackedChartSkeleton } from '../StackedChartSkeleton/StackedChartSkeleton';\n\nexport interface StackedChartCategory {\n  title: string;\n  value: number;\n}\n\nexport type StackedChartCategories<T extends string> = Record<T, StackedChartCategory>;\n\nexport type StackedChartSortOrder = 'largest-first' | 'smallest-first' | 'natural';\n\ntype MouseEventHandler = ({\n  categoryId,\n  ref,\n}: {\n  categoryId: string;\n  ref: React.ForwardedRef<HTMLDivElement>;\n}) => void;\n\nexport interface CommonStackedChartProps<T extends string> {\n  /**\n   * How should category segments be sorted?\n   */\n  sortOrder?: StackedChartSortOrder;\n\n  /**\n   * Height to render the stacked chart, in pixels\n   */\n  height?: number;\n\n  /**\n   * initial category ID to highlight; if omitted then all segments will render\n   * in colour and highlight based on mouseover events.\n   */\n  highlightedCategoryId?: T;\n\n  /**\n   * Should the whole StackedChart be dimmed, i.e. with a highlighted category\n   * not in color, all other categories faded out?\n   */\n  isDimmed?: boolean;\n\n  /**\n   * Event handler for whenever a segment gets a mouseover event\n   */\n  onSegmentMouseOver?: MouseEventHandler;\n\n  /**\n   * Event handler for whenever a segment gets a mouseout event\n   */\n  onSegmentMouseOut?: MouseEventHandler;\n}\n\nexport interface SkeletonStackedChartProps<T extends string> extends CommonStackedChartProps<T> {\n  isSkeleton: true;\n\n  /**\n   * Array of StackedChartCategory to build the chart from\n   */\n  categories?: StackedChartCategories<T>;\n}\n\nexport interface LoadedStackedChartProps<T extends string> extends CommonStackedChartProps<T> {\n  isSkeleton?: false;\n\n  /**\n   * Array of StackedChartCategory to build the chart from\n   */\n  categories: StackedChartCategories<T>;\n}\n\nexport type StackedChartProps<T extends string> =\n  | SkeletonStackedChartProps<T>\n  | LoadedStackedChartProps<T>;\n\nexport const StackedChart = <T extends string>({\n  categories: _categories,\n  highlightedCategoryId: initialHighlightedCategoryId,\n  isSkeleton = false,\n  isDimmed = false,\n  sortOrder = 'largest-first',\n  height = 24,\n  onSegmentMouseOver,\n  onSegmentMouseOut,\n}: StackedChartProps<T>) => {\n  if (isSkeleton || !_categories) return <StackedChartSkeleton height={height} />;\n\n  let highlightedSegmentRef = useRef<HTMLDivElement>(null);\n  const [highlightedCategoryId, setHighlightedCategoryId] = useState<string | undefined>(\n    /**\n     * Using a type assertion here ultimately because you can’t pass a generic\n     * type argument to the type of props in React.forwardRef (it is inferred as\n     * of type string).\n     *\n     * See: https://stackoverflow.com/questions/51884498/using-react-forwardref-with-typescript-generic-jsx-arguments\n     */\n    initialHighlightedCategoryId as string,\n  );\n  const [isHovered, setHovered] = useState<boolean>(false);\n  const timer = useRef<number | undefined>(undefined);\n\n  /**\n   * Sort categories according to the sortOrder prop\n   */\n  const categories = useMemo(() => {\n    switch (sortOrder) {\n      case 'largest-first':\n      case 'smallest-first':\n      default:\n        return _categories;\n    }\n  }, [_categories, sortOrder]);\n\n  /**\n   * Determine what the total value is for all category valeus combined\n   */\n  const total = useMemo(() => {\n    const roundedTotal = Math.round(\n      Object.entries<StackedChartCategory>(categories).reduce(\n        (sum, [, category]) => sum + category.value,\n        0,\n      ),\n    );\n\n    if (roundedTotal > 100) {\n      console.error(`StackedChartCategories have a total value exceeding 100% (${roundedTotal})`);\n    } else {\n      console.info(`Total of all category value values is ${roundedTotal}`);\n    }\n\n    return roundedTotal;\n  }, [categories]);\n\n  const styles = getStyles({ height });\n\n  const onMouseOver: SegmentMouseEventHandler =\n    ({ ref, categoryId }) =>\n    () => {\n      clearTimeout(timer.current);\n      setHovered(true);\n\n      /**\n       * Only update the highlighted category ID if an initial category wasn’t\n       * supplied\n       */\n      if (!initialHighlightedCategoryId) {\n        setHighlightedCategoryId(categoryId);\n      }\n\n      if (onSegmentMouseOver) onSegmentMouseOver({ ref, categoryId });\n    };\n\n  const onMouseOut: SegmentMouseEventHandler =\n    ({ ref, categoryId }) =>\n    () => {\n      /**\n       * TODO: rather than use a timeout, maybe use the parent element being\n       * moused over (event bubbling?) to validate whether the mouse has left\n       * the entire chart vs an individual segment?\n       */\n      timer.current = window.setTimeout(() => {\n        setHovered(false);\n        /**\n         * Only clear the highlighted category if an initial category wasn’t\n         * supplied\n         */\n        if (!initialHighlightedCategoryId) {\n          setHighlightedCategoryId(undefined);\n        }\n      }, 50);\n\n      if (onSegmentMouseOut) onSegmentMouseOut({ ref, categoryId });\n    };\n\n  const highlightedCategory: (StackedChartCategory & { index: number }) | undefined =\n    initialHighlightedCategoryId\n      ? {\n          ...categories[initialHighlightedCategoryId],\n          index: Object.keys(categories).indexOf(initialHighlightedCategoryId),\n        }\n      : undefined;\n\n  const content = (\n    <div className={styles.container}>\n      {Object.entries<StackedChartCategory>(categories).map(\n        ([categoryId, category], categoryIndex) => {\n          const ref = useRef<HTMLDivElement>(null);\n          if (categoryId === initialHighlightedCategoryId) highlightedSegmentRef = ref;\n\n          const segmentState = ((): StackedChartSegmentState => {\n            switch (true) {\n              /**\n               * If no initial highlighted category was set, and a category is\n               * moused over, use the _active_ state for that category rather\n               * than the color state; this adds a drop shadow to the segment.\n               * Also, if an initial highlighted category _was_ set, and it\n               * receives a hover event, also set it to active.\n               */\n              case !initialHighlightedCategoryId &&\n                highlightedCategoryId === categoryId &&\n                !isDimmed:\n              case initialHighlightedCategoryId === categoryId && isHovered && !isDimmed:\n                return 'active';\n\n              /**\n               * - no initial highlighted category ID was passed _and_ there is\n               *   no highlightedCategoryId (i.e. all segments in colour)\n               * - the highlighted category is this category (but the chart\n               *   isn’t dimmed)\n               * - the initial highlighted category is this category (but the\n               *   chart isn’t dimmed)\n               */\n              case !initialHighlightedCategoryId && !highlightedCategoryId && !isDimmed:\n              case initialHighlightedCategoryId === categoryId && !isDimmed:\n                return 'color';\n\n              /**\n               * Has an initial highlighted category, but is dimmed (i.e. all\n               * segments excepted the highlighted category)\n               */\n              case Boolean(initialHighlightedCategoryId) &&\n                initialHighlightedCategoryId !== categoryId &&\n                isDimmed:\n              case !initialHighlightedCategoryId && !highlightedCategoryId && isDimmed:\n              case highlightedCategoryId !== categoryId && isDimmed:\n                return 'dimmed';\n\n              /**\n               * In any other case, the segment should be the default grey\n               */\n              default:\n                return 'default';\n            }\n          })();\n\n          const segment = (\n            <StackedChartSegment\n              key={categoryId}\n              ref={ref}\n              categoryId={categoryId}\n              index={categoryIndex}\n              title={category.title}\n              value={category.value}\n              total={total}\n              state={segmentState}\n              onMouseOver={onMouseOver}\n              onMouseOut={onMouseOut}\n            />\n          );\n\n          /**\n           * Only wrap the segment in a tooltip if no initially highlighted\n           * category ID was supplied.\n           */\n          return initialHighlightedCategoryId ? (\n            segment\n          ) : (\n            <StackedChartSegmentTooltip\n              key={categoryId}\n              title={category.title}\n              value={category.value}\n              index={categoryIndex}\n              hideDelay={0}\n              trigger={segment}\n            />\n          );\n        },\n      )}\n    </div>\n  );\n\n  /**\n   * If an initial highlight category was provided, wrap the entire chart inside\n   * a tooltip using the props for the highlighted segment to drive the tooltip\n   * content.\n   */\n  return initialHighlightedCategoryId && highlightedCategory ? (\n    <StackedChartSegmentTooltip\n      hideDelay={0}\n      trigger={content}\n      virtualElement={highlightedSegmentRef}\n      {...highlightedCategory}\n    />\n  ) : (\n    content\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/components/StackedChart/StackedChart.styles.js

@@ -0,0 +1,19 @@
+import { css } from '@emotion/css';
+import { getDesignTokens } from '@grafana/design-tokens';
+
+const getStyles$2 = ({ height }) => {
+  const {
+    primitives: { spacing }
+  } = getDesignTokens({ valueType: "css" });
+  return {
+    container: css({
+      display: "flex",
+      width: "100%",
+      height,
+      gap: spacing.xxs
+    })
+  };
+};
+
+export { getStyles$2 as getStyles };
+//# sourceMappingURL=StackedChart.styles.js.map

package/dist/esm/components/StackedChart/StackedChart.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackedChart.styles.js","sources":["../../../../src/components/StackedChart/StackedChart.styles.ts"],"sourcesContent":["import { css } from '@emotion/css';\nimport { getDesignTokens } from '@grafana/design-tokens';\n\nexport const getStyles = ({ height }: { height: number }) => {\n  const {\n    primitives: { spacing },\n  } = getDesignTokens({ valueType: 'css' });\n\n  return {\n    container: css({\n      display: 'flex',\n      width: '100%',\n      height,\n      gap: spacing.xxs,\n    }),\n  };\n};\n\nexport const diagonalStripedBackground = ({\n  stripeColor,\n  stripeWidth = 2,\n  gapWidth = 6,\n}: {\n  stripeColor: string;\n  stripeWidth?: number;\n  gapWidth?: number;\n}) => {\n  return `repeating-linear-gradient(\n    -45deg,\n    ${stripeColor},\n    ${stripeColor} ${stripeWidth}px,\n    transparent ${stripeWidth}px,\n    transparent ${gapWidth}px)`;\n};\n"],"names":["getStyles"],"mappings":";;;AAGO,MAAMA,WAAA,GAAY,CAAC,EAAE,MAAA,EAAO,KAA0B;AAC3D,EAAA,MAAM;AAAA,IACJ,UAAA,EAAY,EAAE,OAAA;AAAQ,GACxB,GAAI,eAAA,CAAgB,EAAE,SAAA,EAAW,OAAO,CAAA;AAExC,EAAA,OAAO;AAAA,IACL,WAAW,GAAA,CAAI;AAAA,MACb,OAAA,EAAS,MAAA;AAAA,MACT,KAAA,EAAO,MAAA;AAAA,MACP,MAAA;AAAA,MACA,KAAK,OAAA,CAAQ;AAAA,KACd;AAAA,GACH;AACF;;;;"}

package/dist/esm/components/StackedChart/shared.styles.js

@@ -0,0 +1,6 @@
+const filterHueRotate = (index) => ({
+  filter: `hue-rotate(${index * 10}deg)`
+});
+
+export { filterHueRotate };
+//# sourceMappingURL=shared.styles.js.map

package/dist/esm/components/StackedChart/shared.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.styles.js","sources":["../../../../src/components/StackedChart/shared.styles.ts"],"sourcesContent":["/**\n * Apply a filter to rotate the hue by 10 degrees per index\n */\nexport const filterHueRotate = (index: number) => ({\n  filter: `hue-rotate(${index * 10}deg)`,\n});\n"],"names":[],"mappings":"AAGO,MAAM,eAAA,GAAkB,CAAC,KAAA,MAAmB;AAAA,EACjD,MAAA,EAAQ,CAAA,WAAA,EAAc,KAAA,GAAQ,EAAE,CAAA,IAAA;AAClC,CAAA;;;;"}

package/dist/esm/components/StackedChartSegment/StackedChartSegment.js

@@ -0,0 +1,32 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import React from 'react';
+import { getStyles, getSegmentStyles } from './StackedChartSegment.styles.js';
+
+const _StackedChartSegment = ({
+  categoryId,
+  state = "default",
+  index,
+  value,
+  total = 100,
+  minValue = 4,
+  onMouseOver,
+  onMouseOut
+}, ref) => {
+  const width = `${Math.max(value / total * 100, minValue)}%`;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: clsx(getStyles({ state, index }), getSegmentStyles()),
+      onMouseOver: onMouseOver && onMouseOver({ ref, categoryId }),
+      onMouseOut: onMouseOut && onMouseOut({ ref, categoryId }),
+      style: { width }
+    }
+  );
+};
+_StackedChartSegment.displayName = "StackedChartSegment";
+const StackedChartSegment = React.forwardRef(_StackedChartSegment);
+
+export { StackedChartSegment };
+//# sourceMappingURL=StackedChartSegment.js.map

package/dist/esm/components/StackedChartSegment/StackedChartSegment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackedChartSegment.js","sources":["../../../../src/components/StackedChartSegment/StackedChartSegment.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React from 'react';\nimport { StackedChartSegmentProps } from './types';\nimport { getStyles, getSegmentStyles } from './StackedChartSegment.styles';\n\nconst _StackedChartSegment = <T extends string>(\n  {\n    categoryId,\n    state = 'default',\n    index,\n    value,\n    total = 100,\n    minValue = 4,\n    onMouseOver,\n    onMouseOut,\n  }: StackedChartSegmentProps<T>,\n  ref: React.ForwardedRef<HTMLDivElement>,\n) => {\n  const width = `${Math.max((value / total) * 100, minValue)}%`;\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(getStyles({ state, index }), getSegmentStyles())}\n      onMouseOver={onMouseOver && onMouseOver({ ref, categoryId })}\n      onMouseOut={onMouseOut && onMouseOut({ ref, categoryId })}\n      style={{ width }}\n    />\n  );\n};\n\n_StackedChartSegment.displayName = 'StackedChartSegment';\n\nexport const StackedChartSegment = React.forwardRef(_StackedChartSegment);\n"],"names":[],"mappings":";;;;;AAKA,MAAM,uBAAuB,CAC3B;AAAA,EACE,UAAA;AAAA,EACA,KAAA,GAAQ,SAAA;AAAA,EACR,KAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA,GAAQ,GAAA;AAAA,EACR,QAAA,GAAW,CAAA;AAAA,EACX,WAAA;AAAA,EACA;AACF,CAAA,EACA,GAAA,KACG;AACH,EAAA,MAAM,KAAA,GAAQ,GAAG,IAAA,CAAK,GAAA,CAAK,QAAQ,KAAA,GAAS,GAAA,EAAK,QAAQ,CAAC,CAAA,CAAA,CAAA;AAE1D,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,KAAK,SAAA,CAAU,EAAE,OAAO,KAAA,EAAO,CAAA,EAAG,gBAAA,EAAkB,CAAA;AAAA,MAC/D,aAAa,WAAA,IAAe,WAAA,CAAY,EAAE,GAAA,EAAK,YAAY,CAAA;AAAA,MAC3D,YAAY,UAAA,IAAc,UAAA,CAAW,EAAE,GAAA,EAAK,YAAY,CAAA;AAAA,MACxD,KAAA,EAAO,EAAE,KAAA;AAAM;AAAA,GACjB;AAEJ,CAAA;AAEA,oBAAA,CAAqB,WAAA,GAAc,qBAAA;AAE5B,MAAM,mBAAA,GAAsB,KAAA,CAAM,UAAA,CAAW,oBAAoB;;;;"}

package/dist/esm/components/StackedChartSegment/StackedChartSegment.styles.js

@@ -0,0 +1,45 @@
+import { css } from '@emotion/css';
+import { getDesignTokens } from '@grafana/design-tokens';
+import { filterHueRotate } from '../StackedChart/shared.styles.js';
+
+const diagonalStripedBackground = ({
+  stripeColor,
+  stripeWidth = 2,
+  gapWidth = 6
+}) => {
+  return `repeating-linear-gradient(
+    -45deg,
+    ${stripeColor},
+    ${stripeColor} ${stripeWidth}px,
+    transparent ${stripeWidth}px,
+    transparent ${gapWidth}px)`;
+};
+const getSegmentStyles = () => css({
+  display: "flex",
+  height: "100%"
+});
+const getStyles$3 = ({
+  index,
+  state = "default"
+}) => {
+  const { legacy } = getDesignTokens({ valueType: "css" });
+  const hasColor = ["color", "active"].includes(state);
+  const backgroundImage = diagonalStripedBackground({
+    stripeColor: state === "dimmed" ? legacy.colors.secondary.shade : legacy.colors.secondary.transparent
+  });
+  return css({
+    cursor: hasColor ? "pointer" : void 0,
+    borderRadius: legacy.borderRadius.sm,
+    transitionDuration: "0.2s",
+    transitionTimingFunction: "ease-in-out",
+    transitionProperty: "background, filter, box-shadow",
+    background: hasColor ? legacy.colors.primary.main : legacy.colors.secondary.transparent,
+    backgroundImage,
+    opacity: state === "dimmed" ? 0.4 : void 0,
+    boxShadow: state === "active" ? legacy.boxShadows.z1 : "none",
+    ...hasColor ? filterHueRotate(index) : {}
+  });
+};
+
+export { diagonalStripedBackground, getSegmentStyles, getStyles$3 as getStyles };
+//# sourceMappingURL=StackedChartSegment.styles.js.map

package/dist/esm/components/StackedChartSegment/StackedChartSegment.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackedChartSegment.styles.js","sources":["../../../../src/components/StackedChartSegment/StackedChartSegment.styles.ts"],"sourcesContent":["import { css } from '@emotion/css';\nimport { getDesignTokens } from '@grafana/design-tokens';\nimport { StackedChartSegmentProps } from './types';\nimport { filterHueRotate } from '../StackedChart/shared.styles';\n\nexport const diagonalStripedBackground = ({\n  stripeColor,\n  stripeWidth = 2,\n  gapWidth = 6,\n}: {\n  stripeColor: string;\n  stripeWidth?: number;\n  gapWidth?: number;\n}) => {\n  return `repeating-linear-gradient(\n    -45deg,\n    ${stripeColor},\n    ${stripeColor} ${stripeWidth}px,\n    transparent ${stripeWidth}px,\n    transparent ${gapWidth}px)`;\n};\n\nexport const getSegmentStyles = () =>\n  css({\n    display: 'flex',\n    height: '100%',\n  });\n\nexport const getStyles = <T extends string>({\n  index,\n  state = 'default',\n}: Pick<StackedChartSegmentProps<T>, 'index' | 'state'>) => {\n  const { legacy } = getDesignTokens({ valueType: 'css' });\n  const hasColor = ['color', 'active'].includes(state);\n\n  const backgroundImage = diagonalStripedBackground({\n    stripeColor:\n      state === 'dimmed' ? legacy.colors.secondary.shade : legacy.colors.secondary.transparent,\n  });\n\n  return css({\n    cursor: hasColor ? 'pointer' : undefined,\n    borderRadius: legacy.borderRadius.sm,\n    transitionDuration: '0.2s',\n    transitionTimingFunction: 'ease-in-out',\n    transitionProperty: 'background, filter, box-shadow',\n    background: hasColor ? legacy.colors.primary.main : legacy.colors.secondary.transparent,\n    backgroundImage,\n    opacity: state === 'dimmed' ? 0.4 : undefined,\n    boxShadow: state === 'active' ? legacy.boxShadows.z1 : 'none',\n    ...(hasColor ? filterHueRotate(index) : {}),\n  });\n};\n"],"names":["getStyles"],"mappings":";;;;AAKO,MAAM,4BAA4B,CAAC;AAAA,EACxC,WAAA;AAAA,EACA,WAAA,GAAc,CAAA;AAAA,EACd,QAAA,GAAW;AACb,CAAA,KAIM;AACJ,EAAA,OAAO,CAAA;AAAA;AAAA,IAAA,EAEH,WAAW,CAAA;AAAA,IAAA,EACX,WAAW,IAAI,WAAW,CAAA;AAAA,gBAAA,EACd,WAAW,CAAA;AAAA,gBAAA,EACX,QAAQ,CAAA,GAAA,CAAA;AAC1B;AAEO,MAAM,gBAAA,GAAmB,MAC9B,GAAA,CAAI;AAAA,EACF,OAAA,EAAS,MAAA;AAAA,EACT,MAAA,EAAQ;AACV,CAAC;AAEI,MAAMA,cAAY,CAAmB;AAAA,EAC1C,KAAA;AAAA,EACA,KAAA,GAAQ;AACV,CAAA,KAA4D;AAC1D,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,gBAAgB,EAAE,SAAA,EAAW,OAAO,CAAA;AACvD,EAAA,MAAM,WAAW,CAAC,OAAA,EAAS,QAAQ,CAAA,CAAE,SAAS,KAAK,CAAA;AAEnD,EAAA,MAAM,kBAAkB,yBAAA,CAA0B;AAAA,IAChD,WAAA,EACE,UAAU,QAAA,GAAW,MAAA,CAAO,OAAO,SAAA,CAAU,KAAA,GAAQ,MAAA,CAAO,MAAA,CAAO,SAAA,CAAU;AAAA,GAChF,CAAA;AAED,EAAA,OAAO,GAAA,CAAI;AAAA,IACT,MAAA,EAAQ,WAAW,SAAA,GAAY,MAAA;AAAA,IAC/B,YAAA,EAAc,OAAO,YAAA,CAAa,EAAA;AAAA,IAClC,kBAAA,EAAoB,MAAA;AAAA,IACpB,wBAAA,EAA0B,aAAA;AAAA,IAC1B,kBAAA,EAAoB,gCAAA;AAAA,IACpB,UAAA,EAAY,WAAW,MAAA,CAAO,MAAA,CAAO,QAAQ,IAAA,GAAO,MAAA,CAAO,OAAO,SAAA,CAAU,WAAA;AAAA,IAC5E,eAAA;AAAA,IACA,OAAA,EAAS,KAAA,KAAU,QAAA,GAAW,GAAA,GAAM,MAAA;AAAA,IACpC,SAAA,EAAW,KAAA,KAAU,QAAA,GAAW,MAAA,CAAO,WAAW,EAAA,GAAK,MAAA;AAAA,IACvD,GAAI,QAAA,GAAW,eAAA,CAAgB,KAAK,IAAI;AAAC,GAC1C,CAAA;AACH;;;;"}

package/dist/esm/components/StackedChartSegmentTooltip/StackedChartSegmentTooltip.js

@@ -0,0 +1,40 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Popover } from '../Popover/Popover.js';
+import { getStyles } from './StackedChartSegmentTooltip.styles.js';
+
+const defaultContentFormatter = ({ value, colorClassName }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsxs("span", { className: colorClassName, children: [
+    value,
+    "%"
+  ] }),
+  " of total usage"
+] });
+const StackedChartSegmentTooltip = ({
+  trigger,
+  placement = "top",
+  hideDelay,
+  title,
+  value,
+  total = 100,
+  index,
+  formatContent = defaultContentFormatter,
+  virtualElement
+}) => {
+  const styles = getStyles(index);
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      trigger,
+      placement,
+      hideDelay,
+      virtualElement,
+      children: /* @__PURE__ */ jsx("div", { className: styles.wrapper, children: /* @__PURE__ */ jsx("div", { className: styles.content, children: /* @__PURE__ */ jsxs("div", { className: styles.section, children: [
+        /* @__PURE__ */ jsx("div", { className: styles.title, children: title }),
+        /* @__PURE__ */ jsx("div", { className: styles.value, children: formatContent({ value, total, index, colorClassName: styles.color }) })
+      ] }) }) })
+    }
+  );
+};
+
+export { StackedChartSegmentTooltip };
+//# sourceMappingURL=StackedChartSegmentTooltip.js.map

package/dist/esm/components/StackedChartSegmentTooltip/StackedChartSegmentTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackedChartSegmentTooltip.js","sources":["../../../../src/components/StackedChartSegmentTooltip/StackedChartSegmentTooltip.tsx"],"sourcesContent":["import { StackedChartSegmentProps } from '../StackedChartSegment/types';\nimport { Popover, PopoverProps } from '../Popover';\nimport { getStyles } from './StackedChartSegmentTooltip.styles';\n\nexport type ContentFormatter = (\n  args: {\n    colorClassName: string;\n  } & Required<Pick<StackedChartSegmentProps<string>, 'value' | 'total' | 'index'>>,\n) => React.ReactElement;\n\nexport interface StackedChartSegmentTooltipProps<T extends string>\n  extends Pick<StackedChartSegmentProps<T>, 'title' | 'value' | 'total' | 'index'>,\n    Omit<PopoverProps, 'children'> {\n  formatContent?: ContentFormatter;\n}\n\n/**\n * The default content formatter assumes a percentage value, but you can create\n * your own formatter using the provided arguments of total and index. The\n * colorClassName allows you to set the colour of some text or an icon to the\n * same colour as the equivalent chart segment.\n */\nconst defaultContentFormatter: ContentFormatter = ({ value, colorClassName }) => (\n  <>\n    <span className={colorClassName}>{value}%</span> of total usage\n  </>\n);\n\nexport const StackedChartSegmentTooltip = <T extends string>({\n  trigger,\n  placement = 'top',\n  hideDelay,\n  title,\n  value,\n  total = 100,\n  index,\n  formatContent = defaultContentFormatter,\n  virtualElement,\n}: StackedChartSegmentTooltipProps<T>) => {\n  const styles = getStyles(index);\n\n  return (\n    <Popover\n      trigger={trigger}\n      placement={placement}\n      hideDelay={hideDelay}\n      virtualElement={virtualElement}\n    >\n      <div className={styles.wrapper}>\n        <div className={styles.content}>\n          <div className={styles.section}>\n            <div className={styles.title}>{title}</div>\n            <div className={styles.value}>\n              {formatContent({ value, total, index, colorClassName: styles.color })}\n            </div>\n          </div>\n        </div>\n      </div>\n    </Popover>\n  );\n};\n"],"names":[],"mappings":";;;;AAsBA,MAAM,0BAA4C,CAAC,EAAE,KAAA,EAAO,cAAA,uBAC1D,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,kBAAA,IAAA,CAAC,MAAA,EAAA,EAAK,WAAW,cAAA,EAAiB,QAAA,EAAA;AAAA,IAAA,KAAA;AAAA,IAAM;AAAA,GAAA,EAAC,CAAA;AAAA,EAAO;AAAA,CAAA,EAClD,CAAA;AAGK,MAAM,6BAA6B,CAAmB;AAAA,EAC3D,OAAA;AAAA,EACA,SAAA,GAAY,KAAA;AAAA,EACZ,SAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA,GAAQ,GAAA;AAAA,EACR,KAAA;AAAA,EACA,aAAA,GAAgB,uBAAA;AAAA,EAChB;AACF,CAAA,KAA0C;AACxC,EAAA,MAAM,MAAA,GAAS,UAAU,KAAK,CAAA;AAE9B,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,OAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,cAAA;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,SACrB,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,OAAA,EACrB,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAO,OAAA,EACrB,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,KAAA,EAAQ,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,wBACrC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,OACpB,QAAA,EAAA,aAAA,CAAc,EAAE,KAAA,EAAO,KAAA,EAAO,KAAA,EAAO,cAAA,EAAgB,MAAA,CAAO,KAAA,EAAO,CAAA,EACtE;AAAA,OAAA,EACF,GACF,CAAA,EACF;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/esm/components/StackedChartSegmentTooltip/StackedChartSegmentTooltip.styles.js

@@ -0,0 +1,53 @@
+import { css } from '@emotion/css';
+import { getDesignTokens } from '@grafana/design-tokens';
+import { filterHueRotate } from '../StackedChart/shared.styles.js';
+
+const getStyles$1 = (index) => {
+  const {
+    legacy,
+    primitives: { spacing, typography }
+  } = getDesignTokens({ valueType: "css" });
+  return {
+    wrapper: css({
+      display: "flex",
+      flexDirection: "column",
+      gap: spacing.xs
+    }),
+    content: css({
+      display: "flex",
+      gap: spacing.xs
+    }),
+    section: css({
+      display: "flex",
+      flex: 1,
+      flexDirection: "column",
+      justifyContent: "flex-end",
+      gap: spacing.xs,
+      background: legacy.colors.background.primary,
+      borderRadius: legacy.borderRadius.md,
+      padding: `${spacing.sm} ${spacing.md}`
+    }),
+    title: css({
+      fontFamily: typography.fontFamily.ui,
+      fontSize: typography.fontSize.ui.sm,
+      fontWeight: typography.fontWeight.medium,
+      // TODO: this should come from a token!
+      lineHeight: "16px",
+      color: legacy.colors.text.primary,
+      whiteSpace: "nowrap"
+    }),
+    value: css({
+      // TODO: this should come from a token!
+      lineHeight: "16px",
+      color: legacy.colors.text.secondary
+    }),
+    color: css({
+      color: legacy.colors.primary.main,
+      fill: "currentColor",
+      ...filterHueRotate(index)
+    })
+  };
+};
+
+export { getStyles$1 as getStyles };
+//# sourceMappingURL=StackedChartSegmentTooltip.styles.js.map

package/dist/esm/components/StackedChartSegmentTooltip/StackedChartSegmentTooltip.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackedChartSegmentTooltip.styles.js","sources":["../../../../src/components/StackedChartSegmentTooltip/StackedChartSegmentTooltip.styles.ts"],"sourcesContent":["import { css } from '@emotion/css';\nimport { getDesignTokens } from '@grafana/design-tokens';\nimport { filterHueRotate } from '../StackedChart/shared.styles';\n\nexport const getStyles = (index: number) => {\n  const {\n    legacy,\n    primitives: { spacing, typography },\n  } = getDesignTokens({ valueType: 'css' });\n\n  return {\n    wrapper: css({\n      display: 'flex',\n      flexDirection: 'column',\n      gap: spacing.xs,\n    }),\n    content: css({\n      display: 'flex',\n      gap: spacing.xs,\n    }),\n    section: css({\n      display: 'flex',\n      flex: 1,\n      flexDirection: 'column',\n      justifyContent: 'flex-end',\n      gap: spacing.xs,\n      background: legacy.colors.background.primary,\n      borderRadius: legacy.borderRadius.md,\n      padding: `${spacing.sm} ${spacing.md}`,\n    }),\n    title: css({\n      fontFamily: typography.fontFamily.ui,\n      fontSize: typography.fontSize.ui.sm,\n      fontWeight: typography.fontWeight.medium,\n      // TODO: this should come from a token!\n      lineHeight: '16px',\n      color: legacy.colors.text.primary,\n      whiteSpace: 'nowrap',\n    }),\n    value: css({\n      // TODO: this should come from a token!\n      lineHeight: '16px',\n      color: legacy.colors.text.secondary,\n    }),\n    color: css({\n      color: legacy.colors.primary.main,\n      fill: 'currentColor',\n      ...filterHueRotate(index),\n    }),\n  };\n};\n"],"names":["getStyles"],"mappings":";;;;AAIO,MAAMA,WAAA,GAAY,CAAC,KAAA,KAAkB;AAC1C,EAAA,MAAM;AAAA,IACJ,MAAA;AAAA,IACA,UAAA,EAAY,EAAE,OAAA,EAAS,UAAA;AAAW,GACpC,GAAI,eAAA,CAAgB,EAAE,SAAA,EAAW,OAAO,CAAA;AAExC,EAAA,OAAO;AAAA,IACL,SAAS,GAAA,CAAI;AAAA,MACX,OAAA,EAAS,MAAA;AAAA,MACT,aAAA,EAAe,QAAA;AAAA,MACf,KAAK,OAAA,CAAQ;AAAA,KACd,CAAA;AAAA,IACD,SAAS,GAAA,CAAI;AAAA,MACX,OAAA,EAAS,MAAA;AAAA,MACT,KAAK,OAAA,CAAQ;AAAA,KACd,CAAA;AAAA,IACD,SAAS,GAAA,CAAI;AAAA,MACX,OAAA,EAAS,MAAA;AAAA,MACT,IAAA,EAAM,CAAA;AAAA,MACN,aAAA,EAAe,QAAA;AAAA,MACf,cAAA,EAAgB,UAAA;AAAA,MAChB,KAAK,OAAA,CAAQ,EAAA;AAAA,MACb,UAAA,EAAY,MAAA,CAAO,MAAA,CAAO,UAAA,CAAW,OAAA;AAAA,MACrC,YAAA,EAAc,OAAO,YAAA,CAAa,EAAA;AAAA,MAClC,SAAS,CAAA,EAAG,OAAA,CAAQ,EAAE,CAAA,CAAA,EAAI,QAAQ,EAAE,CAAA;AAAA,KACrC,CAAA;AAAA,IACD,OAAO,GAAA,CAAI;AAAA,MACT,UAAA,EAAY,WAAW,UAAA,CAAW,EAAA;AAAA,MAClC,QAAA,EAAU,UAAA,CAAW,QAAA,CAAS,EAAA,CAAG,EAAA;AAAA,MACjC,UAAA,EAAY,WAAW,UAAA,CAAW,MAAA;AAAA;AAAA,MAElC,UAAA,EAAY,MAAA;AAAA,MACZ,KAAA,EAAO,MAAA,CAAO,MAAA,CAAO,IAAA,CAAK,OAAA;AAAA,MAC1B,UAAA,EAAY;AAAA,KACb,CAAA;AAAA,IACD,OAAO,GAAA,CAAI;AAAA;AAAA,MAET,UAAA,EAAY,MAAA;AAAA,MACZ,KAAA,EAAO,MAAA,CAAO,MAAA,CAAO,IAAA,CAAK;AAAA,KAC3B,CAAA;AAAA,IACD,OAAO,GAAA,CAAI;AAAA,MACT,KAAA,EAAO,MAAA,CAAO,MAAA,CAAO,OAAA,CAAQ,IAAA;AAAA,MAC7B,IAAA,EAAM,cAAA;AAAA,MACN,GAAG,gBAAgB,KAAK;AAAA,KACzB;AAAA,GACH;AACF;;;;"}

package/dist/esm/components/StackedChartSkeleton/StackedChartSkeleton.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { getStyles } from './StackedChartSkeleton.styles.js';
+import { GenericSkeleton } from '../GenericSkeleton/GenericSkeleton.js';
+
+const StackedChartSkeleton = ({ height = 24 }) => {
+  const styles = getStyles(height);
+  return /* @__PURE__ */ jsx("div", { className: styles, children: /* @__PURE__ */ jsx(GenericSkeleton, {}) });
+};
+
+export { StackedChartSkeleton };
+//# sourceMappingURL=StackedChartSkeleton.js.map

package/dist/esm/components/StackedChartSkeleton/StackedChartSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackedChartSkeleton.js","sources":["../../../../src/components/StackedChartSkeleton/StackedChartSkeleton.tsx"],"sourcesContent":["import { getStyles } from './StackedChartSkeleton.styles';\nimport { GenericSkeleton } from '../GenericSkeleton';\n\nexport interface StackedChartSkeletonProps {\n  /**\n   * Height to render the stacked chart skeleton, in pixels\n   */\n  height?: number;\n}\n\nexport const StackedChartSkeleton = ({ height = 24 }: StackedChartSkeletonProps) => {\n  const styles = getStyles(height);\n\n  return (\n    <div className={styles}>\n      <GenericSkeleton />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AAUO,MAAM,oBAAA,GAAuB,CAAC,EAAE,MAAA,GAAS,IAAG,KAAiC;AAClF,EAAA,MAAM,MAAA,GAAS,UAAU,MAAM,CAAA;AAE/B,EAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,EACd,QAAA,kBAAA,GAAA,CAAC,mBAAgB,CAAA,EACnB,CAAA;AAEJ;;;;"}

package/dist/esm/components/StackedChartSkeleton/StackedChartSkeleton.styles.js

@@ -0,0 +1,13 @@
+import { css } from '@emotion/css';
+
+const getStyles = (height) => {
+  return css({
+    width: "100%",
+    height: `${height}px`,
+    borderRadius: "4px",
+    overflow: "hidden"
+  });
+};
+
+export { getStyles };
+//# sourceMappingURL=StackedChartSkeleton.styles.js.map

package/dist/esm/components/StackedChartSkeleton/StackedChartSkeleton.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackedChartSkeleton.styles.js","sources":["../../../../src/components/StackedChartSkeleton/StackedChartSkeleton.styles.ts"],"sourcesContent":["import { css } from '@emotion/css';\n\nexport const getStyles = (height: number) => {\n  return css({\n    width: '100%',\n    height: `${height}px`,\n    borderRadius: '4px',\n    overflow: 'hidden',\n  });\n};\n"],"names":[],"mappings":";;AAEO,MAAM,SAAA,GAAY,CAAC,MAAA,KAAmB;AAC3C,EAAA,OAAO,GAAA,CAAI;AAAA,IACT,KAAA,EAAO,MAAA;AAAA,IACP,MAAA,EAAQ,GAAG,MAAM,CAAA,EAAA,CAAA;AAAA,IACjB,YAAA,EAAc,KAAA;AAAA,IACd,QAAA,EAAU;AAAA,GACX,CAAA;AACH;;;;"}