Show signed in user data on chart


#1

I am trying to show user data in a chart which is dynamic so when the user enters details the chart changes. My problem is that the same data is displaying for all the members when they sign in. How do I modify my code to only show the information of the member that is logged in? So basically they can enter the data to add or subtract from the initial measurement that was entered. Any help would be much appreciated, thanks. Any further information needed I will let you know.
I am using chart js to show the data.

import { Component, ViewChild } from '@angular/core';
import { NavController, NavParams, LoadingController } from 'ionic-angular';

import { Observable } from 'rxjs/Observable';
import { Storage } from '@ionic/storage';
import { member } from '../../model/member';

import { StudentReportPage } from '../student_report/student_report';
import { NewMemberPage } from '../newmember/newmember';

import { MemberService } from '../../service/member.service';
import { UserService } from '../../service/user.service';
import { Chart } from 'chart.js'; 
import { AngularFireDatabase } from 'angularfire2/database';
import { AngularFireList } from 'angularfire2/database/interfaces';
import { ToastController } from 'ionic-angular/components/toast/toast-controller';
import { TabsPage } from '../tabs/tabs';


@Component({
  selector: 'page-members',
  templateUrl: 'members.html'
})
export class MembersPage {
  
  data: Observable<member[]>;
  ref: AngularFireList<any>;

  months = [
    {value: 0, name: 'Weight'},
    {value: 1, name: 'Height'},
    {value: 2, name: 'Bodyfat'},
    {value: 3, name: 'Waist'},
    {value: 4, name: 'Bust'},
    {value: 5, name: 'BMI'},
  ];
 
  transaction = {
    user_id: null,
    value: 0,
    expense: false,
    month: 0,
    date: null,
  }

  @ViewChild('valueBarsCanvas') valueBarsCanvas;
  valueBarsChart: any;
  @ViewChild('barCanvas') barCanvas;
  barChart: any;

  chartData = null;
  member : member = new member;

  constructor(public navCtrl: NavController, public memberService: MemberService, public storage: Storage, public userService: UserService, public navParams: NavParams,private db:AngularFireDatabase, private toastCtrl: ToastController) {
    storage.get('user_id').then((val) => {
        this.data=memberService.getMembersofUsers(val);
    })
  }

  ionViewDidLoad() { 
    this.ref = this.db.list('Members', ref => ref.orderByChild('user_id'));

    // Catch any update to draw the Chart
    this.ref.valueChanges().subscribe(result => {
        if (this.chartData) {
          this.updateCharts(result)
        } else {
          this.createCharts(result)
        }
      })
    }

    addmember(){
      this.storage.get('user_id').then((val) => {
        // this.user=db.list('User').valueChanges();
        // console.log("user id: ",val)
        if (val != null) {
        this.member.user_id = val;
        this.transaction.user_id = val;
        console.log(this.member);
        this.ref.push(this.transaction).then(() => {
        this.transaction = {
        user_id: val,
        value: 0,
        month: 0,
        expense: false,
        date:new Date()
        };
        console.log(this.transaction);
        let toast = this.toastCtrl.create({
            message: 'New Member Details added',
            duration: 3000
          });
          toast.present();
        })
      }
    })
  }

    getReportValues() {
        let reportByMonth = {
          0: null,
          1: null,
          2: null,
          3: null,
          4: null,
          5: null
        };
       
        for (let trans of this.chartData) {
          if (reportByMonth[trans.month]) {
            if (trans.expense) {
              reportByMonth[trans.month] -= +trans.value;
            } else {
              reportByMonth[trans.month] += +trans.value;
            }
          } else {
            if (trans.expense) {
              reportByMonth[trans.month] = 0 - +trans.value;
            } else {
              reportByMonth[trans.month] = +trans.value;
            }
          }
        }
        return Object.keys(reportByMonth).map(a => reportByMonth[a]);
      }

      createCharts(data) {
        this.chartData = data;
       
        // Calculate Values for the Chart
        let chartData = this.getReportValues();
       
        // Create the chart
        this.valueBarsChart = new Chart(this.valueBarsCanvas.nativeElement, {
          type: 'bar',
          data: {
            labels: Object.keys(this.months).map(a => this.months[a].name),
            datasets: [{
              data: chartData,
              backgroundColor: '#32db64'
            }]
          },
          options: {
            legend: {
              display: false
            },
            tooltips: {
              callbacks: {
                label: function (tooltipItems, data) {
                  return data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index] +' ';
                }
              }
            },
            scales: {
              xAxes: [{
                ticks: {
                  beginAtZero: true
                }
              }],
              yAxes: [{
                ticks: {
                  callback: function (value, index, values) {
                    return value + '';
                  },
                  suggestedMin: 0
                }
              }]
            },
          }
        });

        // Create the chart
        this.barChart = new Chart(this.barCanvas.nativeElement, {
          type: 'line',
          data: {
            labels: Object.keys(this.months).map(a => this.months[a].name),
            datasets: [{
              data: chartData,
              backgroundColor: '#32db64'
            }]
          },
          options: {
            legend: {
              display: false
            },
            tooltips: {
              callbacks: {
                label: function (tooltipItems, data) {
                  return data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index] +' ';
                }
              }
            },
            scales: {
              xAxes: [{
                ticks: {
                  beginAtZero: true
                }
              }],
              yAxes: [{
                ticks: {
                  callback: function (value, index, values) {
                    return value + '';
                  },
                  suggestedMin: 0
                }
              }]
            },
          }
        });
      }

      updateCharts(data) {
        this.chartData = data;
        let chartData = this.getReportValues();
       
        // Update our dataset
        this.valueBarsChart.data.datasets.forEach((dataset) => {
          dataset.data = chartData
        });
        this.valueBarsChart.update();

        this.barChart.data.datasets.forEach((dataset) => {
          dataset.data = chartData
        });
        this.barChart.update();
      }
    }