表的图形显示
在这里，我们将说明如何以图形方式显示数据收集的结果。 项目的输出将如下所示：
我使用的是本地计算机。 如果你在服务器上，注意使用正确的 IP 地址。
首先，导入需要的三个类（注意，我们将晚些时候编辑它们）：
你可以使用 xml 并将其导入系统。
规范将创建调度类和实现模板。 如果你想详细了解此过程，可以读一读我同事 Eduard Lebedyuk 写的文章。
设置 API
注意，在此演示中我们将使用 Basic Authorization。 我们还假设 Sample_DBExpansion_Data.DBAnalysisInfo 和 Sample_DBExpansion_Data.GlobalAnalysisInfo 表中已经有数据。 如果没有，返回数据收集获取数据。
- 首先，创建一个可以让我们访问数据的端点：
填写相同的名称，除非你打算为 react 应用自行定制代码。
- 点击 Save，然后测试我们的 API。 打开 Postman，发送以下请求（确保使用正确的授权）：
输出应该类似于：
{
"data": [
{
"Name": "c:\\intersystems\\irishealth\\mgr\\training\\",
"Date": "2023-04-30 15:23:58",
"DBUsedSize": 2010,
"DBAllocSize": 2060
},
{
"Name": "c:\\intersystems\\irishealth\\mgr\\training\\",
"Date": "2023-05-01 09:01:42",
"DBUsedSize": 2010,
"DBAllocSize": 2060
},
{
"Name": "c:\\intersystems\\irishealth\\mgr\\training\\",
"Date": "2023-05-03 13:57:40",
"DBUsedSize": 150,
"DBAllocSize": 2060
}
]
}
Next let's send a GET request to http://localhost:52776/Sample/dbAnalysis/globals/all. 查看响应是否给出了global列表，其信息如下：
（注意，如果global有类名，则名称将默认为类名）
{
"Name": "someName.cls",
"UsedMB": 4.2,
"AllocatedMB": 5.7
}
现在，测试一个特定的global，例如 Errors。 Send a GET request http://localhost:52776/Sample/dbAnalysis/global/Errors. 检查输出是否类似于：
{
"Name": "ERRORS",
"UsedMB": 0.4,
"Date": "2023-04-30 15:23:58",
"AllocatedMB": 0.45
},
{
"Name": "ERRORS",
"UsedMB": 0.43,
"Date": "2023-05-01 09:01:42",
"AllocatedMB": 0.49
},
{
"Name": "ERRORS",
"UsedMB": 0.1,
"Date": "2023-05-03 13:57:40",
"AllocatedMB": 0.13
}
And finally, let's send a GET request to http://localhost:52776/Sample/dbAnalysis/globals/table/1000
这将给我们带来global的增长，我们将把它的输出导入到 react-app 的 'Tabled Data' 部分。注意，1000 只是指我们应该回溯多少天。 具体完全由你自己决定。 请随意在 src/components/TableInputBar.js 文件中自定义。 注意
<Table timeBack={1000} numGlobals={searchInput}/>. 在这里输入你希望在 react 应用上查看的天数。
响应应该是一个类似这样的对象列表：
{
"Name": "nameOfGlobal",
"ClassName": "AriTesting.DemoTableElad.cls",
"OldMB": 0.14,
"OldDate": "2023-04-30 15:23:58",
"NewMB": 0.14,
"NewDate": "2023-05-03 13:57:40",
"Change": "0"
}
所有请求都已就绪，可以创建 Web 应用了。注意，如果没有得到预期响应，那么你应该返回并解决问题，然后再继续创建依赖于这些响应的应用。
创建 Web 应用的步骤
- 首先，创建通用 react 应用。注意，你需要在本地开发计算机上安装节点（至少版本 14），但在服务器上不需要。 如果尚未安装，请前往这里。 如果你不确定是否已经安装，可以从终端运行此命令：
node --version
- 现在，安装通用 react 应用，我们将根据需要更改。 这就像运行一样简单：
npx create-react-app data-collection-graphs
如果这是你第一次执行此操作，则可能需要几分钟。 完成后，我们将得到如下文件夹：
你的通用（后续我们将定制）react 应用现在可以运行了。 查看一下：
npm start
你应该自动重定向到显示以下内容的标签页（如果没有，请转到 http://localhost:3000/）：
- 接下来，我们根据需求进行定制。 使用 ^C 从终端停止应用。 下载此仓库中的 src 文件夹，替换之前的命令自动创建的目录中的文件夹。 在 data-collection-graphs 目录中，安装 chart-js 和 react-chartjs-2，如下所示：
npm install --save chart.js
npm install --save react-chartjs-2
src/components 文件夹中有调用 API 端点来获取图表数据的 JavaScript 代码。 如果你的服务器没有在 localhost:80 上运行，那么你应该更改 BarChart.js、DBChart.js、SingleGlobalHistoryChart.js 和 TableData.js 中的 baseUrl（以及 base64 编码的基本授权，如果这是你选择使用的授权方法）。
- 使用
npm start加载页面，你应该会获得带有数据库分析的页面。
注意：你可能会看到一个空白页，打开 Web 开发者工具后会出现错误：Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:52775/Sample/dbAnalysis/globals/all. (Reason: CORS preflight response did not succeed). Status code: 404.
如果是这种情况，则将以下类方法添加到生成的 Sample.DBExpansion.Util.REST.disp.cls 中：
ClassMethod OnHandleCorsRequest(pUrl As %String) As %Status
{
//s ^CORS("OnHandleCorsRequest")="Handled"
#; Get the origin
Set tOrigin=$Get(%request.CgiEnvs("HTTP_ORIGIN"))
#; Allow requested origin
Do ..SetResponseHeaderIfEmpty("Access-Control-Allow-Origin",tOrigin)
#; Set allow credentials to be true
Do ..SetResponseHeaderIfEmpty("Access-Control-Allow-Credentials","true")
#; Allow requested headers
Set tHeaders=$Get(%request.CgiEnvs("HTTP_ACCESS_CONTROL_REQUEST_HEADERS"))
Do ..SetResponseHeaderIfEmpty("Access-Control-Allow-Headers",tHeaders)
#; Allow requested method
Set tMethod=$Get(%request.CgiEnvs("HTTP_ACCESS_CONTROL_REQUEST_METHOD"))
Do ..SetResponseHeaderIfEmpty("Access-Control-Allow-Method",tMethod)
Return $$$OK
}
由于我们在这里没有使用委派验证，请求将由 CSPSystem 用户执行。 这意味着我们必须为 CSPSystem 用户提供适合我们所做查询的角色。 在这里了解更多相关信息（或者，为 CSPSystem 用户提供从命名空间/数据库读取数据所需的角色即可。）
配置跨域资源共享 (CORS) 后，刷新页面，你应该可以看到图表开始填充，如此页顶部所示。
请随意使用代码，并根据你的组织进行改进或定制！
如果你有改进的建议，也请告诉我。
数据分析仓库位于这里。
