diff --git a/src/common/global.js b/src/common/global.js index b47c13f..8ec4a00 100644 --- a/src/common/global.js +++ b/src/common/global.js @@ -6,7 +6,7 @@ export const colors = { } export const sizes = { - eventDotR: 5 + eventDotR: 15 } export default { diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx index a51da5b..5e66abc 100644 --- a/src/components/Timeline.jsx +++ b/src/components/Timeline.jsx @@ -81,14 +81,18 @@ class Timeline extends React.Component { makeScaleY (categories, trackHeight, marginTop) { const tickHeight = sizes.eventDotR * 2 - const catHeight = trackHeight / (categories.length) - const shiftUp = trackHeight / (categories.length + 1) / 2 + const catHeight = trackHeight / (categories.length) + const shiftUp = trackHeight / (categories.length) / 2 const marginShift = marginTop === 0 ? 0 : marginTop const manualAdjustment = trackHeight <= 60 ? (trackHeight <= 30 ? -8 : -5) : 0 - const catsYpos = categories.map((g, i) => ((i + 1) * catHeight) - shiftUp + marginShift + manualAdjustment) - return d3.scaleOrdinal() - .domain(categories) - .range(catsYpos) + const catsYpos = categories.map((g, i) => { + return ((i+1) * catHeight) - shiftUp + marginShift + manualAdjustment + }) + const catMap = categories.map(c => c.category) + return (cat) => { + const idx = catMap.indexOf(cat) + return catsYpos[idx] + } } componentDidUpdate (prevProps, prevState) { diff --git a/src/components/TimelineAxis.jsx b/src/components/TimelineAxis.jsx index 92f6192..41b2a5e 100644 --- a/src/components/TimelineAxis.jsx +++ b/src/components/TimelineAxis.jsx @@ -59,17 +59,18 @@ class TimelineAxis extends React.Component { } render () { + const PADDING = 20; return ( diff --git a/src/components/presentational/Timeline/DatetimeDot.js b/src/components/presentational/Timeline/DatetimeDot.js index 1eff3e5..1c96524 100644 --- a/src/components/presentational/Timeline/DatetimeDot.js +++ b/src/components/presentational/Timeline/DatetimeDot.js @@ -10,7 +10,19 @@ export default ({ styleProps, extraRender }) => ( - +) +/** + -) + **/ diff --git a/src/components/presentational/Timeline/Events.js b/src/components/presentational/Timeline/Events.js index 61bef45..257942a 100644 --- a/src/components/presentational/Timeline/Events.js +++ b/src/components/presentational/Timeline/Events.js @@ -25,6 +25,7 @@ function getDotsToRender (events) { return Object.values(eventsByCategory) } +const HAS_PROJECTS = 'ASSOCIATIVE_EVENTS_BY_TAG' in process.env.features && process.env.features.ASSOCIATIVE_EVENTS_BY_TAG const TimelineEvents = ({ datetimes, @@ -77,7 +78,9 @@ const TimelineEvents = ({ const unlocatedProps = { fill: categoryColor, - fillOpacity: getEventOpacity(unlocatedEvents) + fillOpacity: HAS_PROJECTS + ? unlocatedEvents.some(ev => ev.projectOffset >= 0) ? getEventOpacity(unlocatedEvents) : 0.05 + : getEventOpacity(unlocatedEvents) / 3 } const extraRender = customStyles[1] @@ -102,7 +105,7 @@ const TimelineEvents = ({ x={getDatetimeX(datetime.timestamp)} y={ev.projectOffset >= 0 ? dims.trackHeight - ev.projectOffset : dims.marginTop} width={sizes.eventDotR} - height={ev.projectOffset >= 0 ? sizes.eventDotR * 2 : 20} + height={ev.projectOffset >= 0 ? sizes.eventDotR * 2 : dims.trackHeight} styleProps={unlocatedProps} />))} diff --git a/src/components/presentational/Timeline/Markers.js b/src/components/presentational/Timeline/Markers.js index ee9d1ab..2f97ab4 100644 --- a/src/components/presentational/Timeline/Markers.js +++ b/src/components/presentational/Timeline/Markers.js @@ -36,7 +36,7 @@ const TimelineMarkers = ({ className='timeline-marker' x={0} y={-dims.marginTop - (noCategories > 2 ? noCategories * MARKER_DISPLACED : MARKER_DISPLACED)} - width={(2 * sizes.eventDotR) * 0.9} + width={sizes.eventDotR} height={dims.trackHeight} stroke={styles ? styles.stroke : colors.primaryHighlight} stroke-opacity='1' diff --git a/src/components/presentational/Timeline/Project.js b/src/components/presentational/Timeline/Project.js index 7368d97..9fd21c1 100644 --- a/src/components/presentational/Timeline/Project.js +++ b/src/components/presentational/Timeline/Project.js @@ -12,7 +12,7 @@ export default ({ }) => { const length = getX(end) - getX(start) return alert('TODO: associate all events')} + onClick={() => console.error('TODO: associate all events')} className='project' x={getX(start)} y={dims.trackHeight - offset} diff --git a/src/selectors/index.js b/src/selectors/index.js index b8555e4..cb3d162 100644 --- a/src/selectors/index.js +++ b/src/selectors/index.js @@ -2,6 +2,7 @@ import { createSelector } from 'reselect' import { compareTimestamp, insetSourceFrom, dateMin, dateMax } from '../common/utilities' import { isTimeRangedIn, shuffle } from './helpers' import { sizes } from '../common/global' +const HAS_PROJECTS = 'ASSOCIATIVE_EVENTS_BY_TAG' in process.env.features && process.env.features.ASSOCIATIVE_EVENTS_BY_TAG // Input selectors export const getEvents = state => state.domain.events @@ -43,7 +44,8 @@ export const selectEvents = createSelector( const isMatchingTag = (event.tags && event.tags.map(tag => activeTags.includes(tag)).some(s => s)) || activeTags.length === 0 const isActiveTag = isMatchingTag || activeTags.length === 0 const isActiveCategory = activeCategories.includes(event.category) || activeCategories.length === 0 - const isActiveTime = isTimeRangedIn(event, timeRange) + let isActiveTime = isTimeRangedIn(event, timeRange) + isActiveTime = HAS_PROJECTS ? ((!event.latitude && !event.longitude) || isActiveTime) : isActiveTime if (isActiveTime && isActiveTag && isActiveCategory) { acc[event.id] = { ...event } @@ -152,7 +154,6 @@ export const selectLocations = createSelector( events: [...] } */ -const IS_PROJ = 'ASSOCIATIVE_EVENTS_BY_TAG' in process.env.features && process.env.features.ASSOCIATIVE_EVENTS_BY_TAG export const selectDatetimes = createSelector( [selectEvents], events => { @@ -170,8 +171,8 @@ export const selectDatetimes = createSelector( tsExists = datetimes.hasOwnProperty(dtKey) } - if (IS_PROJ) { - const project = event.tags.length >= 1 ? event.tags[0] : null + if (HAS_PROJECTS) { + const project = event.tags.length >= 1 && !event.latitude && !event.longitude ? event.tags[0] : null event = { ...event, project } if (project !== null) { if (projects.hasOwnProperty(project)) { @@ -194,7 +195,7 @@ export const selectDatetimes = createSelector( * TODO: find a more module way to interface with this code. */ let shouldCreate = true - if (IS_PROJ && dtIdx >= 2 && !(!!event.latitude && !!event.longitude) && event.project !== null) { + if (HAS_PROJECTS && dtIdx >= 2 && !(!!event.latitude && !!event.longitude) && event.project !== null) { const allExistingIdxs = [...Array(dtIdx - 1).keys()].map(k => k + 1) let foundMatching = false allExistingIdxs.forEach(_idx => { @@ -222,7 +223,7 @@ export const selectDatetimes = createSelector( }) const output = [] - if (IS_PROJ) { + if (HAS_PROJECTS) { const projKeys = Object.keys(projects) let sortedDts = Object.keys(datetimes) @@ -239,7 +240,9 @@ export const selectDatetimes = createSelector( output.push({ ...datetimes[dt], events: datetimes[dt].events.map(ev => { - let projectOffset = (activeProjects.indexOf(ev.project) + 1) * (2.5 * sizes.eventDotR) + const activeIdx = activeProjects.indexOf(ev.project) + let projectOffset = (activeIdx + 1) * (2.5 * sizes.eventDotR) + if (activeIdx === -1) projectOffset = -1 if (ev.project !== null && !projects[ev.project].hasOwnProperty('offset')) { projects[ev.project].offset = projectOffset projects[ev.project].category = ev.category diff --git a/src/store/initial.js b/src/store/initial.js index 8cc7040..eba08f2 100644 --- a/src/store/initial.js +++ b/src/store/initial.js @@ -60,12 +60,12 @@ const initial = { }, timeline: { dimensions: { - height: 250, + height: 1000, width: 0, marginLeft: 100, marginTop: 15, marginBottom: 60, - contentHeight: 200, + contentHeight: 900, width_controls: 100 }, range: [