From 12b9455411c9c6a8692a9bf479c47341fd3317a4 Mon Sep 17 00:00:00 2001
From: esikkala <esko.ikkala@aalto.fi>
Date: Wed, 13 Oct 2021 17:18:04 +0300
Subject: [PATCH] Bar chart race: use id and prefLabel
---
.../components/facet_results/BarChartRace.js | 41 +++++++++++--------
src/server/sparql/Mappers.js | 1 -
2 files changed, 23 insertions(+), 19 deletions(-)
diff --git a/src/client/components/facet_results/BarChartRace.js b/src/client/components/facet_results/BarChartRace.js
index 1938dad9..6c60cd12 100644
--- a/src/client/components/facet_results/BarChartRace.js
+++ b/src/client/components/facet_results/BarChartRace.js
@@ -8,8 +8,7 @@ import Paper from '@material-ui/core/Paper'
// https://www.amcharts.com/docs/v5/
const stepDuration = 2000
-// const startYear = 1400
-const startYear = 1000
+const startYear = 500
let year = startYear
const yearIncrement = 10
class BarChartRace extends React.Component {
@@ -80,6 +79,8 @@ class BarChartRace extends React.Component {
// hide grid
yRenderer.grid.template.set('visible', false)
+ // console.log(yRenderer.labels.template)
+
this.yAxis = chart.yAxes.push(am5xy.CategoryAxis.new(root, {
maxDeviation: 0,
extraMax: 0.1,
@@ -87,6 +88,10 @@ class BarChartRace extends React.Component {
renderer: yRenderer
}))
+ this.yAxis.get('renderer').labels.template.adapters.add('text', (label, target, key) => {
+ return target.dataItem.dataContext.prefLabel
+ })
+
const xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
maxDeviation: 0,
min: 0,
@@ -149,30 +154,30 @@ class BarChartRace extends React.Component {
setInitialData = () => {
const step = this.props.results[year]
for (const id in step) {
- const { prefLabel } = step[id]
- this.series.data.push({ category: prefLabel, value: 0, id })
- this.yAxis.data.push({ category: prefLabel })
+ const { prefLabel, value } = step[id]
+ this.series.data.push({ category: id, value, prefLabel })
+ this.yAxis.data.push({ category: id, prefLabel })
}
+ this.yAxis.zoomToIndexes(0, 1) // hack to fix initial pan / zoom
}
updateData = () => {
- let itemsWithNonZero = 0
+ // let itemsWithNonZero = 0
if (this.props.results[year]) {
for (const [key, value] of Object.entries(this.props.results[year])) {
- const { prefLabel } = value
- const dataItem = this.getSeriesItem(prefLabel)
+ const dataItem = this.getSeriesItem(key)
if (dataItem == null) {
- this.series.data.push({ category: prefLabel, value: value.value, id: key })
- this.yAxis.data.push({ category: prefLabel })
+ this.series.data.push({ category: key, value: value.value, prefLabel: value.prefLabel })
+ this.yAxis.data.push({ category: key, prefLabel: value.prefLabel })
}
}
this.label.set('text', year.toString())
am5.array.each(this.series.dataItems, dataItem => {
- const { id } = dataItem.dataContext
- const value = this.props.results[year][id].value
- if (value > 0) {
- itemsWithNonZero++
- }
+ const category = dataItem.get('categoryY')
+ const value = this.props.results[year][category].value
+ // if (value > 0) {
+ // itemsWithNonZero++
+ // }
dataItem.animate({
key: 'valueX',
to: value,
@@ -186,7 +191,8 @@ class BarChartRace extends React.Component {
easing: am5.ease.linear
})
})
- this.yAxis.zoom(0, itemsWithNonZero / this.yAxis.dataItems.length)
+ this.yAxis.zoomToIndexes(0, 15)
+ // this.yAxis.zoom(0, itemsWithNonZero / this.yAxis.dataItems.length)
}
}
@@ -196,8 +202,7 @@ class BarChartRace extends React.Component {
// year++
year += yearIncrement
- if (year > 1200) {
- console.log(year)
+ if (year > 1900) {
clearInterval(interval)
clearInterval(this.sortInterval)
// sort category axis one more time
diff --git a/src/server/sparql/Mappers.js b/src/server/sparql/Mappers.js
index 2d8990cf..5b1405e3 100644
--- a/src/server/sparql/Mappers.js
+++ b/src/server/sparql/Mappers.js
@@ -306,6 +306,5 @@ const mergeDataItems = (itemA, itemB) => {
merged[itemBkey] = itemB[itemBkey]
}
}
- merged['http://ldf.fi/mmm/place/'] = { prefLabel: '0', value: 0 }
return merged
}
--
GitLab