Payments Overview Widget - Total Payments Volume chart

[anu-rock]

Description

Create a chart to visualize payments, refunds, and disputes for the given period, and show trends with respect to the selected comparison period.

Acceptance criteria

Tip

Check the design in additional context section below for up-to-date requirements.

• Explore which charting library to use.
• Create the chart component - including the title, tooltip, and TPV figure.
• Optimize for mobile web.

Designs

Dev notes

We may leverage the same charting library as used by WooCommerce Analytics - D3.js:

chartjs.org also looks like a good candidate.

Additional context

• Project - paJDYF-bWn-p2
• Designs - p6riRB-9OY-p2
• Widget breakdown - pepjwh-Jw-p2

[anu-rock]

Results of exploration related to choosing a charts library - pepjwh-Mz-p2. We compared Chart.js and D3.js, and are leaning toward the latter which is already included in WooCommerce core. But some more exploration is required to determine how to adapt D3 for our use case. Until that's sorted, marking this issue as blocked.

cc @mordeth