From 9f43ae67ef8fab7917847f9e4db793983798fee4 Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Fri, 10 May 2024 11:15:23 -0700 Subject: [PATCH] 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