@grafana/components 0.0.23 → 0.0.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -848,6 +848,10 @@ const StackedChartNoData = ({
848
848
  ] });
849
849
  };
850
850
 
851
+ const DUMMY_CATEGORY = {
852
+ title: "Category",
853
+ value: 0.01
854
+ };
851
855
  const StackedChart = ({
852
856
  categories,
853
857
  highlightedCategoryId: initialHighlightedCategoryId,
@@ -860,7 +864,7 @@ const StackedChart = ({
860
864
  period = "current",
861
865
  formatNoDataMessage
862
866
  }) => {
863
- if (isSkeleton || !categories) return /* @__PURE__ */ jsxRuntime.jsx(StackedChartSkeleton, { height });
867
+ const shouldRenderSkeleton = isSkeleton || !categories;
864
868
  let highlightedSegmentRef = React.useRef(null);
865
869
  const [highlightedCategoryId, setHighlightedCategoryId] = React.useState(
866
870
  /**
@@ -879,6 +883,7 @@ const StackedChart = ({
879
883
  for (const categoryId in categories) {
880
884
  categoryIds.push(categoryId);
881
885
  }
886
+ if (shouldRenderSkeleton) return categoryIds;
882
887
  switch (sortOrder) {
883
888
  case "largest-first":
884
889
  return categoryIds.sort((a, b) => categories[b].value - categories[a].value);
@@ -887,16 +892,16 @@ const StackedChart = ({
887
892
  default:
888
893
  return categoryIds;
889
894
  }
890
- }, [categories, sortOrder]);
891
- const total = React.useMemo(
892
- () => Math.round(
895
+ }, [shouldRenderSkeleton, categories, sortOrder]);
896
+ const total = React.useMemo(() => {
897
+ if (shouldRenderSkeleton) return 0;
898
+ return Math.round(
893
899
  Object.entries(categories).reduce(
894
900
  (sum, [, category]) => sum + category.value,
895
901
  0
896
902
  )
897
- ),
898
- [categories]
899
- );
903
+ );
904
+ }, [shouldRenderSkeleton, categories]);
900
905
  const styles = getStyles$3({ height });
901
906
  const onMouseOver = ({ ref, categoryId }) => () => {
902
907
  clearTimeout(timer.current);
@@ -915,15 +920,14 @@ const StackedChart = ({
915
920
  }, 50);
916
921
  if (onSegmentMouseOut) onSegmentMouseOut({ ref, categoryId });
917
922
  };
918
- if (initialHighlightedCategoryId && sortedCategoryIds.indexOf(initialHighlightedCategoryId) === -1)
919
- return /* @__PURE__ */ jsxRuntime.jsx(StackedChartNoData, { height, period, formatMessage: formatNoDataMessage });
920
- const highlightedCategory = initialHighlightedCategoryId ? {
923
+ const highlightedCategory = !shouldRenderSkeleton && initialHighlightedCategoryId ? {
921
924
  ...categories[initialHighlightedCategoryId],
922
925
  index: sortedCategoryIds.indexOf(initialHighlightedCategoryId)
923
926
  } : void 0;
924
927
  const content = /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.container, children: sortedCategoryIds.map((categoryId, categoryIndex) => {
925
- const category = categories[categoryId];
928
+ const category = shouldRenderSkeleton ? DUMMY_CATEGORY : categories[categoryId];
926
929
  const ref = React.useRef(null);
930
+ if (categoryId === initialHighlightedCategoryId) highlightedSegmentRef = ref;
927
931
  const segmentState = (() => {
928
932
  switch (true) {
929
933
  /**
@@ -977,10 +981,6 @@ const StackedChart = ({
977
981
  },
978
982
  categoryId
979
983
  );
980
- if (categoryId === initialHighlightedCategoryId) highlightedSegmentRef = ref;
981
- if (!ref.current) {
982
- console.log(categoryId, "ref is unset", ref);
983
- }
984
984
  return initialHighlightedCategoryId ? segment : /* @__PURE__ */ jsxRuntime.jsx(
985
985
  StackedChartSegmentTooltip,
986
986
  {
@@ -993,6 +993,9 @@ const StackedChart = ({
993
993
  categoryId
994
994
  );
995
995
  }) });
996
+ if (shouldRenderSkeleton) return /* @__PURE__ */ jsxRuntime.jsx(StackedChartSkeleton, { height });
997
+ if (initialHighlightedCategoryId && sortedCategoryIds.indexOf(initialHighlightedCategoryId) === -1)
998
+ return /* @__PURE__ */ jsxRuntime.jsx(StackedChartNoData, { height, period, formatMessage: formatNoDataMessage });
996
999
  return initialHighlightedCategoryId && highlightedCategory ? /* @__PURE__ */ jsxRuntime.jsx(
997
1000
  StackedChartSegmentTooltip,
998
1001
  {
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../node_modules/@grafana/runtime/dist/esm/services/appEvents.mjs","../../src/components/ColorModeProvider/ColorModeProvider.tsx","../../src/hooks/useColorModeChange.ts","../../src/components/ColorModeChangeHandler/ColorModeChangeHandler.tsx","../../src/components/ColorMode/ColorMode.tsx","../../src/utils/formatters.ts","../../src/utils/comparison.ts","../../src/components/Popover/Popover.styles.ts","../../src/components/Popover/Popover.tsx","../../src/components/ComparisonTooltip/ComparisonTooltip.styles.ts","../../src/components/ComparisonTooltip/ComparisonTooltip.tsx","../../src/components/ComparisonBadge/ComparisonBadge.styles.ts","../../src/components/ComparisonBadge/ComparisonBadge.tsx","../../src/components/GenericSkeleton/GenericSkeleton.styles.ts","../../src/components/GenericSkeleton/GenericSkeleton.tsx","../../src/components/StackedChart/shared.styles.ts","../../src/components/StackedChartSegment/StackedChartSegment.styles.ts","../../src/components/StackedChartSegment/StackedChartSegment.tsx","../../src/components/StackedChart/StackedChart.styles.ts","../../src/components/StackedChartSegmentTooltip/StackedChartSegmentTooltip.styles.ts","../../src/components/StackedChartSegmentTooltip/StackedChartSegmentTooltip.tsx","../../src/components/StackedChartSkeleton/StackedChartSkeleton.styles.ts","../../src/components/StackedChart/common.ts","../../src/components/StackedChartSkeleton/StackedChartSkeleton.tsx","../../src/components/StackedChartNoData/StackedChartNoData.styles.ts","../../src/components/StackedChartNoData/StackedChartNoData.tsx","../../src/components/StackedChart/StackedChart.tsx"],"sourcesContent":["import { BusEventBase, BusEventWithPayload } from '@grafana/data';\n\nclass RefreshEvent extends BusEventBase {\n}\nRefreshEvent.type = \"refresh\";\nclass ThemeChangedEvent extends BusEventWithPayload {\n}\nThemeChangedEvent.type = \"theme-changed\";\nclass TimeRangeUpdatedEvent extends BusEventWithPayload {\n}\nTimeRangeUpdatedEvent.type = \"time-range-updated\";\nclass CopyPanelEvent extends BusEventWithPayload {\n}\nCopyPanelEvent.type = \"copy-panel\";\nlet singletonInstance;\nfunction setAppEvents(instance) {\n singletonInstance = instance;\n}\nfunction getAppEvents() {\n return singletonInstance;\n}\n\nexport { CopyPanelEvent, RefreshEvent, ThemeChangedEvent, TimeRangeUpdatedEvent, getAppEvents, setAppEvents };\n//# sourceMappingURL=appEvents.mjs.map\n","import React, { createContext, useContext, useEffect, useState, ReactNode } from 'react';\nimport { ThemeColorMode } from '@grafana/design-tokens';\n\nimport '@grafana/design-tokens/dist/css/legacy/primitives.css';\nimport '@grafana/design-tokens/dist/css/legacy/colors.light.css';\nimport '@grafana/design-tokens/dist/css/legacy/colors.dark.css';\n\nexport interface ColorModeContextType {\n colorMode: ThemeColorMode;\n setColorMode: (colorMode: ThemeColorMode) => void;\n}\n\nexport interface ColorModeProviderProps {\n children: ReactNode;\n defaultColorMode?: ThemeColorMode;\n}\n\nconst ColorModeContext = createContext<ColorModeContextType | undefined>(undefined);\n\n/**\n * Provides a shared context for the currently-active theme color mode, and sets\n * the data-color-mode attribute on the document element whenever it changes.\n */\nexport const ColorModeProvider: React.FC<ColorModeProviderProps> = ({\n children,\n defaultColorMode = 'light',\n}) => {\n const [colorMode, setColorMode] = useState<ThemeColorMode>(defaultColorMode);\n\n useEffect(() => {\n console.log('ColorModeProvider', { colorMode });\n document.documentElement.setAttribute('data-color-mode', colorMode);\n }, [colorMode]);\n\n return (\n <ColorModeContext.Provider value={{ colorMode, setColorMode }}>\n {children}\n </ColorModeContext.Provider>\n );\n};\n\n/**\n * Use this to query the active color mode, or to set it, e.g. with an effect\n * hook within a component which explicitly changes the active color mode:\n *\n * useEffect(() => {\n * setColorMode(colorMode);\n * }, [colorMode]);\n *\n */\nexport const useColorMode = () => {\n const context = useContext(ColorModeContext);\n\n if (context === undefined) {\n throw new Error('useColorMode must be used within a ColorModeProvider');\n }\n\n return context;\n};\n","import type { EventBus, GrafanaTheme2 } from '@grafana/data';\nimport { ThemeChangedEvent } from '@grafana/runtime';\nimport type { ThemeColorMode } from '@grafana/design-tokens';\nimport { useColorMode } from '../components/ColorModeProvider/ColorModeProvider';\n\nconst getThemeColorMode = (isLight: boolean): ThemeColorMode => {\n return isLight ? 'light' : 'dark';\n};\n\nexport interface ColorModeChangeProps {\n getAppEvents: () => EventBus;\n useTheme2: () => GrafanaTheme2;\n}\n\n/**\n * This allows us to register an event listener for when the ThemeChangedEvent\n * is fired, and update the currently active color mode accordingly. It will\n * also determine the color mode on initial registration, and update the context\n * provider accordingly.\n */\nexport const useColorModeChange = ({\n getAppEvents,\n useTheme2,\n}: ColorModeChangeProps): ThemeColorMode => {\n const { setColorMode } = useColorMode();\n const appEvents = getAppEvents();\n\n appEvents.subscribe<ThemeChangedEvent>(ThemeChangedEvent, ({ payload }) => {\n const { isLight } = payload;\n const newColorMode = getThemeColorMode(isLight);\n\n console.log('ThemeChangedEvent', { colorMode: newColorMode });\n setColorMode(newColorMode);\n });\n\n /**\n * Longterm the current colorMode should ideally exist outside of useTheme2\n */\n const { isLight } = useTheme2();\n const newColorMode = getThemeColorMode(isLight);\n setColorMode(newColorMode);\n\n return newColorMode;\n};\n","import React from 'react';\nimport { useColorModeChange, ColorModeChangeProps } from '../../hooks';\n\nexport type ColorModeWrapper = React.FC<ColorModeChangeProps & { children: React.ReactNode }>;\n\nexport const ColorModeChangeHandler: ColorModeWrapper = ({ children, getAppEvents, useTheme2 }) => {\n useColorModeChange({ getAppEvents, useTheme2 });\n\n return children;\n};\n","import { ColorModeWrapper, ColorModeChangeHandler } from '../ColorModeChangeHandler';\nimport { ColorModeProvider } from '../ColorModeProvider';\n\nexport const ColorMode: ColorModeWrapper = ({ children, getAppEvents, useTheme2 }) => {\n return (\n <ColorModeProvider>\n <ColorModeChangeHandler getAppEvents={getAppEvents} useTheme2={useTheme2}>\n {children}\n </ColorModeChangeHandler>\n </ColorModeProvider>\n );\n};\n","/**\n * Number formatting options\n */\nexport interface FormatNumberOptions {\n /** Decimal places (default: 2) */\n decimals?: number;\n /** Threshold for compact formatting (default: 1000) */\n compactThreshold?: number;\n /** Never use compact formatting (for precise displays) */\n precise?: boolean;\n}\n\n/**\n * Format numbers with optional compact notation (k, m, b)\n * Components handle their own prefixes/suffixes ($ or %)\n *\n * @param value - The number to format (or 'loading' state)\n * @param options - Formatting options\n * @returns Formatted number string (no prefixes/suffixes)\n *\n * @example\n * formatNumber(1234) // \"1.2k\"\n * formatNumber(1234, { precise: true }) // \"1,234.00\"\n * formatNumber(1234, { decimals: 0 }) // \"1k\"\n * formatNumber(999) // \"999.00\"\n */\nexport const formatNumber = (\n value: number | string | 'loading',\n options: FormatNumberOptions = {},\n): string => {\n const { decimals = 2, compactThreshold = 1000, precise = false } = options;\n\n if (value === 'loading') {\n return '';\n }\n\n const num = typeof value === 'string' ? parseFloat(value) : value;\n if (isNaN(num)) {\n return 'N/A';\n }\n\n const abs = Math.abs(num);\n\n // Use compact notation if above threshold and not precise\n if (!precise && abs >= compactThreshold) {\n const sign = num < 0 ? '-' : '';\n const absNum = Math.abs(num);\n // Always use 1 decimal place for compact notation for consistency\n if (absNum >= 1000000000) {\n return `${sign}${(absNum / 1000000000).toFixed(1)}b`;\n } else if (absNum >= 1000000) {\n return `${sign}${(absNum / 1000000).toFixed(1)}m`;\n } else if (absNum >= 1000) {\n return `${sign}${(absNum / 1000).toFixed(1)}k`;\n }\n }\n\n // Standard formatting with specified decimal places\n return num.toLocaleString('en-US', {\n minimumFractionDigits: decimals,\n maximumFractionDigits: decimals,\n });\n};\n","/**\n * Shared utility functions for handling comparison calculations across components\n */\n\nimport { formatNumber } from './formatters';\n\nexport interface ComparisonResult {\n hasComparison: boolean;\n direction: 'up' | 'down' | 'neutral';\n percentageChange: number;\n percentageLabel: string;\n}\n\n/**\n * Calculate comparison metrics between a current value and a baseline value\n * @param current - The current value to compare\n * @param baseline - The baseline value to compare against (optional)\n * @returns ComparisonResult object with calculated metrics\n */\nexport const calculateComparison = (\n current: number | undefined | null,\n baseline: number | undefined | null,\n): ComparisonResult => {\n // If either value is missing, null, undefined, or baseline is 0, return neutral state\n if (\n current === undefined ||\n current === null ||\n baseline === undefined ||\n baseline === null ||\n baseline === 0\n ) {\n return {\n hasComparison: false,\n direction: 'neutral',\n percentageChange: 0,\n percentageLabel: '',\n };\n }\n\n // If values are equal, return neutral state\n if (current === baseline) {\n return {\n hasComparison: true,\n direction: 'neutral',\n percentageChange: 0,\n percentageLabel: '0%',\n };\n }\n\n // Calculate percentage change\n const percentageChange = Math.abs(((current - baseline) / baseline) * 100);\n const direction = current > baseline ? 'up' : 'down';\n\n return {\n hasComparison: true,\n direction,\n percentageChange,\n percentageLabel: `${formatNumber(percentageChange, {\n compactThreshold: 10000,\n decimals: 2,\n })}%`,\n };\n};\n","import { css } from '@emotion/css';\nimport { getDesignTokens } from '@grafana/design-tokens';\n\nexport const getStyles = () => {\n const {\n legacy,\n primitives: { spacing, typography },\n } = getDesignTokens({ valueType: 'css' });\n const backgroundColor = legacy.colors.background.secondary;\n\n return {\n arrow: css({\n fill: backgroundColor,\n }),\n shadow: css({\n filter: `drop-shadow(${legacy.boxShadows.z2})`,\n }),\n container: css({\n backgroundColor,\n borderRadius: `calc(${legacy.borderRadius.md} + ${spacing.xs})`,\n padding: spacing.xs,\n color: legacy.colors.text.primary,\n fontFamily: typography.fontFamily.ui,\n fontSize: typography.fontSize.ui.sm,\n }),\n };\n};\n","import {\n forwardRef,\n cloneElement,\n useCallback,\n useId,\n useRef,\n useState,\n useLayoutEffect,\n JSX,\n} from 'react';\nimport {\n arrow,\n autoUpdate,\n flip,\n FloatingArrow,\n offset,\n Placement,\n safePolygon,\n shift,\n useDismiss,\n useFloating,\n useFocus,\n useHover,\n useRole,\n useInteractions,\n useTransitionStyles,\n FloatingPortal,\n} from '@floating-ui/react';\nimport { getStyles } from './Popover.styles';\n\nexport interface PopoverProps {\n /**\n * Content used to trigger the Popover being displayed\n */\n trigger: JSX.Element;\n\n /**\n * Content to render within the Popover\n */\n children: JSX.Element;\n /**\n * Should the popover be open? Implicitly means the popover visibility is\n * controlled; if omitted, the popover target will control visibility\n */\n isOpen?: boolean;\n\n /**\n * Set to true if you want the tooltip to stay long enough so the user can\n * move mouse over content to select text or click a link\n */\n isInteractive?: boolean;\n\n /**\n * Placement of the Popover relative to the trigger content\n */\n placement?: Placement;\n\n /**\n * Transition duration for hide/show effects, in milliseconds\n */\n transitionDuration?: number;\n\n /**\n * Additional delay before hiding the popover after mouseout, in milliseconds\n */\n hideDelay?: number;\n\n /**\n * Virtual element to anchor the popover to instead of the trigger\n */\n virtualElement?: React.RefObject<Element>;\n}\n\nconst POPOVER_OFFSET = 8;\n\nconst getMiddleware = ({\n placement,\n arrowRef,\n}: {\n placement?: Placement;\n arrowRef: React.RefObject<null>;\n}) => {\n const BOUNDARY_ELEMENT_ID = 'floating-boundary';\n const _flip = flip({\n // Ensure we flip to the perpendicular axis if it doesn't fit\n // on narrow viewports.\n crossAxis: 'alignment',\n fallbackAxisSideDirection: 'end',\n boundary: document.getElementById(BOUNDARY_ELEMENT_ID) ?? undefined,\n });\n\n const middleware = placement?.includes('-') ? [_flip, shift()] : [shift(), _flip];\n\n // the order of middleware is important!\n // `arrow` should almost always be at the end\n // see https://floating-ui.com/docs/arrow#order\n return [\n offset(POPOVER_OFFSET),\n ...middleware,\n arrow({\n element: arrowRef,\n }),\n ];\n};\n\nexport const Popover = forwardRef<HTMLElement, PopoverProps>(\n (\n {\n trigger,\n children,\n isOpen: isOpenControlled,\n isInteractive = false,\n placement = 'bottom',\n transitionDuration = 200,\n hideDelay = 500,\n virtualElement,\n },\n forwardedRef,\n ) => {\n const arrowRef = useRef(null);\n const closeTimer = useRef<number | undefined>(undefined);\n const popoverId = useId();\n const [isOpenState, setOpen] = useState(isOpenControlled);\n const [isDelayedOpen, setDelayedOpen] = useState(isOpenControlled);\n const isOpen = isOpenControlled ?? isOpenState;\n const middleware = getMiddleware({ placement, arrowRef });\n const styles = getStyles();\n\n const { context, refs, floatingStyles } = useFloating({\n open: isOpen,\n placement,\n onOpenChange: (open) => {\n setOpen(open);\n clearTimeout(closeTimer.current);\n\n if (!open) {\n closeTimer.current = window.setTimeout(() => {\n setDelayedOpen(open);\n }, transitionDuration + hideDelay);\n } else {\n setDelayedOpen(open);\n }\n },\n middleware,\n whileElementsMounted: autoUpdate,\n });\n\n useLayoutEffect(() => {\n if (virtualElement && virtualElement.current !== null) {\n const domRect = virtualElement.current.getBoundingClientRect();\n\n refs.setPositionReference({\n getBoundingClientRect: () => {\n if (virtualElement.current !== null)\n return virtualElement.current.getBoundingClientRect();\n return domRect;\n },\n contextElement: virtualElement.current,\n });\n }\n }, [refs, virtualElement]);\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useDismiss(context),\n useHover(context, {\n handleClose: isInteractive ? safePolygon() : undefined,\n move: false,\n delay: {\n open: 0,\n close: hideDelay,\n },\n }),\n useFocus(context),\n useRole(context),\n ]);\n\n const { styles: transitionStyles } = useTransitionStyles(context, {\n duration: transitionDuration,\n initial: ({ side }) => ({\n opacity: 0,\n transform:\n side === 'top' || side === 'bottom'\n ? `translateY(${POPOVER_OFFSET}px)`\n : `translateX(${POPOVER_OFFSET}px)`,\n }),\n open: ({ side }) => ({\n opacity: 1,\n transform: side === 'top' || side === 'bottom' ? `translateY(0)` : `translateX(0)`,\n }),\n close: ({ side }) => ({\n opacity: 0,\n transform:\n side === 'top' || side === 'bottom'\n ? `translateY(${POPOVER_OFFSET}px)`\n : `translateX(${POPOVER_OFFSET}px)`,\n }),\n });\n\n const handleRef = useCallback(\n (ref: HTMLElement | null) => {\n refs.setReference(ref);\n\n if (typeof forwardedRef === 'function') {\n forwardedRef(ref);\n } else if (forwardedRef) {\n forwardedRef.current = ref;\n }\n },\n [forwardedRef, refs],\n );\n\n return (\n <>\n {/* element to trigger displaying the popover */}\n {cloneElement(trigger, {\n ref: handleRef,\n tabIndex: 0,\n 'aria-describedby': isOpen ? popoverId : undefined,\n ...getReferenceProps(),\n })}\n {/* content to render inside the popover when open */}\n {(isDelayedOpen || isOpen) && (\n <FloatingPortal root={document.getElementById('grafana-portal-container')}>\n <div ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>\n <div style={transitionStyles} className={styles.shadow}>\n <FloatingArrow className={styles.arrow} ref={arrowRef} context={context} />\n <div id={popoverId} role=\"tooltip\" className={styles.container}>\n {children}\n </div>\n </div>\n </div>\n </FloatingPortal>\n )}\n </>\n );\n },\n);\n\nPopover.displayName = 'Popover';\n","import { css } from '@emotion/css';\nimport { getDesignTokens } from '@grafana/design-tokens';\n\nexport const getStyles = () => {\n const {\n legacy,\n primitives: { spacing, typography },\n } = getDesignTokens({ valueType: 'css' });\n\n const background = legacy.colors.background.primary;\n\n return {\n wrapper: css({\n display: 'flex',\n flexDirection: 'column',\n gap: spacing.xs,\n }),\n heading: css({\n padding: `${spacing.sm} ${spacing.md}`,\n fontFamily: typography.fontFamily.ui,\n fontSize: typography.fontSize.ui.sm,\n fontWeight: typography.fontWeight.bold,\n color: legacy.colors.text.primary,\n background,\n borderRadius: legacy.borderRadius.md,\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,\n borderRadius: legacy.borderRadius.md,\n padding: `${spacing.sm} ${spacing.md}`,\n }),\n sectionTitle: css({\n fontFamily: typography.fontFamily.ui,\n fontSize: typography.fontSize.ui.sm,\n fontWeight: typography.fontWeight.medium,\n color: legacy.colors.text.primary,\n whiteSpace: 'nowrap',\n }),\n value: css({\n display: 'flex',\n alignItems: 'center',\n gap: spacing.xs,\n fontFamily: typography.fontFamily.monospace,\n fontSize: typography.fontSize.monospace.sm,\n color: legacy.colors.text.secondary,\n }),\n icon: css({\n flexShrink: 0,\n }),\n };\n};\n","import { Icon, IconName } from '@grafana/ui';\nimport { Popover, PopoverProps } from '../Popover';\nimport { getStyles } from './ComparisonTooltip.styles';\n\nexport interface ComparisonTooltipProps extends Omit<PopoverProps, 'children'> {\n current?: string;\n previous?: string;\n previousLabel?: string;\n currentLabel?: string;\n title?: string;\n currentIcon?: IconName;\n previousIcon?: IconName;\n hideDelay?: number;\n}\n\nexport const ComparisonTooltip = ({\n trigger,\n placement = 'top',\n current,\n previous,\n previousLabel,\n currentLabel = 'Current',\n title,\n currentIcon = 'eye',\n previousIcon = 'clock-nine',\n hideDelay,\n}: ComparisonTooltipProps) => {\n const styles = getStyles();\n\n return (\n <Popover trigger={trigger} placement={placement} hideDelay={hideDelay}>\n <div className={styles.wrapper}>\n {title && <div className={styles.heading}>{title}</div>}\n <div className={styles.content}>\n <div className={styles.section}>\n <div className={styles.sectionTitle}>{currentLabel}</div>\n <div className={styles.value}>\n <Icon name={currentIcon} size=\"sm\" className={styles.icon} />\n <span>{current || 'N/A'}</span>\n </div>\n </div>\n <div className={styles.section}>\n <div className={styles.sectionTitle}>{previousLabel}</div>\n <div className={styles.value}>\n <Icon name={previousIcon} size=\"sm\" className={styles.icon} />\n <span>{previous || 'N/A'}</span>\n </div>\n </div>\n </div>\n </div>\n </Popover>\n );\n};\n","import { css } 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 'comparison-badge-icon-background-color': legacy.colors.background.secondary,\n 'comparison-badge-icon-highlight-background-color': legacy.palette.whiteBaseOpacity10,\n },\n light: {\n 'comparison-badge-icon-background-color': legacy.colors.background.canvas,\n 'comparison-badge-icon-highlight-background-color': legacy.palette.blackBaseOpacity8,\n },\n };\n};\n\nconst BADGE_HEIGHT = 28;\nconst TREND_ICON_SIZE = 20;\n\nexport const getComparisonBadgeStyles = ({\n highlight,\n direction,\n tooltip,\n}: {\n highlight: boolean;\n direction: string;\n tooltip?: boolean;\n}) => {\n const {\n legacy,\n primitives: { spacing, typography },\n } = getDesignTokens({ valueType: 'css' });\n\n const labelColor = (() => {\n switch (true) {\n case highlight:\n case direction === 'up':\n return legacy.colors.text.maxContrast;\n default:\n return legacy.colors.primary.text;\n }\n })();\n\n return {\n container: css({\n boxSizing: 'border-box',\n background: 'transparent',\n borderRadius: legacy.borderRadius.pill,\n border: `1px solid\n ${highlight ? legacy.colors.border.strong : legacy.colors.border.weak}`,\n padding: `${spacing.xxs} ${spacing.sm} ${spacing.xxs} ${spacing.xxs}`,\n textAlign: 'left',\n display: 'inline-flex',\n flexDirection: 'row',\n justifyContent: 'center',\n alignItems: 'center',\n fontFamily: typography.fontFamily.ui,\n fontSize: typography.fontSize.ui.sm,\n height: `${BADGE_HEIGHT}px`,\n position: 'relative',\n transition: 'background 0.2s ease-in-out',\n ...(tooltip\n ? {\n cursor: 'pointer',\n '&:hover': {\n background: legacy.colors.background.secondary,\n },\n }\n : {}),\n }),\n clockIconWrapper: css({\n background: highlight\n ? 'var(--comparison-badge-icon-highlight-background-color)'\n : 'var(--comparison-badge-icon-background-color)',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: '22px',\n height: '22px',\n borderRadius: legacy.borderRadius.pill,\n color: legacy.colors.text.primary,\n }),\n trendLabelContainer: css({\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n gap: spacing.xxs,\n paddingLeft: spacing.xxs,\n fontWeight: typography.fontWeight.medium,\n whiteSpace: 'nowrap',\n }),\n trendLabel: css({\n display: 'flex',\n alignItems: 'center',\n color: labelColor,\n lineHeight: `${BADGE_HEIGHT}px`,\n fontWeight: typography.fontWeight.medium,\n fontVariantNumeric: 'tabular-nums',\n }),\n timeframeLabel: css({\n color: highlight ? legacy.colors.text.maxContrast : legacy.colors.text.primary,\n paddingLeft: spacing.xxs,\n lineHeight: `${BADGE_HEIGHT}px`,\n fontWeight: typography.fontWeight.normal,\n }),\n trendIconWrapper: css({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: '16px',\n height: '16px',\n }),\n trendIcon: css({\n width: `${TREND_ICON_SIZE}px`,\n height: `${TREND_ICON_SIZE}px`,\n }),\n dash: css({\n color: legacy.colors.text.secondary,\n }),\n };\n};\n","import { cx } from '@emotion/css';\nimport { GlobalCSSVariables } from '@grafana/design-tokens';\nimport { Icon, IconName } from '@grafana/ui';\nimport { calculateComparison } from '../../utils/comparison';\nimport { formatNumber } from '../../utils/formatters';\nimport { ComparisonTooltipProps, ComparisonTooltip } from '../ComparisonTooltip';\nimport { cssVariables, getComparisonBadgeStyles } from './ComparisonBadge.styles';\n\nconst formatCurrency = (value: number | undefined | null): string => {\n return !!value ? `$${formatNumber(value, { precise: true })}` : 'N/A';\n};\n\nexport interface ComparisonBadgeProps\n extends Pick<ComparisonTooltipProps, 'currentLabel' | 'previousLabel' | 'placement'> {\n current?: number | null;\n previous?: number | null;\n highlight?: boolean;\n timeframeLabel?: string;\n tooltip?: boolean;\n hideDelay?: number;\n}\n\nconst DIRECTION_ICON: Record<'up' | 'down' | 'neutral', IconName> = {\n up: 'arrow-up',\n down: 'arrow-down',\n neutral: 'minus',\n};\n\nexport const ComparisonBadge = ({\n current,\n previous,\n currentLabel,\n previousLabel,\n placement,\n highlight = false,\n timeframeLabel,\n tooltip = true,\n hideDelay,\n}: ComparisonBadgeProps) => {\n const { direction, hasComparison, percentageLabel } = calculateComparison(current, previous);\n const styles = getComparisonBadgeStyles({ highlight, direction, tooltip });\n\n const directionIconStyle = (() => {\n switch (true) {\n case direction == 'neutral':\n return styles.dash;\n default:\n return undefined;\n }\n })();\n\n const badgeContent = (\n <div className={styles.container}>\n <div className={styles.clockIconWrapper}>\n <Icon name=\"clock-nine\" />\n </div>\n <div className={styles.trendLabelContainer}>\n <span className={styles.trendLabel}>\n <span className={styles.trendIconWrapper}>\n <Icon\n name={DIRECTION_ICON[direction]}\n className={cx(styles.trendIcon, directionIconStyle)}\n />\n </span>\n {hasComparison && percentageLabel && <>{percentageLabel}</>}\n </span>\n {timeframeLabel && (\n <span className={styles.timeframeLabel}>vs {timeframeLabel.toLowerCase()}</span>\n )}\n </div>\n </div>\n );\n\n return (\n <>\n <GlobalCSSVariables variables={cssVariables()} defaultColorMode={null} />\n {tooltip ? (\n <ComparisonTooltip\n trigger={badgeContent}\n current={formatCurrency(current)}\n previous={formatCurrency(previous)}\n currentLabel={currentLabel}\n previousLabel={previousLabel}\n placement={placement}\n hideDelay={hideDelay}\n />\n ) : (\n badgeContent\n )}\n </>\n );\n};\n","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","import { GlobalCSSVariables } from '@grafana/design-tokens';\nimport { cssVariables, getStyles } from './GenericSkeleton.styles';\n\nexport interface GenericSkeletonProps {\n /**\n * Duration of animation in seconds\n */\n animationDuration?: number;\n}\n\nexport const GenericSkeleton = ({ animationDuration = 2 }: GenericSkeletonProps) => {\n const styles = getStyles(animationDuration);\n\n return (\n <>\n <GlobalCSSVariables variables={cssVariables()} defaultColorMode={null} />\n <div className={styles} />\n </>\n );\n};\n","/**\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","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","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","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","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","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 const valueString = value < 0.1 ? '< 0.1' : `${value.toFixed(1)}`;\n\n return (\n <>\n <span className={colorClassName}>{valueString}%</span> of total usage\n </>\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","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","export const STACKED_CHART_DEFAULT_HEIGHT = 24;\n","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","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","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","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 SkeletonStackedChartProps<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 /**\n * Is the StackedChart explicitly in a loading state?\n */\n isSkeleton?: boolean;\n\n /**\n * Array of StackedChartCategory to build the chart from\n */\n categories?: StackedChartCategories<T>;\n}\n\nexport type StackedChartProps<T extends string> = SkeletonStackedChartProps<T>;\n\nexport const StackedChart = <T extends string>({\n 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 const sortedCategoryIds = useMemo(() => {\n let categoryIds: T[] = [];\n\n for (const categoryId in categories) {\n categoryIds.push(categoryId);\n }\n\n switch (sortOrder) {\n case 'largest-first':\n return categoryIds.sort((a, b) => categories[b].value - categories[a].value);\n case 'smallest-first':\n return categoryIds.sort((a, b) => categories[a].value - categories[b].value);\n default:\n return categoryIds;\n }\n }, [categories, sortOrder]);\n\n /**\n * Determine what the total value is for all category valeus combined\n */\n const total = useMemo(\n () =>\n Math.round(\n Object.entries<StackedChartCategory>(categories).reduce(\n (sum, [, category]) => sum + category.value,\n 0,\n ),\n ),\n [categories],\n );\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 sortedCategoryIds.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: sortedCategoryIds.indexOf(initialHighlightedCategoryId),\n }\n : undefined;\n\n /**\n * This shouldn’t use Object.entries but rather a sorted list of category IDs,\n * derived by the sortOrder prop\n */\n\n const content = (\n <div className={styles.container}>\n {sortedCategoryIds.map((categoryId, categoryIndex) => {\n const category = categories[categoryId];\n const ref = useRef<HTMLDivElement>(null);\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 && highlightedCategoryId === categoryId && !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 if (categoryId === initialHighlightedCategoryId) highlightedSegmentRef = ref;\n if (!ref.current) {\n console.log(categoryId, 'ref is unset', ref);\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 </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":["BusEventBase","BusEventWithPayload","createContext","useState","useEffect","jsx","useContext","isLight","newColorMode","getStyles","getDesignTokens","css","flip","shift","offset","arrow","forwardRef","useRef","useId","useFloating","autoUpdate","useLayoutEffect","useInteractions","useDismiss","useHover","safePolygon","useFocus","useRole","useTransitionStyles","useCallback","jsxs","Fragment","cloneElement","FloatingPortal","FloatingArrow","Icon","cssVariables","cx","GlobalCSSVariables","keyframes","clsx","React","defaultContentFormatter","useMemo"],"mappings":"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","x_google_ignoreList":[0]}
1
+ {"version":3,"file":"index.cjs","sources":["../../node_modules/@grafana/runtime/dist/esm/services/appEvents.mjs","../../src/components/ColorModeProvider/ColorModeProvider.tsx","../../src/hooks/useColorModeChange.ts","../../src/components/ColorModeChangeHandler/ColorModeChangeHandler.tsx","../../src/components/ColorMode/ColorMode.tsx","../../src/utils/formatters.ts","../../src/utils/comparison.ts","../../src/components/Popover/Popover.styles.ts","../../src/components/Popover/Popover.tsx","../../src/components/ComparisonTooltip/ComparisonTooltip.styles.ts","../../src/components/ComparisonTooltip/ComparisonTooltip.tsx","../../src/components/ComparisonBadge/ComparisonBadge.styles.ts","../../src/components/ComparisonBadge/ComparisonBadge.tsx","../../src/components/GenericSkeleton/GenericSkeleton.styles.ts","../../src/components/GenericSkeleton/GenericSkeleton.tsx","../../src/components/StackedChart/shared.styles.ts","../../src/components/StackedChartSegment/StackedChartSegment.styles.ts","../../src/components/StackedChartSegment/StackedChartSegment.tsx","../../src/components/StackedChart/StackedChart.styles.ts","../../src/components/StackedChartSegmentTooltip/StackedChartSegmentTooltip.styles.ts","../../src/components/StackedChartSegmentTooltip/StackedChartSegmentTooltip.tsx","../../src/components/StackedChartSkeleton/StackedChartSkeleton.styles.ts","../../src/components/StackedChart/common.ts","../../src/components/StackedChartSkeleton/StackedChartSkeleton.tsx","../../src/components/StackedChartNoData/StackedChartNoData.styles.ts","../../src/components/StackedChartNoData/StackedChartNoData.tsx","../../src/components/StackedChart/StackedChart.tsx"],"sourcesContent":["import { BusEventBase, BusEventWithPayload } from '@grafana/data';\n\nclass RefreshEvent extends BusEventBase {\n}\nRefreshEvent.type = \"refresh\";\nclass ThemeChangedEvent extends BusEventWithPayload {\n}\nThemeChangedEvent.type = \"theme-changed\";\nclass TimeRangeUpdatedEvent extends BusEventWithPayload {\n}\nTimeRangeUpdatedEvent.type = \"time-range-updated\";\nclass CopyPanelEvent extends BusEventWithPayload {\n}\nCopyPanelEvent.type = \"copy-panel\";\nlet singletonInstance;\nfunction setAppEvents(instance) {\n singletonInstance = instance;\n}\nfunction getAppEvents() {\n return singletonInstance;\n}\n\nexport { CopyPanelEvent, RefreshEvent, ThemeChangedEvent, TimeRangeUpdatedEvent, getAppEvents, setAppEvents };\n//# sourceMappingURL=appEvents.mjs.map\n","import React, { createContext, useContext, useEffect, useState, ReactNode } from 'react';\nimport { ThemeColorMode } from '@grafana/design-tokens';\n\nimport '@grafana/design-tokens/dist/css/legacy/primitives.css';\nimport '@grafana/design-tokens/dist/css/legacy/colors.light.css';\nimport '@grafana/design-tokens/dist/css/legacy/colors.dark.css';\n\nexport interface ColorModeContextType {\n colorMode: ThemeColorMode;\n setColorMode: (colorMode: ThemeColorMode) => void;\n}\n\nexport interface ColorModeProviderProps {\n children: ReactNode;\n defaultColorMode?: ThemeColorMode;\n}\n\nconst ColorModeContext = createContext<ColorModeContextType | undefined>(undefined);\n\n/**\n * Provides a shared context for the currently-active theme color mode, and sets\n * the data-color-mode attribute on the document element whenever it changes.\n */\nexport const ColorModeProvider: React.FC<ColorModeProviderProps> = ({\n children,\n defaultColorMode = 'light',\n}) => {\n const [colorMode, setColorMode] = useState<ThemeColorMode>(defaultColorMode);\n\n useEffect(() => {\n console.log('ColorModeProvider', { colorMode });\n document.documentElement.setAttribute('data-color-mode', colorMode);\n }, [colorMode]);\n\n return (\n <ColorModeContext.Provider value={{ colorMode, setColorMode }}>\n {children}\n </ColorModeContext.Provider>\n );\n};\n\n/**\n * Use this to query the active color mode, or to set it, e.g. with an effect\n * hook within a component which explicitly changes the active color mode:\n *\n * useEffect(() => {\n * setColorMode(colorMode);\n * }, [colorMode]);\n *\n */\nexport const useColorMode = () => {\n const context = useContext(ColorModeContext);\n\n if (context === undefined) {\n throw new Error('useColorMode must be used within a ColorModeProvider');\n }\n\n return context;\n};\n","import type { EventBus, GrafanaTheme2 } from '@grafana/data';\nimport { ThemeChangedEvent } from '@grafana/runtime';\nimport type { ThemeColorMode } from '@grafana/design-tokens';\nimport { useColorMode } from '../components/ColorModeProvider/ColorModeProvider';\n\nconst getThemeColorMode = (isLight: boolean): ThemeColorMode => {\n return isLight ? 'light' : 'dark';\n};\n\nexport interface ColorModeChangeProps {\n getAppEvents: () => EventBus;\n useTheme2: () => GrafanaTheme2;\n}\n\n/**\n * This allows us to register an event listener for when the ThemeChangedEvent\n * is fired, and update the currently active color mode accordingly. It will\n * also determine the color mode on initial registration, and update the context\n * provider accordingly.\n */\nexport const useColorModeChange = ({\n getAppEvents,\n useTheme2,\n}: ColorModeChangeProps): ThemeColorMode => {\n const { setColorMode } = useColorMode();\n const appEvents = getAppEvents();\n\n appEvents.subscribe<ThemeChangedEvent>(ThemeChangedEvent, ({ payload }) => {\n const { isLight } = payload;\n const newColorMode = getThemeColorMode(isLight);\n\n console.log('ThemeChangedEvent', { colorMode: newColorMode });\n setColorMode(newColorMode);\n });\n\n /**\n * Longterm the current colorMode should ideally exist outside of useTheme2\n */\n const { isLight } = useTheme2();\n const newColorMode = getThemeColorMode(isLight);\n setColorMode(newColorMode);\n\n return newColorMode;\n};\n","import React from 'react';\nimport { useColorModeChange, ColorModeChangeProps } from '../../hooks';\n\nexport type ColorModeWrapper = React.FC<ColorModeChangeProps & { children: React.ReactNode }>;\n\nexport const ColorModeChangeHandler: ColorModeWrapper = ({ children, getAppEvents, useTheme2 }) => {\n useColorModeChange({ getAppEvents, useTheme2 });\n\n return children;\n};\n","import { ColorModeWrapper, ColorModeChangeHandler } from '../ColorModeChangeHandler';\nimport { ColorModeProvider } from '../ColorModeProvider';\n\nexport const ColorMode: ColorModeWrapper = ({ children, getAppEvents, useTheme2 }) => {\n return (\n <ColorModeProvider>\n <ColorModeChangeHandler getAppEvents={getAppEvents} useTheme2={useTheme2}>\n {children}\n </ColorModeChangeHandler>\n </ColorModeProvider>\n );\n};\n","/**\n * Number formatting options\n */\nexport interface FormatNumberOptions {\n /** Decimal places (default: 2) */\n decimals?: number;\n /** Threshold for compact formatting (default: 1000) */\n compactThreshold?: number;\n /** Never use compact formatting (for precise displays) */\n precise?: boolean;\n}\n\n/**\n * Format numbers with optional compact notation (k, m, b)\n * Components handle their own prefixes/suffixes ($ or %)\n *\n * @param value - The number to format (or 'loading' state)\n * @param options - Formatting options\n * @returns Formatted number string (no prefixes/suffixes)\n *\n * @example\n * formatNumber(1234) // \"1.2k\"\n * formatNumber(1234, { precise: true }) // \"1,234.00\"\n * formatNumber(1234, { decimals: 0 }) // \"1k\"\n * formatNumber(999) // \"999.00\"\n */\nexport const formatNumber = (\n value: number | string | 'loading',\n options: FormatNumberOptions = {},\n): string => {\n const { decimals = 2, compactThreshold = 1000, precise = false } = options;\n\n if (value === 'loading') {\n return '';\n }\n\n const num = typeof value === 'string' ? parseFloat(value) : value;\n if (isNaN(num)) {\n return 'N/A';\n }\n\n const abs = Math.abs(num);\n\n // Use compact notation if above threshold and not precise\n if (!precise && abs >= compactThreshold) {\n const sign = num < 0 ? '-' : '';\n const absNum = Math.abs(num);\n // Always use 1 decimal place for compact notation for consistency\n if (absNum >= 1000000000) {\n return `${sign}${(absNum / 1000000000).toFixed(1)}b`;\n } else if (absNum >= 1000000) {\n return `${sign}${(absNum / 1000000).toFixed(1)}m`;\n } else if (absNum >= 1000) {\n return `${sign}${(absNum / 1000).toFixed(1)}k`;\n }\n }\n\n // Standard formatting with specified decimal places\n return num.toLocaleString('en-US', {\n minimumFractionDigits: decimals,\n maximumFractionDigits: decimals,\n });\n};\n","/**\n * Shared utility functions for handling comparison calculations across components\n */\n\nimport { formatNumber } from './formatters';\n\nexport interface ComparisonResult {\n hasComparison: boolean;\n direction: 'up' | 'down' | 'neutral';\n percentageChange: number;\n percentageLabel: string;\n}\n\n/**\n * Calculate comparison metrics between a current value and a baseline value\n * @param current - The current value to compare\n * @param baseline - The baseline value to compare against (optional)\n * @returns ComparisonResult object with calculated metrics\n */\nexport const calculateComparison = (\n current: number | undefined | null,\n baseline: number | undefined | null,\n): ComparisonResult => {\n // If either value is missing, null, undefined, or baseline is 0, return neutral state\n if (\n current === undefined ||\n current === null ||\n baseline === undefined ||\n baseline === null ||\n baseline === 0\n ) {\n return {\n hasComparison: false,\n direction: 'neutral',\n percentageChange: 0,\n percentageLabel: '',\n };\n }\n\n // If values are equal, return neutral state\n if (current === baseline) {\n return {\n hasComparison: true,\n direction: 'neutral',\n percentageChange: 0,\n percentageLabel: '0%',\n };\n }\n\n // Calculate percentage change\n const percentageChange = Math.abs(((current - baseline) / baseline) * 100);\n const direction = current > baseline ? 'up' : 'down';\n\n return {\n hasComparison: true,\n direction,\n percentageChange,\n percentageLabel: `${formatNumber(percentageChange, {\n compactThreshold: 10000,\n decimals: 2,\n })}%`,\n };\n};\n","import { css } from '@emotion/css';\nimport { getDesignTokens } from '@grafana/design-tokens';\n\nexport const getStyles = () => {\n const {\n legacy,\n primitives: { spacing, typography },\n } = getDesignTokens({ valueType: 'css' });\n const backgroundColor = legacy.colors.background.secondary;\n\n return {\n arrow: css({\n fill: backgroundColor,\n }),\n shadow: css({\n filter: `drop-shadow(${legacy.boxShadows.z2})`,\n }),\n container: css({\n backgroundColor,\n borderRadius: `calc(${legacy.borderRadius.md} + ${spacing.xs})`,\n padding: spacing.xs,\n color: legacy.colors.text.primary,\n fontFamily: typography.fontFamily.ui,\n fontSize: typography.fontSize.ui.sm,\n }),\n };\n};\n","import {\n forwardRef,\n cloneElement,\n useCallback,\n useId,\n useRef,\n useState,\n useLayoutEffect,\n JSX,\n} from 'react';\nimport {\n arrow,\n autoUpdate,\n flip,\n FloatingArrow,\n offset,\n Placement,\n safePolygon,\n shift,\n useDismiss,\n useFloating,\n useFocus,\n useHover,\n useRole,\n useInteractions,\n useTransitionStyles,\n FloatingPortal,\n} from '@floating-ui/react';\nimport { getStyles } from './Popover.styles';\n\nexport interface PopoverProps {\n /**\n * Content used to trigger the Popover being displayed\n */\n trigger: JSX.Element;\n\n /**\n * Content to render within the Popover\n */\n children: JSX.Element;\n /**\n * Should the popover be open? Implicitly means the popover visibility is\n * controlled; if omitted, the popover target will control visibility\n */\n isOpen?: boolean;\n\n /**\n * Set to true if you want the tooltip to stay long enough so the user can\n * move mouse over content to select text or click a link\n */\n isInteractive?: boolean;\n\n /**\n * Placement of the Popover relative to the trigger content\n */\n placement?: Placement;\n\n /**\n * Transition duration for hide/show effects, in milliseconds\n */\n transitionDuration?: number;\n\n /**\n * Additional delay before hiding the popover after mouseout, in milliseconds\n */\n hideDelay?: number;\n\n /**\n * Virtual element to anchor the popover to instead of the trigger\n */\n virtualElement?: React.RefObject<Element>;\n}\n\nconst POPOVER_OFFSET = 8;\n\nconst getMiddleware = ({\n placement,\n arrowRef,\n}: {\n placement?: Placement;\n arrowRef: React.RefObject<null>;\n}) => {\n const BOUNDARY_ELEMENT_ID = 'floating-boundary';\n const _flip = flip({\n // Ensure we flip to the perpendicular axis if it doesn't fit\n // on narrow viewports.\n crossAxis: 'alignment',\n fallbackAxisSideDirection: 'end',\n boundary: document.getElementById(BOUNDARY_ELEMENT_ID) ?? undefined,\n });\n\n const middleware = placement?.includes('-') ? [_flip, shift()] : [shift(), _flip];\n\n // the order of middleware is important!\n // `arrow` should almost always be at the end\n // see https://floating-ui.com/docs/arrow#order\n return [\n offset(POPOVER_OFFSET),\n ...middleware,\n arrow({\n element: arrowRef,\n }),\n ];\n};\n\nexport const Popover = forwardRef<HTMLElement, PopoverProps>(\n (\n {\n trigger,\n children,\n isOpen: isOpenControlled,\n isInteractive = false,\n placement = 'bottom',\n transitionDuration = 200,\n hideDelay = 500,\n virtualElement,\n },\n forwardedRef,\n ) => {\n const arrowRef = useRef(null);\n const closeTimer = useRef<number | undefined>(undefined);\n const popoverId = useId();\n const [isOpenState, setOpen] = useState(isOpenControlled);\n const [isDelayedOpen, setDelayedOpen] = useState(isOpenControlled);\n const isOpen = isOpenControlled ?? isOpenState;\n const middleware = getMiddleware({ placement, arrowRef });\n const styles = getStyles();\n\n const { context, refs, floatingStyles } = useFloating({\n open: isOpen,\n placement,\n onOpenChange: (open) => {\n setOpen(open);\n clearTimeout(closeTimer.current);\n\n if (!open) {\n closeTimer.current = window.setTimeout(() => {\n setDelayedOpen(open);\n }, transitionDuration + hideDelay);\n } else {\n setDelayedOpen(open);\n }\n },\n middleware,\n whileElementsMounted: autoUpdate,\n });\n\n useLayoutEffect(() => {\n if (virtualElement && virtualElement.current !== null) {\n const domRect = virtualElement.current.getBoundingClientRect();\n\n refs.setPositionReference({\n getBoundingClientRect: () => {\n if (virtualElement.current !== null)\n return virtualElement.current.getBoundingClientRect();\n return domRect;\n },\n contextElement: virtualElement.current,\n });\n }\n }, [refs, virtualElement]);\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useDismiss(context),\n useHover(context, {\n handleClose: isInteractive ? safePolygon() : undefined,\n move: false,\n delay: {\n open: 0,\n close: hideDelay,\n },\n }),\n useFocus(context),\n useRole(context),\n ]);\n\n const { styles: transitionStyles } = useTransitionStyles(context, {\n duration: transitionDuration,\n initial: ({ side }) => ({\n opacity: 0,\n transform:\n side === 'top' || side === 'bottom'\n ? `translateY(${POPOVER_OFFSET}px)`\n : `translateX(${POPOVER_OFFSET}px)`,\n }),\n open: ({ side }) => ({\n opacity: 1,\n transform: side === 'top' || side === 'bottom' ? `translateY(0)` : `translateX(0)`,\n }),\n close: ({ side }) => ({\n opacity: 0,\n transform:\n side === 'top' || side === 'bottom'\n ? `translateY(${POPOVER_OFFSET}px)`\n : `translateX(${POPOVER_OFFSET}px)`,\n }),\n });\n\n const handleRef = useCallback(\n (ref: HTMLElement | null) => {\n refs.setReference(ref);\n\n if (typeof forwardedRef === 'function') {\n forwardedRef(ref);\n } else if (forwardedRef) {\n forwardedRef.current = ref;\n }\n },\n [forwardedRef, refs],\n );\n\n return (\n <>\n {/* element to trigger displaying the popover */}\n {cloneElement(trigger, {\n ref: handleRef,\n tabIndex: 0,\n 'aria-describedby': isOpen ? popoverId : undefined,\n ...getReferenceProps(),\n })}\n {/* content to render inside the popover when open */}\n {(isDelayedOpen || isOpen) && (\n <FloatingPortal root={document.getElementById('grafana-portal-container')}>\n <div ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>\n <div style={transitionStyles} className={styles.shadow}>\n <FloatingArrow className={styles.arrow} ref={arrowRef} context={context} />\n <div id={popoverId} role=\"tooltip\" className={styles.container}>\n {children}\n </div>\n </div>\n </div>\n </FloatingPortal>\n )}\n </>\n );\n },\n);\n\nPopover.displayName = 'Popover';\n","import { css } from '@emotion/css';\nimport { getDesignTokens } from '@grafana/design-tokens';\n\nexport const getStyles = () => {\n const {\n legacy,\n primitives: { spacing, typography },\n } = getDesignTokens({ valueType: 'css' });\n\n const background = legacy.colors.background.primary;\n\n return {\n wrapper: css({\n display: 'flex',\n flexDirection: 'column',\n gap: spacing.xs,\n }),\n heading: css({\n padding: `${spacing.sm} ${spacing.md}`,\n fontFamily: typography.fontFamily.ui,\n fontSize: typography.fontSize.ui.sm,\n fontWeight: typography.fontWeight.bold,\n color: legacy.colors.text.primary,\n background,\n borderRadius: legacy.borderRadius.md,\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,\n borderRadius: legacy.borderRadius.md,\n padding: `${spacing.sm} ${spacing.md}`,\n }),\n sectionTitle: css({\n fontFamily: typography.fontFamily.ui,\n fontSize: typography.fontSize.ui.sm,\n fontWeight: typography.fontWeight.medium,\n color: legacy.colors.text.primary,\n whiteSpace: 'nowrap',\n }),\n value: css({\n display: 'flex',\n alignItems: 'center',\n gap: spacing.xs,\n fontFamily: typography.fontFamily.monospace,\n fontSize: typography.fontSize.monospace.sm,\n color: legacy.colors.text.secondary,\n }),\n icon: css({\n flexShrink: 0,\n }),\n };\n};\n","import { Icon, IconName } from '@grafana/ui';\nimport { Popover, PopoverProps } from '../Popover';\nimport { getStyles } from './ComparisonTooltip.styles';\n\nexport interface ComparisonTooltipProps extends Omit<PopoverProps, 'children'> {\n current?: string;\n previous?: string;\n previousLabel?: string;\n currentLabel?: string;\n title?: string;\n currentIcon?: IconName;\n previousIcon?: IconName;\n hideDelay?: number;\n}\n\nexport const ComparisonTooltip = ({\n trigger,\n placement = 'top',\n current,\n previous,\n previousLabel,\n currentLabel = 'Current',\n title,\n currentIcon = 'eye',\n previousIcon = 'clock-nine',\n hideDelay,\n}: ComparisonTooltipProps) => {\n const styles = getStyles();\n\n return (\n <Popover trigger={trigger} placement={placement} hideDelay={hideDelay}>\n <div className={styles.wrapper}>\n {title && <div className={styles.heading}>{title}</div>}\n <div className={styles.content}>\n <div className={styles.section}>\n <div className={styles.sectionTitle}>{currentLabel}</div>\n <div className={styles.value}>\n <Icon name={currentIcon} size=\"sm\" className={styles.icon} />\n <span>{current || 'N/A'}</span>\n </div>\n </div>\n <div className={styles.section}>\n <div className={styles.sectionTitle}>{previousLabel}</div>\n <div className={styles.value}>\n <Icon name={previousIcon} size=\"sm\" className={styles.icon} />\n <span>{previous || 'N/A'}</span>\n </div>\n </div>\n </div>\n </div>\n </Popover>\n );\n};\n","import { css } 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 'comparison-badge-icon-background-color': legacy.colors.background.secondary,\n 'comparison-badge-icon-highlight-background-color': legacy.palette.whiteBaseOpacity10,\n },\n light: {\n 'comparison-badge-icon-background-color': legacy.colors.background.canvas,\n 'comparison-badge-icon-highlight-background-color': legacy.palette.blackBaseOpacity8,\n },\n };\n};\n\nconst BADGE_HEIGHT = 28;\nconst TREND_ICON_SIZE = 20;\n\nexport const getComparisonBadgeStyles = ({\n highlight,\n direction,\n tooltip,\n}: {\n highlight: boolean;\n direction: string;\n tooltip?: boolean;\n}) => {\n const {\n legacy,\n primitives: { spacing, typography },\n } = getDesignTokens({ valueType: 'css' });\n\n const labelColor = (() => {\n switch (true) {\n case highlight:\n case direction === 'up':\n return legacy.colors.text.maxContrast;\n default:\n return legacy.colors.primary.text;\n }\n })();\n\n return {\n container: css({\n boxSizing: 'border-box',\n background: 'transparent',\n borderRadius: legacy.borderRadius.pill,\n border: `1px solid\n ${highlight ? legacy.colors.border.strong : legacy.colors.border.weak}`,\n padding: `${spacing.xxs} ${spacing.sm} ${spacing.xxs} ${spacing.xxs}`,\n textAlign: 'left',\n display: 'inline-flex',\n flexDirection: 'row',\n justifyContent: 'center',\n alignItems: 'center',\n fontFamily: typography.fontFamily.ui,\n fontSize: typography.fontSize.ui.sm,\n height: `${BADGE_HEIGHT}px`,\n position: 'relative',\n transition: 'background 0.2s ease-in-out',\n ...(tooltip\n ? {\n cursor: 'pointer',\n '&:hover': {\n background: legacy.colors.background.secondary,\n },\n }\n : {}),\n }),\n clockIconWrapper: css({\n background: highlight\n ? 'var(--comparison-badge-icon-highlight-background-color)'\n : 'var(--comparison-badge-icon-background-color)',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: '22px',\n height: '22px',\n borderRadius: legacy.borderRadius.pill,\n color: legacy.colors.text.primary,\n }),\n trendLabelContainer: css({\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n gap: spacing.xxs,\n paddingLeft: spacing.xxs,\n fontWeight: typography.fontWeight.medium,\n whiteSpace: 'nowrap',\n }),\n trendLabel: css({\n display: 'flex',\n alignItems: 'center',\n color: labelColor,\n lineHeight: `${BADGE_HEIGHT}px`,\n fontWeight: typography.fontWeight.medium,\n fontVariantNumeric: 'tabular-nums',\n }),\n timeframeLabel: css({\n color: highlight ? legacy.colors.text.maxContrast : legacy.colors.text.primary,\n paddingLeft: spacing.xxs,\n lineHeight: `${BADGE_HEIGHT}px`,\n fontWeight: typography.fontWeight.normal,\n }),\n trendIconWrapper: css({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: '16px',\n height: '16px',\n }),\n trendIcon: css({\n width: `${TREND_ICON_SIZE}px`,\n height: `${TREND_ICON_SIZE}px`,\n }),\n dash: css({\n color: legacy.colors.text.secondary,\n }),\n };\n};\n","import { cx } from '@emotion/css';\nimport { GlobalCSSVariables } from '@grafana/design-tokens';\nimport { Icon, IconName } from '@grafana/ui';\nimport { calculateComparison } from '../../utils/comparison';\nimport { formatNumber } from '../../utils/formatters';\nimport { ComparisonTooltipProps, ComparisonTooltip } from '../ComparisonTooltip';\nimport { cssVariables, getComparisonBadgeStyles } from './ComparisonBadge.styles';\n\nconst formatCurrency = (value: number | undefined | null): string => {\n return !!value ? `$${formatNumber(value, { precise: true })}` : 'N/A';\n};\n\nexport interface ComparisonBadgeProps\n extends Pick<ComparisonTooltipProps, 'currentLabel' | 'previousLabel' | 'placement'> {\n current?: number | null;\n previous?: number | null;\n highlight?: boolean;\n timeframeLabel?: string;\n tooltip?: boolean;\n hideDelay?: number;\n}\n\nconst DIRECTION_ICON: Record<'up' | 'down' | 'neutral', IconName> = {\n up: 'arrow-up',\n down: 'arrow-down',\n neutral: 'minus',\n};\n\nexport const ComparisonBadge = ({\n current,\n previous,\n currentLabel,\n previousLabel,\n placement,\n highlight = false,\n timeframeLabel,\n tooltip = true,\n hideDelay,\n}: ComparisonBadgeProps) => {\n const { direction, hasComparison, percentageLabel } = calculateComparison(current, previous);\n const styles = getComparisonBadgeStyles({ highlight, direction, tooltip });\n\n const directionIconStyle = (() => {\n switch (true) {\n case direction == 'neutral':\n return styles.dash;\n default:\n return undefined;\n }\n })();\n\n const badgeContent = (\n <div className={styles.container}>\n <div className={styles.clockIconWrapper}>\n <Icon name=\"clock-nine\" />\n </div>\n <div className={styles.trendLabelContainer}>\n <span className={styles.trendLabel}>\n <span className={styles.trendIconWrapper}>\n <Icon\n name={DIRECTION_ICON[direction]}\n className={cx(styles.trendIcon, directionIconStyle)}\n />\n </span>\n {hasComparison && percentageLabel && <>{percentageLabel}</>}\n </span>\n {timeframeLabel && (\n <span className={styles.timeframeLabel}>vs {timeframeLabel.toLowerCase()}</span>\n )}\n </div>\n </div>\n );\n\n return (\n <>\n <GlobalCSSVariables variables={cssVariables()} defaultColorMode={null} />\n {tooltip ? (\n <ComparisonTooltip\n trigger={badgeContent}\n current={formatCurrency(current)}\n previous={formatCurrency(previous)}\n currentLabel={currentLabel}\n previousLabel={previousLabel}\n placement={placement}\n hideDelay={hideDelay}\n />\n ) : (\n badgeContent\n )}\n </>\n );\n};\n","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","import { GlobalCSSVariables } from '@grafana/design-tokens';\nimport { cssVariables, getStyles } from './GenericSkeleton.styles';\n\nexport interface GenericSkeletonProps {\n /**\n * Duration of animation in seconds\n */\n animationDuration?: number;\n}\n\nexport const GenericSkeleton = ({ animationDuration = 2 }: GenericSkeletonProps) => {\n const styles = getStyles(animationDuration);\n\n return (\n <>\n <GlobalCSSVariables variables={cssVariables()} defaultColorMode={null} />\n <div className={styles} />\n </>\n );\n};\n","/**\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","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","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","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","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","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 const valueString = value < 0.1 ? '< 0.1' : `${value.toFixed(1)}`;\n\n return (\n <>\n <span className={colorClassName}>{valueString}%</span> of total usage\n </>\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","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","export const STACKED_CHART_DEFAULT_HEIGHT = 24;\n","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","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","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","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\nconst DUMMY_CATEGORY: StackedChartCategory = {\n title: 'Category',\n value: 0.01,\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 SkeletonStackedChartProps<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 /**\n * Is the StackedChart explicitly in a loading state?\n */\n isSkeleton?: boolean;\n\n /**\n * Array of StackedChartCategory to build the chart from\n */\n categories?: StackedChartCategories<T>;\n}\n\nexport type StackedChartProps<T extends string> = SkeletonStackedChartProps<T>;\n\nexport const StackedChart = <T extends string>({\n 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 const shouldRenderSkeleton = isSkeleton || !categories;\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 const sortedCategoryIds = useMemo(() => {\n let categoryIds: T[] = [];\n\n for (const categoryId in categories) {\n categoryIds.push(categoryId);\n }\n\n // return early since we may not even have any categories at this point\n if (shouldRenderSkeleton) return categoryIds;\n\n switch (sortOrder) {\n case 'largest-first':\n return categoryIds.sort((a, b) => categories[b].value - categories[a].value);\n case 'smallest-first':\n return categoryIds.sort((a, b) => categories[a].value - categories[b].value);\n default:\n return categoryIds;\n }\n }, [shouldRenderSkeleton, categories, sortOrder]);\n\n /**\n * Determine what the total value is for all category valeus combined\n */\n const total = useMemo(() => {\n if (shouldRenderSkeleton) return 0;\n return Math.round(\n Object.entries<StackedChartCategory>(categories).reduce(\n (sum, [, category]) => sum + category.value,\n 0,\n ),\n );\n }, [shouldRenderSkeleton, 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 !shouldRenderSkeleton && initialHighlightedCategoryId\n ? {\n ...categories[initialHighlightedCategoryId],\n index: sortedCategoryIds.indexOf(initialHighlightedCategoryId),\n }\n : undefined;\n\n /**\n * This shouldn’t use Object.entries but rather a sorted list of category IDs,\n * derived by the sortOrder prop\n */\n\n const content = (\n <div className={styles.container}>\n {sortedCategoryIds.map((categoryId, categoryIndex) => {\n /**\n * Since all hooks need to be consistently run for every render, we\n * can’t conditionally render useRef within this loop, ergo some dummy\n * category data is returned here for the scenario when rendering a\n * skeleton\n */\n const category = shouldRenderSkeleton ? DUMMY_CATEGORY : categories[categoryId];\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 && highlightedCategoryId === categoryId && !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 </div>\n );\n\n /**\n * If we should only render a skeleton, return early with that component\n */\n if (shouldRenderSkeleton) return <StackedChartSkeleton height={height} />;\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 sortedCategoryIds.indexOf(initialHighlightedCategoryId) === -1\n )\n return (\n <StackedChartNoData height={height} period={period} formatMessage={formatNoDataMessage} />\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":["BusEventBase","BusEventWithPayload","createContext","useState","useEffect","jsx","useContext","isLight","newColorMode","getStyles","getDesignTokens","css","flip","shift","offset","arrow","forwardRef","useRef","useId","useFloating","autoUpdate","useLayoutEffect","useInteractions","useDismiss","useHover","safePolygon","useFocus","useRole","useTransitionStyles","useCallback","jsxs","Fragment","cloneElement","FloatingPortal","FloatingArrow","Icon","cssVariables","cx","GlobalCSSVariables","keyframes","clsx","React","defaultContentFormatter","useMemo"],"mappings":"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","x_google_ignoreList":[0]}
@@ -7,6 +7,10 @@ import { StackedChartSkeleton } from '../StackedChartSkeleton/StackedChartSkelet
7
7
  import { StackedChartNoData } from '../StackedChartNoData/StackedChartNoData.js';
8
8
  import { STACKED_CHART_DEFAULT_HEIGHT } from './common.js';
9
9
 
10
+ const DUMMY_CATEGORY = {
11
+ title: "Category",
12
+ value: 0.01
13
+ };
10
14
  const StackedChart = ({
11
15
  categories,
12
16
  highlightedCategoryId: initialHighlightedCategoryId,
@@ -19,7 +23,7 @@ const StackedChart = ({
19
23
  period = "current",
20
24
  formatNoDataMessage
21
25
  }) => {
22
- if (isSkeleton || !categories) return /* @__PURE__ */ jsx(StackedChartSkeleton, { height });
26
+ const shouldRenderSkeleton = isSkeleton || !categories;
23
27
  let highlightedSegmentRef = useRef(null);
24
28
  const [highlightedCategoryId, setHighlightedCategoryId] = useState(
25
29
  /**
@@ -38,6 +42,7 @@ const StackedChart = ({
38
42
  for (const categoryId in categories) {
39
43
  categoryIds.push(categoryId);
40
44
  }
45
+ if (shouldRenderSkeleton) return categoryIds;
41
46
  switch (sortOrder) {
42
47
  case "largest-first":
43
48
  return categoryIds.sort((a, b) => categories[b].value - categories[a].value);
@@ -46,16 +51,16 @@ const StackedChart = ({
46
51
  default:
47
52
  return categoryIds;
48
53
  }
49
- }, [categories, sortOrder]);
50
- const total = useMemo(
51
- () => Math.round(
54
+ }, [shouldRenderSkeleton, categories, sortOrder]);
55
+ const total = useMemo(() => {
56
+ if (shouldRenderSkeleton) return 0;
57
+ return Math.round(
52
58
  Object.entries(categories).reduce(
53
59
  (sum, [, category]) => sum + category.value,
54
60
  0
55
61
  )
56
- ),
57
- [categories]
58
- );
62
+ );
63
+ }, [shouldRenderSkeleton, categories]);
59
64
  const styles = getStyles({ height });
60
65
  const onMouseOver = ({ ref, categoryId }) => () => {
61
66
  clearTimeout(timer.current);
@@ -74,15 +79,14 @@ const StackedChart = ({
74
79
  }, 50);
75
80
  if (onSegmentMouseOut) onSegmentMouseOut({ ref, categoryId });
76
81
  };
77
- if (initialHighlightedCategoryId && sortedCategoryIds.indexOf(initialHighlightedCategoryId) === -1)
78
- return /* @__PURE__ */ jsx(StackedChartNoData, { height, period, formatMessage: formatNoDataMessage });
79
- const highlightedCategory = initialHighlightedCategoryId ? {
82
+ const highlightedCategory = !shouldRenderSkeleton && initialHighlightedCategoryId ? {
80
83
  ...categories[initialHighlightedCategoryId],
81
84
  index: sortedCategoryIds.indexOf(initialHighlightedCategoryId)
82
85
  } : void 0;
83
86
  const content = /* @__PURE__ */ jsx("div", { className: styles.container, children: sortedCategoryIds.map((categoryId, categoryIndex) => {
84
- const category = categories[categoryId];
87
+ const category = shouldRenderSkeleton ? DUMMY_CATEGORY : categories[categoryId];
85
88
  const ref = useRef(null);
89
+ if (categoryId === initialHighlightedCategoryId) highlightedSegmentRef = ref;
86
90
  const segmentState = (() => {
87
91
  switch (true) {
88
92
  /**
@@ -136,10 +140,6 @@ const StackedChart = ({
136
140
  },
137
141
  categoryId
138
142
  );
139
- if (categoryId === initialHighlightedCategoryId) highlightedSegmentRef = ref;
140
- if (!ref.current) {
141
- console.log(categoryId, "ref is unset", ref);
142
- }
143
143
  return initialHighlightedCategoryId ? segment : /* @__PURE__ */ jsx(
144
144
  StackedChartSegmentTooltip,
145
145
  {
@@ -152,6 +152,9 @@ const StackedChart = ({
152
152
  categoryId
153
153
  );
154
154
  }) });
155
+ if (shouldRenderSkeleton) return /* @__PURE__ */ jsx(StackedChartSkeleton, { height });
156
+ if (initialHighlightedCategoryId && sortedCategoryIds.indexOf(initialHighlightedCategoryId) === -1)
157
+ return /* @__PURE__ */ jsx(StackedChartNoData, { height, period, formatMessage: formatNoDataMessage });
155
158
  return initialHighlightedCategoryId && highlightedCategory ? /* @__PURE__ */ jsx(
156
159
  StackedChartSegmentTooltip,
157
160
  {
@@ -1 +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';\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 SkeletonStackedChartProps<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 /**\n * Is the StackedChart explicitly in a loading state?\n */\n isSkeleton?: boolean;\n\n /**\n * Array of StackedChartCategory to build the chart from\n */\n categories?: StackedChartCategories<T>;\n}\n\nexport type StackedChartProps<T extends string> = SkeletonStackedChartProps<T>;\n\nexport const StackedChart = <T extends string>({\n 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 const sortedCategoryIds = useMemo(() => {\n let categoryIds: T[] = [];\n\n for (const categoryId in categories) {\n categoryIds.push(categoryId);\n }\n\n switch (sortOrder) {\n case 'largest-first':\n return categoryIds.sort((a, b) => categories[b].value - categories[a].value);\n case 'smallest-first':\n return categoryIds.sort((a, b) => categories[a].value - categories[b].value);\n default:\n return categoryIds;\n }\n }, [categories, sortOrder]);\n\n /**\n * Determine what the total value is for all category valeus combined\n */\n const total = useMemo(\n () =>\n Math.round(\n Object.entries<StackedChartCategory>(categories).reduce(\n (sum, [, category]) => sum + category.value,\n 0,\n ),\n ),\n [categories],\n );\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 sortedCategoryIds.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: sortedCategoryIds.indexOf(initialHighlightedCategoryId),\n }\n : undefined;\n\n /**\n * This shouldn’t use Object.entries but rather a sorted list of category IDs,\n * derived by the sortOrder prop\n */\n\n const content = (\n <div className={styles.container}>\n {sortedCategoryIds.map((categoryId, categoryIndex) => {\n const category = categories[categoryId];\n const ref = useRef<HTMLDivElement>(null);\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 && highlightedCategoryId === categoryId && !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 if (categoryId === initialHighlightedCategoryId) highlightedSegmentRef = ref;\n if (!ref.current) {\n console.log(categoryId, 'ref is unset', ref);\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 </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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"}
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';\nimport { StackedChartNoData, StackedChartNoDataProps } from '../StackedChartNoData';\nimport { STACKED_CHART_DEFAULT_HEIGHT } from './common';\n\nexport interface StackedChartCategory {\n title: string;\n value: number;\n}\n\nconst DUMMY_CATEGORY: StackedChartCategory = {\n title: 'Category',\n value: 0.01,\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 SkeletonStackedChartProps<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 /**\n * Is the StackedChart explicitly in a loading state?\n */\n isSkeleton?: boolean;\n\n /**\n * Array of StackedChartCategory to build the chart from\n */\n categories?: StackedChartCategories<T>;\n}\n\nexport type StackedChartProps<T extends string> = SkeletonStackedChartProps<T>;\n\nexport const StackedChart = <T extends string>({\n 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 const shouldRenderSkeleton = isSkeleton || !categories;\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 const sortedCategoryIds = useMemo(() => {\n let categoryIds: T[] = [];\n\n for (const categoryId in categories) {\n categoryIds.push(categoryId);\n }\n\n // return early since we may not even have any categories at this point\n if (shouldRenderSkeleton) return categoryIds;\n\n switch (sortOrder) {\n case 'largest-first':\n return categoryIds.sort((a, b) => categories[b].value - categories[a].value);\n case 'smallest-first':\n return categoryIds.sort((a, b) => categories[a].value - categories[b].value);\n default:\n return categoryIds;\n }\n }, [shouldRenderSkeleton, categories, sortOrder]);\n\n /**\n * Determine what the total value is for all category valeus combined\n */\n const total = useMemo(() => {\n if (shouldRenderSkeleton) return 0;\n return Math.round(\n Object.entries<StackedChartCategory>(categories).reduce(\n (sum, [, category]) => sum + category.value,\n 0,\n ),\n );\n }, [shouldRenderSkeleton, 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 !shouldRenderSkeleton && initialHighlightedCategoryId\n ? {\n ...categories[initialHighlightedCategoryId],\n index: sortedCategoryIds.indexOf(initialHighlightedCategoryId),\n }\n : undefined;\n\n /**\n * This shouldn’t use Object.entries but rather a sorted list of category IDs,\n * derived by the sortOrder prop\n */\n\n const content = (\n <div className={styles.container}>\n {sortedCategoryIds.map((categoryId, categoryIndex) => {\n /**\n * Since all hooks need to be consistently run for every render, we\n * can’t conditionally render useRef within this loop, ergo some dummy\n * category data is returned here for the scenario when rendering a\n * skeleton\n */\n const category = shouldRenderSkeleton ? DUMMY_CATEGORY : categories[categoryId];\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 && highlightedCategoryId === categoryId && !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 </div>\n );\n\n /**\n * If we should only render a skeleton, return early with that component\n */\n if (shouldRenderSkeleton) return <StackedChartSkeleton height={height} />;\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 sortedCategoryIds.indexOf(initialHighlightedCategoryId) === -1\n )\n return (\n <StackedChartNoData height={height} period={period} formatMessage={formatNoDataMessage} />\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/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "author": "Grafana Labs",
3
3
  "name": "@grafana/components",
4
4
  "license": "Apache-2.0",
5
- "version": "0.0.23",
5
+ "version": "0.0.25",
6
6
  "description": "Product Design Engineering Components for Grafana",
7
7
  "repository": {
8
8
  "type": "git",