@agg-build/ui 4.21.0 → 4.22.2

package/dist/events.js

@@ -12792,64 +12792,32 @@ var formatContractChartTime = (timestamp) => {
 
 // src/events/item-details/event-markets-chart.utils.ts
 var import_hooks49 = require("@agg-build/hooks");
-var EVENT_CHART_SERIES_LIMIT = 8;
-function resolveEventChartSelectedOutcome(markets, venue, selectedOutcomeId) {
-  var _a, _b;
-  if (!selectedOutcomeId) return null;
-  const allMarkets = normalizeVenueMarketCluster(markets);
-  const market = allMarkets.find(
-    (item) => item.venueMarketOutcomes.some((outcome2) => outcome2.id === selectedOutcomeId)
-  );
-  const outcome = market == null ? void 0 : market.venueMarketOutcomes.find((item) => item.id === selectedOutcomeId);
-  if (!market || !outcome) return null;
-  return (_b = (_a = collectEligibleVenueOutcomes({
-    venueMarkets: normalizeVenueMarketCluster(markets, market.id),
-    selectedOutcomeLabel: outcome.label,
-    selectedOutcomeId
-  }).find((item) => item.venue === venue)) == null ? void 0 : _a.outcomeId) != null ? _b : null;
-}
-function resolveEventChartPage(outcomes, selectedOutcomeId, requestedPage) {
+var EVENT_CHART_MARKET_LIMIT = 3;
+var marketVolume = (market) => {
   var _a;
-  const pinned = outcomes.find((outcome) => outcome.id === selectedOutcomeId);
-  const remaining = outcomes.filter((outcome) => outcome.id !== (pinned == null ? void 0 : pinned.id));
-  const pageSize = EVENT_CHART_SERIES_LIMIT - (pinned ? 1 : 0);
-  const pageCount = Math.max(1, Math.ceil(remaining.length / pageSize));
-  const page = Math.max(0, Math.min(requestedPage, pageCount - 1));
-  return {
-    page,
-    pageCount,
-    pinnedId: (_a = pinned == null ? void 0 : pinned.id) != null ? _a : null,
-    outcomes: [
-      ...pinned ? [pinned] : [],
-      ...remaining.slice(page * pageSize, (page + 1) * pageSize)
-    ]
-  };
-}
-var resolveEventChartOutcomes = (markets, venue, eventEndDate) => normalizeVenueMarketCluster(markets).filter((market) => market.venue === venue).sort(
-  (left, right) => {
-    var _a, _b;
-    return ((_a = right.volume) != null ? _a : 0) - ((_b = left.volume) != null ? _b : 0) || left.id.localeCompare(right.id);
-  }
-).flatMap((market) => {
+  return Number.isFinite(market.volume) ? Math.max(0, (_a = market.volume) != null ? _a : 0) : 0;
+};
+var resolveTopEventChartMarkets = (markets, venue) => normalizeVenueMarketCluster(markets).filter((market) => market.venue === venue && market.venueMarketOutcomes.length > 0).sort(
+  (left, right) => marketVolume(right) - marketVolume(left) || left.id.localeCompare(right.id)
+).slice(0, EVENT_CHART_MARKET_LIMIT);
+var resolveEventChartOutcomes = (markets, venue, eventEndDate) => resolveTopEventChartMarkets(markets, venue).flatMap((market) => {
   var _a, _b, _c;
   const state = (0, import_hooks49.resolveMarketTradingState)(market);
   const hasFinalResult = state.kind === "resolved" && market.venueMarketOutcomes.some((outcome) => outcome.winner === true) && market.venueMarketOutcomes.every((outcome) => outcome.winner != null);
   const settledAt = Date.parse((_c = (_b = (_a = market.resolutionDate) != null ? _a : market.endDate) != null ? _b : eventEndDate) != null ? _c : "") / 1e3;
-  const ordered = [...market.venueMarketOutcomes].sort((a, b) => {
-    const rank = (label2) => label2.trim().toLowerCase() === "yes" ? 0 : label2.trim().toLowerCase() === "no" ? 1 : 2;
-    return rank(a.label) - rank(b.label);
-  });
+  const ordered = sortOutcomeSelectorOutcomes(market.venueMarketOutcomes);
   return ordered.map((outcome) => {
-    var _a2;
+    var _a2, _b2;
     return {
       id: outcome.id,
       marketId: market.id,
       venue: market.venue,
       side: outcome.label,
+      outcomeLabel: ((_a2 = outcome.title) == null ? void 0 : _a2.trim()) || outcome.label,
       live: !state.isTradingDisabled,
       finalValue: hasFinalResult ? outcome.winner ? 100 : 0 : void 0,
       settledAt: Number.isFinite(settledAt) ? settledAt : void 0,
-      label: `${market.question} \xB7 ${((_a2 = outcome.title) == null ? void 0 : _a2.trim()) || outcome.label}`
+      label: `${market.question} \xB7 ${((_b2 = outcome.title) == null ? void 0 : _b2.trim()) || outcome.label}`
     };
   });
 });
@@ -12862,8 +12830,7 @@ var EventMarketsChart = ({
   eventEndDate,
   contractWindow,
   range,
-  live,
-  selectedOutcomeId
+  live
 }) => {
   var _a, _b, _c, _d, _e, _f, _g;
   const labels = (0, import_hooks50.useLabels)();
@@ -12875,31 +12842,20 @@ var EventMarketsChart = ({
     () => [...new Set(normalizeVenueMarketCluster(markets).map((market) => market.venue))],
     [markets]
   );
-  const venue = venues.includes(defaultVenue) ? defaultVenue : (_a = venues[0]) != null ? _a : defaultVenue;
-  const outcomes = (0, import_react22.useMemo)(
-    () => resolveEventChartOutcomes(markets, venue, eventEndDate),
-    [markets, venue, eventEndDate]
-  );
   const [selection, setSelection] = (0, import_react22.useState)(() => ({
-    venue,
-    page: 0,
+    defaultVenue,
+    venue: defaultVenue,
     hidden: /* @__PURE__ */ new Set()
   }));
-  const currentSelection = (0, import_react22.useMemo)(
-    () => selection.venue === venue ? selection : { venue, page: 0, hidden: /* @__PURE__ */ new Set() },
-    [selection, venue]
-  );
-  const pinnedOutcomeId = (0, import_react22.useMemo)(
-    () => resolveEventChartSelectedOutcome(markets, venue, selectedOutcomeId),
-    [markets, venue, selectedOutcomeId]
-  );
-  const page = (0, import_react22.useMemo)(
-    () => resolveEventChartPage(outcomes, pinnedOutcomeId, currentSelection.page),
-    [outcomes, pinnedOutcomeId, currentSelection.page]
-  );
-  const activeOutcomes = page.outcomes.filter(
-    (outcome) => outcome.id === page.pinnedId || !currentSelection.hidden.has(outcome.id)
+  const requestedVenue = selection.defaultVenue === defaultVenue ? selection.venue : defaultVenue;
+  const venue = venues.includes(requestedVenue) ? requestedVenue : (_a = venues[0]) != null ? _a : defaultVenue;
+  const hidden = selection.defaultVenue === defaultVenue && selection.venue === venue ? selection.hidden : /* @__PURE__ */ new Set();
+  const topMarkets = (0, import_react22.useMemo)(() => resolveTopEventChartMarkets(markets, venue), [markets, venue]);
+  const outcomes = (0, import_react22.useMemo)(
+    () => resolveEventChartOutcomes(topMarkets, venue, eventEndDate),
+    [topMarkets, venue, eventEndDate]
   );
+  const activeOutcomes = outcomes.filter((outcome) => !hidden.has(outcome.id));
   const activeIds = new Set(activeOutcomes.map((outcome) => outcome.id));
   const rollingWindow = (0, import_hooks50.useRollingChartWindow)({
     range,
@@ -12932,10 +12888,10 @@ var EventMarketsChart = ({
     live: live && !windowEnded
   });
   const stableColorIds = (0, import_react22.useMemo)(
-    () => [...new Set(outcomes.map((outcome) => outcome.marketId))].sort(),
-    [outcomes]
+    () => normalizeVenueMarketCluster(markets).filter((market) => market.venue === venue).map((market) => market.id).sort(),
+    [markets, venue]
   );
-  const allSeries = page.outcomes.map((outcome) => {
+  const allSeries = outcomes.map((outcome) => {
     var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h, _i;
     const settledAt = outcome.settledAt == null ? void 0 : contractWindow ? Math.min(outcome.settledAt, contractWindow.to) : outcome.settledAt;
     const outcomeLive = outcome.live && !windowEnded;
@@ -12971,110 +12927,109 @@ var EventMarketsChart = ({
   });
   const visibleSeries = allSeries.filter((series) => activeIds.has(series.id));
   const hasVisibleHistory = visibleSeries.some((series) => series.points.length > 0);
-  const volume = (0, import_react22.useMemo)(
-    () => normalizeVenueMarketCluster(markets).filter((market) => market.venue === venue).reduce((sum, market) => {
+  const volume = topMarkets.reduce(
+    (sum, market) => {
       var _a2;
-      return sum + ((_a2 = market.volume) != null ? _a2 : 0);
-    }, 0),
-    [markets, venue]
+      return sum + (Number.isFinite(market.volume) ? Math.max(0, (_a2 = market.volume) != null ? _a2 : 0) : 0);
+    },
+    0
   );
   const venueLabel = (_g = labels.venues[venue]) != null ? _g : venue;
   return /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("div", { className: "agg-event-markets-chart flex flex-col gap-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-2 text-agg-sm text-agg-muted-foreground", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("span", { role: "status", children: labels.eventItemDetails.comparisonSeriesCount(activeOutcomes.length, outcomes.length) }),
-      page.pageCount > 1 ? /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
-          Button,
-          {
-            variant: "tertiary",
-            size: "small",
-            disabled: page.page === 0,
-            onClick: (event) => {
-              event.stopPropagation();
-              setSelection(__spreadProps(__spreadValues({}, currentSelection), { page: page.page - 1 }));
-            },
-            prefix: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(Icon, { name: "chevron-left", size: "small" }),
-            children: labels.eventItemDetails.comparisonPreviousSeries
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("span", { children: labels.eventItemDetails.comparisonSeriesPage(page.page + 1, page.pageCount) }),
-        /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
-          Button,
-          {
-            variant: "tertiary",
-            size: "small",
-            disabled: page.page + 1 === page.pageCount,
-            onClick: (event) => {
-              event.stopPropagation();
-              setSelection(__spreadProps(__spreadValues({}, currentSelection), { page: page.page + 1 }));
-            },
-            suffix: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(Icon, { name: "chevron-right", size: "small" }),
-            children: labels.eventItemDetails.comparisonNextSeries
-          }
-        )
-      ] }) : null
-    ] }),
-    outcomes.length > EVENT_CHART_SERIES_LIMIT ? /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("p", { className: "text-agg-xs text-agg-muted-foreground", children: labels.eventItemDetails.comparisonSeriesBudget(EVENT_CHART_SERIES_LIMIT) }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "agg-market-badges flex min-w-0 gap-2 overflow-x-auto pb-1 md:flex-wrap", children: venues.map((item) => {
+      var _a2, _b2;
+      return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+        "button",
+        {
+          type: "button",
+          "aria-label": (_a2 = labels.venues[item]) != null ? _a2 : item,
+          "aria-pressed": venue === item,
+          className: "agg-market-badge cursor-pointer rounded-agg-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary",
+          onClick: (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (item !== venue) setSelection({ defaultVenue, venue: item, hidden: /* @__PURE__ */ new Set() });
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+            Badge,
+            {
+              text: (_b2 = labels.venues[item]) != null ? _b2 : item,
+              prefix: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(VenueLogo, { venue: item, size: "small", title: item }),
+              size: "large",
+              isActive: venue === item,
+              classNames: { root: "shrink-0 border px-4 h-8 md:h-9" }
+            }
+          )
+        },
+        item
+      );
+    }) }),
     /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
       "div",
       {
         role: "group",
         "aria-label": labels.eventItemDetails.chartLegend,
-        className: "flex flex-wrap gap-x-5 gap-y-2",
-        children: allSeries.map((series) => /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(
-          "button",
-          {
-            type: "button",
-            "data-chart-outcome-id": series.id,
-            "aria-pressed": activeIds.has(series.id),
-            disabled: series.id === page.pinnedId,
-            onClick: (event) => {
-              event.stopPropagation();
-              setSelection(() => {
-                const next = new Set(currentSelection.hidden);
-                if (next.has(series.id)) next.delete(series.id);
-                else next.add(series.id);
-                return __spreadProps(__spreadValues({}, currentSelection), { hidden: next });
-              });
+        className: "flex flex-col gap-2",
+        children: topMarkets.map((market) => {
+          var _a2;
+          return /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(
+            "div",
+            {
+              "data-chart-market-id": market.id,
+              className: "flex min-w-0 flex-wrap items-center justify-between gap-x-4 gap-y-1",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("span", { className: "flex min-w-0 items-center gap-2 text-agg-sm text-agg-foreground", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: "h-0 w-4 shrink-0 border-t-2",
+                      style: {
+                        borderColor: (_a2 = allSeries.find((series) => series.marketId === market.id)) == null ? void 0 : _a2.color
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("span", { className: "truncate", title: market.question, children: market.question })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "agg-outcome-switch flex max-w-full flex-wrap gap-1 rounded-agg-full bg-agg-secondary", children: allSeries.filter((series) => series.marketId === market.id).map((series) => {
+                  const value = !activeIds.has(series.id) ? labels.eventItemDetails.comparisonHiddenSeries : series.pending ? labels.common.loading : series.points.length === 0 ? labels.eventItemDetails.marketHistoryUnavailable : formatDefaultChartValue(
+                    series.current != null ? series.current * 100 : series.points.at(-1).value
+                  );
+                  return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      "data-chart-outcome-id": series.id,
+                      "aria-label": `${series.label} ${value}`,
+                      "aria-pressed": activeIds.has(series.id),
+                      title: `${series.label} ${value}`,
+                      className: "cursor-pointer rounded-agg-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary",
+                      onClick: (event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        const next = new Set(hidden);
+                        if (next.has(series.id)) next.delete(series.id);
+                        else next.add(series.id);
+                        setSelection({ defaultVenue, venue, hidden: next });
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+                        Badge,
+                        {
+                          text: `${series.outcomeLabel} ${value}`,
+                          size: "large",
+                          isActive: activeIds.has(series.id),
+                          classNames: { root: "h-8 w-36 border px-4 tabular-nums md:h-9" }
+                        }
+                      )
+                    },
+                    series.id
+                  );
+                }) })
+              ]
             },
-            className: "flex max-w-full cursor-pointer items-center gap-2 rounded-agg-sm py-1 text-agg-sm text-agg-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary disabled:cursor-default disabled:opacity-50",
-            style: { opacity: activeIds.has(series.id) ? 1 : 0.4 },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
-                "span",
-                {
-                  "aria-hidden": "true",
-                  className: "h-0 w-4 shrink-0 border-t-2",
-                  style: {
-                    borderColor: series.color,
-                    borderTopStyle: series.lineStyle === "dashed" ? "dashed" : "solid"
-                  }
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("span", { className: "min-w-0 text-left [overflow-wrap:anywhere]", children: series.label }),
-              series.id === page.pinnedId ? /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("span", { children: labels.eventItemDetails.comparisonSelectedSeries }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("span", { className: "inline-grid shrink-0 items-center font-agg-semibold tabular-nums", children: [
-                [
-                  formatDefaultChartValue(100),
-                  formatDefaultChartValue(99.9),
-                  labels.common.loading,
-                  labels.eventItemDetails.comparisonHiddenSeries,
-                  labels.eventItemDetails.marketHistoryUnavailable
-                ].map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
-                  "span",
-                  {
-                    "aria-hidden": "true",
-                    className: "invisible col-start-1 row-start-1 select-none",
-                    children: value
-                  },
-                  index
-                )),
-                /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("span", { className: "col-start-1 row-start-1", children: !activeIds.has(series.id) ? labels.eventItemDetails.comparisonHiddenSeries : series.pending ? labels.common.loading : series.points.length === 0 ? labels.eventItemDetails.marketHistoryUnavailable : series.current != null ? formatDefaultChartValue(series.current * 100) : formatDefaultChartValue(series.points.at(-1).value) })
-              ] })
-            ]
-          },
-          series.id
-        ))
+            market.id
+          );
+        })
       }
     ),
     visibleSeries.length === 0 && allSeries.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
@@ -13576,7 +13531,7 @@ var EventListItemDetailsContent = ({
   recurringMarkets,
   sportsLiveState
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f;
   const [selectedChartType, setSelectedChartType] = (0, import_react23.useState)("line");
   const [chartView, setChartView] = (0, import_react23.useState)(defaultChartView);
   const lastAppliedEventSyncKeyRef = (0, import_react23.useRef)(null);
@@ -13904,7 +13859,6 @@ var EventListItemDetailsContent = ({
             {
               markets: event.venueMarkets,
               defaultVenue: event.venue,
-              selectedOutcomeId: (tradingContext == null ? void 0 : tradingContext.selectedEventId) === event.id ? tradingContext.selectedOutcomeId : (_f = scopedSelectedMarket == null ? void 0 : scopedSelectedMarket.venueMarketOutcomes[0]) == null ? void 0 : _f.id,
               eventEndDate: event.endDate,
               contractWindow,
               range: chartRangeOverride != null ? chartRangeOverride : config.chart.selectedChartTimeRange,
@@ -13919,7 +13873,7 @@ var EventListItemDetailsContent = ({
               selectedChartType,
               venueInfo,
               venueMarkets,
-              selectedMarketId: (_g = scopedSelectedMarket == null ? void 0 : scopedSelectedMarket.id) != null ? _g : null,
+              selectedMarketId: (_f = scopedSelectedMarket == null ? void 0 : scopedSelectedMarket.id) != null ? _f : null,
               livePrices,
               restMidpoints,
               bestMidpoint,

package/dist/events.mjs

@@ -5,7 +5,7 @@ import {
   EventListItem,
   EventListItemV2,
   EventListVenueStrip
-} from "./chunk-JLO2BGSF.mjs";
+} from "./chunk-LIB6TLLV.mjs";
 import {
   EventListItemDetails,
   MarketDetails,
@@ -20,7 +20,7 @@ import {
   orderbookRowLimitDefault,
   resolveEventDetailsSyncKey,
   useCenterOrderbookSpread
-} from "./chunk-DWPBGMVJ.mjs";
+} from "./chunk-LTFRGJPL.mjs";
 import {
   formatProbabilityCents,
   resolveOrderBookRows,