From 4443859eff8dd37f964a0fbb081960954f97cf2d Mon Sep 17 00:00:00 2001
From: chriddyp <chris@plot.ly>
Date: 2017年10月17日 01:03:01 -0400
Subject: [PATCH 1/2] experiment with row renderers, enabled by
 https://github.com/plotly/dash-renderer/pull/26
---
 package.json &#124; 2 +-
 src/components/DataTable.react.js &#124; 21 +++++++++-
 usage-sparklines.py &#124; 67 +++++++++++++++++++++++++++++++
 usage.py &#124; 1 +
 4 files changed, 88 insertions(+), 3 deletions(-)
 create mode 100644 usage-sparklines.py
diff --git a/package.json b/package.json
index a62e818..d89764f 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
 "copy-lib": "cp lib/* dash_table_experiments",
 "demo": "builder run demo",
 "install-local": "npm run copy-lib && python setup.py install",
- "prepublish": "npm test && builder run build-dist && npm run copy-lib",
+ "prepublish": "builder run lint && builder run build-dist && npm run copy-lib",
 "build-local": "builder run build-dist && npm run copy-lib",
 "publish-all": "npm publish && python setup.py sdist upload",
 "publish-pypi": "npm run prepublish && python setup.py sdist upload",
diff --git a/src/components/DataTable.react.js b/src/components/DataTable.react.js
index 763ea2a..a35ff25 100644
--- a/src/components/DataTable.react.js
+++ b/src/components/DataTable.react.js
@@ -1,5 +1,5 @@
 import React, {Component, PropTypes} from 'react';
-import ReactDataGrid from 'react-data-grid';
+import ReactDataGrid, {Row} from 'react-data-grid';
 import {Toolbar} from 'react-data-grid-addons';
 import R from 'ramda';
 
@@ -87,7 +87,16 @@ class DataTable extends Component {
 name: c,
 editable: Boolean(props.editable),
 sortable: Boolean(props.sortable),
- filterable: Boolean(props.filterable)
+ filterable: Boolean(props.filterable),
+ formatter: cellProps => {
+ /* eslint-disable */
+ console.warn(cellProps);
+ /* eslint-enable */
+ return (R.type(cellProps.value) === 'Object' ?
+ props.render(cellProps.value) :
+ <div>{cellProps.value}</div>
+ );
+ }
 }));
 
 this.setState(newState);
