[vizbuilder] chart calculation refactor and feedback issues

packages/vizbuilder/src/components/ChartArea/ChartCard.jsx

@@ -18,15 +18,16 @@ class ChartCard extends React.PureComponent {
       <div className="chart-card">
         <div className="wrapper">
           {this.props.children}
-
-          <footer>
-            <Button
-              className="pt-minimal"
-              iconName={active ? "cross" : "zoom-in"}
-              text={active ? "CLOSE" : "ENLARGE"}
-              onClick={this.handleToggleSelect}
-            />
-          </footer>
+          {!this.props.hideFooter && (
+            <footer>
+              <Button
+                className="pt-minimal"
+                iconName={active ? "cross" : "zoom-in"}
+                text={active ? "CLOSE" : "ENLARGE"}
+                onClick={this.handleToggleSelect}
+              />
+            </footer>
+          )}
         </div>
       </div>
     );

packages/vizbuilder/src/components/ChartArea/index.jsx

@@ -3,12 +3,12 @@ import PropTypes from "prop-types";
 import classNames from "classnames";
 import {NonIdealState} from "@blueprintjs/core";
 
-import createChartConfig from "../../helpers/chartconfig";
+import createChartConfig from "../../helpers/chartConfig";
 import ChartCard from "./ChartCard";
 
 import "./style.css";
 
