@grafana/components 0.0.15 → 0.0.16

package/dist/esm/index.d.ts

@@ -1,5 +1,5 @@
 import * as React$1 from 'react';
-import React__default, { ReactNode, JSX } from 'react';
+import React__default, { ReactNode, JSX, MouseEventHandler as MouseEventHandler$1 } from 'react';
 import { EventBus, GrafanaTheme2 } from '@grafana/data';
 import { ThemeColorMode } from '@grafana/design-tokens';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -109,6 +109,145 @@ interface ComparisonBadgeProps extends Pick<ComparisonTooltipProps, 'currentLabe
 }
 declare const ComparisonBadge: ({ current, previous, currentLabel, previousLabel, placement, highlight, timeframeLabel, tooltip, hideDelay, }: ComparisonBadgeProps) => react_jsx_runtime.JSX.Element;
 
+interface GenericSkeletonProps {
+    /**
+     * Duration of animation in seconds
+     */
+    animationDuration?: number;
+}
+declare const GenericSkeleton: ({ animationDuration }: GenericSkeletonProps) => react_jsx_runtime.JSX.Element;
+
+interface StackedChartCategory {
+    title: string;
+    value: number;
+}
+type StackedChartCategories<T extends string> = Record<T, StackedChartCategory>;
+type StackedChartSortOrder = 'largest-first' | 'smallest-first' | 'natural';
+type MouseEventHandler = ({ categoryId, ref, }: {
+    categoryId: string;
+    ref: React.ForwardedRef<HTMLDivElement>;
+}) => void;
+interface CommonStackedChartProps<T extends string> {
+    /**
+     * How should category segments be sorted?
+     */
+    sortOrder?: StackedChartSortOrder;
+    /**
+     * Height to render the stacked chart, in pixels
+     */
+    height?: number;
+    /**
+     * initial category ID to highlight; if omitted then all segments will render
+     * in colour and highlight based on mouseover events.
+     */
+    highlightedCategoryId?: T;
+    /**
+     * Should the whole StackedChart be dimmed, i.e. with a highlighted category
+     * not in color, all other categories faded out?
+     */
+    isDimmed?: boolean;
+    /**
+     * Event handler for whenever a segment gets a mouseover event
+     */
+    onSegmentMouseOver?: MouseEventHandler;
+    /**
+     * Event handler for whenever a segment gets a mouseout event
+     */
+    onSegmentMouseOut?: MouseEventHandler;
+}
+interface SkeletonStackedChartProps<T extends string> extends CommonStackedChartProps<T> {
+    isSkeleton: true;
+    /**
+     * Array of StackedChartCategory to build the chart from
+     */
+    categories?: StackedChartCategories<T>;
+}
+interface LoadedStackedChartProps<T extends string> extends CommonStackedChartProps<T> {
+    isSkeleton?: false;
+    /**
+     * Array of StackedChartCategory to build the chart from
+     */
+    categories: StackedChartCategories<T>;
+}
+type StackedChartProps<T extends string> = SkeletonStackedChartProps<T> | LoadedStackedChartProps<T>;
+declare const StackedChart: <T extends string>({ categories: _categories, highlightedCategoryId: initialHighlightedCategoryId, isSkeleton, isDimmed, sortOrder, height, onSegmentMouseOver, onSegmentMouseOut, }: StackedChartProps<T>) => react_jsx_runtime.JSX.Element;
+
+/**
+ * A segment can be in one of four states:
+ *
+ * 1. Default — diagonal grey stripes, with a grey fill
+ * 2. Color — a bright coloured fill, with diagonal stripes. The actual hue is
+ *    determined by its position in the chart and the primary theme hue.
+ * 3. Active — the same as Color, only with a drop shadow, i.e. when hovered (to
+ *    also show a popover)
+ * 4. Dimmed — the same as Default, but faded out with reduced opacity
+ */
+type StackedChartSegmentState = 'default' | 'color' | 'active' | 'dimmed';
+type SegmentMouseEventHandler = ({ categoryId, ref, }: {
+    categoryId: string;
+    ref: React.ForwardedRef<HTMLDivElement>;
+}) => MouseEventHandler$1<HTMLDivElement>;
+interface StackedChartSegmentProps<T extends string> {
+    /**
+     * Title to associate with this segment, e.g. for a popover
+     */
+    title: string;
+    /**
+     * Unique ID for this segment
+     */
+    categoryId: T;
+    /**
+     * Value for the segment relative to the overall chart
+     */
+    value: number;
+    /**
+     * Value representing the overall scale of the chart; defaults to 100 (i.e.
+     * percentage)
+     */
+    total?: number;
+    /**
+     * Index of the segment within the chart, i.e. to determine its fill color
+     */
+    index: number;
+    /**
+     * Minimum value for this segment to display as, to avoid rendering very small
+     * segments for values below e.g. 1%. This will result in the total width of
+     * all segments exceeding 100%, but the browser layout engine will handle this
+     * for us (I think…??)
+     */
+    minValue?: number;
+    /**
+     * Visual state of the segment
+     */
+    state?: StackedChartSegmentState;
+    /**
+     * Event handler for whenever this segment gets a mouseover event
+     */
+    onMouseOver?: SegmentMouseEventHandler;
+    /**
+     * Event handler for whenever this segment gets a mouseout event
+     */
+    onMouseOut?: SegmentMouseEventHandler;
+}
+
+declare const StackedChartSegment: React__default.ForwardRefExoticComponent<StackedChartSegmentProps<string> & React__default.RefAttributes<HTMLDivElement>>;
+
+type ContentFormatter = (args: {
+    colorClassName: string;
+} & Required<Pick<StackedChartSegmentProps<string>, 'value' | 'total' | 'index'>>) => React.ReactElement;
+interface StackedChartSegmentTooltipProps<T extends string> extends Pick<StackedChartSegmentProps<T>, 'title' | 'value' | 'total' | 'index'>, Omit<PopoverProps, 'children'> {
+    formatContent?: ContentFormatter;
+}
+declare const StackedChartSegmentTooltip: <T extends string>({ trigger, placement, hideDelay, title, value, total, index, formatContent, virtualElement, }: StackedChartSegmentTooltipProps<T>) => react_jsx_runtime.JSX.Element;
+
+interface StackedChartSkeletonProps {
+    /**
+     * Height to render the stacked chart skeleton, in pixels
+     */
+    height?: number;
+}
+declare const StackedChartSkeleton: ({ height }: StackedChartSkeletonProps) => react_jsx_runtime.JSX.Element;
+
 /**
  * Shared utility functions for handling comparison calculations across components
  */
