elseware-ui 2.32.0 → 2.33.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { twMerge } from 'tailwind-merge';
-import React4, { createContext, forwardRef, useState, useImperativeHandle, useEffect, useMemo, useContext, Fragment as Fragment$1, useRef, useCallback } from 'react';
+import React3, { createContext, forwardRef, useState, useImperativeHandle, useEffect, useMemo, useContext, Fragment as Fragment$1, useCallback, useRef } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { BsStarFill, BsStarHalf, BsStar, BsChevronDown, BsFillDiamondFill } from 'react-icons/bs';
 import { FaSun, FaMoon, FaGripVertical, FaTrash, FaPlus, FaTimes, FaBars, FaCircle, FaEyeSlash, FaEye } from 'react-icons/fa';
@@ -10,7 +10,7 @@ import classNames16 from 'classnames';
 import { FaCircleChevronDown } from 'react-icons/fa6';
 import ReactWorldFlags from 'react-world-flags';
 import emojiFlags from 'emoji-flags';
-import * as d3 from 'd3';
+import { ResponsiveContainer, LineChart as LineChart$1, CartesianGrid, XAxis, YAxis, Tooltip as Tooltip$1, Line as Line$1, AreaChart, Area, BarChart as BarChart$1, Bar as Bar$1, PieChart as PieChart$1, Pie as Pie$1, Cell, ScatterChart, Scatter } from 'recharts';
 import { Image, CloudinaryContext as CloudinaryContext$1 } from 'cloudinary-react';
 import { useField, ErrorMessage, Formik, Form as Form$1, Field, useFormikContext, FieldArray } from 'formik';
 import { toast, ToastContainer } from 'react-toastify';
@@ -1320,257 +1320,2444 @@ var Flag = ({
   );
 };
 
