本文档涉及 Neo4j Labs 旗下不受支持的 NeoDash 版本。如需使用受支持的 NeoDash 产品，请参阅 NeoDash 商业版。

添加可视化

本文档涉及 Neo4j Labs 旗下不受支持的 NeoDash 版本。如需使用受支持的 NeoDash 产品，请参阅 NeoDash 商业版。

您可以在不深入核心应用程序的前提下，为 NeoDash 添加自己的可视化。同样，向已有报告添加新自定义只需做极少的改动。

添加可视化

您可以通过三步将新图表添加到 NeoDash

确保您已经在本地安装并运行 NeoDash

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

创建一个新文件 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 查询返回的 records 列表。

以下是一个基本示例，展示如何编写一个将所有返回数据渲染为列表的组件，以供参考

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;

使您的组件可被选中。现在您已经创建了新的图表类型，需要在卡片设置窗口中声明该类型可以被用户选择。

为实现此目的，打开 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 项目。