hamed/clinicpro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(charts): enhance TauriBarChart with overflow handling for dense months

Browse Source
This commit is contained in:
hamed
2026-07-18 22:04:23 +03:30
parent 4ce1b39a83
commit 466b649988
2 changed files with 35 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/admin/components/dashboard/TauriCharts.tsx
+10 -4
View File
@@ -65,7 +65,8 @@ function ChartFrame({
))}
</div>
{/* plot area */}
<div className="relative flex-1 min-w-0">
{/* overflow-hidden keeps a dense series (a 31-day month) inside the card */}
<div className="relative flex-1 min-w-0 overflow-hidden">
{ticks.map((_, i) => (
<div
key={i}
@@ -79,7 +80,7 @@ function ChartFrame({
{/* x-axis labels */}
<div className="flex pt-[8px]" style={{ paddingRight: yWidth, alignItems: 'flex-start' }}>
{labels.map((l, i) => (
<span key={i} className="flex-1 text-center text-[10px] font-normal text-[#7E7E7E] whitespace-nowrap">
<span key={i} className="flex-1 min-w-0 overflow-hidden text-center text-[10px] font-normal text-[#7E7E7E] whitespace-nowrap">
{l}
</span>
))}
@@ -98,12 +99,17 @@ export function TauriBarChart({ data }: { data: ChartPoint[] }) {
const top = ticks[0] || 1;
return (
<ChartFrame ticks={ticks} labels={data.map((d) => d.label)} yWidth={42}>
{/* `min-w-0` on every column is required: without it each column's
intrinsic min-width is the bar's own width, so a 31-day month sums to
more than the plot width and the whole row overflows out of the card.
The bar is therefore a fraction of its column (which leaves the gap
between bars) and only capped at the source's 24px. */}
<div className="absolute inset-0 flex items-stretch" style={{ alignItems: 'stretch' }}>
{data.map((d, i) => (
<div key={i} className="flex-1 flex items-end justify-center" style={{ alignItems: 'flex-end' }}>
<div key={i} className="flex-1 min-w-0 flex items-end justify-center" style={{ alignItems: 'flex-end' }}>
<div
title={faNum.format(d.value)}
className="w-[24px] max-w-[30%] rounded-t-[3px] bg-[#5559CE]"
className="w-[60%] max-w-[24px] rounded-t-[3px] bg-[#5559CE]"
style={{
height: `${(d.value / top) * 100}%`,
minHeight: d.value > 0 ? 4 : 0,