feat: 🎸 add support for funnel steps and timeframe

keen · Sep 30, 2020 · ad36d3c · ad36d3c
1 parent ff98816
commit ad36d3c
Show file tree

Hide file tree

Showing 44 changed files with 1,050 additions and 161 deletions.
diff --git a/lib/js/app/components/DataViz/DataViz.styles.ts b/lib/js/app/components/DataViz/DataViz.styles.ts
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 export const VisulizationContainer = styled.div`
   width: 100%;
-  height: 340px;
+  height: 280px;
 `;
 
 export const Settings = styled.div`

diff --git a/lib/js/app/components/JSONView/JSONView.styles.ts b/lib/js/app/components/JSONView/JSONView.styles.ts
@@ -2,6 +2,6 @@ import styled from 'styled-components';
 
 export const Container = styled.div`
   width: 100%;
-  height: 340px;
+  height: 280px;
   overflow-y: scroll;
 `;
diff --git a/lib/js/app/components/QuerySummary/QuerySummary.styles.ts b/lib/js/app/components/QuerySummary/QuerySummary.styles.ts
@@ -1,41 +1,5 @@
 import styled from 'styled-components';
-import { colors } from '@keen.io/colors';
-// import { Card as BaseCard } from '@keen.io/ui-core';
-
-// export const Card = styled(BaseCard)`
-//   height: auto;
-// `;
 
 export const Wrapper = styled.div`
   padding: 20px;
 `;
-
-export const StyledTable = styled.table`
-  border-collapse: collapse;
-  table-layout: fixed;
-  text-align: left;
-`;
-
-export const StyledBody = styled.tbody``;
-
-export const Row = styled.tr`
-  vertical-align: top;
-`;
-
-export const Label = styled.th`
-  padding: 0 20px 10px 0;
-
-  font-family: 'Lato Bold', sans-serif;
-  font-size: 14px;
-  line-height: 17px;
-  color: ${colors.black[100]};
-`;
-
-export const Value = styled.td`
-  padding: 0 0 10px 0;
-
-  font-family: 'Lato Regular', sans-serif;
-  font-size: 14px;
-  line-height: 17px;
-  color: ${colors.black[100]};
-`;
diff --git a/lib/js/app/components/QuerySummary/QuerySummary.test.tsx b/lib/js/app/components/QuerySummary/QuerySummary.test.tsx
@@ -0,0 +1,75 @@
+/* eslint-disable @typescript-eslint/camelcase */
+import React from 'react';
+import { render as rtlRender } from '@testing-library/react';
+
+import QuerySummary from './QuerySummary';
+
+const render = (overProps: any = {}) => {
+  const props = {
+    querySettings: {
+      query: {
+        analysis_type: 'sum',
+        event_collection: 'purchases',
+        target_property: 'item.price',
+        timezone: 'UTC',
+        filters: [
+          {
+            operator: 'gt',
+            property_value: '100',
+            property_name: 'item.quantity',
+          },
+        ],
+      },
+    },
+    ...overProps,
+  };
+
+  const wrapper = rtlRender(<QuerySummary {...props} />);
+
+  return {
+    wrapper,
+    props,
+  };
+};
+
+test('should render query summary', () => {
+  const {
+    wrapper: { container },
+  } = render();
+
+  expect(container).toMatchSnapshot();
+});
+
+test('should render query summary for funnels', () => {
+  const querySettings = {
+    query: {
+      analysis_type: 'funnel',
+      steps: [
+        {
+          with_actors: false,
+          actor_property: 'user.id',
+          filters: [],
+          timeframe: 'this_14_days',
+          timezone: 'UTC',
+          event_collection: 'signups',
+          optional: false,
+          inverted: false,
+        },
+        {
+          with_actors: false,
+          actor_property: 'user.id',
+          filters: [],
+          timeframe: 'this_14_days',
+          timezone: 'UTC',
+          event_collection: 'purchases',
+          optional: false,
+          inverted: false,
+        },
+      ],
+    },
+  };
+  const {
+    wrapper: { container },
+  } = render({ querySettings });
+  expect(container).toMatchSnapshot();
+});
diff --git a/lib/js/app/components/QuerySummary/QuerySummary.tsx b/lib/js/app/components/QuerySummary/QuerySummary.tsx
@@ -1,15 +1,14 @@
 import React, { FC } from 'react';
-import { FilterSummary } from './components';
+
 import {
-  Wrapper,
+  Timeframe,
+  FunnelSteps,
+  PropertyName,
   StyledTable,
-  StyledBody,
-  Row,
-  Label,
-  Value,
-} from './QuerySummary.styles';
+} from './components';
+import { Wrapper } from './QuerySummary.styles';
 
-import { Filter } from './types';
+import text from './text.json';
 
 type Props = {
   querySettings: Record<string, any>;
@@ -22,50 +21,53 @@ const QuerySummary: FC<Props> = ({ querySettings }) => {
       event_collection: eventCollection,
       target_property: targetProperty,
       timeframe,
+      timezone,
       filters,
+      steps,
     },
   } = querySettings;
 
   return (
     <Wrapper>
-      <StyledTable>
-        <StyledBody>
+      <StyledTable.Table>
+        <StyledTable.Body>
           {analysisType && (
-            <Row>
-              <Label>Analysis:</Label>
-              <Value>{analysisType}</Value>
-            </Row>
+            <StyledTable.Row>
+              <StyledTable.Label>{text.analysis}</StyledTable.Label>
+              <StyledTable.Value>{analysisType}</StyledTable.Value>
+            </StyledTable.Row>
           )}
           {eventCollection && (
-            <Row>
-              <Label>Event stream:</Label>
-              <Value>{eventCollection}</Value>
-            </Row>
+            <StyledTable.Row>
+              <StyledTable.Label>{text.eventStream}</StyledTable.Label>
+              <StyledTable.Value>{eventCollection}</StyledTable.Value>
+            </StyledTable.Row>
           )}
           {targetProperty && (
-            <Row>
-              <Label>Target property:</Label>
-              <Value>{targetProperty}</Value>
-            </Row>
+            <StyledTable.Row>
+              <StyledTable.Label>{text.targetProperty}</StyledTable.Label>
+              <StyledTable.Value>
+                <PropertyName name={targetProperty} />
+              </StyledTable.Value>
+            </StyledTable.Row>
           )}
           {timeframe && (
-            <Row>
-              <Label>Timeframe:</Label>
-              <Value>{timeframe}</Value>
-            </Row>
+            <StyledTable.Row>
+              <StyledTable.Label>{text.timeframe}</StyledTable.Label>
+              <StyledTable.Value>
+                <Timeframe timeframe={timeframe} timezone={timezone} />
+              </StyledTable.Value>
+            </StyledTable.Row>
           )}
           {!!filters?.length && (
-            <Row>
-              <Label>Filters:</Label>
-              <Value>
-                {filters.map((filter: Filter, idx: number) => (
-                  <FilterSummary key={idx} filter={filter} />
-                ))}
-              </Value>
-            </Row>
+            <StyledTable.Row>
+              <StyledTable.Label>{text.appliedFilters}</StyledTable.Label>
+              <StyledTable.Value>{filters.length}</StyledTable.Value>
+            </StyledTable.Row>
           )}
-        </StyledBody>
-      </StyledTable>
+        </StyledTable.Body>
+      </StyledTable.Table>
+      {steps && <FunnelSteps steps={steps} />}
     </Wrapper>
   );
 };