move example data into components

pull/2199/head
Richard Harris 6 years ago
parent dd6a962f3e
commit 217cd6c741

@ -1,3 +1,7 @@
<script>
let count = 0;
</script>
<!-- https://github.com/eugenkiss/7guis/wiki#counter -->
<input type=number bind:value={count}>
<button on:click="{() => count += 1}">count</button>

@ -1,7 +1,20 @@
<!-- https://eugenkiss.github.io/7guis/tasks#crud -->
<script>
export let people = [];
let people = [
{
first: 'Hans',
last: 'Emil'
},
{
first: 'Max',
last: 'Mustermann'
},
{
first: 'Roman',
last: 'Tisch'
}
];
let prefix = '';
let first = '';

@ -1,16 +0,0 @@
{
"people": [
{
"first": "Hans",
"last": "Emil"
},
{
"first": "Max",
"last": "Mustermann"
},
{
"first": "Roman",
"last": "Tisch"
}
]
}

@ -1,7 +1,14 @@
<script>
import { scaleLinear } from 'd3-scale';
export let points;
const points = [
{ year: 1990, birthrate: 16.7 },
{ year: 1995, birthrate: 14.6 },
{ year: 2000, birthrate: 14.4 },
{ year: 2005, birthrate: 14 },
{ year: 2010, birthrate: 13 },
{ year: 2015, birthrate: 12.4 }
];
const xTicks = [1990, 1995, 2000, 2005, 2010, 2015];
const yTicks = [0, 5, 10, 15, 20];

@ -1,28 +0,0 @@
{
"points": [
{
"year": 1990,
"birthrate": 16.7
},
{
"year": 1995,
"birthrate": 14.6
},
{
"year": 2000,
"birthrate": 14.4
},
{
"year": 2005,
"birthrate": 14
},
{
"year": 2010,
"birthrate": 13
},
{
"year": 2015,
"birthrate": 12.4
}
]
}

@ -1,3 +1,7 @@
<script>
const selected = ['blue'];
</script>
<label>
<input type=checkbox bind:group={selected} value="red">
red

