grafana-react 0.0.0 → 0.0.2

package/build/components/index.js

@@ -0,0 +1,54 @@
+/**
+ * Component exports
+ *
+ * All components and their prop types are exported from here.
+ */
+// Base utilities
+export { COMPONENT_TYPE, getComponentType, createComponent } from './base.js';
+// Structure components
+export { Dashboard } from './dashboard/dashboard.js';
+export { Row } from './row/row.js';
+export { Variable } from './variable/variable.js';
+export { Annotation } from './annotation/annotation.js';
+export { Link } from './link/link.js';
+// Query components
+export { Query } from './query/query.js';
+export { Override } from './override/override.js';
+// Generic plugin panel
+export { PluginPanel, } from './plugin-panel/plugin-panel.js';
+// Core panels
+export { Stat } from './panels/core/stat/stat.js';
+export { Timeseries, } from './panels/core/timeseries/timeseries.js';
+export { Table } from './panels/core/table/table.js';
+export { BarGauge, } from './panels/core/bar-gauge/bar-gauge.js';
+export { Heatmap } from './panels/core/heatmap/heatmap.js';
+export { Gauge } from './panels/core/gauge/gauge.js';
+export { Text } from './panels/core/text/text.js';
+// Chart panels
+export { BarChart, } from './panels/core/bar-chart/bar-chart.js';
+export { PieChart, } from './panels/core/pie-chart/pie-chart.js';
+export { Histogram, } from './panels/core/histogram/histogram.js';
+export { StateTimeline, } from './panels/core/state-timeline/state-timeline.js';
+export { StatusHistory, } from './panels/core/status-history/status-history.js';
+export { Candlestick, } from './panels/core/candlestick/candlestick.js';
+export { Trend } from './panels/core/trend/trend.js';
+export { XYChart } from './panels/core/xy-chart/xy-chart.js';
+// Data display panels
+export { Logs } from './panels/core/logs/logs.js';
+export { Datagrid, } from './panels/core/datagrid/datagrid.js';
+// Specialized panels
+export { NodeGraph, } from './panels/core/node-graph/node-graph.js';
+export { Traces } from './panels/core/traces/traces.js';
+export { FlameGraph, } from './panels/core/flame-graph/flame-graph.js';
+export { Canvas } from './panels/core/canvas/canvas.js';
+export { Geomap } from './panels/core/geomap/geomap.js';
+// Widget panels
+export { DashboardList, } from './panels/core/dashboard-list/dashboard-list.js';
+export { AlertList, } from './panels/core/alert-list/alert-list.js';
+export { AnnotationsList, } from './panels/core/annotations-list/annotations-list.js';
+export { News } from './panels/core/news/news.js';
+// Plugin panels
+export { BusinessVariablePanel, } from './panels/plugins/business-variable-panel/business-variable-panel.js';
+// Re-export React Fragment for convenience
+import { Fragment } from 'react';
+export { Fragment };

package/build/components/link/link.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Link - Dashboard navigation link
+ *
+ * Links appear in the dashboard header for navigation.
+ *
+ * @example
+ * <Link title="Docs" url="https://..." icon="external" />
+ */
+export interface LinkProps {
+    /** Link title */
+    title: string;
+    /** Link URL */
+    url: string;
+    /** Icon type */
+    icon?: 'dashboard' | 'external' | 'doc';
+    /** Tooltip text */
+    tooltip?: string;
+    /** Preserve current time range */
+    keepTime?: boolean;
+    /** Include dashboard variables */
+    includeVars?: boolean;
+    /** Open in new tab */
+    newTab?: boolean;
+}
+export declare const Link: import("react").FC<LinkProps>;

package/build/components/link/link.js

@@ -0,0 +1,10 @@
+/**
+ * Link - Dashboard navigation link
+ *
+ * Links appear in the dashboard header for navigation.
+ *
+ * @example
+ * <Link title="Docs" url="https://..." icon="external" />
+ */
+import { createComponent } from '../base.js';
+export const Link = createComponent('link');

