Рубрики
Без рубрики

Как добавить статистику CORONAVIRUS (COVID-19) CASE к вашей панели драйверов RACTAGE MAP с GATSBY

Ранее мы проходили по созданию карты, которая показывает интерактивный взгляд на случаи Coronavirus (Covid-19) на страну. Как мы можем продлить это с какой-то статистикой, чтобы показать последние данные о последствиях на нашем мире? Примечание автора: аналогично ранее, эта приборная панель должна быть демонстрацией

Автор оригинала: FreeCodeCamp Community Member.

Ранее мы проходили по созданию карты, которая показывает интерактивный взгляд на случаи Coronavirus (Covid-19) на страну. Как мы можем продлить это с какой-то статистикой, чтобы показать последние данные о последствиях на нашем мире?

Примечание автора: аналогично ранее, эта панель инструментов предназначена для демонстрации и доказательства концепции использования данных реальных мировых данных для создания приборной панели. Хотя эти данные должны быть точными на одного API NONALCOVID, я бы порекомендовал использовать такие инструменты, как Джонс Хопкинс университетская панель инструментов Для полного и точного анализа. Оставайтесь дома и будьте в безопасности! ❤️.

  • Что мы собираемся построить?
  • Что нам нужно, прежде чем мы начнем?
  • Шаг 1: Обновите, как мы принесем наши данные и извлеките статистику
  • Шаг 2: Добавление статистики на нашу приборную панель
  • Шаг 3: Сделайте данные дружелюбным
  • Шаг 4: Добавьте последнюю обновленную дату
  • Что я могу сделать дальше?

Что мы собираемся построить?

Мы собираемся расширить наши Оригинальная карта Demo С какой основной статистикой мы можем получить из Novelcovid API Отказ Чтобы получить идею, вот Моя демонстрация Я основываю это.

Пока вам не обязаны завершены Часть 1 Чтобы применить эти концепции, это определенно помогает, и он позволяет вам настроить карту для вашей приборной панели. Если вы хотите начать там, которые я рекомендую, проверить Как создать Coronavirus (Covid-19) приложение для приборной панели и карте с GATSBY и Lastlet первый.

WOAH, картографическое приложение?

Ага. Если вы не играли с картами раньше, не обескуражены! Это не так плохо, как вы, наверное думаете. Если вы предпочитаете начать с отображения оснований, вы можете прочитать больше о том, как сначала работает сопоставление.

Что нам нужно, прежде чем мы начнем?

Для этого пошаговое пошаговое в некоторой форме вам понадобилось приложение React. Я буду работать с приборной панелью, которую мы ранее построили в моем последнем прохождении, который включает в себя Карта случаев коронавируса (COVID-19) на страну Отказ

Я рекомендую начать с предыдущего учебника, но если вы хотите пропустить карту и начать свежим, самый простой способ, вероятно, использовать Создать ract app , GATSBY или Next.js Отказ

Шаг 1: Обновите, как мы принесем наши данные и извлеките статистику

Чтобы начать работу с нашей статистической приборной панелью, мы собираемся сделать небольшую подготовку, изменив, как мы выбираем данные. Гол здесь, мы собираемся обернуть логику нашей просьбы, чтобы мы могли использовать его как для данных нашей страны, так и для наших новых данных статистических данных.

Создание нового реагистрационного крюка для получения данных

Дайвинг, первый, который мы сделаем, это создать новый Реактивный крюк Это будет служить как мы полученные данные. Чтобы начать, создайте новый файл в каталоге крючков под названием Usetracker.js и добавить линию внутри Крючки/index.js Экспортировать это:

// New file src/hooks/useTracker.js
// This will be empty for now
// Inside hooks/index.js
export { default as useTracker } from './useTracker';

Внутри нашего Usetracker.js Файл, мы собираемся настроить нашу логику запроса. Это длинный файл, так что убедитесь, что вы копируете и вставляете всю вещь, прежде чем пройти через то, что он делает:

import { useEffect, useState } from 'react';
import axios from 'axios';

