handleRemove(id, index)}>
- {({ name, filter, value, label }) => {
+ {({ name, filter, value }) => {
return (
{id === 'fields' && (
diff --git a/components/pages/reports/insights/InsightsParameters.module.css b/components/pages/reports/insights/InsightsParameters.module.css
index 06b62414..c84f8a9e 100644
--- a/components/pages/reports/insights/InsightsParameters.module.css
+++ b/components/pages/reports/insights/InsightsParameters.module.css
@@ -10,3 +10,8 @@
.op {
font-weight: bold;
}
+
+.popup {
+ margin-top: -10px;
+ margin-left: 30px;
+}
diff --git a/components/pages/reports/retention/RetentionParameters.js b/components/pages/reports/retention/RetentionParameters.js
index 1eee6bf2..d98608ae 100644
--- a/components/pages/reports/retention/RetentionParameters.js
+++ b/components/pages/reports/retention/RetentionParameters.js
@@ -31,7 +31,7 @@ export function RetentionParameters() {
return (
))}
- {rows.map(({ date, visitors }, i) => {
+ {rows.map(({ date, visitors, records }, rowIndex) => {
return (
-
+
{formatDate(`${date} 00:00:00`, 'PP')}
{visitors}
- {days.map((n, day) => {
+ {days.map(day => {
+ if (totalDays - rowIndex < day) {
+ return null;
+ }
+ const percentage = records[day]?.percentage;
return (
-
- {data.find(row => row.date === date && row.day === day)?.percentage.toFixed(2)}
+
+ {percentage ? `${percentage.toFixed(2)}%` : ''}
);
})}
@@ -53,31 +71,8 @@ export function RetentionTable() {
);
})}
-
>
);
}
-function DataTable({ data }) {
- return (
-
-
- {row => row.date}
-
-
- {row => row.day}
-
-
- {row => row.visitors}
-
-
- {row => row.returnVisitors}
-
-
- {row => row.percentage}
-
-
- );
-}
-
export default RetentionTable;
diff --git a/components/pages/reports/retention/RetentionTable.module.css b/components/pages/reports/retention/RetentionTable.module.css
index 79cbbc5f..bfe3ac1c 100644
--- a/components/pages/reports/retention/RetentionTable.module.css
+++ b/components/pages/reports/retention/RetentionTable.module.css
@@ -20,7 +20,7 @@
justify-content: center;
width: 60px;
height: 60px;
- background: var(--blue100);
+ background: var(--blue200);
border-radius: var(--border-radius);
}
@@ -46,3 +46,7 @@
font-size: var(--font-size-sm);
font-weight: 400;
}
+
+.empty {
+ background: var(--blue100);
+}
diff --git a/package.json b/package.json
index 46ad4d2d..9d2de093 100644
--- a/package.json
+++ b/package.json
@@ -94,7 +94,7 @@
"node-fetch": "^3.2.8",
"npm-run-all": "^4.1.5",
"react": "^18.2.0",
- "react-basics": "^0.94.0",
+ "react-basics": "^0.96.0",
"react-beautiful-dnd": "^13.1.0",
"react-dom": "^18.2.0",
"react-error-boundary": "^4.0.4",
diff --git a/yarn.lock b/yarn.lock
index e67cc413..350e483f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7557,10 +7557,10 @@ rc@^1.2.7:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
-react-basics@^0.94.0:
- version "0.94.0"
- resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.94.0.tgz#c15698148b959f40c6b451088f36f5735eb82815"
- integrity sha512-OlUHWrGRctRGEm+yL9iWSC9HRnxZhlm3enP2iCKytVmt7LvaPtsK4RtZ27qp4irNvuzg79aqF+h5IFnG+Vi7WA==
+react-basics@^0.96.0:
+ version "0.96.0"
+ resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.96.0.tgz#e5e72201abdccdda94b952ef605163ca11772d8f"
+ integrity sha512-WNAxP+0xBtUNgEXrL8aW6UQMmD6WoX9My0VW6uq+Q262DOPTU3zPtWl+9vvES4pF3tPJCFvmFAlK/Alw9+XKVQ==
dependencies:
classnames "^2.3.1"
date-fns "^2.29.3"