gevgeny / angular2-highcharts

:bar_chart: :chart_with_upwards_trend: Highcharts for your Angular project
MIT License
380 stars 113 forks source link

Chart don't render correctly when triggered by input #213

Open Papamilo opened 7 years ago

Papamilo commented 7 years ago

Sorry for don't put a plnkr instead...I am learning how to use it... My chart was working fine from the first parent.component to the second parent.component until I move it to a child component using @input to fire an event coming from a button to open the child component. (for the first to the second I also use @input)

The second strange thing is in my child component I've got a second button to hide the chart, when I click to hide and i open again then the chat works !!! So when I use the toggleChild() just the html is rendered but when I use the hideChart() method it rendered everything

console.log(chartInstance) is returning in both cases but console.log(data) is returning directly with toggleChild() and after few seconds with hideChart()

I suppose the issue could come from the lifecycle hook..or maybe the event..

So if anyone got some ideas...thanks in advance

first parent html:


     <img src="./assets/img/fold_down_black.png" 
class="clickdaydetail" type="button" label="Click"(click)="toggleChild()"/>
     <div><my-daydetail [showMePartially]="showVar" ></my-daydetail>
</div>

first parent.ts:

export class AppliV2Component   {

 showVar = false; // Pour daytail
  hideVar = true;  

constructor(private userService2: UserService2) {
    }
   toggleChild() {
     this.showVar = !this.showVar;
     this.hideVar = !this.hideVar;
}

 second parent html who's already a child himself :

 <div *ngIf="showMePartially" class="daydetail2" > <!-- this part will 

 be toggled by the parent component button  -->

  <img type="button" label="Click" (click)="hideChart()" id="foldup" 
src="./assets/img/fold_up_blacksmall.png"/>

 <span id="infonc">Informations sur le fonctionnement</span>

  <app-pie-chart [minifiedMe]="hideMeup" ></app-pie-chart>
  <div><app-fonctionnaly [minifiedMe]="hideMeup" ></app-fonctionnaly>
</div>
  </div> <!-- End de daydetail2 -->

second parent.ts:

 export class MyDaydetailComponent  {

 @Input() showMePartially: boolean;

hideMeup = true;

    constructor(private UserService3: UserService3) {
     }

  hideChart() {
 this.hideMeup = !this.hideMeup;
  }
}

child.html:

 <div *ngIf="minifiedMe" class="thebigPie">

   <div class="chart-pie">
    <chart [options]="options" (load)="saveInstance($event.context)">

     </chart>
  </div> <!-- End of chart-pie -->

</div> <!-- End of thebigPie -->

child.ts:

 export class PieChartComponent implements OnDestroy, OnInit {

     @Input() minifiedMe: boolean;

options: any;
data: Object[];
chart: any;

dataSubscription: Subscription;

 constructor(private userService3: UserService3) {

       this.options = {
        chart: {  type: 'pie',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,  },
    credits: { enabled: false },
    tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    title: {
       text: null
   },
    plotOptions: {
    pie: {
    startAngle: -90,
    endAngle: 90,
    allowPointSelect: false,
    colors: ['#648e59'],
    cursor: 'pointer',
    dataLabels: {
        enabled: false,
        }
      }
    },````