layerchart 0.59.5 → 0.59.6
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/components/Legend.svelte +24 -27
- package/package.json +1 -1
|
@@ -49,10 +49,7 @@
|
|
|
49
49
|
swatch?: string;
|
|
50
50
|
} = {};
|
|
51
51
|
|
|
52
|
-
$:
|
|
53
|
-
// Read scale from chart context
|
|
54
|
-
scale = $cScale;
|
|
55
|
-
}
|
|
52
|
+
$: _scale = scale ?? (cScale ? $cScale : null);
|
|
56
53
|
|
|
57
54
|
let xScale: AnyScale;
|
|
58
55
|
let interpolator: ((t: number) => string) | undefined;
|
|
@@ -60,47 +57,47 @@
|
|
|
60
57
|
let tickLabelOffset = 0;
|
|
61
58
|
let tickLine = true;
|
|
62
59
|
|
|
63
|
-
$: if (!
|
|
60
|
+
$: if (!_scale) {
|
|
64
61
|
// do nothing
|
|
65
|
-
} else if (
|
|
62
|
+
} else if (_scale.interpolate) {
|
|
66
63
|
// Continuous
|
|
67
|
-
const n = Math.min(
|
|
68
|
-
xScale =
|
|
69
|
-
interpolator =
|
|
64
|
+
const n = Math.min(_scale.domain().length, _scale.range().length);
|
|
65
|
+
xScale = _scale.copy().rangeRound(quantize(interpolate(0, width), n));
|
|
66
|
+
interpolator = _scale.copy().domain(quantize(interpolate(0, 1), n));
|
|
70
67
|
tickFormat = tickFormat ?? xScale.tickFormat?.();
|
|
71
|
-
} else if (
|
|
68
|
+
} else if (_scale.interpolator) {
|
|
72
69
|
// Sequential
|
|
73
|
-
xScale = Object.assign(
|
|
70
|
+
xScale = Object.assign(_scale.copy().interpolator(interpolateRound(0, width)), {
|
|
74
71
|
range() {
|
|
75
72
|
return [0, width];
|
|
76
73
|
},
|
|
77
74
|
});
|
|
78
|
-
interpolator =
|
|
75
|
+
interpolator = _scale.interpolator();
|
|
79
76
|
|
|
80
77
|
// scaleSequentialQuantile doesn’t implement ticks or tickFormat.
|
|
81
78
|
if (!xScale.ticks) {
|
|
82
79
|
if (tickValues === undefined) {
|
|
83
80
|
const n = Math.round(ticks + 1);
|
|
84
|
-
tickValues = range(n).map((i) => quantile(
|
|
81
|
+
tickValues = range(n).map((i) => quantile(_scale.domain(), i / (n - 1)));
|
|
85
82
|
}
|
|
86
83
|
// if (typeof tickFormat !== "function") {
|
|
87
84
|
// tickFormat = d3.format(tickFormat === undefined ? ",f" : tickFormat);
|
|
88
85
|
// }
|
|
89
86
|
}
|
|
90
87
|
tickFormat = tickFormat ?? xScale.tickFormat?.();
|
|
91
|
-
} else if (
|
|
88
|
+
} else if (_scale.invertExtent) {
|
|
92
89
|
// Threshold
|
|
93
|
-
const thresholds =
|
|
94
|
-
?
|
|
95
|
-
:
|
|
96
|
-
?
|
|
97
|
-
:
|
|
90
|
+
const thresholds = _scale.thresholds
|
|
91
|
+
? _scale.thresholds() // scaleQuantize
|
|
92
|
+
: _scale.quantiles
|
|
93
|
+
? _scale.quantiles() // scaleQuantile
|
|
94
|
+
: _scale.domain(); // scaleThreshold
|
|
98
95
|
|
|
99
96
|
xScale = scaleLinear()
|
|
100
|
-
.domain([-1,
|
|
97
|
+
.domain([-1, _scale.range().length - 1])
|
|
101
98
|
.rangeRound([0, width]);
|
|
102
99
|
|
|
103
|
-
swatches =
|
|
100
|
+
swatches = _scale.range().map((d: any, i: number) => {
|
|
104
101
|
return {
|
|
105
102
|
x: xScale(i - 1),
|
|
106
103
|
y: 0,
|
|
@@ -117,19 +114,19 @@
|
|
|
117
114
|
};
|
|
118
115
|
} else {
|
|
119
116
|
// Ordinal
|
|
120
|
-
xScale = scaleBand().domain(
|
|
117
|
+
xScale = scaleBand().domain(_scale.domain()).rangeRound([0, width]);
|
|
121
118
|
|
|
122
|
-
swatches =
|
|
119
|
+
swatches = _scale.domain().map((d: any) => {
|
|
123
120
|
return {
|
|
124
121
|
x: xScale(d),
|
|
125
122
|
y: 0,
|
|
126
123
|
width: Math.max(0, xScale.bandwidth() - 1),
|
|
127
124
|
height,
|
|
128
|
-
fill:
|
|
125
|
+
fill: _scale(d),
|
|
129
126
|
};
|
|
130
127
|
});
|
|
131
128
|
|
|
132
|
-
tickValues =
|
|
129
|
+
tickValues = _scale.domain();
|
|
133
130
|
tickLabelOffset = xScale.bandwidth() / 2;
|
|
134
131
|
tickLine = false;
|
|
135
132
|
tickLength = 0;
|
|
@@ -159,7 +156,7 @@
|
|
|
159
156
|
)}
|
|
160
157
|
>
|
|
161
158
|
<div class={cls('text-[10px] font-semibold', classes.title)}>{title}</div>
|
|
162
|
-
<slot values={tickValues ?? []} {
|
|
159
|
+
<slot values={tickValues ?? []} scale={_scale}>
|
|
163
160
|
{#if variant === 'ramp'}
|
|
164
161
|
<svg
|
|
165
162
|
{width}
|
|
@@ -210,7 +207,7 @@
|
|
|
210
207
|
)}
|
|
211
208
|
>
|
|
212
209
|
{#each tickValues ?? xScale?.ticks?.(ticks) ?? [] as tick}
|
|
213
|
-
{@const color =
|
|
210
|
+
{@const color = _scale(tick)}
|
|
214
211
|
<button
|
|
215
212
|
class={cls('flex gap-1', !onClick && 'cursor-auto')}
|
|
216
213
|
on:click={() => onClick?.({ tick, color })}
|