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

46
frontend/src/components/today/TodayDonutChart.tsx
View File

@@ -3,6 +3,7 @@
import type { CSSProperties } from 'react';
import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from 'recharts';
import type { TodayChartBucket } from '@/types/today';
import { TodayChartFrame } from '@/components/today/TodayChartFrame';
import {
TODAY_CHART_COLORS,
TODAY_CHART_TOOLTIP_STYLE,
@@ -44,8 +45,9 @@ export function TodayDonutChart({
const outerRadius = sideLegend ? 100 : 92;
const chart = (
<ResponsiveContainer width="100%" height={240}>
<PieChart margin={{ top: 0, right: 0, bottom: 0, left: 0 }}>
<TodayChartFrame>
<ResponsiveContainer width="100%" height="100%">
<PieChart margin={{ top: 0, right: 0, bottom: 0, left: 0 }}>
<Pie
data={chartData}
dataKey="count"
@@ -69,7 +71,8 @@ export function TodayDonutChart({
}}
/>
</PieChart>
</ResponsiveContainer>
</ResponsiveContainer>
</TodayChartFrame>
);
if (!sideLegend) {
@@ -80,9 +83,9 @@ export function TodayDonutChart({
const legendInset = 'px-12';
return (
<div className={`flex h-full min-h-[220px] items-center ${legendInset}`}>
<div className="flex min-w-0 flex-1 items-center overflow-y-auto max-h-full py-0.5">
<div className="flex flex-col items-start gap-1.5 shrink-0">
<div className={`flex h-full min-h-0 items-center overflow-hidden ${legendInset}`}>
<div className="flex min-h-0 min-w-0 flex-1 items-center overflow-hidden py-0.5">
<div className="flex max-h-full min-w-0 flex-col items-start gap-1.5 overflow-y-auto">
{chartData.map((entry, index) => (
<span key={entry.code} className={rowClass}>
<span
@@ -94,7 +97,7 @@ export function TodayDonutChart({
))}
</div>
<div className="ml-2 flex flex-col items-start gap-1.5">
<div className="ml-2 flex min-w-0 flex-col items-start gap-1.5 overflow-hidden">
{chartData.map((entry) => (
<span
key={entry.code}
@@ -117,8 +120,33 @@ export function TodayDonutChart({
</div>
</div>
<div className="ml-4 flex h-[240px] w-[min(100%,220px)] max-w-[48%] shrink-0 items-center justify-center">
{chart}
<div className="ml-4 flex h-full min-h-0 w-[min(100%,220px)] max-w-[48%] shrink-0 items-center justify-center">
<ResponsiveContainer width="100%" height="100%">
<PieChart margin={{ top: 0, right: 0, bottom: 0, left: 0 }}>
<Pie
data={chartData}
dataKey="count"
nameKey="displayLabel"
cx="50%"
cy="50%"
innerRadius={innerRadius}
outerRadius={outerRadius}
paddingAngle={variant === 'pie' ? 1 : 2}
stroke="transparent"
>
{chartData.map((entry, index) => (
<Cell key={entry.code} fill={resolveColor(entry.code, index)} />
))}
</Pie>
<Tooltip
contentStyle={TODAY_CHART_TOOLTIP_STYLE}
formatter={(value, _name, item) => {
const row = item?.payload as TodayChartBucket | undefined;
return [value, row ? labelForCode(row.code) : ''];
}}
/>
</PieChart>
</ResponsiveContainer>
</div>
</div>
);