ReGraph

https://regraph.cambridge-intelligence.com/docs
Admin
ReGraph is a library of React components and analysis functions for client-side visualization of...
Tokens:38,817
Snippets:285
Trust Score:9.9
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install Dependencies and Start Dev Server with pnpm

Source: https://regraph.cambridge-intelligence.com/docs

After creating the project, install dependencies and start the development server using pnpm.

```bash
cd my-regraph-app
pnpm install
pnpm run dev
```

--------------------------------

### Install Dependencies and Start Dev Server with npm

Source: https://regraph.cambridge-intelligence.com/docs

After creating the project, install dependencies and start the development server using npm.

```bash
cd my-regraph-app
npm install
npm run dev
```

--------------------------------

### Install Dependencies and Start Dev Server with yarn

Source: https://regraph.cambridge-intelligence.com/docs

After creating the project, install dependencies and start the development server using yarn.

```bash
cd my-regraph-app
yarn
yarn dev
```

--------------------------------

### Install Leaflet with npm

Source: https://regraph.cambridge-intelligence.com/docs

Install Leaflet for ReGraph integration using npm.

```bash
npm install leaflet@1.9.4
```

--------------------------------

### Install React Dependency with pnpm

Source: https://regraph.cambridge-intelligence.com/docs

Install React as a peer dependency for ReGraph using pnpm.

```bash
pnpm install react@^16.6.0
```

--------------------------------

### Install React Dependency with npm

Source: https://regraph.cambridge-intelligence.com/docs

Install React as a peer dependency for ReGraph using npm.

```bash
npm install react@^16.6.0
```

--------------------------------

### Install Leaflet with yarn

Source: https://regraph.cambridge-intelligence.com/docs

Install Leaflet for ReGraph integration using yarn.

```bash
yarn add leaflet@1.9.4
```

--------------------------------

### Install Leaflet with pnpm

Source: https://regraph.cambridge-intelligence.com/docs

Install Leaflet for ReGraph integration using pnpm.

```bash
pnpm install leaflet@1.9.4
```

--------------------------------

### Install React Dependency with yarn

Source: https://regraph.cambridge-intelligence.com/docs

Install React as a peer dependency for ReGraph using yarn.

```bash
yarn add react@^16.6.0
```

--------------------------------

### MCP Server Configuration Example

Source: https://regraph.cambridge-intelligence.com/docs

Example of an mcp.json configuration file showing how to add ReGraph and MapWeave MCP servers.

```json
{
   "servers": {
      "regraph": {   // our ReGraph MCP server
           "url": "https://mcp.cambridge-intelligence.com/regraph",
          "type": "http"
      },
      "mapweave": {   // our MapWeave MCP server
          "url": "https://mcp.cambridge-intelligence.com/mapweave",
          "type": "http"
      },
      / ... /
   }
}

```

--------------------------------

### Install Font Awesome Free Icons

Source: https://regraph.cambridge-intelligence.com/docs

Install the Font Awesome Free Icons package using npm, yarn, or pnpm.

```bash
npm install --save @fortawesome/fontawesome-free
```

```bash
yarn add @fortawesome/fontawesome-free
```

```bash
pnpm install --save @fortawesome/fontawesome-free
```

--------------------------------

### Example Data Collection Format

Source: https://regraph.cambridge-intelligence.com/docs

This snippet shows the expected format for data collected from user prompts and MCP server responses, used for analysis and improvement.

```json
"query": "export chart to PNG image"
```

--------------------------------

### Install Claude Code

Source: https://regraph.cambridge-intelligence.com/docs

Installs the Claude Code package globally using npm.

```bash
npm install -g @anthropic-ai/claude-code

```

--------------------------------

### Verify ReGraph Installation with pnpm

Source: https://regraph.cambridge-intelligence.com/docs

Check the installed version of ReGraph using pnpm.

```bash
pnpm list regraph

```

--------------------------------

### Install PDF export dependencies with npm

Source: https://regraph.cambridge-intelligence.com/docs

Install PDFKit and SVG-to-PDFKit for PDF export functionality using npm.

```bash
npm install pdfkit svg-to-pdfkit
```

--------------------------------

### Install PDF export dependencies with yarn

Source: https://regraph.cambridge-intelligence.com/docs

Install PDFKit and SVG-to-PDFKit for PDF export functionality using yarn.

```bash
yarn add pdfkit svg-to-pdfkit
```

