Symfony UX로 COVID-19 데이터 시각화 생성
12월 초, Symfony는 Symfony를 위한 새로운 JavaScript 에코시스템인 Symfony UX를 발표하면서 기조연설을 시작했습니다.
Symfony UX is a series of tools to create a bridge between Symfony and the JavaScript ecosystem.
이니셔티브에 대한 전체 개요를 보려면 Symfony World 재생, 특히 Fabien’s keynote 및 Titouan’s talk 을 시청할 수도 있습니다.
현재 Symfony는 다음을 제공합니다5 packages.
이 튜토리얼에서는 일부 COVID-19 데이터를 UX Chart.js 라이브러리로 그래프화하여 Chart.js 패키지를 소개합니다. 이를 위해 free Covid-19 API 에서 국가별 총 사례 및 사망 수를 표시하는 선형 차트를 만듭니다.
프로젝트 생성
First of all, we need to set up and configure a project:
$ symfony new covid --full
$ cd covid/
로컬 웹 서버 실행
Start a local web server executing the command:
$ symfony server:start
웹팩 앙코르 설치
As we will use a JavaScript library, we need to manage JavaScript in Symfony using Webpack:
$ symfony composer req symfony/webpack-encore-bundle
$ yarn install
assets/
디렉토리를 살펴보면 새로운 JavaScript 디렉토리 구조를 볼 수 있습니다.controllers/
: 응용 프로그램의 자극 제어기를 포함합니다. app.js
, controllers.json
: 설치된 Symfony UX 패키지에서 제공하는 Stimulus 컨트롤러를 참조합니다. UX Chart.js 설치
Let's install our first UX package:
$ symfony composer req symfony/ux-chartjs
Symfony Flex has just added a reference to the Javascript code of UX-Chart.js in the package.json
:
{
"devDependencies": {
"@symfony/ux-chartjs": "file:vendor/symfony/ux-chartjs/Resources/assets"
},
}
Symfony Flex also added a reference to the Stimulus controller of UX-Chart.js in the assets/controllers.json
:
{
"controllers": {
"@symfony/ux-chartjs": {
"chart": {
"enabled": true,
"webpackMode": "eager"
}
}
},
"entrypoints": []
}
Because of these changes, we now need to install the new JavaScript dependencies and compile the new files:
$ yarn install
$ yarn encore dev
Now, the UX package is ready.
Covid-19 Http 클라이언트 생성
Thanks to a free Covid-19 API ( https://api.covid19api.com ), 다음 끝점을 사용하여 국가별 총 사례 및 사망 수를 가져올 수 있습니다.GET https://api.covid19api.com/total/country/$country
$country 는 https://api.covid19api.com/countries 의 슬러그여야 합니다.
Symfony는 API를 사용하기 위한 구성 요소HttpClient를 제공합니다. 요청된 URL을 기반으로 클라이언트를 자동 구성하려면 범위가 지정된 클라이언트를 추가합니다.
# config/packages/framework.yaml
framework:
http_client:
scoped_clients:
covid:
base_uri: https://api.covid19api.com
covid
클라이언트에는 covid
라는 고유한 서비스가 있습니다.날짜별로 국가 및 그룹별로 총 사례 및 사망 수를 가져올 책임이 있는
CovidHttpClient
서비스를 만듭니다.<?php
namespace App\HttpClient;
use Symfony\Contracts\HttpClient\HttpClientInterface;
/**
* Class CovidHttpClient
* @package App\Client
*/
class CovidHttpClient
{
/**
* @var HttpClientInterface
*/
private $httpClient;
/**
* CovidHttpClient constructor.
*
* @param HttpClientInterface $covid
*/
public function __construct(HttpClientInterface $covid)
{
$this->httpClient = $covid;
}
/**
* Get total number of cases and deaths by the given country.
*
* @param string $country
*
* @return array
*/
public function getTotalByCountry(string $country): array
{
$response = $this->httpClient->request('GET', "/total/country/$country");
$data = json_decode($response->getContent(), true);
$total = [];
foreach ($data as $dailyData) {
$date = (new \DateTime($dailyData['Date']))->format('Y-m-d');
$total[$date] = $dailyData;
}
return $total;
}
}
$covid
유형으로 인수 HttpClientInterface
가 있으므로 autowiring은 covid
서비스를 클래스에 주입합니다.이제 차트를 만들 준비가 되었습니다.
Covid 컨트롤러 만들기
Create the controller using the Maker bundle:
symfony console make:controller CovidController
The command creates a CovidController
class under the src/Controller/
directory and a template file to templates/covid/index.html.twig
.
In the CovidController
, implement the index()
method:
- Fetch the total number of cases and deaths by country using the
CovidHttpClient
service and group all by status; - Create a
Chart
object by using theChartBuilderInterface
builder; - Set the data (labels & datasets) to the
Chart
object; - Finally, pass the
Chart
object to the Twig templatecovid/index.html.twig
.
<?php
namespace App\Controller;
use App\HttpClient\CovidHttpClient;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\UX\Chartjs\Builder\ChartBuilderInterface;
use Symfony\UX\Chartjs\Model\Chart;
class CovidController extends AbstractController
{
/**
* @Route("/{country}", name="covid")
*/
public function index(CovidHttpClient $covidClient, ChartBuilderInterface $chartBuilder, $country = 'france'): Response
{
$total = $covidClient->getTotalByCountry($country);
$totalByStatus = [];
foreach ($total as $dailyTotal) {
$totalByStatus['confirmed'][] = $dailyTotal['Confirmed'];
$totalByStatus['deaths'][] = $dailyTotal['Deaths'];
$totalByStatus['recovered'][] = $dailyTotal['Recovered'];
$totalByStatus['active'][] = $dailyTotal['Active'];
}
$chart = $chartBuilder->createChart(Chart::TYPE_LINE);
$chart
->setData([
'labels' => array_keys($total),
'datasets' => [
[
'label' => 'Confirmed',
'backgroundColor' => 'rgb(120, 161, 187, 0.5)',
'data' => $totalByStatus['confirmed']
],
[
'label' => 'Death',
'backgroundColor' => 'rgb(219, 80, 74, 0.5)',
'data' => $totalByStatus['deaths']
],
[
'label' => 'Recovered',
'backgroundColor' => 'rgb(147, 196, 139, 0.5)',
'data' => $totalByStatus['recovered']
],
[
'label' => 'Active',
'backgroundColor' => 'rgb(252, 191, 73, 0.5)',
'data' => $totalByStatus['active']
]
]
]);
return $this->render('covid/index.html.twig', [
'chart' => $chart,
'country' => $country
]);
}
}
차트 렌더링
The last step is to update the templates/covid/index.html.twig
file:
{% extends 'base.html.twig' %}
{% block body %}
<h1>Total number of cases and deaths in {{ country|capitalize }}</h1>
{{ render_chart(chart) }}
{% endblock %}
여기 몇 가지 예가 있어요.
Reference
이 문제에 관하여(Symfony UX로 COVID-19 데이터 시각화 생성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/qferrer/creating-a-covid-19-data-visualization-with-symfony-ux-chart-js-2khj텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)