添加可视化

本文档适用于不受支持的 NeoDash 版本，它是 Neo4j Labs 的一部分。对于受支持的 NeoDash 产品用户，请参考NeoDash 商业版。

您可以扩展 NeoDash，添加自己的可视化，而无需深入核心应用程序。同样，为现有报告添加新的自定义项只需要极少的更改。

添加可视化

您可以按照以下三个步骤在 NeoDash 中添加新图表

  1. 请确保您已在本地安装并运行 NeoDash

git clone git@github.com:neo4j-labs/neodash.git
git checkout develop
yarn install
yarn run dev

  1. 创建新文件 src/charts/ABCChart.tsx。在此文件中，添加一个实现 ChartProps 接口的新对象

export interface ChartProps {
   records: Neo4jRecord[]; // Query output, Neo4j records as returned from the driver.
   selection?: Record<string, any>; // A dictionary with the selection made in the report footer.
   settings?: Record<string, any>; // A dictionary with the 'advanced settings' specified through the NeoDash interface.
   dimensions?: Number[]; // a 2D array with the dimensions of the report (likely not needed, charts automatically fill up space).
   fullscreen?: boolean; // flag indicating whether the report is rendered in a fullscreen view.
   queryCallback?: (query: string, parameters: Record<string, any>, records: Neo4jRecord[]) => null; // Optionally, a way for the report to read more data from Neo4j.
   setGlobalParameter?: (name: string, value: string) => void; // Allows a chart to update a global dashboard parameter to be used in Cypher queries for other reports.
   getGlobalParameter?: (name) => string; // Allows a chart to get a global dashboard parameter.
}

请注意，唯一强制属性是 records。它包含从用户指定的 Cypher 查询返回的记录列表。

作为参考，下面是一个基本组件示例，它将所有返回的数据渲染为列表

import React from 'react';
import { ChartProps } from './Chart';
import { renderValueByType } from '../report/ReportRecordProcessing';

const NeoListReport = (props: ChartProps) => {
   const records = props.records;
   return records.map(r => {
       return <div>{
           r["_fields"].map(value => {
               return <>{renderValueByType(value)},</>
           })}
       </div>
   })
}

export default NeoListReport;

  1. 使您的组件可选择。现在您已经创建了一个新的图表类型，需要告诉卡片设置窗口，用户可以选择它。

为此，请打开 config/ReportConfig.tsx。向 REPORT_TYPES 字典添加一个新条目

export const REPORT_TYPES = {
   ...
   "list": {
       label: "List",
       helperText: "I'm a list",
       component: NeoListReport,
       maxRecords: 10,
       settings: {}
   },
   ...
}

查看其他条目以获取每个条目可能包含的字段示例。重新启动应用程序，您应该能够选择新的图表类型。最后，可以使用 Cypress 在几分钟内为您的组件开发端到端测试。有关 Cypress 测试的更多信息，请参阅 Testing。

在添加可视化或新的自定义项后，请考虑通过创建拉取请求 (Pull Request) 为 NeoDash 项目做出贡献。

© . All rights reserved.