Merge pull request #88 from back4app/analytics-report-event

Analytics report event

Author: paivaric

src/components/ChromeDropdown/ChromeDropdown.react.js

@@ -16,7 +16,7 @@ export default class ChromeDropdown extends React.Component {
   constructor() {
     super();
 
-    this.state = { 
+    this.state = {
       open: false,
       selected: false,
     };
@@ -44,7 +44,7 @@ export default class ChromeDropdown extends React.Component {
 
   select(value, e) {
     e.stopPropagation();
-    this.setState({ 
+    this.setState({
       open: false,
       selected: true,
     }, () => {
@@ -56,6 +56,9 @@ export default class ChromeDropdown extends React.Component {
     let widthStyle = { width: this.props.width || 140 };
     let styles = this.styles;
     let color = this.props.color || 'purple';
+    let isMultipleOptions = this.props.options.length > 1
+
+    let labelDivStyle = isMultipleOptions ? [styles.current, styles[color]] : [ styles.withoutArrow, styles.disabled, styles[color]]
 
     let label = this.props.value;
     if (this.keyValueMap) {
@@ -66,7 +69,12 @@ export default class ChromeDropdown extends React.Component {
       label = this.props.placeholder;
     }
     let content = (
-      <div className={[styles.current, styles[color]].join(' ')} onClick={() => this.setState({ open: true })}>
+      <div
+        className={labelDivStyle.join(' ')}
+        onClick={() => {
+          if (isMultipleOptions) this.setState({ open: true })
+        }
+      }>
         <div>{label}</div>
       </div>
     );

src/components/ChromeDropdown/ChromeDropdown.scss

@@ -6,7 +6,7 @@
  * the root directory of this source tree.
  */
 @import 'stylesheets/globals.scss';
-       
+
 .dropdown {
   display: inline-block;
   vertical-align: top;
@@ -47,6 +47,21 @@
   }
 }
 
+
+.withoutArrow {
+  position: relative;
+  height: 30px;
+  line-height: 30px;
+  padding: 0 30px 0 10px;
+  background: $darkBlue;
+  border-radius: 5px;
+
+  div {
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
 .menu {
   max-height: 360px;
   overflow-y: auto;
@@ -62,3 +77,8 @@
     }
   }
 }
+
+.disabled {
+  pointer-events: none;
+  opacity: .65;
+}

src/components/ExplorerActiveChartButton/ExplorerActiveChartButton.react.js

@@ -83,7 +83,7 @@ export default class ExplorerActiveChartButton extends React.Component {
       align = Directions.RIGHT;
     }
     // Add the button height to the picker appear on the bottom
-    position.y += this.node.clientHeight
+    position.y += this.node.clientHeight - window.pageYOffset
     this.setState({
       open: !this.state.open,
       position,

src/components/ExplorerMenuButton/ExplorerMenuButton.react.js

@@ -68,7 +68,7 @@ export default class ExplorerMenuButton extends React.Component {
         align = Directions.RIGHT;
       }
       // Add the button height to the picker appear on the bottom
-      position.y += this.node.clientHeight
+      position.y += this.node.clientHeight - window.pageYOffset
       return {
         currentView: 'picker',
         position,

src/components/ExplorerQueryComposer/ExplorerQueryComposer.react.js

@@ -50,6 +50,13 @@ const FIELD_LABELS = {
   ]
 };
 
+const FILTER_LABELS = {
+  'Custom Event': [
+    'Event Name',
+    'Dimensions'
+  ]
+};
+
 const AGGREGATE_TYPE_LABELS = [
   'Count' /*, 'Count Distinct', 'Sum', 'Minimum', 'Median', '99th Percentile', 'Average'
 */];
@@ -255,7 +262,7 @@ export default class ExplorerQueryComposer extends React.Component {
     this.setState({
       filters: this.state.filters.concat([{
         op: '$eq',
-        col: FIELD_LABELS[this.state.source][0],
+        col: FILTER_LABELS[this.state.source][0],
         val: null,
         key: null // used to filter dimensions properties
       }])
@@ -396,6 +403,7 @@ export default class ExplorerQueryComposer extends React.Component {
             <input
               className={[styles.formInput, styles.filterInputStyle].join(' ')}
               value={filter.key}
+              placeholder={'key'}
               onChange={(e) => {
                 let filters = this.state.filters;
                 let newFilter = null;
@@ -413,6 +421,7 @@ export default class ExplorerQueryComposer extends React.Component {
             <input
               className={[styles.formInput, styles.filterInputStyle].join(' ')}
               value={filter.val}
+              placeholder={'value'}
               onChange={(e) => {
                 let filters = this.state.filters;
                 filters[index] = {
@@ -466,7 +475,7 @@ export default class ExplorerQueryComposer extends React.Component {
             width='33%'
             color='blue'
             value={filter.col}
-            options={FIELD_LABELS[this.state.source]}
+            options={FILTER_LABELS[this.state.source]}
             onChange={(val) => {
               let filters = this.state.filters;
               filters[index] = {

src/components/ExplorerQueryComposer/ExplorerQueryComposer.scss

@@ -53,7 +53,7 @@ $placeholderColor: rgba(255, 255, 255, 0.5);
 
     &.textInput {
       background: none;
-      border: none;    
+      border: none;
       font-size: 1.3em;
       color: white;
 
@@ -150,4 +150,8 @@ $placeholderColor: rgba(255, 255, 255, 0.5);
   border-radius: 5px;
   padding: 0 30px 0 10px;
   overflow: hidden;
+
+  @include placeholder {
+    color: $placeholderColor;
+  }
 }

src/dashboard/Analytics/Explorer/Explorer.react.js

@@ -356,6 +356,7 @@ export default class Explorer extends DashboardView {
         <a
           href='javascript:;'
           role='button'
+          onClick={() => window.open('https://www.back4app.com/docs/analytics/mobile-app-analytics', '_blank') }
           className={styles.toolbarAction}
           style={{ borderRight: '1px solid #66637a' }}>
           <Icon name='question-solid' width={14} height={14} fill='#66637a' />
@@ -474,6 +475,15 @@ export default class Explorer extends DashboardView {
                 formatter={(value, label) => (`${label} ${prettyNumber(value, 3)}`)} />
             );
           }
+          else if (!this.state.mutated)
+            currentDisplay = (
+              <EmptyState
+                title={'No data to display.'}
+                icon='analytics-outline'
+                description={'These queries didn\'t retrieve any result.'}
+                cta='Get started with Analytics Explorer'
+                action={() => window.open('https://www.back4app.com/docs/analytics/mobile-app-analytics', '_blank') } />
+            );
           break;
         case 'table':
           // Render table

src/dashboard/Analytics/SlowQueries/SlowQueries.react.js

@@ -240,7 +240,7 @@ export default class SlowQueries extends TableView {
         description={'You haven\'t executed any queries.'}
         icon='gears'
         cta='Get started with Query'
-        action={() => window.location = 'http://docs.parseplatform.org/rest/guide/#queries'} />
+        action={() => window.open('https://www.back4app.com/docs/analytics/slow-query-tool', '_blank') } />
     );
   }