ui: some refactoring and type coverage...

frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/AreaChart.tsx

@@ -13,19 +13,17 @@ import {
 } from 'recharts';
 
 interface Props {
-  data: any;
-  params: any;
+  data: { chart: any[]; namesMap: string[] };
   colors: any;
   onClick?: (event, index) => void;
-  yaxis?: any;
+  yaxis?: Record<string, any>;
   label?: string;
   hideLegend?: boolean;
 }
 
-function CustomMetricLineChart(props: Props) {
+function CustomAreaChart(props: Props) {
   const {
     data = { chart: [], namesMap: [] },
-    params,
     colors,
     onClick = () => null,
     yaxis = { ...Styles.yaxis },
@@ -78,4 +76,4 @@ function CustomMetricLineChart(props: Props) {
   );
 }
 
-export default CustomMetricLineChart;
+export default CustomAreaChart;

frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/BigNumChart.tsx

@@ -59,7 +59,7 @@ function BigNum({ color, series, value, label, compData }: {
   }
 
   const changePercent = React.useMemo(() => {
-    if (!compData) return 0;
+    if (!compData || compData === 0) return '0%';
     return `${(((value - compData) / compData) * 100).toFixed(2)}%`;
   }, [value, compData])
   return (

frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomChartTooltip.tsx

@@ -3,11 +3,23 @@ import { formatTimeOrDate } from 'App/date';
 import cn from 'classnames';
 import { ArrowUp, ArrowDown } from 'lucide-react';
 
-function CustomTooltip({ active, payload, label }) {
-  if (!active) return;
+interface PayloadItem {
+  hide?: boolean;
+  name: string;
+  value: number;
+  prevValue?: number;
+}
+interface Props {
+  active: boolean;
+  payload: PayloadItem[];
+  label: string;
+}
 
-  const shownPayloads: Record<string, any>[] = payload.filter((p) => !p.hide);
-  const currentSeries: { value: number }[] = [];
+function CustomTooltip({ active, payload, label }: Props) {
+  if (!active || !payload?.length) return null;
+
+  const shownPayloads: PayloadItem[] = payload.filter((p) => !p.hide);
+  const currentSeries: PayloadItem[] = [];
   const previousSeriesMap: Record<string, any> = {};
 
   shownPayloads.forEach((item) => {

frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPieChart/CustomMetricPieChart.tsx

@@ -1,4 +1,3 @@
-//@ts-nocheck
 import React from 'react';
 import { ResponsiveContainer, Tooltip } from 'recharts';
 import { PieChart, Pie, Cell, Legend } from 'recharts';
@@ -6,9 +5,16 @@ import { Styles } from '../../common';
 import { NoContent } from 'UI';
 import { filtersMap } from 'Types/filter/newFilter';
 import { numberWithCommas } from 'App/utils';
+
 interface Props {
-  metric: any;
-  data: any;
+  metric: {
+    metricOf: string;
+    metricType: string;
+  };
+  data: {
+    chart: any[];
+    namesMap: string[];
+  };
   colors: any;
   onClick?: (filters) => void;
 }

frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ProgressBarChart.tsx

@@ -22,6 +22,7 @@ function ProgressBarChart(props: Props) {
 
   const getTotalForSeries = (series: string, isComp: boolean) => {
     if (isComp) {
+      if (!compData) return 0;
       return compData.chart.reduce((acc, curr) => acc + curr[series], 0);
     }
     return data.chart.reduce((acc, curr) => acc + curr[series], 0);

frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx

@@ -1,25 +1,21 @@
 import React from 'react';
-import BackButton from '../../../shared/Breadcrumb/BackButton';
+import BackButton from 'Shared/Breadcrumb/BackButton';
 import { withSiteId } from 'App/routes';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
-import { Button, PageTitle, confirm, Tooltip } from 'UI';
+import { PageTitle, confirm, Tooltip } from 'UI';
 import SelectDateRange from 'Shared/SelectDateRange';
 import { useStore } from 'App/mstore';
-import { useModal } from 'App/components/Modal';
 import DashboardOptions from '../DashboardOptions';
 import withModal from 'App/components/Modal/withModal';
 import { observer } from 'mobx-react-lite';
 import DashboardEditModal from '../DashboardEditModal';
-import CreateCardButton from 'Components/Dashboard/components/CreateCardButton';
 
 interface IProps {
-  dashboardId: string;
   siteId: string;
   renderReport?: any;
 }
 
 type Props = IProps & RouteComponentProps;
-const MAX_CARDS = 29;
 
 function DashboardHeader(props: Props) {
   const { siteId } = props;
@@ -29,7 +25,6 @@ function DashboardHeader(props: Props) {
   const period = dashboardStore.period;
 
   const dashboard: any = dashboardStore.selectedDashboard;
-  const canAddMore: boolean = dashboard?.widgets?.length <= MAX_CARDS;
 
   const onEdit = (isTitle: boolean) => {
     dashboardStore.initDashboard(dashboard);

frontend/app/components/Dashboard/components/MetricViewHeader/MetricViewHeader.tsx

@@ -107,11 +107,11 @@ function DashboardDropdown({
   plain = false,
 }: {
   plain?: boolean;
-  onChange: any;
+  onChange: (val: any) => void;
 }) {
   const { dashboardStore, metricStore } = useStore();
-  const dashboardOptions = dashboardStore.dashboards.map((i: any) => ({
-    key: i.id,
+  const dashboardOptions = dashboardStore.dashboards.map((i, l) => ({
+    key: `${i.dashboardId}_${l}`,
     label: i.name,
     value: i.dashboardId,
   }));

frontend/app/components/Dashboard/components/WidgetDateRange/RangeGranularity.tsx

@@ -7,11 +7,14 @@ function RangeGranularity({
   density,
   onDensityChange
 }: {
-  period: any,
+  period: {
+    getDuration(): number;
+  },
   density: number,
   onDensityChange: (density: number) => void
 }) {
   const granularityOptions = React.useMemo(() => {
+    if (!period) return []
     return calculateGranularities(period.getDuration());
   }, [period]);
 
@@ -32,9 +35,10 @@ function RangeGranularity({
   }, [period, density])
 
   React.useEffect(() => {
+    if (granularityOptions.length === 0) return;
     const defaultOption = Math.max(granularityOptions.length - 2, 0);
     onDensityChange(granularityOptions[defaultOption].key);
-  }, [period]);
+  }, [period, granularityOptions.length]);
 
   return (
     <AntlikeDropdown
@@ -60,7 +64,7 @@ function calculateGranularities(periodDurationMs: number) {
 
   for (const granularity of granularities) {
     if (periodDurationMs >= granularity.durationMs) {
-      const density = Math.floor(periodDurationMs / granularity.durationMs);
+      const density = Math.floor(Number(BigInt(periodDurationMs) / BigInt(granularity.durationMs)));
       result.push({ label: granularity.label, key: density });
     }
   }

frontend/app/components/Dashboard/components/WidgetView/WidgetViewHeader.tsx

@@ -10,11 +10,10 @@ import CardViewMenu from 'Components/Dashboard/components/WidgetView/CardViewMen
 interface Props {
   onClick?: () => void;
   onSave: () => void;
-  undoChanges?: () => void;
 }
 
-function WidgetViewHeader({ onClick, onSave, undoChanges }: Props) {
-  const { metricStore, dashboardStore } = useStore();
+function WidgetViewHeader({ onClick, onSave }: Props) {
+  const { metricStore } = useStore();
   const widget = useObserver(() => metricStore.instance);
 
   return (

frontend/app/components/shared/Dropdown/index.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { Dropdown } from 'antd';
+import { Dropdown, MenuProps } from 'antd';
 
 function AntlikeDropdown(props: {
   label: string;
   leftIcon?: React.ReactNode;
   rightIcon?: React.ReactNode;
-  menuProps: any;
+  menuProps: MenuProps;
   useButtonStyle?: boolean;
   className?: string;
 }) {

frontend/app/components/shared/Filters/FilterList/EventsOrder.tsx

@@ -1,7 +1,7 @@
-import {observer} from "mobx-react-lite";
-import {Tooltip} from "UI";
-import {Segmented, Select} from "antd";
 import React from "react";
+import { observer } from "mobx-react-lite";
+import { Tooltip } from "UI";
+import { Select } from "antd";
 
 const EventsOrder = observer((props: {
     onChange: (e: any, v: any) => void,

frontend/app/components/shared/Filters/FilterList/FilterList.tsx

@@ -21,7 +21,6 @@ interface Props {
   excludeFilterKeys?: Array<string>;
   isConditional?: boolean;
   actions?: React.ReactNode[];
-  onlyFilters?: boolean;
   onAddFilter: (filter: any) => void;
   mergeDown?: boolean;
   mergeUp?: boolean;

frontend/app/components/shared/LiveSessionSearch/LiveSessionSearch.tsx

@@ -49,7 +49,6 @@ function LiveSessionSearch() {
       onRemoveFilter={onRemoveFilter}
       onChangeEventsOrder={onChangeEventsOrder}
       saveRequestPayloads={saveRequestPayloads}
-      onlyFilters={true}
     />
   );
 }

frontend/app/mstore/types/dashboard.ts

@@ -14,6 +14,7 @@ export default class Dashboard {
     widgets: Widget[] = []
     metrics: any[] = []
     isValid: boolean = false
+    id: string = ""
     currentWidget: Widget = new Widget()
     config: any = {}
     createdAt: number = new Date().getTime()