@msqd/lydia 0.0.0-stage → 0.6.0

package/dist/Components/Buttons/ButtonGroup.js

@@ -0,0 +1,61 @@
+import { jsx as a } from "react/jsx-runtime";
+import { twMerge as m } from "tailwind-merge";
+import { Button as f } from "./Button.js";
+const g = ({
+  isCurrent: s,
+  isFirst: t,
+  isLast: i,
+  className: o,
+  ...r
+}) => {
+  const l = "relative inline-flex items-center focus:z-10 px-3 py-2";
+  let e = "rounded-none";
+  t || (e += " -ml-px"), t && (e += " rounded-l-sm"), i && (e += " rounded-r-sm");
+  const c = m(
+    l,
+    e,
+    s ? "text-white bg-blue-600 hover:bg-blue-600 focus-visible:outline-blue-500 ring-1 ring-inset ring-blue-700" : "",
+    o
+  );
+  return /* @__PURE__ */ a(
+    f,
+    {
+      variant: s ? "primary" : "secondary",
+      className: c,
+      ...r
+    }
+  );
+}, S = ({
+  buttonProps: s,
+  current: t,
+  setCurrent: i,
+  className: o,
+  ...r
+}) => /* @__PURE__ */ a(
+  "span",
+  {
+    role: "group",
+    className: m("isolate inline-flex rounded-md shadow-xs", o),
+    ...r,
+    children: s.map((l, e) => {
+      const { key: n, title: u } = l, c = n === t, p = e === 0, d = e === s.length - 1;
+      return /* @__PURE__ */ a(
+        g,
+        {
+          onClick: () => {
+            i(n);
+          },
+          type: "button",
+          isCurrent: c,
+          isFirst: p,
+          isLast: d,
+          children: u
+        },
+        n
+      );
+    })
+  }
+);
+export {
+  S as ButtonGroup
+};

package/dist/Components/Buttons/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Button.js";
+export * from "./ButtonGroup.js";

package/dist/Components/Buttons/index.js

@@ -0,0 +1,6 @@
+import { Button as r } from "./Button.js";
+import { ButtonGroup as u } from "./ButtonGroup.js";
+export {
+  r as Button,
+  u as ButtonGroup
+};

package/dist/Components/Cards/Card.d.ts

@@ -0,0 +1,38 @@
+import { type ComponentProps, type FunctionComponent, type ReactNode } from "react";
+export interface CardProps extends ComponentProps<"div"> {
+    /**
+     * Determines if the card has default padding for its content area.
+     */
+    hasDefaultPadding?: boolean;
+    /**
+     * Determines if the card has the default shadow and rounding styles.
+     */
+    hasDefaultShadowAndRounding?: boolean;
+    /**
+     * Optional custom CSS classes for the inner content `div`.
+     */
+    contentClassName?: string;
+    /**
+     * Optional header content for the card.
+     */
+    header?: ReactNode;
+    /**
+     * Optional custom CSS classes for the header `div`.
+     */
+    headerClassName?: string;
+    /**
+     * Optional footer content for the card.
+     */
+    footer?: ReactNode;
+    /**
+     * Optional custom CSS classes for the footer `div`.
+     */
+    footerClassName?: string;
+}
+/**
+ * Padding of a card's content area. Exported because panels that sit inside a card, or beside one,
+ * have to agree with it: three places hardcoded this same string, so a change to card padding would
+ * have moved one of them and left the others behind.
+ */
+export declare const contentPaddingClassName = "px-4 py-5 sm:p-6";
+export declare const Card: FunctionComponent<CardProps>;

package/dist/Components/Cards/Card.js

