https://ecozonas.org/static/dashboard/components/surveys-gender-employment-status-stats/component.js?v=1.3.0

1class SurveysGenderEmploymentStatusStats extends HTMLElement {
2  static get observedAttributes() {
3    return [];
4  }
5
6  constructor() {
7    super();
8    const template = document.getElementById('surveys-gender-employment-status-stats-template').content;
9    this.attachShadow({ mode: 'open' });
10    this.shadowRoot.appendChild(template.cloneNode(true));
11
12    this._surveys = [];
13    this._graph;
14    this.i18n = JSON.parse(this.shadowRoot.getElementById("i18n").textContent);
15  }
16
17  render() {
18    if (this._surveys.length > 0) {
19      if (this._graph) {
20        this.updateGraphData(this.calculateData());
21      } else {
22        this.drawGraph(this.calculateData());
23      }
24    } else {
25      // En el caso de que no haya mapeos, mostrar mensaje por defecto
26      this.drawNoData();
27    }
28  }
29
30  calculateData() {
31    const root = document.documentElement;
32    let mujeres = 0;
33    let hombres = 0;
34    let otros = 0;
35
36    const data = {
37      labels: [this.i18n.Female, this.i18n.Male, `${this.i18n.Others} *`],
38      datasets: [
39        {
40          label: this.i18n.FormalSector,
41          data: [0, 0, 0],
42          backgroundColor: getComputedStyle(root).getPropertyValue('--color-category-8').trim(),
43        },
44        {
45          label: this.i18n.InformalSector,
46          data: [0, 0, 0],
47          backgroundColor: getComputedStyle(root).getPropertyValue('--color-category-7').trim(),
48        },
49        {
50          label: this.i18n.Independent,
51          data: [0, 0, 0],
52          backgroundColor: getComputedStyle(root).getPropertyValue('--color-category-6').trim(),
53        },
54        {
55          label: this.i18n.HouseholdWork,
56          data: [0, 0, 0],
57          backgroundColor: getComputedStyle(root).getPropertyValue('--color-category-5').trim(),
58        },
59        {
60          label: this.i18n.LookingForJob,
61          data: [0, 0, 0],
62          backgroundColor: getComputedStyle(root).getPropertyValue('--color-category-4').trim(),
63        },
64        {
65          label: this.i18n.Retired,
66          data: [0, 0, 0],
67          backgroundColor: getComputedStyle(root).getPropertyValue('--color-category-3').trim(),
68        },
69        {
70          label: this.i18n.Student,
71          data: [0, 0, 0],
72          backgroundColor: getComputedStyle(root).getPropertyValue('--color-category-2').trim(),
73        },
74        {
75          label: this.i18n.Other,
76          data: [0, 0, 0],
77          backgroundColor: getComputedStyle(root).getPropertyValue('--color-category-1').trim(),
78        }
79      ]
80    }
81
82    this._surveys.forEach((s) => {
83
84      if(s['introduccion/consentimiento'] == '0') {
85        return; // Cuando no dieron su consentimiento la encuesta no se procesa
86      }
87
88      const gender = s['group_urbano/group_biesoc/biesoc_16'];
89      const empleo = parseInt(s['group_urbano/group_biesoc/biesoc_5']) - 1; // El -1 es porque indexamos un array que empieza en 0
90
91      let genderIndex = 2;
92      switch (gender) {
93        case '1': // Mujer
94          mujeres++;
95          genderIndex = 0;
96          break;
97        case '2': // Hombre
98          hombres++;
99          genderIndex = 1;
100          break;
101        default:
102          otros++;
103          genderIndex = 2;
104      }
105      data.datasets[empleo].data[genderIndex]++;
106    })
107
108
109    for (let i = 1; i < 8; i++) {
110      data.datasets[i].data[0] = mujeres > 0 ? Math.round(data.datasets[i].data[0] / mujeres * 100) : 0;
111      data.datasets[i].data[1] = hombres > 0 ? Math.round(data.datasets[i].data[1] / hombres * 100) : 0;
112      data.datasets[i].data[2] = otros > 0 ? Math.round(data.datasets[i].data[2] / otros * 100) : 0;
113    }
114
115    this.shadowRoot.getElementById('mujeres').innerHTML = mujeres;
116    this.shadowRoot.getElementById('hombres').innerHTML = hombres;
117    this.shadowRoot.getElementById('otros').innerHTML = otros;
118
119    return data;
120  }
121
122  showGraph() {
123    this.shadowRoot.getElementById('message').classList.add('hidden');
124    this.shadowRoot.getElementById('graph').classList.remove('hidden');
125  }
126
127  showMessage() {
128    this.shadowRoot.getElementById('message').classList.remove('hidden');
129    this.shadowRoot.getElementById('graph').classList.add('hidden');
130  }
131
132  drawNoData() {
133    this.showMessage()
134    if (this._graph) {
135      this._graph.destroy();
136      this._graph = undefined;
137    }
138    this.shadowRoot.getElementById('mujeres').innerHTML = 0;
139    this.shadowRoot.getElementById('hombres').innerHTML = 0;
140    this.shadowRoot.getElementById('otros').innerHTML = 0;
141  }
142
143  updateGraphData(data) {
144    this.showGraph()
145    this._graph.data = data;
146    this._graph.update();
147  }
148
149  drawGraph(data) {
150    this.showGraph();
151
152    const root = document.documentElement;
153
154    this._graph = new Chart(
155      this.shadowRoot.getElementById('graph'),
156      {
157        type: 'bar',
158        data: data,
159        options: {
160          maintainAspectRatio: false,
161          scales: {
162            y: {
163              beginAtZero: true,
164              stacked: true,
165              max: 100,
166              ticks: {
167                callback: function (value) {
168                  return value + "%";
169                }
170              }
171            },
172            x: {
173              stacked: true
174            }
175          },
176          plugins: {
177            legend: {
178              position: 'bottom',
179            },
180            title: {
181              display: false,
182            },
183            tooltip: {
184              callbacks: {
185                label: function (context) {
186                  let label = context.dataset.label || '';
187                  if (label) {
188                    label += ': ';
189                  }
190                  if (context.parsed.y !== null) {
191                    label += context.parsed.y + '%';
192                  }
193                  return label;
194                }
195              }
196            }
197          },
198        }
199      });
200  }
201
202  get surveys() {
203    return this._surveys;
204  }
205
206  set surveys(data) {
207    this._surveys = data;
208    this.render();
209  }
210}
211
212customElements.define('surveys-gender-employment-status-stats', SurveysGenderEmploymentStatusStats);