feat(ui) - custommetrics - wip

frontend/app/components/shared/CustomMetrics/CustomMetricForm/CustomMetricForm.tsx

@@ -7,6 +7,8 @@ import CustomMetricWidgetPreview from 'App/components/Dashboard/Widgets/CustomMe
 import { confirm } from 'UI/Confirmation';
 import { toast } from 'react-toastify';
 import cn from 'classnames';
+import DropdownPlain from '../../DropdownPlain';
+import { metricTypes, metricOf } from 'App/constants/filterOptions';
 
 interface Props {
   metric: any;
@@ -21,6 +23,7 @@ interface Props {
 
 function CustomMetricForm(props: Props) {
   const { metric, loading } = props;
+  const metricOfOptions = metricOf.filter(i => i.key === metric.metricType);
 
   const addSeries = () => {
     props.addSeries();
@@ -30,7 +33,8 @@ function CustomMetricForm(props: Props) {
     props.removeSeries(index);
   }
 
-  const write = ({ target: { value, name } }) => props.editMetric({ ...metric, [ name ]: value }, false);
+  const write = ({ target: { value, name } }) => props.editMetric({ [ name ]: value }, false);
+  const writeOption = (e, { value, name }) => props.editMetric({ [ name ]: value }, false);
 
   const changeConditionTab = (e, { name, value }) => {
     props.editMetric({[ 'viewType' ]: value });
@@ -79,6 +83,30 @@ function CustomMetricForm(props: Props) {
         <div className="form-group">
           <label className="font-medium">Metric Type</label>
           <div className="flex items-center">
+            <DropdownPlain
+              name="metricType"
+              options={metricTypes}
+              value={ metric.metricType }
+              onChange={ writeOption }
+            />
+            <span className="mx-3">of</span>
+            <DropdownPlain
+              name="metricOf"
+              options={metricOfOptions}
+              value={ metric.metricOf }
+              onChange={ writeOption }
+            />
+            <span className="mx-3">showing</span>
+            <DropdownPlain
+              name="viewType"
+              options={[
+                { value: 'sessionCount', text: 'Session Count' },
+              ]}
+              value={ metric.metricType }
+              onChange={ writeOption }
+            />
+          </div>
+          {/* <div className="flex items-center">
             <span className="bg-white p-1 px-2 border rounded" style={{ height: '30px'}}>Timeseries</span>
             <span className="mx-2 color-gray-medium">of</span>
             <div>
@@ -95,7 +123,7 @@ function CustomMetricForm(props: Props) {
                 ]}
               />
             </div>
-          </div>
+          </div> */}
         </div>
 
         <div className="form-group">

frontend/app/components/shared/DropdownPlain/DropdownPlain.tsx

@@ -3,6 +3,7 @@ import stl from './DropdownPlain.css';
 import { Dropdown, Icon } from 'UI';
 
 interface Props {
+    name?: string;
     options: any[];
     onChange: (e, { name, value }) => void;
     icon?: string;
@@ -11,17 +12,19 @@ interface Props {
 }
 
 export default function DropdownPlain(props: Props) {
-    const { value, options, icon = "chevron-down", direction = "left" } = props;
+    const { name = "sort", value, options, icon = "chevron-down", direction = "left" } = props;
     return (
         <div>
             <Dropdown
                 value={value}
-                name="sort"
+                name={name}
                 className={ stl.dropdown }
                 direction={direction}
                 options={ options }
                 onChange={ props.onChange }
+                floating
                 scrolling
+                selectOnBlur={ false }
                 // defaultValue={ value }
                 icon={ icon ? <Icon name="chevron-down" color="gray-dark" size="14" className={stl.dropdownIcon} /> : null }
             />

frontend/app/constants/filterOptions.js

@@ -54,6 +54,20 @@ export const customOperators = [
   { key: '>=', text: '>=', value: '>=' },
 ]
 
+export const metricTypes = [
+  { text: 'Timeseries', value: 'timeseries' },
+  { text: 'Table', value: 'table' },
+];
+
+export const metricOf = [
+  { text: 'Session Count', value: 'sessionCount', key: 'timeseries' },
+  { text: 'Users', value: 'users', key: 'table' },
+  { text: 'Rage Click', value: 'rageClick', key: 'table' },
+  { text: 'Dead Click', value: 'deadClick', key: 'table' },
+  { text: 'Browser', value: 'browser', key: 'table' },
+  { text: 'Device', value: 'device', key: 'table' },
+]
+
 export default {
   options,
   baseOperators,
@@ -62,4 +76,6 @@ export default {
   booleanOperators,
   customOperators,
   getOperatorsByKeys,
+  metricTypes,
+  metricOf,
 }

frontend/app/types/customMetric.js

@@ -27,7 +27,9 @@ export const FilterSeries = Record({
 export default Record({
   metricId: undefined,
   name: 'Series',
-  viewType: 'lineChart',
+  metricType: 'timeseries',
+  metricOf: 'sessionCount',
+  viewType: 'sessionCount',
   series: List(),
   isPublic: true,
   startDate: '',