const API_HOST = 'https://corona.lmao.ninja/v2';

const ENDPOINTS = [
  {
    id: 'all',
    path: '/all',
    isDefault: true
  },
  {
    id: 'countries',
    path: '/countries'
  }
]

const defaultState = {
  data: null,
  state: 'ready'
}

const useTracker = ({ api = 'all' }) => {

  const [tracker = {}, updateTracker] = useState(defaultState)

  async function fetchTracker() {
    let route = ENDPOINTS.find(({ id } = {}) => id === api);

    if ( !route ) {
      route = ENDPOINTS.find(({ isDefault } = {}) => !!isDefault);
    }

    let response;

    try {
      updateTracker((prev) => {
        return {
          ...prev,
          state: 'loading'
        }
      });
      response = await axios.get(`${API_HOST}${route.path}`);
    } catch(e) {
      updateTracker((prev) => {
        return {
          ...prev,
          state: 'error',
          error: e
        }
      });
      return;
    }

    const { data } = response;

    updateTracker((prev) => {
      return {
        ...prev,
        state: 'ready',
        data
      }
    });

  }

  useEffect(() => {
    fetchTracker()
  }, [api])

  return {
    fetchTracker,
    ...tracker
  }
};

export default useTracker;

Начиная с вершины:

  • Мы импортируем наши зависимости: мы будем использовать Reacts Useffect и Уместите Крючки для управления нашими запросами
  • Мы определяем постоянные по умолчанию: у нас есть конечная точка базового API для наших данных, список доступных конечных точек, которые мы используем, и объект состояния, который будет хранить наши данные
  • Мы определяем нашу Usetracker Крюк: наш крючок включает в себя один аргумент API это позволит нам указать, какую конечную точку мы будем использовать, чтобы сделать наш запрос
  • Мы устанавливаем экземпляр состояния: мы захочем отслеживать наши привлеченные данные, поэтому мы создаем трекер Экземпляр государства, который мы сможем обновить
  • Мы создали асинхронные fetchtracker Функция: мы будем использовать это, чтобы сделать наш фактический запрос
  • Внутри нашей функции: мы сначала найдите маршрут API и создаете наш URL-адрес, обновите наш экземпляр состояния в состояние «Загрузка», попробуйте сделать наш запрос, ловить любые ошибки, если есть какие-либо, и, наконец, если запрос успешен, мы обновляем наше государство с этими данными
  • Мы запускаем нашу функцию: используя Useffect Крюк, мы запускаем наши fetchtracker Функция, чтобы сделать запрос. У нас есть только одна зависимость от API Отказ Это означает, что функция будет огонь только в первый раз и в любое время API значение, которое мы проходим в изменениях. Мы не будем меняться этой ценности, но в других случаях может быть полезно, если вы динамически меняете API
  • Мы возвращаем наш трекер: возвращенный объект включает в себя оба наших трекер данные, а также наше fetchtracker функция, которую мы могли бы использовать, чтобы выявить данные, если бы мы хотели бы

И со всем этим у нас есть новый крючок, который принесет данные из новинковидного API.

Использование нашего нового крючка трекера

Использовать этот крючок, давайте перепрыгнум на SRC/Pages/index.js Удалите наши Axios Импорт, если он там, а вместо этого импортируют наш крючок:

import { useTracker } from 'hooks';

С нашим крюком, давайте заменим наш оригинальный запрос данных страны. Во-первых, добавьте следующее на вершину Indexpage составная часть:

const { data: countries = [] } = useTracker({
  api: 'countries'
});

const hasCountries = Array.isArray(countries) && countries.length > 0;

Это позволит нам получить данные нашей страны и сообщить, если у нас есть какие-либо результаты. Далее давайте заменим наш оригинальный запрос.

Внутри нашего Mapeffect Функция, давайте удалим Axios Запрос в дополнение к ответу, разрушенным объектом данных и Хашата постоянный.

Тогда замените Хашата с Hassountries :

if ( !hasCountries ) return;

