@grafana/components 0.0.15 → 0.0.17

package/dist/cjs/index.cjs

@@ -12,6 +12,12 @@ var css = require('@emotion/css');
 var designTokens = require('@grafana/design-tokens');
 var ui = require('@grafana/ui');
 var react = require('@floating-ui/react');
+var clsx = require('clsx');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var clsx__default = /*#__PURE__*/_interopDefaultCompat(clsx);
 
 class RefreshEvent extends data.BusEventBase {
 }
@@ -133,7 +139,7 @@ const calculateComparison = (current, baseline) => {
   };
 };
 
-const getStyles$1 = () => {
+const getStyles$6 = () => {
   const {
     legacy,
     primitives: { spacing, typography }
@@ -198,7 +204,7 @@ const Popover = React.forwardRef(
     const [isDelayedOpen, setDelayedOpen] = React.useState(isOpenControlled);
     const isOpen = isOpenControlled != null ? isOpenControlled : isOpenState;
     const middleware = getMiddleware({ placement, arrowRef });
-    const styles = getStyles$1();
+    const styles = getStyles$6();
     const { context, refs, floatingStyles } = react.useFloating({
       open: isOpen,
       placement,
@@ -284,7 +290,7 @@ const Popover = React.forwardRef(
 );
 Popover.displayName = "Popover";
 
-const getStyles = () => {
+const getStyles$5 = () => {
   const {
     legacy,
     primitives: { spacing, typography }
@@ -352,7 +358,7 @@ const ComparisonTooltip = ({
   previousIcon = "clock-nine",
   hideDelay
 }) => {
-  const styles = getStyles();
+  const styles = getStyles$5();
   return /* @__PURE__ */ jsxRuntime.jsx(Popover, { trigger, placement, hideDelay, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.wrapper, children: [
     title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.heading, children: title }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.content, children: [
@@ -374,7 +380,7 @@ const ComparisonTooltip = ({
   ] }) });
 };
 
-const cssVariables = () => {
+const cssVariables$1 = () => {
   const { legacy } = designTokens.getDesignTokens({ valueType: "css" });
   return {
     dark: {
@@ -531,7 +537,7 @@ const ComparisonBadge = ({
     ] })
   ] });
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(designTokens.GlobalCSSVariables, { variables: cssVariables(), defaultColorMode: null }),
+    /* @__PURE__ */ jsxRuntime.jsx(designTokens.GlobalCSSVariables, { variables: cssVariables$1(), defaultColorMode: null }),
     tooltip ? /* @__PURE__ */ jsxRuntime.jsx(
       ComparisonTooltip,
       {
@@ -547,12 +553,393 @@ const ComparisonBadge = ({
   ] });
 };
 
+const cssVariables = () => {
+  const { legacy } = designTokens.getDesignTokens({ valueType: "css" });
+  return {
+    dark: {
+      "skeleton-gradient-background-color": legacy.palette.whiteBaseOpacity12
+    },
+    light: {
+      "skeleton-gradient-background-color": legacy.palette.blackBaseOpacity12
+    }
+  };
+};
+const shimmer = css.keyframes({
+  "0%": {
+    transform: "translateX(-100%);"
+  },
+  "100%": {
+    transform: "translateX(100%);"
+  }
+});
+const getStyles$4 = (animationDuration) => {
+  return css.css({
+    display: "flex",
+    width: "100%",
+    height: "100%",
+    background: "transparent",
+    position: "relative",
+    overflow: "hidden",
+    borderRadius: "5px",
+    "&::before": {
+      content: "''",
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      animation: `${shimmer} ${animationDuration}s ease-in-out infinite`,
+      transform: "translateX(-100%)",
+      background: "linear-gradient(90deg, transparent, var(--skeleton-gradient-background-color), transparent)"
+    }
+  });
+};
+
+const GenericSkeleton = ({ animationDuration = 2 }) => {
+  const styles = getStyles$4(animationDuration);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designTokens.GlobalCSSVariables, { variables: cssVariables(), defaultColorMode: null }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles })
+  ] });
+};
+
+const filterHueRotate = (index) => ({
+  filter: `hue-rotate(${index * 10}deg)`
+});
+
+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.css({
+  display: "flex",
+  height: "100%"
+});
+const getStyles$3 = ({
+  index,
+  state = "default"
+}) => {
+  const { legacy } = designTokens.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.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) : {}
+  });
+};
+
+const _StackedChartSegment = ({
+  categoryId,
+  state = "default",
+  index,
+  value,
+  total = 100,
+  minValue = 4,
+  onMouseOver,
+  onMouseOut
+}, ref) => {
+  const width = `${Math.max(value / total * 100, minValue)}%`;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: clsx__default.default(getStyles$3({ state, index }), getSegmentStyles()),
+      onMouseOver: onMouseOver && onMouseOver({ ref, categoryId }),
+      onMouseOut: onMouseOut && onMouseOut({ ref, categoryId }),
+      style: { width }
+    }
+  );
+};
+_StackedChartSegment.displayName = "StackedChartSegment";
+const StackedChartSegment = React__default.default.forwardRef(_StackedChartSegment);
+
+const getStyles$2 = ({ height }) => {
+  const {
+    primitives: { spacing }
+  } = designTokens.getDesignTokens({ valueType: "css" });
+  return {
+    container: css.css({
+      display: "flex",
+      width: "100%",
+      height,
+      gap: spacing.xxs
+    })
+  };
+};
+
+const getStyles$1 = (index) => {
+  const {
+    legacy,
+    primitives: { spacing, typography }
+  } = designTokens.getDesignTokens({ valueType: "css" });
+  return {
+    wrapper: css.css({
+      display: "flex",
+      flexDirection: "column",
+      gap: spacing.xs
+    }),
+    content: css.css({
+      display: "flex",
+      gap: spacing.xs
+    }),
+    section: css.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.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.css({
+      // TODO: this should come from a token!
+      lineHeight: "16px",
+      color: legacy.colors.text.secondary
+    }),
+    color: css.css({
+      color: legacy.colors.primary.main,
+      fill: "currentColor",
+      ...filterHueRotate(index)
+    })
+  };
+};
+
+const defaultContentFormatter = ({ value, colorClassName }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: colorClassName, children: [
+    value.toFixed(1),
+    "%"
+  ] }),
+  " of total usage"
+] });
+const StackedChartSegmentTooltip = ({
+  trigger,
+  placement = "top",
+  hideDelay,
+  title,
+  value,
+  total = 100,
+  index,
+  formatContent = defaultContentFormatter,
+  virtualElement
+}) => {
+  const styles = getStyles$1(index);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Popover,
+    {
+      trigger,
+      placement,
+      hideDelay,
+      virtualElement,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.wrapper, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.content, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.section, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.title, children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.value, children: formatContent({ value, total, index, colorClassName: styles.color }) })
+      ] }) }) })
+    }
+  );
+};
+
+const getStyles = (height) => {
+  return css.css({
+    width: "100%",
+    height: `${height}px`,
+    borderRadius: "4px",
+    overflow: "hidden"
+  });
+};
+
+const StackedChartSkeleton = ({ height = 24 }) => {
+  const styles = getStyles(height);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles, children: /* @__PURE__ */ jsxRuntime.jsx(GenericSkeleton, {}) });
+};
+
+const StackedChart = ({
+  categories: _categories,
+  highlightedCategoryId: initialHighlightedCategoryId,
+  isSkeleton = false,
+  isDimmed = false,
+  sortOrder = "largest-first",
+  height = 24,
+  onSegmentMouseOver,
+  onSegmentMouseOut
+}) => {
+  if (isSkeleton || !_categories) return /* @__PURE__ */ jsxRuntime.jsx(StackedChartSkeleton, { height });
+  let highlightedSegmentRef = React.useRef(null);
+  const [highlightedCategoryId, setHighlightedCategoryId] = React.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] = React.useState(false);
+  const timer = React.useRef(void 0);
+  const categories = React.useMemo(() => {
+    switch (sortOrder) {
+      case "largest-first":
+      case "smallest-first":
+      default:
+        return _categories;
+    }
+  }, [_categories, sortOrder]);
+  const total = React.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$2({ 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__ */ jsxRuntime.jsx("div", { className: styles.container, children: Object.entries(categories).map(
+    ([categoryId, category], categoryIndex) => {
+      const ref = React.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__ */ jsxRuntime.jsx(
+        StackedChartSegment,
+        {
+          ref,
+          categoryId,
+          index: categoryIndex,
+          title: category.title,
+          value: category.value,
+          total,
+          state: segmentState,
+          onMouseOver,
+          onMouseOut
+        },
+        categoryId
+      );
+      return initialHighlightedCategoryId ? segment : /* @__PURE__ */ jsxRuntime.jsx(
+        StackedChartSegmentTooltip,
+        {
+          title: category.title,
+          value: category.value,
+          index: categoryIndex,
+          hideDelay: 0,
+          trigger: segment
+        },
+        categoryId
+      );
+    }
+  ) });
+  return initialHighlightedCategoryId && highlightedCategory ? /* @__PURE__ */ jsxRuntime.jsx(
+    StackedChartSegmentTooltip,
+    {
+      hideDelay: 0,
+      trigger: content,
+      virtualElement: highlightedSegmentRef,
+      ...highlightedCategory
+    }
+  ) : content;
+};
+
 exports.ColorMode = ColorMode;
 exports.ColorModeChangeHandler = ColorModeChangeHandler;
 exports.ColorModeProvider = ColorModeProvider;
 exports.ComparisonBadge = ComparisonBadge;
 exports.ComparisonTooltip = ComparisonTooltip;
+exports.GenericSkeleton = GenericSkeleton;
 exports.Popover = Popover;
+exports.StackedChart = StackedChart;
+exports.StackedChartSegment = StackedChartSegment;
+exports.StackedChartSegmentTooltip = StackedChartSegmentTooltip;
+exports.StackedChartSkeleton = StackedChartSkeleton;
 exports.calculateComparison = calculateComparison;
 exports.formatNumber = formatNumber;
 exports.useColorMode = useColorMode;