Kutt/client/components/Charts/Map.tsx

import styled from "styled-components";
import React, { FC } from "react";
// import { VectorMap } from "@south-paw/react-vector-maps";

import { Colors } from "../../consts";
import Tooltip from "../Tooltip";
import world from "./world.json";

const Svg = styled.svg`
  path {
    fill: ${Colors.Map0};
    stroke: #fff;
  }

  path.country-6 {
    fill: ${Colors.Map06};
    stroke: #fff;
  }
  path.country-5 {
    fill: ${Colors.Map05};
    stroke: #fff;
  }
  path.country-4 {
    fill: ${Colors.Map04};
    stroke: #fff;
  }
  path.country-3 {
    fill: ${Colors.Map03};
    stroke: #fff;
  }
  path.country-2 {
    fill: ${Colors.Map02};
    stroke: #fff;
  }
  path.country-1 {
    fill: ${Colors.Map01};
    stroke: #fff;
  }
`;

interface Props {
  data: Array<{ name: string; value: number }>;
}

const Map: FC<Props> = ({ data }) => {
  const [mostVisits] = data.sort((a, b) => (b.value - a.value > 0 ? 1 : -1));
  return (
    <>
      {world.layers.map(layer => (
        <Tooltip
          key={layer.id}
          type="light"
          effect="float"
          id={`${layer.id}-tooltip-country`}
        >
          {layer.name}:{" "}
          {data.find(d => d.name.toLowerCase() === layer.id)?.value || 0}
        </Tooltip>
      ))}
      <Svg
        xmlns="http://www.w3.org/2000/svg"
        aria-label="world map"
        viewBox={world.viewBox}
      >
        {world.layers.map(layer => (
          <path
            key={layer.id}
            data-tip
            data-for={`${layer.id}-tooltip-country`}
            className={`country-${Math.ceil(
              ((data.find(d => d.name.toLowerCase() === layer.id)?.value || 0) /
                mostVisits?.value || 0) * 6
            )}`}
            aria-label={layer.name}
            d={layer.d}
          />
        ))}
      </Svg>
    </>
  );
};

export default Map;