Skip to content

Feature/form performance chart #207

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 12 commits into
base: feature/200
Choose a base branch
from
Open

Feature/form performance chart #207

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
1c9dca3
initial commit
alaca Apr 21, 2026
91670ca
refactor: match design in figma
alaca Apr 22, 2026
6a9b7b0
refactor: suggestions from copilot
alaca Apr 22, 2026
9fa31ea
feature: form performance test
alaca Apr 22, 2026
c19b87e
Update includes/class-mailchimp-form-performance.php
alaca Apr 22, 2026
d5cda22
feature: add missing helper
alaca Apr 22, 2026
42e1a2f
Merge remote-tracking branch 'origin/feature/form-performance-chart' …
alaca Apr 22, 2026
52b693a
fix: php 7
alaca Apr 22, 2026
7191a8d
refactor: bump php version to 7.4
alaca Apr 28, 2026
9b3479f
refactor: merge shared styles
alaca Apr 28, 2026
db0d569
feature: add Mailchimp_Analytics_Bucketing trait
alaca Apr 28, 2026
329ba94
refactor: use Mailchimp_Analytics_Bucketing trait
alaca Apr 28, 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
310 changes: 197 additions & 113 deletions assets/css/analytics.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -312,24 +312,11 @@ $mq-xs: 600px;
}

// -----------------------------------------------------------------------------
// Subscriber activity section
// Shared analytics chart-card
// -----------------------------------------------------------------------------
.mailchimp-sf-fp,
.mailchimp-sf-sa {

// Body grid — chart column + totals column
&__body {
align-items: stretch;
display: grid;
gap: 32px;
grid-template-columns: minmax(0, 1fr) 320px;
margin-top: 32px;

&[hidden] {
display: none;
}
}

// Chart column
&__chart {
min-width: 0;
}
Expand All @@ -349,7 +336,6 @@ $mq-xs: 600px;
margin: 0 0 16px;
}

// Canvas area (hosts the real canvas + skeleton + overlay + background grid)
&__canvas-wrap {
height: 340px;
position: relative;
Expand All @@ -368,6 +354,199 @@ $mq-xs: 600px;
z-index: 1;
}

&__skeleton-bars {
Comment thread
iamdharmesh marked this conversation as resolved.
align-items: flex-end;
bottom: 42%;
display: none;
gap: 16px;
justify-content: center;
left: 0;
padding: 4px 0 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0;

span {
background: var(--mc-sa-border);
border-radius: 2px;
display: block;
width: 18px;
}

span:nth-child(1) { height: 96px; }
span:nth-child(2) { height: 53px; }
span:nth-child(3) { height: 122px; }
span:nth-child(4) { height: 80px; }
span:nth-child(5) { height: 40px; }
}

&__error-banner {
align-items: center;
background: var(--mc-sa-error-bg);
border: 1px solid var(--mc-sa-error-border);
border-radius: 8px;
display: flex;
gap: 12px;
margin: 4px 0 16px;
padding: 12px 14px;

&[hidden] {
display: none;
}
}

&__error-banner-icon {
align-items: center;
color: var(--mc-sa-error-text);
display: inline-flex;
flex-shrink: 0;
justify-content: center;
line-height: 0;
}

&__error-banner-body {
flex: 1 1 auto;
min-width: 0;
}

&__error-banner-title {
color: var(--mc-sa-error-title);
font-size: 13px;
font-weight: 600;
line-height: 1.3;
margin: 0 0 2px;
}

&__error-banner-message {
color: var(--mc-sa-error-text);
font-size: 13px;
line-height: 1.4;
margin: 0;
}

&__error-banner-action {
flex-shrink: 0;
}
}

