From 0932b4de139ebffafea729db1dbc7c472464540d Mon Sep 17 00:00:00 2001 From: nick-delirium Date: Mon, 2 Dec 2024 12:09:50 +0100 Subject: [PATCH] ui: some refactoring and type coverage... --- .../CustomMetricsWidgets/AreaChart.tsx | 10 ++++------ .../CustomMetricsWidgets/BigNumChart.tsx | 2 +- .../CustomChartTooltip.tsx | 20 +++++++++++++++---- .../CustomMetricPieChart.tsx | 12 ++++++++--- .../CustomMetricsWidgets/ProgressBarChart.tsx | 1 + .../DashboardHeader/DashboardHeader.tsx | 9 ++------- .../MetricViewHeader/MetricViewHeader.tsx | 6 +++--- .../WidgetDateRange/RangeGranularity.tsx | 10 +++++++--- .../WidgetView/WidgetViewHeader.tsx | 5 ++--- .../app/components/shared/Dropdown/index.tsx | 4 ++-- .../shared/Filters/FilterList/EventsOrder.tsx | 6 +++--- .../shared/Filters/FilterList/FilterList.tsx | 1 - .../LiveSessionSearch/LiveSessionSearch.tsx | 1 - frontend/app/mstore/types/dashboard.ts | 1 + 14 files changed, 51 insertions(+), 37 deletions(-) diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/AreaChart.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/AreaChart.tsx index dce70e78d..023579720 100644 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/AreaChart.tsx +++ b/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; 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; diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/BigNumChart.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/BigNumChart.tsx index c8752694a..b0e84e483 100644 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/BigNumChart.tsx +++ b/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 ( diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomChartTooltip.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomChartTooltip.tsx index af9faf3c1..b2216c201 100644 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomChartTooltip.tsx +++ b/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[] = 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 = {}; shownPayloads.forEach((item) => { diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPieChart/CustomMetricPieChart.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPieChart/CustomMetricPieChart.tsx index e155838db..04931b29a 100644 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPieChart/CustomMetricPieChart.tsx +++ b/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; } diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ProgressBarChart.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ProgressBarChart.tsx index c5b717114..1732d54fb 100644 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ProgressBarChart.tsx +++ b/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); diff --git a/frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx b/frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx index 793a858fc..acecd246b 100644 --- a/frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx +++ b/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); diff --git a/frontend/app/components/Dashboard/components/MetricViewHeader/MetricViewHeader.tsx b/frontend/app/components/Dashboard/components/MetricViewHeader/MetricViewHeader.tsx index 53b2fe3c0..a19cc8f91 100644 --- a/frontend/app/components/Dashboard/components/MetricViewHeader/MetricViewHeader.tsx +++ b/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, })); diff --git a/frontend/app/components/Dashboard/components/WidgetDateRange/RangeGranularity.tsx b/frontend/app/components/Dashboard/components/WidgetDateRange/RangeGranularity.tsx index 566b3e574..3c9f3270e 100644 --- a/frontend/app/components/Dashboard/components/WidgetDateRange/RangeGranularity.tsx +++ b/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 ( = 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 }); } } diff --git a/frontend/app/components/Dashboard/components/WidgetView/WidgetViewHeader.tsx b/frontend/app/components/Dashboard/components/WidgetView/WidgetViewHeader.tsx index 1f22def67..7bab4e8c7 100644 --- a/frontend/app/components/Dashboard/components/WidgetView/WidgetViewHeader.tsx +++ b/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 ( diff --git a/frontend/app/components/shared/Dropdown/index.tsx b/frontend/app/components/shared/Dropdown/index.tsx index 901f62625..1ceb0e3ac 100644 --- a/frontend/app/components/shared/Dropdown/index.tsx +++ b/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; }) { diff --git a/frontend/app/components/shared/Filters/FilterList/EventsOrder.tsx b/frontend/app/components/shared/Filters/FilterList/EventsOrder.tsx index c39547b2b..14c4c6abf 100644 --- a/frontend/app/components/shared/Filters/FilterList/EventsOrder.tsx +++ b/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, diff --git a/frontend/app/components/shared/Filters/FilterList/FilterList.tsx b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx index 463961140..ebdd602dc 100644 --- a/frontend/app/components/shared/Filters/FilterList/FilterList.tsx +++ b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx @@ -21,7 +21,6 @@ interface Props { excludeFilterKeys?: Array; isConditional?: boolean; actions?: React.ReactNode[]; - onlyFilters?: boolean; onAddFilter: (filter: any) => void; mergeDown?: boolean; mergeUp?: boolean; diff --git a/frontend/app/components/shared/LiveSessionSearch/LiveSessionSearch.tsx b/frontend/app/components/shared/LiveSessionSearch/LiveSessionSearch.tsx index cf5c1f408..315e8ae3d 100644 --- a/frontend/app/components/shared/LiveSessionSearch/LiveSessionSearch.tsx +++ b/frontend/app/components/shared/LiveSessionSearch/LiveSessionSearch.tsx @@ -49,7 +49,6 @@ function LiveSessionSearch() { onRemoveFilter={onRemoveFilter} onChangeEventsOrder={onChangeEventsOrder} saveRequestPayloads={saveRequestPayloads} - onlyFilters={true} /> ); } diff --git a/frontend/app/mstore/types/dashboard.ts b/frontend/app/mstore/types/dashboard.ts index a82702596..728c06503 100644 --- a/frontend/app/mstore/types/dashboard.ts +++ b/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()