semi donut chart added

package-lock.json

@@ -17,10 +17,13 @@
         "@testing-library/react": "^12.1.2",
         "@testing-library/user-event": "^13.5.0",
         "@themesberg/flowbite": "^1.3.0",
+        "apexcharts": "^3.33.1",
         "date-fns": "^2.28.0",
         "react": "^17.0.2",
+        "react-apexcharts": "^1.3.9",
         "react-dom": "^17.0.2",
         "react-icons": "^4.3.1",
+        "react-input-range": "^1.3.0",
         "react-redux": "^7.2.6",
         "react-scripts": "5.0.0",
         "react-table": "^7.7.0",
@@ -29,6 +32,7 @@
         "redux": "^4.1.2",
         "sass": "^1.45.0",
         "sweetalert2": "^11.3.4",
+        "swiper": "^8.0.6",
         "tw-elements": "^1.0.0-alpha8",
         "use-draggable-scroll": "^0.1.0",
         "web-vitals": "^2.1.2"
@@ -4437,6 +4441,19 @@
         "node": ">= 8"
       }
     },
+    "node_modules/apexcharts": {
+      "version": "3.33.1",
+      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.33.1.tgz",
+      "integrity": "sha512-5aVzrgJefd8EH4w7oRmuOhA3+cxJxQg27cYg3ANVGvPCOB4AY3mVVNtFHRFaIq7bv8ws4GRaA9MWfzoWQw3MPQ==",
+      "dependencies": {
+        "svg.draggable.js": "^2.2.2",
+        "svg.easing.js": "^2.0.0",
+        "svg.filter.js": "^2.0.2",
+        "svg.pathmorphing.js": "^0.1.3",
+        "svg.resize.js": "^1.4.3",
+        "svg.select.js": "^3.0.1"
+      }
+    },
     "node_modules/arg": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.1.tgz",
@@ -4567,6 +4584,11 @@
         "node": ">= 4.5.0"
       }
     },
+    "node_modules/autobind-decorator": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/autobind-decorator/-/autobind-decorator-1.4.3.tgz",
+      "integrity": "sha1-TJb/p3sQYi7eJPEQ9du/VmkUF9E="
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.0",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.0.tgz",
@@ -6462,6 +6484,14 @@
         "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
       }
     },
+    "node_modules/dom7": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/dom7/-/dom7-4.0.4.tgz",
+      "integrity": "sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==",
+      "dependencies": {
+        "ssr-window": "^4.0.0"
+      }
+    },
     "node_modules/domelementtype": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
@@ -13614,6 +13644,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-apexcharts": {
+      "version": "1.3.9",
+      "resolved": "https://registry.npmjs.org/react-apexcharts/-/react-apexcharts-1.3.9.tgz",
+      "integrity": "sha512-KPonT5uQPHOHSVgTNEzpB0HhCkZtoicQYGjR9P+3DRDSgTsC+DM2vDUfo/B2Fn1m+wdgVeDXWL0VJYDc6JD/tw==",
+      "dependencies": {
+        "prop-types": "^15.5.7"
+      },
+      "peerDependencies": {
+        "apexcharts": "^3.18.0",
+        "react": ">=0.13"
+      }
+    },
     "node_modules/react-app-polyfill": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz",
@@ -13773,6 +13815,19 @@
         "react": "*"
       }
     },
+    "node_modules/react-input-range": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/react-input-range/-/react-input-range-1.3.0.tgz",
+      "integrity": "sha1-+W0AFjGrgXQX8eJtj5+WhLSCf1k=",
+      "dependencies": {
+        "autobind-decorator": "^1.3.4",
+        "prop-types": "^15.5.8"
+      },
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -14890,6 +14945,11 @@
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
     },
+    "node_modules/ssr-window": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
+      "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
+    },
     "node_modules/stable": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
@@ -15178,6 +15238,89 @@
       "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
       "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ=="
     },
