easy-dc-dash's People
Forkers
otolabeasy-dc-dash's Issues
data-tableのカラムごとにフォーマットを指定したい
multi-linesチャート追加
全画面モード
シンプルなbarチャートがない
coordinateGridBaseをそのまま出す
DefaultTheme のオプション設定機能
目的:
各チャートのスタイルのカスタマイズの簡便化
内容:
DefaultTheme の colors
で設定されている値に、
- chartType の指定
- オプションの指定
DefaultTheme の layout
で設定されている値に、
- オプションの指定
【つなげる】spannerのunittestを早く動くようにする
require('_setup')しているが、もっと早いバージョンがあるはず
area-lineチャートを追加
2本のlineChartの間が塗りつぶされたarea-lineチャートを追加する。
網羅的なdocs/example/chart/*.htmlの作成
[カスタムレポート] color オプションの追加
背景:
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']
【つなげる】データテーブルv2 spannerのテーブル表示
data-tableのlinkColumnで、テキストとリンク先URLを別カラムの値を使いたい
例
name | url |
---|---|
とあるプロジェクト | https://admin.karte.io/p/hoge |
のようなテーブルで、<a href="https://admin.karte.io/p/hoge">とあるプロジェクト</a>
にしたいです。
week-rowの色周りの処理修正
isShowLabels、bubble, multidim-pieのlabel調整
legendが一度表示されると消えない
チャートをクリックするとリンク遷移するようにしたい
バーチャートやパイチャートなど、テーブル以外でも、要素をクリックして特定のリンク(接客サービスの設定画面など)に遷移するようにしてほしいです〜
知る --> 合わせる的な動きとして、とても欲しい(他のダッシュボード系だと意外とない)です。
理想は、Google Spreadsheetのリンクのように、ホバーでリンクのURLが出て、そこをクリックするとページ遷移(target=”_blank”
)ですが、単純にクリック遷移で絞り込まれるチャートとリンク遷移するチャートが切り替えられるだけでもうれしいです!
リンク先URLは、データの特定のカラムに格納して、そのカラム指定とかがうれしいです!
【カスタムレポート】フィルターUI修正
内容:
https://modeanalytics.com/editor/plaidev/reports/c5d5ccceb4e8
これみて思ったんですが、全フィルターをリセットするボタンは表示しない感じですか?
これだけだと初見ではfilterを解除するボタンだとわからないと思うので、filterしている値を出さないのであればこの横に フィルターを解除する
みたいな文言あってもいいかと思いました
dashboard-01のデザイン崩れ修正
https://plaidev.github.io/easy-dc-dash/docs/example/dashboard-01/
デザイン設定が未指定の時にデザイン崩れを起こすようになってしまったので直す。
- graphタイトルが無い時はヘッダ不要
- margin(的なもの)がなくなっている
- number-displayのデフォルトデザインが変 #106
- pieチャートのlegendのでかたが変
- 拡大・縮小でデザインが壊れる
- tableのalignは**ではなく上寄りの方がいい
[composite] fullscreenにするとグラフがずれることがある
layoutの計算が同じになっていない。
refactoringも行う
themeを外部から登録できるようにする
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コンポーネントも置き換え可能にしたい...
バブルチャート(bubble)でshow-labelが効いていないようです
colorsシステム考
refs #58 (comment)
- テーマに合わせて色合いのコントロールをしたい
- 同じdimension / 同じ値のときは同じ色にしたい
- 違う値に同じ色が割り当てられるのを避けたい
layout.caption.heightの追加
list-rowが拡大された時、capも調整する
filterの状態すべてを画面の何処かに常時表示する
スクロールする大きめのレポートでは、なにで絞り込まれているのかわかりづらくなる。
チャートの読み方・説明文を表示できるようにする
通常状態では「?」でホバー表示、最大化状態では右下に出す。など。
filter-stacked-barの絞り込みが動いていない
デグレ
[bar] scale='ordinal'の場合のdomain設定がおかしい
filterの表記がひたすら伸びる
list-rowでothersに大量のdimensionがまとめられているときなど、filter状態の表記がひたすら伸びる。
一定の文字数に表示を抑えるべき
topojsonの参照に相対パスを使うのをやめる
現状相対パスでeasy-dc-dash/libs/json/**.topojsonを参照するようにしているが
modeでbundle.browser.jsを読み込むと https://modeanalytics.com/libs/json/japan_without_suffix.topojson
のようになりエラーが起きる
API referenceを書く
[stacked-lines] brash-on=trueが効かない
falseがハードコーディングされている
チャートのラベルに、dimensionとは違うカラムの値を使いたい
[data-table] representationsの指定方法を変更する
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>
データセットのラベルとして登録される。
(一番最初に見つかった値が保存される)
[list-row] デフォルトでxAxisLabelが斜めになっていない
coordinationGridではないが、合わせる
stacked-barを無くす
dimensionの値以外でx軸に並べたいときもある
しかもカジュアルに使いたい。
keyAccessorを追加する。
crossfilterインスタンス間でのフィルター同期
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として扱う。
[list-row] labelsを考慮できていない
ordinal-barでソートがしたい
たとえば、接客サービスのリフトアップの数字を棒グラフで表示する際に
dimension="campaign_id"
reduce="d.liftup_count"
となっている状態で、liftup_countで降順にソートして並べたりしたいです。
xAxisのlabelが多すぎるときは自動的に表示しないようにする
themeのcolors設定を有効化する
@kojimakazuto のデザインを元にスタイルを当ててみる
style scopeが動くようにする
単純にrollup-plugin-vueを2.4系にアップデートしてscopedを有効化する方法だと、上手くいかない。
scopedだとCSSのセレクタの最後に[data-v-xxxxxx]
を付与する形になるが、セレクタの最後はd3.js管理下の要素を指すことがほとんどであり、これにはvueのattributeがのっていない。
CSS Modulesもサポートしているので、そちらを使う形で対応。
チャートのルート要素のクラスのみ固有にして、d3.js管理下のクラス名は:global
とする。
unittestを作る
idea:
jsdom, mochaでSVGの要素数の確認を行う
最低限、グラフの要素が表示されることの確認が取れることを目指す。
データ型やreduceの処理の成否などが主なチェック項目になる想定。
見た目の崩れに関しては一旦おいておく。
gridシステム考
ひとまず、固定サイズのcard上にchart, legend, titleなどを配置する構造。
親要素をdisplay: flex
にするのを想定している。
それらを並べて簡単に使えるgridの機能があると捗る。
要望
- tabで分けたい
- 複数のチャートの組み合わせに対して、タイトル・文章を交ぜ書きし、きれいに並べたい
[data-table] 一行目に値が入っていないcolumnのschemaが定まらない
firstRowの中の値を見てcolumnの型を決めるので、nullが入っていたときに正常にreduceされない
[multi-lines] brush-onの絞り込みが効かない
dc.jsの制限の可能性あり。
compositeで実装しているので、その影響か?
x軸、y軸が何の数字なのかの説明を出したい
list-rowのdescendingとcapの組み合わせが正しく動作しない
capで上位が絞られ、その上でdescendingされるような振る舞いになる。
また、list-rowでのマイナスの値の振る舞いが上手くない??
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.