Tremor Charts

Purpose

Three chart components built on @tremor/react. All three live in frontend/kundkort/components/ui/ and render in the Analys & Grafer tab of Kundkort Page.

FinancialChart

File: components/ui/FinancialChart.tsx. Wraps Tremor <AreaChart> (turnover) or <BarChart> (employees fallback when no turnover).

• Input: { years: number[]; turnover: (number|null)[]; employees: (number|null)[] }
• Turnover divided by 1,000,000 → MSEK (FinancialChart.tsx:17)
• If neither series has data → empty card “Ingen finansiell data tillgänglig”
• Axis colour 'blue' for turnover, 'emerald' for employees
• Fed by useEcoApi.financialTrend.financial_trend — see EcoAPI Integration

ContactDistributionChart

File: components/ui/ContactDistributionChart.tsx. Renders both a <DonutChart> and a vertical <BarChart> side-by-side.

• Input: Record<string, number> of role → count
• Roles with count 0 are filtered out (ContactDistributionChart.tsx:33)
• Colour palette per role hard-coded in ROLE_COLORS (ContactDistributionChart.tsx:8-18)
• Labels translated via ROLE_LABELS for compactness (“Styrelseord.” instead of “Styrelseordförande”)
• Empty state: card with “Inga kontakter tillgängliga” placeholder
• Rendered in BOTH the Analys & Grafer tab AND the Kontakter tab (KundkortPage.tsx:404-410, 433-440)

DataCompletenessChart

File: components/ui/DataCompletenessChart.tsx. Header <Metric> for the overall score plus a <DonutChart> and a list of <ProgressBar>s per category.

• Input: { overall: number; byCategory: Record<string, number> }
• Categories: basic, financial, contacts, digital (DataCompletenessChart.tsx:9-14)
• Colour ladder: ≥75 emerald, ≥50 yellow, ≥25 orange, else red (DataCompletenessChart.tsx:29-34)
• Fed by useEcoApi.insights.data_completeness

Tailwind colour caveat

These components use dynamic text-${color}-700 and bg-${color}-50 class strings. Tailwind cannot statically detect them — that’s why tailwind.config.js:78-105 declares a regex safelist for every Tailwind colour × shade combination. The HTML inline config dropped this safelist (see Frontend Build) and relies on the prebuilt dist/app.css instead.

See also

Insights Panel, Gaps Panel, EcoAPI Integration, Frontend Build.

See also

• Frontend MOC