アーカイブ月: 10月, 2020

概要

Angular2以降でfirestoreのコレクションからデータ一覧を取得する方法。

読み込む

コレクションに対して、valueChanges()をsubscribeする。valueChanges()ってなんだ。。

import { Component, ViewChild } from '@angular/core';
import { AuthService } from '../auth/auth.service';
import { AngularFirestore } from '@angular/fire/firestore';

@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
})
export class Tab2Page {
  authUid:string;

  constructor(
    public auth: AuthService,
    private firestore:AngularFirestore,
  ) {
    this.initialize();
    }

  initialize(){
      this.auth.getAuthUid().subscribe(uid =>{
        console.log(uid,'e');
        this.authUid = uid;
      })

  }

  test(){
    this.firestore.collection('users')
      .doc('data').collection(this.authUid)
      .valueChanges().subscribe(value =>{
        console.log(value);
      },
      error =>{
        console.log('error');
      })
  };
}

オブジェクトの配列で帰ってくる。

書き込み

こちらの方がシンプル

                      this.firestore.collection('users')
                        .doc('data')
                        .collection(this.authUid)
                        .doc(String(new Date().getTime()))
                        //.doc('test')
                        .set({
                          'title':this.originalImgName,
                          'content':data,
                          'filename':this.originalImgName,
                          'lastUpade':String(new Date().getTime()),
                        });

概要

Ionic(Angular)でマウスホイールで拡大や移動などが可能なグラフを作成します

方法

標準のchart.jsに加えて、charjs-plugin-zoomを導入します。

通常のchart.jsの導入方法はこちら。

これをズーム可能にするためにcharjs-plugin-zoomを導入します。

npm i chartjs-plugin-zoom -s

そしたら、グラフを作成しているpageのtsファイルにて（今回はsrc/app/tab2/tab2.page.tsでした）

import 'chartjs-plugin-zoom';

を上部に追加して、あとはOptionsのなかに

          plugins: {
            zoom: {
              pan: {
                enabled: true,
                mode: 'xy'
              },
              zoom: {
                enabled: true,
                mode: 'xy'
              }
            }
          },

のように指定するだけです。

冗長ですが、コードを貼り付けておきます。貼り付ける場所などの確認にご使用ください。

import { Component, ViewChild } from '@angular/core';
import { Chart } from 'chart.js';
import 'chartjs-plugin-zoom';

@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
})
export class Tab2Page {
  @ViewChild('myChart') myChart;
  @ViewChild('myChart2') myChart2;
  @ViewChild('myChart3') myChart3;
  bars: any;
  colorArray: any;
  myNum:number;
  data:any=  {
        type: 'line',
        data: {
  				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'Aug'],
  				datasets: [{
  					label: 'My First dataset',
            backgroundColor: 'rgb(150, 194, 129)', // array should have same number of elements as number of dataset
            borderColor: 'rgb(150, 194, 129)',// array should have same number of elements as number of dataset
  					data: [
  						12,
  						14,
              12,
  						14,
              12,
  						41,
              12,
  						4,
  					],
  					fill: false,
  				}, {
  					label: 'My Second dataset',
  					fill: false,
            backgroundColor: 'rgb(50, 194, 129)', // array should have same number of elements as number of dataset
            borderColor: 'rgb(50, 194, 129)',// array should have same number of elements as number of dataset
  					data: [
              2,
  						4,
              2,
  						4,
              2,
  						4,
              20,
  						142,
  					],
  				}]
  			},
        options: {
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true,
                min: 0,
                max: 200
              }
            }]
          },
          responsive:true,
          maintainAspectRatio: false,
          plugins: {
            zoom: {
              pan: {
                enabled: true,
                mode: 'xy'
              },
              zoom: {
                enabled: true,
                mode: 'xy'
              }
            }
          },
          }
      }

      title = 'app';

      columnDefs = [
          {headerName: 'Make', field: 'make' },
          {headerName: 'Model', field: 'model' },
          {headerName: 'Price', field: 'price'},
          {headerName: 'Make', field: 'make2' },
          {headerName: 'Model', field: 'model2' },
          {headerName: 'Price', field: 'price2'},
          {headerName: 'Make', field: 'make3' },
          {headerName: 'Model', field: 'model3' },
          {headerName: 'Price', field: 'price3'},
      ];

      rowData = [
          { make: 'Toyota', model: 'Celica', price: 35000, make2: 'Toyota', model2: 'Celica', price2: 35000, make3: 'Toyota', model3: 'Celica', price3: 35000},
          { make: 'Ford', model: 'Mondeo', price: 32000 },
          { make: 'Porsche', model: 'Boxter', price: 72000 },
          { make: 'Toyota', model: 'Celica', price: 35000, make2: 'Toyota', model2: 'Celica', price2: 35000, make3: 'Toyota', model3: 'Celica', price3: 35000},
          { make: 'Ford', model: 'Mondeo', price: 32000 },
          { make: 'Porsche', model: 'Boxter', price: 72000 },
          { make: 'Toyota', model: 'Celica', price: 35000, make2: 'Toyota', model2: 'Celica', price2: 35000, make3: 'Toyota', model3: 'Celica', price3: 35000},
          { make: 'Ford', model: 'Mondeo', price: 32000 },
          { make: 'Porsche', model: 'Boxter', price: 72000 }
      ];

  constructor(
  ) { }

  ionViewDidEnter() {
    this.createBarChart(this.myChart);
    this.createBarChart(this.myChart2);
    this.createBarChart(this.myChart3);
  }

  onClicked(){
    let v = window.innerWidth;
    alert(v);
  }


  createBarChart(canvasId) {
    this.bars = new Chart(canvasId.nativeElement, this.data);
  }

}