@agg-market/ui 0.0.1

package/dist/chart.js

@@ -0,0 +1,418 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/primitives/chart/index.tsx
+var chart_exports = {};
+__export(chart_exports, {
+  LineChart: () => LineChart
+});
+module.exports = __toCommonJS(chart_exports);
+var import_dayjs = __toESM(require("dayjs"));
+var import_hooks2 = require("@agg-market/hooks");
+var import_react2 = require("react");
+var import_liveline = require("liveline");
+
+// src/primitives/switch-button/index.tsx
+var import_react = require("react");
+var import_hooks = require("@agg-market/hooks");
+
+// src/shared/utils.ts
+var cn = (...values) => values.filter(Boolean).join(" ");
+var getMotionClassName = (enabled, ...values) => {
+  if (!enabled)
+    return void 0;
+  return cn(...values);
+};
+
+// src/primitives/switch-button/index.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var resolveActiveIndex = (options, value) => {
+  const activeIndex = options.findIndex((option) => option.value === value);
+  if (activeIndex >= 0)
+    return activeIndex;
+  return 0;
+};
+var resolveNextEnabledIndex = (options, currentIndex, direction) => {
+  if (options.length <= 1)
+    return currentIndex;
+  const step = direction === "next" ? 1 : -1;
+  for (let offset = 1; offset <= options.length; offset += 1) {
+    const candidateIndex = (currentIndex + step * offset + options.length) % options.length;
+    const candidate = options[candidateIndex];
+    if (candidate && !candidate.disabled) {
+      return candidateIndex;
+    }
+  }
+  return currentIndex;
+};
+var SwitchButton = ({
+  options,
+  value,
+  onValueChange,
+  ariaLabel,
+  className
+}) => {
+  const { enableAnimations } = (0, import_hooks.useSdkUiConfig)();
+  const activeIndex = (0, import_react.useMemo)(() => {
+    return resolveActiveIndex(options, value);
+  }, [options, value]);
+  const [isAnimating, setIsAnimating] = (0, import_react.useState)(false);
+  const [lastAnimatedIndex, setLastAnimatedIndex] = (0, import_react.useState)(activeIndex);
+  (0, import_react.useEffect)(() => {
+    if (lastAnimatedIndex === activeIndex) {
+      return;
+    }
+    setLastAnimatedIndex(activeIndex);
+    if (!enableAnimations) {
+      setIsAnimating(false);
+      return;
+    }
+    setIsAnimating(true);
+    const timeoutId = window.setTimeout(() => {
+      setIsAnimating(false);
+    }, 350);
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [activeIndex, enableAnimations, lastAnimatedIndex]);
+  if (options.length === 0) {
+    return null;
+  }
+  const handleKeyDown = (event, optionIndex) => {
+    if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") {
+      return;
+    }
+    event.preventDefault();
+    const nextOptionIndex = resolveNextEnabledIndex(
+      options,
+      optionIndex,
+      event.key === "ArrowRight" ? "next" : "previous"
+    );
+    const nextOption = options[nextOptionIndex];
+    if (!nextOption || nextOption.disabled) {
+      return;
+    }
+    onValueChange(nextOption.value);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: cn(
+        "inline-flex min-w-0 rounded-agg-full bg-agg-secondary-hover font-agg-sans",
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          className: "relative grid min-w-0 flex-1 items-center",
+          style: {
+            gridTemplateColumns: `repeat(${options.length}, minmax(0, 1fr))`
+          },
+          role: "tablist",
+          "aria-label": ariaLabel,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "span",
+              {
+                className: cn(
+                  "pointer-events-none absolute inset-y-0 left-0 rounded-agg-full border-2 border-agg-primary bg-agg-secondary",
+                  getMotionClassName(
+                    enableAnimations,
+                    "transition-transform duration-[450ms] ease-[cubic-bezier(0.77,0,0.175,1)]"
+                  )
+                ),
+                style: {
+                  width: `${100 / options.length}%`,
+                  transform: `translateX(${activeIndex * 100}%) scaleX(${isAnimating ? 1.08 : 1})`
+                },
+                "aria-hidden": "true"
+              }
+            ),
+            options.map((option, optionIndex) => {
+              var _a;
+              const isActive = optionIndex === activeIndex;
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "button",
+                {
+                  type: "button",
+                  role: "tab",
+                  "aria-selected": isActive,
+                  "aria-label": (_a = option.ariaLabel) != null ? _a : void 0,
+                  tabIndex: isActive ? 0 : -1,
+                  disabled: option.disabled,
+                  className: cn(
+                    "relative z-10 min-w-0 rounded-agg-full px-5 py-1.5 font-agg-sans text-agg-base leading-agg-6 text-agg-foreground",
+                    getMotionClassName(enableAnimations, "transition-colors duration-300"),
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-2 focus-visible:ring-offset-agg-secondary-hover",
+                    "disabled:cursor-not-allowed disabled:text-agg-muted-foreground",
+                    isActive ? "font-agg-bold" : "font-agg-normal"
+                  ),
+                  onClick: () => {
+                    if (option.disabled || isActive) {
+                      return;
+                    }
+                    onValueChange(option.value);
+                  },
+                  onKeyDown: (event) => {
+                    handleKeyDown(event, optionIndex);
+                  },
+                  children: option.label
+                },
+                option.value
+              );
+            })
+          ]
+        }
+      )
+    }
+  );
+};
+SwitchButton.displayName = "SwitchButton";
+
+// src/primitives/chart/index.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var normalizeSeries = (series) => {
+  return series.map((seriesItem) => {
+    const pointsByTime = /* @__PURE__ */ new Map();
+    seriesItem.points.forEach((point) => {
+      if (!Number.isFinite(point.time) || !Number.isFinite(point.value)) {
+        return;
+      }
+      pointsByTime.set(Math.floor(point.time), point.value);
+    });
+    const sortedPoints = [...pointsByTime.entries()].sort((left, right) => left[0] - right[0]).map(([time, value]) => ({
+      time,
+      value
+    }));
+    return __spreadProps(__spreadValues({}, seriesItem), {
+      points: sortedPoints
+    });
+  }).filter((seriesItem) => seriesItem.points.length > 0);
+};
+var defaultValueFormatter = (value) => {
+  return `${Math.round(value)}%`;
+};
+var defaultTimeFormatter = (timestamp) => {
+  return import_dayjs.default.unix(timestamp).format("MMM D");
+};
+var toLivelinePoints = (points) => {
+  return points.map((point) => ({
+    time: point.time,
+    value: point.value
+  }));
+};
+var resolveWindowSeconds = (normalizedSeries) => {
+  const timestamps = normalizedSeries.flatMap(
+    (seriesItem) => seriesItem.points.map((point) => point.time)
+  );
+  if (timestamps.length <= 1)
+    return 30;
+  const minTimestamp = Math.min(...timestamps);
+  const maxTimestamp = Math.max(...timestamps);
+  const span = maxTimestamp - minTimestamp;
+  if (!Number.isFinite(span) || span <= 0)
+    return 30;
+  return Math.max(1, Math.floor(span));
+};
+var resolveLatestValue = (points) => {
+  const latestPoint = points[points.length - 1];
+  if (!latestPoint)
+    return 0;
+  return latestPoint.value;
+};
+var resolveActiveSeriesId = (series, activeSeriesId) => {
+  var _a, _b;
+  if (activeSeriesId) {
+    const matchingSeries = series.find((seriesItem) => seriesItem.id === activeSeriesId);
+    if (matchingSeries) {
+      return matchingSeries.id;
+    }
+  }
+  return (_b = (_a = series[0]) == null ? void 0 : _a.id) != null ? _b : "";
+};
+var formatDefaultSeriesLabel = (seriesItem) => {
+  return seriesItem.id.charAt(0).toUpperCase() + seriesItem.id.slice(1);
+};
+var renderDefaultSeriesControls = ({
+  series,
+  activeSeriesId,
+  handleSeriesChange,
+  defaultSeriesSwitchClassName,
+  seriesSwitchAriaLabel,
+  formatSeriesOptionAriaLabel
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    SwitchButton,
+    {
+      ariaLabel: seriesSwitchAriaLabel,
+      className: defaultSeriesSwitchClassName,
+      options: series.map((seriesItem) => ({
+        value: seriesItem.id,
+        label: formatDefaultSeriesLabel(seriesItem),
+        ariaLabel: formatSeriesOptionAriaLabel(formatDefaultSeriesLabel(seriesItem))
+      })),
+      value: activeSeriesId,
+      onValueChange: handleSeriesChange
+    }
+  );
+};
+var resolveSelectedSeries = (series, activeSeriesId) => {
+  const availableSeriesIds = new Set(series.map((seriesItem) => seriesItem.id));
+  if (!availableSeriesIds.has(activeSeriesId)) {
+    return series[0];
+  }
+  return series.find((seriesItem) => seriesItem.id === activeSeriesId);
+};
+var LineChart = ({
+  series,
+  height = 280,
+  width,
+  classNames,
+  isLoading = false,
+  showSeriesControls = true,
+  renderSeriesControls
+}) => {
+  var _a, _b;
+  const labels = (0, import_hooks2.useLabels)();
+  const { theme } = (0, import_hooks2.useSdkUiConfig)();
+  const normalizedSeries = (0, import_react2.useMemo)(() => {
+    return normalizeSeries(series);
+  }, [series]);
+  const [activeSeriesId, setActiveSeriesId] = (0, import_react2.useState)(
+    () => resolveActiveSeriesId(normalizedSeries, null)
+  );
+  (0, import_react2.useEffect)(() => {
+    setActiveSeriesId(
+      (currentActiveSeriesId) => resolveActiveSeriesId(normalizedSeries, currentActiveSeriesId)
+    );
+  }, [normalizedSeries]);
+  const livelineTheme = theme;
+  const handleSeriesChange = (seriesId) => {
+    setActiveSeriesId(seriesId);
+  };
+  const primarySeries = (0, import_react2.useMemo)(() => {
+    return resolveSelectedSeries(normalizedSeries, activeSeriesId);
+  }, [activeSeriesId, normalizedSeries]);
+  const primaryData = (0, import_react2.useMemo)(() => {
+    if (!primarySeries) {
+      return [];
+    }
+    return toLivelinePoints(primarySeries.points);
+  }, [primarySeries]);
+  const primaryValue = (0, import_react2.useMemo)(() => {
+    if (!primarySeries) {
+      return 0;
+    }
+    return resolveLatestValue(primarySeries.points);
+  }, [primarySeries]);
+  const livelineSeries = (0, import_react2.useMemo)(() => {
+    return normalizedSeries.map((seriesItem) => ({
+      id: seriesItem.id,
+      color: seriesItem.color,
+      data: toLivelinePoints(seriesItem.points),
+      value: resolveLatestValue(seriesItem.points)
+    }));
+  }, [normalizedSeries]);
+  const windowSeconds = (0, import_react2.useMemo)(() => {
+    return resolveWindowSeconds(normalizedSeries);
+  }, [normalizedSeries]);
+  const seriesControls = showSeriesControls && normalizedSeries.length > 0 ? (_a = renderSeriesControls == null ? void 0 : renderSeriesControls({
+    series: normalizedSeries,
+    activeSeriesId,
+    handleSeriesChange
+  })) != null ? _a : normalizedSeries.length > 1 ? renderDefaultSeriesControls({
+    series: normalizedSeries,
+    activeSeriesId,
+    handleSeriesChange,
+    defaultSeriesSwitchClassName: classNames == null ? void 0 : classNames.defaultSeriesSwitch,
+    seriesSwitchAriaLabel: labels.common.lineChartSeriesSwitchAria,
+    formatSeriesOptionAriaLabel: labels.common.lineChartSeriesOptionAria
+  }) : null : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: cn("w-full", classNames == null ? void 0 : classNames.root), style: { width }, children: [
+    !isLoading && seriesControls ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("mb-3", classNames == null ? void 0 : classNames.controls), children: seriesControls }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        className: cn(
+          "overflow-hidden [&>div:not(.agg-livechart):first-of-type]:hidden!",
+          classNames == null ? void 0 : classNames.chartViewport
+        ),
+        style: { height },
+        role: "img",
+        "aria-label": labels.common.lineChartAria,
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_liveline.Liveline,
+          {
+            className: cn("h-full w-full agg-livechart", classNames == null ? void 0 : classNames.liveline),
+            data: primaryData,
+            value: primaryValue,
+            series: livelineSeries,
+            color: (_b = primarySeries == null ? void 0 : primarySeries.color) != null ? _b : "var(--agg-color-primary)",
+            theme: livelineTheme,
+            grid: true,
+            momentum: false,
+            pulse: false,
+            window: windowSeconds,
+            formatValue: defaultValueFormatter,
+            formatTime: defaultTimeFormatter,
+            padding: {
+              top: 12,
+              right: 80,
+              bottom: 28,
+              left: 12
+            },
+            loading: isLoading
+          }
+        )
+      }
+    )
+  ] });
+};
+LineChart.displayName = "LineChart";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LineChart
+});

package/dist/chart.mjs

@@ -0,0 +1,8 @@
+import {
+  LineChart
+} from "./chunk-FACIYUNK.mjs";
+import "./chunk-TTOR7JCT.mjs";
+import "./chunk-GC3QIIH7.mjs";
+export {
+  LineChart
+};