@acimini/cm-d3-graphs NPM

CmD3Graphs

This library is an Angular library that builds most common graphs with the help of d3 and dagrejs libraries.\ With this library we have:

histogram
line chart
pie
donut
range slider
tree chart
flow chart
bubble chart

This is based on:

Index

Install

npm install d3 --save

npm install dagre --save

npm install @acimini/cm-d3-graphs --save

Import in your app

import { CmD3GraphsModule } from '@acimini/cm-d3-graphs';

@NgModule({
  imports: [ CmD3GraphsModule ],
  ...
})

How to use

First define the configuration for the graph

import {GraphTypeConfigurationInterface} from '@acimini/cm-d3-graphs';

const graphConf: GraphTypeConfigurationInterface = {
  ...
}

Each graph has its own configuration. See the sections below to check what is the configuration for the graph you choose.

Define the data for the graph

import {GraphTypeDataInterface} from '@acimini/cm-d3-graphs';

const graphData: GraphTypeDataInterface = [
  ...
];

For the graph data there are a base interface that is suitable for the most of the graph types, and some specific for those graphs that have a more complex structure. See the sections below to check what is the data format for the graph you choose.

Use the graph component in the html

<cm-graph-type [graphConfigs]="graphConf" [graphData]="graphData"></cm-graph-type>

The component can need more inputs than those shown above. See the sections below to check what is the right way to use the component for the graph you choose.

IMPORTANT: the component must be enclosed in an element with width and height set.

Graph types

Below it is shown the list of the available graph types.\ Each graph section is divided in four parts:

Configurations: in this section, it is described what configurations are available for the graph and how use them.
Data: in this section, it is described how data must be structured to work with the graph type choose.
Component: in this section, it is show how to use the graph component in the html.
Example: in this section, it is show an example of the usage of the graph choose.

Histogram

Configurations

To configure correctly the graph, it is possible to use the HistogramGraphConfigurationInterface

import {HistogramGraphConfigurationInterface} from '@acimini/cm-d3-graphs';

const histogramConf: HistogramGraphConfigurationInterface = {
  ...
}

Below a list with all the configurations available for the histogram chart.\ Most of the configurations are optional and, if a value is not provided, a default one will be set.

id

A string that sets the id of the chart. It is required.

type

A string that defines the type of the graph. It is required and must be histogram.

margin

An object that sets the margins between the graph and its container.

{
    top: number,
    bottom: number,
    left: number,
    right: number
}

If not provided, default value will be used.

{
    top: 10,
    bottom: 10,
    left: 10,
    right: 10
}

maxDisplayedNumber

A number that defines the max number of data displayed in the graph.\ If the data length is grater than the value of this property, a scrollbar will be shown.

events

An object that sets the events enabled on the graph.

{
    clickOnElement: boolean
}

clickOnElement: if true, the event clickOnBar will be emitted each time user clicks on a bar. The event contains the data of the bar clicked.

If not provided, default value will be used.

{
  clickOnElement: false
}

overflowX

A boolean that enables the overflow along the horizontal direction.\ If not provided, by default it is false.\ If enabled, the graph is not resized to the container width, and a horizontal scrollbar will be shown.

overflowY

A boolean that enables the overflow along the vertical direction.\ If not provided, by default it is false.\ If enabled, the graph is not resized to the container height, and a vertical scrollbar will be shown.

tooltipFormat

A function that defines the format of the tooltip that appears when the mouse goes on a bar.

(label: string, value: number) => string

If not provided, default value will be used.

(label, value) => label + ': ' + value

orientation

It can be horizontal or vertical and defines the orientation of the graph.\ If not provided, default value will be vertical.

grid

An object that defines the appearance of the grid.

{
    axisX: boolean,
    axisY: boolean,
    color: string
}

axisX: if true, enables the grid along the horizontal direction.
axisY: if true, enables the grid along the vertical direction.
color: defines the color of the grid.

If not provided, default value will be used.

{
    axisX: true,
    axisY: true,
    color: '#ccc'
}

axis

An object that defines the appearance of the axes.

{
    showAxisX: boolean,
    showAxisY: boolean,
    invertAxisX: boolean,
    invertAxisY: boolean,
    labelXOrientation: 'horizontal' | 'vertical' | 'oblique',
    labelYOrientation: 'horizontal' | 'vertical' | 'oblique',
    tickFormatX: (d: string) => string,
    tickFormatY: (d: string) => string,
    lineColor: string,
    textColor: string
}

showAxisX: if true, enables the axis along the horizontal direction.
showAxisY: if true, enables the axis along the vertical direction.
invertAxisX: if true, inverts the axis along the horizontal direction.
invertAxisY: if true, inverts the axis along the vertical direction.
labelXOrientation: defines the orientation of the tick label for the horizontal axis.
labelYOrientation: defines the orientation of the tick label for the vertical axis.
tickFormatX: a function that returns the tick label formatted for the horizontal axis.
tickFormatY: a function that returns the tick label formatted for the vertical axis.
lineColor: defines the color of the axes.
textColor: defines the tick label color.

If not provided, default value will be used.

{
    showAxisX: true,
    showAxisY: true,
    invertAxisX: false,
    invertAxisY: false,
    labelXOrientation: 'horizontal',
    labelYOrientation: 'horizontal',
    lineColor: 'black',
    textColor: 'black'
}

groups

With the histogram we can represent one or more set of data in the same graph.\ The groups' configuration is an array of objects that defines the configuration for each set.

{
    color: string,
    label: string
}

color: defines the color of the bars that represent the set.
label: defines the label of the set (it is useful in conjunction with the legend - see section below).

If not provided, the system automatically calculates the number of the sets from data provided, and for each create the default configuration.

{
    color: '#1980B6',
    label: 'Group-' + index of the set
}

groupedType

Together with the previous configuration, it is possible define the type of grouping. It can be inline or stacked.\ If not provided, default value will be inline.

legend

An object that defines the visibility and the position of the legend.

