Fix metric formating in Dashboard view + some refactoring (#2598)

* Fix metric formating in Dashboard view + some refactoring

* Fixing build

superset/assets/javascripts/dashboard/Dashboard.jsx

@@ -14,8 +14,8 @@ import Header from './components/Header';
 require('bootstrap');
 require('../../stylesheets/dashboard.css');
 
-export function getInitialState(dashboardData, context) {
-  const dashboard = Object.assign({ context }, utils.controllerInterface, dashboardData);
+export function getInitialState(boostrapData) {
+  const dashboard = Object.assign({}, utils.controllerInterface, boostrapData.dashboard_data);
   dashboard.firstLoad = true;
 
   dashboard.posDict = {};
@@ -24,12 +24,8 @@ export function getInitialState(dashboardData, context) {
       dashboard.posDict[position.slice_id] = position;
     });
   }
-  dashboard.curUserId = dashboard.context.user_id;
   dashboard.refreshTimer = null;
-
-  const state = {
-    dashboard,
-  };
+  const state = Object.assign({}, boostrapData, { dashboard });
   return state;
 }
 
@@ -98,19 +94,19 @@ function initDashboardView(dashboard) {
   $('[data-toggle="tooltip"]').tooltip({ container: 'body' });
 }
 
-export function dashboardContainer(dashboard) {
+export function dashboardContainer(dashboard, datasources) {
   return Object.assign({}, dashboard, {
     type: 'dashboard',
     filters: {},
     init() {
       this.sliceObjects = [];
-      dashboard.slices.forEach((data) => {
+      dashboard.slices.forEach(data => {
         if (data.error) {
-          const html = '<div class="alert alert-danger">' + data.error + '</div>';
-          $('#slice_' + data.slice_id).find('.token').html(html);
+          const html = `<div class="alert alert-danger">${data.error}</div>`;
+          $(`#slice_${data.slice_id}`).find('.token').html(html);
         } else {
-          const slice = px.Slice(data, this);
-          $('#slice_' + data.slice_id).find('a.refresh').click(() => {
+          const slice = px.Slice(data, datasources[data.form_data.datasource], this);
+          $(`#slice_${data.slice_id}`).find('a.refresh').click(() => {
             slice.render(true);
           });
           this.sliceObjects.push(slice);
@@ -337,11 +333,10 @@ export function dashboardContainer(dashboard) {
 $(document).ready(() => {
   // Getting bootstrapped data from the DOM
   utils.initJQueryAjaxCSRF();
-  const dashboardData = $('.dashboard').data('dashboard');
-  const contextData = $('.dashboard').data('context');
+  const dashboardData = $('.dashboard').data('bootstrap');
 
-  const state = getInitialState(dashboardData, contextData);
-  const dashboard = dashboardContainer(state.dashboard);
+  const state = getInitialState(dashboardData);
+  const dashboard = dashboardContainer(state.dashboard, state.datasources);
   initDashboardView(dashboard);
   dashboard.init();
 });

superset/assets/javascripts/dashboard/components/Controls.jsx

@@ -43,7 +43,7 @@ class Controls extends React.PureComponent {
   }
   render() {
     const dashboard = this.props.dashboard;
-    const canSave = dashboard.context.dash_save_perm;
+    const canSave = dashboard.dash_save_perm;
     const emailBody = `Checkout this dashboard: ${window.location.href}`;
     const emailLink = 'mailto:?Subject=Superset%20Dashboard%20'
       + `${dashboard.dashboard_title}&Body=${emailBody}`;

superset/assets/javascripts/dashboard/components/Header.jsx

@@ -25,7 +25,7 @@ class Header extends React.PureComponent {
           </h1>
         </div>
         <div className="pull-right" style={{ marginTop: '35px' }}>
-        {!this.props.dashboard.context.standalone_mode &&
+        {!this.props.dashboard.standalone_mode &&
           <Controls dashboard={dashboard} />
         }
         </div>

superset/assets/javascripts/modules/superset.js

@@ -55,7 +55,7 @@ const px = function () {
     })
     .tooltip();
   }
-  const Slice = function (data, controller) {
+  const Slice = function (data, datasource, controller) {
     let timer;
     const token = $('#token_' + data.slice_id);
     const containerId = 'con_' + data.slice_id;
@@ -74,6 +74,7 @@ const px = function () {
       formData,
       container,
       containerId,
+      datasource,
       selector,
       getWidgetHeader() {
         return this.container.parents('div.widget').find('.chart-header');
@@ -105,11 +106,11 @@ const px = function () {
       d3format(col, number) {
         // uses the utils memoized d3format function and formats based on
         // column level defined preferences
-        if (data.column_formats) {
-          const format = data.column_formats[col];
-          return utils.d3format(format, number);
+        let format = '.3s';
+        if (this.datasource.column_formats[col]) {
+          format = this.datasource.column_formats[col];
         }
-        return utils.d3format('.3s', number);
+        return utils.d3format(format, number);
       },
       /* eslint no-shadow: 0 */
       always(data) {