@grafana/components 0.0.16 → 0.0.18

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

@@ -1 +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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"}
+{"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';\nimport { StackedChartNoData, StackedChartNoDataProps } from '../StackedChartNoData';\nimport { STACKED_CHART_DEFAULT_HEIGHT } from './common';\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  /**\n   * String representing the period for which the chart is displaying data\n   */\n  period?: string;\n\n  formatNoDataMessage?: StackedChartNoDataProps['formatMessage'];\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 = STACKED_CHART_DEFAULT_HEIGHT,\n  onSegmentMouseOver,\n  onSegmentMouseOut,\n  period = 'current',\n  formatNoDataMessage,\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  /**\n   * If the initial highlighted category isn’t within the provided set of\n   * categories, fall back to displaying the No Data component\n   */\n  if (\n    initialHighlightedCategoryId &&\n    Object.keys(categories).indexOf(initialHighlightedCategoryId) === -1\n  )\n    return (\n      <StackedChartNoData height={height} period={period} formatMessage={formatNoDataMessage} />\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":";;;;;;;;;AAyFO,MAAM,eAAe,CAAmB;AAAA,EAC7C,UAAA,EAAY,WAAA;AAAA,EACZ,qBAAA,EAAuB,4BAAA;AAAA,EACvB,UAAA,GAAa,KAAA;AAAA,EACb,QAAA,GAAW,KAAA;AAAA,EACX,SAAA,GAAY,eAAA;AAAA,EACZ,MAAA,GAAS,4BAAA;AAAA,EACT,kBAAA;AAAA,EACA,iBAAA;AAAA,EACA,MAAA,GAAS,SAAA;AAAA,EACT;AACF,CAAA,KAA4B;AAC1B,EAAA,IAAI,cAAc,CAAC,WAAA,EAAa,uBAAO,GAAA,CAAC,wBAAqB,MAAA,EAAgB,CAAA;AAE7E,EAAA,IAAI,qBAAA,GAAwB,OAAuB,IAAI,CAAA;AACvD,EAAA,MAAM,CAAC,qBAAA,EAAuB,wBAAwB,CAAA,GAAI,QAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQxD;AAAA,GACF;AACA,EAAA,MAAM,CAAC,SAAA,EAAW,UAAU,CAAA,GAAI,SAAkB,KAAK,CAAA;AACvD,EAAA,MAAM,KAAA,GAAQ,OAA2B,MAAS,CAAA;AAKlD,EAAA,MAAM,UAAA,GAAa,QAAQ,MAAM;AAC/B,IAAA,QAAQ,SAAA;AAAW,MACjB,KAAK,eAAA;AAAA,MACL,KAAK,gBAAA;AAAA,MACL;AACE,QAAA,OAAO,WAAA;AAAA;AACX,EACF,CAAA,EAAG,CAAC,WAAA,EAAa,SAAS,CAAC,CAAA;AAK3B,EAAA,MAAM,KAAA,GAAQ,QAAQ,MAAM;AAC1B,IAAA,MAAM,eAAe,IAAA,CAAK,KAAA;AAAA,MACxB,MAAA,CAAO,OAAA,CAA8B,UAAU,CAAA,CAAE,MAAA;AAAA,QAC/C,CAAC,GAAA,EAAK,GAAG,QAAQ,CAAA,KAAM,MAAM,QAAA,CAAS,KAAA;AAAA,QACtC;AAAA;AACF,KACF;AAEA,IAAA,IAAI,eAAe,GAAA,EAAK;AACtB,MAAA,OAAA,CAAQ,KAAA,CAAM,CAAA,0DAAA,EAA6D,YAAY,CAAA,CAAA,CAAG,CAAA;AAAA,IAC5F,CAAA,MAAO;AACL,MAAA,OAAA,CAAQ,IAAA,CAAK,CAAA,sCAAA,EAAyC,YAAY,CAAA,CAAE,CAAA;AAAA,IACtE;AAEA,IAAA,OAAO,YAAA;AAAA,EACT,CAAA,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAA,MAAM,MAAA,GAAS,SAAA,CAAU,EAAE,MAAA,EAAQ,CAAA;AAEnC,EAAA,MAAM,cACJ,CAAC,EAAE,GAAA,EAAK,UAAA,OACR,MAAM;AACJ,IAAA,YAAA,CAAa,MAAM,OAAO,CAAA;AAC1B,IAAA,UAAA,CAAW,IAAI,CAAA;AAMf,IAAA,IAAI,CAAC,4BAAA,EAA8B;AACjC,MAAA,wBAAA,CAAyB,UAAU,CAAA;AAAA,IACrC;AAEA,IAAA,IAAI,kBAAA,EAAoB,kBAAA,CAAmB,EAAE,GAAA,EAAK,YAAY,CAAA;AAAA,EAChE,CAAA;AAEF,EAAA,MAAM,aACJ,CAAC,EAAE,GAAA,EAAK,UAAA,OACR,MAAM;AAMJ,IAAA,KAAA,CAAM,OAAA,GAAU,MAAA,CAAO,UAAA,CAAW,MAAM;AACtC,MAAA,UAAA,CAAW,KAAK,CAAA;AAKhB,MAAA,IAAI,CAAC,4BAAA,EAA8B;AACjC,QAAA,wBAAA,CAAyB,MAAS,CAAA;AAAA,MACpC;AAAA,IACF,GAAG,EAAE,CAAA;AAEL,IAAA,IAAI,iBAAA,EAAmB,iBAAA,CAAkB,EAAE,GAAA,EAAK,YAAY,CAAA;AAAA,EAC9D,CAAA;AAMF,EAAA,IACE,gCACA,MAAA,CAAO,IAAA,CAAK,UAAU,CAAA,CAAE,OAAA,CAAQ,4BAA4B,CAAA,KAAM,EAAA;AAElE,IAAA,uBACE,GAAA,CAAC,kBAAA,EAAA,EAAmB,MAAA,EAAgB,MAAA,EAAgB,eAAe,mBAAA,EAAqB,CAAA;AAG5F,EAAA,MAAM,sBACJ,4BAAA,GACI;AAAA,IACE,GAAG,WAAW,4BAA4B,CAAA;AAAA,IAC1C,OAAO,MAAA,CAAO,IAAA,CAAK,UAAU,CAAA,CAAE,QAAQ,4BAA4B;AAAA,GACrE,GACA,MAAA;AAEN,EAAA,MAAM,OAAA,uBACH,KAAA,EAAA,EAAI,SAAA,EAAW,OAAO,SAAA,EACpB,QAAA,EAAA,MAAA,CAAO,OAAA,CAA8B,UAAU,CAAA,CAAE,GAAA;AAAA,IAChD,CAAC,CAAC,UAAA,EAAY,QAAQ,GAAG,aAAA,KAAkB;AACzC,MAAA,MAAM,GAAA,GAAM,OAAuB,IAAI,CAAA;AACvC,MAAA,IAAI,UAAA,KAAe,8BAA8B,qBAAA,GAAwB,GAAA;AAEzE,MAAA,MAAM,gBAAgB,MAAgC;AACpD,QAAA,QAAQ,IAAA;AAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQZ,MAAK,CAAC,4BAAA,IACJ,qBAAA,KAA0B,cAC1B,CAAC,QAAA;AAAA,UACH,MAAK,4BAAA,KAAiC,UAAA,IAAc,SAAA,IAAa,CAAC,QAAA;AAChE,YAAA,OAAO,QAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAUT,MAAK,CAAC,4BAAA,IAAgC,CAAC,yBAAyB,CAAC,QAAA;AAAA,UACjE,MAAK,4BAAA,KAAiC,UAAA,IAAc,CAAC,QAAA;AACnD,YAAA,OAAO,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMT,MAAK,OAAA,CAAQ,4BAA4B,CAAA,IACvC,iCAAiC,UAAA,IACjC,QAAA;AAAA,UACF,MAAK,CAAC,4BAAA,IAAgC,CAAC,qBAAA,IAAyB,QAAA;AAAA,UAChE,MAAK,0BAA0B,UAAA,IAAc,QAAA;AAC3C,YAAA,OAAO,QAAA;AAAA;AAAA;AAAA;AAAA,UAKT;AACE,YAAA,OAAO,SAAA;AAAA;AACX,MACF,CAAA,GAAG;AAEH,MAAA,MAAM,OAAA,mBACJ,GAAA;AAAA,QAAC,mBAAA;AAAA,QAAA;AAAA,UAEC,GAAA;AAAA,UACA,UAAA;AAAA,UACA,KAAA,EAAO,aAAA;AAAA,UACP,OAAO,QAAA,CAAS,KAAA;AAAA,UAChB,OAAO,QAAA,CAAS,KAAA;AAAA,UAChB,KAAA;AAAA,UACA,KAAA,EAAO,YAAA;AAAA,UACP,WAAA;AAAA,UACA;AAAA,SAAA;AAAA,QATK;AAAA,OAUP;AAOF,MAAA,OAAO,+BACL,OAAA,mBAEA,GAAA;AAAA,QAAC,0BAAA;AAAA,QAAA;AAAA,UAEC,OAAO,QAAA,CAAS,KAAA;AAAA,UAChB,OAAO,QAAA,CAAS,KAAA;AAAA,UAChB,KAAA,EAAO,aAAA;AAAA,UACP,SAAA,EAAW,CAAA;AAAA,UACX,OAAA,EAAS;AAAA,SAAA;AAAA,QALJ;AAAA,OAMP;AAAA,IAEJ;AAAA,GACF,EACF,CAAA;AAQF,EAAA,OAAO,gCAAgC,mBAAA,mBACrC,GAAA;AAAA,IAAC,0BAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,CAAA;AAAA,MACX,OAAA,EAAS,OAAA;AAAA,MACT,cAAA,EAAgB,qBAAA;AAAA,MACf,GAAG;AAAA;AAAA,GACN,GAEA,OAAA;AAEJ;;;;"}

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 import { getDesignTokens } from '@grafana/design-tokens';
 