--------------------------------

### Install ReGraph as Local Package with pnpm

Source: https://regraph.cambridge-intelligence.com/docs

Install the ReGraph bundle as a local package in your project using pnpm.

```bash
pnpm install file:regraph-5.11.0.tgz
```

--------------------------------

### Deep Clone Example (Correct Re-render)

Source: https://regraph.cambridge-intelligence.com/docs

Illustrates the correct way to update nested properties using `window.structuredClone` to ensure a re-render.

```javascript
const deepClone = window.structuredClone(items)
deepClone.a.color= 'red'
setItems(deepClone) // works


```

--------------------------------

### Install ReGraph using npm

Source: https://regraph.cambridge-intelligence.com/docs

Installs the ReGraph bundle as a local package using npm. Assumes the bundle file is in the current project directory.

```bash
npm install file:regraph-5.11.0.tgz

```

--------------------------------

### Install ReGraph using pnpm

Source: https://regraph.cambridge-intelligence.com/docs

Installs the ReGraph bundle as a local package using pnpm. Assumes the bundle file is in the current project directory.

```bash
pnpm install file:regraph-5.11.0.tgz

```

--------------------------------

### Verify ReGraph Installation with npm

Source: https://regraph.cambridge-intelligence.com/docs

Check the installed version of ReGraph using npm.

```bash
npm list regraph

```

--------------------------------

### Install PDF export dependencies with pnpm

Source: https://regraph.cambridge-intelligence.com/docs

Install PDFKit and SVG-to-PDFKit for PDF export functionality using pnpm.

```bash
pnpm install pdfkit svg-to-pdfkit
```

--------------------------------

### Verify ReGraph Installation with yarn

Source: https://regraph.cambridge-intelligence.com/docs

Check the installed version of ReGraph using yarn.

```bash
yarn list --pattern regraph

```

--------------------------------

### Uninstall and Install ReGraph with pnpm

Source: https://regraph.cambridge-intelligence.com/docs

Remove the old version of ReGraph and install the new bundle using pnpm.

```bash
pnpm remove regraph
pnpm install file:regraph-5.11.0.tgz

```

--------------------------------

### Install ReGraph as Local Package with npm

Source: https://regraph.cambridge-intelligence.com/docs

Install the ReGraph bundle as a local package in your project using npm.

```bash
npm install file:regraph-5.11.0.tgz
```

--------------------------------

### Install ReGraph using yarn

Source: https://regraph.cambridge-intelligence.com/docs

Installs the ReGraph bundle as a local package using yarn. Assumes the bundle file is in the current project directory.

```bash
yarn add ./regraph-5.11.0.tgz

```

--------------------------------

### Polyfill 'process' global variable

Source: https://regraph.cambridge-intelligence.com/docs

Add code to polyfill the 'process' variable if encountering 'Uncaught ReferenceError: process is not defined' after installing polyfills.

```javascript
window.process = {
  nextTick(callback, ...args) {
    window.requestAnimationFrame(() => callback(...args));
  },
};
```

--------------------------------

### Uninstall and Install ReGraph with npm

Source: https://regraph.cambridge-intelligence.com/docs

Remove the old version of ReGraph and install the new bundle using npm.

```bash
npm uninstall regraph
npm install file:regraph-5.11.0.tgz

```

--------------------------------

### Custom Grid Layout Example

Source: https://regraph.cambridge-intelligence.com/docs

Shows how to implement a custom grid layout by manually defining node positions. This approach prevents ReGraph's built-in layouts from running and allows for precise control over item placement.

```javascript
import React from 'react';

import ReactDOM from 'react-dom';
import _ from 'lodash';
import { Chart } from 'regraph';

function generateData(count = 20) {
  const items = {};
  for (let i = 0; i < count; i += 1) {
    items[i] = {
      color: '#5fe3bf',
    };
  }
  for (let i = 0; i < 30; i += 1) {
    const a = i < count ? i : _.random(0, count - 1);
    let b;
    do {
      b = _.random(0, count - 1);
    } while (a === b);
    const id = [a, b].sort().join('-');
    items[id] = {
      id1: a,
      id2: b,
      width: 4,
      color: 'rgb(4, 129, 112)',
    };
  }
  return items;
}

function isNode(item) {
  return !item.id1 && !item.id2;
}

export default function CustomLayout() {
  const data = generateData();

  // Calculate a simple grid layout by setting
  // the x/y position of each node
  const positions = {};
  let x = 0;
  let y = 0;
  let cols = 0;
  _.each(data, (item, id) => {
    if (isNode(item)) {
      cols += 1;
      positions[id] = {
        x,
        y,
      };
      if (cols % 5 === 0) {
        y += 90;
        x = 0;
      } else {
        x += 90;
      }
    }
  });

  const settings = {
    options: {
      navigation: false,
      overview: false,
      backgroundColor: 'rgb(61, 72, 82)',
    },
    onWheel: ({ preventDefault }) => {
      preventDefault();
    },
  };

  // Passing a new view object will tell ReGraph to zoom
  // to fit all items after the layout has run
  const view = {};

  return <Chart items={data} positions={positions} view={view} {...settings} />;
}

ReactDOM.render(<CustomLayout />, document.getElementById('app'));

```

