Skip to content

Commit 894c87b

Browse files
tudddorrrtudddorrr
authored
Merge pull request #471 from TaloDev/develop
Release 0.69.2
2 parents 45e05f2 + 0ca659f commit 894c87b

File tree

8 files changed

+104
-38
lines changed

8 files changed

+104
-38
lines changed

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@
8181
"lint-staged": {
8282
"*.{ts,js,tsx,jsx}": "eslint --fix"
8383
},
84-
"version": "0.69.1",
84+
"version": "0.69.2",
8585
"engines": {
8686
"node": "24.x"
8787
},

‎src/components/charts/BarChartCard.tsx‎

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { get } from 'lodash-es'
12
import { ReactElement } from 'react'
23
import { Bar, BarChart, CartesianGrid, Tooltip, XAxis, YAxis } from 'recharts'
34
import ChartTick from './ChartTick'
@@ -7,6 +8,7 @@ import { TimePeriod } from '../../utils/useTimePeriod'
78
import { LabelledTimePeriod } from '../TimePeriodPicker'
89
import { DataKey } from 'recharts/types/util/types'
910
import { ChartCard } from './ChartCard'
11+
import { useYAxis } from './useYAxis'
1012

1113
export type BarChartCardBar<T> = {
1214
dataKey: DataKey<T>
@@ -37,6 +39,21 @@ export function BarChartCard<T>({
3739
height = 300,
3840
tooltip
3941
}: BarChartCardProps<T>) {
42+
const { yAxisProps } = useYAxis({
43+
data,
44+
transformer: (d) => {
45+
return d.flatMap((item) =>
46+
bars.map((bar) => {
47+
if (typeof bar.dataKey === 'function') {
48+
return bar.dataKey(item)
49+
}
50+
const value = get(item, String(bar.dataKey))
51+
return typeof value === 'number' ? value : 0
52+
})
53+
)
54+
}
55+
})
56+
4057
return (
4158
<ChartCard
4259
title={title}
@@ -45,8 +62,9 @@ export function BarChartCard<T>({
4562
timePeriod={timePeriod}
4663
onTimePeriodChange={onTimePeriodChange}
4764
height={height}
65+
hasData={data.length > 0}
4866
>
49-
<BarChart data={data} margin={{ bottom: 20, left: 10, top: 10 }}>
67+
<BarChart data={data} margin={{ top: 8, left: 16, bottom: 20, right: 8 }}>
5068
<CartesianGrid strokeDasharray='4' stroke='#444' vertical={false} />
5169

5270
<XAxis
@@ -60,15 +78,7 @@ export function BarChartCard<T>({
6078
)}
6179
/>
6280

63-
<YAxis
64-
allowDecimals={false}
65-
tick={(
66-
<ChartTick
67-
transform={(x, y) => `translate(${x! - 4},${y! - 12})`}
68-
formatter={(tick) => tick.toLocaleString()}
69-
/>
70-
)}
71-
/>
81+
<YAxis {...yAxisProps} />
7282

7383
<Tooltip
7484
content={tooltip}

‎src/components/charts/ChartCard.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ type ChartCardProps = {
1414
timePeriod?: TimePeriod | null
1515
onTimePeriodChange?: (period: LabelledTimePeriod) => void
1616
height?: number
17+
hasData?: boolean
1718
children: ReactElement
1819
}
1920

@@ -24,10 +25,11 @@ export function ChartCard({
2425
timePeriod,
2526
onTimePeriodChange,
2627
height = 300,
28+
hasData = true,
2729
children
2830
}: ChartCardProps) {
2931
return (
30-
<div className='hidden md:block border-2 border-gray-700 rounded bg-black space-y-8 p-4'>
32+
<div className='hidden md:block border-2 border-gray-700 rounded bg-black space-y-4 p-4'>
3133
<div className='flex items-start justify-between'>
3234
<div className='flex gap-4'>
3335
<h2 className='text-xl'>{title}</h2>
@@ -48,7 +50,11 @@ export function ChartCard({
4850

4951
{error?.hasKeys === false && <ErrorMessage error={error} />}
5052

51-
{!loading &&
53+
{!hasData && !loading &&
54+
<p className='-mt-4'>No data for this date range</p>
55+
}
56+
57+
{hasData && !loading &&
5258
<ResponsiveContainer height={height}>
5359
{children}
5460
</ResponsiveContainer>

‎src/components/charts/StatGlobalValueChart.tsx‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { CartesianGrid, Line, LineChart, Tooltip, XAxis, YAxis } from 'recharts'
77
import ChartTick from './ChartTick'
88
import { format } from 'date-fns'
99
import clsx from 'clsx'
10+
import { useYAxis } from './useYAxis'
1011

1112
type StatGlobalValueChartProps = {
1213
internalName: string
@@ -24,35 +25,32 @@ export function StatGlobalValueChart({ internalName, startDate, endDate }: StatG
2425
endDate
2526
)
2627

28+
const { yAxisProps } = useYAxis({
29+
data: dataPoints,
30+
transformer: (d) => d.map((point) => point.value)
31+
})
32+
2733
return (
2834
<ChartCard
2935
title='Global value'
3036
loading={loading}
3137
error={error}
3238
>
33-
<LineChart data={dataPoints} margin={{ bottom: 20, left: 10, top: 10 }}>
39+
<LineChart data={dataPoints} margin={{ top: 8, left: 16, bottom: 20, right: 8 }}>
3440
<CartesianGrid strokeDasharray='4' stroke='#444' vertical={false} />
3541

3642
<XAxis
3743
dataKey='date'
3844
type='category'
3945
tick={(
4046
<ChartTick
41-
transform={(x, y) => `translate(${x},${y}) rotate(-30)`}
47+
transform={(x, y) => `translate(${x},${y}) rotate(-15)`}
4248
formatter={(tick) => format(new Date(tick), 'd MMM')}
4349
/>
4450
)}
4551
/>
4652

47-
<YAxis
48-
allowDecimals={false}
49-
tick={(
50-
<ChartTick
51-
transform={(x, y) => `translate(${x! - 4},${y! - 12})`}
52-
formatter={(tick) => tick.toLocaleString()}
53-
/>
54-
)}
55-
/>
53+
<YAxis {...yAxisProps} />
5654

5755
<Tooltip
5856
content={(

‎src/components/charts/useYAxis.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { useMemo } from 'react'
2+
import { YAxis } from 'recharts'
3+
import ChartTick from './ChartTick'
4+
5+
const pxPerChar = 8
6+
7+
export function useYAxisWidth<T>({
8+
data,
9+
transformer
10+
}: {
11+
data: T[]
12+
transformer: (d: T[]) => number[]
13+
}) {
14+
const yAxisWidth = useMemo(() => {
15+
const maxValue = Math.max(...transformer(data), 0)
16+
return maxValue.toLocaleString().length * pxPerChar
17+
}, [data, transformer])
18+
19+
return {
20+
yAxisWidth
21+
}
22+
}
23+
24+
export function useYAxis<T>({
25+
data,
26+
transformer
27+
}: {
28+
data: T[]
29+
transformer: (d: T[]) => number[]
30+
}) {
31+
const { yAxisWidth } = useYAxisWidth({
32+
data,
33+
transformer
34+
})
35+
36+
const tickComponent = useMemo(() => {
37+
return (
38+
<ChartTick
39+
transform={(x, y) => {
40+
if (!x || !y) return ''
41+
return `translate(${x - 2},${y - 12})`
42+
}}
43+
formatter={(tick) => tick.toLocaleString()}
44+
/>
45+
)
46+
}, [])
47+
48+
return {
49+
yAxisProps: {
50+
allowDecimals: false,
51+
width: yAxisWidth,
52+
tick: tickComponent
53+
} as React.ComponentProps<typeof YAxis>
54+
}
55+
}

‎src/components/events/EventsDisplay.tsx‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import ErrorMessage from '../../components/ErrorMessage'
22
import { CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'
3+
import { useYAxis } from '../charts/useYAxis'
34
import { EventChartTooltip } from '../charts/EventChartTooltip'
45
import ChartTick from '../../components/charts/ChartTick'
56
import { format } from 'date-fns'
@@ -32,6 +33,11 @@ export default function EventsDisplay({
3233
}: Props) {
3334
const { selectedEventNames } = useEventsContext()
3435

36+
const { yAxisProps } = useYAxis({
37+
data: Object.values(events ?? {}),
38+
transformer: (d) => d.flat().map((item) => item.count)
39+
})
40+
3541
const getEventCount = useCallback((eventNames: string[]): string => {
3642
if (!events) return '0'
3743

@@ -57,7 +63,7 @@ export default function EventsDisplay({
5763
<div className='flex border-2 border-gray-700 rounded bg-black overflow-x-scroll'>
5864
<div className='pt-4 pl-4 pb-4 w-full'>
5965
<ResponsiveContainer height={600}>
60-
<LineChart margin={{ top: 20, bottom: 20, right: 10 }}>
66+
<LineChart margin={{ top: 8, left: 16, bottom: 20, right: 8 }}>
6167
<CartesianGrid strokeDasharray='4' stroke='#444' vertical={false} />
6268

6369
<XAxis
@@ -78,14 +84,7 @@ export default function EventsDisplay({
7884

7985
<YAxis
8086
dataKey='count'
81-
width={30}
82-
allowDecimals={false}
83-
tick={(
84-
<ChartTick
85-
transform={(x, y) => `translate(${x! - 4},${y! - 12})`}
86-
formatter={(tick) => tick.toLocaleString()}
87-
/>
88-
)}
87+
{...yAxisProps}
8988
/>
9089

9190
{selectedEventNames.length > 0 && <Tooltip content={<EventChartTooltip />} />}

‎src/pages/Players.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,7 @@ export default function Players() {
3333

3434
return (
3535
<Page title='Players' isLoading={loading} showBackButton={Boolean(initialSearch)}>
36-
{players.length > 0 &&
37-
<NewPlayersChart />
38-
}
36+
<NewPlayersChart />
3937

4038
{(players.length > 0 || debouncedSearch.length > 0) &&
4139
<div className='flex items-center'>

0 commit comments

Comments
 (0)