@@ -302,6 +311,14 @@ class DataTable extends Component {
 rowGetter={this.rowGetter}
 rowsCount={this.getSize()}
 
+ rowRenderer={props => {
+ /* eslint-disable */
+ console.warn(props);
+ /* eslint-enable */
+ props.height = props.idx === 0 ? 100 : props.height;
+ return (<row {...props}/>);
+ }}
+
 {...extraProps}
 
 />
diff --git a/usage-sparklines.py b/usage-sparklines.py
new file mode 100644
index 0000000..45e8c5b
--- /dev/null
+++ b/usage-sparklines.py
@@ -0,0 +1,67 @@
+# -*- coding: UTF-8 -*-
+
+import dash
+from dash.dependencies import Input, Output, State
+import dash_core_components as dcc
+import dash_html_components as html
+import dash_table_experiments as dt
+import json
+import pandas as pd
+import plotly
+
+app = dash.Dash()
+
+app.scripts.config.serve_locally = True
+
+DF_GAPMINDER = pd.read_csv(
+ 'https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv'
+)
+sparklines = {
+ c: html.Div(style={'height': 100, 'width': '100%'}, children=dcc.Graph(
+ id=c,
+ figure={
+ 'data': [{
+ 'x': DF_GAPMINDER[c],
+ 'type': 'histogram'
+ }],
+ 'layout': {
+ 'height': 100,
+ 'width': 150,
+ 'margin': {
+ 'l': 0, 'r': 0, 't': 0, 'b': 0
+ },
+ 'xaxis': {
+ 'showticklabels': False,
+ 'showline': False,
+ 'showgrid': False,
+ },
+ 'yaxis': {
+ 'showticklabels': False,
+ 'showline': False,
+ 'showgrid': False,
+ }
+ }
+ },
+ config={'displayModeBar': False}
+ ))
+ for c in DF_GAPMINDER.columns
+}
+
+app.layout = html.Div([
+ html.H1('💖 Dash Sparklines 💖', style={'textAlign': 'center'}),
+ html.H2(html.I('Coming Soon'), style={'textAlign': 'center'}),
+ dt.DataTable(
+ rows=[sparklines] + DF_GAPMINDER.to_dict('records'),
+ id='table',
+ min_height=1500,
+ ),
+ html.Div(dcc.Dropdown(), style={'display': 'none'})
+], className="container")
+
+
+app.css.append_css({
+ "external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"
+})
+
+if __name__ == '__main__':
+ app.run_server(debug=True, port=8060)
diff --git a/usage.py b/usage.py
index 73be52b..06e0bc1 100644
--- a/usage.py
+++ b/usage.py
@@ -9,6 +9,7 @@
 import plotly
 
 app = dash.Dash()
+server = app.server
 
 app.scripts.config.serve_locally = True
 # app.css.config.serve_locally = True
From 3978967b90eee5f01ab438347ace4897d94f195b Mon Sep 17 00:00:00 2001
From: chriddyp <chris@plot.ly>
Date: 2017年12月15日 15:29:34 -0500
Subject: [PATCH 2/2] Cells as components
---
 .../dash_table_experiments.css &#124; 5 ++++
 dash_table_experiments/metadata.json &#124; 11 ++++++++
 src/components/DataTable.react.js &#124; 28 ++++++++++++++-----
 3 files changed, 37 insertions(+), 7 deletions(-)
diff --git a/dash_table_experiments/dash_table_experiments.css b/dash_table_experiments/dash_table_experiments.css
index 1946da8..295a975 100644
--- a/dash_table_experiments/dash_table_experiments.css
+++ b/dash_table_experiments/dash_table_experiments.css
@@ -1,3 +1,8 @@
+.react-grid-Cell {
+ padding-left: 0px !important;
+ padding-right: 0px !important;
+}
+
 .react-grid-Container {
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
diff --git a/dash_table_experiments/metadata.json b/dash_table_experiments/metadata.json
index 7070f4d..7f10fbd 100644
--- a/dash_table_experiments/metadata.json
+++ b/dash_table_experiments/metadata.json
@@ -229,6 +229,17 @@
 "required": false,
 "description": ""
 },
+ "column_width": {
+ "type": {
+ "name": "number"
+ },
+ "required": false,
+ "description": "",
+ "defaultValue": {
+ "value": "null",
+ "computed": false
+ }
+ },
 "row_height": {
 "type": {
 "name": "number"
diff --git a/src/components/DataTable.react.js b/src/components/DataTable.react.js
index a35ff25..33c4564 100644
--- a/src/components/DataTable.react.js
+++ b/src/components/DataTable.react.js
@@ -1,5 +1,5 @@
 import React, {Component, PropTypes} from 'react';
-import ReactDataGrid, {Row} from 'react-data-grid';
+import ReactDataGrid, {Cell, Row} from 'react-data-grid';
 import {Toolbar} from 'react-data-grid-addons';
 import R from 'ramda';
 
@@ -88,9 +88,10 @@ class DataTable extends Component {
 editable: Boolean(props.editable),
 sortable: Boolean(props.sortable),
 filterable: Boolean(props.filterable),
+ width: props.column_width,
 formatter: cellProps => {
 /* eslint-disable */
- console.warn(cellProps);
+ // console.warn(cellProps);
 /* eslint-enable */
 return (R.type(cellProps.value) === 'Object' ?
 props.render(cellProps.value) :
@@ -303,7 +304,7 @@ class DataTable extends Component {
 headerRowHeight={header_row_height}
 minHeight={min_height}
 minWidth={min_width}
- row_height={row_height}
+ rowHeight={row_height}
 row_scroll_timeout={row_scroll_timeout}
 tab_index={tab_index}
 
@@ -313,10 +314,19 @@ class DataTable extends Component {
 
 rowRenderer={props => {
 /* eslint-disable */
- console.warn(props);
+ console.warn('rowProps', props);
 /* eslint-enable */
- props.height = props.idx === 0 ? 100 : props.height;
- return (<row {...props}/>);
+ return (
+ <row + cellRenderer={(cellProps) => {
+ /* eslint-disable */
+ console.warn('cellProps', cellProps);
+ /* eslint-enable */
+ cellProps.children = this.props.render(cellProps.value);
+ return <cell {...cellProps}/>
+ }}
+ {...props}
+ />);
 }}
 
 {...extraProps}
@@ -355,6 +365,9 @@ DataTable.propTypes = {
 // rows_start: PropTypes.number,
 // rows_end: PropTypes.number
 // }),
+ column_width: PropTypes.number, // TODO or null?
+ // TODO - column properties for each column
+ // TODO - column_style?
 row_height: PropTypes.number,
 row_scroll_timeout: PropTypes.number,
 tab_index: PropTypes.number,
@@ -380,7 +393,8 @@ DataTable.defaultProps = {
 sortable: true,
 filters: {},
 selected_row_indices: [],
- row_selectable: false
+ row_selectable: false,
+ column_width: null
 }
 
 export default DataTable;
</div><div class="naked_ctrl">
<form action="/index.cgi/contrast" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://patch-diff.githubusercontent.com/raw/plotly/dash-table-experiments/pull/11.patch">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://patch-diff.githubusercontent.com/raw/plotly/dash-table-experiments/pull/11.patch" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast" selected="selected">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>