Как создать динамически диаграмму для Ionic App с данными Firebase? - PullRequest
Новая
       16

Как создать динамически диаграмму для Ionic App с данными Firebase?

0 голосов
/ 21 ноября 2018

У меня есть каталог Firebase, как показано ниже, для приложения Ionic 3.

Это ответы многих пользователей на вопросник для идентификатора каждого вопроса.Большинство из них имеют формат оценок, то есть от 0 до 5. В настоящее время я получаю данные и отображаю среднее значение для каждого вопроса из ответов всех пользователей. 

FIREBASE FORMAT:

-submissions
 - Jack
 - George
 - Peter
    -0
        -id: 1.1
        -rating: 5
    -1
        -id: 2.1
        -rating: 2
    -2
    -3
    -4
        -id: 3.2
        -rating: 3

Я создаю средние значения: 

 this.submissions = this.afDatabase.list('submissions')
    var formArray : FormArray = new FormArray([])
    Array.from(Array(20).keys()).forEach(e => formArray.push(this.createItem()))
    this.survey = this.formBuilder.group({
      //rating: [''],
      //answer: [''],
      items: this.formBuilder.array(formArray.controls)
    })

    this.crunchData()

    this.usersubm = this.afDatabase.list('submissions'+`/`+ this.user).valueChanges();
    this.usersubm.subscribe(_ => {
      this.loading = false
    })
    console.log("usersubm",this.usersubm);
   // this.apokliseis()
  }

  ngOnInit() {
  }



  crunchData() {
    this.submissions.valueChanges().subscribe(
      (results:Submission[]) => {
        this.loading = false
        console.log('crunchData.results', results)
        this.crunch(results)
      }
    )    
  }

  crunch(results: Submission[]) {
    var stats = {}
    this.ids = []

    results.forEach((submission) => {
      var programCode = submission[1].answer
      var answerArray = submission as QuestionAnswer[]

      if (!stats[programCode]) {
        stats[programCode] = {}
        stats[programCode].show = true
      }
      answerArray.forEach((answer: QuestionAnswer) => {
        console.log('answer:', answer.user)




        // include id on list of ids
        if (this.ids.indexOf(answer.id) == -1) this.ids.push(answer.id)

        if (!stats[programCode][answer.id]) {
          stats[programCode][answer.id] = {}
        }
        var questionStats = stats[programCode][answer.id]
        questionStats.title = answer.title

        if (answer.type == 'text') {
          if (!questionStats.answers) questionStats.answers = []

          questionStats.answers.push(answer.answer)
        }

        // average(statistics[programCode][id].ratings
        if (answer.type == 'radio') {
          if (!questionStats.ratings) questionStats.ratings = {}
          if (!questionStats.ratings[answer.rating]) questionStats.ratings[answer.rating] = 0
          questionStats.ratings[answer.rating] += 1
        }

        if (answer.type == 'radio2') {
          if (!questionStats.answers) questionStats.answers = []

          questionStats.answers.push(answer.answer)
        }

      })
    })

    console.log('crunch.stats before', stats)
    this.statistics = stats
    this.crunchAverages(results)
    console.log('crunch.stats', stats)
    Object.keys(this.statistics).forEach(programCode => {
      this.ids.forEach(id => {

        this.apant[id]=  this.statistics[programCode][id].answers

        //this.calculateAverage(this.statistics[programCode][id].ratings)
      })
    })
    console.log('apantiseius x:', this.apant[1.1])


    this.programCodes = Observable.of( Object.keys(stats))
    return stats

}


  crunchAverages(results: Submission[]) {

    Object.keys(this.statistics).forEach(programCode => {
      this.ids.forEach(id => {
        if (id==2.1 || id==3.1 || id==4.1){
          console.log('gia na doume',  this.statistics[programCode][id].ratings.average)
        }
        console.log("id==",id)

        console.log('crunchAverages',  this.statistics[programCode][id])
        this.calculateAverage(this.statistics[programCode][id].ratings)
      })
    })



  }



  calculateAverage(ratings) {
    if (!ratings) return
    var r1 = ratings[1] ? ratings[1] : 0
    var r2 = ratings[2] ? ratings[2] : 0
    var r3 = ratings[3] ? ratings[3] : 0
    var r4 = ratings[4] ? ratings[4] : 0
    var r5 = ratings[5] ? ratings[5] : 0
    var total = r1 + r2 + r3 + r4 + r5

    ratings.average = (1 * r1 + 2 * r2 + 3 * r3 + 4 * r4 + 5 * r5 ) / total
    ratings.average = Math.round(ratings.average * 1000) / 1000
    ratings.roundedAverage = this.roundAverage(ratings.average)
  }

  roundAverage(average: number) {
    if (average < 0) {
      console.log('roundAverage warning: average < 0')
      return 0
    }
    if (average < 0.25) return 0.00
    if (average < 0.75) return 0.50
    if (average < 1.25) return 1.00
    if (average < 1.75) return 1.50
    if (average < 2.25) return 2.00
    if (average < 2.75) return 2.50
    if (average < 3.25) return 3.00
    if (average < 3.75) return 3.50
    if (average < 4.25) return 4.00
    if (average < 4.75) return 4.50
    if (average > 5.00) console.log('roundAverage warning: average > 5')
    return 5
  }

  createItem(): FormGroup {
    return this.formBuilder.group({
      id: [''],
      rating: [''],
      answer: [''],
      title: ['']
    })
  }

Теперь я хочу создать диаграммы со средними значениями для каждого вопроса об идентификаторе, чтобы была видна средняя оценка для каждого вопроса.

1 Ответ

0 голосов
/ 21 ноября 2018

Есть несколько хороших рамок для создания диаграмм в Ionic.Мой любимый - ChartJS .Вы должны попробовать это.

...