{
    enabled: boolean,
    position: 'bottom' | 'top' | 'left' | 'right'
}

enabled: defines if the legend is enabled.
position: defines the position of the legend.

If not provided, default value will be used.

{
    enabled: false, 
    position: 'right'
}

Data

The data for the histogram have a specific format, defined by the HistogramGraphDataInterface

import {HistogramGraphDataInterface} from '@acimini/cm-d3-graphs';

const histogramData: HistogramGraphDataInterface[] = [
    {...},
    ...
]

Below a list with all the properties that the single data can have.\ Most of the properties are optional and, if a value is not provided, a default one will be set.

id

A string that defines the id of the data.\ If not provided, an auto-calculated value will be used.

label

A string that defines the label of the data. It is required.

values

An array of numbers that defines for each data the groups values. It is required.

extraData

An object that defines extra data associated with the data. It can contain each extra information.\ For example, it is returned whit the data under key extraData, when the user clicks on a bar.

Component

When the configuration and the data are set, the last step is to import the component into the html.

<cm-histogram-chart [graphConfigs]="graphConf" [graphData]="graphData"></cm-histogram-chart>

IMPORTANT: the component must be enclosed in an element with width and height set.

Example

Below an example

import {HistogramGraphConfigurationInterface} from '@acimini/cm-d3-graphs';

const histogramConfs: HistogramGraphConfigurationInterface = {
  id: 'histogram_chart',
  type: 'histogram',
  groups: [
    {color: '#1980B6'},
    {color: '#ec1f1f'},
    {color: '#09b116'}
  ],
  axis: {
    invertAxisY: false,
    invertAxisX: false
  },
  orientation: 'vertical',
  maxDisplayedNumber: 10,
  legend: {
    position: 'right',
    enabled: true
  }
}

import {HistogramGraphDataInterface} from '@acimini/cm-d3-graphs';

const histogramData: HistogramGraphDataInterface[] = [
  {values: [-12, 34, -56], label: 'Label1'},
  {values: [23, -5, 67], label: 'Label2'},
  {values: [1, 7, 4], label: 'Label3'},
  {values: [67, 31, -12], label: 'Label4'},
  {values: [-43, -43, 9], label: 'Label5'},
  {values: [2, -89, -63], label: 'Label6'},
  {values: [98, 11, 45], label: 'Label7'},
  {values: [-53, 26, -12], label: 'Label8'},
  {values: [-29, 26, 35], label: 'Label9'},
  {values: [31, 1, -5], label: 'Label10'},
  {values: [81, -12, -34], label: 'Label11'},
  {values: [60, 51, -41], label: 'Label12'},
  {values: [-4, -17, 31], label: 'Label13'},
  {values: [35, 67, 18], label: 'Label14'},
  {values: [19, 56, 25], label: 'Label15'},
  {values: [-93, 5, -89], label: 'Label16'},
  {values: [51, 34, -57], label: 'Label17'},
  {values: [56, 76, 12], label: 'Label18'},
  {values: [-48, 87, 90], label: 'Label19'},
  {values: [11, -32, -12], label: 'Label20'}
]

npm.io npm.io

Pie

Configurations

To configure correctly the graph, it is possible to use the PieGraphConfigurationInterface

import {PieGraphConfigurationInterface} from '@acimini/cm-d3-graphs';

const pieConf: PieGraphConfigurationInterface = {
  ...
}

Below a list with all the configurations available for the pie chart.\ Most of the configurations are optional and, if a value is not provided, a default one will be set.

id

A string that sets the id of the chart. It is required.

type

A string that defines the type of the graph. It is required and must be pie.

margin

An object that sets the margins between the graph and its container.

{
    top: number,
    bottom: number,
    left: number,
    right: number
}

If not provided, default value will be used.

{
    top: 10,
    bottom: 10,
    left: 10,
    right: 10
}

maxDisplayedNumber

A number that defines the max number of data displayed in the graph.\ If the data length is grater than the value of this property, slices will be distributed in crowns.

events

An object that sets the events enabled on the graph.

{
    clickOnElement: boolean
}

clickOnElement: if true, the event clickOnSlice will be emitted each time user clicks on a slice. The event contains the data of the slice clicked.

If not provided, default value will be used.

{
  clickOnElement: false
}

overflowX

overflowY

tooltipFormat

A function that defines the format of the tooltip that appears when the mouse goes on a slice.

(label: string, value: number) => string

If not provided, default value will be used.

(label, value) => label + ': ' + value

slices

An object that defines the appearance of the slices.

{
    colors: string[],
    textColor: string
}

colors: an array that defines the color of each slice.
textColor: defines the color of the slice label.

If not provided, default value will be used.

{
    colors: ['#e61400', '#ff0f64', '#0555fa', '#008c5a', '#ff5a0f',
      '#ff4687', '#41b9e6', '#55be5a', '#c6c6c6', '#000000'],
    textColor: 'white'
}

If colors defined have dimension smaller than data dimension, they will be used cyclically.\ For example, if we have 11 data and 10 colors, for the 11th data will be used first color , and so on.

legend

An object that defines the visibility and the position of the legend.

{
    enabled: boolean,
    position: 'bottom' | 'top' | 'left' | 'right'
}

enabled: defines if the legend is enabled.
position: defines the position of the legend.

If not provided, default value will be used.

{
    enabled: false, 
    position: 'right'
}

Data

The data for the pie have a specific format, defined by the PieGraphDataInterface

import {PieGraphDataInterface} from '@acimini/cm-d3-graphs';

const pieData: PieGraphDataInterface[] = [
    {...},
    ...
]

Below a list with all the properties that the single data can have.\ Most of the properties are optional and, if a value is not provided, a default one will be set.

id

A string that defines the id of the data.\ If not provided, an auto-calculated value will be used.

label

A string that defines the label of the data. It is required.

value

A number that defines the value of the data. It is required.

extraData

slice

An object that defines the appearance of the single slice.

{
  color: string;
}

