Upload 55 files

src/App.tsx

@@ -0,0 +1,79 @@
+import React, { useState, useEffect } from "react";
+import { useDispatch } from "react-redux";
+import { fetchPoiRequest } from "./redux/actions/poiActions";
+import { poiList } from "./data/data";
+import { Poi } from "./redux/types/Poi";
+
+import DropDown from "./components/generalInformation/dropdown/DropDown";
+import DemographicsSection from "./sections/demographics";
+import FootfallSection from "./sections/footfall";
+import ModeSection from "./sections/mode";
+import DescriptionSection from "./sections/description";
+import InformationSection from "./sections/information";
+import DrawerSection from "./sections/drawer";
+import TraficSection from "./sections/trafic";
+import MapSection from "./sections/map";
+import GraphSections from "./components/main/GraphSections";
+
+import "./styles/global/App.css";
+import "./styles/global/customScrollBar.css";
+
+const App = () => {
+  const [selectedPoi, setSelectedPoi] = useState<Poi>(poiList.items[0]);
+  const [isFootfallSection, setFootfallSection] = useState(true);
+  const [isModeSection, setModeSection] = useState(true);
+  const [isDemographicsSection, setDemographicsSection] = useState(true);
+  const [isInformationSection, setInformationSection] = useState(true);
+  const [isTraficSection, setTraficSection] = useState(true);
+  const [isMapView, setIsMapView] = useState(false);
+
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(fetchPoiRequest());
+  }, [dispatch]);
+
+  return (
+    <div className="rootContent">
+      <DrawerSection
+        poiList={poiList.items}
+        setSelectedPoi={setSelectedPoi}
+        isFootfallSection={isFootfallSection}
+        setFootfallSection={setFootfallSection}
+        isModeSection={isModeSection}
+        setModeSection={setModeSection}
+        isDemographicsSection={isDemographicsSection}
+        setDemographicsSection={setDemographicsSection}
+        isInformationSection={isInformationSection}
+        setInformationSection={setInformationSection}
+        isTraficSection={isTraficSection}
+        setTraficSection={setTraficSection}
+        isMapView={isMapView}
+        setIsMapView={setIsMapView}
+      />
+
+      {isMapView ? (
+        <MapSection selectedPoi={selectedPoi} />
+      ) : (
+        <div className="mainContent">
+          <br></br>
+          <DropDown
+            poiList={poiList.items}
+            selectedPoi={selectedPoi}
+            setSelectedPoi={setSelectedPoi}
+          />
+          <GraphSections
+            selectedPoi={selectedPoi}
+            isDemographicsSection={isDemographicsSection}
+            isFootfallSection={isFootfallSection}
+            isModeSection={isModeSection}
+            isInformationSection={isInformationSection}
+            isTraficSection={isTraficSection}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default App;

src/algorithm/DemographicsPieByGender.ts

@@ -0,0 +1,39 @@
+interface SocioDemographyItem {
+  age: string;
+  gender: string;
+  percentage: number;
+  social_group: string;
+}
+
+export interface SummaryItem {
+  label: string;
+  usage: number;
+}
+
+export function generateSummary(data: SocioDemographyItem[]): SummaryItem[] {
+  const summaryData: SummaryItem[] = [];
+
+  function calculateUsage(age: string, gender: string): number {
+    const filteredData = data.filter(
+      (item) => item.age === age && item.gender.toUpperCase() === gender
+    );
+    const totalPercentage = filteredData.reduce(
+      (total, item) => total + item.percentage,
+      0
+    );
+    return totalPercentage;
+  }
+
+  const ageGroups = ["15-24", "25-34", "35-49", "50-64", "65-PLUS"];
+  const genders = ["MALE", "FEMALE"];
+
+  for (const gender of genders) {
+    for (const age of ageGroups) {
+      const label = `${gender} ${age}`;
+      const usage = calculateUsage(age, gender);
+      summaryData.push({ label, usage });
+    }
+  }
+
+  return summaryData;
+}

src/algorithm/DemographicsPieBySocialGroup.ts

@@ -0,0 +1,24 @@
+export interface SummaryItemSocial {
+  label: string;
+  usage: number;
+}
+
+export function summarizeSocialGroups(data: any[]): SummaryItemSocial[] {
+  const summary: { [key: string]: number } = {};
+
+  data.forEach((item) => {
+    const socialGroup = item.social_group;
+    const percentage = item.percentage;
+    summary[socialGroup] = (summary[socialGroup] || 0) + percentage;
+  });
+
+  const summaryArray: SummaryItemSocial[] = [];
+  for (const socialGroup in summary) {
+    summaryArray.push({
+      label: `${socialGroup}`,
+      usage: summary[socialGroup],
+    });
+  }
+
+  return summaryArray;
+}

src/algorithm/WordCloud.ts

@@ -0,0 +1,98 @@
+interface SocioDemographicData {
+  age: string;
+  gender: string;
+  percentage: number;
+  social_group: string;
+}
+
+type SynonymsMap = Record<string, string[]>;
+
+export function characterizeSocioDemographicData(
+  data: SocioDemographicData[]
+): string {
+  const result: string[] = [];
+
+  const ageSynonyms: SynonymsMap = {
+    "15-24": ["young", "youthful", "adolescent", "teenage", "juvenile"],
+    "25-34": ["young adult", "early adult", "youthful", "prime of life"],
+    "35-49": ["middle-aged", "adult", "mature", "grown-up"],
+    "50-64": ["senior", "elderly", "aged", "mature", "golden-aged"],
+    "65-PLUS": ["elderly", "senior", "aged", "retired", "elder"],
+  };
+
+  const socialGroupSynonyms: SynonymsMap = {
+    "1": ["poorest", "impoverished", "deprived", "underprivileged", "needy"],
+    "2": [
+      "poor",
+      "low-income",
+      "economically challenged",
+      "struggling",
+      "disadvantaged",
+    ],
+    "3": ["poor", "struggling", "disadvantaged", "less fortunate", "in need"],
+    "4": ["middle-income", "average", "moderate", "ordinary", "typical"],
+    "5": ["middle-income", "average", "moderate", "ordinary", "typical"],
+    "6": ["middle-income", "average", "moderate", "ordinary", "typical"],
+    "7": ["rich", "affluent", "well-off", "prosperous", "wealthy"],
+    "8": ["rich", "wealthy", "opulent", "affluent", "privileged"],
+    "9": ["richest", "privileged", "wealthiest", "affluent", "opulent"],
+    "10": ["richest", "wealthiest", "opulent", "affluent", "privileged"],
+  };
+
+  const crowdedSynonyms = [
+    "crowded",
+    "dense",
+    "populated",
+    "teeming",
+    "packed",
+  ];
+  const notCrowdedSynonyms = [
+    "not that crowded",
+    "sparsely populated",
+    "unpopulated",
+    "deserted",
+    "vacant",
+  ];
+
+  const groupedData = data.reduce((groups, item) => {
+    const key = `${item.age}-${item.gender}-${item.social_group}`;
+    if (!groups[key]) {
+      groups[key] = [];
+    }
+    groups[key].push(item.percentage);
+    return groups;
+  }, {} as Record<string, number[]>);
+
+  for (const key in groupedData) {
+    if (groupedData.hasOwnProperty(key)) {
+      const percentages = groupedData[key];
+      const averagePercentage =
+        percentages.reduce((sum, percentage) => sum + percentage, 0) /
+        percentages.length;
+
+      if (averagePercentage > 0.1) {
+        result.push(...crowdedSynonyms);
+      } else {
+        result.push(...notCrowdedSynonyms);
+      }
+
+      const age = key.split("-")[0];
+      const randomAgeSynonym = ageSynonyms[age]
+        ? ageSynonyms[age][Math.floor(Math.random() * ageSynonyms[age].length)]
+        : age;
+      result.push(randomAgeSynonym);
+
+      const socialGroup = key.split("-")[2];
+      const randomSocialGroupSynonym = socialGroupSynonyms[socialGroup]
+        ? socialGroupSynonyms[socialGroup][
+            Math.floor(Math.random() * socialGroupSynonyms[socialGroup].length)
+          ]
+        : "social group " + socialGroup;
+      result.push(randomSocialGroupSynonym);
+    }
+  }
+
+  const finalString = result.filter((word) => isNaN(Number(word))).join(" ");
+
+  return finalString;
+}

src/assets/fonts/fonts.css

@@ -0,0 +1,29 @@
+@font-face {
+  font-family: "airbnb_extra_bold";
+  src: url("./AirbnbCereal_W_Blk.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "airbnb_bold";
+  src: url("./AirbnbCereal_W_XBd.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "airbnb_semi_bold";
+  src: url("./AirbnbCereal_W_Bd.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "airbnb_regular";
+  src: url("./AirbnbCereal_W_Md.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "airbnb_light";
+  src: url("./AirbnbCereal_W_Bk.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "airbnb_extra_light";
+  src: url("./AirbnbCereal_W_Lt.otf") format("opentype");
+}

src/components/charts/brushChart/Area.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import { Group } from "@visx/group";
+import { AreaClosed } from "@visx/shape";
+import { AxisLeft, AxisBottom, AxisScale } from "@visx/axis";
+import { LinearGradient } from "@visx/gradient";
+import { curveMonotoneX } from "@visx/curve";
+import { week_distribution } from "./AreaChart";
+
+const axisColor = "#fff";
+const axisBottomTickLabelProps = {
+  textAnchor: "middle" as const,
+  fontFamily: "Arial",
+  fontSize: 10,
+  fill: axisColor,
+};
+const axisLeftTickLabelProps = {
+  dx: "-0.25em",
+  dy: "0.25em",
+  fontFamily: "Arial",
+  fontSize: 10,
+  textAnchor: "end" as const,
+  fill: axisColor,
+};
+
+export default function AreaChart({
+  data,
+  gradientColor,
+  width,
+  yMax,
+  margin,
+  xScale,
+  yScale,
+  hideBottomAxis = false,
+  hideLeftAxis = false,
+  top,
+  left,
+  children,
+}: {
+  data: week_distribution[];
+  gradientColor: string;
+  xScale: AxisScale<number>;
+  yScale: AxisScale<number>;
+  width: number;
+  yMax: number;
+  margin: { top: number; right: number; bottom: number; left: number };
+  hideBottomAxis?: boolean;
+  hideLeftAxis?: boolean;
+  top?: number;
+  left?: number;
+  children?: React.ReactNode;
+}) {
+  if (width < 10) return null;
+  return (
+    <Group left={left || margin.left} top={top || margin.top}>
+      <LinearGradient
+        id="gradient"
+        from={gradientColor}
+        fromOpacity={1}
+        to={gradientColor}
+        toOpacity={0.2}
+      />
+      <AreaClosed<week_distribution>
+        data={data}
+        x={(d) => xScale(d.week) || 0}
+        y={(d) => yScale(d.indice_base_100) || 0}
+        yScale={yScale}
+        strokeWidth={1}
+        stroke="url(#gradient)"
+        fill="url(#gradient)"
+        curve={curveMonotoneX}
+      />
+      {!hideBottomAxis && (
+        <AxisBottom
+          top={yMax}
+          scale={xScale}
+          numTicks={width > 520 ? 10 : 5}
+          stroke={axisColor}
+          tickStroke={axisColor}
+          tickLabelProps={axisBottomTickLabelProps}
+        />
+      )}
+      {!hideLeftAxis && (
+        <AxisLeft
+          scale={yScale}
+          numTicks={5}
+          stroke={axisColor}
+          tickStroke={axisColor}
+          tickLabelProps={axisLeftTickLabelProps}
+        />
+      )}
+      {children}
+    </Group>
+  );
+}

src/components/charts/brushChart/AreaChart.tsx

@@ -0,0 +1,245 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import React, { useRef, useState, useMemo } from "react";
+import { scaleLinear } from "@visx/scale";
+import { Brush } from "@visx/brush";
+import { Bounds } from "@visx/brush/lib/types";
+import BaseBrush, {
+  BaseBrushState,
+  UpdateBrush,
+} from "@visx/brush/lib/BaseBrush";
+import { PatternLines } from "@visx/pattern";
+import { Group } from "@visx/group";
+import { LinearGradient } from "@visx/gradient";
+import { extent } from "@visx/vendor/d3-array";
+import { BrushHandleRenderProps } from "@visx/brush/lib/BrushHandle";
+import AreaChart from "./Area";
+
+const brushMargin = { top: 0, bottom: 15, left: 50, right: 20 };
+const chartSeparation = 30;
+const PATTERN_ID = "brush_pattern";
+const GRADIENT_ID = "brush_gradient";
+export const accentColor = "#f6acc8";
+export const background = "#584153";
+export const background2 = "#af8baf";
+
+const getWeek = (d: any) => d.week;
+const getIndice = (d: any) => d.indice_base_100;
+
+export interface week_distribution {
+  indice_base_100: number;
+  week: number;
+}
+
+export type BrushProps = {
+  data: week_distribution[];
+  width: number;
+  height: number;
+  margin?: { top: number; right: number; bottom: number; left: number };
+  compact?: boolean;
+};
+
+function BrushChart({
+  data,
+  compact = false,
+  width,
+  height,
+  margin = {
+    top: 20,
+    left: 50,
+    bottom: 20,
+    right: 20,
+  },
+}: BrushProps) {
+  const brushRef = useRef<BaseBrush | null>(null);
+
+  const [filteredData, setFilteredData] = useState(data);
+
+  const onBrushChange = (domain: Bounds | null) => {
+    if (!domain) return;
+    const { x0, x1, y0, y1 } = domain;
+    const dataCopy = data.filter((d) => {
+      const x = getWeek(d);
+      const y = getIndice(d);
+      return x > x0 && x < x1 && y > y0 && y < y1;
+    });
+    setFilteredData(dataCopy);
+  };
+
+  const innerHeight = height - margin.top - margin.bottom;
+  const topChartBottomMargin = compact
+    ? chartSeparation / 2
+    : chartSeparation + 10;
+  const topChartHeight = 0.8 * innerHeight - topChartBottomMargin;
+  const bottomChartHeight = innerHeight - topChartHeight - chartSeparation;
+
+  const xMax = Math.max(width - margin.left - margin.right, 0);
+  const yMax = Math.max(topChartHeight, 0);
+  const xBrushMax = Math.max(width - brushMargin.left - brushMargin.right, 0);
+  const yBrushMax = Math.max(
+    bottomChartHeight - brushMargin.top - brushMargin.bottom,
+    0
+  );
+
+  const weekScale = useMemo(
+    () =>
+      scaleLinear<number>({
+        range: [0, xMax],
+        domain: extent(data, getWeek) as [number, number],
+      }),
+    [xMax, data]
+  );
+
+  const brushWeekScale = useMemo(
+    () =>
+      scaleLinear<number>({
+        range: [0, xBrushMax],
+        domain: extent(data, getWeek) as [number, number],
+      }),
+    [xBrushMax, data]
+  );
+
+  const indiceScale = useMemo(
+    () =>
+      scaleLinear<number>({
+        range: [topChartHeight, 0],
+        domain: [70, 105],
+      }),
+    [topChartHeight, data]
+  );
+
+  const initialBrushPosition = useMemo(
+    () => ({
+      start: { x: brushWeekScale(data[0].week) },
+      end: { x: brushWeekScale(data[10].week) },
+    }),
+    [brushWeekScale]
+  );
+
+  const handleClearClick = () => {
+    if (brushRef?.current) {
+      setFilteredData(data);
+      brushRef.current.reset();
+    }
+  };
+
+  const handleResetClick = () => {
+    if (brushRef?.current) {
+      const updater: UpdateBrush = (prevBrush) => {
+        const newExtent = brushRef.current!.getExtent(
+          initialBrushPosition.start,
+          initialBrushPosition.end
+        );
+
+        const newState: BaseBrushState = {
+          ...prevBrush,
+          start: { y: newExtent.y0, x: newExtent.x0 },
+          end: { y: newExtent.y1, x: newExtent.x1 },
+          extent: newExtent,
+        };
+
+        return newState;
+      };
+      brushRef.current.updateBrush(updater);
+    }
+  };
+
+  return (
+    <div>
+      <svg
+        width={width}
+        height={height}
+        style={{
+          borderBottomLeftRadius: "14px",
+          borderBottomRightRadius: "14px",
+          boxShadow: "0 0 8px rgba(0, 0, 0, 0.2)",
+        }}
+      >
+        <LinearGradient
+          id={GRADIENT_ID}
+          from={background}
+          to={background2}
+          rotate={45}
+        />
+        <rect
+          x={0}
+          y={0}
+          width={width}
+          height={height}
+          fill={`url(#${GRADIENT_ID})`}
+        />
+        <AreaChart
+          hideBottomAxis={compact}
+          data={filteredData}
+          width={width}
+          margin={{ ...margin, bottom: topChartBottomMargin }}
+          yMax={yMax}
+          xScale={weekScale}
+          yScale={indiceScale}
+          gradientColor={background2}
+        />
+        <AreaChart
+          hideBottomAxis
+          hideLeftAxis
+          data={data}
+          width={width}
+          yMax={yBrushMax}
+          xScale={brushWeekScale}
+          yScale={indiceScale}
+          margin={brushMargin}
+          top={topChartHeight + topChartBottomMargin + margin.top}
+          gradientColor={background2}
+        >
+          <PatternLines
+            id={PATTERN_ID}
+            height={8}
+            width={8}
+            stroke={accentColor}
+            strokeWidth={1}
+            orientation={["diagonal"]}
+          />
+          <Brush
+            xScale={brushWeekScale}
+            yScale={indiceScale}
+            width={xBrushMax}
+            height={yBrushMax}
+            margin={brushMargin}
+            handleSize={8}
+            innerRef={brushRef}
+            resizeTriggerAreas={["left", "right"]}
+            brushDirection="horizontal"
+            initialBrushPosition={initialBrushPosition}
+            onChange={onBrushChange}
+            onClick={() => setFilteredData(data)}
+            selectedBoxStyle={{
+              fill: `url(#${PATTERN_ID})`,
+              stroke: "white",
+            }}
+            useWindowMoveEvents
+            renderBrushHandle={(props) => <BrushHandle {...props} />}
+          />
+        </AreaChart>
+      </svg>
+    </div>
+  );
+}
+
+function BrushHandle({ x, height, isBrushActive }: BrushHandleRenderProps) {
+  const pathWidth = 8;
+  const pathHeight = 15;
+  if (!isBrushActive) {
+    return null;
+  }
+  return (
+    <Group left={x + pathWidth / 2} top={(height - pathHeight) / 2}>
+      <path
+        fill="#f2f2f2"
+        d="M -4.5 0.5 L 3.5 0.5 L 3.5 15.5 L -4.5 15.5 L -4.5 0.5 M -1.5 4 L -1.5 12 M 0.5 4 L 0.5 12"
+        stroke="#999999"
+        strokeWidth="1"
+        style={{ cursor: "ew-resize" }}
+      />
+    </Group>
+  );
+}
+
+export default BrushChart;

src/components/charts/pieChart/Pie.tsx

@@ -0,0 +1,278 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import React, { useState } from "react";
+import Pie, { ProvidedProps, PieArcDatum } from "@visx/shape/lib/shapes/Pie";
+import { scaleOrdinal } from "@visx/scale";
+import { Group } from "@visx/group";
+import {
+  GradientPinkBlue,
+  GradientOrangeRed,
+  LinearGradient,
+} from "@visx/gradient";
+import { animated, useTransition, interpolate } from "@react-spring/web";
+import {
+  generateSummary,
+  SummaryItem,
+} from "../../../algorithm/DemographicsPieByGender";
+import {
+  summarizeSocialGroups,
+  SummaryItemSocial,
+} from "../../../algorithm/DemographicsPieBySocialGroup";
+
+interface demographics {
+  age: string;
+  gender: string;
+  percentage: number;
+  social_group: string;
+}
+
+const defaultMargin = { top: 20, right: 20, bottom: 20, left: 20 };
+
+export type PieProps = {
+  data: demographics[];
+  width: number;
+  height: number;
+  margin?: typeof defaultMargin;
+  animate?: boolean;
+  flag?: number;
+};
+
+export default function PieChart({
+  data,
+  width,
+  height,
+  margin = defaultMargin,
+  animate = true,
+  flag = 0,
+}: PieProps) {
+  const [selectedDemographic, setSelectedDemographic] = useState<string | null>(
+    null
+  );
+  const [selectedSocialGroup, setSelectedSocialGroup] = useState<string | null>(
+    null
+  );
+
+  const proccessedData = generateSummary(data);
+  const proccessedSocialGroupData = summarizeSocialGroups(data);
+  if (width < 10) return null;
+
+  const innerWidth = width - margin.left - margin.right;
+  const innerHeight = height - margin.top - margin.bottom;
+  const radius = Math.min(innerWidth, innerHeight) / 2;
+  const centerY = innerHeight / 2;
+  const centerX = innerWidth / 2;
+  const donutThickness = 50;
+
+  const backgroundDefined = () => {
+    switch (flag) {
+      case 0:
+        return (
+          <>
+            <rect
+              width={width}
+              height={height}
+              fill="url('#visx-pie-gradient')"
+            />
+            <LinearGradient
+              id="visx-pie-gradient"
+              from="#000000"
+              to="#3C3C3C"
+              rotate="-45"
+            />
+          </>
+        );
+      case 1:
+        return (
+          <>
+            <rect width={width} height={height} fill="url('#men')" />
+            <GradientOrangeRed id="men" />
+          </>
+        );
+      case 2:
+        return (
+          <>
+            <rect width={width} height={height} fill="url('#women')" />
+            <GradientPinkBlue id="women" />
+          </>
+        );
+    }
+  };
+  // accessor functions
+  const usage = (d: SummaryItem) => d.usage;
+  const frequency = (d: SummaryItemSocial) => d.usage;
+
+  // color scales
+  const getBrowserColor = scaleOrdinal({
+    domain: proccessedData.map((d) => d.label),
+    range: [
+      "rgba(255,255,255,0.7)",
+      "rgba(255,255,255,0.6)",
+      "rgba(255,255,255,0.5)",
+      "rgba(255,255,255,0.4)",
+      "rgba(255,255,255,0.3)",
+      "rgba(255,255,255,0.2)",
+      "rgba(255,255,255,0.1)",
+    ],
+  });
+
+  const getLetterFrequencyColor = scaleOrdinal({
+    domain: proccessedSocialGroupData.map((l) => l.label),
+    range: [
+      "rgba(93,30,91,1)",
+      "rgba(93,30,91,0.8)",
+      "rgba(93,30,91,0.6)",
+      "rgba(93,30,91,0.4)",
+    ],
+  });
+
+  return (
+    <svg
+      width={width}
+      height={height}
+      style={{
+        borderBottomLeftRadius: "14px",
+        borderBottomRightRadius: "14px",
+        boxShadow: "0 0 8px rgba(0, 0, 0, 0.2)",
+      }}
+    >
+      {backgroundDefined()}
+      <Group top={centerY + margin.top} left={centerX + margin.left}>
+        <Pie
+          data={
+            selectedDemographic
+              ? proccessedData.filter(
+                  ({ label }) => label === selectedDemographic
+                )
+              : proccessedData
+          }
+          pieValue={usage}
+          outerRadius={radius}
+          innerRadius={radius - donutThickness}
+          cornerRadius={3}
+          padAngle={0.005}
+        >
+          {(pie) => (
+            <AnimatedPie<SummaryItem>
+              {...pie}
+              animate={animate}
+              getKey={(arc) => arc.data.label}
+              onClickDatum={({ data: { label } }) =>
+                animate &&
+                setSelectedDemographic(
+                  selectedDemographic && selectedDemographic === label
+                    ? null
+                    : label
+                )
+              }
+              getColor={(arc) => getBrowserColor(arc.data.label)}
+            />
+          )}
+        </Pie>
+        <Pie
+          data={
+            selectedSocialGroup
+              ? proccessedSocialGroupData.filter(
+                  ({ label }) => label === selectedSocialGroup
+                )
+              : proccessedSocialGroupData
+          }
+          pieValue={frequency}
+          pieSortValues={() => -1}
+          outerRadius={radius - donutThickness * 1.3}
+        >
+          {(pie) => (
+            <AnimatedPie<SummaryItemSocial>
+              {...pie}
+              animate={animate}
+              getKey={({ data: { label } }) => label}
+              onClickDatum={({ data: { label } }) =>
+                animate &&
+                setSelectedSocialGroup(
+                  selectedSocialGroup && selectedSocialGroup === label
+                    ? null
+                    : label
+                )
+              }
+              getColor={({ data: { label } }) => getLetterFrequencyColor(label)}
+            />
+          )}
+        </Pie>
+      </Group>
+    </svg>
+  );
+}
+
+type AnimatedStyles = { startAngle: number; endAngle: number; opacity: number };
+
+const fromLeaveTransition = ({ endAngle }: PieArcDatum<any>) => ({
+  startAngle: endAngle > Math.PI ? 2 * Math.PI : 0,
+  endAngle: endAngle > Math.PI ? 2 * Math.PI : 0,
+  opacity: 0,
+});
+const enterUpdateTransition = ({ startAngle, endAngle }: PieArcDatum<any>) => ({
+  startAngle,
+  endAngle,
+  opacity: 1,
+});
+
+type AnimatedPieProps<Datum> = ProvidedProps<Datum> & {
+  animate?: boolean;
+  getKey: (d: PieArcDatum<Datum>) => string;
+  getColor: (d: PieArcDatum<Datum>) => string;
+  onClickDatum: (d: PieArcDatum<Datum>) => void;
+  delay?: number;
+};
+
+function AnimatedPie<Datum>({
+  animate,
+  arcs,
+  path,
+  getKey,
+  getColor,
+  onClickDatum,
+}: AnimatedPieProps<Datum>) {
+  const transitions = useTransition<PieArcDatum<Datum>, AnimatedStyles>(arcs, {
+    from: animate ? fromLeaveTransition : enterUpdateTransition,
+    enter: enterUpdateTransition,
+    update: enterUpdateTransition,
+    leave: animate ? fromLeaveTransition : enterUpdateTransition,
+    keys: getKey,
+  });
+  return transitions((props: any, arc: PieArcDatum<Datum>, { key }: any) => {
+    const [centroidX, centroidY] = path.centroid(arc);
+    const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.1;
+
+    return (
+      <g key={key}>
+        <animated.path
+          d={interpolate(
+            [props.startAngle, props.endAngle],
+            (startAngle: any, endAngle: any) =>
+              path({
+                ...arc,
+                startAngle,
+                endAngle,
+              })
+          )}
+          fill={getColor(arc)}
+          onClick={() => onClickDatum(arc)}
+          onTouchStart={() => onClickDatum(arc)}
+        />
+        {hasSpaceForLabel && (
+          <animated.g style={{ opacity: props.opacity }}>
+            <text
+              fill="white"
+              x={centroidX}
+              y={centroidY}
+              dy=".33em"
+              fontSize={9}
+              textAnchor="middle"
+              pointerEvents="none"
+            >
+              {getKey(arc)}
+            </text>
+          </animated.g>
+        )}
+      </g>
+    );
+  });
+}

src/components/charts/singleChart/SimpleChart.tsx

@@ -0,0 +1,141 @@
+import React, { useMemo, useState } from "react";
+import { Bar } from "@visx/shape";
+import { Group } from "@visx/group";
+import { LinearGradient } from "@visx/gradient";
+import { AxisBottom, AxisLeft } from "@visx/axis";
+import { scaleBand, scaleLinear } from "@visx/scale";
+
+const verticalMargin = 20;
+const leftMargin = 50;
+const barPadding = 4;
+
+interface originTopTen {
+  commune: string;
+  percentage: number;
+}
+export type BarsProps = {
+  data: originTopTen[];
+  width: number;
+  height: number;
+  events?: boolean;
+};
+
+const getCommuneValue = (d: originTopTen) => Number(d.percentage);
+
+export default function SimpleChart({
+  data,
+  width,
+  height,
+  events = false,
+}: BarsProps) {
+  const xMax = width - leftMargin;
+  const yMax = height - verticalMargin - 20;
+
+  const xScale = useMemo(
+    () =>
+      scaleBand<number>({
+        range: [0, xMax],
+        round: true,
+        domain: data.map((d: any) => d.commune),
+        paddingInner: 0.2,
+        paddingOuter: 0.1,
+      }),
+    [xMax]
+  );
+  const yScale = useMemo(
+    () =>
+      scaleLinear<number>({
+        range: [yMax, 0],
+        round: true,
+        domain: [0, Math.max(...data.map(getCommuneValue))],
+      }),
+    [yMax]
+  );
+
+  const [isHover, setIsHover] = useState(Array(data.length).fill(false));
+
+  return width < 10 ? null : (
+    <svg
+      width={width}
+      height={height}
+      style={{
+        borderBottomLeftRadius: "14px",
+        borderBottomRightRadius: "14px",
+        boxShadow: "0 0 8px rgba(0, 0, 0, 0.2)",
+      }}
+    >
+      <LinearGradient from="#351CAB" to="#621A61" id="teal" />
+      <rect width={width} height={height} fill="url(#teal)" />
+      <Group top={verticalMargin}>
+        {data.map((d: any, index: any) => {
+          const barWidth = xScale.bandwidth();
+          const barHeight = yMax - (yScale(d.percentage) ?? 0);
+          const barX = xScale(d.commune) ?? 0;
+          const barY = yMax - barHeight;
+          return (
+            <Bar
+              key={`bar-${d.commune}`}
+              className={isHover[index] ? "hovered" : ""}
+              style={{
+                cursor: "pointer",
+                transition: "all 0.5s",
+                opacity: "1",
+              }}
+              x={barX + 35}
+              y={barY - 10}
+              rx={5}
+              ry={5}
+              width={barWidth - barPadding}
+              height={barHeight}
+              fill={isHover[index] ? "#FFFFFF" : "#AAB1FF"}
+              onClick={() => {
+                if (events) alert(`clicked: ${JSON.stringify(d)}`);
+              }}
+              onMouseMove={() => {
+                const updatedHover = [...isHover];
+                updatedHover[index] = true;
+                setIsHover(updatedHover);
+              }}
+              onMouseLeave={() => {
+                const updatedHover = [...isHover];
+                updatedHover[index] = false;
+                setIsHover(updatedHover);
+              }}
+            />
+          );
+        })}
+        <AxisBottom
+          top={height - verticalMargin - 30}
+          left={leftMargin - 15}
+          scale={xScale}
+          tickStroke="white"
+          stroke="white"
+          strokeWidth={2}
+          tickLabelProps={() => ({
+            fill: "white",
+            fontSize: 12,
+            textAnchor: "middle",
+            fontWeight: "bold",
+          })}
+        />
+        <AxisLeft
+          left={leftMargin - 15}
+          top={verticalMargin - 30}
+          scale={yScale}
+          tickFormat={(value) => value.toString()}
+          tickStroke="white"
+          strokeWidth={2}
+          stroke="white"
+          tickLabelProps={() => ({
+            fill: "white",
+            fontSize: 11,
+            textAnchor: "end",
+            dy: "0.3em",
+            dx: "-0.25em",
+            fontWeight: "bold",
+          })}
+        />
+      </Group>
+    </svg>
+  );
+}

src/components/charts/singleChart/SimpleChartTripPurpose.tsx

@@ -0,0 +1,141 @@
+import React, { useMemo, useState } from "react";
+import { Bar } from "@visx/shape";
+import { Group } from "@visx/group";
+import { LinearGradient } from "@visx/gradient";
+import { AxisBottom, AxisLeft } from "@visx/axis";
+import { scaleBand, scaleLinear } from "@visx/scale";
+
+const verticalMargin = 20;
+const leftMargin = 50;
+const barPadding = 4;
+
+interface tripPurpose {
+  trip_purpose_group: string;
+  percentage: number;
+}
+export type BarsProps = {
+  data: tripPurpose[];
+  width: number;
+  height: number;
+  events?: boolean;
+};
+
+const getTripPurposeValue = (d: tripPurpose) => Number(d.percentage);
+
+export default function SimpleChartTripPurpose({
+  data,
+  width,
+  height,
+  events = false,
+}: BarsProps) {
+  const xMax = width - leftMargin;
+  const yMax = height - verticalMargin - 20;
+
+  const xScale = useMemo(
+    () =>
+      scaleBand<number>({
+        range: [0, xMax],
+        round: true,
+        domain: data.map((d: any) => d.trip_purpose_group),
+        paddingInner: 0.2,
+        paddingOuter: 0.1,
+      }),
+    [xMax]
+  );
+  const yScale = useMemo(
+    () =>
+      scaleLinear<number>({
+        range: [yMax, 0],
+        round: true,
+        domain: [0, Math.max(...data.map(getTripPurposeValue))],
+      }),
+    [yMax]
+  );
+
+  const [isHover, setIsHover] = useState(Array(data.length).fill(false));
+
+  return width < 10 ? null : (
+    <svg
+      width={width}
+      height={height}
+      style={{
+        borderBottomLeftRadius: "14px",
+        borderBottomRightRadius: "14px",
+        boxShadow: "0 0 8px rgba(0, 0, 0, 0.2)",
+      }}
+    >
+      <LinearGradient from="#351CAB" to="#621A61" id="teal" />
+      <rect width={width} height={height} fill="url(#teal)" />
+      <Group top={verticalMargin}>
+        {data.map((d: any, index: any) => {
+          const barWidth = xScale.bandwidth();
+          const barHeight = yMax - (yScale(d.percentage) ?? 0);
+          const barX = xScale(d.trip_purpose_group) ?? 0;
+          const barY = yMax - barHeight;
+          return (
+            <Bar
+              key={`bar-${d.trip_purpose_group}`}
+              className={isHover[index] ? "hovered" : ""}
+              style={{
+                cursor: "pointer",
+                transition: "all 0.5s",
+                opacity: "1",
+              }}
+              x={barX + 35}
+              y={barY - 10}
+              rx={5}
+              ry={5}
+              width={barWidth - barPadding}
+              height={barHeight}
+              fill={isHover[index] ? "#FFFFFF" : "#AAB1FF"}
+              onClick={() => {
+                if (events) alert(`clicked: ${JSON.stringify(d)}`);
+              }}
+              onMouseMove={() => {
+                const updatedHover = [...isHover];
+                updatedHover[index] = true;
+                setIsHover(updatedHover);
+              }}
+              onMouseLeave={() => {
+                const updatedHover = [...isHover];
+                updatedHover[index] = false;
+                setIsHover(updatedHover);
+              }}
+            />
+          );
+        })}
+        <AxisBottom
+          top={height - verticalMargin - 30}
+          left={leftMargin - 15}
+          scale={xScale}
+          tickStroke="white"
+          stroke="white"
+          strokeWidth={2}
+          tickLabelProps={() => ({
+            fill: "white",
+            fontSize: 10,
+            textAnchor: "middle",
+            fontWeight: "bold",
+          })}
+        />
+        <AxisLeft
+          left={leftMargin - 15}
+          top={verticalMargin - 30}
+          scale={yScale}
+          tickFormat={(value) => value.toString()}
+          tickStroke="white"
+          strokeWidth={2}
+          stroke="white"
+          tickLabelProps={() => ({
+            fill: "white",
+            fontSize: 11,
+            textAnchor: "end",
+            dy: "0.3em",
+            dx: "-0.25em",
+            fontWeight: "bold",
+          })}
+        />
+      </Group>
+    </svg>
+  );
+}

src/components/charts/tripeChart/DayTypeGraph.tsx

@@ -0,0 +1,204 @@
+import React, { useState } from "react";
+import { Group } from "@visx/group";
+import { BarGroup } from "@visx/shape";
+import { AxisBottom, AxisLeft } from "@visx/axis";
+import { scaleBand, scaleLinear, scaleOrdinal } from "@visx/scale";
+import { LinearGradient } from "@visx/gradient";
+
+const GRADIENT_ID = "brush_gradient";
+
+export const green = "#ffffff";
+export const background = "#ff452f";
+export const background2 = "#ff8677";
+
+export type BarGroupProps = {
+  data:
+    | {
+        day_type: string;
+        hour: number;
+        percentage: number;
+      }[]
+    | undefined;
+  width: number;
+  height: number;
+  margin?: { top: number; right: number; bottom: number; left: number };
+  events?: boolean;
+};
+
+const defaultMargin = { top: 40, right: 0, bottom: 40, left: 60 };
+
+export default function DayTypeGraph({
+  data,
+  width,
+  height,
+  events = false,
+  margin = defaultMargin,
+}: BarGroupProps) {
+  interface NewHourlyPercentage {
+    hour: number;
+    SATURDAY: number;
+    SUNDAY_PUBLIC_HOLIDAY: number;
+    WORKING_DAY: number;
+  }
+
+  function processRawDataToGraphData(
+    data:
+      | {
+          day_type: string;
+          hour: number;
+          percentage: number;
+        }[]
+      | undefined
+  ): NewHourlyPercentage[] {
+    const transformedData: NewHourlyPercentage[] = [];
+
+    if (!data || data === undefined) {
+      return transformedData;
+    }
+    for (let i = 0; i < 24; i++) {
+      const newObj: NewHourlyPercentage = {
+        hour: i,
+        SATURDAY: 0,
+        SUNDAY_PUBLIC_HOLIDAY: 0,
+        WORKING_DAY: 0,
+      };
+
+      transformedData.push(newObj);
+    }
+
+    for (let index = 0; data[index]; index++) {
+      if (data[index].day_type === "SATURDAY") {
+        transformedData[data[index].hour].hour = data[index].hour;
+        transformedData[data[index].hour].SATURDAY = data[index].percentage;
+      } else if (data[index].day_type === "SUNDAY_&_PUBLIC_HOLIDAY") {
+        transformedData[data[index].hour].hour = data[index].hour;
+        transformedData[data[index].hour].SUNDAY_PUBLIC_HOLIDAY =
+          data[index].percentage;
+      } else {
+        transformedData[data[index].hour].hour = data[index].hour;
+        transformedData[data[index].hour].WORKING_DAY = data[index].percentage;
+      }
+    }
+
+    return transformedData;
+  }
+
+  const [currentData, setCurrentData] = useState<NewHourlyPercentage[]>(
+    processRawDataToGraphData(data)
+  );
+
+  const keys = ["SATURDAY", "SUNDAY_PUBLIC_HOLIDAY", "WORKING_DAY"];
+
+  const getDate = (d: any) => d.hour;
+
+  const hourScale = scaleBand<number>({
+    domain: currentData.map((d) => d.hour),
+    padding: 0.2,
+  });
+  const dayScale = scaleBand<string>({
+    domain: keys,
+    padding: 0.2,
+  });
+  const percentageScale = scaleLinear<number>({
+    domain: [0, 0.12],
+  });
+
+  const colorScale = scaleOrdinal<string, string>({
+    domain: keys,
+    range: ["#AAB1FF", "#6A4CEE", "#FABA00"],
+  });
+
+  const xMax = width - margin.left - margin.right;
+  const yMax = height - margin.top - margin.bottom;
+
+  hourScale.rangeRound([0, xMax]);
+  dayScale.rangeRound([0, hourScale.bandwidth()]);
+  percentageScale.range([yMax, 0]);
+
+  return width < 10 ? null : (
+    <svg
+      width={width}
+      height={height}
+      style={{
+        borderBottomLeftRadius: "14px",
+        borderBottomRightRadius: "14px",
+        boxShadow: "0 0 8px rgba(0, 0, 0, 0.2)",
+      }}
+    >
+      <rect x={0} y={0} width={width} height={height} />
+      <LinearGradient
+        id={GRADIENT_ID}
+        from={background}
+        to={background2}
+        rotate={45}
+      />
+      <Group top={margin.top} left={margin.left}>
+        <BarGroup
+          data={currentData}
+          keys={keys}
+          height={yMax}
+          x0={getDate}
+          x0Scale={hourScale}
+          x1Scale={dayScale}
+          yScale={percentageScale}
+          color={colorScale}
+        >
+          {(barGroups) =>
+            barGroups.map((barGroup) => (
+              <Group
+                key={`bar-group-${barGroup.index}-${barGroup.x0}`}
+                left={barGroup.x0}
+              >
+                {barGroup.bars.map((bar) => (
+                  <rect
+                    key={`bar-group-bar-${barGroup.index}-${bar.index}-${bar.value}-${bar.key}`}
+                    x={bar.x}
+                    y={bar.y}
+                    width={bar.width}
+                    height={bar.height}
+                    fill={bar.color}
+                    rx={4}
+                    onClick={() => {
+                      if (!events) return;
+                      const { key, value } = bar;
+                      alert(JSON.stringify({ key, value }));
+                    }}
+                  />
+                ))}
+              </Group>
+            ))
+          }
+        </BarGroup>
+      </Group>
+      <AxisLeft
+        left={margin.left - 10}
+        top={margin.top}
+        scale={percentageScale}
+        numTicks={5}
+        stroke="#ffffff"
+        tickLabelProps={() => ({
+          fill: "#ffffff",
+          fontSize: 11,
+          textAnchor: "end",
+          dy: "0.3em",
+          dx: "-0.25em",
+          fontWeight: "bold",
+        })}
+      />
+      <AxisBottom
+        top={yMax + margin.top}
+        left={margin.left}
+        scale={hourScale}
+        stroke={green}
+        tickStroke={green}
+        hideAxisLine
+        tickLabelProps={{
+          fill: "#ffffff",
+          fontSize: 11,
+          textAnchor: "middle",
+          fontWeight: "bold",
+        }}
+      />
+    </svg>
+  );
+}

src/components/charts/wordCloudChart/CloudWord.tsx

@@ -0,0 +1,114 @@
+import React, { useState } from "react";
+import { Text } from "@visx/text";
+import { scaleLog } from "@visx/scale";
+import Wordcloud from "@visx/wordcloud/lib/Wordcloud";
+
+interface ExampleProps {
+  demographicWords: string;
+  width: number;
+  height: number;
+  showControls?: boolean;
+}
+
+export interface WordData {
+  text: string;
+  value: number;
+}
+
+export default function CloudWord({
+  demographicWords,
+  width,
+  height,
+  showControls = true,
+}: ExampleProps) {
+  function wordFreq(text: string): WordData[] {
+    const words: string[] = text.replace(/\./g, "").split(/\s/);
+    const freqMap: Record<string, number> = {};
+
+    for (const w of words) {
+      if (!freqMap[w]) freqMap[w] = 0;
+      freqMap[w] += 1;
+    }
+    return Object.keys(freqMap).map((word) => ({
+      text: word,
+      value: freqMap[word],
+    }));
+  }
+
+  function getRotationDegree() {
+    const rand = Math.random();
+    const degree = rand > 0.5 ? 60 : -60;
+    return rand * degree;
+  }
+
+  const words = wordFreq(demographicWords);
+
+  const fontScale = scaleLog({
+    domain: [
+      Math.min(...words.map((w) => w.value)),
+      Math.max(...words.map((w) => w.value)),
+    ],
+    range: [10, 100],
+  });
+  const fontSizeSetter = (datum: WordData) => fontScale(datum.value);
+
+  const fixedValueGenerator = () => 0.5;
+
+  type SpiralType = "archimedean" | "rectangular";
+
+  // eslint-disable-next-line
+  const [spiralType, setSpiralType] = useState<SpiralType>("archimedean");
+  // eslint-disable-next-line
+  const [withRotation, setWithRotation] = useState(false);
+
+  return (
+    <div className="wordcloud">
+      <Wordcloud
+        words={words}
+        width={width}
+        height={height}
+        fontSize={fontSizeSetter}
+        font={"Impact"}
+        padding={2}
+        spiral={spiralType}
+        rotate={withRotation ? getRotationDegree : 0}
+        random={fixedValueGenerator}
+      >
+        {(cloudWords) =>
+          cloudWords.map((w, i) => (
+            <Text
+              key={w.text}
+              fill={"#00000"}
+              textAnchor={"middle"}
+              transform={`translate(${w.x}, ${w.y}) rotate(${w.rotate})`}
+              fontSize={w.size}
+              fontFamily={w.font}
+            >
+              {w.text}
+            </Text>
+          ))
+        }
+      </Wordcloud>
+      <style>{`
+        .wordcloud {
+          display: flex;
+          flex-direction: column;
+          user-select: none;
+        }
+        .wordcloud svg {
+          margin: 1rem 0;
+          cursor: pointer;
+        }
+        .wordcloud label {
+          display: inline-flex;
+          align-items: center;
+          font-size: 14px;
+          margin-right: 8px;
+        }
+        .wordcloud textarea {
+          min-height: 100px;
+        }
+      `}</style>
+    </div>
+  );
+}

src/components/generalInformation/dropdown/DropDown.tsx

@@ -0,0 +1,78 @@
+import { Fragment } from "react";
+import { Listbox, Transition } from "@headlessui/react";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid";
+import { Poi } from "../../../redux/types/Poi";
+
+type DropDownProps = {
+  poiList: Poi[];
+  selectedPoi: Poi;
+  setSelectedPoi: React.Dispatch<React.SetStateAction<Poi>>;
+};
+
+const DropDown: React.FC<DropDownProps> = ({
+  poiList,
+  selectedPoi,
+  setSelectedPoi,
+}) => {
+  return (
+    <div className="w-72" style={{ fontFamily: "airbnb_light" }}>
+      <Listbox value={selectedPoi} onChange={setSelectedPoi}>
+        <div className="relative mt-1">
+          <Listbox.Button
+            className="relative w-full cursor-pointer rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm border border-gray-300" // Add border classes here
+          >
+            <span className="block truncate">{selectedPoi.address}</span>
+            <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+              <ChevronUpDownIcon
+                className="h-5 w-5 text-gray-400"
+                aria-hidden="true"
+              />
+            </span>
+          </Listbox.Button>
+          <Transition
+            as={Fragment}
+            leave="transition ease-in duration-100"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <Listbox.Options
+              className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm border border-gray-300" // Add border classes here
+              style={{ zIndex: 9999 }}
+            >
+              {poiList.map((poi, index) => (
+                <Listbox.Option
+                  key={index}
+                  className={({ active }) =>
+                    `relative cursor-pointer select-none py-2 pl-10 pr-4 ${
+                      active ? "bg-[#ECEEFF] text-[#00000]" : "text-gray-900"
+                    }`
+                  }
+                  value={poi}
+                >
+                  {({ selected }) => (
+                    <>
+                      <span
+                        className={`block truncate ${
+                          selected ? "font-medium" : "font-normal"
+                        }`}
+                      >
+                        {poi.address}
+                      </span>
+                      {selected ? (
+                        <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-[#9BA4FF]">
+                          <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                        </span>
+                      ) : null}
+                    </>
+                  )}
+                </Listbox.Option>
+              ))}
+            </Listbox.Options>
+          </Transition>
+        </div>
+      </Listbox>
+    </div>
+  );
+};
+
+export default DropDown;

src/components/generalInformation/legend/Legend.tsx

@@ -0,0 +1,343 @@
+import React from "react";
+import { format } from "@visx/vendor/d3-format";
+import {
+  scaleLinear,
+  scaleOrdinal,
+  scaleThreshold,
+  scaleQuantile,
+} from "@visx/scale";
+import { GlyphStar, GlyphWye, GlyphTriangle, GlyphDiamond } from "@visx/glyph";
+import {
+  Legend,
+  LegendLinear,
+  LegendQuantile,
+  LegendOrdinal,
+  LegendSize,
+  LegendThreshold,
+  LegendItem,
+  LegendLabel,
+} from "@visx/legend";
+
+const oneDecimalFormat = format(".1f");
+
+const sizeScale = scaleLinear<number>({
+  domain: [0, 10],
+  range: [5, 13],
+});
+
+const sizeColorScale = scaleLinear({
+  domain: [0, 10],
+  range: ["#75fcfc", "#3236b8"],
+});
+
+const quantileScale = scaleQuantile({
+  domain: [0, 0.15],
+  range: ["#eb4d70", "#f19938", "#6ce18b", "#78f6ef", "#9096f8"],
+});
+
+const linearScale = scaleLinear({
+  domain: [0, 10],
+  range: ["#ed4fbb", "#e9a039"],
+});
+
+const thresholdScale = scaleThreshold({
+  domain: [0.01, 0.02, 0.04, 0.06, 0.08],
+  range: ["#f2f0f7", "#dadaeb", "#bcbddc", "#9e9ac8", "#756bb1", "#54278f"],
+});
+
+const ordinalColorScale = scaleOrdinal({
+  domain: ["a", "b", "c", "d"],
+  range: ["#66d981", "#71f5ef", "#4899f1", "#7d81f6"],
+});
+
+const ordinalColor2Scale = scaleOrdinal({
+  domain: ["a", "b", "c", "d"],
+  range: ["#fae856", "#f29b38", "#e64357", "#8386f7"],
+});
+
+const shapeScale = scaleOrdinal<string, React.FC | React.ReactNode>({
+  domain: ["a", "b", "c", "d", "e"],
+  range: [
+    <GlyphStar key="a" size={50} top={50 / 6} left={50 / 6} fill="#dd59b8" />,
+    <GlyphWye key="b" size={50} top={50 / 6} left={50 / 6} fill="#de6a9a" />,
+    <GlyphTriangle
+      key="c"
+      size={50}
+      top={50 / 6}
+      left={50 / 6}
+      fill="#de7d7b"
+    />,
+    <GlyphDiamond
+      key="d"
+      size={50}
+      top={50 / 6}
+      left={50 / 6}
+      fill="#df905f"
+    />,
+    () => (
+      <text key="e" fontSize="12" dy="1em" dx=".33em" fill="#e0a346">
+        $
+      </text>
+    ),
+  ],
+});
+
+function LegendDemo({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="legend">
+      <div className="title">{title}</div>
+      {children}
+      <style>{`
+        .legend {
+          line-height: 0.9em;
+          color: #efefef;
+          font-size: 10px;
+          font-family: arial;
+          padding: 10px 10px;
+          float: left;
+          border: 1px solid rgba(255, 255, 255, 0.3);
+          border-radius: 8px;
+          margin: 5px 5px;
+        }
+        .title {
+          font-size: 12px;
+          margin-bottom: 10px;
+          font-weight: 100;
+        }
+      `}</style>
+    </div>
+  );
+}
+
+const legendGlyphSize = 15;
+
+export default function LegendChart({
+  width,
+  height,
+  events = false,
+}: {
+  width?: number;
+  height?: number;
+  events?: boolean;
+}) {
+  return (
+    <div className="legends" style={{ width: width, height: height }}>
+      <LegendDemo title="Size">
+        <LegendSize scale={sizeScale}>
+          {(labels) =>
+            labels.map((label) => {
+              const size = sizeScale(label.datum) ?? 0;
+              const color = sizeColorScale(label.datum);
+              return (
+                <LegendItem
+                  key={`legend-${label.text}-${label.index}`}
+                  onClick={() => {
+                    if (events) alert(`clicked: ${JSON.stringify(label)}`);
+                  }}
+                >
+                  <svg width={size} height={size} style={{ margin: "5px 0" }}>
+                    <circle
+                      fill={color}
+                      r={size / 2}
+                      cx={size / 2}
+                      cy={size / 2}
+                    />
+                  </svg>
+                  <LegendLabel align="left" margin="0 4px">
+                    {label.text}
+                  </LegendLabel>
+                </LegendItem>
+              );
+            })
+          }
+        </LegendSize>
+      </LegendDemo>
+      <LegendDemo title="Quantile">
+        <LegendQuantile scale={quantileScale}>
+          {(labels) =>
+            labels.map((label, i) => (
+              <LegendItem
+                key={`legend-${i}`}
+                onClick={() => {
+                  if (events) alert(`clicked: ${JSON.stringify(label)}`);
+                }}
+              >
+                <svg
+                  width={legendGlyphSize}
+                  height={legendGlyphSize}
+                  style={{ margin: "2px 0" }}
+                >
+                  <circle
+                    fill={label.value}
+                    r={legendGlyphSize / 2}
+                    cx={legendGlyphSize / 2}
+                    cy={legendGlyphSize / 2}
+                  />
+                </svg>
+                <LegendLabel align="left" margin="0 4px">
+                  {label.text}
+                </LegendLabel>
+              </LegendItem>
+            ))
+          }
+        </LegendQuantile>
+      </LegendDemo>
+      <LegendDemo title="Linear">
+        <LegendLinear
+          scale={linearScale}
+          labelFormat={(d, i) => (i % 2 === 0 ? oneDecimalFormat(d) : "")}
+        >
+          {(labels) =>
+            labels.map((label, i) => (
+              <LegendItem
+                key={`legend-quantile-${i}`}
+                onClick={() => {
+                  if (events) alert(`clicked: ${JSON.stringify(label)}`);
+                }}
+              >
+                <svg
+                  width={legendGlyphSize}
+                  height={legendGlyphSize}
+                  style={{ margin: "2px 0" }}
+                >
+                  <circle
+                    fill={label.value}
+                    r={legendGlyphSize / 2}
+                    cx={legendGlyphSize / 2}
+                    cy={legendGlyphSize / 2}
+                  />
+                </svg>
+                <LegendLabel align="left" margin="0 4px">
+                  {label.text}
+                </LegendLabel>
+              </LegendItem>
+            ))
+          }
+        </LegendLinear>
+      </LegendDemo>
+      <LegendDemo title="Threshold">
+        <LegendThreshold scale={thresholdScale}>
+          {(labels) =>
+            labels.reverse().map((label, i) => (
+              <LegendItem
+                key={`legend-quantile-${i}`}
+                margin="1px 0"
+                onClick={() => {
+                  if (events) alert(`clicked: ${JSON.stringify(label)}`);
+                }}
+              >
+                <svg width={legendGlyphSize} height={legendGlyphSize}>
+                  <rect
+                    fill={label.value}
+                    width={legendGlyphSize}
+                    height={legendGlyphSize}
+                  />
+                </svg>
+                <LegendLabel align="left" margin="2px 0 0 10px">
+                  {label.text}
+                </LegendLabel>
+              </LegendItem>
+            ))
+          }
+        </LegendThreshold>
+      </LegendDemo>
+      <LegendDemo title="Ordinal">
+        <LegendOrdinal
+          scale={ordinalColorScale}
+          labelFormat={(label) => `${label.toUpperCase()}`}
+        >
+          {(labels) => (
+            <div style={{ display: "flex", flexDirection: "row" }}>
+              {labels.map((label, i) => (
+                <LegendItem
+                  key={`legend-quantile-${i}`}
+                  margin="0 5px"
+                  onClick={() => {
+                    if (events) alert(`clicked: ${JSON.stringify(label)}`);
+                  }}
+                >
+                  <svg width={legendGlyphSize} height={legendGlyphSize}>
+                    <rect
+                      fill={label.value}
+                      width={legendGlyphSize}
+                      height={legendGlyphSize}
+                    />
+                  </svg>
+                  <LegendLabel align="left" margin="0 0 0 4px">
+                    {label.text}
+                  </LegendLabel>
+                </LegendItem>
+              ))}
+            </div>
+          )}
+        </LegendOrdinal>
+      </LegendDemo>
+      <LegendDemo title="Custom Legend">
+        <Legend scale={shapeScale}>
+          {(labels) => (
+            <div style={{ display: "flex", flexDirection: "row" }}>
+              {labels.map((label, i) => {
+                const color = ordinalColor2Scale(label.datum);
+                const shape = shapeScale(label.datum);
+                const isValidElement = React.isValidElement(shape);
+                return (
+                  <LegendItem
+                    key={`legend-quantile-${i}`}
+                    margin="0 4px 0 0"
+                    flexDirection="column"
+                    onClick={() => {
+                      const { datum, index } = label;
+                      if (events)
+                        alert(
+                          `clicked: ${JSON.stringify({ datum, color, index })}`
+                        );
+                    }}
+                  >
+                    <svg
+                      width={legendGlyphSize}
+                      height={legendGlyphSize}
+                      style={{ margin: "0 0 8px 0" }}
+                    >
+                      {isValidElement
+                        ? React.cloneElement(shape as React.ReactElement)
+                        : React.createElement(
+                            shape as React.ComponentType<{ fill: string }>,
+                            {
+                              fill: color,
+                            }
+                          )}
+                    </svg>
+                    <LegendLabel align="left" margin={0}>
+                      {label.text}
+                    </LegendLabel>
+                  </LegendItem>
+                );
+              })}
+            </div>
+          )}
+        </Legend>
+      </LegendDemo>
+
+      <style>{`
+        .legends {
+          font-family: arial;
+          font-weight: 900;
+          background-color: black;
+          border-radius: 14px;
+          padding: 24px 24px 24px 32px;
+          overflow-y: auto;
+          flex-grow: 1;
+        }
+        .chart h2 {
+          margin-left: 10px;
+        }
+      `}</style>
+    </div>
+  );
+}

src/components/main/GraphSections.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { Poi } from "../../redux/types/Poi";
+import DemographicsSection from "../../sections/demographics";
+import DescriptionSection from "../../sections/description";
+import FootfallSection from "../../sections/footfall";
+import ModeSection from "../../sections/mode";
+import InformationSection from "../../sections/information";
+import TraficSection from "../../sections/trafic";
+
+type GraphSectionsProps = {
+  selectedPoi: Poi;
+  isDemographicsSection: boolean;
+  isFootfallSection: boolean;
+  isModeSection: boolean;
+  isInformationSection: boolean;
+  isTraficSection: boolean;
+};
+
+const GraphSections = ({
+  selectedPoi,
+  isDemographicsSection,
+  isFootfallSection,
+  isModeSection,
+  isInformationSection,
+  isTraficSection,
+}: GraphSectionsProps) => {
+  const renderSection = (state: boolean, section: JSX.Element) => {
+    return state ? section : null;
+  };
+
+  return (
+    <>
+      <DescriptionSection selectedPoi={selectedPoi} />
+      {renderSection(
+        isDemographicsSection,
+        <DemographicsSection selectedPoi={selectedPoi} />
+      )}
+      {renderSection(
+        isFootfallSection,
+        <FootfallSection selectedPoi={selectedPoi} />
+      )}
+      {renderSection(isModeSection, <ModeSection selectedPoi={selectedPoi} />)}
+      {renderSection(
+        isInformationSection,
+        <InformationSection selectedPoi={selectedPoi} />
+      )}
+      {renderSection(
+        isTraficSection,
+        <TraficSection selectedPoi={selectedPoi} />
+      )}
+    </>
+  );
+};
+
+export default GraphSections;

src/constants/main.ts

@@ -0,0 +1 @@
+export const DEMOGRAPHICS_SECTION = 1;

src/declarations.d.ts

@@ -0,0 +1,4 @@
+declare module "*.png" {
+  const value: string;
+  export default value;
+}

src/index.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import store from "./redux/store/store";
+import { Provider } from "react-redux";
+import "./styles/global/index.css";
+import "./assets/fonts/fonts.css";
+// import * as dotenv from "dotenv";
+
+// dotenv.config();
+
+const root = ReactDOM.createRoot(
+  document.getElementById("root") as HTMLElement
+);
+root.render(
+  <Provider store={store}>
+    <App />
+  </Provider>
+);

src/redux/actions/poiActions.ts

@@ -0,0 +1,6 @@
+import { createAction } from "@reduxjs/toolkit";
+import { Poi } from "../types/Poi";
+
+export const fetchPoiRequest = createAction("poi/fetchPoiRequest");
+export const fetchPoiSuccess = createAction<Poi[]>("poi/fetchPoiSuccess");
+export const fetchPoiFailure = createAction<string>("poi/fetchPoiFailure");

src/redux/reducers/poiReducer.ts

@@ -0,0 +1,37 @@
+import { createReducer } from "@reduxjs/toolkit";
+import { Poi } from "../types/Poi";
+import {
+  fetchPoiRequest,
+  fetchPoiSuccess,
+  fetchPoiFailure,
+} from "../actions/poiActions";
+
+interface PoiState {
+  data: Poi[] | null;
+  loading: boolean;
+  error: string | null;
+}
+
+const initialState: PoiState = {
+  data: null,
+  loading: false,
+  error: null,
+};
+
+const poiReducer = createReducer(initialState, (builder) => {
+  builder
+    .addCase(fetchPoiRequest, (state) => {
+      state.loading = true;
+      state.error = null;
+    })
+    .addCase(fetchPoiSuccess, (state, action) => {
+      state.loading = false;
+      state.data = action.payload;
+    })
+    .addCase(fetchPoiFailure, (state, action) => {
+      state.loading = false;
+      state.error = action.payload;
+    });
+});
+
+export default poiReducer;

src/redux/sagas/poiSaga.ts

@@ -0,0 +1,31 @@
+import { put, takeLatest, call } from "redux-saga/effects";
+import axios, { AxiosResponse, AxiosError, AxiosRequestConfig } from "axios";
+import {
+  fetchPoiRequest,
+  fetchPoiSuccess,
+  fetchPoiFailure,
+} from "../actions/poiActions";
+import { Poi } from "../types/Poi";
+
+function* fetchPoiData() {
+  try {
+    const config: AxiosRequestConfig = {
+      headers: {
+        key: "", // no more credits
+      },
+    };
+
+    const response: AxiosResponse = yield call(() =>
+      axios.get("https://api.seiki.co/v1/pois", config)
+    );
+    const data = response.data as Poi[];
+    yield put(fetchPoiSuccess(data));
+  } catch (error) {
+    const errorMessage = (error as AxiosError).message || "An error occurred.";
+    yield put(fetchPoiFailure(errorMessage));
+  }
+}
+
+export function* watchFetchPoi() {
+  yield takeLatest(fetchPoiRequest.type, fetchPoiData);
+}

src/redux/store/store.ts

@@ -0,0 +1,19 @@
+import { configureStore } from "@reduxjs/toolkit";
+import createSagaMiddleware from "redux-saga";
+import poiReducer from "../reducers/poiReducer";
+import { watchFetchPoi } from "../sagas/poiSaga";
+
+const sagaMiddleware = createSagaMiddleware();
+
+const store = configureStore({
+  reducer: {
+    poi: poiReducer,
+  },
+  middleware: [sagaMiddleware],
+});
+
+sagaMiddleware.run(watchFetchPoi);
+
+export type RootState = ReturnType<typeof store.getState>;
+
+export default store;

src/redux/types/Poi.ts

@@ -0,0 +1,62 @@
+export interface Poi {
+  id: string;
+  lat: number;
+  lng: number;
+  address: string;
+  ts_created: string;
+  ts_updated: string;
+  error: string | null;
+  state: string | null;
+  data: {
+    footfall: {
+      avg_daily_number: number;
+      daytype_hour_distribution: {
+        day_type: string;
+        hour: number;
+        percentage: number;
+      }[];
+      week_distribution: {
+        indice_base_100: number;
+        week: number;
+      }[];
+    };
+    mode: {
+      soft_mode: number;
+      vehicle: number;
+    };
+    origin_top_10: {
+      commune: string;
+      percentage: number;
+    }[];
+    section: {
+      avg_speed: number;
+      commune: string;
+      department: string;
+      geometry: string;
+      iris: string;
+      length: number;
+      max_speed: number;
+      name: string;
+      nbr_direction: number;
+      region: string;
+    };
+    socio_demography: {
+      age: string;
+      gender: string;
+      percentage: number;
+      social_group: string;
+    }[];
+    traffic: {
+      avg_daily_flow: number;
+      daytype_hour_distribution: {
+        day_type: string;
+        hour: number;
+        percentage: number;
+      }[];
+    };
+    trip_purpose: {
+      percentage: number;
+      trip_purpose_group: string;
+    }[];
+  };
+}

src/sections/demographics/index.tsx

@@ -0,0 +1,95 @@
+import { useState, useEffect } from "react";
+import ParentSize from "@visx/responsive/lib/components/ParentSize";
+import PieChart from "../../components/charts/pieChart/Pie";
+import { Poi } from "../../redux/types/Poi";
+import LegendChart from "../../components/generalInformation/legend/Legend";
+import CloudWord from "../../components/charts/wordCloudChart/CloudWord";
+import { characterizeSocioDemographicData } from "../../algorithm/WordCloud";
+
+type DemographicsSectionProps = {
+  selectedPoi: Poi;
+};
+
+const DemographicsSection: React.FC<DemographicsSectionProps> = ({
+  selectedPoi,
+}) => {
+  return (
+    <div className="demographicsSection">
+      <div className="mainDemoPie">
+        <div className="mainDemoPieTitle">Total Socio Demographics</div>
+        <ParentSize>
+          {({ width, height }) => (
+            <PieChart
+              data={selectedPoi?.data.socio_demography}
+              width={width}
+              height={height}
+              flag={0}
+            />
+          )}
+        </ParentSize>
+      </div>
+      <div className="otherDemoPieWrapper">
+        <div className="menAndWomenPies">
+          <div className="menPie">
+            <div className="weekDistributionTitle">
+              Masculine Socio Demographics
+            </div>
+            <ParentSize>
+              {({ width, height }) => (
+                <PieChart
+                  data={selectedPoi?.data.socio_demography.filter(
+                    (item) => item.gender.toUpperCase() === "MALE"
+                  )}
+                  width={width}
+                  height={height}
+                  flag={1}
+                />
+              )}
+            </ParentSize>
+          </div>
+          <div className="womenPie">
+            <div className="weekDistributionTitle">
+              Feminine Socio Demographics
+            </div>
+            <ParentSize>
+              {({ width, height }) => (
+                <PieChart
+                  data={selectedPoi?.data.socio_demography.filter(
+                    (item) => item.gender.toUpperCase() === "FEMALE"
+                  )}
+                  width={width}
+                  height={height}
+                  flag={2}
+                />
+              )}
+            </ParentSize>
+          </div>
+        </div>
+        <div className="LegendChart">
+          <div className="wordCloud">
+            <ParentSize>
+              {({ width, height }) => (
+                <LegendChart width={width} height={height} />
+              )}
+            </ParentSize>
+          </div>
+          <div className="wordCloud">
+            <ParentSize>
+              {({ width, height }) => (
+                <CloudWord
+                  demographicWords={characterizeSocioDemographicData(
+                    selectedPoi?.data.socio_demography
+                  )}
+                  width={width}
+                  height={height - 15}
+                />
+              )}
+            </ParentSize>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DemographicsSection;

src/sections/description/index.tsx

@@ -0,0 +1,39 @@
+import { useState, useEffect } from "react";
+import { Poi } from "../../redux/types/Poi";
+import { convertModeObjectToArray } from "../../utils/convertModeObjectToArray";
+import { FaWalking } from "react-icons/fa";
+import { AiFillCar } from "react-icons/ai";
+import { formatDate } from "../../utils/formatDate";
+import { FaLocationDot } from "react-icons/fa6";
+import { TbWorldLatitude, TbWorldLongitude } from "react-icons/tb";
+import { BiTimeFive } from "react-icons/bi";
+
+type DemographicsSectionProps = {
+  selectedPoi: Poi;
+};
+const DescriptionSection: React.FC<DemographicsSectionProps> = ({
+  selectedPoi,
+}) => {
+  return (
+    <div className="sectionBasicInfoOne">
+      <div className="basicInfoLabelsOne">
+        <FaLocationDot style={{ fontSize: "25px", marginRight: "10px" }} />
+        {selectedPoi ? selectedPoi?.address : "unknown"}
+      </div>
+      <div className="basicInfoLabelsOne">
+        <TbWorldLatitude style={{ fontSize: "25px", marginRight: "10px" }} />
+        {selectedPoi ? selectedPoi?.lat : "unknown"}
+      </div>
+      <div className="basicInfoLabelsOne">
+        <TbWorldLongitude style={{ fontSize: "25px", marginRight: "10px" }} />
+        {selectedPoi ? selectedPoi?.lng : "unknown"}
+      </div>
+      <div className="basicInfoLabelsOne">
+        <BiTimeFive style={{ fontSize: "25px", marginRight: "10px" }} />
+        {selectedPoi ? formatDate(selectedPoi?.ts_updated) : "unknown"}
+      </div>
+    </div>
+  );
+};
+
+export default DescriptionSection;

src/sections/drawer/index.tsx

@@ -0,0 +1,303 @@
+import { useState, useEffect } from "react";
+import seiki from "../../assets/images/seiki.png";
+import { BsSearch, BsChevronDown } from "react-icons/bs";
+import { FaMapLocationDot, FaLocationDot } from "react-icons/fa6";
+import { AiFillCar, AiFillDatabase } from "react-icons/ai";
+import { RiDashboardFill } from "react-icons/ri";
+import { IoFootstepsSharp, IoStatsChartSharp } from "react-icons/io5";
+import { FaBusAlt, FaInfoCircle, FaMapMarkedAlt } from "react-icons/fa";
+import { Poi } from "../../redux/types/Poi";
+import FootfallSection from "../footfall";
+
+type DrawerSectionProps = {
+  poiList: Poi[];
+  setSelectedPoi: React.Dispatch<React.SetStateAction<Poi>>;
+  isFootfallSection: boolean;
+  setFootfallSection: React.Dispatch<React.SetStateAction<boolean>>;
+  isModeSection: boolean;
+  setModeSection: React.Dispatch<React.SetStateAction<boolean>>;
+  isDemographicsSection: boolean;
+  setDemographicsSection: React.Dispatch<React.SetStateAction<boolean>>;
+  isInformationSection: boolean;
+  setInformationSection: React.Dispatch<React.SetStateAction<boolean>>;
+  isTraficSection: boolean;
+  setTraficSection: React.Dispatch<React.SetStateAction<boolean>>;
+  isMapView: boolean;
+  setIsMapView: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+const DrawerSection: React.FC<DrawerSectionProps> = ({
+  poiList,
+  setSelectedPoi,
+  isFootfallSection,
+  setFootfallSection,
+  isModeSection,
+  setModeSection,
+  isDemographicsSection,
+  setDemographicsSection,
+  isInformationSection,
+  setInformationSection,
+  isTraficSection,
+  setTraficSection,
+  isMapView,
+  setIsMapView,
+}) => {
+  const [open, setOpen] = useState(true);
+  const [submenuOpen, setSubmenuOpen] = useState(false);
+
+  const Menus = [
+    {
+      title: "Points of interest",
+      icon: <FaLocationDot />,
+      submenu: true,
+      submenuItems: poiList,
+    },
+    {
+      title: "Footfall",
+      icon: <IoFootstepsSharp />,
+    },
+    {
+      title: "Mode",
+      icon: <AiFillCar />,
+    },
+    {
+      title: "Demographics",
+      icon: <IoStatsChartSharp />,
+    },
+    {
+      title: "Section info",
+      icon: <FaInfoCircle />,
+    },
+    {
+      title: "Trafic data",
+      icon: <AiFillDatabase />,
+    },
+  ];
+
+  return (
+    <div
+      className={`p-5 pt-8 ${open ? "w-72" : "w-20"} duration-300 relative`}
+      style={{ height: "100%", backgroundColor: "#191F20" }}
+    >
+      <div className="inline-flex">
+        <img
+          src={seiki}
+          width={40}
+          height={100}
+          className={`text-4xl rounded cursor-pointer block float-left mr-4 duration-500 ${
+            open && "rotate-[360deg]"
+          }`}
+          onClick={() => setOpen(!open)}
+        />
+        <h1
+          className={`text-white origin-left font-medium text-2xl duration-300 ${
+            !open && "scale-0"
+          }`}
+          style={{ fontFamily: "airbnb_semi_bold", fontSize: 35 }}
+        >
+          seiki
+        </h1>
+      </div>
+
+      <div
+        className={`flex items-center rounded-md bg-light-white mt-6 ${
+          !open ? "px-2.5" : "px-4"
+        } py-2`}
+      >
+        <BsSearch
+          className={`text-white text-lg block float-left cursor-pointer ${
+            open && "mr-2"
+          }`}
+        />
+        <input
+          type={"search"}
+          placeholder="Search"
+          className={`text-base bg-transparent w-full text-white focus:outline-none ${
+            !open && "hidden"
+          }`}
+        />
+      </div>
+
+      <ul className="pt-2">
+        <li
+          className={`text-gray-300 text-sm flex items-center gap-x-4 cursor-pointer p-2
+              hover:bg-light-white rounded-md mb-2`}
+        >
+          <span className="text-2xl block float-left">
+            <FaLocationDot />
+          </span>
+          <span
+            className={`text-base font-medium flex-1 duration-200 ${
+              !open && "hidden"
+            }`}
+            style={{ fontFamily: "airbnb_light" }}
+          >
+            Points of interest
+          </span>
+          {open && (
+            <BsChevronDown
+              className={`${submenuOpen && "rotate-180"}`}
+              onClick={() => {
+                setSubmenuOpen(!submenuOpen);
+              }}
+            />
+          )}
+        </li>
+        {submenuOpen && open && (
+          <ul>
+            {Menus[0].submenuItems ? (
+              Menus[0].submenuItems.map((submenuItem, index) => (
+                <li
+                  onClick={() => {
+                    setSelectedPoi(submenuItem);
+                  }}
+                  key={index}
+                  className="text-gray-300 text-sm flex items-center gap-x-4 cursor-pointer p-2 px-5
+              hover:bg-light-white rounded-md"
+                  style={{ fontFamily: "airbnb_light" }}
+                >
+                  {submenuItem.address}
+                </li>
+              ))
+            ) : (
+              <></>
+            )}
+          </ul>
+        )}
+        <li
+          className={`text-gray-300 text-sm flex items-center gap-x-4 cursor-pointer p-2
+              hover:bg-light-white rounded-md mb-2 ${
+                isFootfallSection ? "" : "bg-light-white"
+              }`}
+          onClick={() => {
+            setFootfallSection(!isFootfallSection);
+          }}
+        >
+          <span className="text-2xl block float-left">
+            <IoFootstepsSharp />
+          </span>
+          <span
+            className={`text-base font-medium flex-1 duration-200 ${
+              !open && "hidden"
+            }`}
+            style={{ fontFamily: "airbnb_light" }}
+          >
+            Footfall
+          </span>
+        </li>
+
+        <li
+          className={`text-gray-300 text-sm flex items-center gap-x-4 cursor-pointer p-2
+              hover:bg-light-white rounded-md mb-2 ${
+                isModeSection ? "" : "bg-light-white"
+              }`}
+          onClick={() => {
+            setModeSection(!isModeSection);
+          }}
+        >
+          <span className="text-2xl block float-left">
+            <AiFillCar />
+          </span>
+          <span
+            className={`text-base font-medium flex-1 duration-200 ${
+              !open && "hidden"
+            }`}
+            style={{ fontFamily: "airbnb_light" }}
+          >
+            Mode
+          </span>
+        </li>
+
+        <li
+          className={`text-gray-300 text-sm flex items-center gap-x-4 cursor-pointer p-2
+              hover:bg-light-white rounded-md mb-2 ${
+                isDemographicsSection ? "" : "bg-light-white"
+              }`}
+          onClick={() => {
+            setDemographicsSection(!isDemographicsSection);
+          }}
+        >
+          <span className="text-2xl block float-left">
+            <IoStatsChartSharp />
+          </span>
+          <span
+            className={`text-base font-medium flex-1 duration-200 ${
+              !open && "hidden"
+            }`}
+            style={{ fontFamily: "airbnb_light" }}
+          >
+            Demographics
+          </span>
+        </li>
+
+        <li
+          className={`text-gray-300 text-sm flex items-center gap-x-4 cursor-pointer p-2
+              hover:bg-light-white rounded-md mb-2 ${
+                isInformationSection ? "" : "bg-light-white"
+              }`}
+          onClick={() => {
+            setInformationSection(!isInformationSection);
+          }}
+        >
+          <span className="text-2xl block float-left">
+            <FaInfoCircle />
+          </span>
+          <span
+            className={`text-base font-medium flex-1 duration-200 ${
+              !open && "hidden"
+            }`}
+            style={{ fontFamily: "airbnb_light" }}
+          >
+            Section info
+          </span>
+        </li>
+
+        <li
+          className={`text-gray-300 text-sm flex items-center gap-x-4 cursor-pointer p-2
+              hover:bg-light-white rounded-md mb-2 ${
+                isTraficSection ? "" : "bg-light-white"
+              }`}
+          onClick={() => {
+            setTraficSection(!isTraficSection);
+          }}
+        >
+          <span className="text-2xl block float-left">
+            <AiFillDatabase />
+          </span>
+          <span
+            className={`text-base font-medium flex-1 duration-200 ${
+              !open && "hidden"
+            }`}
+            style={{ fontFamily: "airbnb_light" }}
+          >
+            Trafic data
+          </span>
+        </li>
+
+        <li
+          className={`text-gray-300 text-sm flex items-center gap-x-4 cursor-pointer p-2
+              hover:bg-light-white rounded-md mb-2 ${
+                isTraficSection ? "" : "bg-light-white"
+              }`}
+          onClick={() => {
+            setIsMapView(!isMapView);
+          }}
+        >
+          <span className="text-2xl block float-left">
+            <FaMapMarkedAlt />
+          </span>
+          <span
+            className={`text-base font-medium flex-1 duration-200 ${
+              !open && "hidden"
+            }`}
+            style={{ fontFamily: "airbnb_light" }}
+          >
+            Map View
+          </span>
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export default DrawerSection;

src/sections/footfall/index.tsx

@@ -0,0 +1,60 @@
+import { useState, useEffect } from "react";
+import { Poi } from "../../redux/types/Poi";
+import { formatNumber } from "../../utils/formatNumber";
+import { IoFootstepsSharp } from "react-icons/io5";
+import ParentSize from "@visx/responsive/lib/components/ParentSize";
+import BrushChart from "../../components/charts/brushChart/AreaChart";
+import DayTypeGraph from "../../components/charts/tripeChart/DayTypeGraph";
+
+type FootfallSectionProps = {
+  selectedPoi: Poi;
+};
+
+const FootfallSection: React.FC<FootfallSectionProps> = ({ selectedPoi }) => {
+  return (
+    <div className="sectionBasicInfo">
+      <div className="footfallLeftWrapper">
+        <div className="averageFootfall">
+          <div className="weekDistributionTitle">Average Footfall</div>
+          <div className="averageFootfallWrapper">
+            {selectedPoi
+              ? formatNumber(selectedPoi?.data.footfall.avg_daily_number)
+              : "17 400"}
+            <IoFootstepsSharp style={{ marginLeft: "2%", fontSize: "50px" }} />
+          </div>
+        </div>
+        <div className="weekDistribution">
+          <div className="weekDistributionTitle">
+            Footfall Week Distribution
+          </div>
+          <ParentSize>
+            {({ width, height }) => (
+              <BrushChart
+                data={selectedPoi?.data.footfall.week_distribution}
+                compact={false}
+                width={width}
+                height={height}
+              />
+            )}
+          </ParentSize>
+        </div>
+      </div>
+      <div className="basicInfoMap">
+        <div className="weekDistributionTitle">
+          Footfall Day Type Hour distribution
+        </div>
+        <ParentSize>
+          {({ width, height }) => (
+            <DayTypeGraph
+              data={selectedPoi?.data.footfall.daytype_hour_distribution}
+              width={width}
+              height={height}
+            />
+          )}
+        </ParentSize>
+      </div>
+    </div>
+  );
+};
+
+export default FootfallSection;

src/sections/information/index.tsx

@@ -0,0 +1,107 @@
+import { SiZenn } from "react-icons/si";
+import { FaDirections } from "react-icons/fa";
+import { BsSpeedometer2, BsSpeedometer, BsPinMapFill } from "react-icons/bs";
+import { BiSolidCity, BiSolidRename } from "react-icons/bi";
+import { FaMapLocationDot } from "react-icons/fa6";
+import { Poi } from "../../redux/types/Poi";
+import ParentSize from "@visx/responsive/lib/components/ParentSize";
+import SimpleChart from "../../components/charts/singleChart/SimpleChart";
+
+type InformationSectionProps = {
+  selectedPoi: Poi;
+};
+
+const InformationSection: React.FC<InformationSectionProps> = ({
+  selectedPoi,
+}) => {
+  const streetSpecs = [
+    {
+      label: "Average speed",
+      icon: <BsSpeedometer2 style={{ fontSize: "25px" }} />,
+      value: selectedPoi
+        ? selectedPoi?.data.section?.avg_speed.toString().slice(0, 4)
+        : "n/a" + "km/h",
+    },
+    {
+      label: "Commune",
+      icon: <BiSolidCity style={{ fontSize: "25px" }} />,
+      value: selectedPoi ? selectedPoi?.data.section?.commune : "n/a",
+    },
+    {
+      label: "Department",
+      icon: <FaMapLocationDot style={{ fontSize: "25px" }} />,
+      value: selectedPoi ? selectedPoi?.data.section?.department : "n/a",
+    },
+    {
+      label: "Length",
+      icon: <SiZenn style={{ fontSize: "25px" }} />,
+      value: selectedPoi ? selectedPoi?.data.section?.length : "n/a" + "m",
+    },
+    {
+      label: "Max speed",
+      icon: <BsSpeedometer style={{ fontSize: "25px" }} />,
+      value: selectedPoi
+        ? selectedPoi?.data.section?.max_speed
+        : "n/a" + "km/h",
+    },
+    {
+      label: "Name",
+      icon: <BiSolidRename style={{ fontSize: "25px" }} />,
+      value: (
+        <p style={{ fontSize: "15px", marginTop: "5%" }}>
+          {selectedPoi ? selectedPoi?.data.section?.name : "n/a"}
+        </p>
+      ),
+    },
+    {
+      label: "Directions",
+      icon: <FaDirections style={{ fontSize: "25px" }} />,
+      value: selectedPoi ? selectedPoi?.data.section?.nbr_direction : "n/a",
+    },
+    {
+      label: "Region",
+      icon: <BsPinMapFill style={{ fontSize: "25px" }} />,
+      value: selectedPoi ? selectedPoi?.data.section?.region : "n/a",
+    },
+  ];
+  return (
+    <div className="blockSection">
+      <div className="blockInformation">
+        <div className="weekDistributionTitle">Section Information</div>
+        {streetSpecs.map((object, index) => (
+          <div className="blockInformationBackground">
+            <div className="blockInformationContent">
+              <p
+                style={{
+                  width: "60%",
+                  display: "flex",
+                  flexDirection: "row",
+                  alignItems: "center",
+                  justifyContent: "space-around",
+                }}
+              >
+                {object.label}
+                {object.icon}
+              </p>
+              <p>{object.value}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className="blockSimpleChart">
+        <div className="weekDistributionTitle">Top 10 Trafic Origin</div>
+        <ParentSize>
+          {({ width, height }) => (
+            <SimpleChart
+              data={selectedPoi?.data.origin_top_10}
+              width={width}
+              height={height}
+            />
+          )}
+        </ParentSize>
+      </div>
+    </div>
+  );
+};
+
+export default InformationSection;

src/sections/map/control-panel.tsx

@@ -0,0 +1,129 @@
+import React, { useState, useEffect } from "react";
+import { fromJS, Map } from "immutable";
+import MAP_STYLE from "./map-style-basic-v8.json";
+
+const defaultMapStyle: Map<string, any> = fromJS(MAP_STYLE);
+const defaultLayers = defaultMapStyle.get("layers");
+
+const categories: string[] = [
+  "labels",
+  "roads",
+  "buildings",
+  "parks",
+  "water",
+  "background",
+];
+
+// Layer id patterns by category
+const layerSelector: { [key: string]: RegExp } = {
+  background: /background/,
+  water: /water/,
+  parks: /park/,
+  buildings: /building/,
+  roads: /bridge|road|tunnel/,
+  labels: /label|place|poi/,
+};
+
+// Layer color class by type
+const colorClass: { [key: string]: string } = {
+  line: "line-color",
+  fill: "fill-color",
+  background: "background-color",
+  symbol: "text-color",
+};
+
+function getMapStyle({ visibility, color }: MapStyleOptions): Map<string, any> {
+  const layers = defaultLayers
+    .filter((layer: any) => {
+      const id = layer.get("id");
+      return categories.every(
+        (name) => visibility[name] || !layerSelector[name].test(id)
+      );
+    })
+    .map((layer: any) => {
+      const id = layer.get("id");
+      const type = layer.get("type");
+      const category = categories.find((name) => layerSelector[name].test(id));
+      if (category && colorClass[type]) {
+        return layer.setIn(["paint", colorClass[type]], color[category]);
+      }
+      return layer;
+    });
+
+  return defaultMapStyle.set("layers", layers);
+}
+
+interface MapStyleOptions {
+  visibility: { [key: string]: boolean };
+  color: { [key: string]: string };
+}
+
+interface StyleControlsProps {
+  onChange: (style: Map<string, any>) => void;
+}
+
+function StyleControls(props: StyleControlsProps) {
+  const [visibility, setVisibility] = useState<any>({
+    water: true,
+    parks: true,
+    buildings: true,
+    roads: true,
+    labels: true,
+    background: true,
+  });
+
+  const [color, setColor] = useState<any>({
+    water: "#DBE2E6",
+    parks: "#E6EAE9",
+    buildings: "#c0c0c8",
+    roads: "#ffffff",
+    labels: "#78888a",
+    background: "#EBF0F0",
+  });
+
+  useEffect(() => {
+    props.onChange(getMapStyle({ visibility, color }));
+  }, [visibility, color]);
+
+  const onColorChange = (name: string, value: string) => {
+    setColor({ ...color, [name]: value });
+  };
+
+  const onVisibilityChange = (name: string, value: boolean) => {
+    setVisibility({ ...visibility, [name]: value });
+  };
+
+  return (
+    <div className="control-panel">
+      <h3>Dynamic Styling</h3>
+      <hr />
+      {categories.map((name) => (
+        <div
+          key={name}
+          className="input"
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "space-between",
+            alignItems: "center",
+          }}
+        >
+          <label>{name}</label>
+          <input
+            type="checkbox"
+            checked={visibility[name]}
+            onChange={(evt) => onVisibilityChange(name, evt.target.checked)}
+          />
+          <input
+            type="color"
+            value={color[name]}
+            disabled={!visibility[name]}
+            onChange={(evt) => onColorChange(name, evt.target.value)}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default React.memo(StyleControls);

src/sections/map/index.tsx

@@ -0,0 +1,64 @@
+import { useState, useEffect } from "react";
+import { Poi } from "../../redux/types/Poi";
+import { convertModeObjectToArray } from "../../utils/convertModeObjectToArray";
+import { FaWalking } from "react-icons/fa";
+import { AiFillCar } from "react-icons/ai";
+import { Map, Marker } from "react-map-gl";
+import ControlPanel from "./control-panel";
+import pin from "../../assets/images/pin.png";
+
+type DemographicsSectionProps = {
+  selectedPoi: Poi;
+};
+const MapSection: React.FC<DemographicsSectionProps> = ({ selectedPoi }) => {
+  const [mapStyle, setMapStyle] = useState<any>(null);
+
+  return (
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+      }}
+    >
+      <Map
+        initialViewState={{
+          latitude: selectedPoi.lat,
+          longitude: selectedPoi.lng,
+          zoom: 15.5,
+        }}
+        mapStyle={mapStyle && mapStyle.toJS()}
+        styleDiffing
+        mapboxAccessToken={
+          "pk.eyJ1Ijoibm9lbm9sdWFsIiwiYSI6ImNsbXUwbGNvODA5a3Iya3Fmc202OHU2MW8ifQ.6h8Y00MzBQFDlYPtxw-_Bg"
+        }
+      >
+        <Marker latitude={selectedPoi.lat} longitude={selectedPoi.lng}>
+          {/* You can customize the pin marker here */}
+          <img
+            src={pin}
+            alt="Custom Marker"
+            width={40} // Adjust the width and height as needed
+            height={40}
+          />
+        </Marker>
+      </Map>
+      <div
+        style={{
+          width: "12%",
+          position: "absolute",
+          top: "5%",
+          left: "85%",
+          padding: "1%",
+          borderRadius: "10px",
+          backgroundColor: "white",
+          fontFamily: "airbnb_regular",
+          border: "1px solid #3C3C3C",
+        }}
+      >
+        <ControlPanel onChange={setMapStyle} />
+      </div>
+    </div>
+  );
+};
+
+export default MapSection;

src/sections/map/map-style-basic-v8.json

@@ -0,0 +1,866 @@
+{
+    "version": 8,
+    "name": "Basic",
+    "metadata": {
+        "mapbox:autocomposite": true
+    },
+    "sources": {
+        "mapbox": {
+            "url": "mapbox://mapbox.mapbox-streets-v7",
+            "type": "vector"
+        }
+    },
+    "sprite": "mapbox://sprites/mapbox/basic-v8",
+    "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
+    "layers": [
+        {
+            "id": "background",
+            "type": "background",
+            "paint": {
+                "background-color": "#dedede"
+            },
+            "interactive": true
+        },
+        {
+            "id": "landuse_overlay_national_park",
+            "type": "fill",
+            "source": "mapbox",
+            "source-layer": "landuse_overlay",
+            "filter": [
+                "==",
+                "class",
+                "national_park"
+            ],
+            "paint": {
+                "fill-color": "#d2edae",
+                "fill-opacity": 0.75
+            },
+            "interactive": true
+        },
+        {
+            "id": "landuse_park",
+            "type": "fill",
+            "source": "mapbox",
+            "source-layer": "landuse",
+            "filter": [
+                "==",
+                "class",
+                "park"
+            ],
+            "paint": {
+                "fill-color": "#d2edae"
+            },
+            "interactive": true
+        },
+        {
+            "id": "waterway",
+            "type": "line",
+            "source": "mapbox",
+            "source-layer": "waterway",
+            "filter": [
+                "all",
+                [
+                    "==",
+                    "$type",
+                    "LineString"
+                ],
+                [
+                    "in",
+                    "class",
+                    "river",
+                    "canal"
+                ]
+            ],
+            "paint": {
+                "line-color": "#a0cfdf",
+                "line-width": {
+                    "base": 1.4,
+                    "stops": [
+                        [
+                            8,
+                            0.5
+                        ],
+                        [
+                            20,
+                            15
+                        ]
+                    ]
+                }
+            },
+            "interactive": true
+        },
+        {
+            "id": "water",
+            "type": "fill",
+            "source": "mapbox",
+            "source-layer": "water",
+            "paint": {
+                "fill-color": "#a0cfdf"
+            },
+            "interactive": true
+        },
+        {
+            "id": "building",
+            "type": "fill",
+            "source": "mapbox",
+            "source-layer": "building",
+            "paint": {
+                "fill-color": "#d6d6d6"
+            },
+            "interactive": true
+        },
+        {
+            "interactive": true,
+            "layout": {
+                "line-cap": "butt",
+                "line-join": "miter"
+            },
+            "filter": [
+                "all",
+                [
+                    "==",
+                    "$type",
+                    "LineString"
+                ],
+                [
+                    "all",
+                    [
+                        "in",
+                        "class",
+                        "motorway_link",
+                        "street",
+                        "street_limited",
+                        "service",
+                        "track",
+                        "pedestrian",
+                        "path",
+                        "link"
+                    ],
+                    [
+                        "==",
+                        "structure",
+                        "tunnel"
+                    ]
+                ]
+            ],
+            "type": "line",
+            "source": "mapbox",
+            "id": "tunnel_minor",
+            "paint": {
+                "line-color": "#efefef",
+                "line-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [
+                            4,
+                            0.25
+                        ],
+                        [
+                            20,
+                            30
+                        ]
+                    ]
+                },
+                "line-dasharray": [
+                    0.36,
+                    0.18
+                ]
+            },
+            "source-layer": "road"
+        },
+        {
+            "interactive": true,
+            "layout": {
+                "line-cap": "butt",
+                "line-join": "miter"
+            },
+            "filter": [
+                "all",
+                [
+                    "==",
+                    "$type",
+                    "LineString"
+                ],
+                [
+                    "all",
+                    [
+                        "in",
+                        "class",
+                        "motorway",
+                        "primary",
+                        "secondary",
+                        "tertiary",
+                        "trunk"
+                    ],
+                    [
+                        "==",
+                        "structure",
+                        "tunnel"
+                    ]
+                ]
+            ],
+            "type": "line",
+            "source": "mapbox",
+            "id": "tunnel_major",
+            "paint": {
+                "line-color": "#fff",
+                "line-width": {
+                    "base": 1.4,
+                    "stops": [
+                        [
+                            6,
+                            0.5
+                        ],
+                        [
+                            20,
+                            30
+                        ]
+                    ]
+                },
+                "line-dasharray": [
+                    0.28,
+                    0.14
+                ]
+            },
+            "source-layer": "road"
+        },
+        {
+            "interactive": true,
+            "layout": {
+                "line-cap": "round",
+                "line-join": "round"
+            },
+            "filter": [
+                "all",
+                [
+                    "==",
+                    "$type",
+                    "LineString"
+                ],
+                [
+                    "all",
+                    [
+                        "in",
+                        "class",
+                        "motorway_link",
+                        "street",
+                        "street_limited",
+                        "service",
+                        "track",
+                        "pedestrian",
+                        "path",
+                        "link"
+                    ],
+                    [
+                        "in",
+                        "structure",
+                        "none",
+                        "ford"
+                    ]
+                ]
+            ],
+            "type": "line",
+            "source": "mapbox",
+            "id": "road_minor",
+            "paint": {
+                "line-color": "#efefef",
+                "line-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [
+                            4,
+                            0.25
+                        ],
+                        [
+                            20,
+                            30
+                        ]
+                    ]
+                }
+            },
+            "source-layer": "road"
+        },
+        {
+            "interactive": true,
+            "layout": {
+                "line-cap": "round",
+                "line-join": "round"
+            },
+            "filter": [
+                "all",
+                [
+                    "==",
+                    "$type",
+                    "LineString"
+                ],
+                [
+                    "all",
+                    [
+                        "in",
+                        "class",
+                        "motorway",
+                        "primary",
+                        "secondary",
+                        "tertiary",
+                        "trunk"
+                    ],
+                    [
+                        "in",
+                        "structure",
+                        "none",
+                        "ford"
+                    ]
+                ]
+            ],
+            "type": "line",
+            "source": "mapbox",
+            "id": "road_major",
+            "paint": {
+                "line-color": "#fff",
+                "line-width": {
+                    "base": 1.4,
+                    "stops": [
+                        [
+                            6,
+                            0.5
+                        ],
+                        [
+                            20,
+                            30
+                        ]
+                    ]
+                }
+            },
+            "source-layer": "road"
+        },
+        {
+            "interactive": true,
+            "layout": {
+                "line-cap": "butt",
+                "line-join": "miter"
+            },
+            "filter": [
+                "all",
+                [
+                    "==",
+                    "$type",
+                    "LineString"
+                ],
+                [
+                    "all",
+                    [
+                        "in",
+                        "class",
+                        "motorway_link",
+                        "street",
+                        "street_limited",
+                        "service",
+                        "track",
+                        "pedestrian",
+                        "path",
+                        "link"
+                    ],
+                    [
+                        "==",
+                        "structure",
+                        "bridge"
+                    ]
+                ]
+            ],
+            "type": "line",
+            "source": "mapbox",
+            "id": "bridge_minor case",
+            "paint": {
+                "line-color": "#dedede",
+                "line-width": {
+                    "base": 1.6,
+                    "stops": [
+                        [
+                            12,
+                            0.5
+                        ],
+                        [
+                            20,
+                            10
+                        ]
+                    ]
+                },
+                "line-gap-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [
+                            4,
+                            0.25
+                        ],
+                        [
+                            20,
+                            30
+                        ]
+                    ]
+                }
+            },
+            "source-layer": "road"
+        },
+        {
+            "interactive": true,
+            "layout": {
+                "line-cap": "butt",
+                "line-join": "miter"
+            },
+            "filter": [
+                "all",
+                [
+                    "==",
+                    "$type",
+                    "LineString"
+                ],
+                [
+                    "all",
+                    [
+                        "in",
+                        "class",
+                        "motorway",
+                        "primary",
+                        "secondary",
+                        "tertiary",
+                        "trunk"
+                    ],
+                    [
+                        "==",
+                        "structure",
+                        "bridge"
+                    ]
+                ]
+            ],
+            "type": "line",
+            "source": "mapbox",
+            "id": "bridge_major case",
+            "paint": {
+                "line-color": "#dedede",
+                "line-width": {
+                    "base": 1.6,
+                    "stops": [
+                        [
+                            12,
+                            0.5
+                        ],
+                        [
+                            20,
+                            10
+                        ]
+                    ]
+                },
+                "line-gap-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [
+                            4,
+                            0.25
+                        ],
+                        [
+                            20,
+                            30
+                        ]
+                    ]
+                }
+            },
+            "source-layer": "road"
+        },
+        {
+            "interactive": true,
+            "layout": {
+                "line-cap": "round",
+                "line-join": "round"
+            },
+            "filter": [
+                "all",
+                [
+                    "==",
+                    "$type",
+                    "LineString"
+                ],
+                [
+                    "all",
+                    [
+                        "in",
+                        "class",
+                        "motorway_link",
+                        "street",
+                        "street_limited",
+                        "service",
+                        "track",
+                        "pedestrian",
+                        "path",
+                        "link"
+                    ],
+                    [
+                        "==",
+                        "structure",
+                        "bridge"
+                    ]
+                ]
+            ],
+            "type": "line",
+            "source": "mapbox",
+            "id": "bridge_minor",
+            "paint": {
+                "line-color": "#efefef",
+                "line-width": {
+                    "base": 1.55,
+                    "stops": [
+                        [
+                            4,
+                            0.25
+                        ],
+                        [
+                            20,
+                            30
+                        ]
+                    ]
+                }
+            },
+            "source-layer": "road"
+        },
+        {
+            "interactive": true,
+            "layout": {
+                "line-cap": "round",
+                "line-join": "round"
+            },
+            "filter": [
+                "all",
+                [
+                    "==",
+                    "$type",
+                    "LineString"
+                ],
+                [
+                    "all",
+                    [
+                        "in",
+                        "class",
+                        "motorway",
+                        "primary",
+                        "secondary",
+                        "tertiary",
+                        "trunk"
+                    ],
+                    [
+                        "==",
+                        "structure",
+                        "bridge"
+                    ]
+                ]
+            ],
+            "type": "line",
+            "source": "mapbox",
+            "id": "bridge_major",
+            "paint": {
+                "line-color": "#fff",
+                "line-width": {
+                    "base": 1.4,
+                    "stops": [
+                        [
+                            6,
+                            0.5
+                        ],
+                        [
+                            20,
+                            30
+                        ]
+                    ]
+                }
+            },
+            "source-layer": "road"
+        },
+        {
+            "interactive": true,
+            "layout": {
+                "line-cap": "round",
+                "line-join": "round"
+            },
+            "filter": [
+                "all",
+                [
+                    "==",
+                    "$type",
+                    "LineString"
+                ],
+                [
+                    "all",
+                    [
+                        "<=",
+                        "admin_level",
+                        2
+                    ],
+                    [
+                        "==",
+                        "maritime",
+                        0
+                    ]
+                ]
+            ],
+            "type": "line",
+            "source": "mapbox",
+            "id": "admin_country",
+            "paint": {
+                "line-color": "#8b8a8a",
+                "line-width": {
+                    "base": 1.3,
+                    "stops": [
+                        [
+                            3,
+                            0.5
+                        ],
+                        [
+                            22,
+                            15
+                        ]
+                    ]
+                }
+            },
+            "source-layer": "admin"
+        },
+        {
+            "interactive": true,
+            "minzoom": 5,
+            "layout": {
+                "icon-image": "{maki}-11",
+                "text-offset": [
+                    0,
+                    0.5
+                ],
+                "text-field": "{name_en}",
+                "text-font": [
+                    "Open Sans Semibold",
+                    "Arial Unicode MS Bold"
+                ],
+                "text-max-width": 8,
+                "text-anchor": "top",
+                "text-size": 11,
+                "icon-size": 1
+            },
+            "filter": [
+                "all",
+                [
+                    "==",
+                    "$type",
+                    "Point"
+                ],
+                [
+                    "all",
+                    [
+                        "==",
+                        "scalerank",
+                        1
+                    ],
+                    [
+                        "==",
+                        "localrank",
+                        1
+                    ]
+                ]
+            ],
+            "type": "symbol",
+            "source": "mapbox",
+            "id": "poi_label",
+            "paint": {
+                "text-color": "#666",
+                "text-halo-width": 1,
+                "text-halo-color": "rgba(255,255,255,0.75)",
+                "text-halo-blur": 1
+            },
+            "source-layer": "poi_label"
+        },
+        {
+            "interactive": true,
+            "layout": {
+                "symbol-placement": "line",
+                "text-field": "{name_en}",
+                "text-font": [
+                    "Open Sans Semibold",
+                    "Arial Unicode MS Bold"
+                ],
+                "text-transform": "uppercase",
+                "text-letter-spacing": 0.1,
+                "text-size": {
+                    "base": 1.4,
+                    "stops": [
+                        [
+                            10,
+                            8
+                        ],
+                        [
+                            20,
+                            14
+                        ]
+                    ]
+                }
+            },
+            "filter": [
+                "all",
+                [
+                    "==",
+                    "$type",
+                    "LineString"
+                ],
+                [
+                    "in",
+                    "class",
+                    "motorway",
+                    "primary",
+                    "secondary",
+                    "tertiary",
+                    "trunk"
+                ]
+            ],
+            "type": "symbol",
+            "source": "mapbox",
+            "id": "road_major_label",
+            "paint": {
+                "text-color": "#666",
+                "text-halo-color": "rgba(255,255,255,0.75)",
+                "text-halo-width": 2
+            },
+            "source-layer": "road_label"
+        },
+        {
+            "interactive": true,
+            "minzoom": 8,
+            "layout": {
+                "text-field": "{name_en}",
+                "text-font": [
+                    "Open Sans Semibold",
+                    "Arial Unicode MS Bold"
+                ],
+                "text-max-width": 6,
+                "text-size": {
+                    "stops": [
+                        [
+                            6,
+                            12
+                        ],
+                        [
+                            12,
+                            16
+                        ]
+                    ]
+                }
+            },
+            "filter": [
+                "all",
+                [
+                    "==",
+                    "$type",
+                    "Point"
+                ],
+                [
+                    "in",
+                    "type",
+                    "town",
+                    "village",
+                    "hamlet",
+                    "suburb",
+                    "neighbourhood",
+                    "island"
+                ]
+            ],
+            "type": "symbol",
+            "source": "mapbox",
+            "id": "place_label_other",
+            "paint": {
+                "text-color": "#666",
+                "text-halo-color": "rgba(255,255,255,0.75)",
+                "text-halo-width": 1,
+                "text-halo-blur": 1
+            },
+            "source-layer": "place_label"
+        },
+        {
+            "interactive": true,
+            "layout": {
+                "text-field": "{name_en}",
+                "text-font": [
+                    "Open Sans Bold",
+                    "Arial Unicode MS Bold"
+                ],
+                "text-max-width": 10,
+                "text-size": {
+                    "stops": [
+                        [
+                            3,
+                            12
+                        ],
+                        [
+                            8,
+                            16
+                        ]
+                    ]
+                }
+            },
+            "maxzoom": 16,
+            "filter": [
+                "all",
+                [
+                    "==",
+                    "$type",
+                    "Point"
+                ],
+                [
+                    "==",
+                    "type",
+                    "city"
+                ]
+            ],
+            "type": "symbol",
+            "source": "mapbox",
+            "id": "place_label_city",
+            "paint": {
+                "text-color": "#666",
+                "text-halo-color": "rgba(255,255,255,0.75)",
+                "text-halo-width": 1,
+                "text-halo-blur": 1
+            },
+            "source-layer": "place_label"
+        },
+        {
+            "interactive": true,
+            "layout": {
+                "text-field": "{name_en}",
+                "text-font": [
+                    "Open Sans Regular",
+                    "Arial Unicode MS Regular"
+                ],
+                "text-max-width": 10,
+                "text-size": {
+                    "stops": [
+                        [
+                            3,
+                            14
+                        ],
+                        [
+                            8,
+                            22
+                        ]
+                    ]
+                }
+            },
+            "maxzoom": 12,
+            "filter": [
+                "==",
+                "$type",
+                "Point"
+            ],
+            "type": "symbol",
+            "source": "mapbox",
+            "id": "country_label",
+            "paint": {
+                "text-color": "#666",
+                "text-halo-color": "rgba(255,255,255,0.75)",
+                "text-halo-width": 1,
+                "text-halo-blur": 1
+            },
+            "source-layer": "country_label"
+        }
+    ]
+}

src/sections/mode/index.tsx

@@ -0,0 +1,37 @@
+import { useState, useEffect } from "react";
+import { Poi } from "../../redux/types/Poi";
+import { convertModeObjectToArray } from "../../utils/convertModeObjectToArray";
+import { FaWalking } from "react-icons/fa";
+import { AiFillCar } from "react-icons/ai";
+
+type DemographicsSectionProps = {
+  selectedPoi: Poi;
+};
+const ModeSection: React.FC<DemographicsSectionProps> = ({ selectedPoi }) => {
+  return (
+    //isSelected ?
+    <div className="modeSection">
+      <div className="sectionModeDivider">
+        <div className="weekDistributionTitle">People walking</div>
+        <div className="averageModeWrapper">
+          {selectedPoi
+            ? convertModeObjectToArray(selectedPoi?.data.mode)[0]
+            : "20%"}
+          <FaWalking style={{ marginLeft: "2%", fontSize: "50px" }} />
+        </div>
+      </div>
+      <div className="sectionModeDivider">
+        <div className="weekDistributionTitle">People using vehicles</div>
+        <div className="averageModeWrapper">
+          {selectedPoi
+            ? convertModeObjectToArray(selectedPoi?.data.mode)[1]
+            : "20%"}
+          <AiFillCar style={{ marginLeft: "2%", fontSize: "50px" }} />
+        </div>
+      </div>
+    </div>
+    //) : ( <></>
+  );
+};
+
+export default ModeSection;

src/sections/trafic/index.tsx

@@ -0,0 +1,79 @@
+import { useState, useEffect } from "react";
+import { Poi } from "../../redux/types/Poi";
+import { formatNumber } from "../../utils/formatNumber";
+import { FaBusAlt } from "react-icons/fa";
+import ParentSize from "@visx/responsive/lib/components/ParentSize";
+import DayTypeGraph from "../../components/charts/tripeChart/DayTypeGraph";
+import SimpleChartTripPurpose from "../../components/charts/singleChart/SimpleChartTripPurpose";
+import BrushChart from "../../components/charts/brushChart/AreaChart";
+
+type TraficSectionProps = {
+  selectedPoi: Poi;
+};
+
+const TraficSection: React.FC<TraficSectionProps> = ({ selectedPoi }) => {
+  return (
+    //) isSelected ?
+    <>
+      <div className="sectionTrafic">
+        <div className="footfallLeftWrapper">
+          <div className="averageFootfall">
+            <div className="weekDistributionTitle">
+              Average Trafic Daily Flow
+            </div>
+            <div className="averageFootfallWrapper">
+              {selectedPoi
+                ? formatNumber(selectedPoi?.data.traffic.avg_daily_flow)
+                : "17 400"}
+              <FaBusAlt style={{ marginLeft: "2%", fontSize: "40px" }} />
+            </div>
+          </div>
+          <div className="weekDistribution">
+            <div className="weekDistributionTitle">
+              Trafic Week Distribution
+            </div>
+            <ParentSize>
+              {({ width, height }) => (
+                <BrushChart
+                  data={selectedPoi?.data.footfall.week_distribution}
+                  compact={false}
+                  width={width}
+                  height={height}
+                />
+              )}
+            </ParentSize>
+          </div>
+        </div>
+        <div className="basicInfoMap">
+          <div className="weekDistributionTitle">
+            Trafic Day Type Hour distribution
+          </div>
+          <ParentSize>
+            {({ width, height }) => (
+              <DayTypeGraph
+                data={selectedPoi?.data.traffic.daytype_hour_distribution}
+                width={width}
+                height={height}
+              />
+            )}
+          </ParentSize>
+        </div>
+      </div>
+      <div className="tripPurposeChart">
+        <div className="weekDistributionTitle">Trip Purpose</div>
+        <ParentSize>
+          {({ width, height }) => (
+            <SimpleChartTripPurpose
+              data={selectedPoi?.data.trip_purpose}
+              width={width}
+              height={height}
+            />
+          )}
+        </ParentSize>
+      </div>
+    </>
+    //) : ( <></>
+  );
+};
+
+export default TraficSection;

src/styles/global/App.css

@@ -0,0 +1,381 @@
+.rootContent {
+  display: flex;
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+}
+.mainContent {
+  flex: 1;
+  overflow-y: auto;
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-direction: column;
+}
+
+.sectionBasicInfo {
+  width: 100%;
+  display: flex;
+  background-color: white;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 2%;
+  border-bottom: 1px solid #d1d1d1;
+}
+
+.sectionTrafic {
+  width: 100%;
+  display: flex;
+  background-color: white;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 2%;
+}
+
+.sectionBasicInfoOne {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 2%;
+  padding-left: 10%;
+  padding-right: 10%;
+  border-bottom: 1px solid #d1d1d1; /* Add a thin bottom border */
+}
+
+.basicInfoLabelsOne {
+  background-color: white; /* Change background color to white */
+  font-family: "airbnb_semi_bold";
+  color: #3e3e3e;
+  font-size: 20px;
+  width: auto;
+  height: 10vh;
+  padding: 2%;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  border-radius: 20px; /* Add rounded borders */
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Add shadow */
+}
+
+.footfallLeftWrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 70vh;
+  width: 49%;
+}
+
+.averageFootfallWrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: auto;
+  position: sticky;
+  color: white;
+  font-family: "airbnb_extra_bold";
+  font-size: 60px;
+}
+
+.averageModeWrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: auto;
+  color: white;
+  font-family: "airbnb_extra_bold";
+  font-size: 60px;
+}
+
+.averageFootfallWrapperText {
+  font-family: "airbnb_light";
+  margin-top: 15px;
+  margin-left: 10px;
+  font-size: 20px;
+}
+
+.averageFootfall {
+  background: linear-gradient(to bottom, #858585, #000000);
+  width: 100%;
+  height: 14vh;
+  display: flex;
+  flex-direction: column;
+  border-radius: 20px; /* Add rounded borders */
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Add shadow */
+}
+
+.parentWidthFootfall {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 10vh;
+  border-bottom-left-radius: 14px;
+  border-bottom-right-radius: 14px;
+}
+
+.blockInformationBackground {
+  background: linear-gradient(to bottom, #4b4b4b, #000000);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 90%;
+  height: 6.5vh;
+  border-radius: 14px;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Add shadow */
+}
+
+.weekDistribution {
+  background-color: white; /* Change background color to white */
+  width: 100%;
+  height: 53vh;
+  display: flex;
+  flex-direction: column;
+  border-radius: 20px; /* Add rounded borders */
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Add shadow */
+}
+
+.weekDistributionTitle {
+  width: 100%;
+  height: 4vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: "airbnb_extra_bold";
+  font-size: 17px;
+  background-color: white;
+  color: #4b4b4b;
+  border-top-left-radius: 14px;
+  border-top-right-radius: 14px;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Add shadow */
+}
+
+.basicInfoMap {
+  background-color: white; /* Change background color to white */
+  width: 49%;
+  height: 70vh;
+  display: flex;
+  flex-direction: column;
+  border-radius: 20px; /* Add rounded borders */
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Add shadow */
+}
+
+.modeSection {
+  width: 100%;
+  display: flex;
+  background-color: white; /* Change background color to white */
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 2%;
+  border-bottom: 1px solid #d1d1d1; /* Add a thin bottom border */
+}
+
+.sectionModeDivider {
+  background: linear-gradient(to bottom, #858585, #000000);
+  width: 49%;
+  height: 14vh;
+  display: flex;
+  flex-direction: column;
+  border-radius: 20px; /* Add rounded borders */
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Add shadow */
+}
+
+.sectionModeWrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  position: absolute;
+  width: auto;
+  color: white;
+  font-family: "airbnb_extra_bold";
+  left: 70%;
+  font-size: 60px;
+}
+
+.demographicsSection {
+  width: 100%;
+  display: flex;
+  background-color: white; /* Change background color to white */
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 2%;
+  border-bottom: 1px solid #d1d1d1; /* Add a thin bottom border */
+}
+
+.mainDemoPie {
+  background-color: white; /* Change background color to white */
+  width: 49%;
+  height: 73vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.mainDemoPieTitle {
+  width: 100%;
+  height: 7vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: "airbnb_extra_bold";
+  font-size: 20px;
+  background-color: white;
+  color: #4b4b4b;
+  border-top-left-radius: 14px;
+  border-top-right-radius: 14px;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Add shadow */
+}
+
+.otherDemoPieWrapper {
+  width: 49%;
+  height: 73vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  border-radius: 20px; /* Add rounded borders */
+}
+
+.wordCloud {
+  width: 49%;
+  height: 32vh;
+  border-radius: 20px; /* Add rounded borders */
+  background-color: white;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Add shadow */
+}
+
+.menAndWomenPies {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  border-radius: 20px; /* Add rounded borders */
+}
+
+.LegendChart {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  border-radius: 20px; /* Add rounded borders */
+}
+
+.menPie {
+  width: 49%;
+  height: 33vh;
+  border-radius: 20px; /* Add rounded borders */
+  background-color: white;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Add shadow */
+}
+
+.womenPie {
+  width: 49%;
+  height: 33vh;
+  border-radius: 20px; /* Add rounded borders */
+  background-color: white;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Add shadow */
+}
+
+.blockSection {
+  width: 100%;
+  height: 80vh;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 2%;
+  border-bottom: 1px solid #d1d1d1; /* Add a thin bottom border */
+}
+
+.blockInformation {
+  width: 25%;
+  height: 68vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 20px; /* Add rounded borders */
+  background-color: white;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Add shadow */
+  padding-bottom: 10px;
+}
+
+.blockSimpleChart {
+  width: 73%;
+  height: 63vh;
+  border-radius: 20px; /* Add rounded borders */
+  background-color: pink;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Add shadow */
+}
+
+.tripPurposeChart {
+  width: 95%;
+  height: 63vh;
+  border-radius: 20px; /* Add rounded borders */
+  padding-bottom: 5%;
+}
+
+.blockInformationContent {
+  padding: 0.8%;
+  padding-right: 5%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  font-family: "airbnb_semi_bold";
+  font-size: 20px;
+  color: white;
+}
+
+@media (max-width: 1200px) {
+  .sectionBasicInfoOne {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 2%;
+    padding-left: 10%;
+    padding-right: 10%;
+    border-bottom: 1px solid #d1d1d1;
+  }
+  .basicInfoLabelsOne {
+    background-color: white;
+    font-family: "airbnb_semi_bold";
+    color: #3e3e3e;
+    font-size: 12px;
+    width: 20%;
+    height: 10vh;
+    padding: 2%;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    border-radius: 20px;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
+  }
+}
+
+@media (min-width: 1200px) and (max-width: 1800px) {
+  .sectionBasicInfoOne {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 2%;
+    padding-left: 10%;
+    padding-right: 10%;
+    border-bottom: 1px solid #d1d1d1;
+  }
+  .basicInfoLabelsOne {
+    background-color: white;
+    font-family: "airbnb_semi_bold";
+    color: #3e3e3e;
+    font-size: 14px;
+    width: 20%;
+    height: 10vh;
+    padding: 2%;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    border-radius: 20px;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
+  }
+}

src/styles/global/customScrollBar.css

@@ -0,0 +1,24 @@
+::-webkit-scrollbar {
+  width: 6px; /* Width of the scrollbar track */
+}
+
+/* Define the scrollbar thumb (the draggable part) */
+::-webkit-scrollbar-thumb {
+  background: #cfcfcf; /* Color of the thumb */
+  border-radius: 6px; /* Rounded corners of the thumb */
+}
+
+/* Define the scrollbar track on hover */
+::-webkit-scrollbar-track:hover {
+  background: #aaa; /* Color of the track on hover */
+}
+
+/* Define the scrollbar thumb on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555; /* Color of the thumb on hover */
+}
+
+/* Define the scrollbar corner (between vertical and horizontal scrollbars) */
+::-webkit-scrollbar-corner {
+  background: transparent; /* Color of the scrollbar corner */
+}

src/styles/global/index.css

@@ -0,0 +1,20 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
+body {
+  height: 100%; /* Ensure full viewport height */
+  width: 100vw;
+  overflow: hidden; /* Prevent body scrolling */
+
+  /* Add your background color or other styles here */
+}
+
+/* Define a container for your React app */
+#root {
+  display: flex;
+  height: 100%; /* Ensure full viewport height */
+  width: 100vw;
+  overflow: hidden; /* Prevent container scrolling */
+}