@asoftwareworld/charts
Version:
`ASW Charts` helps you with the Highcharts library comes with all the tools you need to create reliable and secure data visualizations and Built on Angular.
366 lines (359 loc) • 15.1 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output, ViewChild, HostListener, NgModule } from '@angular/core';
import { GridOptionsEnum, CurrencyCodeEnum, LegendPositionEnum, ChartLegendTypeEnum, LegendLayoutEnum, AswChartConstants, AswCurrencyPipe } from '@asoftwareworld/charts/core';
import { ObjectUtils } from '@asoftwareworld/charts/utils';
import * as Highcharts from 'highcharts';
import HighchartsSankey from 'highcharts/modules/sankey';
import * as i1 from '@angular/common';
import { CommonModule, PercentPipe, CurrencyPipe } from '@angular/common';
HighchartsSankey(Highcharts);
class AswSankeyChart {
constructor(currencyPipe) {
this.currencyPipe = currencyPipe;
this.deviceSize = GridOptionsEnum.Large;
this.viewInitialized = false;
this.isLegendSort = true;
this.currencyCode = CurrencyCodeEnum.Blank;
this.legendPosition = LegendPositionEnum.Right;
this.legendType = ChartLegendTypeEnum.Both;
this.legendWidthPx = 250;
this.legendLayout = LegendLayoutEnum.Vertical;
this.sankeyClick = new EventEmitter();
}
ngOnChanges() {
if (!this.viewInitialized) {
return;
}
this.initializeChart();
}
ngAfterViewInit() {
this.viewInitialized = true;
this.initializeChart();
}
initializeChart() {
if (this.config) {
this.cloneConfiguration = this.config;
const containerWidth = this.sankeyChart.nativeElement.clientWidth;
this.deviceSize = ObjectUtils.findDeviceSize(containerWidth);
this.removeChartCredit();
this.setSankeyChartTooltip();
const series = this.cloneConfiguration.series;
if (this.legendLayout === LegendLayoutEnum.Vertical) {
// this.setSankeyChartLegendOption(this.legendWidthPx);
}
this.clickOnSankey();
Highcharts.chart(this.sankeyChart.nativeElement, this.cloneConfiguration);
}
}
onResize() {
this.initializeChart();
}
removeChartCredit() {
this.cloneConfiguration.credits = {
enabled: false
};
}
setSankeyChartTooltip() {
const this$ = this;
this.cloneConfiguration.tooltip = {
useHTML: true,
split: false,
backgroundColor: AswChartConstants.blackColor,
borderColor: AswChartConstants.blackColor,
style: {
color: AswChartConstants.whiteColor,
fontWeight: AswChartConstants.fontWeight
},
borderRadius: 0,
enabled: true,
formatter() {
const point = this.point;
return `
<div class="row">
<div class="col-md-12 text-end text-right">
<span style="color: ${point.color}">\u25A0</span>
<strong>${point.series.name}</strong>
</div>
<div class="col-md-12 text-end text-right">
${point.options.weight
? point.options.from + ' → ' + point.options.to + ': ' + point.options.weight
: point.options.id + ': ' + point.sum}
</div>
</div>
`;
}
};
}
clickOnSankey() {
if (this.cloneConfiguration.plotOptions) {
// tslint:disable-next-line:no-non-null-assertion
this.cloneConfiguration.plotOptions.sankey.point = {
events: {
click: ((event) => {
const pointClickEvent = {
name: event.point.series.name,
from: event.point.options.from ?? event.point.id,
to: event.point.options.to,
weight: event.point.options.weight,
sum: event.point.sum
};
this.sankeyClick.emit(pointClickEvent);
})
}
};
}
else {
this.cloneConfiguration.plotOptions = {
sankey: {
point: {
events: {
click: ((event) => {
const pointClickEvent = {
name: event.point.series.name,
from: event.point.options.from ?? event.point.id,
to: event.point.options.to,
weight: event.point.options.weight,
sum: event.point.sum
};
this.sankeyClick.emit(pointClickEvent);
})
}
}
}
};
}
}
setDonutChartSeriesOptions(series) {
series.forEach((seriesOption) => {
seriesOption.allowPointSelect = true;
seriesOption.showInLegend = true;
// if (this.chartType === ChartTypeEnum.Donut) {
// seriesOption.innerSize = AswChartConstants.innerSize;
// }
// if (this.isMute) {
// seriesOption.opacity = 0.35;
// seriesOption.states = {
// hover: {
// enabled: false
// },
// inactive: {
// enabled: false
// }
// };
// seriesOption.slicedOffset = 0;
// }
seriesOption.cursor = AswChartConstants.pointer;
const data = seriesOption.data;
this.handleNegativeSeriesData(data);
const sortedSeriesOptionData = this.isLegendSort ? this.sortSeriesData(data) : data;
seriesOption.data = sortedSeriesOptionData;
});
}
sortSeriesData(data) {
if (this.legendType === ChartLegendTypeEnum.Default) {
data.sort((a, b) => {
return ('' + a.name).localeCompare(b.name);
});
return data;
}
else {
data.sort((a, b) => {
if (a.y && b.y) {
return a.value - b.value;
}
else {
return 0;
}
});
data.reverse();
return data;
}
}
handleNegativeSeriesData(data) {
data.forEach((element) => {
element.value = element.y;
element.y = element.y ? Math.abs(element.y) : 0.001;
});
}
setFontSize() {
return this.deviceSize === GridOptionsEnum.ExtraSmall ? AswChartConstants.fontSize14 : AswChartConstants.fontSize16;
}
setSankeyChartLegendOption(legendWidthPx) {
const this$ = this;
this.cloneConfiguration.legend = {
useHTML: true,
enabled: true,
floating: false,
align: this.setLegendAlignment(),
layout: 'vertical',
verticalAlign: this.setLegendVerticalAlignment(),
symbolHeight: 10,
symbolWidth: 10,
symbolRadius: 0,
itemMarginTop: 3,
itemMarginBottom: 3,
itemStyle: {
fontSize: this.deviceSize === GridOptionsEnum.ExtraSmall ? '12px' : '14px',
fontWeight: AswChartConstants.fontWeight
},
width: legendWidthPx + 15,
title: {
text: this$.setLineChartLegendWithHeader(legendWidthPx + 15),
style: {
fontSize: this.deviceSize === GridOptionsEnum.ExtraSmall
? AswChartConstants.fontSize12 : AswChartConstants.fontSize14,
color: '#6c757d',
fontWeight: AswChartConstants.fontWeight,
fontFamily: '500 14px/20px Google Sans Text,Arial,Helvetica,sans-serif'
}
},
labelFormatter() {
const point = this;
const value = point.yData.reduce((acc, cur) => acc + cur, 0);
return this$.setLineChartLegendWithHeader(legendWidthPx, point.name, value);
}
};
}
setLegendAlignment() {
if (this.deviceSize === GridOptionsEnum.ExtraSmall) {
return 'center';
}
else if (this.legendPosition === LegendPositionEnum.Right) {
return LegendPositionEnum.Right;
}
else if (this.legendPosition === LegendPositionEnum.Left) {
return LegendPositionEnum.Left;
}
else {
return 'center';
}
}
setLegendVerticalAlignment() {
if (this.deviceSize === GridOptionsEnum.ExtraSmall) {
return LegendPositionEnum.Bottom;
}
else if (this.legendPosition === LegendPositionEnum.Right) {
return 'middle';
}
else if (this.legendPosition === LegendPositionEnum.Left) {
return 'middle';
}
else {
return LegendPositionEnum.Bottom;
}
}
setLineChartLegendWithHeader(legendWidthPx, name, value) {
let legendCategoryWidthPx;
let legendValueWidthPx;
if (this.legendType === ChartLegendTypeEnum.Default) {
return `
<div style="width:${legendWidthPx}px">
<div class="row">
<div class="col-md-12 col-sm-12 col-12">
${name ? name : 'Category'}
</div>
</div>
</div>`;
}
else {
legendCategoryWidthPx = legendWidthPx * 0.5;
legendValueWidthPx = legendWidthPx * 0.5;
return `
<div style="width:${legendCategoryWidthPx + legendValueWidthPx}px">
<div class="row">
<div class="col-md-6 col-sm-6 col-6">
${name ? name : 'Category'}
</div>
<div class="col-md-6 col-sm-6 col-6 text-end text-right">
${value ? this.currencyPipe.transform(value, this.currencyCode, 'symbol', '.2') : 'Total'}
</div>
</div>
</div>`;
}
}
}
AswSankeyChart.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: AswSankeyChart, deps: [{ token: i1.CurrencyPipe }], target: i0.ɵɵFactoryTarget.Component });
AswSankeyChart.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: AswSankeyChart, selector: "asw-sankey-chart", inputs: { config: "config", isLegendSort: "isLegendSort", icon: "icon", label: "label", amount: "amount", target: "target", currencyCode: "currencyCode", legendPosition: "legendPosition", legendType: "legendType", legendWidthPx: "legendWidthPx", legendLayout: "legendLayout" }, outputs: { sankeyClick: "sankeyClick" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "sankeyChart", first: true, predicate: ["sankeyChart"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div #sankeyChart></div>", styles: [""] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: AswSankeyChart, decorators: [{
type: Component,
args: [{ selector: 'asw-sankey-chart', template: "<div #sankeyChart></div>", styles: [""] }]
}], ctorParameters: function () { return [{ type: i1.CurrencyPipe }]; }, propDecorators: { config: [{
type: Input
}], isLegendSort: [{
type: Input
}], icon: [{
type: Input
}], label: [{
type: Input
}], amount: [{
type: Input
}], target: [{
type: Input
}], currencyCode: [{
type: Input
}], legendPosition: [{
type: Input
}], legendType: [{
type: Input
}], legendWidthPx: [{
type: Input
}], legendLayout: [{
type: Input
}], sankeyClick: [{
type: Output
}], sankeyChart: [{
type: ViewChild,
args: ['sankeyChart', { static: true }]
}], onResize: [{
type: HostListener,
args: ['window:resize']
}] } });
/**
* @license
* Copyright ASW (A Software World) All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file
*/
class AswSankeyChartModule {
}
AswSankeyChartModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: AswSankeyChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
AswSankeyChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: AswSankeyChartModule, declarations: [AswSankeyChart], imports: [CommonModule], exports: [AswSankeyChart] });
AswSankeyChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: AswSankeyChartModule, providers: [
PercentPipe,
AswCurrencyPipe,
CurrencyPipe
], imports: [[
CommonModule
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: AswSankeyChartModule, decorators: [{
type: NgModule,
args: [{
declarations: [
AswSankeyChart
],
imports: [
CommonModule
],
exports: [
AswSankeyChart
],
providers: [
PercentPipe,
AswCurrencyPipe,
CurrencyPipe
]
}]
}] });
/**
* @license
* Copyright ASW (A Software World) All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file
*/
/**
* Generated bundle index. Do not edit.
*/
export { AswSankeyChart, AswSankeyChartModule };
//# sourceMappingURL=asoftwareworld-charts-sankey-chart.mjs.map