layerchart 0.37.1 → 0.37.2
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.
|
@@ -41,47 +41,48 @@ $: orientation =
|
|
|
41
41
|
: ['top', 'bottom'].includes(placement)
|
|
42
42
|
? 'horizontal'
|
|
43
43
|
: 'vertical';
|
|
44
|
-
|
|
44
|
+
export let scale = undefined;
|
|
45
|
+
$: _scale = scale ?? (['horizontal', 'angle'].includes(orientation) ? $xScale : $yScale);
|
|
45
46
|
$: [xRangeMin, xRangeMax] = extent($xRange);
|
|
46
47
|
$: [yRangeMin, yRangeMax] = extent($yRange);
|
|
47
48
|
$: tickVals = Array.isArray(ticks)
|
|
48
49
|
? ticks
|
|
49
50
|
: typeof ticks === 'function'
|
|
50
|
-
? ticks(
|
|
51
|
-
: isScaleBand(
|
|
52
|
-
?
|
|
53
|
-
:
|
|
51
|
+
? ticks(_scale)
|
|
52
|
+
: isScaleBand(_scale)
|
|
53
|
+
? _scale.domain()
|
|
54
|
+
: _scale.ticks(ticks);
|
|
54
55
|
function getCoords(tick) {
|
|
55
56
|
switch (placement) {
|
|
56
57
|
case 'top':
|
|
57
58
|
return {
|
|
58
|
-
x:
|
|
59
|
-
y:
|
|
59
|
+
x: _scale(tick) + (isScaleBand(_scale) ? _scale.bandwidth() / 2 : 0),
|
|
60
|
+
y: yRangeMin,
|
|
60
61
|
};
|
|
61
62
|
case 'bottom':
|
|
62
63
|
return {
|
|
63
|
-
x:
|
|
64
|
+
x: _scale(tick) + (isScaleBand(_scale) ? _scale.bandwidth() / 2 : 0),
|
|
64
65
|
y: yRangeMax,
|
|
65
66
|
};
|
|
66
67
|
case 'left':
|
|
67
68
|
return {
|
|
68
69
|
x: xRangeMin,
|
|
69
|
-
y:
|
|
70
|
+
y: _scale(tick) + (isScaleBand(_scale) ? _scale.bandwidth() / 2 : 0),
|
|
70
71
|
};
|
|
71
72
|
case 'right':
|
|
72
73
|
return {
|
|
73
74
|
x: xRangeMax,
|
|
74
|
-
y:
|
|
75
|
+
y: _scale(tick) + (isScaleBand(_scale) ? _scale.bandwidth() / 2 : 0),
|
|
75
76
|
};
|
|
76
77
|
case 'angle':
|
|
77
78
|
return {
|
|
78
|
-
x:
|
|
79
|
+
x: _scale(tick),
|
|
79
80
|
y: yRangeMax,
|
|
80
81
|
};
|
|
81
82
|
case 'radius':
|
|
82
83
|
return {
|
|
83
84
|
x: xRangeMin,
|
|
84
|
-
y:
|
|
85
|
+
y: _scale(tick),
|
|
85
86
|
};
|
|
86
87
|
}
|
|
87
88
|
}
|
|
@@ -114,7 +115,7 @@ function getDefaultTickLabelProps(tick) {
|
|
|
114
115
|
dy: -2, // manually adjusted until Text supports custom styles
|
|
115
116
|
};
|
|
116
117
|
case 'angle':
|
|
117
|
-
const xValue =
|
|
118
|
+
const xValue = _scale(tick);
|
|
118
119
|
return {
|
|
119
120
|
textAnchor: xValue === 0 || xValue === Math.PI ? 'middle' : xValue > Math.PI ? 'end' : 'start',
|
|
120
121
|
verticalAnchor: 'middle',
|
|
@@ -221,7 +222,7 @@ function getDefaultTickLabelProps(tick) {
|
|
|
221
222
|
{@const resolvedTickLabelProps = {
|
|
222
223
|
x: orientation === 'angle' ? radialTickCoords[0] : tickCoords.x,
|
|
223
224
|
y: orientation === 'angle' ? radialTickCoords[1] : tickCoords.y,
|
|
224
|
-
value: formatValue(tick, format ??
|
|
225
|
+
value: formatValue(tick, format ?? _scale.tickFormat?.() ?? ((v) => v)),
|
|
225
226
|
...getDefaultTickLabelProps(tick),
|
|
226
227
|
tweened,
|
|
227
228
|
spring,
|
|
@@ -21,6 +21,7 @@ declare const __propDef: {
|
|
|
21
21
|
tweened?: boolean | Parameters<typeof tweenedStore>[1];
|
|
22
22
|
transitionIn?: typeof fade | (() => void) | undefined;
|
|
23
23
|
transitionInParams?: TransitionParams | undefined;
|
|
24
|
+
scale?: any;
|
|
24
25
|
};
|
|
25
26
|
events: {
|
|
26
27
|
[evt: string]: CustomEvent<any>;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
<script>import { getContext } from 'svelte';
|
|
2
2
|
import { createDimensionGetter } from '../utils/rect.js';
|
|
3
3
|
import Rect from './Rect.svelte';
|
|
4
|
+
import Spline from './Spline.svelte';
|
|
4
5
|
const { x: xContext, y: yContext } = getContext('LayerCake');
|
|
5
6
|
export let bar;
|
|
6
7
|
/**
|
|
@@ -15,6 +16,8 @@ export let fill = undefined;
|
|
|
15
16
|
export let stroke = 'black';
|
|
16
17
|
export let strokeWidth = 0;
|
|
17
18
|
export let radius = 0;
|
|
19
|
+
/** Control which corners are rounded with radius. Uses <path> instead of <rect> when not set to `all` */
|
|
20
|
+
export let rounded = 'all';
|
|
18
21
|
export let inset = 0;
|
|
19
22
|
export let groupBy = undefined;
|
|
20
23
|
export let groupPaddingInner = 0.2;
|
|
@@ -34,16 +37,47 @@ $: getDimensions = createDimensionGetter(getContext('LayerCake'), {
|
|
|
34
37
|
},
|
|
35
38
|
});
|
|
36
39
|
$: dimensions = $getDimensions(bar);
|
|
40
|
+
$: topLeft = ['all', 'top', 'left', 'top-left'].includes(rounded);
|
|
41
|
+
$: topRight = ['all', 'top', 'right', 'top-right'].includes(rounded);
|
|
42
|
+
$: bottomLeft = ['all', 'bottom', 'left', 'bottom-left'].includes(rounded);
|
|
43
|
+
$: bottomRight = ['all', 'bottom', 'right', 'bottom-right'].includes(rounded);
|
|
44
|
+
$: width = dimensions.width;
|
|
45
|
+
$: height = dimensions.height;
|
|
46
|
+
$: diameter = 2 * radius;
|
|
47
|
+
$: pathData = `M${dimensions.x + radius},${dimensions.y} h${width - diameter}
|
|
48
|
+
${topRight ? `a${radius},${radius} 0 0 1 ${radius},${radius}` : `h${radius}v${radius}`}
|
|
49
|
+
v${height - diameter}
|
|
50
|
+
${bottomRight ? `a${radius},${radius} 0 0 1 ${-radius},${radius}` : `v${radius}h${-radius}`}
|
|
51
|
+
h${diameter - width}
|
|
52
|
+
${bottomLeft ? `a${radius},${radius} 0 0 1 ${-radius},${-radius}` : `h${-radius}v${-radius}`}
|
|
53
|
+
v${diameter - height}
|
|
54
|
+
${topLeft ? `a${radius},${radius} 0 0 1 ${radius},${-radius}` : `v${-radius}h${radius}`}
|
|
55
|
+
z`
|
|
56
|
+
.split('\n')
|
|
57
|
+
.join('');
|
|
37
58
|
</script>
|
|
38
59
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
60
|
+
{#if rounded === 'all'}
|
|
61
|
+
<Rect
|
|
62
|
+
{fill}
|
|
63
|
+
{spring}
|
|
64
|
+
{tweened}
|
|
65
|
+
{stroke}
|
|
66
|
+
stroke-width={strokeWidth}
|
|
67
|
+
rx={radius}
|
|
68
|
+
{...dimensions}
|
|
69
|
+
{...$$restProps}
|
|
70
|
+
on:click
|
|
71
|
+
/>
|
|
72
|
+
{:else}
|
|
73
|
+
<Spline
|
|
74
|
+
{pathData}
|
|
75
|
+
{fill}
|
|
76
|
+
{spring}
|
|
77
|
+
{tweened}
|
|
78
|
+
{stroke}
|
|
79
|
+
stroke-width={strokeWidth}
|
|
80
|
+
{...$$restProps}
|
|
81
|
+
on:click
|
|
82
|
+
/>
|
|
83
|
+
{/if}
|
|
@@ -11,6 +11,7 @@ declare const __propDef: {
|
|
|
11
11
|
stroke?: string | undefined;
|
|
12
12
|
strokeWidth?: number | undefined;
|
|
13
13
|
radius?: number | undefined;
|
|
14
|
+
rounded?: "top" | "bottom" | "left" | "right" | "all" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | undefined;
|
|
14
15
|
inset?: number | undefined;
|
|
15
16
|
groupBy?: string | undefined;
|
|
16
17
|
groupPaddingInner?: number | undefined;
|