@principal-ai/principal-view-react 0.14.14 → 0.14.15

package/dist/components/dashboard/DashboardRenderer.d.ts

@@ -0,0 +1,9 @@
+/**
+ * DashboardRenderer
+ *
+ * Main component for rendering a dashboard from a DashboardDefinition.
+ * Takes a dashboard definition JSON and a data provider, renders all metrics.
+ */
+import type { DashboardRendererProps } from './types';
+export declare function DashboardRenderer({ dashboard, dataProvider, timeRange: controlledTimeRange, onTimeRangeChange, refreshInterval: controlledRefreshInterval, onRefreshIntervalChange, timeRangeConfig, onMetricClick, onSourceClick, }: DashboardRendererProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DashboardRenderer.d.ts.map

package/dist/components/dashboard/DashboardRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardRenderer.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/DashboardRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,KAAK,EAAE,sBAAsB,EAA4D,MAAM,SAAS,CAAC;AAkChH,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,YAAY,EACZ,SAAS,EAAE,mBAAmB,EAC9B,iBAAiB,EACjB,eAAe,EAAE,yBAAyB,EAC1C,uBAAuB,EACvB,eAAe,EACf,aAAa,EACb,aAAa,GACd,EAAE,sBAAsB,2CAuQxB"}

package/dist/components/dashboard/DashboardRenderer.js

@@ -0,0 +1,179 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * DashboardRenderer
+ *
+ * Main component for rendering a dashboard from a DashboardDefinition.
+ * Takes a dashboard definition JSON and a data provider, renders all metrics.
+ */
+import { useMemo, useState, useEffect } from 'react';
+import { useTheme } from '@principal-ade/industry-theme';
+import { MetricPanel } from './MetricPanel';
+import { MockDataProvider } from './MockDataProvider';
+import { TimeRangeSelector } from './components';
+function useBreakpoint(breakpoints) {
+    const mobileBreak = breakpoints?.mobile ?? 768;
+    const tabletBreak = breakpoints?.tablet ?? 1024;
+    const [breakpoint, setBreakpoint] = useState(() => {
+        if (typeof window === 'undefined')
+            return 'desktop';
+        const width = window.innerWidth;
+        if (width < mobileBreak)
+            return 'mobile';
+        if (width < tabletBreak)
+            return 'tablet';
+        return 'desktop';
+    });
+    useEffect(() => {
+        const handleResize = () => {
+            const width = window.innerWidth;
+            if (width < mobileBreak)
+                setBreakpoint('mobile');
+            else if (width < tabletBreak)
+                setBreakpoint('tablet');
+            else
+                setBreakpoint('desktop');
+        };
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [mobileBreak, tabletBreak]);
+    return breakpoint;
+}
+export function DashboardRenderer({ dashboard, dataProvider, timeRange: controlledTimeRange, onTimeRangeChange, refreshInterval: controlledRefreshInterval, onRefreshIntervalChange, timeRangeConfig, onMetricClick, onSourceClick, }) {
+    const { theme } = useTheme();
+    const breakpoint = useBreakpoint(dashboard.layout.breakpoints);
+    // Internal state for uncontrolled time range
+    const [internalTimeRange, setInternalTimeRange] = useState({
+        preset: timeRangeConfig?.defaultRange ?? 'last_1h',
+    });
+    const [internalRefreshInterval, setInternalRefreshInterval] = useState(timeRangeConfig?.defaultRefresh ?? 'off');
+    // Use controlled or internal state
+    const timeRange = controlledTimeRange ?? internalTimeRange;
+    const refreshInterval = controlledRefreshInterval ?? internalRefreshInterval;
+    const handleTimeRangeChange = (range) => {
+        if (onTimeRangeChange) {
+            onTimeRangeChange(range);
+        }
+        else {
+            setInternalTimeRange(range);
+        }
+    };
+    const handleRefreshIntervalChange = (interval) => {
+        if (onRefreshIntervalChange) {
+            onRefreshIntervalChange(interval);
+        }
+        else {
+            setInternalRefreshInterval(interval);
+        }
+    };
+    // Grid configuration
+    const gridColumns = dashboard.layout.columns ?? 12;
+    const gridGap = dashboard.layout.gap ?? 16;
+    // Use provided data provider or create a mock one
+    const data = useMemo(() => {
+        const provider = dataProvider || new MockDataProvider(dashboard);
+        return provider.getAll();
+    }, [dashboard, dataProvider]);
+    // Build a map of metric ID → metric definition for quick lookup
+    const metricsMap = useMemo(() => {
+        const map = new Map();
+        for (const metric of dashboard.metrics) {
+            map.set(metric.id, metric);
+        }
+        return map;
+    }, [dashboard.metrics]);
+    const handleSourceClick = (source) => {
+        if (onSourceClick) {
+            onSourceClick(source);
+        }
+        else {
+            // Default behavior: log to console
+            console.log('Source clicked:', source);
+        }
+    };
+    // Get span for current breakpoint
+    const getSpan = (placement, totalPanels) => {
+        // Mobile defaults to full width
+        if (breakpoint === 'mobile') {
+            return placement.spanMobile ?? gridColumns;
+        }
+        // Tablet uses spanTablet or falls back to span
+        if (breakpoint === 'tablet') {
+            return placement.spanTablet ?? placement.span ?? Math.floor(gridColumns / Math.min(totalPanels, 2));
+        }
+        // Desktop uses spanDesktop or span or auto-calculate
+        return placement.spanDesktop ?? placement.span ?? Math.floor(gridColumns / Math.min(totalPanels, 3));
+    };
+    return (_jsxs("div", { style: {
+            backgroundColor: theme.colors.background,
+            color: theme.colors.text,
+            padding: theme.space?.[4] || 24,
+            minHeight: '100%',
+            fontFamily: theme.fonts.body,
+        }, children: [_jsxs("div", { style: { marginBottom: theme.space?.[4] || 24 }, children: [_jsxs("div", { style: {
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            alignItems: 'flex-start',
+                            gap: theme.space?.[3] || 16,
+                            flexWrap: 'wrap',
+                        }, children: [_jsx("h1", { style: {
+                                    fontSize: theme.fontSizes[4],
+                                    fontWeight: theme.fontWeights.semibold,
+                                    fontFamily: theme.fonts.heading,
+                                    margin: 0,
+                                    color: theme.colors.text,
+                                }, children: dashboard.name }), _jsx(TimeRangeSelector, { timeRange: timeRange, onTimeRangeChange: handleTimeRangeChange, refreshInterval: refreshInterval, onRefreshIntervalChange: handleRefreshIntervalChange, config: timeRangeConfig })] }), dashboard.description && (_jsx("p", { style: {
+                            fontSize: theme.fontSizes[1],
+                            color: theme.colors.textSecondary,
+                            margin: 0,
+                            marginTop: theme.space?.[2] || 8,
+                            marginBottom: theme.space?.[3] || 12,
+                            lineHeight: theme.lineHeights.body,
+                        }, children: dashboard.description })), dashboard.externalLinks && Object.keys(dashboard.externalLinks).length > 0 && (_jsx("div", { style: { display: 'flex', gap: theme.space?.[3] || 12 }, children: Object.entries(dashboard.externalLinks).map(([name, url]) => (url && (_jsxs("a", { href: url, target: "_blank", rel: "noopener noreferrer", style: {
+                                fontSize: theme.fontSizes[0],
+                                color: theme.colors.primary || theme.colors.accent,
+                                textDecoration: 'none',
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: 4,
+                            }, children: [_jsxs("svg", { width: 12, height: 12, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [_jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }), _jsx("polyline", { points: "15 3 21 3 21 9" }), _jsx("line", { x1: "10", y1: "14", x2: "21", y2: "3" })] }), name] }, name)))) }))] }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: theme.space?.[4] || 24 }, children: dashboard.layout.rows.map((row, rowIndex) => (_jsxs("div", { children: [row.title && (_jsx("h2", { style: {
+                                fontSize: theme.fontSizes[2],
+                                fontWeight: theme.fontWeights.medium,
+                                fontFamily: theme.fonts.heading,
+                                margin: 0,
+                                marginBottom: theme.space?.[3] || 12,
+                                color: theme.colors.text,
+                                paddingBottom: theme.space?.[2] || 8,
+                                borderBottom: `1px solid ${theme.colors.border}`,
+                            }, children: row.title })), _jsx("div", { style: {
+                                display: 'grid',
+                                gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,
+                                gap: gridGap,
+                            }, children: row.panels.map((panel) => {
+                                const span = getSpan(panel, row.panels.length);
+                                const metric = metricsMap.get(panel.id);
+                                const panelStyle = {
+                                    gridColumn: `span ${span}`,
+                                    minHeight: panel.minHeight,
+                                    height: panel.height === 'auto' ? 'auto' : panel.height,
+                                };
+                                if (!metric) {
+                                    return (_jsxs("div", { style: {
+                                            ...panelStyle,
+                                            backgroundColor: theme.colors.surface || theme.colors.background,
+                                            border: `1px solid ${theme.colors.error}`,
+                                            borderRadius: theme.radii?.[2] || 8,
+                                            padding: theme.space?.[3] || 16,
+                                            color: theme.colors.error,
+                                            fontSize: theme.fontSizes[1],
+                                        }, children: ["Metric not found: ", panel.id] }, panel.id));
+                                }
+                                return (_jsx("div", { style: panelStyle, children: _jsx(MetricPanel, { metric: metric, data: data[panel.id] || { error: 'No data' }, onMetricClick: onMetricClick, onSourceClick: handleSourceClick }) }, panel.id));
+                            }) })] }, rowIndex))) }), dashboard.owner && (_jsxs("div", { style: {
+                    marginTop: theme.space?.[5] || 32,
+                    paddingTop: theme.space?.[3] || 16,
+                    borderTop: `1px solid ${theme.colors.border}`,
+                    fontSize: theme.fontSizes[0],
+                    color: theme.colors.textSecondary,
+                }, children: ["Owner: ", dashboard.owner] }))] }));
+}
+//# sourceMappingURL=DashboardRenderer.js.map

