bellingcat/ukraine-timemap
1
0
Fork 0
mirror of https://github.com/bellingcat/ukraine-timemap.git synced 2026-06-12 21:38:35 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix lint errors

Browse Source
This commit is contained in:
Franc Camps-Febrer
2019-02-01 12:23:11 -05:00
parent 6906adc258
commit 4af0c9c2ef
8 changed files with 67 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/presentational/Map/Events.jsx
View File

@@ -2,15 +2,13 @@ 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 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) {
function renderLocationSlicesByCategory (location) {
const locCategory = location.events.length > 0 ? location.events[0].category : 'default'
const customStyles = styleLocation ? styleLocation(location) : null
const extraStyles = customStyles[0]
@@ -25,7 +23,7 @@ function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation,
const colorSlices = location.events.map(e => getCategoryColor(e.category))
let cumulativeAngleSweep = 0;
let cumulativeAngleSweep = 0
return (
<React.Fragment>
@@ -34,22 +32,22 @@ function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation,
// 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);
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;
const largeArcFlag = (colorSlices.length === 1) ? 1 : 0
// create an array and join it just for code readability
const arc = [
`M ${startX} ${startY}`, // Move
`M ${startX} ${startY}`, // Move
`A ${r} ${r} 0 ${largeArcFlag} 1 ${endX} ${endY}`, // Arc
`L 0 0 `, // Line
`L ${startX} ${startY} Z`, // Line
].join(' ');
`L 0 0 `, // Line
`L ${startX} ${startY} Z` // Line
].join(' ')
const extraStyles = ({
...styles,
@@ -65,9 +63,9 @@ function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation,
/>
)
})}
</React.Fragment>
)
)
}
function renderLocation (location) {
@@ -79,8 +77,7 @@ function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation,
longitude: '32.2'
}
*/
const { x, y } = projectPoint([location.latitude, location.longitude])
const { x, y } = projectPoint([location.latitude, location.longitude])
// in narrative mode, only render events in narrative
if (narrative) {
@@ -100,7 +97,7 @@ function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation,
<g
className='location'
transform={`translate(${x}, ${y})`}
onClick={() => onSelect(location.events)}
onClick={() => onSelect(location.events)}
>
{renderLocationSlicesByCategory(location)}
{extraRender ? extraRender() : null}