--------------------------------

### Organic Layout Example

Source: https://regraph.cambridge-intelligence.com/docs

Demonstrates how to use the 'organic' layout algorithm in ReGraph. This layout is suitable for general graph visualization where connected nodes should be positioned closely.

```javascript
import React from 'react';

import ReactDOM from 'react-dom';
import _ from 'lodash';
import { Chart } from 'regraph';

function generateData(count = 20) {
  const items = {};
  for (let i = 0; i < count; i += 1) {
    items[i] = {
      color: '#5fe3bf',
    };
  }
  for (let i = 0; i < 30; i += 1) {
    const a = i < count ? i : _.random(0, count - 1);
    let b;
    do {
      b = _.random(0, count - 1);
    } while (a === b);
    const id = [a, b].sort().join('-');
    items[id] = {
      id1: a,
      id2: b,
      color: 'rgb(4, 129, 112)',
      width: 4,
    };
  }
  return items;
}

export default function SimpleLayout() {
  const data = generateData();

  const settings = {
    options: {
      navigation: false,
      overview: false,
      backgroundColor: 'rgb(61, 72, 82)',
    },
    onWheel: ({ preventDefault }) => {
      preventDefault();
    },
  };

  return (
    <Chart
      items={data}
      layout={{
        name: 'organic',
      }}
      {...settings}
    />
  );
}

ReactDOM.render(<SimpleLayout />, document.getElementById('app'));

```

--------------------------------

### Install ReGraph as Local Package with yarn

Source: https://regraph.cambridge-intelligence.com/docs

Install the ReGraph bundle as a local package in your project using yarn.

```bash
yarn add ./regraph-5.11.0.tgz
```

--------------------------------

### Regraph Annotations Beta Example

Source: https://regraph.cambridge-intelligence.com/docs

Demonstrates how to implement annotations in Regraph charts, including styled annotations with subjects and free-standing annotations. Requires Font Awesome 5 Free for icons. Ensure the font is loaded before rendering.

```javascript
import React from 'react';

import ReactDOM from 'react-dom';
import { Chart } from 'regraph';

export default function Annotations() {
  const items = {
    node1: {
      color: '#9aa5b1',
    },
    annotation1: {
      subject: 'node1',
      connectorStyle: {
        color: 'rgb(255, 82, 82)',
        lineStyle: 'dashed',
        container: 'circle',
        width: 2,
      },
      shape: {
        width: 160,
        height: 56,
      },
      color: 'rgb(254, 167, 154)',
      borderRadius: 3,
      label: [
        {
          fontIcon: {
            fontFamily: 'Font Awesome 5 Free',
            text: 'fas fa-envelope',
          },
          fontSize: 16,
          backgroundColor: 'rgb(255, 82, 82)',
          border: {
            width: 1,
            radius: 3,
          },
          padding: 6,
          position: {
            vertical: 'top',
            horizontal: 'left',
          },
          margin: {
            left: 10,
            right: 10,
            top: 16,
          },
        },
        {
          text: 'Node annotation',
          position: {
            horizontal: 35,
            vertical: 'inherit',
          },
          padding: {
            top: 22,
            left: 10,
          },
        },
      ],
    },
    annotation2: {
      subject: [],
      shape: {
        width: 230,
        height: 56,
      },
      color: 'rgb(197, 247, 233)',
      borderRadius: 3,
      label: [
        {
          fontIcon: {
            fontFamily: 'Font Awesome 5 Free',
            text: 'fas fa-exclamation-triangle',
          },
          fontSize: 16,
          backgroundColor: '#17BA99',
          border: {
            width: 1,
            radius: 3,
          },
          padding: 6,
          position: {
            vertical: 'top',
            horizontal: 'left',
          },
          margin: {
            left: 10,
            right: 10,
            top: 16,
          },
        },
        {
          text: 'Annotation without subjects',
          position: {
            horizontal: 35,
            vertical: 'inherit',
          },
          padding: {
            top: 22,
            left: 10,
          },
        },
      ],
    },
  };

  const settings = {
    options: {
      iconFontFamily: 'Font Awesome 5 Free',
      backgroundColor: 'rgb(61, 72, 82)',
      navigation: false,
      overview: false,
    },
    onWheel: ({ preventDefault }) => {
      preventDefault();
    },
  };

  return (
    <Chart
      items={items}
      annotationPositions={{
        annotation1: { angle: 90, distance: 50 },
        annotation2: { x: 100, y: -100 },
      }}
      {...settings}
    />
  );
}

const FontReadyChart = React.lazy(() =>
  document.fonts.load("24px 'Font Awesome 5 Free'").then(() => ({
    default: Annotations,
  })),
);

export function AnnotationsDemo() {
  return (
    <React.Suspense fallback="">
      <FontReadyChart />
    </React.Suspense>
  );
}

ReactDOM.render(<AnnotationsDemo />, document.getElementById('app'));

```

