表的图形显示

在这里，我们将说明如何以图形方式显示数据收集的结果。 项目的输出将如下所示：

我使用的是本地计算机。 如果你在服务器上，注意使用正确的 IP 地址。

首先，导入需要的三个类（注意，我们将晚些时候编辑它们）：

你可以使用 xml 并将其导入系统。

规范将创建调度类和实现模板。 如果你想详细了解此过程，可以读一读我同事 Eduard Lebedyuk 写的文章。

设置 API

注意，在此演示中我们将使用 Basic Authorization。 我们还假设 Sample_DBExpansion_Data.DBAnalysisInfo 和 Sample_DBExpansion_Data.GlobalAnalysisInfo 表中已经有数据。 如果没有，返回数据收集获取数据。

1. 首先，创建一个可以让我们访问数据的端点：

填写相同的名称，除非你打算为 react 应用自行定制代码。

2. 点击 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 文件中自定义。 注意

响应应该是一个类似这样的对象列表：

       {
            "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 应用的步骤

1. 首先，创建通用 react 应用。注意，你需要在本地开发计算机上安装节点（至少版本 14），但在服务器上不需要。 如果尚未安装，请前往这里。 如果你不确定是否已经安装，可以从终端运行此命令：

node --version

2. 现在，安装通用 react 应用，我们将根据需要更改。 这就像运行一样简单：

npx create-react-app data-collection-graphs

3. 如果这是你第一次执行此操作，则可能需要几分钟。 完成后，我们将得到如下文件夹：

4. 你的通用（后续我们将定制）react 应用现在可以运行了。 查看一下：

npm start

你应该自动重定向到显示以下内容的标签页（如果没有，请转到 http://localhost:3000/）：

5. 接下来，我们根据需求进行定制。 使用 ^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 编码的基本授权，如果这是你选择使用的授权方法）。

6. 使用 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) 后，刷新页面，你应该可以看到图表开始填充，如此页顶部所示。

请随意使用代码，并根据你的组织进行改进或定制！

如果你有改进的建议，也请告诉我。

数据分析仓库位于这里。