Skip to content
Snippets Groups Projects
Commit 52893956 authored by esikkala's avatar esikkala
Browse files

Test query for bar chart

parent c3bf6f65
No related branches found
No related tags found
No related merge requests found
......@@ -18,370 +18,370 @@ import Paper from '@material-ui/core/Paper'
*/
// Data
const allData = {
2002: {
Friendster: 0,
Facebook: 0,
Flickr: 0,
'Google Buzz': 0,
'Google+': 0,
Hi5: 0,
Instagram: 0,
MySpace: 0,
Orkut: 0,
Pinterest: 0,
Reddit: 0,
Snapchat: 0,
TikTok: 0,
Tumblr: 0,
Twitter: 0,
WeChat: 0,
Weibo: 0,
Whatsapp: 0,
YouTube: 0
},
2003: {
Friendster: 4470000,
Facebook: 0,
Flickr: 0,
'Google Buzz': 0,
'Google+': 0,
Hi5: 0,
Instagram: 0,
MySpace: 0,
Orkut: 0,
Pinterest: 0,
Reddit: 0,
Snapchat: 0,
TikTok: 0,
Tumblr: 0,
Twitter: 0,
WeChat: 0,
Weibo: 0,
Whatsapp: 0,
YouTube: 0
},
2004: {
Friendster: 5970054,
Facebook: 0,
Flickr: 3675135,
'Google Buzz': 0,
'Google+': 0,
Hi5: 0,
Instagram: 0,
MySpace: 980036,
Orkut: 4900180,
Pinterest: 0,
Reddit: 0,
Snapchat: 0,
TikTok: 0,
Tumblr: 0,
Twitter: 0,
WeChat: 0,
Weibo: 0,
Whatsapp: 0,
YouTube: 0
},
2005: {
Friendster: 7459742,
Facebook: 0,
Flickr: 7399354,
'Google Buzz': 0,
'Google+': 0,
Hi5: 9731610,
Instagram: 0,
MySpace: 19490059,
Orkut: 9865805,
Pinterest: 0,
Reddit: 0,
Snapchat: 0,
TikTok: 0,
Tumblr: 0,
Twitter: 0,
WeChat: 0,
Weibo: 0,
Whatsapp: 0,
YouTube: 1946322
},
2006: {
Friendster: 8989854,
Facebook: 0,
Flickr: 14949270,
'Google Buzz': 0,
'Google+': 0,
Hi5: 19932360,
Instagram: 0,
MySpace: 54763260,
Orkut: 14966180,
Pinterest: 0,
Reddit: 248309,
Snapchat: 0,
TikTok: 0,
Tumblr: 0,
Twitter: 0,
WeChat: 0,
Weibo: 0,
Whatsapp: 0,
YouTube: 19878248
},
2007: {
Friendster: 24253200,
Facebook: 0,
Flickr: 29299875,
'Google Buzz': 0,
'Google+': 0,
Hi5: 29533250,
Instagram: 0,
MySpace: 69299875,
Orkut: 26916562,
Pinterest: 0,
Reddit: 488331,
Snapchat: 0,
TikTok: 0,
Tumblr: 0,
Twitter: 0,
WeChat: 0,
Weibo: 0,
Whatsapp: 0,
YouTube: 143932250
},
2008: {
Friendster: 51008911,
Facebook: 100000000,
Flickr: 30000000,
'Google Buzz': 0,
'Google+': 0,
Hi5: 55045618,
Instagram: 0,
MySpace: 72408233,
Orkut: 44357628,
Pinterest: 0,
Reddit: 1944940,
Snapchat: 0,
TikTok: 0,
Tumblr: 0,
Twitter: 0,
WeChat: 0,
Weibo: 0,
Whatsapp: 0,
YouTube: 294493950
},
2009: {
Friendster: 28804331,
Facebook: 276000000,
Flickr: 41834525,
'Google Buzz': 0,
'Google+': 0,
Hi5: 57893524,
Instagram: 0,
MySpace: 70133095,
Orkut: 47366905,
Pinterest: 0,
Reddit: 3893524,
Snapchat: 0,
TikTok: 0,
Tumblr: 0,
Twitter: 0,
WeChat: 0,
Weibo: 0,
Whatsapp: 0,
YouTube: 413611440
},
2010: {
Friendster: 0,
Facebook: 517750000,
Flickr: 54708063,
'Google Buzz': 166029650,
'Google+': 0,
Hi5: 59953290,
Instagram: 0,
MySpace: 68046710,
Orkut: 49941613,
Pinterest: 0,
Reddit: 0,
Snapchat: 0,
TikTok: 0,
Tumblr: 0,
Twitter: 43250000,
WeChat: 0,
Weibo: 19532900,
Whatsapp: 0,
YouTube: 480551990
},
2011: {
Friendster: 0,
Facebook: 766000000,
Flickr: 66954600,
'Google Buzz': 170000000,
'Google+': 0,
Hi5: 46610848,
Instagram: 0,
MySpace: 46003536,
Orkut: 47609080,
Pinterest: 0,
Reddit: 0,
Snapchat: 0,
TikTok: 0,
Tumblr: 0,
Twitter: 92750000,
WeChat: 47818400,
Weibo: 48691040,
Whatsapp: 0,
YouTube: 642669824
},
2012: {
Friendster: 0,
Facebook: 979750000,
Flickr: 79664888,
'Google Buzz': 170000000,
'Google+': 107319100,
Hi5: 0,
Instagram: 0,
MySpace: 0,
Orkut: 45067022,
Pinterest: 0,
Reddit: 0,
Snapchat: 0,
TikTok: 0,
Tumblr: 146890156,
Twitter: 160250000,
WeChat: 118123370,
Weibo: 79195730,
Whatsapp: 0,
YouTube: 844638200
},
2013: {
Friendster: 0,
Facebook: 1170500000,
Flickr: 80000000,
'Google Buzz': 170000000,
'Google+': 205654700,
Hi5: 0,
Instagram: 117500000,
MySpace: 0,
Orkut: 0,
Pinterest: 0,
Reddit: 0,
Snapchat: 0,
TikTok: 0,
Tumblr: 293482050,
Twitter: 223675000,
WeChat: 196523760,
Weibo: 118261880,
Whatsapp: 300000000,
YouTube: 1065223075
},
2014: {
Friendster: 0,
Facebook: 1334000000,
Flickr: 0,
'Google Buzz': 170000000,
'Google+': 254859015,
Hi5: 0,
Instagram: 250000000,
MySpace: 0,
Orkut: 0,
Pinterest: 0,
Reddit: 135786956,
Snapchat: 0,
TikTok: 0,
Tumblr: 388721163,
Twitter: 223675000,
WeChat: 444232415,
Weibo: 154890345,
Whatsapp: 498750000,
YouTube: 1249451725
},
2015: {
Friendster: 0,
Facebook: 1516750000,
Flickr: 0,
'Google Buzz': 170000000,
'Google+': 298950015,
Hi5: 0,
Instagram: 400000000,
MySpace: 0,
Orkut: 0,
Pinterest: 0,
Reddit: 163346676,
Snapchat: 0,
TikTok: 0,
Tumblr: 475923363,
Twitter: 304500000,
WeChat: 660843407,
Weibo: 208716685,
Whatsapp: 800000000,
YouTube: 1328133360
},
2016: {
Friendster: 0,
Facebook: 1753500000,
Flickr: 0,
'Google Buzz': 0,
'Google+': 398648000,
Hi5: 0,
Instagram: 550000000,
MySpace: 0,
Orkut: 0,
Pinterest: 143250000,
Reddit: 238972480,
Snapchat: 238648000,
TikTok: 0,
Tumblr: 565796720,
Twitter: 314500000,
WeChat: 847512320,
Weibo: 281026560,
Whatsapp: 1000000000,
YouTube: 1399053600
},
2017: {
Friendster: 0,
Facebook: 2035750000,
Flickr: 0,
'Google Buzz': 0,
'Google+': 495657000,
Hi5: 0,
Instagram: 750000000,
MySpace: 0,
Orkut: 0,
Pinterest: 195000000,
Reddit: 297394200,
Snapchat: 0,
TikTok: 239142500,
Tumblr: 593783960,
Twitter: 328250000,
WeChat: 921742750,
Weibo: 357569030,
Whatsapp: 1333333333,
YouTube: 1495657000
},
2018: {
Friendster: 0,
Facebook: 2255250000,
Flickr: 0,
'Google Buzz': 0,
'Google+': 430000000,
Hi5: 0,
Instagram: 1000000000,
MySpace: 0,
Orkut: 0,
Pinterest: 246500000,
Reddit: 355000000,
Snapchat: 0,
TikTok: 500000000,
Tumblr: 624000000,
Twitter: 329500000,
WeChat: 1000000000,
Weibo: 431000000,
Whatsapp: 1433333333,
YouTube: 1900000000
}
}
// const allData = {
// 2002: {
// Friendster: 0,
// Facebook: 0,
// Flickr: 0,
// 'Google Buzz': 0,
// 'Google+': 0,
// Hi5: 0,
// Instagram: 0,
// MySpace: 0,
// Orkut: 0,
// Pinterest: 0,
// Reddit: 0,
// Snapchat: 0,
// TikTok: 0,
// Tumblr: 0,
// Twitter: 0,
// WeChat: 0,
// Weibo: 0,
// Whatsapp: 0,
// YouTube: 0
// },
// 2003: {
// Friendster: 4470000,
// Facebook: 0,
// Flickr: 0,
// 'Google Buzz': 0,
// 'Google+': 0,
// Hi5: 0,
// Instagram: 0,
// MySpace: 0,
// Orkut: 0,
// Pinterest: 0,
// Reddit: 0,
// Snapchat: 0,
// TikTok: 0,
// Tumblr: 0,
// Twitter: 0,
// WeChat: 0,
// Weibo: 0,
// Whatsapp: 0,
// YouTube: 0
// },
// 2004: {
// Friendster: 5970054,
// Facebook: 0,
// Flickr: 3675135,
// 'Google Buzz': 0,
// 'Google+': 0,
// Hi5: 0,
// Instagram: 0,
// MySpace: 980036,
// Orkut: 4900180,
// Pinterest: 0,
// Reddit: 0,
// Snapchat: 0,
// TikTok: 0,
// Tumblr: 0,
// Twitter: 0,
// WeChat: 0,
// Weibo: 0,
// Whatsapp: 0,
// YouTube: 0
// },
// 2005: {
// Friendster: 7459742,
// Facebook: 0,
// Flickr: 7399354,
// 'Google Buzz': 0,
// 'Google+': 0,
// Hi5: 9731610,
// Instagram: 0,
// MySpace: 19490059,
// Orkut: 9865805,
// Pinterest: 0,
// Reddit: 0,
// Snapchat: 0,
// TikTok: 0,
// Tumblr: 0,
// Twitter: 0,
// WeChat: 0,
// Weibo: 0,
// Whatsapp: 0,
// YouTube: 1946322
// },
// 2006: {
// Friendster: 8989854,
// Facebook: 0,
// Flickr: 14949270,
// 'Google Buzz': 0,
// 'Google+': 0,
// Hi5: 19932360,
// Instagram: 0,
// MySpace: 54763260,
// Orkut: 14966180,
// Pinterest: 0,
// Reddit: 248309,
// Snapchat: 0,
// TikTok: 0,
// Tumblr: 0,
// Twitter: 0,
// WeChat: 0,
// Weibo: 0,
// Whatsapp: 0,
// YouTube: 19878248
// },
// 2007: {
// Friendster: 24253200,
// Facebook: 0,
// Flickr: 29299875,
// 'Google Buzz': 0,
// 'Google+': 0,
// Hi5: 29533250,
// Instagram: 0,
// MySpace: 69299875,
// Orkut: 26916562,
// Pinterest: 0,
// Reddit: 488331,
// Snapchat: 0,
// TikTok: 0,
// Tumblr: 0,
// Twitter: 0,
// WeChat: 0,
// Weibo: 0,
// Whatsapp: 0,
// YouTube: 143932250
// },
// 2008: {
// Friendster: 51008911,
// Facebook: 100000000,
// Flickr: 30000000,
// 'Google Buzz': 0,
// 'Google+': 0,
// Hi5: 55045618,
// Instagram: 0,
// MySpace: 72408233,
// Orkut: 44357628,
// Pinterest: 0,
// Reddit: 1944940,
// Snapchat: 0,
// TikTok: 0,
// Tumblr: 0,
// Twitter: 0,
// WeChat: 0,
// Weibo: 0,
// Whatsapp: 0,
// YouTube: 294493950
// },
// 2009: {
// Friendster: 28804331,
// Facebook: 276000000,
// Flickr: 41834525,
// 'Google Buzz': 0,
// 'Google+': 0,
// Hi5: 57893524,
// Instagram: 0,
// MySpace: 70133095,
// Orkut: 47366905,
// Pinterest: 0,
// Reddit: 3893524,
// Snapchat: 0,
// TikTok: 0,
// Tumblr: 0,
// Twitter: 0,
// WeChat: 0,
// Weibo: 0,
// Whatsapp: 0,
// YouTube: 413611440
// },
// 2010: {
// Friendster: 0,
// Facebook: 517750000,
// Flickr: 54708063,
// 'Google Buzz': 166029650,
// 'Google+': 0,
// Hi5: 59953290,
// Instagram: 0,
// MySpace: 68046710,
// Orkut: 49941613,
// Pinterest: 0,
// Reddit: 0,
// Snapchat: 0,
// TikTok: 0,
// Tumblr: 0,
// Twitter: 43250000,
// WeChat: 0,
// Weibo: 19532900,
// Whatsapp: 0,
// YouTube: 480551990
// },
// 2011: {
// Friendster: 0,
// Facebook: 766000000,
// Flickr: 66954600,
// 'Google Buzz': 170000000,
// 'Google+': 0,
// Hi5: 46610848,
// Instagram: 0,
// MySpace: 46003536,
// Orkut: 47609080,
// Pinterest: 0,
// Reddit: 0,
// Snapchat: 0,
// TikTok: 0,
// Tumblr: 0,
// Twitter: 92750000,
// WeChat: 47818400,
// Weibo: 48691040,
// Whatsapp: 0,
// YouTube: 642669824
// },
// 2012: {
// Friendster: 0,
// Facebook: 979750000,
// Flickr: 79664888,
// 'Google Buzz': 170000000,
// 'Google+': 107319100,
// Hi5: 0,
// Instagram: 0,
// MySpace: 0,
// Orkut: 45067022,
// Pinterest: 0,
// Reddit: 0,
// Snapchat: 0,
// TikTok: 0,
// Tumblr: 146890156,
// Twitter: 160250000,
// WeChat: 118123370,
// Weibo: 79195730,
// Whatsapp: 0,
// YouTube: 844638200
// },
// 2013: {
// Friendster: 0,
// Facebook: 1170500000,
// Flickr: 80000000,
// 'Google Buzz': 170000000,
// 'Google+': 205654700,
// Hi5: 0,
// Instagram: 117500000,
// MySpace: 0,
// Orkut: 0,
// Pinterest: 0,
// Reddit: 0,
// Snapchat: 0,
// TikTok: 0,
// Tumblr: 293482050,
// Twitter: 223675000,
// WeChat: 196523760,
// Weibo: 118261880,
// Whatsapp: 300000000,
// YouTube: 1065223075
// },
// 2014: {
// Friendster: 0,
// Facebook: 1334000000,
// Flickr: 0,
// 'Google Buzz': 170000000,
// 'Google+': 254859015,
// Hi5: 0,
// Instagram: 250000000,
// MySpace: 0,
// Orkut: 0,
// Pinterest: 0,
// Reddit: 135786956,
// Snapchat: 0,
// TikTok: 0,
// Tumblr: 388721163,
// Twitter: 223675000,
// WeChat: 444232415,
// Weibo: 154890345,
// Whatsapp: 498750000,
// YouTube: 1249451725
// },
// 2015: {
// Friendster: 0,
// Facebook: 1516750000,
// Flickr: 0,
// 'Google Buzz': 170000000,
// 'Google+': 298950015,
// Hi5: 0,
// Instagram: 400000000,
// MySpace: 0,
// Orkut: 0,
// Pinterest: 0,
// Reddit: 163346676,
// Snapchat: 0,
// TikTok: 0,
// Tumblr: 475923363,
// Twitter: 304500000,
// WeChat: 660843407,
// Weibo: 208716685,
// Whatsapp: 800000000,
// YouTube: 1328133360
// },
// 2016: {
// Friendster: 0,
// Facebook: 1753500000,
// Flickr: 0,
// 'Google Buzz': 0,
// 'Google+': 398648000,
// Hi5: 0,
// Instagram: 550000000,
// MySpace: 0,
// Orkut: 0,
// Pinterest: 143250000,
// Reddit: 238972480,
// Snapchat: 238648000,
// TikTok: 0,
// Tumblr: 565796720,
// Twitter: 314500000,
// WeChat: 847512320,
// Weibo: 281026560,
// Whatsapp: 1000000000,
// YouTube: 1399053600
// },
// 2017: {
// Friendster: 0,
// Facebook: 2035750000,
// Flickr: 0,
// 'Google Buzz': 0,
// 'Google+': 495657000,
// Hi5: 0,
// Instagram: 750000000,
// MySpace: 0,
// Orkut: 0,
// Pinterest: 195000000,
// Reddit: 297394200,
// Snapchat: 0,
// TikTok: 239142500,
// Tumblr: 593783960,
// Twitter: 328250000,
// WeChat: 921742750,
// Weibo: 357569030,
// Whatsapp: 1333333333,
// YouTube: 1495657000
// },
// 2018: {
// Friendster: 0,
// Facebook: 2255250000,
// Flickr: 0,
// 'Google Buzz': 0,
// 'Google+': 430000000,
// Hi5: 0,
// Instagram: 1000000000,
// MySpace: 0,
// Orkut: 0,
// Pinterest: 246500000,
// Reddit: 355000000,
// Snapchat: 0,
// TikTok: 500000000,
// Tumblr: 624000000,
// Twitter: 329500000,
// WeChat: 1000000000,
// Weibo: 431000000,
// Whatsapp: 1433333333,
// YouTube: 1900000000
// }
// }
const stepDuration = 2000
// let year = 1100
let year = 2002
// let year = 2002
let year = 1410
class BarChartRace extends React.Component {
componentDidMount = () => {
......@@ -394,7 +394,11 @@ class BarChartRace extends React.Component {
componentDidUpdate = prevProps => {
if (prevProps.resultUpdateID !== this.props.resultUpdateID) {
this.playAnimation()
// console.log(this.props.results)
this.setInitialData()
this.sortCategoryAxis()
this.updateData()
// this.playAnimation()
}
}
......@@ -409,18 +413,18 @@ class BarChartRace extends React.Component {
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
const root = am5.Root.new('chartdiv')
root.numberFormatter.setAll({
numberFormat: '#a',
// root.numberFormatter.setAll({
// numberFormat: '#a',
// Group only into M (millions), and B (billions)
bigNumberPrefixes: [
{ number: 1e6, suffix: 'M' },
{ number: 1e9, suffix: 'B' }
],
// // Group only into M (millions), and B (billions)
// bigNumberPrefixes: [
// { number: 1e6, suffix: 'M' },
// { number: 1e9, suffix: 'B' }
// ],
// Do not use small number prefixes at all
smallNumberPrefixes: []
})
// // Do not use small number prefixes at all
// smallNumberPrefixes: []
// })
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
......@@ -444,20 +448,23 @@ class BarChartRace extends React.Component {
minGridDistance: 20,
inversed: true
})
// hide grid
yRenderer.grid.template.set('visible', false)
// yRenderer.labels.template.setAll({
// fontSize: '0.3rem'
// })
this.yAxis = chart.yAxes.push(am5xy.CategoryAxis.new(root, {
maxDeviation: 0,
categoryField: 'network',
categoryField: 'category',
renderer: yRenderer
}))
const xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
maxDeviation: 0,
min: 0,
strictMinMax: true,
extraMax: 0.1,
// strictMinMax: true,
renderer: am5xy.AxisRendererX.new(root, {})
}))
......@@ -470,7 +477,7 @@ class BarChartRace extends React.Component {
xAxis: xAxis,
yAxis: this.yAxis,
valueXField: 'value',
categoryYField: 'network'
categoryYField: 'category'
}))
// Rounded corners for columns
......@@ -500,7 +507,7 @@ class BarChartRace extends React.Component {
})
this.label = chart.plotContainer.children.push(am5.Label.new(root, {
text: '2002',
text: '1410',
fontSize: '8em',
opacity: 0.2,
x: am5.p100,
......@@ -513,24 +520,32 @@ class BarChartRace extends React.Component {
}
setInitialData = () => {
const d = allData[year]
// const d = this.props.results[year]
// const d = allData[year]
const d = this.props.results[year]
// console.log(d)
for (const n in d) {
this.series.data.push({ network: n, value: d[n] })
this.yAxis.data.push({ network: n })
this.series.data.push({ category: n, value: d[n] })
this.yAxis.data.push({ category: n })
}
// this.series.appear(1000)
// this.chart.appear(1000, 100)
}
updateData = () => {
let itemsWithNonZero = 0
if (allData[year]) {
// if (this.props.results[year]) {
// if (allData[year]) {
if (this.props.results[year]) {
this.label.set('text', year.toString())
am5.array.each(this.series.dataItems, dataItem => {
const category = dataItem.get('categoryY')
const value = allData[year][category]
// const value = allData[year][category]
const value = this.props.results[year][category]
// console.log(this.props.results[year].France)
// console.log(value)
if (value > 0) {
itemsWithNonZero++
......@@ -557,8 +572,8 @@ class BarChartRace extends React.Component {
playAnimation = () => {
// update data with values each 1.5 sec
const interval = setInterval(() => {
year++
// year += 10
// year++
year += 10
if (year > 2018) {
clearInterval(interval)
......@@ -570,8 +585,8 @@ class BarChartRace extends React.Component {
this.setInitialData()
setTimeout(() => {
year++
// year += 10
// year++
year += 10
this.updateData()
}, 50)
......@@ -638,7 +653,9 @@ class BarChartRace extends React.Component {
render () {
return (
<Paper square id='chartdiv' style={{ width: '100%', height: 'calc(100% - 72px)' }} />
<Paper square style={{ width: 'calc(100% - 64px)', height: 'calc(100% - 72px)', paddingLeft: 32, paddingRight: 32 }}>
<div style={{ width: '100%', height: '100%' }} id='chartdiv' />
</Paper>
)
}
......
......@@ -250,7 +250,7 @@ export const toBarChartRaceFormat = ({ data }) => {
const countries = item.productionPlaceCountry.reduce((obj, item) => {
return {
...obj,
[item.id]: parseInt(item.manuscriptCount)
[item.prefLabel]: parseInt(item.manuscriptCount)
}
}, {})
return {
......@@ -261,7 +261,7 @@ export const toBarChartRaceFormat = ({ data }) => {
return {
...obj,
[item.id]: {
[item.productionPlaceCountry.id]: parseInt(item.productionPlaceCountry.manuscriptCount)
[item.productionPlaceCountry.prefLabel]: parseInt(item.productionPlaceCountry.manuscriptCount)
}
}
}
......
......@@ -538,11 +538,15 @@ export const productionsByDecadeQuery = `
export const productionsByDecadeAndCountryQuery = `
SELECT ?id ?productionPlaceCountry__id ?productionPlaceCountry__prefLabel (count(?manuscript) as ?productionPlaceCountry__manuscriptCount) WHERE {
<FILTER>
[] crm:P108_has_produced ?manuscript ;
crm:P7_took_place_at/gvp:broaderPreferred* ?productionPlaceCountry__id ;
crm:P4_has_time-span/mmm-schema:decade ?id .
?productionPlaceCountry__id gvp:placeTypePreferred "nations" ;
skos:prefLabel ?productionPlaceCountry__prefLabel .
{
[] crm:P108_has_produced ?manuscript ;
crm:P7_took_place_at/gvp:broaderPreferred* ?productionPlaceCountry__id ;
crm:P4_has_time-span/mmm-schema:decade ?id .
?productionPlaceCountry__id gvp:placeTypePreferred "nations" ;
skos:prefLabel ?productionPlaceCountry__prefLabel .
FILTER(?id > 1400 && ?id < 1440)
}
}
GROUP BY ?id ?productionPlaceCountry__id ?productionPlaceCountry__prefLabel
# ORDER BY ?id
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment