@uipath/apollo-vertex 0.0.0-stage → 0.3.0

package/dist/registry/line-chart/line-chart-with-adapter.js

@@ -0,0 +1,58 @@
+import { jsx } from "react/jsx-runtime";
+import { useIsFetching, useSuspenseQuery } from "@tanstack/react-query";
+import { useDeferredValue } from "react";
+import { useVertexTranslation } from "../../lib/vertex-translation.js";
+import { assert } from "../../lib/asserts/assert.js";
+import { assertDefined } from "../../lib/asserts/assert-defined.js";
+import { ChartLoadingBoundary, SpinnerWithChildren, binLabel, formatMetricValue, getChartRange } from "../charts-core/charts-core.js";
+import { LineChart } from "./line-chart-view.js";
+function LineChartWithAdapter({ configuration, dataModel, dataAdapter }) {
+    return /*#__PURE__*/ jsx(ChartLoadingBoundary, {
+        configuration: configuration,
+        dataModel: dataModel,
+        children: /*#__PURE__*/ jsx(LineChartResolver, {
+            configuration: configuration,
+            dataModel: dataModel,
+            dataAdapter: dataAdapter
+        })
+    });
+}
+function LineChartResolver({ configuration, dataModel, dataAdapter }) {
+    const { i18n: { language } } = useVertexTranslation();
+    const deferrableProps = useDeferredValue({
+        configuration,
+        dataModel
+    });
+    const query = dataAdapter.charts.line(configuration, dataModel);
+    const deferredQuery = dataAdapter.charts.line(deferrableProps.configuration, deferrableProps.dataModel);
+    const isFetching = useIsFetching(query) > 0;
+    const { bins, values } = useSuspenseQuery(deferredQuery).data;
+    const dimensionId = assertDefined(configuration.dimensions[0], "Line chart must have at least one dimension");
+    const dimension = assertDefined(dataModel.dimensions.find((d)=>d.id === dimensionId), `Dimension ${dimensionId} not found in dataModel`);
+    const metricId = assertDefined(configuration.metrics[0], "Line chart must have at least one metric");
+    const metric = assertDefined(dataModel.metrics.find((m)=>m.id === metricId), `Metric ${metricId} not found in dataModel`);
+    assert("datetime" === dimension.type, "Dimension type must be datetime");
+    const chartRange = getChartRange({
+        type: dimension.type,
+        bins
+    });
+    const data = bins.map((bin, index)=>({
+            x: binLabel({
+                locale: language,
+                type: dimension.type,
+                bin,
+                chartRange,
+                isCompact: true
+            }),
+            y: values[index] ?? 0
+        }));
+    return /*#__PURE__*/ jsx(SpinnerWithChildren, {
+        loading: isFetching,
+        children: /*#__PURE__*/ jsx(LineChart, {
+            data: data,
+            seriesLabel: metric.display,
+            formatValue: (value)=>formatMetricValue(language, value, metric.expression)
+        })
+    });
+}
+export { LineChartWithAdapter };

package/dist/registry/line-chart/line-chart.d.ts

@@ -0,0 +1,2 @@
+export { LineChart, type LineChartProps } from "./line-chart-view";
+export { LineChartWithAdapter, type LineChartWithAdapterProps, } from "./line-chart-with-adapter";

package/dist/registry/line-chart/line-chart.js

@@ -0,0 +1,3 @@
+import { LineChart } from "./line-chart-view.js";
+import { LineChartWithAdapter } from "./line-chart-with-adapter.js";
+export { LineChart, LineChartWithAdapter };

package/dist/registry/menubar/menubar.d.ts