// -----------------------------------------------------------------------------
// Form performance — card-specific rules
// -----------------------------------------------------------------------------
.mailchimp-sf-fp {

&__body {
margin-top: 24px;

&[hidden] {
display: none;
}
}

&__chart-heading {
margin-bottom: 8px;
}

// Centered overlay (used for empty / error). Loading state below
// repositions it below the skeleton bars.
&__overlay {
align-items: center;
bottom: 0;
color: #666666;
display: none;
font-size: 14px;
font-weight: 500;
justify-content: center;
left: 0;
padding: 16px;
pointer-events: none;
position: absolute;
right: 0;
text-align: center;
top: 0;
z-index: 2;
}

&.is-loading,
&.is-empty,
&.is-error {

.mailchimp-sf-fp__canvas {
opacity: 0;
}

.mailchimp-sf-fp__canvas-wrap {
background-image:
linear-gradient(to right, var(--mc-sa-skeleton-grid) 1px, transparent 1px),
linear-gradient(to bottom, var(--mc-sa-skeleton-grid) 1px, transparent 1px);
background-position: 0 100%;
background-size: calc(100% / 7) calc(100% / 8);
}
}

&.is-loading,
&.is-empty {

.mailchimp-sf-fp__overlay {
display: flex;
}
}

&.is-loading {

.mailchimp-sf-fp__skeleton-bars {
display: flex;
}

.mailchimp-sf-fp__overlay {
align-items: flex-start;
padding-top: 28px;
top: 60%;
}

.mailchimp-sf-fp__skeleton-bars span,
.mailchimp-sf-fp__overlay {
animation: mailchimp-sf-sa-pulse 1.4s ease-in-out infinite;
}
}

button#mailchimp-sf-fp-error-retry {
background-color: #fff;
border: 1px solid #ccd6dc;

&:hover,
&:focus,
&:active {
background-color: #f6f7f7;
}
}
}

@media screen and (max-width: $mq-xs) {

.mailchimp-sf-fp__canvas-wrap {
height: 240px;
}
}

// -----------------------------------------------------------------------------
// Subscriber activity section
// -----------------------------------------------------------------------------
.mailchimp-sf-sa {

// Body grid — chart column + totals column
&__body {
align-items: stretch;
display: grid;
gap: 32px;
grid-template-columns: minmax(0, 1fr) 320px;
margin-top: 32px;

&[hidden] {
display: none;
}
}

// Totals column
&__totals {
border-left: 1px solid var(--mc-sa-border);
Expand Down Expand Up @@ -474,52 +653,6 @@ $mq-xs: 600px;
padding: 10px 14px;
}

/*
* Skeleton bars — live in the top ~60% of the canvas-wrap so the overlay
* copy below isn't covered. No background grid here; the grid lives on
* canvas-wrap itself so it spans the full chart area, not just the bars.
*/
&__skeleton-bars {
align-items: flex-end;
bottom: 42%;
display: none;
gap: 16px;
justify-content: center;
left: 0;
padding: 4px 0 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0;

span {
background: var(--mc-sa-border);
border-radius: 2px;
display: block;
width: 18px;
}

span:nth-child(1) {
height: 96px;
}

span:nth-child(2) {
height: 53px;
}

span:nth-child(3) {
height: 122px;
}

span:nth-child(4) {
height: 80px;
}

span:nth-child(5) {
height: 40px;
}
}

// Skeleton donut — outlined grey ring, same size as the real donut
&__skeleton-donut {
border: 20px solid var(--mc-sa-border);
Expand Down Expand Up @@ -556,57 +689,6 @@ $mq-xs: 600px;
z-index: 2;
}

// -------------------------------------------------------------------------
// Error banner (shown in place of the chart overlay in the error state).
// -------------------------------------------------------------------------
&__error-banner {
align-items: center;
background: var(--mc-sa-error-bg);
border: 1px solid var(--mc-sa-error-border);
border-radius: 8px;
display: flex;
gap: 12px;
margin: 4px 0 16px;
padding: 12px 14px;

&[hidden] {
display: none;
}
}

&__error-banner-icon {
align-items: center;
color: var(--mc-sa-error-text);
display: inline-flex;
flex-shrink: 0;
justify-content: center;
line-height: 0;
}

&__error-banner-body {
flex: 1 1 auto;
min-width: 0;
}

&__error-banner-title {
color: var(--mc-sa-error-title);
font-size: 13px;
font-weight: 600;
line-height: 1.3;
margin: 0 0 2px;
}

&__error-banner-message {
color: var(--mc-sa-error-text);
font-size: 13px;
line-height: 1.4;
margin: 0;
}

&__error-banner-action {
flex-shrink: 0;
}

// -------------------------------------------------------------------------
// State modifiers: loading / empty / error
// Loading + empty share the same skeleton presentation; error shows the
Expand Down Expand Up @@ -696,6 +778,8 @@ $mq-xs: 600px;

@media (prefers-reduced-motion: reduce) {

.mailchimp-sf-fp.is-loading .mailchimp-sf-fp__skeleton-bars span,
.mailchimp-sf-fp.is-loading .mailchimp-sf-fp__overlay,
.mailchimp-sf-sa.is-loading .mailchimp-sf-sa__skeleton-bars span,
.mailchimp-sf-sa.is-loading .mailchimp-sf-sa__skeleton-donut,
.mailchimp-sf-sa.is-loading .mailchimp-sf-sa__overlay {
Expand Down
Loading