そこそこ進捗がでた。だいぶ前に作成したサイトの更新(コミット)をグラフ化したやつを移植したのが前回との大きい差分。

つくってるやつ


status.yoshinorin.io

前回まで


コミットグラフ


サイトの更新(コミット)をグラフ化したやつを移植した。移植にあわせてこのブログだけじゃなくて、コミットの情報を生成できる全てのサイトものを表示するようにした。

グラフは引き続きEChartsを使っている。Vueでラップしたものもあったけれども、ECharts自体がそこそこ大きい(minで300KBちかい)ので、EChartsのJSはCDNを参照させたい(自分のS3から配信したくない)という意図で使用していない。

他のデータと同じくS3からJSONを取ってきて表示している。他のデータはちゃんとインターフェースとかクラスとか作っているが、そろそろ定義するのがめんどくさくなってきたので@ts-ignoreで濁しまくった。型がないほうが楽という人の気持ちがわかったような気もする。

グラフ (Scatter)

その昔、GitHubに表示されていたグラフっぽいやつ。このサイトでも一時期 Aboutページに表示していたけど、いろいろあって途中から表示をやめていた。今回移植にあわせて復活させた。

グラフ(Stack)

年別・月別・週別・日別・時間帯別は移植ついでに積み上げグラフにした。コードは積み上げグラフ化&汎用化するためにそこそこ改修した。この記事にコードを載せようかと思っていたけど、とある部分の対応で超絶雑コードを書いてしまったのでやめた。

一番コミットが多いこのサイトに赤色が割り当てられてしまい、全体的に圧の強いグラフとなってしまったのでなんとかしたいが、気力が尽きたので後回し。

サイドバー


前のデザインがなんかもっさりしていたのでボタンに変えた。

Vuetifyのサイドバーは閉じたときにアイコンが表示されるのが前提となっているようで、ボタンに変えると閉じたときの見た目がイマイチになってしまった。ので、誤魔化すために閉じるとボタンを非表示にするようにした。そうすると今度はサイドバーがクリックできるのかわかりづらくなったので「クリックできますよ」アイコンを付けた。

プレオープン


そこそこ充実してきた。もうお披露目して良いと思うので、各サイトのリンクの差し替えとかを行った。

感想


トップページでもデータを取得して加工して表示、各ページに遷移したときにも同じデータを取って加工して表示。みたいなのがある。なるべく関数として切り出しているけれども、同じコードを書くことをゼロにはできないわけで、こういうのでVuexとか使いたくなるのかな。と思った。でもVuex勉強するのがしんどいので当面はこのまま頑張る。

つくってて自分でも「こいつやっぱり暇なのかな?」と思った。正直もっと有意義な時間の使い方があると思うが、まだ表示したいデータがあるのでしばらくやっていくつもり。

つづき


自分が運用しているサイトのいろいろ表示するやつの進捗(5)