https://terrancelaw.github.io/iDashboard/js/rightTrendView.js

1const RightTrendView = {
2	draw: function(isInitialization) {
3		const self = this;
4		let quantitativeAttr = isInitialization 
5							 ? Database.getQuantitativeAttrList()[2] 
6							 : $('#trend-view > .view:nth-child(3) > .header > .attribute[type="quantitative"]').attr('value');
7
8		self.drawHeader(quantitativeAttr);
9		self.drawContent(quantitativeAttr);
10		self.installClickHeaderAttrBehaviour();
11	},
12	showLoader: function() {
13		$('#trend-view > .view:nth-child(3) > .loader')
14			.css('display', 'block');
15	},
16	hideLoader: function() {
17		$('#trend-view > .view:nth-child(3) > .loader')
18			.css('display', 'none');
19	},
20
21	// draw
22
23	drawHeader: function(quantitativeAttr) {
24		let itemName = Database.getItemName();
25		let filterState = MapView.selectedState;
26		let stateAbbr = filterState !== null ? Database.stateToAbbr[filterState] : '';
27		let headerHTML = '';
28
29		headerHTML += '<span class="attribute" type="quantitative" value="' + quantitativeAttr + '">' + quantitativeAttr + '</span>';
30		headerHTML += ' per ' + itemName + (filterState !== null ? ' in ' + stateAbbr : '');
31		$('#trend-view > .view:nth-child(3) > .header').html(headerHTML);
32	},
33	drawContent: function(quantitativeAttr) {
34		let filterState = MapView.selectedState;
35		let containerWidth = $('#trend-view > .view:nth-child(3) > .content').width();
36		let containerHeight = $('#trend-view > .view:nth-child(3) > .content').height();
37		let vegaLiteSpec = {
38			$schema: "https://vega.github.io/schema/vega-lite/v5.json",
39			width: containerWidth - 90, height: containerHeight - 60,
40			data: { values: Database.data },
41			mark: {
42				type: "line",
43				point: { filled: false, fill: "white" }
44			},
45			encoding: {
46				x: { 
47					field: "Year", type: "temporal", timeUnit: "year", 
48					axis: { 
49						labelColor: "gray", labelFontSize: 8,
50						titleColor: "gray", titleFontSize: 9, title: 'Year', titleFontWeight: 'normal',
51						gridDash: [ 2, 2 ], tickCount: 10,
52						labelExpr: "(datum.index === 0 || datum.index === 1) ? null : datum.label"
53					}
54				},
55				y: {
56					field: quantitativeAttr, type: "quantitative", aggregate: "mean",
57					axis: { 
58						labelColor: "gray", labelFontSize: 8,
59						titleColor: "gray", titleFontSize: 9, titleFontWeight: 'normal',
60						gridDash: [ 2, 2 ] 
61					}
62				},
63				tooltip: [
64			      { field: quantitativeAttr, type: "quantitative", aggregate: "mean", format: ".2f" },
65			      { field: "Year", type: "temporal", timeUnit: "year", title: 'Year' }
66			    ]
67			}
68		}
69
70		if (filterState !== null) vegaLiteSpec.transform = [{ filter: { field: "State", equal: filterState } }];
71		vegaEmbed('#trend-view > .view:nth-child(3) > .content', vegaLiteSpec, { actions: false });
72	},
73	installClickHeaderAttrBehaviour: function() {
74		$('#trend-view > .view:nth-child(3) > .header > .attribute')
75			.on('click', onClickHeaderAttribute);
76
77		function onClickHeaderAttribute() {
78			let attributeType = $(this).closest('.attribute').attr('type');
79			let position = $(this).offset();
80			let width = $(this).width();
81			let height = $(this).height();
82			let top = position.top - 8 - 20;
83			let left = position.left + width / 2;
84
85			$('#map-view > .header > .attribute').removeClass('clicking');
86			$('#trend-view > .view > .header > .attribute').removeClass('clicking');
87			$(this).addClass('clicking');
88			
89			DropDownMenu.show({
90				attributeType: attributeType,
91				focusedView: RightTrendView,
92				top: top, left: left, isUpArrow: false
93			});
94		}
95	}
96}