plaidev / easy-dc-dash Goto Github PK

小数点以下◯桁とか、パーセント表示とか。

modeのこういうやつです。

coordinateGridBaseをそのまま出す

目的：

各チャートのスタイルのカスタマイズの簡便化

内容：

DefaultTheme の colors で設定されている値に、

• chartType の指定
• オプションの指定

DefaultTheme の layout で設定されている値に、

• オプションの指定

require('_setup')しているが、もっと早いバージョンがあるはず

2本のlineChartの間が塗りつぶされたarea-lineチャートを追加する。

背景：

https://github.com/plaidev/karte-io-support/issues/1909#issuecomment-325581441

Actionのリフトアップ/マイナスグラフは配色をもう少し幅出せると良いかもです。
途中の項目から同色に戻るのと、最後に入るOtherと最初に来る項目が同色なので混じってしまう。
デフォルト10個までになっていてOthersが入ると11個、色が5個なので毎回ちょうどかぶる。

対応：

色幅を11種類に増やす。

Tones:
['#01d4c0', '#09ccba', '#11c4b3', '#1abbac', '#22b3a6', '#2aab9f', '#32a398', '#3a9b92', '#43928b', '#4b8a84', '#53827e']

Tones_complemet
['#bd0022', '#b60727', '#ae0f2b', '#a71630', '#a01d35', '#992439', '#912c3e', '#8a3343', '#833a47', '#7c414c', '#744951']

例

のようなテーブルで、<a href="https://admin.karte.io/p/hoge">とあるプロジェクト</a>にしたいです。

バーチャートやパイチャートなど、テーブル以外でも、要素をクリックして特定のリンク（接客サービスの設定画面など）に遷移するようにしてほしいです〜

知る --> 合わせる的な動きとして、とても欲しい（他のダッシュボード系だと意外とない）です。

理想は、Google Spreadsheetのリンクのように、ホバーでリンクのURLが出て、そこをクリックするとページ遷移（target=”_blank”）ですが、単純にクリック遷移で絞り込まれるチャートとリンク遷移するチャートが切り替えられるだけでもうれしいです！
リンク先URLは、データの特定のカラムに格納して、そのカラム指定とかがうれしいです！

内容：

https://modeanalytics.com/editor/plaidev/reports/c5d5ccceb4e8
これみて思ったんですが、全フィルターをリセットするボタンは表示しない感じですか？

これだけだと初見ではfilterを解除するボタンだとわからないと思うので、filterしている値を出さないのであればこの横に フィルターを解除する みたいな文言あってもいいかと思いました

https://plaidev.github.io/easy-dc-dash/docs/example/dashboard-01/

デザイン設定が未指定の時にデザイン崩れを起こすようになってしまったので直す。

• graphタイトルが無い時はヘッダ不要
• margin(的なもの)がなくなっている
• number-displayのデフォルトデザインが変 #106
• pieチャートのlegendのでかたが変
• 拡大・縮小でデザインが壊れる
• tableのalignは**ではなく上寄りの方がいい

layoutの計算が同じになっていない。
refactoringも行う

EasyDC.Store
  .registerTheme('theme-name', {
    extends: 'default',
    colors: (_super, chartType, name, options) {
      return super(chartType, name, options)
    },
    layout: (_super, chartType, name, options) {
      let default = super(chartType, name, options)
      if (default.name === 'square') {
        default.margin.top += 10
      }
      return default
    }
  })
  .setDefaultTheme('theme-name')

とか。デザインの調整がしやすくなるはず。
cardコンポーネントも置き換え可能にしたい...

refs #58 (comment)

• テーマに合わせて色合いのコントロールをしたい
• 同じdimension / 同じ値のときは同じ色にしたい
• 違う値に同じ色が割り当てられるのを避けたい

スクロールする大きめのレポートでは、なにで絞り込まれているのかわかりづらくなる。

通常状態では「？」でホバー表示、最大化状態では右下に出す。など。

デグレ

list-rowでothersに大量のdimensionがまとめられているときなど、filter状態の表記がひたすら伸びる。
一定の文字数に表示を抑えるべき

