mirror of
https://github.com/jcreek/BankStatementAnalyser.git
synced 2026-07-12 18:43:49 +00:00
feat(*): Add sample chart and sheets data
This commit is contained in:
Josh Creek
Generated
+19161
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,53 @@
|
||||
{
|
||||
"name": "BankStatementAnalyser",
|
||||
"version": "1.5.0",
|
||||
"description": "A tiny web app to display graphs and stats from a bank statement/csv/google sheet.",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"build": "webpack --config webpack.prod.js",
|
||||
"dev": "webpack serve --hot --config webpack.dev.js",
|
||||
"lint": "eslint --ignore-path .eslintignore --ext .js,.ts ."
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/jcreek/BankStatementAnalyser"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "jcreek",
|
||||
"license": "GNU General Public License v3.0",
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.18.5",
|
||||
"@babel/preset-env": "^7.18.2",
|
||||
"@babel/preset-typescript": "^7.17.12",
|
||||
"@typescript-eslint/eslint-plugin": "^5.28.0",
|
||||
"@typescript-eslint/parser": "^5.28.0",
|
||||
"babel-loader": "^8.2.5",
|
||||
"css-loader": "^6.7.1",
|
||||
"eslint": "^8.17.0",
|
||||
"eslint-config-airbnb-base": "^15.0.0",
|
||||
"eslint-plugin-import": "^2.26.0",
|
||||
"file-loader": "^6.2.0",
|
||||
"sass": "^1.52.3",
|
||||
"sass-loader": "^13.0.0",
|
||||
"style-loader": "^3.3.1",
|
||||
"typescript": "^4.7.3",
|
||||
"webpack": "^5.73.0",
|
||||
"webpack-cli": "^4.10.0",
|
||||
"webpack-dev-server": "^4.9.2",
|
||||
"webpack-webmanifest-loader": "^2.0.2",
|
||||
"workbox-cli": "^6.5.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/chart.js": "^2.9.37",
|
||||
"chart.js": "^4.1.0",
|
||||
"html-webpack-plugin": "^5.5.0",
|
||||
"react-dev-utils": "^12.0.1",
|
||||
"webpack-manifest-plugin": "^5.0.0",
|
||||
"webpack-merge": "^5.8.0",
|
||||
"workbox-navigation-preload": "^6.5.4",
|
||||
"workbox-precaching": "^6.5.4",
|
||||
"workbox-routing": "^6.5.4",
|
||||
"workbox-strategies": "^6.5.4",
|
||||
"workbox-webpack-plugin": "^6.5.4"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import loadServiceWorker from './loadServiceWorker';
|
||||
import Chart from 'chart.js/auto';
|
||||
|
||||
require('./assets/favicon.ico');
|
||||
require('./assets/android-chrome-192x192.png');
|
||||
require('./assets/android-chrome-512x512.png');
|
||||
require('./assets/apple-touch-icon.png');
|
||||
require('./assets/favicon-16x16.png');
|
||||
require('./assets/favicon-32x32.png');
|
||||
require('./styles/main.scss');
|
||||
require('./styles/buttons.scss');
|
||||
require('./styles/modal.scss');
|
||||
require('./styles/spinner.scss');
|
||||
|
||||
const ctx: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById('myChart');
|
||||
|
||||
new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
|
||||
datasets: [{
|
||||
label: '# of Votes',
|
||||
data: [12, 19, 3, 5, 2, 3],
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
loadServiceWorker();
|
||||
}
|
||||
@@ -0,0 +1,194 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<!-- <script async src="https://www.googletagmanager.com/gtag/js?id=G-EZ2WT7NQMK"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'G-EZ2WT7NQMK');
|
||||
</script> -->
|
||||
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="A tiny web app to display graphs and stats from a bank statement/csv/google sheet.">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<link rel="manifest" href="<%= require('../src/assets/manifest.webmanifest') %>" />
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<header class="topbar-container">
|
||||
<div class="topbar-items"><h1><a href="/">Bank Statement Analyser</a></h1></div>
|
||||
<p id="install-app-btn-container" class="topbar-items">
|
||||
<button id="install-offline-app" class="button button-black" role="button">
|
||||
<span>Install the app (you can even use it offline!)</span>
|
||||
</button>
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<p>Sheets API Quickstart</p>
|
||||
|
||||
<!--Add buttons to initiate auth sequence and sign out-->
|
||||
<button id="authorize_button" onclick="handleAuthClick()">Authorize</button>
|
||||
<button id="signout_button" onclick="handleSignoutClick()">Sign Out</button>
|
||||
|
||||
<pre id="content" style="white-space: pre-wrap;"></pre>
|
||||
|
||||
<div>
|
||||
<canvas id="myChart"></canvas>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<footer class="footer-container">
|
||||
<hr>
|
||||
<span class="footer-items">Copyright © 2022 Josh Creek</span>
|
||||
<!-- <span> | </span> -->
|
||||
<!-- <span class="footer-items"><a href="/privacy-policy.html">Privacy Policy</a></span> -->
|
||||
</footer>
|
||||
|
||||
<script type="text/javascript">
|
||||
/* exported gapiLoaded */
|
||||
/* exported gisLoaded */
|
||||
/* exported handleAuthClick */
|
||||
/* exported handleSignoutClick */
|
||||
|
||||
// TODO(developer): Set to client ID and API key from the Developer Console
|
||||
const CLIENT_ID = '<YOUR_CLIENT_ID>';
|
||||
const API_KEY = '<YOUR_API_KEY>';
|
||||
|
||||
// Discovery doc URL for APIs used by the quickstart
|
||||
const DISCOVERY_DOC = 'https://sheets.googleapis.com/$discovery/rest?version=v4';
|
||||
|
||||
// Authorization scopes required by the API; multiple scopes can be
|
||||
// included, separated by spaces.
|
||||
const SCOPES = 'https://www.googleapis.com/auth/spreadsheets.readonly';
|
||||
|
||||
let tokenClient;
|
||||
let gapiInited = false;
|
||||
let gisInited = false;
|
||||
|
||||
document.getElementById('authorize_button').style.visibility = 'hidden';
|
||||
document.getElementById('signout_button').style.visibility = 'hidden';
|
||||
|
||||
/**
|
||||
* Callback after api.js is loaded.
|
||||
*/
|
||||
function gapiLoaded() {
|
||||
gapi.load('client', intializeGapiClient);
|
||||
}
|
||||
|
||||
/**
|
||||
* Callback after the API client is loaded. Loads the
|
||||
* discovery doc to initialize the API.
|
||||
*/
|
||||
async function intializeGapiClient() {
|
||||
await gapi.client.init({
|
||||
apiKey: API_KEY,
|
||||
discoveryDocs: [DISCOVERY_DOC],
|
||||
});
|
||||
gapiInited = true;
|
||||
maybeEnableButtons();
|
||||
}
|
||||
|
||||
/**
|
||||
* Callback after Google Identity Services are loaded.
|
||||
*/
|
||||
function gisLoaded() {
|
||||
tokenClient = google.accounts.oauth2.initTokenClient({
|
||||
client_id: CLIENT_ID,
|
||||
scope: SCOPES,
|
||||
callback: '', // defined later
|
||||
});
|
||||
gisInited = true;
|
||||
maybeEnableButtons();
|
||||
}
|
||||
|
||||
/**
|
||||
* Enables user interaction after all libraries are loaded.
|
||||
*/
|
||||
function maybeEnableButtons() {
|
||||
if (gapiInited && gisInited) {
|
||||
document.getElementById('authorize_button').style.visibility = 'visible';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Sign in the user upon button click.
|
||||
*/
|
||||
function handleAuthClick() {
|
||||
tokenClient.callback = async (resp) => {
|
||||
if (resp.error !== undefined) {
|
||||
throw (resp);
|
||||
}
|
||||
document.getElementById('signout_button').style.visibility = 'visible';
|
||||
document.getElementById('authorize_button').innerText = 'Refresh';
|
||||
await listMajors();
|
||||
};
|
||||
|
||||
if (gapi.client.getToken() === null) {
|
||||
// Prompt the user to select a Google Account and ask for consent to share their data
|
||||
// when establishing a new session.
|
||||
tokenClient.requestAccessToken({prompt: 'consent'});
|
||||
} else {
|
||||
// Skip display of account chooser and consent dialog for an existing session.
|
||||
tokenClient.requestAccessToken({prompt: ''});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Sign out the user upon button click.
|
||||
*/
|
||||
function handleSignoutClick() {
|
||||
const token = gapi.client.getToken();
|
||||
if (token !== null) {
|
||||
google.accounts.oauth2.revoke(token.access_token);
|
||||
gapi.client.setToken('');
|
||||
document.getElementById('content').innerText = '';
|
||||
document.getElementById('authorize_button').innerText = 'Authorize';
|
||||
document.getElementById('signout_button').style.visibility = 'hidden';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Print the names and majors of students in a sample spreadsheet:
|
||||
* https://docs.google.com/spreadsheets/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms/edit
|
||||
*/
|
||||
async function listMajors() {
|
||||
let response;
|
||||
try {
|
||||
// Fetch first 10 files
|
||||
response = await gapi.client.sheets.spreadsheets.values.get({
|
||||
spreadsheetId: '1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms',
|
||||
range: 'Class Data!A2:E',
|
||||
});
|
||||
} catch (err) {
|
||||
document.getElementById('content').innerText = err.message;
|
||||
return;
|
||||
}
|
||||
const range = response.result;
|
||||
if (!range || !range.values || range.values.length == 0) {
|
||||
document.getElementById('content').innerText = 'No values found.';
|
||||
return;
|
||||
}
|
||||
// Flatten to string to display
|
||||
const output = range.values.reduce(
|
||||
(str, row) => `${str}${row[0]}, ${row[4]}\n`,
|
||||
'Name, Major:\n');
|
||||
document.getElementById('content').innerText = output;
|
||||
}
|
||||
</script>
|
||||
<script async defer src="https://apis.google.com/js/api.js" onload="gapiLoaded()"></script>
|
||||
<script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user