https://global-plastics-tool.org/js/report_config.js

1/**
2 * Logic for the selection components appearing at the top of the detailed tab.
3 *
4 * @license BSD, see LICENSE.md
5 */
6
7import {ALL_REGIONS, DISPLAY_STAGES, DISPLAY_TYPES, HISTORY_START_YEAR, MAX_YEAR} from "const";
8import {STRINGS} from "strings";
9
10
11/**
12 * Presenter for the details tab selection configuration component.
13 *
14 * Presenter for the component at the top of the detailed tab which allows the user to refine the
15 * selection like year and region.
16 */
17class ConfigPresenter {
18    /**
19     * Create presenter to start managing the configuration section at the top of the detailed tab.
20     *
21     * @param targetDiv Div where the controls are rendered.
22     * @param onStageChange Callback to invoke if the stage (production, consumption, EOL) is
23     *      changed.
24     * @param onRegionChange Callback to invoke if the user changes the selected region.
25     * @param onYearChange Callback to invoke if the user changes the highlighted year.
26     * @param onTypeChange Callback to invoke if the user changes the type (like percent,
27     *      cumulative) of metric to show is updated by the user.
28     * @param onShowBauChange Callback to invoke if the user changes if change to business as usual
29     *      is highlighted.
30     */
31    constructor(targetDiv, onStageChange, onRegionChange, onYearChange,
32        onTypeChange, onShowBauChange) {
33        const self = this;
34
35        self._targetDiv = targetDiv;
36
37        self._onStageChange = onStageChange;
38        self._onRegionChange = onRegionChange;
39        self._onYearChange = onYearChange;
40        self._onTypeChange = onTypeChange;
41        self._onShowBauChange = onShowBauChange;
42
43        self._stageSelect = self._targetDiv.querySelector(".stage-select");
44        self._regionSelect = self._targetDiv.querySelector(".region-select");
45        self._yearSelect = self._targetDiv.querySelector(".year-select");
46        self._typeSelect = self._targetDiv.querySelector(".type-select");
47        self._showBauDeltaCheck = self._targetDiv.querySelector(".show-delta");
48
49        self._d3Selection = self._getD3().select("#" + self._targetDiv.id);
50
51        self._setupStage();
52        self._setupRegion();
53        self._setupYear();
54        self._setupType();
55        self._setupBauCheck();
56    }
57
58    /**
59     * Update the configuration display.
60     *
61     * @param stateSet The set of state Maps having gone through the policy simulation.
62     * @param selection Structure describing the selections made by the user like year and region.
63     */
64    update(stateSet, selection) {
65        const self = this;
66
67        self._stageSelect.value = selection.getDisplayStage();
68        self._regionSelect.value = selection.getRegion();
69        self._yearSelect.value = selection.getYear();
70        self._typeSelect.value = selection.getDisplayType();
71        self._showBauDeltaCheck.checked = selection.getShowBauDelta() ? 1 : 0;
72    }
73
74    /**
75     * Allow the user to select the delta from BAU checkbox.
76     */
77    showDeltaCheck() {
78        const self = this;
79        self._targetDiv.querySelector(".delta-check-holder").style.display = "block";
80    }
81
82    _setupStage() {
83        const self = this;
84
85        self._d3Selection
86            .select(".stage-select")
87            .selectAll(".stage")
88            .data([DISPLAY_STAGES.consumption, DISPLAY_STAGES.eol, DISPLAY_STAGES.production])
89            .enter()
90            .append("option")
91            .attr("value", (x) => x)
92            .html((x) => STRINGS.get(x))
93            .classed("stage", true);
94
95        self._stageSelect.addEventListener("change", () => {
96            self._onStageChange(parseInt(self._stageSelect.value));
97        });
98    }
99
100    _setupRegion() {
101        const self = this;
102
103        self._d3Selection
104            .select(".region-select")
105            .selectAll(".region")
106            .data(ALL_REGIONS)
107            .enter()
108            .append("option")
109            .attr("value", (x) => x)
110            .html((x) => STRINGS.get(x))
111            .classed("region", true);
112
113        self._regionSelect.addEventListener("change", () => {
114            self._onRegionChange(self._regionSelect.value);
115        });
116    }
117
118    _setupYear() {
119        const self = this;
120
121        const years = [];
122        for (let year = HISTORY_START_YEAR; year <= MAX_YEAR; year++) {
123            years.push(year);
124        }
125
126        self._d3Selection
127            .select(".year-select")
128            .selectAll(".year")
129            .data(years)
130            .enter()
131            .append("option")
132            .attr("value", (x) => x)
133            .html((x) => x)
134            .classed("year", true);
135
136        self._yearSelect.addEventListener("change", () => {
137            self._onYearChange(parseInt(self._yearSelect.value));
138        });
139    }
140
141    _setupType() {
142        const self = this;
143
144        self._d3Selection
145            .select(".type-select")
146            .selectAll(".type")
147            .data([DISPLAY_TYPES.amount, DISPLAY_TYPES.percent, DISPLAY_TYPES.cumulative])
148            .enter()
149            .append("option")
150            .attr("value", (x) => x)
151            .html((x) => STRINGS.get(x))
152            .classed("type", true);
153
154        self._typeSelect.addEventListener("change", () => {
155            self._onTypeChange(parseInt(self._typeSelect.value));
156        });
157    }
158
159    _setupBauCheck() {
160        const self = this;
161
162        self._showBauDeltaCheck.addEventListener("change", () => {
163            self._onShowBauChange(self._showBauDeltaCheck.checked == 1);
164        });
165    }
166
167    _getD3() {
168        const self = this;
169        // eslint-disable-next-line no-undef
170        return d3;
171    }
172}
173
174
175export {ConfigPresenter};