-const getStyles$2 = ({ height }) => {
+const getStyles$3 = ({ height }) => {
   const {
     primitives: { spacing }
   } = getDesignTokens({ valueType: "css" });
@@ -15,5 +15,5 @@ const getStyles$2 = ({ height }) => {
   };
 };
 
-export { getStyles$2 as getStyles };
+export { getStyles$3 as getStyles };
 //# sourceMappingURL=StackedChart.styles.js.map

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

@@ -0,0 +1,4 @@
+const STACKED_CHART_DEFAULT_HEIGHT = 24;
+
+export { STACKED_CHART_DEFAULT_HEIGHT };
+//# sourceMappingURL=common.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"common.js","sources":["../../../../src/components/StackedChart/common.ts"],"sourcesContent":["export const STACKED_CHART_DEFAULT_HEIGHT = 24;\n"],"names":[],"mappings":"AAAO,MAAM,4BAAA,GAA+B;;;;"}

package/dist/esm/components/StackedChartNoData/StackedChartNoData.js

@@ -0,0 +1,27 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { GlobalCSSVariables } from '@grafana/design-tokens';
+import { Icon } from '@grafana/ui';
+import { getStyles, cssVariables } from './StackedChartNoData.styles.js';
+import { STACKED_CHART_DEFAULT_HEIGHT } from '../StackedChart/common.js';
+
+const defaultContentFormatter = ({ period, className }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  "No data for ",
+  /* @__PURE__ */ jsx("span", { className, children: period })
+] });
+const StackedChartNoData = ({
+  height = STACKED_CHART_DEFAULT_HEIGHT,
+  period = "current",
+  formatMessage = defaultContentFormatter
+}) => {
+  const styles = getStyles(height);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(GlobalCSSVariables, { variables: cssVariables(), defaultColorMode: null }),
+    /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
+      /* @__PURE__ */ jsx(Icon, { name: "exclamation-triangle", size: "sm" }),
+      /* @__PURE__ */ jsx("span", { children: formatMessage({ period, className: styles.label }) })
+    ] })
+  ] });
+};
+
+export { StackedChartNoData };
+//# sourceMappingURL=StackedChartNoData.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StackedChartNoData.js","sources":["../../../../src/components/StackedChartNoData/StackedChartNoData.tsx"],"sourcesContent":["import { GlobalCSSVariables } from '@grafana/design-tokens';\nimport { Icon } from '@grafana/ui';\nimport { cssVariables, getStyles } from './StackedChartNoData.styles';\nimport { STACKED_CHART_DEFAULT_HEIGHT } from '../StackedChart/common';\n\nexport type StackedChartNoDataMessageFormatter = (args: {\n  period: string;\n  className: string;\n}) => React.ReactElement;\n\nexport interface StackedChartNoDataProps {\n  /**\n   * Height to render the stacked chart skeleton, in pixels\n   */\n  height?: number;\n\n  /**\n   * Period for which this chart has no data, as a preformatted string\n   */\n  period?: string;\n\n  /**\n   * Optional formatter for content message\n   */\n  formatMessage?: StackedChartNoDataMessageFormatter;\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: StackedChartNoDataMessageFormatter = ({ period, className }) => (\n  <>\n    No data for <span className={className}>{period}</span>\n  </>\n);\n\nexport const StackedChartNoData = ({\n  height = STACKED_CHART_DEFAULT_HEIGHT,\n  period = 'current',\n  formatMessage = defaultContentFormatter,\n}: StackedChartNoDataProps) => {\n  const styles = getStyles(height);\n\n  return (\n    <>\n      <GlobalCSSVariables variables={cssVariables()} defaultColorMode={null} />\n      <div className={styles.container}>\n        <Icon name=\"exclamation-triangle\" size=\"sm\" />\n        <span>{formatMessage({ period, className: styles.label })}</span>\n      </div>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAiCA,MAAM,0BAA8D,CAAC,EAAE,MAAA,EAAQ,SAAA,uBAC7E,IAAA,CAAA,QAAA,EAAA,EAAE,QAAA,EAAA;AAAA,EAAA,cAAA;AAAA,kBACY,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAuB,QAAA,EAAA,MAAA,EAAO;AAAA,CAAA,EAClD,CAAA;AAGK,MAAM,qBAAqB,CAAC;AAAA,EACjC,MAAA,GAAS,4BAAA;AAAA,EACT,MAAA,GAAS,SAAA;AAAA,EACT,aAAA,GAAgB;AAClB,CAAA,KAA+B;AAC7B,EAAA,MAAM,MAAA,GAAS,UAAU,MAAM,CAAA;AAE/B,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,kBAAA,EAAA,EAAmB,SAAA,EAAW,YAAA,EAAa,EAAG,kBAAkB,IAAA,EAAM,CAAA;AAAA,oBACvE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,SAAA,EACrB,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,sBAAA,EAAuB,IAAA,EAAK,IAAA,EAAK,CAAA;AAAA,sBAC5C,GAAA,CAAC,UAAM,QAAA,EAAA,aAAA,CAAc,EAAE,QAAQ,SAAA,EAAW,MAAA,CAAO,KAAA,EAAO,CAAA,EAAE;AAAA,KAAA,EAC5D;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,44 @@
+import { css } from '@emotion/css';
+import { getDesignTokens } from '@grafana/design-tokens';
+
+const cssVariables = () => {
+  const { legacy } = 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 }
+  } = getDesignTokens({ valueType: "css" });
+  return {
+    container: 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({
+      fontWeight: typography.fontWeight.medium,
+      textTransform: "lowercase"
+    })
+  };
+};
+
+export { cssVariables, getStyles };
+//# sourceMappingURL=StackedChartNoData.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StackedChartNoData.styles.js","sources":["../../../../src/components/StackedChartNoData/StackedChartNoData.styles.ts"],"sourcesContent":["import { css } from '@emotion/css';\nimport { getDesignTokens, CSSVariables } from '@grafana/design-tokens';\n\nexport const cssVariables = (): CSSVariables => {\n  const { legacy } = getDesignTokens({ valueType: 'css' });\n\n  return {\n    dark: {\n      'stacked-chart-no-data-background-color': legacy.palette.blackBaseOpacity15,\n    },\n    light: {\n      'stacked-chart-no-data-background-color': legacy.palette.blackBaseOpacity4,\n    },\n  };\n};\n\nexport const getStyles = (height: number) => {\n  const {\n    legacy,\n    primitives: { typography, spacing },\n  } = getDesignTokens({ valueType: 'css' });\n\n  return {\n    container: css({\n      display: 'flex',\n      flex: 1,\n      width: '100%',\n      height: `${height}px`,\n      alignItems: 'center',\n      justifyContent: 'center',\n      gap: spacing.sm,\n      borderRadius: legacy.borderRadius.md,\n      color: legacy.colors.text.secondary,\n      fontFamily: typography.fontFamily.ui,\n      fontSize: typography.fontSize.ui.sm,\n      paddingTop: spacing.xxs,\n      background: 'var(--stacked-chart-no-data-background-color)',\n    }),\n    label: css({\n      fontWeight: typography.fontWeight.medium,\n      textTransform: 'lowercase',\n    }),\n  };\n};\n"],"names":[],"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,wCAAA,EAA0C,OAAO,OAAA,CAAQ;AAAA,KAC3D;AAAA,IACA,KAAA,EAAO;AAAA,MACL,wCAAA,EAA0C,OAAO,OAAA,CAAQ;AAAA;AAC3D,GACF;AACF;AAEO,MAAM,SAAA,GAAY,CAAC,MAAA,KAAmB;AAC3C,EAAA,MAAM;AAAA,IACJ,MAAA;AAAA,IACA,UAAA,EAAY,EAAE,UAAA,EAAY,OAAA;AAAQ,GACpC,GAAI,eAAA,CAAgB,EAAE,SAAA,EAAW,OAAO,CAAA;AAExC,EAAA,OAAO;AAAA,IACL,WAAW,GAAA,CAAI;AAAA,MACb,OAAA,EAAS,MAAA;AAAA,MACT,IAAA,EAAM,CAAA;AAAA,MACN,KAAA,EAAO,MAAA;AAAA,MACP,MAAA,EAAQ,GAAG,MAAM,CAAA,EAAA,CAAA;AAAA,MACjB,UAAA,EAAY,QAAA;AAAA,MACZ,cAAA,EAAgB,QAAA;AAAA,MAChB,KAAK,OAAA,CAAQ,EAAA;AAAA,MACb,YAAA,EAAc,OAAO,YAAA,CAAa,EAAA;AAAA,MAClC,KAAA,EAAO,MAAA,CAAO,MAAA,CAAO,IAAA,CAAK,SAAA;AAAA,MAC1B,UAAA,EAAY,WAAW,UAAA,CAAW,EAAA;AAAA,MAClC,QAAA,EAAU,UAAA,CAAW,QAAA,CAAS,EAAA,CAAG,EAAA;AAAA,MACjC,YAAY,OAAA,CAAQ,GAAA;AAAA,MACpB,UAAA,EAAY;AAAA,KACb,CAAA;AAAA,IACD,OAAO,GAAA,CAAI;AAAA,MACT,UAAA,EAAY,WAAW,UAAA,CAAW,MAAA;AAAA,MAClC,aAAA,EAAe;AAAA,KAChB;AAAA,GACH;AACF;;;;"}

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

