Table of contents

• Getting Started
• Latest Update
• Installation
• Usage
  • Standalone
• API
• Demo

Getting Started

ng-apex-sankey is an Angular library for creating Sankey diagrams with full customization options.

Latest Update

• 2024.11.27: Version 0.1.2 release with dynamic data updates.
• 2024.11.26: Initial release

Installation

Install the library via npm:

npm install ng-apex-sankey --save
npm install apexsankey --save

Usage

Standalone

Import SankeyChartComponent in your Angular component:

import { Component } from '@angular/core';
import { SankeyChartComponent, SankeyData, SankeyOptions } from 'ng-apex-sankey';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [SankeyChartComponent],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public sankeyData: SankeyData = {
    nodes: [
      { id: 'Homepage', title: 'Homepage' },
      { id: 'ProductPage', title: 'Product Page' },
      { id: 'Cart', title: 'Cart' },
      { id: 'Checkout', title: 'Checkout' },
      { id: 'Exit', title: 'Exit' }
    ],
    edges: [
      { source: 'Homepage', target: 'ProductPage', value: 300 },
      { source: 'Homepage', target: 'Exit', value: 100 },
      { source: 'ProductPage', target: 'Cart', value: 200 },
      { source: 'ProductPage', target: 'Exit', value: 100 },
      { source: 'Cart', target: 'Checkout', value: 150 },
      { source: 'Cart', target: 'Exit', value: 50 },
      { source: 'Checkout', target: 'Exit', value: 150 }
    ]
  };

  public sankeyOptions: SankeyOptions = {
    graphOptions: {
      width: 800,
      height: 600,
      nodeWidth: 20,
      edgeOpacity: 0.5,
      enableTooltip: true,
    }
  };
}

API

The SankeyChartComponent accepts two main inputs: SankeyData for nodes and edges, and SankeyOptions for customization.

SankeyData Configuration

Nodes

• id: Unique identifier for the node.
• title: Title of the node, displayed in the diagram.

Edges

• source: ID of the source node.
• target: ID of the target node.
• value: Value of the flow between nodes.
• type (optional): Type of the link, useful for categorizing flows.

Options

• order: (optional) A list of layers defining the order of nodes. It's a list of bands, each containing node IDs. Example:

    json

    {
      "order": [
        [["a", "b"]],
        [["c"]]
      ]
    }

• alignLinkTypes: (optional) Boolean indicating whether to align link types across nodes. Default: false.

SankeyOptions Configuration

GraphOptions

• width: (optional) Width of the graph container.
• height: (optional) Height of the graph container.
• canvasStyle: (optional) CSS styles for the canvas container.
• spacing: (optional) Spacing from the top and left of the graph container.
• nodeWidth: (optional) Width of the Sankey nodes.
• nodeBorderWidth: (optional) Border width of the nodes.
• nodeBorderColor: (optional) Border color of the nodes.
• onNodeClick: (optional) Callback function executed when a node is clicked.
• edgeOpacity: (optional) Opacity of the edges.
• edgeGradientFill: (optional) Boolean to enable gradient fill on edges.
• enableTooltip: (optional) Enables tooltip on hover over edges.
• tooltipId: (optional) HTML element ID for the tooltip.
• tooltipBorderColor: (optional) Border color of the tooltip.
• tooltipBGColor: (optional) Background color of the tooltip.
• tooltipTemplate: (optional) Function to customize the tooltip template. Accepts an object { source, target, value }.
• fontSize: (optional) Font size for node labels.
• fontFamily: (optional) Font family for node labels.
• fontWeight: (optional) Font weight for node labels.
• fontColor: (optional) Font color for node labels.

These options allow you to fully customize the Sankey diagram to fit your specific needs, providing detailed control over every aspect of the chart.

Demo

You can clone this repo and run the demo application to see the library in action:

npm install
ng serve 

The demo is available at: http://localhost:4200