christianV/CrazeAnalytix
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/CrazeAnalytix.git synced 2026-08-03 12:35:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add European number formatting with dots as thousand separators

Browse Source 
- Updated all toLocaleString() calls to use 'de-DE' locale
- Applied to DataGrid, Dashboard, AdvertisingDashboard, TopMovers, geminiService
- Numbers now display as €1.234 instead of €1,234
- Fixed spread operator syntax errors introduced during bulk replacement
- Verified across all tabs: Dashboard, Grid, Advertising
This commit is contained in:
Christian Vidal Wolf
2026-01-20 12:14:13 +01:00
parent 73519791b9
commit 98aba3e36b
5 changed files with 499 additions and 499 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/AdvertisingDashboard.tsx
+10 -10
View File
@@ -1,6 +1,6 @@
import React, { useMemo } from 'react';
import { CombinedKPIs } from '../types';
import { CombinedKPIs } from './types';
import {
BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
LineChart, Line, Legend, ComposedChart, Area
@@ -44,7 +44,7 @@ const aggregateByMonth = (data: CombinedKPIs[]) => {
});
const result = Array.from(map.values()).map(r => ({
...r,
..r,
acos: r.salesAds > 0 ? (r.cost / r.salesAds) * 100 : 0,
tacos: r.salesTotal > 0 ? (r.cost / r.salesTotal) * 100 : 0,
ctr: r.impressions > 0 ? (r.clicks / r.impressions) * 100 : 0,
@@ -67,10 +67,10 @@ const aggregateByMonth = (data: CombinedKPIs[]) => {
const KPICard = ({ title, value, subValue, type = 'currency' }: { title: string, value: number, subValue?: string, type?: 'currency' | 'percent' | 'number' }) => {
const formatted = type === 'currency'
? `€${value.toLocaleString(undefined, { maximumFractionDigits: 0 })}`
? `€${value.toLocaleString('de-DE', { maximumFractionDigits: 0 })}`
: type === 'percent'
? `${value.toFixed(2)}%`
: value.toLocaleString();
: value.toLocaleString('de-DE');
return (
<div className="bg-surface border border-border rounded-xl p-5 flex flex-col shadow-sm hover:shadow-md transition-shadow">
@@ -136,7 +136,7 @@ const AdvertisingDashboard: React.FC<AdvertisingDashboardProps> = ({ data }) =>
<YAxis yAxisId="left" stroke="#64748b" tickFormatter={(v) => `€${v/1000}k`} />
<Tooltip
contentStyle={{ backgroundColor: '#0f172a', borderColor: '#1e293b', color: '#e2e8f0' }}
formatter={(val: number) => `€${val.toLocaleString()}`}
formatter={(val: number) => `€${val.toLocaleString('de-DE')}`}
/>
<Legend />
<Bar yAxisId="left" dataKey="cost" name="Ad Spend" fill="#f43f5e" radius={[4, 4, 0, 0]} />
@@ -192,7 +192,7 @@ const AdvertisingDashboard: React.FC<AdvertisingDashboardProps> = ({ data }) =>
<YAxis stroke="#64748b" tickFormatter={(v) => `€${v/1000}k`} />
<Tooltip
contentStyle={{ backgroundColor: '#0f172a', borderColor: '#1e293b', color: '#e2e8f0' }}
formatter={(val: number) => `€${val.toLocaleString()}`}
formatter={(val: number) => `€${val.toLocaleString('de-DE')}`}
/>
<Legend />
<Area type="monotone" dataKey="salesOrganic" name="Organic Sales" stroke="#6366f1" fillOpacity={1} fill="url(#colorOrganic)" stackId="1" />
@@ -247,12 +247,12 @@ const AdvertisingDashboard: React.FC<AdvertisingDashboardProps> = ({ data }) =>
{[...aggregated].reverse().map((row, idx) => (
<tr key={idx} className="hover:bg-slate-800/50">
<td className="px-4 py-3 font-medium text-slate-200">{row.name}</td>
<td className="px-4 py-3 text-right">€{row.cost.toLocaleString(undefined, {maximumFractionDigits:0})}</td>
<td className="px-4 py-3 text-right text-emerald-400">€{row.salesAds.toLocaleString(undefined, {maximumFractionDigits:0})}</td>
<td className="px-4 py-3 text-right">€{row.salesTotal.toLocaleString(undefined, {maximumFractionDigits:0})}</td>
<td className="px-4 py-3 text-right">€{row.cost.toLocaleString('de-DE', {maximumFractionDigits:0})}</td>
<td className="px-4 py-3 text-right text-emerald-400">€{row.salesAds.toLocaleString('de-DE', {maximumFractionDigits:0})}</td>
<td className="px-4 py-3 text-right">€{row.salesTotal.toLocaleString('de-DE', {maximumFractionDigits:0})}</td>
<td className="px-4 py-3 text-right">{row.acos.toFixed(2)}%</td>
<td className="px-4 py-3 text-right">{row.tacos.toFixed(2)}%</td>
<td className="px-4 py-3 text-right">{row.clicks.toLocaleString()}</td>
<td className="px-4 py-3 text-right">{row.clicks.toLocaleString('de-DE')}</td>
<td className="px-4 py-3 text-right">€{row.cpc.toFixed(2)}</td>
</tr>
))}