--------------------------------

### Combine Nodes by Multiple Properties

Source: https://regraph.cambridge-intelligence.com/docs

This example demonstrates how to combine nodes based on 'city' and 'country' properties. It sets up a ReGraph chart with specific settings and defines how nodes should be combined and styled.

```javascript
import React from 'react';

import ReactDOM from 'react-dom';
import { Chart } from 'regraph';

const settings = {
  options: {
    navigation: false,
    overview: false,
    backgroundColor: 'rgb(61, 72, 82)',
  },
  onWheel: ({ preventDefault }) => {
    preventDefault();
  },
};

const combine = {
  level: 1,
  properties: ['city', 'country'],
};

export default function Combos() {
  const styleCombo = ({ setStyle, combo }) => {
    const color = 'rgb(46, 56, 66)';
    const borderColor = 'rgb(7, 156, 131)';
    if (combo.country === 'usa' && combo.city === 'san jose') {
      setStyle({
        open: true,
        label: {
          text: '🇺🇸 San Jose',
          fontSize: 30,
          color: 'rgb(202, 209, 216)',
          backgroundColor: 'rgba(0,0,0,0)',
        },
        border: { width: 1, lineStyle: 'solid', color: borderColor },
        color,
      });
    } else if (combo.country === 'mexico' && combo.city === 'san jose') {
      setStyle({
        open: true,
        label: {
          text: '🇲🇽 San Jose',
          fontSize: 30,
          color: 'rgb(202, 209, 216)',
          backgroundColor: 'rgba(0,0,0,0)',
        },
        border: { width: 1, lineStyle: 'solid', color: borderColor },
        color,
      });
    } else if (combo.country === 'france' && combo.city === 'paris') {
      setStyle({
        open: true,
        label: {
          text: '🇫🇷 Paris',
          fontSize: 30,
          color: 'rgb(202, 209, 216)',
          backgroundColor: 'rgba(0,0,0,0)',
        },
        border: { width: 1, lineStyle: 'solid', color: borderColor },
        color,
      });
    }
  };
  const items = {
    pierre: {
      color: 'rgb(95, 227, 191)',
      label: {
        text: 'Pierre',
        color: 'rgb(46, 56, 66)',
        backgroundColor: 'rgba(0,0,0,0)',
      },
      data: {
        country: 'france',
        city: 'paris',
      },
    },
    amelie: {
      color: 'rgb(95, 227, 191)',
      label: {
        text: 'Amelie',
        color: 'rgb(46, 56, 66)',
        backgroundColor: 'rgba(0,0,0,0)',
      },
      data: {
        country: 'france',
        city: 'paris',
      },
    },
    chad: {
      color: 'rgb(95, 227, 191)',
      label: {
        text: 'Chad',
        color: 'rgb(46, 56, 66)',
        backgroundColor: 'rgba(0,0,0,0)',
      },
      data: {
        country: 'usa',
        city: 'san jose',
      },
    },
    bret: {
      color: 'rgb(95, 227, 191)',
      label: {
        text: 'Bret',
        color: 'rgb(46, 56, 66)',
        backgroundColor: 'rgba(0,0,0,0)',
      },
      data: {
        country: 'usa',
        city: 'san jose',
      },
    },
    maria: {
      color: 'rgb(95, 227, 191)',
      label: {
        text: 'Maria',
        color: 'rgb(46, 56, 66)',
        backgroundColor: 'rgba(0,0,0,0)',
      },
      data: {
        country: 'mexico',
        city: 'san jose',
      },
    },
    chad_bret: {
      id1: 'chad',
      id2: 'bret',
      width: 2,
      color: 'rgb(7, 156, 131)',
    },
    chad_pierre: {
      id1: 'chad',
      id2: 'pierre',
      width: 2,
      color: 'rgb(7, 156, 131)',
    },
    chad_amelie: {
      id1: 'chad',
      id2: 'amelie',
      width: 2,
      color: 'rgb(7, 156, 131)',
    },
    bret_amelie: {
      id1: 'bret',
      id2: 'amelie',
      width: 2,
      color: 'rgb(7, 156, 131)',
    },
    maria_amelie: {
      id1: 'maria',
      id2: 'amelie',
      width: 2,
      color: 'rgb(7, 156, 131)',
    },
  };
  return <Chart items={items} combine={combine} onCombineNodes={styleCombo} {...settings} />;
}

ReactDOM.render(<Combos />, document.getElementById('app'));

```

