-
Notifications
You must be signed in to change notification settings - Fork 182
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(core): create alluvial chart (#1132)
* add d3-sankey package * create enum of all alluvial related events * create basic alluvial chart * add alluvial chart options * create alluvial chart wrapper * fix linting issues * define default alluvial configs * create alluvial react component * create alluvial angular component * Add simple alluvial demo under complex charts * remove skeleton import and comments * add style for themes * add logic to add space between node and textbox * add configs & node group title * add line event listeners * declare and export alluvial in ngmodule * add node event listener * Add multiple category alluvial demo * add monochrome option * add combined monochrome and nodePadding demo * remove stroke from node rectangles * Add delay to events to stop flashing behaviour * add graph traversal to highlight links that pass node * set minimum node padding to 24 * add units in aria-label and tooltip * update demo names * export alluvial chart * add condition to prevent firefox error * feat(core): create alluvial chart closes #871 * filter out unused nodes from rendering * update debounce for line events * update debounce for node events * order complex demos alphabetically * decrease debounce time * improve link hover debounce * exclude legend from alluvial * fix review changes * wrap alluvial options in respective key * improve node debounce highlighting * deep clone user passed data when creating graph * remove trailing space in aria-label
- Loading branch information
Showing
28 changed files
with
1,055 additions
and
19 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
import { | ||
Component, | ||
AfterViewInit | ||
} from "@angular/core"; | ||
|
||
import { BaseChart } from "./base-chart.component"; | ||
|
||
import { AlluvialChart } from "@carbon/charts"; | ||
|
||
/** | ||
* Wrapper around `Alluvial` in carbon charts library | ||
* | ||
* Most functions just call their equivalent from the chart library. | ||
*/ | ||
@Component({ | ||
selector: "ibm-alluvial-chart", | ||
template: `` | ||
}) | ||
export class AlluvialChartComponent extends BaseChart implements AfterViewInit { | ||
/** | ||
* Runs after view init to create a chart, attach it to `elementRef` and draw it. | ||
*/ | ||
ngAfterViewInit() { | ||
this.chart = new AlluvialChart( | ||
this.elementRef.nativeElement, | ||
{ | ||
data: this.data, | ||
options: this.options | ||
} | ||
); | ||
|
||
Object.assign(this, this.chart); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,134 @@ | ||
export const alluvialSimpleData = [ | ||
{ source: 'A', target: 'X', value: 3 }, | ||
{ source: 'A', target: 'Y', value: 5 }, | ||
{ source: 'A', target: 'Z', value: 8 }, | ||
{ source: 'B', target: 'X', value: 6 }, | ||
{ source: 'B', target: 'Y', value: 1 }, | ||
{ source: 'B', target: 'Z', value: 7 }, | ||
{ source: 'C', target: 'X', value: 5 }, | ||
{ source: 'C', target: 'Y', value: 5 }, | ||
{ source: 'C', target: 'Z', value: 1 }, | ||
]; | ||
|
||
export const alluvialSimpleOptions = { | ||
title: 'Alluvial', | ||
alluvial: { | ||
units: 'GB', | ||
nodes: [ | ||
{ name: 'A', category: 'Start' }, | ||
{ name: 'B', category: 'Start' }, | ||
{ name: 'C', category: 'Start' }, | ||
{ name: 'X', category: 'Finish' }, | ||
{ name: 'Y', category: 'Finish' }, | ||
{ name: 'Z', category: 'Finish' }, | ||
], | ||
}, | ||
}; | ||
|
||
export const alluvialMultipleCategoryOptions = { | ||
title: 'Alluvial (multiple categories)', | ||
alluvial: { | ||
nodes: [ | ||
{ name: '1st', category: 'Class' }, | ||
{ name: '2nd', category: 'Class' }, | ||
{ name: 'Crew', category: 'Class' }, | ||
{ name: 'Male', category: 'Sex' }, | ||
{ name: 'Female', category: 'Sex' }, | ||
{ name: 'Child', category: 'Age' }, | ||
{ name: 'Adult', category: 'Age' }, | ||
{ name: 'Yes', category: 'Survived' }, | ||
{ name: 'No', category: 'Survived' }, | ||
], | ||
}, | ||
}; | ||
|
||
export const alluvialMultipleCategoryData = [ | ||
{ | ||
source: '1st', | ||
target: 'Female', | ||
value: 25, | ||
}, | ||
{ | ||
source: '1st', | ||
target: 'Male', | ||
value: 35, | ||
}, | ||
{ | ||
source: '2nd', | ||
target: 'Female', | ||
value: 35, | ||
}, | ||
{ | ||
source: '2nd', | ||
target: 'Male', | ||
value: 50, | ||
}, | ||
{ | ||
source: 'Crew', | ||
target: 'Male', | ||
value: 43, | ||
}, | ||
{ | ||
source: 'Crew', | ||
target: 'Female', | ||
value: 18, | ||
}, | ||
{ | ||
source: 'Male', | ||
target: 'Child', | ||
value: 38, | ||
}, | ||
{ | ||
source: 'Male', | ||
target: 'Adult', | ||
value: 90, | ||
}, | ||
{ | ||
source: 'Female', | ||
target: 'Adult', | ||
value: 52, | ||
}, | ||
{ | ||
source: 'Female', | ||
target: 'Child', | ||
value: 26, | ||
}, | ||
{ | ||
source: 'Child', | ||
target: 'Yes', | ||
value: 58, | ||
}, | ||
{ | ||
source: 'Child', | ||
target: 'No', | ||
value: 6, | ||
}, | ||
{ | ||
source: 'Adult', | ||
target: 'Yes', | ||
value: 22, | ||
}, | ||
{ | ||
source: 'Adult', | ||
target: 'No', | ||
value: 120, | ||
}, | ||
]; | ||
|
||
export const alluvialMonochromeData = alluvialSimpleData; | ||
|
||
export const alluvialMonochromeOptions = { | ||
title: 'Alluvial (monochrome with custom node padding)', | ||
alluvial: { | ||
nodes: [ | ||
{ name: 'A', category: 'Start' }, | ||
{ name: 'B', category: 'Start' }, | ||
{ name: 'C', category: 'Start' }, | ||
{ name: 'X', category: 'Finish' }, | ||
{ name: 'Y', category: 'Finish' }, | ||
{ name: 'Z', category: 'Finish' }, | ||
], | ||
monochrome: true, | ||
nodePadding: 33, | ||
}, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
// Internal Imports | ||
import { Chart } from '../chart'; | ||
import * as Configuration from '../configuration'; | ||
import { ChartConfig, AlluvialChartOptions } from '../interfaces/index'; | ||
import { Tools } from '../tools'; | ||
|
||
// Components | ||
import { | ||
Alluvial, | ||
// the imports below are needed because of typescript bug (error TS4029) | ||
Tooltip, | ||
Legend, | ||
LayoutComponent, | ||
} from '../components/index'; | ||
|
||
export class AlluvialChart extends Chart { | ||
constructor( | ||
holder: Element, | ||
chartConfigs: ChartConfig<AlluvialChartOptions> | ||
) { | ||
super(holder, chartConfigs); | ||
|
||
// Merge the default options for this chart | ||
// With the user provided options | ||
this.model.setOptions( | ||
Tools.mergeDefaultChartOptions( | ||
Configuration.options.alluvialChart, | ||
chartConfigs.options | ||
) | ||
); | ||
|
||
// Initialize data, services, components etc. | ||
this.init(holder, chartConfigs); | ||
} | ||
|
||
getComponents() { | ||
// Specify what to render inside the graph-frame | ||
const graphFrameComponents: any = [ | ||
new Alluvial(this.model, this.services), | ||
]; | ||
|
||
const components: any[] = this.getChartComponents( | ||
graphFrameComponents, | ||
{ | ||
excludeLegend: true, | ||
} | ||
); | ||
return components; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.