vue-data-ui 3.27.1 → 3.28.1

package/dist/types/vue-data-ui.d.ts

@@ -7,6 +7,326 @@ Component,
 ComputedRef,
 } from 'vue';
 
+export type VueUiGraphId = string | number;
+export type VueUiGraphNode = {
+id: VueUiGraphId;
+label?: string;
+group?: string | number;
+value?: number;
+color?: string;
+radius?: number;
+x?: number;
+y?: number;
+fixed?: boolean;
+metadata?: unknown;
+};
+export type VueUiGraphLink = {
+source: VueUiGraphId;
+target: VueUiGraphId;
+value?: number;
+color?: string;
+width?: number;
+label?: string;
+directed?: boolean;
+metadata?: unknown;
+};
+
+export type VueUiGraphDataset = {
+nodes: VueUiGraphNode[];
+links: VueUiGraphLink[];
+};
+
+export type VueUiGraphEvent = (payload: {
+datapoint: VueUiGraphNode;
+seriesIndex: number;
+}) => void;
+
+export type VueUiGraphConfig = {
+devHints?: DevHints;
+skeletonDataset?: VueUiGraphDataset;
+skeletonConfig?: VueUiGraphConfig;
+events?: {
+datapointEnter?: VueUiGraphEvent | null;
+datapointLeave?: VueUiGraphEvent | null;
+datapointClick?: VueUiGraphEvent | null;
+};
+a11y?: { translations?: { keyboardNavigation?: string } };
+responsive?: boolean;
+theme?: string;
+loading?: boolean;
+debug?: boolean;
+customPalette?: string[];
+style?: {
+chart?: {
+width?: number;
+height?: number;
+padding?: number;
+backgroundColor?: string;
+color?: string;
+fontFamily?: string;
+title?: ChartTitle;
+controls?: ChartZoomControls;
+nodes?: {
+radius?: number;
+minRadius?: number;
+maxRadius?: number;
+sizeByValue?: boolean;
+sizeByDegree?: boolean;
+colorByGroup?: boolean;
+color?: string;
+opacity?: number;
+strokeWidth?: number;
+stroke?: string;
+gradient?: boolean;
+gradientColor?: string;
+glow?: { show?: boolean; blur?: number; opacity?: number };
+hover?: { stroke?: string; strokeWidth?: number };
+selected?: { stroke?: string; strokeWidth?: number };
+labels?: {
+strokeWidth?: number;
+show?: boolean;
+fontSize?: number;
+color?: string;
+position?: 'top' | 'bottom';
+offsetY?: number;
+hoverOnly?: boolean;
+selectedOnly?: boolean;
+maxCount?: number;
+minZoom?: number;
+maxLength?: number;
+};
+};
+links?: {
+color?: string;
+opacity?: number;
+width?: number;
+widthByValue?: boolean;
+maxWidth?: number;
+arrows?: { show?: boolean; showOnHover?: boolean };
+pulses?: {
+show?: boolean;
+showOnHover?: boolean;
+reverse?: boolean;
+color?: string;
+colorBySource?: boolean;
+radius?: number;
+opacity?: number;
+duration?: number;
+};
+glow?: boolean;
+};
+};
+};
+layout?: {
+chargeStrength?: number;
+linkDistance?: number;
+linkStrength?: number;
+centerStrength?: number;
+collisionPadding?: number;
+friction?: number;
+clusterStrength?: number;
+iterations?: number;
+strength?: number;
+theta?: number;
+};
+interaction?: {
+zoom?: {
+enabled?: boolean;
+min?: number;
+max?: number;
+fitOnDoubleClick?: boolean;
+};
+pan?: { enabled?: boolean };
+drag?: { enabled?: boolean; pinOnRelease?: boolean };
+highlight?: {
+enabled?: boolean;
+neighbors?: boolean;
+keepSelection?: boolean;
+dimOpacity?: number;
+};
+};
+tooltip?: ChartTooltip & {
+showMetadata?: boolean;
+customFormat?:
+| ((scope: VueUiGraphTooltipSlotProps) => string)
+| null;
+};
+animation?: { enabled?: boolean; duration?: number };
+userOptions?: ChartUserOptions<VueUiGraphDataset, VueUiGraphConfig>;
+table?: {
+show?: boolean;
+useDialog?: boolean;
+responsiveBreakpoint?: number;
+columnNames?: Partial<
+Record<
+| 'nodes'
+| 'links'
+| 'id'
+| 'label'
+| 'group'
+| 'value'
+| 'connections'
+| 'source'
+| 'target'
+| 'directed'
+| 'metadata',
+string
+>
+>;
+th?: ChartTableCell;
+td?: ChartTableCell;
+};
+viewport?: {
+initialFit?: boolean;
+fitOnResize?: boolean;
+fitOnUpdate?: boolean;
+};
+performance?: {
+effectThreshold?: number;
+stepsPerFrame?: number;
+nodeBatchThreshold?: number;
+};
+};
+
+export type VueUiGraphViewport = {
+x: number;
+y: number;
+k: number;
+};
+
+export type VueUiGraphTooltipSlotProps = {
+datapoint: VueUiGraphNode;
+node: VueUiGraphNode | null;
+connections?: number;
+config: VueUiGraphConfig;
+};
+
+export type VueUiGraphExpose = {
+copyAlt(): Promise<void>;
+zoomIn(): void;
+zoomOut(): void;
+resetZoom(): void;
+fitToView(): void;
+focusNode(id: VueUiGraphId): void;
+resetLayout(): void;
+getData(): VueUiGraphDataset;
+getImage(options?: { scale?: number }): Promise<
+| {
+imageUri: string;
+base64: string;
+title: string;
+width: number;
+height: number;
+aspectRatio: number;
+}
+| undefined
+>;
+generateImage(): Promise<unknown>;
+generatePdf(): Promise<unknown>;
+generateSvg(options?: { isCb: boolean }): Promise<void>;
+generateCsv(callback?: ((content: string) => void) | null): string;
+toggleTable(): void;
+toggleFullscreen(state: boolean): void;
+toggleZoom(): void;
+toggleTooltip(): void;
+toggleAnnotator(): void;
+};
+
+export type VueUiGraphProps = {
+dataset?: VueUiGraphDataset;
+config?: VueUiGraphConfig;
+};
+
+export type VueUiGraphEmits = {
+copyAlt: (
+args: AltCopyArgs<VueUiGraphDataset, VueUiGraphConfig>,
+) => void;
+selectNode: (node: VueUiGraphNode | null) => void;
+hoverNode: (node: VueUiGraphNode | null) => void;
+zoom: (viewport: VueUiGraphViewport) => void;
+zoomReset: (viewport: VueUiGraphViewport) => void;
+layoutStart: () => void;
+layoutEnd: (dataset: VueUiGraphDataset) => void;
+};
+const VueUiGraphBase: DefineComponent<
+VueUiGraphProps,
+{},
+{},
+{},
+{},
+{},
+{},
+VueUiGraphEmits
+>;
+
+export const VueUiGraph: typeof VueUiGraphBase & {
+new (): VueUiGraphExpose & {
+$slots: CommonAnnotatorSlots & {
+optionAltCopy?: () => VNodeChild;
+hint?: (props: {
+hint: string;
+isVisible: boolean;
+}) => VNodeChild;
+menuIcon?: (props: VueUiMenuIconSlotProps) => VNodeChild;
+optionPdf?: () => VNodeChild;
+optionImg?: () => VNodeChild;
+optionSvg?: () => VNodeChild;
+optionCsv?: () => VNodeChild;
+optionTable?: () => VNodeChild;
+optionTooltip?: () => VNodeChild;
+optionAnnotator?: (
+props: VueUiOptionAnnotatorSlotProps,
+) => VNodeChild;
+optionZoom?: (props: {
+toggleZoom: () => void;
+isZoomLocked: boolean;
+}) => VNodeChild;
+optionFullscreen?: (
+props: VueUiOptionFullscreenSlotProps,
+) => VNodeChild;
+                'custom-menu-before'?: () => VNodeChild;
+                'custom-menu-after'?: () => VNodeChild;
+                'tooltip-before'?: (
+props: VueUiGraphTooltipSlotProps,
+) => VNodeChild;
+                'tooltip-after'?: (
+props: VueUiGraphTooltipSlotProps,
+) => VNodeChild;
+tooltip?: (props: VueUiGraphTooltipSlotProps) => VNodeChild;
+node?: (props: {
+node: VueUiGraphNode;
+radius: number;
+color: string;
+selected: boolean;
+hovered: boolean;
+}) => VNodeChild;
+svg?: (props: {
+nodes: VueUiGraphNode[];
+links: unknown[];
+config: VueUiGraphConfig;
+viewport: VueUiGraphViewport;
+}) => VNodeChild;
+                'svg-underlayer'?: (props: {
+nodes: VueUiGraphNode[];
+links: unknown[];
+config: VueUiGraphConfig;
+viewport: VueUiGraphViewport;
+}) => VNodeChild;
+                'chart-background'?: (props: {
+width: number;
+height: number;
+config: VueUiGraphConfig;
+}) => VNodeChild;
+watermark?: (props: {
+width: number;
+height: number;
+}) => VNodeChild;
+skeleton?: () => VNodeChild;
+source?: () => VNodeChild;
+};
+};
+};
+
 export type VueUiUnknownObj = {
 [key: string]: unknown;
 };