@@ -0,0 +1,31 @@
+import { jsxs as u, jsx as n } from "react/jsx-runtime";
+import "react";
+import { twMerge as s } from "tailwind-merge";
+const N = "overflow-hidden bg-white ring-1 ring-gray-200 ", x = " sm:rounded-sm ", h = "px-4 py-5 sm:px-6", y = "px-4 py-4 sm:px-6", D = "px-4 py-5 sm:p-6", f = "divide-y divide-gray-200", R = ({
+  children: i,
+  hasDefaultPadding: d = !0,
+  hasDefaultShadowAndRounding: o = !0,
+  className: r,
+  contentClassName: t,
+  header: e,
+  headerClassName: m,
+  footer: a,
+  footerClassName: c,
+  ...l
+}) => {
+  const p = s(
+    N,
+    o ? x : "",
+    e || a ? f : "",
+    r
+  ), v = s(d ? D : "", t), g = s(h, m), C = s(y, c);
+  return /* @__PURE__ */ u("div", { className: p, ...l, children: [
+    e && /* @__PURE__ */ n("div", { className: g, children: e }),
+    /* @__PURE__ */ n("div", { className: v, children: i }),
+    a && /* @__PURE__ */ n("div", { className: C, children: a })
+  ] });
+};
+export {
+  R as Card,
+  D as contentPaddingClassName
+};

package/dist/Components/Cards/StatCard.d.ts

@@ -0,0 +1,14 @@
+import { type ComponentProps, type ReactNode } from "react";
+export interface StatCardProps extends ComponentProps<"div"> {
+    title: string;
+    value: string | number;
+    unit?: string;
+    icon?: ReactNode;
+    trend?: {
+        value: number;
+        direction: "up" | "down" | "neutral";
+        label?: string;
+    };
+    className?: string;
+}
+export declare function StatCard({ title, value, unit, icon, trend, className, ...props }: StatCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Cards/StatCard.js

@@ -0,0 +1,27 @@
+import { jsxs as t, jsx as s } from "react/jsx-runtime";
+import "react";
+import { twMerge as o } from "tailwind-merge";
+function N({ title: c, value: m, unit: l, icon: a, trend: e, className: r, ...n }) {
+  const i = e ? e.direction === "up" ? "text-success-700" : e.direction === "down" ? "text-danger-700" : "text-gray-500" : "", d = e ? e.direction === "up" ? "↑" : e.direction === "down" ? "↓" : "→" : null;
+  return /* @__PURE__ */ t("div", { className: o("flex flex-col", r), ...n, children: [
+    /* @__PURE__ */ t("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ s("h3", { className: "text-sm font-medium text-gray-500", children: c }),
+      a && /* @__PURE__ */ s("div", { className: "text-gray-400", children: a })
+    ] }),
+    /* @__PURE__ */ t("div", { className: "mt-1 flex items-baseline", children: [
+      /* @__PURE__ */ s("div", { className: "text-2xl font-semibold text-gray-900", children: m }),
+      l && /* @__PURE__ */ s("div", { className: "ml-1 text-sm font-medium text-gray-500", children: l })
+    ] }),
+    e && /* @__PURE__ */ s("div", { className: "mt-2", children: /* @__PURE__ */ t("span", { className: `text-sm ${i} flex items-center`, children: [
+      /* @__PURE__ */ s("span", { className: "mr-1", children: d }),
+      /* @__PURE__ */ t("span", { className: `font-medium ${i}`, children: [
+        e.value,
+        "%"
+      ] }),
+      e.label && /* @__PURE__ */ s("span", { className: "ml-1 text-gray-500", children: e.label })
+    ] }) })
+  ] });
+}
+export {
+  N as StatCard
+};

package/dist/Components/Cards/index.d.ts

@@ -0,0 +1,2 @@
+export { Card, contentPaddingClassName, type CardProps } from "./Card.js";
+export { StatCard, type StatCardProps } from "./StatCard.js";

package/dist/Components/Cards/index.js

@@ -0,0 +1,7 @@
+import { Card as t, contentPaddingClassName as o } from "./Card.js";
+import { StatCard as e } from "./StatCard.js";
+export {
+  t as Card,
+  e as StatCard,
+  o as contentPaddingClassName
+};

package/dist/Components/Charts/Components/ThinBarChart.d.ts

