Working on expanded pages and data processing.
This commit is contained in:
Joshua Bemenderfer
5
src/components/Card.vue
Normal file
5
src/components/Card.vue
Normal file
@@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div class="bg-white shadow rounded-lg p-4 lg:p-8 max-w-none prose lg:prose-base prose-headings:font-light prose-headings:text-indigo-900 prose-h1:mb-0">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
21
src/components/DataFetcher.vue
Normal file
21
src/components/DataFetcher.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<template></template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, watch } from 'vue'
|
||||
const { parameters, data, watcher, refresher } = defineProps({
|
||||
parameters: Object,
|
||||
data: Object,
|
||||
watcher: Function,
|
||||
refresher: Function
|
||||
})
|
||||
|
||||
console.log(parameters, data, watcher, refresher)
|
||||
|
||||
async function refreshData(parameters) {
|
||||
data.value = await refresher(parameters)
|
||||
}
|
||||
|
||||
watch(watcher, () => refreshData(parameters))
|
||||
onMounted(() => refreshData(parameters))
|
||||
|
||||
</script>
|
||||
190
src/components/SliceSelector.vue
Normal file
190
src/components/SliceSelector.vue
Normal file
@@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<div class='flex flex-wrap bg-white shadow rounded-lg p-4 space-x-6 lg:px-6 lg:py-0 lg:fixed lg:z-50 lg:top-0 lg:right-0 lg:left-96 lg:h-16 lg:shadow-none lg:flex-nowrap lg:!mt-0'>
|
||||
<label class='w-full flex items-center lg:inline-flex lg:w-auto'>
|
||||
County
|
||||
<select v-model="parameters.county" class='ml-4 flex-1'>
|
||||
<option v-for='county of counties' :key='county' :value='county'>{{county}}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label class='w-full flex items-center lg:inline-flex lg:w-auto'>
|
||||
Start
|
||||
<input type='date' v-model='parameters.start' class='ml-4 flex-1'/>
|
||||
</label>
|
||||
|
||||
<label class='w-full flex items-center lg:inline-flex lg:w-auto'>
|
||||
End
|
||||
<input type='date' v-model='parameters.end' class='ml-4 flex-1'/>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { ref, inject } from 'vue'
|
||||
|
||||
const parameters = inject('parameters')
|
||||
|
||||
const counties = [
|
||||
'All',
|
||||
'Appling',
|
||||
'Atkinson',
|
||||
'Bacon',
|
||||
'Baker',
|
||||
'Baldwin',
|
||||
'Banks',
|
||||
'Barrow',
|
||||
'Bartow',
|
||||
'Ben Hill',
|
||||
'Berrien',
|
||||
'Bibb',
|
||||
'Bleckley',
|
||||
'Brantley',
|
||||
'Brooks',
|
||||
'Bryan',
|
||||
'Bulloch',
|
||||
'Burke',
|
||||
'Butts',
|
||||
'Calhoun',
|
||||
'Camden',
|
||||
'Candler',
|
||||
'Carroll',
|
||||
'Catoosa',
|
||||
'Charlton',
|
||||
'Chatham',
|
||||
'Chattahoochee',
|
||||
'Chattooga',
|
||||
'Cherokee',
|
||||
'Clarke',
|
||||
'Clay',
|
||||
'Clayton',
|
||||
'Clinch',
|
||||
'Cobb',
|
||||
'Coffee',
|
||||
'Colquitt',
|
||||
'Columbia',
|
||||
'Cook',
|
||||
'Coweta',
|
||||
'Crawford',
|
||||
'Crisp',
|
||||
'Dade',
|
||||
'Dawson',
|
||||
'Decatur',
|
||||
'DeKalb',
|
||||
'Dodge',
|
||||
'Dooly',
|
||||
'Dougherty',
|
||||
'Douglas',
|
||||
'Early',
|
||||
'Echols',
|
||||
'Effingham',
|
||||
'Elbert',
|
||||
'Emanuel',
|
||||
'Evans',
|
||||
'Fannin',
|
||||
'Fayette',
|
||||
'Floyd',
|
||||
'Forsyth',
|
||||
'Franklin',
|
||||
'Fulton',
|
||||
'Gilmer',
|
||||
'Glascock',
|
||||
'Glynn',
|
||||
'Gordon',
|
||||
'Grady',
|
||||
'Greene',
|
||||
'Gwinnett',
|
||||
'Habersham',
|
||||
'Hall',
|
||||
'Hancock',
|
||||
'Haralson',
|
||||
'Harris',
|
||||
'Hart',
|
||||
'Heard',
|
||||
'Henry',
|
||||
'Houston',
|
||||
'Irwin',
|
||||
'Jackson',
|
||||
'Jasper',
|
||||
'Jeff Davis',
|
||||
'Jefferson',
|
||||
'Jenkins',
|
||||
'Johnson',
|
||||
'Jones',
|
||||
'Lamar',
|
||||
'Lanier',
|
||||
'Laurens',
|
||||
'Lee',
|
||||
'Liberty',
|
||||
'Lincoln',
|
||||
'Long',
|
||||
'Lowndes',
|
||||
'Lumpkin',
|
||||
'Macon',
|
||||
'Madison',
|
||||
'Marion',
|
||||
'McDuffie',
|
||||
'McIntosh',
|
||||
'Meriwether',
|
||||
'Miller',
|
||||
'Mitchell',
|
||||
'Monroe',
|
||||
'Montgomery',
|
||||
'Morgan',
|
||||
'Murray',
|
||||
'Muscogee',
|
||||
'Newton',
|
||||
'Oconee',
|
||||
'Oglethorpe',
|
||||
'Paulding',
|
||||
'Peach',
|
||||
'Pickens',
|
||||
'Pierce',
|
||||
'Pike',
|
||||
'Polk',
|
||||
'Pulaski',
|
||||
'Putnam',
|
||||
'Quitman',
|
||||
'Rabun',
|
||||
'Randolph',
|
||||
'Richmond',
|
||||
'Rockdale',
|
||||
'Schley',
|
||||
'Screven',
|
||||
'Seminole',
|
||||
'Spalding',
|
||||
'Stephens',
|
||||
'Stewart',
|
||||
'Sumter',
|
||||
'Talbot',
|
||||
'Taliaferro',
|
||||
'Tattnall',
|
||||
'Taylor',
|
||||
'Telfair',
|
||||
'Terrell',
|
||||
'Thomas',
|
||||
'Tift',
|
||||
'Toombs',
|
||||
'Towns',
|
||||
'Treutlen',
|
||||
'Troup',
|
||||
'Turner',
|
||||
'Twiggs',
|
||||
'Union',
|
||||
'Unknown',
|
||||
'Upson',
|
||||
'Walker',
|
||||
'Walton',
|
||||
'Ware',
|
||||
'Warren',
|
||||
'Washington',
|
||||
'Wayne',
|
||||
'Webster',
|
||||
'Wheeler',
|
||||
'White',
|
||||
'Whitfield',
|
||||
'Wilcox',
|
||||
'Wilkes',
|
||||
'Wilkinson',
|
||||
'Worth'
|
||||
]
|
||||
</script>
|
||||
@@ -1,85 +0,0 @@
|
||||
<template>
|
||||
<label>
|
||||
Counties
|
||||
<select v-model="selectedCounty">
|
||||
<option v-for="county of counties" :key="county" :value="county">{{county}}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Statistic
|
||||
<select v-model="selectedStat">
|
||||
<option v-for="(func, stat) of statistics" :key="stat" :value="stat">{{stat}}</option>
|
||||
</select>
|
||||
</label>
|
||||
<br>
|
||||
<label>
|
||||
Start
|
||||
<input type="date" v-model="selectedStartDate"/>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
End
|
||||
<input type="date" v-model="selectedEndDate"/>
|
||||
</label>
|
||||
<br>
|
||||
<JSCharting v-if="data.length" :options="chartOptions"></JSCharting>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import Papa from 'papaparse'
|
||||
|
||||
let data = ref([])
|
||||
let selectedCounty = ref('Georgia')
|
||||
let selectedStat = ref('Positive PCR Tests')
|
||||
|
||||
let selectedStartDate = ref('2021-01-01')
|
||||
let selectedEndDate = ref('2021-12-31')
|
||||
|
||||
const counties = computed(() => {
|
||||
return Array.from(new Set(data.value.map(r => r.county)))
|
||||
})
|
||||
|
||||
const statistics = {
|
||||
'PCR Tests Performed': r => r['ALL PCR tests performed'],
|
||||
'Positive PCR Tests': r => r['All PCR positive tests'],
|
||||
'PCR+Antigen Tests Performed': r => parseInt(r['ALL PCR tests performed']) + parseInt(r['Antigen Tests Performed']),
|
||||
'Antigen Tests Performed': r => r['Antigen Tests Performed'],
|
||||
'Positive Antigen Tests': r => r['Antigen Positive Tests'],
|
||||
'Positive PCR & Antigen Tests': r => parseInt(r['All PCR positive tests']) + parseInt(r['Antigen Positive Tests']),
|
||||
'7-day Percent Positive': r => r['7 day percent positive'],
|
||||
'14-day Percent Positive': r => r['14 day percent positive'],
|
||||
}
|
||||
|
||||
|
||||
const colors = ['#f5f3ff','#ede9fe','#ddd6fe','#c4b5fd','#a78bfa','#8b5cf6','#7c3aed','#6d28d9','#5b21b6','#4c1d95']
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
type: 'calendar solid',
|
||||
palette: { colors },
|
||||
data: data.value
|
||||
.filter(r => {
|
||||
return r.county == selectedCounty.value
|
||||
&& r.report_date >= selectedStartDate.value
|
||||
&& r.report_date <= selectedEndDate.value
|
||||
})
|
||||
.map(r => ([
|
||||
`${r.report_date} 12:00:00`,
|
||||
+statistics[selectedStat.value](r)
|
||||
]))
|
||||
}
|
||||
})
|
||||
|
||||
async function getData() {
|
||||
const csv = await fetch('/data/2021-12-28/pcr_antigen.csv').then(res => res.text())
|
||||
return Papa.parse(csv, {
|
||||
header: true
|
||||
}).data
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
data.value = await getData()
|
||||
})
|
||||
</script>
|
||||
28
src/components/charts/TestingTrend.vue
Normal file
28
src/components/charts/TestingTrend.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<JSCharting v-if="data" :options="chartOptions"></JSCharting>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, inject } from 'vue'
|
||||
import { colors, col } from './util.js'
|
||||
|
||||
const parameters = inject('parameters')
|
||||
const data = inject('data')
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
if (!data.value) return
|
||||
|
||||
return {
|
||||
type: 'calendar solid',
|
||||
palette: { colors },
|
||||
data: data.value.rows
|
||||
.filter(r => {
|
||||
return col(data, r, 'report_date') >= parameters.start && col(data, r, 'report_date') <= parameters.end
|
||||
})
|
||||
.map(r => ([
|
||||
`${col(data, r, 'report_date')} 12:00:00`,
|
||||
col(data, r, parameters.column)
|
||||
]))
|
||||
}
|
||||
})
|
||||
</script>
|
||||
7
src/components/charts/util.js
Normal file
7
src/components/charts/util.js
Normal file
@@ -0,0 +1,7 @@
|
||||
export const colors = ['#f5f3ff','#ede9fe','#ddd6fe','#c4b5fd','#a78bfa','#8b5cf6','#7c3aed','#6d28d9','#5b21b6','#4c1d95']
|
||||
|
||||
export function col(data, row, column) {
|
||||
const index = data.value.headers.indexOf(column)
|
||||
if (index === -1) return null
|
||||
return row[index]
|
||||
}
|
||||
Reference in New Issue
Block a user