現状相対パスでeasy-dc-dash/libs/json/**.topojsonを参照するようにしているが
modeでbundle.browser.jsを読み込むと https://modeanalytics.com/libs/json/japan_without_suffix.topojson のようになりエラーが起きる

falseがハードコーディングされている

例えば、dimensionがcampaign_idの場合、値のラベル（下記参照）もcampaign_idになるが、IDを見せられてもわからないのでここにはcampaign_nameを表示したい。

dimensionをcampaign_nameにすればいいのでは？という対応については、nameは違うIDの要素でも重複する可能性があり、重複すると同じ値に合計されてしまうのでNG。

もうすでにあったらすいません！

representationsはObjectとして縛っているが、dimension, reduce, labels, columnsなどと同じようにjsとして受け取れたほうが楽っぽい。

<data-table dimension="d.api_key"
  columns="api_key,uu,delivered_uu,goal_uu,delivered_goal_cnt,delivered_revenue,liftup_cnt,liftup_revenue"
  labels="プロジェクト,UU数,配信UU数,CV数,配信経由CV数,配信経由購入額,リフトアップCV数,リフトアップ額"
  representations="projectLink,number,number,number,number,monery,number,money,money"
></data-table>

というようなユースケース。nullや''について対応すれば何とかなりそう？

  <easy-dc-dataset
    csv='./dataset.csv'
    label-mapper="[{key: d.api_key, label: d.project_name}]"
  ></easy-dc-dataset>

データセットのラベルとして登録される。
（一番最初に見つかった値が保存される）

coordinationGridではないが、合わせる

しかもカジュアルに使いたい。
keyAccessorを追加する。

https://github.com/plaidev/crossxfilters として実装した。

同名のcommonDimensionとして登録した場合、複数のdataset間でdimensionに対するフィルタ操作が共有される。

EasyDC.Store.registerDimension('$commonDimension', (d) => d.key, {dataset: 'datasetA'})
EasyDC.Store.registerDimension('$commonDimension', (d) => d.k, {dataset: 'datasetB'})

<multidim-pie dataset="datasetA" dimension='$commonDimension' reduce='d.value'></multidim-pie>

チャート側では、$から始まるdimension名は常に登録済みのcommon dimensionとして扱う。

たとえば、接客サービスのリフトアップの数字を棒グラフで表示する際に

dimension="campaign_id"
reduce="d.liftup_count"

となっている状態で、liftup_countで降順にソートして並べたりしたいです。

https://user-images.githubusercontent.com/3478945/28000196-30ff57fc-655f-11e7-8163-5b725e910ed1.png

共通コンポーネントからやってみる

単純にrollup-plugin-vueを2.4系にアップデートしてscopedを有効化する方法だと、上手くいかない。

scopedだとCSSのセレクタの最後に[data-v-xxxxxx]を付与する形になるが、セレクタの最後はd3.js管理下の要素を指すことがほとんどであり、これにはvueのattributeがのっていない。

CSS Modulesもサポートしているので、そちらを使う形で対応。
チャートのルート要素のクラスのみ固有にして、d3.js管理下のクラス名は:globalとする。

idea:
jsdom, mochaでSVGの要素数の確認を行う

最低限、グラフの要素が表示されることの確認が取れることを目指す。
データ型やreduceの処理の成否などが主なチェック項目になる想定。

見た目の崩れに関しては一旦おいておく。

ひとまず、固定サイズのcard上にchart, legend, titleなどを配置する構造。
親要素をdisplay: flexにするのを想定している。

それらを並べて簡単に使えるgridの機能があると捗る。

要望

• tabで分けたい
• 複数のチャートの組み合わせに対して、タイトル・文章を交ぜ書きし、きれいに並べたい

firstRowの中の値を見てcolumnの型を決めるので、nullが入っていたときに正常にreduceされない

dc.jsの制限の可能性あり。
compositeで実装しているので、その影響か?

capで上位が絞られ、その上でdescendingされるような振る舞いになる。
また、list-rowでのマイナスの値の振る舞いが上手くない？？