Adding sort time table

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,18 +135,23 @@ 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;
   });
   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),
   );