--------------------------------

### Shallow Clone Example (Incorrect Re-render)

Source: https://regraph.cambridge-intelligence.com/docs

Demonstrates how a shallow clone using the spread operator fails to trigger a re-render because nested objects are still references.

```javascript
const shallowClone={...items}
shallowClone.a.color='red'
setItems(shallowClone) // doesn't work


```

--------------------------------

### Stacked Histograms Time Bar Example

Source: https://regraph.cambridge-intelligence.com/docs

Demonstrates how to create stacked histograms in the time bar by defining the 'stack.by' option. This allows splitting bars based on a data property, such as 'country'. Ensure 'regraph' is imported.

```javascript
import React from 'react';

import ReactDOM from 'react-dom';
import { TimeBar } from 'regraph';

const styles = {
  backgroundColor: 'rgb(81, 95, 108)',
  style: {
    color: 'rgb(45, 205, 168)',
    hoverColor: 'rgb(7, 156, 131)',
  },
  sliders: {
    color: 'rgba(36, 44, 50, 0.5)',
    lineColor: 'rgb(81, 95, 108)',
  },
  labels: {
    fontColor: 'rgb(123, 135, 147)',
  },
  scale: {
    hoverColor: 'rgb(81, 95, 108)',
  },
};

export default function StackedTimeBar() {
  const items = {
    event1: {
      times: [
        {
          time: {
            start: Date.now() - 25000000,
            end: Date.now() + 25000000,
          },
        },
      ],
      data: {
        country: 'fr',
      },
    },
    event2: {
      times: [
        {
          time: {
            start: Date.now() - 10000000,
            end: Date.now() + 10000000,
          },
        },
      ],
      data: {
        country: 'gb',
      },
    },
  };
  const settings = {
    options: {
      ...styles,
      stack: {
        by: 'country',
        styles: {
          fr: { color: 'rgb(45, 205, 168)', hoverColor: 'rgb(7, 156, 131)' },
          gb: { color: 'rgb(247, 208, 110)', hoverColor: 'rgb(200, 153, 45)' },
        },
      },
    },
    onWheel: ({ preventDefault }) => {
      preventDefault();
    },
  };

  return <TimeBar items={items} {...settings} />;
}

ReactDOM.render(<StackedTimeBar />, document.getElementById('app'));

```

--------------------------------

### Basic React Component with ReGraph Integration

Source: https://regraph.cambridge-intelligence.com/docs

Example of a React component that fetches data, formats it for ReGraph, and renders a ReGraph chart. Ensure ReGraph source code is obfuscated before distribution.

```javascript
// Import various dependencies into the environment
import React from 'react';
import { Chart } from 'regraph';
import { fetchData, convertToReGraphFormat } from './myapp/helpers';

// Define the component
function App() {
  // Initialize app state
  const [state, setState] = React.useState({ items: {} });

  React.useEffect(() => {
    // Load data from a data source
    fetchData().then((data) => {
      const items = convertToReGraphFormat(data); // your own custom formatter

      // When data is ready, set it on the component's state
      setState({ items });
    })
  }, []);

  // Create a ReGraph chart and push data into it from state
  return <Chart items={state.items} />
}


```

