diff --git a/src/components/Map.jsx b/src/components/Map.jsx index 6f93158..7ced231 100644 --- a/src/components/Map.jsx +++ b/src/components/Map.jsx @@ -112,7 +112,6 @@ class Map extends React.Component { } renderSVG() { - if (this.map === null) return ''; const pane = this.map.getPanes().overlayPane; const { width, height } = this.getClientDims(); @@ -203,7 +202,7 @@ class Map extends React.Component { return (
- {this.renderSVG()} + {(this.map !== null) ? this.renderSVG() : ''} {(this.map !== null) ? this.renderMarkers() : ''} {(this.map !== null) ? this.renderSites() : ''} {(this.map !== null) ? this.renderEvents() : ''} diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx index c719778..015ee6e 100644 --- a/src/components/Timeline.jsx +++ b/src/components/Timeline.jsx @@ -9,20 +9,29 @@ import TimelineHeader from './presentational/TimelineHeader'; import TimelineHandles from './TimelineHandles.jsx'; import TimelineZoomControls from './TimelineZoomControls.jsx'; import TimelineLogic from '../js/timeline/timeline.js'; - +import TimelineLabels from './TimelineLabels.jsx'; class Timeline extends React.Component { constructor(props) { super(props); this.svgRef = React.createRef() this.state = { - isFolded: false + isFolded: false, + dims: { + height: 140, + width: 0, + width_controls: 100, + height_controls: 115, + margin_left: 120 + } }; } componentDidMount() { this.timeline = new TimelineLogic(this.svgRef.current, this.props.app, this.props.ui, this.props.methods); this.timeline.update(this.props.domain, this.props.app); + this.computeDims(); + window.addEventListener('resize', () => { this.computeDims(); }); } componentWillReceiveProps(nextProps) { @@ -37,21 +46,11 @@ class Timeline extends React.Component { }); } - getClientDims() { - const WIDTH_CONTROLS = 100; - const HEIGHT = 140; - let WIDTH = 0; - + computeDims() { if (document.querySelector(`#${this.props.ui.dom.timeline}`) !== null) { const boundingClient = document.querySelector(`#${this.props.ui.dom.timeline}`).getBoundingClientRect(); - WIDTH = boundingClient.width; - } - return { - height: HEIGHT, - width: WIDTH, - width_controls: WIDTH_CONTROLS, - height_controls: 115, - margin_left: 120 + const WIDTH = boundingClient.width; + this.setState({ dims: Object.assign({}, this.state.dims, { width: WIDTH }) }); } } @@ -70,8 +69,8 @@ class Timeline extends React.Component { } renderSVG() { - const dims = this.getClientDims(); - + const dims = this.state.dims; + return ( { this.onMoveTime(dir) }} /> { this.onApplyZoom(zoom); }} /> + ); } diff --git a/src/components/TimelineLabels.jsx b/src/components/TimelineLabels.jsx new file mode 100644 index 0000000..7390acf --- /dev/null +++ b/src/components/TimelineLabels.jsx @@ -0,0 +1,21 @@ +import React from 'react'; + +import { formatterWithYear } from '../js/utilities'; + +const TimelineLabels = ({ dims, timelabels }) => { + + return ( + + + + + {formatterWithYear(timelabels[0])} + + + {formatterWithYear(timelabels[1])} + + + ) +} + +export default TimelineLabels; \ No newline at end of file diff --git a/src/js/timeline/timeline.js b/src/js/timeline/timeline.js index 64ed9ba..91c8709 100644 --- a/src/js/timeline/timeline.js +++ b/src/js/timeline/timeline.js @@ -25,7 +25,6 @@ export default function(svg, newApp, ui, methods) { timerange: newApp.timerange, selected: [], language: newApp.language, - zoomLevels: newApp.zoomLevels } // Dimension of the client @@ -60,28 +59,8 @@ export default function(svg, newApp, ui, methods) { * Initilize SVG elements and groups */ const dom = {}; -console.log(svg) + dom.svg = d3.select(svg) - //d3.select(`#${ui.dom.timeline}`) - //.append('svg') - //.attr('width', WIDTH) - //.attr('height', HEIGHT); - -// dom.clip = dom.svg.append("svg:clipPath") -// .attr("id", "clip") -// .append("svg:rect") -// .attr("x", margin.left) -// .attr("y", 0) -// .attr("width", WIDTH - margin.left) -// .attr("height", HEIGHT - 25); - - dom.controls = d3.select(svg) - //d3.select(`#${ui.dom.timeline}`) - //.append('svg') - //.attr('class', 'time-controls') - //.attr('width', WIDTH_CONTROLS) - //.attr('height', HEIGHT); - /* * Axis group elements @@ -100,18 +79,6 @@ console.log(svg) .attr('transform', `translate(${WIDTH}, 0)`) .attr('class', 'yAxis'); - dom.axis.boundaries = dom.svg.selectAll('.axisBoundaries') - .data([0, 1]) - .enter().append('line') - .attr('class', 'axisBoundaries'); - - dom.axis.label0 = dom.svg.append('text') - .attr('class', 'timeLabel0 timeLabel'); - - dom.axis.label1 = dom.svg.append('text') - .attr('class', 'timelabelF timeLabel'); - - /* * Plottable elements */ @@ -121,25 +88,6 @@ console.log(svg) dom.markers = dom.body.append('g'); - /* - * Time Controls - */ -// dom.forward = dom.svg.append('g').attr('class', 'time-controls-inline'); -// dom.forward.append('circle'); -// dom.forward.append('path'); -// -// dom.backwards = dom.svg.append('g').attr('class', 'time-controls-inline'); -// dom.backwards.append('circle'); -// dom.backwards.append('path'); - -// dom.zooms = dom.controls.append('g'); -// -// dom.zooms.selectAll('.zoom-level-button') -// .data(app.zoomLevels) -// .enter().append('text') -// .attr('class', 'zoom-level-button'); - - /* * Initialize axis function and element group */ @@ -248,30 +196,11 @@ console.log(svg) } - /* - * TODO: Highlight zoom level based on time range selected - */ -// function highlightZoomLevel(zoom) { -// app.zoomLevels.forEach((level) => { -// if (level.label === zoom.label) { -// level.active = true; -// } else { -// level.active = false; -// } -// }); -// -// dom.zooms.selectAll('text') -// .classed('active', level => level.active); -// } - - /** * Apply zoom level to timeline * @param {object} zoom: zoom level from zoomLevels */ function applyZoom(zoom) { -// highlightZoomLevel(zoom); - const extent = getTimeScaleExtent(); const newCentralTime = d3.timeMinute.offset(scale.x.domain()[0], extent / 2); @@ -367,24 +296,6 @@ console.log(svg) axis.x1.scale(scale.x); } - - /** - * Display the current time range in the time label above the timeline - */ - function renderTimeLabels() { - dom.axis.label0 - .attr('x', 5) - .attr('y', 15) - .text(formatterWithYear(app.timerange[0])); - - dom.axis.label1 - .attr('x', WIDTH - 5) - .attr('y', 15) - .text(formatterWithYear(app.timerange[1])) - .style('text-anchor', 'end'); - } - - /** * Makes a circular ring mark in all selected events * @param {object} eventPoint: object with eventPoint data (time, loc, tags) @@ -469,55 +380,8 @@ console.log(svg) dom.axis.y .call(axis.y) .call(drag); - - dom.axis.boundaries - .attr('x1', (d, i) => scale.x.range()[i]) - .attr('x2', (d, i) => scale.x.range()[i]) - .attr('y1', 10) - .attr('y2', 20); - - dom.axis.label1 - .attr('x', scale.x.range()[1] - 5); } - - /** - * Render left and right time shifting controls - */ - function renderTimeControls() { - const zoomLabels = copy[app.language].timeline.zooms; - app.zoomLevels.forEach((level, i) => { - level.label = zoomLabels[i]; - }); - - // These controls on timeline svg -// dom.backwards.select('circle') -// .attr('transform', `translate(${scale.x.range()[0] + 20}, 62)`) -// .attr('r', 15); -// -// dom.backwards.select('path') -// .attr('d', d3.symbol().type(d3.symbolTriangle).size(80)) -// .attr('transform', `translate(${scale.x.range()[0] + 20}, 62)rotate(270)`); -// -// dom.forward.select('circle') -// .attr('transform', `translate(${scale.x.range()[1] - 20}, 62)`) -// .attr('r', 15); -// -// dom.forward.select('path') -// .attr('d', d3.symbol().type(d3.symbolTriangle).size(80)) -// .attr('transform', `translate(${scale.x.range()[1] - 20}, 62)rotate(90)`); - -// dom.zooms.selectAll('text') -// .text(d => d.label) -// .attr('x', 60) -// .attr('y', (d, i) => (i * 15) + 20) -// .classed('active', level => level.active); -// -// dom.zooms.selectAll('text') -// .on('click', zoom => applyZoom(zoom)); - } - - /** * Updates data displayed by this timeline, but only render if necessary * @param {Object} domain: Redux state domain subtree @@ -561,27 +425,16 @@ console.log(svg) app.selected = newApp.selected.slice(0); } - if (isNewDomain || isNewAppProps) renderContent(); - if (isNewAppProps) renderContext(); + if (isNewDomain || isNewAppProps) render(); } - function renderContext() { - renderTimeControls(); - renderTimeLabels(); - } - - function renderContent() { + function render() { updateAxis(); renderAxis(); renderEvents(); renderHighlight(); } - function render() { - renderContext(); - renderContent(); - } - return { applyZoom, moveTime,