Merge pull request #3 from DercilioFontes/add-bar-chart

Add bar chart

package.json

@@ -10,8 +10,7 @@
     "dev": "webpack serve --mode development --port 3100 --host 0.0.0.0 --progress ",
     "clear": "rm -rf assets",
     "build:webpack": "NODE_ENV=production  webpack --mode production --progress && cp -R public/* ./assets/ ",
-    "build": "npm run clear && npm run build:webpack",
-    "publish:gh-pages": "node gh-pages.js"
+    "build": "npm run clear && npm run build:webpack"
   },
   "keywords": [
     "react",
@@ -31,23 +30,23 @@
     "url": "[email protected]:DercilioFontes/stats.git"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.7",
+    "@babel/runtime": "^7.20.13",
     "@rsuite/icons": "^1.0.2",
-    "apexcharts": "^3.36.3",
+    "apexcharts": "^3.37.0",
     "classnames": "^2.3.2",
     "react": "^18.2.0",
     "react-apexcharts": "^1.4.0",
     "react-csv": "^2.2.2",
     "react-dom": "^18.2.0",
     "react-icons": "^4.7.1",
-    "react-intl": "^6.2.5",
-    "react-router": "6.6.1",
-    "react-router-dom": "^6.6.1",
-    "rsuite": "5.23.3"
+    "react-intl": "^6.2.8",
+    "react-router": "^6.8.1",
+    "react-router-dom": "^6.8.1",
+    "rsuite": "^5.27.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.20.7",
-    "@babel/core": "^7.20.7",
+    "@babel/core": "^7.20.12",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-export-default-from": "^7.18.10",
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
@@ -57,35 +56,33 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@svgr/webpack": "^6.5.1",
-    "@types/jest": "^29.2.4",
-    "@types/node": "^18.11.18",
-    "@types/react": "^18.0.26",
+    "@types/jest": "^29.4.0",
+    "@types/node": "^18.14.0",
+    "@types/react": "^18.0.28",
     "@types/react-csv": "^1.1.3",
-    "@types/react-dom": "^18.0.10",
-    "@typescript-eslint/eslint-plugin": "^5.47.1",
-    "@typescript-eslint/parser": "^5.47.1",
+    "@types/react-dom": "^18.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.52.0",
+    "@typescript-eslint/parser": "^5.52.0",
     "autoprefixer": "^10.4.13",
-    "babel-loader": "^9.1.0",
-    "babel-plugin-module-resolver": "^4.1.0",
+    "babel-loader": "^9.1.2",
+    "babel-plugin-module-resolver": "^5.0.0",
     "conventional-changelog-cli": "^2.2.2",
     "css-loader": "^6.7.3",
-    "cssnano": "^5.1.14",
-    "eslint": "^8.30.0",
-    "eslint-config-prettier": "^8.5.0",
+    "cssnano": "^5.1.15",
+    "eslint": "^8.34.0",
+    "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-babel": "^5.3.1",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "file-loader": "^6.2.0",
-    "gh-pages": "^4.0.0",
     "html-webpack-plugin": "^5.5.0",
-    "husky": "^8.0.2",
     "less": "^4.1.3",
     "less-loader": "^11.1.0",
     "mini-css-extract-plugin": "^2.7.2",
-    "postcss": "^8.4.20",
-    "prettier": "^2.8.1",
-    "typescript": "^4.9.4",
+    "postcss": "^8.4.21",
+    "prettier": "^2.8.4",
+    "typescript": "^4.9.5",
     "url-loader": "^4.1.1",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.1",

src/App.tsx

@@ -6,6 +6,7 @@ import enUS from 'rsuite/locales/en_US';
 import locales from './locales';
 import Frame from './components/Frame';
 import HistogramPage from './pages/histogram';
+import BarChartPage from './pages/bar-chart';
 import Error404Page from './pages/404';
 import { appNavs } from './config';
 import Info from './pages/info';
@@ -18,6 +19,7 @@ const App = () => {
           <Route path="/" element={<Frame navs={appNavs} />}>
             <Route index element={<Navigate to="/histogram" />} />
             <Route path="histogram" element={<HistogramPage />} />
+            <Route path="bar-chart" element={<BarChartPage />} />
             <Route path="info" element={<Info />} />
           </Route>
           <Route path="*" element={<Error404Page />} />

src/components/Charts/BarChart.tsx

@@ -65,7 +65,19 @@ const defaultOptions: ApexCharts.ApexOptions = {
       padding: 4
     }
   },
-  colors: ['#206bc4', '#79a6dc', '#bfe399'],
+  colors: [
+    '#206bc4',
+    '#52e7a7',
+    '#ffbc4c',
+    '#ff677a',
+    '#8d78d7',
+    '#708590',
+    '#55b4aa',
+    '#d945ec',
+    '#79a6dc',
+    '#bfe399',
+    '#61a5e7'
+  ],
   legend: {
     show: false
   }

src/components/InfoPopover.tsx

@@ -11,10 +11,8 @@ const InfoPopover = ({ title, content }: { title: string; content: ReactNode })
       controlId={`control-id-right`}
       speaker={<Popover title={title}>{content}</Popover>}
     >
-      <Button appearance="subtle" style={{ padding: 1 }}>
-        <sup>
-          <Icon style={{ color: 'var(--rs-btn-primary-bg)', fontSize: 18 }} as={MdOutlineInfo} />
-        </sup>
+      <Button appearance="subtle" style={{ padding: 2, verticalAlign: 'middle' }}>
+        <Icon style={{ color: 'var(--rs-btn-primary-bg)', fontSize: 18 }} as={MdOutlineInfo} />
       </Button>
     </Whisper>
   );

src/components/Textarea.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Input } from 'rsuite';
 
 const Textarea = React.forwardRef<HTMLInputElement, any>((props, ref) => (
-  <Input style={{ width: 200 }} {...props} as="textarea" ref={ref} />
+  <Input style={{ width: 200, height: 200 }} {...props} as="textarea" ref={ref} />
 ));
 
 export default Textarea;

src/config.tsx

@@ -1,14 +1,22 @@
 import React from 'react';
 import { Icon } from '@rsuite/icons';
-import { MdBarChart, MdInfoOutline } from 'react-icons/md';
+import { MdInfoOutline } from 'react-icons/md';
+import { IoBarChartSharp } from 'react-icons/io5';
+import { AiOutlineBarChart } from 'react-icons/ai';
 
 export const appNavs = [
   {
     eventKey: 'histogram',
-    icon: <Icon as={MdBarChart} onClick={() => undefined} />,
+    icon: <Icon as={IoBarChartSharp} onClick={() => undefined} />,
     title: 'Histogram',
     to: '/histogram'
   },
+  {
+    eventKey: 'bar-chart',
+    icon: <Icon as={AiOutlineBarChart} onClick={() => undefined} />,
+    title: 'Bar Chart',
+    to: '/bar-chart'
+  },
   {
     eventKey: 'info',
     icon: <Icon as={MdInfoOutline} onClick={() => undefined} />,