@vatvaghool/create-ipl-dashboard 0.1.0

package/template/app/lib/dashboard/model.ts

@@ -0,0 +1,257 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { DashboardData } from "../../types";
+import {
+  getDisplayLiveMatchId,
+  getPlayedMatchRows,
+  getNumericRowEntries,
+} from "../../lib/dashboardData";
+import { getMatchViewState } from "../../lib/dashboardView";
+import { buildTeamBadgeMap } from "../../lib/teamBadges";
+import { buildDetailedTableRows } from "../../lib/detailedData";
+import type { DashboardModel } from "../../types/dashboard";
+import { formatCompactNumber } from "../../utils/dashboard";
+import {
+  FaTrophy,
+  FaArrowTrendUp,
+  FaBolt,
+  FaArrowTrendDown,
+  FaCircle,
+  FaMinus,
+} from "react-icons/fa6";
+
+const BRIGHT_COLORS = {
+  yellow: "#eab308",
+  green: "#84cc16",
+  pink: "#ec4899",
+  orange: "#f97316",
+  blue: "#3b82f6",
+  purple: "#a855f7",
+  cyan: "#22d3ee",
+  amber: "#f59e0b",
+} as const;
+
+export function buildDashboardModel(
+  data: DashboardData | null,
+): DashboardModel | null {
+  if (!data?.overall?.length) {
+    return null;
+  }
+
+  const overall = [...data.overall].sort((a, b) => a.rank - b.rank);
+  const normalizedOverall = overall.map((team, index) => {
+    const nextTeam = overall[index + 1];
+    const gapToNext =
+      typeof nextTeam?.points === "number"
+        ? Math.max(0, team.points - nextTeam.points)
+        : undefined;
+
+    return {
+      ...team,
+      gapToNext: team.gapToNext ?? gapToNext,
+    };
+  });
+
+  const playedMatches = getPlayedMatchRows(data.daily);
+  const matchView = getMatchViewState(data.daily);
+  const liveEntries = matchView.latestRow
+    ? getNumericRowEntries(matchView.latestRow).sort(
+        (a, b) => b.points - a.points,
+      )
+    : [];
+
+  const leader = normalizedOverall[0];
+  const chaser = normalizedOverall[1];
+  const woodenSpoon = normalizedOverall.at(-1);
+  const mostTransfers = [...normalizedOverall]
+    .filter((team) => typeof team.transfersLeft === "number")
+    .sort((a, b) => (b.transfersLeft ?? 0) - (a.transfersLeft ?? 0))[0];
+  const hottest = [...normalizedOverall].sort(
+    (a, b) => (b.lastMatchPoints ?? 0) - (a.lastMatchPoints ?? 0),
+  )[0];
+
+  const topTeams = normalizedOverall.slice(0, 8);
+  const barLeaderboard = normalizedOverall.slice(0, 8).map((team) => ({
+    label: team.name,
+    value: team.points,
+    sublabel: `#${team.rank}`,
+  }));
+
+  const liveBars = liveEntries.slice(0, 8).map((entry) => ({
+    label: entry.team,
+    value: entry.points,
+    sublabel: matchView.isLive
+      ? "live"
+      : (matchView.latestRow?.day ?? "latest"),
+  }));
+
+  const captainTeams = normalizedOverall.slice(0, 8);
+  const latestDailyRow = matchView.latestRow;
+  const tableRows = buildDetailedTableRows({
+    overall: normalizedOverall,
+    latestDailyRow,
+    snapshotLeaders: data.snapshot?.leaders,
+    transfers: data.transfers,
+  }).slice(0, 8);
+
+  const teamBadges = buildTeamBadgeMap(data);
+  const topTeamsChart = normalizedOverall.slice(0, 8).map((team) => ({
+    label: team.name,
+    value: team.points,
+    sublabel: `#${team.rank}`,
+    difference: typeof team.gapToNext === "number" ? team.gapToNext : undefined,
+  }));
+
+  const insights = createInsights(
+    leader,
+    chaser,
+    mostTransfers,
+    woodenSpoon,
+    liveEntries,
+    matchView,
+  );
+  const summaryCards = createSummaryCards(
+    leader,
+    hottest,
+    mostTransfers,
+    woodenSpoon,
+    chaser,
+  );
+
+  return {
+    leader,
+    topTeams,
+    normalizedOverall,
+    teamBadges,
+    insights,
+    summaryCards,
+    barLeaderboard,
+    liveBars,
+    topTeamsChart,
+    captainTeams,
+    tableRows,
+    liveLeader: liveEntries[0],
+    liveLabel: matchView.isLive
+      ? `Match ${getDisplayLiveMatchId(data.daily)} live`
+      : playedMatches.length
+        ? `Match ${getDisplayLiveMatchId(data.daily)} recap`
+        : "Live page",
+    liveChartTitle: matchView.isLive
+      ? `Match ${getDisplayLiveMatchId(data.daily)} Pulse`
+      : playedMatches.length
+        ? `Match ${getDisplayLiveMatchId(data.daily)} Recap`
+        : "Latest Match Pulse",
+    matchCount: playedMatches.length,
+    hottest,
+  };
+}
+
+function createInsights(
+  leader: any,
+  chaser: any,
+  mostTransfers: any,
+  woodenSpoon: any,
+  liveEntries: any[],
+  matchView: any,
+) {
+  return [
+    {
+      id: "leader-gap",
+      title: "Big circle around first place",
+      note: chaser
+        ? `${leader.name} leads ${chaser.name} by ${(leader.points - chaser.points).toLocaleString()} points.`
+        : `${leader.name} is alone at the top for now.`,
+      accent: BRIGHT_COLORS.yellow,
+      icon: FaTrophy,
+    },
+    {
+      id: "live-leader",
+      title: matchView.isLive ? "Live scribble" : "Last finished match",
+      note: liveEntries[0]
+        ? `${liveEntries[0].team} owns the latest page with ${liveEntries[0].points.toLocaleString()} points.`
+        : "No live row yet, so the margin is waiting for the next burst.",
+      accent: BRIGHT_COLORS.green,
+      icon: FaArrowTrendUp,
+    },
+    {
+      id: "transfers",
+      title: "Sticky note on transfers",
+      note: mostTransfers
+        ? `${mostTransfers.name} still has ${mostTransfers.transfersLeft} transfers tucked away.`
+        : "Transfer counts will appear once the snapshot includes them.",
+      accent: BRIGHT_COLORS.pink,
+      icon: FaBolt,
+    },
+    {
+      id: "dramatic",
+      title: "Teacher red pen",
+      note: woodenSpoon
+        ? `${woodenSpoon.name} is on cleanup duty at rank #${woodenSpoon.rank}, but one wild match can rewrite the page.`
+        : "The bottom of the table is still being drafted.",
+      accent: BRIGHT_COLORS.orange,
+      icon: FaArrowTrendDown,
+    },
+  ];
+}
+
+function createSummaryCards(
+  leader: any,
+  hottest: any,
+  mostTransfers: any,
+  woodenSpoon: any,
+  chaser: any,
+) {
+  return [
+    {
+      id: "leader-summary",
+      title: "Leader",
+      value: `${leader.name}`,
+      note: `${formatCompactNumber(leader.points)} pts`,
+      accent: BRIGHT_COLORS.yellow,
+      icon: FaTrophy,
+    },
+    {
+      id: "hot-streak",
+      title: "Hottest",
+      value: `${hottest.name}`,
+      note: `${(hottest.lastMatchPoints ?? 0).toLocaleString()} pts`,
+      accent: BRIGHT_COLORS.green,
+      icon: FaArrowTrendUp,
+    },
+    {
+      id: "transfer-stock",
+      title: "Transfers",
+      value: mostTransfers ? `${mostTransfers.name}` : "—",
+      note: mostTransfers ? `${mostTransfers.transfersLeft} left` : "No data",
+      accent: BRIGHT_COLORS.pink,
+      icon: FaBolt,
+    },
+    {
+      id: "bottom-watch",
+      title: "Bottom",
+      value: woodenSpoon ? `${woodenSpoon.name}` : "—",
+      note: woodenSpoon ? `#${woodenSpoon.rank}` : "No data",
+      accent: BRIGHT_COLORS.orange,
+      icon: FaCircle,
+    },
+    {
+      id: "chaser",
+      title: "Close chase",
+      value: chaser ? `${chaser.name}` : "—",
+      note: chaser
+        ? `${(leader.points - chaser.points).toLocaleString()} pts behind`
+        : "No chaser",
+      accent: BRIGHT_COLORS.blue,
+      icon: FaBolt,
+    },
+    {
+      id: "gap-to-last",
+      title: "Field spread",
+      value: woodenSpoon
+        ? `${(leader.points - woodenSpoon.points).toLocaleString()} pts`
+        : "—",
+      note: "Leader vs bottom gap",
+      accent: BRIGHT_COLORS.purple,
+      icon: FaMinus,
+    },
+  ];
+}

