diff --git a/frontend/src/Pages/Dashboard/Barchart.jsx b/frontend/src/Pages/Dashboard/Barchart.jsx
index 5b50be43fe1ae0a42d4f9df98825067edc3e00a7..40e755e58f6652c8642b133f188f0836d1de20ef 100644
--- a/frontend/src/Pages/Dashboard/Barchart.jsx
+++ b/frontend/src/Pages/Dashboard/Barchart.jsx
@@ -1,671 +1,215 @@
-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>