svelteplot 0.2.8-pr-68.1 → 0.2.8-pr-78.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/core/Plot.svelte +1 -1
- package/dist/marks/AxisX.svelte +24 -4
- package/dist/marks/AxisX.svelte.d.ts +8 -1
- package/dist/marks/AxisY.svelte +24 -3
- package/dist/marks/AxisY.svelte.d.ts +8 -1
- package/dist/ui/ExamplesGrid.svelte +64 -0
- package/dist/ui/ExamplesGrid.svelte.d.ts +11 -0
- package/package.json +5 -2
package/dist/core/Plot.svelte
CHANGED
package/dist/marks/AxisX.svelte
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
Renders a horizontal axis with labels and tick marks
|
|
3
3
|
-->
|
|
4
4
|
<script module lang="ts">
|
|
5
|
+
import type { XOR } from 'ts-essentials';
|
|
5
6
|
export type AxisXMarkProps = Omit<
|
|
6
7
|
BaseMarkProps,
|
|
7
8
|
'fill' | 'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target'
|
|
@@ -22,7 +23,16 @@
|
|
|
22
23
|
| Intl.NumberFormatOptions
|
|
23
24
|
| ((d: RawValue) => string);
|
|
24
25
|
tickClass?: ConstantAccessor<string>;
|
|
25
|
-
}
|
|
26
|
+
} & XOR<
|
|
27
|
+
{
|
|
28
|
+
/** approximate number of ticks to be generated */
|
|
29
|
+
tickCount?: number;
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
/** approximate number of pixels between generated ticks */
|
|
33
|
+
tickSpacing?: number;
|
|
34
|
+
}
|
|
35
|
+
>;
|
|
26
36
|
</script>
|
|
27
37
|
|
|
28
38
|
<script lang="ts">
|
|
@@ -64,6 +74,8 @@
|
|
|
64
74
|
tickFormat,
|
|
65
75
|
tickClass,
|
|
66
76
|
class: className,
|
|
77
|
+
tickCount,
|
|
78
|
+
tickSpacing,
|
|
67
79
|
...options
|
|
68
80
|
}: AxisXMarkProps = $props();
|
|
69
81
|
|
|
@@ -71,7 +83,11 @@
|
|
|
71
83
|
const plot = $derived(getPlotState());
|
|
72
84
|
|
|
73
85
|
const autoTickCount = $derived(
|
|
74
|
-
|
|
86
|
+
tickCount != null
|
|
87
|
+
? tickCount
|
|
88
|
+
: tickSpacing != null
|
|
89
|
+
? Math.max(3, Math.round(plot.facetWidth / tickSpacing))
|
|
90
|
+
: Math.max(3, Math.round(plot.facetWidth / plot.options.x.tickSpacing))
|
|
75
91
|
);
|
|
76
92
|
|
|
77
93
|
const ticks: RawValue[] = $derived(
|
|
@@ -89,9 +105,9 @@
|
|
|
89
105
|
)
|
|
90
106
|
);
|
|
91
107
|
|
|
92
|
-
|
|
108
|
+
const tickFmt = $derived(tickFormat || plot.options.x.tickFormat);
|
|
93
109
|
|
|
94
|
-
|
|
110
|
+
const useTickFormat = $derived(
|
|
95
111
|
typeof tickFmt === 'function'
|
|
96
112
|
? tickFmt
|
|
97
113
|
: plot.scales.x.type === 'band' || plot.scales.x.type === 'point'
|
|
@@ -107,6 +123,10 @@
|
|
|
107
123
|
: // auto
|
|
108
124
|
(d: RawValue) =>
|
|
109
125
|
Intl.NumberFormat(plot.options.locale, {
|
|
126
|
+
// use compact notation if range covers multipe magnitudes
|
|
127
|
+
...(new Set(ticks.map(Math.log10).map(Math.round)).size > 1
|
|
128
|
+
? { notation: 'compact' }
|
|
129
|
+
: {}),
|
|
110
130
|
...DEFAULTS.numberFormat,
|
|
111
131
|
style: plot.options.x.percent ? 'percent' : 'decimal'
|
|
112
132
|
}).format(d)
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { XOR } from 'ts-essentials';
|
|
1
2
|
export type AxisXMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target'> & {
|
|
2
3
|
data?: RawValue[];
|
|
3
4
|
automatic?: boolean;
|
|
@@ -11,7 +12,13 @@ export type AxisXMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity' | 'paint
|
|
|
11
12
|
tickPadding?: number;
|
|
12
13
|
tickFormat?: 'auto' | Intl.DateTimeFormatOptions | Intl.NumberFormatOptions | ((d: RawValue) => string);
|
|
13
14
|
tickClass?: ConstantAccessor<string>;
|
|
14
|
-
}
|
|
15
|
+
} & XOR<{
|
|
16
|
+
/** approximate number of ticks to be generated */
|
|
17
|
+
tickCount?: number;
|
|
18
|
+
}, {
|
|
19
|
+
/** approximate number of pixels between generated ticks */
|
|
20
|
+
tickSpacing?: number;
|
|
21
|
+
}>;
|
|
15
22
|
import type { BaseMarkProps, RawValue, ConstantAccessor } from '../types.js';
|
|
16
23
|
/** Renders a horizontal axis with labels and tick marks */
|
|
17
24
|
declare const AxisX: import("svelte").Component<AxisXMarkProps, {}, "">;
|
package/dist/marks/AxisY.svelte
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
Renders a vertical axis with labels and tick marks
|
|
3
3
|
-->
|
|
4
4
|
<script module lang="ts">
|
|
5
|
+
import type { XOR } from 'ts-essentials';
|
|
5
6
|
export type AxisYMarkProps = Omit<
|
|
6
7
|
BaseMarkProps,
|
|
7
8
|
'fill' | 'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target'
|
|
@@ -23,7 +24,16 @@
|
|
|
23
24
|
| Intl.NumberFormatOptions
|
|
24
25
|
| ((d: RawValue) => string);
|
|
25
26
|
tickClass?: ConstantAccessor<string>;
|
|
26
|
-
}
|
|
27
|
+
} & XOR<
|
|
28
|
+
{
|
|
29
|
+
/** approximate number of ticks to be generated */
|
|
30
|
+
tickCount?: number;
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
/** approximate number of pixels between generated ticks */
|
|
34
|
+
tickSpacing?: number;
|
|
35
|
+
}
|
|
36
|
+
>;
|
|
27
37
|
</script>
|
|
28
38
|
|
|
29
39
|
<script lang="ts">
|
|
@@ -56,12 +66,15 @@
|
|
|
56
66
|
title,
|
|
57
67
|
anchor = DEFAULTS.axisYAnchor as 'left' | 'right',
|
|
58
68
|
facetAnchor = 'auto',
|
|
69
|
+
interval,
|
|
59
70
|
lineAnchor = 'center',
|
|
60
71
|
tickSize = DEFAULTS.tickSize,
|
|
61
72
|
tickFontSize = DEFAULTS.tickFontSize,
|
|
62
73
|
tickPadding = DEFAULTS.tickPadding,
|
|
63
74
|
tickFormat,
|
|
64
75
|
tickClass,
|
|
76
|
+
tickCount,
|
|
77
|
+
tickSpacing,
|
|
65
78
|
...options
|
|
66
79
|
}: AxisYMarkProps = $props();
|
|
67
80
|
|
|
@@ -69,7 +82,11 @@
|
|
|
69
82
|
const plot = $derived(getPlotState());
|
|
70
83
|
|
|
71
84
|
const autoTickCount = $derived(
|
|
72
|
-
|
|
85
|
+
tickCount != null
|
|
86
|
+
? tickCount
|
|
87
|
+
: tickSpacing != null
|
|
88
|
+
? Math.max(3, Math.round(plot.facetWidth / tickSpacing))
|
|
89
|
+
: Math.max(2, Math.round(plot.facetHeight / plot.options.y.tickSpacing))
|
|
73
90
|
);
|
|
74
91
|
|
|
75
92
|
const ticks: RawValue[] = $derived(
|
|
@@ -80,7 +97,7 @@
|
|
|
80
97
|
autoTicks(
|
|
81
98
|
plot.scales.y.type,
|
|
82
99
|
plot.options.y.ticks,
|
|
83
|
-
plot.options.y.interval,
|
|
100
|
+
interval || plot.options.y.interval,
|
|
84
101
|
plot.scales.y.domain,
|
|
85
102
|
plot.scales.y.fn,
|
|
86
103
|
autoTickCount
|
|
@@ -105,6 +122,10 @@
|
|
|
105
122
|
: // auto
|
|
106
123
|
(d: RawValue) =>
|
|
107
124
|
Intl.NumberFormat(plot.options.locale, {
|
|
125
|
+
// use compact notation if range covers multipe magnitudes
|
|
126
|
+
...(new Set(ticks.map(Math.log10).map(Math.round)).size > 1
|
|
127
|
+
? { notation: 'compact' }
|
|
128
|
+
: {}),
|
|
108
129
|
...DEFAULTS.numberFormat,
|
|
109
130
|
style: plot.options.y.percent ? 'percent' : 'decimal'
|
|
110
131
|
}).format(d)
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { XOR } from 'ts-essentials';
|
|
1
2
|
export type AxisYMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target'> & {
|
|
2
3
|
data?: RawValue[];
|
|
3
4
|
automatic?: boolean;
|
|
@@ -12,7 +13,13 @@ export type AxisYMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity' | 'paint
|
|
|
12
13
|
tickPadding?: number;
|
|
13
14
|
tickFormat?: 'auto' | Intl.DateTimeFormatOptions | Intl.NumberFormatOptions | ((d: RawValue) => string);
|
|
14
15
|
tickClass?: ConstantAccessor<string>;
|
|
15
|
-
}
|
|
16
|
+
} & XOR<{
|
|
17
|
+
/** approximate number of ticks to be generated */
|
|
18
|
+
tickCount?: number;
|
|
19
|
+
}, {
|
|
20
|
+
/** approximate number of pixels between generated ticks */
|
|
21
|
+
tickSpacing?: number;
|
|
22
|
+
}>;
|
|
16
23
|
import type { BaseMarkProps, RawValue } from '../types.js';
|
|
17
24
|
import type { ConstantAccessor } from '../types.js';
|
|
18
25
|
/** Renders a vertical axis with labels and tick marks */
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
let { examples } = $props();
|
|
3
|
+
</script>
|
|
4
|
+
|
|
5
|
+
<div class="list">
|
|
6
|
+
{#each examples as page, i (i)}
|
|
7
|
+
<a href={page.url}>
|
|
8
|
+
<div>
|
|
9
|
+
{#if page.screenshot}
|
|
10
|
+
<img src={page.screenshot} alt={page.title} />{/if}
|
|
11
|
+
</div>
|
|
12
|
+
<h4>
|
|
13
|
+
{page.title}
|
|
14
|
+
</h4>
|
|
15
|
+
</a>
|
|
16
|
+
{/each}
|
|
17
|
+
</div>
|
|
18
|
+
|
|
19
|
+
<style>
|
|
20
|
+
.list {
|
|
21
|
+
display: grid;
|
|
22
|
+
grid-template-columns: repeat(3, 1fr);
|
|
23
|
+
gap: 1rem;
|
|
24
|
+
width: 100%;
|
|
25
|
+
margin: 2rem 0;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.list > a {
|
|
29
|
+
display: flex;
|
|
30
|
+
flex-direction: column;
|
|
31
|
+
align-items: left;
|
|
32
|
+
row-gap: 0.3rem;
|
|
33
|
+
text-decoration: none;
|
|
34
|
+
|
|
35
|
+
> div {
|
|
36
|
+
border: 1px solid #88888822;
|
|
37
|
+
border-radius: 2px;
|
|
38
|
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
|
|
39
|
+
padding: 1.5ex;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
&:hover {
|
|
43
|
+
text-decoration: underline;
|
|
44
|
+
color: var(--svp-text);
|
|
45
|
+
> div {
|
|
46
|
+
border: 1px solid var(--svp-text);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.list img {
|
|
52
|
+
width: 100%;
|
|
53
|
+
box-sizing: border-box;
|
|
54
|
+
border-radius: 3px;
|
|
55
|
+
transition: transform 0.2s ease-in-out;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.list h4 {
|
|
59
|
+
margin: 0rem;
|
|
60
|
+
font-weight: normal;
|
|
61
|
+
font-size: 13px;
|
|
62
|
+
line-height: 1;
|
|
63
|
+
}
|
|
64
|
+
</style>
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export default ExamplesGrid;
|
|
2
|
+
type ExamplesGrid = {
|
|
3
|
+
$on?(type: string, callback: (e: any) => void): () => void;
|
|
4
|
+
$set?(props: Partial<$$ComponentProps>): void;
|
|
5
|
+
};
|
|
6
|
+
declare const ExamplesGrid: import("svelte").Component<{
|
|
7
|
+
examples: any;
|
|
8
|
+
}, {}, "">;
|
|
9
|
+
type $$ComponentProps = {
|
|
10
|
+
examples: any;
|
|
11
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "svelteplot",
|
|
3
|
-
"version": "0.2.8-pr-
|
|
3
|
+
"version": "0.2.8-pr-78.0",
|
|
4
4
|
"license": "ISC",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Gregor Aisch",
|
|
@@ -18,7 +18,8 @@
|
|
|
18
18
|
"test:unit": "vitest",
|
|
19
19
|
"prepack": "npx svelte-package",
|
|
20
20
|
"release-next": "npm version prerelease --preid next && npm publish && git push && git push --tags && sleep 1 && npm dist-tag add svelteplot@$(npm view . version) next",
|
|
21
|
-
"docs": "npm run build && cd build && rsync --recursive . vis4.net:svelteplot/alpha0/"
|
|
21
|
+
"docs": "npm run build && cd build && rsync --recursive . vis4.net:svelteplot/alpha0/",
|
|
22
|
+
"screenshots": "node screenshot-examples.js"
|
|
22
23
|
},
|
|
23
24
|
"exports": {
|
|
24
25
|
".": {
|
|
@@ -83,6 +84,7 @@
|
|
|
83
84
|
"jsdom": "^26.1.0",
|
|
84
85
|
"prettier": "^3.5.3",
|
|
85
86
|
"prettier-plugin-svelte": "^3.4.0",
|
|
87
|
+
"puppeteer": "^24.9.0",
|
|
86
88
|
"remark-code-extra": "^1.0.1",
|
|
87
89
|
"remark-code-frontmatter": "^1.0.0",
|
|
88
90
|
"resize-observer-polyfill": "^1.5.1",
|
|
@@ -92,6 +94,7 @@
|
|
|
92
94
|
"svelte-highlight": "^7.8.3",
|
|
93
95
|
"svg-path-parser": "^1.1.0",
|
|
94
96
|
"topojson-client": "^3.1.0",
|
|
97
|
+
"ts-essentials": "^10.0.4",
|
|
95
98
|
"tslib": "^2.8.1",
|
|
96
99
|
"typedoc": "^0.28.5",
|
|
97
100
|
"typedoc-plugin-markdown": "^4.6.3",
|