@@ -0,0 +1,26 @@
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+import * as React from "react";
+declare function Menubar({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function MenubarMenu({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Menu>): import("react/jsx-runtime").JSX.Element;
+declare function MenubarGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+declare function MenubarPortal({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function MenubarRadioGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>): import("react/jsx-runtime").JSX.Element;
+declare function MenubarTrigger({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function MenubarContent({ className, align, alignOffset, sideOffset, ...props }: React.ComponentProps<typeof MenubarPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function MenubarItem({ className, inset, variant, ...props }: React.ComponentProps<typeof MenubarPrimitive.Item> & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+}): import("react/jsx-runtime").JSX.Element;
+declare function MenubarCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>): import("react/jsx-runtime").JSX.Element;
+declare function MenubarRadioItem({ className, children, ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioItem>): import("react/jsx-runtime").JSX.Element;
+declare function MenubarLabel({ className, inset, ...props }: React.ComponentProps<typeof MenubarPrimitive.Label> & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function MenubarSeparator({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+declare function MenubarShortcut({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+declare function MenubarSub({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Sub>): import("react/jsx-runtime").JSX.Element;
+declare function MenubarSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function MenubarSubContent({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.SubContent>): import("react/jsx-runtime").JSX.Element;
+export { Menubar, MenubarPortal, MenubarMenu, MenubarTrigger, MenubarContent, MenubarGroup, MenubarSeparator, MenubarLabel, MenubarItem, MenubarShortcut, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarSub, MenubarSubTrigger, MenubarSubContent, };

package/dist/registry/menubar/menubar.js

@@ -0,0 +1,152 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckboxItem, Content, Group, Item, ItemIndicator, Label, Menu, Portal, RadioGroup, RadioItem, Root, Separator, Sub, SubContent, SubTrigger, Trigger } from "@radix-ui/react-menubar";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import "react";
+import { cn } from "../../lib/utils.js";
+function Menubar({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Root, {
+        "data-slot": "menubar",
+        className: cn("bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs", className),
+        ...props
+    });
+}
+function MenubarMenu({ ...props }) {
+    return /*#__PURE__*/ jsx(Menu, {
+        "data-slot": "menubar-menu",
+        ...props
+    });
+}
+function MenubarGroup({ ...props }) {
+    return /*#__PURE__*/ jsx(Group, {
+        "data-slot": "menubar-group",
+        ...props
+    });
+}
+function MenubarPortal({ ...props }) {
+    return /*#__PURE__*/ jsx(Portal, {
+        "data-slot": "menubar-portal",
+        ...props
+    });
+}
+function MenubarRadioGroup({ ...props }) {
+    return /*#__PURE__*/ jsx(RadioGroup, {
+        "data-slot": "menubar-radio-group",
+        ...props
+    });
+}
+function MenubarTrigger({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Trigger, {
+        "data-slot": "menubar-trigger",
+        className: cn("focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none", className),
+        ...props
+    });
+}
+function MenubarContent({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }) {
+    return /*#__PURE__*/ jsx(MenubarPortal, {
+        children: /*#__PURE__*/ jsx(Content, {
+            "data-slot": "menubar-content",
+            align: align,
+            alignOffset: alignOffset,
+            sideOffset: sideOffset,
+            className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md", className),
+            ...props
+        })
+    });
+}
+function MenubarItem({ className, inset, variant = "default", ...props }) {
+    return /*#__PURE__*/ jsx(Item, {
+        "data-slot": "menubar-item",
+        "data-inset": inset,
+        "data-variant": variant,
+        className: cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+        ...props
+    });
+}
+function MenubarCheckboxItem({ className, children, checked, ...props }) {
+    return /*#__PURE__*/ jsxs(CheckboxItem, {
+        "data-slot": "menubar-checkbox-item",
+        className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+        checked: checked,
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
+                children: /*#__PURE__*/ jsx(ItemIndicator, {
+                    children: /*#__PURE__*/ jsx(CheckIcon, {
+                        className: "size-4"
+                    })
+                })
+            }),
+            children
+        ]
+    });
+}
+function MenubarRadioItem({ className, children, ...props }) {
+    return /*#__PURE__*/ jsxs(RadioItem, {
+        "data-slot": "menubar-radio-item",
+        className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
+                children: /*#__PURE__*/ jsx(ItemIndicator, {
+                    children: /*#__PURE__*/ jsx(CircleIcon, {
+                        className: "size-2 fill-current"
+                    })
+                })
+            }),
+            children
+        ]
+    });
+}
+function MenubarLabel({ className, inset, ...props }) {
+    return /*#__PURE__*/ jsx(Label, {
+        "data-slot": "menubar-label",
+        "data-inset": inset,
+        className: cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className),
+        ...props
+    });
+}
+function MenubarSeparator({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Separator, {
+        "data-slot": "menubar-separator",
+        className: cn("bg-border -mx-1 my-1 h-px", className),
+        ...props
+    });
+}
+function MenubarShortcut({ className, ...props }) {
+    return /*#__PURE__*/ jsx("span", {
+        "data-slot": "menubar-shortcut",
+        className: cn("text-muted-foreground ml-auto text-xs tracking-widest", className),
+        ...props
+    });
+}
+function MenubarSub({ ...props }) {
+    return /*#__PURE__*/ jsx(Sub, {
+        "data-slot": "menubar-sub",
+        ...props
+    });
+}
+function MenubarSubTrigger({ className, inset, children, ...props }) {
+    return /*#__PURE__*/ jsxs(SubTrigger, {
+        "data-slot": "menubar-sub-trigger",
+        "data-inset": inset,
+        className: cn("focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8", className),
+        ...props,
+        children: [
+            children,
+            /*#__PURE__*/ jsx(ChevronRightIcon, {
+                className: "ml-auto h-4 w-4"
+            })
+        ]
+    });
+}
+function MenubarSubContent({ className, ...props }) {
+    return /*#__PURE__*/ jsx(SubContent, {
+        "data-slot": "menubar-sub-content",
+        className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg", className),
+        ...props
+    });
+}
+export { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger };

package/dist/registry/metric-card/metric-card.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { type CardProps } from "../card/card";
+interface MetricCardProps extends React.ComponentProps<"div"> {
+    label: string;
+    value: string | number;
+    trend?: "up" | "down" | "neutral";
+    percentage?: number;
+    isLowerBetter?: boolean;
+    variant?: CardProps["variant"];
+}
+declare function MetricCard({ label, value, trend, percentage, isLowerBetter, variant, className, ...props }: MetricCardProps): import("react/jsx-runtime").JSX.Element;
+interface MetricCardSkeletonProps extends React.ComponentProps<"div"> {
+    variant?: CardProps["variant"];
+}
+declare function MetricCardSkeleton({ variant, className, ...props }: MetricCardSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export { MetricCard, MetricCardSkeleton };
+export type { MetricCardProps, MetricCardSkeletonProps };

package/dist/registry/metric-card/metric-card.js

@@ -0,0 +1,67 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Badge } from "../badge/badge.js";
+import { Card } from "../card/card.js";
+import { Skeleton } from "../skeleton/skeleton.js";
+function MetricCard({ label, value, trend, percentage, isLowerBetter = false, variant = "default", className, ...props }) {
+    const showTrend = null != trend && "neutral" !== trend && null != percentage && 0 !== percentage;
+    const isPositiveTrend = isLowerBetter ? "down" === trend : "up" === trend;
+    const sign = "up" === trend ? "+" : "-";
+    const badgeStatus = isPositiveTrend ? "success" : "error";
+    return /*#__PURE__*/ jsx(Card, {
+        "data-slot": "metric-card",
+        variant: variant,
+        className: className,
+        ...props,
+        children: /*#__PURE__*/ jsxs("div", {
+            "data-slot": "metric-card-content",
+            className: "flex flex-col gap-1 p-6",
+            children: [
+                /*#__PURE__*/ jsx("p", {
+                    "data-slot": "metric-card-label",
+                    className: "text-xs font-semibold leading-tight text-muted-foreground line-clamp-2",
+                    children: label
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    "data-slot": "metric-card-value",
+                    className: "flex items-center gap-x-3 gap-y-0.5 flex-wrap",
+                    children: [
+                        /*#__PURE__*/ jsx("p", {
+                            className: "text-2xl md:text-3xl font-bold leading-tight tracking-tight text-foreground",
+                            children: value
+                        }),
+                        showTrend && /*#__PURE__*/ jsx(Badge, {
+                            variant: "secondary",
+                            status: badgeStatus,
+                            children: `${sign}${Math.abs(percentage)}%`
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+function MetricCardSkeleton({ variant = "default", className, ...props }) {
+    return /*#__PURE__*/ jsx(Card, {
+        "data-slot": "metric-card",
+        variant: variant,
+        className: className,
+        ...props,
+        children: /*#__PURE__*/ jsxs("div", {
+            "data-slot": "metric-card-content",
+            className: "flex flex-col gap-1 p-6",
+            children: [
+                /*#__PURE__*/ jsx(Skeleton, {
+                    className: "h-4 w-28"
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: "flex items-center gap-4",
+                    children: /*#__PURE__*/ jsx(Skeleton, {
+                        className: "h-9 w-14"
+                    })
+                })
+            ]
+        })
+    });
+}
+export { MetricCard, MetricCardSkeleton };

package/dist/registry/multi-line-chart/multi-line-chart-view.d.ts

@@ -0,0 +1,15 @@
+export interface MultiLineChartSeries {
+    id: string;
+    label: string;
+    color: string;
+    axis: "left" | "right";
+    formatValue: (value: number) => string;
+    totalText: string;
+    totalLabel: string;
+}
+export interface MultiLineChartProps {
+    data: Array<Record<string, string | number>>;
+    xKey: string;
+    series: MultiLineChartSeries[];
+}
+export declare function MultiLineChart({ data, xKey, series }: MultiLineChartProps): import("react/jsx-runtime").JSX.Element;

package/dist/registry/multi-line-chart/multi-line-chart-view.js

@@ -0,0 +1,149 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Label, Line, LineChart, XAxis, YAxis } from "recharts";
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from "../chart/chart.js";
+function MultiLineChart({ data, xKey, series }) {
+    const left = series.find((s)=>"left" === s.axis);
+    const right = series.find((s)=>"right" === s.axis);
+    const config = Object.fromEntries(series.map((s)=>[
+            s.id,
+            {
+                label: s.label,
+                color: s.color
+            }
+        ]));
+    return /*#__PURE__*/ jsx(ChartContainer, {
+        config: config,
+        className: "aspect-auto h-full w-full",
+        children: /*#__PURE__*/ jsxs(LineChart, {
+            data: data,
+            margin: {
+                top: 50,
+                left: 60,
+                right: 60
+            },
+            children: [
+                /*#__PURE__*/ jsx(XAxis, {
+                    dataKey: xKey
+                }),
+                left && /*#__PURE__*/ jsxs(YAxis, {
+                    yAxisId: "left",
+                    domain: [
+                        "dataMin",
+                        "dataMax"
+                    ],
+                    tickFormatter: (value)=>left.formatValue(Number(value)),
+                    padding: {
+                        top: 20,
+                        bottom: 20
+                    },
+                    children: [
+                        /*#__PURE__*/ jsx(Label, {
+                            position: "top",
+                            offset: 16,
+                            fill: left.color,
+                            value: left.totalLabel,
+                            fontSize: 16,
+                            fontWeight: 600,
+                            textAnchor: "start",
+                            dx: -30,
+                            dy: -20
+                        }),
+                        /*#__PURE__*/ jsx(Label, {
+                            position: "top",
+                            offset: 0,
+                            fill: left.color,
+                            value: left.totalText,
+                            fontSize: 30,
+                            fontWeight: 600,
+                            textAnchor: "start",
+                            dx: -30,
+                            dy: -6
+                        })
+                    ]
+                }),
+                right && /*#__PURE__*/ jsxs(YAxis, {
+                    yAxisId: "right",
+                    orientation: "right",
+                    domain: [
+                        "dataMin",
+                        "dataMax"
+                    ],
+                    tickFormatter: (value)=>right.formatValue(Number(value)),
+                    padding: {
+                        top: 20,
+                        bottom: 20
+                    },
+                    children: [
+                        /*#__PURE__*/ jsx(Label, {
+                            position: "top",
+                            offset: 16,
+                            fill: right.color,
+                            value: right.totalLabel,
+                            fontSize: 16,
+                            fontWeight: 600,
+                            textAnchor: "end",
+                            dx: 30,
+                            dy: -20
+                        }),
+                        /*#__PURE__*/ jsx(Label, {
+                            position: "top",
+                            offset: 0,
+                            fill: right.color,
+                            value: right.totalText,
+                            fontSize: 30,
+                            fontWeight: 600,
+                            textAnchor: "end",
+                            dx: 30,
+                            dy: -6
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(ChartTooltip, {
+                    content: /*#__PURE__*/ jsx(ChartTooltipContent, {
+                        className: "max-w-[240px]",
+                        labelFormatter: String,
+                        formatter: (value, name)=>{
+                            const matched = series.find((s)=>s.label === name || s.id === name);
+                            const formatted = matched ? matched.formatValue(Number(value)) : String(value);
+                            const indicatorColor = matched?.color ?? "var(--color-primary)";
+                            return /*#__PURE__*/ jsxs(Fragment, {
+                                children: [
+                                    /*#__PURE__*/ jsx("div", {
+                                        className: "shrink-0 rounded-[2px] h-2.5 w-2.5",
+                                        style: {
+                                            backgroundColor: indicatorColor,
+                                            borderColor: indicatorColor
+                                        }
+                                    }),
+                                    /*#__PURE__*/ jsxs("div", {
+                                        className: "flex flex-1 justify-between items-center leading-none",
+                                        children: [
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: "text-muted-foreground",
+                                                children: matched?.label ?? String(name)
+                                            }),
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: "text-foreground font-mono font-medium tabular-nums",
+                                                children: formatted
+                                            })
+                                        ]
+                                    })
+                                ]
+                            });
+                        }
+                    })
+                }),
+                series.map((s)=>/*#__PURE__*/ jsx(Line, {
+                        yAxisId: s.axis,
+                        type: "monotone",
+                        dataKey: s.id,
+                        name: s.label,
+                        stroke: s.color,
+                        strokeWidth: 2,
+                        dot: false
+                    }, s.id))
+            ]
+        })
+    });
+}
+export { MultiLineChart };

package/dist/registry/multi-line-chart/multi-line-chart-with-adapter.d.ts

@@ -0,0 +1,7 @@
+import { type ChartDataModel, type DataAdapter, type DatetimeModelField, type MultiLineChartConfiguration } from "../charts-core/charts-core";
+export interface MultiLineChartWithAdapterProps {
+    configuration: MultiLineChartConfiguration;
+    dataModel: ChartDataModel<DatetimeModelField>;
+    dataAdapter: DataAdapter;
+}
+export declare function MultiLineChartWithAdapter({ configuration, dataModel, dataAdapter, }: MultiLineChartWithAdapterProps): import("react/jsx-runtime").JSX.Element;

package/dist/registry/multi-line-chart/multi-line-chart-with-adapter.js

@@ -0,0 +1,83 @@
+import { jsx } from "react/jsx-runtime";
+import { useIsFetching, useSuspenseQuery } from "@tanstack/react-query";
+import { useDeferredValue } from "react";
+import { useVertexTranslation } from "../../lib/vertex-translation.js";
+import { assert } from "../../lib/asserts/assert.js";
+import { assertDefined } from "../../lib/asserts/assert-defined.js";
+import { ChartLoadingBoundary, SpinnerWithChildren, binLabel, formatMetricValue, getChartRange } from "../charts-core/charts-core.js";
+import { MultiLineChart } from "./multi-line-chart-view.js";
+const DEFAULT_COLORS = [
+    "#0d47a1",
+    "#fb8c00"
+];
+function MultiLineChartWithAdapter({ configuration, dataModel, dataAdapter }) {
+    return /*#__PURE__*/ jsx(ChartLoadingBoundary, {
+        configuration: configuration,
+        dataModel: dataModel,
+        children: /*#__PURE__*/ jsx(MultiLineChartResolver, {
+            configuration: configuration,
+            dataModel: dataModel,
+            dataAdapter: dataAdapter
+        })
+    });
+}
+function MultiLineChartResolver({ configuration, dataModel, dataAdapter }) {
+    const { t, i18n: { language } } = useVertexTranslation();
+    const deferrableProps = useDeferredValue({
+        configuration,
+        dataModel
+    });
+    const query = dataAdapter.charts.multiLine(configuration, dataModel);
+    const deferredQuery = dataAdapter.charts.multiLine(deferrableProps.configuration, deferrableProps.dataModel);
+    const isFetching = useIsFetching(query) > 0;
+    const { bins, seriesByMetricId } = useSuspenseQuery(deferredQuery).data;
+    const dimensionId = assertDefined(configuration.dimensions[0], "Multi line chart must have at least one dimension");
+    const dimension = assertDefined(dataModel.dimensions.find((d)=>d.id === dimensionId), `Dimension ${dimensionId} not found in dataModel`);
+    assert("datetime" === dimension.type, "Dimension type must be datetime");
+    const metrics = configuration.metrics.map((id)=>dataModel.metrics.find((m)=>m.id === id)).filter((m)=>null != m);
+    assertDefined(metrics[0], "Primary metric is required");
+    const chartRange = getChartRange({
+        type: dimension.type,
+        bins
+    });
+    const data = bins.map((bin, index)=>{
+        const row = {
+            x: binLabel({
+                locale: language,
+                type: dimension.type,
+                bin,
+                chartRange,
+                isCompact: true
+            })
+        };
+        for (const metric of metrics){
+            const values = seriesByMetricId[metric.id] ?? [];
+            row[metric.id] = values[index] ?? 0;
+        }
+        return row;
+    });
+    const series = metrics.map((metric, idx)=>{
+        const total = (seriesByMetricId[metric.id] ?? []).reduce((sum, v)=>sum + v, 0);
+        const color = DEFAULT_COLORS[idx % DEFAULT_COLORS.length] ?? DEFAULT_COLORS[0] ?? "#000";
+        return {
+            id: metric.id,
+            label: metric.display,
+            color,
+            axis: 0 === idx ? "left" : "right",
+            formatValue: (value)=>formatMetricValue(language, value, metric.expression),
+            totalText: formatMetricValue(language, total, metric.expression),
+            totalLabel: t("total_metric", {
+                metric: metric.display
+            })
+        };
+    });
+    return /*#__PURE__*/ jsx(SpinnerWithChildren, {
+        loading: isFetching,
+        children: /*#__PURE__*/ jsx(MultiLineChart, {
+            data: data,
+            xKey: "x",
+            series: series
+        })
+    });
+}
+export { MultiLineChartWithAdapter };

package/dist/registry/multi-line-chart/multi-line-chart.d.ts

@@ -0,0 +1,2 @@
+export { MultiLineChart, type MultiLineChartProps, type MultiLineChartSeries, } from "./multi-line-chart-view";
+export { MultiLineChartWithAdapter, type MultiLineChartWithAdapterProps, } from "./multi-line-chart-with-adapter";

package/dist/registry/multi-line-chart/multi-line-chart.js

@@ -0,0 +1,3 @@
+import { MultiLineChart } from "./multi-line-chart-view.js";
+import { MultiLineChartWithAdapter } from "./multi-line-chart-with-adapter.js";
+export { MultiLineChart, MultiLineChartWithAdapter };

package/dist/registry/navigation-menu/navigation-menu.d.ts

@@ -0,0 +1,14 @@
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import * as React from "react";
+declare function NavigationMenu({ className, children, viewport, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+    viewport?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function NavigationMenuList({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.List>): import("react/jsx-runtime").JSX.Element;
+declare function NavigationMenuItem({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+declare const navigationMenuTriggerStyle: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare function NavigationMenuTrigger({ className, children, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function NavigationMenuContent({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function NavigationMenuViewport({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>): import("react/jsx-runtime").JSX.Element;
+declare function NavigationMenuLink({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Link>): import("react/jsx-runtime").JSX.Element;
+declare function NavigationMenuIndicator({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>): import("react/jsx-runtime").JSX.Element;
+export { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, navigationMenuTriggerStyle, };