color: defines the color of the slice and overwrite the colors' property defined in configurations.

If not provided, the color from the configuration will be used.

Component

When the configuration and the data are set, the last step is to import the component into the html.

<cm-pie-chart [graphConfigs]="graphConf" [graphData]="graphData"></cm-pie-chart>

IMPORTANT: the component must be enclosed in an element with width and height set.

Example

Below an example

import {PieGraphConfigurationInterface} from '@acimini/cm-d3-graphs';

const pieConfs: PieGraphConfigurationInterface = {
  id: 'pie_chart',
  type: 'pie',
  maxDisplayedNumber: 7,
  legend: {
    position: 'top',
    enabled: true
  }
};

import {PieGraphDataInterface} from '@acimini/cm-d3-graphs';

const pieData: PieGraphDataInterface[] = [
  {label: 'USA', value: 130},
  {label: 'UK', value: 20},
  {label: 'Canada', value: 30},
  {label: 'Mexico', value: 15},
  {label: 'Italy', value: 5},
  {label: 'France', value: 6},
  {label: 'England', value: 4},
  {label: 'Japan', value: 10},
  {label: 'Germany', value: 7},
  {label: 'Poland', value: 12},
  {label: 'Ukraine', value: 8},
  {label: 'Russia', value: 9},
  {label: 'China', value: 10}
]

npm.io npm.io

Donut

Configurations

To configure correctly the graph, it is possible to use the PieGraphConfigurationInterface

import {PieGraphConfigurationInterface} from '@acimini/cm-d3-graphs';

const donutConf: PieGraphConfigurationInterface = {
  ...
}

Below a list with all the configurations available for the donut chart.\ Most of the configurations are optional and, if a value is not provided, a default one will be set.

id

A string that sets the id of the chart. It is required.

type

A string that defines the type of the graph. It is required and must be donut.

margin

An object that sets the margins between the graph and its container.

{
    top: number,
    bottom: number,
    left: number,
    right: number
}

If not provided, default value will be used.

{
    top: 10,
    bottom: 10,
    left: 10,
    right: 10
}

maxDisplayedNumber

A number that defines the max number of data displayed in the graph.\ If the data length is grater than the value of this property, slices will be distributed in crowns.

events

An object that sets the events enabled on the graph.

{
    clickOnElement: boolean
}

clickOnElement: if true, the event clickOnSlice will be emitted each time user clicks on a slice. The event contains the data of the slice clicked.

If not provided, default value will be used.

{
  clickOnElement: false
}

overflowX

overflowY

tooltipFormat

A function that defines the format of the tooltip that appears when the mouse goes on a slice.

(label: string, value: number) => string

If not provided, default value will be used.

(label, value) => label + ': ' + value

slices

An object that defines the appearance of the slices.

{
    colors: string[],
    textColor: string
}

colors: an array that defines the color of each slice.
textColor: defines the color of the slice label.

If not provided, default value will be used.

{
    colors: ['#e61400', '#ff0f64', '#0555fa', '#008c5a', '#ff5a0f',
      '#ff4687', '#41b9e6', '#55be5a', '#c6c6c6', '#000000'],
    textColor: 'white'
}

If colors defined have dimension smaller than data dimension, they will be used cyclically.\ For example, if we have 11 data and 10 colors, for the 11th data will be used first color , and so on.

legend

An object that defines the visibility and the position of the legend.

{
    enabled: boolean,
    position: 'bottom' | 'top' | 'left' | 'right'
}

enabled: defines if the legend is enabled.
position: defines the position of the legend.

If not provided, default value will be used.

{
    enabled: false, 
    position: 'right'
}

Data

The data for the donut have a specific format, defined by the PieGraphDataInterface

import {PieGraphDataInterface} from '@acimini/cm-d3-graphs';

const donutData: PieGraphDataInterface[] = [
    {...},
    ...
]

Below a list with all the properties that the single data can have.\ Most of the properties are optional and, if a value is not provided, a default one will be set.

id

A string that defines the id of the data.\ If not provided, an auto-calculated value will be used.

label

A string that defines the label of the data. It is required.

value

A number that defines the value of the data. It is required.

extraData

slice

An object that defines the appearance of the single slice.

{
  color: string;
}

color: defines the color of the slice and overwrite the colors' property defined in configurations.

If not provided, the color from the configuration will be used.

Component

When the configuration and the data are set, the last step is to import the component into the html.

<cm-pie-chart [graphConfigs]="graphConf" [graphData]="graphData"></cm-pie-chart>

IMPORTANT: the component must be enclosed in an element with width and height set.

Example

Below an example

import {PieGraphConfigurationInterface} from '@acimini/cm-d3-graphs';

const donutConfs: PieGraphConfigurationInterface = {
  id: 'donut_chart',
  type: 'donut',
  maxDisplayedNumber: 7
};

import {PieGraphDataInterface} from '@acimini/cm-d3-graphs';

const donutData: PieGraphDataInterface[] = [
  {label: 'USA', value: 60},
  {label: 'UK', value: 20},
  {label: 'Canada', value: 30},
  {label: 'Mexico', value: 15},
  {label: 'Italy', value: 5},
  {label: 'France', value: 6},
  {label: 'England', value: 4},
  {label: 'Japan', value: 10},
  {label: 'Germany', value: 7},
  {label: 'Poland', value: 12},
  {label: 'Ukraine', value: 8},
  {label: 'Russia', value: 9},
  {label: 'China', value: 10}
]

npm.io npm.io

Line

Configurations

To configure correctly the graph, it is possible to use the LineGraphConfigurationInterface

import {LineGraphConfigurationInterface} from '@acimini/cm-d3-graphs';

const lineConf: LineGraphConfigurationInterface = {
  ...
}

Below a list with all the configurations available for the line chart.\ Most of the configurations are optional and, if a value is not provided, a default one will be set.

id

A string that sets the id of the chart. It is required.

type

A string that defines the type of the graph. It is required and must be line.

margin

An object that sets the margins between the graph and its container.

