type changes

frontend/src/components/AltsTable/HeaderCell.tsx

@@ -1,13 +1,13 @@
-import { TableCell } from '@mui/material';
+import { TableCell } from "@mui/material";
 
-import type { ITableColumn } from '@/types';
+import type { TableColumn } from "@/types";
 
 interface IProps {
-  column: ITableColumn;
+  column: TableColumn;
 }
 
 const HeaderCell = ({ column }: IProps) => {
-  const { align = 'left', label } = column;
+  const { align = "left", label } = column;
 
   return <TableCell align={align}>{label}</TableCell>;
 };

frontend/src/components/AltsTable/Row.tsx

@@ -1,9 +1,9 @@
 import { get } from "lodash";
 import { TableCell, TableRow, Typography } from "@mui/material";
 
-import type { ITableColumn } from "@/types";
+import type { TableColumn } from "@/types";
 interface IProps {
-  columns: ITableColumn[];
+  columns: TableColumn[];
   record: any;
   onRowOver?: (record: any | null) => void;
   bgColor?: string;
@@ -19,10 +19,14 @@ const Row = ({
   bgColor,
   onRowOver,
 }: IProps) => {
-  const href = window.location.href
-  let bgClass = shouldHighlight ? "rgb(21, 128, 61, 0.25)" : altHighlight ? "rgb(96, 165, 250, 0.25)" : '';
-  if(href.indexOf("ladder") > -1 || href.indexOf("shuffle") > -1) {
-      bgClass = altHighlight ? "rgb(96, 165, 250, 0.25)" : '';
+  const href = window.location.href;
+  let bgClass = shouldHighlight
+    ? "rgb(21, 128, 61, 0.25)"
+    : altHighlight
+    ? "rgb(96, 165, 250, 0.25)"
+    : "";
+  if (href.indexOf("ladder") > -1 || href.indexOf("shuffle") > -1) {
+    bgClass = altHighlight ? "rgb(96, 165, 250, 0.25)" : "";
   }
   const renderDefaultCell = (value: string) => {
     return <Typography variant="h6">{value}</Typography>;

frontend/src/components/AltsTable/SortableHeaderCell.tsx

@@ -1,18 +1,18 @@
-import { TableCell } from '@mui/material';
-import ArrowUpwardOutlinedIcon from '@mui/icons-material/ArrowUpwardOutlined';
-import ArrowDownwardOutlinedIcon from '@mui/icons-material/ArrowDownwardOutlined';
+import { TableCell } from "@mui/material";
+import ArrowUpwardOutlinedIcon from "@mui/icons-material/ArrowUpwardOutlined";
+import ArrowDownwardOutlinedIcon from "@mui/icons-material/ArrowDownwardOutlined";
 
-import type { ITableColumn } from '@/types';
+import type { TableColumn } from "@/types";
 
 interface IProps {
-  column: ITableColumn;
-  onSort: (field: string, sort: 'asc' | 'desc') => void;
-  sort: { field: string; sort: 'asc' | 'desc' };
+  column: TableColumn;
+  onSort: (field: string, sort: "asc" | "desc") => void;
+  sort: { field: string; sort: "asc" | "desc" };
   sortable: boolean;
 }
 
 const HeaderCell = ({ column, onSort, sort, sortable }: IProps) => {
-  const { align = 'left', field, label } = column;
+  const { align = "left", field, label } = column;
   const renderButtonHover = () => {
     return (
       <ArrowDownwardOutlinedIcon
@@ -26,14 +26,20 @@ const HeaderCell = ({ column, onSort, sort, sortable }: IProps) => {
     if (!sortByField) return renderButtonHover();
 
     const ArrowIcon =
-      sortByField.sort === 'desc' ? ArrowDownwardOutlinedIcon : ArrowUpwardOutlinedIcon;
+      sortByField.sort === "desc"
+        ? ArrowDownwardOutlinedIcon
+        : ArrowUpwardOutlinedIcon;
     return <ArrowIcon fontSize="small" className="text-white" />;
   };
   return (
     <TableCell align={align} className="text-white">
       <div
         onClick={() =>
-          sortable && onSort(field, sort.field === field && sort.sort === 'desc' ? 'asc' : 'desc')
+          sortable &&
+          onSort(
+            field,
+            sort.field === field && sort.sort === "desc" ? "asc" : "desc"
+          )
         }
         className="group gap-2 flex items-center justify-center cursor-pointer text-base"
       >

frontend/src/components/AltsTable/index.tsx

@@ -14,7 +14,7 @@ import HeaderCell from "./HeaderCell";
 import Pagination from "./Pagination";
 import Row from "./Row";
 
-import type { IActivityRecord, ITableColumn } from "@/types";
+import type { CharacterAndDiff, TableColumn } from "@/types";
 
 const StyledTable = styled(TableMui)({
   "tbody tr:nth-of-type(odd)": {
@@ -27,14 +27,14 @@ const StyledTable = styled(TableMui)({
 
 interface IProps {
   loading?: boolean;
-  columns: ITableColumn[];
-  records: IActivityRecord[];
+  columns: TableColumn[];
+  records: CharacterAndDiff[];
   totalPages: number;
   pagination: boolean;
   page: number;
   onPageChange: (_: unknown, page: number) => void;
-  onRowOver: (record: IActivityRecord | null) => void;
-  diff: IActivityRecord | null;
+  onRowOver: (record: CharacterAndDiff | null) => void;
+  diff: CharacterAndDiff | null;
 }
 
 const Table = ({
@@ -49,7 +49,7 @@ const Table = ({
   diff,
 }: IProps) => {
   const rowsComponent = useMemo(() => {
-    function renderRow(record: IActivityRecord, index: number) {
+    function renderRow(record: CharacterAndDiff, index: number) {
       let shouldHighlight;
       let altHighlight;
       if (diff === record) {

frontend/src/components/DataTable/index.tsx

@@ -1,19 +1,22 @@
-import { useCallback, useEffect, useState } from 'react';
-import { useParams, useSearchParams } from 'react-router-dom';
-import { createBreakpoint } from 'react-use';
+import { useCallback, useEffect, useState } from "react";
+import { useParams, useSearchParams } from "react-router-dom";
+import { createBreakpoint } from "react-use";
 
-import Table from '@/components/AltsTable';
-import TableFilter from '@/components/TableFilter';
+import Table from "@/components/AltsTable";
+import TableFilter from "@/components/TableFilter";
 
-import getTableColumns from './useColumns';
-import { getLadder } from '@/services/stats.service';
-import {getActivityFromUrl, getBracket, getRegion} from '@/utils/urlparts';
+import getTableColumns from "./useColumns";
+import { getLadder } from "@/services/stats.service";
+import { getActivityFromUrl, getBracket, getRegion } from "@/utils/urlparts";
 
-import { BRACKETS } from '@/constants/pvp-activity';
-import type { IActivityRecord } from '@/types';
+import { BRACKETS } from "@/constants/pvp-activity";
+import type { CharacterAndDiff } from "@/types";
 
-export function getFromSearchParams(searchParams: URLSearchParams, name: string): string[] {
-  return searchParams?.get(name)?.split(',') || [];
+export function getFromSearchParams(
+  searchParams: URLSearchParams,
+  name: string
+): string[] {
+  return searchParams?.get(name)?.split(",") || [];
 }
 
 const useBreakpoint = createBreakpoint({ S: 758, L: 900, XL: 1280 });
@@ -28,12 +31,14 @@ const DataList = ({ data: statistics }: IProps) => {
   const [searchParams] = useSearchParams();
   const breakpoint = useBreakpoint();
 
-  const [data, setData] = useState<IActivityRecord[]>([]);
+  const [data, setData] = useState<CharacterAndDiff[]>([]);
   const [totalPages, setTotalPages] = useState(0);
   const [loading, setLoading] = useState(false);
   const [page, setPage] = useState(1);
-  const [selectedSpecs, setSelectedSpecs] = useState(getFromSearchParams(searchParams, 'specs'));
-  const [diff, setDiff] = useState<IActivityRecord | null>(null);
+  const [selectedSpecs, setSelectedSpecs] = useState(
+    getFromSearchParams(searchParams, "specs")
+  );
+  const [diff, setDiff] = useState<CharacterAndDiff | null>(null);
 
   function handlePageChange(_: unknown, value: number) {
     setPage(value);
@@ -59,7 +64,7 @@ const DataList = ({ data: statistics }: IProps) => {
   }, [page, region, activity, bracket, selectedSpecs]);
 
   const getColumns = useCallback(() => {
-    return getTableColumns(activity, breakpoint === 'S', region);
+    return getTableColumns(activity, breakpoint === "S", region);
   }, [activity, breakpoint, region]);
 
   return (

frontend/src/components/DataTable/useColumns.tsx

@@ -11,11 +11,11 @@ import {
   getRatingColor,
   getSeasonRankImageFromRating,
 } from "@/utils/table";
-import type { IActivityRecord } from "@/types";
+import type { CharacterAndDiff } from "@/types";
 import { nickNameLenOnMobile } from "@/utils/common";
 import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
 import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
-import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
+import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
 
 const getTableColumns = (
   activity: string,
@@ -25,16 +25,26 @@ const getTableColumns = (
   const rank = {
     field: "pos",
     label: "RANK",
-    render: ({ record }: { record: IActivityRecord }) => {
+    render: ({ record }: { record: CharacterAndDiff }) => {
       const pos = record?.character?.pos || record?.pos;
       var rankDiff = record?.diff?.rank_diff;
-      var arrow
+      var arrow;
       if (rankDiff <= 0) {
-        arrow = <ArrowUpwardIcon className="w-4 h-4" style={{ color: getRankDiffColor(rankDiff) }} />
+        arrow = (
+          <ArrowUpwardIcon
+            className="w-4 h-4"
+            style={{ color: getRankDiffColor(rankDiff) }}
+          />
+        );
       } else {
-        arrow = <ArrowDownwardIcon className="w-4 h-4" style={{ color: getRankDiffColor(rankDiff) }} />
+        arrow = (
+          <ArrowDownwardIcon
+            className="w-4 h-4"
+            style={{ color: getRankDiffColor(rankDiff) }}
+          />
+        );
       }
-      var unsignRankDiff = Math.abs(rankDiff)
+      var unsignRankDiff = Math.abs(rankDiff);
       return (
         <div className="flex">
           {isMobile && (
@@ -64,7 +74,7 @@ const getTableColumns = (
   const details = {
     field: "details",
     label: isMobile ? "DTLS" : "DETAILS",
-    render: ({ record }: { record: IActivityRecord }) => {
+    render: ({ record }: { record: CharacterAndDiff }) => {
       const wowClass = record?.character?.class || record?.class;
       const wowSpec = record?.character?.full_spec || record?.full_spec;
       const wowRace = record?.character?.race || record?.race;
@@ -102,7 +112,7 @@ const getTableColumns = (
   const name = {
     field: "name",
     label: "NAME",
-    render: ({ record }: { record: IActivityRecord }) => {
+    render: ({ record }: { record: CharacterAndDiff }) => {
       const wowClass = record?.character?.class || record?.class;
       const url = getProfileUrl(record, region);
 
@@ -127,7 +137,7 @@ const getTableColumns = (
   const realm = {
     field: "realm",
     label: "REALM",
-    render: ({ record }: { record: IActivityRecord }) => {
+    render: ({ record }: { record: CharacterAndDiff }) => {
       const fraction = record?.character?.fraction || record?.fraction;
       const realm = record?.character?.realm || record?.realm;
 
@@ -142,7 +152,7 @@ const getTableColumns = (
   const wonLost = {
     field: "stats",
     label: isMobile ? "W/L" : "WON / LOST",
-    render: ({ record }: { record: IActivityRecord }) => {
+    render: ({ record }: { record: CharacterAndDiff }) => {
       const winRate = getWinRate(record.wins, record.losses);
 
       const won = record?.diff?.won ?? record?.wins;
@@ -176,7 +186,7 @@ const getTableColumns = (
   const rating = {
     field: "rating",
     label: "RATING",
-    render: ({ record }: { record: IActivityRecord }) => {
+    render: ({ record }: { record: CharacterAndDiff }) => {
       const rating = record?.character?.rating ?? record?.rating;
       const ratingColor = getRatingColor(
         record?.character?.in_cutoff ?? record?.in_cutoff
@@ -221,7 +231,7 @@ const getTableColumns = (
   const lastSeenColumn = {
     field: "lastSeen",
     label: isMobile ? "LS" : "LAST SEEN",
-    render: ({ record }: { record: IActivityRecord }) => {
+    render: ({ record }: { record: CharacterAndDiff }) => {
       if (!record?.diff?.last_seen) return <></>;
       const split = record.diff.last_seen.split(" ");
       const content = isMobile

frontend/src/containers/Meta/Grid/columnGroup.tsx

@@ -1,7 +1,7 @@
 import { LinearProgress, Tooltip } from "@mui/material";
 import { getClassNameColor, getSpecIcon } from "@/utils/table";
 
-import type { IMetaSpec, IMetaSpecSizing, IMeta } from "@/types";
+import type { MetaSpec, MetaSpecSizing, Meta } from "@/types";
 import type {
   GridAlignment,
   GridColDef,
@@ -84,13 +84,13 @@ export function specNameColumn(isMobile: boolean): GridColDef {
 }
 
 export function getColumnGroup(
-  data: null | IMeta,
+  data: null | Meta,
   field: string,
   rankIcons: string[],
   wh: number
 ): { columns: GridColDef<GridValidRowModel>[]; columnGroup: GridColumnGroup } {
-  const popularity = `${field}_presence` as keyof IMetaSpec;
-  const winrate = `${field}_win_rate` as keyof IMetaSpec;
+  const popularity = `${field}_presence` as keyof MetaSpec;
+  const winrate = `${field}_win_rate` as keyof MetaSpec;
 
   let maxPopularity = 0;
   let maxWr = 0;
@@ -107,9 +107,9 @@ export function getColumnGroup(
   let to = 3000;
   if (data?.specs_sizing) {
     charCount =
-      data.specs_sizing[`${field}_total` as keyof IMetaSpecSizing] || 0;
-    from = data.specs_sizing[`${field}_min` as keyof IMetaSpecSizing] || 0;
-    to = data.specs_sizing[`${field}_max` as keyof IMetaSpecSizing] || 0;
+      data.specs_sizing[`${field}_total` as keyof MetaSpecSizing] || 0;
+    from = data.specs_sizing[`${field}_min` as keyof MetaSpecSizing] || 0;
+    to = data.specs_sizing[`${field}_max` as keyof MetaSpecSizing] || 0;
 
     columnTitle = `Based on ${charCount} characters between ${from} and ${to} rating`;
   }
@@ -123,8 +123,6 @@ export function getColumnGroup(
   const topText = `Based on ${charCount} characters`;
   const bottomText = `From ${from} to ${to} rating`;
 
-
-
   const columnGroup = {
     groupId: field,
     children: [{ field: popularity }, { field: winrate }],
@@ -142,14 +140,10 @@ export function getColumnGroup(
             ))}
           </div>
           {/* Text on top  */}
-          { wh > 1600 && (
+          {wh > 1600 && (
             <div className="flex flex-col items-center">
-              <p className="text-sm font-mono ">
-                {topText}
-              </p>
-              <p className="text-sm font-mono ">
-                {bottomText}
-              </p>
+              <p className="text-sm font-mono ">{topText}</p>
+              <p className="text-sm font-mono ">{bottomText}</p>
             </div>
           )}
         </div>