@cere/cere-design-system 0.0.21 → 0.0.23
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.
- package/dist/index.d.mts +172 -1
- package/dist/index.d.ts +172 -1
- package/dist/index.js +364 -59
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +363 -50
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -1811,6 +1811,177 @@ type PeriodSelectProps = {
|
|
|
1811
1811
|
};
|
|
1812
1812
|
declare const PeriodSelect: ({ value, onChange }: PeriodSelectProps) => react_jsx_runtime.JSX.Element;
|
|
1813
1813
|
|
|
1814
|
+
/**
|
|
1815
|
+
* Represents a single time range option in the dropdown.
|
|
1816
|
+
*/
|
|
1817
|
+
interface TimeRangeOption {
|
|
1818
|
+
/** Display label shown in the dropdown (e.g., "1 week") */
|
|
1819
|
+
label: string;
|
|
1820
|
+
/** Value identifier passed to the callback on selection */
|
|
1821
|
+
value: string;
|
|
1822
|
+
}
|
|
1823
|
+
interface TimeRangeSelectProps {
|
|
1824
|
+
/** Available time range options */
|
|
1825
|
+
options: TimeRangeOption[];
|
|
1826
|
+
/** Currently selected time range value */
|
|
1827
|
+
value?: string;
|
|
1828
|
+
/** Callback invoked when user selects a different time range */
|
|
1829
|
+
onChange?: (value: string) => void;
|
|
1830
|
+
}
|
|
1831
|
+
/**
|
|
1832
|
+
* Configurable time range dropdown selector.
|
|
1833
|
+
* Renders a compact select field with the provided time range options.
|
|
1834
|
+
*
|
|
1835
|
+
* @example
|
|
1836
|
+
* ```tsx
|
|
1837
|
+
* <TimeRangeSelect
|
|
1838
|
+
* options={[
|
|
1839
|
+
* { label: 'Last hour', value: 'hour' },
|
|
1840
|
+
* { label: '24 hours', value: 'day' },
|
|
1841
|
+
* { label: '1 week', value: 'week' },
|
|
1842
|
+
* ]}
|
|
1843
|
+
* value="week"
|
|
1844
|
+
* onChange={(value) => console.log(value)}
|
|
1845
|
+
* />
|
|
1846
|
+
* ```
|
|
1847
|
+
*/
|
|
1848
|
+
declare const TimeRangeSelect: ({ options, value, onChange }: TimeRangeSelectProps) => react_jsx_runtime.JSX.Element;
|
|
1849
|
+
|
|
1850
|
+
/**
|
|
1851
|
+
* Represents a single summary statistic item displayed below the graph.
|
|
1852
|
+
*/
|
|
1853
|
+
interface SummaryItem {
|
|
1854
|
+
/** Descriptive label (e.g., "Total Engagements") */
|
|
1855
|
+
label: string;
|
|
1856
|
+
/** Numeric or string value (e.g., "13.72" or 11372) */
|
|
1857
|
+
value: string | number;
|
|
1858
|
+
/** Optional unit suffix (e.g., "K", "GB", "%") */
|
|
1859
|
+
unit?: string;
|
|
1860
|
+
}
|
|
1861
|
+
interface SummaryStatsProps {
|
|
1862
|
+
/** Array of summary items to display */
|
|
1863
|
+
items: SummaryItem[];
|
|
1864
|
+
}
|
|
1865
|
+
/**
|
|
1866
|
+
* Renders a horizontal row of summary statistics below the graph.
|
|
1867
|
+
* Each item shows a label with its corresponding value and optional unit.
|
|
1868
|
+
*
|
|
1869
|
+
* Matches the Figma design layout with label in secondary text color
|
|
1870
|
+
* and value in bold heading typography.
|
|
1871
|
+
*
|
|
1872
|
+
* @example
|
|
1873
|
+
* ```tsx
|
|
1874
|
+
* <SummaryStats
|
|
1875
|
+
* items={[
|
|
1876
|
+
* { label: 'Total Engagements', value: 11372 },
|
|
1877
|
+
* { label: 'Total Consumed', value: '156.91', unit: 'GB' },
|
|
1878
|
+
* ]}
|
|
1879
|
+
* />
|
|
1880
|
+
* ```
|
|
1881
|
+
*/
|
|
1882
|
+
declare const SummaryStats: ({ items }: SummaryStatsProps) => react_jsx_runtime.JSX.Element | null;
|
|
1883
|
+
|
|
1884
|
+
/**
|
|
1885
|
+
* A single data point in a time series.
|
|
1886
|
+
* Use `null` for the value to represent missing/gap data — the line will break.
|
|
1887
|
+
*/
|
|
1888
|
+
interface DataPoint {
|
|
1889
|
+
/** Timestamp of the observation */
|
|
1890
|
+
timestamp: Date;
|
|
1891
|
+
/** Numeric value, or `null` to indicate a gap in the data */
|
|
1892
|
+
value: number | null;
|
|
1893
|
+
}
|
|
1894
|
+
/**
|
|
1895
|
+
* Represents one line on the graph (a named data series).
|
|
1896
|
+
*/
|
|
1897
|
+
interface DataSeries {
|
|
1898
|
+
/** Unique display name for this series (shown in legend) */
|
|
1899
|
+
name: string;
|
|
1900
|
+
/** CSS color string for the line and legend indicator */
|
|
1901
|
+
color: string;
|
|
1902
|
+
/** Ordered array of data points */
|
|
1903
|
+
data: DataPoint[];
|
|
1904
|
+
}
|
|
1905
|
+
interface TimeSeriesGraphProps {
|
|
1906
|
+
/** Optional title displayed at the top-left of the graph card */
|
|
1907
|
+
title?: string;
|
|
1908
|
+
/**
|
|
1909
|
+
* Array of data series to render. Each series becomes one line on the graph.
|
|
1910
|
+
* There is no hardcoded limit on the number of series.
|
|
1911
|
+
*/
|
|
1912
|
+
series: DataSeries[];
|
|
1913
|
+
/**
|
|
1914
|
+
* Configurable time range options for the dropdown selector.
|
|
1915
|
+
* When omitted, the time range dropdown is not rendered.
|
|
1916
|
+
*/
|
|
1917
|
+
timeRangeOptions?: TimeRangeOption[];
|
|
1918
|
+
/** Currently selected time range value (controlled) */
|
|
1919
|
+
selectedTimeRange?: string;
|
|
1920
|
+
/** Callback invoked when the user picks a different time range */
|
|
1921
|
+
onTimeRangeChange?: (value: string) => void;
|
|
1922
|
+
/**
|
|
1923
|
+
* Optional array of summary statistics displayed below the graph.
|
|
1924
|
+
* When omitted or empty, the summary section is hidden.
|
|
1925
|
+
*/
|
|
1926
|
+
summaryItems?: SummaryItem[];
|
|
1927
|
+
/**
|
|
1928
|
+
* Whether to show the summary statistics section.
|
|
1929
|
+
* Defaults to `true`. Set to `false` to explicitly hide, even when `summaryItems` are provided.
|
|
1930
|
+
*/
|
|
1931
|
+
showSummary?: boolean;
|
|
1932
|
+
/**
|
|
1933
|
+
* Optional header action element rendered to the right of the title
|
|
1934
|
+
* (e.g., a secondary dropdown or filter control).
|
|
1935
|
+
*/
|
|
1936
|
+
headerAction?: ReactNode;
|
|
1937
|
+
/**
|
|
1938
|
+
* When `true`, shows a loading overlay (spinner) over the graph area
|
|
1939
|
+
* while the header remains visible and interactive.
|
|
1940
|
+
*/
|
|
1941
|
+
loading?: boolean;
|
|
1942
|
+
/**
|
|
1943
|
+
* Override the x-axis date format string (date-fns format tokens).
|
|
1944
|
+
* When omitted, the format is auto-detected from the data's time span:
|
|
1945
|
+
* - <= 24 hours → `'HH:mm'`
|
|
1946
|
+
* - > 24 hours → `'do MMM'`
|
|
1947
|
+
*/
|
|
1948
|
+
xAxisFormat?: string;
|
|
1949
|
+
}
|
|
1950
|
+
/**
|
|
1951
|
+
* A reusable time series graph component that displays one or more data lines
|
|
1952
|
+
* over a shared time axis. Supports configurable time range selection,
|
|
1953
|
+
* optional summary statistics, interactive legend toggling, crosshair tooltips,
|
|
1954
|
+
* and a loading state.
|
|
1955
|
+
*
|
|
1956
|
+
* Built on `@mui/x-charts` LineChart and the Cere Design System theme.
|
|
1957
|
+
*
|
|
1958
|
+
* @example
|
|
1959
|
+
* ```tsx
|
|
1960
|
+
* <TimeSeriesGraph
|
|
1961
|
+
* title="Engagement over time"
|
|
1962
|
+
* series={[
|
|
1963
|
+
* { name: 'Engagements', color: '#6750A4', data: engagementData },
|
|
1964
|
+
* { name: 'Unique Streams', color: '#4caf50', data: streamData },
|
|
1965
|
+
* ]}
|
|
1966
|
+
* timeRangeOptions={[
|
|
1967
|
+
* { label: 'Last hour', value: 'hour' },
|
|
1968
|
+
* { label: '24 hours', value: 'day' },
|
|
1969
|
+
* { label: '1 week', value: 'week' },
|
|
1970
|
+
* { label: '1 month', value: 'month' },
|
|
1971
|
+
* ]}
|
|
1972
|
+
* selectedTimeRange="week"
|
|
1973
|
+
* onTimeRangeChange={(range) => fetchData(range)}
|
|
1974
|
+
* summaryItems={[
|
|
1975
|
+
* { label: 'Total Engagements', value: 11372 },
|
|
1976
|
+
* { label: 'Daily Engagements', value: 156 },
|
|
1977
|
+
* ]}
|
|
1978
|
+
* />
|
|
1979
|
+
* ```
|
|
1980
|
+
*
|
|
1981
|
+
* Figma reference: [ROB Design - Node 162:1172](https://www.figma.com/design/xky11VbkkFcgZLwZE8BdCN/ROB?node-id=162-1172&m=dev)
|
|
1982
|
+
*/
|
|
1983
|
+
declare const TimeSeriesGraph: ({ title, series, timeRangeOptions, selectedTimeRange, onTimeRangeChange, summaryItems, showSummary, headerAction, loading, xAxisFormat, }: TimeSeriesGraphProps) => react_jsx_runtime.JSX.Element;
|
|
1984
|
+
|
|
1814
1985
|
interface FlowEditorProps extends Omit<ReactFlowProps, 'nodes' | 'edges'> {
|
|
1815
1986
|
/**
|
|
1816
1987
|
* Nodes to display in the flow
|
|
@@ -1987,4 +2158,4 @@ interface CodeEditorProps {
|
|
|
1987
2158
|
*/
|
|
1988
2159
|
declare const CodeEditor: React__default.FC<CodeEditorProps>;
|
|
1989
2160
|
|
|
1990
|
-
export { Accordion, type AccordionProps, AccountSection, type AccountSectionProps, ActivityAppIcon, Alert, type AlertProps, type AlertSeverity, AppBar, type AppBarProps, AppLoading, type AppLoadingProps, Avatar, AvatarIcon, type AvatarProps, Badge, type BadgeProps, BarTrackingIcon, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, BytesSize, type BytesSizeProps, Card, CardActions, CardContent, CardHeader, type CardProps, CereIcon, ChartWidget, type ChartWidgetProps, CheckMarkAnimation, Checkbox, type CheckboxProps, Chip, type ChipProps, CircularProgress, type CircularProgressProps, ClockIcon, CloudFlashIcon, CodeEditor, type CodeEditorLanguage, type CodeEditorProps, Collapse, type CollapseProps, ConnectionStatus, type ConnectionStatusProps, type ContextMenuItem, DecentralizedServerIcon, type DeploymentCardAction, DeploymentDashboardCard, type DeploymentDashboardCardProps, DeploymentDashboardPanel, type DeploymentDashboardPanelProps, DeploymentDashboardTree, type DeploymentDashboardTreeProps, DeploymentEntityContextMenu, type DeploymentEntityContextMenuProps, type DeploymentEntityType, type DeploymentStatusIndicator, type DeploymentTreeNode, Dialog, type DialogProps, DiscordIcon, Divider, type DividerProps, DownloadIcon, Drawer, type DrawerProps, Dropdown, DropdownAnchor, type DropdownAnchorProps, type DropdownProps, EmptyState, type EmptyStateProps, EntityHeader, type EntityHeaderProps, FilledFolderIcon, FlowEditor, type FlowEditorProps, FolderIcon, GithubLogoIcon, IDBlock, type IDBlockProps, IconButton, type IconButtonProps, LeftArrowIcon, Link, type LinkProps, List, ListItem, type ListItemProps, type ListProps, Loading, LoadingAnimation, type LoadingAnimationProps, LoadingButton, type LoadingButtonProps, type LoadingProps, Logo, type LogoProps, Markdown, type MarkdownProps, Menu, MenuItem, type MenuItemProps, type MenuProps, MetricsChart, type MetricsChartProps, type MetricsPeriod, NavigationItem, type NavigationItemProps, NavigationList, type NavigationListProps, OnboardingProvider, Pagination, type PaginationProps, Paper, type PaperProps, PeriodSelect, type PrimaryAction, Progress, type ProgressProps, QRCode, type QRCodeProps, Radio, type RadioProps, RightArrowIcon, RoleBadge, type RoleBadgeColor, type RoleBadgeProps, type RoleBadgeSize, SearchField, type SearchFieldProps, Selector, type SelectorOption, type SelectorProps, type Service, ServiceSelectorButton, type ServiceSelectorButtonProps, ShareIcon, SideNav, SideNavHeader, type SideNavHeaderProps, type SideNavProps, Sidebar, SidebarItem, type SidebarItemProps, type SidebarProps, Snackbar, type SnackbarProps, Step, StepButton, type StepButtonProps, StepContent, type StepContentProps, StepLabel, type StepLabelProps, type StepProps, Stepper, type StepperProps, StorageAppIcon, Switch, type SwitchProps, Tab, type TabProps, Table, TableHeader, type TableHeaderProps, type TableProps, TextField, type TextFieldProps, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, Tooltip, type TooltipProps, Truncate, type TruncateProps, UploadFileIcon, UploadFolderIcon, type UserInfo, type Workspace, WorkspaceSelectorButton, type WorkspaceSelectorButtonProps, colors, contextMenuItems, robPaletteExtended, robPrimaryPalette, theme, useIsDesktop, useIsMobile, useIsTablet, useOnboarding };
|
|
2161
|
+
export { Accordion, type AccordionProps, AccountSection, type AccountSectionProps, ActivityAppIcon, Alert, type AlertProps, type AlertSeverity, AppBar, type AppBarProps, AppLoading, type AppLoadingProps, Avatar, AvatarIcon, type AvatarProps, Badge, type BadgeProps, BarTrackingIcon, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, BytesSize, type BytesSizeProps, Card, CardActions, CardContent, CardHeader, type CardProps, CereIcon, ChartWidget, type ChartWidgetProps, CheckMarkAnimation, Checkbox, type CheckboxProps, Chip, type ChipProps, CircularProgress, type CircularProgressProps, ClockIcon, CloudFlashIcon, CodeEditor, type CodeEditorLanguage, type CodeEditorProps, Collapse, type CollapseProps, ConnectionStatus, type ConnectionStatusProps, type ContextMenuItem, type DataPoint, type DataSeries, DecentralizedServerIcon, type DeploymentCardAction, DeploymentDashboardCard, type DeploymentDashboardCardProps, DeploymentDashboardPanel, type DeploymentDashboardPanelProps, DeploymentDashboardTree, type DeploymentDashboardTreeProps, DeploymentEntityContextMenu, type DeploymentEntityContextMenuProps, type DeploymentEntityType, type DeploymentStatusIndicator, type DeploymentTreeNode, Dialog, type DialogProps, DiscordIcon, Divider, type DividerProps, DownloadIcon, Drawer, type DrawerProps, Dropdown, DropdownAnchor, type DropdownAnchorProps, type DropdownProps, EmptyState, type EmptyStateProps, EntityHeader, type EntityHeaderProps, FilledFolderIcon, FlowEditor, type FlowEditorProps, FolderIcon, GithubLogoIcon, IDBlock, type IDBlockProps, IconButton, type IconButtonProps, LeftArrowIcon, Link, type LinkProps, List, ListItem, type ListItemProps, type ListProps, Loading, LoadingAnimation, type LoadingAnimationProps, LoadingButton, type LoadingButtonProps, type LoadingProps, Logo, type LogoProps, Markdown, type MarkdownProps, Menu, MenuItem, type MenuItemProps, type MenuProps, MetricsChart, type MetricsChartProps, type MetricsPeriod, NavigationItem, type NavigationItemProps, NavigationList, type NavigationListProps, OnboardingProvider, Pagination, type PaginationProps, Paper, type PaperProps, PeriodSelect, type PrimaryAction, Progress, type ProgressProps, QRCode, type QRCodeProps, Radio, type RadioProps, RightArrowIcon, RoleBadge, type RoleBadgeColor, type RoleBadgeProps, type RoleBadgeSize, SearchField, type SearchFieldProps, Selector, type SelectorOption, type SelectorProps, type Service, ServiceSelectorButton, type ServiceSelectorButtonProps, ShareIcon, SideNav, SideNavHeader, type SideNavHeaderProps, type SideNavProps, Sidebar, SidebarItem, type SidebarItemProps, type SidebarProps, Snackbar, type SnackbarProps, Step, StepButton, type StepButtonProps, StepContent, type StepContentProps, StepLabel, type StepLabelProps, type StepProps, Stepper, type StepperProps, StorageAppIcon, type SummaryItem, SummaryStats, type SummaryStatsProps, Switch, type SwitchProps, Tab, type TabProps, Table, TableHeader, type TableHeaderProps, type TableProps, TextField, type TextFieldProps, type TimeRangeOption, TimeRangeSelect, type TimeRangeSelectProps, TimeSeriesGraph, type TimeSeriesGraphProps, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, Tooltip, type TooltipProps, Truncate, type TruncateProps, UploadFileIcon, UploadFolderIcon, type UserInfo, type Workspace, WorkspaceSelectorButton, type WorkspaceSelectorButtonProps, colors, contextMenuItems, robPaletteExtended, robPrimaryPalette, theme, useIsDesktop, useIsMobile, useIsTablet, useOnboarding };
|
package/dist/index.d.ts
CHANGED
|
@@ -1811,6 +1811,177 @@ type PeriodSelectProps = {
|
|
|
1811
1811
|
};
|
|
1812
1812
|
declare const PeriodSelect: ({ value, onChange }: PeriodSelectProps) => react_jsx_runtime.JSX.Element;
|
|
1813
1813
|
|
|
1814
|
+
/**
|
|
1815
|
+
* Represents a single time range option in the dropdown.
|
|
1816
|
+
*/
|
|
1817
|
+
interface TimeRangeOption {
|
|
1818
|
+
/** Display label shown in the dropdown (e.g., "1 week") */
|
|
1819
|
+
label: string;
|
|
1820
|
+
/** Value identifier passed to the callback on selection */
|
|
1821
|
+
value: string;
|
|
1822
|
+
}
|
|
1823
|
+
interface TimeRangeSelectProps {
|
|
1824
|
+
/** Available time range options */
|
|
1825
|
+
options: TimeRangeOption[];
|
|
1826
|
+
/** Currently selected time range value */
|
|
1827
|
+
value?: string;
|
|
1828
|
+
/** Callback invoked when user selects a different time range */
|
|
1829
|
+
onChange?: (value: string) => void;
|
|
1830
|
+
}
|
|
1831
|
+
/**
|
|
1832
|
+
* Configurable time range dropdown selector.
|
|
1833
|
+
* Renders a compact select field with the provided time range options.
|
|
1834
|
+
*
|
|
1835
|
+
* @example
|
|
1836
|
+
* ```tsx
|
|
1837
|
+
* <TimeRangeSelect
|
|
1838
|
+
* options={[
|
|
1839
|
+
* { label: 'Last hour', value: 'hour' },
|
|
1840
|
+
* { label: '24 hours', value: 'day' },
|
|
1841
|
+
* { label: '1 week', value: 'week' },
|
|
1842
|
+
* ]}
|
|
1843
|
+
* value="week"
|
|
1844
|
+
* onChange={(value) => console.log(value)}
|
|
1845
|
+
* />
|
|
1846
|
+
* ```
|
|
1847
|
+
*/
|
|
1848
|
+
declare const TimeRangeSelect: ({ options, value, onChange }: TimeRangeSelectProps) => react_jsx_runtime.JSX.Element;
|
|
1849
|
+
|
|
1850
|
+
/**
|
|
1851
|
+
* Represents a single summary statistic item displayed below the graph.
|
|
1852
|
+
*/
|
|
1853
|
+
interface SummaryItem {
|
|
1854
|
+
/** Descriptive label (e.g., "Total Engagements") */
|
|
1855
|
+
label: string;
|
|
1856
|
+
/** Numeric or string value (e.g., "13.72" or 11372) */
|
|
1857
|
+
value: string | number;
|
|
1858
|
+
/** Optional unit suffix (e.g., "K", "GB", "%") */
|
|
1859
|
+
unit?: string;
|
|
1860
|
+
}
|
|
1861
|
+
interface SummaryStatsProps {
|
|
1862
|
+
/** Array of summary items to display */
|
|
1863
|
+
items: SummaryItem[];
|
|
1864
|
+
}
|
|
1865
|
+
/**
|
|
1866
|
+
* Renders a horizontal row of summary statistics below the graph.
|
|
1867
|
+
* Each item shows a label with its corresponding value and optional unit.
|
|
1868
|
+
*
|
|
1869
|
+
* Matches the Figma design layout with label in secondary text color
|
|
1870
|
+
* and value in bold heading typography.
|
|
1871
|
+
*
|
|
1872
|
+
* @example
|
|
1873
|
+
* ```tsx
|
|
1874
|
+
* <SummaryStats
|
|
1875
|
+
* items={[
|
|
1876
|
+
* { label: 'Total Engagements', value: 11372 },
|
|
1877
|
+
* { label: 'Total Consumed', value: '156.91', unit: 'GB' },
|
|
1878
|
+
* ]}
|
|
1879
|
+
* />
|
|
1880
|
+
* ```
|
|
1881
|
+
*/
|
|
1882
|
+
declare const SummaryStats: ({ items }: SummaryStatsProps) => react_jsx_runtime.JSX.Element | null;
|
|
1883
|
+
|
|
1884
|
+
/**
|
|
1885
|
+
* A single data point in a time series.
|
|
1886
|
+
* Use `null` for the value to represent missing/gap data — the line will break.
|
|
1887
|
+
*/
|
|
1888
|
+
interface DataPoint {
|
|
1889
|
+
/** Timestamp of the observation */
|
|
1890
|
+
timestamp: Date;
|
|
1891
|
+
/** Numeric value, or `null` to indicate a gap in the data */
|
|
1892
|
+
value: number | null;
|
|
1893
|
+
}
|
|
1894
|
+
/**
|
|
1895
|
+
* Represents one line on the graph (a named data series).
|
|
1896
|
+
*/
|
|
1897
|
+
interface DataSeries {
|
|
1898
|
+
/** Unique display name for this series (shown in legend) */
|
|
1899
|
+
name: string;
|
|
1900
|
+
/** CSS color string for the line and legend indicator */
|
|
1901
|
+
color: string;
|
|
1902
|
+
/** Ordered array of data points */
|
|
1903
|
+
data: DataPoint[];
|
|
1904
|
+
}
|
|
1905
|
+
interface TimeSeriesGraphProps {
|
|
1906
|
+
/** Optional title displayed at the top-left of the graph card */
|
|
1907
|
+
title?: string;
|
|
1908
|
+
/**
|
|
1909
|
+
* Array of data series to render. Each series becomes one line on the graph.
|
|
1910
|
+
* There is no hardcoded limit on the number of series.
|
|
1911
|
+
*/
|
|
1912
|
+
series: DataSeries[];
|
|
1913
|
+
/**
|
|
1914
|
+
* Configurable time range options for the dropdown selector.
|
|
1915
|
+
* When omitted, the time range dropdown is not rendered.
|
|
1916
|
+
*/
|
|
1917
|
+
timeRangeOptions?: TimeRangeOption[];
|
|
1918
|
+
/** Currently selected time range value (controlled) */
|
|
1919
|
+
selectedTimeRange?: string;
|
|
1920
|
+
/** Callback invoked when the user picks a different time range */
|
|
1921
|
+
onTimeRangeChange?: (value: string) => void;
|
|
1922
|
+
/**
|
|
1923
|
+
* Optional array of summary statistics displayed below the graph.
|
|
1924
|
+
* When omitted or empty, the summary section is hidden.
|
|
1925
|
+
*/
|
|
1926
|
+
summaryItems?: SummaryItem[];
|
|
1927
|
+
/**
|
|
1928
|
+
* Whether to show the summary statistics section.
|
|
1929
|
+
* Defaults to `true`. Set to `false` to explicitly hide, even when `summaryItems` are provided.
|
|
1930
|
+
*/
|
|
1931
|
+
showSummary?: boolean;
|
|
1932
|
+
/**
|
|
1933
|
+
* Optional header action element rendered to the right of the title
|
|
1934
|
+
* (e.g., a secondary dropdown or filter control).
|
|
1935
|
+
*/
|
|
1936
|
+
headerAction?: ReactNode;
|
|
1937
|
+
/**
|
|
1938
|
+
* When `true`, shows a loading overlay (spinner) over the graph area
|
|
1939
|
+
* while the header remains visible and interactive.
|
|
1940
|
+
*/
|
|
1941
|
+
loading?: boolean;
|
|
1942
|
+
/**
|
|
1943
|
+
* Override the x-axis date format string (date-fns format tokens).
|
|
1944
|
+
* When omitted, the format is auto-detected from the data's time span:
|
|
1945
|
+
* - <= 24 hours → `'HH:mm'`
|
|
1946
|
+
* - > 24 hours → `'do MMM'`
|
|
1947
|
+
*/
|
|
1948
|
+
xAxisFormat?: string;
|
|
1949
|
+
}
|
|
1950
|
+
/**
|
|
1951
|
+
* A reusable time series graph component that displays one or more data lines
|
|
1952
|
+
* over a shared time axis. Supports configurable time range selection,
|
|
1953
|
+
* optional summary statistics, interactive legend toggling, crosshair tooltips,
|
|
1954
|
+
* and a loading state.
|
|
1955
|
+
*
|
|
1956
|
+
* Built on `@mui/x-charts` LineChart and the Cere Design System theme.
|
|
1957
|
+
*
|
|
1958
|
+
* @example
|
|
1959
|
+
* ```tsx
|
|
1960
|
+
* <TimeSeriesGraph
|
|
1961
|
+
* title="Engagement over time"
|
|
1962
|
+
* series={[
|
|
1963
|
+
* { name: 'Engagements', color: '#6750A4', data: engagementData },
|
|
1964
|
+
* { name: 'Unique Streams', color: '#4caf50', data: streamData },
|
|
1965
|
+
* ]}
|
|
1966
|
+
* timeRangeOptions={[
|
|
1967
|
+
* { label: 'Last hour', value: 'hour' },
|
|
1968
|
+
* { label: '24 hours', value: 'day' },
|
|
1969
|
+
* { label: '1 week', value: 'week' },
|
|
1970
|
+
* { label: '1 month', value: 'month' },
|
|
1971
|
+
* ]}
|
|
1972
|
+
* selectedTimeRange="week"
|
|
1973
|
+
* onTimeRangeChange={(range) => fetchData(range)}
|
|
1974
|
+
* summaryItems={[
|
|
1975
|
+
* { label: 'Total Engagements', value: 11372 },
|
|
1976
|
+
* { label: 'Daily Engagements', value: 156 },
|
|
1977
|
+
* ]}
|
|
1978
|
+
* />
|
|
1979
|
+
* ```
|
|
1980
|
+
*
|
|
1981
|
+
* Figma reference: [ROB Design - Node 162:1172](https://www.figma.com/design/xky11VbkkFcgZLwZE8BdCN/ROB?node-id=162-1172&m=dev)
|
|
1982
|
+
*/
|
|
1983
|
+
declare const TimeSeriesGraph: ({ title, series, timeRangeOptions, selectedTimeRange, onTimeRangeChange, summaryItems, showSummary, headerAction, loading, xAxisFormat, }: TimeSeriesGraphProps) => react_jsx_runtime.JSX.Element;
|
|
1984
|
+
|
|
1814
1985
|
interface FlowEditorProps extends Omit<ReactFlowProps, 'nodes' | 'edges'> {
|
|
1815
1986
|
/**
|
|
1816
1987
|
* Nodes to display in the flow
|
|
@@ -1987,4 +2158,4 @@ interface CodeEditorProps {
|
|
|
1987
2158
|
*/
|
|
1988
2159
|
declare const CodeEditor: React__default.FC<CodeEditorProps>;
|
|
1989
2160
|
|
|
1990
|
-
export { Accordion, type AccordionProps, AccountSection, type AccountSectionProps, ActivityAppIcon, Alert, type AlertProps, type AlertSeverity, AppBar, type AppBarProps, AppLoading, type AppLoadingProps, Avatar, AvatarIcon, type AvatarProps, Badge, type BadgeProps, BarTrackingIcon, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, BytesSize, type BytesSizeProps, Card, CardActions, CardContent, CardHeader, type CardProps, CereIcon, ChartWidget, type ChartWidgetProps, CheckMarkAnimation, Checkbox, type CheckboxProps, Chip, type ChipProps, CircularProgress, type CircularProgressProps, ClockIcon, CloudFlashIcon, CodeEditor, type CodeEditorLanguage, type CodeEditorProps, Collapse, type CollapseProps, ConnectionStatus, type ConnectionStatusProps, type ContextMenuItem, DecentralizedServerIcon, type DeploymentCardAction, DeploymentDashboardCard, type DeploymentDashboardCardProps, DeploymentDashboardPanel, type DeploymentDashboardPanelProps, DeploymentDashboardTree, type DeploymentDashboardTreeProps, DeploymentEntityContextMenu, type DeploymentEntityContextMenuProps, type DeploymentEntityType, type DeploymentStatusIndicator, type DeploymentTreeNode, Dialog, type DialogProps, DiscordIcon, Divider, type DividerProps, DownloadIcon, Drawer, type DrawerProps, Dropdown, DropdownAnchor, type DropdownAnchorProps, type DropdownProps, EmptyState, type EmptyStateProps, EntityHeader, type EntityHeaderProps, FilledFolderIcon, FlowEditor, type FlowEditorProps, FolderIcon, GithubLogoIcon, IDBlock, type IDBlockProps, IconButton, type IconButtonProps, LeftArrowIcon, Link, type LinkProps, List, ListItem, type ListItemProps, type ListProps, Loading, LoadingAnimation, type LoadingAnimationProps, LoadingButton, type LoadingButtonProps, type LoadingProps, Logo, type LogoProps, Markdown, type MarkdownProps, Menu, MenuItem, type MenuItemProps, type MenuProps, MetricsChart, type MetricsChartProps, type MetricsPeriod, NavigationItem, type NavigationItemProps, NavigationList, type NavigationListProps, OnboardingProvider, Pagination, type PaginationProps, Paper, type PaperProps, PeriodSelect, type PrimaryAction, Progress, type ProgressProps, QRCode, type QRCodeProps, Radio, type RadioProps, RightArrowIcon, RoleBadge, type RoleBadgeColor, type RoleBadgeProps, type RoleBadgeSize, SearchField, type SearchFieldProps, Selector, type SelectorOption, type SelectorProps, type Service, ServiceSelectorButton, type ServiceSelectorButtonProps, ShareIcon, SideNav, SideNavHeader, type SideNavHeaderProps, type SideNavProps, Sidebar, SidebarItem, type SidebarItemProps, type SidebarProps, Snackbar, type SnackbarProps, Step, StepButton, type StepButtonProps, StepContent, type StepContentProps, StepLabel, type StepLabelProps, type StepProps, Stepper, type StepperProps, StorageAppIcon, Switch, type SwitchProps, Tab, type TabProps, Table, TableHeader, type TableHeaderProps, type TableProps, TextField, type TextFieldProps, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, Tooltip, type TooltipProps, Truncate, type TruncateProps, UploadFileIcon, UploadFolderIcon, type UserInfo, type Workspace, WorkspaceSelectorButton, type WorkspaceSelectorButtonProps, colors, contextMenuItems, robPaletteExtended, robPrimaryPalette, theme, useIsDesktop, useIsMobile, useIsTablet, useOnboarding };
|
|
2161
|
+
export { Accordion, type AccordionProps, AccountSection, type AccountSectionProps, ActivityAppIcon, Alert, type AlertProps, type AlertSeverity, AppBar, type AppBarProps, AppLoading, type AppLoadingProps, Avatar, AvatarIcon, type AvatarProps, Badge, type BadgeProps, BarTrackingIcon, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, BytesSize, type BytesSizeProps, Card, CardActions, CardContent, CardHeader, type CardProps, CereIcon, ChartWidget, type ChartWidgetProps, CheckMarkAnimation, Checkbox, type CheckboxProps, Chip, type ChipProps, CircularProgress, type CircularProgressProps, ClockIcon, CloudFlashIcon, CodeEditor, type CodeEditorLanguage, type CodeEditorProps, Collapse, type CollapseProps, ConnectionStatus, type ConnectionStatusProps, type ContextMenuItem, type DataPoint, type DataSeries, DecentralizedServerIcon, type DeploymentCardAction, DeploymentDashboardCard, type DeploymentDashboardCardProps, DeploymentDashboardPanel, type DeploymentDashboardPanelProps, DeploymentDashboardTree, type DeploymentDashboardTreeProps, DeploymentEntityContextMenu, type DeploymentEntityContextMenuProps, type DeploymentEntityType, type DeploymentStatusIndicator, type DeploymentTreeNode, Dialog, type DialogProps, DiscordIcon, Divider, type DividerProps, DownloadIcon, Drawer, type DrawerProps, Dropdown, DropdownAnchor, type DropdownAnchorProps, type DropdownProps, EmptyState, type EmptyStateProps, EntityHeader, type EntityHeaderProps, FilledFolderIcon, FlowEditor, type FlowEditorProps, FolderIcon, GithubLogoIcon, IDBlock, type IDBlockProps, IconButton, type IconButtonProps, LeftArrowIcon, Link, type LinkProps, List, ListItem, type ListItemProps, type ListProps, Loading, LoadingAnimation, type LoadingAnimationProps, LoadingButton, type LoadingButtonProps, type LoadingProps, Logo, type LogoProps, Markdown, type MarkdownProps, Menu, MenuItem, type MenuItemProps, type MenuProps, MetricsChart, type MetricsChartProps, type MetricsPeriod, NavigationItem, type NavigationItemProps, NavigationList, type NavigationListProps, OnboardingProvider, Pagination, type PaginationProps, Paper, type PaperProps, PeriodSelect, type PrimaryAction, Progress, type ProgressProps, QRCode, type QRCodeProps, Radio, type RadioProps, RightArrowIcon, RoleBadge, type RoleBadgeColor, type RoleBadgeProps, type RoleBadgeSize, SearchField, type SearchFieldProps, Selector, type SelectorOption, type SelectorProps, type Service, ServiceSelectorButton, type ServiceSelectorButtonProps, ShareIcon, SideNav, SideNavHeader, type SideNavHeaderProps, type SideNavProps, Sidebar, SidebarItem, type SidebarItemProps, type SidebarProps, Snackbar, type SnackbarProps, Step, StepButton, type StepButtonProps, StepContent, type StepContentProps, StepLabel, type StepLabelProps, type StepProps, Stepper, type StepperProps, StorageAppIcon, type SummaryItem, SummaryStats, type SummaryStatsProps, Switch, type SwitchProps, Tab, type TabProps, Table, TableHeader, type TableHeaderProps, type TableProps, TextField, type TextFieldProps, type TimeRangeOption, TimeRangeSelect, type TimeRangeSelectProps, TimeSeriesGraph, type TimeSeriesGraphProps, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, Tooltip, type TooltipProps, Truncate, type TruncateProps, UploadFileIcon, UploadFolderIcon, type UserInfo, type Workspace, WorkspaceSelectorButton, type WorkspaceSelectorButtonProps, colors, contextMenuItems, robPaletteExtended, robPrimaryPalette, theme, useIsDesktop, useIsMobile, useIsTablet, useOnboarding };
|