@acimini/cm-d3-graphs
Advanced tools
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 library is an Angular library that builds most common graphs with the help of d3 and dagrejs libraries.
With this library we have:
This is based on:
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 ],
...
})
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.
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.
<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.
Below it is shown the list of the available graph types.
Each graph section is divided in four parts:
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.
A string that sets the id of the chart. It is required.
A string that defines the type of the graph. It is required and must be histogram.
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
}
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.
An object that sets the events enabled on the graph.
{
clickOnElement: boolean
}
If not provided, default value will be used.
{
clickOnElement: false
}
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.
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.
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
It can be horizontal or vertical and defines the orientation of the graph.
If not provided, default value will be vertical.
An object that defines the appearance of the grid.
{
axisX: boolean,
axisY: boolean,
color: string
}
If not provided, default value will be used.
{
axisX: true,
axisY: true,
color: '#ccc'
}
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
}
If not provided, default value will be used.
{
showAxisX: true,
showAxisY: true,
invertAxisX: false,
invertAxisY: false,
labelXOrientation: 'horizontal',
labelYOrientation: 'horizontal',
lineColor: 'black',
textColor: 'black'
}
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
}
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
}
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.
An object that defines the visibility and the position of the legend.
{
enabled: boolean,
position: 'bottom' | 'top' | 'left' | 'right'
}
If not provided, default value will be used.
{
enabled: false,
position: 'right'
}
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.
A string that defines the id of the data.
If not provided, an auto-calculated value will be used.
A string that defines the label of the data. It is required.
An array of numbers that defines for each data the groups values. It is required.
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.
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.
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'}
]
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.
A string that sets the id of the chart. It is required.
A string that defines the type of the graph. It is required and must be pie.
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
}
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.
An object that sets the events enabled on the graph.
{
clickOnElement: boolean
}
If not provided, default value will be used.
{
clickOnElement: false
}
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.
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.
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
An object that defines the appearance of the slices.
{
colors: string[],
textColor: string
}
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.
An object that defines the visibility and the position of the legend.
{
enabled: boolean,
position: 'bottom' | 'top' | 'left' | 'right'
}
If not provided, default value will be used.
{
enabled: false,
position: 'right'
}
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.
A string that defines the id of the data.
If not provided, an auto-calculated value will be used.
A string that defines the label of the data. It is required.
A number that defines the value of the data. It is required.
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 slice.
An object that defines the appearance of the single slice.
{
color: string;
}
If not provided, the color from the configuration will be used.
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.
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}
]
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.
A string that sets the id of the chart. It is required.
A string that defines the type of the graph. It is required and must be donut.
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
}
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.
An object that sets the events enabled on the graph.
{
clickOnElement: boolean
}
If not provided, default value will be used.
{
clickOnElement: false
}
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.
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.
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
An object that defines the appearance of the slices.
{
colors: string[],
textColor: string
}
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.
An object that defines the visibility and the position of the legend.
{
enabled: boolean,
position: 'bottom' | 'top' | 'left' | 'right'
}
If not provided, default value will be used.
{
enabled: false,
position: 'right'
}
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.
A string that defines the id of the data.
If not provided, an auto-calculated value will be used.
A string that defines the label of the data. It is required.
A number that defines the value of the data. It is required.
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 slice.
An object that defines the appearance of the single slice.
{
color: string;
}
If not provided, the color from the configuration will be used.
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.
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}
]
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.
A string that sets the id of the chart. It is required.
A string that defines the type of the graph. It is required and must be line.
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
}
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.
An object that sets the events enabled on the graph.
{
clickOnElement: boolean
}
If not provided, default value will be used.
{
clickOnElement: false
}
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.
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.
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
It can be horizontal or vertical and defines the orientation of the graph.
If not provided, default value will be vertical.
An object that defines the appearance of the grid.
{
axisX: boolean,
axisY: boolean,
color: string
}
If not provided, default value will be used.
{
axisX: true,
axisY: true,
color: '#ccc'
}
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
}
If not provided, default value will be used.
{
showAxisX: true,
showAxisY: true,
invertAxisX: false,
invertAxisY: false,
labelXOrientation: 'horizontal',
labelYOrientation: 'horizontal',
lineColor: 'black',
textColor: 'black'
}
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
}
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
}
A boolean that enables the area under the line.
An object that defines the visibility and the position of the legend.
{
enabled: boolean,
position: 'bottom' | 'top' | 'left' | 'right'
}
If not provided, default value will be used.
{
enabled: false,
position: 'right'
}
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.
A string that defines the id of the data.
If not provided, an auto-calculated value will be used.
A string that defines the label of the data. It is required.
An array of numbers that defines for each data the groups values. It is required.
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 dot on the line.
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.
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'}
]
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.
A string that sets the id of the chart. It is required.
A string that defines the type of the graph. It is required and must be range-slider.
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
}
An object that sets the events enabled on the graph.
{
rangeChanging: boolean,
rangeChanged: boolean
}
If not provided, default value will be used.
{
rangeChanging: false,
rangeChanged: false
}
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.
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.
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
It can be horizontal or vertical and defines the orientation of the graph.
If not provided, default value will be horizontal.
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
}
If not provided, default value will be used.
{
showAxisX: true,
showAxisY: false,
invertAxisX: false,
invertAxisY: false,
labelXOrientation: 'horizontal',
labelYOrientation: 'horizontal',
lineColor: 'black',
textColor: 'black'
}
An object that defines the appearance of the track.
{
color: string,
width: number,
insetColor: string,
insetWidth: number,
fillColor: string,
fillWidth: number
}
If not provided, default value will be used.
{
color: '#bbb',
width: 6,
insetColor: '#eee',
insetWidth: 4,
fillColor: '#3883fa',
fillWidth: 4
}
An object that defines the values' interval.
{
type: 'discrete' | 'continuous',
step: number
}
If not provided, default value will be used.
{
type: 'discrete'
}
An object that defines the appearance of the handle.
{
strokeColor: string,
fillColor: string,
type: 'single' | 'double',
showTooltip: 'never' | 'always' | 'on-hover'
}
If not provided, default value will be used.
{
strokeColor: '#777',
fillColor: 'white',
type: 'double',
showTooltip: 'always'
}
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.
A string that defines the id of the data.
If not provided, an auto-calculated value will be used.
A string that defines the label of the data. It is required.
A number that defines the value of the data. It is required.
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 dot on the line.
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.
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 }
]
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.
A string that sets the id of the chart. It is required.
A string that defines the type of the graph. It is required and must be tree.
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
}
An object that sets the events enabled on the graph.
{
clickOnElement: boolean
}
If not provided, default value will be used.
{
clickOnElement: false
}
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.
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.
It can be horizontal or vertical and defines the orientation of the graph.
If not provided, default value will be vertical.
An object that defines the zoom configuration.
{
minZoom: number,
maxZoom: number
}
If not provided, no limits are set.
An object that defines the appearance of the nodes.
{
shape: 'circle' | 'rect' | 'square' | 'rhombus',
collapsedColor: string,
expandedColor: string,
strokeColor: string,
circleRadius: number,
rectangleDimensions: { width: number, height: number },
squareDimensions: number,
rhombusDimensions: number,
distanceBetweenBrothers: number,
distanceBetweenCousins: number,
distanceBetweenParentAndChild: number,
expandable: boolean,
maxInitialExpandedLevel: number
}
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
}
An object that defines the appearance of the links.
{
color: string,
arrow: boolean,
arrowDirection: 'start' | 'end'
}
If not provided, default value will be used.
{
color: 'lightsteelblue',
arrow: true,
arrowDirection: 'end'
}
An object that defines the appearance of the label.
{
color: string,
padding: {top: number, left: number, right: number, bottom: number}
}
If not provided, default value will be used.
{
color: 'black',
padding: {top: 5, left: 10, right: 10, bottom: 5}
}
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.
A string that defines the id of the data.
If not provided, an auto-calculated value will be used.
A string that defines the label of the data. It is required.
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 node.
An object that defines the appearance of the single node.
{
shape: 'circle' | 'rect' | 'square' | 'rhombus',
collapsedColor: string,
expandedColor: string,
strokeColor: string,
labelColor: string
}
If not provided, will be used the values set in the configuration.
An object that defines the appearance of the single link.
{
color: string,
}
If not provided, will be used the values set in the configuration.
An array of object where the single element has the same structure of the single node.
{
children: TreeGraphDataInterface[]
}
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.
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'
}
]
}
]
}
]
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.
A string that sets the id of the chart. It is required.
A string that defines the type of the graph. It is required and must be flow-chart.
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
}
An object that sets the events enabled on the graph.
{
clickOnElement: boolean
}
If not provided, default value will be used.
{
clickOnElement: false
}
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.
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.
It can be horizontal or vertical and defines the orientation of the graph.
If not provided, default value will be vertical.
An object that defines the zoom configuration.
{
minZoom: number,
maxZoom: number
}
If not provided, no limits are set.
An object that defines the appearance of the nodes.
{
shape: 'circle' | 'rect' | 'square' | 'rhombus',
collapsedColor: string,
expandedColor: string,
strokeColor: string,
circleRadius: number,
rectangleDimensions: { width: number, height: number },
squareDimensions: number,
rhombusDimensions: number,
distanceBetweenBrothers: number,
distanceBetweenCousins: number,
distanceBetweenParentAndChild: number,
expandable: boolean,
maxInitialExpandedLevel: number,
icon: string
}
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
}
An object that defines the appearance of the links.
{
color: string,
arrow: boolean,
arrowDirection: 'start' | 'end'
}
If not provided, default value will be used.
{
color: 'lightsteelblue',
arrow: true,
arrowDirection: 'end'
}
An object that defines the appearance of the label.
{
color: string,
padding: {top: number, left: number, right: number, bottom: number}
}
If not provided, default value will be used.
{
color: 'black',
padding: {top: 5, left: 10, right: 10, bottom: 5}
}
An object that defines the appearance of the clusters.
{
position: 'default' | 'full-space',
strokeColor: string,
fillColor: string,
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}
};
}
If not provided, default value will be used.
{
strokeColor: 'lightsteelblue',
fillColor: 'transparent',
position: 'default',
label: {
color: 'lightsteelblue',
position: 'center',
'font-size': 25,
padding: {top: 5, left: 10, right: 10, bottom: 5}
}
}
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.
A string that defines the id of the data. It is required.
A string that defines the label of the data. It is required.
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 node.
An object that defines the appearance of the single node.
{
shape: 'circle' | 'rect' | 'square' | 'rhombus',
collapsedColor: string,
expandedColor: string,
strokeColor: string,
labelColor: string,
icon: string
}
If not provided, will be used the values set in the configuration.
An object that defines the appearance of the single link.
{
color: string
}
If not provided, will be used the values set in the configuration.
An string that defines the id of the source node of the edge. It is required.
An string that defines the id of the target node of the edge. It is required.
An array of string that defines the ids of the nodes that are contained in the cluster. It is required.
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'
}
}
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.
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: {
position: 'full-space',
label: {
position: 'bottom-right'
}
},
overflowY: false
}
import {FlowChartGraphDataInterface} from '@acimini/cm-d3-graphs';
const nodesData: FlowChartGraphDataInterface[] = [
{
id: 'a',
label: 'Node1',
node: {
shape: 'square'
}
},
{
id: 'b',
label: 'Node2'
},
{
id: 'c',
label: 'Node3'
},
{
id: 'd',
label: 'Node4 with a very very long text'
},
{
id: 'e',
label: 'Node5'
},
{
id: 'f',
label: 'Node6'
},
{
id: 'g',
label: 'Node7'
},
{
id: 'h',
label: 'Node8'
},
{
id: 'i',
label: 'Node9'
},
{
id: 'l',
label: 'Node10'
},
{
id: 'm',
label: 'Node11'
},
{
id: 'n',
label: 'Node12'
},
{
id: 'o',
label: 'Node13',
node: {
shape: 'rhombus'
}
},
{
id: 'p',
label: 'Node14'
}
];
const edgesData: FlowChartGraphDataInterface[] = [
{
source: 'a',
target: 'b'
},
{
source: 'a',
target: 'c'
},
{
source: 'c',
target: 'd'
},
{
source: 'c',
target: 'e'
},
{
source: 'b',
target: 'f'
},
{
source: 'b',
target: 'g'
},
{
source: 'g',
target: 'h'
},
{
source: 'g',
target: 'i'
},
{
source: 'e',
target: 'l'
},
{
source: 'l',
target: 'm'
},
{
source: 'l',
target: 'n'
},
{
source: 'i',
target: 'o'
},
{
source: 'o',
target: 'l'
},
{
source: 'f',
target: 'h'
},
{
source: 'c',
target: 'p'
},
];
const clustersData: FlowChartGraphDataInterface[] = [
{
label: 'Fase 1',
nodes: ['a', 'b', 'c', 'f', 'g', 'h', 'i'],
cluster: {
level: 0,
label: {
position: 'bottom-right'
}
}
},
{
label: 'Fase 2',
nodes: ['d', 'o'],
cluster: {
level: 2,
label: {
position: 'bottom-left'
}
}
},
{
label: 'Fase 3',
nodes: ['e', 'p'],
cluster: {
level: 1
}
},
{
label: 'Fase 4',
nodes: ['l', 'm', 'n'],
cluster: {
level: 3
}
}
];
To configure correctly the graph, it is possible to use the BubbleChartGraphConfigurationInterface
import {BubbleChartGraphConfigurationInterface} from '@acimini/cm-d3-graphs';
const bubbleConf: BubbleChartGraphConfigurationInterface = {
...
}
Below a list with all the configurations available for the bubble chart.
Most of the configurations are optional and, if a value is not provided, a default one will be set.
A string that sets the id of the chart. It is required.
A string that defines the type of the graph. It is required and must be bubble-chart.
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
}
An object that sets the events enabled on the graph.
{
clickOnElement: boolean
}
If not provided, default value will be used.
{
clickOnElement: false
}
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.
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.
An object that defines the appearance of the nodes.
{
backgroundStartColor: string,
backgroundEndColor: string,
strokeColorOnHover: string,
expandable: boolean,
maxInitialExpandedLevel: number
}
If not provided, default value will be used.
{
backgroundStartColor: 'lightsteelblue',
backgroundEndColor: 'steelblue',
strokeColorOnHover: 'darkgrey',
expandable: true,
maxInitialExpandedLevel: 2
}
An object that defines the appearance of the label.
{
color: string
}
If not provided, default value will be used.
{
color: 'black'
}
The data for the bubble chart have a specific format, defined by the BubbleChartGraphDataInterface
import {BubbleChartGraphDataInterface} from '@acimini/cm-d3-graphs';
const bubbleData: BubbleChartGraphDataInterface[] = [
{...},
...
]
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.
A string that defines the id of the data.
If not provided, an auto-calculated value will be used.
A string that defines the label of the data. It is required.
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 node.
A number that defines the value of the data. It is required.
An object that defines the appearance of the single node.
{
strokeColorOnHover: string
}
If not provided, will be used the values set in the configuration.
An array of object where the single element has the same structure of the single node.
{
children: BubbleChartGraphDataInterface[]
}
When the configuration and the data are set, the last step is to import the component into the html.
<cm-bubble-chart [graphConfigs]="graphConf" [graphData]="graphData"></cm-bubble-chart>
IMPORTANT: the component must be enclosed in an element with width and height set.
Below an example
import {BubbleChartGraphConfigurationInterface} from '@acimini/cm-d3-graphs';
const bubbleConfs: BubbleChartGraphConfigurationInterface = {
id: 'bubble_chart',
type: 'bubble-chart',
nodes: {
expandable: true
}
}
import {BubbleChartGraphDataInterface} from '@acimini/cm-d3-graphs';
const bubbleData: BubbleChartGraphDataInterface[] = [
{
label: 'flare',
children: [{
label: 'analytics',
children: [{
label: 'cluster',
children: [{
label: 'AgglomerativeCluster',
value: 3938
}, {
label: 'CommunityStructure',
value: 3812
}, {
label: 'HierarchicalCluster',
value: 6714
}, {
label: 'MergeEdge',
value: 743
}]
}, {
label: 'graph',
children: [{
label: 'BetweennessCentrality',
value: 3534
}, {
label: 'LinkDistance',
value: 5731
}, {
label: 'MaxFlowMinCut',
value: 7840
}, {
label: 'ShortestPaths',
value: 5914
}, {
label: 'SpanningTree',
value: 3416
}]
}, {
label: 'optimization',
children: [{
label: 'AspectRatioBanker',
value: 7074
}]
}]
}, {
label: 'animate',
children: [{
label: 'Easing',
value: 17010
}, {
label: 'FunctionSequence',
value: 5842
}, {
label: 'interpolate',
children: [{
label: 'ArrayInterpolator',
value: 1983
}, {
label: 'ColorInterpolator',
value: 2047
}, {
label: 'DateInterpolator',
value: 1375
}, {
label: 'Interpolator',
value: 8746
}, {
label: 'MatrixInterpolator',
value: 2202
}, {
label: 'NumberInterpolator',
value: 1382
}, {
label: 'ObjectInterpolator',
value: 1629
}, {
label: 'PointInterpolator',
value: 1675
}, {
label: 'RectangleInterpolator',
value: 2042
}]
}, {
label: 'ISchedulable',
value: 1041
}, {
label: 'Parallel',
value: 5176
}, {
label: 'Pause',
value: 449
}, {
label: 'Scheduler',
value: 5593
}, {
label: 'Sequence',
value: 5534
}, {
label: 'Transition',
value: 9201
}, {
label: 'Transitioner',
value: 19975
}, {
label: 'TransitionEvent',
value: 1116
}, {
label: 'Tween',
value: 6006
}]
}, {
label: 'data',
children: [{
label: 'converters',
children: [{
label: 'Converters',
value: 721
}, {
label: 'DelimitedTextConverter',
value: 4294
}, {
label: 'GraphMLConverter',
value: 9800
}, {
label: 'IDataConverter',
value: 1314
}, {
label: 'JSONConverter',
value: 2220
}]
}, {
label: 'DataField',
value: 1759
}, {
label: 'DataSchema',
value: 2165
}, {
label: 'DataSet',
value: 586
}, {
label: 'DataSource',
value: 3331
}, {
label: 'DataTable',
value: 772
}, {
label: 'DataUtil',
value: 3322
}]
}, {
label: 'display',
children: [{
label: 'DirtySprite',
value: 8833
}, {
label: 'LineSprite',
value: 1732
}, {
label: 'RectSprite',
value: 3623
}, {
label: 'TextSprite',
value: 10066
}]
}, {
label: 'flex',
children: [{
label: 'FlareVis',
value: 4116
}]
}, {
label: 'physics',
children: [{
label: 'DragForce',
value: 1082
}, {
label: 'GravityForce',
value: 1336
}, {
label: 'IForce',
value: 319
}, {
label: 'NBodyForce',
value: 10498
}, {
label: 'Particle',
value: 2822
}, {
label: 'Simulation',
value: 9983
}, {
label: 'Spring',
value: 2213
}, {
label: 'SpringForce',
value: 1681
}]
}, {
label: 'query',
children: [{
label: 'AggregateExpression',
value: 1616
}, {
label: 'And',
value: 1027
}, {
label: 'Arithmetic',
value: 3891
}, {
label: 'Average',
value: 891
}, {
label: 'BinaryExpression',
value: 2893
}, {
label: 'Comparison',
value: 5103
}, {
label: 'CompositeExpression',
value: 3677
}, {
label: 'Count',
value: 781
}, {
label: 'DateUtil',
value: 4141
}, {
label: 'Distinct',
value: 933
}, {
label: 'Expression',
value: 5130
}, {
label: 'ExpressionIterator',
value: 3617
}, {
label: 'Fn',
value: 3240
}, {
label: 'If',
value: 2732
}, {
label: 'IsA',
value: 2039
}, {
label: 'Literal',
value: 1214
}, {
label: 'Match',
value: 3748
}, {
label: 'Maximum',
value: 843
}, {
label: 'methods',
children: [{
label: 'add',
value: 593
}, {
label: 'and',
value: 330
}, {
label: 'average',
value: 287
}, {
label: 'count',
value: 277
}, {
label: 'distinct',
value: 292
}, {
label: 'div',
value: 595
}, {
label: 'eq',
value: 594
}, {
label: 'fn',
value: 460
}, {
label: 'gt',
value: 603
}, {
label: 'gte',
value: 625
}, {
label: 'iff',
value: 748
}, {
label: 'isa',
value: 461
}, {
label: 'lt',
value: 597
}, {
label: 'lte',
value: 619
}, {
label: 'max',
value: 283
}, {
label: 'min',
value: 283
}, {
label: 'mod',
value: 591
}, {
label: 'mul',
value: 603
}, {
label: 'neq',
value: 599
}, {
label: 'not',
value: 386
}, {
label: 'or',
value: 323
}, {
label: 'orderby',
value: 307
}, {
label: 'range',
value: 772
}, {
label: 'select',
value: 296
}, {
label: 'stddev',
value: 363
}, {
label: 'sub',
value: 600
}, {
label: 'sum',
value: 280
}, {
label: 'update',
value: 307
}, {
label: 'variance',
value: 335
}, {
label: 'where',
value: 299
}, {
label: 'xor',
value: 354
}, {
label: '_',
value: 264
}]
}, {
label: 'Minimum',
value: 843
}, {
label: 'Not',
value: 1554
}, {
label: 'Or',
value: 970
}, {
label: 'Query',
value: 13896
}, {
label: 'Range',
value: 1594
}, {
label: 'StringUtil',
value: 4130
}, {
label: 'Sum',
value: 791
}, {
label: 'Variable',
value: 1124
}, {
label: 'Variance',
value: 1876
}, {
label: 'Xor',
value: 1101
}]
}, {
label: 'scale',
children: [{
label: 'IScaleMap',
value: 2105
}, {
label: 'LinearScale',
value: 1316
}, {
label: 'LogScale',
value: 3151
}, {
label: 'OrdinalScale',
value: 3770
}, {
label: 'QuantileScale',
value: 2435
}, {
label: 'QuantitativeScale',
value: 4839
}, {
label: 'RootScale',
value: 1756
}, {
label: 'Scale',
value: 4268
}, {
label: 'ScaleType',
value: 1821
}, {
label: 'TimeScale',
value: 5833
}]
}, {
label: 'util',
children: [{
label: 'Arrays',
value: 8258
}, {
label: 'Colors',
value: 10001
}, {
label: 'Dates',
value: 8217
}, {
label: 'Displays',
value: 12555
}, {
label: 'Filter',
value: 2324
}, {
label: 'Geometry',
value: 10993
}, {
label: 'heap',
children: [{
label: 'FibonacciHeap',
value: 9354
}, {
label: 'HeapNode',
value: 1233
}]
}, {
label: 'IEvaluable',
value: 335
}, {
label: 'IPredicate',
value: 383
}, {
label: 'IValueProxy',
value: 874
}, {
label: 'math',
children: [{
label: 'DenseMatrix',
value: 3165
}, {
label: 'IMatrix',
value: 2815
}, {
label: 'SparseMatrix',
value: 3366
}]
}, {
label: 'Maths',
value: 17705
}, {
label: 'Orientation',
value: 1486
}, {
label: 'palette',
children: [{
label: 'ColorPalette',
value: 6367
}, {
label: 'Palette',
value: 1229
}, {
label: 'ShapePalette',
value: 2059
}, {
label: 'SizePalette',
value: 2291
}]
}, {
label: 'Property',
value: 5559
}, {
label: 'Shapes',
value: 19118
}, {
label: 'Sort',
value: 6887
}, {
label: 'Stats',
value: 6557
}, {
label: 'Strings',
value: 22026
}]
}, {
label: 'vis',
children: [{
label: 'axis',
children: [{
label: 'Axes',
value: 1302
}, {
label: 'Axis',
value: 24593
}, {
label: 'AxisGridLine',
value: 652
}, {
label: 'AxisLabel',
value: 636
}, {
label: 'CartesianAxes',
value: 6703
}]
}, {
label: 'controls',
children: [{
label: 'AnchorControl',
value: 2138
}, {
label: 'ClickControl',
value: 3824
}, {
label: 'Control',
value: 1353
}, {
label: 'ControlList',
value: 4665
}, {
label: 'DragControl',
value: 2649
}, {
label: 'ExpandControl',
value: 2832
}, {
label: 'HoverControl',
value: 4896
}, {
label: 'IControl',
value: 763
}, {
label: 'PanZoomControl',
value: 5222
}, {
label: 'SelectionControl',
value: 7862
}, {
label: 'TooltipControl',
value: 8435
}]
}, {
label: 'data',
children: [{
label: 'Data',
value: 20544
}, {
label: 'DataList',
value: 19788
}, {
label: 'DataSprite',
value: 10349
}, {
label: 'EdgeSprite',
value: 3301
}, {
label: 'NodeSprite',
value: 19382
}, {
label: 'render',
children: [{
label: 'ArrowType',
value: 698
}, {
label: 'EdgeRenderer',
value: 5569
}, {
label: 'IRenderer',
value: 353
}, {
label: 'ShapeRenderer',
value: 2247
}]
}, {
label: 'ScaleBinding',
value: 11275
}, {
label: 'Tree',
value: 7147
}, {
label: 'TreeBuilder',
value: 9930
}]
}, {
label: 'events',
children: [{
label: 'DataEvent',
value: 2313
}, {
label: 'SelectionEvent',
value: 1880
}, {
label: 'TooltipEvent',
value: 1701
}, {
label: 'VisualizationEvent',
value: 1117
}]
}, {
label: 'legend',
children: [{
label: 'Legend',
value: 20859
}, {
label: 'LegendItem',
value: 4614
}, {
label: 'LegendRange',
value: 10530
}]
}, {
label: 'operator',
children: [{
label: 'distortion',
children: [{
label: 'BifocalDistortion',
value: 4461
}, {
label: 'Distortion',
value: 6314
}, {
label: 'FisheyeDistortion',
value: 3444
}]
}, {
label: 'encoder',
children: [{
label: 'ColorEncoder',
value: 3179
}, {
label: 'Encoder',
value: 4060
}, {
label: 'PropertyEncoder',
value: 4138
}, {
label: 'ShapeEncoder',
value: 1690
}, {
label: 'SizeEncoder',
value: 1830
}]
}, {
label: 'filter',
children: [{
label: 'FisheyeTreeFilter',
value: 5219
}, {
label: 'GraphDistanceFilter',
value: 3165
}, {
label: 'VisibilityFilter',
value: 3509
}]
}, {
label: 'IOperator',
value: 1286
}, {
label: 'label',
children: [{
label: 'Labeler',
value: 9956
}, {
label: 'RadialLabeler',
value: 3899
}, {
label: 'StackedAreaLabeler',
value: 3202
}]
}, {
label: 'layout',
children: [{
label: 'AxisLayout',
value: 6725
}, {
label: 'BundledEdgeRouter',
value: 3727
}, {
label: 'CircleLayout',
value: 9317
}, {
label: 'CirclePackingLayout',
value: 12003
}, {
label: 'DendrogramLayout',
value: 4853
}, {
label: 'ForceDirectedLayout',
value: 8411
}, {
label: 'IcicleTreeLayout',
value: 4864
}, {
label: 'IndentedTreeLayout',
value: 3174
}, {
label: 'Layout',
value: 7881
}, {
label: 'NodeLinkTreeLayout',
value: 12870
}, {
label: 'PieLayout',
value: 2728
}, {
label: 'RadialTreeLayout',
value: 12348
}, {
label: 'RandomLayout',
value: 870
}, {
label: 'StackedAreaLayout',
value: 9121
}, {
label: 'TreeMapLayout',
value: 9191
}]
}, {
label: 'Operator',
value: 2490
}, {
label: 'OperatorList',
value: 5248
}, {
label: 'OperatorSequence',
value: 4190
}, {
label: 'OperatorSwitch',
value: 2581
}, {
label: 'SortOperator',
value: 2023
}]
}, {
label: 'Visualization',
value: 16540
}]
}]
}
]
This project is licensed under the Apache License 2.0 - see the LICENSE.md file for details.
FAQs
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
The npm package @acimini/cm-d3-graphs receives a total of 2 weekly downloads. As such, @acimini/cm-d3-graphs popularity was classified as not popular.
We found that @acimini/cm-d3-graphs demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.