layerchart 0.32.2 → 0.32.3
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.
|
@@ -20,16 +20,13 @@ export let tweened = undefined;
|
|
|
20
20
|
let tweened_x = motionStore(initialX, { spring, tweened });
|
|
21
21
|
let tweened_y = motionStore(initialY, { spring, tweened });
|
|
22
22
|
$: tick().then(() => {
|
|
23
|
-
tweened_x.set(x);
|
|
24
|
-
tweened_y.set(y);
|
|
23
|
+
tweened_x.set(x ?? (center === 'x' || center === true ? $width / 2 : 0));
|
|
24
|
+
tweened_y.set(y ?? (center === 'y' || center === true ? $height / 2 : 0));
|
|
25
25
|
});
|
|
26
26
|
let transform = undefined;
|
|
27
|
-
$: if (x != null || y != null) {
|
|
27
|
+
$: if (center || x != null || y != null) {
|
|
28
28
|
transform = `translate(${$tweened_x ?? 0}, ${$tweened_y ?? 0})`;
|
|
29
29
|
}
|
|
30
|
-
$: if (center) {
|
|
31
|
-
transform = `translate(${$width / 2}, ${$height / 2})`;
|
|
32
|
-
}
|
|
33
30
|
</script>
|
|
34
31
|
|
|
35
32
|
<g {transform} {...$$restProps} on:click on:mousemove on:mouseleave>
|
|
@@ -7,7 +7,7 @@ declare const __propDef: {
|
|
|
7
7
|
initialX?: number | undefined;
|
|
8
8
|
y?: number | undefined;
|
|
9
9
|
initialY?: number | undefined;
|
|
10
|
-
center?: boolean | undefined;
|
|
10
|
+
center?: boolean | "x" | "y" | undefined;
|
|
11
11
|
spring?: boolean | Parameters<typeof springStore>[1];
|
|
12
12
|
tweened?: boolean | Parameters<typeof tweenedStore>[1];
|
|
13
13
|
};
|
|
@@ -40,6 +40,7 @@ export let outerRadius = undefined;
|
|
|
40
40
|
export let cornerRadius = 0;
|
|
41
41
|
export let padAngle = 0;
|
|
42
42
|
// export let padRadius = 0;
|
|
43
|
+
export let placement = 'center';
|
|
43
44
|
export let spring = undefined;
|
|
44
45
|
export let tweened = undefined;
|
|
45
46
|
/**
|
|
@@ -50,7 +51,7 @@ export let offset = 0;
|
|
|
50
51
|
* Tooltip context to setup mouse events to show tooltip for related data
|
|
51
52
|
*/
|
|
52
53
|
export let tooltip = undefined;
|
|
53
|
-
const { data: contextData, x, y, xRange, rGet, config } = getContext('LayerCake');
|
|
54
|
+
const { data: contextData, x, y, xRange, rGet, config, width, height } = getContext('LayerCake');
|
|
54
55
|
$: resolved_endAngle = endAngle ?? degreesToRadians($config.xRange ? max($xRange) : max(range));
|
|
55
56
|
let tweened_endAngle = motionStore(0, { spring, tweened });
|
|
56
57
|
$: tweened_endAngle.set(resolved_endAngle);
|
|
@@ -61,9 +62,20 @@ $: pie = d3pie()
|
|
|
61
62
|
.value($x);
|
|
62
63
|
$: arcs = pie(data ?? $contextData);
|
|
63
64
|
// $: console.log({ arcs, $yRange });
|
|
65
|
+
$: radius = Math.min($width / 2, $height / 2);
|
|
66
|
+
$: coords = {
|
|
67
|
+
x: placement === 'left'
|
|
68
|
+
? radius
|
|
69
|
+
: placement === 'center'
|
|
70
|
+
? $width / 2
|
|
71
|
+
: placement === 'right'
|
|
72
|
+
? $width - radius
|
|
73
|
+
: 0,
|
|
74
|
+
y: placement === 'none' ? 0 : $height / 2,
|
|
75
|
+
};
|
|
64
76
|
</script>
|
|
65
77
|
|
|
66
|
-
<Group
|
|
78
|
+
<Group x={coords.x} y={coords.y}>
|
|
67
79
|
<slot {arcs}>
|
|
68
80
|
{#each arcs as arc, index}
|
|
69
81
|
<Arc
|
|
@@ -25,6 +25,7 @@ declare const __propDef: {
|
|
|
25
25
|
*/ outerRadius?: number | undefined;
|
|
26
26
|
cornerRadius?: number | undefined;
|
|
27
27
|
padAngle?: number | undefined;
|
|
28
|
+
placement?: "center" | "left" | "right" | "none" | undefined;
|
|
28
29
|
spring?: boolean | Parameters<typeof springStore>[1];
|
|
29
30
|
tweened?: boolean | Parameters<typeof tweenedStore>[1];
|
|
30
31
|
/**
|