@grafana/components 0.0.16 → 0.0.18

package/dist/cjs/index.cjs

@@ -139,7 +139,7 @@ const calculateComparison = (current, baseline) => {
   };
 };
 
-const getStyles$6 = () => {
+const getStyles$7 = () => {
   const {
     legacy,
     primitives: { spacing, typography }
@@ -204,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$6();
+    const styles = getStyles$7();
     const { context, refs, floatingStyles } = react.useFloating({
       open: isOpen,
       placement,
@@ -290,7 +290,7 @@ const Popover = React.forwardRef(
 );
 Popover.displayName = "Popover";
 
-const getStyles$5 = () => {
+const getStyles$6 = () => {
   const {
     legacy,
     primitives: { spacing, typography }
@@ -358,7 +358,7 @@ const ComparisonTooltip = ({
   previousIcon = "clock-nine",
   hideDelay
 }) => {
-  const styles = getStyles$5();
+  const styles = getStyles$6();
   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: [
@@ -380,7 +380,7 @@ const ComparisonTooltip = ({
   ] }) });
 };
 
-const cssVariables$1 = () => {
+const cssVariables$2 = () => {
   const { legacy } = designTokens.getDesignTokens({ valueType: "css" });
   return {
     dark: {
@@ -537,7 +537,7 @@ const ComparisonBadge = ({
     ] })
   ] });
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(designTokens.GlobalCSSVariables, { variables: cssVariables$1(), defaultColorMode: null }),
+    /* @__PURE__ */ jsxRuntime.jsx(designTokens.GlobalCSSVariables, { variables: cssVariables$2(), defaultColorMode: null }),
     tooltip ? /* @__PURE__ */ jsxRuntime.jsx(
       ComparisonTooltip,
       {
@@ -553,7 +553,7 @@ const ComparisonBadge = ({
   ] });
 };
 
-const cssVariables = () => {
+const cssVariables$1 = () => {
   const { legacy } = designTokens.getDesignTokens({ valueType: "css" });
   return {
     dark: {
@@ -572,7 +572,7 @@ const shimmer = css.keyframes({
     transform: "translateX(100%);"
   }
 });
-const getStyles$4 = (animationDuration) => {
+const getStyles$5 = (animationDuration) => {
   return css.css({
     display: "flex",
     width: "100%",
@@ -596,9 +596,9 @@ const getStyles$4 = (animationDuration) => {
 };
 
 const GenericSkeleton = ({ animationDuration = 2 }) => {
-  const styles = getStyles$4(animationDuration);
+  const styles = getStyles$5(animationDuration);
   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 }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles })
   ] });
 };
@@ -623,7 +623,7 @@ const getSegmentStyles = () => css.css({
   display: "flex",
   height: "100%"
 });
-const getStyles$3 = ({
+const getStyles$4 = ({
   index,
   state = "default"
 }) => {
@@ -661,7 +661,7 @@ const _StackedChartSegment = ({
     "div",
     {
       ref,
-      className: clsx__default.default(getStyles$3({ state, index }), getSegmentStyles()),
+      className: clsx__default.default(getStyles$4({ state, index }), getSegmentStyles()),
       onMouseOver: onMouseOver && onMouseOver({ ref, categoryId }),
       onMouseOut: onMouseOut && onMouseOut({ ref, categoryId }),
       style: { width }
@@ -671,7 +671,7 @@ const _StackedChartSegment = ({
 _StackedChartSegment.displayName = "StackedChartSegment";
 const StackedChartSegment = React__default.default.forwardRef(_StackedChartSegment);
 
-const getStyles$2 = ({ height }) => {
+const getStyles$3 = ({ height }) => {
   const {
     primitives: { spacing }
   } = designTokens.getDesignTokens({ valueType: "css" });
@@ -685,7 +685,7 @@ const getStyles$2 = ({ height }) => {
   };
 };
 
-const getStyles$1 = (index) => {
+const getStyles$2 = (index) => {
   const {
     legacy,
     primitives: { spacing, typography }
@@ -732,9 +732,12 @@ const getStyles$1 = (index) => {
   };
 };
 
-const defaultContentFormatter = ({ value, colorClassName }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+const defaultContentFormatter$1 = ({
+  value,
+  colorClassName
+}) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
   /* @__PURE__ */ jsxRuntime.jsxs("span", { className: colorClassName, children: [
-    value,
+    value.toFixed(1),
     "%"
   ] }),
   " of total usage"
@@ -747,10 +750,10 @@ const StackedChartSegmentTooltip = ({
   value,
   total = 100,
   index,
-  formatContent = defaultContentFormatter,
+  formatContent = defaultContentFormatter$1,
   virtualElement
 }) => {
-  const styles = getStyles$1(index);
+  const styles = getStyles$2(index);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Popover,
     {
@@ -766,7 +769,7 @@ const StackedChartSegmentTooltip = ({
   );
 };
 
-const getStyles = (height) => {
+const getStyles$1 = (height) => {
   return css.css({
     width: "100%",
     height: `${height}px`,
@@ -775,20 +778,84 @@ const getStyles = (height) => {
   });
 };
 
-const StackedChartSkeleton = ({ height = 24 }) => {
-  const styles = getStyles(height);
+const STACKED_CHART_DEFAULT_HEIGHT = 24;
+
+const StackedChartSkeleton = ({
+  height = STACKED_CHART_DEFAULT_HEIGHT
+}) => {
+  const styles = getStyles$1(height);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles, children: /* @__PURE__ */ jsxRuntime.jsx(GenericSkeleton, {}) });
 };
 
+const cssVariables = () => {
+  const { legacy } = designTokens.getDesignTokens({ valueType: "css" });
+  return {
+    dark: {
+      "stacked-chart-no-data-background-color": legacy.palette.blackBaseOpacity15
+    },
+    light: {
+      "stacked-chart-no-data-background-color": legacy.palette.blackBaseOpacity4
+    }
+  };
+};
+const getStyles = (height) => {
+  const {
+    legacy,
+    primitives: { typography, spacing }
+  } = designTokens.getDesignTokens({ valueType: "css" });
+  return {
+    container: css.css({
+      display: "flex",
+      flex: 1,
+      width: "100%",
+      height: `${height}px`,
+      alignItems: "center",
+      justifyContent: "center",
+      gap: spacing.sm,
+      borderRadius: legacy.borderRadius.md,
+      color: legacy.colors.text.secondary,
+      fontFamily: typography.fontFamily.ui,
+      fontSize: typography.fontSize.ui.sm,
+      paddingTop: spacing.xxs,
+      background: "var(--stacked-chart-no-data-background-color)"
+    }),
+    label: css.css({
+      fontWeight: typography.fontWeight.medium,
+      textTransform: "lowercase"
+    })
+  };
+};
+
+const defaultContentFormatter = ({ period, className }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  "No data for ",
+  /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: period })
+] });
+const StackedChartNoData = ({
+  height = STACKED_CHART_DEFAULT_HEIGHT,
+  period = "current",
+  formatMessage = defaultContentFormatter
+}) => {
+  const styles = getStyles(height);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designTokens.GlobalCSSVariables, { variables: cssVariables(), defaultColorMode: null }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.container, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { name: "exclamation-triangle", size: "sm" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatMessage({ period, className: styles.label }) })
+    ] })
+  ] });
+};
+
 const StackedChart = ({
   categories: _categories,
   highlightedCategoryId: initialHighlightedCategoryId,
   isSkeleton = false,
   isDimmed = false,
   sortOrder = "largest-first",
-  height = 24,
+  height = STACKED_CHART_DEFAULT_HEIGHT,
   onSegmentMouseOver,
-  onSegmentMouseOut
+  onSegmentMouseOut,
+  period = "current",
+  formatNoDataMessage
 }) => {
   if (isSkeleton || !_categories) return /* @__PURE__ */ jsxRuntime.jsx(StackedChartSkeleton, { height });
   let highlightedSegmentRef = React.useRef(null);
@@ -826,7 +893,7 @@ const StackedChart = ({
     }
     return roundedTotal;
   }, [categories]);
-  const styles = getStyles$2({ height });
+  const styles = getStyles$3({ height });
   const onMouseOver = ({ ref, categoryId }) => () => {
     clearTimeout(timer.current);
     setHovered(true);
@@ -844,6 +911,8 @@ const StackedChart = ({
     }, 50);
     if (onSegmentMouseOut) onSegmentMouseOut({ ref, categoryId });
   };
+  if (initialHighlightedCategoryId && Object.keys(categories).indexOf(initialHighlightedCategoryId) === -1)
+    return /* @__PURE__ */ jsxRuntime.jsx(StackedChartNoData, { height, period, formatMessage: formatNoDataMessage });
   const highlightedCategory = initialHighlightedCategoryId ? {
     ...categories[initialHighlightedCategoryId],
     index: Object.keys(categories).indexOf(initialHighlightedCategoryId)
@@ -937,6 +1006,7 @@ exports.ComparisonTooltip = ComparisonTooltip;
 exports.GenericSkeleton = GenericSkeleton;
 exports.Popover = Popover;
 exports.StackedChart = StackedChart;
+exports.StackedChartNoData = StackedChartNoData;
 exports.StackedChartSegment = StackedChartSegment;
 exports.StackedChartSegmentTooltip = StackedChartSegmentTooltip;
 exports.StackedChartSkeleton = StackedChartSkeleton;