--------------------------------

### Implementing Text-to-Speech for Chart Interactions

Source: https://regraph.cambridge-intelligence.com/docs

This example demonstrates how to use the Web Speech API to provide audio feedback when users interact with chart nodes or links. It hides the chart visually from screen readers using aria-hidden and provides a text summary via aria-description.

```javascript
import React from 'react';

import ReactDOM from 'react-dom';
import has from 'lodash/has';
import { Chart } from 'regraph';

function isNode(item) {
  return !has(item, 'id1');
}

if (!('speechSynthesis' in window)) {
  throw new Error('Text-to-speech not supported in this browser');
}

export default function TextToSpeech() {
  const items = {
    one: {
      color: '#17BA99',
      size: 1.5,
      label: [
        {
          text: '1',
          fontSize: 40,
          backgroundColor: 'transparent',
          color: '#fff9c4',
        },
      ],
    },
    two: {
      color: '#17BA99',
      size: 1.5,
      label: [
        {
          text: '2',
          fontSize: 40,
          backgroundColor: 'transparent',
          color: '#fff9c4',
        },
      ],
    },
    three: {
      color: '#17BA99',
      size: 1.5,
      label: [
        {
          text: '3',
          fontSize: 40,
          backgroundColor: 'transparent',
          color: '#fff9c4',
        },
      ],
    },
    'one-two': {
      id1: 'one',
      id2: 'two',
      width: 12,
      color: 'rgb(7, 156, 131)',
    },
    'two-three': {
      id1: 'two',
      id2: 'three',
      width: 12,
      color: 'rgb(7, 156, 131)',
    },
    instructions: {
      color: 'transparent',
      label: {
        text: 'Turn on the sound and click nodes and links',
        color: 'white',
        fontSize: 30,
        backgroundColor: 'transparent',
      },
    },
  };

  const onClickHandler = ({ id }) => {
    if (id) {
      const msg = new SpeechSynthesisUtterance();
      if (isNode(items[id])) {
        msg.text = `node. ${id}`;
      } else {
        msg.text = `link. ${id}`;
      }
      window.speechSynthesis.speak(msg);
    }
  };

  const dataPositions = {
    instructions: {
      x: -200,
      y: 125,
    },
    one: {
      x: -500,
      y: 225,
    },
    two: {
      x: -200,
      y: 225,
    },
    three: {
      x: 100,
      y: 225,
    },
  };

  const settings = {
    options: {
      backgroundColor: 'rgb(61, 72, 82)',
      navigation: false,
      overview: false,
    },
    onWheel: ({ preventDefault }) => {
      preventDefault();
    },
  };

  return <Chart items={items} onClick={onClickHandler} positions={dataPositions} {...settings} />;
}

ReactDOM.render(<TextToSpeech />, document.getElementById('app'));

```

--------------------------------

### Get Item Information using getItemInfo

Source: https://regraph.cambridge-intelligence.com/docs

This example shows how to retrieve information about a specific chart item using its ID via the getItemInfo instance method. This is useful for verifying item details in integration tests.

```javascript
const item = window.chart.current.getItemInfo('node1');

```

--------------------------------

### Create New React Vite App with npm

Source: https://regraph.cambridge-intelligence.com/docs

Use this command to quickly scaffold a new React project with Vite using npm.

```bash
npm create vite@latest my-regraph-app -- --template react
```

--------------------------------

### Create New React Vite App with pnpm

Source: https://regraph.cambridge-intelligence.com/docs

Use this command to quickly scaffold a new React project with Vite using pnpm.

```bash
pnpm create vite my-regraph-app --template react
```

--------------------------------

### Create New React Vite App with yarn

Source: https://regraph.cambridge-intelligence.com/docs

Use this command to quickly scaffold a new React project with Vite using yarn.

```bash
yarn create vite my-regraph-app --template react
```

--------------------------------

### Uninstall and Install ReGraph with yarn

Source: https://regraph.cambridge-intelligence.com/docs

Remove the old version of ReGraph and install the new bundle using yarn.

```bash
yarn remove regraph
yarn add ./regraph-5.11.0.tgz

```

--------------------------------

### Import and Render ReGraph Chart

Source: https://regraph.cambridge-intelligence.com/docs

