Только что запустил (05/03/2020 в 2 часа ночи): я создал веб-приложение, которое помогает ответить на вопрос «Насколько хорошо ваш регион справляется с Covid-19»? В то время как уже есть много отличных мониторинга, я просто хотел что -то гораздо проще: две диаграммы, и все. Тенденции случаев и смертей, которые могут быть отфильтрованы государством и дальше по региону. Я тоже хотел Просто данные. Никаких мнений, нет рекламы, нет раздувания, никаких видео-видео на стороне. Просто данные. Неизменная, беспристрастная. Я знаю, что люди способны сформировать свое собственное мнение.
Веб -приложение в настоящее время размещено в NetLify по адресу https://covid19-pc.netlify.app И использовать его чрезвычайно просто с двумя элементами управления: выпадающим списком для состояния и другой для региона. Удаление региона или выбор другого состояния сбрасывает диаграммы на «Уровень состояния»:
Веб -приложение использует новую функцию Fetch, выпущенную в Nuxt 2.12, а также использует пакет NPM Vue-Highcharts Чтобы установить настройку данных диаграммы из поддержки Vue Prop. Обычно с API HighCharts вам придется продолжать звонить .setData ({}) Чтобы обновить данные серии, но с Vue-Highcharts, просто предоставьте данные; setData () Звонки обрабатываются для вас.
Таким образом, для этого конкретного приложения есть два основных компонента: 1) TrendChart.vue и 2) ComboSelect.vue.
Компонент диаграммы трендов
В этом компоненте мы определяем «даты» (как время эпохи), «Trenddata» (точки данных, с которыми мы хотим работать). Тогда вычисленный Реквизит изменится при изменении этих реквизитов, причем одной важной вычисленной опорой является «чартопции», предоставленную компоненту HighCharts:
computed: {
dailyIncreases() {
return Stats.dailyIncreases(this.trendData)
},
...
chartOptions() {
return {
...
xAxis: {
type: 'datetime'
},
series: [
{
name: 'Daily Increases',
color: 'purple',
data: this.dailyIncreases.map((v, idx) => [this.dates[idx], v])
},
....
]
}
}
}
}
Таким образом, когда мы хотим использовать компонент, это очень просто:
Страницы/index.vue:
Комбинированная комбинированная компонент
Этот компонент использует преимущества компонента Datalist HTML, который позволяет привязывать входное текстовое поле к списку параметров:
Когда мы используем этот компонент, мы хотим, чтобы «SelectedItem» фактически был связанным свойством у родителя, которое его использует; то есть родитель установит его V-модели «SelectedItem». Таким образом, чтобы получить связанное поведение, нам нужно установить «значение» в качестве опоры в компоненте и сделать «SelectedItem» a вычисленный Опора с определенным геттером и сеттером. Кроме того, поскольку ввод данных Datalist должен быть связан с уникальным идентификатором, мы также должны сделать это свойство.
Внутренняя “Компоненты/Comboselect.vue”:
props: {
id: { type: String, default: () => {},
value: { type: String, default: () => '' },
items: { type: Array, default: () => [] },
placeholder: { type: String, default: () => '' }
},
computed: {
get() {
return this.value // value is a prop
},
set(val) {
if (val && this.items.includes(val)) {
// When the input changes, and it's an item in the datalist
// emit "itemSelected" event
this.$emit('itemSelected', val)
} else {
// Otherwise, just send "input" event
this.$emit('input', val)
}
}
}
Затем, на странице, которая использует компонент, его чрезвычайно прост в повторном использовании:
В приведенном выше фрагменте мы прислушиваемся к «региональному», потому что, когда он становится пустым, мы можем сбросить диаграммы обратно к представлению состояния. Пустая строка никогда не запустит событие «Избрать элементы».
Главная страница и “Прибрать”
В Nuxt 2.12 была введена новая выборка, которая позволяет выполнять извлечение либо на сервере, либо на стороне клиента, устанавливая логический «Fetchonserver». Новая выборка также раскрывает $ fetchState, который может сообщить нам «ожидающий» статус запроса Fetch, а также TimeStamp. Ожидаемый логический подход устанавливается на False, когда метод Fetch завершается (то есть, это обещания решимость).
Итак, это означает, что мы можем контролировать отображаемый текст «Извлечение данных …», как это сейчас:
(Fetching data...)
И наш сценарий будет просто:
fetch() {
const urls = [...] // Array of sources
const p = urls.map(Csv.fetch) // Array of promises to fetch the csv files
Promise.all(p).then(parse) // When all those promise resolve, parse the data
}
Веб -сайт использует LocalStorage, но только для того, чтобы запомнить ваш выпадающий список, чтобы вам не приходилось выбирать состояние и регион на странице обновления. Эта информация не отправляется мне или третьим участникам. Я не хочу эту информацию, и я не хочу писать код для этого.
Веб -сайт использует домен «.app», так как NetLify перенесла сайты на это. Это может или не может быть причиной, по которой некоторые веб -сайты могут неправильно помечать это как спам. Будьте уверены, это не так. На самом деле, весь исходный код доступен на моем GitHub Репо И я призываю людей с любыми проблемами проверить код, прежде чем перемещаться на веб -сайте. Всего за первый день у нас уже есть несколько человек, клонирующих его.
Кроме того, веб -приложение использует данные, предоставленные Университетом Джона Хопкинса, полученные из их GitHub Анкет Насколько мне известно, я считаю, что придерживаюсь их условий использования.
Оригинал: “https://dev.to/richardeschloss/covid-19-spc-statistical-process-control-charts-7b4”