diff --git a/src/commands/evolution.tsx b/src/commands/evolution.tsx index 62123fa81..020c60fd5 100644 --- a/src/commands/evolution.tsx +++ b/src/commands/evolution.tsx @@ -20,7 +20,7 @@ import { AccountInfo } from '../types/accountInfo.js'; export default { inProduction: true, - inDevelopment: false, + inDevelopment: true, inPublic: true, command: addStatTypeSubCommandGroups( diff --git a/src/commands/stats.tsx b/src/commands/stats.tsx index 4f29fbda2..2c92ae620 100644 --- a/src/commands/stats.tsx +++ b/src/commands/stats.tsx @@ -20,7 +20,7 @@ import { AccountInfo } from '../types/accountInfo.js'; export default { inProduction: true, - inDevelopment: true, + inDevelopment: false, inPublic: true, command: addStatTypeSubCommandGroups( diff --git a/src/components/Graph/components/Line.tsx b/src/components/Graph/components/Line.tsx index f4b527769..3c170eead 100644 --- a/src/components/Graph/components/Line.tsx +++ b/src/components/Graph/components/Line.tsx @@ -1,16 +1,18 @@ -import { blue, green, red } from '@radix-ui/colors'; +import { blue, green, red, slateDark } from '@radix-ui/colors'; import { GRAPH_HEIGHT, GRAPH_WIDTH } from './Root.js'; export enum LineColor { Red, Green, Blue, + White, } const LINE_COLORS = { [LineColor.Red]: red.red9, [LineColor.Green]: green.green9, [LineColor.Blue]: blue.blue9, + [LineColor.White]: slateDark.slate11, }; export enum LineStyle { diff --git a/src/components/Graph/components/VerticalMargin.tsx b/src/components/Graph/components/Margin.tsx similarity index 54% rename from src/components/Graph/components/VerticalMargin.tsx rename to src/components/Graph/components/Margin.tsx index 6edd08837..f27275550 100644 --- a/src/components/Graph/components/VerticalMargin.tsx +++ b/src/components/Graph/components/Margin.tsx @@ -1,32 +1,34 @@ import { times } from 'lodash'; import { theme } from '../../../stitches.config.js'; -import { MarginProps } from './Root.js'; +import { MarginProps as RootMarginProps } from './Root.js'; -export enum VerticalMarginAlign { - Left, - Right, +export enum MarginOrientation { + Vertical, + Horizontal, } -export interface VerticalMarginProps extends MarginProps { +export interface MarginProps extends RootMarginProps { verticalSeparations: number; - align?: VerticalMarginAlign; + orientation?: MarginOrientation; } -export function VerticalMargin({ +export function Margin({ verticalSeparations, max, min, suffix, - align = VerticalMarginAlign.Left, -}: VerticalMarginProps) { + precision = 0, + orientation = MarginOrientation.Vertical, +}: MarginProps) { + const isVertical = orientation === MarginOrientation.Vertical; + return (
@@ -43,7 +45,7 @@ export function VerticalMargin({ ((verticalSeparations - (index + 1)) / (verticalSeparations - 1)) + min - ).toFixed(0)}${suffix ?? ''}`} + ).toFixed(precision)}${suffix ?? ''}`} ))}
diff --git a/src/components/Graph/components/Root.tsx b/src/components/Graph/components/Root.tsx index dc68b133e..a8761d905 100644 --- a/src/components/Graph/components/Root.tsx +++ b/src/components/Graph/components/Root.tsx @@ -1,42 +1,55 @@ import { times } from 'lodash'; import { ReactNode } from 'react'; import { theme } from '../../../stitches.config.js'; -import { VerticalMargin, VerticalMarginAlign } from './VerticalMargin.js'; +import { Margin, MarginOrientation } from './Margin.js'; -export const GRAPH_WIDTH = 512; +export const GRAPH_WIDTH = 544; export const GRAPH_HEIGHT = 320; export interface MarginProps { min: number; max: number; suffix?: string; + precision?: number; } export interface RootProps { children: ReactNode; - leftVerticalMargin?: MarginProps; - rightVerticalMargin?: MarginProps; - verticalSeparations?: number; + verticalMargin?: MarginProps; + horizontalMargin?: MarginProps; + separations?: number; xMinLabel: string; xMaxLabel: string; } export function Root({ children, - leftVerticalMargin, - rightVerticalMargin, - verticalSeparations = 5, + verticalMargin, + horizontalMargin, + separations = 5, xMinLabel, xMaxLabel, }: RootProps) { return (
+
+ + {xMinLabel} + + + {xMaxLabel} + +
+
- {leftVerticalMargin && ( - + {verticalMargin && ( + )} - {times(verticalSeparations - 2, (index) => { - const y = GRAPH_HEIGHT * ((index + 1) / (verticalSeparations - 1)); + {times(separations - 2, (index) => { + const y = GRAPH_HEIGHT * ((index + 1) / (separations - 1)); return ( - - {rightVerticalMargin && ( - - )}
-
- - {xMinLabel} - - - {xMaxLabel} - -
+ {horizontalMargin && ( + + )}
); } diff --git a/src/components/Graph/index.ts b/src/components/Graph/index.ts index bdb4bf3f9..eceb36006 100644 --- a/src/components/Graph/index.ts +++ b/src/components/Graph/index.ts @@ -1,3 +1,3 @@ export * from './components/Line.js'; +export * from './components/Margin.js'; export * from './components/Root.js'; -export * from './components/VerticalMargin.js'; diff --git a/src/renderers/evolution.tsx b/src/renderers/evolution.tsx index 1cce51f92..0ccac742f 100644 --- a/src/renderers/evolution.tsx +++ b/src/renderers/evolution.tsx @@ -61,24 +61,22 @@ export default async function evolution( }); } - const careerWinrate = histories.map( + const plot = histories.map( (history) => [ - history.last_battle_time, + history.all.battles, (history.all.wins / history.all.battles) * 100, ] as Graph.PlotItem, ); - const careerBattles = histories.map( - (history) => - [history.last_battle_time, history.all.battles] as Graph.PlotItem, - ); - const winrateYs = careerWinrate.map(([, y]) => y); - const maxWinrate = Math.max(...winrateYs); - const minWinrate = Math.min(...winrateYs); - const battleYs = careerBattles.map(([, y]) => y); - const maxBattle = Math.max(...battleYs); - const minBattle = Math.min(...battleYs); - const minTime = Math.min(...careerBattles.map(([x]) => x)); + const times = histories.map((history) => history.last_battle_time); + const minTime = Math.min(...times); + const maxTime = Math.max(...times); + const ys = plot.map(([, y]) => y); + const xs = plot.map(([x]) => x); + const maxY = Math.max(...ys); + const minY = Math.min(...ys); + const maxX = Math.max(...xs); + const minX = Math.min(...xs); const accountInfo = await getWargamingResponse( `https://api.wotblitz.${server}/wotb/account/info/?application_id=${WARGAMING_APPLICATION_ID}&account_id=${id}`, @@ -96,37 +94,33 @@ export default async function evolution( /> {/* goofy ahh bug forces me to call them as functions */} - {careerWinrate.length > 0 && ( + {plot.length > 0 && ( - {Graph.Line({ - // total battles - plot: careerBattles!, - color: Graph.LineColor.Blue, - })} {Graph.Line({ // career winrate - plot: careerWinrate!, - minY: minWinrate, - maxY: maxWinrate, + color: Graph.LineColor.Red, + plot: plot, + minY, + maxY, })} )} - {careerWinrate.length === 0 && ( - - )} + {plot.length === 0 && } diff --git a/src/routes/stats.tsx b/src/routes/stats.tsx index ccc329a80..3ce638a67 100644 --- a/src/routes/stats.tsx +++ b/src/routes/stats.tsx @@ -6,7 +6,7 @@ import { RouteRegistry } from '../server.js'; export default { route: '/stats/:type/:period', inProduction: true, - inDevelopment: true, + inDevelopment: false, async handler(req) { const type = req.params.type as StatType;