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

Polygon shapes abstracted to be types of checkboxes; abstracted rendering of panel into one component; importing shapes from separate endpoint

Browse Source
This commit is contained in:
efarooqui
2021-05-20 18:44:26 -07:00
parent e431422c19
commit 7156639ec3
23 changed files with 308 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/time/atoms/DatetimePentagon.js
View File

@@ -7,7 +7,7 @@ const DatetimePentagon = ({ x, y, r, transform, onSelect, styleProps }) => {
onClick={onSelect}
className="event"
x={x}
y={y - r}
y={y}
style={styleProps}
points={`${x},${y + s} ${x + s},${y} ${x + s},${y - s} ${x - s},${
y - s

2
src/components/time/atoms/DatetimeStar.js
View File

@@ -15,7 +15,7 @@ const DatetimeStar = ({
onClick={onSelect}
className="event"
x={x}
y={y - r}
y={y}
style={styleProps}
points={`${x + s},${y - s} ${x - r},${y} ${x + r},${y} ${x - s},${
y - s

2
src/components/time/atoms/DatetimeTriangle.js
View File

@@ -7,7 +7,7 @@ const DatetimeTriangle = ({ x, y, r, transform, onSelect, styleProps }) => {
onClick={onSelect}
className="event"
x={x}
y={y - r}
y={y}
style={styleProps}
points={`${x},${y + s} ${x + s},${y - s} ${x - s},${y - s}`}
transform={`rotate(180, ${x}, ${y})`}

13
src/components/time/atoms/Events.js
View File

@@ -14,6 +14,7 @@ import {
isLatitude,
isLongitude,
} from "../../../common/utilities";
import { AVAILABLE_SHAPES } from "../../../common/constants";
function renderDot(event, styles, props) {
const colorPercentages = calculateColorPercentages(
@@ -158,17 +159,17 @@ const TimelineEvents = ({
let renderShape = isDot ? renderDot : renderBar;
if (event.shape) {
if (event.shape === "bar") {
if (event.shape === AVAILABLE_SHAPES.BAR) {
renderShape = renderBar;
} else if (event.shape === "diamond") {
} else if (event.shape === AVAILABLE_SHAPES.DIAMOND) {
renderShape = renderDiamond;
} else if (event.shape === "star") {
} else if (event.shape === AVAILABLE_SHAPES.STAR) {
renderShape = renderStar;
} else if (event.shape === "triangle") {
} else if (event.shape === AVAILABLE_SHAPES.TRIANGLE) {
renderShape = renderTriangle;
} else if (event.shape === "pentagon") {
} else if (event.shape === AVAILABLE_SHAPES.PENTAGON) {
renderShape = renderPentagon;
} else if (event.shape === "square") {
} else if (event.shape === AVAILABLE_SHAPES.SQUARE) {
renderShape = renderSquare;
} else {
renderShape = renderDot;

7
src/components/time/atoms/Markers.js
View File

@@ -5,6 +5,7 @@ import {
isLatitude,
isLongitude,
} from "../../../common/utilities";
import { AVAILABLE_SHAPES } from "../../../common/constants";
const TimelineMarkers = ({
styles,
@@ -72,11 +73,11 @@ const TimelineMarkers = ({
function renderMarkerForEvent(y) {
switch (event.shape) {
case "circle":
case "diamond":
case "star":
case AVAILABLE_SHAPES.DIAMOND:
case AVAILABLE_SHAPES.STAR:
acc.push(renderCircle(y));
break;
case "bar":
case AVAILABLE_SHAPES.BAR:
acc.push(renderBar(y));
break;
default: