@vaultgradient/pipequery-cli 0.3.2

package/src/tui/MonitorApp.tsx

@@ -0,0 +1,271 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Text, useApp, useInput } from 'ink';
+
+// ─── Types ──────────────────────────────────────────────────────────────────
+
+interface SourceStatus {
+  healthy: boolean;
+  rowCount: number;
+  lastFetch: string | null;
+  error?: string;
+}
+
+interface ServerInfo {
+  status: string;
+  uptime: number;
+  sources: Record<string, SourceStatus>;
+}
+
+interface EndpointInfo {
+  query: string;
+  cache?: string;
+  method?: string;
+}
+
+interface ActivityEntry {
+  time: string;
+  level: 'info' | 'warn' | 'error';
+  message: string;
+}
+
+// ─── Hooks ──────────────────────────────────────────────────────────────────
+
+function useServerStatus(serverUrl: string, refreshMs: number) {
+  const [info, setInfo] = useState<ServerInfo | null>(null);
+  const [connected, setConnected] = useState(false);
+
+  useEffect(() => {
+    const fetchStatus = async () => {
+      try {
+        const res = await fetch(`${serverUrl}/status`);
+        const data = await res.json() as ServerInfo;
+        setInfo(data);
+        setConnected(true);
+      } catch {
+        setInfo(null);
+        setConnected(false);
+      }
+    };
+    fetchStatus();
+    const timer = setInterval(fetchStatus, refreshMs);
+    return () => clearInterval(timer);
+  }, [serverUrl, refreshMs]);
+
+  return { info, connected };
+}
+
+function useEndpoints(serverUrl: string, refreshMs: number) {
+  const [endpoints, setEndpoints] = useState<Record<string, EndpointInfo>>({});
+
+  useEffect(() => {
+    const fetchEndpoints = async () => {
+      try {
+        const res = await fetch(`${serverUrl}/api/_control/endpoints`);
+        const data = await res.json() as Record<string, EndpointInfo>;
+        setEndpoints(data);
+      } catch {
+        // ignore
+      }
+    };
+    fetchEndpoints();
+    const timer = setInterval(fetchEndpoints, refreshMs);
+    return () => clearInterval(timer);
+  }, [serverUrl, refreshMs]);
+
+  return endpoints;
+}
+
+function useActivityLog(serverUrl: string, refreshMs: number, maxLines: number) {
+  const [entries, setEntries] = useState<ActivityEntry[]>([]);
+
+  useEffect(() => {
+    const fetchActivity = async () => {
+      try {
+        const res = await fetch(`${serverUrl}/api/_control/activity`);
+        const data = await res.json() as ActivityEntry[];
+        setEntries(data.slice(-maxLines));
+      } catch {
+        // ignore
+      }
+    };
+    fetchActivity();
+    const timer = setInterval(fetchActivity, refreshMs);
+    return () => clearInterval(timer);
+  }, [serverUrl, refreshMs, maxLines]);
+
+  return entries;
+}
+
+// ─── Components ─────────────────────────────────────────────────────────────
+
+function Header({ connected, uptime }: { connected: boolean; uptime: number }) {
+  return (
+    <Box paddingX={1} justifyContent="space-between">
+      <Box gap={1}>
+        <Text bold color="#06b6d4">⬡</Text>
+        <Text bold color="#06b6d4">PipeQuery Monitor</Text>
+      </Box>
+      <Box gap={2}>
+        <Text color={connected ? '#22c55e' : '#ef4444'}>
+          {connected ? '● connected' : '● disconnected'}
+        </Text>
+        <Text dimColor>uptime: {formatUptime(uptime)}</Text>
+      </Box>
+    </Box>
+  );
+}
+
+function SourcesPanel({ sources }: { sources: Record<string, SourceStatus> }) {
+  const entries = Object.entries(sources);
+  return (
+    <Box flexDirection="column" borderStyle="round" borderColor="#4f46e5" paddingX={1}>
+      <Box marginBottom={0}>
+        <Text bold color="#4f46e5"> Sources ({entries.length}) </Text>
+      </Box>
+      {entries.length === 0 ? (
+        <Text dimColor>  No sources configured</Text>
+      ) : (
+        <>
+          <Box>
+            <Box width={20}><Text dimColor bold>NAME</Text></Box>
+            <Box width={10}><Text dimColor bold>STATUS</Text></Box>
+            <Box width={10}><Text dimColor bold>ROWS</Text></Box>
+            <Box width={22}><Text dimColor bold>LAST FETCH</Text></Box>
+            <Box><Text dimColor bold>ERROR</Text></Box>
+          </Box>
+          {entries.map(([name, status]) => (
+            <Box key={name}>
+              <Box width={20}><Text color="#06b6d4">{name}</Text></Box>
+              <Box width={10}>
+                <Text color={status.healthy ? '#22c55e' : '#ef4444'}>
+                  {status.healthy ? '✓ ok' : '✗ err'}
+                </Text>
+              </Box>
+              <Box width={10}><Text>{String(status.rowCount)}</Text></Box>
+              <Box width={22}>
+                <Text dimColor>
+                  {status.lastFetch ? new Date(status.lastFetch).toLocaleTimeString() : '—'}
+                </Text>
+              </Box>
+              <Box><Text color="#ef4444">{status.error ?? ''}</Text></Box>
+            </Box>
+          ))}
+        </>
+      )}
+    </Box>
+  );
+}
+
+function EndpointsPanel({ endpoints, serverUrl }: { endpoints: Record<string, EndpointInfo>; serverUrl: string }) {
+  const entries = Object.entries(endpoints);
+  return (
+    <Box flexDirection="column" borderStyle="round" borderColor="#7c3aed" paddingX={1}>
+      <Box marginBottom={0}>
+        <Text bold color="#7c3aed"> Endpoints ({entries.length}) </Text>
+      </Box>
+      {entries.length === 0 ? (
+        <Text dimColor>  No endpoints registered</Text>
+      ) : (
+        <>
+          <Box>
+            <Box width={30}><Text dimColor bold>PATH</Text></Box>
+            <Box width={10}><Text dimColor bold>CACHE</Text></Box>
+            <Box><Text dimColor bold>QUERY</Text></Box>
+          </Box>
+          {entries.map(([path, config]) => (
+            <Box key={path}>
+              <Box width={30}><Text color="#06b6d4">{serverUrl}{path}</Text></Box>
+              <Box width={10}><Text dimColor>{config.cache ?? '—'}</Text></Box>
+              <Box><Text>{config.query}</Text></Box>
+            </Box>
+          ))}
+        </>
+      )}
+    </Box>
+  );
+}
+
+function ActivityPanel({ entries }: { entries: ActivityEntry[] }) {
+  return (
+    <Box flexDirection="column" borderStyle="round" borderColor="gray" paddingX={1}>
+      <Box marginBottom={0}>
+        <Text bold color="gray"> Activity Log </Text>
+      </Box>
+      {entries.length === 0 ? (
+        <Text dimColor>  No activity yet — run queries, add sources, or hit endpoints</Text>
+      ) : (
+        entries.map((entry, i) => {
+          const time = new Date(entry.time).toLocaleTimeString();
+          const levelColor = entry.level === 'error' ? '#ef4444' : entry.level === 'warn' ? '#f59e0b' : '#22c55e';
+          const levelIcon = entry.level === 'error' ? '✗' : entry.level === 'warn' ? '⚠' : '→';
+          return (
+            <Box key={i} gap={1}>
+              <Text dimColor>{time}</Text>
+              <Text color={levelColor}>{levelIcon}</Text>
+              <Text color={entry.level === 'error' ? '#ef4444' : undefined}>
+                {entry.message}
+              </Text>
+            </Box>
+          );
+        })
+      )}
+    </Box>
+  );
+}
+
+function HelpBar() {
+  return (
+    <Box paddingX={1} justifyContent="center" gap={3}>
+      <Text dimColor>q: quit</Text>
+      <Text dimColor>r: refresh</Text>
+      <Text dimColor>auto-refresh: 2s</Text>
+    </Box>
+  );
+}
+
+// ─── Helpers ────────────────────────────────────────────────────────────────
+
+function formatUptime(ms: number): string {
+  const s = Math.floor(ms / 1000);
+  if (s < 60) return `${s}s`;
+  if (s < 3600) return `${Math.floor(s / 60)}m ${s % 60}s`;
+  const h = Math.floor(s / 3600);
+  const m = Math.floor((s % 3600) / 60);
+  return `${h}h ${m}m`;
+}
+
+// ─── Main App ───────────────────────────────────────────────────────────────
+
+interface MonitorAppProps {
+  serverUrl: string;
+  logPath?: string;
+}
+
+export function MonitorApp({ serverUrl }: MonitorAppProps) {
+  const { exit } = useApp();
+  const { info, connected } = useServerStatus(serverUrl, 2000);
+  const endpoints = useEndpoints(serverUrl, 5000);
+  const activityEntries = useActivityLog(serverUrl, 2000, 15);
+  const [, setTick] = useState(0);
+
+  useInput((input) => {
+    if (input === 'q') exit();
+    if (input === 'r') setTick((t) => t + 1);
+  });
+
+  const sources = info?.sources ?? {};
+  const uptime = info?.uptime ?? 0;
+
+  return (
+    <Box flexDirection="column" padding={0}>
+      <Header connected={connected} uptime={uptime} />
+      <Box height={1} />
+      <SourcesPanel sources={sources} />
+      <Box height={1} />
+      <EndpointsPanel endpoints={endpoints} serverUrl={serverUrl} />
+      <Box height={1} />
+      <ActivityPanel entries={activityEntries} />
+      <HelpBar />
+    </Box>
+  );
+}

