Sacha Weatherstone
5 years ago
33 changed files with 401 additions and 2651 deletions
@ -1,4 +1,3 @@ |
|||
.snowpack |
|||
build |
|||
dist |
|||
node_modules |
|||
.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