svelteplot 0.0.1-alpha.19 → 0.0.1-alpha.20
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/Plot.svelte +38 -33
- package/dist/helpers/typeChecks.js +1 -1
- package/package.json +4 -4
package/dist/Plot.svelte
CHANGED
|
@@ -75,38 +75,43 @@ let hasLegend = $derived(color?.legend || symbol?.legend);
|
|
|
75
75
|
</script>
|
|
76
76
|
|
|
77
77
|
<figure data-testid={testid} class="svelteplot" bind:clientWidth={width} style:max-width={maxWidth}>
|
|
78
|
-
<
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
78
|
+
<div class="plot-body">
|
|
79
|
+
<svg
|
|
80
|
+
role="document"
|
|
81
|
+
{width}
|
|
82
|
+
height={plot.height}
|
|
83
|
+
onmousemove={onmousemove ? onMouseMove : null}
|
|
84
|
+
>
|
|
85
|
+
<!-- automatic grids -->
|
|
86
|
+
{#if (grid && plot.hasScaleX) || x?.grid}<GridX automatic />{/if}
|
|
87
|
+
{#if (grid && plot.hasScaleY) || y?.grid}<GridY automatic />{/if}
|
|
87
88
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
89
|
+
{#if !plot.hasAxisXMark && (plot.hasScaleX || x?.grid)}
|
|
90
|
+
<!-- automatic x axis -->
|
|
91
|
+
{#if plot.options.x.axis === 'bottom' || plot.options.x.axis === 'both'}
|
|
92
|
+
<AxisX anchor="bottom" automatic />
|
|
93
|
+
{/if}
|
|
94
|
+
{#if plot.options.x.axis === 'top' || plot.options.x.axis === 'both'}
|
|
95
|
+
<AxisX anchor="top" automatic />
|
|
96
|
+
{/if}
|
|
92
97
|
{/if}
|
|
93
|
-
{#if plot.
|
|
94
|
-
|
|
98
|
+
{#if !plot.hasAxisYMark && (plot.hasScaleY || y?.grid)}
|
|
99
|
+
<!-- automatic y axis -->
|
|
100
|
+
{#if plot.options.y.axis === 'left' || plot.options.y.axis === 'both'}
|
|
101
|
+
<AxisY anchor="left" automatic />
|
|
102
|
+
{/if}
|
|
103
|
+
{#if plot.options.y.axis === 'right' || plot.options.y.axis === 'both'}
|
|
104
|
+
<AxisY anchor="right" automatic />
|
|
105
|
+
{/if}
|
|
95
106
|
{/if}
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
{/if}
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
{/if}
|
|
105
|
-
{/if}
|
|
106
|
-
<!-- automatic frame -->
|
|
107
|
-
{#if frame}<Frame />{/if}
|
|
108
|
-
{#if children}{@render children(plot)}{/if}
|
|
109
|
-
</svg>
|
|
107
|
+
<!-- automatic frame -->
|
|
108
|
+
{#if frame}<Frame />{/if}
|
|
109
|
+
{#if children}{@render children(plot)}{/if}
|
|
110
|
+
</svg>
|
|
111
|
+
<div class="overlay">
|
|
112
|
+
{#if overlay}{@render overlay(plot)}{/if}
|
|
113
|
+
</div>
|
|
114
|
+
</div>
|
|
110
115
|
|
|
111
116
|
{#if plot.options.title || plot.options.subtitle || header || hasLegend}
|
|
112
117
|
<div class="plot-header">
|
|
@@ -134,10 +139,6 @@ let hasLegend = $derived(color?.legend || symbol?.legend);
|
|
|
134
139
|
{#if footer}{@render footer(plot)}{/if}
|
|
135
140
|
</div>
|
|
136
141
|
{/if}
|
|
137
|
-
|
|
138
|
-
<div class="overlay">
|
|
139
|
-
{#if overlay}{@render overlay(plot)}{/if}
|
|
140
|
-
</div>
|
|
141
142
|
</figure>
|
|
142
143
|
|
|
143
144
|
<style>
|
|
@@ -147,6 +148,10 @@ let hasLegend = $derived(color?.legend || symbol?.legend);
|
|
|
147
148
|
display: flex;
|
|
148
149
|
flex-direction: column;
|
|
149
150
|
}
|
|
151
|
+
|
|
152
|
+
.plot-body {
|
|
153
|
+
position: relative;
|
|
154
|
+
}
|
|
150
155
|
figure .plot-header {
|
|
151
156
|
order: 1;
|
|
152
157
|
}
|
|
@@ -14,7 +14,7 @@ export function isStringOrNull(v) {
|
|
|
14
14
|
}
|
|
15
15
|
export function isColorOrNull(v) {
|
|
16
16
|
// todo: maybe not use chroma.js here to save kb
|
|
17
|
-
return v == null || (typeof v === 'string' && chroma.valid(v));
|
|
17
|
+
return v == null || (typeof v === 'string' && (chroma.valid(v) || v === 'currentColor'));
|
|
18
18
|
}
|
|
19
19
|
export function isOpacityOrNull(v) {
|
|
20
20
|
return v == null || (typeof v === 'number' && isFinite(v) && v >= 0 && v <= 1);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "svelteplot",
|
|
3
|
-
"version": "0.0.1-alpha.
|
|
3
|
+
"version": "0.0.1-alpha.20",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"dev": "vite dev",
|
|
6
6
|
"build": "vite build",
|
|
@@ -37,6 +37,9 @@
|
|
|
37
37
|
"@types/d3-random": "^3.0.3",
|
|
38
38
|
"@types/d3-scale-chromatic": "^3.0.3",
|
|
39
39
|
"@types/d3-shape": "^3.1.6",
|
|
40
|
+
"@types/d3-array": "^3.2.1",
|
|
41
|
+
"@types/d3-scale": "^4.0.8",
|
|
42
|
+
"@types/underscore": "^1.11.15",
|
|
40
43
|
"@typescript-eslint/eslint-plugin": "^6.19.0",
|
|
41
44
|
"@typescript-eslint/parser": "^6.19.0",
|
|
42
45
|
"@sveltejs/vite-plugin-svelte": "^3.0.1",
|
|
@@ -65,9 +68,6 @@
|
|
|
65
68
|
"type": "module",
|
|
66
69
|
"dependencies": {
|
|
67
70
|
"@observablehq/plot": "^0.6.13",
|
|
68
|
-
"@types/d3-array": "^3.2.1",
|
|
69
|
-
"@types/d3-scale": "^4.0.8",
|
|
70
|
-
"@types/underscore": "^1.11.15",
|
|
71
71
|
"chroma-js": "^2.4.2",
|
|
72
72
|
"d3-array": "^3.2.4",
|
|
73
73
|
"d3-interpolate": "^3.0.1",
|