text: import React, { useState } from "react";
  import { ComposableMap, Geographies, Geography } from "react-simple-maps";
  import { scaleQuantile } from "d3-scale";
  import ReactTooltip from "react-tooltip";
  
  const INDIA_TOPO_JSON = require("./india.topo.json");
  
  const PROJECTION_CONFIG = {
    scale: 350,
    center: [78.9629, 22.5937], // always in [East Latitude, North Longitude]
  };
  
  // Red Variants
  const COLOR_RANGE = [
    "#ffedea",
    "#ffcec5",
    "#ffad9f",
    "#ff8a75",
    "#ff5533",
    "#e2492d",
    "#be3d26",
    "#9a311f",
    "#782618",
  ];
  
  const DEFAULT_COLOR = "#EEE";
  
  const getRandomInt = () => {
    return parseInt(Math.random() * 100);
  };
  
  const geographyStyle = {
    default: {
      outline: "none",
    },
    hover: {
      fill: "#ccc",
      transition: "all 250ms",
      outline: "none",
    },
    pressed: {
      outline: "none",
    },
  };
  
  function getHeatMapData() {
    var index,
      mapData = [];
  
    fetch("https://data.covid19india.org/data.json")
      .then((res) => res.json())
      .then((data) => {
        var stateData = data.statewise.splice(1);
        for (index = 0; index < stateData.length; index++) {
          // console.log(stateData[index].statecode);
          mapData.push({
            id: stateData[index].statecode,
            state: stateData[index].state,
            value: parseInt(stateData[index].confirmed),
          });
        }
        return mapData;
      })
      .catch(console.log);
    return mapData;
  }
  
  /**
   * 
   * @author Vinit Shahdeo <vinitshahdeo@gmail.com>
   */
  function IndiaMap() {
    const [tooltipContent, setTooltipContent] = useState("");
    const [data, setData] = useState(getHeatMapData());
  
    const colorScale = scaleQuantile()
      .domain(data.map((d) => d.value))
      .range(COLOR_RANGE);
  
    const onMouseEnter = (geo, current = { value: "NA" }) => {
      return () => {
        setTooltipContent(`${geo.properties.name}: ${current.value}`);
      };
    };
  
    const onMouseLeave = () => {
      setTooltipContent("");
    };
  
    return (
      <div className="full-width-height container">
        <h6 className="map-title">Hover on the map to view the total cases</h6>
        <ReactTooltip>{tooltipContent}</ReactTooltip>
        <ComposableMap
          projectionConfig={PROJECTION_CONFIG}
          projection="geoMercator"
          width={400}
          height={220}
          data-tip=""
        >
          <Geographies geography={INDIA_TOPO_JSON}>
            {({ geographies }) =>
              geographies.map((geo) => {
                // console.log(geo.id);
                const current = data.find((s) => s.id === geo.id);
                return (
                  <Geography
                    key={geo.rsmKey}
                    geography={geo}
                    fill={current ? colorScale(current.value) : DEFAULT_COLOR}
                    style={geographyStyle}
                    onMouseEnter={onMouseEnter(geo, current)}
                    onMouseLeave={onMouseLeave}
                  />
                );
              })
            }
          </Geographies>
        </ComposableMap>
      </div>
    );
  }
  
  export default IndiaMap;
  