You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ma...@apache.org on 2017/10/12 04:25:19 UTC
[incubator-superset] branch master updated: Adding sort time table
(#3651)
This is an automated email from the ASF dual-hosted git repository.
maximebeauchemin pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
The following commit(s) were added to refs/heads/master by this push:
new 7f07fbe Adding sort time table (#3651)
7f07fbe is described below
commit 7f07fbefbc8fc3fd09b04243ed5b98d45e9010d7
Author: michellethomas <mi...@gmail.com>
AuthorDate: Wed Oct 11 21:25:17 2017 -0700
Adding sort time table (#3651)
* Updating time_table component to sort
* Removing old sort
---
superset/assets/visualizations/time_table.jsx | 88 +++++++++++++++------------
1 file changed, 50 insertions(+), 38 deletions(-)
diff --git a/superset/assets/visualizations/time_table.jsx b/superset/assets/visualizations/time_table.jsx
index f318b00..38f193b 100644
--- a/superset/assets/visualizations/time_table.jsx
+++ b/superset/assets/visualizations/time_table.jsx
@@ -1,7 +1,7 @@
import ReactDOM from 'react-dom';
import React from 'react';
import propTypes from 'prop-types';
-import { Table, Thead, Th } from 'reactable';
+import { Table, Thead, Th, Tr, Td } from 'reactable';
import d3 from 'd3';
import { Sparkline, LineSeries } from '@data-ui/sparkline';
import Mustache from 'mustache';
@@ -44,16 +44,8 @@ function viz(slice, payload) {
metricMap[m.metric_name] = m;
});
- let metrics;
- if (payload.data.is_group_by) {
- // Sorting by first column desc
- metrics = payload.data.columns.sort((m1, m2) => (
- reversedData[0][m1] > reversedData[0][m2] ? -1 : 1
- ));
- } else {
- // Using ordering specified in Metrics dropdown
- metrics = payload.data.columns;
- }
+ const metrics = payload.data.columns;
+ const defaultSort = { column: fd.column_collection[0].key, direction: 'desc' };
const tableData = metrics.map((metric) => {
let leftCell;
const context = Object.assign({}, fd, { metric });
@@ -80,28 +72,31 @@ function viz(slice, payload) {
const extent = d3.extent(sparkData);
const tooltip = `min: ${d3format(c.d3format, extent[0])}, \
max: ${d3format(c.d3format, extent[1])}`;
- row[c.key] = (
- <TooltipWrapper label="tt-spark" tooltip={tooltip}>
- <div>
- <Sparkline
- ariaLabel={`spark-${metric}`}
- width={parseInt(c.width, 10) || 300}
- height={parseInt(c.height, 10) || 50}
- margin={{
- top: SPARK_MARGIN,
- bottom: SPARK_MARGIN,
- left: SPARK_MARGIN,
- right: SPARK_MARGIN,
- }}
- data={sparkData}
- >
- <LineSeries
- showArea={false}
- stroke={brandColor}
- />
- </Sparkline>
- </div>
- </TooltipWrapper>);
+ row[c.key] = {
+ data: sparkData[sparkData.length - 1],
+ display: (
+ <TooltipWrapper label="tt-spark" tooltip={tooltip}>
+ <div>
+ <Sparkline
+ ariaLabel={`spark-${metric}`}
+ width={parseInt(c.width, 10) || 300}
+ height={parseInt(c.height, 10) || 50}
+ margin={{
+ top: SPARK_MARGIN,
+ bottom: SPARK_MARGIN,
+ left: SPARK_MARGIN,
+ right: SPARK_MARGIN,
+ }}
+ data={sparkData}
+ >
+ <LineSeries
+ showArea={false}
+ stroke={brandColor}
+ />
+ </Sparkline>
+ </div>
+ </TooltipWrapper>),
+ };
} else {
const recent = reversedData[0][metric];
let v;
@@ -140,10 +135,13 @@ function viz(slice, payload) {
} else if (c.bounds && c.bounds[1] !== null) {
color = v < c.bounds[1] ? ACCESSIBLE_COLOR_BOUNDS[1] : ACCESSIBLE_COLOR_BOUNDS[0];
}
- row[c.key] = (
- <span style={{ color }}>
- <FormattedNumber num={v} format={c.d3format} />
- </span>);
+ row[c.key] = {
+ data: v,
+ display: (
+ <span style={{ color }}>
+ <FormattedNumber num={v} format={c.d3format} />
+ </span>),
+ };
}
});
return row;
@@ -151,7 +149,9 @@ function viz(slice, payload) {
ReactDOM.render(
<Table
className="table table-condensed"
- data={tableData}
+ defaultSort={defaultSort}
+ sortBy={defaultSort}
+ sortable={fd.column_collection.map(c => c.key)}
>
<Thead>
<Th column="metric">Metric</Th>
@@ -166,6 +166,18 @@ function viz(slice, payload) {
)}
</Th>))}
</Thead>
+ {tableData.map(row => (
+ <Tr key={row.metric}>
+ <Td column="metric" data={row.metric}>{row.metric}</Td>
+ {fd.column_collection.map(c => (
+ <Td
+ column={c.key}
+ key={c.key}
+ value={row[c.key].data}
+ >
+ {row[c.key].display}
+ </Td>))}
+ </Tr>))}
</Table>,
document.getElementById(slice.containerId),
);
--
To stop receiving notification emails like this one, please contact
['"commits@superset.apache.org" <co...@superset.apache.org>'].