添加可视化

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

添加可视化

您可以通过三个步骤向 NeoDash 添加新图表

  1. 确保您已安装并运行 NeoDash 的本地副本

git clone [email protected]: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 测试的更多信息，请参阅测试。

添加可视化或新自定义项后，请考虑通过创建拉取请求将其贡献到 NeoDash 项目。