@@ -0,0 +1,35 @@
+import type { OverviewTransaction } from "../../../Models/index.js";
+import type { BarConfiguration } from "../Utils/ChartBarCalculator.js";
+import { type ChartColors } from "../Utils/ChartColors.js";
+export interface ThinBarChartProps {
+    data: OverviewTransaction[];
+    barConfig: BarConfiguration;
+    /** Series colours. Omitted, they are read from the theme tokens when the series are built. */
+    colors?: ChartColors;
+}
+/**
+ * Creates series configuration for thin bar charts with stacked components
+ */
+export declare function createThinBarSeries({ data, barConfig, colors, }: ThinBarChartProps): ({
+    name: string;
+    data: number[];
+    type: string;
+    color: string | undefined;
+    barWidth: string;
+    barGap: string;
+    stack: string;
+    label: {
+        show: boolean;
+    };
+} | {
+    name: string;
+    data: number[];
+    type: string;
+    color: string | undefined;
+    barWidth: string;
+    stack: string;
+    label: {
+        show: boolean;
+    };
+    barGap?: undefined;
+})[];

package/dist/Components/Charts/Components/ThinBarChart.js

@@ -0,0 +1,41 @@
+import { chartColorTokens as o } from "../Utils/ChartColors.js";
+import { resolveThemeColors as s } from "../Utils/ThemeColor.js";
+function l({
+  data: e,
+  barConfig: r,
+  colors: t = s(o)
+}) {
+  return [
+    {
+      name: "errors",
+      data: e.map((a) => a.errors),
+      type: "bar",
+      color: t.errors,
+      barWidth: r.mainBarWidth,
+      barGap: r.barGap,
+      stack: "total",
+      label: { show: !1 }
+    },
+    {
+      name: "cached",
+      data: e.map((a) => a.cached),
+      type: "bar",
+      color: t.cached,
+      barWidth: r.mainBarWidth,
+      stack: "total",
+      label: { show: !1 }
+    },
+    {
+      name: "successful",
+      data: e.map((a) => Math.max(0, a.count - a.errors - a.cached)),
+      type: "bar",
+      color: t.transactions,
+      barWidth: r.mainBarWidth,
+      stack: "total",
+      label: { show: !1 }
+    }
+  ];
+}
+export {
+  l as createThinBarSeries
+};

package/dist/Components/Charts/Components/WideBarChart.d.ts

@@ -0,0 +1,48 @@
+import type { OverviewTransaction } from "../../../Models/index.js";
+import type { BarConfiguration } from "../Utils/ChartBarCalculator.js";
+import { type ChartColors } from "../Utils/ChartColors.js";
+export interface WideBarChartProps {
+    data: OverviewTransaction[];
+    barConfig: BarConfiguration;
+    labelOption?: {
+        show: boolean;
+        rotate: number;
+        formatter: string;
+        fontSize: number;
+        color?: string;
+        rich: Record<string, any>;
+    };
+    /** Series colours. Omitted, they are read from the theme tokens when the series are built. */
+    colors?: ChartColors;
+}
+/**
+ * Creates series configuration for wide bar charts with separate error/cached bars
+ */
+export declare function createWideBarSeries({ data, barConfig, labelOption, colors, }: WideBarChartProps): ({
+    name: string;
+    data: number[];
+    type: string;
+    color: string | undefined;
+    barWidth: string;
+    barGap: string;
+    label: {
+        show: boolean;
+        rotate: number;
+        formatter: string;
+        fontSize: number;
+        color?: string;
+        rich: Record<string, any>;
+    } | {
+        show: boolean;
+    };
+    stack?: undefined;
+} | {
+    name: string;
+    data: number[];
+    type: string;
+    barWidth: string;
+    barGap: string;
+    color: string | undefined;
+    stack: string;
+    label?: undefined;
+})[];

package/dist/Components/Charts/Components/WideBarChart.js

