import { Component, Input, ElementRef, Output, EventEmitter, AfterViewInit, OnChanges } from '@angular/core'; import { RdLib } from '../../../base/rdLib'; import { BaseChart, IDevChartSerieItem } from "./baseChart"; import { Portlet } from "../../portlet/portlet"; @Component({ selector: 'rd-bar-chart', template: `
` }) export class BarChart extends BaseChart implements OnChanges, AfterViewInit { @Input("rd-text") text: string; @Input("rd-sub-text") subText: string; @Input("rd-data") data: Array; @Input("rd-type") type: string = "bar"; @Input('rd-series') series: Array; @Input("rd-key-field") keyField: string = "key"; @Input("rd-value-field") valueField: string = "value"; @Input("rd-rotated") rotated: boolean = false; @Input("rd-height") height: number | string = 'auto'; @Output("rd-click") clickEvent: EventEmitter = new EventEmitter(); constructor(public element: ElementRef, portlet: Portlet) { super(element, portlet); } ngAfterViewInit() { this.render(); } ngDoCheck() { if (this.container && this.previousWidth != this.container[0].clientWidth) { this.previousWidth = this.container[0].clientWidth; this.render(); } } ngOnChanges(changes) { if (this.initialized) { if (changes.keyField || changes.valueField || changes.type) this.render(); if (changes.data) { this.dxElement.option('dataSource', this.data); this.render(); } if (changes.text || changes.subText) { this.dxElement.option('title', { text: this.text, subtitle: { text: this.subText } }); } } } public render() { if (this.container[0].clientWidth > 0) { this.initialized = true; this.container.dxChart(this.getChartOptions()); this.dxElement = this.container.dxChart('instance'); this.dxElement.render(); } } private getKeyOptions(valueKey: string) { for (var i in this.series) { var item = this.series[i] if (item.valueField == valueKey) return this.palette[Number(i) % this.palette.length] } } private getChartOptions() { let defaultSeries = { type: this.type, argumentField: this.keyField, valueField: this.valueField, } return { dataSource: this.data ? this.data : [], commonSeriesSettings: { argumentField: this.keyField, type: this.type, barPadding: 0.5, hoverStyle: { hatching: { opacity: 0.3, step: 6, width: 2 } } }, rotated: this.rotated, series: this.series ? this.series : defaultSeries, palette: this.palette, title: { text: this.text, subtitle: { text: this.subText }, font: { size: 14 } }, export: { enabled: this.export }, legend: { verticalAlignment: "bottom", horizontalAlignment: "center", itemTextPosition: 'bottom', columnCount: 4, font: { size: 8 } }, crosshair: { enabled: true, color: "#4BACC6", width: 1, dashStyle: "solid", horizontalLine: { visible: false }, label: { visible: true, backgroundColor: "#4BACC6", font: { color: "#fff", size: 12 } } }, tooltip: { enabled: true, border: { visible: false }, color: "#fff", font: { color: "gray", opacity: 1, size: 12 }, paddingTopBottom: 8, zIndex: 9999999999999, customizeTooltip: function (arg) { if (this.type == 'bar') { return { text: "" + arg.argument + " : " + "" + arg.originalValue + "" }; } else { let text = ''; var object; for (var item of this.data) { if (item[this.keyField] == arg.argument) { object = item; break; } } text = "" + arg.argument + ""; for (let key of Object.keys(object)) { if (key != this.keyField && this.getKeyOptions(key)) { if (this.series) { var color = this.getKeyOptions(key) || 'orangered'; text += "
" + key + ": " + object[key]; } else { text += "" + key + " " + ":" + " " + object[key] + ""; } } } return { text }; } }.bind(this), shadow: { opacity: 0.15, blur: 0, color: "#000000", offsetX: 3, offsetY: 3 } }, onLegendClick: function (info) { this.clickEvent.emit(info.target); if (info.target.isVisible()) { info.target.hide(); } else { info.target.show(); } }.bind(this), onPointClick: function (info) { if (info.target.isSelected()) info.target.clearSelection(); else { info.target.select(); this.clickEvent.emit(info.target.argument); } }.bind(this) }; } }