layerchart 0.24.3 → 0.24.4
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.
|
@@ -12,6 +12,7 @@ export let topOffset = top ? 0 : 10;
|
|
|
12
12
|
export let leftOffset = left ? 0 : 10;
|
|
13
13
|
export let contained = 'container'; // TODO: Support 'window' using getBoundingClientRect()
|
|
14
14
|
export let animate = true;
|
|
15
|
+
export let variant = 'dark';
|
|
15
16
|
export let header = undefined;
|
|
16
17
|
export let classes = {};
|
|
17
18
|
const { containerWidth, containerHeight } = getContext('LayerCake');
|
|
@@ -59,13 +60,30 @@ $: if ($tooltip) {
|
|
|
59
60
|
>
|
|
60
61
|
<div
|
|
61
62
|
class={cls(
|
|
62
|
-
'
|
|
63
|
+
variant !== 'none' && [
|
|
64
|
+
'px-2 py-1 h-full rounded elevation-1',
|
|
65
|
+
'[&_.label]:text-xs [&_.label]:text-right [&_.label]:whitespace-nowrap',
|
|
66
|
+
['[&_.value]:text-sm [&_.value]:tabular-nums'],
|
|
67
|
+
],
|
|
68
|
+
{
|
|
69
|
+
dark: [
|
|
70
|
+
'bg-gray-900/90 backdrop-filter backdrop-blur-[2px] text-white',
|
|
71
|
+
'[&_.label]:text-white/75',
|
|
72
|
+
],
|
|
73
|
+
light: ['bg-white text-gray-800 border border-gray-500', '[&_.label]:text-black/50'],
|
|
74
|
+
none: '',
|
|
75
|
+
}[variant],
|
|
63
76
|
classes.container,
|
|
64
77
|
$$props.class
|
|
65
78
|
)}
|
|
66
79
|
>
|
|
67
80
|
{#if header || $$slots.header}
|
|
68
|
-
<div
|
|
81
|
+
<div
|
|
82
|
+
class={cls(
|
|
83
|
+
variant !== 'none' && 'text-center font-semibold whitespace-nowrap',
|
|
84
|
+
classes.header
|
|
85
|
+
)}
|
|
86
|
+
>
|
|
69
87
|
<slot name="header" data={$tooltip.data}>
|
|
70
88
|
{header?.($tooltip.data)}
|
|
71
89
|
</slot>
|
|
@@ -75,7 +93,7 @@ $: if ($tooltip) {
|
|
|
75
93
|
{#if $$slots.default}
|
|
76
94
|
<div
|
|
77
95
|
class={cls(
|
|
78
|
-
'grid grid-cols-[1fr,auto] gap-x-2 gap-y-1 items-center pt-1',
|
|
96
|
+
variant !== 'none' && 'grid grid-cols-[1fr,auto] gap-x-2 gap-y-1 items-center pt-1',
|
|
79
97
|
classes.content
|
|
80
98
|
)}
|
|
81
99
|
>
|
|
@@ -8,6 +8,7 @@ declare const __propDef: {
|
|
|
8
8
|
leftOffset?: number | undefined;
|
|
9
9
|
contained?: false | "container" | undefined;
|
|
10
10
|
animate?: boolean | undefined;
|
|
11
|
+
variant?: "none" | "dark" | "light" | undefined;
|
|
11
12
|
header?: ((data: any) => any) | undefined;
|
|
12
13
|
classes?: {
|
|
13
14
|
root?: string | undefined;
|
|
@@ -140,7 +140,7 @@ function showTooltip(event, tooltipData) {
|
|
|
140
140
|
}
|
|
141
141
|
case 'bisect-x': {
|
|
142
142
|
// `x` value at mouse/touch coordinate
|
|
143
|
-
const xValueAtPoint = scaleInvert($xScale, localX);
|
|
143
|
+
const xValueAtPoint = scaleInvert($xScale, localX - $padding.left);
|
|
144
144
|
const index = bisectX($flatData, xValueAtPoint, 1);
|
|
145
145
|
const previousValue = $flatData[index - 1];
|
|
146
146
|
const currentValue = $flatData[index];
|
|
@@ -149,7 +149,7 @@ function showTooltip(event, tooltipData) {
|
|
|
149
149
|
}
|
|
150
150
|
case 'bisect-y': {
|
|
151
151
|
// `y` value at mouse/touch coordinate
|
|
152
|
-
const yValueAtPoint = scaleInvert($yScale, localY);
|
|
152
|
+
const yValueAtPoint = scaleInvert($yScale, localY - $padding.left);
|
|
153
153
|
const index = bisectY($flatData, yValueAtPoint, 1);
|
|
154
154
|
const previousValue = $flatData[index - 1];
|
|
155
155
|
const currentValue = $flatData[index];
|
|
@@ -280,7 +280,7 @@ $: if (mode === 'bounds' || mode === 'band') {
|
|
|
280
280
|
{#if ['bisect-x', 'bisect-y', 'bisect-band', 'quadtree'].includes(mode)}
|
|
281
281
|
<Html>
|
|
282
282
|
<div
|
|
283
|
-
class="absolute"
|
|
283
|
+
class="tooltip-trigger absolute"
|
|
284
284
|
style:width="{$width}px"
|
|
285
285
|
style:height="{$height}px"
|
|
286
286
|
style:background={debug ? 'rgba(255 0 0 / .1)' : undefined}
|
|
@@ -7,16 +7,16 @@ export let valueAlign = 'left';
|
|
|
7
7
|
export let classes = {};
|
|
8
8
|
</script>
|
|
9
9
|
|
|
10
|
-
<div class={cls('
|
|
10
|
+
<div class={cls('label', classes.label)}>
|
|
11
11
|
<slot name="label">{label}:</slot>
|
|
12
12
|
</div>
|
|
13
13
|
|
|
14
14
|
<div
|
|
15
15
|
class={cls(
|
|
16
|
-
'
|
|
16
|
+
'value',
|
|
17
17
|
{
|
|
18
18
|
'text-right': valueAlign === 'right',
|
|
19
|
-
'text-center': valueAlign === 'center'
|
|
19
|
+
'text-center': valueAlign === 'center',
|
|
20
20
|
},
|
|
21
21
|
classes.value,
|
|
22
22
|
$$props.class
|
package/dist/docs/Preview.svelte
CHANGED
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"author": "Sean Lynch <techniq35@gmail.com>",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": "techniq/layerchart",
|
|
7
|
-
"version": "0.24.
|
|
7
|
+
"version": "0.24.4",
|
|
8
8
|
"scripts": {
|
|
9
9
|
"dev": "vite dev",
|
|
10
10
|
"build": "vite build",
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
"rehype-slug": "^6.0.0",
|
|
55
55
|
"svelte": "^4.2.1",
|
|
56
56
|
"svelte-check": "^3.5.2",
|
|
57
|
-
"svelte-json-tree": "^2.
|
|
57
|
+
"svelte-json-tree": "^2.2.0",
|
|
58
58
|
"svelte-preprocess": "^5.0.4",
|
|
59
59
|
"svelte2tsx": "^0.6.23",
|
|
60
60
|
"tailwindcss": "^3.3.3",
|