@@ -0,0 +1,50 @@
+import { chartColorTokens as d } from "../Utils/ChartColors.js";
+import { resolveThemeColors as c } from "../Utils/ThemeColor.js";
+function i({
+  data: e,
+  barConfig: r,
+  labelOption: s,
+  colors: t = c(d)
+}) {
+  return [
+    {
+      name: "transactions",
+      data: e.map((a) => a.count),
+      type: "bar",
+      color: t.transactions,
+      barWidth: r.mainBarWidth,
+      barGap: r.barGap,
+      label: r.showLabels && s ? s : { show: !1 }
+    },
+    {
+      name: "errors",
+      data: e.map((a) => a.errors),
+      type: "bar",
+      barWidth: r.detailBarWidth,
+      barGap: "0",
+      color: t.errors,
+      stack: "details"
+    },
+    {
+      name: "cached",
+      data: e.map((a) => a.cached),
+      type: "bar",
+      barWidth: r.detailBarWidth,
+      barGap: "0",
+      color: t.cached,
+      stack: "details"
+    },
+    {
+      name: "rest",
+      data: e.map((a) => Math.max(0, a.count - a.errors - a.cached)),
+      type: "bar",
+      barWidth: r.detailBarWidth,
+      barGap: "0",
+      color: t.rest,
+      stack: "details"
+    }
+  ];
+}
+export {
+  i as createWideBarSeries
+};

package/dist/Components/Charts/Components/index.d.ts

@@ -0,0 +1,2 @@
+export { createThinBarSeries, type ThinBarChartProps } from "./ThinBarChart.js";
+export { createWideBarSeries, type WideBarChartProps } from "./WideBarChart.js";

package/dist/Components/Charts/Components/index.js

@@ -0,0 +1,6 @@
+import { createThinBarSeries as a } from "./ThinBarChart.js";
+import { createWideBarSeries as o } from "./WideBarChart.js";
+export {
+  a as createThinBarSeries,
+  o as createWideBarSeries
+};

package/dist/Components/Charts/Hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useThemeColor, useThemeColors } from "./useThemeColors.js";
+export { useChartDimensions, type ChartDimensions, type UseChartDimensionsOptions } from "./useChartDimensions.js";

package/dist/Components/Charts/Hooks/index.js

@@ -0,0 +1,7 @@
+import { useThemeColor as r, useThemeColors as s } from "./useThemeColors.js";
+import { useChartDimensions as h } from "./useChartDimensions.js";
+export {
+  h as useChartDimensions,
+  r as useThemeColor,
+  s as useThemeColors
+};

package/dist/Components/Charts/Hooks/useChartDimensions.d.ts

@@ -0,0 +1,24 @@
+export interface ChartDimensions {
+    containerWidth: number;
+    containerHeight: number;
+    chartAreaWidth: number;
+    chartAreaHeight: number;
+}
+export interface UseChartDimensionsOptions {
+    defaultWidth?: number;
+    defaultHeight?: number;
+    padding?: {
+        left?: number;
+        right?: number;
+        top?: number;
+        bottom?: number;
+    };
+    debounceMs?: number;
+}
+/**
+ * Hook for tracking responsive chart dimensions with debounced resize handling
+ */
+export declare function useChartDimensions(options?: UseChartDimensionsOptions): {
+    containerRef: import("react").RefObject<HTMLDivElement | null>;
+    dimensions: ChartDimensions;
+};

package/dist/Components/Charts/Hooks/useChartDimensions.js

