Commit 1f2a9cc5 authored by amarcic's avatar amarcic
Browse files

added comments; reincluded on click event for detailed view items in period

parent 7f3341bb
......@@ -39,11 +39,9 @@ export const Timeline = (props) => {
svg.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
//remove previously rendered histogram bars in the case there is no current data from the current search
//remove previously rendered timeline bars in the case there is no current data from the current search
if (!timelineObjectsData||!byPeriodData||byPeriodData.size===0) {
svg.select(".bars")
//.append("text")
//.text("hier gibt es nichts zu sehen")
.selectAll(".bar").remove()
svg.select(".bars")
.selectAll(".label").remove()
......@@ -60,7 +58,6 @@ export const Timeline = (props) => {
.range([height,0])
.padding(0.2)
//console.log(yScale("nKJfE4h8ViFn"));
//todo: replace this temporary cleanup of the background svg group
svg.select(".background").selectAll("rect").remove();
......@@ -69,20 +66,18 @@ export const Timeline = (props) => {
.attr("transform", `translate(0,${height})`)
.call(axisBottom(xScale))
//add y axis to svg
/*svg.select(".yAxis")
.call(axisLeft(yScale))
.selectAll("text")
.text( value => value&&byPeriodData.get(value).periodName )*/
//select and position svg element for the timeline
const timelineCanvas = svg.select(".bars")
.attr("transform",`translate(${margin.left}, ${margin.top})`)
//sync svg groups for bars and labels to the values of the data (map grouped by periods)
const barGroups = timelineCanvas
.selectAll(".barGroup")
.data([...byPeriodData.values()], (data,index) => console.log(periodIds[index])&&periodIds[index]);
.data([...byPeriodData.values()], (data,index) => periodIds[index]);
console.log(barGroups);
//instructions for joining the synced data and group elements: add svg g, rect and text elements on enter
//returns a selection of new and updating groups
const newAndUpdatedGroups = barGroups
.join(
enter => {
......@@ -98,16 +93,21 @@ export const Timeline = (props) => {
return group;
}
)
//position all new and updating groups
newAndUpdatedGroups
.attr("transform", (value, index) => `translate(${xScale(value.periodSpan?.[0])},${yScale(periodIds[index])})`)
const bar = newAndUpdatedGroups.selectAll(".bar")
.attr("height", yScale.bandwidth())
.attr("fill", "#69b3a2")
.transition()
.attr("width", value => Math.abs(xScale(value.periodSpan?.[0])-xScale(value.periodSpan?.[1]))||0);
console.log(newAndUpdatedGroups)
const labels = newAndUpdatedGroups.selectAll(".label")
.text(value => value.periodName);
//extend the svg rect elements as chart bars according to the data
const bar = newAndUpdatedGroups.selectAll(".bar")
.attr("height", yScale.bandwidth())
.attr("fill", "#69b3a2")
.transition()
.attr("width", value => Math.abs(xScale(value.periodSpan?.[0])-xScale(value.periodSpan?.[1]))||0);
//add period names as text labels to the groups
const labels = newAndUpdatedGroups.selectAll(".label")
.text(value => value.periodName);
console.log(newAndUpdatedGroups)
......@@ -166,7 +166,8 @@ export const Timeline = (props) => {
//const barGroups = bars.select( function() {return this.parentNode} );
/*bars.on("click", (event, value) => {
//on click show detailed view of items for a period
newAndUpdatedGroups.on("click", (event, value) => {
//console.log(value)
const element = svg.selectAll(".bar").nodes(),
......@@ -184,11 +185,9 @@ export const Timeline = (props) => {
.range([height,0]);
//remove bars and labels
svg.select(".bars").selectAll("*").remove();
//remove axis
//svg.select(".xAxis").selectAll("*").remove();
//svg.select(".yAxis").selectAll("*").remove();
//remove background
svg.selectAll(".bar").remove();
svg.selectAll(".label").remove();
svg.select(".background").selectAll("rect").remove();
svg.select(".xAxis")
......@@ -212,7 +211,7 @@ export const Timeline = (props) => {
.attr("x", xScaleDetail(value.periodSpan[0]))
.transition()
.attr("opacity", 0.3)
})*/
})
/*bars.transition()
.attr("width", value => Math.abs(xScale(value.periodSpan?.[0])-xScale(value.periodSpan?.[1]))||0)
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment