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 {