dha-cpg-reader

A component to render JSON serialized flowcharts in an interactive way.

Getting Started

Install

Install from npm:

• npm i dha-cpg-reader

If you plan on using this module in the pwa-starter, make sure to edit the starter's 'tailwind.config.cjs' file with the following code (to tell tailwind to scan dha-cpg-reader for tailwind classes):

module.exports = {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}', './node_modules/dha-cpg-reader/**/*.js'],
};

Usage

To use the CPG reader, import the component and pass in the JSON serialized flowchart.

import React from 'react';
import { CPGReader } from 'dha-cpg-reader';

import sampleCPG from './sampleCpg.json';

const Home = () => {
  return <CPGReader cpg={sampleCPG} />;
};

export default Home;

Type Definitions

Props

The CPG reader accepts the following props:

export interface ICPGReaderProps {
  cpg: CPG;
  spacer?: string;.
  customStyles?: ICPGReaderStyleProps;
}

The spacer prop is used in the multi list to divide each line of text. The default value is -- OR --.

The customStyles prop is used to pass in custom styles to the CPG reader. The type definition for the customStyles prop is as follows:

export interface ICPGReaderStyleProps {
  container?: ClassNameValue;
  nextButton?: ClassNameValue;
  backButton?: ClassNameValue;
}

where ClassNameValue is defined as:

type ClassNameValue = ClassNameArray | string | null | undefined | 0 | false;

see https://github.com/dcastil/tailwind-merge for more information on how we handle passing in custom styles.

CPG Interface

The CPG reader accepts a JSON serialized flowchart as a prop in the form of a CPG interface. The type definition for the flowchart is as follows:

export interface CPG {
  id: number;
  name: string;
  root: string;
  nodes: { [key: string]: Node };
  edges: Edge[];
}

As long as your JSON conforms to the CPG interface this module will have no problem rendering it.

Nodes and Edges

This Module is designed for JSON files to be structured in a graph like manner, with nodes and edges. The nodes and edges are defined as follows:

export interface Edge {
  source: string;
  target: string;
  label: string;
}

export interface Node {
  type: string;
  text: string;
  supplemental: string[];
}

The role of a node is to hold information about a specific step in the flowchart. The role of an edge is to connect two nodes together. The source and target of an edge are the ids of the nodes that the edge connects. The label of an edge is the text that is displayed on the edge, in the case of this module they are used to render buttons for navigation between each node.

There are currently four types of nodes that should be passed into type. These are:

• info: The Info node displays a string of text as well as multiple supplemental text
• list: The list node is used to display an ordered list of text
• multi: The Multi node that is used to display multiple lines of text in a single node, each supplemental text is then divided by an -- OR -- line, or the value passed into the spacer prop
• question: A question node that is used to display singular text

NPM

https://www.npmjs.com/package/dha-cpg-reader