package/dist/components/dashboard/DashboardRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardRenderer.js","sourceRoot":"","sources":["../../../src/components/dashboard/DashboardRenderer.tsx"],"names":[],"mappings":"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"}

package/dist/components/dashboard/MetricPanel.d.ts

@@ -0,0 +1,9 @@
+/**
+ * MetricPanel
+ *
+ * Wrapper component that determines which visualization to render
+ * based on the metric definition and data.
+ */
+import type { MetricPanelProps } from './types';
+export declare function MetricPanel({ metric, data, onMetricClick, onSourceClick, }: MetricPanelProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MetricPanel.d.ts.map

package/dist/components/dashboard/MetricPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricPanel.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/MetricPanel.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,KAAK,EACV,gBAAgB,EAIjB,MAAM,SAAS,CAAC;AAGjB,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,IAAI,EACJ,aAAa,EACb,aAAa,GACd,EAAE,gBAAgB,2CA6ElB"}

package/dist/components/dashboard/MetricPanel.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from '@principal-ade/industry-theme';
+import { MetricCard, LineChart, BarChart, SourceLink } from './components';
+export function MetricPanel({ metric, data, onMetricClick, onSourceClick, }) {
+    const { theme } = useTheme();
+    // Determine which component to use
+    const componentType = getComponentType(metric, data);
+    // Render loading state
+    if (data.loading) {
+        return (_jsx("div", { style: {
+                backgroundColor: theme.colors.surface || theme.colors.background,
+                border: `1px solid ${theme.colors.border}`,
+                borderRadius: theme.radii?.[2] || 8,
+                padding: theme.space?.[3] || 16,
+                minHeight: 100,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontFamily: theme.fonts.body,
+            }, children: _jsx("span", { style: { color: theme.colors.textSecondary, fontSize: theme.fontSizes[1] }, children: "Loading..." }) }));
+    }
+    // Render error state
+    if (data.error) {
+        return (_jsxs("div", { style: {
+                backgroundColor: theme.colors.surface || theme.colors.background,
+                border: `1px solid ${theme.colors.error}`,
+                borderRadius: theme.radii?.[2] || 8,
+                padding: theme.space?.[3] || 16,
+                fontFamily: theme.fonts.body,
+            }, children: [_jsx("div", { style: {
+                        color: theme.colors.error,
+                        marginBottom: theme.space?.[2] || 8,
+                        fontSize: theme.fontSizes[1],
+                        fontWeight: theme.fontWeights.medium,
+                    }, children: metric.name }), _jsx("div", { style: { color: theme.colors.textSecondary, fontSize: theme.fontSizes[0] }, children: data.error })] }));
+    }
+    const handleClick = () => {
+        onMetricClick?.(metric.id);
+    };
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: [renderComponent(componentType, metric, data, handleClick), metric.sources && metric.sources.length > 0 && onSourceClick && (_jsx("div", { style: { display: 'flex', gap: 8, flexWrap: 'wrap' }, children: metric.sources.map((source, i) => (_jsx(SourceLink, { source: source, onClick: onSourceClick }, i))) }))] }));
+}
+/**
+ * Determine which component to render based on metric definition and data
+ */
+function getComponentType(metric, data) {
+    // Explicit display hint takes precedence
+    if (metric.display?.component) {
+        return metric.display.component;
+    }
+    const { type, query } = metric;
+    // Time series data → chart
+    if (data.series && data.series.length > 0) {
+        if (query.groupBy && query.groupBy.length > 0) {
+            return 'StackedBarChart';
+        }
+        return 'LineChart';
+    }
+    // Histogram data
+    if (data.histogram) {
+        return 'Histogram';
+    }
+    // Counter with time grouping → line/bar chart (but no series data yet)
+    if (type === 'counter' && query.timeGroup) {
+        return query.groupBy?.length ? 'BarChart' : 'LineChart';
+    }
+    // Gauge (percentage) → gauge or metric card
+    if (type === 'gauge') {
+        return metric.thresholds ? 'GaugeChart' : 'MetricCard';
+    }
+    // Default to metric card
+    return 'MetricCard';
+}
+/**
+ * Render the appropriate component
+ */
+function renderComponent(componentType, metric, data, onClick) {
+    switch (componentType) {
+        case 'MetricCard':
+        case 'GaugeChart': // Use MetricCard for now, can add GaugeChart later
+            return (_jsx(MetricCard, { title: metric.name, value: data.current ?? 0, unit: metric.unit, description: metric.description, trend: data.trend, changePercent: data.changePercent, showTrend: metric.display?.showTrend ?? true, showSparkline: metric.display?.showSparkline, sparklineData: data.series, thresholds: metric.thresholds, size: metric.display?.size || 'medium', onClick: onClick }));
+        case 'LineChart':
+            return (_jsx(LineChart, { title: metric.name, data: data.series || [], xKey: "date", yKey: "value", unit: metric.unit, onClick: onClick }));
+        case 'BarChart':
+        case 'StackedBarChart':
+            // Extract series keys from data
+            const series = data.series && data.series.length > 0
+                ? Object.keys(data.series[0]).filter(k => k !== 'date')
+                : metric.query.groupBy || [];
+            return (_jsx(BarChart, { title: metric.name, data: data.series || [], xKey: "date", series: series, stacked: componentType === 'StackedBarChart', unit: metric.unit, onClick: onClick }));
+        case 'Histogram':
+            // TODO: Implement Histogram component
+            return (_jsx(MetricCard, { title: metric.name, value: "Histogram (TODO)", description: metric.description, onClick: onClick }));
+        case 'PieChart':
+            // TODO: Implement PieChart component
+            return (_jsx(MetricCard, { title: metric.name, value: "PieChart (TODO)", description: metric.description, onClick: onClick }));
+        case 'DataTable':
+            // TODO: Implement DataTable component
+            return (_jsx(MetricCard, { title: metric.name, value: "DataTable (TODO)", description: metric.description, onClick: onClick }));
+        default:
+            return (_jsx(MetricCard, { title: metric.name, value: data.current ?? 0, unit: metric.unit, onClick: onClick }));
+    }
+}
+//# sourceMappingURL=MetricPanel.js.map

