ngx-topicmapper

This is a component to integrate D3 based MC-Topicmapper plugin into your Angular app.

Installation

npm install [email protected]  ngx-topicmapper --save 
npm install @types/[email protected] --save-dev (For d3 types: based on D3 version)

Configuration

Ensure you import the module and the dependencies:

import { NgxTopicmapperComponent } from 'ngx-topicmapper';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgxTopicmapperComponent, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})

In your component:

• Add to the html:

<lib-ngx-topicmapper id="mcGalaxychart" height="800" [treeData]="data" [loader]="boolPreloader" 
(exportClicked)="onExportClicked($event)" (legendClicked)="onlegendClicked($event)" (nodeClicked)="onNodeClicked($event)" ></lib-ngx-topicmapper> 

• Add to the typescript:

export class MyComponent {
  data: any = {};
  boolPreloader: boolean = false;

  ...
  constructor() {
  }

 onExportClicked(data: any) {
   console.log("Export clicked")
 }

 onlegendClicked(data: any) {
   console.log("Legend clicked")
 }

 onNodeClicked(data: any) {
   console.log("noded clicked", data)
 }

Attributes

It can contain the following properties.

Input

| Option | Default | Type | Description | | :------------ | :------------ | :----- | :--------- | | id | mcTopicMapperChart | String | (OPIONAL) Unique Id of the chart. | | height | 700 | Number | (OPIONAL) Height of the SVG (default 700px), lower heights may have overlapping issue. Width is dynamic based on parent container. | | treeData | Not set | Object | As specified | | loader | False | Boolean | Loader Animation when data is loading via API |

Output

| Option |Description | | :------------ |:--------- | | nodeClicked | When nodes in graph are clicked, output event will be triggered with clicked node details. | | exportClicked | When export button on Chart is clicked | | legendClicked | When legend button on Chart is clicked |

Changelog

Version ngx-topicmapper 0.0.1

• Compatabile with D3 version 7.3
• First version with loader, data inputs.
• Outputs: nodeClicked

Version ngx-topicmapper 0.0.4

• Compatabile with D3 version 4.13
• Height Input added.
• Export, Legend click outputs added.
• Special class for pagination nodes (class: pageNode)
• Inline styles for Lines connecting nodes.
• Export/Legend Ux based on mockups.

Version ngx-topicmapper 0.0.5

• Compatabile with D3 version 4.13
• Compatabile for smaller sceen sizes (mobile).

Version ngx-topicmapper 0.0.6

• Compatabile with D3 version 4.13
• Zoom control style fixes.
• Inner container style fix "max-height:700px".
• Font family updated to 'Lato'

Version ngx-topicmapper 0.0.8

• Compatabile with D3 version 4.13
• Default zoom reduced in first time mobile view.
• Portrait landscape reload.
• Central text allignment

Version ngx-topicmapper 0.0.9

• Compatabile with D3 version 4.13
• Central text count added.

Version ngx-topicmapper 0.0.10

• Compatabile with D3 version 4.13
• Responsive vertical allignment of zoom controls in mobile screens.

Version ngx-topicmapper 0.0.11

• Compatabile with D3 version 7.6
• Compatabile with Angular 12, 13 and typescript >4.5.0
• All the other features of older topic mapper versions.

Version ngx-topicmapper 0.0.12 - 0.0.13

• Compatabile with D3 version 7.6
• Compatabile with Angular 10, 11 and typescript >4.2.0
• All the other features of older topic mapper versions.

Version ngx-topicmapper 0.0.14

• Compatabile with D3 version 7.6
• Compatabile with Angular 14 and typescript >4.5.0
• All the other features of older topic mapper versions.

Version ngx-topicmapper 0.0.15

• Compatabile with D3 version 7.8.5
• Compatabile with Angular 16 and typescript >5.1.3
• All the other features of older topic mapper versions.

Version ngx-topicmapper 0.0.16

• Compatabile with D3 version 7.8.5
• Compatabile with Angular 18 and typescript >5.5.2
• All the other features of older topic mapper versions.
• Modular import removed, Standalone component based import added (Angular standalone support)