Sacha Weatherstone
5 years ago
33 changed files with 401 additions and 2651 deletions
@ -1,4 +1,3 @@ |
|||||
.snowpack |
dist |
||||
build |
|
||||
node_modules |
node_modules |
||||
.env |
.env |
||||
@ -0,0 +1,28 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="utf-8" /> |
||||
|
<link rel="shortcut icon" href="/favicon.ico" /> |
||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/touch-icon.png" /> |
||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /> |
||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> |
||||
|
<link rel="manifest" href="/site.webmanifest" /> |
||||
|
<link rel="mask-icon" href="/safari-tab.svg" color="#67ea94" /> |
||||
|
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" /> |
||||
|
<meta name="theme-color" content="#67ea94" /> |
||||
|
<meta |
||||
|
name="viewport" |
||||
|
content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0" |
||||
|
/> |
||||
|
<meta |
||||
|
name="description" |
||||
|
content="Web site created using create-snowpack-app" |
||||
|
/> |
||||
|
<title>Meshtastic Web</title> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div id="root"></div> |
||||
|
<noscript>You need to enable JavaScript to run this app.</noscript> |
||||
|
<script type="module" src="/src/index.tsx"></script> |
||||
|
</body> |
||||
|
</html> |
||||
File diff suppressed because it is too large
@ -1,53 +0,0 @@ |
|||||
//@ts-check
|
|
||||
|
|
||||
/** @type {import("snowpack").SnowpackUserConfig } */ |
|
||||
export default { |
|
||||
mount: { |
|
||||
public: { url: '/' }, |
|
||||
src: { url: '/' }, |
|
||||
}, |
|
||||
plugins: [ |
|
||||
'@snowpack/plugin-react-refresh', |
|
||||
'@snowpack/plugin-dotenv', |
|
||||
'@snowpack/plugin-postcss', |
|
||||
[ |
|
||||
'@snowpack/plugin-typescript', |
|
||||
{ |
|
||||
/* Yarn PnP workaround: see https://www.npmjs.com/package/@snowpack/plugin-typescript */ |
|
||||
...(process.versions.pnp ? { tsc: 'yarn pnpify tsc' } : {}), |
|
||||
}, |
|
||||
], |
|
||||
], |
|
||||
alias: { |
|
||||
// Type 1: Package Import Alias
|
|
||||
// "lodash": "lodash-es",
|
|
||||
// Type 2: Local Directory Import Alias (relative to cwd)
|
|
||||
'@app': './src', |
|
||||
'@pages': './src/pages', |
|
||||
'@components': './src/components', |
|
||||
'@core': './src/core', |
|
||||
}, |
|
||||
routes: [ |
|
||||
/* Enable an SPA Fallback in development: */ |
|
||||
// {"match": "routes", "src": ".*", "dest": "/index.html"},
|
|
||||
], |
|
||||
optimize: { |
|
||||
/* Example: Bundle your final build: */ |
|
||||
bundle: true, |
|
||||
sourcemap: false, |
|
||||
splitting: true, |
|
||||
treeshake: true, |
|
||||
manifest: false, |
|
||||
minify: true, |
|
||||
target: 'es2020', |
|
||||
}, |
|
||||
packageOptions: { |
|
||||
/* ... */ |
|
||||
}, |
|
||||
devOptions: { |
|
||||
/* ... */ |
|
||||
}, |
|
||||
buildOptions: { |
|
||||
/* ... */ |
|
||||
}, |
|
||||
}; |
|
||||
@ -1,155 +0,0 @@ |
|||||
import React from 'react'; |
|
||||
|
|
||||
import ApexChart from 'react-apexcharts'; |
|
||||
|
|
||||
import { Button } from './Button'; |
|
||||
import { Card } from './Card'; |
|
||||
|
|
||||
type DefaultDivProps = JSX.IntrinsicElements['div']; |
|
||||
|
|
||||
interface ISeries { |
|
||||
name: string; |
|
||||
data: { |
|
||||
x: string | Date; |
|
||||
y: number; |
|
||||
}[]; |
|
||||
} |
|
||||
|
|
||||
interface ChartProps extends DefaultDivProps { |
|
||||
title: string; |
|
||||
description: string; |
|
||||
hasMultipleSeries: boolean; |
|
||||
series: ISeries[]; |
|
||||
} |
|
||||
|
|
||||
export const Chart = ({ |
|
||||
title, |
|
||||
description, |
|
||||
hasMultipleSeries, |
|
||||
series, |
|
||||
...props |
|
||||
}: ChartProps): JSX.Element => { |
|
||||
const [activeSeries, setActiveSeries] = React.useState<ISeries>(series[0]); |
|
||||
return ( |
|
||||
<div className="dark" {...props}> |
|
||||
<Card |
|
||||
title={title} |
|
||||
description={description} |
|
||||
buttons={ |
|
||||
hasMultipleSeries ? ( |
|
||||
<div className="flex space-x-2"> |
|
||||
{series.map((data, index) => ( |
|
||||
<Button |
|
||||
active={data.name === activeSeries.name} |
|
||||
key={index} |
|
||||
className="font-medium" |
|
||||
onClick={(): void => { |
|
||||
setActiveSeries(series[index]); |
|
||||
}} |
|
||||
> |
|
||||
{data.name} |
|
||||
</Button> |
|
||||
))} |
|
||||
</div> |
|
||||
) : undefined |
|
||||
} |
|
||||
> |
|
||||
<div className="h-80"> |
|
||||
<ApexChart |
|
||||
height="96%" |
|
||||
type="area" |
|
||||
options={{ |
|
||||
chart: { |
|
||||
animations: { |
|
||||
speed: 400, |
|
||||
animateGradually: { |
|
||||
enabled: false, |
|
||||
}, |
|
||||
}, |
|
||||
toolbar: { |
|
||||
show: false, |
|
||||
}, |
|
||||
zoom: { |
|
||||
enabled: false, |
|
||||
}, |
|
||||
}, |
|
||||
colors: ['#818CF8'], |
|
||||
dataLabels: { |
|
||||
enabled: false, |
|
||||
}, |
|
||||
fill: { |
|
||||
colors: ['#312E81'], |
|
||||
}, |
|
||||
grid: { |
|
||||
padding: { |
|
||||
top: 10, |
|
||||
left: 0, |
|
||||
right: 0, |
|
||||
}, |
|
||||
|
|
||||
xaxis: { |
|
||||
lines: { |
|
||||
show: false, |
|
||||
}, |
|
||||
}, |
|
||||
yaxis: { |
|
||||
lines: { |
|
||||
show: false, |
|
||||
}, |
|
||||
}, |
|
||||
}, |
|
||||
|
|
||||
stroke: { |
|
||||
width: 2, |
|
||||
}, |
|
||||
tooltip: { |
|
||||
followCursor: true, |
|
||||
theme: 'dark', |
|
||||
x: { |
|
||||
format: 'MMM dd, yyyy', |
|
||||
}, |
|
||||
y: { |
|
||||
formatter: (value: number): string => `${value}`, |
|
||||
}, |
|
||||
}, |
|
||||
xaxis: { |
|
||||
axisBorder: { |
|
||||
show: false, |
|
||||
}, |
|
||||
axisTicks: { |
|
||||
show: false, |
|
||||
}, |
|
||||
crosshairs: { |
|
||||
stroke: { |
|
||||
color: '#475569', |
|
||||
dashArray: 0, |
|
||||
width: 2, |
|
||||
}, |
|
||||
}, |
|
||||
labels: { |
|
||||
style: { |
|
||||
colors: '#CBD5E1', |
|
||||
}, |
|
||||
}, |
|
||||
tooltip: { |
|
||||
enabled: false, |
|
||||
}, |
|
||||
type: 'datetime', |
|
||||
}, |
|
||||
yaxis: { |
|
||||
axisTicks: { |
|
||||
show: false, |
|
||||
}, |
|
||||
axisBorder: { |
|
||||
show: false, |
|
||||
}, |
|
||||
show: false, |
|
||||
}, |
|
||||
}} |
|
||||
series={[activeSeries]} |
|
||||
/> |
|
||||
</div> |
|
||||
</Card> |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
@ -0,0 +1,21 @@ |
|||||
|
import path from 'path'; |
||||
|
import { defineConfig } from 'vite'; |
||||
|
|
||||
|
import react from '@vitejs/plugin-react'; |
||||
|
|
||||
|
// https://vitejs.dev/config/
|
||||
|
export default defineConfig({ |
||||
|
plugins: [react()], |
||||
|
build: { |
||||
|
target: 'esnext', |
||||
|
assetsDir: '', |
||||
|
}, |
||||
|
resolve: { |
||||
|
alias: { |
||||
|
'@app': path.resolve(__dirname, './src'), |
||||
|
'@pages': path.resolve(__dirname, './src/pages'), |
||||
|
'@components': path.resolve(__dirname, './src/components'), |
||||
|
'@core': path.resolve(__dirname, './src/core'), |
||||
|
}, |
||||
|
}, |
||||
|
}); |
||||
Loading…
Reference in new issue