ngx-gem-spaas
Version:
This library contains services, components, images and styles to provide a unified look and way-of-working throughout GEM SPaaS.
273 lines (268 loc) • 12.2 kB
JavaScript
import * as am4charts from '@amcharts/amcharts4/charts';
import * as am4core from '@amcharts/amcharts4/core';
import { Tooltip } from '@amcharts/amcharts4/core';
import * as i0 from '@angular/core';
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import * as i1 from 'ngx-gem-spaas';
am4core.addLicense('CH222128706');
class AmchartsService {
constructor(themeService) {
this.themeService = themeService;
this.theme = null;
this.onDestroy$ = new Subject();
this.onNewTheme();
}
ngOnDestroy() {
this.onDestroy$.next();
this.onDestroy$.complete();
}
onNewTheme() {
this.themeService.onNewActiveTheme()
.pipe(takeUntil(this.onDestroy$))
.subscribe((theme) => {
this.theme = theme;
});
}
// create xy chart
createChartXY(chartDiv, withLegend = true) {
const chart = am4core.create(chartDiv, am4charts.XYChart);
chart.paddingBottom = 5;
chart.paddingRight = 4;
chart.paddingLeft = 18;
// @ts-ignore
chart.preloader.background.fill = am4core.color(this.theme?.getRgb('bg'));
chart.zoomOutButton.background.fill = am4core.color(this.theme?.getRgb('color'));
chart.zoomOutButton.icon.stroke = am4core.color(this.theme?.getRgb('bg'));
chart.zoomOutButton.icon.strokeWidth = 2;
chart.zoomOutButton.parent = chart.tooltipContainer;
chart.zoomOutButton.background.cornerRadius(4, 4, 4, 4);
chart.zoomOutButton.padding(0, 6, 0, 6);
// @ts-ignore
chart.zoomOutButton.background.states.getKey('hover').properties.fill = am4core.color(this.theme?.getRgb('primary'));
// @ts-ignore
chart.zoomOutButton.background.states.getKey('down').properties.fill = am4core.color(this.theme?.getRgb('primary'));
chart.cursor = new am4charts.XYCursor();
chart.cursor.behavior = 'zoomX';
chart.cursor.lineX.fill = am4core.color(this.theme?.getRgb('color'));
chart.cursor.lineX.stroke = am4core.color(this.theme?.getRgb('color'));
chart.cursor.lineY.disabled = true;
if (withLegend) {
chart.legend = new am4charts.Legend();
chart.legend.position = 'top';
const markerTemplate = chart.legend.markers.template;
markerTemplate.width = 10;
markerTemplate.height = 10;
chart.legend.labels.template.fill = am4core.color(this.theme?.getRgb('color'));
chart.legend.valueLabels.template.fill = am4core.color(this.theme?.getRgb('color'));
chart.legend.labels.template.textDecoration = 'none';
chart.legend.valueLabels.template.textDecoration = 'none';
chart.legend.fontSize = '85%';
const as = chart.legend.labels.template.states.getKey('active');
// @ts-ignore
as.properties.textDecoration = 'line-through';
// @ts-ignore
as.properties.fill = am4core.color(this.theme?.getRgb('color', 0.4));
const as2 = chart.legend.valueLabels.template.states.getKey('active');
// @ts-ignore
as2.properties.textDecoration = 'line-through';
// @ts-ignore
as2.properties.fill = am4core.color(this.theme?.getRgb('color', 0.4));
}
return chart;
}
// create pie chart
createChartPie(chartDiv, innerRadius = 0, startAngle = 0, endAngle = 360) {
const chart = am4core.create(chartDiv, am4charts.PieChart);
chart.innerRadius = innerRadius;
chart.startAngle = startAngle;
chart.endAngle = endAngle;
return chart;
}
destroyChart(chart) {
if (chart) {
chart.dispose();
}
}
// AXES
addCategoryAxis(chart, xOrY, category, withTooltip, withGrid, withLabels) {
const axes = xOrY === 'x' ? chart.xAxes : chart.yAxes;
const axis = axes.push(new am4charts.CategoryAxis());
this.setAxisTooltip(axis, withTooltip);
this.setGenericAxisProps(axis, withGrid, withLabels);
axis.dataFields.category = category;
axis.renderer.minGridDistance = 1;
axis.renderer.labels.template.location = 0.5; // 0 & 1 IS ON TICK, 0.5 CENTERS BETWEEN TICKS
return axis;
}
addDateAxis(chart, xOrY, date, withTooltip = true, withGrid = false, withLabels = true) {
const axes = xOrY === 'x' ? chart.xAxes : chart.yAxes;
const axis = axes.push(new am4charts.DateAxis());
this.setAxisTooltip(axis, withTooltip);
this.setGenericAxisProps(axis, withGrid, withLabels);
// axis.baseInterval = {'timeUnit': 'hour', 'count': 1};
axis.dataFields.date = date;
axis.renderer.labels.template.location = 0; // 0.5 CENTERS BETWEEN TICKS
axis.renderer.minGridDistance = 40;
return axis;
}
addValueAxis(chart, xOrY, title = '', withTooltip = false, withGrid = true, withLabels = true) {
const axes = xOrY === 'x' ? chart.xAxes : chart.yAxes;
const axis = axes.push(new am4charts.ValueAxis());
this.setAxisTooltip(axis, withTooltip);
this.setGenericAxisProps(axis, withGrid, withLabels);
axis.extraMax = .0;
axis.extraMin = .0;
axis.title.text = title;
return axis;
}
setAxisTooltip(axis, withToolTip, dy = 5) {
axis.tooltip.disabled = !withToolTip;
if (withToolTip) {
const axisTooltip = axis.tooltip;
axisTooltip.background.fill = am4core.color(this.theme?.getRgb('primary'));
axisTooltip.label.fill = am4core.color(this.theme?.getRgb('bg'));
axisTooltip.background.strokeWidth = 0;
axisTooltip.background.cornerRadius = 4;
axisTooltip.dy = dy;
}
}
setGenericAxisProps(axis, withGrid, withLabels) {
axis.cursorTooltipEnabled = true;
axis.renderer.fontSize = '0.7em';
axis.renderer.grid.template.disabled = !withGrid;
axis.renderer.grid.template.location = 1; // THIS ALSO IMPACTS TOOLTIP LOCATION !!
axis.renderer.grid.template.stroke = am4core.color(this.theme?.getRgb('color'));
axis.renderer.labels.template.disabled = !withLabels;
axis.renderer.labels.template.fill = am4core.color(this.theme?.getRgb('color'));
axis.renderer.minWidth = 10; // IMPACTS SPACE FOR Y-AXIS LABELS
axis.title.fill = am4core.color(this.theme?.getRgb('color'));
}
// SERIES
addSeriesXY(chart, type, dataType, name, valueX, valueY, openValueY, stacked = false, color = '', defToolTipColor = false, tooltipText = '', strokeWidth = 2) {
let series;
switch (type) {
case 'line':
series = new am4charts.LineSeries();
break;
case 'bar':
series = new am4charts.ColumnSeries();
break;
case 'stepline':
series = new am4charts.StepLineSeries();
break;
}
series.name = name;
switch (dataType) {
case 'category':
series.dataFields.categoryX = valueX;
break;
case 'date':
series.dataFields.dateX = valueX;
if (!(series instanceof am4charts.ColumnSeries)) {
series.dataItems.template.locations['dateX'] = 0;
}
break;
case 'value':
series.dataFields.valueX = valueX;
break;
}
series.dataFields.valueY = valueY;
if (!(series instanceof am4charts.ColumnSeries)) {
series.connect = false;
}
series.stacked = stacked;
if (openValueY) {
// RANGE SERIES: UPPER AND LOWER BAND WITH FILL
series.dataFields.openValueY = openValueY;
series.strokeWidth = 0;
if (color) {
series.fill = am4core.color(color);
series.stroke = am4core.color(color);
}
series.sequencedInterpolation = false;
series.fillOpacity = 0.1;
if (!(series instanceof am4charts.ColumnSeries)) {
series.tensionX = 5;
}
series.tooltipText = tooltipText || '[bold]' + name + ': [/]{openValueY.value} to {valueY}';
}
else {
// NORMAL SERIES
if (color) {
series.fill = am4core.color(color);
series.stroke = am4core.color(color);
}
series.strokeWidth = strokeWidth;
if (series instanceof am4charts.ColumnSeries) {
series.fillOpacity = 0.4;
series.strokeWidth = 1; // keep this default of 1 ? Under evaluation
}
series.tooltipText = tooltipText || '[bold]' + name + ':[/] {valueY}';
}
// TOOLTIP STUFF
series.tooltip = new Tooltip();
series.tooltip.background.filters.clear(); // NO SHADOW
series.tooltip.background.stroke = am4core.color(this.theme?.getRgb('bg'));
if (defToolTipColor) {
series.tooltip.getFillFromObject = false;
series.tooltip.background.fill = am4core.color(this.theme?.getRgb('color'));
series.tooltip.label.fill = am4core.color(this.theme?.getRgb('bg'));
}
chart.series.push(series);
return series;
}
addSeriesPie(chart, cat, value, colorAttr = '', color = '', withLabels = true, tooltipText = '') {
const series = new am4charts.PieSeries();
series.dataFields.category = cat;
series.dataFields.value = value;
series.slices.template.stroke = am4core.color(this.theme?.getRgb('bg'));
series.slices.template.strokeWidth = 2;
series.slices.template.strokeOpacity = 1;
series.labels.template.disabled = !withLabels;
series.labels.template.text = tooltipText || '[bold]{category}:[/] {value.percent.formatNumber(\'#\')}% ';
series.labels.template.fill = am4core.color(this.theme?.getRgb('color'));
series.ticks.template.stroke = am4core.color(this.theme?.getRgb('color'));
series.ticks.template.strokeWidth = 2;
// disable sliding out of slices
// @ts-ignore
series.slices.template.states.getKey('hover').properties.shiftRadius = 0;
// @ts-ignore
series.slices.template.states.getKey('hover').properties.scale = 1;
if (colorAttr) {
series.slices.template.propertyFields.fill = colorAttr;
}
if (color) {
series.slices.template.fill = am4core.color(color);
const cs = series.colors;
cs.list = [am4core.color(new am4core.ColorSet().getIndex(0))];
cs.stepOptions = {
lightness: -0.05,
hue: 0
};
cs.wrap = false;
}
// TOOLTIP STUFF
series.slices.template.tooltipText = tooltipText || '[bold]{category}:[/] {value.percent.formatNumber(\'#\')}% ';
series.tooltip = new Tooltip();
series.tooltip.background.filters.clear(); // NO SHADOW
series.tooltip.background.stroke = am4core.color(this.theme?.getRgb('bg'));
chart.series.push(series);
return series;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AmchartsService, deps: [{ token: i1.ThemeService }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AmchartsService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AmchartsService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: () => [{ type: i1.ThemeService }] });
// SERVICES
/**
* Generated bundle index. Do not edit.
*/
export { AmchartsService };
//# sourceMappingURL=ngx-gem-spaas-charts.mjs.map