add psql query for retention

components/pages/reports/retention/RetentionParameters.js

@@ -4,6 +4,11 @@ import { Form, FormButtons, FormInput, FormRow, SubmitButton, TextField } from '
 import { ReportContext } from 'components/pages/reports/Report';
 import BaseParameters from '../BaseParameters';
 
+const fieldOptions = [
+  { name: 'daily', type: 'string' },
+  { name: 'weekly', type: 'string' },
+];
+
 export function RetentionParameters() {
   const { report, runReport, isRunning } = useContext(ReportContext);
   const { formatMessage, labels } = useMessages();
@@ -24,14 +29,7 @@ export function RetentionParameters() {
   return (
     <Form ref={ref} values={parameters} onSubmit={handleSubmit} preventSubmit={true}>
       <BaseParameters />
-      <FormRow label={formatMessage(labels.window)}>
-        <FormInput
-          name="window"
-          rules={{ required: formatMessage(labels.required), pattern: /[0-9]+/ }}
-        >
-          <TextField autoComplete="off" />
-        </FormInput>
-      </FormRow>
+      <FormRow label={formatMessage(labels.window)} />
       <FormButtons>
         <SubmitButton variant="primary" disabled={queryDisabled} loading={isRunning}>
           {formatMessage(labels.runQuery)}

components/pages/reports/retention/RetentionReport.js

@@ -8,8 +8,8 @@ import ReportBody from '../ReportBody';
 import Funnel from 'assets/funnel.svg';
 
 const defaultParameters = {
-  type: 'Retention',
-  parameters: { window: 60, urls: [] },
+  type: 'retention',
+  parameters: {},
 };
 
 export default function RetentionReport({ reportId }) {
@@ -20,7 +20,7 @@ export default function RetentionReport({ reportId }) {
         <RetentionParameters />
       </ReportMenu>
       <ReportBody>
-        <RetentionChart />
+        {/* <RetentionChart /> */}
         <RetentionTable />
       </ReportBody>
     </Report>

components/pages/reports/retention/RetentionTable.js

@@ -1,18 +1,29 @@
 import { useContext } from 'react';
-import DataTable from 'components/metrics/DataTable';
+import { GridTable, GridColumn } from 'react-basics';
 import { useMessages } from 'hooks';
 import { ReportContext } from '../Report';
 
 export function RetentionTable() {
   const { report } = useContext(ReportContext);
   const { formatMessage, labels } = useMessages();
+  const { fields = [] } = report?.parameters || {};
+
+  // return (
+  //   <GridTable data={report?.data || []}>
+  //     {fields.map(({ name }) => {
+  //       return <GridColumn key={name} name={name} label={name} />;
+  //     })}
+  //     <GridColumn name="total" label={formatMessage(labels.total)} />
+  //   </GridTable>
+  // );
   return (
-    <DataTable
-      data={report?.data}
-      title={formatMessage(labels.url)}
-      metric={formatMessage(labels.visitors)}
-      showPercentage={true}
-    />
+    <GridTable data={report?.data || []}>
+      <GridColumn name="cohortDate">{row => row.cohortDate}</GridColumn>
+      <GridColumn name="dateNumber">{row => row.date_number}</GridColumn>
+      <GridColumn name="visitors" label={formatMessage(labels.visitors)}>
+        {row => row.date_number}
+      </GridColumn>
+    </GridTable>
   );
 }