Imports the Chart component from ReGraph and renders a simple chart with a single node displaying 'Hello World!'. Uses createRoot for concurrent rendering.

```javascript
import React from 'react';
import { createRoot } from 'react-dom/client'; // enables concurrent rendering
import { Chart } from 'regraph';

const items = { 
 node1: { label: { text: 'Hello World!' } }  // data in JSON where node1 is node id
};
const jsx = <Chart items={items}/>;
const container = document.getElementById('root');
const root = createRoot(container);
root.render(jsx);



```

--------------------------------

### Regraph Sub-items Example

Source: https://regraph.cambridge-intelligence.com/docs

Demonstrates the usage of halos, glyphs, and donuts as sub-items on chart nodes. This example requires React and ReactDOM for rendering.

```javascript
import React from 'react';

import ReactDOM from 'react-dom';
import { Chart } from 'regraph';

export default function SubItems() {
  const nodeColor = '#17BA99';

  const labelStyle = {
    backgroundColor: 'rgba(0, 0, 0, 0)',
    color: 'white',
  };

  const glyphStyle = {
    color: '#079C83',
    border: { color: '#8CEDD0', width: 2 },
  };

  const glyphLabelColor = 'white';

  const items = {
    node1: {
      color: nodeColor,
      label: {
        ...labelStyle,
        text: 'Halos',
      },
      halos: [
        {
          radius: 35,
          color: '#5FE3BF',
          width: 8,
        },
        {
          radius: 47,
          color: '#8CEDD0',
          width: 8,
        },
      ],
    },
    node2: {
      color: nodeColor,
      label: {
        ...labelStyle,
        text: 'Glyphs',
      },
      glyphs: [
        {
          ...glyphStyle,
          position: 'n',
          label: {
            color: glyphLabelColor,
            text: 'N',
          },
        },
        {
          ...glyphStyle,
          position: 's',
          label: {
            color: glyphLabelColor,
            text: 'S',
          },
        },
        {
          ...glyphStyle,
          position: 'e',
          label: {
            color: glyphLabelColor,
            text: 'E',
          },
        },
        {
          ...glyphStyle,
          position: 'w',
          label: {
            color: glyphLabelColor,
            text: 'W',
          },
        },
      ],
    },
    node3: {
      color: nodeColor,
      label: {
        ...labelStyle,
        text: 'Donuts',
      },
      donut: {
        border: {
          width: 2,
          color: '#3D4852',
        },
        segments: [
          {
            color: '#8BEED2',
            size: 1,
          },
          {
            color: '#8CEDD0',
            size: 1,
          },
          {
            color: '#5FE3BF',
            size: 1,
          },
        ],
      },
    },
  };

  const positions = {
    node1: { x: 0, y: -50 },
    node2: { x: -90, y: 50 },
    node3: { x: 90, y: 50 },
  };

  const settings = {
    options: {
      backgroundColor: 'rgb(61, 72, 82)',
      navigation: false,
      overview: false,
    },
    onWheel: ({ preventDefault }) => {
      preventDefault();
    },
  };

  return <Chart items={items} positions={positions} {...settings} />;
}

ReactDOM.render(<SubItems />, document.getElementById('app'));

```

--------------------------------

### Copy ReGraph Bundle to Project

Source: https://regraph.cambridge-intelligence.com/docs

Copy the downloaded ReGraph bundle into your project directory. Ensure the filename is not changed.

```bash
cd ~/path/to/project
cp ~/Downloads/regraph-5.11.0.tgz .

```

--------------------------------

### Import ReGraph export module

Source: https://regraph.cambridge-intelligence.com/docs

Import the export.js file into your project after installing PDF export dependencies.

```javascript
import 'regraph/export';
```

--------------------------------

### Styling Font Icons with Font Awesome

Source: https://regraph.cambridge-intelligence.com/docs

This example demonstrates how to use Font Awesome Free Icons within ReGraph nodes. It shows how to set the icon text, color, and size using the `fontIcon` property and `imageAlignment` options. Ensure Font Awesome CSS is imported.

