@loafmarkets/ui 0.1.2 → 0.1.3

package/dist/index.d.mts

@@ -280,7 +280,7 @@ declare const YourOrders: React.ForwardRefExoticComponent<React.HTMLAttributes<H
     renderOrderActions?: (order: YourOrder) => React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>>;
 
-type PriceChartRange = "1D" | "1W" | "1M" | "3M" | "1Y";
+type PriceChartRange = "15m" | "1h" | "4h" | "24h" | "1W" | "1M";
 type PriceChartCandle = {
     time: LightweightCharts.Time;
     open: number;

package/dist/index.d.ts

@@ -280,7 +280,7 @@ declare const YourOrders: React.ForwardRefExoticComponent<React.HTMLAttributes<H
     renderOrderActions?: (order: YourOrder) => React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>>;
 
-type PriceChartRange = "1D" | "1W" | "1M" | "3M" | "1Y";
+type PriceChartRange = "15m" | "1h" | "4h" | "24h" | "1W" | "1M";
 type PriceChartCandle = {
     time: LightweightCharts.Time;
     open: number;

package/dist/index.js

@@ -4567,7 +4567,97 @@ var YourOrders = o__namespace.forwardRef(
   }
 );
 YourOrders.displayName = "YourOrders";
-var defaultRanges = ["1D", "1W", "1M", "3M", "1Y"];
+var timeToDate = (time) => {
+  if (typeof time === "number") {
+    return new Date(time * 1e3);
+  }
+  if (typeof time === "object" && time !== null && "year" in time && "month" in time && "day" in time) {
+    const { year, month, day } = time;
+    return new Date(Date.UTC(year, month - 1, day));
+  }
+  return null;
+};
+var createTickFormatter = (formatOptions) => {
+  return (time, _tickMarkType, locale) => {
+    const date = timeToDate(time);
+    if (!date) return "";
+    return date.toLocaleString(locale || void 0, formatOptions);
+  };
+};
+var getTimeScaleOptions = (range) => {
+  switch (range) {
+    case "15m":
+      return {
+        timeVisible: true,
+        secondsVisible: false,
+        borderColor: "rgba(255,255,255,0.06)",
+        tickMarkFormatter: createTickFormatter({ hour: "2-digit", minute: "2-digit" })
+      };
+    case "1h":
+      return {
+        timeVisible: true,
+        secondsVisible: false,
+        borderColor: "rgba(255,255,255,0.06)",
+        tickMarkFormatter: createTickFormatter({ hour: "2-digit", minute: "2-digit" })
+      };
+    case "4h":
+      return {
+        timeVisible: true,
+        secondsVisible: false,
+        borderColor: "rgba(255,255,255,0.06)",
+        tickMarkFormatter: createTickFormatter({ weekday: "short", hour: "2-digit" })
+      };
+    case "24h":
+      return {
+        timeVisible: true,
+        secondsVisible: false,
+        borderColor: "rgba(255,255,255,0.06)",
+        tickMarkFormatter: createTickFormatter({ month: "short", day: "numeric" })
+      };
+    case "1W":
+      return {
+        timeVisible: true,
+        secondsVisible: false,
+        borderColor: "rgba(255,255,255,0.06)",
+        tickMarkFormatter: createTickFormatter({ month: "short", day: "numeric" })
+      };
+    case "1M":
+      return {
+        timeVisible: true,
+        secondsVisible: false,
+        borderColor: "rgba(255,255,255,0.06)",
+        tickMarkFormatter: createTickFormatter({ month: "short", year: "2-digit" })
+      };
+    default:
+      return {
+        timeVisible: true,
+        secondsVisible: false,
+        borderColor: "rgba(255,255,255,0.06)"
+      };
+  }
+};
+var getPriceScaleOptions = (data) => {
+  if (!data.length) return {
+    borderColor: "rgba(230, 200, 126, 0.25)",
+    textColor: "rgba(230, 200, 126, 0.7)"
+  };
+  const prices = data.flatMap((d2) => [d2.open, d2.high, d2.low, d2.close]);
+  const minPrice = Math.min(...prices);
+  const maxPrice = Math.max(...prices);
+  const priceRange = maxPrice - minPrice;
+  let scaleMargins = { top: 0.1, bottom: 0.1 };
+  if (priceRange < 1) {
+    scaleMargins = { top: 0.2, bottom: 0.2 };
+  } else if (priceRange > 1e3) {
+    scaleMargins = { top: 0.05, bottom: 0.05 };
+  }
+  return {
+    borderColor: "rgba(230, 200, 126, 0.25)",
+    textColor: "rgba(230, 200, 126, 0.7)",
+    scaleMargins
+  };
+};
+var defaultRanges = ["15m", "1h", "4h", "24h", "1W", "1M"];
 var formatPrice = (value, currencySymbol) => {
   return `${currencySymbol}${value.toLocaleString(void 0, {
     minimumFractionDigits: 2,
@@ -4636,15 +4726,8 @@ var PriceChart = o__namespace.forwardRef(
           vertLines: { color: "rgba(255,255,255,0.06)" },
           horzLines: { color: "rgba(255,255,255,0.06)" }
         },
-        rightPriceScale: {
-          borderColor: "rgba(230, 200, 126, 0.25)",
-          textColor: "rgba(230, 200, 126, 0.7)"
-        },
-        timeScale: {
-          borderColor: "rgba(255,255,255,0.06)",
-          timeVisible: true,
-          secondsVisible: false
-        },
+        rightPriceScale: getPriceScaleOptions(data),
+        timeScale: getTimeScaleOptions(selectedRange || defaultRanges[0]),
         crosshair: {
           vertLine: { color: "rgba(255,255,255,0.12)" },
           horzLine: { color: "rgba(255,255,255,0.12)" }
@@ -4665,11 +4748,22 @@ var PriceChart = o__namespace.forwardRef(
         chart.remove();
       };
     }, []);
+    o__namespace.useEffect(() => {
+      const chart = chartRef.current;
+      if (!chart) return;
+      const effectiveRange = selectedRange ?? ranges?.[0] ?? "1D";
+      chart.applyOptions({
+        timeScale: getTimeScaleOptions(effectiveRange)
+      });
+    }, [selectedRange, ranges]);
     o__namespace.useEffect(() => {
       const chart = chartRef.current;
       const series = seriesRef.current;
       if (!chart || !series) return;
       series.setData(data);
+      chart.applyOptions({
+        rightPriceScale: getPriceScaleOptions(data)
+      });
       if (priceLineRef.current) {
         series.removePriceLine(priceLineRef.current);
         priceLineRef.current = null;