{
    top: number,
    bottom: number,
    left: number,
    right: number
}

If not provided, default value will be used.

{
    top: 10,
    bottom: 10,
    left: 10,
    right: 10
}

maxDisplayedNumber

A number that defines the max number of data displayed in the graph.\ If the data length is grater than the value of this property, a scrollbar will be shown.

events

An object that sets the events enabled on the graph.

{
    clickOnElement: boolean
}

clickOnElement: if true, the event clickOnDot will be emitted each time user clicks on a dot on the line. The event contains the data of the dot clicked.

If not provided, default value will be used.

{
  clickOnElement: false
}

overflowX

overflowY

tooltipFormat

A function that defines the format of the tooltip that appears when the mouse goes on a dot.

(label: string, value: number) => string

If not provided, default value will be used.

(label, value) => label + ': ' + value

orientation

It can be horizontal or vertical and defines the orientation of the graph.\ If not provided, default value will be vertical.

grid

An object that defines the appearance of the grid.

{
    axisX: boolean,
    axisY: boolean,
    color: string
}

axisX: if true, enables the grid along the horizontal direction.
axisY: if true, enables the grid along the vertical direction.
color: defines the color of the grid.

If not provided, default value will be used.

{
    axisX: true,
    axisY: true,
    color: '#ccc'
}

axis

An object that defines the appearance of the axes.

{
    showAxisX: boolean,
    showAxisY: boolean,
    invertAxisX: boolean,
    invertAxisY: boolean,
    labelXOrientation: 'horizontal' | 'vertical' | 'oblique',
    labelYOrientation: 'horizontal' | 'vertical' | 'oblique',
    tickFormatX: (d: string) => string,
    tickFormatY: (d: string) => string,
    lineColor: string,
    textColor: string
}

showAxisX: if true, enables the axis along the horizontal direction.
showAxisY: if true, enables the axis along the vertical direction.
invertAxisX: if true, inverts the axis along the horizontal direction.
invertAxisY: if true, inverts the axis along the vertical direction.
labelXOrientation: defines the orientation of the tick label for the horizontal axis.
labelYOrientation: defines the orientation of the tick label for the vertical axis.
tickFormatX: a function that returns the tick label formatted for the horizontal axis.
tickFormatY: a function that returns the tick label formatted for the vertical axis.
lineColor: defines the color of the axes.
textColor: defines the tick label color.

If not provided, default value will be used.

{
    showAxisX: true,
    showAxisY: true,
    invertAxisX: false,
    invertAxisY: false,
    labelXOrientation: 'horizontal',
    labelYOrientation: 'horizontal',
    lineColor: 'black',
    textColor: 'black'
}

groups

With the line we can represent one or more set of data in the same graph.\ The groups' configuration is an array of objects that defines the configuration for each set.

{
    color: string,
    label: string
}

color: defines the color of the line that represent the set.
label: defines the label of the set (it is useful in conjunction with the legend - see section below).

If not provided, the system automatically calculates the number of the sets from data provided, and for each create the default configuration.

{
    color: '#1980B6',
    label: 'Group-' + index of the set
}

hasArea

A boolean that enables the area under the line.

legend

An object that defines the visibility and the position of the legend.

{
    enabled: boolean,
    position: 'bottom' | 'top' | 'left' | 'right'
}

enabled: defines if the legend is enabled.
position: defines the position of the legend.

If not provided, default value will be used.

{
    enabled: false, 
    position: 'right'
}

Data

The data for the line have a specific format, defined by the LineGraphDataInterface

import {LineGraphDataInterface} from '@acimini/cm-d3-graphs';

const lineData: LineGraphDataInterface[] = [
    {...},
    ...
]

Below a list with all the properties that the single data can have.\ Most of the properties are optional and, if a value is not provided, a default one will be set.

id

A string that defines the id of the data.\ If not provided, an auto-calculated value will be used.

label

A string that defines the label of the data. It is required.

values

An array of numbers that defines for each data the groups values. It is required.

extraData

Component

When the configuration and the data are set, the last step is to import the component into the html.

<cm-line-chart [graphConfigs]="graphConf" [graphData]="graphData"></cm-line-chart>

IMPORTANT: the component must be enclosed in an element with width and height set.

Example

Below an example

import {LineGraphConfigurationInterface} from '@acimini/cm-d3-graphs';

const lineConfs: LineGraphConfigurationInterface = {
  id: 'line_chart',
  type: 'line',
  groups: [
    {color: '#1980B6'},
    {color: '#ec1f1f'}
  ]
}

import {LineGraphDataInterface} from '@acimini/cm-d3-graphs';

const lineData: LineGraphDataInterface[] = [
  {values: [-12, 34], label: 'Label1'},
  {values: [23, -5], label: 'Label2'},
  {values: [1, 7], label: 'Label3'},
  {values: [67, 31], label: 'Label4'},
  {values: [-43, -43], label: 'Label5'},
  {values: [2, -89], label: 'Label6'},
  {values: [98, 11], label: 'Label7'},
  {values: [-53, 26], label: 'Label8'},
  {values: [-29, 26], label: 'Label9'},
  {values: [31, 1], label: 'Label10'},
  {values: [81, -12], label: 'Label11'},
  {values: [60, 51], label: 'Label12'},
  {values: [-4, -17], label: 'Label13'},
  {values: [35, 67], label: 'Label14'},
  {values: [19, 56], label: 'Label15'},
  {values: [-93, 5], label: 'Label16'},
  {values: [51, 34], label: 'Label17'},
  {values: [56, 76], label: 'Label18'},
  {values: [-48, 87], label: 'Label19'},
  {values: [11, -32], label: 'Label20'}
]

npm.io npm.io

Range slider

Configurations

To configure correctly the graph, it is possible to use the RangeSliderGraphConfigurationInterface

import {RangeSliderGraphConfigurationInterface} from '@acimini/cm-d3-graphs';

const rangeSliderConf: RangeSliderGraphConfigurationInterface = {
  ...
}

