diff --git a/src/components/Card.jsx b/src/components/Card.jsx index a7ad401..43fe4eb 100644 --- a/src/components/Card.jsx +++ b/src/components/Card.jsx @@ -33,12 +33,6 @@ class Card extends React.Component { }); } - getCategoryColorClass(category) { - if (category) - return this.props.getCategoryGroup(category); - return 'other'; - } - makeTimelabel(timestamp) { if (timestamp === null) return null; const parsedTimestamp = this.props.tools.parser(timestamp); @@ -48,8 +42,8 @@ class Card extends React.Component { renderCategory() { const categoryTitle = copy[this.props.language].cardstack.category; - const colorType = this.getCategoryColorClass(this.props.event.category); - const categoryLabel = this.props.getCategoryLabel(this.props.event.category); + const colorType = this.props.event.category || 'other'; + const categoryLabel = this.props.event.category; return ( +/*** this.getCategoryGroup(category), - getCategoryGroupColor: category => this.getCategoryGroupColor(category) + // getCategoryGroup: category => this.getCategoryGroup(category), + getCategoryColor: category => this.getCategoryColor(category) }} /> - + this.handleToggle(key) } actions={this.props.actions} /> this.getCategoryColor(category)} /> item)} - narratives={this.props.domain.narratives} - categories={this.props.domain.categories} - - timerange={this.props.app.filters.timerange} - selected={this.props.app.selected} - language={this.props.app.language} - - tools={this.props.ui.tools} - dom={this.props.ui.dom} - select={this.handleSelect} filter={this.handleTimeFilter} highlight={this.handleHighlight} @@ -207,31 +185,6 @@ class Dashboard extends React.Component { } } -function mapStateToProps(state) { - return Object.assign({}, state, { - domain: Object.assign({}, state.domain, { - // These items are affected by app selectionFilters - events: selectors.selectEvents(state), - locations: selectors.selectLocations(state), - categories: selectors.selectCategories(state), - narratives: selectors.selectNarratives(state), - - // These items are not affected by selectionFilters - sites: selectors.getSites(state), - tags: selectors.getTagTree(state), - notifications: selectors.getNotifications(state) - }), - app: Object.assign({}, state.app, { - error: state.app.error, - filters: Object.assign({}, state.app.filters, { - timerange: selectors.getTimeRange(state), - tags: selectors.selectTagList(state) - }) - }), - ui: state.ui - }); -} - function mapDispatchToProps(dispatch) { return { actions: bindActionCreators(actions, dispatch) @@ -239,6 +192,6 @@ function mapDispatchToProps(dispatch) { } export default connect( - mapStateToProps, + state => state, mapDispatchToProps, )(Dashboard); diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx index 2dfd8d7..e582bc9 100644 --- a/src/components/Timeline.jsx +++ b/src/components/Timeline.jsx @@ -1,5 +1,8 @@ -import copy from '../js/data/copy.json'; import React from 'react'; +import { connect } from 'react-redux'; +import * as selectors from '../selectors'; + +import copy from '../js/data/copy.json'; import TimelineLogic from '../js/timeline/timeline.js'; class Timeline extends React.Component { @@ -67,6 +70,7 @@ class Timeline extends React.Component { } render() { + let events = this.props.events const labels_title_lang = copy[this.props.language].timeline.labels_title; const info_lang = copy[this.props.language].timeline.info; let classes = `timeline-wrapper ${(this.state.isFolded) ? ' folded' : ''}`; @@ -92,4 +96,18 @@ class Timeline extends React.Component { } } -export default Timeline; +function mapStateToProps(state) { + return { + // events: selectors.selectEvents(state), + events: state.domain.events, + categories: selectors.selectCategories(state), + language: state.app.language, + tools: state.ui.tools, + timerange: selectors.getTimeRange(state), + dom: state.ui.dom, + selected: state.app.selected + } +} + +export default connect(mapStateToProps)(Timeline); +// export default Timeline \ No newline at end of file diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx index 368eedd..e7eef11 100644 --- a/src/components/Toolbar.jsx +++ b/src/components/Toolbar.jsx @@ -1,5 +1,7 @@ - import React from 'react'; +import { connect } from 'react-redux' +import * as selectors from '../selectors' + import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'; import Search from './Search.jsx'; import TagListPanel from './TagListPanel.jsx'; @@ -226,4 +228,16 @@ class Toolbar extends React.Component { } } -export default Toolbar; +function mapStateToProps(state) { + return { + tags: selectors.getTagTree(state), + categories: selectors.selectCategories(state), + language: state.app.language, + tagFilters: selectors.selectTagList(state), + categoryFilter: state.app.filters.categories, + viewFilters: state.app.filters.views, + features: state.app.features + } +} + +export default connect(mapStateToProps)(Toolbar) diff --git a/src/js/map/map.js b/src/js/map/map.js index 1d42691..742b83a 100644 --- a/src/js/map/map.js +++ b/src/js/map/map.js @@ -13,7 +13,7 @@ export default function(newApp, ui, methods) { const domain = { locations: [], narratives: [], - categoryGroups: [], + categories: [], sites: [] } const app = { @@ -23,7 +23,7 @@ export default function(newApp, ui, methods) { } const getCategoryGroup = methods.getCategoryGroup; - const getCategoryGroupColor = methods.getCategoryGroupColor; + const getCategoryColor = methods.getCategoryColor; const select = methods.select; const groupColors = ui.groupColors; const narrativeProps = ui.narratives; @@ -227,27 +227,27 @@ Stop and start the development process in terminal after you have added your tok */ function getLocationEventsDistribution(location) { - const eventsHere = {}; - const categoryGroups = domain.categoryGroups; - categoryGroups.sort((a, b) => { + // const eventsHere = {}; + const categories = domain.categories; + categories.sort((a, b) => { return (+a.slice(-2) > +b.slice(-2)); }); - categoryGroups.forEach(group => { + categories.forEach(group => { eventsHere[group] = 0 }); - location.events.forEach((event) => { - const group = getCategoryGroup(event.category); - eventsHere[group] += 1; - }); + // location.events.forEach((event) => { + // const group = getCategoryGroup(event.category); + // eventsHere[group] += 1; + // }); let i = 0; const events = []; - while (i < categoryGroups.length) { - let eventsCount = eventsHere[categoryGroups[i]]; - for (let j = i + 1; j < categoryGroups.length; j++) { - eventsCount += eventsHere[categoryGroups[j]]; + while (i < categories.length) { + let eventsCount = eventsHere[categories[i]]; + for (let j = i + 1; j < categories.length; j++) { + eventsCount += eventsHere[categories[j]]; } events.push(eventsCount); i++; @@ -281,7 +281,8 @@ Stop and start the development process in terminal after you have added your tok select(location.events); }); - const eventsDom = g.selectAll('.location').selectAll('.location-event-marker') + const eventsDom = g.selectAll('.location') + .selectAll('.location-event-marker') .data((d, i) => getLocationEventsDistribution(domain.locations[i]), (d, i) => 'location-' + i); @@ -298,7 +299,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) => groupColors[domain.categoryGroups[i]]) + .style('fill', (d, i) => groupColors[domain.categories[i]]) .transition() .duration(500) .attr('r', d => (d) ? Math.sqrt(16 * d) + 3 : 0); @@ -391,7 +392,7 @@ Stop and start the development process in terminal after you have added your tok if (hash(domain) !== hash(newDomain)) { domain.locations = newDomain.locations; domain.narratives = newDomain.narratives; - domain.categoryGroups = newDomain.categoryGroups; + domain.categories = newDomain.categories; domain.sites = newDomain.sites; renderDomain(); } diff --git a/src/js/timeline/timeline.js b/src/js/timeline/timeline.js index 774e483..382a90a 100644 --- a/src/js/timeline/timeline.js +++ b/src/js/timeline/timeline.js @@ -50,22 +50,15 @@ export default function(app, ui) { active: false }, ]; - let events = []; - let categoryGroups = []; + let categories = []; let selected = []; let timerange = app.timerange; const timeFilter = app.filter; const select = app.select; const getCategoryLabel = app.getCategoryLabel; - const getCategoryGroupColor = app.getCategoryGroupColor; - const getCategoryGroup = app.getCategoryGroup; - - // Play functions - window.playInterval; - let isPlaying = false; - const playDuration = 1000; + const getCategoryColor = app.getCategoryColor; // Drag behavior let dragPos0; @@ -93,14 +86,15 @@ export default function(app, ui) { .domain(timerange) .range([mg.l, WIDTH]); - const groupStep = (106 - 30) / categoryGroups.length; - const groupYs = new Array(categoryGroups.length); + // calculate group step between categories + const groupStep = (106 - 30) / categories.length; + const groupYs = new Array(categories.length); groupYs.map((g, i) => { return 30 + i * groupStep; }); scale.y = d3.scaleOrdinal() - .domain(categoryGroups) + .domain(categories) .range(groupYs); /** @@ -292,7 +286,7 @@ export default function(app, ui) { * @param {object} eventPoint data object */ function getEventPointFillColor(eventPoint) { - return getCategoryGroupColor(eventPoint.category); + return getCategoryColor(eventPoint.category); } /** @@ -301,10 +295,10 @@ export default function(app, ui) { */ function getAllEventsAtOnce(eventPoint) { const timestamp = eventPoint.timestamp; - const categoryGroup = getCategoryGroup(eventPoint.category); + const categoryGroup = eventPoint.category; return events.filter(event => { return (event.timestamp === timestamp && - categoryGroup === getCategoryGroup(event.category)) + categoryGroup === event.category) }).map(event => event.id); } @@ -313,7 +307,7 @@ export default function(app, ui) { * @param {object} eventPoint: regular eventPoint data */ function getEventY(eventPoint) { - const yGroup = getCategoryGroup(eventPoint.category); + const yGroup = eventPoint.category; return scale.y(yGroup); } @@ -370,7 +364,7 @@ export default function(app, ui) { /** * Shift time range by moving forward or backwards - * @param {Stirng} direction: 'forward' / 'backwards' + * @param {String} direction: 'forward' / 'backwards' */ function moveTime(direction) { select(); @@ -597,7 +591,6 @@ export default function(app, ui) { * @param {Object} app: Redux state app subtree */ function updateAxis(domain) { - console.log(domain) const categories = domain.categories const groupStep = (106 - 30) / categories.length; let groupYs = Array.apply(null, Array(categories.length)); diff --git a/src/reducers/schema/categorySchema.js b/src/reducers/schema/categorySchema.js index 4156379..d51b561 100644 --- a/src/reducers/schema/categorySchema.js +++ b/src/reducers/schema/categorySchema.js @@ -2,11 +2,7 @@ import Joi from 'joi'; const categorySchema = Joi.object().keys({ category: Joi.string().required(), - category_label: Joi.string().allow('').required(), - group: Joi.string(), - group_label: Joi.string(), + description: Joi.string(), }); -const optionalSchema = categorySchema.optionalKeys('group', 'group_label'); - export default categorySchema; diff --git a/src/store/initial.js b/src/store/initial.js index 78ac9fb..a1fac0a 100644 --- a/src/store/initial.js +++ b/src/store/initial.js @@ -31,7 +31,7 @@ const initial = { filters: { timerange: [ d3.timeParse("%Y-%m-%dT%H:%M:%S")("2014-08-22T12:00:00"), - d3.timeParse("%Y-%m-%dT%H:%M:%S")("2014-08-27T12:00:00") + d3.timeParse("%Y-%m-%dT%H:%M:%S")("2017-08-27T12:00:00") ], tags: [], categories: [],