From 8bdb3337167bd0fa447c17ad3317ded1b85c52bd Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Tue, 7 May 2024 17:26:15 -0700 Subject: [PATCH 1/6] Remove offset from query parameters. --- src/components/hooks/useFilterParams.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/hooks/useFilterParams.ts b/src/components/hooks/useFilterParams.ts index 4fc36f39..fd76fd47 100644 --- a/src/components/hooks/useFilterParams.ts +++ b/src/components/hooks/useFilterParams.ts @@ -5,7 +5,7 @@ import { zonedTimeToUtc } from 'date-fns-tz'; export function useFilterParams(websiteId: string) { const [dateRange] = useDateRange(websiteId); - const { startDate, endDate, unit, offset } = dateRange; + const { startDate, endDate, unit } = dateRange; const { timezone } = useTimezone(); const { query: { url, referrer, title, query, os, browser, device, country, region, city, event }, @@ -15,7 +15,6 @@ export function useFilterParams(websiteId: string) { startAt: +zonedTimeToUtc(startDate, timezone), endAt: +zonedTimeToUtc(endDate, timezone), unit, - offset, timezone, url, referrer, From 3c27f08a97554ea1bac0f479dab279d3caf4f532 Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Tue, 7 May 2024 22:47:39 -0700 Subject: [PATCH 2/6] Render children for data tables. --- package.json | 2 +- .../settings/websites/WebsitesDataTable.tsx | 8 ++-- .../settings/websites/WebsitesTable.tsx | 5 ++- src/components/common/DataTable.module.css | 14 ------- src/components/common/DataTable.tsx | 2 +- src/components/hooks/queries/useRealtime.ts | 2 +- .../hooks/queries/useWebsiteValues.ts | 2 +- yarn.lock | 39 +++++++++++++++---- 8 files changed, 45 insertions(+), 29 deletions(-) diff --git a/package.json b/package.json index d5a090df..3d5b74ae 100644 --- a/package.json +++ b/package.json @@ -71,7 +71,7 @@ "@react-spring/web": "^9.7.3", "@tanstack/react-query": "^5.28.6", "@umami/prisma-client": "^0.14.0", - "@umami/redis-client": "^0.20.0", + "@umami/redis-client": "^0.21.0", "chalk": "^4.1.1", "chart.js": "^4.4.2", "chartjs-adapter-date-fns": "^3.0.0", diff --git a/src/app/(main)/settings/websites/WebsitesDataTable.tsx b/src/app/(main)/settings/websites/WebsitesDataTable.tsx index 6ffe6fd0..b3472942 100644 --- a/src/app/(main)/settings/websites/WebsitesDataTable.tsx +++ b/src/app/(main)/settings/websites/WebsitesDataTable.tsx @@ -18,6 +18,10 @@ export function WebsitesDataTable({ }) { const queryResult = useWebsites({ teamId }); + if (!queryResult?.result?.data?.length) { + return children; + } + return ( {({ data }) => ( @@ -27,9 +31,7 @@ export function WebsitesDataTable({ showActions={showActions} allowEdit={allowEdit} allowView={allowView} - > - {children} - + /> )} ); diff --git a/src/app/(main)/settings/websites/WebsitesTable.tsx b/src/app/(main)/settings/websites/WebsitesTable.tsx index 022191cf..dced90be 100644 --- a/src/app/(main)/settings/websites/WebsitesTable.tsx +++ b/src/app/(main)/settings/websites/WebsitesTable.tsx @@ -23,6 +23,10 @@ export function WebsitesTable({ const breakpoint = useBreakpoint(); const { renderTeamUrl } = useTeamUrl(); + if (!data?.length) { + return children; + } + return ( @@ -55,7 +59,6 @@ export function WebsitesTable({ }} )} - {children} ); } diff --git a/src/components/common/DataTable.module.css b/src/components/common/DataTable.module.css index 98d84c75..9a7cffb7 100644 --- a/src/components/common/DataTable.module.css +++ b/src/components/common/DataTable.module.css @@ -1,22 +1,8 @@ -.table { - grid-template-rows: repeat(auto-fit, max-content); -} - -.table td { - align-items: center; - max-height: max-content; -} - .search { max-width: 300px; margin: 20px 0; } -.action { - justify-content: flex-end; - gap: 5px; -} - .body { display: flex; flex-direction: column; diff --git a/src/components/common/DataTable.tsx b/src/components/common/DataTable.tsx index 4bca7fc3..ed910def 100644 --- a/src/components/common/DataTable.tsx +++ b/src/components/common/DataTable.tsx @@ -4,8 +4,8 @@ import { Banner, Loading, SearchField } from 'react-basics'; import { useMessages } from 'components/hooks'; import Empty from 'components/common/Empty'; import Pager from 'components/common/Pager'; -import styles from './DataTable.module.css'; import { FilterQueryResult } from 'lib/types'; +import styles from './DataTable.module.css'; const DEFAULT_SEARCH_DELAY = 600; diff --git a/src/components/hooks/queries/useRealtime.ts b/src/components/hooks/queries/useRealtime.ts index ccf6a62d..92b03bd0 100644 --- a/src/components/hooks/queries/useRealtime.ts +++ b/src/components/hooks/queries/useRealtime.ts @@ -1,6 +1,6 @@ import { useMemo, useRef } from 'react'; import { RealtimeData } from 'lib/types'; -import { useApi } from 'components/hooks'; +import { useApi } from './useApi'; import { REALTIME_INTERVAL, REALTIME_RANGE } from 'lib/constants'; import { startOfMinute, subMinutes } from 'date-fns'; import { percentFilter } from 'lib/filters'; diff --git a/src/components/hooks/queries/useWebsiteValues.ts b/src/components/hooks/queries/useWebsiteValues.ts index 02e26fc3..c5358df2 100644 --- a/src/components/hooks/queries/useWebsiteValues.ts +++ b/src/components/hooks/queries/useWebsiteValues.ts @@ -1,4 +1,4 @@ -import { useApi } from 'components/hooks'; +import { useApi } from './useApi'; export function useWebsiteValues({ websiteId, diff --git a/yarn.lock b/yarn.lock index 95cc310b..5720f25d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2899,10 +2899,10 @@ chalk "^4.1.2" debug "^4.3.4" -"@umami/redis-client@^0.20.0": - version "0.20.0" - resolved "https://registry.yarnpkg.com/@umami/redis-client/-/redis-client-0.20.0.tgz#93b4598d68983b1ad266a0a527c56533c6248bf2" - integrity sha512-ACpoO+M/J2eLWEtusjbslhR4le+rPN4h9x7TXjaVJ905icVE0Qgu5y+A7nxXjcYvlgkHk+8HPeVeeaw5P+rxqw== +"@umami/redis-client@^0.21.0": + version "0.21.0" + resolved "https://registry.yarnpkg.com/@umami/redis-client/-/redis-client-0.21.0.tgz#96426b28860b8b06fae8825fc2f2d9575b64e863" + integrity sha512-PpdJunvT4sAsVWIeEl+cHU6iSV2r/Df9dof2gdUwSigfD88ACsVs1/BvlWERxk/T93rTgVJWSpLvdw/oMYvkcw== dependencies: debug "^4.3.4" redis "^4.5.1" @@ -9532,7 +9532,16 @@ string-length@^4.0.1: char-regex "^1.0.2" strip-ansi "^6.0.0" -"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0": + version "4.2.3" + resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" + integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== + dependencies: + emoji-regex "^8.0.0" + is-fullwidth-code-point "^3.0.0" + strip-ansi "^6.0.1" + +string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -9605,7 +9614,14 @@ string.prototype.trimstart@^1.0.8: define-properties "^1.2.1" es-object-atoms "^1.0.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1": + version "6.0.1" + resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" + integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== + dependencies: + ansi-regex "^5.0.1" + +strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -10366,7 +10382,7 @@ which@^2.0.1: dependencies: isexe "^2.0.0" -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -10384,6 +10400,15 @@ wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" +wrap-ansi@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" + integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== + dependencies: + ansi-styles "^4.0.0" + string-width "^4.1.0" + strip-ansi "^6.0.0" + wrap-ansi@^8.0.1, wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214" From 90bd72cf984761c545e60a99e68452b3039d543f Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Tue, 7 May 2024 23:09:19 -0700 Subject: [PATCH 3/6] Updated data table render check. --- src/app/(main)/reports/ReportsDataTable.tsx | 7 +++++++ src/app/(main)/settings/teams/TeamsDataTable.tsx | 7 +++++++ src/app/(main)/settings/users/UsersDataTable.tsx | 13 ++++++++++++- .../(main)/settings/websites/WebsitesDataTable.tsx | 2 +- 4 files changed, 27 insertions(+), 2 deletions(-) diff --git a/src/app/(main)/reports/ReportsDataTable.tsx b/src/app/(main)/reports/ReportsDataTable.tsx index cf5953e8..7c99fb25 100644 --- a/src/app/(main)/reports/ReportsDataTable.tsx +++ b/src/app/(main)/reports/ReportsDataTable.tsx @@ -1,16 +1,23 @@ import { useReports } from 'components/hooks'; import ReportsTable from './ReportsTable'; import DataTable from 'components/common/DataTable'; +import { ReactNode } from 'react'; export default function ReportsDataTable({ websiteId, teamId, + children, }: { websiteId?: string; teamId?: string; + children?: ReactNode; }) { const queryResult = useReports({ websiteId, teamId }); + if (queryResult?.result?.data?.length === 0) { + return children; + } + return ( {({ data }) => } diff --git a/src/app/(main)/settings/teams/TeamsDataTable.tsx b/src/app/(main)/settings/teams/TeamsDataTable.tsx index fe92b6a0..6baeba33 100644 --- a/src/app/(main)/settings/teams/TeamsDataTable.tsx +++ b/src/app/(main)/settings/teams/TeamsDataTable.tsx @@ -1,17 +1,24 @@ import DataTable from 'components/common/DataTable'; import TeamsTable from 'app/(main)/settings/teams/TeamsTable'; import { useLogin, useTeams } from 'components/hooks'; +import { ReactNode } from 'react'; export function TeamsDataTable({ allowEdit, showActions, + children, }: { allowEdit?: boolean; showActions?: boolean; + children?: ReactNode; }) { const { user } = useLogin(); const queryResult = useTeams(user.id); + if (queryResult?.result?.data?.length === 0) { + return children; + } + return ( {({ data }) => { diff --git a/src/app/(main)/settings/users/UsersDataTable.tsx b/src/app/(main)/settings/users/UsersDataTable.tsx index cfff4e71..681b4dc2 100644 --- a/src/app/(main)/settings/users/UsersDataTable.tsx +++ b/src/app/(main)/settings/users/UsersDataTable.tsx @@ -1,10 +1,21 @@ import DataTable from 'components/common/DataTable'; import { useUsers } from 'components/hooks'; import UsersTable from './UsersTable'; +import { ReactNode } from 'react'; -export function UsersDataTable({ showActions }: { showActions?: boolean }) { +export function UsersDataTable({ + showActions, + children, +}: { + showActions?: boolean; + children?: ReactNode; +}) { const queryResult = useUsers(); + if (queryResult?.result?.data?.length === 0) { + return children; + } + return ( {({ data }) => } diff --git a/src/app/(main)/settings/websites/WebsitesDataTable.tsx b/src/app/(main)/settings/websites/WebsitesDataTable.tsx index b3472942..1780dfb4 100644 --- a/src/app/(main)/settings/websites/WebsitesDataTable.tsx +++ b/src/app/(main)/settings/websites/WebsitesDataTable.tsx @@ -18,7 +18,7 @@ export function WebsitesDataTable({ }) { const queryResult = useWebsites({ teamId }); - if (!queryResult?.result?.data?.length) { + if (queryResult?.result?.data?.length === 0) { return children; } From f259130202f18c9260b7e2e6a46514d15b2ec76a Mon Sep 17 00:00:00 2001 From: Francis Cao Date: Thu, 9 May 2024 11:55:54 -0700 Subject: [PATCH 4/6] add redis calls to website delete/reset --- src/queries/admin/website.ts | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/src/queries/admin/website.ts b/src/queries/admin/website.ts index 1f513bd4..d191aa65 100644 --- a/src/queries/admin/website.ts +++ b/src/queries/admin/website.ts @@ -1,4 +1,5 @@ import { Prisma, Website } from '@prisma/client'; +import redis from '@umami/redis-client'; import prisma from 'lib/prisma'; import { PageResult, PageParams } from 'lib/types'; import WebsiteFindManyArgs = Prisma.WebsiteFindManyArgs; @@ -122,6 +123,7 @@ export async function resetWebsite( websiteId: string, ): Promise<[Prisma.BatchPayload, Prisma.BatchPayload, Website]> { const { client, transaction } = prisma; + const cloudMode = !!process.env.cloudMode; return transaction([ client.eventData.deleteMany({ @@ -139,14 +141,20 @@ export async function resetWebsite( resetAt: new Date(), }, }), - ]); + ]).then(async data => { + if (cloudMode) { + await redis.client.set(`website:${websiteId}`, data[3]); + } + + return data; + }); } export async function deleteWebsite( websiteId: string, ): Promise<[Prisma.BatchPayload, Prisma.BatchPayload, Website]> { const { client, transaction } = prisma; - const cloudMode = process.env.CLOUD_MODE; + const cloudMode = !!process.env.CLOUD_MODE; return transaction([ client.eventData.deleteMany({ @@ -173,5 +181,11 @@ export async function deleteWebsite( : client.website.delete({ where: { id: websiteId }, }), - ]); + ]).then(async data => { + if (cloudMode) { + await redis.client.del(`website:${websiteId}`); + } + + return data; + }); } From 9f43ae67ef8fab7917847f9e4db793983798fee4 Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Fri, 10 May 2024 11:15:23 -0700 Subject: [PATCH 5/6] Updated styling of goals report. --- .../[reportId]/ParameterList.module.css | 19 ++++- .../reports/[reportId]/ParameterList.tsx | 7 +- .../(main)/reports/create/ReportTemplates.tsx | 3 +- .../funnel/FunnelParameters.module.css | 4 - .../reports/funnel/FunnelParameters.tsx | 4 +- src/app/(main)/reports/goals/GoalsAddForm.tsx | 2 - .../reports/goals/GoalsChart.module.css | 78 ++++++++++--------- src/app/(main)/reports/goals/GoalsChart.tsx | 27 ++++--- .../reports/goals/GoalsParameters.module.css | 18 +---- .../(main)/reports/goals/GoalsParameters.tsx | 11 +-- src/app/(main)/reports/goals/GoalsReport.tsx | 4 +- src/assets/target.svg | 1 + 12 files changed, 93 insertions(+), 85 deletions(-) create mode 100644 src/assets/target.svg diff --git a/src/app/(main)/reports/[reportId]/ParameterList.module.css b/src/app/(main)/reports/[reportId]/ParameterList.module.css index fca087ca..75860b25 100644 --- a/src/app/(main)/reports/[reportId]/ParameterList.module.css +++ b/src/app/(main)/reports/[reportId]/ParameterList.module.css @@ -6,11 +6,24 @@ .item { display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; + gap: 12px; + width: 100%; + flex-wrap: nowrap; padding: 12px; border: 1px solid var(--base400); border-radius: var(--border-radius); box-shadow: 1px 1px 1px var(--base400); } + +.value { + display: flex; + flex-direction: row; + align-items: center; + flex-wrap: wrap; + flex: 1; +} + +.icon, +.close { + height: 1.5rem; +} diff --git a/src/app/(main)/reports/[reportId]/ParameterList.tsx b/src/app/(main)/reports/[reportId]/ParameterList.tsx index f2ac988f..d4b6477b 100644 --- a/src/app/(main)/reports/[reportId]/ParameterList.tsx +++ b/src/app/(main)/reports/[reportId]/ParameterList.tsx @@ -24,18 +24,21 @@ export function ParameterList({ children }: ParameterListProps) { const Item = ({ children, className, + icon, onClick, onRemove, }: { children?: ReactNode; className?: string; + icon?: ReactNode; onClick?: () => void; onRemove?: () => void; }) => { return (
- {children} - + {icon && {icon}} +
{children}
+
diff --git a/src/app/(main)/reports/create/ReportTemplates.tsx b/src/app/(main)/reports/create/ReportTemplates.tsx index ac29f5c3..fdf5c5f5 100644 --- a/src/app/(main)/reports/create/ReportTemplates.tsx +++ b/src/app/(main)/reports/create/ReportTemplates.tsx @@ -5,6 +5,7 @@ import Funnel from 'assets/funnel.svg'; import Lightbulb from 'assets/lightbulb.svg'; import Magnet from 'assets/magnet.svg'; import Tag from 'assets/tag.svg'; +import Target from 'assets/target.svg'; import styles from './ReportTemplates.module.css'; import { useMessages, useTeamUrl } from 'components/hooks'; @@ -41,7 +42,7 @@ export function ReportTemplates({ showHeader = true }: { showHeader?: boolean }) title: formatMessage(labels.goals), description: formatMessage(labels.goalsDescription), url: renderTeamUrl('/reports/goals'), - icon: , + icon: , }, ]; diff --git a/src/app/(main)/reports/funnel/FunnelParameters.module.css b/src/app/(main)/reports/funnel/FunnelParameters.module.css index 219b9807..0f27d515 100644 --- a/src/app/(main)/reports/funnel/FunnelParameters.module.css +++ b/src/app/(main)/reports/funnel/FunnelParameters.module.css @@ -5,10 +5,6 @@ width: 100%; } -.type { - color: var(--base700); -} - .value { display: flex; align-self: center; diff --git a/src/app/(main)/reports/funnel/FunnelParameters.tsx b/src/app/(main)/reports/funnel/FunnelParameters.tsx index 7b1fb0c8..ef4ffbfb 100644 --- a/src/app/(main)/reports/funnel/FunnelParameters.tsx +++ b/src/app/(main)/reports/funnel/FunnelParameters.tsx @@ -93,12 +93,10 @@ export function FunnelParameters() { : } onRemove={() => handleRemoveStep(index)} >
-
- {step.type === 'url' ? : } -
{step.value}
 diff --git a/src/app/(main)/reports/goals/GoalsAddForm.tsx b/src/app/(main)/reports/goals/GoalsAddForm.tsx index fdfa7aad..a8a77c58 100644 --- a/src/app/(main)/reports/goals/GoalsAddForm.tsx +++ b/src/app/(main)/reports/goals/GoalsAddForm.tsx @@ -76,11 +76,9 @@ export function GoalsAddForm({ className={styles.input} value={goal?.toString()} onChange={e => handleChange(e, setGoal)} - autoFocus={true} autoComplete="off" onKeyDown={handleKeyDown} /> - . diff --git a/src/app/(main)/reports/goals/GoalsChart.module.css b/src/app/(main)/reports/goals/GoalsChart.module.css index c9f158d2..799f5fdd 100644 --- a/src/app/(main)/reports/goals/GoalsChart.module.css +++ b/src/app/(main)/reports/goals/GoalsChart.module.css @@ -1,27 +1,15 @@ .chart { display: grid; + gap: 30px; } -.num { - display: flex; - align-items: center; - justify-content: center; - border-radius: 100%; - width: 50px; - height: 50px; - font-size: 16px; - font-weight: 700; - color: var(--base800); - background: var(--base100); - z-index: 1; +.goal { + padding-bottom: 40px; + border-bottom: 1px solid var(--base400); } -.step { - display: grid; - grid-template-columns: max-content 1fr; - column-gap: 30px; - position: relative; - padding-bottom: 60px; +.goal:last-child { + border: 0; } .card { @@ -36,28 +24,12 @@ gap: 20px; } -.bar { - display: flex; - align-items: center; - justify-content: flex-end; - background: var(--base900); - height: 30px; - border-radius: 5px; - overflow: hidden; - position: relative; -} - .label { color: var(--base600); font-weight: 700; text-transform: uppercase; } -.track { - background-color: var(--base100); - border-radius: 5px; -} - .item { font-size: 20px; color: var(--base900); @@ -73,7 +45,7 @@ text-transform: lowercase; } -.visitors { +.value { color: var(--base900); font-size: 24px; font-weight: 900; @@ -85,3 +57,39 @@ font-weight: 700; align-self: flex-end; } + +.total { + color: var(--base700); +} + +.bar { + display: flex; + align-items: center; + justify-content: flex-end; + background: var(--base900); + height: 10px; + border-radius: 5px; + overflow: hidden; + position: relative; +} + +.bar.level1 { + background: var(--red800); +} +.bar.level2 { + background: var(--orange200); +} +.bar.level3 { + background: var(--orange400); +} +.bar.level4 { + background: var(--orange600); +} +.bar.level5 { + background: var(--green600); +} + +.track { + background-color: var(--base100); + border-radius: 5px; +} diff --git a/src/app/(main)/reports/goals/GoalsChart.tsx b/src/app/(main)/reports/goals/GoalsChart.tsx index f20c4f9b..910f138c 100644 --- a/src/app/(main)/reports/goals/GoalsChart.tsx +++ b/src/app/(main)/reports/goals/GoalsChart.tsx @@ -14,9 +14,10 @@ export function GoalsChart({ className }: { className?: string; isLoading?: bool return (
{data?.map(({ type, value, goal, result }, index: number) => { + const percent = result > goal ? 100 : (result / goal) * 100; + return ( -
-
{index + 1}
+
@@ -25,20 +26,24 @@ export function GoalsChart({ className }: { className?: string; isLoading?: bool {value}
-
- {formatLongNumber(result)} - {formatMessage(labels.visitors)} -
-
- {formatLongNumber(goal)} - {formatMessage(labels.goal)} +
+ {formatLongNumber(result)} + / {formatLongNumber(goal)}
{((result / goal) * 100).toFixed(2)}%
goal ? 100 : (result / goal) * 100}%` }} + className={classNames( + classNames(styles.bar, { + [styles.level1]: percent <= 20, + [styles.level2]: percent > 20 && percent <= 40, + [styles.level3]: percent > 40 && percent <= 60, + [styles.level4]: percent > 60 && percent <= 80, + [styles.level5]: percent > 80, + }), + )} + style={{ width: `${percent}%` }} >
diff --git a/src/app/(main)/reports/goals/GoalsParameters.module.css b/src/app/(main)/reports/goals/GoalsParameters.module.css index 421433f0..fbe47b84 100644 --- a/src/app/(main)/reports/goals/GoalsParameters.module.css +++ b/src/app/(main)/reports/goals/GoalsParameters.module.css @@ -1,18 +1,7 @@ -.item { - display: flex; - align-items: center; - gap: 10px; - width: 100%; -} - -.type { - color: var(--base700); -} - .value { - display: flex; - align-self: center; - gap: 20px; + width: 100%; + margin-bottom: 8px; + font-weight: 600; } .goal { @@ -22,5 +11,4 @@ font-weight: 900; padding: 2px 8px; border-radius: 5px; - white-space: nowrap; } diff --git a/src/app/(main)/reports/goals/GoalsParameters.tsx b/src/app/(main)/reports/goals/GoalsParameters.tsx index b4743d2d..55955973 100644 --- a/src/app/(main)/reports/goals/GoalsParameters.tsx +++ b/src/app/(main)/reports/goals/GoalsParameters.tsx @@ -83,15 +83,12 @@ export function GoalsParameters() { return ( : } onRemove={() => handleRemoveGoals(index)} > -
-
- {goal.type === 'url' ? : } -
-
{goal.value}
-
{formatNumber(goal.goal)}
+
{goal.value}
+
+ {formatMessage(labels.goal)}: {formatNumber(goal.goal)}
diff --git a/src/app/(main)/reports/goals/GoalsReport.tsx b/src/app/(main)/reports/goals/GoalsReport.tsx index d6171c31..020d7d09 100644 --- a/src/app/(main)/reports/goals/GoalsReport.tsx +++ b/src/app/(main)/reports/goals/GoalsReport.tsx @@ -4,7 +4,7 @@ import Report from '../[reportId]/Report'; import ReportHeader from '../[reportId]/ReportHeader'; import ReportMenu from '../[reportId]/ReportMenu'; import ReportBody from '../[reportId]/ReportBody'; -import Goals from 'assets/funnel.svg'; +import Target from 'assets/target.svg'; import { REPORT_TYPES } from 'lib/constants'; const defaultParameters = { @@ -15,7 +15,7 @@ const defaultParameters = { export default function GoalsReport({ reportId }: { reportId?: string }) { return ( - } /> + } /> diff --git a/src/assets/target.svg b/src/assets/target.svg new file mode 100644 index 00000000..000f34c7 --- /dev/null +++ b/src/assets/target.svg @@ -0,0 +1 @@ + \ No newline at end of file From abd0913e9b66cd9f8fc9480d3d0f351950023d8d Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Fri, 10 May 2024 14:06:13 -0700 Subject: [PATCH 6/6] Updated goals chart. --- src/app/(main)/reports/goals/GoalsChart.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/app/(main)/reports/goals/GoalsChart.tsx b/src/app/(main)/reports/goals/GoalsChart.tsx index 910f138c..24760234 100644 --- a/src/app/(main)/reports/goals/GoalsChart.tsx +++ b/src/app/(main)/reports/goals/GoalsChart.tsx @@ -25,13 +25,6 @@ export function GoalsChart({ className }: { className?: string; isLoading?: bool {value}
-
-
- {formatLongNumber(result)} - / {formatLongNumber(goal)} -
-
{((result / goal) * 100).toFixed(2)}%
-
+
+
+ {formatLongNumber(result)} + / {formatLongNumber(goal)} +
+
{((result / goal) * 100).toFixed(2)}%
+
);