package/template/app/lib/dashboardData.ts

@@ -0,0 +1,50 @@
+import type { DailyChartRow } from "../types";
+
+export const parseMatchId = (day: string) => {
+  const match = day.match(/^Match\s+(\d+)$/i);
+  const parsed = match ? Number(match[1]) : Number.NaN;
+
+  return Number.isFinite(parsed) ? parsed : undefined;
+};
+
+export const isLiveUpdateRow = (row: DailyChartRow) => row.day === "Live Update";
+
+export const isMatchRow = (row: DailyChartRow) =>
+  typeof parseMatchId(row.day) === "number";
+
+export const getNumericRowEntries = (row: DailyChartRow) =>
+  Object.entries(row)
+    .filter(([key]) => key !== "day")
+    .map(([team, value]) => ({
+      team,
+      points: Number(value ?? 0),
+    }))
+    .filter((entry) => Number.isFinite(entry.points));
+
+export const hasMeaningfulMatchData = (row: DailyChartRow) =>
+  getNumericRowEntries(row).some((entry) => entry.points !== 0);
+
+export const getLiveUpdateRow = (daily: DailyChartRow[]) =>
+  daily.find(isLiveUpdateRow);
+
+export const getHistoricalMatchRows = (daily: DailyChartRow[]) =>
+  daily.filter(isMatchRow).sort((a, b) => {
+    const aId = parseMatchId(a.day) ?? 0;
+    const bId = parseMatchId(b.day) ?? 0;
+
+    return aId - bId;
+  });
+
+export const getPlayedMatchRows = (daily: DailyChartRow[]) =>
+  getHistoricalMatchRows(daily).filter(hasMeaningfulMatchData);
+
+export const getLatestPlayedMatchId = (daily: DailyChartRow[]) =>
+  getPlayedMatchRows(daily).reduce((latest, row) => {
+    const matchId = parseMatchId(row.day) ?? 0;
+    return Math.max(latest, matchId);
+  }, 0);
+
+export const getDisplayLiveMatchId = (daily: DailyChartRow[]) => {
+  const latestPlayedMatchId = getLatestPlayedMatchId(daily);
+  return getLiveUpdateRow(daily) ? latestPlayedMatchId + 1 : latestPlayedMatchId;
+};

