improvement(dashboard): filter by clicking on country, better colors on dark/light mode

apps/dashboard/src/components/report-chart/map/chart.tsx

@@ -5,6 +5,8 @@ import { useMemo } from 'react';
 import WorldMap from 'react-svg-worldmap';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
+import { useOverviewOptions } from '@/components/overview/useOverviewOptions';
+import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
 import { useReportChartContext } from '../context';
 
 interface Props {
@@ -16,6 +18,7 @@ export function Chart({ data }: Props) {
     report: { metric, unit },
   } = useReportChartContext();
   const { series } = useVisibleSeries(data, 100);
+  const [filters, setFilter] = useEventQueryFilters();
 
   const mapData = useMemo(
     () =>
@@ -30,10 +33,15 @@ export function Chart({ data }: Props) {
     <AutoSizer disableHeight>
       {({ width }) => (
         <WorldMap
+          onClickFunction={(event) => {
+            if (event.countryCode) {
+              setFilter('country', event.countryCode);
+            }
+          }}
           size={width}
           data={mapData}
-          color={theme.colors['chart-0']}
-          borderColor={'#103A96'}
+          color={'var(--chart-0)'}
+          borderColor={'hsl(var(--foreground))'}
           value-suffix={unit}
         />
       )}

apps/dashboard/src/styles/globals.css

@@ -41,6 +41,20 @@
     --ring: 212.73deg 26.83% 83.92%; /* #CDD6E2 */
 
     --radius: 0.5rem;
+
+    --chart-0: #2563EB;
+    --chart-1: #ff7557;
+    --chart-2: #7fe1d8;
+    --chart-3: #f8bc3c;
+    --chart-4: #b3596e;
+    --chart-5: #72bef4;
+    --chart-6: #ffb27a;
+    --chart-7: #0f7ea0;
+    --chart-8: #3ba974;
+    --chart-9: #febbb2;
+    --chart-10: #cb80dc;
+    --chart-11: #5cb7af;
+    --chart-12: #7856ff;
   }
 
   .dark {

apps/dashboard/tailwind.config.js

@@ -44,8 +44,8 @@ const twColorVariants = ['50', '100', '200', '700', '800', '900'];
 const config = {
   darkMode: 'class',
   safelist: [
-    ...colors.flatMap((color) =>
-      ['text', 'bg'].map((prefix) => `${prefix}-chart-${color}`),
+    ...[...new Array(12)].flatMap((_, index) =>
+      ['text', 'bg'].map((prefix) => `${prefix}-chart-${index}`),
     ),
     ...twColors.flatMap((color) => {
       return twColorVariants.flatMap((variant) => {
@@ -88,6 +88,19 @@ const config = {
     },
     extend: {
       colors: {
+        'chart-0': 'var(--chart-0)',
+        'chart-1': 'var(--chart-1)',
+        'chart-2': 'var(--chart-2)',
+        'chart-3': 'var(--chart-3)',
+        'chart-4': 'var(--chart-4)',
+        'chart-5': 'var(--chart-5)',
+        'chart-6': 'var(--chart-6)',
+        'chart-7': 'var(--chart-7)',
+        'chart-8': 'var(--chart-8)',
+        'chart-9': 'var(--chart-9)',
+        'chart-10': 'var(--chart-10)',
+        'chart-11': 'var(--chart-11)',
+        'chart-12': 'var(--chart-12)',
         border: 'hsl(var(--border))',
         input: 'hsl(var(--input))',
         ring: 'hsl(var(--ring))',