-// src/components/data-display/graphs/layouts/registry.ts
-var registry = /* @__PURE__ */ new Map();
-var registerLayout = (type, executor) => {
-  registry.set(type, executor);
+// src/components/data-display/graphs-v2/constants/graph.constants.ts
+var GRAPH_DEFAULT_HEIGHT = 320;
+var GRAPH_DEFAULT_MAX_REALTIME_POINTS = 100;
+var GRAPH_DEFAULT_POLLING_INTERVAL = 5e3;
+var GRAPH_DEFAULT_ANIMATION_DURATION = 350;
+var GRAPH_DEFAULT_MARGIN = {
+  top: 16,
+  right: 24,
+  bottom: 16,
+  left: 8
 };
-var getLayout = (type) => {
-  const layout = registry.get(type);
-  if (!layout) {
-    throw new Error(`Layout "${type}" not registered`);
-  }
-  return layout;
+var GRAPH_DEFAULT_STROKE_WIDTH = 2;
+var GRAPH_DEFAULT_DOT_RADIUS = 3;
+var GRAPH_DEFAULT_ACTIVE_DOT_RADIUS = 5;
+var GRAPH_DEFAULT_BAR_RADIUS = [
+  6,
+  6,
+  0,
+  0
+];
+var GRAPH_STATUSES = {
+  IDLE: "idle",
+  LOADING: "loading",
+  SUCCESS: "success",
+  ERROR: "error",
+  STREAMING: "streaming"
+};
+var GRAPH_DATA_MODES = {
+  STATIC: "static",
+  POLLING: "polling",
+  REALTIME: "realtime"
+};
+var GRAPH_VALUE_FORMATS = {
+  RAW: "raw",
+  NUMBER: "number",
+  INTEGER: "integer",
+  COMPACT: "compact",
+  PERCENT: "percent",
+  CURRENCY: "currency",
+  BYTES: "bytes",
+  DURATION: "duration"
+};
+var GRAPH_EMPTY_MESSAGE = "No graph data available";
+var GRAPH_ERROR_MESSAGE = "Unable to load graph data";
+var GRAPH_LOADING_MESSAGE = "Loading graph data...";
+
+// src/components/data-display/graphs-v2/constants/graph-theme.constants.ts
+var GRAPH_COLOR_PALETTE = [
+  "#7dd3fc",
+  "#a78bfa",
+  "#34d399",
+  "#fbbf24",
+  "#fb7185",
+  "#60a5fa",
+  "#f472b6",
+  "#22d3ee",
+  "#c084fc",
+  "#a3e635"
+];
+var GRAPH_STATUS_COLORS = {
+  primary: "#7dd3fc",
+  secondary: "#a78bfa",
+  success: "#34d399",
+  warning: "#fbbf24",
+  danger: "#fb7185",
+  info: "#60a5fa",
+  muted: "#6b7280"
+};
+var GRAPH_DARK_THEME = {
+  panel: {
+    background: "bg-[#111217]",
+    border: "border border-[#2a2d35]",
+    radius: "rounded-xl",
+    shadow: "shadow-sm"
+  },
+  text: {
+    title: "text-gray-100",
+    description: "text-gray-400",
+    muted: "text-gray-500"
+  },
+  chart: {
+    grid: "#2a2d35",
+    axis: "#8b949e",
+    cursor: "rgba(255, 255, 255, 0.06)"
+  },
+  tooltip: {
+    background: "#181b21",
+    border: "#2a2d35",
+    text: "#f3f4f6",
+    muted: "#9ca3af"
+  },
+  colors: GRAPH_COLOR_PALETTE
+};
+var GRAPH_LIGHT_THEME = {
+  panel: {
+    background: "bg-white",
+    border: "border border-gray-200",
+    radius: "rounded-xl",
+    shadow: "shadow-sm"
+  },
+  text: {
+    title: "text-gray-900",
+    description: "text-gray-500",
+    muted: "text-gray-400"
+  },
+  chart: {
+    grid: "#e5e7eb",
+    axis: "#6b7280",
+    cursor: "rgba(0, 0, 0, 0.04)"
+  },
+  tooltip: {
+    background: "#ffffff",
+    border: "#e5e7eb",
+    text: "#111827",
+    muted: "#6b7280"
+  },
+  colors: GRAPH_COLOR_PALETTE
+};
+var DEFAULT_GRAPH_THEME = GRAPH_DARK_THEME;
+
+// src/components/data-display/graphs-v2/utils/normalizeGraphData.ts
+var DEFAULT_NORMALIZE_OPTIONS = {
+  serializeDates: true,
+  parseNumericStrings: true,
+  sanitizeInvalidNumbers: true,
+  removeUndefined: true
 };
-var createForceLayout = (nodes, edges, width, height) => {
-  const nodeMap = new Map(nodes.map((n) => [n.id, n]));
-  const d3Links = edges.filter((e) => {
-    const fromId = typeof e.from === "string" ? e.from : e.from.id;
-    const toId = typeof e.to === "string" ? e.to : e.to.id;
-    const valid = nodeMap.has(fromId) && nodeMap.has(toId);
-    if (!valid) {
-      console.warn("Invalid edge skipped:", e);
+function isNumericString(value) {
+  if (!value.trim()) {
+    return false;
+  }
+  return !Number.isNaN(Number(value));
+}
+function normalizeValue(value, options) {
+  if (value instanceof Date) {
+    return options.serializeDates ? value.toISOString() : value;
+  }
+  if (typeof value === "number") {
+    if (options.sanitizeInvalidNumbers && (Number.isNaN(value) || !Number.isFinite(value))) {
+      return null;
     }
-    return valid;
-  }).map((e) => ({
-    source: typeof e.from === "string" ? e.from : e.from.id,
-    target: typeof e.to === "string" ? e.to : e.to.id,
-    weight: e.weight
-  }));
-  return d3.forceSimulation(nodes).force(
-    "link",
-    d3.forceLink(d3Links).id((d) => d.id).distance(120).strength(0.7)
-  ).force("charge", d3.forceManyBody().strength(-280)).force("center", d3.forceCenter(width / 2, height / 2)).force("collision", d3.forceCollide().radius(35));
+    return value;
+  }
+  if (typeof value === "string") {
+    if (options.parseNumericStrings && isNumericString(value)) {
+      return Number(value);
+    }
+    return value;
+  }
+  if (typeof value === "boolean" || value === null || value === void 0) {
+    return value;
+  }
+  return String(value);
+}
+function normalizeGraphData(data, options = {}) {
+  if (!Array.isArray(data)) {
+    return [];
+  }
+  const resolvedOptions = {
+    ...DEFAULT_NORMALIZE_OPTIONS,
+    ...options
+  };
+  return data.map((item) => {
+    const normalizedPoint = {};
+    const keys = options.keys ?? Object.keys(item);
+    keys.forEach((key) => {
+      const value = normalizeValue(item[key], resolvedOptions);
+      if (resolvedOptions.removeUndefined && value === void 0) {
+        return;
+      }
+      normalizedPoint[key] = value;
+    });
+    return normalizedPoint;
+  });
+}
+function normalizeGraphDataPoint(dataPoint, options = {}) {
+  return normalizeGraphData([dataPoint], options)[0] ?? {};
+}
+
+// src/components/data-display/graphs-v2/utils/formatGraphValue.ts
+var DEFAULT_FORMAT_OPTIONS = {
+  format: "number",
+  locale: "en-US",
+  fallback: "-"
 };
+function isValidNumber(value) {
+  return typeof value === "number" && Number.isFinite(value) && !Number.isNaN(value);
+}
+function formatBytes(value, locale) {
+  if (value === 0) {
+    return "0 B";
+  }
+  const units = ["B", "KB", "MB", "GB", "TB", "PB"];
+  const unitIndex = Math.min(
+    Math.floor(Math.log(Math.abs(value)) / Math.log(1024)),
+    units.length - 1
+  );
+  const formattedValue = value / 1024 ** unitIndex;
+  return `${new Intl.NumberFormat(locale, {
+    maximumFractionDigits: formattedValue >= 10 ? 1 : 2
+  }).format(formattedValue)} ${units[unitIndex]}`;
+}
+function formatDuration(value, locale) {
+  if (value < 1e3) {
+    return `${Math.round(value)} ms`;
+  }
+  const seconds = value / 1e3;
+  if (seconds < 60) {
+    return `${new Intl.NumberFormat(locale, {
+      maximumFractionDigits: 2
+    }).format(seconds)} s`;
+  }
+  const minutes = seconds / 60;
+  if (minutes < 60) {
+    return `${new Intl.NumberFormat(locale, {
+      maximumFractionDigits: 2
+    }).format(minutes)} min`;
+  }
+  const hours = minutes / 60;
+  return `${new Intl.NumberFormat(locale, {
+    maximumFractionDigits: 2
+  }).format(hours)} h`;
+}
+function formatGraphValue(value, options = {}) {
+  const {
+    format,
+    locale,
+    fallback,
+    prefix = "",
+    suffix = "",
+    currency = "USD",
+    minimumFractionDigits,
+    maximumFractionDigits
+  } = {
+    ...DEFAULT_FORMAT_OPTIONS,
+    ...options
+  };
+  if (value === null || value === void 0 || value === "") {
+    return fallback;
+  }
+  if (format === "raw") {
+    return `${prefix}${String(value)}${suffix}`;
+  }
+  const numericValue = typeof value === "string" && value.trim() !== "" ? Number(value) : value;
+  if (!isValidNumber(numericValue)) {
+    return `${prefix}${String(value)}${suffix}`;
+  }
+  let formattedValue;
+  switch (format) {
+    case "integer":
+      formattedValue = new Intl.NumberFormat(locale, {
+        maximumFractionDigits: 0
+      }).format(numericValue);
+      break;
+    case "compact":
+      formattedValue = new Intl.NumberFormat(locale, {
+        notation: "compact",
+        maximumFractionDigits: maximumFractionDigits ?? 2
+      }).format(numericValue);
+      break;
+    case "percent":
+      formattedValue = new Intl.NumberFormat(locale, {
+        style: "percent",
+        minimumFractionDigits: minimumFractionDigits ?? 0,
+        maximumFractionDigits: maximumFractionDigits ?? 2
+      }).format(numericValue / 100);
+      break;
+    case "currency":
+      formattedValue = new Intl.NumberFormat(locale, {
+        style: "currency",
+        currency,
+        minimumFractionDigits,
+        maximumFractionDigits
+      }).format(numericValue);
+      break;
+    case "bytes":
+      formattedValue = formatBytes(numericValue, locale);
+      break;
+    case "duration":
+      formattedValue = formatDuration(numericValue, locale);
+      break;
+    case "number":
+    default:
+      formattedValue = new Intl.NumberFormat(locale, {
+        minimumFractionDigits,
+        maximumFractionDigits: maximumFractionDigits ?? 2
+      }).format(numericValue);
+      break;
+  }
+  return `${prefix}${formattedValue}${suffix}`;
+}
 
-// src/components/data-display/graphs/layouts/gridLayout.ts
-function createGridLayout(nodes, width, height) {
-  const cols = Math.ceil(Math.sqrt(nodes.length));
-  const spacingX = width / (cols + 1);
-  const spacingY = height / (cols + 1);
-  return nodes.map((node, i) => ({
-    ...node,
-    x: spacingX * (i % cols + 1),
-    y: spacingY * (Math.floor(i / cols) + 1)
-  }));
+// src/components/data-display/graphs-v2/utils/resolveGraphColor.ts
+var NAMED_COLORS = {
+  primary: GRAPH_STATUS_COLORS.primary,
+  secondary: GRAPH_STATUS_COLORS.secondary,
+  success: GRAPH_STATUS_COLORS.success,
+  warning: GRAPH_STATUS_COLORS.warning,
+  danger: GRAPH_STATUS_COLORS.danger,
+  info: GRAPH_STATUS_COLORS.info,
+  muted: GRAPH_STATUS_COLORS.muted
+};
+function isCssColor(value) {
+  return value.startsWith("#") || value.startsWith("rgb(") || value.startsWith("rgba(") || value.startsWith("hsl(") || value.startsWith("hsla(") || value.startsWith("var(");
+}
+function resolveGraphColor(color, options = {}) {
+  const {
+    index = 0,
+    fallback = GRAPH_COLOR_PALETTE[0],
+    palette = GRAPH_COLOR_PALETTE
+  } = options;
+  if (color) {
+    if (isCssColor(color)) {
+      return color;
+    }
+    if (color in NAMED_COLORS) {
+      return NAMED_COLORS[color];
+    }
+  }
+  if (palette.length > 0) {
+    return palette[index % palette.length];
+  }
+  return fallback;
+}
+function resolveGraphColors(count, options = {}) {
+  return Array.from(
+    { length: count },
+    (_, index) => resolveGraphColor(void 0, {
+      ...options,
+      index
+    })
+  );
 }
 
-// src/components/data-display/graphs/layouts/treeLayout.ts
-function createTreeLayout(nodes, edges, width, height) {
-  const levelMap = {};
-  const root = nodes[0];
-  if (!root) return nodes;
-  levelMap[root.id] = 0;
-  edges.forEach((edge) => {
-    const fromId = typeof edge.from === "string" ? edge.from : edge.from.id;
-    const toId = typeof edge.to === "string" ? edge.to : edge.to.id;
-    levelMap[toId] = (levelMap[fromId] ?? 0) + 1;
+// src/components/data-display/graphs-v2/utils/limitRealtimePoints.ts
+var DEFAULT_MAX_POINTS = 100;
+function limitRealtimePoints(currentData = [], nextData, options = {}) {
+  const { maxPoints = DEFAULT_MAX_POINTS, appendDirection = "end" } = options;
+  const incomingData = Array.isArray(nextData) ? nextData : [nextData];
+  const mergedData = appendDirection === "start" ? [...incomingData, ...currentData] : [...currentData, ...incomingData];
+  if (maxPoints <= 0) {
+    return mergedData;
+  }
+  if (mergedData.length <= maxPoints) {
+    return mergedData;
+  }
+  return appendDirection === "start" ? mergedData.slice(0, maxPoints) : mergedData.slice(-maxPoints);
+}
+function replaceRealtimePoints(nextData = [], options = {}) {
+  const { maxPoints = DEFAULT_MAX_POINTS } = options;
+  if (maxPoints <= 0) {
+    return nextData;
+  }
+  return nextData.slice(-maxPoints);
+}
+
+// src/components/data-display/graphs-v2/hooks/useGraphData.ts
+function useGraphData({
+  data,
+  dataSource,
+  autoLoad = true,
+  maxDataPoints = GRAPH_DEFAULT_MAX_REALTIME_POINTS,
+  normalize: normalize2 = true,
+  onDataChange,
+  onError
+} = {}) {
+  const [state, setState] = useState({
+    data: data ?? [],
+    loading: false,
+    error: null,
+    status: data?.length ? "success" : "idle",
+    lastUpdatedAt: data?.length ? /* @__PURE__ */ new Date() : void 0
   });
-  const maxLevel = Math.max(...Object.values(levelMap));
-  const levelGroups = {};
-  nodes.forEach((node) => {
-    const level = levelMap[node.id] ?? 0;
-    if (!levelGroups[level]) levelGroups[level] = [];
-    levelGroups[level].push(node);
+  const prepareData = useCallback(
+    (nextData) => {
+      if (!normalize2) {
+        return nextData;
+      }
+      return normalizeGraphData(nextData);
+    },
+    [normalize2]
+  );
+  const replaceData = useCallback(
+    (nextData) => {
+      const normalizedData = prepareData(nextData);
+      setState({
+        data: normalizedData,
+        loading: false,
+        error: null,
+        status: "success",
+        lastUpdatedAt: /* @__PURE__ */ new Date()
+      });
+      onDataChange?.(normalizedData);
+    },
+    [onDataChange, prepareData]
+  );
+  const appendData = useCallback(
+    (nextData) => {
+      setState((currentState) => {
+        const incomingData = Array.isArray(nextData) ? nextData : [nextData];
+        const normalizedIncomingData = prepareData(incomingData);
+        const limitedData = limitRealtimePoints(
+          currentState.data,
+          normalizedIncomingData,
+          {
+            maxPoints: maxDataPoints
+          }
+        );
+        onDataChange?.(limitedData);
+        return {
+          data: limitedData,
+          loading: false,
+          error: null,
+          status: "streaming",
+          lastUpdatedAt: /* @__PURE__ */ new Date()
+        };
+      });
+    },
+    [maxDataPoints, onDataChange, prepareData]
+  );
+  const clearData = useCallback(() => {
+    setState({
+      data: [],
+      loading: false,
+      error: null,
+      status: "idle",
+      lastUpdatedAt: void 0
+    });
+    onDataChange?.([]);
+  }, [onDataChange]);
+  const handleError = useCallback(
+    (error) => {
+      setState((currentState) => ({
+        ...currentState,
+        loading: false,
+        error,
+        status: "error"
+      }));
+      onError?.(error);
+    },
+    [onError]
+  );
+  const refresh = useCallback(async () => {
+    const resolvedDataSource = dataSource;
+    if (!resolvedDataSource?.refresh && !resolvedDataSource?.getInitialData) {
+      return;
+    }
+    try {
+      setState((currentState) => ({
+        ...currentState,
+        loading: true,
+        error: null,
+        status: "loading"
+      }));
+      const loader = resolvedDataSource.refresh ?? resolvedDataSource.getInitialData;
+      const result = await loader?.();
+      replaceData(result ?? []);
+    } catch (error) {
+      handleError(error instanceof Error ? error : new Error(String(error)));
+    }
+  }, [dataSource, handleError, replaceData]);
+  useEffect(() => {
+    if (!data) {
+      return;
+    }
+    replaceData(data);
+  }, [data, replaceData]);
+  useEffect(() => {
+    if (!dataSource || !autoLoad) {
+      return;
+    }
+    const resolvedDataSource = dataSource;
+    let unsubscribe;
+    let isMounted = true;
+    async function loadInitialData() {
+      if (!resolvedDataSource.getInitialData) {
+        return;
+      }
+      try {
+        setState((currentState) => ({
+          ...currentState,
+          loading: true,
+          error: null,
+          status: "loading"
+        }));
+        const result = await resolvedDataSource.getInitialData();
+        if (isMounted) {
+          replaceData(result ?? []);
+        }
+      } catch (error) {
+        if (isMounted) {
+          handleError(
+            error instanceof Error ? error : new Error(String(error))
+          );
+        }
+      }
+    }
+    void loadInitialData();
+    if (resolvedDataSource.subscribe) {
+      unsubscribe = resolvedDataSource.subscribe(appendData, handleError);
+    }
+    return () => {
+      isMounted = false;
+      unsubscribe?.();
+    };
+  }, [appendData, autoLoad, dataSource, handleError, replaceData]);
+  return useMemo(
+    () => ({
+      ...state,
+      refresh,
+      replaceData,
+      appendData,
+      clearData
+    }),
+    [appendData, clearData, refresh, replaceData, state]
+  );
+}
+function useGraphRealtime({
+  enabled = true,
+  maxDataPoints = GRAPH_DEFAULT_MAX_REALTIME_POINTS,
+  normalize: normalize2 = true,
+  connect,
+  onData,
+  onError
+}) {
+  const [data, setData] = useState([]);
+  const [error, setError] = useState(null);
+  const [connected, setConnected] = useState(false);
+  const [lastUpdatedAt, setLastUpdatedAt] = useState();
+  useEffect(() => {
+    if (!enabled) {
+      setConnected(false);
+      return;
+    }
+    const handleData = (incomingData) => {
+      const incomingArray = Array.isArray(incomingData) ? incomingData : [incomingData];
+      const normalizedIncomingData = normalize2 ? normalizeGraphData(incomingArray) : incomingArray;
+      setData((currentData) => {
+        const nextData = limitRealtimePoints(
+          currentData,
+          normalizedIncomingData,
+          {
+            maxPoints: maxDataPoints
+          }
+        );
+        onData?.(nextData);
+        return nextData;
+      });
+      setError(null);
+      setConnected(true);
+      setLastUpdatedAt(/* @__PURE__ */ new Date());
+    };
+    const handleError = (nextError) => {
+      setError(nextError);
+      onError?.(nextError);
+    };
+    const unsubscribe = connect(handleData, handleError);
+    setConnected(true);
+    return () => {
+      unsubscribe?.();
+      setConnected(false);
+    };
+  }, [connect, enabled, maxDataPoints, normalize2, onData, onError]);
+  return useMemo(
+    () => ({
+      data,
+      error,
+      connected,
+      loading: enabled && !connected && !error,
+      status: error ? "error" : connected ? "streaming" : "idle",
+      lastUpdatedAt,
+      clearData: () => setData([])
+    }),
+    [connected, data, enabled, error, lastUpdatedAt]
+  );
+}
+function useGraphPolling({
+  enabled = true,
+  interval = GRAPH_DEFAULT_POLLING_INTERVAL,
+  immediate = true,
+  normalize: normalize2 = true,
+  fetcher,
+  onData,
+  onError
+}) {
+  const isMountedRef = useRef(false);
+  const isFetchingRef = useRef(false);
+  const [data, setData] = useState([]);
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(immediate);
+  const [lastUpdatedAt, setLastUpdatedAt] = useState();
+  const refresh = useCallback(async () => {
+    if (isFetchingRef.current) {
+      return;
+    }
+    try {
+      isFetchingRef.current = true;
+      setLoading(true);
+      setError(null);
+      const result = await fetcher();
+      const nextData = normalize2 ? normalizeGraphData(result ?? []) : result ?? [];
+      if (!isMountedRef.current) {
+        return;
+      }
+      setData(nextData);
+      setLastUpdatedAt(/* @__PURE__ */ new Date());
+      onData?.(nextData);
+    } catch (error2) {
+      const nextError = error2 instanceof Error ? error2 : new Error(String(error2));
+      if (isMountedRef.current) {
+        setError(nextError);
+        onError?.(nextError);
+      }
+    } finally {
+      if (isMountedRef.current) {
+        setLoading(false);
+      }
+      isFetchingRef.current = false;
+    }
+  }, [fetcher, normalize2, onData, onError]);
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+  useEffect(() => {
+    if (!enabled) {
+      setLoading(false);
+      return;
+    }
+    if (immediate) {
+      void refresh();
+    }
+    const timer = window.setInterval(() => {
+      void refresh();
+    }, interval);
+    return () => {
+      window.clearInterval(timer);
+    };
+  }, [enabled, immediate, interval, refresh]);
+  return useMemo(
+    () => ({
+      data,
+      error,
+      loading,
+      status: error ? "error" : loading ? "loading" : "success",
+      lastUpdatedAt,
+      refresh
+    }),
+    [data, error, lastUpdatedAt, loading, refresh]
+  );
+}
+function createLabelFromKey(key) {
+  return key.replace(/[_-]+/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/\b\w/g, (character) => character.toUpperCase());
+}
+function inferSeriesKeys(data, xKey, excludeKeys = []) {
+  const firstPoint = data[0];
+  if (!firstPoint) {
+    return [];
+  }
+  return Object.keys(firstPoint).filter((key) => {
+    if (key === xKey) {
+      return false;
+    }
+    if (excludeKeys.includes(key)) {
+      return false;
+    }
+    const value = firstPoint[key];
+    return typeof value === "number";
+  });
+}
+function useGraphSeries({
+  data = [],
+  series,
+  xKey,
+  excludeKeys = []
+}) {
+  return useMemo(() => {
+    const normalizedSeries = series && series.length > 0 ? series : inferSeriesKeys(data, xKey, excludeKeys).map((key) => ({
+      key
+    }));
+    return normalizedSeries.map((item, index) => ({
+      key: item.key,
+      label: item.label ?? createLabelFromKey(item.key),
+      type: item.type ?? "line",
+      color: resolveGraphColor(item.color, { index }),
+      unit: item.unit,
+      visible: item.visible ?? true,
+      strokeWidth: item.strokeWidth ?? GRAPH_DEFAULT_STROKE_WIDTH,
+      radius: item.radius ?? GRAPH_DEFAULT_ACTIVE_DOT_RADIUS,
+      format: item.format,
+      prefix: item.prefix,
+      suffix: item.suffix,
+      yAxisId: item.yAxisId
+    }));
+  }, [data, excludeKeys, series, xKey]);
+}
+function mergeGraphTheme(baseTheme, customTheme) {
+  if (!customTheme) {
+    return baseTheme;
+  }
+  return {
+    panel: {
+      ...baseTheme.panel,
+      ...customTheme.panel
+    },
+    text: {
+      ...baseTheme.text,
+      ...customTheme.text
+    },
+    chart: {
+      ...baseTheme.chart,
+      ...customTheme.chart
+    },
+    tooltip: {
+      ...baseTheme.tooltip,
+      ...customTheme.tooltip
+    },
+    colors: customTheme.colors ?? baseTheme.colors
+  };
+}
+function useGraphTheme({
+  mode = "dark",
+  theme
+} = {}) {
+  return useMemo(() => {
+    const baseTheme = mode === "light" ? GRAPH_LIGHT_THEME : mode === "dark" ? GRAPH_DARK_THEME : DEFAULT_GRAPH_THEME;
+    return mergeGraphTheme(baseTheme, theme);
+  }, [mode, theme]);
+}
+var GraphContext = createContext({
+  data: [],
+  loading: false,
+  error: null,
+  status: "idle",
+  maxDataPoints: GRAPH_DEFAULT_MAX_REALTIME_POINTS,
+  refresh: async () => {
+  },
+  replaceData: () => {
+  },
+  appendData: () => {
+  },
+  clearData: () => {
+  }
+});
+function GraphProvider({
+  children,
+  data,
+  dataSource,
+  maxDataPoints = GRAPH_DEFAULT_MAX_REALTIME_POINTS,
+  autoLoad = true,
+  onDataChange,
+  onError
+}) {
+  const graphData = useGraphData({
+    data,
+    dataSource,
+    autoLoad,
+    maxDataPoints,
+    onDataChange,
+    onError
   });
-  return nodes.map((node) => {
-    const level = levelMap[node.id] ?? 0;
-    const siblings = levelGroups[level];
-    const index = siblings.indexOf(node);
+  const value = useMemo(
+    () => ({
+      ...graphData,
+      mode: dataSource?.mode,
+      maxDataPoints
+    }),
+    [dataSource?.mode, graphData, maxDataPoints]
+  );
+  return /* @__PURE__ */ jsx(
+    GraphContext.Provider,
+    {
+      value,
+      children
+    }
+  );
+}
+function useGraphContext() {
+  return useContext(GraphContext);
+}
+
+// src/components/data-display/graphs-v2/context/graphReducer.ts
+function createInitialGraphState(data = []) {
+  return {
+    data,
+    loading: false,
+    error: null,
+    status: data.length > 0 ? "success" : "idle",
+    lastUpdatedAt: data.length > 0 ? /* @__PURE__ */ new Date() : void 0
+  };
+}
+function graphReducer(state, action) {
+  switch (action.type) {
+    case "SET_LOADING": {
+      const loading = action.payload ?? true;
+      return {
+        ...state,
+        loading,
+        error: loading ? null : state.error,
+        status: loading ? "loading" : state.status
+      };
+    }
+    case "SET_ERROR": {
+      return {
+        ...state,
+        loading: false,
+        error: action.payload,
+        status: action.payload ? "error" : state.data.length > 0 ? "success" : "idle"
+      };
+    }
+    case "SET_DATA": {
+      return {
+        data: action.payload,
+        loading: false,
+        error: null,
+        status: "success",
+        lastUpdatedAt: /* @__PURE__ */ new Date()
+      };
+    }
+    case "APPEND_DATA": {
+      const nextData = limitRealtimePoints(state.data, action.payload.data, {
+        maxPoints: action.payload.maxDataPoints ?? GRAPH_DEFAULT_MAX_REALTIME_POINTS
+      });
+      return {
+        data: nextData,
+        loading: false,
+        error: null,
+        status: "streaming",
+        lastUpdatedAt: /* @__PURE__ */ new Date()
+      };
+    }
+    case "CLEAR_DATA": {
+      return {
+        data: [],
+        loading: false,
+        error: null,
+        status: "idle",
+        lastUpdatedAt: void 0
+      };
+    }
+    case "SET_STREAMING": {
+      const streaming = action.payload ?? true;
+      return {
+        ...state,
+        loading: false,
+        error: null,
+        status: streaming ? "streaming" : state.data.length > 0 ? "success" : "idle",
+        lastUpdatedAt: streaming ? /* @__PURE__ */ new Date() : state.lastUpdatedAt
+      };
+    }
+    default:
+      return state;
+  }
+}
+function GraphEmptyState({
+  height = GRAPH_DEFAULT_HEIGHT,
+  message = GRAPH_EMPTY_MESSAGE,
+  description,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `eui-graph flex flex-col items-center justify-center rounded-xl border border-dashed border-gray-700/80 bg-[#111217]/40 px-6 text-center ${className}`,
+      style: { height },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full border border-gray-700 bg-white/5 text-gray-500", children: "\u2205" }),
+        /* @__PURE__ */ jsx("div", { className: "mt-3 text-sm font-medium text-gray-300", children: message }),
+        description && /* @__PURE__ */ jsx("div", { className: "mt-1 max-w-sm text-xs text-gray-500", children: description })
+      ]
+    }
+  );
+}
+function GraphErrorState({
+  error,
+  height = GRAPH_DEFAULT_HEIGHT,
+  title = GRAPH_ERROR_MESSAGE,
+  message,
+  className = "",
+  onRetry,
+  retryLabel = "Retry"
+}) {
+  const resolvedMessage = message ?? error?.message;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `eui-graph flex flex-col items-center justify-center rounded-xl border border-red-500/30 bg-red-500/5 px-6 text-center ${className}`,
+      style: { height },
+      role: "alert",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full border border-red-500/30 bg-red-500/10 text-red-400", children: "!" }),
+        /* @__PURE__ */ jsx("div", { className: "mt-3 text-sm font-medium text-red-300", children: title }),
+        resolvedMessage && /* @__PURE__ */ jsx("div", { className: "mt-1 max-w-md text-xs text-red-200/70", children: resolvedMessage }),
+        onRetry && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => void onRetry(),
+            className: "mt-4 rounded-md border border-red-500/30 px-3 py-1.5 text-xs font-medium text-red-200 transition-colors hover:bg-red-500/10",
+            children: retryLabel
+          }
+        )
+      ]
+    }
+  );
+}
+function GraphHeader({
+  title,
+  description,
+  actions,
+  className = ""
+}) {
+  if (!title && !description && !actions) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `flex items-start justify-between gap-4 border-b border-[#2a2d35] px-4 py-3 ${className}`,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          title && /* @__PURE__ */ jsx("div", { className: "eui-graph-title truncate text-sm font-semibold text-gray-100", children: title }),
+          description && /* @__PURE__ */ jsx("div", { className: "eui-graph-description mt-1 text-xs text-gray-400", children: description })
+        ] }),
+        actions && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: actions })
+      ]
+    }
+  );
+}
+function GraphLoadingState({
+  height = GRAPH_DEFAULT_HEIGHT,
+  message = GRAPH_LOADING_MESSAGE,
+  className = "",
+  showMessage = true
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `eui-graph eui-graph-loading flex flex-col items-center justify-center rounded-xl border border-[#2a2d35] bg-[#111217]/60 px-6 text-center ${className}`,
+      style: { height },
+      role: "status",
+      "aria-live": "polite",
+      "aria-busy": "true",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "h-7 w-7 animate-spin rounded-full border-2 border-gray-700 border-t-gray-200" }),
+        showMessage && /* @__PURE__ */ jsx("span", { className: "mt-3 text-sm font-medium text-gray-300", children: message })
+      ]
+    }
+  );
+}
+function formatLastUpdatedAt(value) {
+  if (!value) {
+    return "Never updated";
+  }
+  return `Updated ${value.toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  })}`;
+}
+function GraphToolbar({
+  children,
+  className = "",
+  showRefresh = true,
+  showLastUpdated = true,
+  refreshLabel = "Refresh",
+  onRefresh
+}) {
+  const graph = useGraphContext();
+  async function handleRefresh() {
+    if (onRefresh) {
+      await onRefresh();
+      return;
+    }
+    await graph.refresh();
+  }
+  if (!children && !showRefresh && !showLastUpdated) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `flex flex-wrap items-center justify-between gap-3 border-b border-[#2a2d35] px-4 py-2 ${className}`,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-2", children }),
+        /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-3", children: [
+          showLastUpdated && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500", children: formatLastUpdatedAt(graph.lastUpdatedAt) }),
+          showRefresh && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => void handleRefresh(),
+              disabled: graph.loading,
+              className: "rounded-md border border-[#2a2d35] px-2.5 py-1.5 text-xs font-medium text-gray-300 transition-colors hover:bg-white/5 disabled:cursor-not-allowed disabled:opacity-60",
+              children: graph.loading ? "Refreshing..." : refreshLabel
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function GraphPanel({
+  title,
+  description,
+  actions,
+  toolbar,
+  children,
+  className = "",
+  contentClassName = "",
+  height = GRAPH_DEFAULT_HEIGHT,
+  loading,
+  error,
+  empty,
+  emptyMessage,
+  emptyDescription,
+  showToolbar = false,
+  showRefresh = true,
+  showLastUpdated = true,
+  onRetry
+}) {
+  const graph = useGraphContext();
+  const resolvedLoading = loading ?? graph.loading;
+  const resolvedError = error ?? graph.error;
+  const resolvedEmpty = empty ?? graph.data.length === 0;
+  function renderContent() {
+    if (resolvedLoading) {
+      return /* @__PURE__ */ jsx(GraphLoadingState, { height });
+    }
+    if (resolvedError) {
+      return /* @__PURE__ */ jsx(
+        GraphErrorState,
+        {
+          height,
+          error: resolvedError,
+          onRetry: onRetry ?? graph.refresh
+        }
+      );
+    }
+    if (resolvedEmpty) {
+      return /* @__PURE__ */ jsx(
+        GraphEmptyState,
+        {
+          height,
+          message: emptyMessage,
+          description: emptyDescription
+        }
+      );
+    }
+    return children;
+  }
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: `eui-graph eui-graph-panel overflow-hidden rounded-xl border border-[#2a2d35] bg-[#111217] ${className}`,
+      children: [
+        /* @__PURE__ */ jsx(GraphHeader, { title, description, actions }),
+        showToolbar && /* @__PURE__ */ jsx(
+          GraphToolbar,
+          {
+            showRefresh,
+            showLastUpdated,
+            children: toolbar
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: `p-4 ${contentClassName}`, children: renderContent() })
+      ]
+    }
+  );
+}
+function createLabelFromKey2(key) {
+  return key.replace(/[_-]+/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/\b\w/g, (character) => character.toUpperCase());
+}
+function GraphLegend({
+  items,
+  series,
+  data = [],
+  className = "",
+  showValues = true,
+  valueSource = "latest",
+  onItemClick
+}) {
+  const legendItems = useMemo(() => {
+    if (items?.length) {
+      return items;
+    }
+    if (!series?.length) {
+      return [];
+    }
+    const latestPoint = data[data.length - 1];
+    return series.map((item, index) => ({
+      key: item.key,
+      label: item.label ?? createLabelFromKey2(item.key),
+      color: resolveGraphColor(item.color, { index }),
+      value: valueSource === "latest" ? latestPoint?.[item.key] : void 0,
+      unit: item.unit,
+      format: item.format,
+      prefix: item.prefix,
+      suffix: item.suffix,
+      active: item.visible ?? true
+    }));
+  }, [data, items, series, valueSource]);
+  if (!legendItems.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `eui-graph flex flex-wrap items-center gap-x-4 gap-y-2 text-xs ${className}`,
+      children: legendItems.map((item, index) => {
+        const color = resolveGraphColor(item.color, { index });
+        const active = item.active ?? true;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => onItemClick?.(item),
+            disabled: !onItemClick,
+            className: `inline-flex items-center gap-2 rounded-md transition-opacity ${active ? "opacity-100" : "opacity-40"} ${onItemClick ? "cursor-pointer hover:opacity-80" : "cursor-default"}`,
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "h-2.5 w-2.5 rounded-full",
+                  style: { backgroundColor: color }
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: item.label ?? createLabelFromKey2(item.key) }),
+              showValues && item.value !== void 0 && /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-200", children: formatGraphValue(item.value, {
+                format: item.format ?? "number",
+                prefix: item.prefix,
+                suffix: item.suffix ?? item.unit
+              }) })
+            ]
+          },
+          item.key
+        );
+      })
+    }
+  );
+}
+function GraphTooltip({
+  active,
+  label,
+  payload,
+  className = "",
+  labelFormatter,
+  valueFormatter,
+  seriesFormatters = {}
+}) {
+  if (!active || !payload?.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `eui-graph rounded-xl border border-[#2a2d35] bg-[#181b21] px-3 py-2 shadow-xl ${className}`,
+      children: [
+        label !== void 0 && /* @__PURE__ */ jsx("div", { className: "mb-2 text-xs font-semibold text-gray-100", children: labelFormatter ? labelFormatter(label) : label }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1.5", children: payload.map((item, index) => {
+          const dataKey = item.dataKey ?? item.name ?? String(index);
+          const formatterOptions = seriesFormatters[dataKey];
+          const formattedValue = valueFormatter ? valueFormatter(item.value, item.name, item) : formatGraphValue(item.value, {
+            format: formatterOptions?.format ?? "number",
+            prefix: formatterOptions?.prefix,
+            suffix: formatterOptions?.suffix ?? formatterOptions?.unit
+          });
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex min-w-[140px] items-center justify-between gap-4 text-xs",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "h-2 w-2 rounded-full",
+                      style: { backgroundColor: item.color }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "truncate text-gray-400", children: item.name ?? dataKey })
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-100", children: formattedValue })
+              ]
+            },
+            `${dataKey}-${index}`
+          );
+        }) })
+      ]
+    }
+  );
+}
+function GraphContainer({
+  children,
+  height = GRAPH_DEFAULT_HEIGHT,
+  className = "",
+  contentClassName = ""
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `eui-graph relative w-full min-w-0 overflow-hidden ${className}`,
+      style: { height },
+      children: /* @__PURE__ */ jsx("div", { className: `h-full w-full ${contentClassName}`, children })
+    }
+  );
+}
+function LineGraph({
+  data,
+  xKey = "time",
+  series,
+  height = GRAPH_DEFAULT_HEIGHT,
+  loading,
+  error,
+  className = "",
+  showGrid = true,
+  showTooltip = true,
+  showLegend = true,
+  animated = true
+}) {
+  const context = useGraphContext();
+  const theme = useGraphTheme();
+  const graphData = data ?? context.data;
+  const graphLoading = loading ?? context.loading;
+  const graphError = error ?? context.error;
+  const resolvedSeries = useGraphSeries({
+    data: graphData,
+    series,
+    xKey: String(xKey)
+  }).filter((item) => item.visible);
+  if (graphLoading) {
+    return /* @__PURE__ */ jsx(GraphLoadingState, { height, className });
+  }
+  if (graphError) {
+    return /* @__PURE__ */ jsx(
+      GraphErrorState,
+      {
+        error: graphError,
+        height,
+        className
+      }
+    );
+  }
+  if (!graphData.length || !resolvedSeries.length) {
+    return /* @__PURE__ */ jsx(GraphEmptyState, { height, className });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: `eui-graph flex w-full flex-col gap-3 ${className}`, children: [
+    /* @__PURE__ */ jsx(GraphContainer, { height, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(LineChart$1, { data: graphData, margin: GRAPH_DEFAULT_MARGIN, children: [
+      showGrid && /* @__PURE__ */ jsx(
+        CartesianGrid,
+        {
+          stroke: theme.chart.grid,
+          strokeDasharray: "3 3",
+          vertical: false
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        XAxis,
+        {
+          dataKey: String(xKey),
+          stroke: theme.chart.axis,
+          tick: { fill: theme.chart.axis, fontSize: 12 },
+          tickLine: false,
+          axisLine: false
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        YAxis,
+        {
+          stroke: theme.chart.axis,
+          tick: { fill: theme.chart.axis, fontSize: 12 },
+          tickLine: false,
+          axisLine: false,
+          tickFormatter: (value) => formatGraphValue(value, {
+            format: "compact"
+          })
+        }
+      ),
+      showTooltip && /* @__PURE__ */ jsx(
+        Tooltip$1,
+        {
+          content: /* @__PURE__ */ jsx(
+            GraphTooltip,
+            {
+              seriesFormatters: Object.fromEntries(
+                resolvedSeries.map((item) => [
+                  item.key,
+                  {
+                    format: item.format,
+                    prefix: item.prefix,
+                    suffix: item.suffix,
+                    unit: item.unit
+                  }
+                ])
+              )
+            }
+          ),
+          cursor: { stroke: theme.chart.cursor }
+        }
+      ),
+      resolvedSeries.map((item) => /* @__PURE__ */ jsx(
+        Line$1,
+        {
+          type: "monotone",
+          dataKey: item.key,
+          name: item.label,
+          stroke: item.color,
+          strokeWidth: item.strokeWidth,
+          dot: false,
+          activeDot: { r: item.radius },
+          isAnimationActive: animated,
+          animationDuration: GRAPH_DEFAULT_ANIMATION_DURATION,
+          yAxisId: item.yAxisId
+        },
+        item.key
+      ))
+    ] }) }) }),
+    showLegend && /* @__PURE__ */ jsx(
+      GraphLegend,
+      {
+        series: resolvedSeries,
+        data: graphData,
+        showValues: true,
+        valueSource: "latest"
+      }
+    )
+  ] });
+}
+function AreaGraph({
+  data,
+  xKey = "time",
+  series,
+  height = GRAPH_DEFAULT_HEIGHT,
+  loading,
+  error,
+  className = "",
+  showGrid = true,
+  showTooltip = true,
+  showLegend = true,
+  animated = true
+}) {
+  const context = useGraphContext();
+  const theme = useGraphTheme();
+  const graphData = data ?? context.data;
+  const graphLoading = loading ?? context.loading;
+  const graphError = error ?? context.error;
+  const resolvedSeries = useGraphSeries({
+    data: graphData,
+    series,
+    xKey: String(xKey)
+  }).filter((item) => item.visible);
+  if (graphLoading) {
+    return /* @__PURE__ */ jsx(GraphLoadingState, { height, className });
+  }
+  if (graphError) {
+    return /* @__PURE__ */ jsx(
+      GraphErrorState,
+      {
+        error: graphError,
+        height,
+        className
+      }
+    );
+  }
+  if (!graphData.length || !resolvedSeries.length) {
+    return /* @__PURE__ */ jsx(GraphEmptyState, { height, className });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: `eui-graph flex w-full flex-col gap-3 ${className}`, children: [
+    /* @__PURE__ */ jsx(GraphContainer, { height, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(AreaChart, { data: graphData, margin: GRAPH_DEFAULT_MARGIN, children: [
+      /* @__PURE__ */ jsx("defs", { children: resolvedSeries.map((item) => /* @__PURE__ */ jsxs(
+        "linearGradient",
+        {
+          id: `eui-area-gradient-${item.key}`,
+          x1: "0",
+          y1: "0",
+          x2: "0",
+          y2: "1",
+          children: [
+            /* @__PURE__ */ jsx("stop", { offset: "5%", stopColor: item.color, stopOpacity: 0.35 }),
+            /* @__PURE__ */ jsx(
+              "stop",
+              {
+                offset: "95%",
+                stopColor: item.color,
+                stopOpacity: 0.02
+              }
+            )
+          ]
+        },
+        item.key
+      )) }),
+      showGrid && /* @__PURE__ */ jsx(
+        CartesianGrid,
+        {
+          stroke: theme.chart.grid,
+          strokeDasharray: "3 3",
+          vertical: false
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        XAxis,
+        {
+          dataKey: String(xKey),
+          stroke: theme.chart.axis,
+          tick: { fill: theme.chart.axis, fontSize: 12 },
+          tickLine: false,
+          axisLine: false
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        YAxis,
+        {
+          stroke: theme.chart.axis,
+          tick: { fill: theme.chart.axis, fontSize: 12 },
+          tickLine: false,
+          axisLine: false,
+          tickFormatter: (value) => formatGraphValue(value, {
+            format: "compact"
+          })
+        }
+      ),
+      showTooltip && /* @__PURE__ */ jsx(
+        Tooltip$1,
+        {
+          content: /* @__PURE__ */ jsx(
+            GraphTooltip,
+            {
+              seriesFormatters: Object.fromEntries(
+                resolvedSeries.map((item) => [
+                  item.key,
+                  {
+                    format: item.format,
+                    prefix: item.prefix,
+                    suffix: item.suffix,
+                    unit: item.unit
+                  }
+                ])
+              )
+            }
+          ),
+          cursor: { stroke: theme.chart.cursor }
+        }
+      ),
+      resolvedSeries.map((item) => /* @__PURE__ */ jsx(
+        Area,
+        {
+          type: "monotone",
+          dataKey: item.key,
+          name: item.label,
+          stroke: item.color,
+          strokeWidth: item.strokeWidth,
+          fill: `url(#eui-area-gradient-${item.key})`,
+          isAnimationActive: animated,
+          animationDuration: GRAPH_DEFAULT_ANIMATION_DURATION,
+          yAxisId: item.yAxisId
+        },
+        item.key
+      ))
+    ] }) }) }),
+    showLegend && /* @__PURE__ */ jsx(
+      GraphLegend,
+      {
+        series: resolvedSeries,
+        data: graphData,
+        showValues: true,
+        valueSource: "latest"
+      }
+    )
+  ] });
+}
+function BarGraph({
+  data,
+  xKey = "name",
+  series,
+  height = GRAPH_DEFAULT_HEIGHT,
+  loading,
+  error,
+  className = "",
+  showGrid = true,
+  showTooltip = true,
+  showLegend = true,
+  animated = true,
+  layout = "horizontal"
+}) {
+  const context = useGraphContext();
+  const theme = useGraphTheme();
+  const graphData = data ?? context.data;
+  const graphLoading = loading ?? context.loading;
+  const graphError = error ?? context.error;
+  const resolvedSeries = useGraphSeries({
+    data: graphData,
+    series,
+    xKey: String(xKey)
+  }).filter((item) => item.visible);
+  if (graphLoading) {
+    return /* @__PURE__ */ jsx(GraphLoadingState, { height, className });
+  }
+  if (graphError) {
+    return /* @__PURE__ */ jsx(
+      GraphErrorState,
+      {
+        error: graphError,
+        height,
+        className
+      }
+    );
+  }
+  if (!graphData.length || !resolvedSeries.length) {
+    return /* @__PURE__ */ jsx(GraphEmptyState, { height, className });
+  }
+  const isVertical = layout === "vertical";
+  return /* @__PURE__ */ jsxs("div", { className: `eui-graph flex w-full flex-col gap-3 ${className}`, children: [
+    /* @__PURE__ */ jsx(GraphContainer, { height, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+      BarChart$1,
+      {
+        data: graphData,
+        margin: GRAPH_DEFAULT_MARGIN,
+        layout: isVertical ? "vertical" : "horizontal",
+        children: [
+          showGrid && /* @__PURE__ */ jsx(
+            CartesianGrid,
+            {
+              stroke: theme.chart.grid,
+              strokeDasharray: "3 3",
+              horizontal: !isVertical,
+              vertical: isVertical
+            }
+          ),
+          isVertical ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              XAxis,
+              {
+                type: "number",
+                stroke: theme.chart.axis,
+                tick: { fill: theme.chart.axis, fontSize: 12 },
+                tickLine: false,
+                axisLine: false,
+                tickFormatter: (value) => formatGraphValue(value, {
+                  format: "compact"
+                })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              YAxis,
+              {
+                type: "category",
+                dataKey: String(xKey),
+                stroke: theme.chart.axis,
+                tick: { fill: theme.chart.axis, fontSize: 12 },
+                tickLine: false,
+                axisLine: false,
+                width: 110
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              XAxis,
+              {
+                dataKey: String(xKey),
+                stroke: theme.chart.axis,
+                tick: { fill: theme.chart.axis, fontSize: 12 },
+                tickLine: false,
+                axisLine: false
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              YAxis,
+              {
+                stroke: theme.chart.axis,
+                tick: { fill: theme.chart.axis, fontSize: 12 },
+                tickLine: false,
+                axisLine: false,
+                tickFormatter: (value) => formatGraphValue(value, {
+                  format: "compact"
+                })
+              }
+            )
+          ] }),
+          showTooltip && /* @__PURE__ */ jsx(
+            Tooltip$1,
+            {
+              content: /* @__PURE__ */ jsx(
+                GraphTooltip,
+                {
+                  seriesFormatters: Object.fromEntries(
+                    resolvedSeries.map((item) => [
+                      item.key,
+                      {
+                        format: item.format,
+                        prefix: item.prefix,
+                        suffix: item.suffix,
+                        unit: item.unit
+                      }
+                    ])
+                  )
+                }
+              ),
+              cursor: { fill: theme.chart.cursor }
+            }
+          ),
+          resolvedSeries.map((item) => /* @__PURE__ */ jsx(
+            Bar$1,
+            {
+              dataKey: item.key,
+              name: item.label,
+              fill: item.color,
+              radius: GRAPH_DEFAULT_BAR_RADIUS,
+              isAnimationActive: animated,
+              animationDuration: GRAPH_DEFAULT_ANIMATION_DURATION,
+              yAxisId: isVertical ? void 0 : item.yAxisId
+            },
+            item.key
+          ))
+        ]
+      }
+    ) }) }),
+    showLegend && /* @__PURE__ */ jsx(
+      GraphLegend,
+      {
+        series: resolvedSeries,
+        data: graphData,
+        showValues: true,
+        valueSource: "latest"
+      }
+    )
+  ] });
+}
+function PieGraph({
+  data,
+  nameKey = "name",
+  valueKey = "value",
+  height = GRAPH_DEFAULT_HEIGHT,
+  loading,
+  error,
+  className = "",
+  showTooltip = true,
+  showLegend = true,
+  animated = true,
+  innerRadius = "45%",
+  outerRadius = "75%",
+  valueFormat = "number",
+  unit
+}) {
+  const context = useGraphContext();
+  const theme = useGraphTheme();
+  const graphData = data ?? context.data;
+  const graphLoading = loading ?? context.loading;
+  const graphError = error ?? context.error;
+  if (graphLoading) {
+    return /* @__PURE__ */ jsx(GraphLoadingState, { height, className });
+  }
+  if (graphError) {
+    return /* @__PURE__ */ jsx(
+      GraphErrorState,
+      {
+        error: graphError,
+        height,
+        className
+      }
+    );
+  }
+  if (!graphData.length) {
+    return /* @__PURE__ */ jsx(GraphEmptyState, { height, className });
+  }
+  const legendItems = graphData.map((item, index) => {
+    const key = String(item[String(nameKey)] ?? index);
     return {
-      ...node,
-      x: (index + 1) * width / (siblings.length + 1),
-      y: (level + 1) * height / (maxLevel + 2)
+      key,
+      label: key,
+      value: item[String(valueKey)],
+      color: resolveGraphColor(void 0, {
+        index,
+        palette: theme.colors
+      }),
+      format: valueFormat,
+      unit,
+      active: true
     };
   });
+  return /* @__PURE__ */ jsxs("div", { className: `eui-graph flex w-full flex-col gap-3 ${className}`, children: [
+    /* @__PURE__ */ jsx(GraphContainer, { height, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(PieChart$1, { children: [
+      /* @__PURE__ */ jsx(
+        Pie$1,
+        {
+          data: graphData,
+          dataKey: String(valueKey),
+          nameKey: String(nameKey),
+          innerRadius,
+          outerRadius,
+          paddingAngle: 2,
+          isAnimationActive: animated,
+          animationDuration: GRAPH_DEFAULT_ANIMATION_DURATION,
+          children: graphData.map((_item, index) => /* @__PURE__ */ jsx(
+            Cell,
+            {
+              fill: resolveGraphColor(void 0, {
+                index,
+                palette: theme.colors
+              })
+            },
+            `cell-${index}`
+          ))
+        }
+      ),
+      showTooltip && /* @__PURE__ */ jsx(
+        Tooltip$1,
+        {
+          content: /* @__PURE__ */ jsx(
+            GraphTooltip,
+            {
+              seriesFormatters: {
+                [String(valueKey)]: {
+                  format: valueFormat,
+                  suffix: unit
+                }
+              }
+            }
+          )
+        }
+      )
+    ] }) }) }),
+    showLegend && /* @__PURE__ */ jsx(GraphLegend, { items: legendItems, showValues: true, valueSource: "latest" })
+  ] });
 }
