wee chart renderer
This commit is contained in:
parent
362093abc6
commit
2af332d670
|
|
@ -8,7 +8,8 @@
|
|||
"name": "svelte-app",
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"sirv-cli": "^2.0.0"
|
||||
"sirv-cli": "^2.0.0",
|
||||
"svelte-icons": "^2.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-commonjs": "^17.0.0",
|
||||
|
|
@ -1205,6 +1206,11 @@
|
|||
"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": {
|
||||
"version": "4.10.4",
|
||||
"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.10.4.tgz",
|
||||
|
|
@ -2245,6 +2251,11 @@
|
|||
"integrity": "sha512-qKJzw6DpA33CIa+C/rGp4AUdSfii0DOTCzj/2YpSKKayw5WGSS624Et9L1nU1k2OVRS9vaENQXp2CVZNU+xvIg==",
|
||||
"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": {
|
||||
"version": "4.10.4",
|
||||
"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.10.4.tgz",
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@
|
|||
"svelte-preprocess": "^4.10.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"sirv-cli": "^2.0.0"
|
||||
"sirv-cli": "^2.0.0",
|
||||
"svelte-icons": "^2.1.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ body {
|
|||
}
|
||||
|
||||
a {
|
||||
color: rgb(0,100,200);
|
||||
color: #d23e6e;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -27,7 +27,7 @@ a:hover {
|
|||
}
|
||||
|
||||
a:visited {
|
||||
color: rgb(0,80,160);
|
||||
color: #d23e6e;
|
||||
}
|
||||
|
||||
label {
|
||||
|
|
|
|||
|
|
@ -2,15 +2,51 @@
|
|||
import { currentChartID } from './stores';
|
||||
import ChartEdit from './ChartEdit.svelte';
|
||||
import ChartCreation from './ChartCreation.svelte';
|
||||
import IoMdHeart from 'svelte-icons/io/IoMdHeart.svelte';
|
||||
import { H1 } from 'attractions';
|
||||
</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>
|
||||
<header>
|
||||
<H1>chartmaker</H1>
|
||||
</header>
|
||||
|
||||
{#if $currentChartID}
|
||||
<ChartEdit/>
|
||||
{:else}
|
||||
<ChartCreation/>
|
||||
{/if}
|
||||
</main>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
<footer>
|
||||
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>
|
||||
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>
|
||||
|
||||
<Button>click me</Button>
|
||||
|
||||
<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 makeAttractionsImporter = require('attractions/importer.js');
|
||||
const path = require('path');
|
||||
|
||||
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