Below a list with all the configurations available for the range slider chart.\ Most of the configurations are optional and, if a value is not provided, a default one will be set.

id

A string that sets the id of the chart. It is required.

type

A string that defines the type of the graph. It is required and must be range-slider.

margin

An object that sets the margins between the graph and its container.

{
    top: number,
    bottom: number,
    left: number,
    right: number
}

If not provided, default value will be used.

{
    top: 10,
    bottom: 10,
    left: 10,
    right: 10
}

events

An object that sets the events enabled on the graph.

{
    rangeChanging: boolean,
    rangeChanged: boolean
}

rangeChanging: if true, the event rangeChanging will be emitted during range selection. The event contains the data of the range selected.
rangeChanged: if true, the event rangeChanged will be emitted at the end of selection. The event contains the data of the range selected.

If not provided, default value will be used.

{
    rangeChanging: false,
    rangeChanged: false
}

overflowX

overflowY

tooltipFormat

A function that defines the format of the tooltip that appears when the mouse goes on a dot.

(label: string, value: number) => string

If not provided, default value will be used.

(label, value) => label + ': ' + value

orientation

It can be horizontal or vertical and defines the orientation of the graph.\ If not provided, default value will be horizontal.

axis

An object that defines the appearance of the axes.

{
    showAxisX: boolean,
    showAxisY: boolean,
    invertAxisX: boolean,
    invertAxisY: boolean,
    labelXOrientation: 'horizontal' | 'vertical' | 'oblique',
    labelYOrientation: 'horizontal' | 'vertical' | 'oblique',
    tickFormatX: (d: string) => string,
    tickFormatY: (d: string) => string,
    lineColor: string,
    textColor: string
}

showAxisX: if true, enables the axis along the horizontal direction.
showAxisY: if true, enables the axis along the vertical direction.
invertAxisX: if true, inverts the axis along the horizontal direction.
invertAxisY: if true, inverts the axis along the vertical direction.
labelXOrientation: defines the orientation of the tick label for the horizontal axis.
labelYOrientation: defines the orientation of the tick label for the vertical axis.
tickFormatX: a function that returns the tick label formatted for the horizontal axis.
tickFormatY: a function that returns the tick label formatted for the vertical axis.
lineColor: defines the color of the axes.
textColor: defines the tick label color.

If not provided, default value will be used.

{
    showAxisX: true,
    showAxisY: false,
    invertAxisX: false,
    invertAxisY: false,
    labelXOrientation: 'horizontal',
    labelYOrientation: 'horizontal',
    lineColor: 'black',
    textColor: 'black'
}

track

An object that defines the appearance of the track.

{
    color: string,
    width: number,
    insetColor: string,
    insetWidth: number,
    fillColor: string,
    fillWidth: number
}

color: defines the border color of the track.
width: defines the border width of the track.
insetColor: defines the color of the track outside the range selected.
insetWidth: defines the width of the track outside the range selected.
fillColor: defines the color of the track into the range selected.
fillWidth: defines the width of the track into the range selected.

If not provided, default value will be used.

{
    color: '#bbb',
    width: 6,
    insetColor: '#eee',
    insetWidth: 4,
    fillColor: '#3883fa',
    fillWidth: 4
}

interval

An object that defines the values' interval.

{
    type: 'discrete' | 'continuous',
    step: number
}

type: if set to discrete, the interval will be discrete and only values defined in data will be selectable. If set to continuos, all values between start and end values will be selectable.
step: defines minimum range selectable. It works if handle type is double.

If not provided, default value will be used.

{
    type: 'discrete'
}

handle

An object that defines the appearance of the handle.

{
    strokeColor: string,
    fillColor: string,
    type: 'single' | 'double',
    showTooltip: 'never' | 'always' | 'on-hover'
}

strokeColor: defines the border color of the handle.
fillColor: defines the inner color of the handle.
type: if it is single, we will have a single handle, and we can select only a specific value of the interval. If it is double, we will have two handles and we can select a range.
showTooltip: set the visibility of the handle tooltip.

If not provided, default value will be used.

{
    strokeColor: '#777',
    fillColor: 'white',
    type: 'double',
    showTooltip: 'always'
}

Data

The data for the range slider have a specific format, defined by the RangeSliderGraphDataInterface

import {RangeSliderGraphDataInterface} from '@acimini/cm-d3-graphs';

const rangeSliderData: RangeSliderGraphDataInterface[] = [
    {...},
    ...
]

Below a list with all the properties that the single data can have.\ Most of the properties are optional and, if a value is not provided, a default one will be set.

id

A string that defines the id of the data.\ If not provided, an auto-calculated value will be used.

label

A string that defines the label of the data. It is required.

value

A number that defines the value of the data. It is required.

extraData

Component

When the configuration and the data are set, the last step is to import the component into the html.

<cm-range-slider-chart [graphConfigs]="graphConf" [graphData]="graphData"></cm-range-slider-chart>

IMPORTANT: the component must be enclosed in an element with width and height set.

Example

Below an example

import {RangeSliderGraphConfigurationInterface} from '@acimini/cm-d3-graphs';

const rangeSldierConfs: RangeSliderGraphConfigurationInterface = {
  id: 'range_slider_chart',
  type: 'range-slider',
  tooltipFormat: (label, value) => value.toFixed(2),
  axis: {
    tickFormatX: d => Number(d).toFixed(2)
  }
}

import {RangeSliderGraphDataInterface} from '@acimini/cm-d3-graphs';

const rangeSliderData: RangeSliderGraphDataInterface[] = [
  { value: 1 },
  { value: 2 },
  { value: 3 },
  { value: 4 },
  { value: 5 },
  { value: 6 },
  { value: 7 },
  { value: 8 },
  { value: 9 },
  { value: 10 },
  { value: 11 },
  { value: 12 },
  { value: 13 },
  { value: 14 },
  { value: 15 },
  { value: 16 },
  { value: 17 },
  { value: 18 },
  { value: 19 },
  { value: 20 },
  { value: 21 },
  { value: 22 },
  { value: 23 },
  { value: 24 },
  { value: 25 },
  { value: 26 },
  { value: 27 },
  { value: 28 },
  { value: 29 },
  { value: 30 }
]

