@maestro_io/maestro-web-sdk 2.1.2 → 2.1.3

package/dist/modules/stats/view/TeamStats/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './TeamStatsView';
+export type { TeamStatsViewProps } from './TeamStatsView';

package/dist/modules/stats/view/TeamStats/index.js

@@ -0,0 +1 @@
+export { default } from './TeamStatsView';

package/dist/modules/stats/view/Teams/StatsProgressBar.js

@@ -4,11 +4,15 @@ const StatsProgressBar = (props) => {
     const awayTeamPercentage = total === 0 ? 0 : Math.round((props.awayTeamValue / total) * 100);
     return (React.createElement("div", { className: "progress-bar" },
         React.createElement("div", { className: "progress-fill" },
-            React.createElement("div", { className: "progress-divider", style: {
-                    right: `${awayTeamPercentage}%`,
+            React.createElement("div", { className: "progress-solid", style: {
+                    width: `${awayTeamPercentage}%`,
                 } }),
             React.createElement("div", { className: "progress-stripes", style: {
-                    width: `${awayTeamPercentage}%`,
+                    left: `${awayTeamPercentage}%`,
+                    width: `${100 - awayTeamPercentage}%`,
+                } }),
+            React.createElement("div", { className: "progress-divider", style: {
+                    left: `${awayTeamPercentage}%`,
                 } }))));
 };
 export default StatsProgressBar;

package/dist/modules/stats/view/Teams/Teams.d.ts

@@ -25,6 +25,7 @@ export type HeaderTeamStatItem = {
 declare const _default: {
     new (props?: (HeaderTeamStatItem & WithFocusableProps) | undefined, context?: any): {
         state: import("../../../../external/spatial-navigation/withFocusable").WithFocusableState;
+        navigation: import("../../../../external/spatial-navigation/spatialNavigation").default;
         getChildContext(): {
             parentFocusKey: string;
         };

package/dist/modules/stats/view/Teams/Teams.js

@@ -3,7 +3,7 @@ import './TeamsView.styles.css';
 import Image from '@/components/atoms/Image';
 import { withFocusable, } from '@/external/spatial-navigation';
 import { CarouselSlider, StatsCarousel } from './StatsCarousel';
-import StatsProgressBar from './StatsProgressBar';
+import { renderTeamStatistic } from '../../utils/renderTeamStatistic';
 const Teams = (props) => {
     const teams = [props.homeTeam, props.awayTeam];
     return (React.createElement("section", { className: "stats-teams-view focus-ring", "data-focused": props.focused, style: {
@@ -24,12 +24,19 @@ const Teams = (props) => {
                 React.createElement("tbody", null, teams.map((team) => (React.createElement("tr", { key: team.id },
                     React.createElement("td", { className: "T30" }, team.name),
                     team.linescores.map((lineScore, index) => (React.createElement("td", { key: `${lineScore}-${index}`, className: "T10" }, lineScore)))))))),
-            props.statistics && props.statistics.length > 0 && (React.createElement(StatsCarousel, { itemsLength: props.statistics.length }, props.statistics.map((statistic) => (React.createElement(CarouselSlider, { itemsLength: props.statistics.length, key: statistic.displayName },
-                React.createElement("div", { className: "score-statistics" },
-                    React.createElement("div", { className: "score-statistics-header" },
-                        React.createElement("span", { className: "T30" }, statistic.homeTeamValue),
-                        React.createElement("span", { className: "statistic-name T02" }, statistic.displayName),
-                        React.createElement("span", { className: "T30" }, statistic.awayTeamValue)),
-                    React.createElement(StatsProgressBar, { awayTeamValue: statistic.awayTeamValue, homeTeamValue: statistic.homeTeamValue })))))))))));
+            props.statistics && props.statistics.length > 0 && (React.createElement(StatsCarousel, { itemsLength: props.statistics.length }, props.statistics.map((statistic) => (React.createElement(CarouselSlider, { itemsLength: props.statistics.length, key: statistic.displayName }, renderTeamStatistic({
+                statisticName: statistic.displayName,
+                firstDisplayValue: statistic.homeTeamValue,
+                secondDisplayValue: statistic.awayTeamValue,
+                awayProgressValue: statistic.awayTeamValue,
+                homeProgressValue: statistic.homeTeamValue,
+                classNames: {
+                    container: 'score-statistics',
+                    header: 'score-statistics-header',
+                    firstValue: 'T30',
+                    secondValue: 'T30',
+                    statisticName: 'statistic-name T02',
+                },
+            }))))))))));
 };
 export default withFocusable()(Teams);

package/dist/modules/stats/view/WinProbability/WinProbability.d.ts

@@ -20,6 +20,7 @@ export type WinProbabilityStatsItem = {
 declare const _default: {
     new (props?: (WinProbabilityStatsItem & WithFocusableProps) | undefined, context?: any): {
         state: import("../../../../external/spatial-navigation/withFocusable").WithFocusableState;
+        navigation: import("../../../../external/spatial-navigation/spatialNavigation").default;
         getChildContext(): {
             parentFocusKey: string;
         };

package/dist/modules/stats/view/components/AthletesStatistics/AthletesStatistics.d.ts

@@ -1,14 +1,30 @@
 /// <reference types="prop-types" />
 import React from 'react';
 import { WithFocusableProps } from '@/external/spatial-navigation';
-import { LeaderStatsItem } from '../../GameLeaders/GameLeaders';
 import './AthleteStatistics.styles.css';
-type AthletesStatisticsProps = {
-    item: LeaderStatsItem;
+import { LeaderStatistic } from '@/modules/stats/interfaces/IStats';
+type Athlete = {
+    id: string;
+    displayName: string;
+    headshot: string;
+    position: string;
+    shortName: string;
+    jersey: string;
+    statistics: LeaderStatistic[];
+    minifiedStatistics?: string;
+};
+export type AthletesStatisticsItem = {
+    displayName?: string;
+    awayAthlete: Athlete;
+    homeAthlete: Athlete;
+};
+export type AthletesStatisticsProps = {
+    item: AthletesStatisticsItem;
 };
 declare const _default: {
     new (props?: (AthletesStatisticsProps & WithFocusableProps) | undefined, context?: any): {
         state: import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState;
+        navigation: import("../../../../../external/spatial-navigation/spatialNavigation").default;
         getChildContext(): {
             parentFocusKey: string;
         };

package/dist/modules/stats/view/components/AthletesStatistics/AthletesStatistics.js

@@ -5,8 +5,8 @@ import { withFocusable, } from '@/external/spatial-navigation';
 import './AthleteStatistics.styles.css';
 const AthletesStatistics = (props) => {
     const item = props.item;
-    return (React.createElement("div", { className: "athletes-statistics focus-ring", key: item.displayName, "data-focused": props.focused },
-        React.createElement("span", { className: "T05_ALT" }, item.displayName),
+    return (React.createElement("div", { className: "athletes-statistics focus-ring", "data-focused": props.focused },
+        !!item.displayName && (React.createElement("span", { className: "T05_ALT" }, item.displayName)),
         React.createElement("div", { className: "leaders-wrapper" }, [item.awayAthlete, item.homeAthlete].map((athlete) => {
             return (React.createElement("div", { className: "leader", key: athlete.id + item.displayName },
                 React.createElement("div", { className: "image-wrapper T02", "data-position": athlete.position },
@@ -18,11 +18,12 @@ const AthletesStatistics = (props) => {
                         React.createElement("span", { className: "athlete-number T02" },
                             "#",
                             athlete.jersey)),
-                    athlete.mainStatistic && (React.createElement("div", { className: "main-statistic T30" },
-                        athlete.mainStatistic.displayValue,
+                    Array.isArray(athlete.statistics) &&
+                        !!athlete.statistics.length && (React.createElement("div", { className: "main-statistic T30" },
+                        athlete.statistics[0].displayValue,
                         ' ',
-                        React.createElement("span", { className: "athlete-points T02" }, athlete.mainStatistic.abbreviation))))));
+                        React.createElement("span", { className: "athlete-points T02" }, athlete.statistics[0].abbreviation))))));
         })),
-        React.createElement(StatisticsTable, { statistics: item.statistics || [] })));
+        React.createElement(StatisticsTable, { item: item })));
 };
 export default withFocusable()(AthletesStatistics);

package/dist/modules/stats/view/components/AthletesStatistics/StatisticTable.d.ts

@@ -1,10 +1,4 @@
 import React from 'react';
-type LeadersStatisticTableProps = {
-    statistics: {
-        awayAthleteValue: string;
-        abbreviation: string;
-        homeAthleteValue: string;
-    }[];
-};
-declare const StatisticsTable: (props: LeadersStatisticTableProps) => React.JSX.Element;
+import { AthletesStatisticsProps } from './AthletesStatistics';
+declare const StatisticsTable: (props: AthletesStatisticsProps) => React.JSX.Element;
 export default StatisticsTable;

package/dist/modules/stats/view/components/AthletesStatistics/StatisticTable.js

@@ -1,11 +1,12 @@
 import React from 'react';
 const StatisticsTable = (props) => {
     return (React.createElement("table", { className: "athletes-statistics-table T10" },
-        React.createElement("tbody", null, props.statistics.map((statistic) => {
+        React.createElement("tbody", null, props.item.awayAthlete.statistics.slice(1).map((statistic, index) => {
             return (React.createElement("tr", { key: statistic.abbreviation },
-                React.createElement("td", null, statistic.awayAthleteValue),
+                React.createElement("td", null, statistic.displayValue),
                 React.createElement("td", null, statistic.abbreviation),
-                React.createElement("td", null, statistic.homeAthleteValue)));
+                React.createElement("td", null, props.item.homeAthlete.statistics[index + 1].displayValue ||
+                    '0')));
         }))));
 };
 export default StatisticsTable;

package/dist/modules/stats/view/index.d.ts

@@ -1 +1,2 @@
 export { default } from './StatsView';
+export { default as TeamStatsView } from './TeamStats';

package/dist/modules/stats/view/index.js

@@ -1 +1,2 @@
 export { default } from './StatsView';
+export { default as TeamStatsView } from './TeamStats';

package/dist/services/StatsService.d.ts

@@ -0,0 +1,36 @@
+import NetworkManager from './NetworkManager/NetworkManager';
+import { StatsApiResponse } from '../modules/stats/interfaces/IStats';
+import IMaestroEventDelegate from '@/interfaces/IMaestroEventDelegate';
+/**
+ * Service for handling stats-related API calls
+ */
+declare class StatsService {
+    networkManager: NetworkManager;
+    constructor(delegate: IMaestroEventDelegate);
+    /**
+     * Get stats for an event
+     *
+     * @param eventID - The ID of the event
+     * @param gameState - Optional game state filter (e.g., 'pre', 'in', 'post')
+     * @returns Promise with the stats data
+     */
+    getStats(eventID: string, gameState?: string): Promise<StatsApiResponse>;
+    /**
+     * Start polling for stats
+     *
+     * @param eventID - The ID of the event
+     * @param gameState - Optional game state filter (e.g., 'pre', 'in', 'post')
+     * @param interval - The polling interval in milliseconds
+     * @param onData - Callback for successful data fetch
+     * @param onError - Callback for errors
+     * @returns Object with a stop function to stop polling
+     */
+    pollStats(eventID: string, gameState: string | undefined, interval: number, onData: (data: StatsApiResponse) => void, onError?: (error: Error) => void): {
+        stop: () => void;
+    };
+    /**
+     * Get the endpoint for stats
+     */
+    statsEndpoint(eventID: string): string;
+}
+export default StatsService;

package/dist/services/StatsService.js

@@ -0,0 +1,68 @@
+import NetworkManager, { HttpMethod } from './NetworkManager/NetworkManager';
+/**
+ * Service for handling stats-related API calls
+ */
+class StatsService {
+    constructor(delegate) {
+        Object.defineProperty(this, "networkManager", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.networkManager = NetworkManager.getInstance({
+            externalBaseURL: delegate.getBettingAPIBaseURL(),
+        });
+    }
+    /**
+     * Get stats for an event
+     *
+     * @param eventID - The ID of the event
+     * @param gameState - Optional game state filter (e.g., 'pre', 'in', 'post')
+     * @returns Promise with the stats data
+     */
+    async getStats(eventID, gameState) {
+        const params = {};
+        if (gameState) {
+            params.gameState = gameState;
+        }
+        return this.networkManager.externalApiRequest({
+            endpoint: this.statsEndpoint(eventID),
+            method: HttpMethod.GET,
+            params,
+            headers: {},
+        });
+    }
+    /**
+     * Start polling for stats
+     *
+     * @param eventID - The ID of the event
+     * @param gameState - Optional game state filter (e.g., 'pre', 'in', 'post')
+     * @param interval - The polling interval in milliseconds
+     * @param onData - Callback for successful data fetch
+     * @param onError - Callback for errors
+     * @returns Object with a stop function to stop polling
+     */
+    pollStats(eventID, gameState, interval, onData, onError) {
+        const params = {};
+        if (gameState) {
+            params.gameState = gameState;
+        }
+        return this.networkManager.pollExternalApiRequest({
+            endpoint: this.statsEndpoint(eventID),
+            interval,
+            method: HttpMethod.GET,
+            params,
+            headers: {},
+            onData,
+            onError,
+        });
+    }
+    /**
+     * Get the endpoint for stats
+     */
+    statsEndpoint(eventID) {
+        return `/v4/events/${eventID}/stats`;
+    }
+}
+export default StatsService;

package/dist/view-models/MaestroEventViewModel.d.ts

@@ -4,6 +4,7 @@ import { Observable } from '../helpers/Observable';
 import { ViewModel } from './ViewModel';
 import KeyPlaysViewModel from '../modules/key-plays/view-model/KeyPlaysViewModel';
 import BetsViewModel from '../modules/bets/view-model/BetsViewModel';
+import SpatialNavigation from '@/external/spatial-navigation/spatialNavigation';
 import StatsViewModel from '../modules/stats/view-model/StatsViewModel';
 import IMaestroKeyPlaysResponse from '../modules/key-plays/interfaces/IKeyPlaysResponse';
 import { MaestroPanelType } from '@/models/IPanel';
@@ -16,6 +17,7 @@ export declare class MaestroEventViewModel extends ViewModel implements IMaestro
     keyPlaysViewModel: KeyPlaysViewModel;
     betsViewModel: BetsViewModel;
     statsViewModel: StatsViewModel;
+    navigation: SpatialNavigation;
     constructor(eventId: string | undefined, delegate: IMaestroEventDelegate);
     deinit(): void;
     updateKeyPlaysData(data: IMaestroKeyPlaysResponse | null): Promise<void>;
@@ -40,4 +42,9 @@ export declare class MaestroEventViewModel extends ViewModel implements IMaestro
     get isShowingPanel(): boolean;
     set isShowingPanel(value: boolean);
     simulateUseCase<T = any>(useCase: TestUseCase, panelType: MaestroPanelType, testData?: T): void;
+    /**
+     * This method is called when the user navigates to the MaestroEventViewModel.
+     * It will pause navigation and start focus management.
+     */
+    deliverFocus(): void;
 }

package/dist/view-models/MaestroEventViewModel.js

@@ -55,25 +55,30 @@ export class MaestroEventViewModel extends ViewModel {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "navigation", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         this._eventId.value = eventId;
         this.delegate = delegate;
         this.betsViewModel = new BetsViewModel(eventId, delegate);
         this.statsViewModel = new StatsViewModel(eventId, { useMockData: true });
-        SpatialNavigation.init();
+        this.navigation = new SpatialNavigation();
     }
     deinit() {
         this.betsViewModel.cleanup();
         this.statsViewModel.cleanup();
-        SpatialNavigation.destroy();
+        this.navigation.destroy();
     }
     updateKeyPlaysData(data) {
         return this.keyPlaysViewModel.setKeyPlays(data);
     }
     startFocusManagement() {
-        SpatialNavigation.setFocus('');
-        SpatialNavigation.resume();
+        this.navigation.setCurrentFocusedKey('PANEL_NAV_BUTTON_0', {});
         setTimeout(() => {
-            SpatialNavigation.setFocus('PANEL_NAV_BUTTON_0');
+            this.navigation.resume();
         }, 0);
         return Promise.resolve();
     }
@@ -102,7 +107,6 @@ export class MaestroEventViewModel extends ViewModel {
     }
     async didHidePanel() {
         this.isShowingPanel = false;
-        SpatialNavigation.pause();
         // Analytics call?
     }
     didShowOverlay() {
@@ -153,4 +157,12 @@ export class MaestroEventViewModel extends ViewModel {
                 throw new Error(`Unsupported panel type: ${panelType}`);
         }
     }
+    /**
+     * This method is called when the user navigates to the MaestroEventViewModel.
+     * It will pause navigation and start focus management.
+     */
+    deliverFocus() {
+        this.navigation.pause();
+        this.delegate.startFocusManagement();
+    }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maestro_io/maestro-web-sdk",
   "private": false,
-  "version": "2.1.2",
+  "version": "2.1.3",
   "type": "commonjs",
   "license": "MIT",
   "main": "dist/maestro-web-sdk.umd.js",