From e373363e75a002707546b06dabf1b6adb78162fe Mon Sep 17 00:00:00 2001
From: fahed <fahed@softhouse.io>
Date: Tue, 7 Apr 2026 13:16:15 +0300
Subject: [PATCH] feat: add % toggle to revenue/visitors by event chart

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/Dashboard.tsx | 46 ++++++++++++++++++++++++++++++++----
 1 file changed, 42 insertions(+), 4 deletions(-)

diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx
index 17079a9..d8b64b2 100644
--- a/src/components/Dashboard.tsx
+++ b/src/components/Dashboard.tsx
@@ -83,6 +83,7 @@ function Dashboard({ data, seasons, userRole, showDataLabels, setShowDataLabels,
   const [eventChartType, setEventChartType] = useState<'bar' | 'pie'>('pie');
   const [channelChartType, setChannelChartType] = useState<'bar' | 'pie'>('pie');
   const [channelDisplayMode, setChannelDisplayMode] = useState<'absolute' | 'percent'>('absolute');
+  const [eventDisplayMode, setEventDisplayMode] = useState<'absolute' | 'percent'>('absolute');
 
   const filteredData = useMemo(() => filterData(data, filters), [data, filters]);
 
@@ -254,6 +255,17 @@ function Dashboard({ data, seasons, userRole, showDataLabels, setShowDataLabels,
     };
   }, [seasonFilteredData, includeVAT]);
 
+  const eventChartData = useMemo(() => {
+    const source = museumData[eventMetric];
+    if (eventDisplayMode === 'absolute') return source;
+    const total = source.datasets[0].data.reduce((s: number, v: number) => s + v, 0);
+    if (total === 0) return source;
+    return {
+      ...source,
+      datasets: [{ ...source.datasets[0], data: source.datasets[0].data.map((v: number) => parseFloat(((v / total) * 100).toFixed(1))) }]
+    };
+  }, [museumData, eventMetric, eventDisplayMode]);
+
   const channelChartData = useMemo(() => {
     if (channelDisplayMode === 'absolute') return channelData;
     const total = channelData.datasets[0].data.reduce((s: number, v: number) => s + v, 0);
@@ -639,12 +651,25 @@ function Dashboard({ data, seasons, userRole, showDataLabels, setShowDataLabels,
                   <button className={eventChartType === 'bar' ? 'active' : ''} onClick={() => setEventChartType('bar')}>{t('metrics.bar')}</button>
                   <button className={eventChartType === 'pie' ? 'active' : ''} onClick={() => setEventChartType('pie')}>{t('metrics.pie')}</button>
                 </div>
+                <div className="toggle-switch">
+                  <button className={eventDisplayMode === 'absolute' ? 'active' : ''} onClick={() => setEventDisplayMode('absolute')}>#</button>
+                  <button className={eventDisplayMode === 'percent' ? 'active' : ''} onClick={() => setEventDisplayMode('percent')}>%</button>
+                </div>
               </div>
             }
           >
             {eventChartType === 'bar'
-              ? <Bar data={museumData[eventMetric]} options={{...baseOptions, indexAxis: 'y'}} />
-              : <Pie data={museumData[eventMetric]} options={pieOptions} />
+              ? <Bar data={eventChartData} options={{...baseOptions, indexAxis: 'y'}} />
+              : <Pie data={eventChartData} options={{
+                  ...pieOptions,
+                  plugins: {
+                    ...pieOptions.plugins,
+                    datalabels: eventDisplayMode === '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) => eventDisplayMode === 'percent' ? ` ${ctx.parsed.toFixed(1)}%` : ` ${formatCurrency(ctx.parsed)}` } }
+                  }
+                }} />
             }
           </ExportableChart>
         </div>
@@ -776,11 +801,24 @@ function Dashboard({ data, seasons, userRole, showDataLabels, setShowDataLabels,
                       <button className={eventChartType === 'bar' ? 'active' : ''} onClick={() => setEventChartType('bar')}>{t('metrics.bar')}</button>
                       <button className={eventChartType === 'pie' ? 'active' : ''} onClick={() => setEventChartType('pie')}>{t('metrics.pie')}</button>
                     </div>
+                    <div className="toggle-switch">
+                      <button className={eventDisplayMode === 'absolute' ? 'active' : ''} onClick={() => setEventDisplayMode('absolute')}>#</button>
+                      <button className={eventDisplayMode === 'percent' ? 'active' : ''} onClick={() => setEventDisplayMode('percent')}>%</button>
+                    </div>
                   </div>
                   <div className="chart-container">
                     {eventChartType === 'bar'
-                      ? <Bar data={museumData[eventMetric]} options={{...baseOptions, indexAxis: 'y'}} />
-                      : <Pie data={museumData[eventMetric]} options={pieOptions} />
+                      ? <Bar data={eventChartData} options={{...baseOptions, indexAxis: 'y'}} />
+                      : <Pie data={eventChartData} options={{
+                          ...pieOptions,
+                          plugins: {
+                            ...pieOptions.plugins,
+                            datalabels: eventDisplayMode === '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) => eventDisplayMode === 'percent' ? ` ${ctx.parsed.toFixed(1)}%` : ` ${formatCurrency(ctx.parsed)}` } }
+                          }
+                        }} />
                     }
                   </div>
                 </div>