
export class Donut3D {

    constructor() {
        this.title = null;
        this.subtitle = null;
        this.series = [];

    }

    setTitle(title) {
      //  console.log(title);
        this.title = title;
    };

    setSubtitle(subtitle) {
        this.subtitle = subtitle;
      //  console.log(subtitle);
    };

    setSeries(series) {
        this.series = series;
      //  console.log(series);
    };


    Draw(){

        var columnDefaultChart = {
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'
            },
            title: {
                text: this.title,
            },
            subtitle: {
                text: this.subtitle,
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.y}</b>'
            },
            accessibility: {
                point: {
                    valueSuffix: '%'
                }
            },
            plotOptions: {
                pie: {
                    innerSize: 100,
                    depth: 45,
                    
                    colors: ['#2FBE5F','#F9FD03', '#0000ff'],
                    dataLabels: {
                        enabled: true,
                    /* format: '<b>{point.name}</b><b> {point.percentage:.1f} %',  */
                        formatter: function () {
                            // console.log(this.point.percentage);
                                return (this.point.percentage > 8)? '<b >' + this.point.name + '</b><br>' + this.point.percentage.toFixed(1) + ' %' :'';
                            },
                        distance: -50,
                        filter: {
                            property: 'percentage',
                            operator: '>',
                            value: 4
                        }
                    }
                }
            },
            credits: {
                    enabled: false
                },
            series: [this.series]
           
        };
      //  console.log(columnDefaultChart);
        return columnDefaultChart;
    }
      
    Graph(){
    

         var columnDefaultChart = {
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'
            },
            title: {
                text: this.title,
            },
            subtitle: {
                text: this.subtitle,
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            accessibility: {
                point: {
                    valueSuffix: '%'
                }
            },
            plotOptions: {
                pie: {
                        innerSize: 100,
                        depth: 45,
                        allowPointSelect: true,
                        cursor: 'pointer',
                        colors: ['#2FBE5F','#F9FD03', 'blue'],
                        dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>  {point.percentage:.1f} %' ,
                        distance: -50,
                        filter: {
                            property: 'percentage',
                            operator: '>',
                            value: 4
                        }
                    },
                 
                }
            },
            credits: {
                    enabled: false
                },
            series: [this.series]
            
        };
      //  console.log(columnDefaultChart);
        return columnDefaultChart;
    }
}