WIP Add Tracking

src/actions/ui-state-actions.js

@@ -35,6 +35,8 @@ const {
   START_EXPORTING_IMAGE,
   TOGGLE_LEGEND,
   TOGGLE_MODAL,
+  SHOW_EXPORT_DROPDOWN,
+  HIDE_EXPORT_DROPDOWN,
   TOGGLE_SIDE_PANEL,
   TOGGLE_MAP_CONTROL
 } = ActionTypes;
@@ -43,6 +45,8 @@ const {
 const [
   toggleSidePanel,
   toggleModal,
+  showExportDropdown,
+  hideExportDropdown,
   toggleMapControl,
   openDeleteModal,
   // export image
@@ -61,6 +65,8 @@ const [
 ] = [
   TOGGLE_SIDE_PANEL,
   TOGGLE_MODAL,
+  SHOW_EXPORT_DROPDOWN,
+  HIDE_EXPORT_DROPDOWN,
   TOGGLE_MAP_CONTROL,
   OPEN_DELETE_MODAL,
   SET_RATIO,
@@ -77,7 +83,7 @@ const [
 ].map(a => createAction(a));
 
 export {
-  toggleSidePanel, toggleModal, toggleMapControl, openDeleteModal, setExportConfig, setExportData,
+  toggleSidePanel, toggleModal, showExportDropdown, hideExportDropdown, toggleMapControl, openDeleteModal, setExportConfig, setExportData,
   setRatio, setResolution, toggleLegend, startExportingImage, setExportImageDataUri, cleanupExportImage,
   setExportSelectedDataset, setExportDataType, setExportFiltered
 };

src/components/common/logo.js

@@ -19,14 +19,10 @@
 // THE SOFTWARE.
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import {KEPLER_GL_NAME, KEPLER_GL_VERSION} from 'constants/default-settings';
 
-const defaultProps = {
-  appName: KEPLER_GL_NAME,
-  version: KEPLER_GL_VERSION
-};
-
 const LogoTitle = styled.div`
   display: inline-block;
   margin-left: 6px;
@@ -68,7 +64,7 @@ const LogoSvg = () => (
   </svg>
 );
 
-const KeplerGlLogo = ({appName, version}) => (
+const KeplerGlLogo = ({appName=KEPLER_GL_NAME, version=KEPLER_GL_VERSION}) => (
   <LogoWrapper className="side-panel-logo">
     <LogoSvgWrapper>
       <LogoSvg />
@@ -80,6 +76,9 @@ const KeplerGlLogo = ({appName, version}) => (
   </LogoWrapper>
 );
 
-KeplerGlLogo.defaultProps = defaultProps;
+KeplerGlLogo.defaultProps = {
+  appName: PropTypes.string,
+  version: PropTypes.string
+};
 
 export default KeplerGlLogo;

src/components/side-panel.js

@@ -179,6 +179,9 @@ export default function SidePanelFactory(PanelHeader) {
               version={version}
               onExportImage={this._onExportImage}
               onExportData={this._onExportData}
+              visibleDropdown={uiState.visibleDropdown}
+              showExportDropdown={uiStateActions.showExportDropdown}
+              hideExportDropdown={uiStateActions.hideExportDropdown}
               onExportConfig={this._onExportConfig}
               onSaveMap={this.props.onSaveMap}
             />

src/components/side-panel/panel-header.js

@@ -206,6 +206,10 @@ const defaultActionItems = [
 function PanelHeaderFactory() {
   return class PanelHeader extends Component {
     static propTypes = {
+      appName: PropTypes.string,
+      version: PropTypes.string,
+      uiState: PropTypes.object,
+      uiStateActions: PropTypes.object,
       logoComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
       actionItems: PropTypes.arrayOf(PropTypes.any)
     };
@@ -215,18 +219,6 @@ function PanelHeaderFactory() {
       actionItems: defaultActionItems
     };
 
-    state = {
-      dropdown: null
-    };
-
-    showDropdown = id => {
-      this.setState({dropdown: id});
-    };
-
-    hideDropdown = () => {
-      this.setState({dropdown: null});
-    };
-
     render() {
       const {
         appName,
@@ -235,30 +227,33 @@ function PanelHeaderFactory() {
         onSaveMap,
         onExportImage,
         onExportData,
-        onExportConfig
+        onExportConfig,
+        visibleDropdown,
+        showExportDropdown,
+        hideExportDropdown
       } = this.props;
+
       return (
         <StyledPanelHeader className="side-panel__panel-header">
           <StyledPanelHeaderTop className="side-panel__panel-header__top">
             <this.props.logoComponent appName={appName} version={version}/>
             <StyledPanelTopActions>
               {actionItems.map(item => (
                 <div className="side-panel__panel-header__right"
-                  key={item.id} style={{position: 'relative'}}>
+                     key={item.id} style={{position: 'relative'}}>
                   <PanelAction
                     item={item}
                     onClick={() => {
                       if (item.dropdownComponent) {
-                        this.showDropdown(item.id);
+                        showExportDropdown(item.id);
                       }
-
                       item.onClick();
                     }}
                   />
                   {item.dropdownComponent ? (
                     <item.dropdownComponent
-                      onClose={this.hideDropdown}
-                      show={this.state.dropdown === item.id}
+                      onClose={hideExportDropdown}
+                      show={visibleDropdown === item.id}
                       onSaveMap={onSaveMap}
                       onExportData={onExportData}
                       onExportImage={onExportImage}

src/constants/action-types.js

@@ -72,6 +72,8 @@ const ActionTypes = keyMirror({
   // uiState
   TOGGLE_SIDE_PANEL: null,
   TOGGLE_MODAL: null,
+  SHOW_EXPORT_DROPDOWN: null,
+  HIDE_EXPORT_DROPDOWN: null,
   OPEN_DELETE_MODAL: null,
   TOGGLE_MAP_CONTROL: null,
 

src/constants/index.js

@@ -23,6 +23,7 @@ export {
   DIMENSIONS,
   ALL_FIELD_TYPES,
   FIELD_OPTS,
+  FILTER_TYPES,
   GEOJSON_FIELDS,
   ICON_FIELDS,
   TRIP_POINT_FIELDS,

src/reducers/ui-state-updaters.js

@@ -44,6 +44,16 @@ export const toggleModalUpdater = (state, {payload: id}) => ({
   currentModal: id
 });
 
+export const showExportDropdownUpdater = (state, {payload: id}) => ({
+  ...state,
+  visibleDropdown: id
+});
+
+export const hideExportDropdownUpdater = (state, {payload}) => ({
+  ...state,
+  visibleDropdown: null
+});
+
 export const toggleMapControlUpdater = (state, {payload: panelId}) => ({
   ...state,
   mapControls: {

src/reducers/ui-state.js

@@ -29,6 +29,8 @@ import {
 import {
   openDeleteModalUpdater,
   toggleModalUpdater,
+  showExportDropdownUpdater,
+  hideExportDropdownUpdater,
   toggleSidePanelUpdater,
   toggleMapControlUpdater,
 
@@ -90,7 +92,7 @@ export const INITIAL_UI_STATE = {
   activeSidePanel: DEFAULT_ACTIVE_SIDE_PANEL,
   currentModal: DEFAULT_MODAL,
   datasetKeyToRemove: null,
-
+  visibleDropdown: null,
   // export image modal ui
   exportImage: DEFAULT_EXPORT_IMAGE,
   // export data modal ui
@@ -102,6 +104,8 @@ export const INITIAL_UI_STATE = {
 const actionHandler = {
   [ActionTypes.TOGGLE_SIDE_PANEL]: toggleSidePanelUpdater,
   [ActionTypes.TOGGLE_MODAL]: toggleModalUpdater,
+  [ActionTypes.SHOW_EXPORT_DROPDOWN]: showExportDropdownUpdater,
+  [ActionTypes.HIDE_EXPORT_DROPDOWN]: hideExportDropdownUpdater,
   [ActionTypes.OPEN_DELETE_MODAL]: openDeleteModalUpdater,
   [ActionTypes.TOGGLE_MAP_CONTROL]: toggleMapControlUpdater,
 

test/browser/components/injector-test.js

@@ -18,9 +18,9 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React, {Component} from 'react';
+import React from 'react';
 import test from 'tape';
-import {mount, shallow} from 'enzyme';
+import {mount} from 'enzyme';
 import configureStore from 'redux-mock-store';
 import {Provider} from 'react-redux';
 import sinon from 'sinon';
@@ -108,7 +108,8 @@ test('Components -> injector -> missing deps', t => {
 
 test('Components -> injector -> wrong factory type', t => {
   const spy = sinon.spy(Console, 'error');
-  const myCustomHeaderFactory = () => () => (
+  // const spy = sinon.spy(Console, 'error');
+  const myCustomHeaderFactory = Name => () => (
     <div className="my-test-header-2">
       <Name />smoothie
     </div>

website/src/reducers/analytics.js

@@ -0,0 +1,108 @@
+// Copyright (c) 2018 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+// This file sends actions on the demo app to Google analytics
+
+import {ActionTypes} from 'kepler.gl/actions';
+import {LOCATION_CHANGE} from 'react-router-redux';
+import window from 'global/window';
+import {ALL_FIELD_TYPES} from 'kepler.gl/constants';
+
+const getPayload = ({payload}) => payload;
+
+// Hack, because we don't have a way to access next state
+const getFilterType = (store, idx, value) => {
+  const {visState} = store.getState().demo.keplerGl.map;
+  const filter = visState.filters[idx];
+  const {dataId} = filter;
+  if (!dataId) {
+    return {};
+  }
+  const {fields} = visState.datasets[dataId];
+  const field = fields.find(f => f.name === value);
+
+  // Hack
+  switch (field.type) {
+    case ALL_FIELD_TYPES.real:
+    case ALL_FIELD_TYPES.integer:
+      return 'range';
+
+    case ALL_FIELD_TYPES.boolean:
+      return 'select';
+
+    case ALL_FIELD_TYPES.string:
+    case ALL_FIELD_TYPES.date:
+      return 'multiSelect';
+
+    case ALL_FIELD_TYPES.timestamp:
+      return 'timeRange';
+
+    default:
+      return null;
+  }
+};
+
+const trackingInformation = {
+  [ActionTypes.LOAD_FILES]: ({files}) =>
+    files.map(({size, type}) => ({size, type})),
+  [ActionTypes.LAYER_TYPE_CHANGE]: ({newType}) => ({
+    newType
+  }),
+  [ActionTypes.MAP_STYLE_CHANGE]: getPayload,
+  [ActionTypes.TOGGLE_MODAL]: getPayload,
+  [ActionTypes.ADD_LAYER]: (payload, store) => ({
+    total: store.getState().demo.keplerGl.map.visState.layers.length + 1
+  }),
+  [ActionTypes.ADD_FILTER]: (payload, store) => ({
+    total: store.getState().demo.keplerGl.map.visState.filters.length + 1
+  }),
+  [ActionTypes.SET_FILTER]: ({prop, idx, value}, store) => {
+    if (prop !== 'name') {
+      return {};
+    }
+    return {
+      filterType: getFilterType(store, idx, value)
+    };
+  },
+  [ActionTypes.INTERACTION_CONFIG_CHANGE]: ({config: {id, enabled}}) => ({
+    [id]: enabled
+  }),
+  [LOCATION_CHANGE]: x => x
+};
+
+const EXCLUDED_ACTIONS = [ActionTypes.LAYER_HOVER, ActionTypes.UPDATE_MAP];
+
+const analyticsMiddleware = store => next => action => {
+  if (window.gtag && !EXCLUDED_ACTIONS.includes(action.type)) {
+    // eslint-disable-next-line no-undef
+    window.gtag('event', 'action', {
+      event_category: action.type,
+      event_label: trackingInformation[action.type]
+        ? JSON.stringify(
+          trackingInformation[action.type](action.payload, store)
+        )
+        : undefined
+    });
+  }
+
+  return next(action);
+};
+
+export default analyticsMiddleware;

website/src/reducers/index.js

@@ -26,6 +26,7 @@ import {routerMiddleware} from 'react-router-redux';
 import {hashHistory} from 'react-router';
 import appReducer from './app';
 import demoReducer from '../../../examples/demo-app/src/reducers';
+import analyticsMiddleware from './analytics';
 
 const initialState = {};
 const reducers = {
@@ -39,7 +40,8 @@ const combinedReducers = combineReducers(reducers);
 export const middlewares = [
   taskMiddleware,
   thunk,
-  routerMiddleware(hashHistory)
+  routerMiddleware(hashHistory),
+  analyticsMiddleware
 ];
 
 export const enhancers = [applyMiddleware(...middlewares)];