[time_table] adding support for URLs / links

Using Mustache templating and providing {{ metric }} as well as {{ ...formData }} as context.
apache · Oct 4, 2017 · 2c28ee7 · 2c28ee7
1 parent 1fb8716
commit 2c28ee7
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/superset/assets/javascripts/components/MetricOption.jsx b/superset/assets/javascripts/components/MetricOption.jsx
@@ -6,17 +6,18 @@ import InfoTooltipWithTrigger from './InfoTooltipWithTrigger';
 const propTypes = {
   metric: PropTypes.object.isRequired,
   showFormula: PropTypes.bool,
+  url: PropTypes.string,
 };
 const defaultProps = {
   showFormula: true,
 };
 
-export default function MetricOption({ metric, showFormula }) {
+export default function MetricOption({ metric, showFormula, url }) {
+  const verbose = metric.verbose_name || metric.metric_name;
+  const link = url ? <a href={url}>{verbose}</a> : verbose;
   return (
     <div>
-      <span className="m-r-5 option-label">
-        {metric.verbose_name || metric.metric_name}
-      </span>
+      <span className="m-r-5 option-label">{link}</span>
       {metric.description &&
         <InfoTooltipWithTrigger
           className="m-r-5 text-muted"

diff --git a/superset/assets/javascripts/explore/stores/visTypes.js b/superset/assets/javascripts/explore/stores/visTypes.js
@@ -378,13 +378,19 @@ export const visTypes = {
         controlSetRows: [
           ['groupby', 'metrics'],
           ['column_collection'],
+          ['url'],
         ],
       },
     ],
     controlOverrides: {
       groupby: {
         multiple: false,
       },
+      url: {
+        label: t(
+          "Templated link, it's possible to include {{ metric }} " +
+          'or other values coming from the controls.'),
+      },
     },
   },
 

diff --git a/superset/assets/visualizations/time_table.jsx b/superset/assets/visualizations/time_table.jsx
@@ -4,6 +4,7 @@ import propTypes from 'prop-types';
 import { Table, Thead, Th } from 'reactable';
 import d3 from 'd3';
 import { Sparkline, LineSeries } from '@data-ui/sparkline';
+import Mustache from 'mustache';
 
 import MetricOption from '../javascripts/components/MetricOption';
 import TooltipWrapper from '../javascripts/components/TooltipWrapper';
@@ -55,10 +56,13 @@ function viz(slice, payload) {
   }
   const tableData = metrics.map((metric) => {
     let leftCell;
+    const context = Object.assign({}, fd, { metric });
+    const url = fd.url ? Mustache.render(fd.url, context) : null;
+
     if (!payload.data.is_group_by) {
-      leftCell = <MetricOption metric={metricMap[metric]} showFormula={false} />;
+      leftCell = <MetricOption metric={metricMap[metric]} url={url}showFormula={false} />;
     } else {
-      leftCell = metric;
+      leftCell = url ? <a href={url}>{metric}</a> : metric;
     }
     const row = { metric: leftCell };
     fd.column_collection.forEach((c) => {