Add date range picker in the sidebar report config

empower-ai · Sep 29, 2023 · 247a009 · 247a009
1 parent 5ac1101
commit 247a009
Show file tree

Hide file tree

Showing 7 changed files with 189 additions and 79 deletions.
diff --git a/frontend/src/components/main-dashboard/MainDashboard.tsx b/frontend/src/components/main-dashboard/MainDashboard.tsx
@@ -7,7 +7,6 @@ import {
 import {
  Bold,
  Card,
- DateRangePickerValue,
  Divider,
  Flex,
  Grid,
@@ -43,7 +42,12 @@ import {
  updateMetrics,
 } from "../../store/comparisonInsight";
 import { DataSourceType, Schema } from "../../types/data-source";
-import { MetricColumn, TargetDirection } from "../../types/report-config";
+import {
+ DateRangeRelatedData,
+ MetricColumn,
+ TargetDirection,
+} from "../../types/report-config";
+import { DateRangeData } from "../uploader/DatePicker";
 import { MetricOverviewTable } from "./MetricOverviewTable";
 import { SidebarReportConfig } from "./SidebarReportConfig";
 import TopDimensionSlicesTable from "./TopDimensionSlicesTable";
@@ -58,8 +62,7 @@ enum ReportingType {
 interface RouterState {
  tableName?: string;
  fileId?: string;
- baseDateRange: DateRangePickerValue;
- comparisonDateRange: DateRangePickerValue;
+ dateRangeData: DateRangeRelatedData;
  metricColumn: MetricColumn;
  dateColumn: string;
  dateColumnType: string;
@@ -85,8 +88,7 @@ export default function MainDashboard() {
  const {
  tableName,
  fileId,
- baseDateRange,
- comparisonDateRange,
+ dateRangeData,
  metricColumn,
  dateColumn,
  dateColumnType,
@@ -131,8 +133,8 @@ export default function MainDashboard() {
  }>(apiPath, {
  tableName,
  fileId,
- baseDateRange,
- comparisonDateRange,
+ baseDateRange: dateRangeData.baseDateRangeData.range,
+ comparisonDateRange: dateRangeData.comparisonDateRangeData.range,
  dateColumn,
  dateColumnType,
  metricColumn,
@@ -154,7 +156,7 @@ export default function MainDashboard() {
  dispatch(setError(e.error));
  dispatch(setLoadingStatus(false));
  });
- }, [baseDateRange, comparisonDateRange, fileId, dispatch]);
+ }, [dateRangeData, fileId, dispatch]);
 
  function renderSidebar() {
  let reportMenuElements: ReactElement[] = [];
@@ -215,6 +217,8 @@ export default function MainDashboard() {
  schema={schema}
  filters={filters}
  key="report-config"
+ dateColumn={dateColumn}
+ dateRangeData={dateRangeData}
  allDimensions={schema.fields
  .map((h) => h.name)
  .filter(
@@ -236,7 +240,12 @@ export default function MainDashboard() {
  );
  })}
  dimensions={groupByColumns}
- onSubmit={(newFilters: Filter[], newDimensions: string[]) => {
+ onSubmit={(
+ newFilters: Filter[],
+ newDimensions: string[],
+ newBaseDateRangeData: DateRangeData,
+ newComparisonDateRangeData: DateRangeData
+ ) => {
  navigate("/dashboard", {
  state: {
  schema,
@@ -248,8 +257,11 @@ export default function MainDashboard() {
  dateColumn,
  dateColumnType,
  groupByColumns: newDimensions,
- baseDateRange,
- comparisonDateRange,
+ dateRangeData: {
+ baseDateRangeData: newBaseDateRangeData,
+ comparisonDateRangeData: newComparisonDateRangeData,
+ rowCountByDateColumn: dateRangeData.rowCountByDateColumn,
+ },
  targetDirection,
  expectedValue,
  filters: newFilters,
@@ -364,8 +376,7 @@ export default function MainDashboard() {
  dateColumn,
  dateColumnType,
  groupByColumns,
- baseDateRange,
- comparisonDateRange,
+ dateRangeData,
  targetDirection,
  expectedValue,
  filters: newFilters,
@@ -562,26 +573,18 @@ export default function MainDashboard() {
  <Flex className="gap-y-4 pt-10" flexDirection="col">
  <Title>Top Segments Driving the Overall Change</Title>
  <Divider />
- {Object.keys(tableRowStatus).length > 0 ? (
- <TopDimensionSlicesTable
- rowStatusMap={tableRowStatus}
- rowCSV={tableRowCSV}
- metric={analyzingMetrics}
- maxDefaultRows={100}
- groupRows={groupRows}
- enableGroupToggle={true}
- showDimensionSelector={true}
- showCalculationMode={true}
- targetDirection={targetDirection}
- onReRunOnSegment={onReRunOnSegment}
- />
- ) : (
- <Flex>
- Unable to identify any significant driving segments. Either the
- size of the data set is too small or the variations across all
- segments are highly consistent.
- </Flex>
- )}
+ <TopDimensionSlicesTable
+ rowStatusMap={tableRowStatus}
+ rowCSV={tableRowCSV}
+ metric={analyzingMetrics}
+ maxDefaultRows={100}
+ groupRows={groupRows}
+ enableGroupToggle={true}
+ showDimensionSelector={true}
+ showCalculationMode={true}
+ targetDirection={targetDirection}
+ onReRunOnSegment={onReRunOnSegment}
+ />
  </Flex>
  )}
  {/* <WaterfallPanel
@@ -625,8 +628,8 @@ export default function MainDashboard() {
  dateColumn={dateColumn}
  groupByColumns={groupByColumns}
  metricColumn={metricColumn}
- baseDateRange={baseDateRange}
- comparisonDateRange={comparisonDateRange}
+ baseDateRange={dateRangeData.baseDateRangeData.range}
+ comparisonDateRange={dateRangeData.comparisonDateRangeData.range}
  dataSourceType={dataSourceType}
  />
  </>

diff --git a/frontend/src/components/main-dashboard/SidebarReportConfig.tsx b/frontend/src/components/main-dashboard/SidebarReportConfig.tsx
@@ -2,29 +2,44 @@ import { Button, Flex, Text } from "@tremor/react";
 import { useRef, useState } from "react";
 import { Filter } from "../../common/types";
 import { Schema } from "../../types/data-source";
+import { DateRangeRelatedData } from "../../types/report-config";
 import {
  FiltersDropDown,
  FiltersDropDownHandler,
 } from "../common/FiltersDropdown";
+import DatePicker, { DateRangeData } from "../uploader/DatePicker";
 import MultiSelector, { MultiSelectorHandles } from "../uploader/MultiSelector";
 
 interface Props {
  allDimensions: string[];
  schema: Schema;
  dimensions: string[];
  filters: Filter[];
- onSubmit: (newFilters: Filter[], newDimensions: string[]) => void;
+ dateColumn: string;
+ dateRangeData: DateRangeRelatedData;
+ onSubmit: (
+ newFilters: Filter[],
+ newDimensions: string[],
+ newBaseDateRangeData: DateRangeData,
+ newComparisonDateRangeData: DateRangeData
+ ) => void;
 }
 
 export function SidebarReportConfig({
  allDimensions,
  schema,
  dimensions,
  filters,
+ dateColumn,
+ dateRangeData,
  onSubmit,
 }: Props) {
  const [localFilters, setLocalFilters] = useState<Filter[]>(filters);
  const [localDimensions, setLocalDimensions] = useState<string[]>(dimensions);
+ const [localBaseDateRangeData, setLocalBaseDateRangeData] =
+ useState<DateRangeData>(dateRangeData.baseDateRangeData);
+ const [localComparisonDateRangeData, setLocalComparisonDateRangeData] =
+ useState<DateRangeData>(dateRangeData.comparisonDateRangeData);
 
  const dimensionSelectorRef = useRef<MultiSelectorHandles | null>(null);
  const filtersDropDownRef = useRef<FiltersDropDownHandler | null>(null);
@@ -48,7 +63,24 @@ export function SidebarReportConfig({
  )
  );
 
- return hasChangeInDimensions || hasChangeInFilters;
+ const hasChangeInBaseDateRange =
+ dateRangeData.baseDateRangeData.range.from !==
+ localBaseDateRangeData.range.from ||
+ dateRangeData.baseDateRangeData.range.to !==
+ localBaseDateRangeData.range.to;
+
+ const hasChangeInComparisonDateRange =
+ dateRangeData.comparisonDateRangeData.range.from !==
+ localComparisonDateRangeData.range.from ||
+ dateRangeData.comparisonDateRangeData.range.to !==
+ localComparisonDateRangeData.range.to;
+
+ return (
+ hasChangeInDimensions ||
+ hasChangeInFilters ||
+ hasChangeInBaseDateRange ||
+ hasChangeInComparisonDateRange
+ );
  }
  return (
  <>
@@ -59,6 +91,23 @@ export function SidebarReportConfig({
  className="gap-y-2 p-2"
  >
  <p>Report Config</p>
+ <DatePicker
+ title={null}
+ countByDate={
+ dateRangeData.rowCountByDateColumn
+ ? dateRangeData.rowCountByDateColumn[dateColumn]
+ : {}
+ }
+ comparisonDateRangeData={localComparisonDateRangeData}
+ setComparisonDateRangeData={(dateRangeData) =>
+ setLocalComparisonDateRangeData(dateRangeData)
+ }
+ baseDateRangeData={localBaseDateRangeData}
+ setBaseDateRangeData={(dateRangeData) =>
+ setLocalBaseDateRangeData(dateRangeData)
+ }
+ isOnSideBar={true}
+ />
  <Text>Dimensions</Text>
  <MultiSelector
  includeSelectAll={true}
@@ -83,7 +132,14 @@ export function SidebarReportConfig({
  <Flex justifyContent="end" className="gap-1">
  <Button
  disabled={!hasLocalChange() || localDimensions.length === 0}
- onClick={() => onSubmit(localFilters, localDimensions)}
+ onClick={() =>
+ onSubmit(
+ localFilters,
+ localDimensions,
+ localBaseDateRangeData,
+ localComparisonDateRangeData
+ )
+ }
  >
  Rerun
  </Button>
@@ -93,6 +149,10 @@ export function SidebarReportConfig({
  onClick={() => {
  setLocalDimensions(dimensions);
  setLocalFilters(filters);
+ setLocalBaseDateRangeData(dateRangeData.baseDateRangeData);
+ setLocalComparisonDateRangeData(
+ dateRangeData.comparisonDateRangeData
+ );
 
  dimensionSelectorRef.current?.reset(dimensions);
  filtersDropDownRef.current?.reset(filters);

diff --git a/frontend/src/components/uploader/DatePicker.tsx b/frontend/src/components/uploader/DatePicker.tsx
@@ -32,6 +32,7 @@ type DatePickerProps = {
  };
  defaultBaseDateRange?: DateRangePickerValue;
  defaultComparisonDateRange?: DateRangePickerValue;
+ isOnSideBar?: boolean;
 };
 
 type BaseDateMode = "previous" | "custom";
@@ -40,14 +41,14 @@ const oneDayMs = 24 * 60 * 60 * 1000;
 
 function DatePicker({
  title,
-
  comparisonDateRangeData,
  setComparisonDateRangeData,
  baseDateRangeData,
  setBaseDateRangeData,
  countByDate,
  defaultBaseDateRange,
  defaultComparisonDateRange,
+ isOnSideBar,
 }: DatePickerProps) {
  useEffect(() => {
  if (defaultBaseDateRange) {
@@ -202,6 +203,36 @@ function DatePicker({
  );
  }
 
+ if (isOnSideBar) {
+ return (
+ <>
+ <Flex justifyContent="start">
+ <Text>Date Range</Text>
+ </Flex>
+ <DateRangePicker
+ className="max-w-full"
+ value={comparisonDateRangeData.range}
+ onValueChange={onComparisonDateRangeChange}
+ enableSelect={false}
+ minDate={minDate}
+ maxDate={maxDate}
+ placeholder={"Comparison Date range"}
+ />
+ <Flex justifyContent="start">
+ <Text>Comparison Date Range</Text>
+ </Flex>
+ <DateRangePicker
+ value={baseDateRangeData.range}
+ onValueChange={onBaseDateRangeChange}
+ enableSelect={false}
+ minDate={minDate}
+ maxDate={maxDate}
+ placeholder={"Base Date range"}
+ />
+ </>
+ );
+ }
+
  return (
  <Grid numItems={5}>
  <Col className="flex items-center justify-end" numColSpan={2}>

diff --git a/frontend/src/components/uploader/report-config/BigqueryBasedReportConfig.tsx b/frontend/src/components/uploader/report-config/BigqueryBasedReportConfig.tsx
@@ -1,7 +1,7 @@
 import { useNavigate } from "react-router-dom";
 import { BigquerySchema } from "../../../types/data-source";
 import {
- DateRangeConfig,
+ DateRangeRelatedData,
  MetricColumn,
  TargetDirection,
 } from "../../../types/report-config";
@@ -23,8 +23,7 @@ export default function BigqueryBasedReportConfig({ schema }: Props) {
  dateColumnType: string,
  metricColumn: MetricColumn,
  groupByColumns: string[],
- baseDateRange: DateRangeConfig,
- comparisonDateRange: DateRangeConfig,
+ dateRangeData: DateRangeRelatedData,
  targetDirection: TargetDirection,
  expectedValue: number
  ) => {
@@ -38,8 +37,7 @@ export default function BigqueryBasedReportConfig({ schema }: Props) {
  dateColumn,
  dateColumnType,
  groupByColumns,
- baseDateRange,
- comparisonDateRange,
+ dateRangeData,
  targetDirection,
  expectedValue,
  filters: [],