npm.io npm.io

Tree

Configurations

To configure correctly the graph, it is possible to use the TreeGraphConfigurationInterface

import {TreeGraphConfigurationInterface} from '@acimini/cm-d3-graphs';

const treeConf: TreeGraphConfigurationInterface = {
  ...
}

Below a list with all the configurations available for the tree chart.\ Most of the configurations are optional and, if a value is not provided, a default one will be set.

id

A string that sets the id of the chart. It is required.

type

A string that defines the type of the graph. It is required and must be tree.

margin

An object that sets the margins between the graph and its container.

{
    top: number,
    bottom: number,
    left: number,
    right: number
}

If not provided, default value will be used.

{
    top: 10,
    bottom: 10,
    left: 10,
    right: 10
}

events

An object that sets the events enabled on the graph.

{
    clickOnElement: boolean
}

clickOnElement: if true, the event clickOnNode will be emitted each time user clicks on a node. The event contains the data of the node clicked.

If not provided, default value will be used.

{
    clickOnElement: false
}

overflowX

overflowY

orientation

It can be horizontal or vertical and defines the orientation of the graph.\ If not provided, default value will be vertical.

zoom

An object that defines the zoom configuration.

{
    minZoom: number,
    maxZoom: number
}

minZoom: defines the minimum zoom level available.
maxZoom: defines the maximum zoom level available.

If not provided, no limits are set.

nodes

An object that defines the appearance of the nodes.

{
    shape: 'circle' | 'rect' | 'square' | 'rhombus',
    collapsedColor: string,
    expandedColor: string,
    strokeColor: string,
    strokeWidth: string,
    circleRadius: number,
    rectangleDimensions: { width: number, height: number },
    squareDimensions: number,
    rhombusDimensions: number,
    distanceBetweenBrothers: number,
    distanceBetweenCousins: number,
    distanceBetweenParentAndChild: number,
    expandable: boolean,
    maxInitialExpandedLevel: number,
    additionalClasses: string
}

shape: sets the shape for all nodes. It can be overwritten by single data (see section below).
collapsedColor: defines the color of the node when it is collapsed.
expandedColor: defines the color of the node when it is expanded.
strokeColor: defines the color of the border of the node.
strokeWidth: defines the width of the border of the node.
circleRadius: defines the radius of the node if shape is circle.
rectangleDimensions: defines the dimensions of the node if shape is rect.
squareDimensions: defines the dimensions of the node if shape is square.
rhombusDimensions: defines the dimensions of the node if shape is rhombus.
distanceBetweenBrothers: defines the distance between two nodes at the same level with the same parent.
distanceBetweenCousins: defines the distance between two nodes at different level with a different parent.
distanceBetweenParentAndChild: defines the distance between parent and its children.
expandable: sets if nodes with children can be collapsed and expanded.
maxInitialExpandedLevel: if expandable is true, defines the last level visible.
additionalClasses: list of additional classes associated to nodes (example "class1 class2 ..."). It's important to put ::ng-deep before class definition.

If not provided, default value will be used.

{
    shape: 'circle',
    collapsedColor: 'lightsteelblue',
    expandedColor: 'white',
    strokeColor: 'lightsteelblue',
    circleRadius: 10,
    rectangleDimensions: {width: 150, height: 40},
    squareDimensions: 80,
    rhombusDimensions: 120,
    distanceBetweenBrothers: 20,
    distanceBetweenCousins: 40,
    distanceBetweenParentAndChild: 150,
    expandable: true,
    maxInitialExpandedLevel: 2
}

links

An object that defines the appearance of the links.

{
    color: string,
    arrow: boolean,
    arrowDirection: 'start' | 'end',
    width: string
}

color: defines the color of the links.
arrow: if true add arrows to the links.
arrowDirection: if arrow is true, set the position of the arrow.
width: defines the width of the links.

If not provided, default value will be used.

{
    color: 'lightsteelblue',
    arrow: true,
    arrowDirection: 'end',
    width: '0.125rem'
}

label

An object that defines the appearance of the label.

{
    color: string,
    padding: {top: number, left: number, right: number, bottom: number},
    'font-size': number
}

color: defines the color of the labels.
padding: defines the padding of the labels.
font-size: defines the font size of the labels.

If not provided, default value will be used.

{
    color: 'black',
    padding: {top: 5, left: 10, right: 10, bottom: 5}
}

Data

The data for the tree have a specific format, defined by the TreeGraphDataInterface

import {TreeGraphDataInterface} from '@acimini/cm-d3-graphs';

const treeData: TreeGraphDataInterface[] = [
    {...},
    ...
]

Below a list with all the properties that the single data can have.\ Most of the properties are optional and, if a value is not provided, a default one will be set.

id

A string that defines the id of the data.\ If not provided, an auto-calculated value will be used.

label

A string that defines the label of the data. It is required.\ If label contains special character %nl%, it will be splitted on multiple lines (for example "hi %nl%my name is Andrea", results in "hi" and "my name is Andrea" on two different lines).

extraData

node

An object that defines the appearance of the single node.

{
    shape: 'circle' | 'rect' | 'square' | 'rhombus',
    collapsedColor: string,
    expandedColor: string,
    strokeColor: string,
    strokeWidth: string,
    labelColor: string,
    circleRadius: number,
    rectangleDimensions: { width: number, height: number },
    squareDimensions: number,
    rhombusDimensions: number,
    additionalClasses: string
}