package/dist/components/dashboard/MetricPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricPanel.js","sourceRoot":"","sources":["../../../src/components/dashboard/MetricPanel.tsx"],"names":[],"mappings":"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"}

package/dist/components/dashboard/MockDataProvider.d.ts

@@ -0,0 +1,30 @@
+/**
+ * MockDataProvider
+ *
+ * Provides mock data for dashboard metrics during prototyping.
+ * Can use inline _mockData from the dashboard definition or generate realistic data.
+ */
+import type { DashboardDefinition, MetricData, DataProvider } from './types';
+export declare class MockDataProvider implements DataProvider {
+    private data;
+    constructor(dashboard: DashboardDefinition);
+    get(metricId: string): MetricData;
+    getAll(): Record<string, MetricData>;
+    private resolveData;
+    private transformMockData;
+    private generateData;
+    private generateTimeSeries;
+    private generateGaugeData;
+    private generateCounterData;
+    private generateHistogramData;
+    private getPointCount;
+    private getBaseValue;
+    private generateDates;
+    private getWeekNumber;
+    private getGroupValues;
+}
+/**
+ * Create a mock data provider from a dashboard definition
+ */
+export declare function createMockDataProvider(dashboard: DashboardDefinition): DataProvider;
+//# sourceMappingURL=MockDataProvider.d.ts.map