package/template/app/lib/dashboardView.ts

@@ -0,0 +1,22 @@
+import type { DailyChartRow } from "../types";
+import { getLiveUpdateRow, getPlayedMatchRows } from "./dashboardData.ts";
+
+export const getLatestMatchRow = (daily: DailyChartRow[]) =>
+  getLiveUpdateRow(daily) ?? getPlayedMatchRows(daily).at(-1);
+
+export const hasLiveMatchRow = (daily: DailyChartRow[]) =>
+  Boolean(getLiveUpdateRow(daily));
+
+export const getMatchViewState = (daily: DailyChartRow[]) => {
+  const liveRow = getLiveUpdateRow(daily);
+  const playedRows = getPlayedMatchRows(daily);
+  const latestRow = liveRow ?? playedRows.at(-1);
+
+  return {
+    liveRow,
+    playedRows,
+    latestRow,
+    isLive: Boolean(liveRow),
+    hasMatches: playedRows.length > 0 || Boolean(liveRow),
+  };
+};

package/template/app/lib/detailedData.ts

@@ -0,0 +1,112 @@
+import { config } from "./config.ts";
+import type {
+  DashboardData,
+  OverallChartItem,
+  ScrapedLeaderboardItem,
+} from "../types";
+
+type DetailedTableRow = OverallChartItem & {
+  latestPoints?: number;
+  transferMatchesPlayed?: number;
+};
+
+const getSnapshotBoostersUsed = (leader: unknown) => {
+  if (!leader || typeof leader !== "object") {
+    return undefined;
+  }
+
+  const item = leader as Record<string, unknown>;
+  const rawValue = item.boostersUsed ?? item.boosters;
+
+  if (typeof rawValue === "string") {
+    return rawValue.trim();
+  }
+
+  if (typeof rawValue === "number" && Number.isFinite(rawValue)) {
+    return String(rawValue);
+  }
+
+  return undefined;
+};
+
+const toNumber = (value: string | number | undefined) => {
+  if (typeof value === "number") {
+    return Number.isFinite(value) ? value : undefined;
+  }
+
+  if (typeof value === "string") {
+    const parsed = Number(value.trim());
+    return Number.isFinite(parsed) ? parsed : undefined;
+  }
+
+  return undefined;
+};
+
+const buildTransferMap = (transfers?: DashboardData["transfers"]) => {
+  return new Map(
+    (transfers?.teams ?? []).map((team) => [team.team.toLowerCase(), team]),
+  );
+};
+
+const buildSnapshotLeaderMap = (leaders?: ScrapedLeaderboardItem[]) => {
+  return new Map((leaders ?? []).map((leader) => [leader.name, leader]));
+};
+
+export const buildDetailedTableRows = ({
+  overall,
+  latestDailyRow,
+  snapshotLeaders,
+  transfers,
+}: {
+  overall: OverallChartItem[];
+  latestDailyRow?: Record<string, string | number>;
+  snapshotLeaders?: ScrapedLeaderboardItem[];
+  transfers?: DashboardData["transfers"];
+}): DetailedTableRow[] => {
+  const transferMap = buildTransferMap(transfers);
+  const snapshotLeaderMap = buildSnapshotLeaderMap(snapshotLeaders);
+
+  return [...overall]
+    .sort((a, b) => a.rank - b.rank)
+    .map((row) => {
+      const snapshotLeader = snapshotLeaderMap.get(row.name);
+      const transferRecord = transferMap.get(row.name.toLowerCase());
+      const latestDailyPoints = latestDailyRow?.[row.name];
+      const latestPoints =
+        typeof latestDailyPoints === "number"
+          ? latestDailyPoints
+          : row.lastMatchPoints;
+
+      const transfersLeft =
+        toNumber(transferRecord?.transfersLeft) ??
+        row.transfersLeft ??
+        (typeof snapshotLeader?.transfersLeft === "number"
+          ? snapshotLeader.transfersLeft
+          : undefined);
+      const totalTransfers = config.league.totalTransfers;
+      const transfersUsed =
+        typeof transfersLeft === "number"
+          ? totalTransfers - transfersLeft
+          : undefined;
+      const efficiency =
+        typeof transfersUsed === "number" && transfersUsed > 0 && row.points > 0
+          ? row.points / transfersUsed
+          : undefined;
+
+      return {
+        ...row,
+        latestPoints,
+        transfersLeft,
+        transfersUsed,
+        totalTransfers,
+        efficiency,
+        boostersUsed:
+          (typeof transferRecord?.boostersUsed === "number"
+            ? String(transferRecord.boostersUsed)
+            : undefined) ??
+          row.boostersUsed ??
+          getSnapshotBoostersUsed(snapshotLeader),
+        transferMatchesPlayed: transferRecord?.matchesPlayed,
+      };
+    });
+};