```javascript
import React from 'react';

import ReactDOM from 'react-dom';
import { Chart } from 'regraph';
import '@fortawesome/fontawesome-free/css/fontawesome.css';
import '@fortawesome/fontawesome-free/css/solid.css';

export default function FontIcons() {
  const items = {
    node1: {
      color: 'rgba(0,0,0,0)',
      border: { color: 'rgb(95, 227, 191)' },
      label: { color: 'rgba(0,0,0,0)' },
      fontIcon: {
        text: 'fas fa-user',
        color: 'rgb(95, 227, 191)',
      },
    },
    node2: {
      color: 'rgba(0,0,0,0)',
      border: { color: 'rgb(247, 208, 110)' },
      label: { color: 'rgba(0,0,0,0)' },
      fontIcon: {
        text: 'fas fa-desktop',
        color: 'rgb(247, 208, 110)',
      },
    },
    node3: {
      color: 'rgba(0,0,0,0)',
      border: { color: 'rgb(241, 93, 91)' },
      label: { color: 'rgba(0,0,0,0)' },
      fontIcon: {
        text: 'fas fa-shield-virus',
        color: 'rgb(241, 93, 91)',
      },
    },
  };

  const positions = {
    node1: { x: 0, y: 0 },
    node2: { x: -90, y: 0 },
    node3: { x: 90, y: 0 },
  };

  const options = {
    iconFontFamily: 'Font Awesome 5 Free',
    imageAlignment: {
      'fas fa-user': { size: 0.9 },
      'fas fa-desktop': { size: 0.8 },
    },
    navigation: false,
    overview: false,
    backgroundColor: 'rgb(61, 72, 82)',
  };

  const events = {
    onWheel: ({ preventDefault }) => {
      preventDefault();
    },
  };

  return <Chart items={items} positions={positions} options={options} {...events} />;
}

const FontReadyChart = React.lazy(() =>
  document.fonts.load("24px 'Font Awesome 5 Free'").then(() => ({
    default: FontIcons,
  })),
);

export function Demo() {
  return (
    <React.Suspense fallback="Loading icons...">
      <FontReadyChart />
    </React.Suspense>
  );
}

ReactDOM.render(<Demo />, document.getElementById('app'));

```

--------------------------------

### Basic ReGraph Chart

Source: https://regraph.cambridge-intelligence.com/docs

Demonstrates how to create a basic ReGraph chart with two nodes and a link. Includes settings for navigation, overview, and background color. Requires React and ReactDOM.

```javascript
import React from 'react';

import ReactDOM from 'react-dom';
import { Chart } from 'regraph';

export default function BasicChart() {
  const settings = {
    options: {
      navigation: false,
      overview: false,
      backgroundColor: 'rgb(61, 72, 82)',
    },
    onWheel: ({ preventDefault }) => {
      preventDefault();
    },
  };
  const items = {
    node1: {
      color: '#5fe3bf',
    },
    node2: {
      color: '#5fe3bf',
    },
    link1: {
      id1: 'node1',
      id2: 'node2',
      color: 'rgb(4, 129, 112)',
      width: 4,
    },
  };
  return <Chart items={items} {...settings} />;
}

ReactDOM.render(<BasicChart />, document.getElementById('app'));

```

--------------------------------

### Histogram Time Bar Example

Source: https://regraph.cambridge-intelligence.com/docs

Displays a time bar with histogram bars representing activity over time. This is useful for visualizing event frequency. Ensure 'regraph' is imported.

```javascript
import React from 'react';

import ReactDOM from 'react-dom';
import { TimeBar } from 'regraph';

const settings = {
  options: {
    backgroundColor: 'rgb(81, 95, 108)',
    style: {
      color: 'rgb(45, 205, 168)',
      hoverColor: 'rgb(7, 156, 131)',
    },
    sliders: {
      color: 'rgba(36, 44, 50, 0.5)',
      lineColor: 'rgb(81, 95, 108)',
    },
    labels: {
      fontColor: 'rgb(123, 135, 147)',
    },
    scale: {
      hoverColor: 'rgb(81, 95, 108)',
    },
  },
  onWheel: ({ preventDefault }) => {
    preventDefault();
  },
};

export default function HistogramTimeBar() {
  return <TimeBar items={generateData()} {...settings} />;
}

// Randomly generate 200 data points
function generateData() {
  const items = {};
  for (let i = 0; i < 200; i += 1) {
    items[`dt${i}`] = {
      // Set the date to be today minus a random number of days
      times: [{ time: new Date() - 1000 * 60 * 60 * 24 * (Math.random() * 100) }],
    };
  }
  return items;
}

ReactDOM.render(<HistogramTimeBar />, document.getElementById('app'));

```
Tokens:
Raw