package/dist/components/dashboard/MockDataProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MockDataProvider.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/MockDataProvider.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EACV,mBAAmB,EAEnB,UAAU,EACV,YAAY,EAEb,MAAM,SAAS,CAAC;AAEjB,qBAAa,gBAAiB,YAAW,YAAY;IACnD,OAAO,CAAC,IAAI,CAAkC;gBAElC,SAAS,EAAE,mBAAmB;IAM1C,GAAG,CAAC,QAAQ,EAAE,MAAM,GAAG,UAAU;IAIjC,MAAM,IAAI,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC;IAIpC,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,iBAAiB;IA4CzB,OAAO,CAAC,YAAY;IA4BpB,OAAO,CAAC,kBAAkB;IAqC1B,OAAO,CAAC,iBAAiB;IAmCzB,OAAO,CAAC,mBAAmB;IAW3B,OAAO,CAAC,qBAAqB;IAqC7B,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,YAAY;IAcpB,OAAO,CAAC,aAAa;IAqCrB,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,cAAc;CAcvB;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,SAAS,EAAE,mBAAmB,GAAG,YAAY,CAEnF"}

package/dist/components/dashboard/MockDataProvider.js

@@ -0,0 +1,270 @@
+/**
+ * MockDataProvider
+ *
+ * Provides mock data for dashboard metrics during prototyping.
+ * Can use inline _mockData from the dashboard definition or generate realistic data.
+ */
+export class MockDataProvider {
+    constructor(dashboard) {
+        this.data = {};
+        for (const metric of dashboard.metrics) {
+            this.data[metric.id] = this.resolveData(metric);
+        }
+    }
+    get(metricId) {
+        return this.data[metricId] || { error: `No data for metric: ${metricId}` };
+    }
+    getAll() {
+        return this.data;
+    }
+    resolveData(metric) {
+        // Use inline mock data if provided
+        if (metric._mockData) {
+            return this.transformMockData(metric._mockData, metric);
+        }
+        // Generate data based on metric type and query
+        return this.generateData(metric);
+    }
+    transformMockData(mockData, _metric) {
+        const result = {};
+        if (mockData.current !== undefined) {
+            result.current = mockData.current;
+        }
+        if (mockData.previous !== undefined) {
+            result.previous = mockData.previous;
+            // Calculate change percent if not provided
+            if (result.current !== undefined) {
+                result.changePercent =
+                    ((result.current - mockData.previous) / mockData.previous) * 100;
+                result.trend =
+                    result.changePercent > 0
+                        ? 'up'
+                        : result.changePercent < 0
+                            ? 'down'
+                            : 'flat';
+            }
+        }
+        if (mockData.trend) {
+            result.trend = mockData.trend;
+        }
+        if (mockData.series) {
+            result.series = mockData.series;
+        }
+        if (mockData.breakdown) {
+            result.breakdown = mockData.breakdown;
+        }
+        if (mockData.histogram) {
+            result.histogram = mockData.histogram;
+        }
+        return result;
+    }
+    generateData(metric) {
+        const { type, query } = metric;
+        // Time series data
+        if (query.timeGroup) {
+            return this.generateTimeSeries(metric);
+        }
+        // Single value
+        if (type === 'gauge') {
+            return this.generateGaugeData(metric);
+        }
+        if (type === 'counter') {
+            return this.generateCounterData(metric);
+        }
+        if (type === 'histogram') {
+            return this.generateHistogramData(metric);
+        }
+        // Fallback
+        return {
+            current: Math.floor(Math.random() * 1000),
+            trend: 'flat',
+        };
+    }
+    generateTimeSeries(metric) {
+        const { query } = metric;
+        const points = this.getPointCount(query.timeGroup);
+        const series = [];
+        const baseValue = this.getBaseValue(metric);
+        const variance = 0.2;
+        // Generate dates
+        const dates = this.generateDates(query.timeGroup, points);
+        if (query.groupBy && query.groupBy.length > 0) {
+            // Grouped data (e.g., by isMobile)
+            const groups = this.getGroupValues(query.groupBy[0]);
+            for (let i = 0; i < points; i++) {
+                const point = { date: dates[i] };
+                for (const group of groups) {
+                    point[group] = Math.floor(baseValue * (0.3 + Math.random() * 0.7) * (1 + (Math.random() - 0.5) * variance));
+                }
+                series.push(point);
+            }
+        }
+        else {
+            // Simple time series
+            for (let i = 0; i < points; i++) {
+                series.push({
+                    date: dates[i],
+                    value: Math.floor(baseValue * (1 + (Math.random() - 0.5) * variance)),
+                });
+            }
+        }
+        return { series };
+    }
+    generateGaugeData(metric) {
+        const { query } = metric;
+        // Percentage derivations
+        if (query.derivation === 'percentage' ||
+            query.derivation === 'error_rate' ||
+            query.derivation === 'success_rate') {
+            const current = Math.random() * 100;
+            const previous = Math.random() * 100;
+            return {
+                current: Math.round(current * 10) / 10,
+                previous: Math.round(previous * 10) / 10,
+                trend: current > previous ? 'up' : current < previous ? 'down' : 'flat',
+                changePercent: Math.round(((current - previous) / previous) * 100 * 10) / 10,
+            };
+        }
+        // Rate
+        if (query.derivation === 'rate') {
+            const current = Math.floor(Math.random() * 1000);
+            const previous = Math.floor(Math.random() * 1000);
+            return {
+                current,
+                previous,
+                trend: current > previous ? 'up' : current < previous ? 'down' : 'flat',
+                changePercent: Math.round(((current - previous) / previous) * 100),
+            };
+        }
+        const current = Math.floor(Math.random() * 10000);
+        return { current, trend: 'flat' };
+    }
+    generateCounterData(_metric) {
+        const current = Math.floor(Math.random() * 100000);
+        const previous = Math.floor(Math.random() * 100000);
+        return {
+            current,
+            previous,
+            trend: current > previous ? 'up' : current < previous ? 'down' : 'flat',
+            changePercent: Math.round(((current - previous) / previous) * 100),
+        };
+    }
+    generateHistogramData(metric) {
+        const { query } = metric;
+        // Percentile value
+        if (query.percentile) {
+            const values = [50, 120, 200, 350, 500, 800, 1200];
+            const percentileIndex = Math.min(Math.floor((query.percentile / 100) * values.length), values.length - 1);
+            const current = values[percentileIndex] + Math.floor(Math.random() * 100);
+            const previous = values[percentileIndex] + Math.floor(Math.random() * 100);
+            return {
+                current,
+                previous,
+                trend: current > previous ? 'up' : current < previous ? 'down' : 'flat',
+                changePercent: Math.round(((current - previous) / previous) * 100),
+            };
+        }
+        // Full histogram
+        return {
+            histogram: {
+                buckets: ['0-50ms', '50-100ms', '100-200ms', '200-500ms', '500ms-1s', '>1s'],
+                counts: [
+                    Math.floor(Math.random() * 1000),
+                    Math.floor(Math.random() * 800),
+                    Math.floor(Math.random() * 400),
+                    Math.floor(Math.random() * 200),
+                    Math.floor(Math.random() * 100),
+                    Math.floor(Math.random() * 50),
+                ],
+            },
+        };
+    }
+    getPointCount(timeGroup) {
+        switch (timeGroup) {
+            case 'minute':
+                return 60;
+            case 'hour':
+                return 24;
+            case 'day':
+                return 7;
+            case 'week':
+                return 12;
+            case 'month':
+                return 12;
+            default:
+                return 7;
+        }
+    }
+    getBaseValue(metric) {
+        // Estimate reasonable base value based on metric type
+        if (metric.query.derivation === 'percentage' || metric.query.derivation === 'error_rate') {
+            return 50;
+        }
+        if (metric.unit === 'views' || metric.unit === 'count') {
+            return 10000;
+        }
+        if (metric.unit === 'milliseconds' || metric.unit === 'ms') {
+            return 200;
+        }
+        return 1000;
+    }
+    generateDates(timeGroup, count) {
+        const dates = [];
+        const now = new Date();
+        for (let i = count - 1; i >= 0; i--) {
+            const date = new Date(now);
+            switch (timeGroup) {
+                case 'minute':
+                    date.setMinutes(date.getMinutes() - i);
+                    dates.push(date.toISOString().slice(11, 16)); // HH:MM
+                    break;
+                case 'hour':
+                    date.setHours(date.getHours() - i);
+                    dates.push(date.toISOString().slice(11, 13) + ':00'); // HH:00
+                    break;
+                case 'day':
+                    date.setDate(date.getDate() - i);
+                    dates.push(date.toISOString().slice(0, 10)); // YYYY-MM-DD
+                    break;
+                case 'week':
+                    date.setDate(date.getDate() - i * 7);
+                    dates.push(`W${this.getWeekNumber(date)}`);
+                    break;
+                case 'month':
+                    date.setMonth(date.getMonth() - i);
+                    dates.push(date.toISOString().slice(0, 7)); // YYYY-MM
+                    break;
+                default:
+                    date.setDate(date.getDate() - i);
+                    dates.push(date.toISOString().slice(0, 10));
+            }
+        }
+        return dates;
+    }
+    getWeekNumber(date) {
+        const firstDayOfYear = new Date(date.getFullYear(), 0, 1);
+        const pastDaysOfYear = (date.getTime() - firstDayOfYear.getTime()) / 86400000;
+        return Math.ceil((pastDaysOfYear + firstDayOfYear.getDay() + 1) / 7);
+    }
+    getGroupValues(groupBy) {
+        // Common group values based on attribute name
+        if (groupBy === 'isMobile') {
+            return ['mobile', 'desktop'];
+        }
+        if (groupBy === 'status' || groupBy === 'status.code') {
+            return ['success', 'error'];
+        }
+        if (groupBy === 'user.tier') {
+            return ['free', 'pro', 'enterprise'];
+        }
+        // Default generic groups
+        return ['group_a', 'group_b'];
+    }
+}
+/**
+ * Create a mock data provider from a dashboard definition
+ */
+export function createMockDataProvider(dashboard) {
+    return new MockDataProvider(dashboard);
+}
+//# sourceMappingURL=MockDataProvider.js.map