diff --git a/src/components/Card.jsx b/src/components/Card.jsx
index cae770c..d53bc31 100644
--- a/src/components/Card.jsx
+++ b/src/components/Card.jsx
@@ -41,17 +41,15 @@ class Card extends React.Component {
}
renderCategory() {
- const eventCat = this.props.event.category || 'other';
const categoryTitle = copy[this.props.language].cardstack.category;
- const colorType = this.props.style.categories[eventCat] || this.props.style.categories['other'];
- console.log(eventCat, this.props.event.category, this.props.style.categories)
const categoryLabel = this.props.event.category;
+ const color = this.props.getCategoryColor(this.props.event.category);
return (
);
}
diff --git a/src/components/CardStack.jsx b/src/components/CardStack.jsx
index 6520cc0..84ae9aa 100644
--- a/src/components/CardStack.jsx
+++ b/src/components/CardStack.jsx
@@ -22,11 +22,10 @@ class CardStack extends React.Component {
event={event}
language={this.props.language}
tools={this.props.tools}
- style={this.props.style}
isLoading={this.props.isLoading}
getNarrativeLinks={this.props.getNarrativeLinks}
getCategoryGroup={this.props.getCategoryGroup}
- getCategoryGroupColor={this.props.getCategoryGroupColor}
+ getCategoryColor={this.props.getCategoryColor}
getCategoryLabel={this.props.getCategoryLabel}
highlight={this.props.highlight}
select={this.props.select}
@@ -99,7 +98,6 @@ function mapStateToProps(state) {
selected: state.app.selected,
language: state.app.language,
tools: state.ui.tools,
- style: state.ui.style,
isCardstack: state.ui.flags.isCardstack,
isLoading: state.ui.flags.isFetchingEvents
}
diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx
index 19100dc..1c6d4bf 100644
--- a/src/components/Dashboard.jsx
+++ b/src/components/Dashboard.jsx
@@ -92,8 +92,8 @@ class Dashboard extends React.Component {
}
}
- getCategoryColor(category) {
- return this.props.ui.style.categories[category];
+ getCategoryColor(category='other') {
+ return this.props.ui.style.categories[category] || this.props.style.categories['other']
}
getNarrativeLinks(event) {
diff --git a/src/components/Viewport.jsx b/src/components/Viewport.jsx
index e886422..363a652 100644
--- a/src/components/Viewport.jsx
+++ b/src/components/Viewport.jsx
@@ -43,8 +43,7 @@ function mapStateToProps(state) {
},
ui: {
dom: state.ui.dom,
- narratives: state.ui.style.narratives,
- categories: state.ui.style.narratives
+ narratives: state.ui.style.narratives
}
}
}
diff --git a/src/components/presentational/CardCategory.js b/src/components/presentational/CardCategory.js
index 082252c..43dd010 100644
--- a/src/components/presentational/CardCategory.js
+++ b/src/components/presentational/CardCategory.js
@@ -1,10 +1,10 @@
import React from 'react';
-const CardCategory = ({ categoryTitle, categoryLabel, colorType }) => (
+const CardCategory = ({ categoryTitle, categoryLabel, color }) => (
{categoryTitle}
-
+
{categoryLabel}
diff --git a/src/js/map/map.js b/src/js/map/map.js
index 2b9e71b..d05e555 100644
--- a/src/js/map/map.js
+++ b/src/js/map/map.js
@@ -8,8 +8,6 @@ import 'leaflet-polylinedecorator';
export default function(newApp, ui, methods) {
let svg, g, defs;
- let categoryColorGroups = {};
-
const domain = {
locations: [],
narratives: [],
@@ -22,10 +20,8 @@ export default function(newApp, ui, methods) {
views: Object.assign({}, newApp.views),
}
- // const getCategoryGroup = methods.getCategoryGroup;
- // const getCategoryColor = methods.getCategoryColor;
+ const getCategoryColor = methods.getCategoryColor;
const select = methods.select;
- const categoryColors = ui.categories;
const narrativeProps = ui.narratives;
// Map Settings
@@ -296,7 +292,7 @@ Stop and start the development process in terminal after you have added your tok
eventsDom
.enter().append('circle')
.attr('class', 'location-event-marker')
- .style('fill', (d, i) => categoryColors[domain.categories[i]])
+ .style('fill', (d, i) => getCategoryColor(domain.categories[i]))
.transition()
.duration(500)
.attr('r', d => (d) ? Math.sqrt(16 * d) + 3 : 0);