byhe/chartjs-sveltekit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

upload

Browse Source
This commit is contained in:
Henrik Bygren 2022-11-29 12:07:52 +01:00
commit 51640b4bf2
11 changed files with 1788 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
.gitignore vendored Normal file
View File

@ -0,0 +1,10 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
vite.config.js.timestamp-*
vite.config.ts.timestamp-*

1
.npmrc Normal file
View File

@ -0,0 +1 @@
engine-strict=true

38
README.md Normal file
View File

@ -0,0 +1,38 @@
# create-svelte
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
## Creating a project
If you're seeing this, you've probably already done this step. Congrats!
```bash
# create a new project in the current directory
npm create svelte@latest
# create a new project in my-app
npm create svelte@latest my-app
```
## Developing
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
```bash
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
```
## Building
To create a production version of your app:
```bash
npm run build
```
You can preview the production build with `npm run preview`.
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

1447
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

17
package.json Normal file
View File

@ -0,0 +1,17 @@
{
"name": "chart-js-svelte",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview"
},
"devDependencies": {
"@sveltejs/adapter-auto": "next",
"@sveltejs/kit": "next",
"svelte": "^3.53.1",
"vite": "^3.2.4"
},
"type": "module"
}

12
src/app.html Normal file
View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

245
src/routes/+page.svelte Normal file
View File

@ -0,0 +1,245 @@
<script>
import { onMount } from "svelte";
onMount(init);
let covidChart = null;
let color = [
"#FF33FF",
"#66664D",
"#991AFF",
"#E666FF",
"#4DB3FF",
"#1AB399",
"#FF6633",
"#FFB399",
"#3e95cd",
"#8e5ea2",
];
let maxCharts = 10;
let dataSetList = [];
let countryJSON;
function init() {
getCountries();
createChart();
updateChart();
document.getElementById("add").addEventListener("click", addCountry);
document
.getElementById("delete")
.addEventListener("click", deleteCountry);
document.querySelectorAll(".inp").forEach((item) => {
item.addEventListener("change", updateDateAndData);
});
}
function deleteCountry() {
let e = document.getElementById("c2");
let country = e.options[e.selectedIndex].value;
for (let i = 0; i < dataSetList.length; i++) {
if (dataSetList[i].label == country) {
color.push(dataSetList[i].borderColor);
dataSetList.splice(i, 1);
e.remove(e.selectedIndex);
updateChart();
break;
}
}
}
function addCountry() {
let country = document.getElementById("c1").value;
let isNew = true;
for (let i = 0; i < dataSetList.length; i++) {
if (dataSetList[i].label == country) {
isNew = false;
}
}
if (
dataSetList.length <= 10 &&
isNew &&
countryJSON.hasOwnProperty(country)
) {
setCountryData(country, dataSetList.length);
let option = document.createElement("option");
option.value = country;
option.appendChild(document.createTextNode(country));
document.getElementById("c2").appendChild(option);
document.getElementById("c1").value = "";
}
}
async function getCountries() {
let url = "https://data.egyweb.se/api/getCountries.php";
//let url = "https://data.egyweb.se/api/getCountries.php";
let response = await fetch(url);
countryJSON = await response.json();
let dataList = document.getElementById("countryList_1");
for (name in countryJSON) {
// Skapar ett nytt option element
let option = document.createElement("option");
// Ger ett värde till option-elementet
option.value = name;
// Lägger till elementet till datalistan
dataList.appendChild(option);
}
addCountry();
}
function createChart() {
let ctx = document.getElementById("covidChart");
covidChart = new Chart(ctx, {
type: "line",
options: {
scales: {
xAxes: [
{
type: "time",
distribution: "series",
},
],
yAxes: [
{
ticks: {
beginAtZero: true,
},
},
],
},
},
});
}
function removeChartData() {
covidChart.data.datasets = [];
covidChart.update();
}
function addChartData(dataset) {
// "#3e95cd"
covidChart.data.datasets.push(dataset);
covidChart.update();
}
async function updateChart() {
removeChartData();
for (let i = 0; i < dataSetList.length; i++) {
addChartData(dataSetList[i]);
}
}
function updateDateAndData() {
covidChart.data.datasets = [];
for (let i = 0; i < dataSetList.length; i++) {
setCountryData(dataSetList[i].label, i, dataSetList[i].borderColor);
}
}
async function setCountryData(country, id, col = null) {
if (col == null) {
col = color.pop();
}
let per10000 = document.getElementById("per10000").checked;
let factorPer10000 = 1;
if (per10000) {
let response = await fetch(
"https://data.egyweb.se/api/getPopulation.php?country=" +
country
);
let json = await response.json();
factorPer10000 = 10 / json.population;
}
let start = document.getElementById("startDate").value;
let end = document.getElementById("endDate").value;
let type = document.getElementById("typeList").value;
let params = "&start=" + start + "&end=" + end + "&type=" + type;
let url =
"https://data.egyweb.se/api/time_serie_by_country.php?country=" +
country +
params;
let response = await fetch(url);
let json = await response.json();
json = json.map(function (obj) {
return { x: obj.date, y: obj.number * factorPer10000 };
});
let data = {
label: country,
borderColor: col,
fill: false,
data: json,
};
dataSetList[id] = data;
addChartData(dataSetList[id]);
}
</script>
<svelte:head><script src="https://data.egyweb.se/covid-19/js/Chart.bundle.js"></script></svelte:head>
<form onSubmit="return false;">
<fieldset>
<legend>Countries</legend>
<label for="c1" style="background-color: #0b743c;color:white;">Add</label>
<input type="text" list="countryList_1" id="c1" value="Sweden" />
<datalist id="countryList_1" />
<button id="add"> + </button>
<label for="c2" style="background-color: #772b2b;color:white;">Remove</label>
<select id="c2" />
<button id="delete"> - </button>
</fieldset>
<fieldset>
<legend>Date and Data</legend>
<label for="startDate">Start</label>
<input type="date" id="startDate" value="2020-01-22" class="inp" />
<label for="endDate">End</label>
<input type="date" id="endDate" class="inp" />
<label for="typeList">Data</label>
<select id="typeList" class="inp">
<option selected="selected" value="confirmed">confirmed</option>
<option value="deaths">deaths</option>
<option value="recovered">recovered</option>
</select>
<input type="checkbox" id="per10000" class="inp" />
<label for="per10000">per 10 000</label>
</fieldset>
</form>
<section style="width: 95%;">
<canvas id="covidChart" />
</section>

0
src/routes/page.js Normal file
View File

BIN
static/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

10
svelte.config.js Normal file
View File

@ -0,0 +1,10 @@
import adapter from '@sveltejs/adapter-auto';
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
adapter: adapter()
}
};
export default config;

8
vite.config.js Normal file
View File

@ -0,0 +1,8 @@
import { sveltekit } from '@sveltejs/kit/vite';
/** @type {import('vite').UserConfig} */
const config = {
plugins: [sveltekit()]
};
export default config;