diff --git a/index.html b/index.html
index 08f37c7..3d045a5 100644
--- a/index.html
+++ b/index.html
@@ -5,11 +5,11 @@
-
+
- HiHala Data – Museums
+ HiHala Data
diff --git a/src/App.css b/src/App.css
index c27702a..3be1b6b 100644
--- a/src/App.css
+++ b/src/App.css
@@ -796,16 +796,22 @@ table tbody tr:hover {
}
.multi-select-arrow {
- font-size: 0.65rem;
- opacity: 0.5;
+ font-size: 0.6rem;
+ opacity: 0.4;
margin-inline-start: 8px;
+ transition: transform 150ms ease;
+}
+
+.multi-select-trigger[aria-expanded="true"] .multi-select-arrow {
+ transform: rotate(180deg);
}
.multi-select-dropdown {
position: absolute;
top: calc(100% + 4px);
left: 0;
- right: 0;
+ min-width: 100%;
+ width: max-content;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
@@ -816,6 +822,12 @@ table tbody tr:hover {
padding: 4px;
}
+.multi-select-dropdown,
+.multi-select-dropdown * {
+ text-transform: none;
+ letter-spacing: normal;
+}
+
.multi-select-option {
display: flex;
align-items: center;
@@ -825,8 +837,6 @@ table tbody tr:hover {
cursor: pointer;
font-size: 0.875rem;
color: var(--text-primary);
- text-transform: none;
- letter-spacing: normal;
font-weight: normal;
}
diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx
index b311b0c..65ba74f 100644
--- a/src/components/Dashboard.tsx
+++ b/src/components/Dashboard.tsx
@@ -3,7 +3,7 @@ import { useSearchParams } from 'react-router-dom';
import { Line, Bar } from 'react-chartjs-2';
import { Carousel, EmptyState, FilterControls, MultiSelect, StatCard } from './shared';
import { ExportableChart } from './ChartExport';
-import { chartColors, createBaseOptions } from '../config/chartConfig';
+import { chartColors, chartPalette, createBaseOptions } from '../config/chartConfig';
import { useLanguage } from '../contexts/LanguageContext';
import {
filterData,
@@ -206,15 +206,16 @@ function Dashboard({ data, showDataLabels, setShowDataLabels, includeVAT, setInc
labels: museums,
datasets: [{
data: museums.map(m => grouped[m].visitors),
- backgroundColor: [chartColors.primary + 'cc', chartColors.secondary + 'cc', chartColors.tertiary + 'cc'],
- borderWidth: 0
+ backgroundColor: museums.map((_, i) => chartPalette[i % chartPalette.length] + 'cc'),
+ borderWidth: 0,
+ borderRadius: 4
}]
},
revenue: {
labels: museums,
datasets: [{
data: museums.map(m => grouped[m].revenue),
- backgroundColor: [chartColors.primary + 'cc', chartColors.secondary + 'cc', chartColors.tertiary + 'cc'],
+ backgroundColor: museums.map((_, i) => chartPalette[i % chartPalette.length] + 'cc'),
borderRadius: 4
}]
}
@@ -229,7 +230,7 @@ function Dashboard({ data, showDataLabels, setShowDataLabels, includeVAT, setInc
labels: channels,
datasets: [{
data: channels.map(d => grouped[d].revenue),
- backgroundColor: [chartColors.secondary + 'cc', chartColors.tertiary + 'cc'],
+ backgroundColor: channels.map((_, i) => chartPalette[i % chartPalette.length] + 'cc'),
borderRadius: 4
}]
};
@@ -243,7 +244,7 @@ function Dashboard({ data, showDataLabels, setShowDataLabels, includeVAT, setInc
labels: districtNames,
datasets: [{
data: districtNames.map(d => grouped[d].revenue),
- backgroundColor: [chartColors.primary + 'cc', chartColors.secondary + 'cc', chartColors.tertiary + 'cc', chartColors.muted + 'cc'],
+ backgroundColor: districtNames.map((_, i) => chartPalette[i % chartPalette.length] + 'cc'),
borderRadius: 4
}]
};
diff --git a/src/components/shared/MultiSelect.tsx b/src/components/shared/MultiSelect.tsx
index 4c190c0..c4db609 100644
--- a/src/components/shared/MultiSelect.tsx
+++ b/src/components/shared/MultiSelect.tsx
@@ -50,7 +50,7 @@ function MultiSelect({ options, selected, onChange, allLabel, placeholder }: Mul
aria-expanded={open}
>
{displayText}
- {open ? '▲' : '▼'}
+ ▼
{open && (
diff --git a/src/config/chartConfig.ts b/src/config/chartConfig.ts
index 00aa532..ce75675 100644
--- a/src/config/chartConfig.ts
+++ b/src/config/chartConfig.ts
@@ -5,7 +5,7 @@ import {
PointElement,
LineElement,
BarElement,
- ArcElement,
+
Title,
Tooltip,
Legend,
@@ -20,7 +20,7 @@ ChartJS.register(
PointElement,
LineElement,
BarElement,
- ArcElement,
+
Title,
Tooltip,
Legend,
@@ -38,6 +38,20 @@ export const chartColors = {
grid: '#f1f5f9'
};
+// Extended palette for charts with many categories (events, channels)
+export const chartPalette = [
+ '#2563eb', // blue
+ '#7c3aed', // purple
+ '#0891b2', // cyan
+ '#059669', // emerald
+ '#d97706', // amber
+ '#e11d48', // rose
+ '#4f46e5', // indigo
+ '#0d9488', // teal
+ '#c026d3', // fuchsia
+ '#ea580c', // orange
+];
+
export const createDataLabelConfig = (showDataLabels: boolean): any => ({
display: showDataLabels,
color: '#1e293b',