フィルタのUI

[elcih17]

modeはダッシュボード(view)の右側部分にこんな感じのUIが置かれている

• 選択 / 選択解除
• 検索
• 適用

あたりは必要か

[elcih17]

<easy-dc-dataset
  dataset="a"
  filter-dimension="foo"
></easy-dc-dataset>

形としてはに渡すpropsでいく

名前どうしよう filter-keys? filter-dimension? filters?

[elcih17]

値でフィルタかけたいとのこと

group by keyしたfilter用のdatasetを持っておけばいいか

[elcih17]

1/16 (ハッピーターン) までに入れる

[elcih17]

@otolab
こちら意見いただけると助かります！

[elcih17]

このフィルタUIの表示のさせ方によって、ダッシュボード全体のレイアウト計算に影響を与えるので、そこらへんも考慮する必要がある

[otolab]

UIについては @kojimakazuto にアイデアをもらうのが一番だと思う。
内部的にはvue-multiselect系をベースに使うのが楽そうではある。近い形のものはありそうな気もする。

実装はまかせた。

すごく関係ないけど、縦長レイアウトにも対応したいね。
某経営資料系のレポートも縦長。

[elcih17]

• dataset, dimension(= keys)を受け取る
• filter用のdatasetを作る
  • this.manager.registerDataset()
• computedで
  • キーの絞り込み条件を指定されてない時 -> dimension.group().map(data => data.key) みたいな
  • キーの絞り込み条件を指定された時 -> 指定された値を考慮した結果を返す関数
• viewの前に対象のキーに対してlabelsの変換をかます

このcomputedの値が返らなければフィルタUIは出さない
これでいいか

[elcih17]

@otolab
確かに、multi-selectいれるべきかもですね

縦型レイアウト

DOMOのやつですよね！
タイトル + 数字 (number-display) + チャート みたいな形だと縦型の方が見やすくなりそうですよね。

[elcih17]

• オーバーレイ
• チャート全画面表示時は隠す
• 表示 / 非表示の切り替え (ボタンか何か)

になる予定

[elcih17]

labelsがチャート固有の辞書をサポートしているので、filterも同じ構造にしといた方がいいか

そうなると全てのkeyに対してlabelを適用した状態のデータセットでgroup byか

[elcih17]

細かくやると複雑になるし、多分そこまで高機能なものは求められてないと思うので、common dimensionのみサポートする

(dashboardの中で共通のフィルタと考えると、むしろcommon dimensionのみが正かもしれない)

[elcih17]

[elcih17]

選択状態になっていない部分をグレーアウトではなく、完全に消すとなると、FakeGroupsのアプローチしかない。

https://github.com/dc-js/dc.js/wiki/FAQ#how-do-i-filter-the-data-before-its-charted
Filter out bins by a predicate function on the values

function filter_bins(source_group, f) {
    return {
        all:function () {
            return source_group.all().filter(function(d) {
                return f(d.value);
            });
        }
    };
}

FakeGroupsのアプローチはそこそこ大きい変更になってしまうので、UIをつめてから実装する

[elcih17]

https://dc-js.github.io/dc.js/docs/html/dc.selectMenu.html

とりあえず、dc.jsのselectMenuを使うのがシンプルな気がしてきたのでそれで実装してみる