Refactor: Update goal progress widget styles (#7591)

impress-org · Oct 28, 2024 · 78417d7 · 78417d7
1 parent f799ebc
commit 78417d7
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 38 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -123,7 +123,6 @@
         "react-apexcharts": "^1.4.1",
         "react-aria-components": "^1.0.0-alpha.6",
         "react-beautiful-dnd": "^13.1.1",
-        "react-circular-progressbar": "^2.1.0",
         "react-csv": "^2.0.1",
         "react-currency-input-field": "^3.6.10",
         "react-datepicker": "^4.16.0",

diff --git a/...Campaigns/resources/admin/components/CampaignDetailsPage/Components/GoalProgressChart.tsx b/...Campaigns/resources/admin/components/CampaignDetailsPage/Components/GoalProgressChart.tsx
@@ -1,38 +1,91 @@
 import {__} from '@wordpress/i18n';
-import {
-    CircularProgressbarWithChildren,
-    buildStyles
-} from "react-circular-progressbar";
-import 'react-circular-progressbar/dist/styles.css';
+import Chart from "react-apexcharts";
+import React from "react";
+
+const currency = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+})
 
 const GoalProgressChart = ({ value, goal }) => {
     const percentage: number = Math.abs((value / goal) * 100);
     return (
         <>
             <div style={{
-                display: 'grid',
-                gridTemplateColumns: '2fr 3fr',
+                display: 'flex',
                 gap: '20px',
                 alignItems: 'center',
             }}>
                 <div style={{
-                    padding: '10px',
+                    /**
+                     * The size of the chart is relative to the container.
+                     * To get close to the design,
+                     *  the size is balances at flex 3/2
+                     *  and the margins use negative values to control padding
+                     */
+                    flex: 3,
+                    margin: '0 -50px',
                 }}>
-                    <CircularProgressbarWithChildren
-                        value={percentage}
-                        styles={buildStyles({
-                            strokeLinecap: "butt",
-                            pathColor: "#459948",
-                        })}
-                    >
-                        {percentage}%
-                        <small>{value}</small>
-                    </CircularProgressbarWithChildren>
+                    <Chart
+                        options={{
+                            chart: {
+                                height: 1024,
+                                type: 'radialBar',
+                            },
+                            plotOptions: {
+                                radialBar: {
+                                    hollow: {
+                                        margin: 15,
+                                        size: "60%",
+                                    },
+                                    dataLabels: {
+                                        /**
+                                         * The "name" is the top label, here it is the value/amount
+                                         * The "value" is the percent progress
+                                         *
+                                         * Note: These are visually inverted (using offsetY) to match the design
+                                         */
+                                        name: {
+                                            offsetY: 20,
+                                            show: true,
+                                            color: "#4B5563",
+                                            fontSize: "12px"
+                                        },
+                                        value: {
+                                            offsetY: -20,
+                                            color: "#060C1A",
+                                            fontSize: "24px",
+                                            show: true
+                                        }
+                                    }
+                                }
+                            },
+                            colors: ['#459948'],
+                            labels: [currency.format(value)],
+                        }}
+                        series={[percentage]}
+                        type="radialBar"
+                    />
                 </div>
-                <div>
-                    <div>{__('Goal')}</div>
-                    <div>{goal}</div>
-                    <div>{__('Amount raised')}</div>
+                <div style={{ flex: 2 }}>
+                    <div style={{
+                        fontSize: '14px',
+                        fontWeight: 400,
+                        lineHeight: '20px',
+                    }}>
+                        {__('Goal')}
+                    </div>
+                    <div style={{
+                        color: '#2D802F',
+                        fontSize: '18px',
+                        fontWeight: 600,
+                        lineHeight: '20px',
+                    }}>{currency.format(goal)}</div>
+                    <div style={{
+                        fontSize: '12px',
+                        fontWeight: 400,
+                        lineHeight: '18px',
+                    }}>{__('Amount raised')}</div>
                 </div>
             </div>
         </>