knaka Tech-Blog

AI, IoT, DIYエレクトロニクス, データサイエンスについて投稿予定です。

IndexedDB + Vue CLI, Chart.js で、測定値の表示 ファイルのインポート可 #Vue.js #IndexedDB #Vue-cli

概要:

前と同様、IndexedDB + Vue CLI
Dexie.js ライブラリを使用した構成となり。
測定値の登録、chart.jsグラフ表示

・ブラウザ内IndexedDBデータの エクスポート、インポート機能で
jsonファイル経由で可能で、
別PCや、外出先PCのブラウザにインポートできます。

環境

Chrome 83
Vue CLI
dexie : 3.0.1
vue: 2.6.11
vue-router
chart.js
SinglePageApplication / SPA
Progressive Web Apps / PWA

参考のコード

github.com

npm 追加

Vue CLIで、chart.jsだけでは、描画できず。
vue-chartjs ライブラリも。追加しました。

npm install vue-chartjs chart.js --save

chart.js sample

canvas が、動作しないようで
 chart部分を、コンポートネントにする例で。描画できそうでした
親の呼出し側
chart_sample.vue
https://github.com/kuc-arc-f/vue_spa3b_4mdats/blob/master/src/components/IndexMdats/chart_sample.vue

import ChartView from './ChartView'

//
export default {
  name: 'LineSample',
  data () {
    return {
    }
  },
  components: {
    ChartView
  }
}

・子の chart
ChartView.vue
https://github.com/kuc-arc-f/vue_spa3b_4mdats/blob/master/src/components/IndexMdats/ChartView.vue

import { Line } from 'vue-chartjs'
 
export default {
  extends: Line,
  mounted () {
    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          label: 'Data-1',
          fill: false,
          backgroundColor: '#FF6384',
          borderColor: '#FF6384',
          data: [40, 39, 10, 40, 39, 80, 40]
        }
      ]
    },
    { responsive: true, maintainAspectRatio: false }
    )
  }
}

・上記の、サンプル グラフの画像
f:id:knaka0209:20200701142231p:plain

画面

・グラフ
f:id:knaka0209:20200701144807p:plain

・リスト
 上部分に、エクスポート、インポートの
 ボタンを配置
f:id:knaka0209:20200701144818p:plain

Update 2020/07/02

CSV エクスポート, インポート機能を追加しました。

CSVの書式は、1件データを登録して、CSV export すると確認できます
・日付/date 書式は、 YYYY-MM-DD となります。
・エクセルデータ等からインポートする場合、YYYY/MM/DD の場合は、
 Google Drive表計算等で、YYYY-MM-DD に変換が必要です。
・エクスポートの、日付書式も、YYYY-MM-DDになります

f:id:knaka0209:20200702165201p:plain

・起動方法は、一覧に CSVドロップメニューを追加し
 CSV Export, CSV Import メニューを選択すると
 実行できます。
Import は、Import画面に移動します。
 インポート単位は、1カ月分です。

f:id:knaka0209:20200702165530p:plain




.

参考のページ

knaka0209.hatenablog.com





.