Skip to content

Commit ba7bc59

Browse files
gkagka
committed
docs: add dot examples, code formatting
1 parent 949167d commit ba7bc59

25 files changed

+271
-70
lines changed

‎.prettierrc.mjs

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,18 @@ const config = {
2121
bracketSameLine: true,
2222
svelteAllowShorthand: true
2323
}
24+
},
25+
{
26+
files: '**/routes/examples/**/*.svelte',
27+
options: {
28+
printWidth: 60
29+
}
30+
},
31+
{
32+
files: 'src/routes/examples/**/*.svelte',
33+
options: {
34+
printWidth: 60
35+
}
2436
}
2537
]
2638
};

‎.vscode/settings.json

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"editor.formatOnSave": true,
33
"editor.defaultFormatter": "esbenp.prettier-vscode",
44
"editor.codeActionsOnSave": {
5-
"source.fixAll.eslint": true
5+
"source.fixAll.eslint": "explicit"
66
},
77
"[javascript]": {
88
"editor.defaultFormatter": "esbenp.prettier-vscode"
@@ -19,7 +19,14 @@
1919
"prettier.tabWidth": 4,
2020
"prettier.trailingComma": "none",
2121
"prettier.printWidth": 100,
22+
"prettier.documentSelectors": [
23+
"*.svelte",
24+
"*.md",
25+
"**/examples/**/*.svelte",
26+
"src/routes/examples/**/*.svelte"
27+
],
2228
"svelte.plugin.svelte.format.enable": false,
2329
"eslint.probe": ["javascript", "typescript", "svelte"],
24-
"eslint.experimental.useFlatConfig": true
30+
"eslint.useFlatConfig": true,
31+
"eslint.workingDirectories": [{ "mode": "auto" }]
2532
}

‎src/routes/examples/+layout.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export const load: PageLoad = async ({ fetch }) => {
1616
'co2',
1717
'crimea',
1818
'driving',
19+
'penguins',
1920
'riaa',
2021
'stateage',
2122
'tdf',

‎src/routes/examples/+page.svelte

Lines changed: 50 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,12 @@
55
};
66
77
// list of maybe 9 nice examples showcases
8-
const showcase = ['line/gradient-line', 'geo/us-choropleth', 'axis/datawrapper-ticks'];
8+
const showcase = [
9+
'line/gradient-line',
10+
'dot/1-colored-scatterplot',
11+
'geo/us-choropleth',
12+
'axis/datawrapper-ticks'
13+
];
914
</script>
1015