@@ -0,0 +1,42 @@
+import { useRef as b, useState as p, useEffect as v } from "react";
+function H(f = {}) {
+  const {
+    defaultWidth: i = 600,
+    defaultHeight: n = 300,
+    padding: e = { left: 40, right: 40, top: 20, bottom: 40 },
+    debounceMs: c = 100
+  } = f, t = b(null), [h, m] = p({
+    containerWidth: i,
+    containerHeight: n,
+    chartAreaWidth: i - (e.left || 0) - (e.right || 0),
+    chartAreaHeight: n - (e.top || 0) - (e.bottom || 0)
+  });
+  return v(() => {
+    const u = () => {
+      if (t.current) {
+        const { offsetWidth: l, offsetHeight: g } = t.current, a = l || i, d = g || n;
+        m({
+          containerWidth: a,
+          containerHeight: d,
+          chartAreaWidth: a - (e.left || 0) - (e.right || 0),
+          chartAreaHeight: d - (e.top || 0) - (e.bottom || 0)
+        });
+      }
+    };
+    let o;
+    const s = () => {
+      clearTimeout(o), o = setTimeout(u, c);
+    };
+    u();
+    let r = null;
+    return typeof ResizeObserver < "u" && t.current && (r = new ResizeObserver(s), r.observe(t.current)), window.addEventListener("resize", s), () => {
+      clearTimeout(o), r && r.disconnect(), window.removeEventListener("resize", s);
+    };
+  }, [i, n, e.left, e.right, e.top, e.bottom, c]), {
+    containerRef: t,
+    dimensions: h
+  };
+}
+export {
+  H as useChartDimensions
+};

package/dist/Components/Charts/Hooks/useThemeColors.d.ts

@@ -0,0 +1,10 @@
+import { type ThemeColors } from "../Utils/ThemeColor.js";
+/**
+ * Theme tokens resolved to colours ECharts accepts, re-resolved whenever the theme changes.
+ *
+ * Resolved during render rather than in an effect, so the first paint already carries the theme's colours.
+ * Pass a stable `tokens` object (a module constant): a new one each render resolves each render.
+ */
+export declare function useThemeColors<T extends Record<string, string>>(tokens: T): ThemeColors<T>;
+/** One colour: a theme token (`--color-danger-200`) is resolved like `useThemeColors`, any other value is kept. */
+export declare function useThemeColor(color: string | undefined): string | undefined;

package/dist/Components/Charts/Hooks/useThemeColors.js

@@ -0,0 +1,51 @@
+import { useMemo as h, useSyncExternalStore as d } from "react";
+import { resolveThemeColor as f, resolveThemeColors as b } from "../Utils/ThemeColor.js";
+const r = /* @__PURE__ */ new Set();
+let m = 0, c;
+const a = (e) => e instanceof HTMLStyleElement || e instanceof HTMLLinkElement && /\bstylesheet\b/i.test(e.rel);
+function v(e) {
+  return e.some(
+    ({ target: t, addedNodes: s, removedNodes: i }) => [t, ...s, ...i].some(
+      (n) => a(n) || n.nodeType === Node.TEXT_NODE && !!n.parentNode && a(n.parentNode)
+    )
+  );
+}
+function o() {
+  m += 1, r.forEach((e) => e());
+}
+function y() {
+  const e = new MutationObserver(o);
+  e.observe(document.documentElement, { attributes: !0, attributeFilter: ["class", "style", "data-theme"] });
+  const t = new MutationObserver((i) => {
+    v(i) && o();
+  });
+  t.observe(document.head, {
+    childList: !0,
+    subtree: !0,
+    characterData: !0,
+    attributes: !0,
+    attributeFilter: ["href", "media", "disabled", "rel"]
+  });
+  const s = typeof window.matchMedia == "function" ? window.matchMedia("(prefers-color-scheme: dark)") : null;
+  return s?.addEventListener("change", o), () => {
+    e.disconnect(), t.disconnect(), s?.removeEventListener("change", o);
+  };
+}
+function T(e) {
+  return r.size === 0 && (c = y()), r.add(e), () => {
+    r.delete(e), r.size === 0 && c?.();
+  };
+}
+const u = () => m, l = () => d(T, u, u);
+function w(e) {
+  const t = l();
+  return h(() => b(e), [e, t]);
+}
+function M(e) {
+  const t = l();
+  return h(() => e?.startsWith("--") ? f(e) : e, [e, t]);
+}
+export {
+  M as useThemeColor,
+  w as useThemeColors
+};

