使用Cube.js和VueJS创建Covid-19仪表板

使用Cube.js和VueJS创建Covid-19仪表板 (Creating a Covid-19 Dashboard using Cube.js and VueJS)

VueJS+CubeJS

VueJS + CubeJS

Cube.js is an open-source analytics framework that allows the creation of a dashboard with high-performance data. Cube.js is open to contribution from other developers and a guide to how you can contribute can be found here.

Cube.js是一个开放源代码分析框架，允许使用高性能数据创建仪表板。 Cube.js对其他开发人员的贡献开放，您可以在此处找到有关如何贡献的指南。

To use Cube.js, you will need to have it installed locally on your PC and then set up the backend to allow interaction with the front end.

要使用Cube.js，您需要将其本地安装在PC上，然后设置后端以允许与前端进行交互。

安装和设置Cube.js CLI (Installation and Setting up Cube.js CLI)

setup_guy

setup_guy

Cube.js can be installed either via NPM or Yarn:

可以通过NPM或Yarn安装Cube.js：

NPM

NPM

Yarn

纱

For some, you might want to install as root using sudo

对于某些人，您可能想使用sudo以root身份安装

Once you have the CLI installed the next step is to connect Cube.js to a database type, Cube.js supports a range of database type and deployment options but for the tutorial, I will be using Postgres database and deploying to Heroku. You can find the list of database supported here.

一旦安装了CLI，下一步就是将Cube.js连接到数据库类型，Cube.js支持一系列数据库类型和部署选项，但是对于本教程，我将使用Postgres数据库并将其部署到Heroku。 您可以在此处找到支持的数据库列表。

Creating a new Cube.js application is as simple as running this command using the Cube.js CLI that was installed earlier:

创建一个新的Cube.js应用程序就像使用先前安装的Cube.js CLI运行此命令一样简单：

You should also get an output like the one below

您还应该获得类似以下的输出

create_cube.js app

create_cube.js应用

After creating the application you will need to connect it your local dB (As at writing this tutorial the SQL file used is not online). The file structure will look like this

创建应用程序后，您需要将其连接到您本地的dB(在编写本教程时，所使用SQL文件未在线)。 文件结构如下所示

├── node_modules
├── schema
│   └── Orders.js
├── index.js
├── .env
├── package.json
└── package-lock.json

Then .env file is where your credentials for database connection will be done, by default it comes with placeholders which will let you know what information is needed and also an API Secret, to learn more about database connection you can use this guide.

然后，将使用.env文件完成数据库连接的凭据，默认情况下，它带有占位符，可让您知道需要哪些信息以及API机密，以了解有关数据库连接的更多信息，您可以使用本指南 。

The .env file has a structure like this:

.env文件的结构如下：

CUBEJS_DB_HOST=<YOUR_DB_HOST_HERE>
CUBEJS_DB_NAME=<YOUR_DB_NAME_HERE>
CUBEJS_DB_USER=<YOUR_DB_USER_HERE>
CUBEJS_DB_PASS=<YOUR_DB_PASS_HERE>
CUBEJS_WEB_SOCKETS=true
CUBEJS_DB_TYPE=postgres
CUBEJS_API_SECRET=secret

The next step is to define our data schema, data schema is what Cube.js use to generate and execute SQL and Cube.js makes this process in which you can generate it using the developer playground by simply starting dev server from the project directory if you’ve not changed directory do so by using the command below and also start the dev server as well:

下一步是定义我们的数据模式，数据模式是Cube.js用于生成和执行SQL的内容，而Cube.js进行此过程，您可以使用开发人员游乐场通过简单地从项目目录启动dev服务器来生成它。您尚未使用以下命令更改目录，还可以启动开发服务器：

在前进之前 (Before moving forward)

Before we move forward from here let us set up the data that will be stored in our database. From earlier I said we will be using Heroku Postgres. Setting up Heroku Postgres is quite easy, I find this link very useful on setting it up.

在从这里继续前进之前，让我们设置将要存储在数据库中的数据。 从前我说过，我们将使用Heroku Postgres 。 设置Heroku Postgres非常容易，我发现此链接对于设置它非常有用。

Once Heroku has been set up we need data to be pushed to the database, the data I used was gotten from Centers for Disease Control and Prevention. I exported this data as a .csv file and then wrote some Django model to load this file into the database. The repository link to the Django model can be found here, all you have to do is just input your Heroku Postgres DB configurations in settings.py. We also need to replace the .env file with the configuration settings gotten from Heroku.

建立好Heroku之后，我们需要将数据推送到数据库中，我使用的数据是从疾病控制与预防中心获得的 。 我将此数据导出为.csv文件，然后编写了一些Django模型以将该文件加载到数据库中。 可以在这里找到Django模型的存储库链接，只需在settings.py中输入Heroku Postgres DB配置即可。 我们还需要用从Heroku获得的配置设置替换.env文件。