package/build/components/override/override.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Override - Field override for customizing specific series
+ *
+ * @example
+ * <Timeseries title="Metrics">
+ *   <Query>...</Query>
+ *   <Override match={{ field: 'error' }} properties={{ color: 'red' }} />
+ * </Timeseries>
+ */
+import type { ReactNode } from 'react';
+export interface OverrideProps {
+    /** Field matcher */
+    match: {
+        field?: string;
+        regex?: string;
+        refId?: string;
+    };
+    /** Properties to override */
+    properties: Record<string, unknown>;
+    children?: ReactNode;
+}
+export declare const Override: import("react").FC<OverrideProps>;

package/build/components/override/override.js

@@ -0,0 +1,11 @@
+/**
+ * Override - Field override for customizing specific series
+ *
+ * @example
+ * <Timeseries title="Metrics">
+ *   <Query>...</Query>
+ *   <Override match={{ field: 'error' }} properties={{ color: 'red' }} />
+ * </Timeseries>
+ */
+import { createComponent } from '../base.js';
+export const Override = createComponent('override');

package/build/components/panels/core/alert-list/alert-list.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Alert list panel - displays alert rules and states
+ *
+ * Use for showing current alert status.
+ *
+ * @example
+ * <AlertList
+ *   title="Active Alerts"
+ *   viewMode="list"
+ *   stateFilter={['alerting', 'pending']}
+ *   sortOrder="importance"
+ * />
+ */
+import type { BasePanelProps } from '../../../../types/panel-base.js';
+export interface AlertListProps extends BasePanelProps {
+    /** View mode */
+    viewMode?: 'list' | 'stat';
+    /** Group by */
+    groupBy?: string[];
+    /** Max items */
+    maxItems?: number;
+    /** Sort order */
+    sortOrder?: 'alpha' | 'importance' | 'time';
+    /** State filter */
+    stateFilter?: ('alerting' | 'pending' | 'nodata' | 'normal' | 'error')[];
+    /** Alert name filter */
+    alertNameFilter?: string;
+    /** Dashboard filter - only show alerts from current dashboard */
+    dashboardFilter?: boolean;
+    /** Folder filter */
+    folderId?: number;
+}
+export declare const AlertList: import("react").FC<AlertListProps>;

package/build/components/panels/core/alert-list/alert-list.js

@@ -0,0 +1,15 @@
+/**
+ * Alert list panel - displays alert rules and states
+ *
+ * Use for showing current alert status.
+ *
+ * @example
+ * <AlertList
+ *   title="Active Alerts"
+ *   viewMode="list"
+ *   stateFilter={['alerting', 'pending']}
+ *   sortOrder="importance"
+ * />
+ */
+import { createComponent } from '../../../base.js';
+export const AlertList = createComponent('alertlist');

package/build/components/panels/core/annotations-list/annotations-list.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Annotations list panel - displays annotations
+ *
+ * Use for showing dashboard annotations.
+ *
+ * @example
+ * <AnnotationsList
+ *   title="Recent Annotations"
+ *   onlyFromThisDashboard
+ *   showUser
+ *   showTime
+ * />
+ */
+import type { BasePanelProps } from '../../../../types/panel-base.js';
+export interface AnnotationsListProps extends BasePanelProps {
+    /** Query filter: all dashboards or this dashboard only */
+    onlyFromThisDashboard?: boolean;
+    /** Time range filter: use dashboard time range or none */
+    onlyInTimeRange?: boolean;
+    /** Tags to filter by */
+    tags?: string[];
+    /** Max items */
+    limit?: number;
+    /** Show user who created annotation */
+    showUser?: boolean;
+    /** Show time of annotation */
+    showTime?: boolean;
+    /** Show tags on annotation */
+    showTags?: boolean;
+}
+export declare const AnnotationsList: import("react").FC<AnnotationsListProps>;