package/template/app/lib/matchStatus.ts

@@ -0,0 +1,28 @@
+import { matches } from "./matches";
+
+export type MatchStatus = "ENDED" | "LIVE" | "SOON" | "UPCOMING";
+
+export function getMatchStatus(date: string) {
+  const now = new Date().getTime();
+  const matchTime = new Date(date).getTime();
+
+  const diff = matchTime - now;
+
+  if (diff < -4 * 60 * 60 * 1000) return "ENDED" as const;
+  if (diff <= 0) return "LIVE" as const;
+  if (diff <= 30 * 60 * 1000) return "SOON" as const;
+
+  return "UPCOMING" as const;
+}
+
+export function getCurrentMatchStatus() {
+  const current = matches
+    .map((match) => ({
+      ...match,
+      status: getMatchStatus(match.date),
+    }))
+    .filter((match) => match.status !== "ENDED")
+    .sort((a, b) => +new Date(a.date) - +new Date(b.date))[0];
+
+  return current?.status ?? "ENDED";
+}

package/template/app/lib/matches.ts

@@ -0,0 +1,131 @@
+type Match = {
+  id: number;
+  team1: string;
+  team2: string;
+  date: string;
+};
+
+export const matches: Match[] = [
+  {
+    id: 51,
+    team1: "DC",
+    team2: "KKR",
+    date: "2026-05-08T14:00:00Z",
+  },
+  {
+    id: 52,
+    team1: "RR",
+    team2: "GT",
+    date: "2026-05-09T14:00:00Z",
+  },
+  {
+    id: 53,
+    team1: "CSK",
+    team2: "LSG",
+    date: "2026-05-10T10:00:00Z",
+  },
+  {
+    id: 54,
+    team1: "RCB",
+    team2: "MI",
+    date: "2026-05-10T14:00:00Z",
+  },
+  {
+    id: 55,
+    team1: "PBKS",
+    team2: "DC",
+    date: "2026-05-11T14:00:00Z",
+  },
+  {
+    id: 56,
+    team1: "GT",
+    team2: "SRH",
+    date: "2026-05-12T14:00:00Z",
+  },
+  {
+    id: 57,
+    team1: "RCB",
+    team2: "KKR",
+    date: "2026-05-13T14:00:00Z",
+  },
+  {
+    id: 58,
+    team1: "PBKS",
+    team2: "MI",
+    date: "2026-05-14T14:00:00Z",
+  },
+  {
+    id: 59,
+    team1: "LSG",
+    team2: "CSK",
+    date: "2026-05-15T14:00:00Z",
+  },
+  {
+    id: 60,
+    team1: "KKR",
+    team2: "GT",
+    date: "2026-05-16T14:00:00Z",
+  },
+  {
+    id: 61,
+    team1: "PBKS",
+    team2: "RCB",
+    date: "2026-05-17T10:00:00Z",
+  },
+  {
+    id: 62,
+    team1: "DC",
+    team2: "RR",
+    date: "2026-05-17T14:00:00Z",
+  },
+  {
+    id: 63,
+    team1: "CSK",
+    team2: "SRH",
+    date: "2026-05-18T14:00:00Z",
+  },
+  {
+    id: 64,
+    team1: "RR",
+    team2: "LSG",
+    date: "2026-05-19T14:00:00Z",
+  },
+  {
+    id: 65,
+    team1: "KKR",
+    team2: "MI",
+    date: "2026-05-20T14:00:00Z",
+  },
+  {
+    id: 66,
+    team1: "CSK",
+    team2: "GT",
+    date: "2026-05-21T14:00:00Z",
+  },
+  {
+    id: 67,
+    team1: "SRH",
+    team2: "RCB",
+    date: "2026-05-22T14:00:00Z",
+  },
+  {
+    id: 68,
+    team1: "LSG",
+    team2: "PBKS",
+    date: "2026-05-23T14:00:00Z",
+  },
+  {
+    id: 69,
+    team1: "MI",
+    team2: "RR",
+    date: "2026-05-24T10:00:00Z",
+  },
+  {
+    id: 70,
+    team1: "KKR",
+    team2: "DC",
+    date: "2026-05-24T14:00:00Z",
+  },
+];
+
+export type UpcomingMatch = Match;