diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 4020bcb..0c61d2e 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -1,14 +1,14 @@ module.exports = { env: { browser: true, es2020: true }, extends: [ - 'eslint:recommended', - 'plugin:@typescript-eslint/recommended', - 'plugin:react-hooks/recommended', + "eslint:recommended", + "plugin:@typescript-eslint/recommended", + "plugin:react-hooks/recommended" ], - parser: '@typescript-eslint/parser', - parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, - plugins: ['react-refresh'], + parser: "@typescript-eslint/parser", + parserOptions: { ecmaVersion: "latest", sourceType: "module" }, + plugins: ["react-refresh"], rules: { - 'react-refresh/only-export-components': 'warn', - }, -} + "react-refresh/only-export-components": "warn" + } +}; diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 0000000..2bff41d --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1,10 @@ +{ + "printWidth": 80, + "tabWidth": 2, + "useTabs": false, + "singleQuote": false, + "trailingComma": "none", + "bracketSpacing": true, + "arrowParens": "avoid", + "endOfLine": "auto" +} diff --git a/package-lock.json b/package-lock.json index f87fd49..3d17539 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,6 +28,7 @@ "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.3.4", "postcss": "^8.4.23", + "prettier": "2.8.8", "tailwindcss": "^3.3.2", "typescript": "^5.0.2", "vite": "^4.3.2" @@ -2806,6 +2807,21 @@ "node": ">= 0.8.0" } }, + "node_modules/prettier": { + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "dev": true, + "bin": { + "prettier": "bin-prettier.js" + }, + "engines": { + "node": ">=10.13.0" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/proxy-from-env": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", diff --git a/package.json b/package.json index bd122d0..f5cd738 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,8 @@ "dev": "vite", "build": "tsc && vite build", "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0", - "preview": "vite preview" + "preview": "vite preview", + "format": "npx prettier --write ." }, "dependencies": { "@tanstack/react-query": "^4.29.7", @@ -30,6 +31,7 @@ "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.3.4", "postcss": "^8.4.23", + "prettier": "2.8.8", "tailwindcss": "^3.3.2", "typescript": "^5.0.2", "vite": "^4.3.2" diff --git a/postcss.config.js b/postcss.config.js index 2e7af2b..ba80730 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,6 +1,6 @@ export default { plugins: { tailwindcss: {}, - autoprefixer: {}, - }, -} + autoprefixer: {} + } +}; diff --git a/src/api/index.ts b/src/api/index.ts index 87051ff..2ecaeeb 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -1,39 +1,43 @@ -import axios from "axios" -import { SentryDataTypes, SentryDataPeriods, ChartDataResponse } from "../types" -import { formatSentryURL } from "../utils" -import { config } from "../config" +import axios from "axios"; +import { + SentryDataTypes, + SentryDataPeriods, + ChartDataResponse +} from "../types"; +import { formatSentryURL } from "../utils"; +import { config } from "../config"; export const fetchSentryData = async ( period: SentryDataPeriods, type: SentryDataTypes ) => { try { - const url = formatSentryURL(period, type) - const response = await axios.get(url) + const url = formatSentryURL(period, type); + const response = await axios.get(url); - return response.data + return response.data; } catch (error) { - console.error(error) - return {} + console.error(error); + return {}; } -} +}; export const fetchSentryEvents = async (): Promise => { try { - const response = await axios.get(`${config.apiUri}/stats/sentry/events`) - return response.data + const response = await axios.get(`${config.apiUri}/stats/sentry/events`); + return response.data; } catch (error) { - return {} + return {}; } -} +}; export const getOpenBugsCount = async (): Promise<{ count: number }> => { try { - const url = `${config.apiUri}/stats/bugs/open` - const res = await axios.get(url) - return res.data + const url = `${config.apiUri}/stats/bugs/open`; + const res = await axios.get(url); + return res.data; } catch (error) { - console.log(error) - return { count: 0 } + console.log(error); + return { count: 0 }; } -} +}; diff --git a/src/components/BarChart.tsx b/src/components/BarChart.tsx index 9cbf770..4c169f2 100644 --- a/src/components/BarChart.tsx +++ b/src/components/BarChart.tsx @@ -1,32 +1,32 @@ -import ReactEcharts from "echarts-for-react" -import { InfoIcon } from "../icons" -import Tooltip from "./Tooltip" -import { useState } from "react" -import { CHART_TITLES } from "../constants" -import TotalCount from "./TotalCount" -import TimeRangeButton from "./TimeRangeButton" -import { ChartTooltipContent } from "./ChartTooltipContent" -import { barChartOption } from "../utils" -import { BarData, GraphData } from "../types" +import ReactEcharts from "echarts-for-react"; +import { InfoIcon } from "../icons"; +import Tooltip from "./Tooltip"; +import { useState } from "react"; +import { CHART_TITLES } from "../constants"; +import TotalCount from "./TotalCount"; +import TimeRangeButton from "./TimeRangeButton"; +import { ChartTooltipContent } from "./ChartTooltipContent"; +import { barChartOption } from "../utils"; +import { BarData, GraphData } from "../types"; interface Props { - graphData: GraphData + graphData: GraphData; } const BarChart = ({ graphData }: Props) => { - const [tab, setTab] = useState(7) + const [tab, setTab] = useState(7); - let data: BarData[] = Object.keys(graphData.success).map((key) => ({ + let data: BarData[] = Object.keys(graphData.success).map(key => ({ day: key, positive: graphData.success[key], - negative: graphData.failure[key], - })) + negative: graphData.failure[key] + })); if (tab === 7) { - data = data.slice(7, 14) + data = data.slice(7, 14); } - const option = barChartOption(data) + const option = barChartOption(data); return (
@@ -66,7 +66,7 @@ const BarChart = ({ graphData }: Props) => {
- ) -} + ); +}; -export default BarChart +export default BarChart; diff --git a/src/components/ChartSkeleton.tsx b/src/components/ChartSkeleton.tsx index cddb949..e86ec9f 100644 --- a/src/components/ChartSkeleton.tsx +++ b/src/components/ChartSkeleton.tsx @@ -17,8 +17,8 @@ const ChartSkeleton = () => {
- ) -} + ); +}; const ChaartSkeletonWrapper = () => { return ( @@ -26,7 +26,7 @@ const ChaartSkeletonWrapper = () => { - ) -} + ); +}; -export default ChaartSkeletonWrapper +export default ChaartSkeletonWrapper; diff --git a/src/components/ChartTooltipContent.tsx b/src/components/ChartTooltipContent.tsx index 926099f..a90075a 100644 --- a/src/components/ChartTooltipContent.tsx +++ b/src/components/ChartTooltipContent.tsx @@ -1,9 +1,9 @@ -import { METRICS_TOOLTIP_INFO } from "../constants" -import { ChartKey } from "../types" -import Square from "./Square" +import { METRICS_TOOLTIP_INFO } from "../constants"; +import { ChartKey } from "../types"; +import Square from "./Square"; interface Props { - title: ChartKey + title: ChartKey; } export const ChartTooltipContent = ({ title }: Props) => { @@ -25,5 +25,5 @@ export const ChartTooltipContent = ({ title }: Props) => {

{METRICS_TOOLTIP_INFO?.[title]?.extraInfo}

- ) -} + ); +}; diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx index 3e0e9a7..48b1283 100644 --- a/src/components/SideBar.tsx +++ b/src/components/SideBar.tsx @@ -1,19 +1,19 @@ -import { NavLink, Link } from "react-router-dom" -import logo from "../assets/fil-plus.svg" -import { CubeIcon, UserIcon } from "../icons" +import { NavLink, Link } from "react-router-dom"; +import logo from "../assets/fil-plus.svg"; +import { CubeIcon, UserIcon } from "../icons"; const navigationItems = [ { name: "Blockchain", to: "", - svg: , + svg: }, { name: "User", to: "user", - svg: , - }, -] + svg: + } +]; const SideBar = () => { return ( @@ -27,7 +27,7 @@ const SideBar = () => {
- {navigationItems.map((item) => { + {navigationItems.map(item => { return ( { {item.svg} {item.name} - ) + ); })}
@@ -51,7 +51,7 @@ const SideBar = () => { About Fil+ Metrics - ) -} + ); +}; -export default SideBar +export default SideBar; diff --git a/src/components/Square.tsx b/src/components/Square.tsx index 1422b63..66e6037 100644 --- a/src/components/Square.tsx +++ b/src/components/Square.tsx @@ -1,9 +1,9 @@ interface Props { - bgColor: string + bgColor: string; } const Square = ({ bgColor }: Props) => { - return -} + return ; +}; -export default Square +export default Square; diff --git a/src/components/TimeRangeButton.tsx b/src/components/TimeRangeButton.tsx index 323585d..e74343c 100644 --- a/src/components/TimeRangeButton.tsx +++ b/src/components/TimeRangeButton.tsx @@ -1,7 +1,7 @@ interface Props { - tab: number - setTab: (value: React.SetStateAction) => void - changeTab: number + tab: number; + setTab: (value: React.SetStateAction) => void; + changeTab: number; } const TimeRangeButton = ({ tab, setTab, changeTab }: Props) => { @@ -15,7 +15,7 @@ const TimeRangeButton = ({ tab, setTab, changeTab }: Props) => { > {changeTab + "D"} - ) -} + ); +}; -export default TimeRangeButton +export default TimeRangeButton; diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx index 1d2c7b8..b89fa72 100644 --- a/src/components/Tooltip.tsx +++ b/src/components/Tooltip.tsx @@ -1,9 +1,9 @@ const Tooltip = ({ comp, - children, + children }: { - comp: string | React.ReactNode - children: React.ReactNode + comp: string | React.ReactNode; + children: React.ReactNode; }) => { return (
@@ -12,7 +12,7 @@ const Tooltip = ({
{comp}
- ) -} + ); +}; -export default Tooltip +export default Tooltip; diff --git a/src/components/TotalCount.tsx b/src/components/TotalCount.tsx index 5eef2e5..ee2fc41 100644 --- a/src/components/TotalCount.tsx +++ b/src/components/TotalCount.tsx @@ -1,10 +1,10 @@ -import { calculateTotalLastNDays } from "../utils" -import Square from "./Square" +import { calculateTotalLastNDays } from "../utils"; +import Square from "./Square"; interface Props { - data: Record - n: number - bgColor: string + data: Record; + n: number; + bgColor: string; } const TotalCount = ({ data, n, bgColor }: Props) => { @@ -13,7 +13,7 @@ const TotalCount = ({ data, n, bgColor }: Props) => { Total count : {calculateTotalLastNDays(data, n)} - ) -} + ); +}; -export default TotalCount +export default TotalCount; diff --git a/src/config.ts b/src/config.ts index 4996eb0..c3603c8 100644 --- a/src/config.ts +++ b/src/config.ts @@ -1,3 +1,3 @@ export const config = { - apiUri: import.meta.env.VITE_API_URI || "http://localhost:4000", -} + apiUri: import.meta.env.VITE_API_URI || "http://localhost:4000" +}; diff --git a/src/constants.ts b/src/constants.ts index 9e9753c..16c6f7d 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -1,69 +1,69 @@ -import { ChartKey } from "./types" +import { ChartKey } from "./types"; export const METRICS_TOOLTIP_INFO = { propose: { success: { title: "Number of successful request proposals:", - desc: "Number of times a user clicks the approve request button, and a transaction successfully posts on the chain.", + desc: "Number of times a user clicks the approve request button, and a transaction successfully posts on the chain." }, failed: { title: "Number of unsuccessful request proposals:", - desc: "Instances where a user sends a request proposed message from the front end, but a transaction does not post on the chain.", + desc: "Instances where a user sends a request proposed message from the front end, but a transaction does not post on the chain." }, extraInfo: - "- Request proposal indicates that its the first notary to sign an allocation.", + "- Request proposal indicates that its the first notary to sign an allocation." }, approve: { success: { title: "Number of successful request proposals:", - desc: "Number of times a user clicks the approve request button, and a transaction successfully posts on the chain.", + desc: "Number of times a user clicks the approve request button, and a transaction successfully posts on the chain." }, failed: { title: "Number of unsuccessful request proposals:", - desc: "Instances where a user sends a request approved message from the front end, but a transaction does not post on the chain.", + desc: "Instances where a user sends a request approved message from the front end, but a transaction does not post on the chain." }, extraInfo: - "- Request approved indicates that its the first notary to sign an allocation.", + "- Request approved indicates that its the first notary to sign an allocation." }, ledgerLogin: { success: { title: "Number of Ledger Logins:", - desc: "Number of times users successfully link their ledger to the dashboard.", + desc: "Number of times users successfully link their ledger to the dashboard." }, failed: { title: "Number of unsuccessful Ledger Logins:", - desc: "Number of times users fail to link their ledger to the dashboard.", + desc: "Number of times users fail to link their ledger to the dashboard." }, - extraInfo: "", + extraInfo: "" }, githubLogin: { success: { title: "Number of GitHub Logins:", - desc: "Number of times users successfully initiate the GitHub login process and return to the dashboard.", + desc: "Number of times users successfully initiate the GitHub login process and return to the dashboard." }, failed: { title: "Number of unsuccessful GitHub Logins:", - desc: "Number of times users fail to link their github account to the dashboard.", + desc: "Number of times users fail to link their github account to the dashboard." }, - extraInfo: "", + extraInfo: "" }, githubToken: { success: { title: "Number of GitHub Tokens Loaded:", - desc: "Number of instances where users successfully login using a GitHub auth token, such as when a user logs in previously and re-logs into GitHub without needing to re-authenticate manually.", + desc: "Number of instances where users successfully login using a GitHub auth token, such as when a user logs in previously and re-logs into GitHub without needing to re-authenticate manually." }, failed: { title: "Number of unsuccessful GitHub Tokens Loaded:", - desc: "Number of instances fail to load github token", + desc: "Number of instances fail to load github token" }, - extraInfo: "", - }, -} + extraInfo: "" + } +}; export const CHART_TITLES: Record = { [ChartKey.Propose]: "Proposal", [ChartKey.Approve]: "Approval", [ChartKey.LedgerLogin]: "Ledger Login", [ChartKey.GithubLogin]: "Github Login", - [ChartKey.GithubToken]: "Github Token Load", -} + [ChartKey.GithubToken]: "Github Token Load" +}; diff --git a/src/icons/index.tsx b/src/icons/index.tsx index 400d892..0f05d3d 100644 --- a/src/icons/index.tsx +++ b/src/icons/index.tsx @@ -7,7 +7,7 @@ export const CubeIcon = () => ( > -) +); export const UserIcon = () => ( ( clipRule="evenodd" /> -) +); export const BugIcon = () => ( ( d="M12 12.75c1.148 0 2.278.08 3.383.237 1.037.146 1.866.966 1.866 2.013 0 3.728-2.35 6.75-5.25 6.75S6.75 18.728 6.75 15c0-1.046.83-1.867 1.866-2.013A24.204 24.204 0 0112 12.75zm0 0c2.883 0 5.647.508 8.207 1.44a23.91 23.91 0 01-1.152 6.06M12 12.75c-2.883 0-5.647.508-8.208 1.44.125 2.104.52 4.136 1.153 6.06M12 12.75a2.25 2.25 0 002.248-2.354M12 12.75a2.25 2.25 0 01-2.248-2.354M12 8.25c.995 0 1.971-.08 2.922-.236.403-.066.74-.358.795-.762a3.778 3.778 0 00-.399-2.25M12 8.25c-.995 0-1.97-.08-2.922-.236-.402-.066-.74-.358-.795-.762a3.734 3.734 0 01.4-2.253M12 8.25a2.25 2.25 0 00-2.248 2.146M12 8.25a2.25 2.25 0 012.248 2.146M8.683 5a6.032 6.032 0 01-1.155-1.002c.07-.63.27-1.222.574-1.747m.581 2.749A3.75 3.75 0 0115.318 5m0 0c.427-.283.815-.62 1.155-.999a4.471 4.471 0 00-.575-1.752M4.921 6a24.048 24.048 0 00-.392 3.314c1.668.546 3.416.914 5.223 1.082M19.08 6c.205 1.08.337 2.187.392 3.314a23.882 23.882 0 01-5.223 1.082" /> -) +); export const InfoIcon = ({ style }: { style?: string }) => ( ( d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" /> -) +); diff --git a/src/main.tsx b/src/main.tsx index ee57f73..42b0ed9 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,11 +1,11 @@ -import React from "react" -import ReactDOM from "react-dom/client" -import { RouterProvider } from "react-router-dom" -import "./index.css" -import { router } from "./routes/Router" -import { QueryClient, QueryClientProvider } from "@tanstack/react-query" +import React from "react"; +import ReactDOM from "react-dom/client"; +import { RouterProvider } from "react-router-dom"; +import "./index.css"; +import { router } from "./routes/Router"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; -const queryClient = new QueryClient() +const queryClient = new QueryClient(); ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( @@ -13,4 +13,4 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( -) +); diff --git a/src/routes/About.tsx b/src/routes/About.tsx index 4d99cb7..2c353d8 100644 --- a/src/routes/About.tsx +++ b/src/routes/About.tsx @@ -1,5 +1,5 @@ const About = () => { - return
About Page for filplus metrics
-} + return
About Page for filplus metrics
; +}; -export default About +export default About; diff --git a/src/routes/Blockchain.tsx b/src/routes/Blockchain.tsx index da464c8..b1254a7 100644 --- a/src/routes/Blockchain.tsx +++ b/src/routes/Blockchain.tsx @@ -1,50 +1,50 @@ -import BarChart from "../components/BarChart" -import { fetchSentryEvents } from "../api" -import { useQuery } from "@tanstack/react-query" -import ChaartSkeletonWrapper from "../components/ChartSkeleton" -import { GraphData, ChartKey } from "../types" +import BarChart from "../components/BarChart"; +import { fetchSentryEvents } from "../api"; +import { useQuery } from "@tanstack/react-query"; +import ChaartSkeletonWrapper from "../components/ChartSkeleton"; +import { GraphData, ChartKey } from "../types"; const Blockchain = () => { const chartData = useQuery({ queryKey: ["chart"], - queryFn: fetchSentryEvents, - }) + queryFn: fetchSentryEvents + }); - if (chartData.isLoading) return + if (chartData.isLoading) return ; - const response = chartData.data + const response = chartData.data; - let blockchainData: GraphData[] = [] + let blockchainData: GraphData[] = []; if (response) { const { "Request Approved": requestApproved, "Approval Failed": approvalFailed, "Request Proposed": requestProposed, - "Proposal Failed": proposalFailed, - } = response + "Proposal Failed": proposalFailed + } = response; blockchainData = [ { title: ChartKey.Propose, success: requestProposed, - failure: proposalFailed, + failure: proposalFailed }, { title: ChartKey.Approve, success: requestApproved, - failure: approvalFailed, - }, - ] + failure: approvalFailed + } + ]; } return (
- {blockchainData.map((item) => ( + {blockchainData.map(item => ( ))}
- ) -} + ); +}; -export default Blockchain +export default Blockchain; diff --git a/src/routes/Root.tsx b/src/routes/Root.tsx index 8e26766..3a95de4 100644 --- a/src/routes/Root.tsx +++ b/src/routes/Root.tsx @@ -1,14 +1,14 @@ -import { Outlet } from "react-router-dom" -import { BugIcon } from "../icons" -import { useQuery } from "@tanstack/react-query" -import { getOpenBugsCount } from "../api" -import SideBar from "../components/SideBar" +import { Outlet } from "react-router-dom"; +import { BugIcon } from "../icons"; +import { useQuery } from "@tanstack/react-query"; +import { getOpenBugsCount } from "../api"; +import SideBar from "../components/SideBar"; function Root() { const bugsQuery = useQuery({ queryKey: ["bugs"], - queryFn: getOpenBugsCount, - }) + queryFn: getOpenBugsCount + }); return (
@@ -31,7 +31,7 @@ function Root() {
- ) + ); } -export default Root +export default Root; diff --git a/src/routes/Router.tsx b/src/routes/Router.tsx index e86d1d1..ea03377 100644 --- a/src/routes/Router.tsx +++ b/src/routes/Router.tsx @@ -1,8 +1,8 @@ -import { createBrowserRouter } from "react-router-dom" -import Root from "./Root" -import Blockchain from "./Blockchain" -import User from "./User" -import About from "./About" +import { createBrowserRouter } from "react-router-dom"; +import Root from "./Root"; +import Blockchain from "./Blockchain"; +import User from "./User"; +import About from "./About"; export const router = createBrowserRouter([ { @@ -11,16 +11,16 @@ export const router = createBrowserRouter([ children: [ { element: , - index: true, + index: true }, { path: "user", - element: , - }, - ], + element: + } + ] }, { path: "/about", - element: , - }, -]) + element: + } +]); diff --git a/src/routes/User.tsx b/src/routes/User.tsx index 7cea321..43e703e 100644 --- a/src/routes/User.tsx +++ b/src/routes/User.tsx @@ -1,61 +1,61 @@ -import { useQuery } from "@tanstack/react-query" -import { fetchSentryEvents } from "../api" -import BarChart from "../components/BarChart" -import { GraphData, ChartKey } from "../types" -import ChaartSkeletonWrapper from "../components/ChartSkeleton" +import { useQuery } from "@tanstack/react-query"; +import { fetchSentryEvents } from "../api"; +import BarChart from "../components/BarChart"; +import { GraphData, ChartKey } from "../types"; +import ChaartSkeletonWrapper from "../components/ChartSkeleton"; const User = () => { const chartData = useQuery({ queryKey: ["chart"], - queryFn: fetchSentryEvents, - }) + queryFn: fetchSentryEvents + }); - if (chartData.isLoading) return + if (chartData.isLoading) return ; - const response = chartData.data + const response = chartData.data; - let userData: GraphData[] = [] + let userData: GraphData[] = []; if (response) { - const ledgerLoginSuccessful = response["Ledger Login Successful"] - const ledgerLoginFailed = response["Ledger Login Failed"] + const ledgerLoginSuccessful = response["Ledger Login Successful"]; + const ledgerLoginFailed = response["Ledger Login Failed"]; - const githubLoginSuccessful = response["Github Login Success"] - const githubLoginFailed = response["Github Login Failed"] + const githubLoginSuccessful = response["Github Login Success"]; + const githubLoginFailed = response["Github Login Failed"]; - const githubTokenSuccessful = response["Loaded Github Token Successfully"] - const githubTokenFailed: Record = {} + const githubTokenSuccessful = response["Loaded Github Token Successfully"]; + const githubTokenFailed: Record = {}; for (const key in githubTokenSuccessful) { - githubTokenFailed[key] = 0 + githubTokenFailed[key] = 0; } userData = [ { title: ChartKey.LedgerLogin, success: ledgerLoginSuccessful, - failure: ledgerLoginFailed, + failure: ledgerLoginFailed }, { title: ChartKey.GithubLogin, success: githubLoginSuccessful, - failure: githubLoginFailed, + failure: githubLoginFailed }, { title: ChartKey.GithubToken, success: githubTokenSuccessful, - failure: githubTokenFailed, - }, - ] + failure: githubTokenFailed + } + ]; } return (
- {userData.map((data) => ( + {userData.map(data => ( ))}
- ) -} + ); +}; -export default User +export default User; diff --git a/src/types.ts b/src/types.ts index cd3f218..01d9d48 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,34 +1,34 @@ export enum SentryDataPeriods { OneDay = "24h", SevenDays = "7d", - TwoWeeks = "14d", + TwoWeeks = "14d" } export enum SentryDataTypes { LoginStats = "login", - SigningStats = "tx", + SigningStats = "tx" } export type ChartDataResponse = { - [key: string]: Record -} + [key: string]: Record; +}; export type BarData = { - day: string - positive: number - negative: number -} + day: string; + positive: number; + negative: number; +}; export enum ChartKey { Propose = "propose", Approve = "approve", LedgerLogin = "ledgerLogin", GithubLogin = "githubLogin", - GithubToken = "githubToken", + GithubToken = "githubToken" } export type GraphData = { - title: ChartKey - success: Record - failure: Record -} + title: ChartKey; + success: Record; + failure: Record; +}; diff --git a/src/utils.ts b/src/utils.ts index ac37082..99d31f9 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,19 +1,19 @@ -import { BarData, SentryDataTypes } from "./types" -import { config } from "./config" +import { BarData, SentryDataTypes } from "./types"; +import { config } from "./config"; export const formatSentryURL = (period: string, type: SentryDataTypes) => { - const baseUrl = `${config.apiUri}/stats/${type}/${period}` - return baseUrl -} + const baseUrl = `${config.apiUri}/stats/${type}/${period}`; + return baseUrl; +}; export const calculateTotalLastNDays = ( data: Record, n: number ): number => { - const values = Object.values(data) - const lastNDaysValues = values.slice(-n) - return lastNDaysValues.reduce((acc: number, value: number) => acc + value, 0) -} + const values = Object.values(data); + const lastNDaysValues = values.slice(-n); + return lastNDaysValues.reduce((acc: number, value: number) => acc + value, 0); +}; export const barChartOption = (data: BarData[]) => { return { @@ -22,34 +22,34 @@ export const barChartOption = (data: BarData[]) => { left: "5%", right: "5%", top: "10%", - bottom: "10%", + bottom: "10%" }, xAxis: { type: "category", - data: data.map((item) => item.day), + data: data.map(item => item.day) }, yAxis: { - type: "value", + type: "value" }, series: [ { name: "Success", stack: "total", type: "bar", - data: data.map((item) => item.positive), + data: data.map(item => item.positive), itemStyle: { - color: "#2196F3", - }, + color: "#2196F3" + } }, { name: "Failure", stack: "total", type: "bar", - data: data.map((item) => item.negative), + data: data.map(item => item.negative), itemStyle: { - color: "#FF5722", - }, - }, - ], - } -} + color: "#FF5722" + } + } + ] + }; +}; diff --git a/tailwind.config.js b/tailwind.config.js index def0502..95ab65d 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -5,9 +5,9 @@ export default { extend: { colors: { "chart-blue": "#2196F3", - "chart-orange": "#FF5722", - }, - }, + "chart-orange": "#FF5722" + } + } }, - plugins: [], -} + plugins: [] +}; diff --git a/vite.config.ts b/vite.config.ts index 0da3061..3e69871 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,10 +1,10 @@ -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react-swc' +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react-swc"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], - build:{ + build: { outDir: "dist" } -}) +});