diff --git a/src/common/global.js b/src/common/global.js
index f6a2800..9ba06d0 100644
--- a/src/common/global.js
+++ b/src/common/global.js
@@ -5,14 +5,9 @@ export const colors = {
white: '#fff'
}
-export const sizes = {
- eventDotR: 8
-}
-
export default {
fallbackEventColor: colors.fa_red,
darkBackground: colors.black,
primaryHighlight: colors.yellow,
- secondaryHighlight: colors.white,
- sizes
+ secondaryHighlight: colors.white
}
diff --git a/src/components/Map.jsx b/src/components/Map.jsx
index 843693f..319c0fe 100644
--- a/src/components/Map.jsx
+++ b/src/components/Map.jsx
@@ -215,6 +215,7 @@ class Map extends React.Component {
onSelect={this.props.methods.onSelect}
onSelectNarrative={this.props.methods.onSelectNarrative}
getCategoryColor={this.props.methods.getCategoryColor}
+ eventRadius={this.props.ui.eventRadius}
/>
)
}
@@ -286,7 +287,8 @@ function mapStateToProps (state) {
dom: state.ui.dom,
narratives: state.ui.style.narratives,
mapSelectedEvents: state.ui.style.selectedEvents,
- shapes: state.ui.style.shapes
+ shapes: state.ui.style.shapes,
+ eventRadius: state.ui.eventRadius
},
features: selectors.getFeatures(state)
}
diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx
index 3c0bd4a..5f3fdc3 100644
--- a/src/components/Timeline.jsx
+++ b/src/components/Timeline.jsx
@@ -51,7 +51,6 @@ class Timeline extends React.Component {
if ((hash(nextProps.domain.categories) !== hash(this.props.domain.categories)) || hash(nextProps.dimensions) !== hash(this.props.dimensions)) {
const { trackHeight, marginTop } = nextProps.dimensions
- console.log(nextProps.domain.categories)
this.setState({
scaleY: this.makeScaleY(nextProps.domain.categories, trackHeight, marginTop)
})
@@ -283,7 +282,7 @@ class Timeline extends React.Component {
const { category, project } = event
if (GRAPH_NONLOCATED && GRAPH_NONLOCATED.categories.includes(category)) {
- return this.state.dims.marginTop + domain.projects[project].offset + sizes.eventDotR
+ return this.state.dims.marginTop + domain.projects[project].offset + this.props.ui.eventRadius
}
return this.state.scaleY(category)
}
@@ -364,6 +363,7 @@ class Timeline extends React.Component {
transitionDuration={this.state.transitionDuration}
styles={this.props.ui.styles}
features={this.props.features}
+ eventRadius={this.props.ui.eventRadius}
/>
@@ -412,7 +413,8 @@ function mapStateToProps (state) {
},
ui: {
dom: state.ui.dom,
- styles: state.ui.style.selectedEvents
+ styles: state.ui.style.selectedEvents,
+ eventRadius: state.ui.eventRadius
},
features: selectors.getFeatures(state)
}
diff --git a/src/components/presentational/Map/Events.jsx b/src/components/presentational/Map/Events.jsx
index 33e949d..33fb734 100644
--- a/src/components/presentational/Map/Events.jsx
+++ b/src/components/presentational/Map/Events.jsx
@@ -12,7 +12,8 @@ function MapEvents ({
narrative,
onSelect,
svg,
- locations
+ locations,
+ eventRadius
}) {
function getCoordinatesForPercent (radius, percent) {
const x = radius * Math.cos(2 * Math.PI * percent)
@@ -55,7 +56,7 @@ function MapEvents ({
return (
{colorSlices.map((color, idx) => {
- const r = 10
+ const r = eventRadius
// Based on the number of events in each location,
// create a slice per event filled with its category color
diff --git a/src/components/presentational/Timeline/Events.js b/src/components/presentational/Timeline/Events.js
index deb3145..d6c55eb 100644
--- a/src/components/presentational/Timeline/Events.js
+++ b/src/components/presentational/Timeline/Events.js
@@ -5,7 +5,6 @@ import DatetimeSquare from './DatetimeSquare'
import DatetimeStar from './DatetimeStar'
import Project from './Project'
import { calcOpacity } from '../../../common/utilities'
-import { sizes } from '../../../common/global'
function renderDot (event, styles, props) {
return
}
@@ -30,7 +29,7 @@ function renderBar (event, styles, props) {
events={[event]}
x={props.x}
y={props.dims.marginTop}
- width={sizes.eventDotR / 4}
+ width={props.eventRadius / 4}
height={props.dims.trackHeight}
styleProps={{ ...styles, fillOpacity }}
highlights={props.highlights}
@@ -42,7 +41,7 @@ function renderDiamond (event, styles, props) {
onSelect={props.onSelect}
x={props.x}
y={props.y}
- r={1.8 * sizes.eventDotR}
+ r={1.8 * props.eventRadius}
styleProps={styles}
/>
}
@@ -52,7 +51,7 @@ function renderStar (event, styles, props) {
onSelect={props.onSelect}
x={props.x}
y={props.y}
- r={1.8 * sizes.eventDotR}
+ r={1.8 * props.eventRadius}
styleProps={{ ...styles, fillRule: 'nonzero' }}
transform='rotate(90)'
/>
@@ -71,7 +70,8 @@ const TimelineEvents = ({
dims,
features,
setLoading,
- setNotLoading
+ setNotLoading,
+ eventRadius
}) => {
const narIds = narrative ? narrative.steps.map(s => s.id) : []
@@ -107,6 +107,7 @@ const TimelineEvents = ({
return renderShape(event, styles, {
x: getDatetimeX(event.datetime),
y: eventY,
+ eventRadius,
onSelect: () => onSelect(event),
dims,
highlights: features.HIGHLIGHT_GROUPS ? getHighlights(event.filters[features.HIGHLIGHT_GROUPS.filterIndexIndicatingGroup]) : [],
@@ -120,6 +121,7 @@ const TimelineEvents = ({
return
{Object.values(projects).map(project => console.log(project)}
getX={getDatetimeX}
dims={dims}
diff --git a/src/components/presentational/Timeline/Markers.js b/src/components/presentational/Timeline/Markers.js
index dbd0dee..0099245 100644
--- a/src/components/presentational/Timeline/Markers.js
+++ b/src/components/presentational/Timeline/Markers.js
@@ -3,6 +3,7 @@ import colors, { sizes } from '../../../common/global'
const TimelineMarkers = ({
styles,
+ eventRadius,
getEventX,
getEventY,
transitionDuration,
@@ -27,7 +28,7 @@ const TimelineMarkers = ({
'-moz-transition': 'none',
'opacity': 0.9
}}
- r={sizes.eventDotR * 2}
+ r={eventRadius * 2}
/>
}
function renderBar () {
@@ -35,7 +36,7 @@ const TimelineMarkers = ({
className='timeline-marker'
x={0}
y={0}
- width={sizes.eventDotR / 3}
+ width={eventRadius / 3}
height={dims.contentHeight - 55}
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 e162aa0..1574076 100644
--- a/src/components/presentational/Timeline/Project.js
+++ b/src/components/presentational/Timeline/Project.js
@@ -1,5 +1,4 @@
import React from 'react'
-import { sizes } from '../../../common/global'
export default ({
offset,
@@ -10,6 +9,7 @@ export default ({
y,
dims,
colour,
+ eventRadius,
onClick
}) => {
const length = getX(end) - getX(start)
@@ -21,6 +21,6 @@ export default ({
y={dims.marginTop + offset}
width={length}
style={{ fill: colour, fillOpacity: 0.2 }}
- height={2 * sizes.eventDotR}
+ height={2 * eventRadius}
/>
}
diff --git a/src/selectors/index.js b/src/selectors/index.js
index 4a66352..d52c430 100644
--- a/src/selectors/index.js
+++ b/src/selectors/index.js
@@ -21,6 +21,7 @@ export const getTimeRange = state => state.app.timeline.range
export const getTimelineDimensions = state => state.app.timeline.dimensions
export const selectNarrative = state => state.app.narrative
export const getFeatures = state => state.features
+export const getEventRadius = state => state.ui.eventRadius
export const selectSites = createSelector([getSites, getFeatures], (sites, features) => {
if (features.USE_SITES) {
@@ -158,12 +159,12 @@ export const selectLocations = createSelector(
)
export const selectEventsWithProjects = createSelector(
- [selectEvents, getFeatures],
- (events, features) => {
+ [selectEvents, getFeatures, getEventRadius],
+ (events, features, eventRadius) => {
if (!features.GRAPH_NONLOCATED) {
return [events, []]
}
- const projSize = 2 * sizes.eventDotR
+ const projSize = 2 * eventRadius
const projectIdx = features.GRAPH_NONLOCATED.projectIdx || 0
const getProject = ev => ev.filters[projectIdx]
const projects = {}
diff --git a/src/store/initial.js b/src/store/initial.js
index 7a11c5a..8976525 100644
--- a/src/store/initial.js
+++ b/src/store/initial.js
@@ -127,7 +127,8 @@ const initial = {
timeline: 'timeline',
timeslider: 'timeslider',
map: 'map'
- }
+ },
+ eventRadius: 8
},
features: {