shape: sets the shape for single node.
collapsedColor: defines the color of the node when it is collapsed.
expandedColor: defines the color of the node when it is expanded.
strokeColor: defines the color of the border of the node.
strokeWidth: defines the width of the border of the node.
labelColor: defines the color of the node label.
circleRadius: defines the radius of the node if shape is circle.
rectangleDimensions: defines the dimensions of the node if shape is rect.
squareDimensions: defines the dimensions of the node if shape is square.
rhombusDimensions: defines the dimensions of the node if shape is rhombus.
additionalClasses: list of additional classes associated to single node (example "class1 class2 ..."). It's important to put ::ng-deep before class definition.

If not provided, will be used the values set in the configuration.

link

An object that defines the appearance of the single link.

{
    color: string,
    width: string
}

color: defines the color of the single link.
width: defines the width of the single link.

If not provided, will be used the values set in the configuration.

children

An array of object where the single element has the same structure of the single node.

{
    children: TreeGraphDataInterface[]
}

Component

When the configuration and the data are set, the last step is to import the component into the html.

<cm-tree-chart [graphConfigs]="graphConf" [graphData]="graphData"></cm-tree-chart>

IMPORTANT: the component must be enclosed in an element with width and height set.

Example

Below an example

import {TreeGraphConfigurationInterface} from '@acimini/cm-d3-graphs';

const treeConfs: TreeGraphConfigurationInterface = {
  id: 'tree_chart',
  type: 'tree',
  nodes: {
    shape: 'rect'
  },
  zoom: {
    minZoom: 0.5,
    maxZoom: 4
  }
}

import {TreeGraphDataInterface} from '@acimini/cm-d3-graphs';

const treeData: TreeGraphDataInterface[] = [
  {
    label: 'Top Level with a very very long text',
    node: {
      shape: 'square'
    },
    children: [
      {
        label: 'Level 2: A',
        children: [
          {
            label: 'Son of A with a very very long text' ,
            children: [
              {
                label: 'Son of son of A'
              },
              {
                label: 'Daughter of son of A'
              }
            ]
          },
          {
            label: 'Daughter of A',
            children: [
              {
                label: 'Son of son of A'
              },
              {
                label: 'Daughter of son of A'
              }
            ]
          }
        ]
      },
      {
        label: 'Level 2: B',
        node: {
          shape: 'rhombus'
        },
        children: [
          {
            label: 'Son of B with a very very long text'
          },
          {
            label: 'Daughter of B'
          }
        ]
      },
      {
        label: 'Level 2: B',
        children: [
          {
            label: 'Son of B',
            children: [
              {
                label: 'Daughter of A',
                children: [
                  {
                    label: 'Son of son of A'
                  },
                  {
                    label: 'Daughter of son of A'
                  }
                ]
              }
            ]
          },
          {
            label: 'Daughter of B'
          }
        ]
      }
    ]
  }
]

npm.io npm.io

Flow chart

Configurations

To configure correctly the graph, it is possible to use the FlowChartGraphConfigurationInterface

import {FlowChartGraphConfigurationInterface} from '@acimini/cm-d3-graphs';

const flowChartConf: FlowChartGraphConfigurationInterface = {
  ...
}

Below a list with all the configurations available for the flow chart.\ Most of the configurations are optional and, if a value is not provided, a default one will be set.

id

A string that sets the id of the chart. It is required.

type

A string that defines the type of the graph. It is required and must be flow-chart.

margin

An object that sets the margins between the graph and its container.

{
    top: number,
    bottom: number,
    left: number,
    right: number
}

If not provided, default value will be used.

{
    top: 10,
    bottom: 10,
    left: 10,
    right: 10
}

events

An object that sets the events enabled on the graph.

{
    clickOnElement: boolean
}

clickOnElement: if true, the event clickOnNode will be emitted each time user clicks on a node. The event contains the data of the node clicked.

If not provided, default value will be used.

{
    clickOnElement: false
}

overflowX

overflowY

orientation

It can be horizontal or vertical and defines the orientation of the graph.\ If not provided, default value will be vertical.

zoom

An object that defines the zoom configuration.

{
    minZoom: number,
    maxZoom: number
}

minZoom: defines the minimum zoom level available.
maxZoom: defines the maximum zoom level available.

If not provided, no limits are set.

nodes

An object that defines the appearance of the nodes.

{
    shape: 'circle' | 'rect' | 'square' | 'rhombus',
    collapsedColor: string,
    expandedColor: string,
    strokeColor: string,
    strokeWidth: string,
    circleRadius: number,
    rectangleDimensions: { width: number, height: number },
    squareDimensions: number,
    rhombusDimensions: number,
    distanceBetweenBrothers: number,
    distanceBetweenCousins: number,
    distanceBetweenParentAndChild: number,
    expandable: boolean,
    maxInitialExpandedLevel: number,
    icon: string,
    additionalClasses: string
}

shape: sets the shape for all nodes. It can be overwritten by single data (see section below).
collapsedColor: defines the color of the node when it is collapsed.
expandedColor: defines the color of the node when it is expanded.
strokeColor: defines the color of the border of the node.
strokeWidth: defines the width of the border of the node.
circleRadius: defines the radius of the node if shape is circle.
rectangleDimensions: defines the dimensions of the node if shape is rect.
squareDimensions: defines the dimensions of the node if shape is square.
rhombusDimensions: defines the dimensions of the node if shape is rhombus.
distanceBetweenBrothers: defines the distance between two nodes at the same level with the same parent.
distanceBetweenCousins: defines the distance between two nodes at different level with a different parent.
distanceBetweenParentAndChild: defines the distance between parent and its children.
expandable: sets if nodes with children can be collapsed and expanded.
maxInitialExpandedLevel: if expandable is true, defines the last level visible.
icon: sets the icon for all nodes. It can be overwritten by single data (see section below).
additionalClasses: list of additional classes associated to nodes (example "class1 class2 ..."). It's important to put ::ng-deep before class definition.

If not provided, default value will be used.

{
    shape: 'circle',
    collapsedColor: 'lightsteelblue',
    expandedColor: 'white',
    strokeColor: 'lightsteelblue',
    circleRadius: 10,
    rectangleDimensions: {width: 150, height: 40},
    squareDimensions: 80,
    rhombusDimensions: 120,
    distanceBetweenBrothers: 20,
    distanceBetweenCousins: 40,
    distanceBetweenParentAndChild: 150
}

