WIP: React version of visualizations

client/.eslintrc.js

@@ -33,6 +33,8 @@ module.exports = {
     "react/forbid-prop-types": "warn",
     "react/prop-types": "warn",
     "jsx-a11y/anchor-is-valid": "off",
+    "jsx-a11y/label-has-for": "off",
+    "jsx-a11y/no-static-element-interactions": "off",
     "max-len": ['error', 120, 2, {
       ignoreUrls: true,
       ignoreComments: false,

client/app/assets/less/inc/footer.less

@@ -1,5 +1,4 @@
 #footer {
-    position: absolute;
     bottom: 0;
     text-align: center;
     width: 100%;

client/app/assets/less/inc/visualizations/counter-render.less

@@ -1,10 +1,10 @@
-counter-renderer {
+.counter-renderer {
   display: block;
   text-align: center;
   padding: 15px 10px;
   overflow: hidden;
 
-  counter {
+  .counter {
     margin: 0;
     padding: 0;
     font-size: 80px;
@@ -14,31 +14,31 @@ counter-renderer {
     align-items: center;
     justify-content: center;
 
-    value,
-    counter-target {
+    .value,
+    .counter-target {
       font-size: 1em;
       display: block;
     }
 
-    counter-name {
+    .counter-name {
       font-size: 0.5em;
       display: block;
     }
 
-    &.positive value {
+    &.positive .value {
       color: #5cb85c;
     }
 
-    &.negative value {
+    &.negative .value {
       color: #d9534f;
     }
   }
 
-  counter-target {
+  .counter-target {
     color: #ccc;
   }
 
-  counter-name {
+  .counter-name {
     font-size: 0.5em;
     display: block;
   }

client/app/assets/less/inc/visualizations/map.less

@@ -1,4 +1,5 @@
 .map-visualization-container {
+  width: 100%;
   height: 500px;
 
   > div:first-child {

client/app/assets/less/redash/ant.less

@@ -4,9 +4,12 @@
 @import '~antd/lib/date-picker/style/index.less';
 @import '~antd/lib/modal/style/index.less';
 @import '~antd/lib/tooltip/style/index.less';
+@import '~antd/lib/pagination/style/index.less';
+@import '~antd/lib/popover/style/index.less';
 @import '~antd/lib/select/style/index.less';
 @import '~antd/lib/button/style/index.less';
 @import '~antd/lib/radio/style/index.less';
+@import '~antd/lib/tabs/style/index.less';
 @import '~antd/lib/time-picker/style/index.less';
 
 // Overwritting Ant Design defaults to fit into Redash current style
@@ -19,6 +22,11 @@
 
 @primary-color          : @blue;
 
+// make placeholders in select boxes visible
+.ant-select {
+    min-width: 150px;
+}
+
 // Fix for disabled button styles inside Tooltip component.
 // Tooltip wraps disabled buttons with `<span>` and moves all styles
 // and classes to that `<span>`. This resets all button styles and

client/app/assets/less/redash/query.less

@@ -675,3 +675,9 @@ nav .rg-bottom {
 
   }
 }
+.sortable-helper {
+	z-index: 1100;
+}
+.ant-popover {
+	z-index: 1200;
+}

client/app/components/Footer.jsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { react2angular } from 'react2angular';
 
 import frontendVersion from '../version.json';
+import { ClientConfig } from '@/components/proptypes';
 
 export function Footer({ clientConfig, currentUser }) {
   const backendVersion = clientConfig.version;
@@ -32,10 +33,7 @@ export function Footer({ clientConfig, currentUser }) {
 }
 
 Footer.propTypes = {
-  clientConfig: PropTypes.shape({
-    version: PropTypes.string,
-    newVersionAvailable: PropTypes.bool,
-  }).isRequired,
+  clientConfig: ClientConfig.isRequired,
   currentUser: PropTypes.shape({
     isAdmin: PropTypes.bool,
   }).isRequired,

client/app/components/app-header/app-header.html

@@ -16,7 +16,7 @@
       <ul class="nav navbar-nav nav__main">
         <li class="dropdown btn-group" ng-show="$ctrl.showDashboardsMenu" uib-dropdown>
           <a class="btn" href="dashboards">Dashboards</a>
-          <a type="button" class="btn hidden-xs" uib-dropdown-toggle>
+          <a class="btn hidden-xs" uib-dropdown-toggle>
             <span class="caret caret--nav"></span>
           </a>
           <ul class="dropdown-menu" uib-dropdown-menu>
@@ -39,7 +39,7 @@
         </li>
         <li class="dropdown btn-group" ng-show="$ctrl.showQueriesMenu" uib-dropdown>
           <a class="btn" href="queries">Queries</a>
-          <a type="button" class="btn hidden-xs" uib-dropdown-toggle>
+          <a class="btn hidden-xs" uib-dropdown-toggle>
             <span class="caret caret--nav"></span>
           </a>
           <ul class="dropdown-menu" uib-dropdown-menu>

client/app/components/dashboards/widget.html

@@ -37,7 +37,14 @@
       <div class="alert alert-danger m-5" ng-show="$ctrl.widget.getQueryResult().getError()">Error running query: <strong>{{$ctrl.widget.getQueryResult().getError()}}</strong></div>
     </div>
     <div ng-switch-when="done" class="body-row-auto scrollbox">
-      <visualization-renderer visualization="$ctrl.widget.visualization" query-result="$ctrl.widget.getQueryResult()" class="t-body"></visualization-renderer>
+      <visualization-renderer
+        visualization="$ctrl.widget.visualization"
+        update-options="$ctrl.widget.updateOptions"
+        data="{ rows: $ctrl.widget.getQueryResult().getData(), columns: $ctrl.widget.getQueryResult().getColumns() }"
+        filters="$ctrl.widget.getQueryResult().getFilters()"
+        set-filters="$ctrl.widget.updateFilters"
+        listen-for-resize="$ctrl.listenForResize"
+        class="t-body"></visualization-renderer>
     </div>
     <div ng-switch-default class="body-row-auto spinner-container">
       <div class="spinner">

client/app/components/dashboards/widget.js

@@ -1,3 +1,4 @@
+import { onResize } from '@/directives/resize-event';
 import template from './widget.html';
 import editTextBoxTemplate from './edit-text-box.html';
 import widgetDialogTemplate from './widget-dialog.html';
@@ -51,7 +52,7 @@ const EditTextBoxComponent = {
   },
 };
 
-function DashboardWidgetCtrl($location, $uibModal, $window, Events, currentUser) {
+function DashboardWidgetCtrl($element, $location, $uibModal, $window, Events, currentUser) {
   this.canViewQuery = currentUser.hasPermission('view_query');
 
   this.editTextBox = () => {
@@ -119,6 +120,7 @@ function DashboardWidgetCtrl($location, $uibModal, $window, Events, currentUser)
   } else {
     this.type = 'textbox';
   }
+  this.listenForResize = f => onResize($element.parent().parent()[0], f);
 }
 
 export default function init(ngModule) {

client/app/components/proptypes.js

@@ -1,5 +1,15 @@
 import PropTypes from 'prop-types';
 
+export const ClientConfig = PropTypes.shape({
+  dateFormat: PropTypes.string,
+  dateTimeFormat: PropTypes.string,
+  integerFormat: PropTypes.string,
+  floatFormat: PropTypes.string,
+  booleanValues: PropTypes.arrayOf(PropTypes.string),
+  version: PropTypes.string,
+  newVersionAvailable: PropTypes.bool,
+});
+
 export const DataSource = PropTypes.shape({
   syntax: PropTypes.string,
   options: PropTypes.shape({
@@ -14,3 +24,57 @@ export const Table = PropTypes.shape({
 });
 
 export const Schema = PropTypes.arrayOf(Table);
+
+export const QueryData = PropTypes.exact({
+  rows: PropTypes.arrayOf(PropTypes.object).isRequired,
+  columns: PropTypes.arrayOf(PropTypes.shape({
+    friendly_name: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+  })),
+});
+
+export const SeriesOptions = PropTypes.objectOf(PropTypes.exact({
+  yAxis: PropTypes.number.isRequired,
+  zIndex: PropTypes.number.isRequired,
+  index: PropTypes.number.isRequired,
+  type: PropTypes.string.isRequired,
+  name: PropTypes.string,
+  color: PropTypes.string,
+}));
+
+export const ValuesOptions = PropTypes.objectOf(PropTypes.exact({ color: PropTypes.string.isRequired }));
+
+export const Visualization = PropTypes.shape({
+  name: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  options: PropTypes.object.isRequired,
+});
+
+export const ColumnDetail = PropTypes.exact({
+  alignContent: PropTypes.string.isRequired,
+  allowHTML: PropTypes.bool.isRequired,
+  allowSearch: PropTypes.bool.isRequired,
+  booleanValues: PropTypes.arrayOf(PropTypes.string).isRequired,
+  dateTimeFormat: PropTypes.string,
+  displayAs: PropTypes.string.isRequired,
+  formatFunction: PropTypes.func,
+  friendly_name: PropTypes.string,
+  highlightLinks: PropTypes.bool.isRequired,
+  imageHeight: PropTypes.string.isRequired,
+  imageTitleTemplate: PropTypes.string.isRequired,
+  imageUrlTemplate: PropTypes.string.isRequired,
+  imageWidth: PropTypes.string.isRequired,
+  linkOpenInNewTab: PropTypes.bool.isRequired,
+  linkTextTemplate: PropTypes.string.isRequired,
+  linkTitleTemplate: PropTypes.string.isRequired,
+  linkUrlTemplate: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  numberFormat: PropTypes.string,
+  order: PropTypes.number.isRequired,
+  title: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  visible: PropTypes.bool.isRequired,
+});
+
+export const Row = PropTypes.object;

client/app/components/queries/visualization-embed.html

@@ -12,7 +12,13 @@ <h3>
   </div>
 
   <div class="col-md-12 query__vis">
-    <visualization-renderer visualization="$ctrl.visualization" query-result="$ctrl.queryResult" class="t-body">
+    <visualization-renderer
+      visualization="$ctrl.visualization"
+      set-filters="$ctrl.setFilters"
+      filters="$ctrl.queryResult.getFilters()"
+      data="{ rows: $ctrl.queryResult.getData(), columns: $ctrl.queryResult.getColumns() }"
+      update-options="$ctrl.updateOptions"
+      class="t-body">
     </visualization-renderer>
   </div>
 

client/app/components/queries/visualization-embed.js

@@ -1,4 +1,4 @@
-import { find } from 'lodash';
+import { findIndex } from 'lodash';
 import logoUrl from '@/assets/images/redash_icon_small.png';
 import template from './visualization-embed.html';
 
@@ -16,9 +16,22 @@ const VisualizationEmbed = {
     this.apiKey = $routeParams.api_key;
     this.logoUrl = logoUrl;
     this.query = new Query(this.data[0]);
+    const visIndex = findIndex(
+      this.query.visualizations,
+      visualization => visualization.id === visualizationId,
+    );
     this.queryResult = new QueryResult(this.data[1]);
-    this.visualization =
-      find(this.query.visualizations, visualization => visualization.id === visualizationId);
+    this.visualization = this.query.visualizations[visIndex];
+    this.updateVisualization = (o) => {
+      this.query.visualizations[visIndex] = {
+        ...this.visualization,
+        options: {
+          ...this.visualization.options,
+          ...o,
+        },
+      };
+    };
+    this.setFilters = (f) => { this.query.filters = f; };
   },
 };
 

client/app/config/index.js

@@ -39,6 +39,7 @@ Pace.options.shouldHandlePushState = (prevUrl, newUrl) => {
   const [newPrefix] = newUrl.split('?');
   return prevPrefix !== newPrefix;
 };
+Pace.start();
 
 const requirements = [
   ngRoute,
@@ -96,7 +97,7 @@ function registerServices() {
 }
 
 function registerVisualizations() {
-  const context = require.context('@/visualizations', true, /^((?![\\/.]test[\\./]).)*\.jsx?$/);
+  const context = require.context('@/visualizations', true, /^((?![\\/.]test[\\./]).)*\.js?$/);
   registerAll(context);
 }
 

client/app/directives/resize-event.js

@@ -45,6 +45,14 @@ function resizeEvent() {
   };
 }
 
+export function onResize(node, f) {
+  if (!items.has(node)) {
+    items.set(node, {
+      callback: f,
+    });
+  }
+}
+
 export default function init(ngModule) {
   ngModule.directive('resizeEvent', resizeEvent);
 }

client/app/pages/dashboards/dashboard.less

@@ -17,6 +17,10 @@
     overflow: visible;
   }
 
+  visualization-renderer > .counter-renderer {
+    overflow: hidden;
+  }
+
   &.preview-mode {
     .widget-menu-regular {
       display: block;
@@ -53,6 +57,10 @@
         flex-grow: 1;
         position: relative;
       }
+      .counter-renderer {
+        flex-grow: 0;
+        position: static;
+      }
     }
 
     .sunburst-visualization-container,
@@ -69,14 +77,13 @@
       overflow: hidden;
     }
 
-    counter {
+    .counter {
       position: absolute;
       left: 10px;
       top: 15px;
       right: 10px;
       bottom: 15px;
       height: auto;
-      overflow: hidden;
       padding: 0;
     }
   }