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

correct timeline selection

Browse Source
This commit is contained in:
Lachlan Kermode
2020-05-29 14:57:09 +02:00
parent 3fc1ff4c28
commit 3b4a3312d5
10 changed files with 104 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/presentational/Timeline/Events.js
View File

@@ -21,7 +21,7 @@ function renderDot (event, styles, props) {
function renderBar (event, styles, props) {
const fillOpacity = props.features.GRAPH_NONLOCATED
? event.projectOffset >= 0 ? styles.opacity : 0.05
? event.projectOffset >= 0 ? styles.opacity : 0.5
: 0.6
return <DatetimeBar
@@ -80,7 +80,8 @@ const TimelineEvents = ({
}
}
let renderShape = renderDot
const isDot = (!!event.location && !!event.longitude) || (features.GRAPH_NONLOCATED && event.projectOffset !== -1)
let renderShape = isDot ? renderDot : renderBar
if (event.shape) {
if (event.shape === 'bar') {
renderShape = renderBar
@@ -103,7 +104,7 @@ const TimelineEvents = ({
y: (features.GRAPH_NONLOCATED && !event.latitude && !event.longitude)
? event.projectOffset >= 0 ? dims.trackHeight - event.projectOffset : dims.marginTop
: getCategoryY ? getCategoryY(event.category) : () => null,
onSelect: () => onSelect([event]),
onSelect: () => onSelect(event),
dims,
highlights: features.HIGHLIGHT_GROUPS ? getHighlights(event.tags[features.HIGHLIGHT_GROUPS.tagIndexIndicatingGroup]) : [],
features

14
src/components/presentational/Timeline/Markers.js
View File

@@ -4,14 +4,18 @@ import colors, { sizes } from '../../../common/global'
const TimelineMarkers = ({
styles,
getEventX,
getY,
getCategoryY,
transitionDuration,
selected,
dims,
noCategories
features
}) => {
function renderMarker (event) {
function renderCircle () {
const yVal = (features.GRAPH_NONLOCATED && !event.latitude && !event.longitude)
? event.projectOffset >= 0 ? dims.trackHeight - event.projectOffset : dims.marginTop
: getCategoryY ? getCategoryY(event.category) : () => null
return <circle
className='timeline-marker'
cx={0}
@@ -22,7 +26,7 @@ const TimelineMarkers = ({
stroke-linejoin='round'
stroke-dasharray={styles ? styles['stroke-dasharray'] : '2,2'}
style={{
'transform': `translate(${getEventX(event.timestamp)}px, ${getY(event)}px)`,
'transform': `translate(${getEventX(event.timestamp)}px, ${yVal}px)`,
'-webkit-transition': `transform ${transitionDuration / 1000}s ease`,
'-moz-transition': 'none',
'opacity': 0.9
@@ -47,7 +51,7 @@ const TimelineMarkers = ({
}}
/>
}
const isLocated = !!event.latitude && !!event.longitude
const isDot = (!features.GRAPH_NONLOCATED && !!event.latitude && !!event.longitude) || (features.GRAPH_NONLOCATED && (event.projectOffset !== -1 || (!!event.latitude && !!event.longitude)))
switch (event.shape) {
case 'circle':
return renderCircle()
@@ -58,7 +62,7 @@ const TimelineMarkers = ({
case 'star':
return renderCircle()
default:
return isLocated ? renderBar() : renderCircle()
return isDot ? renderCircle() : renderBar()
}
}