И заменить данные с страны В Геойсон Объект, где мы рассмотрим наши функции:

features: countries.map((country = {}) => {

На данный момент, если вы ударите сохраняю и обновитесь, вы не должны заметить никаких различий к тому, что у вас ранее.

Добавьте запрос на нашу статистику

Теперь, когда мы используем наши Usetracker Крюк для получения данных нашей страны, давайте также будем использовать это, чтобы получить нашу статус.

Прямо рядом с тем, где мы создали наши Usetracker Крюк до того, как добавим еще один запрос:

const { data: stats = {} } = useTracker({
  api: 'all'
});

И если мы добавим console.log Заявление в том, чтобы увидеть, что внутри Статистика :

console.log('stats', stats);

Мы должны увидеть наш Статистика Объект данных вышла в систему!

Следуйте вместе с Commit!

Шаг 2: Добавление статистики на нашу приборную панель

Теперь, когда у нас есть наши данные, доступные для использования, давайте использовать его!

Чтобы начать добавлять нашу статистику на приборную панель, давайте создадим структуру данных, которая позволит нам легко настроить данные, которые мы хотим использовать.

Для этого давайте сначала создадим новый массив под названием DashboardStats ниже Hassountries В верхней части компонента страницы:

const dashboardStats = [];

В этом массиве давайте добавим некоторые новые объекты, указывающие наши данные, которые мы тянуемся от Статистика объект, который мы просили. Начать, давайте попробуем добавить:

const dashboardStats = [
  {
    primary: {
      label: 'Total Cases',
      value: stats?.cases
    },
    secondary: {
      label: 'Per 1 Million',
      value: stats?.casesPerOneMillion
    }
  },
  {
    primary: {
      label: 'Total Deaths',
      value: stats?.deaths
    },
    secondary: {
      label: 'Per 1 Million',
      value: stats?.deathsPerOneMillion
    }
  },
  {
    primary: {
      label: 'Total Tests',
      value: stats?.tests
    },
    secondary: {
      label: 'Per 1 Million',
      value: stats?.testsPerOneMillion
    }
  }
]

Причина, по которой мы разделяем это в Первичный и вторичный Ключи, мы собираемся использовать это для дифференцировки между логически подобными статистиками, которые мы хотим стиль немного по-другому.

Примечание: если вы не знакомы с ?. Синтаксис, это называется Дополнительное цепочка Отказ Это позволяет нам цеплять наши свойства, не беспокоясь о том, если объекты существуют. Если статистика undefined, он просто вернется неопределенным вместо того, чтобы бросить ошибку.

С помощью данных нашей статистики давайте добавим трекер на нашу карту. Давайте удалим наш текущий <Карта> Компонент и включить его вложенный внутри нашего трекера DIV в следующем:


  
  

    
    
      { dashboardStats.map(({ primary = {}, secondary = {} }, i) => {
        return (
          
  • 
            { primary.value && (
              
    
                { primary.value }
                { primary.label }
              
    
            )}
            { secondary.value && (
              
    
                { secondary.value }
                { secondary.label }
              
    
            )}
          
    • 
        );
      })}

Этот код должен быть сразу после <Шлем> компонент, если вы следуете вдоль.

Объяснить, что мы делаем:

  • Мы создаем «трекер», который организует нашу статистику
  • Мы двигаемся нашим <Карта Компонент внутри этого трекера
  • Мы создаем отдельный раздел под названием «Tracker-Stats»
  • Внутри этого мы создаем неупорядоченный список ( ul )
  • Внутри нашего списка мы петлю через всю нашу статистику внутри DashboardStats.
  • Для каждой статистики мы создаем новый элемент списка ( li ) и включают 2 необязательных абзаца, которые включают в себя наши данные первичной статистики и наши данные о вторичных статинах

Как только мы перезагрузим нашу страницу, мы теперь должны увидеть несколько статистик:

Теперь, когда у нас есть наша статистика на нашей странице, давайте заставь их выглядеть как они в приборной панели.

Давайте создадим новый файл под названием _tracker.scss внутри нашего SRC/Активы/Стильисты/Компоненты каталог. Как только этот файл создан, дополнительно добавьте его в SRC/Assets/styleshe Листы/Компоненты/__ Компоненты .scsss файл:

@import "tracker";

С нашим новым файлом стиля компонентов готов к работе, давайте добавим некоторые стили в _tracker.scss :

.tracker-stats {

  color: white;
  background-color: $blue-grey-900;
  border-top: solid 1px darken($blue-grey-900, 5);

  ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    list-style: none;
    padding: 0;
    margin: 0;
  }

}

.tracker-stat {

  font-size: 2em;
  text-align: center;
  padding: .5em;
  border-right: solid 1px darken($blue-grey-900, 5);
  border-bottom: solid 1px darken($blue-grey-900, 5);

  strong {
    font-weight: normal;
    color: $blue-grey-300;
  }

}

.tracker-stat-primary {

  margin: 0;

  strong {
    display: block;
    font-size: .5em;
  }

}

.tracker-stat-secondary {

  font-size: .5em;
  margin: .8em 0 0;

  strong {
    font-size: .8em;
    margin-left: .4em;
  }

}

Выше – мы добавляем цвета и организационные эффекты, такие как использование CSS Grid , чтобы наши данные были организованы легко прочитать путь и хорошо выглядеть! Мы также используем некоторые ранее существующие цвета переменных, которые используются в проекте, чтобы сохранить соответствующий цвет.

Как только вы сохраните эти стили и перезагрузите страницу, она должна выглядеть намного лучше:

Отсюда, не стесняйтесь добавлять больше статистики или настроить их по своему вкусу. В демо-созданном я создал, я добавил статистику для активных случаев, критических случаев и восстановленных случаев. Если вы хотите сделать то же самое, вы можете Проверьте фиксацию Отказ

Следуйте вместе с Commit!

Шаг 3: Сделайте данные дружелюбным

Теперь остальная часть этого прохождения можно считать необязательным, но в конечном итоге мы хотим, чтобы люди могли прочитать эти статистические данные, верно? Итак, давайте сделаем номера немного более легко читать.

Во-первых, давайте откроем наш src/lib/util.js Файл и добавьте эту функцию:

/**
 * commafy
 * @description Applies appropriate commas to large numbers
 */

export function commafy(value) {
  let numberString = `${value}`;

  numberString = numberString.split('');

  numberString.reverse();

  numberString = numberString.reduce((prev, current, index) => {
    const shouldComma = (index + 1) % 3 === 0 && index + 1 < numberString.length;
    let updatedValue = `${prev}${current}`;
    if ( shouldComma ) {
      updatedValue = `${updatedValue},`;
    }
    return updatedValue;
  }, '');

  numberString = numberString.split('');
  numberString.reverse()
  numberString = numberString.join('');

  return numberString;
}

Эта функция возьмет номер и превращает его в строку запятыми. Пройти через то, что это делает:

  • Принимает значение в качестве аргумента. Для нашего использования это значение, скорее всего, будет числом.
  • Это преобразует значение в строку. Мы будем использовать это для работы с добавлением запятых на наш номер.
  • Мы разделяем эту строку в массив и обратимся от него. Мы хотим обратить вспять, потому что это облегчает добавление наших запятых в зависимости от индекса.
  • Мы используем JavaScript Уменьшить Функция, чтобы воссоздать нашу номерную строку. После каждого 3 числа мы хотим добавить запятую.
  • Как только у нас будет новая ценность с запятыми, мы хотим переоснатить его. Таким образом, мы разделили его снова, обратимся к массиву персонажей и повторно присоединяйтесь к нему, что мы возвращаем

И теперь, когда у нас есть наш запястье Функция, давайте использовать ее. Вернуться внутрь SRC/Pages/index.js Давайте импомнем нашу функцию в верхней части страницы:

import { commafy } from 'lib/util';

Тогда в нашем DashboardStats Массив, давайте заменим каждое значение количества с тройным выражением и функцией, которая преобразует наше количество, если он доступен:

value: stats ? commafy(stats?.cases) : '-'

Эта линия проверяет, если Статистика существуют. Если это так, мы запястье случаи значение. Если это не существует, мы возвращаем - показать, что это недоступно.

Как только мы повторим этот процесс для всех наших чисел, мы можем сохранить, перезагрузить страницу и увидеть наши человеческие числа!

Следуйте вместе с Commit!

Шаг 4: Добавьте последнюю обновленную дату

Наконец, мы хотим убедиться, что люди остаются в курсе и понимать в последний раз, когда эти данные были обновлены. К счастью, наше API обеспечивает последнюю обновленную дату для нас, так что давайте использовать его!

Внизу нашего «трекера» Div под Tracker-Stats Добавим следующее:


  

    Last Updated: { stats?.updated }

Это создает новый раздел, где мы просто включаем Обновлено Недвижимость от нашей статистики. И если мы сохраним и перезагрузим страницу, мы можем увидеть последнюю обновленную дату!

Но как мы могли бы даже понять, что такое число, если вы не выполняете компьютер в блоге? Итак, давайте изменим его в читаемый формат человека, как мы сделали с нашими числами.

Внутри нашего src/lib/util.js Файл, давайте добавим другую функцию:

/**
 * friendlyDate
 * @description Takes in a date value and returns a friendly version
 */

export function friendlyDate(value) {
  const date = new Date(value);
  return new Intl.DateTimeFormat('en', {
    year: 'numeric',
    month: 'short',
    day: '2-digit',
    hour: 'numeric',
    minute: 'numeric'
  }).format(date);
}

Эта функция создает новую Дата Объект, затем использует JavaScript Международный DateTimeFormat API Чтобы преобразовать его в дружественный читаемый формат!

Как только это сохранено, давайте импортируем его рядом с нашим запястье функция в верхней части SRC/Pages/index.js :

import { commafy, friendlyDate } from 'lib/util';

Тогда мы можем обновить наш код, похожий на, как мы обновили наши номера:

Last Updated: { stats ? friendlyDate(stats?.updated) : '-' }

И если мы сохраним и перезагрузимся, мы видим его читабельным способом!

Наконец, для нашего «последнего обновления» следует выглядеть так, как будто он подходит с остальной панелью приборной панели, поэтому давайте добавим еще несколько стилей. Внутри нашего _tracker.scss Файл мы работали с ранее:

.tracker-last-updated {

  color: white;
  background-color: $blue-grey-900;
  padding: .8em 0;

  p {
    color: $blue-grey-300;
    font-size: .8em;
    text-align: center;
    margin: 0;
  }

}

И как только мы нажмемся сохранить и обновить браузер, у нас есть статистика приборной панели с последним обновленным временем! ?

Следуйте вместе с Commit!

Что я могу сделать дальше?

Сделайте маркер подсказки для использования человеческими дружелюбными

Теперь, когда у нас есть наш удобный запястье и дружелюбныйдат Функции, мы можем повторно использовать эти функции, чтобы очистить данные в наших страновых маркерах.

Используйте функцию FetchTracker для опроса для обновлений

Внутри Usetracker Крюк мы создали, мы экспортировали функцию под названием fetchtracker Отказ Это позволяет начать запрос на API для получения новых данных. Чтобы наша карта остается текущей, даже когда кто-то не обновляет страницу, мы можем создать Таймер В JavaScript регулярно вызывает эту функцию для обновления нашей панели инструментов данных.

Очистите слои карты перед повторным добавлением новых

Одна вещь, которую мы в настоящее время не делаем, это уборка старинных слоев, прежде чем добавить новый. То, как карта настроена, она просто продолжает слоиваться их сверху. Что мы можем сделать, это прежде, чем мы добавим все наши новые слои, мы сможем очистить старые. Проверьте этот коммит для начала!

Хотите узнать больше о картах?

Вы можете проверить несколько моих других ресурсов, чтобы начать:

Читайте ещё по теме: