Skip to content

Commit 317f21a

Browse files
marcmatiasmarcmatias
committed
Updating interface year selector and features
1 parent 36f3a21 commit 317f21a

File tree

11 files changed

+91
-95
lines changed

11 files changed

+91
-95
lines changed

‎src/assets/css/components/select.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -75,11 +75,11 @@
7575
7676
*/
7777

78-
.start-datepicker .n-input .n-input__border {
78+
.start-datepicker .n-base-selection__border {
7979
border-right-color: transparent;
8080
}
8181

82-
.end-datepicker .n-input .n-input__border {
82+
.end-datepicker .n-base-selection__border {
8383
border-left-color: transparent;
8484
}
8585

‎src/common.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export const formatToApi = ({
1717
case "periodEnd":
1818
case "periodStart":
1919
if (form[formField]) {
20-
routerResult[formField] = formatDate(form[formField]);
20+
routerResult[formField] = form[formField];
2121
}
2222
break;
2323
case "doses":

‎src/components/chart.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -231,7 +231,7 @@ export const chart = {
231231
const result = await store.dispatch("content/requestData", {
232232
detail: true,
233233
stateNameAsCode: false,
234-
stateTotal: true
234+
stateTotal: true,
235235
});
236236

237237
if (!result) {

‎src/components/main-card.js

+1-11
Original file line numberDiff line numberDiff line change
@@ -87,20 +87,10 @@ export const mainCard = {
8787
}
8888

8989
for (const [key, value] of Object.entries(routeArgs)) {
90-
const result = new Date(String(value));
91-
if (key === "period") {
90+
if (["period", "periodStart", "periodEnd"].includes(key)) {
9291
routerResult[key] = Number(value);
9392
continue;
9493
}
95-
if (result instanceof Date && !isNaN(result.getTime())) {
96-
const currentYear = new Date().getFullYear();
97-
if (Number(value) <= currentYear) {
98-
routerResult[key] = convertDateToUtc(String(value));
99-
} else {
100-
routerResult[key] = convertDateToUtc(String(currentYear));
101-
}
102-
continue;
103-
}
10494
if (value.includes(",")){
10595
routerResult[key] = value.split(",");
10696
continue

‎src/components/map/map.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -94,9 +94,9 @@ export const map = {
9494
});
9595

9696
watch(
97-
() => {
97+
() => {
9898
const form = store.state.content.form;
99-
return [form.sickImmunizer, form.dose, form.type, form.local, form.granularity];
99+
return [form.sickImmunizer, form.dose, form.type, form.local, form.granularity, form.periodStart, form.periodEnd];
100100
},
101101
async () => {
102102
// Avoid render before change tab
@@ -108,7 +108,7 @@ export const map = {
108108

109109
watch(
110110
() => [store.state.content.form.period],
111-
(period) => {
111+
async (period) => {
112112
if (datasetStates.value) {
113113
renderMap({ datasetStates: datasetStates.value[period] });
114114
} else if (datasetCities.value) {

‎src/components/map/year-slider.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,11 @@ export const yearSlider = {
2020
const mapPlaying = ref(false);
2121
const stopPlayMap = ref(false);
2222
const setSliderValue = (period) => {
23+
const form = store.state.content.form;
24+
showSlider.value = form.periodStart && form.periodEnd ? true : false;
2325
if (period) {
24-
showSlider.value = true;
25-
return timestampToYear(period)
26+
return Number(period);
2627
}
27-
showSlider.value = false;
2828
return;
2929
}
3030

‎src/components/sub-buttons.js

+45-18
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ref, computed } from "vue/dist/vue.esm-bundler";
22
import { NButton, NIcon, NModal, NCard } from "naive-ui";
3-
import { biBook, biListUl, biDownload, biShareFill, biFiletypeCsv } from "../icons.js";
3+
import { biBook, biListUl, biDownload, biShareFill, biFiletypeCsv, biGraphUp } from "../icons.js";
44
import { formatToTable, timestampToYear } from "../utils.js";
55
import { useStore } from "vuex";
66
import CsvWriterGen from "csvwritergen";
@@ -64,34 +64,30 @@ export const subButtons = {
6464
}
6565

6666
const downloadCsv = async () => {
67-
let sick = store.state.content.form.sickImmunizer;
68-
if (!sick || !sick.length) {
69-
store.commit('message/ERROR', "Selecione conteúdo para poder gerar csv")
70-
return;
71-
}
7267
const periodStart = store.state.content.form.periodStart;
7368
const periodEnd = store.state.content.form.periodEnd;
7469
let years = [];
7570
if (periodStart) {
76-
let y = timestampToYear(periodStart);
77-
while (y <= timestampToYear(periodEnd)) {
71+
let y = periodStart;
72+
while (y <= periodEnd) {
7873
years.push(y++);
7974
}
8075
}
8176

82-
sick = Array.isArray(store.state.content.form.sickImmunizer) ?
83-
store.state.content.form.sickImmunizer : [store.state.content.form.sickImmunizer];
84-
8577
const currentResult = await store.dispatch("content/requestData", { detail: true });
78+
if (!currentResult) {
79+
store.commit('message/ERROR', "Preencha os seletores para gerar csv")
80+
return;
81+
}
8682
const csvwriter = new CsvWriterGen(currentResult.data.shift(), currentResult.data);
87-
csvwriter.anchorElement('monitor-tabela');
83+
csvwriter.anchorElement('tabela');
8884
}
8985

9086
const clickShowModal = () => {
9187
const map = document.querySelector("#canvas");
9288
svg.value = map?.innerHTML;
9389
const canvas = document.getElementById("chart");
94-
chartPNG.value = canvas?.toDataURL('image/png', 1);
90+
chartPNG.value = ![...canvas.classList].includes("element-hidden") ? canvas?.toDataURL('image/png', 1) : null;
9591
showModal.value = true;
9692
}
9793

@@ -108,6 +104,10 @@ export const subButtons = {
108104
const downloadChartAsImage = () => {
109105
const imageLink = document.createElement("a");
110106
imageLink.download = 'chart.png';
107+
if (!chartPNG.value) {
108+
store.commit('message/ERROR', "Preencha os seletores para gerar imagem")
109+
return;
110+
}
111111
imageLink.href = chartPNG.value;
112112
imageLink.click();
113113
}
@@ -124,6 +124,7 @@ export const subButtons = {
124124
biDownload,
125125
biShareFill,
126126
biFiletypeCsv,
127+
biGraphUp,
127128
downloadSvg,
128129
downloadPng,
129130
downloadCsv,
@@ -220,7 +221,7 @@ export const subButtons = {
220221
>
221222
Faça o download de conteúdos<br><br>
222223
223-
<div v-if="svg || chartPNG" style="display: flex; flex-direction: column; gap: 12px">
224+
<div style="display: flex; flex-direction: column; gap: 12px">
224225
<div style="padding: 0px 0px 12px;">Gráficos</div>
225226
<n-card v-if="svg" embedded :bordered="false">
226227
<div style="display: flex; align-items: center; justify; justify-content: space-between;">
@@ -252,10 +253,19 @@ export const subButtons = {
252253
</n-button>
253254
</div>
254255
</n-card>
255-
<n-card v-if="chartPNG" embedded :bordered="false">
256+
<n-card embedded :bordered="false">
256257
<div style="display: flex; align-items: center; justify; justify-content: space-between;">
257-
<div style="display: flex; gap: 12px">
258-
<img :src="chartPNG" style="max-width: 100px; background-color: white; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;" />
258+
<div style="display: flex; gap: 12px; align-items: center">
259+
<img
260+
v-if="chartPNG"
261+
:src="chartPNG"
262+
style="max-width: 100px;
263+
background-color: white;
264+
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;"
265+
/>
266+
<div v-else style="padding: 0px 24px">
267+
<n-icon v-html="biGraphUp" size="50" />
268+
</div>
259269
<div>
260270
<h3>Gráfico PNG</h3>
261271
<p>Para impressões de alta qualidade e editável em softwares gráficos</p>
@@ -268,7 +278,24 @@ export const subButtons = {
268278
</div>
269279
</n-card>
270280
</div>
271-
<div style="padding: 14px 0px 12px;">Dados</div>
281+
<div style="padding: 14px 0px 12px; gap: 12px">Dados</div>
282+
<n-card embedded :bordered="false">
283+
<div style="display: flex; align-items: center; justify; justify-content: space-between;">
284+
<div style="display: flex; gap: 12px; align-items: center">
285+
<div style="padding: 0px 24px">
286+
<n-icon v-html="biFiletypeCsv" size="50" />
287+
</div>
288+
<div>
289+
<h3>Dados utilizados na interface em CSV</h3>
290+
<p>Os dados que estão sendo utilizados nesta interface</p>
291+
</div>
292+
</div>
293+
<n-button quaternary type="primary" style="font-weight: 500" @click="downloadCsv">
294+
<template #icon><n-icon v-html="biDownload" /></template>
295+
&nbsp;&nbsp;Baixar
296+
</n-button>
297+
</div>
298+
</n-card>
272299
<n-card embedded :bordered="false">
273300
<div style="display: flex; align-items: center; justify; justify-content: space-between;">
274301
<div style="display: flex; gap: 12px; align-items: center">

‎src/components/sub-select.js

+10-21
Original file line numberDiff line numberDiff line change
@@ -36,15 +36,16 @@ export const subSelect = {
3636
const granularities = computed(computedVar({ store, base: "form", mutation: "content/UPDATE_FORM", field: "granularities" }));
3737
const periodStart = computed(computedVar({ store, base: "form", mutation: "content/UPDATE_FORM", field: "periodStart" }));
3838
const periodEnd = computed(computedVar({ store, base: "form", mutation: "content/UPDATE_FORM", field: "periodEnd" }))
39+
const years = computed(computedVar({ store, base: "form", mutation: "content/UPDATE_FORM", field: "years" }))
3940

4041
const showingLocalsOptions = ref(null);
4142
const showingSicksOptions = ref(null);
4243

4344
const updateDatePosition = () => {
4445
const endDate = periodEnd.value
4546
const startDate = periodStart.value
46-
const tsEndDate = endDate ? new Date(endDate) : null
47-
const tsStartDate = startDate ? new Date(startDate) : null
47+
const tsEndDate = endDate
48+
const tsStartDate = startDate
4849
if (!tsStartDate || !tsEndDate) {
4950
return
5051
}
@@ -99,18 +100,6 @@ export const subSelect = {
99100
}
100101
};
101102

102-
const disableDate = (ts) => {
103-
const timestamp = Date.now()
104-
const dateNow = new Date(timestamp)
105-
dateNow.setHours(23)
106-
dateNow.setMinutes(59)
107-
dateNow.setSeconds(59)
108-
dateNow.setMilliseconds(1000)
109-
const tsDate = new Date(ts)
110-
let minYear = Math.min(...store.state.content.form.years.map(x => parseInt(Object.values(x)[0])));
111-
return dateNow.getFullYear() <= tsDate.getFullYear() || minYear > tsDate.getFullYear();
112-
};
113-
114103
watch(
115104
() => store.state.content.form.local,
116105
(loc) => {
@@ -136,7 +125,6 @@ export const subSelect = {
136125
handleLocalsUpdateValue,
137126
handleSicksUpdateShow,
138127
handleSicksUpdateValue,
139-
disableDate,
140128
type,
141129
types,
142130
local,
@@ -148,6 +136,7 @@ export const subSelect = {
148136
periodStart,
149137
periodEnd,
150138
period,
139+
years,
151140
granularity,
152141
granularities,
153142
localTemp,
@@ -214,25 +203,25 @@ export const subSelect = {
214203
</n-select>
215204
</n-form-item>
216205
<n-form-item label="Abrangência temporal" style="width: 200px">
217-
<n-date-picker
206+
<n-select
218207
class="start-datepicker"
219208
v-model:value="periodStart"
209+
:options="years"
220210
type="year"
221211
placeholder="Início"
222-
:is-date-disabled="disableDate"
212+
filterable
223213
@update:value="updateDatePosition"
224214
clearable
225-
:actions="null"
226215
/>
227-
<n-date-picker
216+
<n-select
228217
class="end-datepicker"
229218
v-model:value="periodEnd"
219+
:options="years"
230220
type="year"
231221
placeholder="Final"
232-
:is-date-disabled="disableDate"
222+
filterable
233223
@update:value="updateDatePosition"
234224
clearable
235-
:actions="null"
236225
/>
237226
</n-form-item>
238227
<n-form-item label="Granularidade">

‎src/components/table.js

+3-19
Original file line numberDiff line numberDiff line change
@@ -20,31 +20,15 @@ export const table = {
2020
const loading = ref(true);
2121
const rows = ref([]);
2222
const columns = ref([]);
23-
const sick = computed(() => store.state.content.form.sickImmunizer);
24-
const local = computed(() => store.state.content.form.local);
25-
const valueYears = computed(() => {
26-
const periodStart = store.state.content.form.periodStart;
27-
const periodEnd = store.state.content.form.periodEnd;
28-
if (!periodStart) {
29-
return [];
30-
}
31-
let y = timestampToYear(periodStart);
32-
const result = [];
33-
while (y <= timestampToYear(periodEnd)) {
34-
result.push(y++);
35-
}
36-
return result;
37-
})
3823

3924

4025
const setTableData = async () => {
41-
if (!sick.value || (sick.value && !sick.value.length) || !local.value.length || !valueYears.value.length){
42-
loading.value = false;
26+
27+
const currentResult = await store.dispatch("content/requestData", { detail: true });
28+
if (!currentResult) {
4329
rows.value = [];
4430
return;
4531
}
46-
47-
const currentResult = await store.dispatch("content/requestData", { detail: true });
4832
const tableData = formatToTable(currentResult.data, currentResult.localNames);
4933
columns.value = tableData.header;
5034
columns.value[2].sorter = (row1, row2) => {

‎src/icons.js

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)