admin/dyolink
0
0
Fork 0
Code Issues 24 Pull Requests 1 Actions Packages Projects 1 Releases Wiki Activity

Positioning, sizing and sorting of the gadgets improved.

Browse Source
This commit is contained in:
Admin
2026-07-11 22:32:37 +03:30
parent ed8ff61205
commit 83f6003a2b
35 changed files with 1615 additions and 678 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
frontend/src/components/today/TodayHorizontalBarChart.tsx
View File

@@ -10,6 +10,7 @@ import {
XAxis,
YAxis,
} from 'recharts';
import { TodayChartFrame } from '@/components/today/TodayChartFrame';
import type { TodayChartBucket } from '@/types/today';
import {
TODAY_CHART_AXIS_COLOR,
@@ -29,46 +30,48 @@ export function TodayHorizontalBarChart({ data }: TodayHorizontalBarChartProps)
}));
return (
<ResponsiveContainer width="100%" height={Math.max(220, chartData.length * 36)}>
<BarChart
data={chartData}
layout="vertical"
margin={{ top: 4, right: 12, left: 4, bottom: 0 }}
>
<CartesianGrid stroke={TODAY_CHART_GRID_COLOR} horizontal={false} />
<XAxis
type="number"
allowDecimals={false}
tick={{ fill: TODAY_CHART_AXIS_COLOR, fontSize: 11 }}
axisLine={{ stroke: TODAY_CHART_GRID_COLOR }}
tickLine={false}
/>
<YAxis
type="category"
dataKey="shortLabel"
width={96}
tick={{ fill: TODAY_CHART_AXIS_COLOR, fontSize: 11 }}
axisLine={false}
tickLine={false}
/>
<Tooltip
cursor={{ fill: 'rgba(0, 188, 255, 0.08)' }}
contentStyle={TODAY_CHART_TOOLTIP_STYLE}
labelFormatter={(_, payload) => {
const row = payload?.[0]?.payload as TodayChartBucket | undefined;
return row?.label ?? '';
}}
/>
<Bar dataKey="count" radius={[0, 4, 4, 0]} maxBarSize={28}>
{chartData.map((entry, index) => (
<Cell
key={entry.code}
fill={TODAY_CHART_COLORS[index % TODAY_CHART_COLORS.length]}
/>
))}
</Bar>
</BarChart>
</ResponsiveContainer>
<TodayChartFrame>
<ResponsiveContainer width="100%" height="100%">
<BarChart
data={chartData}
layout="vertical"
margin={{ top: 4, right: 12, left: 4, bottom: 4 }}
>
<CartesianGrid stroke={TODAY_CHART_GRID_COLOR} horizontal={false} />
<XAxis
type="number"
allowDecimals={false}
tick={{ fill: TODAY_CHART_AXIS_COLOR, fontSize: 11 }}
axisLine={{ stroke: TODAY_CHART_GRID_COLOR }}
tickLine={false}
/>
<YAxis
type="category"
dataKey="shortLabel"
width={96}
tick={{ fill: TODAY_CHART_AXIS_COLOR, fontSize: 11 }}
axisLine={false}
tickLine={false}
/>
<Tooltip
cursor={{ fill: 'rgba(0, 188, 255, 0.08)' }}
contentStyle={TODAY_CHART_TOOLTIP_STYLE}
labelFormatter={(_, payload) => {
const row = payload?.[0]?.payload as TodayChartBucket | undefined;
return row?.label ?? '';
}}
/>
<Bar dataKey="count" radius={[0, 4, 4, 0]} maxBarSize={28}>
{chartData.map((entry, index) => (
<Cell
key={entry.code}
fill={TODAY_CHART_COLORS[index % TODAY_CHART_COLORS.length]}
/>
))}
</Bar>
</BarChart>
</ResponsiveContainer>
</TodayChartFrame>
);
}