From 4602de3caf70f3feebbd2cf1924ed2fca0a1183c Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Thu, 7 Apr 2022 11:29:40 +0200 Subject: [PATCH] feat(ui) - dashboard - wip --- .../CustomMetricPieChart.tsx | 157 +++++++----------- .../components/MetricsList/MetricsList.tsx | 17 +- .../MetricsSearch/MetricsSearch.tsx | 19 ++- .../components/WidgetForm/WidgetForm.tsx | 2 - .../components/WidgetView/WidgetView.tsx | 6 +- frontend/app/mstore/metricStore.ts | 19 ++- frontend/app/mstore/types/widget.ts | 3 +- 7 files changed, 102 insertions(+), 121 deletions(-) diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPieChart/CustomMetricPieChart.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPieChart/CustomMetricPieChart.tsx index e48dd20dd..91dbed7b5 100644 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPieChart/CustomMetricPieChart.tsx +++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPieChart/CustomMetricPieChart.tsx @@ -35,8 +35,7 @@ function CustomMetricPieChart(props: Props) { } } return ( -
- + { - const RADIAN = Math.PI / 180; - let radius1 = 15 + innerRadius + (outerRadius - innerRadius); - let radius2 = innerRadius + (outerRadius - innerRadius); - let x2 = cx + radius1 * Math.cos(-midAngle * RADIAN); - let y2 = cy + radius1 * Math.sin(-midAngle * RADIAN); - let x1 = cx + radius2 * Math.cos(-midAngle * RADIAN); - let y1 = cy + radius2 * Math.sin(-midAngle * RADIAN); + cx, + cy, + midAngle, + innerRadius, + outerRadius, + value, + index + }) => { + const RADIAN = Math.PI / 180; + let radius1 = 15 + innerRadius + (outerRadius - innerRadius); + let radius2 = innerRadius + (outerRadius - innerRadius); + let x2 = cx + radius1 * Math.cos(-midAngle * RADIAN); + let y2 = cy + radius1 * Math.sin(-midAngle * RADIAN); + let x1 = cx + radius2 * Math.cos(-midAngle * RADIAN); + let y1 = cy + radius2 * Math.sin(-midAngle * RADIAN); - const percentage = value * 100 / data.values.reduce((a, b) => a + b.sessionCount, 0); - - if (percentage<3){ - return null; - } - - return( - - ) - }} - label={({ - cx, - cy, - midAngle, - innerRadius, - outerRadius, - value, - index - }) => { - const RADIAN = Math.PI / 180; - let radius = 20 + innerRadius + (outerRadius - innerRadius); - let x = cx + radius * Math.cos(-midAngle * RADIAN); - let y = cy + radius * Math.sin(-midAngle * RADIAN); - const percentage = (value / data.values.reduce((a, b) => a + b.sessionCount, 0)) * 100; - let name = data.values[index].name || 'Unidentified'; - name = name.length > 20 ? name.substring(0, 20) + '...' : name; - if (percentage<3){ - return null; - } - return ( - cx ? "start" : "end"} - dominantBaseline="central" - fill='#666' - > - {name || 'Unidentified'} {numberWithCommas(value)} - - ); - }} - // label={({ - // cx, - // cy, - // midAngle, - // innerRadius, - // outerRadius, - // value, - // index - // }) => { - // const RADIAN = Math.PI / 180; - // const radius = 30 + innerRadius + (outerRadius - innerRadius); - // const x = cx + radius * Math.cos(-midAngle * RADIAN); - // const y = cy + radius * Math.sin(-midAngle * RADIAN); - - // return ( - // cx ? "start" : "end"} - // dominantBaseline="top" - // fontSize={10} - // > - // {data.values[index].name} ({value}) - // - // ); - // }} + const percentage = value * 100 / data.values.reduce((a, b) => a + b.sessionCount, 0); + + if (percentage<3){ + return null; + } + + return( + + ) + }} + label={({ + cx, + cy, + midAngle, + innerRadius, + outerRadius, + value, + index + }) => { + const RADIAN = Math.PI / 180; + let radius = 20 + innerRadius + (outerRadius - innerRadius); + let x = cx + radius * Math.cos(-midAngle * RADIAN); + let y = cy + radius * Math.sin(-midAngle * RADIAN); + const percentage = (value / data.values.reduce((a, b) => a + b.sessionCount, 0)) * 100; + let name = data.values[index].name || 'Unidentified'; + name = name.length > 20 ? name.substring(0, 20) + '...' : name; + if (percentage<3){ + return null; + } + return ( + cx ? "start" : "end"} + dominantBaseline="central" + fill='#666' + > + {name || 'Unidentified'} {numberWithCommas(value)} + + ); + }} > - {data.values.map((entry, index) => ( + {data && data.values && data.values.map((entry, index) => ( - ))} + ))} - +
Top 5
- -
+ ) } diff --git a/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx b/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx index 9bc01dd01..349386980 100644 --- a/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx +++ b/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx @@ -4,17 +4,22 @@ import { NoContent, Pagination } from 'UI'; import { useStore } from 'App/mstore'; import { getRE } from 'App/utils'; import MetricListItem from '../MetricListItem'; +import { sliceListPerPage } from 'App/utils'; interface Props { } function MetricsList(props: Props) { const { metricStore } = useStore(); const metrics = useObserver(() => metricStore.metrics); - const lenth = metrics.length; - const metricsSearch = useObserver(() => metricStore.metricsSearch); - const filterRE = getRE(metricsSearch, 'i'); - const list = useObserver(() => metrics.filter(w => filterRE.test(w.name))); - + const filterList = (list) => { + const filterRE = getRE(metricsSearch, 'i'); + let _list = list.filter(w => { + return filterRE.test(w.name) || filterRE.test(w.metricType) || filterRE.test(w.owner) ; + }); + return _list + } + const list: any = metricsSearch !== '' ? filterList(metrics) : metrics; + const lenth = list.length; return useObserver(() => ( @@ -28,7 +33,7 @@ function MetricsList(props: Props) {
Last Modified
- {list.map((metric: any) => ( + {sliceListPerPage(list, metricStore.page - 1, metricStore.pageSize).map((metric: any) => ( ))} diff --git a/frontend/app/components/Dashboard/components/MetricsSearch/MetricsSearch.tsx b/frontend/app/components/Dashboard/components/MetricsSearch/MetricsSearch.tsx index ce4bdbe24..6941b6ec0 100644 --- a/frontend/app/components/Dashboard/components/MetricsSearch/MetricsSearch.tsx +++ b/frontend/app/components/Dashboard/components/MetricsSearch/MetricsSearch.tsx @@ -1,22 +1,31 @@ import { useObserver } from 'mobx-react-lite'; -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { useStore } from 'App/mstore'; import { Icon } from 'UI'; +import { debounce } from 'App/utils'; +let debounceUpdate: any = () => {} function MetricsSearch(props) { - const { dashboardStore } = useStore(); - const metricsSearch = useObserver(() => dashboardStore.metricsSearch); + const { metricStore } = useStore(); + const [query, setQuery] = useState(metricStore.metricsSearch); + useEffect(() => { + debounceUpdate = debounce((key, value) => metricStore.updateKey(key, value), 500); + }, []) + const write = ({ target: { name, value } }) => { + setQuery(value); + debounceUpdate('metricsSearch', value); + } return useObserver(() => (
dashboardStore.updateKey(name, value)} + onChange={write} />
)); diff --git a/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx b/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx index 058be4d1c..bc7803c85 100644 --- a/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx +++ b/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx @@ -59,10 +59,8 @@ function WidgetForm(props: Props) { if (wasCreating) { if (parseInt(dashboardId) > 0) { history.push(withSiteId(dashboardMetricDetails(parseInt(dashboardId), metric.metricId), siteId)); - history.go(0) } else { history.push(withSiteId(metricDetails(metric.metricId), siteId)); - history.go(0) } } diff --git a/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx b/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx index 82442bbcc..8a5391948 100644 --- a/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx +++ b/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx @@ -18,11 +18,7 @@ function WidgetView(props: Props) { const { metricStore } = useStore(); const widget = useObserver(() => metricStore.instance); const loading = useObserver(() => metricStore.isLoading); - const [expanded, setExpanded] = useState(false); - - useEffect(() => { - setExpanded(!widget.exists()) - }, [widget]) + const [expanded, setExpanded] = useState(!metricId || metricId === 'create'); React.useEffect(() => { if (metricId && metricId !== 'create') { diff --git a/frontend/app/mstore/metricStore.ts b/frontend/app/mstore/metricStore.ts index 4521c4fff..455452adb 100644 --- a/frontend/app/mstore/metricStore.ts +++ b/frontend/app/mstore/metricStore.ts @@ -43,7 +43,7 @@ export default class MetricStore implements IMetricStore { instance: IWidget = new Widget() page: number = 1 - pageSize: number = 10 + pageSize: number = 4 metricsSearch: string = "" sort: any = {} @@ -74,14 +74,14 @@ export default class MetricStore implements IMetricStore { paginatedList: computed, }) - // reaction( - // () => this.metricsSearch, - // (metricsSearch) => { // TODO filter the list for View - // console.log('metricsSearch', metricsSearch) - // this.page = 1 - // this.paginatedList() - // } - // ) + reaction( + () => this.metricsSearch, + (metricsSearch) => { // TODO filter the list for View + console.log('metricsSearch', metricsSearch) + this.page = 1 + this.paginatedList + } + ) } // State Actions @@ -140,6 +140,7 @@ export default class MetricStore implements IMetricStore { if (wasCreating) { toast.success('Metric created successfully') this.addToList(_metric) + this.instance = _metric } else { toast.success('Metric updated successfully') this.updateInList(_metric) diff --git a/frontend/app/mstore/types/widget.ts b/frontend/app/mstore/types/widget.ts index 7749600e5..672c84659 100644 --- a/frontend/app/mstore/types/widget.ts +++ b/frontend/app/mstore/types/widget.ts @@ -112,7 +112,8 @@ export default class Widget implements IWidget { this.series = json.series ? json.series.map((series: any) => new FilterSeries().fromJson(series)) : [], this.dashboards = json.dashboards this.owner = json.ownerEmail - this.lastModified = DateTime.fromMillis(json.editedAt || json.createdAt) + // this.lastModified = json.editedAt || json.createdAt ? DateTime.fromMillis(json.editedAt || json.createdAt) : null + this.lastModified = DateTime.fromMillis(1649319074) this.config = json.config this.position = json.config.position })