-const EMPTY_DATASETS = (
+const NO_CHARTS = (
   <div className="area-chart empty">
     <NonIdealState visual="error" title="Empty dataset" />
   </div>
@@ -106,46 +106,29 @@ class ChartArea extends React.Component {
   }
 
   render() {
-    const {generalConfig} = this.context;
-    const {
-      activeChart,
-      datasets,
-      members,
-      queries,
-      selectedTime,
-      toolbar
-    } = this.props;
-    const {heightArea, heightToolbar} = this.state;
+    const {activeChart, charts, selectedTime, toolbar} = this.props;
+    const state = this.state;
 
-    if (!datasets.length) {
-      return EMPTY_DATASETS;
+    const n = charts.length;
+    if (n === 0) {
+      return NO_CHARTS;
     }
 
-    const chartElements = [];
-
-    let n = queries.length;
-    while (n--) {
-      const configs = createChartConfig(
-        queries[n],
-        datasets[n],
-        members[n],
-        {activeChart, selectedTime, onTimeChange: this.handleTimeChange},
-        generalConfig
-      );
-      chartElements.unshift.apply(chartElements, configs);
-    }
+    const chartsToRender = activeChart
+      ? charts.filter(chart => chart.key === activeChart)
+      : charts;
 
-    if (!chartElements.length) {
-      return EMPTY_DATASETS;
-    }
+    const isUniqueChart = n === 1;
+    const isSingleChart = chartsToRender.length === 1;
 
-    const uniqueChart = !activeChart && chartElements.length === 1;
-    const singleChart = activeChart || chartElements.length === 1;
-    const chartHeight = uniqueChart
-      ? heightArea - heightToolbar
-      : singleChart
-      ? heightArea - heightToolbar - 50
-      : 400;
+    const uiparams = {
+      activeChart,
+      isSingle: isSingleChart,
+      isUnique: isUniqueChart,
+      onTimeChange: this.handleTimeChange,
+      selectedTime,
+      uiheight: state.heightArea - state.heightToolbar,
+    };
 
     return (
       <div
@@ -161,21 +144,23 @@ class ChartArea extends React.Component {
         <div
           className={classNames(
             "wrapper chart-wrapper",
-            {unique: uniqueChart, single: singleChart, multi: !singleChart},
+            isSingleChart ? "single" : "multi",
+            isUniqueChart && "unique",
             activeChart
           )}
         >
-          {chartElements.map(chartConfig => {
-            const {config, key} = chartConfig;
-            config.height = Math.max(400, chartHeight);
+          {chartsToRender.map(chart => {
+            const {key} = chart;
+            const config = createChartConfig(chart, uiparams);
             return (
               <ChartCard
-                active={key === activeChart}
+                active={key === activeChart || isSingleChart}
+                hideFooter={isUniqueChart}
                 key={key}
                 name={key}
                 onSelect={this.handleChartSelect}
               >
-                <chartConfig.component config={config} />
+                <chart.component config={config} />
               </ChartCard>
             );
           })}
@@ -186,23 +171,20 @@ class ChartArea extends React.Component {
 }
 
 ChartArea.contextTypes = {
-  generalConfig: PropTypes.object,
   stateUpdate: PropTypes.func
 };
 
 ChartArea.propTypes = {
   activeChart: PropTypes.string,
-  datasets: PropTypes.arrayOf(PropTypes.array),
+  charts: PropTypes.arrayOf(PropTypes.object),
   lastUpdate: PropTypes.number,
-  members: PropTypes.arrayOf(PropTypes.objectOf(PropTypes.array)),
-  queries: PropTypes.arrayOf(PropTypes.object)
+  selectedTime: PropTypes.any,
+  toolbar: PropTypes.any
 };
 
 ChartArea.defaultProps = {
   activeChart: null,
-  datasets: [],
-  members: [],
-  queries: []
+  charts: []
 };
 
 export default ChartArea;

packages/vizbuilder/src/components/ChartArea/style.css

@@ -24,14 +24,6 @@
       justify-content: flex-start;
       align-items: flex-start;
     }
-
-    &.single .chart-card {
-      height: 100%;
-    }
-
-    &.unique .chart-card footer {
-      display: none;
-    }
   }
 
   & .chart-card {
@@ -47,6 +39,10 @@
       height: 100%;
     }
 
+    &:only-child > .wrapper {
+      margin: 0;
+    }
+
     & .viz {
       flex: 1 0;
 

packages/vizbuilder/src/components/Sidebar/FilterManager/Filter.js

@@ -9,6 +9,7 @@ class Filter {
     this.measure = measure;
     this.operator = operator || OPERATORS.EQUAL;
     this.value = value || 0;
+    this.visibleValue = this.value * this.getMultiplier();
   }
 
   get key() {
@@ -38,15 +39,35 @@ class Filter {
   }
 
   getClone() {
-    const clone = new Filter(this.measure, this.operator);
+    const clone = new Filter(this.measure, this.operator, this.value);
     clone.uuid = this.uuid;
     return clone;
   }
 
+  getFormatter() {
+    const measure = this.measure;
+    if (measure) {
+      const unit = measure.annotations.units_of_measurement;
+      return Filter.formatters[unit] || Filter.formatters.default;
+    }
+    return Filter.formatters.default;
+  }
+
+  getMultiplier() {
+    const measure = this.measure;
+    if (measure) {
+      const unit = measure.annotations.units_of_measurement;
+      return Filter.multipliers[unit] || Filter.multipliers.default;
+    }
+    return Filter.multipliers.default;
+  }
+
   setMeasure(measure) {
     if (this.measure !== measure) {
       const clone = this.getClone();
       clone.measure = measure;
+      clone.value = this.visibleValue / clone.getMultiplier() || this.visibleValue;
+      clone.visibleValue = this.visibleValue;
       return clone;
     }
     return this;
@@ -66,7 +87,8 @@ class Filter {
     const newValue = valueAsString || 0;
     if (this.value !== newValue) {
       const clone = this.getClone();
-      clone.value = newValue;
+      clone.value = newValue / this.getMultiplier() || newValue;
+      clone.visibleValue = newValue;
       return clone;
     }
     return this;

packages/vizbuilder/src/components/Sidebar/FilterManager/FilterItem.jsx

@@ -34,15 +34,8 @@ class FilterItem extends SidebarCRUDItem {
   }
 
   renderClosed() {
-    const {formatting} = this.context.generalConfig || {};
     const {item} = this.props;
-    let value = item.value;
-
-    if (formatting) {
-      const units = item.measure.annotations.units_of_measurement;
-      const formatter = formatting[units] || formatting.default;
-      value = formatter(value);
-    }
+    const formatter = item.getFormatter();
 
     return (
       <div className="filter-item">
@@ -51,7 +44,7 @@ class FilterItem extends SidebarCRUDItem {
           {" "}
           <span className="filter-operator">{item.operatorLabel}</span>
           {" "}
-          <span className="filter-value">{value}</span>
+          <span className="filter-value">{formatter(item.value)}</span>
         </div>
         <div className="group actions">
           <Button
@@ -93,7 +86,7 @@ class FilterItem extends SidebarCRUDItem {
           </div>
           <NumericInput
             className="pt-fill"
-            value={activeItem.value}
+            value={activeItem.visibleValue}
             onValueChange={this.handleSetValue}
             allowNumericCharactersOnly={true}
           />
@@ -116,10 +109,6 @@ class FilterItem extends SidebarCRUDItem {
   }
 }
 
-FilterItem.contextTypes = {
-  generalConfig: PropTypes.object
-}
-
 FilterItem.propTypes = {
   item: PropTypes.instanceOf(Filter),
   onDelete: PropTypes.func,

packages/vizbuilder/src/components/Sidebar/GroupingManager/GroupingItem.jsx

@@ -21,7 +21,7 @@ class GroupingItem extends SidebarCRUDItem {
     const item = props.item;
 
     this.state = {
-      isOpen: true,
+      isOpen: item.new,
       loading: true,
       members: [],
       newItem: !item.level ? item.setLevel(props.options[0]) : null
@@ -61,12 +61,12 @@ class GroupingItem extends SidebarCRUDItem {
         <div className="group actions">
           <Button
             text="Delete"
-            className="pt-small"
+            className="pt-small action-delete"
             onClick={this.handleDelete}
           />
           <Button
             text={"Edit params"}
-            className="pt-small pt-intent-primary"
+            className="pt-small pt-intent-primary action-edit"
             onClick={this.handleEdit}
           />
         </div>
@@ -100,12 +100,12 @@ class GroupingItem extends SidebarCRUDItem {
         <div className="group actions">
           <Button
             text={item.level ? "Cancel" : "Delete"}
-            className="pt-small"
+            className="pt-small action-reset"
             onClick={item.level ? this.handleClose : this.handleDelete}
           />
           <Button
             text="Apply changes"
-            className="pt-small pt-intent-primary"
+            className="pt-small pt-intent-primary action-update"
             onClick={this.handleApply}
           />
         </div>

packages/vizbuilder/src/components/Sidebar/MeasureSelect.jsx

@@ -30,7 +30,7 @@ MeasureSelect.defaultProps = {
   ...BaseMonoSelect.defaultProps,
   sticky: "_sticky",
   getItemHeight() {
-    return 44;
+    return 58;
   },
   itemListPredicate(query, items) {
     query = query.trim();