https://cityscannerteck2.vercel.app/scripts/graphs_helpers.js

1
2// set up the clock graph and hotspot graph
3let clock_graph = new ClockGraph("#module-clock");
4let hotspot_graph = new HotspotGraph("#module-hotspots");
5
6
7//inialize all graphs
8function initializeGraphs() {
9  let allFeatures = getAllMapFeatures();
10  setSelectedFeatures(allFeatures);
11
12  generateTimeline(contentPm25, "pm25", togglePm25, allFeatures);
13  generateTimeline(contentPm10, "pm10", togglePm10, allFeatures);
14  drawTimelineOverlayDots(getXScale(allFeatures));
15  clock_graph.update(allFeatures);
16  hotspot_graph.update(allFeatures);
17}
18
19function getAllMapFeatures() {
20  // get all features from map
21  features = map.queryRenderedFeatures({
22    layers: [MAP_CONFIG.styleLayerID],
23  });
24
25  return processFeatures(features);
26}
27
28function processFeatures(features) {
29  // convert UNIX timestamps to Date objects
30  features.forEach(function (d) {
31    //for some reason, this only works if we store it in a temporary variable before assigning it to properties
32    let timezonetime = moment(d.properties["time"]*1000).tz(CITY.timeZoneIdentifier);
33    d.properties["time"] = new Date(d.properties["time"] * 1000);
34    d.properties["timezonetime"] = timezonetime;
35  });
36
37  // sort features by date
38  features.sort((a, b) => a.properties["time"] - b.properties["time"]);
39
40  return features;
41}
42
43// called when a bounding box selection is made on the map
44// also called when new start/end dates are selected
45function updateGraphs(features) {
46
47  /* CLOCK GRAPH */
48  clock_graph.update(features);
49
50  /* TIMELINE GRAPHS */
51  // checks which toggles are checked (hence, graphs are visible), then redraws them
52  toggleVars.forEach(function (toggle, i) {
53    if (toggle.checked) {
54      generateTimeline(
55        contentVars[i],
56        propNameVars[i],
57        toggleVars[i],
58        features
59      );
60    }
61  });
62
63  /* Update Overlay Dots */
64  drawTimelineOverlayDots(getXScale(features));
65
66  /* HOTSPOT GRAPH */
67  // stay on current date
68  currentStartDate = new Date(hotspot_graph.getCurrentTime().getAttribute("data-start"));
69  currentEndDate = new Date(hotspot_graph.getCurrentTime().getAttribute("data-end"));
70  hotspot_graph.update(getAllMapFeatures(), currentStartDate, currentEndDate);
71}
72
73// called when DATA_SOURCE_PROP_NAME is changed to update dependent graphs
74function updateGraphBasedOnDatasource() {
75  // update the clock graph, since the clock graph is based on the selected prop
76  clock_graph.update(getSelectedFeatures());
77}
78
79//toggles if a module is shown or hidden
80//onclick from settings menu
81function toggle_module(module_name) {
82  if(module_name == "timeline") {
83    id = "module-graphs";
84    image_id = "timeline-image";
85  }
86
87  if(module_name == "clockgraph") {
88    id = "module-clock";
89    image_id = "clockgraph-image";
90  }
91
92  if(module_name == "hotspot") {
93    id = "module-hotspots";
94    image_id = "hotspots-mod-image";
95  }
96
97  if(document.getElementById(id).style.display != "none") {
98    document.getElementById(id).style.display = "none";
99    document.getElementById(image_id).src = "assets/eye-off.svg";
100  } else {
101    document.getElementById(id).style.display = "block";
102    document.getElementById(image_id).src = "assets/eye.svg";
103  }
104}
105
106
107function collapse_module(module_name) {
108  let id = "";
109  let image_id = "";
110
111  if(module_name == "timeline") {
112    id = "module-graphs";
113    image_id = "timeline-icon.png";
114  }
115
116  if(module_name == "clockgraph") {
117    id = "module-clock";
118    image_id = "clock-icon.png";
119  }
120
121  if(module_name == "hotspot") {
122    id = "module-hotspots";
123    image_id = "hotspot-icon.png";
124  }
125
126  document.getElementById(id).style.display = "none";
127  let div = document.createElement("div");
128  let img = document.createElement("img");
129  img.setAttribute("src", "assets/"+image_id);
130  img.setAttribute("width", "100%");
131  div.appendChild(img);
132  div.classList.add("module");
133  div.addEventListener("click", function () {
134    document.getElementById(id).style.display = "block";
135    div.parentElement.removeChild(div);
136  });
137
138  document.getElementById("collapsed-icons").appendChild(div);
139
140}