Githubの草っぽいグラフを表示させたくて vue-heatmap を使ってみた
LaravelでVue.jsを使って、vue-heatmapのライブラリを使って、見た目だけだけど、Githubの草っぽいやつを表示できるようにした。
やったこと
vuejs-heatmap ライブラリインストール
docker-compose run --rm yarn add vuejs-heatmap
yarnの使い方わかんなかったので以下の記事で勉強した
この後、何やればいいか全然わからなかったので、いったん vue-heatmapのリポジトリをローカルに持ってきてサンプルを動かしてみた
ghq get https://github.com/DominikAngerer/vue-heatmap.git
サンプル動かすためには、main.js をちょっと修正する
修正したら npm run devする
npm run dev
そうすると、勝手にブラウザが開いてグラフが表示される
これをLaravelで作ってるアプリにどうやって載せるのか、よくわからんかったけど、トライアンドエラーでいろいろと試してみると、ちゃんと表示されるようになった。以下、やったこと
まずファイル配置と追記した
そしてコマンドを叩いて終わり
docker-compose run --rm yarn run dev
感想
やっと見た目だけだけど vue-heatmap を導入して表示できるようになった。次は、Laravel側データを取ってくる。vuejs-heatmap コンポーネント側の entries にベタ書きされてるからこれをいい感じに取ってくるようにする。勉強するぞー
Vue.jsは本読んでて、超基本的なところはわかったけど、全体的によくわからないことが多いので、時間あるとき引き続き勉強しよ。むずい。むずいけど、ライブラリ使いこなせると、UI自由に扱えてめっちゃたのしそう。
