[Simple Analytics] Performance Summary & Website Form Performance Chart

[iamdharmesh]

Description

Build the Performance Summary KPI section (Form Views, Submissions, Conversion Rate) and the Website Form Performance chart (Views bar + Submissions bar + Conversion Rate line) using Chart.js, powered by REST API/AJAX endpoints.

Technical Context:

• Views/Submissions: Data is stored in a custom analytics table.
• Conversion Rate: (Submissions / Views) * 100
• Data aggregation intervals according to the date range:
  • When date range is 30 days or less: 1 data set per day
  • When the date range is 30 days - 90 days: 1 data set per week
  • When the date range is 90 days - 1 year: 1 data set per month
  • When the date range is 1-3 years: 1 data set per quarter
  • When the date range is 3+ years: 1 data set per year

Implementation Breakdown

1. REST API/AJAX Endpoints

• GET /mailchimp/v1/analytics/overview:
  • Params: list_id, date_from, date_to; Permission: manage_options
  • Fetch views/submissions totals from Mailchimp_Analytics_Data::get_totals()
• GET /mailchimp/v1/analytics/form-performance:
  • Params: list_id, date_from, date_to; Permission: manage_options
  • Aggregate from custom table by interval according to the date range:
    • When date range is 30 days or less: 1 data set per day
    • When the date range is 30 days - 90 days: 1 data set per week
    • When the date range is 90 days - 1 year: 1 data set per month
    • When the date range is 1-3 years: 1 data set per quarter
    • When the date range is 3+ years: 1 data set per year

2. KPI UI

• Render three cards: Form Views, Form Submissions, Conversion Rate
• Conversion rate as percentage with 2 decimal places
• Disclaimer text below: "This data reflects activity captured by your WordPress site and may differ from totals shown in your Mailchimp account, which can include double-opt in limitations and/or subscribers from other sources." (copy to be reviewed before final approval)
• JS: fetch data on load and filter change, show loading state

3. Form Performance Chart

• Chart.js chart
• Dataset 1: Views (Bar); Dataset 2: Submissions (Bar)
• Dataset 3: Conversion Rate (Line
• Tooltip showing all three values per data point
• "Totals for the selected date range" summary beside the chart
• Handle edge cases: no data, single data point

4. Error & Empty States

• No data: KPIs show "0"; charts show "No data available for the selected date range" (copy to be reviewed before final approval)
• API unavailable/error: Website form performance chart shows error (copy to be reviewed before final approval); KPI "Form Views, Form Submissions, Conversion Rate" shows "N/A"; other sections unaffected
• No connected forms: Message with link to Form Settings
• Loading states: Skeleton/spinner per section; sections load independently

Acceptance Criteria

• KPI cards display correct values matching DB
• Chart renders correctly with bars for views/submissions and line for conversion rate
• Data aggregation matches date range intervals
• Tooltips show all three metrics per data point
• Totals summary is accurate
• All data refreshes on filter change with loading state
• Disclaimer is visible below KPIs