package/build/components/panels/core/annotations-list/annotations-list.js

@@ -0,0 +1,15 @@
+/**
+ * Annotations list panel - displays annotations
+ *
+ * Use for showing dashboard annotations.
+ *
+ * @example
+ * <AnnotationsList
+ *   title="Recent Annotations"
+ *   onlyFromThisDashboard
+ *   showUser
+ *   showTime
+ * />
+ */
+import { createComponent } from '../../../base.js';
+export const AnnotationsList = createComponent('annolist');

package/build/components/panels/core/bar-chart/bar-chart.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Bar chart panel - categorical bar charts
+ *
+ * Use for comparing discrete categories.
+ *
+ * @example
+ * <BarChart
+ *   title="Requests by Endpoint"
+ *   orientation="horizontal"
+ *   stack="normal"
+ * >
+ *   sum by (endpoint) (http_requests_total)
+ * </BarChart>
+ */
+import type { BasePanelProps, OverrideConfig } from '../../../../types/panel-base.js';
+import type { Unit, ThresholdSpec, LegendConfig, LegendPlacement, ColorMode } from '../../../../types/display.js';
+export interface BarChartProps extends BasePanelProps {
+    /** Display unit */
+    unit?: Unit;
+    /** Decimal places */
+    decimals?: number;
+    /** Threshold configuration */
+    thresholds?: ThresholdSpec;
+    /** X Axis field */
+    xField?: string;
+    /** Orientation */
+    orientation?: 'auto' | 'horizontal' | 'vertical';
+    /** Stacking mode */
+    stack?: 'off' | 'normal' | 'percent';
+    /** Show values on bars */
+    showValue?: 'auto' | 'always' | 'never';
+    /** Bar width percentage (0-1) */
+    barWidth?: number;
+    /** Group width percentage (0-1) */
+    groupWidth?: number;
+    /** Fill opacity (0-100) */
+    fill?: number;
+    /** Gradient mode for bars */
+    gradientMode?: 'none' | 'opacity' | 'hue' | 'scheme';
+    /** Legend configuration */
+    legend?: LegendConfig | LegendPlacement;
+    /** Color mode */
+    colorMode?: ColorMode;
+    /** Field overrides */
+    overrides?: OverrideConfig[];
+}
+export declare const BarChart: import("react").FC<BarChartProps>;

package/build/components/panels/core/bar-chart/bar-chart.js

@@ -0,0 +1,16 @@
+/**
+ * Bar chart panel - categorical bar charts
+ *
+ * Use for comparing discrete categories.
+ *
+ * @example
+ * <BarChart
+ *   title="Requests by Endpoint"
+ *   orientation="horizontal"
+ *   stack="normal"
+ * >
+ *   sum by (endpoint) (http_requests_total)
+ * </BarChart>
+ */
+import { createComponent } from '../../../base.js';
+export const BarChart = createComponent('barchart');