@@ -153,5 +292,5 @@ interface FormatNumberOptions {
  */
 declare const formatNumber: (value: number | string | "loading", options?: FormatNumberOptions) => string;
 
-export { ColorMode, ColorModeChangeHandler, ColorModeProvider, ComparisonBadge, ComparisonTooltip, Popover, calculateComparison, formatNumber, useColorMode, useColorModeChange };
-export type { ColorModeChangeProps, ColorModeContextType, ColorModeProviderProps, ColorModeWrapper, ComparisonResult, ComparisonTooltipProps, FormatNumberOptions, PopoverProps };
+export { ColorMode, ColorModeChangeHandler, ColorModeProvider, ComparisonBadge, ComparisonTooltip, GenericSkeleton, Popover, StackedChart, StackedChartSegment, StackedChartSegmentTooltip, StackedChartSkeleton, calculateComparison, formatNumber, useColorMode, useColorModeChange };
+export type { ColorModeChangeProps, ColorModeContextType, ColorModeProviderProps, ColorModeWrapper, CommonStackedChartProps, ComparisonResult, ComparisonTooltipProps, ContentFormatter, FormatNumberOptions, GenericSkeletonProps, LoadedStackedChartProps, PopoverProps, SkeletonStackedChartProps, StackedChartCategories, StackedChartCategory, StackedChartProps, StackedChartSegmentTooltipProps, StackedChartSkeletonProps, StackedChartSortOrder };

package/dist/esm/index.js

@@ -3,7 +3,12 @@ export { ColorModeChangeHandler } from './components/ColorModeChangeHandler/Colo
 export { ColorModeProvider, useColorMode } from './components/ColorModeProvider/ColorModeProvider.js';
 export { ComparisonBadge } from './components/ComparisonBadge/ComparisonBadge.js';
 export { ComparisonTooltip } from './components/ComparisonTooltip/ComparisonTooltip.js';
+export { GenericSkeleton } from './components/GenericSkeleton/GenericSkeleton.js';
 export { Popover } from './components/Popover/Popover.js';
+export { StackedChart } from './components/StackedChart/StackedChart.js';
+export { StackedChartSegment } from './components/StackedChartSegment/StackedChartSegment.js';
+export { StackedChartSegmentTooltip } from './components/StackedChartSegmentTooltip/StackedChartSegmentTooltip.js';
+export { StackedChartSkeleton } from './components/StackedChartSkeleton/StackedChartSkeleton.js';
 export { useColorModeChange } from './hooks/useColorModeChange.js';
 export { calculateComparison } from './utils/comparison.js';
 export { formatNumber } from './utils/formatters.js';

package/dist/esm/index.js.map

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

package/package.json

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