Migrate visualizations registry/renderer/editor to React

client/app/assets/less/ant.less

@@ -221,21 +221,61 @@
   }
 }
 
-// styling for short modals (no lines)
-.@{dialog-prefix-cls}.shortModal {
-  .@{dialog-prefix-cls} {
-    &-header,
-    &-footer {
-      border: none;
-      padding: 16px;
-    }
-    &-body {
-      padding: 10px 16px;
+.@{dialog-prefix-cls} {
+  // styling for short modals (no lines)
+  &.shortModal {
+    .@{dialog-prefix-cls} {
+      &-header,
+      &-footer {
+        border: none;
+        padding: 16px;
+      }
+
+      &-body {
+        padding: 10px 16px;
+      }
+
+      &-close-x {
+        width: 46px;
+        height: 46px;
+        line-height: 46px;
+      }
     }
-    &-close-x {
-      width: 46px;
-      height: 46px;
-      line-height: 46px;
+  }
+
+  // fullscreen modals
+  &-fullscreen {
+    .@{dialog-prefix-cls} {
+      position: absolute;
+      left: 15px;
+      top: 15px;
+      right: 15px;
+      bottom: 15px;
+      width: auto !important;
+      height: auto !important;
+      max-width: none;
+      max-height: none;
+      margin: 0;
+      padding: 0;
+
+      .@{dialog-prefix-cls}-content {
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: auto;
+        height: auto;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .@{dialog-prefix-cls}-body {
+        flex: 1 1 auto;
+        overflow: auto;
+      }
     }
   }
 }

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

@@ -1,4 +1,6 @@
 visualization-renderer {
+  display: block;
+
   .pagination,
   .ant-pagination {
     margin: 0;

client/app/assets/less/inc/visualizations/pivot-table.less

@@ -1,3 +1,3 @@
-pivot-table-renderer > table, grid-renderer > div, visualization-renderer > div {
+.pivot-table-renderer > table, grid-renderer > div, visualization-renderer > div {
   overflow: auto;
 }

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

@@ -222,7 +222,7 @@ edit-in-place p.editable:hover {
 
 .widget-wrapper {
   .body-container {
-    filters {
+    .filters-wrapper {
       display: block;
       padding-left: 15px;
     }
@@ -343,7 +343,7 @@ a.label-tag {
       border-bottom: 1px solid #efefef;
     }
 
-    pivot-table-renderer > table, grid-renderer > div, visualization-renderer > div {
+    .pivot-table-renderer > table, grid-renderer > div, visualization-renderer > div {
       overflow: visible;
     }
 

client/app/components/ColorBox.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { react2angular } from 'react2angular';
+
+import './color-box.less';
+
+export function ColorBox({ color }) {
+  return <span style={{ backgroundColor: color }} />;
+}
+
+ColorBox.propTypes = {
+  color: PropTypes.string,
+};
+
+ColorBox.defaultProps = {
+  color: 'transparent',
+};
+
+export default function init(ngModule) {
+  ngModule.component('colorBox', react2angular(ColorBox));
+}
+
+init.init = true;

client/app/components/Filters.jsx

@@ -0,0 +1,122 @@
+import { isArray, map, includes, every, some } from 'lodash';
+import moment from 'moment';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { react2angular } from 'react2angular';
+import Select from 'antd/lib/select';
+
+const ALL_VALUES = '###Redash::Filters::SelectAll###';
+const NONE_VALUES = '###Redash::Filters::Clear###';
+
+export const FilterType = PropTypes.shape({
+  name: PropTypes.string.isRequired,
+  friendlyName: PropTypes.string.isRequired,
+  multiple: PropTypes.bool,
+  current: PropTypes.oneOfType([
+    PropTypes.any,
+    PropTypes.arrayOf(PropTypes.any),
+  ]).isRequired,
+  values: PropTypes.arrayOf(PropTypes.any).isRequired,
+});
+
+export const FiltersType = PropTypes.arrayOf(FilterType);
+
+function createFilterChangeHandler(filters, onChange) {
+  return (filter, value) => {
+    if (filter.multiple && includes(value, ALL_VALUES)) {
+      value = [...filter.values];
+    }
+    if (filter.multiple && includes(value, NONE_VALUES)) {
+      value = [];
+    }
+    filters = map(filters, f => (f.name === filter.name ? { ...filter, current: value } : f));
+    onChange(filters);
+  };
+}
+
+export function filterData(rows, filters = []) {
+  if (!isArray(rows)) {
+    return [];
+  }
+
+  let result = rows;
+
+  if (isArray(filters) && (filters.length > 0)) {
+    // "every" field's value should match "some" of corresponding filter's values
+    result = result.filter(row => every(
+      filters,
+      (filter) => {
+        const rowValue = row[filter.name];
+        const filterValues = isArray(filter.current) ? filter.current : [filter.current];
+        return some(filterValues, (filterValue) => {
+          if (moment.isMoment(rowValue)) {
+            return rowValue.isSame(filterValue);
+          }
+          // We compare with either the value or the String representation of the value,
+          // because Select2 casts true/false to "true"/"false".
+          return (filterValue === rowValue) || (String(rowValue) === filterValue);
+        });
+      },
+    ));
+  }
+
+  return result;
+}
+
+export function Filters({ filters, onChange }) {
+  if (filters.length === 0) {
+    return null;
+  }
+
+  onChange = createFilterChangeHandler(filters, onChange);
+
+  return (
+    <div className="filters-wrapper">
+      <div className="parameter-container container bg-white">
+        <div className="row">
+          {map(filters, (filter) => {
+            const options = map(filter.values, value => (
+              <Select.Option key={value}>{value}</Select.Option>
+            ));
+
+            return (
+              <div key={filter.name} className="col-sm-6 p-l-0 filter-container">
+                <label>{filter.friendlyName}</label>
+                <Select
+                  className="w-100"
+                  mode={filter.multiple ? 'multiple' : 'default'}
+                  value={filter.current}
+                  allowClear={filter.multiple}
+                  showSearch
+                  onChange={value => onChange(filter, value)}
+                >
+                  {!filter.multiple && options}
+                  {filter.multiple && [
+                    <Select.Option key={NONE_VALUES}><i className="fa fa-square-o m-r-5" />Clear</Select.Option>,
+                    <Select.Option key={ALL_VALUES}><i className="fa fa-check-square-o m-r-5" />Select All</Select.Option>,
+                    <Select.OptGroup key="Values" title="Values">{options}</Select.OptGroup>,
+                  ]}
+                </Select>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+Filters.propTypes = {
+  filters: FiltersType.isRequired,
+  onChange: PropTypes.func, // (name, value) => void
+};
+
+Filters.defaultProps = {
+  onChange: () => {},
+};
+
+export default function init(ngModule) {
+  ngModule.component('filters', react2angular(Filters));
+}
+
+init.init = true;

client/app/components/color-box.less

@@ -0,0 +1,8 @@
+color-box {
+  span {
+    width: 12px !important;
+    height: 12px !important;
+    display: inline-block !important;
+    margin-right: 5px;
+  }
+}

client/app/components/dashboards/widget.html

@@ -46,7 +46,11 @@
       <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 class="t-body"
+        visualization="$ctrl.widget.visualization"
+        query-result="$ctrl.widget.getQueryResult()"
+        filters="$ctrl.filters"
+      ></visualization-renderer>
     </div>
     <div ng-switch-default class="body-row-auto spinner-container">
       <div class="spinner">

client/app/components/dashboards/widget.js

@@ -115,6 +115,7 @@ export default function init(ngModule) {
       widget: '<',
       public: '<',
       dashboard: '<',
+      filters: '<',
       deleted: '&onDelete',
     },
   });

client/app/lib/hooks/useQueryResult.js

@@ -0,0 +1,30 @@
+import { useState, useEffect } from 'react';
+
+function getQueryResultData(queryResult) {
+  return {
+    columns: queryResult ? queryResult.getColumns() : [],
+    rows: queryResult ? queryResult.getData() : [],
+    filters: queryResult ? queryResult.getFilters() : [],
+  };
+}
+
+export default function useQueryResult(queryResult) {
+  const [data, setData] = useState(getQueryResultData(queryResult));
+  let isCancelled = false;
+  useEffect(() => {
+    if (queryResult) {
+      queryResult.toPromise()
+        .then(() => {
+          if (!isCancelled) {
+            setData(getQueryResultData(queryResult));
+          }
+        });
+    } else {
+      setData(getQueryResultData(queryResult));
+    }
+    return () => {
+      isCancelled = true;
+    };
+  }, [queryResult]);
+  return data;
+}