package/build/components/panels/core/bar-gauge/bar-gauge.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Bar gauge panel - horizontal/vertical progress bars
+ *
+ * Use for showing progress towards a goal or threshold.
+ *
+ * @example
+ * <BarGauge
+ *   title="Memory Usage"
+ *   unit="percent"
+ *   min={0}
+ *   max={100}
+ *   thresholds={{ 70: 'yellow', 90: 'red' }}
+ * >
+ *   avg(memory_usage_percent)
+ * </BarGauge>
+ *
+ * @example
+ * // LCD-style display with name placement
+ * <BarGauge
+ *   title="Disk Usage"
+ *   displayMode="lcd"
+ *   orientation="horizontal"
+ *   namePlacement="left"
+ *   showUnfilled
+ * >
+ *   disk_used_percent
+ * </BarGauge>
+ */
+import type { BasePanelProps, OverrideConfig, Transformation } from '../../../../types/panel-base.js';
+import type { Unit, ThresholdSpec } from '../../../../types/display.js';
+import type { VizOrientation, BarGaugeSizing, BarGaugeDisplayMode, BarGaugeValueMode, BarGaugeNamePlacement, ReduceDataOptions, TextFormattingOptions } from '../../../../types/common/index.js';
+export interface BarGaugeProps extends BasePanelProps {
+    /** Display unit */
+    unit?: Unit;
+    /** Decimal places */
+    decimals?: number;
+    /** Minimum value */
+    min?: number;
+    /** Maximum value */
+    max?: number;
+    /** Threshold configuration */
+    thresholds?: ThresholdSpec;
+    /** Bar orientation */
+    orientation?: VizOrientation | 'horizontal' | 'vertical';
+    /** Display mode (basic, gradient, or lcd) */
+    displayMode?: BarGaugeDisplayMode;
+    /** Field overrides for series-specific styling */
+    overrides?: OverrideConfig[];
+    /** Data transformations */
+    transformations?: Transformation[];
+    /** Show unfilled portion of bar */
+    showUnfilled?: boolean;
+    /** Minimum visualization width in pixels */
+    minVizWidth?: number;
+    /** Minimum visualization height in pixels */
+    minVizHeight?: number;
+    /** Sizing mode */
+    sizing?: BarGaugeSizing;
+    /** Value display mode */
+    valueMode?: BarGaugeValueMode;
+    /** Name/label placement */
+    namePlacement?: BarGaugeNamePlacement;
+    /** Data reduction options (advanced) */
+    reduceOptions?: ReduceDataOptions;
+    /** Text formatting options */
+    text?: TextFormattingOptions;
+}
+export declare const BarGauge: import("react").FC<BarGaugeProps>;

package/build/components/panels/core/bar-gauge/bar-gauge.js

@@ -0,0 +1,30 @@
+/**
+ * Bar gauge panel - horizontal/vertical progress bars
+ *
+ * Use for showing progress towards a goal or threshold.
+ *
+ * @example
+ * <BarGauge
+ *   title="Memory Usage"
+ *   unit="percent"
+ *   min={0}
+ *   max={100}
+ *   thresholds={{ 70: 'yellow', 90: 'red' }}
+ * >
+ *   avg(memory_usage_percent)
+ * </BarGauge>
+ *
+ * @example
+ * // LCD-style display with name placement
+ * <BarGauge
+ *   title="Disk Usage"
+ *   displayMode="lcd"
+ *   orientation="horizontal"
+ *   namePlacement="left"
+ *   showUnfilled
+ * >
+ *   disk_used_percent
+ * </BarGauge>
+ */
+import { createComponent } from '../../../base.js';
+export const BarGauge = createComponent('bargauge');

package/build/components/panels/core/candlestick/candlestick.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Candlestick panel - financial OHLC charts
+ *
+ * Use for displaying financial data with open/high/low/close values.
+ *
+ * @example
+ * <Candlestick
+ *   title="Stock Price"
+ *   mode="candles"
+ *   upColor="green"
+ *   downColor="red"
+ * >
+ *   stock_price
+ * </Candlestick>
+ */
+import type { BasePanelProps } from '../../../../types/panel-base.js';
+import type { LegendConfig, LegendPlacement } from '../../../../types/display.js';
+export interface CandlestickProps extends BasePanelProps {
+    /** Mode */
+    mode?: 'candles' | 'volume' | 'both';
+    /** Candle style */
+    candleStyle?: 'candles' | 'ohlcbars';
+    /** Color strategy */
+    colorStrategy?: 'open-close' | 'close-close';
+    /** Open field */
+    openField?: string;
+    /** High field */
+    highField?: string;
+    /** Low field */
+    lowField?: string;
+    /** Close field */
+    closeField?: string;
+    /** Volume field */
+    volumeField?: string;
+    /** Up color */
+    upColor?: string;
+    /** Down color */
+    downColor?: string;
+    /** Legend configuration */
+    legend?: LegendConfig | LegendPlacement;
+}
+export declare const Candlestick: import("react").FC<CandlestickProps>;

