Skip to content

Fetaure: Add Analytics Admin Page, Navigation & Controls #203

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
alaca wants to merge 22 commits into
base: develop
Choose a base branch
from
Open

Fetaure: Add Analytics Admin Page, Navigation & Controls #203

Show file tree
Hide file tree
Changes from 18 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
bb2b53c
initial commit
alaca Mar 20, 2026
788e015
chore: fix eslint
alaca Mar 20, 2026
b2fc3b4
chore: fix eslint
alaca Mar 20, 2026
4cf99c1
chore: formatting
alaca Mar 20, 2026
b907922
feature: add chart.umd.min.js
alaca Mar 24, 2026
583086a
refactor: date handling and format
alaca Mar 24, 2026
49c418c
feature: analytics test
alaca Mar 24, 2026
7e39221
refactor: use proper css class, use include once
alaca Mar 24, 2026
04d6ac0
refactor: implement copilot suggestion
alaca Mar 24, 2026
ed38519
refactor: copilot suggestion
alaca Mar 24, 2026
0410267
refactor: update the styles to look more like in figma - needs more work
alaca Mar 24, 2026
dc88a3f
refactor: update test
alaca Mar 24, 2026
b7d2717
chore: formatting
alaca Mar 24, 2026
ee4b337
refactor: use Mailchimp_List_Subscribe_Form_Blocks class to get list
alaca Mar 24, 2026
5b35917
Revert add submenu implementation.
iamdharmesh Apr 3, 2026
5c48ef9
Update footer text on analytics page.
iamdharmesh Apr 3, 2026
8d1a451
- Overall design improvements
iamdharmesh Apr 3, 2026
328e992
Add datepicker.
iamdharmesh Apr 6, 2026
9e6fa24
Fix set Date
iamdharmesh Apr 6, 2026
09f2559
Apply suggestions from copilot
iamdharmesh Apr 6, 2026
7501fd3
ignore chartjs from eslint.
iamdharmesh Apr 6, 2026
1f3f392
Ignore "uncaught:exception" to prevent test from failing.
iamdharmesh Apr 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 23 additions & 7 deletions assets/css/admin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -788,7 +788,8 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade {

@media screen and (max-width: 782px) {
.mailchimp-sf-header,
.mailchimp-sf-settings-page-hero-wrapper {
.mailchimp-sf-settings-page-hero-wrapper,
.mailchimp-sf-settings-page-header-wrapper {
margin-left: -10px;
}
}
Expand Down Expand Up @@ -967,13 +968,15 @@ a.mailchimp-sf-button.mailchimp-cancel-user-sync-button:hover {
}

/* Settings Page Hero */
.mailchimp-sf-settings-page-hero-wrapper {
.mailchimp-sf-settings-page-hero-wrapper,
.mailchimp-sf-settings-page-header-wrapper {
margin-left: -20px;
background-color: #fff;
border-bottom: 1px solid rgba(36, 28, 21, 0.15);
}

#mailchimp-sf-settings-page .mailchimp-sf-settings-page-hero {
#mailchimp-sf-settings-page .mailchimp-sf-settings-page-hero,
#mailchimp-sf-settings-page .mailchimp-sf-settings-page-header {
display: flex;
flex-direction: row;
align-items: center;
Expand All @@ -985,11 +988,13 @@ a.mailchimp-sf-button.mailchimp-cancel-user-sync-button:hover {
}

.mailchimp-sf-settings-page-hero-title-wrapper,
.mailchimp-sf-settings-page-header-title-wrapper,
.mailchimp-sf-settings-page-hero-content-wrapper {
flex: 1;
}

.mailchimp-sf-settings-page-hero-title {
.mailchimp-sf-settings-page-hero-title,
.mailchimp-sf-settings-page-header-title {
font-family: "Means Web", serif;
font-size: 36px;
line-height: 1.1em;
Expand All @@ -999,6 +1004,10 @@ a.mailchimp-sf-button.mailchimp-cancel-user-sync-button:hover {
letter-spacing: -0.72px;
}

.mailchimp-sf-settings-page-header-title {
margin-bottom: 0px;
}

.mailchimp-sf-settings-page-hero-description,
.mailchimp-sf-settings-list-note {
font-size: 16px;
Expand Down Expand Up @@ -1161,12 +1170,17 @@ body.toplevel_page_mailchimp_sf_options a.mailchimp-sf-button.btn-primary:hover
}

/* Settings Page */
.mailchimp-sf-settings-page {
.mailchimp-sf-settings-page,
.mailchimp-sf-analytics-page {
max-width: 1200px;
margin: 0 auto;
padding: 32px 20px;
}

.mailchimp-sf-analytics-page {
padding: 22px 20px 32px 20px;
}

.mailchimp-sf-settings-list-wrapper {
margin-bottom: 20px;
}
Expand Down Expand Up @@ -1589,12 +1603,14 @@ input:checked + .mailchimp-sf-toggle-slider:before {
}

@media screen and (max-width: 782px) {
#mailchimp-sf-settings-page .mailchimp-sf-settings-page-hero {
#mailchimp-sf-settings-page .mailchimp-sf-settings-page-hero,
#mailchimp-sf-settings-page .mailchimp-sf-settings-page-header {
flex-direction: column;
padding: 32px 20px 32px 30px;
}

.mailchimp-sf-settings-page {
.mailchimp-sf-settings-page,
.mailchimp-sf-analytics-page {
padding: 32px 10px;
}

Expand Down
269 changes: 269 additions & 0 deletions assets/css/analytics.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,269 @@
/**
* Mailchimp Analytics Page Styles
*
* @package Mailchimp
*/

.mailchimp-sf-analytics-filters {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 16px;
margin-bottom: 20px;
}

.mailchimp-sf-analytics-filter-group {
display: flex;
flex-direction: column;
gap: 4px;
}

.mailchimp-sf-analytics-filter-group > label {
font-size: 14px;
font-weight: 400;
color: #1d2327;
}

.mailchimp-sf-analytics-filter-group select {
min-width: 180px;
height: 36px;
padding: 0 8px;
border: 1px solid #8c8f94;
border-radius: 4px;
font-size: 14px;
color: #1d2327;
background-color: #fff;
}

.mailchimp-sf-analytics-filter-group select:focus {
border-color: var(--mailchimp-color-link, #017e89);
box-shadow: 0 0 0 1px var(--mailchimp-color-link, #017e89);
outline: none;
}

/* Date picker trigger */
.mailchimp-sf-date-picker {
position: relative;
}

.mailchimp-sf-date-picker-trigger {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-width: 220px;
height: 40px;
padding: 0 10px;
border: 1px solid #c3ced5;
color: var(--mailchimp-color-text);;
border-radius: 6px;
font-size: 14px;
background-color: #fff;
cursor: pointer;
text-align: left;
transition: all 0.2s;
}

.mailchimp-sf-date-picker-trigger:hover {
border-color: var(--mailchimp-color-link, #017e89);
}

.mailchimp-sf-date-picker-trigger:focus {
border-color: var(--mailchimp-color-link, #017e89);
box-shadow: 0 0 0 1px var(--mailchimp-color-link, #017e89);
outline: none;
}

.mailchimp-sf-date-picker.is-open .mailchimp-sf-date-picker-trigger {
border-color: var(--mailchimp-color-link, #017e89);
box-shadow: 0 0 0 1px var(--mailchimp-color-link, #017e89);
background-color: rgba(1, 126, 137, 0.08);
}

.mailchimp-sf-date-picker-trigger .dashicons {
font-size: 18px;
width: 18px;
height: 18px;
line-height: 18px;
color: #50575e;
}

.mailchimp-sf-date-picker-trigger .indicator-date-picker {
display: flex;
position: absolute;
top: 0;
bottom: 0;
right: 0;
pointer-events: none;
justify-content: center;
padding: 0 8px;
width: 24px;
}

/* Date picker popover */
.mailchimp-sf-date-picker-popover {
display: none;
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 100;
min-width: 480px;
padding: 20px;
background: #fff;
border: 1px solid #dcdcde;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.mailchimp-sf-date-picker-popover.is-open {
display: block;
}

.mailchimp-sf-date-picker-popover-row {
display: flex;
gap: 12px;
margin-bottom: 16px;
}

.mailchimp-sf-date-picker-field {
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}

.mailchimp-sf-date-picker-field label {
font-size: 14px;
font-weight: 400;
color: #4A5565;
}

.mailchimp-sf-date-picker-input-wrap {
position: relative;
width: 100%;
}

.mailchimp-sf-date-picker-field-calendar {
align-items: center;
bottom: 0;
display: flex;
justify-content: center;
padding: 0 6px;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
}

.mailchimp-sf-date-picker-field-calendar svg {
display: block;
fill: #50575e;
height: 18px;
width: 18px;
}

#mailchimp-sf-settings-page .mailchimp-sf-date-picker-field select,
#mailchimp-sf-settings-page .mailchimp-sf-date-picker-field input[type="text"] {
height: 36px;
font-size: 14px;
color: #1d2327;
background-color: #fff;
width: 100%;
}

#mailchimp-sf-settings-page .mailchimp-sf-date-picker-field .mailchimp-sf-date-picker-input-wrap input[type="text"] {
padding-right: 30px;
}

#mailchimp-sf-settings-page .mailchimp-sf-date-picker-field select:focus,
#mailchimp-sf-settings-page .mailchimp-sf-date-picker-field input[type="text"]:focus {
border-color: var(--mailchimp-color-link, #017e89);
box-shadow: 0 0 0 1px var(--mailchimp-color-link, #017e89);
outline: none;
}

/* Popover actions — .mailchimp-sf-button.btn-primary / .btn-secondary.btn-small; pill shape to match design */
.mailchimp-sf-date-picker-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
}


/* Content area */
.mailchimp-sf-analytics-content {
border: 1px solid #D3D0C8;
border-radius: 8px;
width: 100%;
overflow: auto;
padding: 24px;
background: #fff;
min-height: 200px;
margin-bottom: 20px;
box-sizing: border-box;
}

.mailchimp-sf-analytics-placeholder {
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
color: #8c8f94;
font-size: 15px;
}

/* Deep link */
.mailchimp-sf-analytics-deep-link {
margin-top: 16px;
}

.mailchimp-sf-analytics-deep-link a {
display: inline-flex;
align-items: center;
gap: 6px;
}

.mailchimp-sf-analytics-deep-link a:hover {
color: var(--mailchimp-color-text, #1d2327);
}

.mailchimp-sf-analytics-deep-link .dashicons {
font-size: 16px;
width: 16px;
height: 16px;
line-height: 16px;
}

/* Responsive */
@media screen and (max-width: 782px) {
.mailchimp-sf-analytics-filters {
flex-direction: column;
align-items: stretch;
}

.mailchimp-sf-date-picker-popover {
min-width: auto;
width: calc(100vw - 60px);
left: 0;
}

.mailchimp-sf-date-picker-popover-row {
flex-direction: column;
}

.mailchimp-sf-date-picker-trigger {
width: 100%;
min-width: auto;
}

.mailchimp-sf-analytics-filter-group select {
min-width: auto;
width: 100%;
}
}

/* Datepicker */
.datepicker-cell.selected, .datepicker-cell.selected:hover {
background-color: var(--mailchimp-color-link, #017e89);
color: #fff;
}
Loading
Loading