@@ -18,6 +338,7 @@ export type VueDataUiLoader = () => Promise<
 >;
 
 export type VueDataUiAnyDataset =
+| VueUiGraphDataset
 | VueUiHillDatasetItem[]
 | VueUi3dBarDataset
 | VueUiAgePyramidDataset
@@ -81,6 +402,7 @@ export type VueDataUiAnyDataset =
 | VueUiLabelDataset;
 
 export type VueDataUiAnyConfig =
+| VueUiGraphConfig
 | VueUiHillConfig
 | VueUi3dBarConfig
 | VueUiAgePyramidConfig
@@ -156,6 +478,9 @@ config?: VueDataUiAnyConfig;
 };
 
 export type VueDataUiExpose = {
+fitToView(): void;
+focusNode(id: VueUiGraphId): void;
+resetLayout(): void;
 getData?: (...args: any[]) => Promise<any> | any;
 getWaterfallSteps?: () => VueUiStackbarWaterfallComputedStep[];
 getImage?: (options?: { scale?: number }) => Promise<any>;
@@ -432,6 +757,7 @@ showOnChartHover?: boolean;
 keepStateOnChartLeave?: boolean;
 position?: 'left' | 'right';
 useCursorPointer?: boolean;
+annotatorPalette?: string[];
 buttons?: {
 animation?: boolean;
 annotator?: boolean;
@@ -962,6 +1288,9 @@ props: VueUiTreemapBreadcrumbLabelSlotProps,
 ['breadcrumb-arrow']?: () => VNodeChild;
 rect?: (props: VueUiTreemapRectSlotProps) => VNodeChild;
 svg?: (props: VueUiTreemapSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (
+props: VueUiTreemapSvgSlotProps,
+) => VNodeChild;
 hint?: (
 props: VueUiKeyboardNavigationHintSlotProps,
 ) => VNodeChild;
@@ -1289,6 +1618,9 @@ props: VueUiOptionAnnotatorSlotProps,
 optionAltCopy?: () => VNodeChild;
 ['chart-background']?: () => VNodeChild;
 svg?: (props: VueUiGalaxySvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (
+props: VueUiGalaxySvgSlotProps,
+) => VNodeChild;
 hint?: (
 props: VueUiKeyboardNavigationHintSlotProps,
 ) => VNodeChild;
@@ -1767,6 +2099,9 @@ node?: (props: VueUiMoleculeNodeSlotProps) => VNodeChild;
 props: VueUiMoleculeNodeSvgSlotProps,
 ) => VNodeChild;
 svg?: (props: VueUiMoleculeSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (
+props: VueUiMoleculeSvgSlotProps,
+) => VNodeChild;
 watermark?: (props: VueUiWatermarkSlotProps) => VNodeChild;
 ['reset-action']?: (
 props: VueUiResetActionSlotProps,
@@ -2016,6 +2351,9 @@ optionAltCopy?: () => VNodeChild;
 ['chart-background']?: () => VNodeChild;
 legend?: (props: VueUi3dBarLegendSlotProps) => VNodeChild;
 svg?: (props: VueUi3dBarSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (
+props: VueUi3dBarSvgSlotProps,
+) => VNodeChild;
 watermark?: (props: VueUiWatermarkSlotProps) => VNodeChild;
 source?: () => VNodeChild;
 skeleton?: () => VNodeChild;
@@ -2207,6 +2545,9 @@ props: VueUiOptionAnnotatorSlotProps,
 ) => VNodeChild;
 ['chart-background']?: () => VNodeChild;
 svg?: (props: VueUiMoodRadarSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (
+props: VueUiMoodRadarSvgSlotProps,
+) => VNodeChild;
 hint?: (
 props: VueUiKeyboardNavigationHintSlotProps,
 ) => VNodeChild;
@@ -2267,6 +2608,7 @@ export type VueUiIconName =
 | 'chartFlow'
 | 'chartFunnel'
 | 'chartGalaxy'
+| 'chartGraph'
 | 'chartGauge'
 | 'chartHeatmap'
 | 'chartHill'
@@ -2809,6 +3151,9 @@ props: VueUiOptionAnnotatorSlotProps,
 optionAltCopy?: () => VNodeChild;
 ['chart-background']?: () => VNodeChild;
 svg?: (props: VueUiDonutEvolutionSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (
+props: VueUiDonutEvolutionSvgSlotProps,
+) => VNodeChild;
 hint?: (
 props: VueUiKeyboardNavigationHintSlotProps,
 ) => VNodeChild;
@@ -2944,6 +3289,9 @@ props: VueUiOptionAnnotatorSlotProps,
 ) => VNodeChild;
 ['chart-background']?: () => VNodeChild;
 svg?: (props: VueUiTiremarksSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (
+props: VueUiTiremarksSvgSlotProps,
+) => VNodeChild;
 watermark?: (props: VueUiWatermarkSlotProps) => VNodeChild;
 source?: () => VNodeChild;
 skeleton?: () => VNodeChild;
@@ -3082,6 +3430,9 @@ props: VueUiOptionAnnotatorSlotProps,
 ) => VNodeChild;
 ['chart-background']?: () => VNodeChild;
 svg?: (props: VueUiWheelSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (
+props: VueUiWheelSvgSlotProps,
+) => VNodeChild;
 watermark?: (props: VueUiWatermarkSlotProps) => VNodeChild;
 source?: () => VNodeChild;
 skeleton?: () => VNodeChild;
@@ -3320,6 +3671,9 @@ props: VueUiOptionAnnotatorSlotProps,
 ['chart-background']?: () => VNodeChild;
 pattern?: (props: VueUiPatternSlotProps) => VNodeChild;
 svg?: (props: VueUiRingsSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (
+props: VueUiRingsSvgSlotProps,
+) => VNodeChild;
 hint?: (
 props: VueUiKeyboardNavigationHintSlotProps,
 ) => VNodeChild;
@@ -3812,6 +4166,9 @@ props: VueUiOptionAnnotatorSlotProps,
 ) => VNodeChild;
 ['chart-background']?: () => VNodeChild;
 svg?: (props: VueUiThermometerSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (
+props: VueUiThermometerSvgSlotProps,
+) => VNodeChild;
 watermark?: (props: VueUiWatermarkSlotProps) => VNodeChild;
 source?: () => VNodeChild;
 skeleton?: () => VNodeChild;
@@ -3982,6 +4339,9 @@ dataLabel?: (
 props: VueUiRelationCircleDataLabelSlotProps,
 ) => VNodeChild;
 svg?: (props: VueUiRelationCircleSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (
+props: VueUiRelationCircleSvgSlotProps,
+) => VNodeChild;
 hint?: (
 props: VueUiKeyboardNavigationHintSlotProps,
 ) => VNodeChild;
@@ -4747,6 +5107,9 @@ props: VueUiOptionAnnotatorSlotProps,
 optionAltCopy?: () => VNodeChild;
 ['chart-background']?: () => VNodeChild;
 svg?: (props: VueUiAgePyramidSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (
+props: VueUiAgePyramidSvgSlotProps,
+) => VNodeChild;
 hint?: (
 props: VueUiKeyboardNavigationHintSlotProps,
 ) => VNodeChild;
@@ -5071,6 +5434,9 @@ props: VueUiOptionAnnotatorSlotProps,
 optionAltCopy?: () => VNodeChild;
 ['chart-background']?: () => VNodeChild;
 svg?: (props: VueUiCandlestickSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (
+props: VueUiCandlestickSvgSlotProps,
+) => VNodeChild;
 hint?: (
 props: VueUiKeyboardNavigationHintSlotProps,
 ) => VNodeChild;
@@ -5484,6 +5850,9 @@ optionAnnotator?: (
 props: VueUiOptionAnnotatorSlotProps,
 ) => VNodeChild;
 svg?: (props: VueUiScatterSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (
+props: VueUiScatterSvgSlotProps,
+) => VNodeChild;
 hint?: (
 props: VueUiKeyboardNavigationHintSlotProps,
 ) => VNodeChild;
@@ -5782,6 +6151,9 @@ props: VueUiOptionAnnotatorSlotProps,
 optionAltCopy?: () => VNodeChild;
 ['chart-background']?: () => VNodeChild;
 svg?: (props: VueUiHeatmapSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (
+props: VueUiHeatmapSvgSlotProps,
+) => VNodeChild;
 hint?: (
 props: VueUiKeyboardNavigationHintSlotProps,
 ) => VNodeChild;
@@ -6574,6 +6946,7 @@ pattern?: (props: VueUiPatternSlotProps) => VNodeChild;
 props: VueUiXyTimeLabelSlotProps,
 ) => VNodeChild;
 svg?: (props: VueUiXySvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (props: VueUiXySvgSlotProps) => VNodeChild;
 hint?: (
 props: VueUiKeyboardNavigationHintSlotProps,
 ) => VNodeChild;
@@ -6957,6 +7330,9 @@ props: VueUiDonutPlotCommentSlotProps,
 ) => VNodeChild;
 ['chart-background']?: () => VNodeChild;
 svg?: (props: VueUiDonutSvgSlotProps) => VNodeChild;
+['svg-underlayer']?: (
+props: VueUiDonutSvgSlotProps,
+) => VNodeChild;
 hint?: (
 props: VueUiKeyboardNavigationHintSlotProps,
 ) => VNodeChild;
@@ -7304,6 +7680,9 @@ props: VueUiOptionAnnotatorSlotProps,
 ) => VNodeChild;
 ['chart-background']?: () => VNodeChild;
 svg?: (props: VueUiNestedDonutsSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (
+props: VueUiNestedDonutsSvgSlotProps,
+) => VNodeChild;
 hint?: (
 props: VueUiKeyboardNavigationHintSlotProps,
 ) => VNodeChild;
@@ -7619,6 +7998,9 @@ props: VueUiOptionAnnotatorSlotProps,
 cell?: (props: VueUiWaffleCellSlotProps) => VNodeChild;
 cellSvg?: (props: VueUiWaffleCellSlotProps) => VNodeChild;
 svg?: (props: VueUiWaffleSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (
+props: VueUiWaffleSvgSlotProps,
+) => VNodeChild;
 hint?: (
 props: VueUiKeyboardNavigationHintSlotProps,
 ) => VNodeChild;
@@ -7913,6 +8295,9 @@ props: VueUiOptionAnnotatorSlotProps,
 ) => VNodeChild;
 ['chart-background']?: () => VNodeChild;
 svg?: (props: VueUiRadarSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (
+props: VueUiRadarSvgSlotProps,
+) => VNodeChild;
 hint?: (
 props: VueUiKeyboardNavigationHintSlotProps,
 ) => VNodeChild;
@@ -8278,6 +8663,9 @@ datapointSvg?: (
 props: VueUiQuadrantDatapointSlotProps,
 ) => VNodeChild;
 svg?: (props: VueUiQuadrantSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (
+props: VueUiQuadrantSvgSlotProps,
+) => VNodeChild;
 hint?: (
 props: VueUiKeyboardNavigationHintSlotProps,
 ) => VNodeChild;
@@ -8485,6 +8873,9 @@ optionAltCopy?: () => VNodeChild;
 ['chart-background']?: () => VNodeChild;
 pattern?: (props: VueUiPatternSlotProps) => VNodeChild;
 svg?: (props: VueUiGaugeSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (
+props: VueUiGaugeSvgSlotProps,
+) => VNodeChild;
 watermark?: (props: VueUiWatermarkSlotProps) => VNodeChild;
 legend?: (props: VueUiGaugeLegendSlotProps) => VNodeChild;
 source?: () => VNodeChild;
@@ -8844,6 +9235,9 @@ props: VueUiOptionAnnotatorSlotProps,
 optionAltCopy?: () => VNodeChild;
 ['chart-background']?: () => VNodeChild;
 svg?: (props: VueUiChestnutSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (
+props: VueUiChestnutSvgSlotProps,
+) => VNodeChild;
 watermark?: (props: VueUiWatermarkSlotProps) => VNodeChild;
 legend?: (props: VueUiChestnutLegendSlotProps) => VNodeChild;
 source?: () => VNodeChild;
@@ -9123,6 +9517,9 @@ props: VueUiOptionAnnotatorSlotProps,
 ) => VNodeChild;
 ['chart-background']?: () => VNodeChild;
 svg?: (props: VueUiOnionSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (
+props: VueUiOnionSvgSlotProps,
+) => VNodeChild;
 hint?: (
 props: VueUiKeyboardNavigationHintSlotProps,
 ) => VNodeChild;
@@ -9505,6 +9902,9 @@ optionAltCopy?: () => VNodeChild;
 ['chart-background']?: () => VNodeChild;
 pattern?: (props: VueUiPatternSlotProps) => VNodeChild;
 svg?: (props: VueUiHorizontalBarSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (
+props: VueUiHorizontalBarSvgSlotProps,
+) => VNodeChild;
 hint?: (
 props: VueUiKeyboardNavigationHintSlotProps,
 ) => VNodeChild;
@@ -9789,6 +10189,9 @@ $slots: {
 before?: (props: VueUiSparklineBeforeSlotProps) => VNodeChild;
 ['chart-background']?: () => VNodeChild;
 svg?: (props: VueUiSparklineSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (
+props: VueUiSparklineSvgSlotProps,
+) => VNodeChild;
 hint?: (
 props: VueUiKeyboardNavigationHintSlotProps,
 ) => VNodeChild;
@@ -11529,6 +11932,9 @@ props: VueUiOptionAnnotatorSlotProps,
 ) => VNodeChild;
 ['chart-background']?: () => VNodeChild;
 svg?: (props: VueUiStripPlotSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (
+props: VueUiStripPlotSvgSlotProps,
+) => VNodeChild;
 hint?: (
 props: VueUiKeyboardNavigationHintSlotProps,
 ) => VNodeChild;
@@ -11832,6 +12238,9 @@ props: VueUiOptionAnnotatorSlotProps,
 optionAltCopy?: () => VNodeChild;
 ['chart-background']?: () => VNodeChild;
 svg?: (props: VueUiDumbbellSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (
+props: VueUiDumbbellSvgSlotProps,
+) => VNodeChild;
 hint?: (
 props: VueUiKeyboardNavigationHintSlotProps,
 ) => VNodeChild;
@@ -12032,6 +12441,9 @@ props: VueUiWordCloudOptionZoomSlotProps,
 ) => VNodeChild;
 ['chart-background']?: () => VNodeChild;
 svg?: (props: VueUiWordCloudSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (
+props: VueUiWordCloudSvgSlotProps,
+) => VNodeChild;
 hint?: (
 props: VueUiKeyboardNavigationHintSlotProps,
 ) => VNodeChild;
@@ -12686,6 +13098,7 @@ props: VueUiOptionAnnotatorSlotProps,
 optionAltCopy?: () => VNodeChild;
 ['chart-background']?: () => VNodeChild;
 svg?: (props: VueUiFlowSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (props: VueUiFlowSvgSlotProps) => VNodeChild;
 hint?: (
 props: VueUiKeyboardNavigationHintSlotProps,
 ) => VNodeChild;
@@ -13018,6 +13431,9 @@ props: VueUiParallelCoordinatePlotCommentSlotProps,
 ) => VNodeChild;
 svg?: (
 props: VueUiParallelCoordinatePlotSvgSlotProps,
+) => VNodeChild;
+                'svg-underlayer'?: (
+props: VueUiParallelCoordinatePlotSvgSlotProps,
 ) => VNodeChild;
 hint?: (
 props: VueUiKeyboardNavigationHintSlotProps,
@@ -13978,6 +14394,9 @@ pattern?: (props: VueUiPatternSlotProps) => VNodeChild;
 props: VueUiStackbarTimeLabelSlotProps,
 ) => VNodeChild;
 svg?: (props: VueUiStackbarSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (
+props: VueUiStackbarSvgSlotProps,
+) => VNodeChild;
 hint?: (
 props: VueUiKeyboardNavigationHintSlotProps,
 ) => VNodeChild;
@@ -14435,6 +14854,9 @@ pattern?: (props: VueUiPatternSlotProps) => VNodeChild;
 props: VueUiStacklineTimeLabelSlotProps,
 ) => VNodeChild;
 svg?: (props: VueUiStacklineSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (
+props: VueUiStacklineSvgSlotProps,
+) => VNodeChild;
 hint?: (
 props: VueUiKeyboardNavigationHintSlotProps,
 ) => VNodeChild;
@@ -14638,6 +15060,9 @@ props: VueUiOptionAnnotatorSlotProps,
 optionAltCopy?: () => VNodeChild;
 ['chart-background']?: () => VNodeChild;
 svg?: (props: VueUiBulletSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (
+props: VueUiBulletSvgSlotProps,
+) => VNodeChild;
 watermark?: (props: VueUiWatermarkSlotProps) => VNodeChild;
 legend?: (props: VueUiBulletLegendSlotProps) => VNodeChild;
 source?: () => VNodeChild;
@@ -14807,6 +15232,9 @@ props: VueUiOptionAnnotatorSlotProps,
 optionAltCopy?: () => VNodeChild;
 ['chart-background']?: () => VNodeChild;
 svg?: (props: VueUiFunnelSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (
+props: VueUiFunnelSvgSlotProps,
+) => VNodeChild;
 watermark?: (props: VueUiWatermarkSlotProps) => VNodeChild;
 source?: () => VNodeChild;
 };
@@ -15141,6 +15569,9 @@ props: VueUiOptionAnnotatorSlotProps,
 optionAltCopy?: () => VNodeChild;
 ['chart-background']?: () => VNodeChild;
 svg?: (props: VueUiHistoryPlotSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (
+props: VueUiHistoryPlotSvgSlotProps,
+) => VNodeChild;
 hint?: (
 props: VueUiKeyboardNavigationHintSlotProps,
 ) => VNodeChild;
@@ -15434,6 +15865,9 @@ props: VueUiCirclePackDataLabelSlotProps,
 ) => VNodeChild;
 circle?: (props: VueUiCirclePackCircleSlotProps) => VNodeChild;
 svg?: (props: VueUiCirclePackSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (
+props: VueUiCirclePackSvgSlotProps,
+) => VNodeChild;
 hint?: (
 props: VueUiKeyboardNavigationHintSlotProps,
 ) => VNodeChild;
@@ -15684,6 +16118,9 @@ props: VueUiOptionAnnotatorSlotProps,
 ['chart-background']?: () => VNodeChild;
 pattern?: (props: VueUiWorldPatternSlotProps) => VNodeChild;
 svg?: (props: VueUiWorldSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (
+props: VueUiWorldSvgSlotProps,
+) => VNodeChild;
 watermark?: (props: VueUiWatermarkSlotProps) => VNodeChild;
 source?: () => VNodeChild;
 skeleton?: () => VNodeChild;
@@ -16023,6 +16460,9 @@ props: VueUiPatternSlotProps & { datapointIndex: number },
 props: VueUiRidgelineTimeLabelSlotProps,
 ) => VNodeChild;
 svg?: (props: VueUiRidgelineSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (
+props: VueUiRidgelineSvgSlotProps,
+) => VNodeChild;
 hint?: (
 props: VueUiKeyboardNavigationHintSlotProps,
 ) => VNodeChild;
@@ -16265,6 +16705,9 @@ props: VueUiOptionAnnotatorSlotProps,
 optionAltCopy?: () => VNodeChild;
 ['chart-background']?: () => VNodeChild;
 svg?: (props: VueUiChordSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (
+props: VueUiChordSvgSlotProps,
+) => VNodeChild;
 watermark?: (props: VueUiWatermarkSlotProps) => VNodeChild;
 hint?: (
 props: VueUiKeyboardNavigationHintSlotProps,
@@ -16587,6 +17030,7 @@ node?: (props: VueUiDagNodeSlotProps) => VNodeChild;
 props: VueUiDagFreeNodeLabelSlotProps,
 ) => VNodeChild;
 svg?: (props: VueUiDagSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (props: VueUiDagSvgSlotProps) => VNodeChild;
 hint?: (
 props: VueUiKeyboardNavigationHintSlotProps,
 ) => VNodeChild;
@@ -16895,6 +17339,7 @@ optionAltCopy?: () => VNodeChild;
 optionZoom?: (props: VueUiGeoOptionZoomSlotProps) => VNodeChild;
 datapoint?: (props: VueUiGeoDatapointSlotProps) => VNodeChild;
 svg?: (props: VueUiGeoSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (props: VueUiGeoSvgSlotProps) => VNodeChild;
 hint?: (
 props: VueUiKeyboardNavigationHintSlotProps,
 ) => VNodeChild;
@@ -17157,6 +17602,7 @@ optionAltCopy?: () => VNodeChild;
 props: VueUiBumpTimeLabelSlotProps,
 ) => VNodeChild;
 svg?: (props: VueUiBumpSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (props: VueUiBumpSvgSlotProps) => VNodeChild;
 hint?: (
 props: VueUiKeyboardNavigationHintSlotProps,
 ) => VNodeChild;
@@ -17547,6 +17993,7 @@ $slots: CommonAnnotatorSlots & {
 ['custom-menu-after']?: () => VNodeChild;
 ['chart-background']?: () => VNodeChild;
 svg?: (props: VueUiHillSvgSlotProps) => VNodeChild;
+                'svg-underlayer'?: (props: VueUiHillSvgSlotProps) => VNodeChild;
 analysis?: (props: VueUiHillAnalysisSlotProps) => VNodeChild;
 menuIcon?: (props: VueUiMenuIconSlotProps) => VNodeChild;
 optionPdf?: () => VNodeChild;
@@ -17713,6 +18160,7 @@ content: (props: VueUiLabelSlotProps) => VNodeChild;
 };
 
 export type VueDataUiConfig =
+| VueUiGraphConfig
 | VueUiHillConfig
 | VueUi3dBarConfig
 | VueUiAgePyramidConfig
@@ -17822,6 +18270,7 @@ export type VueDataUiConfigKey =
 | 'vue_ui_wheel'
 | 'vue_ui_xy'
 | 'vue_ui_nested_donuts'
+| 'vue_ui_graph'
 | 'vue_ui_galaxy'
 | 'vue_ui_kpi'
 | 'vue_ui_treemap'