fahed/hihala-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add % toggle to channel performance, default events and channel to pie chart
All checks were successful
Deploy HiHala Dashboard / deploy (push) Successful in 8s
Details

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
fahed
2026-04-07 13:14:17 +03:00
parent ebdf90c8ab
commit 0a80103cfc
1 changed files with 58 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/components/Dashboard.tsx
View File

@@ -80,8 +80,9 @@ function Dashboard({ data, seasons, userRole, showDataLabels, setShowDataLabels,
const [trendGranularity, setTrendGranularity] = useState('week');
const [selectedSeason, setSelectedSeason] = useState<string>('');
const [eventMetric, setEventMetric] = useState<'visitors' | 'revenue'>('revenue');
const [eventChartType, setEventChartType] = useState<'bar' | 'pie'>('bar');
const [channelChartType, setChannelChartType] = useState<'bar' | 'pie'>('bar');
const [eventChartType, setEventChartType] = useState<'bar' | 'pie'>('pie');
const [channelChartType, setChannelChartType] = useState<'bar' | 'pie'>('pie');
const [channelDisplayMode, setChannelDisplayMode] = useState<'absolute' | 'percent'>('absolute');
const filteredData = useMemo(() => filterData(data, filters), [data, filters]);
@@ -253,6 +254,16 @@ function Dashboard({ data, seasons, userRole, showDataLabels, setShowDataLabels,
};
}, [seasonFilteredData, includeVAT]);
const channelChartData = useMemo(() => {
if (channelDisplayMode === 'absolute') return channelData;
const total = channelData.datasets[0].data.reduce((s: number, v: number) => s + v, 0);
if (total === 0) return channelData;
return {
...channelData,
datasets: [{ ...channelData.datasets[0], data: channelData.datasets[0].data.map((v: number) => parseFloat(((v / total) * 100).toFixed(1))) }]
};
}, [channelData, channelDisplayMode]);
// District data
const districtData = useMemo(() => {
const grouped = groupByDistrict(seasonFilteredData, includeVAT);
@@ -650,15 +661,35 @@ function Dashboard({ data, seasons, userRole, showDataLabels, setShowDataLabels,
title={t('dashboard.channelPerformance')}
className="chart-container"
controls={
<div className="toggle-switch">
<button className={channelChartType === 'bar' ? 'active' : ''} onClick={() => setChannelChartType('bar')}>{t('metrics.bar')}</button>
<button className={channelChartType === 'pie' ? 'active' : ''} onClick={() => setChannelChartType('pie')}>{t('metrics.pie')}</button>
<div style={{ display: 'flex', gap: '6px' }}>
<div className="toggle-switch">
<button className={channelChartType === 'bar' ? 'active' : ''} onClick={() => setChannelChartType('bar')}>{t('metrics.bar')}</button>
<button className={channelChartType === 'pie' ? 'active' : ''} onClick={() => setChannelChartType('pie')}>{t('metrics.pie')}</button>
</div>
<div className="toggle-switch">
<button className={channelDisplayMode === 'absolute' ? 'active' : ''} onClick={() => setChannelDisplayMode('absolute')}>#</button>
<button className={channelDisplayMode === 'percent' ? 'active' : ''} onClick={() => setChannelDisplayMode('percent')}>%</button>
</div>
</div>
}
>
{channelChartType === 'bar'
? <Bar data={channelData} options={{...baseOptions, indexAxis: 'y'}} />
: <Pie data={channelData} options={pieOptions} />
? <Bar data={channelChartData} options={{
...baseOptions,
indexAxis: 'y',
plugins: { ...baseOptions.plugins, datalabels: { ...baseOptions.plugins.datalabels, formatter: (v: number) => channelDisplayMode === 'percent' ? v.toFixed(1) + '%' : baseOptions.plugins.datalabels.formatter(v, {} as any) } },
scales: { ...baseOptions.scales, x: { ...baseOptions.scales.x, ticks: { ...baseOptions.scales.x.ticks, callback: (v: number | string) => channelDisplayMode === 'percent' ? v + '%' : v } } }
}} />
: <Pie data={channelChartData} options={{
...pieOptions,
plugins: {
...pieOptions.plugins,
datalabels: channelDisplayMode === 'percent'
? { display: true, color: '#fff', font: { size: 11, weight: 'bold' as const }, formatter: (v: number) => v > 3 ? v.toFixed(1) + '%' : '' }
: { display: false },
tooltip: { ...pieOptions.plugins.tooltip, callbacks: { label: (ctx: any) => channelDisplayMode === 'percent' ? ` ${ctx.parsed.toFixed(1)}%` : ` ${formatCurrency(ctx.parsed)}` } }
}
}} />
}
</ExportableChart>
</div>
@@ -767,14 +798,29 @@ function Dashboard({ data, seasons, userRole, showDataLabels, setShowDataLabels,
<div className="carousel-slide">
<div className="chart-card">
<h2>{t('dashboard.channelPerformance')}</h2>
<div className="toggle-switch" style={{ marginBottom: '8px' }}>
<button className={channelChartType === 'bar' ? 'active' : ''} onClick={() => setChannelChartType('bar')}>{t('metrics.bar')}</button>
<button className={channelChartType === 'pie' ? 'active' : ''} onClick={() => setChannelChartType('pie')}>{t('metrics.pie')}</button>
<div style={{ display: 'flex', gap: '6px', marginBottom: '8px' }}>
<div className="toggle-switch">
<button className={channelChartType === 'bar' ? 'active' : ''} onClick={() => setChannelChartType('bar')}>{t('metrics.bar')}</button>
<button className={channelChartType === 'pie' ? 'active' : ''} onClick={() => setChannelChartType('pie')}>{t('metrics.pie')}</button>
</div>
<div className="toggle-switch">
<button className={channelDisplayMode === 'absolute' ? 'active' : ''} onClick={() => setChannelDisplayMode('absolute')}>#</button>
<button className={channelDisplayMode === 'percent' ? 'active' : ''} onClick={() => setChannelDisplayMode('percent')}>%</button>
</div>
</div>
<div className="chart-container">
{channelChartType === 'bar'
? <Bar data={channelData} options={{...baseOptions, indexAxis: 'y'}} />
: <Pie data={channelData} options={pieOptions} />
? <Bar data={channelChartData} options={{...baseOptions, indexAxis: 'y'}} />
: <Pie data={channelChartData} options={{
...pieOptions,
plugins: {
...pieOptions.plugins,
datalabels: channelDisplayMode === 'percent'
? { display: true, color: '#fff', font: { size: 11, weight: 'bold' as const }, formatter: (v: number) => v > 3 ? v.toFixed(1) + '%' : '' }
: { display: false },
tooltip: { ...pieOptions.plugins.tooltip, callbacks: { label: (ctx: any) => channelDisplayMode === 'percent' ? ` ${ctx.parsed.toFixed(1)}%` : ` ${formatCurrency(ctx.parsed)}` } }
}
}} />
}
</div>
</div>