Once this is configured you can go ahead and restart Cube.js development server and then navigate to http://localhost:4000 in your web browser so as to have access to the playground. One of the functionalities of this framework is that it can generate a Cube.js schema for you, chart scaffold, query testing, debug and query builder which let you generate charts with different chart libraries, it doesn’t end there It can also create a dashboard for you based on your schema (The dashboard as of now only supports React).

配置完成后，您可以继续并重新启动Cube.js开发服务器，然后在Web浏览器中导航到http：// localhost：4000 ，以便可以访问游乐场。 该框架的功能之一是，它可以为您生成Cube.js模式，图表支架，查询测试，调试和查询生成器，使您可以使用不同的图表库生成图表，但不止于此，它还可以创建一个基于您的模式的仪表盘(目前该仪表盘仅支持React)。

When you navigate to that link you screen should look like the image below

当您导航到该链接时，屏幕应如下图所示

cube.js playground

cube.js游乐场

To create a schema, navigate to the Schema tab click on public and find your table name (For me it’s CovidTimeseries because that was what I defined in the Django model), then click on the + icon and select generate schema. If you take a look at your folder structure and look into the schema folder a new JS file will be automatically created, depending on the name of your table, mine is CovidTimeseries.js. You can play around in the playground and test things out using the inbuilt functionality of the Cube.js.

要创建模式，请导航至“模式”选项卡，在public上单击并找到您的表名(对我来说是CovidTimeseries，因为那是我在Django模型中定义的名称)，然后单击+图标并选择“生成模式”。 如果您查看文件夹结构并查看架构文件夹，则将根据表名自动创建一个新的JS文件，我的文件是CovidTimeseries.js。 您可以在操场上玩耍，并使用Cube.js的内置功能对其进行测试。

将后端代码部署到Heroku (Deploy Backend Code to Heroku)

Lastly, what we will be doing with the Backend Code is to deploy the code to Heroku. Navigate to your Heroku Dashboard on your browser and still using the app name you used to create Heroku Postgres resource, let’s set up Heroku locally from our terminal using the command below:

最后，我们将使用后端代码进行的工作是将代码部署到Heroku。 在浏览器上导航到您的Heroku仪表板，并仍然使用您用于创建Heroku Postgres资源的应用名称，让我们使用以下命令从终端在本地设置Heroku：

You can find the full documentation on how to deploy Cube.js using Heroku here.

您可以在此处找到有关如何使用Heroku部署Cube.js的完整文档。

设置应用程序的前端 (Setting Up Front End for the application)

We will be using Vue CLI to start a new project if you don’t have Vue CLI installed you can install using the following command in the terminal:

如果您没有安装Vue CLI ，我们将使用Vue CLI来启动一个新项目，您可以在终端中使用以下命令进行安装：

Once Vue CLI is installed, the next stepis to create the app I always advise creating the Vue app inside the same folder as your Cube.js folder. Also, Vue Project can also be created using the tool known Vue UI, all you just have to do is type in the command below using your terminal

安装Vue CLI后，下一步就是创建应用程序，我总是建议在与Cube.js文件夹相同的文件夹中创建Vue应用程序。 另外，也可以使用已知的Vue UI工具创建Vue Project，您所要做的就是在终端上键入以下命令

But I prefer using the Vue CLI, so accept the default configuration, some dependencies will be installed and after successful creation of the project you should have an output like this

但是我更喜欢使用Vue CLI，因此接受默认配置，将安装一些依赖项，并且在成功创建项目后，您应该具有类似以下的输出

new vue app creation

新的Vue应用程序创建

You can start your application using either npm or yarn, use either of this command in your terminal:

您可以使用npm或yarn启动您的应用程序，在终端中使用以下命令之一：

npm run serve OR yarn serve

If you used the Vue UI to initialize the project, you can start the application right there in your browser.

如果使用Vue UI初始化项目，则可以在浏览器中立即启动应用程序。

Your folder structure should look similar to this:

您的文件夹结构应类似于以下内容：

├── node_modules
├── public
│   └── index.html
│   └── favicon.ico
├── src
│   └── App.vue
│   └── main.js
│   ├── components
│       └── HelloWorld.vue
├── babel.config.js
├── package.json
├── yarn.lock
└── README.md

With this your application should be running on port 8081, navigate to http://localhost:8080 in your browser and your screen should look like the image below

有了这个，您的应用程序应该在端口8081上运行，在浏览器中导航到http：// localhost：8080 ，屏幕应该如下图所示

vue dashboard

Vue仪表板

It’s worth noting that Cube.js allows you send queries and also access your data from the Cube.js Backend we created using JSON Query Format via REST API. The Cube.js client itself doesn’t provide visualization, it is designed to work with existing chart libraries from popular frameworks like Vue, React, Angular and others.

值得注意的是，Cube.js允许您发送查询，还可以从我们通过REST API使用JSON 查询格式创建的Cube.js后端访问数据。 Cube.js客户端本身不提供可视化，它旨在与流行框架(例如Vue，React，Angular 等)中的现有图表库一起使用。

The Cube.js client we will be using is the one for Vue, so you can stop the application in your terminal using CTRL+C and then using the command below to install the Cube.js Client