package/build/components/panels/core/candlestick/candlestick.js

@@ -0,0 +1,17 @@
+/**
+ * Candlestick panel - financial OHLC charts
+ *
+ * Use for displaying financial data with open/high/low/close values.
+ *
+ * @example
+ * <Candlestick
+ *   title="Stock Price"
+ *   mode="candles"
+ *   upColor="green"
+ *   downColor="red"
+ * >
+ *   stock_price
+ * </Candlestick>
+ */
+import { createComponent } from '../../../base.js';
+export const Candlestick = createComponent('candlestick');

package/build/components/panels/core/canvas/canvas.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Canvas panel - custom visual layouts
+ *
+ * Use for creating custom visualizations with draggable elements.
+ *
+ * @example
+ * <Canvas title="Custom Layout" inlineEditing panZoom>
+ *   data_query
+ * </Canvas>
+ */
+import type { BasePanelProps } from '../../../../types/panel-base.js';
+export interface CanvasProps extends BasePanelProps {
+    /** Inline editing enabled */
+    inlineEditing?: boolean;
+    /** Pan and zoom enabled */
+    panZoom?: boolean;
+}
+export declare const Canvas: import("react").FC<CanvasProps>;

package/build/components/panels/core/canvas/canvas.js

@@ -0,0 +1,12 @@
+/**
+ * Canvas panel - custom visual layouts
+ *
+ * Use for creating custom visualizations with draggable elements.
+ *
+ * @example
+ * <Canvas title="Custom Layout" inlineEditing panZoom>
+ *   data_query
+ * </Canvas>
+ */
+import { createComponent } from '../../../base.js';
+export const Canvas = createComponent('canvas');

package/build/components/panels/core/dashboard-list/dashboard-list.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Dashboard list panel - displays dashboard links
+ *
+ * Use for creating navigation to other dashboards.
+ *
+ * @example
+ * <DashboardList
+ *   title="Related Dashboards"
+ *   showSearch
+ *   tags={['production']}
+ *   includeTimeRange
+ * />
+ */
+import type { BasePanelProps } from '../../../../types/panel-base.js';
+export interface DashboardListProps extends BasePanelProps {
+    /** Show starred dashboards */
+    showStarred?: boolean;
+    /** Show recently viewed */
+    showRecentlyViewed?: boolean;
+    /** Show search results */
+    showSearch?: boolean;
+    /** Search query */
+    query?: string;
+    /** Max items to show */
+    maxItems?: number;
+    /** Tags to filter by */
+    tags?: string[];
+    /** Folder to filter by */
+    folderId?: number;
+    /** Include current time range in links */
+    includeTimeRange?: boolean;
+    /** Include template variables in links */
+    includeVars?: boolean;
+}
+export declare const DashboardList: import("react").FC<DashboardListProps>;

package/build/components/panels/core/dashboard-list/dashboard-list.js

@@ -0,0 +1,15 @@
+/**
+ * Dashboard list panel - displays dashboard links
+ *
+ * Use for creating navigation to other dashboards.
+ *
+ * @example
+ * <DashboardList
+ *   title="Related Dashboards"
+ *   showSearch
+ *   tags={['production']}
+ *   includeTimeRange
+ * />
+ */
+import { createComponent } from '../../../base.js';
+export const DashboardList = createComponent('dashlist');

package/build/components/panels/core/datagrid/datagrid.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Datagrid panel - editable data grid
+ *
+ * Use for displaying and editing tabular data.
+ *
+ * @example
+ * <Datagrid title="Editable Data" selectedSeries={0}>
+ *   data_query
+ * </Datagrid>
+ */
+import type { BasePanelProps } from '../../../../types/panel-base.js';
+export interface DatagridProps extends BasePanelProps {
+    /** Selected series index */
+    selectedSeries?: number;
+}
+export declare const Datagrid: import("react").FC<DatagridProps>;

