From afc84e61aca43642b0afe8c6fbacd802054847b5 Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Mon, 24 Feb 2020 05:55:00 +1300 Subject: [PATCH] removes numbers, increases opacity for more events instead --- src/common/utilities.js | 8 ++++++++ src/components/Map.jsx | 11 +++-------- src/components/Timeline.jsx | 14 +++++--------- src/components/presentational/Map/Events.jsx | 9 +++++++-- .../presentational/Timeline/Events.js | 18 +++++++++++++++--- src/scss/map.scss | 6 ------ 6 files changed, 38 insertions(+), 28 deletions(-) diff --git a/src/common/utilities.js b/src/common/utilities.js index 85df393..25c1718 100644 --- a/src/common/utilities.js +++ b/src/common/utilities.js @@ -174,3 +174,11 @@ export function typeForPath (path) { export function selectTypeFromPathWithPoster (path, poster) { return { type: typeForPath(path), path, poster } } + +export function getEventOpacity (events) { + /* Events have opacity 0.5 by default, and get added to according to how many + * other events there are in the same render. The idea here is that the + * overlaying of events builds up a 'heat map' of the event space, where + * darker areas represent more events with proportion */ + return 0.3 + (Math.min(0.5, 0.08 * (events.length - 1))) +} diff --git a/src/components/Map.jsx b/src/components/Map.jsx index 7c9f0a1..ae340bc 100644 --- a/src/components/Map.jsx +++ b/src/components/Map.jsx @@ -193,16 +193,11 @@ class Map extends React.Component { * also has full access to the domain and redux state to derive values if * necessary. The function should return an array, where the value at the * first index is a styles object for the SVG at the location, and the value - * at the second index is an optional function that renders additional - * components in the div. + * at the second index is an optional additional component that renders in + * the div. */ styleLocation (location) { - const noEvents = location.events.length - - return [ - null, - () => noEvents > 1 ? {noEvents} : null - ] + return [null, null] } renderEvents () { diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx index c358d6d..d532ba1 100644 --- a/src/components/Timeline.jsx +++ b/src/components/Timeline.jsx @@ -254,20 +254,16 @@ class Timeline extends React.Component { } /** - * Determines additional styles on the for each timestamp. Note that - * timestamp visualisation functions slightly differently from locations, as - * a timestamp can be shown as multiple s (one per category of the - * events contained therein). Thus the function below has a category as an - * argumnent as well, in case timestamps ought to be styled per category. - * A datetime consists of an array of events (see selectors). The function + * Determines additional styles on the for each location. + * A location consists of an array of events (see selectors). The function * also has full access to the domain and redux state to derive values if * necessary. The function should return an array, where the value at the * first index is a styles object for the SVG at the location, and the value - * at the second index is an optional function that renders additional - * components in the div. + * at the second index is an optional additional component that renders in + * the div. */ styleDatetime (timestamp, category) { - return [] + return [null, null] } render () { diff --git a/src/components/presentational/Map/Events.jsx b/src/components/presentational/Map/Events.jsx index 9fc557d..3df2a34 100644 --- a/src/components/presentational/Map/Events.jsx +++ b/src/components/presentational/Map/Events.jsx @@ -1,6 +1,7 @@ import React from 'react' import { Portal } from 'react-portal' import colors from '../../../common/global.js' +import { getEventOpacity } from '../../../common/utilities' function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation, selected, narrative, onSelect, svg, locations }) { function getCoordinatesForPercent (radius, percent) { @@ -33,7 +34,7 @@ function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation, fill: getCategoryColor(locCategory), stroke: colors.darkBackground, strokeWidth: 0, - fillOpacity: 0.85, + fillOpacity: getEventOpacity(location.events), ...extraStyles }) @@ -108,7 +109,11 @@ function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation, } const customStyles = styleLocation ? styleLocation(location) : null - const extraRender = (customStyles) ? customStyles[1] : null + const extraRender = () => ( + + {customStyles[1]} + + ) const isSelected = selected.reduce((acc, event) => { return acc || (event.latitude === location.latitude && event.longitude === location.longitude) diff --git a/src/components/presentational/Timeline/Events.js b/src/components/presentational/Timeline/Events.js index e4a24fb..bd80ea2 100644 --- a/src/components/presentational/Timeline/Events.js +++ b/src/components/presentational/Timeline/Events.js @@ -1,5 +1,6 @@ import React from 'react' import DatetimeDot from './DatetimeDot' +import { getEventOpacity } from '../../../common/utilities' // return a list of lists, where each list corresponds to a single category function getDotsToRender (events) { @@ -55,16 +56,26 @@ const TimelineEvents = ({ return dotsToRender.map(dot => { const customStyles = styleDatetime ? styleDatetime(datetime, dot.category) : null const extraStyles = customStyles[0] - const extraRender = customStyles[1] + // const isLocated = dot.events.map(ev => !ev.latitude || !ev.longitude) + + // TODO: work out smarter way to manage opacity w.r.t. length + // i.e. render (count - 1) extra dots with a bit of noise in position + // and that, when clicked, all open the same events. const styleProps = ({ fill: getCategoryColor(dot.category), - fillOpacity: 1, + fillOpacity: getEventOpacity(dot.events), transition: `transform ${transitionDuration / 1000}s ease`, ...extraStyles }) - return ( + const extraRender = () => ( + + {customStyles[1]} + + ) + + return ( + ) }) } diff --git a/src/scss/map.scss b/src/scss/map.scss index 64cbba0..736c3f0 100644 --- a/src/scss/map.scss +++ b/src/scss/map.scss @@ -189,12 +189,6 @@ stroke-width: 2px; } -.location-count { - z-index: 100; - font-weight: 900; - fill: #d0d0d0; -} - .no-hover { cursor: grab; }