RやPythonと違って少し工夫が必要です。
イントロ
Quarto、皆さん使ってますか？便利な機能が豊富にあって、未だに全ての機能を使いこなせておりませんが、私は色々と手を動かしていくことで学びを得ています。
その中で、駄目な組み合わせや注意しなくてはいけないことがたまにあるため、備忘録として残しておきます。基本的な使い方は公式のマニュアルが充実しているので、このブログに書かれる内容は基本的にニッチな内容です（それはいつもそう）
QuartoではDashboardの機能があり、かなり手軽に作成出来る印象です。ただ、裏にRやPythonを実行出来るようなサーバを準備することが出来ない場合、とりあえずデータを置いておいて、ブラウザ上で表示をいじりたいな…ということがあったりなかったりします。
その際の選択肢として、ojs、Observable JSがあり、これがQuartoの公式でも推されているので使っていこうと思っております。ただ、ほぼPureなJSを触ることになるのでしばらくは苦戦しそうですが。
本題
さて本題。DashboardをQuartoで作る場合、スタイルがうまく当てられずに表示がおかしくなるということでIssueが立ってました。
Quartoはリポジトリが多いのでどこにどの情報があるのか、追うのが難しくなっていきますね。私はqmdファイルにどうしてそうしたのかをissueのリンクをコメントで貼ったりしています。
コードを見る方が早いと思いますので、実例をここに。
title: "古民家IoT" format: dashboard date: last-modified
date-format: "DD-MMM-YYYY"
Row {height="20%"}
//| include: false value = 42::: {.valuebox tile="Humidity" icon="moisture" color="primary"} 湿度(%)
{ojs} value:::
一番良い方法は、インラインで実行するコードの結果を表示するということで、こうなっています。この時、コードの前後に文字があるとダメなので注意です。
値を表示するだけなので、前後に文字（この場合は単位）を付けたい場合、例えばvalue = "42%"とすれば良いわけです。単位のスタイルを変えるといったことはhtmltoolsを使えば行けるかもですが、未調査。
スタイルについては特定の階層構造とタグやクラスなどが関係していて、ブラウザの開発ツールを使ってcssの何が反映されているのかを見ると確認出来ますが…あまり変なことをせず、マニュアルにある範囲でやるのが一番良いかも知れませんね！
