mirror of
https://github.com/XFox111/MuiCharts.git
synced 2026-04-22 06:51:05 +03:00
GitHub
@@ -1,2 +1,51 @@
|
|||||||
# MuiCharts
|
# MuiCharts
|
||||||
Small demo app on .NET/React. Job entry challenge
|
Small demo app on .NET/React. Job entry challenge
|
||||||
|
|
||||||
|
## Devcontainers
|
||||||
|
This repository is equipped with configuration files for Dev Containers feature which allows you to develop this project in a containerized environment. You can use VS Code with Dev Containers extension and Docker or you can use GitHub Codespaces. Read more at [Developing inside a Container](https://code.visualstudio.com/docs/remote/containers).
|
||||||
|
|
||||||
|
## Backend
|
||||||
|
Path: `/backend`
|
||||||
|
|
||||||
|
Backend is a simple ASP.NET Core Web API project with EF Core and SQLite. It provides a RESTful API for the frontend to consume and incorportaes DDD principles.
|
||||||
|
|
||||||
|
### Projects
|
||||||
|
- `MuiCharts.Api` - ASP.NET Core Web API project
|
||||||
|
- `MuiCharts.Contracts` - Shared Web API contracts that can be extracted into a separate package and shared between the client and the server
|
||||||
|
- `MuiCharts.Infrastructure` - Infrastructure layer with EF Core and SQLite
|
||||||
|
- `MuiCharts.Domain` - Domain layer with business logic and models
|
||||||
|
|
||||||
|
### Essential variables
|
||||||
|
Use these properties as environmental variables or CLI arguments to configure the backend:
|
||||||
|
#### HTTPS
|
||||||
|
If you want to use Kestrel as your primary web server (with no reverse proxy), you can use the following properties to configure HTTPS with Let's Encrypt certificate:
|
||||||
|
- `HTTPS_PORTS=443` - Listen for HTTPS requests on port 443
|
||||||
|
- `LettuceEncrypt:AcceptTermsOfService=true` - bypass interactive prompt
|
||||||
|
- `LettuceEncrypt:DomainNames:0=example.com` - domain name for the certificate (use `:1`, `:2`, `:3`, etc. to add more)
|
||||||
|
- `LettuceEncrypt:EmailAddress=eugene@xfox111.net` - email address for certificate issuer
|
||||||
|
|
||||||
|
> **Note**: you need to have either a public IP address or a domain name to use Let's Encrypt certificates. Otherwise, use `dotnet dev-certs https` to generate a self-signed certificate.
|
||||||
|
|
||||||
|
#### Data persistence
|
||||||
|
Configure these options if you want to change default paths for data persistence:
|
||||||
|
- `ConnectionStrings:DataContext=Data Source=/persistence/data.db` - SQLite DB connection string (default: `/persistence/data.db`)
|
||||||
|
- `LettuceEncrypt:CertificatesPath=/persistence` - path to store Let's Encrypt certificates (default: `/persistence` for `Production` and `data.db` for `Development`)
|
||||||
|
|
||||||
|
> **IMPORTANT**: default persistence paths are configured to be used in a Docker container, where the user is `root`. `/persistence` is not writtable by a non-root user, so you need either to change the paths if you want to run the app outside of a container without root privileges or run app as `sudo`.
|
||||||
|
|
||||||
|
## Frontend
|
||||||
|
Path: `/frontend`
|
||||||
|
|
||||||
|
Frontend is a simple React app with Material-UI. It consumes the RESTful API provided by the backend (or uses its emulation) and visualizes the data.
|
||||||
|
|
||||||
|
> 🚧 WIP
|
||||||
|
|
||||||
|
## Docker
|
||||||
|
Use sample `docker-compose.yml` file to deploy the project on one server using Nginx
|
||||||
|
|
||||||
|
## GitHub Actions
|
||||||
|
Path: `.github/workflows`
|
||||||
|
|
||||||
|
There are two GitHub Actions workflows:
|
||||||
|
- `backend.yml` - CI/CD for the backend. Deploys the app to a remote server using Docker and SSH
|
||||||
|
- `frontend.yml` - CI/CD for the frontend. Deploys the app to GitHub Pages
|
||||||
|
|||||||
@@ -0,0 +1,4 @@
|
|||||||
|
dist/
|
||||||
|
node_modules/
|
||||||
|
.devcontainer/
|
||||||
|
.github/
|
||||||
@@ -0,0 +1,43 @@
|
|||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
env: { browser: true, es2020: true },
|
||||||
|
settings: {
|
||||||
|
react: {
|
||||||
|
version: "detect",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
extends: [
|
||||||
|
"eslint:recommended",
|
||||||
|
"plugin:@typescript-eslint/strict-type-checked",
|
||||||
|
"plugin:@typescript-eslint/stylistic-type-checked",
|
||||||
|
"plugin:react-hooks/recommended",
|
||||||
|
"plugin:react/recommended",
|
||||||
|
"plugin:react/jsx-runtime",
|
||||||
|
],
|
||||||
|
ignorePatterns: ["dist", ".eslintrc.cjs"],
|
||||||
|
parser: "@typescript-eslint/parser",
|
||||||
|
plugins: ["react-refresh"],
|
||||||
|
rules: {
|
||||||
|
"react-refresh/only-export-components": [
|
||||||
|
"warn",
|
||||||
|
{ allowConstantExport: true },
|
||||||
|
],
|
||||||
|
"@typescript-eslint/no-non-null-assertion": "off",
|
||||||
|
"@typescript-eslint/no-confusing-void-expression": "off",
|
||||||
|
"@typescript-eslint/no-unused-vars": "warn",
|
||||||
|
"@typescript-eslint/prefer-for-of": "warn",
|
||||||
|
"no-empty": "warn",
|
||||||
|
"@typescript-eslint/no-inferrable-types": "off",
|
||||||
|
"@typescript-eslint/consistent-indexed-object-style": "warn",
|
||||||
|
"@typescript-eslint/no-unused-vars": "warn",
|
||||||
|
"@typescript-eslint/no-unnecessary-type-assertion": "warn",
|
||||||
|
"@typescript-eslint/no-explicit-any": "warn",
|
||||||
|
"@typescript-eslint/no-unused-vars": "warn",
|
||||||
|
},
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: "latest",
|
||||||
|
sourceType: "module",
|
||||||
|
project: ["./tsconfig.json", "./tsconfig.node.json"],
|
||||||
|
tsConfigRootDir: __dirname,
|
||||||
|
}
|
||||||
|
};
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
# Use the official Node.js 20 image as the base image
|
||||||
|
FROM node:20 as builder
|
||||||
|
|
||||||
|
# Set the working directory inside the container
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
# Copy the package.json and package-lock.json files to the working directory
|
||||||
|
COPY package*.json ./
|
||||||
|
|
||||||
|
# Install the app dependencies
|
||||||
|
RUN yarn install
|
||||||
|
|
||||||
|
# Copy the app source code to the working directory
|
||||||
|
COPY . .
|
||||||
|
|
||||||
|
# Build the app
|
||||||
|
RUN yarn build
|
||||||
|
|
||||||
|
# Use the official Nginx image as the base image
|
||||||
|
FROM nginx:latest as prod
|
||||||
|
|
||||||
|
# Copy the build output to replace the default Nginx contents
|
||||||
|
COPY --from=builder /app/dist /usr/share/nginx/html
|
||||||
|
|
||||||
|
# Expose port 80
|
||||||
|
CMD ["nginx", "-g", "daemon off;"]
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
|
||||||
|
<!-- Material UI fonts -->
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />
|
||||||
|
|
||||||
|
|
||||||
|
<title>ChartRace</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,43 @@
|
|||||||
|
{
|
||||||
|
"name": "frontend-app",
|
||||||
|
"author": {
|
||||||
|
"email": "eugene@xfox111.net",
|
||||||
|
"name": "Eugene Fox",
|
||||||
|
"url": "https://xfox111.net"
|
||||||
|
},
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "eslint . --ext ts,tsx --report-unused-disable-directives && tsc && vite build",
|
||||||
|
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@emotion/react": "^11.11.3",
|
||||||
|
"@emotion/styled": "^11.11.0",
|
||||||
|
"@mui/icons-material": "^5.15.10",
|
||||||
|
"@mui/material": "^5.15.10",
|
||||||
|
"@mui/system": "^5.15.9",
|
||||||
|
"@mui/x-charts": "^6.19.4",
|
||||||
|
"@mui/x-data-grid": "^6.19.4",
|
||||||
|
"d3-scale": "^4.0.2",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/d3-scale": "^4.0.8",
|
||||||
|
"@types/react": "^18.2.55",
|
||||||
|
"@types/react-dom": "^18.2.19",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^6.21.0",
|
||||||
|
"@typescript-eslint/parser": "^6.21.0",
|
||||||
|
"@vitejs/plugin-react": "^4.2.1",
|
||||||
|
"eslint": "^8.56.0",
|
||||||
|
"eslint-plugin-react": "^7.33.2",
|
||||||
|
"eslint-plugin-react-hooks": "^4.6.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.5",
|
||||||
|
"typescript": "^5.2.2",
|
||||||
|
"vite": "^5.1.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,23 @@
|
|||||||
|
import { makeStyles } from "./Utils/makeStyles";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Stylesheet for the App component.
|
||||||
|
*/
|
||||||
|
const AppStyles = makeStyles(theme => ({
|
||||||
|
root:
|
||||||
|
{
|
||||||
|
display: "flex",
|
||||||
|
flexFlow: "column",
|
||||||
|
height: "100%",
|
||||||
|
userSelect: "none",
|
||||||
|
},
|
||||||
|
controls:
|
||||||
|
{
|
||||||
|
marginBottom: theme.spacing(4),
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: theme.spacing(4),
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
export default AppStyles;
|
||||||
@@ -0,0 +1,88 @@
|
|||||||
|
import RefreshIcon from "@mui/icons-material/Refresh";
|
||||||
|
import { Box, Button, Container, GlobalStyles, Slider, Theme, ThemeProvider, createTheme } from "@mui/material";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import useStyles from "./App.styles";
|
||||||
|
import ChartSkeleton from "./Components/ChartSkeleton";
|
||||||
|
import TrackChart from "./Components/TrackChart";
|
||||||
|
import IPoint from "./Data/IPoint";
|
||||||
|
import ITrack from "./Data/ITrack";
|
||||||
|
import LoadMockData from "./Data/LoadMockData";
|
||||||
|
|
||||||
|
const theme: Theme = createTheme();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The main application component.
|
||||||
|
*/
|
||||||
|
function App(): JSX.Element
|
||||||
|
{
|
||||||
|
const [data, setData] = useState<{ tracks: ITrack[], points: IPoint[]; }>({ tracks: [], points: [] });
|
||||||
|
const [isLoading, setLoading] = useState<boolean>(true);
|
||||||
|
const [zoom, setZoom] = useState<number[]>([0, 1]);
|
||||||
|
const sx = useStyles();
|
||||||
|
|
||||||
|
const loadData = () =>
|
||||||
|
{
|
||||||
|
setLoading(true);
|
||||||
|
console.log("Loading data...");
|
||||||
|
const newData = LoadMockData(true);
|
||||||
|
setData(newData);
|
||||||
|
setZoom([0, Math.min(newData.tracks.length + 1, 20)]);
|
||||||
|
|
||||||
|
new Promise(resolve => setTimeout(resolve, 1000))
|
||||||
|
.then(() => setLoading(false))
|
||||||
|
.catch(console.error);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() =>
|
||||||
|
{
|
||||||
|
loadData();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleZoomChange = (_: unknown, newValue: number | number[]) =>
|
||||||
|
{
|
||||||
|
const value: number[] = newValue as number[];
|
||||||
|
|
||||||
|
if ((value[0] === zoom[0] && value[1] === zoom[1]) || value[1] - value[0] < 2)
|
||||||
|
return;
|
||||||
|
|
||||||
|
if (value[1] - value[0] > 50)
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
setZoom(value);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ThemeProvider theme={ theme }>
|
||||||
|
<GlobalStyles styles={ { "body, #root": { height: "100vh", margin: 0 } } } />
|
||||||
|
|
||||||
|
<Box sx={ sx.root }>
|
||||||
|
<TrackChart
|
||||||
|
tracks={ data.tracks } points={ data.points }
|
||||||
|
zoom={ zoom } onProcessingComplete={ () => setLoading(false) } />
|
||||||
|
|
||||||
|
<Container sx={ sx.controls }>
|
||||||
|
{ !isLoading &&
|
||||||
|
<Slider
|
||||||
|
min={ 0 } max={ data.tracks.length + 1 }
|
||||||
|
defaultValue={ zoom } onChangeCommitted={ handleZoomChange }
|
||||||
|
valueLabelDisplay="auto" />
|
||||||
|
}
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="contained" color="inherit" endIcon={ <RefreshIcon /> }
|
||||||
|
onClick={ loadData } disabled={ isLoading }>
|
||||||
|
|
||||||
|
Refresh
|
||||||
|
</Button>
|
||||||
|
</Container>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{ isLoading &&
|
||||||
|
<ChartSkeleton />
|
||||||
|
}
|
||||||
|
|
||||||
|
</ThemeProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
@@ -0,0 +1,63 @@
|
|||||||
|
import { grey } from "@mui/material/colors";
|
||||||
|
import { styled } from "@mui/system";
|
||||||
|
import { useDrawingArea, useXScale, useYScale } from "@mui/x-charts";
|
||||||
|
import { ScaleLinear } from "d3-scale";
|
||||||
|
import React, { useEffect } from "react";
|
||||||
|
|
||||||
|
interface IProps
|
||||||
|
{
|
||||||
|
/** The maximum Y value. */
|
||||||
|
maxY: number;
|
||||||
|
/** The X ticks. */
|
||||||
|
xTicks: number[];
|
||||||
|
}
|
||||||
|
|
||||||
|
/** The Cartesian grid. */
|
||||||
|
function CartesianGrid(props: IProps): JSX.Element
|
||||||
|
{
|
||||||
|
const [yTicks, setYTicks] = React.useState<number[]>([]);
|
||||||
|
const xTicks = props.xTicks;
|
||||||
|
|
||||||
|
// Get the drawing area bounding box
|
||||||
|
const { left, top, width, height } = useDrawingArea();
|
||||||
|
|
||||||
|
// Get the two scale
|
||||||
|
const yAxisScale = useYScale() as ScaleLinear<unknown, number>;
|
||||||
|
const xAxisScale = useXScale() as ScaleLinear<unknown, number>;
|
||||||
|
|
||||||
|
|
||||||
|
useEffect(() =>
|
||||||
|
{
|
||||||
|
const ticks: number[] = [];
|
||||||
|
|
||||||
|
for (let i = 1; i <= Math.ceil(props.maxY / 20) + 1; i++)
|
||||||
|
ticks.push(i * 20);
|
||||||
|
|
||||||
|
setYTicks(ticks);
|
||||||
|
}, [props.maxY]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<React.Fragment>
|
||||||
|
|
||||||
|
{ yTicks.map((value) =>
|
||||||
|
<StyledPath key={ value } d={ `M ${left} ${yAxisScale(value)} l ${width} 0` } />
|
||||||
|
) }
|
||||||
|
|
||||||
|
{ xTicks.map((value) =>
|
||||||
|
<StyledPath key={ value } d={ `M ${xAxisScale(value)} ${top} l 0 ${height}` } />
|
||||||
|
) }
|
||||||
|
|
||||||
|
</React.Fragment>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const StyledPath = styled("path")(
|
||||||
|
() => ({
|
||||||
|
fill: "none",
|
||||||
|
stroke: grey[500],
|
||||||
|
strokeWidth: 1,
|
||||||
|
pointerEvents: "none",
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
|
export default CartesianGrid;
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
import { makeStyles } from "../Utils/makeStyles";
|
||||||
|
|
||||||
|
export const useStyles = makeStyles(theme => ({
|
||||||
|
root:
|
||||||
|
{
|
||||||
|
position: "fixed",
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
width: "100%",
|
||||||
|
height: "100%",
|
||||||
|
display: "grid",
|
||||||
|
gridTemplateRows: "1fr auto",
|
||||||
|
gap: theme.spacing(4),
|
||||||
|
backgroundColor: theme.palette.background.default,
|
||||||
|
},
|
||||||
|
chart:
|
||||||
|
{
|
||||||
|
paddingLeft: theme.spacing(2),
|
||||||
|
paddingRight: theme.spacing(6),
|
||||||
|
paddingTop: theme.spacing(6),
|
||||||
|
display: "grid",
|
||||||
|
gridTemplateColumns: "auto 1fr",
|
||||||
|
gridTemplateRows: "1fr auto",
|
||||||
|
gap: theme.spacing(2),
|
||||||
|
},
|
||||||
|
xAxis:
|
||||||
|
{
|
||||||
|
gridColumn: 2,
|
||||||
|
gridRow: 2,
|
||||||
|
},
|
||||||
|
grid:
|
||||||
|
{
|
||||||
|
display: "grid",
|
||||||
|
gridTemplateColumns: "repeat(10, 1fr)",
|
||||||
|
gridTemplateRows: "repeat(10, 1fr)",
|
||||||
|
gap: theme.spacing(1),
|
||||||
|
},
|
||||||
|
controls:
|
||||||
|
{
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: theme.spacing(4),
|
||||||
|
marginBottom: theme.spacing(4),
|
||||||
|
},
|
||||||
|
}));
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
import { Box, Container, Skeleton } from "@mui/material";
|
||||||
|
import { useStyles } from "./ChartSkeleton.styles";
|
||||||
|
|
||||||
|
function ChartSkeleton(): JSX.Element
|
||||||
|
{
|
||||||
|
const sx = useStyles();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box sx={ sx.root }>
|
||||||
|
<Box sx={ sx.chart }>
|
||||||
|
<Skeleton variant="rounded" width="24px" height="100%" />
|
||||||
|
<Skeleton sx={ sx.xAxis } variant="rounded" width="100%" height="24px" />
|
||||||
|
|
||||||
|
<Box sx={ sx.grid }>
|
||||||
|
{ Array.from({ length: 100 }).map((_, i) =>
|
||||||
|
<Skeleton key={ i } variant="rounded" width="100%" height="100%" />
|
||||||
|
) }
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Container sx={ sx.controls }>
|
||||||
|
<Skeleton variant="rounded" width="100%" height="24px" />
|
||||||
|
<Skeleton variant="rounded" width="150px" height="38px" />
|
||||||
|
</Container>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ChartSkeleton;
|
||||||
@@ -0,0 +1,133 @@
|
|||||||
|
import { SxProps } from "@mui/system";
|
||||||
|
import * as xc from "@mui/x-charts";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import IChartPoint from "../Data/IChartPoint";
|
||||||
|
import IPoint from "../Data/IPoint";
|
||||||
|
import ITrack from "../Data/ITrack";
|
||||||
|
import MaxSpeed from "../Data/MaxSpeed";
|
||||||
|
import { TooltipProps, TracklineSeries } from "../Data/TrackChartDataProps";
|
||||||
|
import CartesianGrid from "./CartesianGrid";
|
||||||
|
import TrackLinePlot from "./TrackLinePlot";
|
||||||
|
import TrackSurfacePlot from "./TrackSurfacePlot";
|
||||||
|
|
||||||
|
interface IProps
|
||||||
|
{
|
||||||
|
/** The tracks data. */
|
||||||
|
tracks: ITrack[];
|
||||||
|
/** The points data. */
|
||||||
|
points: IPoint[];
|
||||||
|
/** The zoom levels (start, end). */
|
||||||
|
zoom: number[];
|
||||||
|
/** A callback for when the processing is complete. */
|
||||||
|
onProcessingComplete?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A chart of the track.
|
||||||
|
*/
|
||||||
|
function TrackChart({ tracks, points, zoom, ...props }: IProps): JSX.Element
|
||||||
|
{
|
||||||
|
const [dataset, setDataset] = useState<IChartPoint[]>([]);
|
||||||
|
const [xTicks, setXTicks] = useState<number[]>([]);
|
||||||
|
const [zoomedDataset, setZoomedDataset] = useState<IChartPoint[]>([]);
|
||||||
|
const [zoomedXTicks, setZoomedXTicks] = useState<number[]>([]);
|
||||||
|
const [maskStyles, setMasks] = useState<SxProps>({});
|
||||||
|
const maxPointHeight: number = Math.max(...points.map(i => i.height));
|
||||||
|
|
||||||
|
useEffect(() =>
|
||||||
|
{
|
||||||
|
for (let i = 0; i < dataset.length; i++)
|
||||||
|
{
|
||||||
|
const selector: string = `.MuiMarkElement-series-${MaxSpeed[dataset[i].maxSpeed]}`;
|
||||||
|
const element: SVGPathElement | undefined = document.querySelectorAll<SVGPathElement>(selector)[i];
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
||||||
|
element?.style.setProperty("display", "inline");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() =>
|
||||||
|
{
|
||||||
|
if (tracks.length < 1 || points.length < 1)
|
||||||
|
return;
|
||||||
|
|
||||||
|
const data: IChartPoint[] = [];
|
||||||
|
let currentDistance: number = 0;
|
||||||
|
|
||||||
|
for (const track of tracks)
|
||||||
|
{
|
||||||
|
const firstPoint = points.find(p => p.id === track.firstId)!;
|
||||||
|
|
||||||
|
data.push({
|
||||||
|
distance: currentDistance,
|
||||||
|
length: track.distance,
|
||||||
|
surface: track.surface,
|
||||||
|
maxSpeed: track.maxSpeed,
|
||||||
|
name: `${firstPoint.name} (ID#${firstPoint.id})`,
|
||||||
|
height: firstPoint.height,
|
||||||
|
});
|
||||||
|
|
||||||
|
currentDistance += track.distance;
|
||||||
|
}
|
||||||
|
|
||||||
|
const lastPoint = points.find(p => p.id === tracks[tracks.length - 1].secondId)!;
|
||||||
|
|
||||||
|
data.push({
|
||||||
|
distance: currentDistance,
|
||||||
|
length: -1,
|
||||||
|
surface: tracks[tracks.length - 1].surface,
|
||||||
|
maxSpeed: tracks[tracks.length - 1].maxSpeed,
|
||||||
|
name: `${lastPoint.name} (ID#${lastPoint.id})`,
|
||||||
|
height: lastPoint.height
|
||||||
|
});
|
||||||
|
|
||||||
|
setDataset(data);
|
||||||
|
setXTicks(data.map(i => i.distance));
|
||||||
|
|
||||||
|
console.warn("Reflow!");
|
||||||
|
|
||||||
|
setTimeout(() => props.onProcessingComplete?.(), 500);
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [tracks, points, props.onProcessingComplete]);
|
||||||
|
|
||||||
|
useEffect(() =>
|
||||||
|
{
|
||||||
|
setZoomedDataset(dataset.slice(zoom[0], zoom[1]));
|
||||||
|
setZoomedXTicks(xTicks.slice(zoom[0], zoom[1]));
|
||||||
|
}, [dataset, xTicks, zoom]);
|
||||||
|
|
||||||
|
const getSx = (): SxProps => ({
|
||||||
|
"& .MuiMarkElement-root":
|
||||||
|
{
|
||||||
|
display: "none",
|
||||||
|
},
|
||||||
|
...maskStyles,
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<xc.ResponsiveChartContainer
|
||||||
|
dataset={ zoomedDataset }
|
||||||
|
sx={ getSx() }
|
||||||
|
yAxis={ [{ max: (Math.ceil(maxPointHeight / 20) + 1) * 20, min: 0 }] }
|
||||||
|
xAxis={ [{ dataKey: "distance", scaleType: "point" }] }
|
||||||
|
series={ TracklineSeries }>
|
||||||
|
|
||||||
|
<TrackSurfacePlot dataset={ zoomedDataset } />
|
||||||
|
<CartesianGrid maxY={ maxPointHeight } xTicks={ zoomedXTicks } />
|
||||||
|
<TrackLinePlot dataset={ zoomedDataset } onStylesUpdated={ styles => setMasks(styles) } strokeWidth={ 4 } />
|
||||||
|
|
||||||
|
<xc.ChartsXAxis />
|
||||||
|
<xc.ChartsYAxis />
|
||||||
|
<xc.ChartsAxisHighlight x="line" />
|
||||||
|
<xc.MarkPlot />
|
||||||
|
<xc.LineHighlightPlot />
|
||||||
|
|
||||||
|
<xc.ChartsTooltip
|
||||||
|
slotProps={ {
|
||||||
|
axisContent: TooltipProps(zoomedDataset)
|
||||||
|
} } />
|
||||||
|
|
||||||
|
</xc.ResponsiveChartContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default TrackChart;
|
||||||
@@ -0,0 +1,71 @@
|
|||||||
|
import { SxProps } from "@mui/system";
|
||||||
|
import { LinePlot, useDrawingArea, useXScale } from "@mui/x-charts";
|
||||||
|
import { ScaleLinear } from "d3-scale";
|
||||||
|
import { useEffect } from "react";
|
||||||
|
import MaxSpeed from "../Data/MaxSpeed";
|
||||||
|
import IChartPoint from "../Data/IChartPoint";
|
||||||
|
|
||||||
|
// Remarks:
|
||||||
|
// Even though this component adds nothing to the chart and only calculates masks,
|
||||||
|
// it is still required since a) I can't use `useDrawingArea` inside `TrackChart`
|
||||||
|
// and b) I can't pass calculates styles here
|
||||||
|
|
||||||
|
interface IProps
|
||||||
|
{
|
||||||
|
/** Data to plot. */
|
||||||
|
dataset: IChartPoint[];
|
||||||
|
/** Callback to update the styles. */
|
||||||
|
onStylesUpdated: (styles: SxProps) => void;
|
||||||
|
/** The width of the line. */
|
||||||
|
strokeWidth?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** A plot of the track line. */
|
||||||
|
function TrackLinePlot({ dataset, onStylesUpdated, strokeWidth }: IProps): JSX.Element
|
||||||
|
{
|
||||||
|
const area = useDrawingArea();
|
||||||
|
const xAxisScale = useXScale() as ScaleLinear<unknown, number>;
|
||||||
|
|
||||||
|
useEffect(() =>
|
||||||
|
{
|
||||||
|
const masks: string[] = [];
|
||||||
|
|
||||||
|
for (let i = 0; i < Object.keys(MaxSpeed).length / 2; i++)
|
||||||
|
masks.push("M 0 0 ");
|
||||||
|
|
||||||
|
for (const point of dataset)
|
||||||
|
{
|
||||||
|
if (point.length < 1)
|
||||||
|
continue;
|
||||||
|
|
||||||
|
const xStart: number = xAxisScale(point.distance) - area.left;
|
||||||
|
const xEnd: number = xAxisScale(point.distance + point.length) - area.left;
|
||||||
|
|
||||||
|
masks[point.maxSpeed] += `H ${xStart} V ${area.height} H ${isNaN(xEnd) ? area.width : xEnd} V 0 `;
|
||||||
|
}
|
||||||
|
|
||||||
|
let sx: SxProps = {};
|
||||||
|
|
||||||
|
for (let i = 0; i < masks.length; i++)
|
||||||
|
sx = {
|
||||||
|
...sx,
|
||||||
|
[`& .MuiLineElement-series-${MaxSpeed[i]}`]:
|
||||||
|
{
|
||||||
|
clipPath: `path("${masks[i]} Z")`,
|
||||||
|
strokeWidth: strokeWidth ?? 2,
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onStylesUpdated(sx);
|
||||||
|
|
||||||
|
// Suppressing warning, since adding useXScale to the dependency array would cause an infinite component reflow
|
||||||
|
// `area` dependency is sufficient.
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [area, dataset, strokeWidth]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<LinePlot />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default TrackLinePlot;
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
import { styled } from "@mui/material";
|
||||||
|
import { useDrawingArea, useXScale } from "@mui/x-charts";
|
||||||
|
import { ScaleLinear } from "d3-scale";
|
||||||
|
import React from "react";
|
||||||
|
import IChartPoint from "../Data/IChartPoint";
|
||||||
|
import { SurfaceColors } from "../Data/TrackChartDataProps";
|
||||||
|
|
||||||
|
interface IProps
|
||||||
|
{
|
||||||
|
/** Data to plot. */
|
||||||
|
dataset: IChartPoint[];
|
||||||
|
}
|
||||||
|
|
||||||
|
/** A plot of the track surface. */
|
||||||
|
function TrackSurfacePlot({ dataset }: IProps): JSX.Element
|
||||||
|
{
|
||||||
|
// Get the drawing area bounding box
|
||||||
|
const { top, height } = useDrawingArea();
|
||||||
|
const xAxisScale = useXScale() as ScaleLinear<unknown, number>;
|
||||||
|
|
||||||
|
// Calculate the width of each track
|
||||||
|
const getWidth = (item: IChartPoint): number =>
|
||||||
|
{
|
||||||
|
const width = xAxisScale(item.distance + item.length) - xAxisScale(item.distance);
|
||||||
|
return isNaN(width) ? 0 : width;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<React.Fragment>
|
||||||
|
{ dataset.map((i, index) => i.length > 0 &&
|
||||||
|
<StyledRect key={ index }
|
||||||
|
x={ xAxisScale(i.distance) } y={ top }
|
||||||
|
width={ getWidth(i) } height={ height }
|
||||||
|
color={ SurfaceColors[i.surface] } />
|
||||||
|
) }
|
||||||
|
</React.Fragment>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const StyledRect = styled("rect")<{ color: string; }>(
|
||||||
|
({ color }) => ({
|
||||||
|
fill: color,
|
||||||
|
pointerEvents: "none"
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
export default TrackSurfacePlot;
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
import MaxSpeed from "./MaxSpeed";
|
||||||
|
import Surface from "./Surface";
|
||||||
|
|
||||||
|
/** Represents an aggregated point on the chart. */
|
||||||
|
export default interface IChartPoint
|
||||||
|
{
|
||||||
|
/** The distance from the start of the track. */
|
||||||
|
distance: number;
|
||||||
|
/** The distance until the next point. */
|
||||||
|
length: number;
|
||||||
|
/** The type of track surface */
|
||||||
|
surface: Surface;
|
||||||
|
/** The maximum speed of the point. */
|
||||||
|
maxSpeed: MaxSpeed;
|
||||||
|
/** The name of the point. */
|
||||||
|
name: string;
|
||||||
|
/** The height of the point. */
|
||||||
|
height: number;
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
|
[key: string]: any;
|
||||||
|
}
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
/** Represents a point with an ID, name, and height. */
|
||||||
|
export default interface IPoint
|
||||||
|
{
|
||||||
|
/** The unique identifier. */
|
||||||
|
id: number;
|
||||||
|
|
||||||
|
/** The name of the point. */
|
||||||
|
name: string;
|
||||||
|
|
||||||
|
/** The height of the point. */
|
||||||
|
height: number;
|
||||||
|
}
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
import MaxSpeed from "./MaxSpeed";
|
||||||
|
import Surface from "./Surface";
|
||||||
|
|
||||||
|
/** Represents a track segment */
|
||||||
|
export default interface ITrack
|
||||||
|
{
|
||||||
|
/** First point ID */
|
||||||
|
firstId: number;
|
||||||
|
|
||||||
|
/** Second (last) point ID */
|
||||||
|
secondId: number;
|
||||||
|
|
||||||
|
/** Distance between points */
|
||||||
|
distance: number;
|
||||||
|
|
||||||
|
/** Surface type */
|
||||||
|
surface: Surface;
|
||||||
|
|
||||||
|
/** Maximum speed */
|
||||||
|
maxSpeed: MaxSpeed;
|
||||||
|
}
|
||||||
@@ -0,0 +1,51 @@
|
|||||||
|
import IPoint from "./IPoint";
|
||||||
|
import ITrack from "./ITrack";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns a random number between min and max
|
||||||
|
* @param min The minimum value (inclusive)
|
||||||
|
* @param max The maximum value (exclusive)
|
||||||
|
* @returns A random number between min and max
|
||||||
|
*/
|
||||||
|
const getRandom = (min: number, max: number): number =>
|
||||||
|
Math.floor(Math.random() * (max - min)) + min;
|
||||||
|
|
||||||
|
const pointNames: string[] =
|
||||||
|
[
|
||||||
|
"Alpha", "Bravo", "Charlie", "Delta", "Echo", "Foxtrot", "Golf", "Hotel", "India",
|
||||||
|
"Juliett", "Kilo", "Lima", "Mike", "November", "Oscar", "Papa", "Quebec", "Romeo",
|
||||||
|
"Sierra", "Tango", "Uniform", "Victor", "Whiskey", "X-ray", "Yankee", "Zulu"
|
||||||
|
];
|
||||||
|
|
||||||
|
function LoadMockData(largeCount?: boolean): { tracks: ITrack[], points: IPoint[]; }
|
||||||
|
{
|
||||||
|
const count: number = getRandom(10, 20) * (largeCount ? 10 : 1);
|
||||||
|
const points: IPoint[] = [];
|
||||||
|
const tracks: ITrack[] = [];
|
||||||
|
|
||||||
|
// Generate random data
|
||||||
|
|
||||||
|
for (let i = 0; i < count; i++)
|
||||||
|
{
|
||||||
|
points.push({
|
||||||
|
id: i,
|
||||||
|
name: `${pointNames[getRandom(0, pointNames.length)]}-${i}`,
|
||||||
|
height: getRandom(50, 200)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let i = 0; i < count - 1; i++)
|
||||||
|
{
|
||||||
|
tracks.push({
|
||||||
|
firstId: points[i].id,
|
||||||
|
secondId: points[i + 1].id,
|
||||||
|
distance: getRandom(1000, 2000),
|
||||||
|
surface: getRandom(0, 3),
|
||||||
|
maxSpeed: getRandom(0, 3)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return { tracks, points };
|
||||||
|
}
|
||||||
|
|
||||||
|
export default LoadMockData;
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
/** Represents the maximum speed options. */
|
||||||
|
enum MaxSpeed
|
||||||
|
{
|
||||||
|
FAST,
|
||||||
|
NORMAL,
|
||||||
|
SLOW
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MaxSpeed;
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
/** Represents the type of surface. */
|
||||||
|
enum Surface
|
||||||
|
{
|
||||||
|
SAND,
|
||||||
|
ASPHALT,
|
||||||
|
GROUND
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Surface;
|
||||||
@@ -0,0 +1,92 @@
|
|||||||
|
import { green, grey, orange, red, yellow } from "@mui/material/colors";
|
||||||
|
import { AllSeriesType, ChartsAxisContentProps } from "@mui/x-charts";
|
||||||
|
import IChartPoint from "./IChartPoint";
|
||||||
|
import MaxSpeed from "./MaxSpeed";
|
||||||
|
import Surface from "./Surface";
|
||||||
|
|
||||||
|
/** Props for rendering trackline segments. */
|
||||||
|
export const TracklineSeries: AllSeriesType[] = [
|
||||||
|
// There're three of them, because there are.
|
||||||
|
// Instead of trying to split signle line into different segments,
|
||||||
|
// I instead apply a mask to each line, which is a bit more efficient.
|
||||||
|
{
|
||||||
|
type: "line",
|
||||||
|
dataKey: "height",
|
||||||
|
curve: "catmullRom",
|
||||||
|
id: MaxSpeed[0],
|
||||||
|
color: green[500],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "line",
|
||||||
|
dataKey: "height",
|
||||||
|
curve: "catmullRom",
|
||||||
|
id: MaxSpeed[1],
|
||||||
|
color: orange[500],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "line",
|
||||||
|
dataKey: "height",
|
||||||
|
curve: "catmullRom",
|
||||||
|
id: MaxSpeed[2],
|
||||||
|
color: red[500],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
/** Props for the chart tooltip. */
|
||||||
|
export const TooltipProps = (dataset: IChartPoint[]): Partial<ChartsAxisContentProps> => ({
|
||||||
|
// @ts-expect-error - The type definition is incorrect
|
||||||
|
axis:
|
||||||
|
{
|
||||||
|
valueFormatter: (value: number): string => `${value} mi`
|
||||||
|
},
|
||||||
|
series:
|
||||||
|
[
|
||||||
|
{
|
||||||
|
type: "line",
|
||||||
|
data: dataset.map((_, index) => index),
|
||||||
|
label: "Point name",
|
||||||
|
id: "name",
|
||||||
|
valueFormatter: (value: number) => dataset[value].name,
|
||||||
|
color: green[500],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "line",
|
||||||
|
data: dataset.map(i => i.height),
|
||||||
|
label: "Height ASL",
|
||||||
|
id: "height",
|
||||||
|
valueFormatter: (value: number) => `${value} ft`,
|
||||||
|
color: green[500],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "line",
|
||||||
|
data: dataset.map(i => i.surface),
|
||||||
|
label: "Segment type",
|
||||||
|
id: "surface",
|
||||||
|
valueFormatter: (value: number) => Surface[value],
|
||||||
|
color: green[700],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "line",
|
||||||
|
data: dataset.map(i => i.length),
|
||||||
|
id: "length",
|
||||||
|
label: "Next point",
|
||||||
|
valueFormatter: (value: number) => value < 1 ? "FINISH" : `${value} mi`,
|
||||||
|
color: yellow[200],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "line",
|
||||||
|
data: dataset.map(i => i.maxSpeed),
|
||||||
|
id: "maxSpeed",
|
||||||
|
label: "Speed caution",
|
||||||
|
valueFormatter: (value: number) => MaxSpeed[value],
|
||||||
|
color: red[500],
|
||||||
|
},
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
/** Colors for each surface type. */
|
||||||
|
export const SurfaceColors: Record<Surface, string> = {
|
||||||
|
[Surface.ASPHALT]: grey[400],
|
||||||
|
[Surface.SAND]: yellow[100],
|
||||||
|
[Surface.GROUND]: green[100],
|
||||||
|
};
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
import { SxProps, Theme, useTheme } from "@mui/material";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Utility function that allows to create SxProps stylesheets outside of the component.
|
||||||
|
* @param styles Your stylesheet. A function that takes a theme and returns a SxProps object.
|
||||||
|
* @returns A react hook that returns the SxProps object.
|
||||||
|
*/
|
||||||
|
const makeStyles = <T>(styles: (theme: Theme) => Record<keyof T, SxProps>) =>
|
||||||
|
(): Record<keyof T, SxProps> =>
|
||||||
|
{
|
||||||
|
const theme = useTheme();
|
||||||
|
return styles(theme);
|
||||||
|
};
|
||||||
|
|
||||||
|
export { makeStyles };
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
import React from "react";
|
||||||
|
import ReactDOM from "react-dom/client";
|
||||||
|
import App from "./App";
|
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById("root")!).render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<App />
|
||||||
|
</React.StrictMode>,
|
||||||
|
);
|
||||||
Vendored
+1
@@ -0,0 +1 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": [
|
||||||
|
"ES2020",
|
||||||
|
"DOM",
|
||||||
|
"DOM.Iterable"
|
||||||
|
],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src"
|
||||||
|
],
|
||||||
|
"references": [
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.node.json"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"strict": true
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"vite.config.ts"
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
import react from "@vitejs/plugin-react";
|
||||||
|
import { defineConfig } from "vite";
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
});
|
||||||
+3015
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user