package/src/tui/components/BarChart.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+
+interface BarChartProps {
+  data: Record<string, unknown>[];
+  maxBars?: number;
+}
+
+const BLOCK = '█';
+const MAX_BAR_WIDTH = 40;
+
+export function BarChart({ data, maxBars = 10 }: BarChartProps) {
+  if (!data.length) return <Text dimColor>(empty)</Text>;
+
+  const keys = Object.keys(data[0]);
+  const labelKey = keys[0];
+  const valueKey = keys.find((k) => typeof data[0][k] === 'number') ?? keys[1];
+
+  const items = data.slice(0, maxBars).map((row) => ({
+    label: String(row[labelKey] ?? ''),
+    value: Number(row[valueKey]) || 0,
+  }));
+
+  const maxValue = Math.max(...items.map((i) => i.value), 1);
+  const maxLabelLen = Math.max(...items.map((i) => i.label.length), 1);
+
+  return (
+    <Box flexDirection="column">
+      {items.map((item, i) => {
+        const barLen = Math.round((item.value / maxValue) * MAX_BAR_WIDTH);
+        return (
+          <Box key={i}>
+            <Text>{item.label.padEnd(maxLabelLen)} </Text>
+            <Text color="cyan">{BLOCK.repeat(Math.max(1, barLen))}</Text>
+            <Text dimColor> {formatNum(item.value)}</Text>
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}
+
+function formatNum(n: number): string {
+  if (n >= 1e9) return (n / 1e9).toFixed(1) + 'B';
+  if (n >= 1e6) return (n / 1e6).toFixed(1) + 'M';
+  if (n >= 1e3) return (n / 1e3).toFixed(1) + 'K';
+  return Number.isInteger(n) ? String(n) : n.toFixed(2);
+}

package/src/tui/components/CandleChart.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+
+interface CandleChartProps {
+  data: unknown[];
+}
+
+interface Candle {
+  open: number;
+  high: number;
+  low: number;
+  close: number;
+  time: number;
+}
+
+const CHART_HEIGHT = 14;
+
+export function CandleChart({ data }: CandleChartProps) {
+  if (!data.length) return <Text dimColor>Waiting for candle data...</Text>;
+
+  // Parse kline events: { k: { o, h, l, c, t, ... } }
+  const candles: Candle[] = data
+    .map((item) => {
+      const k = (item as Record<string, unknown>).k as Record<string, unknown> | undefined;
+      if (!k) return null;
+      return {
+        open: parseFloat(k.o as string),
+        high: parseFloat(k.h as string),
+        low: parseFloat(k.l as string),
+        close: parseFloat(k.c as string),
+        time: k.t as number,
+      };
+    })
+    .filter((c): c is Candle => c !== null);
+
+  // Deduplicate by time (keep latest for each candle)
+  const byTime = new Map<number, Candle>();
+  for (const c of candles) byTime.set(c.time, c);
+  const unique = [...byTime.values()].slice(-20); // last 20 candles
+
+  if (unique.length === 0) return <Text dimColor>Waiting for candle data...</Text>;
+
+  const allHigh = Math.max(...unique.map((c) => c.high));
+  const allLow = Math.min(...unique.map((c) => c.low));
+  const priceRange = allHigh - allLow || 1;
+
+  // Map price to row (0 = top = highest price)
+  const toRow = (price: number) =>
+    Math.min(CHART_HEIGHT - 1, Math.max(0, Math.round(((allHigh - price) / priceRange) * (CHART_HEIGHT - 1))));
+
+  // Build output rows
+  const priceLabels = Array.from({ length: CHART_HEIGHT }, (_, row) => {
+    const price = allHigh - (row / (CHART_HEIGHT - 1)) * priceRange;
+    return formatPrice(price);
+  });
+  const labelWidth = Math.max(...priceLabels.map((l) => l.length));
+
+  // Render each row
+  const rows: React.ReactNode[] = [];
+  for (let row = 0; row < CHART_HEIGHT; row++) {
+    const cells: React.ReactNode[] = [];
+
+    for (let col = 0; col < unique.length; col++) {
+      const c = unique[col];
+      const bullish = c.close >= c.open;
+      const color = bullish ? 'green' : 'red';
+      const bodyTop = toRow(Math.max(c.open, c.close));
+      const bodyBot = toRow(Math.min(c.open, c.close));
+      const wickTop = toRow(c.high);
+      const wickBot = toRow(c.low);
+
+      let char: string;
+      let cellColor: string;
+
+      if (row >= bodyTop && row <= bodyBot) {
+        // Body — use wide block
+        char = '███';
+        cellColor = color;
+      } else if (row >= wickTop && row <= wickBot) {
+        // Wick
+        char = ' │ ';
+        cellColor = color;
+      } else {
+        char = '   ';
+        cellColor = 'white';
+      }
+
+      cells.push(
+        <Text key={col} color={cellColor as 'green' | 'red' | 'white'}>
+          {char}
+        </Text>,
+      );
+    }
+
+    rows.push(
+      <Box key={row}>
+        <Text dimColor>{priceLabels[row].padStart(labelWidth)} </Text>
+        <Text dimColor>│</Text>
+        {cells}
+      </Box>,
+    );
+  }
+
+  // Time axis
+  const latest = unique[unique.length - 1];
+  const oldest = unique[0];
+  const fmtTime = (t: number) => new Date(t).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  const axisWidth = unique.length * 3;
+
+  return (
+    <Box flexDirection="column">
+      {rows}
+      <Box>
+        <Text dimColor>
+          {' '.repeat(labelWidth + 1)}└{'─'.repeat(axisWidth)}
+        </Text>
+      </Box>
+      <Box>
+        <Text dimColor>
+          {' '.repeat(labelWidth + 2)}
+          {fmtTime(oldest.time).padEnd(axisWidth - fmtTime(latest.time).length)}
+          {fmtTime(latest.time)}
+        </Text>
+      </Box>
+    </Box>
+  );
+}
+
+function formatPrice(n: number): string {
+  if (n >= 1000) return n.toFixed(0);
+  if (n >= 1) return n.toFixed(2);
+  return n.toFixed(4);
+}

package/src/tui/components/Heatmap.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+
+interface HeatmapProps {
+  data: Record<string, unknown>[];
+}
+
+export function Heatmap({ data }: HeatmapProps) {
+  if (!data.length) return <Text dimColor>(empty)</Text>;
+
+  const keys = Object.keys(data[0]);
+  const labelKey = keys[0];
+  // Include keys that are numeric OR string-encoded numbers (like Binance data)
+  const numericKeys = keys.filter((k) => {
+    const v = data[0][k];
+    return typeof v === 'number' || (typeof v === 'string' && v !== '' && !isNaN(Number(v)));
+  });
+
+  if (numericKeys.length === 0) return <Text dimColor>No numeric columns for heatmap</Text>;
+
+  // Compute min/max per column for normalization
+  const ranges = new Map<string, { min: number; max: number }>();
+  for (const key of numericKeys) {
+    const vals = data.map((r) => Number(r[key]) || 0);
+    ranges.set(key, { min: Math.min(...vals), max: Math.max(...vals) });
+  }
+
+  const maxLabel = Math.max(...data.map((r) => String(r[labelKey] ?? '').length), 6);
+  const colWidth = 10;
+
+  return (
+    <Box flexDirection="column">
+      {/* Header */}
+      <Box>
+        <Text dimColor>{' '.repeat(maxLabel + 1)}</Text>
+        {numericKeys.map((k) => (
+          <Text key={k} dimColor>
+            {k.slice(0, colWidth).padStart(colWidth)}
+          </Text>
+        ))}
+      </Box>
+      {/* Rows */}
+      {data.slice(0, 20).map((row, i) => (
+        <Box key={i}>
+          <Text bold>
+            {String(row[labelKey] ?? '').slice(0, maxLabel).padEnd(maxLabel)}
+          </Text>
+          <Text> </Text>
+          {numericKeys.map((k) => {
+            const val = Number(row[k]) || 0;
+            const range = ranges.get(k)!;
+            const norm = range.max === range.min
+              ? 0.5
+              : (val - range.min) / (range.max - range.min);
+            const color = interpolateColor(norm);
+            const display = formatCell(val);
+            return (
+              <Text key={k} backgroundColor={color} color="white">
+                {display.padStart(colWidth)}
+              </Text>
+            );
+          })}
+        </Box>
+      ))}
+    </Box>
+  );
+}
+
+function interpolateColor(t: number): string {
+  // Red (0.0) → Yellow (0.5) → Green (1.0)
+  let r: number, g: number, b: number;
+  if (t < 0.5) {
+    const s = t * 2;
+    r = 180;
+    g = Math.round(s * 180);
+    b = 30;
+  } else {
+    const s = (t - 0.5) * 2;
+    r = Math.round(180 * (1 - s));
+    g = 180;
+    b = 30;
+  }
+  return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+}
+
+function formatCell(n: number): string {
+  if (Math.abs(n) >= 1e9) return (n / 1e9).toFixed(1) + 'B';
+  if (Math.abs(n) >= 1e6) return (n / 1e6).toFixed(1) + 'M';
+  if (Math.abs(n) >= 1e3) return (n / 1e3).toFixed(1) + 'K';
+  if (Number.isInteger(n)) return String(n);
+  return n.toFixed(2);
+}

package/src/tui/components/Layout.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Box } from 'ink';
+import type { PanelConfig } from '../../config/schema.js';
+
+interface LayoutProps {
+  panels: PanelConfig[];
+  focusedIndex: number;
+  colWeights: number[];
+  rowHeight: number;
+  renderPanel: (panel: PanelConfig, index: number, focused: boolean) => React.ReactNode;
+}
+
+export function Layout({ panels, focusedIndex, colWeights, rowHeight, renderPanel }: LayoutProps) {
+  // Group panels into rows of 2
+  const rows: { panel: PanelConfig; index: number }[][] = [];
+  for (let i = 0; i < panels.length; i += 2) {
+    const row: { panel: PanelConfig; index: number }[] = [{ panel: panels[i], index: i }];
+    if (i + 1 < panels.length) {
+      row.push({ panel: panels[i + 1], index: i + 1 });
+    }
+    rows.push(row);
+  }
+
+  return (
+    <Box flexDirection="column" flexGrow={1}>
+      {rows.map((row, rowIdx) => (
+        <Box key={rowIdx} flexDirection="row" height={rowHeight}>
+          {row.map(({ panel, index }) => {
+            const width = row.length === 1
+              ? '100%'
+              : `${colWeights[index]}%`;
+            return (
+              <Box key={index} width={width} minWidth={20}>
+                {renderPanel(panel, index, index === focusedIndex)}
+              </Box>
+            );
+          })}
+        </Box>
+      ))}
+    </Box>
+  );
+}

package/src/tui/components/OrderBook.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+
+interface OrderBookProps {
+  data: unknown;
+}
+
+const BLOCK = '█';
+const BAR_WIDTH = 20;
+const QTY_WIDTH = 10;
+const PRICE_WIDTH = 12;
+const ROWS = 10;
+
+export function OrderBook({ data }: OrderBookProps) {
+  const entries = Array.isArray(data) ? data : [];
+  const latest = entries[entries.length - 1] as
+    | { bids?: [string, string][]; asks?: [string, string][] }
+    | undefined;
+
+  if (!latest || !latest.bids || !latest.asks) {
+    return <Text dimColor>Waiting for order book data...</Text>;
+  }
+
+  const bids = latest.bids.slice(0, ROWS).map(([p, q]) => ({
+    price: parseFloat(p),
+    qty: parseFloat(q),
+  }));
+  const asks = latest.asks.slice(0, ROWS).map(([p, q]) => ({
+    price: parseFloat(p),
+    qty: parseFloat(q),
+  }));
+
+  // Use cumulative depth for bar sizing
+  const bidCum: number[] = [];
+  let sum = 0;
+  for (const b of bids) { sum += b.qty; bidCum.push(sum); }
+
+  const askCum: number[] = [];
+  sum = 0;
+  for (const a of asks) { sum += a.qty; askCum.push(sum); }
+
+  // Last cumulative value = full bar width (always fills to BAR_WIDTH at bottom)
+  const bidMax = bidCum[bidCum.length - 1] || 1;
+  const askMax = askCum[askCum.length - 1] || 1;
+
+  return (
+    <Box flexDirection="column">
+      <Box>
+        <Text dimColor>{pad('BIDS', BAR_WIDTH, 'right')}</Text>
+        <Text dimColor>{pad('QTY', QTY_WIDTH, 'left')}</Text>
+        <Text dimColor>{pad('PRICE', PRICE_WIDTH, 'left')}</Text>
+        <Text dimColor>{pad('QTY', QTY_WIDTH, 'left')}</Text>
+        <Text dimColor>{'ASKS'}</Text>
+      </Box>
+      {Array.from({ length: ROWS }, (_, i) => {
+        const bid = bids[i];
+        const ask = asks[i];
+        // Scale each side independently so bottom row is always full width
+        const bidWidth = bid ? Math.max(1, Math.round((bidCum[i] / bidMax) * BAR_WIDTH)) : 0;
+        const askWidth = ask ? Math.max(1, Math.round((askCum[i] / askMax) * BAR_WIDTH)) : 0;
+
+        return (
+          <Box key={i}>
+            <Text color="green">{BLOCK.repeat(bidWidth).padStart(BAR_WIDTH)}</Text>
+            <Text dimColor>{pad(bid ? bid.qty.toFixed(4) : '', QTY_WIDTH, 'left')}</Text>
+            <Text bold color={i < (bids.length) ? 'green' : 'red'}>
+              {pad(formatPrice(bid?.price ?? ask?.price ?? 0), PRICE_WIDTH, 'left')}
+            </Text>
+            <Text dimColor>{pad(ask ? ask.qty.toFixed(4) : '', QTY_WIDTH, 'left')}</Text>
+            <Text color="red">{BLOCK.repeat(askWidth).padEnd(BAR_WIDTH)}</Text>
+          </Box>
+        );
+      })}
+      <Box marginTop={1}>
+        <Text dimColor>Spread: </Text>
+        <Text color="yellow">
+          {asks.length > 0 && bids.length > 0
+            ? `${(asks[0].price - bids[0].price).toFixed(2)} (${((asks[0].price - bids[0].price) / bids[0].price * 100).toFixed(4)}%)`
+            : '—'}
+        </Text>
+      </Box>
+    </Box>
+  );
+}
+
+function pad(s: string, width: number, align: 'left' | 'right'): string {
+  return align === 'left' ? s.padStart(width) : s.padEnd(width);
+}
+
+function formatPrice(n: number): string {
+  if (n >= 1000) return n.toFixed(2);
+  if (n >= 1) return n.toFixed(4);
+  return n.toFixed(6);
+}