-var NODE_SIZE = 48;
-var GraphNode = ({ node, renderCustom }) => {
-  if (node.x === void 0 || node.y === void 0) return null;
-  const x = node.x;
-  const y = node.y;
-  if (renderCustom) {
+function ScatterGraph({
+  data,
+  xKey = "x",
+  series,
+  height = GRAPH_DEFAULT_HEIGHT,
+  loading,
+  error,
+  className = "",
+  showGrid = true,
+  showTooltip = true,
+  showLegend = true,
+  animated = true
+}) {
+  const context = useGraphContext();
+  const theme = useGraphTheme();
+  const graphData = data ?? context.data;
+  const graphLoading = loading ?? context.loading;
+  const graphError = error ?? context.error;
+  const resolvedSeries = useGraphSeries({
+    data: graphData,
+    series,
+    xKey: String(xKey)
+  }).filter((item) => item.visible);
+  if (graphLoading) {
+    return /* @__PURE__ */ jsx(GraphLoadingState, { height, className });
+  }
+  if (graphError) {
     return /* @__PURE__ */ jsx(
-      "foreignObject",
+      GraphErrorState,
       {
-        x: x - NODE_SIZE / 2,
-        y: y - NODE_SIZE / 2,
-        width: NODE_SIZE,
-        height: NODE_SIZE,
-        style: { overflow: "visible" },
-        children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              width: NODE_SIZE,
-              height: NODE_SIZE,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center"
-            },
-            children: renderCustom(node)
-          }
-        )
+        error: graphError,
+        height,
+        className
       }
     );
   }