@ -1,9 +1,19 @@
{#each todos as todo}
<div class="todo {todo.done ? 'done': ''}">
<input type=checkbox bind:checked={todo.done}>
<input type=text bind:value={todo.description}>
</div>
{/each}
<script>
const todos = [
{
description: "Buy some milk",
done: true
},
{
description: "Do the laundry",
done: true
},
{
description: "Find life's true purpose",
done: false
}
];
</script>
<style>
input[type="text"] {
@ -14,4 +24,11 @@
.done {
opacity: 0.6;
}
</style>
</style>
{#each todos as todo}
<div class="todo {todo.done ? 'done': ''}">
<input type=checkbox bind:checked={todo.done}>
<input type=text bind:value={todo.description}>
</div>
{/each}

@ -1,16 +0,0 @@
{
"todos": [
{
"description": "Buy some milk",
"done": true
},
{
"description": "Do the laundry",
"done": true
},
{
"description": "Find life's true purpose",
"done": false
}
]
}

@ -1,12 +1,17 @@
<!-- number and range inputs are bound to numeric values -->
<input bind:value={a} type=number min=0 max=10>
<input bind:value={b} type=range min=0 max=10>
<p>{a} * {b} = {a * b}</p>
<script>
let a = 5;
let b = 5;
</script>
<style>
input {
display: block;
width: 10em
}
</style>
</style>
<!-- number and range inputs are bound to numeric values -->
<input bind:value={a} type=number min=0 max=10>
<input bind:value={b} type=range min=0 max=10>
<p>{a} * {b} = {a * b}</p>

@ -1,3 +1,7 @@
<script>
let selected = 'blue';
</script>
<label>
<input type=radio bind:group={selected} value="red">
red

@ -1,2 +1,6 @@
<script>
let name = '';
</script>
<input bind:value={name} placeholder="enter your name">
<p>Hello {name || 'stranger'}!</p>

@ -1,15 +1,15 @@
<script>
import marked from 'marked';
export let markdown;
let markdown = `# Markdown editor\n\nTODOs:\n\n* make a Svelte app\n* think of a third item for this list`;
</script>
<textarea bind:value={markdown} resize="none"></textarea>
<div class="output">{@html marked(markdown)}</div>
<style>
textarea {
width: 100%;
height: 50%;
}
</style>
</style>
<textarea bind:value={markdown} resize="none"></textarea>
<div class="output">{@html marked(markdown)}</div>

@ -1,3 +0,0 @@
{
"markdown": "# Markdown editor\n\nTODOs:\n\n* make a Svelte app\n* think of a third item for this list"
}

@ -1,3 +1,20 @@
<script>
const cats = [
{
name: 'Keyboard Cat',
video: 'https://www.youtube.com/watch?v=J---aiyznGQ'
},
{
name: 'Maru',
video: 'https://www.youtube.com/watch?v=z_AbfPXTKms'
},
{
name: 'Henri The Existential Cat',
video: 'https://www.youtube.com/watch?v=OUtn3pvWmpg'
}
];
</script>
<h1>Cats of YouTube</h1>
<ul>

@ -1,16 +0,0 @@
{
"cats": [
{
"name": "Keyboard Cat",
"video": "https://www.youtube.com/watch?v=J---aiyznGQ"
},
{
"name": "Maru",
"video": "https://www.youtube.com/watch?v=z_AbfPXTKms"
},
{
"name": "Henri The Existential Cat",
"video": "https://www.youtube.com/watch?v=OUtn3pvWmpg"
}
]
}

@ -1,14 +1,5 @@
<h1>Hello {name}!</h1>
<script>
let name = 'world';
</script>
<!--
This is a Svelte component. Click 'JS output' in
the output section to see compiled code.
You can interact with this component via your
browser's console - try running the following:
app.name = 'everybody';
You can also update the name via the props
editor on this page.
-->
<h1>Hello {name}!</h1>

@ -1 +1,5 @@
<script>
let name = 'world';
</script>
<h1>Hello {name}!</h1>

@ -1,3 +1,7 @@
<script>
let foo = true;
</script>
{#if foo}
<p>foo!</p>
{:else}

@ -4,7 +4,11 @@
import ImmutableTodo from './ImmutableTodo.svelte';
import MutableTodo from './MutableTodo.svelte';
export let todos;
let todos = [
{ id: 1, done: true, text: 'wash the car' },
{ id: 2, done: false, text: 'take the dog for a walk' },
{ id: 3, done: false, text: 'mow the lawn' }
];
function toggle(id) {
todos = todos.map(todo => {

@ -1,7 +0,0 @@
{
todos: [
{ id: 1, done: true, text: "wash the car" },
{ id: 2, done: false, text: "take the dog for a walk" },
{ id: 3, done: false, text: "mow the lawn" }
]
}

@ -1,8 +1,7 @@
<script>
import { onMount } from 'svelte';
import { scaleLinear } from 'd3-scale';
export let points;
import points from './data.js';
const yTicks = [0, 2, 4, 6, 8];
const xTicks = [1980, 1990, 2000, 2010];

@ -0,0 +1,40 @@
export default [
{ x: 1979, y: 7.19 },
{ x: 1980, y: 7.83 },
{ x: 1981, y: 7.24 },
{ x: 1982, y: 7.44 },
{ x: 1983, y: 7.51 },
{ x: 1984, y: 7.10 },
{ x: 1985, y: 6.91 },
{ x: 1986, y: 7.53 },
{ x: 1987, y: 7.47 },
{ x: 1988, y: 7.48 },
{ x: 1989, y: 7.03 },
{ x: 1990, y: 6.23 },
{ x: 1991, y: 6.54 },
{ x: 1992, y: 7.54 },
{ x: 1993, y: 6.50 },
{ x: 1994, y: 7.18 },
{ x: 1995, y: 6.12 },
{ x: 1996, y: 7.87 },
{ x: 1997, y: 6.73 },
{ x: 1998, y: 6.55 },
{ x: 1999, y: 6.23 },
{ x: 2000, y: 6.31 },
{ x: 2001, y: 6.74 },
{ x: 2002, y: 5.95 },
{ x: 2003, y: 6.13 },
{ x: 2004, y: 6.04 },
{ x: 2005, y: 5.56 },
{ x: 2006, y: 5.91 },
{ x: 2007, y: 4.29 },
{ x: 2008, y: 4.72 },
{ x: 2009, y: 5.38 },
{ x: 2010, y: 4.92 },
{ x: 2011, y: 4.61 },
{ x: 2012, y: 3.62 },
{ x: 2013, y: 5.35 },
{ x: 2014, y: 5.28 },
{ x: 2015, y: 4.63 },
{ x: 2016, y: 4.72 }
];

@ -1,156 +0,0 @@
{
"points": [
{
"x": 1979,
"y": 7.19
},
{
"x": 1980,
"y": 7.83
},
{
"x": 1981,
"y": 7.24
},
{
"x": 1982,
"y": 7.44
},
{
"x": 1983,
"y": 7.51
},
{
"x": 1984,
"y": 7.1
},
{
"x": 1985,
"y": 6.91
},
{
"x": 1986,
"y": 7.53
},
{
"x": 1987,
"y": 7.47
},
{
"x": 1988,
"y": 7.48
},
{
"x": 1989,
"y": 7.03
},
{
"x": 1990,
"y": 6.23
},
{
"x": 1991,
"y": 6.54
},
{
"x": 1992,
"y": 7.54
},
{
"x": 1993,
"y": 6.5
},
{
"x": 1994,
"y": 7.18
},
{
"x": 1995,
"y": 6.12
},
{
"x": 1996,
"y": 7.87
},
{
"x": 1997,
"y": 6.73
},
{
"x": 1998,
"y": 6.55
},
{
"x": 1999,
"y": 6.23
},
{
"x": 2000,
"y": 6.31
},
{
"x": 2001,
"y": 6.74
},
{
"x": 2002,
"y": 5.95
},
{
"x": 2003,
"y": 6.13
},
{
"x": 2004,
"y": 6.04
},
{
"x": 2005,
"y": 5.56
},
{
"x": 2006,
"y": 5.91
},
{
"x": 2007,
"y": 4.29
},
{
"x": 2008,
"y": 4.72
},
{
"x": 2009,
"y": 5.38
},
{
"x": 2010,
"y": 4.92
},
{
"x": 2011,
"y": 4.61
},
{
"x": 2012,
"y": 3.62
},
{
"x": 2013,
"y": 5.35
},
{
"x": 2014,
"y": 5.28
},
{
"x": 2015,
"y": 4.63
},
{
"x": 2016,
"y": 4.72
}
]
}

@ -1,7 +1,7 @@
<script>
import Modal from './Modal.svelte';
export let showModal;
let showModal = true;
</script>
{#if showModal}

@ -1,21 +1,8 @@
<script>
import Scatterplot from './Scatterplot.svelte';
export let a;
export let b;
export let c;
export let d;
import data from './data.js';
</script>
<div class="chart">
<h2>Anscombe's quartet</h2>
<Scatterplot points={a}/>
<Scatterplot points={b}/>
<Scatterplot points={c}/>
<Scatterplot points={d}/>
</div>
<style>
.chart {
width: 100%;
@ -25,4 +12,13 @@
max-height: 480px;
margin: 0 auto;
}
</style>
</style>
<div class="chart">
<h2>Anscombe's quartet</h2>
<Scatterplot points={data.a}/>
<Scatterplot points={data.b}/>
<Scatterplot points={data.c}/>
<Scatterplot points={data.d}/>
</div>

@ -0,0 +1,54 @@
export default {
a: [
{ x: 10, y: 8.04 },
{ x: 8, y: 6.95 },
{ x: 13, y: 7.58 },
{ x: 9, y: 8.81 },
{ x: 11, y: 8.33 },
{ x: 14, y: 9.96 },
{ x: 6, y: 7.24 },
{ x: 4, y: 4.26 },
{ x: 12, y: 10.84 },
{ x: 7, y: 4.82 },
{ x: 5, y: 5.68 }
],
b: [
{ x: 10, y: 9.14 },
{ x: 8, y: 8.14 },
{ x: 13, y: 8.74 },
{ x: 9, y: 8.77 },
{ x: 11, y: 9.26 },
{ x: 14, y: 8.1 },
{ x: 6, y: 6.13 },
{ x: 4, y: 3.1 },
{ x: 12, y: 9.13 },
{ x: 7, y: 7.26 },
{ x: 5, y: 4.74 }
],
c: [
{ x: 10, y: 7.46 },
{ x: 8, y: 6.77 },
{ x: 13, y: 12.74 },
{ x: 9, y: 7.11 },
{ x: 11, y: 7.81 },
{ x: 14, y: 8.84 },
{ x: 6, y: 6.08 },
{ x: 4, y: 5.39 },
{ x: 12, y: 8.15 },
{ x: 7, y: 6.42 },
{ x: 5, y: 5.73 }
],
d: [
{ x: 8, y: 6.58 },
{ x: 8, y: 5.76 },
{ x: 8, y: 7.71 },
{ x: 8, y: 8.84 },
{ x: 8, y: 8.47 },
{ x: 8, y: 7.04 },
{ x: 8, y: 5.25 },
{ x: 19, y: 12.5 },
{ x: 8, y: 5.56 },
{ x: 8, y: 7.91 },
{ x: 8, y: 6.89 }
]
};

@ -1,186 +0,0 @@
{
"a": [
{
"x": 10,
"y": 8.04
},
{
"x": 8,
"y": 6.95
},
{
"x": 13,
"y": 7.58
},
{
"x": 9,
"y": 8.81
},
{
"x": 11,
"y": 8.33
},
{
"x": 14,
"y": 9.96
},
{
"x": 6,
"y": 7.24
},
{
"x": 4,
"y": 4.26
},
{
"x": 12,
"y": 10.84
},
{
"x": 7,
"y": 4.82
},
{
"x": 5,
"y": 5.68
}
],
"b": [
{
"x": 10,
"y": 9.14
},
{
"x": 8,
"y": 8.14
},
{
"x": 13,
"y": 8.74
},
{
"x": 9,
"y": 8.77
},
{
"x": 11,
"y": 9.26
},
{
"x": 14,
"y": 8.1
},
{
"x": 6,
"y": 6.13
},
{
"x": 4,
"y": 3.1
},
{
"x": 12,
"y": 9.13
},
{
"x": 7,
"y": 7.26
},
{
"x": 5,
"y": 4.74
}
],
"c": [
{
"x": 10,
"y": 7.46
},
{
"x": 8,
"y": 6.77
},
{
"x": 13,
"y": 12.74
},
{
"x": 9,
"y": 7.11
},
{
"x": 11,
"y": 7.81
},
{
"x": 14,
"y": 8.84
},
{
"x": 6,
"y": 6.08
},
{
"x": 4,
"y": 5.39
},
{
"x": 12,
"y": 8.15
},
{
"x": 7,
"y": 6.42
},
{
"x": 5,
"y": 5.73
}
],
"d": [
{
"x": 8,
"y": 6.58
},
{
"x": 8,
"y": 5.76
},
{
"x": 8,
"y": 7.71
},
{
"x": 8,
"y": 8.84
},
{
"x": 8,
"y": 8.47
},
{
"x": 8,
"y": 7.04
},
{
"x": 8,
"y": 5.25
},
{
"x": 19,
"y": 12.5
},
{
"x": 8,
"y": 5.56
},
{
"x": 8,
"y": 7.91
},
{
"x": 8,
"y": 6.89
}
]
}

@ -1,3 +1,36 @@
<script>
const node = {
name: 'Fruit',
children: [
{
name: 'Red',
children: [
{
name: 'Cherry'
},
{
name: 'Strawberry'
}
]
},
{
name: 'Green',
children: [
{
name: 'Apple'
},
{
name: 'Pear'
},
{
name: 'Lime'
}
]
}
]
};
</script>
<ul>
<li>{node.name}
{#if node.children}

@ -1,32 +0,0 @@
{
"node": {
"name": "Fruit",
"children": [
{
"name": "Red",
"children": [
{
"name": "Cherry"
},
{
"name": "Strawberry"
}
]
},
{
"name": "Green",
"children": [
{
"name": "Apple"
},
{
"name": "Pear"
},
{
"name": "Lime"
}
]
}
]
}
}
Loading…
Cancel
Save