Commit 6597ba65 authored by Melanie E Magdalena's avatar Melanie E Magdalena 🚀
Browse files

Manifest edits + responsive chart

parent 204c7dcb
This source diff could not be displayed because it is too large. You can view the blob instead.
icon.png

24.7 KB

......@@ -7,7 +7,6 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Data Viz</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js" charset="utf-8"></script>
</head>
<body>
......@@ -24,10 +23,10 @@
<label>Get your Base from <a href="https://airtable.com/api" target="_blank">API Documentation:</a>
<input class="base-name" type="text" id="base-input" placeholder="Base Name">
</label>
<label>Enter the name of the Table:
<label>Enter the Table name:
<input class="table-name" type="text" id="table-input" placeholder="Table Name">
</label>
<label>Enter Label column name:
<label>Enter the Label column name:
<input class="label-name" type="text" id="label-input" placeholder="Label Name">
</label>
<label>Enter the Data column name:
......@@ -35,11 +34,15 @@
</label>
<hr>
<button type="submit" class="submit-button">Visualize It!</button>
<p class="help-label"><a href="https://airtable.com/shr7nUJcyPzSaAnqq" target="_blank">See Sample Base</a></p>
</form>
</div>
<div class="slide-in-box" id="about">
<div class="about-text"><p>Sometimes you need a quick chart to visualize your data. Sometimes that data is in Airtable! (And if it isn't and you dislike what an embedded chart from Google Sheets looks like...upload your CSVs into Airtable!)</p>
<p>Visualize It is a quick Airtable chart generator for people who don't have the luxury of using Blocks.</p></div>
<div class="about-text">
<p>Sometimes you need a quick chart to visualize your data. Sometimes that data is in Airtable! (And if it isn't and you dislike what an embedded chart from Google Sheets looks like...upload your CSVs into Airtable!)</p>
<p>Visualize It is a quick Airtable chart generator for people who don't have the luxury of using Blocks.</p>
<p>Turtle Icon made by <a href="https://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></p>
</div>
</div>
<div class="canvas-wrapper">
<canvas id="myChart" class="responsive-frame" width="300" height="300"></canvas>
......@@ -48,149 +51,8 @@
<p>Special thanks to everyone in Twitch chat who helped with JavaScript shenanigans! Shoutouts to justboof_, badcodebot, TwixMan83, Honneamise, EdzNux, and more!!</p>
</footer>
<script>
window.onload = function() {
let request = new XMLHttpRequest();
request.open('GET', `https://api.airtable.com/v0/${BASE_NAME}/${TABLE_NAME}?api_key=${API_KEY}`, true);
request.send();
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
// Connected
console.log('Connected to Airtable!');
// Got records
console.log(request.responseText);
let array = JSON.parse(request.responseText).records;
var labelsArray = [];
var dataArray = [];
array.forEach(function(record, records) {
const labelName = record.fields[LABEL_NAME];
const dataName = record.fields[DATA_NAME];
labelsArray.push(labelName);
dataArray.push(dataName);
console.log('Found: ' + labelName + ' ' + dataName);
})
var ctx = document.getElementById("myChart").getContext('2d');
Chart.defaults.global.defaultFontColor = "white";
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labelsArray,
datasets: [{
label: `${DATA_NAME} of ${LABEL_NAME}`,
data: dataArray,
backgroundColor: 'rgba(255, 255, 255, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
title: {
display: true,
fontSize: 20,
text: CHART_TITLE
},
legend: {
display: true
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
};
}
};
// Form Controls
function openSettings() {
document.getElementById("settings").classList.toggle("settings-open");
}
function openAbout() {
document.getElementById("about").classList.toggle("settings-open");
}
document.getElementById("settings-button").addEventListener("click", openSettings);
document.getElementById("about-button").addEventListener("click", openAbout);
var CHART_TITLE;
var API_KEY;
var BASE_NAME;
var TABLE_NAME;
var LABEL_NAME;
var DATA_NAME;
function saveData() {
localStorage.setItem("inputTitle", CHART_TITLE);
localStorage.setItem("inputKey", API_KEY);
localStorage.setItem("inputBase", BASE_NAME);
localStorage.setItem("inputTable", TABLE_NAME);
localStorage.setItem("inputLabel", LABEL_NAME);
localStorage.setItem("inputData", DATA_NAME);
}
var CHART_TITLE = localStorage.getItem("inputTitle");
if (CHART_TITLE == null) {
CHART_TITLE = "Pokemon per Generation";
}
var API_KEY = localStorage.getItem("inputKey");
if (API_KEY == null) {
API_KEY = "keyph9gkm2oQ2i7GD";
}
var BASE_NAME = localStorage.getItem("inputBase");
if (BASE_NAME == null) {
BASE_NAME = "app3Vfib1mRCMnZDp";
}
var TABLE_NAME = localStorage.getItem("inputTable");
if (TABLE_NAME == null) {
TABLE_NAME = "tblHJoGLi6wmaAWxQ";
}
var LABEL_NAME = localStorage.getItem("inputLabel");
if (LABEL_NAME == null) {
LABEL_NAME = "Name";
}
var DATA_NAME = localStorage.getItem("inputData");
if (DATA_NAME == null) {
DATA_NAME = "Amount";
}
function changeData() {
CHART_TITLE = document.getElementById("chart-input").value;
API_KEY = document.getElementById("app-input").value;
BASE_NAME = document.getElementById("base-input").value;
TABLE_NAME = document.getElementById("table-input").value;
LABEL_NAME = document.getElementById("label-input").value;
DATA_NAME = document.getElementById("data-input").value;
saveData();
}
document.getElementById("settings-form").addEventListener("submit", function(e) {
e.preventDefault();
changeData();
window.location.reload(false);
})
</script>
<script src="chart.bundle.min.js"></script>
<script src="main.js"></script>
</body>
......
window.onload = function() {
let request = new XMLHttpRequest();
request.open('GET', `https://api.airtable.com/v0/${BASE_NAME}/${TABLE_NAME}?api_key=${API_KEY}`, true);
request.send();
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
let array = JSON.parse(request.responseText).records;
var labelsArray = [];
var dataArray = [];
array.forEach(function(record, records) {
const labelName = record.fields[LABEL_NAME];
const dataName = record.fields[DATA_NAME];
labelsArray.push(labelName);
dataArray.push(dataName);
})
var ctx = document.getElementById("myChart").getContext('2d');
Chart.defaults.global.defaultFontColor = "white";
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labelsArray,
datasets: [{
label: `${DATA_NAME} of ${LABEL_NAME}`,
data: dataArray,
backgroundColor: 'rgba(255, 255, 255, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
title: {
display: true,
fontSize: 20,
text: CHART_TITLE
},
legend: {
display: true
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
};
}
};
// Form Controls
function openSettings() {
document.getElementById("settings").classList.toggle("settings-open");
}
function openAbout() {
document.getElementById("about").classList.toggle("settings-open");
}
document.getElementById("settings-button").addEventListener("click", openSettings);
document.getElementById("about-button").addEventListener("click", openAbout);
var CHART_TITLE;
var API_KEY;
var BASE_NAME;
var TABLE_NAME;
var LABEL_NAME;
var DATA_NAME;
function saveData() {
localStorage.setItem("inputTitle", CHART_TITLE);
localStorage.setItem("inputKey", API_KEY);
localStorage.setItem("inputBase", BASE_NAME);
localStorage.setItem("inputTable", TABLE_NAME);
localStorage.setItem("inputLabel", LABEL_NAME);
localStorage.setItem("inputData", DATA_NAME);
}
var CHART_TITLE = localStorage.getItem("inputTitle");
if (CHART_TITLE == null) {
CHART_TITLE = "Pokemon per Generation";
}
var API_KEY = localStorage.getItem("inputKey");
if (API_KEY == null) {
API_KEY = "keyph9gkm2oQ2i7GD";
}
var BASE_NAME = localStorage.getItem("inputBase");
if (BASE_NAME == null) {
BASE_NAME = "app3Vfib1mRCMnZDp";
}
var TABLE_NAME = localStorage.getItem("inputTable");
if (TABLE_NAME == null) {
TABLE_NAME = "tblHJoGLi6wmaAWxQ";
}
var LABEL_NAME = localStorage.getItem("inputLabel");
if (LABEL_NAME == null) {
LABEL_NAME = "Name";
}
var DATA_NAME = localStorage.getItem("inputData");
if (DATA_NAME == null) {
DATA_NAME = "Amount";
}
function changeData() {
CHART_TITLE = document.getElementById("chart-input").value;
API_KEY = document.getElementById("app-input").value;
BASE_NAME = document.getElementById("base-input").value;
TABLE_NAME = document.getElementById("table-input").value;
LABEL_NAME = document.getElementById("label-input").value;
DATA_NAME = document.getElementById("data-input").value;
saveData();
}
document.getElementById("settings-form").addEventListener("submit", function(e) {
e.preventDefault();
changeData();
window.location.reload(false);
})
{
"name": "Data Viz for Airtable",
"version": "1.0",
"description": "A simple Chrome Extension that shows you a chart of data from an Airtable base.",
"manifest_version": 2,
"incognito": "split",
"chrome_url_overrides": {
"newtab": "index.html"
},
"permissions": [
"activeTab"
],
"icons": {
"128": "icon.png"
}
}
......@@ -29,7 +29,7 @@ body {
#about {
flex-direction: column;
background-color: rgba(255, 255, 255, 0.5);
background-color: rgba(255, 255, 255, 0.75);
position: absolute;
top: 3.5em;
left: -20px;
......@@ -56,7 +56,7 @@ button {
form {
position: absolute;
top: 1em;
background-color: rgba(255, 255, 255, 0.5);
background-color: rgba(255, 255, 255, 0.75);
padding: 1em;
z-index: 5;
}
......@@ -95,20 +95,55 @@ form button:hover {
transition: all 0.5s;
}
.help-label {
font-size: 0.8em;
}
.canvas-wrapper {
position: relative;
height: 30vh;
width: 30vw;
margin: 2rem auto;
z-index: 1;
}
@media only screen and (min-width: 300px) {
.canvas-wrapper {
height: 80vh;
width: auto;
}
}
@media only screen and (min-width: 600px) {
.canvas-wrapper {
height: 50vh;
width: 80vw;
}
}
@media only screen and (min-width: 768px) {
.canvas-wrapper {
height: 50vh;
width: 60vw;
}
}
@media only screen and (min-width: 992px) {
.canvas-wrapper {
height: 80vh;
width: 40vw;
}
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: rgba(255, 255, 255, 0.5);
color: #25a5c8;
text-align: center;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: rgba(255, 255, 255, 0.5);
color: #25a5c8;
text-align: center;
padding: 1em;
}
footer > * {
width: 90%;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment