ukraine-timemap/src/components/presentational/Map/Events.jsx

import React from 'react'
import { Portal } from 'react-portal'

function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation, narrative, onSelect, svg, locations }) {

  function getCoordinatesForPercent(radius, percent) {
    const x = radius * Math.cos(2 * Math.PI * percent);
    const y = radius * Math.sin(2 * Math.PI * percent);
    return [x, y];
  }

  function renderLocationSlicesByCategory(location) {

    const locCategory = location.events.length > 0 ? location.events[0].category : 'default'
    const customStyles = styleLocation ? styleLocation(location) : null
    const extraStyles = customStyles[0]

    let styles = ({
      fill: getCategoryColor(locCategory),
      stroke: '#ffffff',
      strokeWidth: 0,
      fillOpacity: 0.85,
      ...extraStyles
    })

    const colorSlices = location.events.map(e => getCategoryColor(e.category))

    let cumulativeAngleSweep = 0;

    return (
      <React.Fragment>
        {colorSlices.map((color, idx) => {
          const r = 10

          // Based on the number of events in each location,
          // create a slice per event filled with its category color
          const [startX, startY] = getCoordinatesForPercent(r, cumulativeAngleSweep);
          
          cumulativeAngleSweep = (idx + 1) / colorSlices.length;
          
          const [endX, endY] = getCoordinatesForPercent(r, cumulativeAngleSweep);

          // if the slices are less than 2, take the long arc
          const largeArcFlag = (colorSlices.length === 1) ? 1 : 0;

          // create an array and join it just for code readability
          const arc = [
            `M ${startX} ${startY}`,                           // Move
            `A ${r} ${r} 0 ${largeArcFlag} 1 ${endX} ${endY}`, // Arc
            `L 0 0 `,                                          // Line
            `L ${startX} ${startY} Z`,                          // Line
          ].join(' ');

          const extraStyles = ({
            ...styles,
            fill: color
          })

          return (
            <path
              onClick={() => { console.log('uo')}}
              class='location-event-marker'
              id={`arc_${idx}`}
              d={arc}
              style={extraStyles}
            />
          )
        })}
        
      </React.Fragment>
    ) 
  }

  function renderLocation (location) {
    /**
    {
      events: [...],
      label: 'Location name',
      latitude: '47.7',
      longitude: '32.2'
    }
    */
   const { x, y } = projectPoint([location.latitude, location.longitude])


    // in narrative mode, only render events in narrative
    if (narrative) {
      const { steps } = narrative
      const onlyIfInNarrative = e => steps.map(s => s.id).includes(e.id)
      const eventsInNarrative = location.events.filter(onlyIfInNarrative)

      if (eventsInNarrative.length <= 0) {
        return null
      }
    }

    const customStyles = styleLocation ? styleLocation(location) : null
    const extraRender = (customStyles) ? customStyles[1] : null

    return (
      <g
        className='location'
        transform={`translate(${x}, ${y})`}
        onClick={() => onSelect(location.events)}        
      >
        {renderLocationSlicesByCategory(location)}
        {extraRender ? extraRender() : null}
      </g>

    )
  }

  return (
    <Portal node={svg}>
      {locations.map(renderLocation)}
    </Portal>
  )
}

export default MapEvents