wee chart renderer
This commit is contained in:
parent
362093abc6
commit
2af332d670
|
@ -8,7 +8,8 @@
|
||||||
"name": "svelte-app",
|
"name": "svelte-app",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"sirv-cli": "^2.0.0"
|
"sirv-cli": "^2.0.0",
|
||||||
|
"svelte-icons": "^2.1.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@rollup/plugin-commonjs": "^17.0.0",
|
"@rollup/plugin-commonjs": "^17.0.0",
|
||||||
|
@ -1205,6 +1206,11 @@
|
||||||
"node": ">= 8"
|
"node": ">= 8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/svelte-icons": {
|
||||||
|
"version": "2.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/svelte-icons/-/svelte-icons-2.1.0.tgz",
|
||||||
|
"integrity": "sha512-rHPQjweEc9fGSnvM0/4gA3pDHwyZyYsC5KhttCZRhSMJfLttJST5Uq0B16Czhw+HQ+HbSOk8kLigMlPs7gZtfg=="
|
||||||
|
},
|
||||||
"node_modules/svelte-preprocess": {
|
"node_modules/svelte-preprocess": {
|
||||||
"version": "4.10.4",
|
"version": "4.10.4",
|
||||||
"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.10.4.tgz",
|
"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.10.4.tgz",
|
||||||
|
@ -2245,6 +2251,11 @@
|
||||||
"integrity": "sha512-qKJzw6DpA33CIa+C/rGp4AUdSfii0DOTCzj/2YpSKKayw5WGSS624Et9L1nU1k2OVRS9vaENQXp2CVZNU+xvIg==",
|
"integrity": "sha512-qKJzw6DpA33CIa+C/rGp4AUdSfii0DOTCzj/2YpSKKayw5WGSS624Et9L1nU1k2OVRS9vaENQXp2CVZNU+xvIg==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"svelte-icons": {
|
||||||
|
"version": "2.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/svelte-icons/-/svelte-icons-2.1.0.tgz",
|
||||||
|
"integrity": "sha512-rHPQjweEc9fGSnvM0/4gA3pDHwyZyYsC5KhttCZRhSMJfLttJST5Uq0B16Czhw+HQ+HbSOk8kLigMlPs7gZtfg=="
|
||||||
|
},
|
||||||
"svelte-preprocess": {
|
"svelte-preprocess": {
|
||||||
"version": "4.10.4",
|
"version": "4.10.4",
|
||||||
"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.10.4.tgz",
|
"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.10.4.tgz",
|
||||||
|
|
|
@ -22,6 +22,7 @@
|
||||||
"svelte-preprocess": "^4.10.4"
|
"svelte-preprocess": "^4.10.4"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"sirv-cli": "^2.0.0"
|
"sirv-cli": "^2.0.0",
|
||||||
|
"svelte-icons": "^2.1.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,7 +18,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: rgb(0,100,200);
|
color: #d23e6e;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -27,7 +27,7 @@ a:hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
a:visited {
|
a:visited {
|
||||||
color: rgb(0,80,160);
|
color: #d23e6e;
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
|
|
|
@ -2,15 +2,51 @@
|
||||||
import { currentChartID } from './stores';
|
import { currentChartID } from './stores';
|
||||||
import ChartEdit from './ChartEdit.svelte';
|
import ChartEdit from './ChartEdit.svelte';
|
||||||
import ChartCreation from './ChartCreation.svelte';
|
import ChartCreation from './ChartCreation.svelte';
|
||||||
|
import IoMdHeart from 'svelte-icons/io/IoMdHeart.svelte';
|
||||||
|
import { H1 } from 'attractions';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.icon {
|
||||||
|
width: 0.8em;
|
||||||
|
height: 0.8em;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
footer {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 1em;
|
||||||
|
text-align: center;
|
||||||
|
color: #888;
|
||||||
|
position: absolute;
|
||||||
|
bottom: -1.2em;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
margin-top: 0.5em;
|
||||||
|
margin-bottom: 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
position: relative;
|
||||||
|
min-height: 100%;
|
||||||
|
margin-bottom: 1.2em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
|
<header>
|
||||||
|
<H1>chartmaker</H1>
|
||||||
|
</header>
|
||||||
|
|
||||||
{#if $currentChartID}
|
{#if $currentChartID}
|
||||||
<ChartEdit/>
|
<ChartEdit/>
|
||||||
{:else}
|
{:else}
|
||||||
<ChartCreation/>
|
<ChartCreation/>
|
||||||
{/if}
|
{/if}
|
||||||
</main>
|
|
||||||
|
|
||||||
<style>
|
<footer>
|
||||||
</style>
|
made with <div class="icon"><IoMdHeart/></div> by oatmealine. <a target="_blank" href="https://git.oat.zone/oat/project-databased-fe">source</a>
|
||||||
|
</footer>
|
||||||
|
</main>
|
|
@ -0,0 +1,55 @@
|
||||||
|
<script>
|
||||||
|
export let topText;
|
||||||
|
export let leftText;
|
||||||
|
export let rightText;
|
||||||
|
export let bottomText;
|
||||||
|
export let fontSize;
|
||||||
|
|
||||||
|
import { onMount } from "svelte";
|
||||||
|
let canvas;
|
||||||
|
|
||||||
|
let sw = 512;
|
||||||
|
let sh = 512;
|
||||||
|
const pad = 32;
|
||||||
|
|
||||||
|
function render(ctx) {
|
||||||
|
ctx.lineWidth = 2;
|
||||||
|
ctx.lineCap = 'round';
|
||||||
|
ctx.fillStyle = '#999';
|
||||||
|
ctx.strokeStyle = '#999';
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(pad, sh/2);
|
||||||
|
ctx.lineTo(sw - pad, sh/2);
|
||||||
|
ctx.moveTo(sw/2, pad);
|
||||||
|
ctx.lineTo(sw/2, sh - pad);
|
||||||
|
ctx.stroke();
|
||||||
|
|
||||||
|
ctx.font = fontSize + 'px Inter';
|
||||||
|
ctx.textAlign = 'center';
|
||||||
|
ctx.textBaseline = 'middle';
|
||||||
|
ctx.fillText(topText, sw/2, pad/2);
|
||||||
|
ctx.fillText(bottomText, sw/2, sh - pad/2);
|
||||||
|
|
||||||
|
ctx.textBaseline = 'bottom';
|
||||||
|
ctx.textAlign = 'left';
|
||||||
|
ctx.fillText(leftText, pad/2, sh/2 - pad/4);
|
||||||
|
ctx.textAlign = 'right';
|
||||||
|
ctx.fillText(rightText, sw - pad/2, sh/2 - pad/4);
|
||||||
|
}
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
|
||||||
|
canvas.style.width = '100%';
|
||||||
|
canvas.style.height = '100%';
|
||||||
|
canvas.width = canvas.offsetWidth;
|
||||||
|
canvas.height = canvas.offsetWidth;
|
||||||
|
sw = canvas.width;
|
||||||
|
sh = canvas.height;
|
||||||
|
|
||||||
|
render(ctx);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<canvas bind:this={canvas} id="canvas" width="512" height="512"></canvas>
|
|
@ -1,9 +1,103 @@
|
||||||
<script>
|
<script>
|
||||||
import { Button } from 'attractions';
|
import { FormField, TextField, Button, Slider } from 'attractions';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
import IoMdCheckmark from 'svelte-icons/io/IoMdCheckmark.svelte'
|
||||||
|
import Chart from './Chart.svelte';
|
||||||
|
|
||||||
|
const examples = [
|
||||||
|
['wouldn\'t make a pipebomb', 'would make a pipebomb',
|
||||||
|
'would eat a pipebomb', 'wouldn\'t eat a pipebomb'],
|
||||||
|
['knows what sex is', 'doesn\'t know what sex is',
|
||||||
|
'has sex', 'doesn\'t have sex'],
|
||||||
|
['doesn\'t want to cause chaos', 'wants to cause chaos',
|
||||||
|
'causes chaos', 'doesn\'t cause chaos'],
|
||||||
|
['lawful', 'chaotic',
|
||||||
|
'good', 'evil'],
|
||||||
|
['women want me', 'women don\'t want me',
|
||||||
|
'fish want me', 'fish don\'t want me'],
|
||||||
|
];
|
||||||
|
|
||||||
|
let example = [];
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
example = examples[Math.floor(Math.random() * examples.length)];
|
||||||
|
});
|
||||||
|
|
||||||
|
let top = '';
|
||||||
|
let left = '';
|
||||||
|
let right = '';
|
||||||
|
let bot = '';
|
||||||
|
let fontSize = 12;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Button>click me</Button>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
#form {
|
||||||
|
text-align: center;
|
||||||
|
max-width: 680px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
#preview {
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
max-height: 512px;
|
||||||
|
}
|
||||||
|
#previewcontainer {
|
||||||
|
width: 512px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id="form">
|
||||||
|
let's make a chart!
|
||||||
|
|
||||||
|
<br><br>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
name="X Axis"
|
||||||
|
help="Left to right"
|
||||||
|
>
|
||||||
|
<TextField bind:value={left} placeholder={example[0] || ''} />
|
||||||
|
<TextField bind:value={right} placeholder={example[1] || ''} />
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
name="Y Axis"
|
||||||
|
help="Top to bottom"
|
||||||
|
>
|
||||||
|
<TextField bind:value={top} placeholder={example[2] || ''} />
|
||||||
|
<TextField bind:value={bot} placeholder={example[3] || ''} />
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
name="Font Size"
|
||||||
|
help="Adjust if necessary"
|
||||||
|
>
|
||||||
|
<Slider
|
||||||
|
bind:value={fontSize}
|
||||||
|
min={8}
|
||||||
|
max={20}
|
||||||
|
step={1}
|
||||||
|
tooltips="active"
|
||||||
|
ticks={{mode: 'step', step: 1, subDensity: 100/(20-8)}}
|
||||||
|
>
|
||||||
|
<span slot="tooltip-content" let:value>{value}px</span>
|
||||||
|
</Slider>
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
<div style="width: 100%; display: flex; justify-content: center">
|
||||||
|
<Button filled>
|
||||||
|
<div style="width: 16px; height: 16px; display: block-inline; padding-right: 6px;"><IoMdCheckmark/></div> create!
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="preview">
|
||||||
|
<div id="previewcontainer">
|
||||||
|
{#key top + left + right + bot + fontSize} <!-- awful hack -->
|
||||||
|
<Chart topText={top} leftText={left} rightText={right} bottomText={bot} fontSize={fontSize}/>
|
||||||
|
{/key}
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -0,0 +1,4 @@
|
||||||
|
@forward '~attractions/_variables' with (
|
||||||
|
$main: #d23e6e,
|
||||||
|
$font: inherit,
|
||||||
|
);
|
|
@ -1,5 +1,16 @@
|
||||||
const sveltePreprocess = require('svelte-preprocess');
|
const sveltePreprocess = require('svelte-preprocess');
|
||||||
|
const makeAttractionsImporter = require('attractions/importer.js');
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
preprocess: [sveltePreprocess()],
|
preprocess: [
|
||||||
|
sveltePreprocess({
|
||||||
|
scss: {
|
||||||
|
importer: makeAttractionsImporter({
|
||||||
|
themeFile: path.join(__dirname, 'src/css/theme.scss')
|
||||||
|
}),
|
||||||
|
includePaths: [path.join(__dirname, './src/css')],
|
||||||
|
}
|
||||||
|
})
|
||||||
|
],
|
||||||
};
|
};
|
Loading…
Reference in New Issue