我们将使用的Cube.js客户端是Vue的客户端，因此您可以使用CTRL + C并随后使用以下命令在终端中停止该应用程序以安装Cube.js客户端

让我们设置应用程序仪表板！ (Let’s set up the application dashboard!)

I added some styles using Bootstrap which was install from CDN. Launch your favorite code editor and in the public/index.html file, add the bootstrap resources in the head tag of the HTML file

我使用从CDN安装的Bootstrap添加了一些样式。 启动您喜欢的代码编辑器，然后在public / index.html文件中，将引导程序资源添加到HTML文件的head标记中

Once that is done let’s create a structure for our application and also display some data to show using the Cube.js Vue client we installed earlier we will be setting up Cube.js instance with the backend URL and API token in src/App.vue file

完成后，让我们为应用程序创建一个结构，并显示一些数据以使用我们之前安装的Cube.js Vue客户端显示，我们将在src / App.vue中使用后端URL和API令牌设置Cube.js实例。文件

Then we will need to set up the app to use a QueryBuilder component to creating a query counting the total number in the table:

然后，我们将需要设置应用程序以使用QueryBuilder组件来创建查询，该查询计算表中的总数：

Cube.js Vue Client allows us to receive a child component called resultSet which is an object containing data obtained from the query. I created a new component called Chart.vue in components/Chart.vue and you can add the code below:

Cube.js Vue Client允许我们接收一个名为resultSet的子组件，该子组件是一个包含从查询中获取的数据的对象。 我在components / Chart.vue中创建了一个名为Chart.vue的新组件，您可以添加以下代码：

We also need to display a loading element such that while the data is been loaded the element shows first and then a number after. In our App.vue components let’s create a tile:

我们还需要显示一个加载元素，以便在加载数据时，该元素首先显示，然后显示一个数字。 在我们的App.vue组件中，我们创建一个图块：

In the code above we are using QueryBuilder component that passes the data into the Chart component and with this, we have a counter that’s been loaded to the dashboard showing the list of total results in the table.

在上面的代码中，我们使用的是QueryBuilder组件，该组件将数据传递到Chart组件，并且有了这个组件，我们已经将一个计数器加载到仪表板上，以显示表中的总结果列表。

让我们添加一些图表 (Let’s add some Chart)

I use Laue library to create a chart, the first step is to install Laue in our application, change to your terminal and install Laue using the command below:

我使用Laue库创建图表，第一步是在我们的应用程序中安装Laue，更改为您的终端，然后使用以下命令安装Laue：

npm i laue OR yarn add laue

Laue is pretty easy to use and you can find more about getting started here. In the main.js file, we will import Laue. This gives us access to all Laue items in any component. Let’s set up a BarChart component, create a new file called BarChart.vue in the component folder and add the following code:

Laue非常易于使用，您可以在此处找到有关入门的更多信息。 在main.js文件中，我们将导入Laue。 这使我们可以访问任何组件中的所有Laue项目。 让我们设置一个BarChart组件，在component文件夹中创建一个名为BarChart.vue的新文件，并添加以下代码：

To render this newly created chart, we will be using a type prop on the Chart component we created earlier by adding this additional render:

为了渲染这个新创建的图表，我们将在前面创建的Chart组件上使用type属性，方法是添加以下其他渲染：

With this the BarChart component is finalized, the next thing we need is to add a query for the bar chart in the App.vue component using the code below:

这样，BarChart组件就完成了，接下来我们需要使用以下代码在App.vue组件中添加对条形图的查询：

And with this we have the bar chart created, The step is similar to the line chart and others.

这样就创建了条形图，该步骤与折线图及其他类似。

最后的想法 (Final thoughts)

With this little implementation we have our dashboard created, the live application can be found here and also the repository link will be listed below for both the front end code and the backend code.

通过这个小小的实现，我们创建了仪表板，可以在此处找到实时应用程序，并且还将在下面列出前端代码和后端代码的存储库链接。

Here is the final snapshot of the application

这是应用程序的最终快照

app-dashoard

应用仪表板

Cube.js is a powerful framework, in that it combines the knowledge of analytics, database creation and chart to give you visualization agnostic front-end SDKs and API backed by analytical server infrastructure.

Cube.js是一个功能强大的框架，它结合了分析，数据库创建和图表的知识，为您提供了可视化不可知的前端SDK和由分析服务器基础结构支持的API。

Note: If you have any comment or feedback, you can send it to the Slack Community.

注意：如果您有任何意见或反馈，可以将其发送到 Slack社区。

Thank you for reading the tutorial and I hope you find it useful.

感谢您阅读本教程，希望对您有所帮助。

Repo link

回购链接

FrontEnd

前端

Backend

后端

Supporting links to this article

本文的支持链接

Cube.Js

立方体

Heroku Postgres

Heroku Postgres

Laue

劳埃

Bootstrap

引导程序

Vue DashBoard Tutorial

Vue DashBoard教程

翻译自: https://medium.com/analytics-vidhya/creating-a-covid-10-dashboard-using-cube-js-and-vuejs-17377dda5ef8