Initial re-write of stats.thunderbird.net

.eslintrc.cjs

@@ -0,0 +1,22 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true
+  },
+  root: true,
+  extends: "airbnb-base",
+  overrides: [],
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module"
+  },
+  rules: {
+    "max-len": ["error", { code: 120 }],
+    "no-underscore-dangle": ["error", { "allowAfterThis": true }],
+    "import/no-unresolved": 0, // Turn off "Unable to resolve path to module ..." error
+    "import/extensions": 0, // Turn off "Missing file extension for ..." error
+    "class-methods-use-this": 0,
+  },
+  ignorePatterns: ["node_modules", "src/dist", "docs", "tools"],
+  settings: {}
+};

.gitignore

@@ -103,3 +103,31 @@ venv.bak/
 
 # mypy
 .mypy_cache/
+
+.idea
+
+# Vite
+# 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?

README.md

@@ -1,2 +1,41 @@
-# stats
-User count stats collector and display for Thunderbird.
+# Thunderbird Stats
+
+Thunderbird's html and vanilla js stats dashboard.
+
+Thunderbird Stats uses Vite to streamline development and import node modules as needed.
+
+## Install
+
+```
+npm install
+npm run dev
+```
+
+## Charts
+
+### Chart Component
+Charts are JavaScript web components that inherit a `base-chart.js`, they are located in `src/assets/js/charts`. 
+There's also a `index.js` file that will handle importing the chart for stats.
+
+Below is a small interface for how the charts are generally structured:
+```javascript
+class Interface extends BaseChart {
+  constructor(); // Pass a html template to BaseChart's constructor, and then call fetchData
+  fetchData();   // Fetches the data required for the chart. Place the data into a class variable.
+  create();      // Setup options, and data for the ChartJS chart. Make sure to call `this._createChart` to create the chart.
+};
+```
+
+### Transformers
+Transformers are a JavaScript class that handles processing the data from source to something ChartJS can handle. 
+
+Below is a small interface for how transformers are generally structured:
+```javascript
+class Interface {
+  constructor(data);  // Pass in the data
+  toChartData();      // Transforms the data to ChartJS data format
+}
+```
+
+### Providers
+Providers are a JavaScript class that provides data upon a ready signal. Currently, the only example is the slot data provider.