Merge pull request #10 from lucianavlop/style-enhancements

Minor styling enhancements

.github/workflows/unit-tests.yml

@@ -0,0 +1,25 @@
+name: CI
+
+on:
+ workflow_dispatch:
+ pull_request:
+ branches: ["main"]
+
+jobs:
+ test:
+ runs-on: ubuntu-latest
+
+ steps:
+ - name: Checkout code
+ uses: actions/checkout@v2
+
+ - name: Set up Node.js
+ uses: actions/setup-node@v2
+ with:
+ node-version: "16.19.x"
+
+ - name: Install dependencies
+ run: yarn install --frozen-lockfile
+
+ - name: Run tests
+ run: yarn test

package.json

@@ -17,6 +17,7 @@
  "axios": "^1.3.6",
  "chart.js": "^4.2.1",
  "chartjs-adapter-moment": "^1.0.1",
+ "chartjs-plugin-annotation": "^2.2.1",
  "date-fns": "^2.29.3",
  "prettier": "^2.8.8",
  "react": "^18.2.0",
@@ -50,5 +51,16 @@
  "last 1 firefox version",
  "last 1 safari version"
  ]
+ },
+ "jest": {
+ "transform": {
+ "^.+\\.(js|jsx|ts|tsx)$": "babel-jest"
+ }
+ },
+ "devDependencies": {
+ "@babel/preset-env": "^7.21.5",
+ "@babel/preset-react": "^7.18.6",
+ "@babel/preset-typescript": "^7.21.5",
+ "babel-jest": "^29.5.0"
  }
 }

src/components/Metric.tsx

@@ -1,21 +1,18 @@
-import {
- Card,
- CardContent,
- Container,
- Grid,
- Typography,
- useTheme,
-} from "@mui/material"
+import { Container, Grid, Typography, useTheme } from "@mui/material"
 import React from "react"
 import { ArrowUpward, ArrowDownward } from "@mui/icons-material"
-import { formatEuro } from "services/PriceService"
+import { formatEuro } from "utils/PriceUtils"
 
 interface MetricCardProps {
  label: string
  value: number
  delta?: number
 }
 
+const ensurePositive = (number: number) => {
+ return Math.abs(number)
+}
+
 const Metric: React.FC<MetricCardProps> = ({ label, value, delta }) => {
  const theme = useTheme()
 
@@ -44,7 +41,7 @@ const Metric: React.FC<MetricCardProps> = ({ label, value, delta }) => {
  ? theme.palette.success.main
  : theme.palette.error.main
  }>
- {formatEuro(delta)}
+ {formatEuro(ensurePositive(delta))}
  </Typography>
  </Grid>
  </Grid>