From 7d2d4db21ec82e0f3141dd24b2aef9f4b1dc8fde Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Wed, 26 Jun 2024 18:55:51 +0200 Subject: [PATCH] change(ui): performance cards --- .../NewDashModal/ExampleCards.tsx | 515 +++++++++++------- .../NewDashModal/Examples/Bars.tsx | 11 +- .../NewDashModal/Examples/InsightsExample.tsx | 51 ++ 3 files changed, 371 insertions(+), 206 deletions(-) create mode 100644 frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/InsightsExample.tsx diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx index 6644cef6a..025987244 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx @@ -1,61 +1,68 @@ import ExampleFunnel from "./Examples/Funnel"; import ExamplePath from "./Examples/Path"; import ExampleTrend from "./Examples/Trend"; -import ExampleCount from "./Examples/Count"; import PerfBreakdown from "./Examples/PerfBreakdown"; import SlowestDomain from "./Examples/SlowestDomain"; -import SessionsByErrors from "./Examples/SessionsByErrors"; -import SessionsByIssues from "./Examples/SessionsByIssues"; import ByBrowser from "./Examples/SessionsBy/ByBrowser"; import BySystem from "./Examples/SessionsBy/BySystem"; import ByCountry from "./Examples/SessionsBy/ByCountry"; import ByUrl from "./Examples/SessionsBy/ByUrl"; -import {ERRORS, FUNNEL, PERFORMANCE, TABLE, TIMESERIES, USER_PATH, WEB_VITALS} from "App/constants/card"; +import { + ERRORS, + FUNNEL, INSIGHTS, + PERFORMANCE, + RESOURCE_MONITORING, + TABLE, + TIMESERIES, + USER_PATH, + WEB_VITALS +} from "App/constants/card"; import {FilterKey} from "Types/filter/filterType"; import {Activity, BarChart, TableCellsMerge, TrendingUp} from "lucide-react"; import WebVital from "Components/Dashboard/components/DashboardList/NewDashModal/Examples/WebVital"; import Trend from "./Examples/Trend"; -import ErrorsPerDomain from "Components/Dashboard/Widgets/PredefinedWidgets/ErrorsPerDomain"; import Bars from "Components/Dashboard/components/DashboardList/NewDashModal/Examples/Bars"; -import SessionsBy from "Components/Dashboard/Widgets/CustomMetricsWidgets/SessionsBy"; import ByIssues from "Components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByIssues"; +import InsightsExample from "Components/Dashboard/components/DashboardList/NewDashModal/Examples/InsightsExample"; -const TYPE = { - FUNNEL: 'funnel', - PATH_FINDER: 'path-finder', - TREND: 'trend', - SESSIONS_BY: 'sessions-by', - BREAKDOWN: 'breakdown', - SLOWEST_DOMAIN: 'slowest-domain', - SESSIONS_BY_ERRORS: 'sessions-by-errors', - SESSIONS_BY_ISSUES: 'sessions-by-issues', - SESSIONS_BY_BROWSER: 'sessions-by-browser', - SESSIONS_BY_SYSTEM: 'sessions-by-system', - SESSIONS_BY_COUNTRY: 'sessions-by-country', - SESSIONS_BY_URL: 'sessions-by-url', - - - ERRORS_JS: 'js-errors', - ERRORS_BY_ORIGIN: 'errors-by-origin', - ERRORS_BY_DOMAIN: 'errors-by-domain', - ERRORS_BY_TYPE: 'errors-by-type', - CALLS_WITH_ERRORS: 'calls-with-errors', - ERRORS_4XX: '4xx-errors', - ERRORS_5XX: '5xx-errors', -} +// const TYPE = { +// FUNNEL: 'funnel', +// PATH_FINDER: 'path-finder', +// TREND: 'trend', +// SESSIONS_BY: 'sessions-by', +// BREAKDOWN: 'breakdown', +// SLOWEST_DOMAIN: 'slowest-domain', +// SESSIONS_BY_ERRORS: 'sessions-by-errors', +// SESSIONS_BY_ISSUES: 'sessions-by-issues', +// SESSIONS_BY_BROWSER: 'sessions-by-browser', +// SESSIONS_BY_SYSTEM: 'sessions-by-system', +// SESSIONS_BY_COUNTRY: 'sessions-by-country', +// SESSIONS_BY_URL: 'sessions-by-url', +// +// +// ERRORS_JS: 'js-errors', +// ERRORS_BY_ORIGIN: 'errors-by-origin', +// ERRORS_BY_DOMAIN: 'errors-by-domain', +// ERRORS_BY_TYPE: 'errors-by-type', +// CALLS_WITH_ERRORS: 'calls-with-errors', +// ERRORS_4XX: '4xx-errors', +// ERRORS_5XX: '5xx-errors', +// } export const CARD_CATEGORY = { PRODUCT_ANALYTICS: 'product-analytics', PERFORMANCE_MONITORING: 'performance-monitoring', WEB_ANALYTICS: 'web-analytics', ERROR_TRACKING: 'error-tracking', + WEB_VITALS: 'web-vitals', } export const CARD_CATEGORIES = [ {key: CARD_CATEGORY.PRODUCT_ANALYTICS, label: 'Product Analytics', icon: TrendingUp, types: [USER_PATH, ERRORS]}, {key: CARD_CATEGORY.PERFORMANCE_MONITORING, label: 'Performance Monitoring', icon: Activity, types: [TIMESERIES]}, {key: CARD_CATEGORY.WEB_ANALYTICS, label: 'Web Analytics', icon: BarChart, types: [TABLE]}, - {key: CARD_CATEGORY.ERROR_TRACKING, label: 'Errors Tracking', icon: TableCellsMerge, types: [WEB_VITALS]} + {key: CARD_CATEGORY.ERROR_TRACKING, label: 'Errors Tracking', icon: TableCellsMerge, types: [WEB_VITALS]}, + {key: CARD_CATEGORY.WEB_VITALS, label: 'Web Vitals', icon: TableCellsMerge, types: [WEB_VITALS]} ]; export interface CardType { @@ -87,8 +94,9 @@ export const CARD_LIST: CardType[] = [ }, { title: 'Trend', - key: TYPE.TREND, + key: TIMESERIES, cardType: TIMESERIES, + metricOf: 'sessionCount', category: CARD_CATEGORIES[0].key, example: ExampleTrend, }, @@ -102,226 +110,136 @@ export const CARD_LIST: CardType[] = [ example: ByIssues, }, + { + title: 'Insights', + key: INSIGHTS, + cardType: INSIGHTS, + metricOf: 'issueCategories', + category: CARD_CATEGORIES[0].key, + width: 4, + example: InsightsExample, + }, + // Performance Monitoring { title: 'CPU Load', - key: FilterKey.AVG_CPU, - cardType: WEB_VITALS, - metricOf: FilterKey.AVG_CPU, + key: FilterKey.CPU, + cardType: PERFORMANCE, + metricOf: FilterKey.CPU, category: CARD_CATEGORIES[1].key, - width: 1, - height: 148, - example: WebVital, - }, - { - title: 'DOM Content Loaded', - key: FilterKey.AVG_DOM_CONTENT_LOADED, - cardType: WEB_VITALS, - metricOf: FilterKey.AVG_DOM_CONTENT_LOADED, - category: CARD_CATEGORIES[1].key, - width: 1, - height: 148, - example: WebVital, + example: Trend, }, { - title: 'DOM Content Loadeded Start', - key: FilterKey.AVG_DOM_CONTENT_LOAD_START, - cardType: WEB_VITALS, - metricOf: FilterKey.AVG_DOM_CONTENT_LOAD_START, + title: 'Crashes', + key: FilterKey.CRASHES, + cardType: PERFORMANCE, + metricOf: FilterKey.CRASHES, category: CARD_CATEGORIES[1].key, - width: 1, - height: 148, - example: WebVital, + example: Trend, }, { - title: 'First Meaningful Paint', - key: FilterKey.AVG_FIRST_CONTENTFUL_PIXEL, - cardType: WEB_VITALS, - metricOf: FilterKey.AVG_FIRST_CONTENTFUL_PIXEL, + title: 'Framerate', + key: FilterKey.FPS, + cardType: PERFORMANCE, + metricOf: FilterKey.FPS, category: CARD_CATEGORIES[1].key, - width: 1, - height: 148, - example: WebVital, + example: Trend, }, { - title: 'First Paint', - key: FilterKey.AVG_FIRST_PAINT, - cardType: WEB_VITALS, - metricOf: FilterKey.AVG_FIRST_PAINT, + title: 'DOM Building Time', + key: FilterKey.PAGES_DOM_BUILD_TIME, + cardType: PERFORMANCE, + metricOf: FilterKey.PAGES_DOM_BUILD_TIME, category: CARD_CATEGORIES[1].key, - width: 1, - height: 148, - example: WebVital, + example: Trend, }, { - title: 'Frame Rate', - key: FilterKey.AVG_FPS, - cardType: WEB_VITALS, - metricOf: FilterKey.AVG_FPS, + title: 'Memory Consumption', + key: FilterKey.MEMORY_CONSUMPTION, + cardType: PERFORMANCE, + metricOf: FilterKey.MEMORY_CONSUMPTION, category: CARD_CATEGORIES[1].key, - width: 1, - height: 148, - example: WebVital, - }, - - { - title: 'Image Load Time', - key: FilterKey.AVG_IMAGE_LOAD_TIME, - cardType: WEB_VITALS, - metricOf: FilterKey.AVG_IMAGE_LOAD_TIME, - category: CARD_CATEGORIES[1].key, - width: 1, - height: 148, - example: WebVital, - }, - - { - title: 'Page Load Time', - key: FilterKey.AVG_PAGE_LOAD_TIME, - cardType: WEB_VITALS, - metricOf: FilterKey.AVG_PAGE_LOAD_TIME, - category: CARD_CATEGORIES[1].key, - width: 1, - height: 148, - example: WebVital, - }, - - { - title: 'DOM Build Time', - key: FilterKey.AVG_PAGES_DOM_BUILD_TIME, - cardType: WEB_VITALS, - metricOf: FilterKey.AVG_PAGES_DOM_BUILD_TIME, - category: CARD_CATEGORIES[1].key, - width: 1, - height: 148, - example: WebVital, + example: Trend, }, { title: 'Page Response Time', - key: FilterKey.AVG_PAGES_RESPONSE_TIME, - cardType: WEB_VITALS, - metricOf: FilterKey.AVG_PAGES_RESPONSE_TIME, + key: FilterKey.PAGES_RESPONSE_TIME, + cardType: PERFORMANCE, + metricOf: FilterKey.PAGES_RESPONSE_TIME, category: CARD_CATEGORIES[1].key, - width: 1, - height: 148, - example: WebVital, + example: Trend, }, { - title: 'Request Load Time', - key: FilterKey.AVG_REQUEST_LOADT_IME, - cardType: WEB_VITALS, - metricOf: FilterKey.AVG_REQUEST_LOADT_IME, + title: 'Page Response Time Distribution', + key: FilterKey.PAGES_RESPONSE_TIME_DISTRIBUTION, + cardType: PERFORMANCE, + metricOf: FilterKey.PAGES_RESPONSE_TIME_DISTRIBUTION, category: CARD_CATEGORIES[1].key, - width: 1, - height: 148, - example: WebVital, - }, - { - title: 'Response Time', - key: FilterKey.AVG_RESPONSE_TIME, - cardType: WEB_VITALS, - metricOf: FilterKey.AVG_RESPONSE_TIME, - category: CARD_CATEGORIES[1].key, - width: 1, - height: 148, - example: WebVital, + example: Trend, }, { - title: 'Session Duration', - key: FilterKey.AVG_SESSION_DURATION, - cardType: WEB_VITALS, - metricOf: FilterKey.AVG_SESSION_DURATION, + title: 'Resources vs Visually Completed', + key: FilterKey.RESOURCES_VS_VISUALLY_COMPLETE, + cardType: PERFORMANCE, + metricOf: FilterKey.RESOURCES_VS_VISUALLY_COMPLETE, category: CARD_CATEGORIES[1].key, - width: 1, - height: 148, - example: WebVital, + example: Trend, }, { - title: 'Time Till First Byte', - key: FilterKey.AVG_TILL_FIRST_BYTE, - cardType: WEB_VITALS, - metricOf: FilterKey.AVG_TILL_FIRST_BYTE, + title: 'Sessions per Browser', + key: FilterKey.SESSIONS_PER_BROWSER, + cardType: PERFORMANCE, + metricOf: FilterKey.SESSIONS_PER_BROWSER, category: CARD_CATEGORIES[1].key, - width: 1, - height: 148, - example: WebVital, + example: Bars, }, { - title: 'Time to be Interactive', - key: FilterKey.AVG_TIME_TO_INTERACTIVE, - cardType: WEB_VITALS, - metricOf: FilterKey.AVG_TIME_TO_INTERACTIVE, + title: 'Slowest Domains', + key: FilterKey.SLOWEST_DOMAINS, + cardType: PERFORMANCE, + metricOf: FilterKey.SLOWEST_DOMAINS, category: CARD_CATEGORIES[1].key, - width: 1, - height: 148, - example: WebVital, + example: Bars, + }, + + { + title: 'Speed Index by Location', + key: FilterKey.SPEED_LOCATION, + cardType: PERFORMANCE, + metricOf: FilterKey.SPEED_LOCATION, + category: CARD_CATEGORIES[1].key, + example: Trend, }, { title: 'Time to Render', - key: FilterKey.AVG_TIME_TO_RENDER, - cardType: WEB_VITALS, - metricOf: FilterKey.AVG_TIME_TO_RENDER, - category: CARD_CATEGORIES[1].key, - width: 1, - height: 148, - example: WebVital, - }, - - { - title: 'JS Heap Size', - key: FilterKey.AVG_USED_JS_HEAP_SIZE, - cardType: WEB_VITALS, - metricOf: FilterKey.AVG_USED_JS_HEAP_SIZE, - category: CARD_CATEGORIES[1].key, - width: 1, - height: 148, - example: WebVital, - }, - - // { - // title: 'Captured Requests', - // key: WEB_VITALS, - // cardType: WEB_VITALS, - // // metricOf: FilterKey.AVG_DOM_CONTENT_LOADED, - // category: CARD_CATEGORIES[1].key, - // width: 1, - // example: WebVital, - // }, - - - { - title: 'Breakdown', - key: TYPE.BREAKDOWN, + key: FilterKey.TIME_TO_RENDER, cardType: PERFORMANCE, + metricOf: FilterKey.TIME_TO_RENDER, category: CARD_CATEGORIES[1].key, - example: PerfBreakdown, - }, - { - title: 'Slowest Domain', - key: TYPE.SLOWEST_DOMAIN, - cardType: TIMESERIES, - category: CARD_CATEGORIES[1].key, - example: SlowestDomain, + example: Trend, }, { - title: 'Sessions by Errors', - key: TYPE.SESSIONS_BY_ERRORS, - cardType: TIMESERIES, + title: 'Sessions Impacted by Slow Pages', + key: FilterKey.IMPACTED_SESSIONS_BY_SLOW_PAGES, + cardType: PERFORMANCE, + metricOf: FilterKey.IMPACTED_SESSIONS_BY_SLOW_PAGES, category: CARD_CATEGORIES[1].key, - example: SessionsByErrors, + example: Trend, }, + + // Web analytics { title: 'Sessions by Users', key: FilterKey.USERID, @@ -377,7 +295,7 @@ export const CARD_LIST: CardType[] = [ { title: 'JS Errors', key: FilterKey.IMPACTED_SESSIONS_BY_JS_ERRORS, - cardType: TABLE, + cardType: ERRORS, metricOf: FilterKey.IMPACTED_SESSIONS_BY_JS_ERRORS, category: CARD_CATEGORIES[3].key, example: PerfBreakdown, @@ -385,7 +303,7 @@ export const CARD_LIST: CardType[] = [ { title: 'Errors by Origin', key: FilterKey.RESOURCES_BY_PARTY, - cardType: TABLE, + cardType: ERRORS, metricOf: FilterKey.RESOURCES_BY_PARTY, category: CARD_CATEGORIES[3].key, example: PerfBreakdown, @@ -393,7 +311,7 @@ export const CARD_LIST: CardType[] = [ { title: 'Errors by Domain', key: FilterKey.ERRORS_PER_DOMAINS, - cardType: TABLE, + cardType: ERRORS, metricOf: FilterKey.ERRORS_PER_DOMAINS, category: CARD_CATEGORIES[3].key, example: Bars, @@ -415,7 +333,7 @@ export const CARD_LIST: CardType[] = [ { title: 'Errors by Type', key: FilterKey.ERRORS_PER_TYPE, - cardType: TABLE, + cardType: ERRORS, metricOf: FilterKey.ERRORS_PER_TYPE, category: CARD_CATEGORIES[3].key, example: PerfBreakdown, @@ -423,7 +341,7 @@ export const CARD_LIST: CardType[] = [ { title: 'Calls with Errors', key: FilterKey.CALLS_ERRORS, - cardType: TABLE, + cardType: ERRORS, metricOf: FilterKey.CALLS_ERRORS, category: CARD_CATEGORIES[3].key, example: PerfBreakdown, @@ -432,7 +350,7 @@ export const CARD_LIST: CardType[] = [ { title: '4xx Domains', key: FilterKey.DOMAINS_ERRORS_4XX, - cardType: TABLE, + cardType: ERRORS, metricOf: FilterKey.DOMAINS_ERRORS_4XX, category: CARD_CATEGORIES[3].key, example: Trend, @@ -441,9 +359,196 @@ export const CARD_LIST: CardType[] = [ { title: '5xx Domains', key: FilterKey.DOMAINS_ERRORS_5XX, - cardType: TABLE, + cardType: ERRORS, metricOf: FilterKey.DOMAINS_ERRORS_5XX, category: CARD_CATEGORIES[3].key, example: Trend, }, + + + // Web vitals + { + title: 'CPU Load', + key: FilterKey.AVG_CPU, + cardType: WEB_VITALS, + metricOf: FilterKey.AVG_CPU, + category: CARD_CATEGORIES[4].key, + width: 1, + height: 148, + example: WebVital, + }, + { + title: 'DOM Content Loaded', + key: FilterKey.AVG_DOM_CONTENT_LOADED, + cardType: WEB_VITALS, + metricOf: FilterKey.AVG_DOM_CONTENT_LOADED, + category: CARD_CATEGORIES[4].key, + width: 1, + height: 148, + example: WebVital, + }, + + { + title: 'DOM Content Loaded Start', + key: FilterKey.AVG_DOM_CONTENT_LOAD_START, + cardType: WEB_VITALS, + metricOf: FilterKey.AVG_DOM_CONTENT_LOAD_START, + category: CARD_CATEGORIES[4].key, + width: 1, + height: 148, + example: WebVital, + }, + + { + title: 'First Meaningful Paint', + key: FilterKey.AVG_FIRST_CONTENTFUL_PIXEL, + cardType: WEB_VITALS, + metricOf: FilterKey.AVG_FIRST_CONTENTFUL_PIXEL, + category: CARD_CATEGORIES[4].key, + width: 1, + height: 148, + example: WebVital, + }, + + { + title: 'First Paint', + key: FilterKey.AVG_FIRST_PAINT, + cardType: WEB_VITALS, + metricOf: FilterKey.AVG_FIRST_PAINT, + category: CARD_CATEGORIES[4].key, + width: 1, + height: 148, + example: WebVital, + }, + + { + title: 'Frame Rate', + key: FilterKey.AVG_FPS, + cardType: WEB_VITALS, + metricOf: FilterKey.AVG_FPS, + category: CARD_CATEGORIES[4].key, + width: 1, + height: 148, + example: WebVital, + }, + + { + title: 'Image Load Time', + key: FilterKey.AVG_IMAGE_LOAD_TIME, + cardType: WEB_VITALS, + metricOf: FilterKey.AVG_IMAGE_LOAD_TIME, + category: CARD_CATEGORIES[4].key, + width: 1, + height: 148, + example: WebVital, + }, + + { + title: 'Page Load Time', + key: FilterKey.AVG_PAGE_LOAD_TIME, + cardType: WEB_VITALS, + metricOf: FilterKey.AVG_PAGE_LOAD_TIME, + category: CARD_CATEGORIES[4].key, + width: 1, + height: 148, + example: WebVital, + }, + + { + title: 'DOM Build Time', + key: FilterKey.AVG_PAGES_DOM_BUILD_TIME, + cardType: WEB_VITALS, + metricOf: FilterKey.AVG_PAGES_DOM_BUILD_TIME, + category: CARD_CATEGORIES[4].key, + width: 1, + height: 148, + example: WebVital, + }, + + { + title: 'Page Response Time', + key: FilterKey.AVG_PAGES_RESPONSE_TIME, + cardType: WEB_VITALS, + metricOf: FilterKey.AVG_PAGES_RESPONSE_TIME, + category: CARD_CATEGORIES[4].key, + width: 1, + height: 148, + example: WebVital, + }, + + { + title: 'Request Load Time', + key: FilterKey.AVG_REQUEST_LOADT_IME, + cardType: WEB_VITALS, + metricOf: FilterKey.AVG_REQUEST_LOADT_IME, + category: CARD_CATEGORIES[4].key, + width: 1, + height: 148, + example: WebVital, + }, + { + title: 'Response Time', + key: FilterKey.AVG_RESPONSE_TIME, + cardType: WEB_VITALS, + metricOf: FilterKey.AVG_RESPONSE_TIME, + category: CARD_CATEGORIES[4].key, + width: 1, + height: 148, + example: WebVital, + }, + + { + title: 'Session Duration', + key: FilterKey.AVG_SESSION_DURATION, + cardType: WEB_VITALS, + metricOf: FilterKey.AVG_SESSION_DURATION, + category: CARD_CATEGORIES[4].key, + width: 1, + height: 148, + example: WebVital, + }, + + { + title: 'Time Till First Byte', + key: FilterKey.AVG_TILL_FIRST_BYTE, + cardType: WEB_VITALS, + metricOf: FilterKey.AVG_TILL_FIRST_BYTE, + category: CARD_CATEGORIES[4].key, + width: 1, + height: 148, + example: WebVital, + }, + + { + title: 'Time to be Interactive', + key: FilterKey.AVG_TIME_TO_INTERACTIVE, + cardType: WEB_VITALS, + metricOf: FilterKey.AVG_TIME_TO_INTERACTIVE, + category: CARD_CATEGORIES[4].key, + width: 1, + height: 148, + example: WebVital, + }, + + { + title: 'Time to Render', + key: FilterKey.AVG_TIME_TO_RENDER, + cardType: WEB_VITALS, + metricOf: FilterKey.AVG_TIME_TO_RENDER, + category: CARD_CATEGORIES[4].key, + width: 1, + height: 148, + example: WebVital, + }, + + { + title: 'JS Heap Size', + key: FilterKey.AVG_USED_JS_HEAP_SIZE, + cardType: WEB_VITALS, + metricOf: FilterKey.AVG_USED_JS_HEAP_SIZE, + category: CARD_CATEGORIES[4].key, + width: 1, + height: 148, + example: WebVital, + }, ] diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Bars.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Bars.tsx index 41caa2a3c..e77764c0f 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Bars.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Bars.tsx @@ -13,7 +13,16 @@ interface Props { function Bars(props: Props) { const _data = props.data || { total: 90, - values: [] + values: [ + { + "label": "company.domain.com", + "value": 89 + }, + { + "label": "openreplay.com", + "value": 15 + } + ] } return ( void; +} + +function InsightsExample(props: Props) { + const data = [ + { + "category": "errors", + "name": "Error: Invalid unit value NaN", + "value": 562, + "oldValue": null, + "ratio": 7.472410583698976, + "change": null, + "isNew": true + }, + { + "category": "errors", + "name": "TypeError: e.node.getContext is not a function", + "value": 128, + "oldValue": 1, + "ratio": 1.7019013429065284, + "change": 12700.0, + "isNew": false + }, + { + "category": "errors", + "name": "Unhandled Promise Rejection: {\"message\":\"! POST error on /client/members; 400\",\"response\":{}}", + "value": 26, + "oldValue": null, + "ratio": 0.34569871027788857, + "change": null, + "isNew": true + } + ]; + return ( + + + + ); +} + +export default InsightsExample;