From 2cf3c42f57685f4da895b9fd418c1c2b694abce0 Mon Sep 17 00:00:00 2001 From: Thuong Ho Date: Sun, 25 Oct 2020 16:06:18 -0700 Subject: [PATCH 1/5] Create a dropdown component Update News and Stats to use dropdown component --- assets/variables.scss | 1 + components/DropDown.vue | 59 +++++++++++++++++++++++++++++++++++++++++ components/News.vue | 17 ++++++++---- components/Stats.vue | 54 ++++++------------------------------- 4 files changed, 80 insertions(+), 51 deletions(-) create mode 100644 components/DropDown.vue diff --git a/assets/variables.scss b/assets/variables.scss index 2991ce74..11dad9d6 100644 --- a/assets/variables.scss +++ b/assets/variables.scss @@ -10,6 +10,7 @@ $gray-1: #6F6F6F; $gray-2: #C8C8C8; $gray-3: #808080; $gray-4: #D9D9D9; +$gray-5: #E5E5E5; $white-1: #FFFFFF; $white-2: #F8F9FA; $black: #2D2D2D; diff --git a/components/DropDown.vue b/components/DropDown.vue new file mode 100644 index 00000000..a4faf7e5 --- /dev/null +++ b/components/DropDown.vue @@ -0,0 +1,59 @@ + + + diff --git a/components/News.vue b/components/News.vue index 96294892..6492264c 100644 --- a/components/News.vue +++ b/components/News.vue @@ -3,11 +3,11 @@
- +
@@ -16,6 +16,7 @@ + From f55865eed6e637a01e8638ab240b91beed0d8fec Mon Sep 17 00:00:00 2001 From: Thuong Ho Date: Wed, 9 Dec 2020 10:06:55 -0800 Subject: [PATCH 3/5] Add day range for time picker --- components/TimeBarChart.vue | 28 +++++++++++++++++++++++----- components/TimePickerDropdown.vue | 19 ++++++++++--------- 2 files changed, 33 insertions(+), 14 deletions(-) diff --git a/components/TimeBarChart.vue b/components/TimeBarChart.vue index 6f6d8827..211f5048 100644 --- a/components/TimeBarChart.vue +++ b/components/TimeBarChart.vue @@ -2,7 +2,7 @@ { @@ -286,11 +293,22 @@ export default { return `${dayBeforeRatioLocaleString}` } }, - handleTimePick(timePicked) { - if (timePicked === 'all') { + handleTimePick(timePickerSelected) { + this.timePickerSelected = timePickerSelected + this.updateChartDataByTimePick() + }, + /** + * This method updates the chartDataClone by limiting the number of data entries by + * the dropdown selected time range. All the charts rely on the chartDataClone to + * display data. + */ + updateChartDataByTimePick() { + if (this.timePickerSelected === 'all') { this.chartDataClone = [...this.chartData] } else { - this.chartDataClone = this.chartData.slice(-Number(timePicked)) + this.chartDataClone = this.chartData.slice( + -Number(this.timePickerSelected) + ) } } } diff --git a/components/TimePickerDropdown.vue b/components/TimePickerDropdown.vue index f5eeefdd..e081845a 100644 --- a/components/TimePickerDropdown.vue +++ b/components/TimePickerDropdown.vue @@ -13,6 +13,8 @@ export default { components: { DropDown }, data() { const timePickerOptions = [ + 'Last 7 days', + 'Last 14 days', 'Last 30 days', 'Last 60 days', 'Last 90 days', @@ -20,25 +22,24 @@ export default { ] const timePickerMap = { - [timePickerOptions[0]]: '30', - [timePickerOptions[1]]: '60', - [timePickerOptions[2]]: '90', - [timePickerOptions[3]]: 'all' + [timePickerOptions[0]]: '7', + [timePickerOptions[1]]: '14', + [timePickerOptions[2]]: '30', + [timePickerOptions[3]]: '60', + [timePickerOptions[4]]: '90', + [timePickerOptions[5]]: 'all' } - const defaultTimeSelected = timePickerOptions[0] + const defaultTimeSelected = timePickerOptions[1] return { timePickerOptions, timePickerMap, defaultTimeSelected } }, - mounted() { - this.$emit('timePicked', this.timePickerMap[this.defaultTimeSelected]) - }, methods: { handleSelect(event) { - this.$emit('timePicked', this.timePickerMap[event]) + this.$emit('timePickerSelected', this.timePickerMap[event]) } } } From 1a3430db7361164ea889986552e6a29e48b8dc76 Mon Sep 17 00:00:00 2001 From: Thuong Ho Date: Sun, 20 Dec 2020 16:39:15 -0800 Subject: [PATCH 4/5] Add a model to TimePickerDropdown to control default from selection from parent --- components/TimeBarChart.vue | 7 +++++-- components/TimePickerDropdown.vue | 28 +++++++++++++++++++++++++++- 2 files changed, 32 insertions(+), 3 deletions(-) diff --git a/components/TimeBarChart.vue b/components/TimeBarChart.vue index 211f5048..dd5bd650 100644 --- a/components/TimeBarChart.vue +++ b/components/TimeBarChart.vue @@ -2,7 +2,10 @@ Date: Sun, 20 Dec 2020 17:39:52 -0800 Subject: [PATCH 5/5] Add missing select handler after rebase and add styling for mobile --- components/DataView.vue | 12 ++++++++++++ components/DropDown.vue | 1 + components/Stats.vue | 3 +++ 3 files changed, 16 insertions(+) diff --git a/components/DataView.vue b/components/DataView.vue index e798c771..24542148 100644 --- a/components/DataView.vue +++ b/components/DataView.vue @@ -98,6 +98,10 @@ export default class DataView extends Vue { .v-toolbar__content { align-items: start; justify-content: space-between; + + @include lessThan($small) { + flex-direction: column; + } } } &-Header { @@ -131,6 +135,14 @@ export default class DataView extends Vue { .infoIcon-visible { visibility: unset; } + + @include lessThan($small) { + align-self: flex-end; + + .DataView-DataInfo { + text-align: right; + } + } } &-CardText { margin-bottom: 46px; diff --git a/components/DropDown.vue b/components/DropDown.vue index dd39e4cd..97d25cf2 100644 --- a/components/DropDown.vue +++ b/components/DropDown.vue @@ -47,6 +47,7 @@ export default { border-radius: 5px; background: $white-1; display: inline-block; + white-space: nowrap; select { padding: 0.435em 0.5em 0.435em 1em; diff --git a/components/Stats.vue b/components/Stats.vue index 0f52de0f..97564565 100644 --- a/components/Stats.vue +++ b/components/Stats.vue @@ -423,6 +423,9 @@ export default { case 'Solano County': return 'solano' } + }, + handleSelect(county) { + this.currentCounty = county } }, head() {