import { Component , ViewChild , AfterViewChecked } from '@angular/core' ; import { EdaDialog , EdaDialogAbstract , EdaDialogCloseEvent } from '@eda/shared/components/shared-components.index' ; import { PanelChart } from '../panel-charts/panel-chart' ; import { PanelChartComponent } from '../panel-charts/panel-chart.component' ; import { TreeMapConfig } from '../panel-charts/chart-configuration-models/treeMap-config' ; import { FunnelConfig } from '../panel-charts/chart-configuration-models/funnel.config' ; import { ChartConfig } from '../panel-charts/chart-configuration-models/chart-config' ; @ Component ( { selector : 'app-funnel-dialog' , templateUrl : './funnel-dialog.component.html' } ) export class FunnelDialog extends EdaDialogAbstract implements AfterViewChecked { @ ViewChild ( 'PanelChartComponent' , { static : false } ) myPanelChartComponent : PanelChartComponent ; public dialog : EdaDialog ; public panelChartConfig : PanelChart = new PanelChart ( ) ; public colors : Array < string > ; public labels : Array < number > ; public display : boolean = false ; constructor ( ) { super ( ) ; this . dialog = new EdaDialog ( { show : ( ) => this . onShow ( ) , hide : ( ) => this . onClose ( EdaDialogCloseEvent . NONE ) , title : $localize `:@@ChartProps:PROPIEDADES DEL GRAFICO` } ) ; this . dialog . style = { width : '80%' , height : '70%' , top : "-4em" , left : '1em' } ; } ngAfterViewChecked ( ) { if ( ! this . colors && this . myPanelChartComponent && this . myPanelChartComponent . componentRef ) { setTimeout ( ( ) => { this . colors = this . myPanelChartComponent . componentRef . instance . colors . map ( color => this . rgb2hex ( color ) ) ; this . labels = [ 0 , 1 ] ; } ) ; } } onShow ( ) { this . panelChartConfig = this . controller . params . panelChart ; this . display = true ; } onClose ( event , response ? ) { return this . controller . close ( event , response ) ; } saveChartConfig ( ) { this . onClose ( EdaDialogCloseEvent . UPDATE , { colors : this . colors . map ( color => this . hex2rgb ( color ) ) } ) ; } closeChartConfig ( ) { this . onClose ( EdaDialogCloseEvent . NONE ) ; } handleInputColor ( ) { this . myPanelChartComponent . props . config . setConfig ( new FunnelConfig ( this . colors . map ( color => this . hex2rgb ( color ) ) ) ) ; this . myPanelChartComponent . changeChartType ( ) ; } hex2rgb ( hex , opacity = 100 ) { hex = hex . replace ( '#' , '' ) ; const r = parseInt ( hex . substring ( 0 , 2 ) , 16 ) ; const g = parseInt ( hex . substring ( 2 , 4 ) , 16 ) ; const b = parseInt ( hex . substring ( 4 , 6 ) , 16 ) ; return 'rgba(' + r + ',' + g + ',' + b + ',' + opacity / 100 + ')' ; } rgb2hex ( rgb ) { rgb = rgb . match ( /^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i ) ; return ( rgb && rgb . length === 4 ) ? '#' + ( '0' + parseInt ( rgb [ 1 ] , 10 ) . toString ( 16 ) ) . slice ( - 2 ) + ( '0' + parseInt ( rgb [ 2 ] , 10 ) . toString ( 16 ) ) . slice ( - 2 ) + ( '0' + parseInt ( rgb [ 3 ] , 10 ) . toString ( 16 ) ) . slice ( - 2 ) : '' ; } }