+    "node_modules/svg.draggable.js": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
+      "integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
+      "dependencies": {
+        "svg.js": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.easing.js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
+      "integrity": "sha1-iqmUawqOJ4V6XEChDrpAkeVpHxI=",
+      "dependencies": {
+        "svg.js": ">=2.3.x"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.filter.js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
+      "integrity": "sha1-kQCOFROJ3ZIwd5/L5uLJo2LRwgM=",
+      "dependencies": {
+        "svg.js": "^2.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.js": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
+      "integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA=="
+    },
+    "node_modules/svg.pathmorphing.js": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
+      "integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
+      "dependencies": {
+        "svg.js": "^2.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.resize.js": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
+      "integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
+      "dependencies": {
+        "svg.js": "^2.6.5",
+        "svg.select.js": "^2.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.resize.js/node_modules/svg.select.js": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
+      "integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
+      "dependencies": {
+        "svg.js": "^2.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.select.js": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
+      "integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
+      "dependencies": {
+        "svg.js": "^2.6.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/svgo": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
@@ -15266,6 +15409,29 @@
         "url": "https://sweetalert2.github.io/#donations"
       }
     },
+    "node_modules/swiper": {
+      "version": "8.0.6",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-8.0.6.tgz",
+      "integrity": "sha512-Ssyu1+FeNATF/G8e84QG+ZUNtUOAZ5vngdgxzczh0oWZPhGUVgkdv+BoePUuaCXLAFXnwVpNjgLIcGnxMdmWPA==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "hasInstallScript": true,
+      "dependencies": {
+        "dom7": "^4.0.4",
+        "ssr-window": "^4.0.2"
+      },
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -20048,6 +20214,19 @@
         "picomatch": "^2.0.4"
       }
     },
+    "apexcharts": {
+      "version": "3.33.1",
+      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.33.1.tgz",
+      "integrity": "sha512-5aVzrgJefd8EH4w7oRmuOhA3+cxJxQg27cYg3ANVGvPCOB4AY3mVVNtFHRFaIq7bv8ws4GRaA9MWfzoWQw3MPQ==",
+      "requires": {
+        "svg.draggable.js": "^2.2.2",
+        "svg.easing.js": "^2.0.0",
+        "svg.filter.js": "^2.0.2",
+        "svg.pathmorphing.js": "^0.1.3",
+        "svg.resize.js": "^1.4.3",
+        "svg.select.js": "^3.0.1"
+      }
+    },
     "arg": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.1.tgz",
@@ -20145,6 +20324,11 @@
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
       "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
     },
+    "autobind-decorator": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/autobind-decorator/-/autobind-decorator-1.4.3.tgz",
+      "integrity": "sha1-TJb/p3sQYi7eJPEQ9du/VmkUF9E="
+    },
     "autoprefixer": {
       "version": "10.4.0",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.0.tgz",
@@ -21591,6 +21775,14 @@
         "entities": "^2.0.0"
       }
     },
+    "dom7": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/dom7/-/dom7-4.0.4.tgz",
+      "integrity": "sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==",
+      "requires": {
+        "ssr-window": "^4.0.0"
+      }
+    },
     "domelementtype": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
@@ -26603,6 +26795,14 @@
         "object-assign": "^4.1.1"
       }
     },
+    "react-apexcharts": {
+      "version": "1.3.9",
+      "resolved": "https://registry.npmjs.org/react-apexcharts/-/react-apexcharts-1.3.9.tgz",
+      "integrity": "sha512-KPonT5uQPHOHSVgTNEzpB0HhCkZtoicQYGjR9P+3DRDSgTsC+DM2vDUfo/B2Fn1m+wdgVeDXWL0VJYDc6JD/tw==",
+      "requires": {
+        "prop-types": "^15.5.7"
+      }
+    },
     "react-app-polyfill": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz",
@@ -26723,6 +26923,15 @@
       "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==",
       "requires": {}
     },
+    "react-input-range": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/react-input-range/-/react-input-range-1.3.0.tgz",
+      "integrity": "sha1-+W0AFjGrgXQX8eJtj5+WhLSCf1k=",
+      "requires": {
+        "autobind-decorator": "^1.3.4",
+        "prop-types": "^15.5.8"
+      }
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -27571,6 +27780,11 @@
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
     },
+    "ssr-window": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
+      "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
+    },
     "stable": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
@@ -27778,6 +27992,70 @@
       "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
       "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ=="
     },
+    "svg.draggable.js": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
+      "integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
+      "requires": {
+        "svg.js": "^2.0.1"
+      }
+    },
+    "svg.easing.js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
+      "integrity": "sha1-iqmUawqOJ4V6XEChDrpAkeVpHxI=",
+      "requires": {
+        "svg.js": ">=2.3.x"
+      }
+    },
+    "svg.filter.js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
+      "integrity": "sha1-kQCOFROJ3ZIwd5/L5uLJo2LRwgM=",
+      "requires": {
+        "svg.js": "^2.2.5"
+      }
+    },
+    "svg.js": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
+      "integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA=="
+    },
+    "svg.pathmorphing.js": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
+      "integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
+      "requires": {
+        "svg.js": "^2.4.0"
+      }
+    },
+    "svg.resize.js": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
+      "integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
+      "requires": {
+        "svg.js": "^2.6.5",
+        "svg.select.js": "^2.1.2"
+      },
+      "dependencies": {
+        "svg.select.js": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
+          "integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
+          "requires": {
+            "svg.js": "^2.2.5"
+          }
+        }
+      }
+    },
+    "svg.select.js": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
+      "integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
+      "requires": {
+        "svg.js": "^2.6.5"
+      }
+    },
     "svgo": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
@@ -27854,6 +28132,15 @@
       "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.3.4.tgz",
       "integrity": "sha512-o7owEtVtpqnB8y3BDCRn2taYb7URcf6RIUm120LjFxt8IHfPIm0UeHuiS3nEp5r9RKm5GlSSJOh/yuapUQcYcQ=="
     },