1116
<script>
@@ -15,47 +20,77 @@
1520
import ExamplesGrid from 'svelteplot/ui/ExamplesGrid.svelte';
1621
const { isDark } = getContext(SVELTEPRESS_CONTEXT_KEY);
1722
18-
const pages = import.meta.glob('./**/*.svelte', { eager: true });
23+
const pages = import.meta.glob('./**/*.svelte', {
24+
eager: true
25+
});
1926
2027
const paths = groupBy(
21-
Object.keys(pages).filter((d) => !d.startsWith('./[group]')),
28+
Object.keys(pages).filter(
29+
(d) => !d.startsWith('./[group]')
30+
),
2231
(d) => d.split('/')[1]
2332
);
2433
25-
const screenshots = import.meta.glob('/static/examples/**/*.png', {
26-
eager: true,
27-
import: 'default',
28-
query: '?url'
29-
});
34+
const screenshots = import.meta.glob(
35+
'/static/examples/**/*.png',
36+
{
37+
eager: true,
38+
import: 'default',
39+
query: '?url'
40+
}
41+
);
3042
3143
const examples = $derived(
3244
showcase
33-
.map((url) => Object.keys(pages).find((p) => p === `./${url}.svelte`))
45+
.map((url) =>
46+
Object.keys(pages).find(
47+
(p) => p === `./${url}.svelte`
48+
)
49+
)
3450
.map((page) => ({
3551
page,
3652
title: pages[page].title,
3753
url: `/examples/${page.replace(/^..\//, './').replace('.svelte', '')}`,
3854
screenshot: screenshots[
3955
page
40-
.replace(/^.\//, '/static/examples/')
41-
.replace('.svelte', $isDark ? '.dark.png' : '.png')
56+
.replace(
57+
/^.\//,
58+
'/static/examples/'
59+
)
60+
.replace(
61+
'.svelte',
62+
$isDark ? '.dark.png' : '.png'
63+
)
4264
]?.replace('/static', '')
4365
}))
4466
);
4567
</script>
4668
47-
<p>Sometimes it's easiest to learn a new framework by digging into examples.</p>
69+
<p>
70+
Sometimes it's easiest to learn a new framework by
71+
digging into examples.
72+
</p>
4873
4974
<ExamplesGrid {examples} />
5075
5176
<div class="column-container">
5277
{#each Object.entries(paths) as [group, groupPages] (group)}
5378
<div>
54-
<h3><a href="/examples/{group}">{pages[groupPages[0]].title}</a></h3>
79+
<h3>
80+
<a href="/examples/{group}"
81+
>{pages[
82+
groupPages.find((p) =>
83+
p.endsWith('/_index.svelte')
84+
)
85+
].title}</a>
86+
</h3>
5587
<ul>
56-
{#each groupPages.slice(1) as page (page)}
88+
{#each groupPages.filter((p) => !p.endsWith('/_index.svelte')) as page (page)}
5789
<li>
58-
<a href={page.replace('./', 'examples/').replace('.svelte', '')}
90+
<a
91+
href={page
92+
.replace('./', 'examples/')
93+
.replace('.svelte', '')}
5994
>{pages[page].title}</a>
6095
</li>
6196
{/each}

‎src/routes/examples/[group]/+page.svelte

Lines changed: 35 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,36 +7,59 @@
77
import { getContext } from 'svelte';
88
import ExamplesGrid from 'svelteplot/ui/ExamplesGrid.svelte';
99
10-
const pages = import.meta.glob('../**/*.svelte', { eager: true });
11-
12-
const screenshots = import.meta.glob('/static/examples/**/*.png', {
13-
eager: true,
14-
import: 'default',
15-
query: '?url'
10+
const pages = import.meta.glob('../**/*.svelte', {
11+
eager: true
1612
});
1713
14+
const screenshots = import.meta.glob(
15+
'/static/examples/**/*.png',
16+
{
17+
eager: true,
18+
import: 'default',
19+
query: '?url'
20+
}
21+
);
22+
1823
const indexKey = $derived(
1924
Object.keys(pages).find(
20-
(d) => d.replace(/^..\//, '').replace('/_index.svelte', '') === page.params.group
25+
(d) =>
26+
d
27+
.replace(/^..\//, '')
28+
.replace('/_index.svelte', '') ===
29+
page.params.group
2130
)
2231
);
23-
const indexMod = $derived(indexKey ? pages[indexKey] : null);
32+
const indexMod = $derived(
33+
indexKey ? pages[indexKey] : null
34+
);
2435
2536
const subPages = $derived(
26-
Object.keys(pages).filter((d) => d.replace(/^..\//, '').startsWith(`${page.params.group}/`))
37+
Object.keys(pages).filter((d) =>
38+
d
39+
.replace(/^..\//, '')
40+
.startsWith(`${page.params.group}/`)
41+
)
2742
);
2843
2944
const examples = $derived(
3045
subPages
31-
.filter((page) => !page.endsWith('/_index.svelte'))
46+
.filter(
47+
(page) => !page.endsWith('/_index.svelte')
48+
)
3249
.map((page) => ({
3350
page,
3451
title: pages[page].title,
3552
url: `/examples/${page.replace(/^..\//, './').replace('.svelte', '')}`,
3653
screenshot: screenshots[
3754
page
38-
.replace(/^..\//, '/static/examples/')
39-
.replace('.svelte', $isDark ? '.dark.png' : '.png')
55+
.replace(
56+
/^..\//,
57+
'/static/examples/'
58+
)
59+
.replace(
60+
'.svelte',
61+
$isDark ? '.dark.png' : '.png'
62+
)
4063
]?.replace('/static', '')
4164
}))
4265
);

‎src/routes/examples/[group]/[page]/+page.svelte

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@
99
1010
import { getContext } from 'svelte';
1111
12-
const pages = import.meta.glob('../../**/*.svelte', { eager: true });
12+
const pages = import.meta.glob('../../**/*.svelte', {
13+
eager: true
14+
});
1315
const pagesSrc = import.meta.glob('../../**/*.svelte', {
1416
eager: true,
1517
query: '?raw',
@@ -19,13 +21,23 @@
1921
const parentPage = $derived(
2022
Object.keys(pages).find(
2123
(d) =>
22-
d.replace(/^..\/..\//, '').replace('.svelte', '') === `${page.params.group}/_index`
24+
d
25+
.replace(/^..\/..\//, '')
26+
.replace('.svelte', '') ===
27+
`${page.params.group}/_index`
2328
)
2429
);
2530
26-
const key = $derived(`${page.params.group}/${page.params.page}`);
31+
const key = $derived(
32+
`${page.params.group}/${page.params.page}`
33+
);
2734
const plotKey = $derived(
28-
Object.keys(pages).find((d) => d.replace(/^..\/..\//, '').replace('.svelte', '') === key)
35+
Object.keys(pages).find(
36+
(d) =>
37+
d
38+
.replace(/^..\/..\//, '')
39+
.replace('.svelte', '') === key
40+
)
2941
);
3042
const mod = $derived(plotKey ? pages[plotKey] : null);
3143
</script>
@@ -38,7 +50,8 @@
3850
{#if plotKey}
3951
<div class="breadcrumb">
4052
<a href="/examples">Examples</a> <span>/</span>
41-
<a href="/examples/{page.params.group}">{pages[parentPage].title}</a>
53+
<a href="/examples/{page.params.group}"
54+
>{pages[parentPage].title}</a>
4255
</div>
4356
<h1 class="page-title">{mod.title}</h1>
4457
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
@@ -49,7 +62,9 @@
4962
<div class="svp-code-block">
5063
<HighlightSvelte
5164
lang="svelte"
52-
code={pagesSrc[plotKey].substring(pagesSrc[plotKey].indexOf('<Plot'))} />
65+
code={pagesSrc[plotKey].substring(
66+
pagesSrc[plotKey].indexOf('<Plot')
67+
)} />
5368
</div>
5469
</div>
5570
{:else}

‎src/routes/examples/axis/_index.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,6 @@
55
<h1>Axis examples</h1>
66

77
<p>
8-
Here are examples related to the AxisX and AxisY marks as well as axis options on the Plot
9-
component
8+
Here are examples related to the AxisX and AxisY marks
9+
as well as axis options on the Plot component
1010
</p>

‎src/routes/examples/axis/datawrapper-ticks.svelte

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,13 @@
44
</script>
55

66
<script>
7-
import { Plot, AxisX, Line, GridX, RuleY } from 'svelteplot';
7+
import {
8+
Plot,
9+
AxisX,
10+
Line,
11+
GridX,
12+
RuleY
13+
} from 'svelteplot';
814
import { page } from '$app/state';
915
let { aapl } = $derived(page.data.data);
1016
</script>

‎src/routes/examples/dot/0-scatterplot.svelte

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<script module>
2+
export let title = 'Scatterplot';
3+
</script>
4+
5+
<script>
6+
import { Plot, Dot, RuleY } from 'svelteplot';
7+
import { page } from '$app/state';
8+
let { penguins } = $derived(page.data.data);
9+
</script>
10+
11+
<Plot>
12+
<Dot
13+
data={penguins}
14+
x="culmen_length_mm"
15+
y="culmen_depth_mm" />
16+
</Plot>

‎src/routes/examples/dot/1-colored-scatterplot.svelte

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<script module>
2+
export let title = 'Color scatterplot';
3+
</script>
4+
5+
<script>
6+
import { Plot, Dot } from 'svelteplot';
7+
import { page } from '$app/state';
8+
let { penguins } = $derived(page.data.data);
9+
</script>
10+
11+
<Plot>
12+
<Dot
13+
data={penguins}
14+
x="culmen_length_mm"
15+
y="culmen_depth_mm"
16+
stroke="species" />
17+
</Plot>

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy