svelteで、測定値のグラフ表示

概要:

前のsvelte + IndexedDBの関係で、chart.jsを使ったグラフ表示となります。

• 測定値(体重等)を入力し、グラフで確認できたりする機能となります

---

環境

• svelte: 3.17.3
• svelte-spa-router
• chart.js

---

参考のデモページ

https://cms-kuc-svelte1-4app.vercel.app/#/mdats

---

参考のコード

https://github.com/kuc-arc-f/svelte1_4app

---

グラフ画面

---

実装など

• chart.svelte , 測定値を取得して chart.js入力形式データを作成表示します

pages/mdats/chart.svelte

chart.svelte

var color_blue = 'rgb(54, 162, 235)';
export let weight_data = [], label_data=[];

function get_config(weight_data){
  return {
    type: 'line',
    data: {
      labels: label_data,
      datasets: [{
        label: 'Weight',
        fill: false,
        backgroundColor: color_blue,
        borderColor: color_blue,
        data: weight_data,
      }]
    },
    options: {
      responsive: true,
      tooltips: { mode: 'index',intersect: false,},
      hover: { mode: 'nearest',intersect: true},
    }
  };
}
var config = LibTask.get_const()
var db = new Dexie( config.DB_NAME );
db.version(config.DB_VERSION).stores( config.DB_STORE );

const  get_items = async function (db){
  var items = await db.mdats.toArray()
  items = LibMdat.get_convert_date(items)
  var arr = convert_chart_arr(items)
console.log(arr)
  weight_data = arr.wnum
  label_data = arr.lbl
  return items
}
function convert_chart_arr( items ){
	var wnum = []
	var lbl = []
	items.forEach( function (item) {
//console.log( item );    
		lbl.push( item.mdate )                
		wnum.push( item.w_num )                
	});
	var ret= {
		"lbl" : lbl,
		"wnum" : wnum,
	}
	return ret;
}
onMount(async() => {
  await get_items(db)
  const config = get_config(weight_data)
//console.log(config);
  var ctx = document.getElementById('myChart').getContext('2d');
  window.myLine = new Chart(ctx, config);
console.log('the component has mounted');
});
</script>

<!-- -->
<div class="container">
	<h3> mDat - Chart</h3>
	<hr />
	<canvas id="myChart" ></canvas>
</div>

• 入力 , pages/mdats/create.svelte

....