@@ -18,7 +18,7 @@ const getSegmentStyles = () => css({
   display: "flex",
   height: "100%"
 });
-const getStyles$3 = ({
+const getStyles$4 = ({
   index,
   state = "default"
 }) => {
@@ -41,5 +41,5 @@ const getStyles$3 = ({
   });
 };
 
-export { diagonalStripedBackground, getSegmentStyles, getStyles$3 as getStyles };
+export { diagonalStripedBackground, getSegmentStyles, getStyles$4 as getStyles };
 //# sourceMappingURL=StackedChartSegment.styles.js.map

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

@@ -2,9 +2,12 @@ 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: [
+const defaultContentFormatter$1 = ({
+  value,
+  colorClassName
+}) => /* @__PURE__ */ jsxs(Fragment, { children: [
   /* @__PURE__ */ jsxs("span", { className: colorClassName, children: [
-    value,
+    value.toFixed(1),
     "%"
   ] }),
   " of total usage"
@@ -17,7 +20,7 @@ const StackedChartSegmentTooltip = ({
   value,
   total = 100,
   index,
-  formatContent = defaultContentFormatter,
+  formatContent = defaultContentFormatter$1,
   virtualElement
 }) => {
   const styles = getStyles(index);

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

@@ -1 +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;;;;"}
+{"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 StackedChartTooltipContentFormatter = (\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?: StackedChartTooltipContentFormatter;\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: StackedChartTooltipContentFormatter = ({\n  value,\n  colorClassName,\n}) => (\n  <>\n    <span className={colorClassName}>{value.toFixed(1)}%</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":["defaultContentFormatter"],"mappings":";;;;AAsBA,MAAMA,4BAA+D,CAAC;AAAA,EACpE,KAAA;AAAA,EACA;AACF,CAAA,qBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,kBAAA,IAAA,CAAC,MAAA,EAAA,EAAK,WAAW,cAAA,EAAiB,QAAA,EAAA;AAAA,IAAA,KAAA,CAAM,QAAQ,CAAC,CAAA;AAAA,IAAE;AAAA,GAAA,EAAC,CAAA;AAAA,EAAO;AAAA,CAAA,EAC7D,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,GAAgBA,yBAAA;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

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

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

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

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

@@ -1 +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;;;;"}
+{"version":3,"file":"StackedChartSkeleton.js","sources":["../../../../src/components/StackedChartSkeleton/StackedChartSkeleton.tsx"],"sourcesContent":["import { getStyles } from './StackedChartSkeleton.styles';\nimport { GenericSkeleton } from '../GenericSkeleton';\nimport { STACKED_CHART_DEFAULT_HEIGHT } from '../StackedChart/common';\n\nexport interface StackedChartSkeletonProps {\n  /**\n   * Height to render the stacked chart skeleton, in pixels\n   */\n  height?: number;\n}\n\nexport const StackedChartSkeleton = ({\n  height = STACKED_CHART_DEFAULT_HEIGHT,\n}: StackedChartSkeletonProps) => {\n  const styles = getStyles(height);\n\n  return (\n    <div className={styles}>\n      <GenericSkeleton />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;AAWO,MAAM,uBAAuB,CAAC;AAAA,EACnC,MAAA,GAAS;AACX,CAAA,KAAiC;AAC/B,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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 
-const getStyles = (height) => {
+const getStyles$1 = (height) => {
   return css({
     width: "100%",
     height: `${height}px`,
@@ -9,5 +9,5 @@ const getStyles = (height) => {
   });
 };
 
-export { getStyles };
+export { getStyles$1 as getStyles };
 //# sourceMappingURL=StackedChartSkeleton.styles.js.map

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

@@ -1 +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;;;;"}
+{"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":["getStyles"],"mappings":";;AAEO,MAAMA,WAAA,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;;;;"}

package/dist/esm/index.d.ts

@@ -117,6 +117,26 @@ interface GenericSkeletonProps {
 }
 declare const GenericSkeleton: ({ animationDuration }: GenericSkeletonProps) => react_jsx_runtime.JSX.Element;
 
+type StackedChartNoDataMessageFormatter = (args: {
+    period: string;
+    className: string;
+}) => React.ReactElement;
+interface StackedChartNoDataProps {
+    /**
+     * Height to render the stacked chart skeleton, in pixels
+     */
+    height?: number;
+    /**
+     * Period for which this chart has no data, as a preformatted string
+     */
+    period?: string;
+    /**
+     * Optional formatter for content message
+     */
+    formatMessage?: StackedChartNoDataMessageFormatter;
+}
+declare const StackedChartNoData: ({ height, period, formatMessage, }: StackedChartNoDataProps) => react_jsx_runtime.JSX.Element;
+
 interface StackedChartCategory {
     title: string;
     value: number;
@@ -154,6 +174,11 @@ interface CommonStackedChartProps<T extends string> {
      * Event handler for whenever a segment gets a mouseout event
      */
     onSegmentMouseOut?: MouseEventHandler;
+    /**
+     * String representing the period for which the chart is displaying data
+     */
+    period?: string;
+    formatNoDataMessage?: StackedChartNoDataProps['formatMessage'];
 }
 interface SkeletonStackedChartProps<T extends string> extends CommonStackedChartProps<T> {
     isSkeleton: true;
@@ -170,7 +195,7 @@ interface LoadedStackedChartProps<T extends string> extends CommonStackedChartPr
     categories: StackedChartCategories<T>;
 }
 type StackedChartProps<T extends string> = SkeletonStackedChartProps<T> | LoadedStackedChartProps<T>;
-declare const StackedChart: <T extends string>({ categories: _categories, highlightedCategoryId: initialHighlightedCategoryId, isSkeleton, isDimmed, sortOrder, height, onSegmentMouseOver, onSegmentMouseOut, }: StackedChartProps<T>) => react_jsx_runtime.JSX.Element;
+declare const StackedChart: <T extends string>({ categories: _categories, highlightedCategoryId: initialHighlightedCategoryId, isSkeleton, isDimmed, sortOrder, height, onSegmentMouseOver, onSegmentMouseOut, period, formatNoDataMessage, }: StackedChartProps<T>) => react_jsx_runtime.JSX.Element;
 
 /**
  * A segment can be in one of four states:
@@ -232,11 +257,11 @@ interface StackedChartSegmentProps<T extends string> {
 
 declare const StackedChartSegment: React__default.ForwardRefExoticComponent<StackedChartSegmentProps<string> & React__default.RefAttributes<HTMLDivElement>>;
 
-type ContentFormatter = (args: {
+type StackedChartTooltipContentFormatter = (args: {
     colorClassName: string;
 } & Required<Pick<StackedChartSegmentProps<string>, 'value' | 'total' | 'index'>>) => React.ReactElement;
 interface StackedChartSegmentTooltipProps<T extends string> extends Pick<StackedChartSegmentProps<T>, 'title' | 'value' | 'total' | 'index'>, Omit<PopoverProps, 'children'> {
-    formatContent?: ContentFormatter;
+    formatContent?: StackedChartTooltipContentFormatter;
 }
 declare const StackedChartSegmentTooltip: <T extends string>({ trigger, placement, hideDelay, title, value, total, index, formatContent, virtualElement, }: StackedChartSegmentTooltipProps<T>) => react_jsx_runtime.JSX.Element;
 
@@ -246,7 +271,7 @@ interface StackedChartSkeletonProps {
      */
     height?: number;
 }
-declare const StackedChartSkeleton: ({ height }: StackedChartSkeletonProps) => react_jsx_runtime.JSX.Element;
+declare const StackedChartSkeleton: ({ height, }: StackedChartSkeletonProps) => react_jsx_runtime.JSX.Element;
 
 /**
  * Shared utility functions for handling comparison calculations across components
@@ -292,5 +317,5 @@ interface FormatNumberOptions {
  */
 declare const formatNumber: (value: number | string | "loading", options?: FormatNumberOptions) => string;
 
-export { ColorMode, ColorModeChangeHandler, ColorModeProvider, ComparisonBadge, ComparisonTooltip, GenericSkeleton, Popover, StackedChart, StackedChartSegment, StackedChartSegmentTooltip, StackedChartSkeleton, calculateComparison, formatNumber, useColorMode, useColorModeChange };
-export type { ColorModeChangeProps, ColorModeContextType, ColorModeProviderProps, ColorModeWrapper, CommonStackedChartProps, ComparisonResult, ComparisonTooltipProps, ContentFormatter, FormatNumberOptions, GenericSkeletonProps, LoadedStackedChartProps, PopoverProps, SkeletonStackedChartProps, StackedChartCategories, StackedChartCategory, StackedChartProps, StackedChartSegmentTooltipProps, StackedChartSkeletonProps, StackedChartSortOrder };
+export { ColorMode, ColorModeChangeHandler, ColorModeProvider, ComparisonBadge, ComparisonTooltip, GenericSkeleton, Popover, StackedChart, StackedChartNoData, StackedChartSegment, StackedChartSegmentTooltip, StackedChartSkeleton, calculateComparison, formatNumber, useColorMode, useColorModeChange };
+export type { ColorModeChangeProps, ColorModeContextType, ColorModeProviderProps, ColorModeWrapper, CommonStackedChartProps, ComparisonResult, ComparisonTooltipProps, FormatNumberOptions, GenericSkeletonProps, LoadedStackedChartProps, PopoverProps, SkeletonStackedChartProps, StackedChartCategories, StackedChartCategory, StackedChartNoDataMessageFormatter, StackedChartNoDataProps, StackedChartProps, StackedChartSegmentTooltipProps, StackedChartSkeletonProps, StackedChartSortOrder, StackedChartTooltipContentFormatter };

package/dist/esm/index.js

@@ -6,6 +6,7 @@ export { ComparisonTooltip } from './components/ComparisonTooltip/ComparisonTool
 export { GenericSkeleton } from './components/GenericSkeleton/GenericSkeleton.js';
 export { Popover } from './components/Popover/Popover.js';
 export { StackedChart } from './components/StackedChart/StackedChart.js';
+export { StackedChartNoData } from './components/StackedChartNoData/StackedChartNoData.js';
 export { StackedChartSegment } from './components/StackedChartSegment/StackedChartSegment.js';
 export { StackedChartSegmentTooltip } from './components/StackedChartSegmentTooltip/StackedChartSegmentTooltip.js';
 export { StackedChartSkeleton } from './components/StackedChartSkeleton/StackedChartSkeleton.js';

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/package.json

@@ -2,7 +2,7 @@
   "author": "Grafana Labs",
   "name": "@grafana/components",
   "license": "Apache-2.0",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "Product Design Engineering Components for Grafana",
   "repository": {
     "type": "git",