Skip to content
Snippets Groups Projects
Commit 98549859 authored by danielmyren's avatar danielmyren
Browse files

Removed hardcoded statistics and implemented requests to the backend instead.... 

Removed hardcoded statistics and implemented requests to the backend instead. Also implemented functionallity to draw different graphs based on selected options set in MultiLevelOptions.jsx
parent acee66c1
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
frontend/src/Pages/Dashboard/Barchart.jsx
+ 206
− 662
View file @ 98549859
import React, { useEffect, useRef, useMemo } from 'react';
import React, { useEffect, useRef, useContext } from 'react';
import * as d3 from 'd3';
import axios from 'axios';
import { GlobalContext } from '../../Context/GlobalContext';
const BarChart = ({ selectedKey }) => {
const {serverAddress, serverPort, selectedOptions} = useContext(GlobalContext);
let svgRef = useRef();
let svgRef = useRef();
useEffect( () => {
useEffect(() => {
let chartData = [
{'key': ['01', '1991'], 'values': ['254.9']},
{'key': ['01', '1992'], 'values': ['257.3']},
{'key': ['01', '1993'], 'values': ['259.8']},
{'key': ['01', '1994'], 'values': ['263.2']},
{'key': ['01', '1995'], 'values': ['265.9']},
{'key': ['01', '1996'], 'values': ['268.8']},
{'key': ['01', '1997'], 'values': ['271.6']},
{'key': ['01', '1998'], 'values': ['274.8']},
{'key': ['01', '1999'], 'values': ['276.6']},
{'key': ['01', '2000'], 'values': ['279.7']},
{'key': ['01', '2001'], 'values': ['282.1']},
{'key': ['01', '2002'], 'values': ['283.8']},
{'key': ['01', '2003'], 'values': ['285.4']},
{'key': ['01', '2004'], 'values': ['287.3']},
{'key': ['01', '2005'], 'values': ['289.9']},
{'key': ['01', '2006'], 'values': ['294.2']},
{'key': ['01', '2007'], 'values': ['299.0']},
{'key': ['01', '2008'], 'values': ['303.9']},
{'key': ['01', '2009'], 'values': ['309.7']},
{'key': ['01', '2010'], 'values': ['315.1']},
{'key': ['01', '2011'], 'values': ['320.5']},
{'key': ['01', '2012'], 'values': ['325.9']},
{'key': ['01', '2013'], 'values': ['331.4']},
{'key': ['01', '2014'], 'values': ['336.9']},
{'key': ['01', '2015'], 'values': ['342.0']},
{'key': ['01', '2016'], 'values': ['347.8']},
{'key': ['01', '2017'], 'values': ['353.8']},
{'key': ['01', '2018'], 'values': ['359.9']},
{'key': ['03', '1991'], 'values': ['39.2']},
{'key': ['03', '1992'], 'values': ['39.9']},
{'key': ['03', '1993'], 'values': ['40.5']},
{'key': ['03', '1994'], 'values': ['41.0']},
{'key': ['03', '1995'], 'values': ['41.3']},
{'key': ['03', '1996'], 'values': ['41.4']},
{'key': ['03', '1997'], 'values': ['41.6']},
{'key': ['03', '1998'], 'values': ['41.7']},
{'key': ['03', '1999'], 'values': ['41.6']},
{'key': ['03', '2000'], 'values': ['41.8']},
{'key': ['03', '2001'], 'values': ['42.2']},
{'key': ['03', '2002'], 'values': ['42.4']},
{'key': ['03', '2003'], 'values': ['42.7']},
{'key': ['03', '2004'], 'values': ['43.0']},
{'key': ['03', '2005'], 'values': ['43.3']},
{'key': ['03', '2006'], 'values': ['39.0']},
{'key': ['03', '2007'], 'values': ['39.4']},
{'key': ['03', '2008'], 'values': ['39.9']},
{'key': ['03', '2009'], 'values': ['40.4']},
{'key': ['03', '2010'], 'values': ['40.9']},
{'key': ['03', '2011'], 'values': ['41.3']},
{'key': ['03', '2012'], 'values': ['41.7']},
{'key': ['03', '2013'], 'values': ['42.2']},
{'key': ['03', '2014'], 'values': ['42.6']},
{'key': ['03', '2015'], 'values': ['43.2']},
{'key': ['03', '2016'], 'values': ['44.1']},
{'key': ['03', '2017'], 'values': ['45.1']},
{'key': ['03', '2018'], 'values': ['46.0']},
{'key': ['04', '1991'], 'values': ['42.4']},
{'key': ['04', '1992'], 'values': ['42.5']},
{'key': ['04', '1993'], 'values': ['42.8']},
{'key': ['04', '1994'], 'values': ['42.9']},
{'key': ['04', '1995'], 'values': ['42.7']},
{'key': ['04', '1996'], 'values': ['42.5']},
{'key': ['04', '1997'], 'values': ['42.4']},
{'key': ['04', '1998'], 'values': ['42.3']},
{'key': ['04', '1999'], 'values': ['41.9']},
{'key': ['04', '2000'], 'values': ['42.0']},
{'key': ['04', '2001'], 'values': ['42.1']},
{'key': ['04', '2002'], 'values': ['42.4']},
{'key': ['04', '2003'], 'values': ['42.7']},
{'key': ['04', '2004'], 'values': ['42.8']},
{'key': ['04', '2005'], 'values': ['42.9']},
{'key': ['04', '2006'], 'values': ['43.1']},
{'key': ['04', '2007'], 'values': ['43.5']},
{'key': ['04', '2008'], 'values': ['43.8']},
{'key': ['04', '2009'], 'values': ['44.1']},
{'key': ['04', '2010'], 'values': ['44.4']},
{'key': ['04', '2011'], 'values': ['44.9']},
{'key': ['04', '2012'], 'values': ['45.2']},
{'key': ['04', '2013'], 'values': ['45.7']},
{'key': ['04', '2014'], 'values': ['46.2']},
{'key': ['04', '2015'], 'values': ['46.7']},
{'key': ['04', '2016'], 'values': ['47.4']},
{'key': ['04', '2017'], 'values': ['48.0']},
{'key': ['04', '2018'], 'values': ['48.5']},
{'key': ['05', '1991'], 'values': ['38.4']},
{'key': ['05', '1992'], 'values': ['38.7']},
{'key': ['05', '1993'], 'values': ['38.9']},
{'key': ['05', '1994'], 'values': ['39.3']},
{'key': ['05', '1995'], 'values': ['39.4']},
{'key': ['05', '1996'], 'values': ['39.4']},
{'key': ['05', '1997'], 'values': ['39.2']},
{'key': ['05', '1998'], 'values': ['39.0']},
{'key': ['05', '1999'], 'values': ['38.8']},
{'key': ['05', '2000'], 'values': ['38.8']},
{'key': ['05', '2001'], 'values': ['38.9']},
{'key': ['05', '2002'], 'values': ['39.0']},
{'key': ['05', '2003'], 'values': ['39.1']},
{'key': ['05', '2004'], 'values': ['39.2']},
{'key': ['05', '2005'], 'values': ['39.3']},
{'key': ['05', '2006'], 'values': ['39.4']},
{'key': ['05', '2007'], 'values': ['39.7']},
{'key': ['05', '2008'], 'values': ['39.9']},
{'key': ['05', '2009'], 'values': ['40.3']},
{'key': ['05', '2010'], 'values': ['40.5']},
{'key': ['05', '2011'], 'values': ['40.9']},
{'key': ['05', '2012'], 'values': ['41.1']},
{'key': ['05', '2013'], 'values': ['41.5']},
{'key': ['05', '2014'], 'values': ['41.9']},
{'key': ['05', '2015'], 'values': ['42.2']},
{'key': ['05', '2016'], 'values': ['42.8']},
{'key': ['05', '2017'], 'values': ['43.3']},
{'key': ['05', '2018'], 'values': ['43.7']},
{'key': ['06', '1991'], 'values': ['31.2']},
{'key': ['06', '1992'], 'values': ['31.2']},
{'key': ['06', '1993'], 'values': ['31.3']},
{'key': ['06', '1994'], 'values': ['31.4']},
{'key': ['06', '1995'], 'values': ['31.5']},
{'key': ['06', '1996'], 'values': ['31.4']},
{'key': ['06', '1997'], 'values': ['31.3']},
{'key': ['06', '1998'], 'values': ['31.3']},
{'key': ['06', '1999'], 'values': ['31.2']},
{'key': ['06', '2000'], 'values': ['31.2']},
{'key': ['06', '2001'], 'values': ['31.2']},
{'key': ['06', '2002'], 'values': ['31.2']},
{'key': ['06', '2003'], 'values': ['31.3']},
{'key': ['06', '2004'], 'values': ['31.4']},
{'key': ['06', '2005'], 'values': ['31.5']},
{'key': ['06', '2006'], 'values': ['31.6']},
{'key': ['06', '2007'], 'values': ['31.8']},
{'key': ['06', '2008'], 'values': ['31.9']},
{'key': ['06', '2009'], 'values': ['32.0']},
{'key': ['06', '2010'], 'values': ['32.1']},
{'key': ['06', '2011'], 'values': ['32.4']},
{'key': ['06', '2012'], 'values': ['32.4']},
{'key': ['06', '2013'], 'values': ['32.7']},
{'key': ['06', '2014'], 'values': ['33.0']},
{'key': ['06', '2015'], 'values': ['33.3']},
{'key': ['06', '2016'], 'values': ['33.8']},
{'key': ['06', '2017'], 'values': ['34.2']},
{'key': ['06', '2018'], 'values': ['34.6']},
{'key': ['07', '1991'], 'values': ['21.1']},
{'key': ['07', '1992'], 'values': ['21.2']},
{'key': ['07', '1993'], 'values': ['21.2']},
{'key': ['07', '1994'], 'values': ['21.4']},
{'key': ['07', '1995'], 'values': ['21.3']},
{'key': ['07', '1996'], 'values': ['21.2']},
{'key': ['07', '1997'], 'values': ['21.2']},
{'key': ['07', '1998'], 'values': ['21.1']},
{'key': ['07', '1999'], 'values': ['20.9']},
{'key': ['07', '2000'], 'values': ['20.9']},
{'key': ['07', '2001'], 'values': ['20.9']},
{'key': ['07', '2002'], 'values': ['20.9']},
{'key': ['07', '2003'], 'values': ['21.0']},
{'key': ['07', '2004'], 'values': ['21.1']},
{'key': ['07', '2005'], 'values': ['21.1']},
{'key': ['07', '2006'], 'values': ['21.2']},
{'key': ['07', '2007'], 'values': ['21.3']},
{'key': ['07', '2008'], 'values': ['21.5']},
{'key': ['07', '2009'], 'values': ['21.6']},
{'key': ['07', '2010'], 'values': ['21.7']},
{'key': ['07', '2011'], 'values': ['21.9']},
{'key': ['07', '2012'], 'values': ['22.0']},
{'key': ['07', '2013'], 'values': ['22.2']},
{'key': ['07', '2014'], 'values': ['22.5']},
{'key': ['07', '2015'], 'values': ['22.7']},
{'key': ['07', '2016'], 'values': ['23.1']},
{'key': ['07', '2017'], 'values': ['23.4']},
{'key': ['07', '2018'], 'values': ['23.7']},
{'key': ['08', '1991'], 'values': ['21.7']},
{'key': ['08', '1992'], 'values': ['21.7']},
{'key': ['08', '1993'], 'values': ['21.7']},
{'key': ['08', '1994'], 'values': ['21.8']},
{'key': ['08', '1995'], 'values': ['21.8']},
{'key': ['08', '1996'], 'values': ['21.7']},
{'key': ['08', '1997'], 'values': ['21.5']},
{'key': ['08', '1998'], 'values': ['21.3']},
{'key': ['08', '1999'], 'values': ['21.1']},
{'key': ['08', '2000'], 'values': ['21.0']},
{'key': ['08', '2001'], 'values': ['20.9']},
{'key': ['08', '2002'], 'values': ['20.9']},
{'key': ['08', '2003'], 'values': ['20.9']},
{'key': ['08', '2004'], 'values': ['20.9']},
{'key': ['08', '2005'], 'values': ['20.9']},
{'key': ['08', '2006'], 'values': ['20.8']},
{'key': ['08', '2007'], 'values': ['20.8']},
{'key': ['08', '2008'], 'values': ['20.8']},
{'key': ['08', '2009'], 'values': ['20.8']},
{'key': ['08', '2010'], 'values': ['20.8']},
{'key': ['08', '2011'], 'values': ['20.9']},
{'key': ['08', '2012'], 'values': ['20.9']},
{'key': ['08', '2013'], 'values': ['21.0']},
{'key': ['08', '2014'], 'values': ['21.1']},
{'key': ['08', '2015'], 'values': ['21.3']},
{'key': ['08', '2016'], 'values': ['21.7']},
{'key': ['08', '2017'], 'values': ['21.8']},
{'key': ['08', '2018'], 'values': ['21.9']},
{'key': ['09', '1991'], 'values': ['18.3']},
{'key': ['09', '1992'], 'values': ['18.3']},
{'key': ['09', '1993'], 'values': ['18.4']},
{'key': ['09', '1994'], 'values': ['18.5']},
{'key': ['09', '1995'], 'values': ['18.5']},
{'key': ['09', '1996'], 'values': ['18.5']},
{'key': ['09', '1997'], 'values': ['18.4']},
{'key': ['09', '1998'], 'values': ['18.4']},
{'key': ['09', '1999'], 'values': ['18.2']},
{'key': ['09', '2000'], 'values': ['18.2']},
{'key': ['09', '2001'], 'values': ['18.2']},
{'key': ['09', '2002'], 'values': ['18.2']},
{'key': ['09', '2003'], 'values': ['18.3']},
{'key': ['09', '2004'], 'values': ['18.3']},
{'key': ['09', '2005'], 'values': ['18.2']},
{'key': ['09', '2006'], 'values': ['18.2']},
{'key': ['09', '2007'], 'values': ['18.1']},
{'key': ['09', '2008'], 'values': ['18.1']},
{'key': ['09', '2009'], 'values': ['18.2']},
{'key': ['09', '2010'], 'values': ['18.2']},
{'key': ['09', '2011'], 'values': ['18.3']},
{'key': ['09', '2012'], 'values': ['18.2']},
{'key': ['09', '2013'], 'values': ['18.2']},
{'key': ['09', '2014'], 'values': ['18.3']},
{'key': ['09', '2015'], 'values': ['18.3']},
{'key': ['09', '2016'], 'values': ['18.5']},
{'key': ['09', '2017'], 'values': ['18.7']},
{'key': ['09', '2018'], 'values': ['18.9']},
{'key': ['10', '1991'], 'values': ['51.4']},
{'key': ['10', '1992'], 'values': ['51.4']},
{'key': ['10', '1993'], 'values': ['51.6']},
{'key': ['10', '1994'], 'values': ['52.0']},
{'key': ['10', '1995'], 'values': ['51.9']},
{'key': ['10', '1996'], 'values': ['51.7']},
{'key': ['10', '1997'], 'values': ['51.6']},
{'key': ['10', '1998'], 'values': ['51.5']},
{'key': ['10', '1999'], 'values': ['51.1']},
{'key': ['10', '2000'], 'values': ['51.0']},
{'key': ['10', '2001'], 'values': ['50.9']},
{'key': ['10', '2002'], 'values': ['50.9']},
{'key': ['10', '2003'], 'values': ['50.9']},
{'key': ['10', '2004'], 'values': ['51.0']},
{'key': ['10', '2005'], 'values': ['51.1']},
{'key': ['10', '2006'], 'values': ['51.4']},
{'key': ['10', '2007'], 'values': ['51.5']},
{'key': ['10', '2008'], 'values': ['51.7']},
{'key': ['10', '2009'], 'values': ['51.8']},
{'key': ['10', '2010'], 'values': ['52.0']},
{'key': ['10', '2011'], 'values': ['52.2']},
{'key': ['10', '2012'], 'values': ['51.9']},
{'key': ['10', '2013'], 'values': ['52.1']},
{'key': ['10', '2014'], 'values': ['52.6']},
{'key': ['10', '2015'], 'values': ['53.3']},
{'key': ['10', '2016'], 'values': ['54.1']},
{'key': ['10', '2017'], 'values': ['54.4']},
{'key': ['10', '2018'], 'values': ['54.5']},
{'key': ['12', '1991'], 'values': ['97.8']},
{'key': ['12', '1992'], 'values': ['98.5']},
{'key': ['12', '1993'], 'values': ['99.2']},
{'key': ['12', '1994'], 'values': ['100.3']},
{'key': ['12', '1995'], 'values': ['100.8']},
{'key': ['12', '1996'], 'values': ['101.1']},
{'key': ['12', '1997'], 'values': ['101.3']},
{'key': ['12', '1998'], 'values': ['101.6']},
{'key': ['12', '1999'], 'values': ['101.8']},
{'key': ['12', '2000'], 'values': ['102.3']},
{'key': ['12', '2001'], 'values': ['103.0']},
{'key': ['12', '2002'], 'values': ['103.8']},
{'key': ['12', '2003'], 'values': ['104.5']},
{'key': ['12', '2004'], 'values': ['105.2']},
{'key': ['12', '2005'], 'values': ['106.0']},
{'key': ['12', '2006'], 'values': ['107.3']},
{'key': ['12', '2007'], 'values': ['108.7']},
{'key': ['12', '2008'], 'values': ['110.1']},
{'key': ['12', '2009'], 'values': ['111.6']},
{'key': ['12', '2010'], 'values': ['112.7']},
{'key': ['12', '2011'], 'values': ['114.2']},
{'key': ['12', '2012'], 'values': ['115.1']},
{'key': ['12', '2013'], 'values': ['116.2']},
{'key': ['12', '2014'], 'values': ['117.5']},
{'key': ['12', '2015'], 'values': ['118.9']},
{'key': ['12', '2016'], 'values': ['120.8']},
{'key': ['12', '2017'], 'values': ['122.6']},
{'key': ['12', '2018'], 'values': ['124.2']},
{'key': ['13', '1991'], 'values': ['47.3']},
{'key': ['13', '1992'], 'values': ['47.9']},
{'key': ['13', '1993'], 'values': ['48.5']},
{'key': ['13', '1994'], 'values': ['49.1']},
{'key': ['13', '1995'], 'values': ['49.4']},
{'key': ['13', '1996'], 'values': ['49.5']},
{'key': ['13', '1997'], 'values': ['49.7']},
{'key': ['13', '1998'], 'values': ['50.0']},
{'key': ['13', '1999'], 'values': ['50.1']},
{'key': ['13', '2000'], 'values': ['50.4']},
{'key': ['13', '2001'], 'values': ['50.7']},
{'key': ['13', '2002'], 'values': ['51.0']},
{'key': ['13', '2003'], 'values': ['51.5']},
{'key': ['13', '2004'], 'values': ['52.0']},
{'key': ['13', '2005'], 'values': ['52.3']},
{'key': ['13', '2006'], 'values': ['52.9']},
{'key': ['13', '2007'], 'values': ['53.4']},
{'key': ['13', '2008'], 'values': ['53.8']},
{'key': ['13', '2009'], 'values': ['54.3']},
{'key': ['13', '2010'], 'values': ['54.8']},
{'key': ['13', '2011'], 'values': ['55.6']},
{'key': ['13', '2012'], 'values': ['56.0']},
{'key': ['13', '2013'], 'values': ['56.5']},
{'key': ['13', '2014'], 'values': ['57.2']},
{'key': ['13', '2015'], 'values': ['58.0']},
{'key': ['13', '2016'], 'values': ['59.0']},
{'key': ['13', '2017'], 'values': ['59.9']},
{'key': ['13', '2018'], 'values': ['60.7']},
{'key': ['14', '1991'], 'values': ['60.5']},
{'key': ['14', '1992'], 'values': ['60.8']},
{'key': ['14', '1993'], 'values': ['61.2']},
{'key': ['14', '1994'], 'values': ['61.7']},
{'key': ['14', '1995'], 'values': ['61.9']},
{'key': ['14', '1996'], 'values': ['62.0']},
{'key': ['14', '1997'], 'values': ['62.1']},
{'key': ['14', '1998'], 'values': ['62.1']},
{'key': ['14', '1999'], 'values': ['62.1']},
{'key': ['14', '2000'], 'values': ['62.4']},
{'key': ['14', '2001'], 'values': ['62.7']},
{'key': ['14', '2002'], 'values': ['63.0']},
{'key': ['14', '2003'], 'values': ['63.2']},
{'key': ['14', '2004'], 'values': ['63.5']},
{'key': ['14', '2005'], 'values': ['63.8']},
{'key': ['14', '2006'], 'values': ['64.2']},
{'key': ['14', '2007'], 'values': ['64.6']},
{'key': ['14', '2008'], 'values': ['65.0']},
{'key': ['14', '2009'], 'values': ['65.5']},
{'key': ['14', '2010'], 'values': ['66.0']},
{'key': ['14', '2011'], 'values': ['66.8']},
{'key': ['14', '2012'], 'values': ['67.2']},
{'key': ['14', '2013'], 'values': ['67.9']},
{'key': ['14', '2014'], 'values': ['68.6']},
{'key': ['14', '2015'], 'values': ['69.3']},
{'key': ['14', '2016'], 'values': ['70.2']},
{'key': ['14', '2017'], 'values': ['71.0']},
{'key': ['14', '2018'], 'values': ['71.8']},
{'key': ['17', '1991'], 'values': ['16.2']},
{'key': ['17', '1992'], 'values': ['16.2']},
{'key': ['17', '1993'], 'values': ['16.2']},
{'key': ['17', '1994'], 'values': ['16.2']},
{'key': ['17', '1995'], 'values': ['16.1']},
{'key': ['17', '1996'], 'values': ['16.0']},
{'key': ['17', '1997'], 'values': ['15.9']},
{'key': ['17', '1998'], 'values': ['15.8']},
{'key': ['17', '1999'], 'values': ['15.7']},
{'key': ['17', '2000'], 'values': ['15.6']},
{'key': ['17', '2001'], 'values': ['15.6']},
{'key': ['17', '2002'], 'values': ['15.5']},
{'key': ['17', '2003'], 'values': ['15.6']},
{'key': ['17', '2004'], 'values': ['15.6']},
{'key': ['17', '2005'], 'values': ['15.5']},
{'key': ['17', '2006'], 'values': ['15.5']},
{'key': ['17', '2007'], 'values': ['15.6']},
{'key': ['17', '2008'], 'values': ['15.5']},
{'key': ['17', '2009'], 'values': ['15.5']},
{'key': ['17', '2010'], 'values': ['15.5']},
{'key': ['17', '2011'], 'values': ['15.6']},
{'key': ['17', '2012'], 'values': ['15.5']},
{'key': ['17', '2013'], 'values': ['15.6']},
{'key': ['17', '2014'], 'values': ['15.7']},
{'key': ['17', '2015'], 'values': ['15.7']},
{'key': ['17', '2016'], 'values': ['15.9']},
{'key': ['17', '2017'], 'values': ['16.0']},
{'key': ['17', '2018'], 'values': ['16.1']},
{'key': ['18', '1991'], 'values': ['32.1']},
{'key': ['18', '1992'], 'values': ['32.2']},
{'key': ['18', '1993'], 'values': ['32.3']},
{'key': ['18', '1994'], 'values': ['32.5']},
{'key': ['18', '1995'], 'values': ['32.5']},
{'key': ['18', '1996'], 'values': ['32.4']},
{'key': ['18', '1997'], 'values': ['32.3']},
{'key': ['18', '1998'], 'values': ['32.2']},
{'key': ['18', '1999'], 'values': ['32.0']},
{'key': ['18', '2000'], 'values': ['32.0']},
{'key': ['18', '2001'], 'values': ['32.0']},
{'key': ['18', '2002'], 'values': ['32.0']},
{'key': ['18', '2003'], 'values': ['32.1']},
{'key': ['18', '2004'], 'values': ['32.1']},
{'key': ['18', '2005'], 'values': ['32.1']},
{'key': ['18', '2006'], 'values': ['32.2']},
{'key': ['18', '2007'], 'values': ['32.3']},
{'key': ['18', '2008'], 'values': ['32.5']},
{'key': ['18', '2009'], 'values': ['32.6']},
{'key': ['18', '2010'], 'values': ['32.8']},
{'key': ['18', '2011'], 'values': ['33.1']},
{'key': ['18', '2012'], 'values': ['33.2']},
{'key': ['18', '2013'], 'values': ['33.6']},
{'key': ['18', '2014'], 'values': ['33.9']},
{'key': ['18', '2015'], 'values': ['34.2']},
{'key': ['18', '2016'], 'values': ['34.7']},
{'key': ['18', '2017'], 'values': ['35.1']},
{'key': ['18', '2018'], 'values': ['35.5']},
{'key': ['19', '1991'], 'values': ['41.2']},
{'key': ['19', '1992'], 'values': ['41.3']},
{'key': ['19', '1993'], 'values': ['41.4']},
{'key': ['19', '1994'], 'values': ['41.5']},
{'key': ['19', '1995'], 'values': ['41.4']},
{'key': ['19', '1996'], 'values': ['41.3']},
{'key': ['19', '1997'], 'values': ['41.0']},
{'key': ['19', '1998'], 'values': ['40.9']},
{'key': ['19', '1999'], 'values': ['40.7']},
{'key': ['19', '2000'], 'values': ['40.7']},
{'key': ['19', '2001'], 'values': ['40.8']},
{'key': ['19', '2002'], 'values': ['41.0']},
{'key': ['19', '2003'], 'values': ['41.2']},
{'key': ['19', '2004'], 'values': ['41.3']},
{'key': ['19', '2005'], 'values': ['41.4']},
{'key': ['19', '2006'], 'values': ['48.3']},
{'key': ['19', '2007'], 'values': ['48.4']},
{'key': ['19', '2008'], 'values': ['48.6']},
{'key': ['19', '2009'], 'values': ['48.9']},
{'key': ['19', '2010'], 'values': ['49.1']},
{'key': ['19', '2011'], 'values': ['49.7']},
{'key': ['19', '2012'], 'values': ['50.0']},
{'key': ['19', '2013'], 'values': ['50.6']},
{'key': ['19', '2014'], 'values': ['51.1']},
{'key': ['19', '2015'], 'values': ['51.6']},
{'key': ['19', '2016'], 'values': ['52.3']},
{'key': ['19', '2017'], 'values': ['53.0']},
{'key': ['19', '2018'], 'values': ['53.5']},
{'key': ['20', '1991'], 'values': ['10.3']},
{'key': ['20', '1992'], 'values': ['10.3']},
{'key': ['20', '1993'], 'values': ['10.3']},
{'key': ['20', '1994'], 'values': ['10.3']},
{'key': ['20', '1995'], 'values': ['10.3']},
{'key': ['20', '1996'], 'values': ['10.2']},
{'key': ['20', '1997'], 'values': ['10.1']},
{'key': ['20', '1998'], 'values': ['10.0']},
{'key': ['20', '1999'], 'values': ['10.0']},
{'key': ['20', '2000'], 'values': ['9.9']},
{'key': ['20', '2001'], 'values': ['9.8']},
{'key': ['20', '2002'], 'values': ['9.8']},
{'key': ['20', '2003'], 'values': ['9.8']},
{'key': ['20', '2004'], 'values': ['9.8']},
{'key': ['20', '2005'], 'values': ['9.8']},
{'key': ['20', '2006'], 'values': ['9.8']},
{'key': ['20', '2007'], 'values': ['9.8']},
{'key': ['20', '2008'], 'values': ['9.8']},
{'key': ['20', '2009'], 'values': ['9.8']},
{'key': ['20', '2010'], 'values': ['9.8']},
{'key': ['20', '2011'], 'values': ['9.9']},
{'key': ['20', '2012'], 'values': ['9.8']},
{'key': ['20', '2013'], 'values': ['9.9']},
{'key': ['20', '2014'], 'values': ['10.0']},
{'key': ['20', '2015'], 'values': ['10.0']},
{'key': ['20', '2016'], 'values': ['10.2']},
{'key': ['20', '2017'], 'values': ['10.2']},
{'key': ['20', '2018'], 'values': ['10.2']},
{'key': ['21', '1991'], 'values': ['15.9']},
{'key': ['21', '1992'], 'values': ['15.9']},
{'key': ['21', '1993'], 'values': ['15.9']},
{'key': ['21', '1994'], 'values': ['15.9']},
{'key': ['21', '1995'], 'values': ['15.9']},
{'key': ['21', '1996'], 'values': ['15.8']},
{'key': ['21', '1997'], 'values': ['15.6']},
{'key': ['21', '1998'], 'values': ['15.5']},
{'key': ['21', '1999'], 'values': ['15.4']},
{'key': ['21', '2000'], 'values': ['15.3']},
{'key': ['21', '2001'], 'values': ['15.3']},
{'key': ['21', '2002'], 'values': ['15.2']},
{'key': ['21', '2003'], 'values': ['15.2']},
{'key': ['21', '2004'], 'values': ['15.2']},
{'key': ['21', '2005'], 'values': ['15.2']},
{'key': ['21', '2006'], 'values': ['15.1']},
{'key': ['21', '2007'], 'values': ['15.1']},
{'key': ['21', '2008'], 'values': ['15.2']},
{'key': ['21', '2009'], 'values': ['15.2']},
{'key': ['21', '2010'], 'values': ['15.2']},
{'key': ['21', '2011'], 'values': ['15.2']},
{'key': ['21', '2012'], 'values': ['15.2']},
{'key': ['21', '2013'], 'values': ['15.3']},
{'key': ['21', '2014'], 'values': ['15.5']},
{'key': ['21', '2015'], 'values': ['15.6']},
{'key': ['21', '2016'], 'values': ['15.7']},
{'key': ['21', '2017'], 'values': ['15.8']},
{'key': ['21', '2018'], 'values': ['15.8']},
{'key': ['22', '1991'], 'values': ['12.1']},
{'key': ['22', '1992'], 'values': ['12.0']},
{'key': ['22', '1993'], 'values': ['12.0']},
{'key': ['22', '1994'], 'values': ['12.0']},
{'key': ['22', '1995'], 'values': ['11.9']},
{'key': ['22', '1996'], 'values': ['11.8']},
{'key': ['22', '1997'], 'values': ['11.7']},
{'key': ['22', '1998'], 'values': ['11.6']},
{'key': ['22', '1999'], 'values': ['11.5']},
{'key': ['22', '2000'], 'values': ['11.4']},
{'key': ['22', '2001'], 'values': ['11.3']},
{'key': ['22', '2002'], 'values': ['11.3']},
{'key': ['22', '2003'], 'values': ['11.3']},
{'key': ['22', '2004'], 'values': ['11.3']},
{'key': ['22', '2005'], 'values': ['11.2']},
{'key': ['22', '2006'], 'values': ['11.3']},
{'key': ['22', '2007'], 'values': ['11.2']},
{'key': ['22', '2008'], 'values': ['11.2']},
{'key': ['22', '2009'], 'values': ['11.2']},
{'key': ['22', '2010'], 'values': ['11.2']},
{'key': ['22', '2011'], 'values': ['11.2']},
{'key': ['22', '2012'], 'values': ['11.2']},
{'key': ['22', '2013'], 'values': ['11.2']},
{'key': ['22', '2014'], 'values': ['11.3']},
{'key': ['22', '2015'], 'values': ['11.3']},
{'key': ['22', '2016'], 'values': ['11.4']},
{'key': ['22', '2017'], 'values': ['11.4']},
{'key': ['22', '2018'], 'values': ['11.4']},
{'key': ['23', '1991'], 'values': ['2.8']},
{'key': ['23', '1992'], 'values': ['2.7']},
{'key': ['23', '1993'], 'values': ['2.8']},
{'key': ['23', '1994'], 'values': ['2.8']},
{'key': ['23', '1995'], 'values': ['2.7']},
{'key': ['23', '1996'], 'values': ['2.7']},
{'key': ['23', '1997'], 'values': ['2.7']},
{'key': ['23', '1998'], 'values': ['2.7']},
{'key': ['23', '1999'], 'values': ['2.6']},
{'key': ['23', '2000'], 'values': ['2.6']},
{'key': ['23', '2001'], 'values': ['2.6']},
{'key': ['23', '2002'], 'values': ['2.6']},
{'key': ['23', '2003'], 'values': ['2.6']},
{'key': ['23', '2004'], 'values': ['2.6']},
{'key': ['23', '2005'], 'values': ['2.6']},
{'key': ['23', '2006'], 'values': ['2.6']},
{'key': ['23', '2007'], 'values': ['2.6']},
{'key': ['23', '2008'], 'values': ['2.6']},
{'key': ['23', '2009'], 'values': ['2.6']},
{'key': ['23', '2010'], 'values': ['2.6']},
{'key': ['23', '2011'], 'values': ['2.6']},
{'key': ['23', '2012'], 'values': ['2.5']},
{'key': ['23', '2013'], 'values': ['2.6']},
{'key': ['23', '2014'], 'values': ['2.6']},
{'key': ['23', '2015'], 'values': ['2.6']},
{'key': ['23', '2016'], 'values': ['2.6']},
{'key': ['23', '2017'], 'values': ['2.7']},
{'key': ['23', '2018'], 'values': ['2.7']},
{'key': ['24', '1991'], 'values': ['4.6']},
{'key': ['24', '1992'], 'values': ['4.6']},
{'key': ['24', '1993'], 'values': ['4.7']},
{'key': ['24', '1994'], 'values': ['4.7']},
{'key': ['24', '1995'], 'values': ['4.7']},
{'key': ['24', '1996'], 'values': ['4.7']},
{'key': ['24', '1997'], 'values': ['4.7']},
{'key': ['24', '1998'], 'values': ['4.7']},
{'key': ['24', '1999'], 'values': ['4.7']},
{'key': ['24', '2000'], 'values': ['4.6']},
{'key': ['24', '2001'], 'values': ['4.6']},
{'key': ['24', '2002'], 'values': ['4.6']},
{'key': ['24', '2003'], 'values': ['4.6']},
{'key': ['24', '2004'], 'values': ['4.7']},
{'key': ['24', '2005'], 'values': ['4.7']},
{'key': ['24', '2006'], 'values': ['4.7']},
{'key': ['24', '2007'], 'values': ['4.7']},
{'key': ['24', '2008'], 'values': ['4.7']},
{'key': ['24', '2009'], 'values': ['4.7']},
{'key': ['24', '2010'], 'values': ['4.7']},
{'key': ['24', '2011'], 'values': ['4.7']},
{'key': ['24', '2012'], 'values': ['4.7']},
{'key': ['24', '2013'], 'values': ['4.8']},
{'key': ['24', '2014'], 'values': ['4.8']},
{'key': ['24', '2015'], 'values': ['4.8']},
{'key': ['24', '2016'], 'values': ['4.9']},
{'key': ['24', '2017'], 'values': ['4.9']},
{'key': ['24', '2018'], 'values': ['4.9']},
{'key': ['25', '1991'], 'values': ['2.7']},
{'key': ['25', '1992'], 'values': ['2.7']},
{'key': ['25', '1993'], 'values': ['2.7']},
{'key': ['25', '1994'], 'values': ['2.7']},
{'key': ['25', '1995'], 'values': ['2.7']},
{'key': ['25', '1996'], 'values': ['2.7']},
{'key': ['25', '1997'], 'values': ['2.7']},
{'key': ['25', '1998'], 'values': ['2.6']},
{'key': ['25', '1999'], 'values': ['2.6']},
{'key': ['25', '2000'], 'values': ['2.6']},
{'key': ['25', '2001'], 'values': ['2.6']},
{'key': ['25', '2002'], 'values': ['2.6']},
{'key': ['25', '2003'], 'values': ['2.6']},
{'key': ['25', '2004'], 'values': ['2.6']},
{'key': ['25', '2005'], 'values': ['2.6']},
{'key': ['25', '2006'], 'values': ['2.6']},
{'key': ['25', '2007'], 'values': ['2.6']},
{'key': ['25', '2008'], 'values': ['2.5']},
{'key': ['25', '2009'], 'values': ['2.5']},
{'key': ['25', '2010'], 'values': ['2.5']},
{'key': ['25', '2011'], 'values': ['2.6']},
{'key': ['25', '2012'], 'values': ['2.5']},
{'key': ['25', '2013'], 'values': ['2.6']},
{'key': ['25', '2014'], 'values': ['2.6']},
{'key': ['25', '2015'], 'values': ['2.6']},
{'key': ['25', '2016'], 'values': ['2.6']},
{'key': ['25', '2017'], 'values': ['2.6']},
{'key': ['25', '2018'], 'values': ['2.6']}];
const svg = d3.select(svgRef.current);
console.log("Selected KEY = " + selectedKey);
/*
Here we want to perform an http request to backend and retrieve information to display
The selectedKey should be sent
Select what to query based on some global variable
When global variable changes call this useEffect
*/
// Convert selectedKey to a string and pad with leading zero if necessary
const paddedSelectedKey = selectedKey < 10 ? '0' + selectedKey : selectedKey.toString();
const filteredData = chartData.filter(d => d.key[0] === paddedSelectedKey);
// Set up dimensions and margins
const margin = { top: 20, right: 30, bottom: 30, left: 40 };
const width = 800 - margin.left - margin.right;
const height = 500 - margin.top - margin.bottom;
// Clear previous SVG content
svg.selectAll('*').remove();
// Set up scales
const xScale = d3.scaleBand()
.domain(filteredData.map(d => d.key[1]))
.range([0, width])
.padding(0.1);
const yScale = d3.scaleLinear()
.domain([0, d3.max(filteredData, d => parseFloat(d.values[0]))])
.nice()
.range([height, 0]);
// Create x-axis
svg.append('g')
.attr('transform', `translate(${margin.left}, ${height + margin.top})`)
.call(d3.axisBottom(xScale))
.selectAll('path, line, text') // Select the axis lines and text
.attr('stroke', 'white') // Set the color of the lines to white
.attr('stroke-width', 0) // Set the width of the text
.attr('fill', 'white'); // Set the color of the text to white
// Create y-axis
svg.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`)
.call(d3.axisLeft(yScale))
.selectAll('path, line, text') // Select the axis lines and text
.attr('stroke', 'white') // Set the color of the lines to white
.attr('stroke-width', 0) // Set the width of the text
.attr('fill', 'white'); // Set the color of the text to white
const svg = d3.select(svgRef.current);
let response = {};
// Create bars
svg.selectAll('.bar')
.data(filteredData)
.enter().append('rect')
.attr('class', 'bar')
.attr('x', d => xScale(d.key[1]) + margin.left)
.attr('y', d => yScale(parseFloat(d.values[0])) + margin.top)
.attr('width', xScale.bandwidth())
.attr('height', d => height - yScale(parseFloat(d.values[0])))
.attr('fill', '#3D96B1');
}, [selectedKey]); // Use filteredData in the dependency array
const fetchData = async (e) => {
if (selectedKey > 0 && selectedOptions.option != ''){
try {
// Request the correct API depending on the selected options
response = await axios.get(serverAddress + ':' + serverPort + '/api/' + selectedOptions.option +'?code='+selectedKey, {
withCredentials: true, // Include credentials (cookies) in the request
headers: {
'Content-Type': 'application/json',
},
});
} catch (error) {
console.log(e);
}
} else {
// Clear previous SVG content if no option or county is selected
svg.selectAll('*').remove();
}
if (Object.keys(response).length > 0 && response.data.success){
/*
* The variable `selectedOptions.option` determines what data is drawn on the chart.
* Data should be handled separately for each type of graph based on the `selectedOptions.option` value.
*
* SelectedOptions.option is one of : swedish_demographic,
* swedish_election_total_results,
* swedish_election_party_votes
*/
// Set up common dimensions and margins
const margin = { top: 20, right: 30, bottom: 30, left: 40 };
const width = 800 - margin.left - margin.right;
const height = 500 - margin.top - margin.bottom;
// Clear previous SVG content
svg.selectAll('*').remove();
if (selectedOptions.option == 'swedish_election_total_results'){
/*
* If this option is selected show a number instead of a graph
*/
const total_votes_in_county = response.data.info.query_data;
const formattedNumber = d3.format(",")(total_votes_in_county);
svg.append("text")
.attr("x", width / 2)
.attr("y", height / 2)
.attr("text-anchor", "middle")
.attr("white-space", "normal")
.attr("font-size", "70px")
.attr("fill", "#3d96b1")
.attr("stroke-width", "2px")
.attr("stroke", "#3d96b1")
.attr("font-family", "source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace")
.text(formattedNumber);
}
if (selectedOptions.option == 'swedish_election_party_votes'){
/*
* If this option is selected create a graph or show a number depending on the options
*/
const selected_party = selectedOptions.party[0];
let d3PreparedData = {};
const yearKeys = Object.keys(response.data.info.query_data[selected_party].votes_per_year);
const values = Object.values(response.data.info.query_data[selected_party].votes_per_year);
if (selectedOptions.year[0] == 'All'){
d3PreparedData = yearKeys.map((year, index) => ({
'year': year, // Keep year as a number for numerical operations
'value': values[index] // Get the corresponding value
}));
} else {
const total_votes_in_county_for_party = response.data.info.query_data[selected_party].votes_per_year[selectedOptions.year[0]];
const formattedNumber = d3.format(",")(total_votes_in_county_for_party);
svg.append("text")
.attr("x", width / 2)
.attr("y", height / 2)
.attr("text-anchor", "middle")
.attr("white-space", "normal")
.attr("font-size", "70px")
.attr("fill", "#3d96b1")
.attr("stroke-width", "2px")
.attr("stroke", "#3d96b1")
.attr("font-family", "source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace")
.text(formattedNumber);
return; //Exit, don't create a graph
}
// Create the graph:
// Set up scales
const xScale = d3.scaleBand()
.domain(yearKeys)
.range([0, width])
.padding(0.1);
const yScale = d3.scaleLinear()
.domain([0, d3.max(values)]) // Highest value in dataset
.nice()
.range([height, 0]);
// Create x-axis
svg.append('g')
.attr('transform', `translate(${margin.left}, ${height + margin.top})`)
.call(d3.axisBottom(xScale))
.selectAll('path, line, text') // Select the axis lines and text
.attr('stroke', 'white') // Set the color of the lines to white
.attr('stroke-width', 0) // Set the width of the text
.attr('fill', 'white') // Set the color of the text to white
.attr('font-size', '16px');
// Create y-axis
svg.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`)
.call(d3.axisLeft(yScale))
.selectAll('path, line, text') // Select the axis lines and text
.attr('stroke', 'white') // Set the color of the lines to white
.attr('stroke-width', 0) // Set the width of the text
.attr('fill', 'white') // Set the color of the text to white
.attr('font-size', '10px');
// Create bars
svg.selectAll('.bar')
.data(d3PreparedData)
.enter().append('rect')
.attr('class', 'bar')
.attr('x', d => xScale(d.year) + margin.left)
.attr('y', d => yScale(d.value) + margin.top)
.attr('width', xScale.bandwidth())
.attr('height', d => height - yScale(d.value))
.attr('fill', '#3D96B1');
}
if (selectedOptions.option == 'swedish_demographic'){
/*
* If this option is selected create a graph
*/
const yearKeys = Object.keys(response.data.info.query_data).map(year => parseFloat(year));
const values = Object.values(response.data.info.query_data);
const d3PreparedData = yearKeys.map((year, index) => ({
'year': year, // Keep year as a number for numerical operations
'value': values[index] // Get the corresponding value
}));
// Create the graph:
// Set up scales
const xScale = d3.scaleBand()
.domain(yearKeys)
.range([0, width])
.padding(0.1);
const yScale = d3.scaleLinear()
.domain([0, d3.max(values)]) // Highest value in dataset
.nice()
.range([height, 0]);
// Create x-axis
svg.append('g')
.attr('transform', `translate(${margin.left}, ${height + margin.top})`)
.call(d3.axisBottom(xScale))
.selectAll('path, line, text') // Select the axis lines and text
.attr('stroke', 'white') // Set the color of the lines to white
.attr('stroke-width', 0) // Set the width of the text
.attr('fill', 'white'); // Set the color of the text to white
// Create y-axis
svg.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`)
.call(d3.axisLeft(yScale))
.selectAll('path, line, text') // Select the axis lines and text
.attr('stroke', 'white') // Set the color of the lines to white
.attr('stroke-width', 0) // Set the width of the text
.attr('fill', 'white'); // Set the color of the text to white
// Create bars
svg.selectAll('.bar')
.data(d3PreparedData)
.enter().append('rect')
.attr('class', 'bar')
.attr('x', d => xScale(d.year) + margin.left)
.attr('y', d => yScale(d.value) + margin.top)
.attr('width', xScale.bandwidth())
.attr('height', d => height - yScale(d.value))
.attr('fill', '#3D96B1');
}
}
};
fetchData();
console.log("Redraw Graph")
}, [selectedKey, selectedOptions]); // Whenever these are changed invoke useEffect()
return (
<svg ref={svgRef} width={800} height={500}></svg>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment