0717-7821348
关于我们

双色球走势图爱彩人

您现在的位置: 首页 > 关于我们 > 双色球走势图爱彩人


cubejsApi={cubejsApi}
title="Total Users"
query={{ measures: ["Users.count"] }}
render={resultSet => renderSingleValue(resultSet, "Users.count")}
/>



cubejsApi={cubejsApi}
title="Total Orders"
query={{ measures: ["Orders.count"] }}
render={resultSet => renderSingleValue(resultSet, "Orders.count")}
/>



cubejsApi={cubejsApi}
title="Shipped Orders"
query={{
measures: ["Orders.count"],
filters: [
{
dimension: "Orders.status",
operator: "equals",
values: ["shipped"]
}
]
}}
render={resultSet => renderSingleValue(resultSet, "Orders.count")}
/>









cubejsApi={cubejsApi}
title="New Users Over Time"
query={{
measures: ["Users.count"],
timeDimensions: [
{
dimension: "Users.createdAt",
dateRange: ["2017-01-01", "2018-12-31"],
granularity: "month"
}
]
}}
render={resultSet => (






type="monotone"
dataKey="Users.count"
name="Users"
stroke="rgb(106, 110, 229)"
fill="rgba(106, 110, 229, .16)"
/>


)}
/>



cubejsApi={cubejsApi}
title="Orders by Status Over time"
query={{
measures: ["Orders.count"],
dimensions: ["Orders.status"],
timeDimensions: [
{
dimension: "Orders.createdAt",
dateRange: ["2017-01-01", "2018-12-31"],
granularity: "month"
}
]
}}
render={resultSet => {
return (





stackId="a"
dataKey="shipped, Orders.count"
name="Shipped"
fill="#7DB3FF"
/>

stackId="a"
dataKey="processing, Orders.count"
name="Processing"
fill="#49457B"
/>

stackId="a"
dataKey="completed, Orders.count"
name="CoCube.js:开源仪表板结构的终极攻略mpleted"
fill="#FF7C78"
/>




);
}}
/>



)小学生作文;
}
}

export default App;

这足以构建第一个仪表板,然后能够鄙人面的 CodeSanbox 中测验一下。

Cube.js:开源仪表板结构的终极攻略
2019-07-13 22:41:39


Cube.js是一个用于构建剖析 web 应用程序的开源结构,首要用于构建内部的商业智能东西或将面向客户的剖析增加到现有的应用程序傍边。大多数情况下,构建此类应用程序的第一步是剖析仪表板。一般从“在办理面板中增加一个剖析仪表板”开端,然后就像软件开发中常常发作的那样,作业会变得愈加杂乱。

当开端运用 Cube.js 时Cube.js:开源仪表板结构的终极攻略,会想要构建一个东西,它起先很简略,但在功用、杂乱性和数据量方面很简略扩展。Cube.js 为未来的剖析体系奠定坚实的根底,无论是独立的应用程序仍是嵌入到现有的剖析体系中。

本教程能够视为“Cube.js 101”,它介绍了从数据库到可视化的第一个仪表板的根本规划过程。

终究仪表板的现场演示可在此处取得。完好的源代码在 GitHub 上。

架构

大多数现代 web 应用程序都是作为单页面应用程序构建的,前端与后端别离。遵从微服务架构,后端一般也会分红多个服务。

一般,Cube.jsCube.js:开源仪表板结构的终极攻略 的后端作为服务运转,办理与数据库的衔接,包括查询行列、缓存、预聚合等。一同为前端应用程序揭露一个 API,用于构建仪表板和其他剖析功用。


后端

剖析从数据发生并驻留在数据库中开端,假如用户现已有一个适用于应用程序的数据库,一般它能够直接用于剖析。现代盛行的数据库,如 Postgres 或 MySQL,都能够做简略的剖析作业,这儿的简略指的是行数少于 10 亿的数据量。

其他,MongoDB 也能够,不过需求增加 MongoDB Connector for BI。它答应在 MongoDB 数据之上履行 SQL 代码。这是免费的,能够从 MongoDB 网站直接下载。需求留意的是,出于功用问题的考虑,直接在出产数据库上运转剖析查询是欠好的做法。所以,即便 Cube.js 能够明显削减数据库的作业量,但仍然主张衔接到副本。

总而言之,假如运用 Postgres 或 MySQL,只需创立一个副本就能够了。假如您运用 MongoDB,请下载 MongoDB Connector for BI 并创立副本。

假如没有构建仪表板的任何数据,能够加载示例中的电子商务 Postgres 数据集。


数据库中有数据,就能够开端创立 Cube.js 的后端服务。在终端中运转以下指令:


上面的指令装置 Cube.js CLI,并创立一个新服务,装备为能够与 Postgres 数据库一同运用。

Cube.js 运用环境变量进行装备,环境变量以 CUBEJS_ 最初。要装备与数据库的衔接,需求指定数据库的类型和称号。在 Cube.js 项目文件夹中,替换.env 的以下内容:


Cube.js 数据 Schema

下一步是创立一个Cube.js 数据 Schema。Cube.js 运用数据 Schema 生成 SQL 代码,该代码将在数据库中履行。数据 Schema 不是 SQL 的替代品,它旨在使 SQL 可重用并赋予其结构,一同保存其一切功用。数据 Schema 的根本元素是 measures 和 dimensions。

,

Measure 被称为定量数据,例如单位出售数、仅有访问量、赢利等。

Dimension 被称为分类数据,例如状况、性别、产品称号或时刻单位(例如,日、周、月)。

一般,形式文件坐落 schema 文件夹中。以下是架构的示例,可用于描绘用户的数据。


现在,经过上述 Schema,能够向 Cube.js 后端发送有关用户数据的查询。Cube.js 查询是纯 JavaScript 目标。一般情况下,它有一个或多个 measures、dimensions 和 timeDimensions。

假如要回答“用户在哪里?”这个问题,能够将以下查询发送到 Cube.js:


Cube.js 将依据 Schema 生成所需的 SQL,履行它并将成果发回。

咱们能够创立一个略微杂乱的查询,增加一个 timeDimensions,看看上一年不同城市的份额在每个月是怎么改变的。为此,需求增加 signedUp 时刻维度,按月分组,并仅包括上一年的注册。


Cube.js 还能够依据数据库的表生成简略的 Schema,并需求为仪表板生成所需的 Schema,发动一个供开发的服务器。


能够经过在http://localhost:4000翻开开发后台,检查生成的 Schema 并发送测验的查询。

前端

经过 Cube.js 的 React 客户端,能够运用 React 来构建前端和仪表板。也能够运用任何结构或只运用 vanilla JavaScript 来构建 Cube.js 的前端,这个教程将向您展现怎么在纯 JavaScript 中构建仪表板。咱们将运用 React 团队正式支撑的 Create React App 来设置一切内容,它打包了 React 应用程序的一切依靠项,能够轻松地开端运用新项目。在终端中运转以下指令:


终究一行在端口 3000 上发动服务器,并经过http://localhost:3000翻开 web 浏览器。

咱们将运用 Reactstrap 来构建咱们的 UI,它是 BootstrCube.js:开源仪表板结构的终极攻略ap 4 的 React wrapper。用 NPM 来装置 Reactstrap 和 Bootstrap。Reactstrap 不包括 Bootstrap CSS,所以需求独自装置:


导入./index.css 之前,导入 src/index.js 文件中的 Bootstrap CSS:


现在,咱们已准备好运用 Reactstrap 组件。

下一步是装置 Cube.js 客户端,这样能够从服务器和可视化库中获取数据并进行显现。在本教程中,咱们将运用 Recharts。Cube.js 是可视化不可知的,这意味着能够运用任何所需的库。咱们还将运用 moment 和 numeral 来很好地格局化日期和数字。


这样,咱们搞定了依靠联系。接下来持续创立咱们的第一个图表,用以下替换 src/App.js 的内容:

import React, { Component } from "react";
import {
BarChart,
Bar,
XAxis,
YAxis,
Tooltip,
ResponsiveContainer
} from "recharts";
import cubejs from "@cubejs-client/core";
import moment from "moment";
import { QueryRenderer } from "@cubejs-client/react";

const cubejsApi = cubejs(process.env.REACT_APP_CUBEJS_TOKEN, {
apiUrl: prCube.js:开源仪表板结构的终极攻略ocess.env.REACT_APP_API_URL
});

const dateFormatter = item => moment(item).format("MMM YY");

class App extends Cube.js:开源仪表板结构的终极攻略Component {
render() {
return (

query={{
measures: ["Orders.count"],
timeDimensions: [
{
dimension: "Orders.createdAt",
dateRange: ["2017-01-01", "2018-12-31"],
granularity: "month"
}
]
}}
cubejsApi={cubejsApi}
render={({ resultSet }) => {
if (!resultSet) {
return "Loading...";
}

return (








);
}}
/>
);
}
}

export default App;

能够鄙人面的CodeSandbox中检查此示例。


接下来,让咱们更深化地了解怎么加载数据并制作图表。

首要,咱们初始化 Cube.js API 客户端:


这儿,咱们运用 REACT_APP_CUBEJS_TOKEN 和 REACT_APP_API_URL 这两个环境变量。假如环境变量以 REACT_APP_ 最初,Create React App 会主动从.env 文件中加载。Cube.js 后端将在发动期间打印这些 API token。


运用正确的凭证创立.env 文件。


接下来,咱们运用 QueryRenderer Cube.js React Component 来加载 Orders 数据。


QueryRenderer 对 Cube.js 后端履行 API 恳求,并依据需求运用render props技能来烘托成果。咱们上面现已介绍了查询格局,想得到最新的格局,这儿是查询格局的完好参阅。

QueryRenderer 的参数 render,是几个类型的函数 ({error, resultSet, isLoading}) => React.Node。该函数的输出将由 QueryRenderer 供给。resultSet 是从查询取得的数据目标,假如未定义此目标,则表明仍在提取数据中。

resultSet 供给了多种数据操作办法,但在咱们的比如中,只需求 chartPivot 办法,它以 Recharts 预期的格局回来数据。

咱们将订单数据制作成呼应式容器内的条形图。


构建仪表板

咱们学习了怎么运用 Cube.js 和 Recharts 构建单个图表,现​​在能够开端构建整个仪表板。能够找到规划仪表板布局的一些最佳实践,一般的做法是将最重要和第一流其他目标放在顶部作为单值图表(有时称为KPI),然后列出这些目标的相关细节。

以下是终究仪表板的屏幕截图,其间 KPI 坐落顶部,下面是条形图和折线图。


首要,让咱们重构图表,并将公共代码提取到可重用的组件中。用以下的内容创立一个 src/Chart.js 文件:



接下来,让咱们运用此组件来创立仪表板。用以下内容替换 src/App.js:

仿制代码

import React, { Component } from "react";
import { Container, Row, Col } from "reactstrap";
import {
AreaChart,
Area,
XAxis,
YAxis,
Tooltip,
ResponsiveContainer,
Legend,
BarChart,
Bar
} from "recharts";
import moment from "moment";
import numeral from "numeral";
import cubejs from "@cubejs-client/core";
import Chart from "./Chart.js";

const cubejsApi = cubejs(process.env.REACT_APP_CUBEJS_TOKEN, {
apiUrl: process.env.REACT_APP_API_URL
});
const numberFormatter = item => numeral(item).format("0,0");
const dateFormatter = item => moment(item).format("MMM YY");

const renderSingleValue = (resultSet, key) => (

{numberFormatter(resultSet.chartPivot()[0][key])}


);

class App extends Component {
render() {
return (