-  return /* @__PURE__ */ jsxs("g", { transform: `translate(${x}, ${y})`, children: [
-    /* @__PURE__ */ jsx("circle", { r: 16, fill: "#4f46e5" }),
-    node.label && /* @__PURE__ */ jsx(
-      "text",
+  if (!graphData.length || !resolvedSeries.length) {
+    return /* @__PURE__ */ jsx(GraphEmptyState, { height, className });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: `eui-graph flex w-full flex-col gap-3 ${className}`, children: [
+    /* @__PURE__ */ jsx(GraphContainer, { height, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(ScatterChart, { margin: GRAPH_DEFAULT_MARGIN, children: [
+      showGrid && /* @__PURE__ */ jsx(CartesianGrid, { stroke: theme.chart.grid, strokeDasharray: "3 3" }),
+      /* @__PURE__ */ jsx(
+        XAxis,
+        {
+          type: "number",
+          dataKey: String(xKey),
+          name: String(xKey),
+          stroke: theme.chart.axis,
+          tick: { fill: theme.chart.axis, fontSize: 12 },
+          tickLine: false,
+          axisLine: false,
+          tickFormatter: (value) => formatGraphValue(value, {
+            format: "compact"
+          })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        YAxis,
+        {
+          type: "number",
+          stroke: theme.chart.axis,
+          tick: { fill: theme.chart.axis, fontSize: 12 },
+          tickLine: false,
+          axisLine: false,
+          tickFormatter: (value) => formatGraphValue(value, {
+            format: "compact"
+          })
+        }
+      ),
+      showTooltip && /* @__PURE__ */ jsx(
+        Tooltip$1,
+        {
+          content: /* @__PURE__ */ jsx(
+            GraphTooltip,
+            {
+              seriesFormatters: Object.fromEntries(
+                resolvedSeries.map((item) => [
+                  item.key,
+                  {
+                    format: item.format,
+                    prefix: item.prefix,
+                    suffix: item.suffix,
+                    unit: item.unit
+                  }
+                ])
+              )
+            }
+          ),
+          cursor: { stroke: theme.chart.cursor, strokeDasharray: "3 3" }
+        }
+      ),
+      resolvedSeries.map((item) => /* @__PURE__ */ jsx(
+        Scatter,
+        {
+          data: graphData,
+          dataKey: item.key,
+          name: item.label,
+          fill: item.color,
+          isAnimationActive: animated,
+          animationDuration: GRAPH_DEFAULT_ANIMATION_DURATION
+        },
+        item.key
+      ))
+    ] }) }) }),
+    showLegend && /* @__PURE__ */ jsx(
+      GraphLegend,
       {
-        y: 4,
-        textAnchor: "middle",
-        fontSize: "11",
-        fill: "white",
-        pointerEvents: "none",
-        children: node.label
+        series: resolvedSeries,
+        data: graphData,
+        showValues: true,
+        valueSource: "latest"
       }
     )
   ] });
-};
-function resolveNode(ref, map) {
-  return typeof ref === "string" ? map.get(ref) : ref;
 }
-var GraphEdge = ({ edge, nodeMap }) => {
-  const source = resolveNode(edge.from, nodeMap);
-  const target = resolveNode(edge.to, nodeMap);
-  if (!source || !target) return null;
-  if (source.x == null || source.y == null) return null;
-  if (target.x == null || target.y == null) return null;
-  const labelX = (source.x + target.x) / 2;
-  const labelY = (source.y + target.y) / 2;
-  return /* @__PURE__ */ jsxs("g", { children: [
-    /* @__PURE__ */ jsx(
-      "line",
-      {
-        x1: source.x,
-        y1: source.y,
-        x2: target.x,
-        y2: target.y,
-        stroke: "#64748b",
-        strokeWidth: 1.5
-      }
-    ),
-    edge.weight && /* @__PURE__ */ jsx(
-      "text",
+function GaugeGraph({
+  data,
+  valueKey = "value",
+  label,
+  value,
+  min = 0,
+  max = 100,
+  height = GRAPH_DEFAULT_HEIGHT,
+  color,
+  unit,
+  format = "number",
+  loading,
+  error,
+  className = ""
+}) {
+  const context = useGraphContext();
+  const theme = useGraphTheme();
+  const graphData = data ?? context.data;
+  const graphLoading = loading ?? context.loading;
+  const graphError = error ?? context.error;
+  const resolvedValue = useMemo(() => {
+    if (typeof value === "number") {
+      return value;
+    }
+    const latestPoint = graphData[graphData.length - 1];
+    const latestValue = latestPoint?.[String(valueKey)];
+    return typeof latestValue === "number" ? latestValue : void 0;
+  }, [graphData, value, valueKey]);
+  if (graphLoading) {
+    return /* @__PURE__ */ jsx(GraphLoadingState, { height, className });
+  }
+  if (graphError) {
+    return /* @__PURE__ */ jsx(
+      GraphErrorState,
       {
-        x: labelX,
-        y: labelY - 4,
-        textAnchor: "middle",
-        fontSize: 10,
-        fill: "#e5e7eb",
-        children: edge.weight
+        error: graphError,
+        height,
+        className
       }
-    )
-  ] });
-};
-var GraphRenderer = ({
-  data,
-  layout = "force",
-  nodeRenderer,
-  width = 1e3,
-  height = 700
-}) => {
-  const [nodes, setNodes] = useState([]);
-  const edges = data.edges;
-  const simulationRef = useRef(null);
-  const [offset, setOffset] = useState({ x: 0, y: 0 });
-  const isDragging = useRef(false);
-  const lastPos = useRef({ x: 0, y: 0 });
-  const nodeMap = useMemo(() => {
-    return new Map(nodes.map((n) => [n.id, n]));
-  }, [nodes]);
-  useEffect(() => {
-    simulationRef.current?.stop?.();
-    const positionedNodes = data.nodes.map((n) => ({
-      ...n,
-      x: width / 2,
-      y: height / 2
-    }));
-    const executor = getLayout(layout);
-    const instance = executor({
-      nodes: positionedNodes,
-      edges,
-      width,
-      height,
-      onTick: setNodes
-    });
-    simulationRef.current = instance;
-    return () => instance.stop?.();
-  }, [data, layout, width, height]);
-  const onMouseDown = (e) => {
-    isDragging.current = true;
-    lastPos.current = { x: e.clientX, y: e.clientY };
-  };
-  const onMouseMove = (e) => {
-    if (!isDragging.current) return;
-    const dx = e.clientX - lastPos.current.x;
-    const dy = e.clientY - lastPos.current.y;
-    setOffset((prev) => ({
-      x: prev.x + dx,
-      y: prev.y + dy
-    }));
-    lastPos.current = { x: e.clientX, y: e.clientY };
-  };
-  const stopDrag = () => isDragging.current = false;
-  return /* @__PURE__ */ jsx("div", { className: "relative overflow-hidden border border-gray-800 rounded-lg", children: /* @__PURE__ */ jsx(
-    "svg",
+    );
+  }
+  if (resolvedValue === void 0) {
+    return /* @__PURE__ */ jsx(GraphEmptyState, { height, className });
+  }
+  const range = max - min;
+  const percentage = range === 0 ? 0 : Math.min(100, Math.max(0, (resolvedValue - min) / range * 100));
+  const radius = 72;
+  const strokeWidth = 14;
+  const circumference = Math.PI * radius;
+  const offset = circumference - percentage / 100 * circumference;
+  const resolvedColor = resolveGraphColor(color, {
+    index: 0,
+    palette: theme.colors
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      width: "100%",
-      height,
-      viewBox: `0 0 ${width} ${height}`,
-      onMouseDown,
-      onMouseMove,
-      onMouseUp: stopDrag,
-      onMouseLeave: stopDrag,
-      style: {
-        cursor: isDragging.current ? "grabbing" : "grab"
-      },
-      children: /* @__PURE__ */ jsxs("g", { transform: `translate(${offset.x}, ${offset.y})`, children: [
-        edges.map((edge, i) => /* @__PURE__ */ jsx(GraphEdge, { edge, nodeMap }, edge.id || i)),
-        nodes.map((node) => /* @__PURE__ */ jsx(GraphNode, { node, renderCustom: nodeRenderer }, node.id))
+      className: `eui-graph flex items-center justify-center ${className}`,
+      style: { height },
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", children: [
+        /* @__PURE__ */ jsxs("svg", { width: "220", height: "130", viewBox: "0 0 220 130", children: [
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M 38 104 A 72 72 0 0 1 182 104",
+              fill: "none",
+              stroke: theme.chart.grid,
+              strokeWidth,
+              strokeLinecap: "round"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M 38 104 A 72 72 0 0 1 182 104",
+              fill: "none",
+              stroke: resolvedColor,
+              strokeWidth,
+              strokeLinecap: "round",
+              strokeDasharray: circumference,
+              strokeDashoffset: offset
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "text",
+            {
+              x: "110",
+              y: "92",
+              textAnchor: "middle",
+              fill: theme.tooltip.text,
+              fontSize: "28",
+              fontWeight: "700",
+              children: formatGraphValue(resolvedValue, {
+                format,
+                suffix: unit,
+                maximumFractionDigits: 2
+              })
+            }
+          ),
+          label && /* @__PURE__ */ jsx(
+            "text",
+            {
+              x: "110",
+              y: "118",
+              textAnchor: "middle",
+              fill: theme.tooltip.muted,
+              fontSize: "12",
+              children: label
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[180px] justify-between text-xs text-gray-500", children: [
+          /* @__PURE__ */ jsx("span", { children: formatGraphValue(min, {
+            format,
+            suffix: unit
+          }) }),
+          /* @__PURE__ */ jsx("span", { children: formatGraphValue(max, {
+            format,
+            suffix: unit
+          }) })
+        ] })
       ] })
     }
-  ) });
-};
-var Graph = ({
+  );
+}
+function StatGraph({
   data,
-  layout = "force",
-  nodeRenderer,
-  width = 800,
-  height = 500,
-  className,
-  ...rest
-}) => {
-  return /* @__PURE__ */ jsx(
+  valueKey = "value",
+  label,
+  value,
+  previousValue,
+  format = "number",
+  prefix,
+  suffix,
+  unit,
+  loading,
+  error,
+  className = "",
+  showTrend = true
+}) {
+  const context = useGraphContext();
+  const graphData = data ?? context.data;
+  const graphLoading = loading ?? context.loading;
+  const graphError = error ?? context.error;
+  const resolvedValue = useMemo(() => {
+    if (value !== void 0) {
+      return value;
+    }
+    const latestPoint = graphData[graphData.length - 1];
+    return latestPoint?.[String(valueKey)] ?? null;
+  }, [graphData, value, valueKey]);
+  const resolvedPreviousValue = useMemo(() => {
+    if (previousValue !== void 0) {
+      return previousValue;
+    }
+    const previousPoint = graphData[graphData.length - 2];
+    const previous = previousPoint?.[String(valueKey)];
+    return typeof previous === "number" ? previous : void 0;
+  }, [graphData, previousValue, valueKey]);
+  const trend = useMemo(() => {
+    if (typeof resolvedValue !== "number" || typeof resolvedPreviousValue !== "number") {
+      return null;
+    }
+    const difference = resolvedValue - resolvedPreviousValue;
+    const percentage = resolvedPreviousValue === 0 ? 0 : difference / Math.abs(resolvedPreviousValue) * 100;
+    return {
+      difference,
+      percentage,
+      direction: difference > 0 ? "up" : difference < 0 ? "down" : "neutral"
+    };
+  }, [resolvedPreviousValue, resolvedValue]);
+  if (graphLoading) {
+    return /* @__PURE__ */ jsx(GraphLoadingState, { height: 120, className });
+  }
+  if (graphError) {
+    return /* @__PURE__ */ jsx(GraphErrorState, { error: graphError, height: 120, className });
+  }
+  if (resolvedValue === null || resolvedValue === void 0) {
+    return /* @__PURE__ */ jsx(GraphEmptyState, { height: 120, className });
+  }
+  return /* @__PURE__ */ jsxs(
     "div",
     {
-      ...rest,
-      style: { width, height },
-      className: cn("relative bg-gray-900 rounded-lg", className),
-      children: /* @__PURE__ */ jsx(
-        GraphRenderer,
+      className: `eui-graph rounded-xl border border-[#2a2d35] bg-[#111217] p-5 ${className}`,
+      children: [
+        label && /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-400", children: label }),
+        /* @__PURE__ */ jsx("div", { className: "mt-2 text-3xl font-semibold tracking-tight text-gray-100", children: formatGraphValue(resolvedValue, {
+          format,
+          prefix,
+          suffix: suffix ?? unit
+        }) }),
+        showTrend && trend && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `mt-3 text-sm ${trend.direction === "up" ? "text-emerald-400" : trend.direction === "down" ? "text-red-400" : "text-gray-500"}`,
+            children: [
+              trend.direction === "up" ? "\u2191" : trend.direction === "down" ? "\u2193" : "\u2192",
+              " ",
+              formatGraphValue(Math.abs(trend.percentage), {
+                format: "number",
+                suffix: "%",
+                maximumFractionDigits: 2
+              })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function renderGraphChart(props) {
+  const {
+    type = "line",
+    data,
+    xKey,
+    series,
+    height,
+    loading,
+    error,
+    chartClassName = "",
+    showGrid = true,
+    showTooltip = true,
+    showLegend = true,
+    animated = true,
+    layout,
+    nameKey,
+    valueKey,
+    innerRadius,
+    outerRadius,
+    valueFormat,
+    value,
+    previousValue,
+    label,
+    min,
+    max,
+    color,
+    unit,
+    format,
+    prefix,
+    suffix,
+    showTrend
+  } = props;
+  switch (type) {
+    case "area":
+      return /* @__PURE__ */ jsx(
+        AreaGraph,
         {
           data,
-          layout,
-          nodeRenderer,
-          width,
-          height
+          xKey,
+          series,
+          height,
+          loading,
+          error,
+          className: chartClassName,
+          showGrid,
+          showTooltip,
+          showLegend,
+          animated
         }
-      )
+      );
+    case "bar":
+      return /* @__PURE__ */ jsx(
+        BarGraph,
+        {
+          data,
+          xKey,
+          series,
+          height,
+          loading,
+          error,
+          className: chartClassName,
+          showGrid,
+          showTooltip,
+          showLegend,
+          animated,
+          layout
+        }
+      );
+    case "pie":
+      return /* @__PURE__ */ jsx(
+        PieGraph,
+        {
+          data,
+          nameKey,
+          valueKey,
+          height,
+          loading,
+          error,
+          className: chartClassName,
+          showTooltip,
+          showLegend,
+          animated,
+          innerRadius,
+          outerRadius,
+          valueFormat,
+          unit
+        }
+      );
+    case "scatter":
+      return /* @__PURE__ */ jsx(
+        ScatterGraph,
+        {
+          data,
+          xKey,
+          series,
+          height,
+          loading,
+          error,
+          className: chartClassName,
+          showGrid,
+          showTooltip,
+          showLegend,
+          animated
+        }
+      );
+    case "gauge":
+      return /* @__PURE__ */ jsx(
+        GaugeGraph,
+        {
+          data,
+          valueKey,
+          value: typeof value === "number" ? value : void 0,
+          label,
+          min,
+          max,
+          height,
+          color,
+          unit,
+          format,
+          loading,
+          error,
+          className: chartClassName
+        }
+      );
+    case "stat":
+      return /* @__PURE__ */ jsx(
+        StatGraph,
+        {
+          data,
+          valueKey,
+          value,
+          previousValue,
+          label,
+          format,
+          prefix,
+          suffix,
+          unit,
+          loading,
+          error,
+          className: chartClassName,
+          showTrend
+        }
+      );
+    case "line":
+    default:
+      return /* @__PURE__ */ jsx(
+        LineGraph,
+        {
+          data,
+          xKey,
+          series,
+          height,
+          loading,
+          error,
+          className: chartClassName,
+          showGrid,
+          showTooltip,
+          showLegend,
+          animated
+        }
+      );
+  }
+}
+function GraphContent(props) {
+  const {
+    children,
+    withPanel = true,
+    title,
+    description,
+    actions,
+    toolbar,
+    className = "",
+    contentClassName = "",
+    height,
+    loading,
+    error,
+    showToolbar = false,
+    showRefresh = true,
+    showLastUpdated = true,
+    emptyMessage,
+    emptyDescription,
+    onRetry
+  } = props;
+  const chart = children ?? renderGraphChart(props);
+  if (!withPanel) {
+    return /* @__PURE__ */ jsx(Fragment, { children: chart });
+  }
+  return /* @__PURE__ */ jsx(
+    GraphPanel,
+    {
+      title,
+      description,
+      actions,
+      toolbar,
+      className,
+      contentClassName,
+      height,
+      loading,
+      error,
+      empty: children ? false : void 0,
+      showToolbar,
+      showRefresh,
+      showLastUpdated,
+      emptyMessage,
+      emptyDescription,
+      onRetry,
+      children: chart
+    }
+  );
+}
+function Graph(props) {
+  const {
+    data,
+    dataSource,
+    autoLoad = true,
+    maxDataPoints,
+    theme,
+    onDataChange,
+    onError
+  } = props;
+  const shouldUseProvider = Boolean(data || dataSource);
+  const content = /* @__PURE__ */ jsx(GraphContent, { ...props });
+  if (!shouldUseProvider) {
+    return content;
+  }
+  return /* @__PURE__ */ jsx(
+    GraphProvider,
+    {
+      data,
+      dataSource,
+      autoLoad,
+      maxDataPoints,
+      theme,
+      onDataChange,
+      onError,
+      children: content
     }
   );
+}
+
+// src/components/data-display/graphs-v2/datasource/GraphDataSource.ts
+var BaseGraphDataSource = class {
+  normalizeError(error) {
+    if (error instanceof Error) {
+      return error;
+    }
+    return new Error(String(error));
+  }
+  ensureArray(data) {
+    if (!data) {
+      return [];
+    }
+    return Array.isArray(data) ? data : [data];
+  }
+  safeExecute(executor) {
+    try {
+      return Promise.resolve(executor());
+    } catch (error) {
+      return Promise.reject(this.normalizeError(error));
+    }
+  }
+};
+
+// src/components/data-display/graphs-v2/datasource/StaticGraphDataSource.ts
+var StaticGraphDataSource = class extends BaseGraphDataSource {
+  constructor(config = {}) {
+    super();
+    this.mode = GRAPH_DATA_MODES.STATIC;
+    this.data = Array.isArray(config) ? config : config.data ?? [];
+  }
+  getInitialData() {
+    return this.data;
+  }
+  refresh() {
+    return this.data;
+  }
+  setData(data) {
+    this.data = data;
+  }
+  appendData(data) {
+    const nextData = this.ensureArray(data);
+    this.data = [...this.data, ...nextData];
+  }
+  clearData() {
+    this.data = [];
+  }
+};
+
+// src/components/data-display/graphs-v2/datasource/PollingGraphDataSource.ts
+var PollingGraphDataSource = class extends BaseGraphDataSource {
+  constructor(config) {
+    super();
+    this.mode = GRAPH_DATA_MODES.POLLING;
+    this.fetcher = config.fetcher;
+    this.interval = config.interval ?? GRAPH_DEFAULT_POLLING_INTERVAL;
+    this.immediate = config.immediate ?? true;
+  }
+  getInitialData() {
+    return this.refresh();
+  }
+  refresh() {
+    return this.safeExecute(async () => {
+      const data = await this.fetcher();
+      return this.ensureArray(data);
+    });
+  }
+  subscribe(onData, onError) {
+    let disposed = false;
+    let fetching = false;
+    let timer;
+    const execute = async () => {
+      if (disposed || fetching) {
+        return;
+      }
+      try {
+        fetching = true;
+        const data = await this.refresh();
+        if (!disposed) {
+          onData(data);
+        }
+      } catch (error) {
+        if (!disposed) {
+          onError?.(this.normalizeError(error));
+        }
+      } finally {
+        fetching = false;
+      }
+    };
+    if (this.immediate) {
+      void execute();
+    }
+    timer = globalThis.setInterval(() => {
+      void execute();
+    }, this.interval);
+    return () => {
+      disposed = true;
+      if (timer) {
+        globalThis.clearInterval(timer);
+      }
+    };
+  }
+};
+
+// src/components/data-display/graphs-v2/datasource/RealtimeGraphDataSource.ts
+var RealtimeGraphDataSource = class extends BaseGraphDataSource {
+  constructor(config) {
+    super();
+    this.mode = GRAPH_DATA_MODES.REALTIME;
+    this.connect = config.connect;
+    this.initialDataLoader = config.getInitialData;
+    this.refreshHandler = config.refresh;
+  }
+  getInitialData() {
+    if (!this.initialDataLoader) {
+      return [];
+    }
+    return this.safeExecute(async () => {
+      const data = await this.initialDataLoader?.();
+      return this.ensureArray(data);
+    });
+  }
+  refresh() {
+    if (!this.refreshHandler) {
+      return this.getInitialData();
+    }
+    return this.safeExecute(async () => {
+      const data = await this.refreshHandler?.();
+      return this.ensureArray(data);
+    });
+  }
+  subscribe(onData, onError) {
+    try {
+      return this.connect(
+        (data) => {
+          onData(this.ensureArray(data));
+        },
+        (error) => {
+          onError?.(this.normalizeError(error));
+        }
+      );
+    } catch (error) {
+      onError?.(this.normalizeError(error));
+      return () => {
+      };
+    }
+  }
 };
 var CloudinaryContext = createContext(null);
 var CloudinaryProvider = ({
@@ -2033,7 +4220,7 @@ var ListItem = ({
             children: bullet
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: TypographyComponent ? React4.cloneElement(
+        /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: TypographyComponent ? React3.cloneElement(
           TypographyComponent,
           {
             className: cn(
@@ -2067,7 +4254,7 @@ function normalizeItem(item, defaultBulletType) {
       bulletType: defaultBulletType
     };
   }
-  if (React4.isValidElement(item)) {
+  if (React3.isValidElement(item)) {
     return {
       content: item,
       bulletType: defaultBulletType
@@ -2624,7 +4811,7 @@ function Tag({ text, className, ...rest }) {
   );
 }
 var Tag_default = Tag;
-function Tooltip4({
+function Tooltip9({
   children,
   show,
   offsetX = 20,
@@ -3104,7 +5291,7 @@ var ShapeSwitch = () => {
     {
       value: currentShape,
       onChange: handleChange,
-      className: "\r\n          px-3 py-2 rounded-md border border-gray-300\r\n          bg-white dark:bg-gray-800\r\n          text-sm shadow-sm\r\n          focus:outline-none\r\n        ",
+      className: "\n          px-3 py-2 rounded-md border border-gray-300\n          bg-white dark:bg-gray-800\n          text-sm shadow-sm\n          focus:outline-none\n        ",
       children: Object.keys(Shape).map((shape) => /* @__PURE__ */ jsx("option", { value: shape, children: shape }, shape))
     }
   ) });
@@ -14526,7 +16713,7 @@ function WorldMap({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(Tooltip4, { show: showTooltip, children: tooltipContent })
+    /* @__PURE__ */ jsx(Tooltip9, { show: showTooltip, children: tooltipContent })
   ] });
 }
 var sizes4 = {
@@ -16098,7 +18285,7 @@ function MarkdownTOC({ title = "Table of Contents" }) {
     /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
       "h2",
       {
-        className: "\r\n            text-sm\r\n            font-semibold\r\n            uppercase\r\n            tracking-wide\r\n            text-gray-900\r\n            dark:text-gray-100\r\n          ",
+        className: "\n            text-sm\n            font-semibold\n            uppercase\n            tracking-wide\n            text-gray-900\n            dark:text-gray-100\n          ",
         children: title
       }
     ) }),
@@ -16326,7 +18513,7 @@ var Breadcrumb = ({
           navigate(item.href);
         }
       };
-      return /* @__PURE__ */ jsxs(React4.Fragment, { children: [
+      return /* @__PURE__ */ jsxs(React3.Fragment, { children: [
         /* @__PURE__ */ jsx(
           BreadcrumbItem_default,
           {
@@ -17428,7 +19615,7 @@ var GlowWrapper = ({
         /* @__PURE__ */ jsx(
           "span",
           {
-            className: "\r\n          pointer-events-none absolute inset-0 opacity-0 \r\n          group-hover:opacity-100 transition-opacity duration-300\r\n        ",
+            className: "\n          pointer-events-none absolute inset-0 opacity-0 \n          group-hover:opacity-100 transition-opacity duration-300\n        ",
             style: { background: "var(--glow-bg)" }
           }
         ),
@@ -19100,6 +21287,6 @@ function ScrollToTop({
 }
 var ScrollToTop_default = ScrollToTop;
 
-export { Accordion_default as Accordion, AsyncComponentWrapper_default as AsyncComponentWrapper, Avatar, Backdrop_default as Backdrop, Badge, BarChart_default as BarChart, Block_default as Block, BlockGroup_default as BlockGroup, BoxNav_default as BoxNav, BoxNavItem_default as BoxNavItem, Brand_default as Brand, Breadcrumb, BreadcrumbItem_default as BreadcrumbItem, Button_default as Button, Caption, Card_default as Card, CardContent_default as CardContent, CardFooter_default as CardFooter, CardHeader_default as CardHeader, Chapter, Checkbox_default as Checkbox, Chip, CloudinaryImage_default as CloudinaryImage, CloudinaryProvider, CloudinaryVideo_default as CloudinaryVideo, Code, CommentThread_default as CommentThread, Content, ContentArea_default as ContentArea, DataView, DataViewTable_default as DataViewTable, DateSelector_default as DateSelector, DefaultLayout_default as DefaultLayout, Display, DocumentationPanel_default as DocumentationPanel, Drawer, DrawerToggler_default as DrawerToggler, EUIDevLayout_default as EUIDevLayout, EUIProvider, Flag, Flex, FlexCol_default as FlexCol, FlexRow_default as FlexRow, Footer, FooterNav_default as FooterNav, FooterNavGroup_default as FooterNavGroup, FooterNavItem, FooterNavItemContext, FooterNavItemTitle, Form, FormResponse_default as FormResponse, GenericLayout_default as GenericLayout, GlowWrapper_default as GlowWrapper, Graph, GraphEdge, GraphNode, GraphRenderer, Grid_default as Grid, Header, HeaderNav_default as HeaderNav, HeaderNavGroup_default as HeaderNavGroup, HeaderNavItem, HeaderNavItemContext, HeaderNavItemTitle, HomeLayout_default as HomeLayout, Image2 as Image, ImageInput_default as ImageInput, InfiniteScrollTrigger_default as InfiniteScrollTrigger, Info_default as Info, Input, InputFile, InputLabel_default as InputLabel, InputList, InputListGroup, InputResponse_default as InputResponse, Label, Layout, Lead, LineChart_default as LineChart, Link, List_default as List, ListItem_default as ListItem, MarkdownEditor_default as MarkdownEditor, MarkdownProvider_default as MarkdownProvider, MarkdownTOC_default as MarkdownTOC, MarkdownViewer_default as MarkdownViewer, Menu, MenuGroup, MenuItem, MenuItemTitle, Modal_default as Modal, MotionSurface_default as MotionSurface, MultiImageInput_default as MultiImageInput, NumericRating_default as NumericRating, Overline, Paragraph, PieChart_default as PieChart, PriceTag, ProgressBar, ProgressBarRating_default as ProgressBarRating, Quote, Radio_default as Radio, RouteTab_default as RouteTab, RouteTabs_default as RouteTabs, ScrollToTop_default as ScrollToTop, Section, Select_default as Select, ShapeSwitch, ShowMore_default as ShowMore, Sidebar_default as Sidebar, SidebarLayout_default as SidebarLayout, SidemenuLayout_default as SidemenuLayout, Skeleton, Slider_default as Slider, StarRating_default as StarRating, StarRatingDistribution_default as StarRatingDistribution, StarRatingInput_default as StarRatingInput, Switch_default as Switch, TNDropdown, TNDropdownItem, TNDropdownTitle, TNGroup, Table_default as Table, Tag_default as Tag, Tags_default as Tags, TextArea_default as TextArea, ThemeContext, ThemeProvider, ThemeSwitch, TitleBanner, Toast, Tooltip4 as Tooltip, TopNav, Transition4 as Transition, TransitionDropdown_default as TransitionDropdown, TransitionFadeIn_default as TransitionFadeIn, Typography, UnderConstructionBanner, ValueBadge_default as ValueBadge, WorldMap, WorldMapCountryTable, YoutubeVideo_default as YoutubeVideoPlayer, addReplyToCache, applyReactionState, cn, createForceLayout, createGridLayout, createTreeLayout, decrementReplyCount, enumValues, formatCommentDate, getCurrencySymbol, getLayout, getOptimisticDislikeState, getOptimisticLikeState, incrementReplyCount, isMatch, isRenderFn, normalize, registerLayout, removeComment, removeCommentTreeFromCache, resolveAppearanceStyles, resolveWithGlobal, sendToast, updateComment, updateReplyCacheComment, useClickOutside, useCloudinaryConfig, useCurrentTheme_default as useCurrentTheme, useDrawer_default as useDrawer, useEUIConfig, useIsMobile_default as useIsMobile, useModal_default as useModal, useTheme_default as useTheme };
+export { Accordion_default as Accordion, AreaGraph, AsyncComponentWrapper_default as AsyncComponentWrapper, Avatar, Backdrop_default as Backdrop, Badge, BarChart_default as BarChart, BarGraph, BaseGraphDataSource, Block_default as Block, BlockGroup_default as BlockGroup, BoxNav_default as BoxNav, BoxNavItem_default as BoxNavItem, Brand_default as Brand, Breadcrumb, BreadcrumbItem_default as BreadcrumbItem, Button_default as Button, Caption, Card_default as Card, CardContent_default as CardContent, CardFooter_default as CardFooter, CardHeader_default as CardHeader, Chapter, Checkbox_default as Checkbox, Chip, CloudinaryImage_default as CloudinaryImage, CloudinaryProvider, CloudinaryVideo_default as CloudinaryVideo, Code, CommentThread_default as CommentThread, Content, ContentArea_default as ContentArea, DEFAULT_GRAPH_THEME, DataView, DataViewTable_default as DataViewTable, DateSelector_default as DateSelector, DefaultLayout_default as DefaultLayout, Display, DocumentationPanel_default as DocumentationPanel, Drawer, DrawerToggler_default as DrawerToggler, EUIDevLayout_default as EUIDevLayout, EUIProvider, Flag, Flex, FlexCol_default as FlexCol, FlexRow_default as FlexRow, Footer, FooterNav_default as FooterNav, FooterNavGroup_default as FooterNavGroup, FooterNavItem, FooterNavItemContext, FooterNavItemTitle, Form, FormResponse_default as FormResponse, GRAPH_COLOR_PALETTE, GRAPH_DARK_THEME, GRAPH_DATA_MODES, GRAPH_DEFAULT_ACTIVE_DOT_RADIUS, GRAPH_DEFAULT_ANIMATION_DURATION, GRAPH_DEFAULT_BAR_RADIUS, GRAPH_DEFAULT_DOT_RADIUS, GRAPH_DEFAULT_HEIGHT, GRAPH_DEFAULT_MARGIN, GRAPH_DEFAULT_MAX_REALTIME_POINTS, GRAPH_DEFAULT_POLLING_INTERVAL, GRAPH_DEFAULT_STROKE_WIDTH, GRAPH_EMPTY_MESSAGE, GRAPH_ERROR_MESSAGE, GRAPH_LIGHT_THEME, GRAPH_LOADING_MESSAGE, GRAPH_STATUSES, GRAPH_STATUS_COLORS, GRAPH_VALUE_FORMATS, GaugeGraph, GenericLayout_default as GenericLayout, GlowWrapper_default as GlowWrapper, Graph, GraphContainer, GraphContext, GraphEmptyState, GraphErrorState, GraphHeader, GraphLegend, GraphLoadingState, GraphPanel, GraphProvider, GraphToolbar, GraphTooltip, Grid_default as Grid, Header, HeaderNav_default as HeaderNav, HeaderNavGroup_default as HeaderNavGroup, HeaderNavItem, HeaderNavItemContext, HeaderNavItemTitle, HomeLayout_default as HomeLayout, Image2 as Image, ImageInput_default as ImageInput, InfiniteScrollTrigger_default as InfiniteScrollTrigger, Info_default as Info, Input, InputFile, InputLabel_default as InputLabel, InputList, InputListGroup, InputResponse_default as InputResponse, Label, Layout, Lead, LineChart_default as LineChart, LineGraph, Link, List_default as List, ListItem_default as ListItem, MarkdownEditor_default as MarkdownEditor, MarkdownProvider_default as MarkdownProvider, MarkdownTOC_default as MarkdownTOC, MarkdownViewer_default as MarkdownViewer, Menu, MenuGroup, MenuItem, MenuItemTitle, Modal_default as Modal, MotionSurface_default as MotionSurface, MultiImageInput_default as MultiImageInput, NumericRating_default as NumericRating, Overline, Paragraph, PieChart_default as PieChart, PieGraph, PollingGraphDataSource, PriceTag, ProgressBar, ProgressBarRating_default as ProgressBarRating, Quote, Radio_default as Radio, RealtimeGraphDataSource, RouteTab_default as RouteTab, RouteTabs_default as RouteTabs, ScatterGraph, ScrollToTop_default as ScrollToTop, Section, Select_default as Select, ShapeSwitch, ShowMore_default as ShowMore, Sidebar_default as Sidebar, SidebarLayout_default as SidebarLayout, SidemenuLayout_default as SidemenuLayout, Skeleton, Slider_default as Slider, StarRating_default as StarRating, StarRatingDistribution_default as StarRatingDistribution, StarRatingInput_default as StarRatingInput, StatGraph, StaticGraphDataSource, Switch_default as Switch, TNDropdown, TNDropdownItem, TNDropdownTitle, TNGroup, Table_default as Table, Tag_default as Tag, Tags_default as Tags, TextArea_default as TextArea, ThemeContext, ThemeProvider, ThemeSwitch, TitleBanner, Toast, Tooltip9 as Tooltip, TopNav, Transition4 as Transition, TransitionDropdown_default as TransitionDropdown, TransitionFadeIn_default as TransitionFadeIn, Typography, UnderConstructionBanner, ValueBadge_default as ValueBadge, WorldMap, WorldMapCountryTable, YoutubeVideo_default as YoutubeVideoPlayer, addReplyToCache, applyReactionState, cn, createInitialGraphState, decrementReplyCount, enumValues, formatCommentDate, formatGraphValue, getCurrencySymbol, getOptimisticDislikeState, getOptimisticLikeState, graphReducer, incrementReplyCount, isMatch, isRenderFn, limitRealtimePoints, normalize, normalizeGraphData, normalizeGraphDataPoint, removeComment, removeCommentTreeFromCache, replaceRealtimePoints, resolveAppearanceStyles, resolveGraphColor, resolveGraphColors, resolveWithGlobal, sendToast, updateComment, updateReplyCacheComment, useClickOutside, useCloudinaryConfig, useCurrentTheme_default as useCurrentTheme, useDrawer_default as useDrawer, useEUIConfig, useGraphContext, useGraphData, useGraphPolling, useGraphRealtime, useGraphSeries, useGraphTheme, useIsMobile_default as useIsMobile, useModal_default as useModal, useTheme_default as useTheme };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map