@loafmarkets/ui 0.1.368 → 0.1.369
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +18 -1
- package/dist/index.d.ts +18 -1
- package/dist/index.js +134 -0
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +134 -2
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -1237,4 +1237,21 @@ interface ContactPopupProps {
|
|
|
1237
1237
|
}
|
|
1238
1238
|
declare const ContactPopup: ({ onClose }: ContactPopupProps) => react_jsx_runtime.JSX.Element;
|
|
1239
1239
|
|
|
1240
|
-
|
|
1240
|
+
interface SparklineChartProps {
|
|
1241
|
+
data: number[];
|
|
1242
|
+
width: number;
|
|
1243
|
+
height: number;
|
|
1244
|
+
positive: boolean;
|
|
1245
|
+
}
|
|
1246
|
+
/**
|
|
1247
|
+
* Downsamples candles to at most `maxPoints` close prices for a sparkline,
|
|
1248
|
+
* always keeping the final close so the line ends on the latest price.
|
|
1249
|
+
* Reads `close` (the canonical Candle field per @loafmarkets/shared-types);
|
|
1250
|
+
* typed structurally so any `{ close }`-shaped candle works.
|
|
1251
|
+
*/
|
|
1252
|
+
declare function extractSparkline(candles: ReadonlyArray<{
|
|
1253
|
+
close: number;
|
|
1254
|
+
}>, maxPoints?: number): number[];
|
|
1255
|
+
declare const SparklineChart: React__default.NamedExoticComponent<SparklineChartProps>;
|
|
1256
|
+
|
|
1257
|
+
export { type ActivityTabId, AssetSelectorBar, type AssetSelectorBarProps, type AssetSelectorMetric, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, ContactPopup, type ContactPopupProps, type FinancialItem, type FundWalletParams, type FundWalletResult, Header, type HeaderPortfolioData, type HeaderProps, type HousePositionOrderbook, type HousePositionPendingOrder, HousePositionSlider, HousePositionSliderMobile, type HousePositionSliderMobileOrderPayload, type HousePositionSliderMobileOrderbook, type HousePositionSliderMobileProps, type HousePositionSliderOrderPayload, type HousePositionSliderProps, type InspectionSlot, LoafLiquidityBadge, LoafLiquidityLogo, type LoafLiquidityLogoProps, LoginPopup, type LoginPopupProps, MobileTradeNav, type MobileTradeNavItem, type MobileTradeNavProps, type OfferStatus, OfferingProgressCard, type OfferingProgressCardProps, Orderbook, type OrderbookLevel, type OrderbookProps, type OrderbookSide, type OrderbookTrade, type OverviewImage, type OverviewResponse, OwnerBooking, type OwnerBookingProps, PaymentPopup, type PaymentPopupProps, PortfolioActivityPanel, type PortfolioActivityPanelProps, type PortfolioPosition, PortfolioSummary, type PortfolioSummaryProps, PriceChart, type PriceChartCandle, type PriceChartProps, type PriceChartRange, type PropertyAddressOption, PropertyBuy, PropertyCompareBar, type PropertyCompareBarProps, PropertyDocuments, type PropertyGalleryHotspot, type PropertyGalleryImage, PropertyHeroHeader, type PropertyHeroHeaderProps, PropertyHistory, type PropertyInfoItem, PropertyInspectionTimes, PropertyMediaRow, type PropertyMediaRowProps, type PropertyNewsItem, type PropertyNewsType, PropertyNewsUpdates, type PropertyNewsUpdatesProps, type PropertyOffer, PropertyOffers, type PropertyOffersProps, PropertyOverview, type PropertyOverviewProps, PropertyPhotoGallery, type PropertyPriceSummary, PropertySubheader, type PropertySubheaderAction, type PropertySubheaderProps, type PropertySubheaderTab, PropertyTour, type PropertyTourProps, PropertyValuation, type PropertyValuationProps, type PropertyValueSummary, type PurchaseFeedItem, type SelectorItem, SiteFooter, Skeleton, type SkeletonProps, SlideDigit, SparklineChart, type SparklineChartProps, type ToastData, ToastProvider, type ToastVariant, TradeConfirmationModal, type TradeConfirmationModalDetails, type TradeConfirmationModalProps, TradingSlider, type TradingSliderProps, type YourOrder, type YourOrderSide, YourOrders, type YourOrdersProps, badgeVariants, buttonVariants, extractSparkline, hasPendingActivity, useAdaptivePolling, useToast };
|
package/dist/index.d.ts
CHANGED
|
@@ -1237,4 +1237,21 @@ interface ContactPopupProps {
|
|
|
1237
1237
|
}
|
|
1238
1238
|
declare const ContactPopup: ({ onClose }: ContactPopupProps) => react_jsx_runtime.JSX.Element;
|
|
1239
1239
|
|
|
1240
|
-
|
|
1240
|
+
interface SparklineChartProps {
|
|
1241
|
+
data: number[];
|
|
1242
|
+
width: number;
|
|
1243
|
+
height: number;
|
|
1244
|
+
positive: boolean;
|
|
1245
|
+
}
|
|
1246
|
+
/**
|
|
1247
|
+
* Downsamples candles to at most `maxPoints` close prices for a sparkline,
|
|
1248
|
+
* always keeping the final close so the line ends on the latest price.
|
|
1249
|
+
* Reads `close` (the canonical Candle field per @loafmarkets/shared-types);
|
|
1250
|
+
* typed structurally so any `{ close }`-shaped candle works.
|
|
1251
|
+
*/
|
|
1252
|
+
declare function extractSparkline(candles: ReadonlyArray<{
|
|
1253
|
+
close: number;
|
|
1254
|
+
}>, maxPoints?: number): number[];
|
|
1255
|
+
declare const SparklineChart: React__default.NamedExoticComponent<SparklineChartProps>;
|
|
1256
|
+
|
|
1257
|
+
export { type ActivityTabId, AssetSelectorBar, type AssetSelectorBarProps, type AssetSelectorMetric, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, ContactPopup, type ContactPopupProps, type FinancialItem, type FundWalletParams, type FundWalletResult, Header, type HeaderPortfolioData, type HeaderProps, type HousePositionOrderbook, type HousePositionPendingOrder, HousePositionSlider, HousePositionSliderMobile, type HousePositionSliderMobileOrderPayload, type HousePositionSliderMobileOrderbook, type HousePositionSliderMobileProps, type HousePositionSliderOrderPayload, type HousePositionSliderProps, type InspectionSlot, LoafLiquidityBadge, LoafLiquidityLogo, type LoafLiquidityLogoProps, LoginPopup, type LoginPopupProps, MobileTradeNav, type MobileTradeNavItem, type MobileTradeNavProps, type OfferStatus, OfferingProgressCard, type OfferingProgressCardProps, Orderbook, type OrderbookLevel, type OrderbookProps, type OrderbookSide, type OrderbookTrade, type OverviewImage, type OverviewResponse, OwnerBooking, type OwnerBookingProps, PaymentPopup, type PaymentPopupProps, PortfolioActivityPanel, type PortfolioActivityPanelProps, type PortfolioPosition, PortfolioSummary, type PortfolioSummaryProps, PriceChart, type PriceChartCandle, type PriceChartProps, type PriceChartRange, type PropertyAddressOption, PropertyBuy, PropertyCompareBar, type PropertyCompareBarProps, PropertyDocuments, type PropertyGalleryHotspot, type PropertyGalleryImage, PropertyHeroHeader, type PropertyHeroHeaderProps, PropertyHistory, type PropertyInfoItem, PropertyInspectionTimes, PropertyMediaRow, type PropertyMediaRowProps, type PropertyNewsItem, type PropertyNewsType, PropertyNewsUpdates, type PropertyNewsUpdatesProps, type PropertyOffer, PropertyOffers, type PropertyOffersProps, PropertyOverview, type PropertyOverviewProps, PropertyPhotoGallery, type PropertyPriceSummary, PropertySubheader, type PropertySubheaderAction, type PropertySubheaderProps, type PropertySubheaderTab, PropertyTour, type PropertyTourProps, PropertyValuation, type PropertyValuationProps, type PropertyValueSummary, type PurchaseFeedItem, type SelectorItem, SiteFooter, Skeleton, type SkeletonProps, SlideDigit, SparklineChart, type SparklineChartProps, type ToastData, ToastProvider, type ToastVariant, TradeConfirmationModal, type TradeConfirmationModalDetails, type TradeConfirmationModalProps, TradingSlider, type TradingSliderProps, type YourOrder, type YourOrderSide, YourOrders, type YourOrdersProps, badgeVariants, buttonVariants, extractSparkline, hasPendingActivity, useAdaptivePolling, useToast };
|
package/dist/index.js
CHANGED
|
@@ -18600,6 +18600,138 @@ var SiteFooter = () => {
|
|
|
18600
18600
|
showContactPopup && /* @__PURE__ */ jsxRuntime.jsx(ContactPopup, { onClose: () => setShowContactPopup(false) })
|
|
18601
18601
|
] });
|
|
18602
18602
|
};
|
|
18603
|
+
var PAD_Y = 2;
|
|
18604
|
+
function lerp(a, b, t) {
|
|
18605
|
+
return a + (b - a) * t;
|
|
18606
|
+
}
|
|
18607
|
+
function extractSparkline(candles, maxPoints = 20) {
|
|
18608
|
+
if (!candles.length) return [];
|
|
18609
|
+
const step = Math.max(1, Math.floor(candles.length / maxPoints));
|
|
18610
|
+
const points = [];
|
|
18611
|
+
for (let i = 0; i < candles.length; i += step) {
|
|
18612
|
+
points.push(candles[i].close);
|
|
18613
|
+
}
|
|
18614
|
+
if (points.length > 0) {
|
|
18615
|
+
const last = candles[candles.length - 1].close;
|
|
18616
|
+
if (points[points.length - 1] !== last) {
|
|
18617
|
+
points.push(last);
|
|
18618
|
+
}
|
|
18619
|
+
}
|
|
18620
|
+
return points;
|
|
18621
|
+
}
|
|
18622
|
+
var SparklineChart = React5__namespace.default.memo(function SparklineChart2({ data, width, height, positive }) {
|
|
18623
|
+
const [hoverX, setHoverX] = React5.useState(null);
|
|
18624
|
+
const svgRef = React5.useRef(null);
|
|
18625
|
+
const { linePath, fillPath, points } = React5.useMemo(() => {
|
|
18626
|
+
const mn = Math.min(...data);
|
|
18627
|
+
const mx = Math.max(...data);
|
|
18628
|
+
const range = mx - mn || 1;
|
|
18629
|
+
const stepX = width / (data.length - 1);
|
|
18630
|
+
const pts = data.map((v, i) => ({
|
|
18631
|
+
x: i * stepX,
|
|
18632
|
+
y: height - (v - mn) / range * (height - PAD_Y * 2) - PAD_Y
|
|
18633
|
+
}));
|
|
18634
|
+
const line = pts.map((p, i) => `${i === 0 ? "M" : "L"}${p.x},${p.y}`).join(" ");
|
|
18635
|
+
const fill = `${line} L${width},${height} L0,${height} Z`;
|
|
18636
|
+
return { linePath: line, fillPath: fill, points: pts };
|
|
18637
|
+
}, [data, width, height]);
|
|
18638
|
+
const interpolated = React5.useMemo(() => {
|
|
18639
|
+
if (hoverX == null || points.length < 2) return null;
|
|
18640
|
+
const stepX = width / (data.length - 1);
|
|
18641
|
+
const rawIdx = hoverX / stepX;
|
|
18642
|
+
const i0 = Math.floor(rawIdx);
|
|
18643
|
+
const i1 = Math.min(i0 + 1, data.length - 1);
|
|
18644
|
+
const t = rawIdx - i0;
|
|
18645
|
+
return {
|
|
18646
|
+
x: hoverX,
|
|
18647
|
+
y: lerp(points[i0].y, points[i1].y, t),
|
|
18648
|
+
price: lerp(data[i0], data[i1], t)
|
|
18649
|
+
};
|
|
18650
|
+
}, [hoverX, points, data, width]);
|
|
18651
|
+
const handleMouseMove = React5.useCallback((e) => {
|
|
18652
|
+
const svg = svgRef.current;
|
|
18653
|
+
if (!svg) return;
|
|
18654
|
+
const rect = svg.getBoundingClientRect();
|
|
18655
|
+
const x = Math.max(0, Math.min(width, e.clientX - rect.left));
|
|
18656
|
+
setHoverX(x);
|
|
18657
|
+
}, [width]);
|
|
18658
|
+
const handleMouseLeave = React5.useCallback(() => setHoverX(null), []);
|
|
18659
|
+
if (data.length < 2) return null;
|
|
18660
|
+
const color = positive ? "#00C076" : "#FF5757";
|
|
18661
|
+
const gradId = `spark-grad-${positive ? "up" : "dn"}`;
|
|
18662
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
18663
|
+
"svg",
|
|
18664
|
+
{
|
|
18665
|
+
ref: svgRef,
|
|
18666
|
+
width,
|
|
18667
|
+
height,
|
|
18668
|
+
style: { display: "block", overflow: "visible", cursor: hoverX != null ? "crosshair" : "default" },
|
|
18669
|
+
onMouseMove: handleMouseMove,
|
|
18670
|
+
onMouseLeave: handleMouseLeave,
|
|
18671
|
+
children: [
|
|
18672
|
+
/* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: gradId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
|
|
18673
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.15 }),
|
|
18674
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })
|
|
18675
|
+
] }) }),
|
|
18676
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: fillPath, fill: `url(#${gradId})` }),
|
|
18677
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: linePath, fill: "none", stroke: color, strokeWidth: 1.5, strokeLinejoin: "round", strokeLinecap: "round" }),
|
|
18678
|
+
interpolated && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
18679
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
18680
|
+
"line",
|
|
18681
|
+
{
|
|
18682
|
+
x1: interpolated.x,
|
|
18683
|
+
y1: 0,
|
|
18684
|
+
x2: interpolated.x,
|
|
18685
|
+
y2: height,
|
|
18686
|
+
stroke: "rgba(255,255,255,0.2)",
|
|
18687
|
+
strokeWidth: 1,
|
|
18688
|
+
strokeDasharray: "2,2"
|
|
18689
|
+
}
|
|
18690
|
+
),
|
|
18691
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: interpolated.x, cy: interpolated.y, r: 3, fill: color, stroke: "#0A0A0C", strokeWidth: 1.5 }),
|
|
18692
|
+
(() => {
|
|
18693
|
+
const above = interpolated.y > 24;
|
|
18694
|
+
const tooltipY = above ? interpolated.y - 26 : interpolated.y + 8;
|
|
18695
|
+
const tooltipX = Math.min(Math.max(interpolated.x - 28, 0), width - 56);
|
|
18696
|
+
const textX = tooltipX + 28;
|
|
18697
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
|
|
18698
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
18699
|
+
"rect",
|
|
18700
|
+
{
|
|
18701
|
+
x: tooltipX,
|
|
18702
|
+
y: tooltipY,
|
|
18703
|
+
width: 56,
|
|
18704
|
+
height: 16,
|
|
18705
|
+
rx: 3,
|
|
18706
|
+
fill: "rgba(0,0,0,0.75)",
|
|
18707
|
+
stroke: "rgba(255,255,255,0.1)",
|
|
18708
|
+
strokeWidth: 0.5
|
|
18709
|
+
}
|
|
18710
|
+
),
|
|
18711
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
18712
|
+
"text",
|
|
18713
|
+
{
|
|
18714
|
+
x: textX,
|
|
18715
|
+
y: tooltipY + 11.5,
|
|
18716
|
+
textAnchor: "middle",
|
|
18717
|
+
fill: "#fff",
|
|
18718
|
+
fontSize: 9,
|
|
18719
|
+
fontWeight: 600,
|
|
18720
|
+
fontFamily: "inherit",
|
|
18721
|
+
style: { fontVariantNumeric: "tabular-nums" },
|
|
18722
|
+
children: [
|
|
18723
|
+
"$",
|
|
18724
|
+
interpolated.price.toFixed(2)
|
|
18725
|
+
]
|
|
18726
|
+
}
|
|
18727
|
+
)
|
|
18728
|
+
] });
|
|
18729
|
+
})()
|
|
18730
|
+
] })
|
|
18731
|
+
]
|
|
18732
|
+
}
|
|
18733
|
+
);
|
|
18734
|
+
});
|
|
18603
18735
|
|
|
18604
18736
|
exports.AssetSelectorBar = AssetSelectorBar;
|
|
18605
18737
|
exports.Badge = Badge;
|
|
@@ -18642,12 +18774,14 @@ exports.PropertyValuation = PropertyValuation;
|
|
|
18642
18774
|
exports.SiteFooter = SiteFooter;
|
|
18643
18775
|
exports.Skeleton = Skeleton;
|
|
18644
18776
|
exports.SlideDigit = SlideDigit;
|
|
18777
|
+
exports.SparklineChart = SparklineChart;
|
|
18645
18778
|
exports.ToastProvider = ToastProvider;
|
|
18646
18779
|
exports.TradeConfirmationModal = TradeConfirmationModal;
|
|
18647
18780
|
exports.TradingSlider = TradingSlider;
|
|
18648
18781
|
exports.YourOrders = YourOrders;
|
|
18649
18782
|
exports.badgeVariants = badgeVariants;
|
|
18650
18783
|
exports.buttonVariants = buttonVariants;
|
|
18784
|
+
exports.extractSparkline = extractSparkline;
|
|
18651
18785
|
exports.hasPendingActivity = hasPendingActivity;
|
|
18652
18786
|
exports.useAdaptivePolling = useAdaptivePolling;
|
|
18653
18787
|
exports.useToast = useToast;
|