package/dist/Components/Charts/SummaryPerformancesChart.d.ts

@@ -0,0 +1,7 @@
+export interface SummaryPerformancesChartProps {
+    data: {
+        value: number;
+        datetime: string;
+    }[];
+}
+export declare const SummaryPerformancesChart: ({ data }: SummaryPerformancesChartProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Components/Charts/SummaryPerformancesChart.js

@@ -0,0 +1,93 @@
+import { jsx as s } from "react/jsx-runtime";
+import { LineChart as h } from "echarts/charts";
+import { GridComponent as f, TooltipComponent as u, VisualMapComponent as g } from "echarts/components";
+import * as p from "echarts/core";
+import { CanvasRenderer as c } from "echarts/renderers";
+import { useMemo as d } from "react";
+import { ReactEChartsCore as b } from "./Utils/ReactEChartsCore.js";
+import { TimeFormatter as C } from "./Utils/TimeFormatter.js";
+import { escapeTooltipHtml as n } from "./Utils/escapeTooltipHtml.js";
+import { tpdexScale as l, getTpdexRating as x } from "../../Models/Tpdex.js";
+import { defaultEchartOptions as i } from "../../Settings.js";
+import { useThemeColors as y, useThemeColor as T } from "./Hooks/useThemeColors.js";
+p.use([h, c, f, u, g]);
+const v = Object.fromEntries(l.map(({ label: e, token: o }) => [e, o])), O = (e) => {
+  const o = e[0];
+  let r = `<strong>${n(o.name)}</strong><br/>`;
+  const a = x(o.value);
+  return r += `<small>Average TPDEX: ${n(o.value)} (${a.label})</small>`, r;
+}, P = ({ data: e }) => {
+  const o = y(v), r = T("--color-chart-out-of-range"), a = d(
+    () => ({
+      ...i,
+      grid: {
+        ...i.grid,
+        left: 8,
+        right: 64,
+        top: 64,
+        bottom: 24
+      },
+      xAxis: {
+        type: "category",
+        data: e.map((t) => C.formatTick(t.datetime, "24h"))
+      },
+      yAxis: {
+        type: "value",
+        min: 0,
+        max: 100,
+        axisLabel: { show: !1 }
+      },
+      tooltip: {
+        ...i.tooltip,
+        formatter: O
+      },
+      series: [
+        {
+          data: e.map((t) => t.value),
+          type: "line",
+          smooth: !0,
+          symbol: "none",
+          lineStyle: {
+            width: 4
+          }
+        }
+      ],
+      visualMap: {
+        bottom: 4,
+        right: 4,
+        pieces: l.map((t, m) => m === 0 ? {
+          label: t.label,
+          gte: t.threshold,
+          color: o[t.label]
+        } : m === l.length - 1 ? {
+          label: t.label,
+          lt: l[m - 1].threshold,
+          gte: 0,
+          color: o[t.label]
+        } : {
+          label: t.label,
+          lt: l[m - 1].threshold,
+          gte: t.threshold,
+          color: o[t.label]
+        }),
+        outOfRange: {
+          color: r
+        }
+      }
+    }),
+    [e, o, r]
+  );
+  return /* @__PURE__ */ s(
+    b,
+    {
+      echarts: p,
+      option: a,
+      notMerge: !0,
+      lazyUpdate: !0,
+      opts: { height: 240, width: "auto" }
+    }
+  );
+};
+export {
+  P as SummaryPerformancesChart
+};

package/dist/Components/Charts/SummaryRateChart.d.ts

@@ -0,0 +1,9 @@
+export interface SummaryRateChartProps {
+    data: {
+        value: number;
+        datetime: string;
+    }[];
+    /** A CSS colour, or a theme token such as `--color-danger-200`, which follows theme changes. */
+    color?: string;
+}
+export declare const SummaryRateChart: ({ data, color }: SummaryRateChartProps) => import("react/jsx-runtime").JSX.Element;