links

An object that defines the appearance of the links.

{
    color: string,
    arrow: boolean,
    arrowDirection: 'start' | 'end',
    shape: 'smooth' | 'straight',
    width: string
}

color: defines the color of the links.
arrow: if true add arrows to the links.
arrowDirection: if arrow is true, set the position of the arrow.
shape: defines the shape of the links.
width: defines the width of the links.

If not provided, default value will be used.

{
    color: 'lightsteelblue',
    arrow: true,
    arrowDirection: 'end',
    shape: 'smooth',
    width: '0.125rem'
}

label

An object that defines the appearance of the label.

{
    color: string,
    padding: {top: number, left: number, right: number, bottom: number},
    'font-size': number
}

color: defines the color of the labels.
padding: defines the padding of the labels.
font-size: defines the font size of the labels.

If not provided, default value will be used.

{
    color: 'black',
    padding: {top: 5, left: 10, right: 10, bottom: 5}
}

clusters

An object that defines the appearance of the clusters.

{
  position: 'default' | 'full-space',
  strokeColor: string,
  fillColor: string,
  borderRadius: number,
  label: {
    color: string,
    position: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center',
    'font-size': number,
    padding: {top: number, left: number, right: number, bottom: number}
  };
}

position: defines if the cluster is drawn around its nodes, or if it occupies the total width/height of the graph in case of vertical/horizontal orientation.
strokeColor: defines the border color of the clusters.
fillColor: defines the inner color of the clusters.
shape: defines the shape of the clusters.
label: an object that defines the appearance of the cluster label.
- color: defines the color of the label.
- position: defines the position of the label within the cluster.
- font-size: defines the font size of the label.
- padding: defines the padding of the label.

If not provided, default value will be used.

{
    strokeColor: 'lightsteelblue',
    fillColor: 'transparent',
    position: 'default',
    shape: 'rectangle',
    label: {
        color: 'lightsteelblue',
        position: 'center',
        'font-size': 25,
        padding: {top: 5, left: 10, right: 10, bottom: 5}
    }
}

Data

The data for the flow chart have a specific format, defined by the FlowChartGraphDataInterface

import {FlowChartGraphDataInterface} from '@acimini/cm-d3-graphs';

const flowChartData: FlowChartGraphDataInterface[] = [
    {...},
    ...
]

Below a list with all the properties that the single data can have.\ Most of the properties are optional and, if a value is not provided, a default one will be set.\ Flow chart data is different from those of other graphs. Data is divided by nodes (required), edges (required) and clusters (optional).\ Each of these elements have the same interface FlowChartGraphDataInterface, so some properties are useless for nodes, but not for edge and viceversa.

id (configuration for node)

A string that defines the id of the data. It is required.

label (configuration for node and cluster)

extraData (configuration for node)

node (configuration for node)

An object that defines the appearance of the single node.

{
    shape: 'circle' | 'rect' | 'square' | 'rhombus',
    collapsedColor: string,
    expandedColor: string,
    strokeColor: string,
    strokeWidth: string,
    labelColor: string,
    icon: string,
    circleRadius: number,
    rectangleDimensions: { width: number, height: number },
    squareDimensions: number,
    rhombusDimensions: number,
    additionalClasses: string
}

shape: sets the shape for single node.
collapsedColor: defines the color of the node when it is collapsed.
expandedColor: defines the color of the node when it is expanded.
strokeColor: defines the color of the border of the node.
strokeWidth: defines the width of the border of the node.
labelColor: defines the color of the node label.
icon: sets the icon for single node.
circleRadius: defines the radius of the node if shape is circle.
rectangleDimensions: defines the dimensions of the node if shape is rect.
squareDimensions: defines the dimensions of the node if shape is square.
rhombusDimensions: defines the dimensions of the node if shape is rhombus.
additionalClasses: list of additional classes associated to node (example "class1 class2 ..."). It's important to put ::ng-deep before class definition.

If not provided, will be used the values set in the configuration.

link (configuration for edge)

An object that defines the appearance of the single link.

{
    color: string,
    width: string
}

color: defines the color of the single link.
width: defines the width of the single link.

If not provided, will be used the values set in the configuration.

source (configuration for edge)

An string that defines the id of the source node of the edge. It is required.

target (configuration for edge)

An string that defines the id of the target node of the edge. It is required.

nodes (configuration for cluster)

An array of string that defines the ids of the nodes that are contained in the cluster. It is required.

cluster (configuration for cluster)

An object that defines the appearance of the cluster.

{
    level: number,
    strokeColor: string,
    fillColor: string,
    label: {
        color: string,
        position: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center'
    }
}

level: defines the position of the cluster respect to the others. For example, if level is 0, the cluster will be the first and so on. If not provided, clusters will be ordered by the position in the data.
strokeColor: defines the border color of the cluster. If not provided, will be used the values set in the configuration.
fillColor: defines the inner color of the cluster. If not provided, will be used the values set in the configuration.
label: an object that defines the appearance of the cluster label. If not provided, will be used the values set in the configuration.

Component

When the configuration and the data are set, the last step is to import the component into the html.

<cm-flow-chart [graphConfigs]="graphConf" [nodes]="graphNodes"
               [edges]="graphEdges" [clusters]="graphClusters"></cm-flow-chart>

IMPORTANT: the component must be enclosed in an element with width and height set.

Example

Below an example

import {FlowChartGraphConfigurationInterface} from '@acimini/cm-d3-graphs';

const flowChartConfs: FlowChartGraphConfigurationInterface = {
    id: 'flow_chart',
    type: 'flow-chart',
    nodes: {
        shape: 'rect'
    },
    zoom: {
        minZoom: 0.5,
        maxZoom: 4
    },
    links: {
        arrowDirection: 'end'
    },
    orientation: 'horizontal',
    clusters: {