+    "swiper": {
+      "version": "8.0.6",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-8.0.6.tgz",
+      "integrity": "sha512-Ssyu1+FeNATF/G8e84QG+ZUNtUOAZ5vngdgxzczh0oWZPhGUVgkdv+BoePUuaCXLAFXnwVpNjgLIcGnxMdmWPA==",
+      "requires": {
+        "dom7": "^4.0.4",
+        "ssr-window": "^4.0.2"
+      }
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",

package.json

@@ -12,8 +12,10 @@
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "@themesberg/flowbite": "^1.3.0",
+    "apexcharts": "^3.33.1",
     "date-fns": "^2.28.0",
     "react": "^17.0.2",
+    "react-apexcharts": "^1.3.9",
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",
     "react-input-range": "^1.3.0",

src/App.js

@@ -54,6 +54,8 @@ import Playlist from "./components/Playlist";
 import Folderlists from "./components/Folderlist";
 import CardHolder from "./components/CardHolder";
 import UploadFile from "./components/UploadFile";
+import BarChartApex from "./components/BarChartApex";
+import SemiDonut from "./components/SemiDonut";
 
 // import Digikala from "./components/Digikala/ImageSlider";
 
@@ -115,7 +117,9 @@ function App() {
         {/* <Folderlists /> */}
         {/* <Blogs /> */}
         {/* <CardHolder /> */}
-        <UploadFile />
+        {/* <UploadFile /> */}
+        <BarChartApex />
+        <SemiDonut />
       </div>
     </Provider>
   );

src/components/BarChartApex/index.js

@@ -0,0 +1,76 @@
+import React, { Component } from "react";
+// import ReactApexChart from "react-apexcharts";
+// import ReactApexChart from "apexcharts";
+import Chart from "react-apexcharts";
+
+class BarChartApex extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      options: {
+        chart: {
+          background: "#f4f4f4",
+          foreColor: "#333",
+        },
+        xaxis: {
+          categories: [
+            "New York",
+            "Los Angeles",
+            "Chicago",
+            "Houston",
+            "Philadelphia",
+            "Phoenix",
+            "San Antonio",
+            "San Diego",
+            "Dallas",
+            "San Jose",
+          ],
+        },
+        plotOptions: {
+          bar: {
+            horizontal: false,
+          },
+        },
+        fill: {
+          colors: ["#F44336"],
+        },
+        dataLabels: {
+          enabled: false,
+        },
+
+        title: {
+          text: "Largest US Cities By Population",
+          align: "center",
+          margin: 20,
+          offsetY: 20,
+          style: {
+            fontSize: "25px",
+          },
+        },
+      },
+      series: [
+        {
+          name: "Population",
+          data: [
+            8550405, 3971883, 2720546, 2296224, 1567442, 1563025, 1469845,
+            1394928, 1300092, 1026908,
+          ],
+        },
+      ],
+    };
+  }
+
+  render() {
+    return (
+      <Chart
+        options={this.state.options}
+        series={this.state.series}
+        type="bar"
+        height="450"
+        width="100%"
+      />
+    );
+  }
+}
+
+export default BarChartApex;

src/components/SemiDonut/index.js

@@ -0,0 +1,58 @@
+import React, { Component } from "react";
+// import ReactApexChart from "react-apexcharts";
+// import ReactApexChart from "apexcharts";
+import Chart from "react-apexcharts";
+
+class SemiDonut extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      options: {
+        chart: {
+          type: "donut",
+        },
+        plotOptions: {
+          pie: {
+            startAngle: -90,
+            endAngle: 90,
+            offsetY: 10,
+          },
+        },
+        grid: {
+          padding: {
+            bottom: -80,
+          },
+        },
+        responsive: [
+          {
+            breakpoint: 480,
+            options: {
+              chart: {
+                width: 200,
+              },
+              legend: {
+                position: "bottom",
+              },
+            },
+          },
+        ],
+      },
+
+      series: [44, 44, 44, 44, 44],
+    };
+  }
+
+  render() {
+    return (
+      <Chart
+        options={this.state.options}
+        series={this.state.series}
+        type="donut"
+        height="250"
+        width="100%"
+      />
+    );
+  }
+}
+
+export default SemiDonut;

src/components/UploadFile/index.js

@@ -4,13 +4,13 @@ import file from "./images/file.svg";
 
 const index = () => {
   return (
-    <div className="bg-white w-fit flex flex-col items-center p-10 rounded-lg border-2 border-dashed border-blue-300">
+    <div className="relative bg-white w-fit flex flex-col items-center p-10 rounded-lg border-2 border-dashed border-blue-300">
-      <div className=" cursor-pointer">
+      <div className=" ">
-        <img src={file} className="cursor-pointer relative" />
+        <img src={file} className="" />
         <input
           type="file"
-          className="absolute top-10 opacity-0"
+          className="opacity-0 absolute left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-20 cursor-pointer"
-          style={{ right: "0px" }}
+          style={{ top: "39%" }}
           name=""
         />
       </div>