package/build/components/panels/core/datagrid/datagrid.js

@@ -0,0 +1,12 @@
+/**
+ * Datagrid panel - editable data grid
+ *
+ * Use for displaying and editing tabular data.
+ *
+ * @example
+ * <Datagrid title="Editable Data" selectedSeries={0}>
+ *   data_query
+ * </Datagrid>
+ */
+import { createComponent } from '../../../base.js';
+export const Datagrid = createComponent('datagrid');

package/build/components/panels/core/flame-graph/flame-graph.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Flame graph panel - profiling visualization
+ *
+ * Use for displaying CPU/memory profiling data.
+ *
+ * @example
+ * <FlameGraph title="CPU Profile" displayMode="flamegraph">
+ *   profile_data
+ * </FlameGraph>
+ */
+import type { BasePanelProps } from '../../../../types/panel-base.js';
+export interface FlameGraphProps extends BasePanelProps {
+    /** Display mode */
+    displayMode?: 'flamegraph' | 'table' | 'both';
+}
+export declare const FlameGraph: import("react").FC<FlameGraphProps>;

package/build/components/panels/core/flame-graph/flame-graph.js

@@ -0,0 +1,12 @@
+/**
+ * Flame graph panel - profiling visualization
+ *
+ * Use for displaying CPU/memory profiling data.
+ *
+ * @example
+ * <FlameGraph title="CPU Profile" displayMode="flamegraph">
+ *   profile_data
+ * </FlameGraph>
+ */
+import { createComponent } from '../../../base.js';
+export const FlameGraph = createComponent('flamegraph');

package/build/components/panels/core/gauge/gauge.d.ts

@@ -0,0 +1,64 @@
+/**
+ * Gauge panel - circular gauge with thresholds
+ *
+ * Use for showing a single value against a range.
+ *
+ * @example
+ * <Gauge
+ *   title="CPU Load"
+ *   unit="percent"
+ *   min={0}
+ *   max={100}
+ *   thresholds={{ 70: 'yellow', 90: 'red' }}
+ * >
+ *   avg(system_load1)
+ * </Gauge>
+ *
+ * @example
+ * // With threshold labels and custom sizing
+ * <Gauge
+ *   title="Memory"
+ *   unit="percent"
+ *   showThresholdLabels
+ *   minVizWidth={100}
+ *   minVizHeight={100}
+ * >
+ *   avg(memory_usage_percent)
+ * </Gauge>
+ */
+import type { BasePanelProps, OverrideConfig, Transformation } from '../../../../types/panel-base.js';
+import type { Unit, ThresholdSpec } from '../../../../types/display.js';
+import type { VizOrientation, BarGaugeSizing, ReduceDataOptions, TextFormattingOptions } from '../../../../types/common/index.js';
+export interface GaugeProps extends BasePanelProps {
+    /** Display unit */
+    unit?: Unit;
+    /** Decimal places */
+    decimals?: number;
+    /** Minimum value */
+    min?: number;
+    /** Maximum value */
+    max?: number;
+    /** Threshold configuration */
+    thresholds?: ThresholdSpec;
+    /** Show threshold labels on gauge */
+    showThresholdLabels?: boolean;
+    /** Show threshold markers on gauge */
+    showThresholdMarkers?: boolean;
+    /** Field overrides for series-specific styling */
+    overrides?: OverrideConfig[];
+    /** Data transformations */
+    transformations?: Transformation[];
+    /** Minimum visualization width in pixels */
+    minVizWidth?: number;
+    /** Minimum visualization height in pixels */
+    minVizHeight?: number;
+    /** Sizing mode */
+    sizing?: BarGaugeSizing;
+    /** Visualization orientation */
+    orientation?: VizOrientation;
+    /** Data reduction options (advanced) */
+    reduceOptions?: ReduceDataOptions;
+    /** Text formatting options */
+    text?: TextFormattingOptions;
+}
+export declare const Gauge: import("react").FC<GaugeProps>;