layerchart 0.6.6 → 0.6.9
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/components/AxisX.svelte.d.ts +1 -1
- package/components/AxisY.svelte.d.ts +1 -1
- package/components/HighlightLine.svelte +62 -24
- package/components/HighlightLine.svelte.d.ts +1 -0
- package/components/HighlightRect.svelte +53 -22
- package/components/HighlightRect.svelte.d.ts +1 -0
- package/components/Tooltip.svelte +6 -6
- package/package.json +7 -7
|
@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
|
|
|
2
2
|
import type { FormatType } from 'svelte-ux/utils/format';
|
|
3
3
|
declare const __propDef: {
|
|
4
4
|
props: {
|
|
5
|
-
gridlines?: boolean
|
|
5
|
+
gridlines?: boolean | svelte.JSX.SVGProps<SVGLineElement>;
|
|
6
6
|
formatTick?: FormatType;
|
|
7
7
|
ticks?: any;
|
|
8
8
|
xTick?: any;
|
|
@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
|
|
|
2
2
|
import type { FormatType } from 'svelte-ux/utils/format';
|
|
3
3
|
declare const __propDef: {
|
|
4
4
|
props: {
|
|
5
|
-
gridlines?: boolean
|
|
5
|
+
gridlines?: boolean | svelte.JSX.SVGProps<SVGLineElement>;
|
|
6
6
|
ticks?: number | Function;
|
|
7
7
|
formatTick?: FormatType;
|
|
8
8
|
xTick?: number;
|
|
@@ -1,42 +1,80 @@
|
|
|
1
|
-
<script>import {
|
|
2
|
-
import { getContext } from 'svelte';
|
|
1
|
+
<script>import { getContext } from 'svelte';
|
|
3
2
|
import { get } from 'svelte/store';
|
|
3
|
+
import { max } from 'd3-array';
|
|
4
|
+
import { isScaleBand } from '../utils/scales';
|
|
4
5
|
import Circle from './Circle.svelte';
|
|
5
6
|
import Line from './Line.svelte';
|
|
7
|
+
const { xScale, xRange, xGet, yScale, yRange, yGet, zScale } = getContext('LayerCake');
|
|
6
8
|
export let data;
|
|
7
9
|
export let color = undefined;
|
|
8
|
-
|
|
10
|
+
export let axis = 'x';
|
|
9
11
|
// TODO: Fix circle points being backwards for stack (see AreaStack)
|
|
10
12
|
$: x = $xGet(data);
|
|
13
|
+
$: xOffset = isScaleBand($xScale) ? $xScale.bandwidth() / 2 : 0;
|
|
14
|
+
$: y = $yGet(data);
|
|
15
|
+
$: yOffset = isScaleBand($yScale) ? $yScale.bandwidth() / 2 : 0;
|
|
11
16
|
function getColor(index) {
|
|
12
17
|
return color ?? get(zScale)(index) ?? 'var(--color-blue-500)';
|
|
13
18
|
}
|
|
14
19
|
let lines = [];
|
|
15
|
-
$:
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
x2: x,
|
|
30
|
-
y2: $yRange[0]
|
|
20
|
+
$: {
|
|
21
|
+
lines = [];
|
|
22
|
+
if (axis === 'x' || axis === 'both') {
|
|
23
|
+
if (Array.isArray(x)) {
|
|
24
|
+
// `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
|
|
25
|
+
lines = [
|
|
26
|
+
...lines,
|
|
27
|
+
...x.map((xItem, i) => ({
|
|
28
|
+
x1: xItem + xOffset,
|
|
29
|
+
y1: 0,
|
|
30
|
+
x2: xItem + xOffset,
|
|
31
|
+
y2: max($yRange)
|
|
32
|
+
}))
|
|
33
|
+
];
|
|
31
34
|
}
|
|
32
|
-
|
|
35
|
+
else {
|
|
36
|
+
lines = [
|
|
37
|
+
...lines,
|
|
38
|
+
{
|
|
39
|
+
x1: x + xOffset,
|
|
40
|
+
y1: 0,
|
|
41
|
+
x2: x + xOffset,
|
|
42
|
+
y2: max($yRange)
|
|
43
|
+
}
|
|
44
|
+
];
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
if (axis === 'y' || axis === 'both') {
|
|
48
|
+
if (Array.isArray(y)) {
|
|
49
|
+
// `y` accessor with multiple properties (ex. `y={['start', 'end']})`)
|
|
50
|
+
lines = [
|
|
51
|
+
...lines,
|
|
52
|
+
...y.map((yItem, i) => ({
|
|
53
|
+
x1: 0,
|
|
54
|
+
y1: yItem + yOffset,
|
|
55
|
+
x2: max($xRange),
|
|
56
|
+
y2: yItem + yOffset
|
|
57
|
+
}))
|
|
58
|
+
];
|
|
59
|
+
}
|
|
60
|
+
else {
|
|
61
|
+
lines = [
|
|
62
|
+
...lines,
|
|
63
|
+
{
|
|
64
|
+
x1: 0,
|
|
65
|
+
y1: y + yOffset,
|
|
66
|
+
x2: max($xRange),
|
|
67
|
+
y2: y + yOffset
|
|
68
|
+
}
|
|
69
|
+
];
|
|
70
|
+
}
|
|
71
|
+
}
|
|
33
72
|
}
|
|
34
73
|
let points = [];
|
|
35
|
-
$: yOffset = isScaleBand($yScale) ? $yScale.bandwidth() / 2 : 0;
|
|
36
74
|
$: if (Array.isArray(x)) {
|
|
37
75
|
// `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
|
|
38
76
|
points = x.map((xItem, i) => ({
|
|
39
|
-
x: xItem,
|
|
77
|
+
x: xItem + xOffset,
|
|
40
78
|
y: $yGet(data) + yOffset,
|
|
41
79
|
color: getColor(i)
|
|
42
80
|
}));
|
|
@@ -44,7 +82,7 @@ $: if (Array.isArray(x)) {
|
|
|
44
82
|
else if (Array.isArray(data)) {
|
|
45
83
|
// Stack series
|
|
46
84
|
points = data.map((yValue, i) => ({
|
|
47
|
-
x,
|
|
85
|
+
x: x + xOffset,
|
|
48
86
|
y: $yScale(yValue) + yOffset,
|
|
49
87
|
color: getColor(i)
|
|
50
88
|
}));
|
|
@@ -52,7 +90,7 @@ else if (Array.isArray(data)) {
|
|
|
52
90
|
else {
|
|
53
91
|
points = [
|
|
54
92
|
{
|
|
55
|
-
x,
|
|
93
|
+
x: x + xOffset,
|
|
56
94
|
y: $yGet(data) + yOffset,
|
|
57
95
|
color: getColor(0)
|
|
58
96
|
}
|
|
@@ -2,32 +2,63 @@
|
|
|
2
2
|
import { max, min } from 'd3-array';
|
|
3
3
|
import { isScaleBand } from '../utils/scales';
|
|
4
4
|
import Rect from './Rect.svelte';
|
|
5
|
+
const { flatData, x, xScale, xDomain, xRange, xGet, yScale, yDomain, yRange, yGet } = getContext('LayerCake');
|
|
5
6
|
export let data;
|
|
6
|
-
|
|
7
|
-
$: isBand = isScaleBand($xScale);
|
|
7
|
+
export let axis = isScaleBand($yScale) ? 'y' : 'x';
|
|
8
8
|
$: xCoord = $xGet(data);
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
}
|
|
13
|
-
else if (Array.isArray(xCoord)) {
|
|
14
|
-
// `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
|
|
15
|
-
// Use first/last values for width
|
|
16
|
-
width = max(xCoord) - min(xCoord);
|
|
17
|
-
xCoord = min(xCoord); // Use left-most value for top left of rect
|
|
18
|
-
}
|
|
19
|
-
else {
|
|
20
|
-
// Find width to next data point
|
|
21
|
-
let index = $flatData.findIndex((d) => Number($x(d)) === Number($x(data)));
|
|
22
|
-
let nextDataPoint = $x($flatData[index + 1]);
|
|
23
|
-
width = ($xScale(nextDataPoint) ?? 0) - (xCoord ?? 0);
|
|
24
|
-
}
|
|
25
|
-
$: dimensions = {
|
|
26
|
-
x: xCoord - (isBand ? ($xScale.padding() * $xScale.step()) / 2 : 0),
|
|
9
|
+
$: yCoord = $yGet(data);
|
|
10
|
+
let dimensions = {
|
|
11
|
+
x: 0,
|
|
27
12
|
y: 0,
|
|
28
|
-
width,
|
|
29
|
-
height:
|
|
13
|
+
width: 0,
|
|
14
|
+
height: 0
|
|
30
15
|
};
|
|
16
|
+
$: {
|
|
17
|
+
if (axis === 'x' || axis === 'both') {
|
|
18
|
+
if (isScaleBand($xScale)) {
|
|
19
|
+
dimensions.width = $xScale.step();
|
|
20
|
+
}
|
|
21
|
+
else if (Array.isArray(xCoord)) {
|
|
22
|
+
// `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
|
|
23
|
+
// Use first/last values for width
|
|
24
|
+
dimensions.width = max(xCoord) - min(xCoord);
|
|
25
|
+
xCoord = min(xCoord); // Use left-most value for top left of rect
|
|
26
|
+
}
|
|
27
|
+
else {
|
|
28
|
+
// Find width to next data point
|
|
29
|
+
const index = $flatData.findIndex((d) => Number($x(d)) === Number($x(data)));
|
|
30
|
+
const isLastPoint = index + 1 === $flatData.length;
|
|
31
|
+
const nextDataPoint = isLastPoint ? max($xDomain) : $x($flatData[index + 1]);
|
|
32
|
+
dimensions.width = ($xScale(nextDataPoint) ?? 0) - (xCoord ?? 0);
|
|
33
|
+
}
|
|
34
|
+
dimensions.x = xCoord - (isScaleBand($xScale) ? ($xScale.padding() * $xScale.step()) / 2 : 0);
|
|
35
|
+
if (axis === 'x') {
|
|
36
|
+
dimensions.height = $yRange[0];
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
if (axis === 'y' || axis === 'both') {
|
|
40
|
+
if (isScaleBand($yScale)) {
|
|
41
|
+
dimensions.height = $yScale.step();
|
|
42
|
+
}
|
|
43
|
+
else if (Array.isArray(xCoord)) {
|
|
44
|
+
// `y` accessor with multiple properties (ex. `y={['start', 'end']})`)
|
|
45
|
+
// Use first/last values for width
|
|
46
|
+
dimensions.height = max(yCoord) - min(yCoord);
|
|
47
|
+
yCoord = min(yCoord); // Use left-most value for top left of rect
|
|
48
|
+
}
|
|
49
|
+
else {
|
|
50
|
+
// Find width to next data point
|
|
51
|
+
const index = $flatData.findIndex((d) => Number($x(d)) === Number($x(data)));
|
|
52
|
+
const isLastPoint = index + 1 === $flatData.length;
|
|
53
|
+
const nextDataPoint = isLastPoint ? max($yDomain) : $x($flatData[index + 1]);
|
|
54
|
+
dimensions.height = ($yScale(nextDataPoint) ?? 0) - (yCoord ?? 0);
|
|
55
|
+
}
|
|
56
|
+
dimensions.y = yCoord - (isScaleBand($yScale) ? ($yScale.padding() * $yScale.step()) / 2 : 0);
|
|
57
|
+
if (axis === 'y') {
|
|
58
|
+
dimensions.width = $xRange[1];
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}
|
|
31
62
|
</script>
|
|
32
63
|
|
|
33
64
|
{#if Number.isFinite(dimensions.x)}
|
|
@@ -66,7 +66,7 @@ function handleTooltip(event, tooltipData) {
|
|
|
66
66
|
if (mode === 'quadtree') {
|
|
67
67
|
tooltipData = quadtree.find(localX, localY, radius);
|
|
68
68
|
}
|
|
69
|
-
else {
|
|
69
|
+
else if (mode === 'bisect') {
|
|
70
70
|
// `x` value at mouse/touch coordinate
|
|
71
71
|
const valueAtPoint = scaleInvert($xScale, localX);
|
|
72
72
|
if (isScaleBand($xScale)) {
|
|
@@ -137,13 +137,13 @@ $: if (mode === 'voronoi') {
|
|
|
137
137
|
points = $flatData.map((d) => {
|
|
138
138
|
const xValue = $xGet(d);
|
|
139
139
|
const yValue = $yGet(d);
|
|
140
|
-
const x = Array.isArray(xValue) ? xValue
|
|
141
|
-
const y = Array.isArray(yValue) ? yValue
|
|
140
|
+
const x = Array.isArray(xValue) ? min(xValue) : xValue;
|
|
141
|
+
const y = Array.isArray(yValue) ? min(yValue) : yValue;
|
|
142
142
|
const point = [x, y];
|
|
143
143
|
point.data = d;
|
|
144
144
|
return point;
|
|
145
145
|
});
|
|
146
|
-
voronoi = Delaunay.from(points).voronoi([0, 0, $width, $height]);
|
|
146
|
+
voronoi = Delaunay.from(points).voronoi([0, 0, Math.max($width, 0), Math.max($height, 0)]); // width and/or height can sometimes be negative (when loading data remotely and updately)
|
|
147
147
|
}
|
|
148
148
|
let quadtree;
|
|
149
149
|
$: if (mode === 'quadtree') {
|
|
@@ -159,7 +159,7 @@ $: if (mode === 'quadtree') {
|
|
|
159
159
|
// Using first value. Consider using average, max, etc
|
|
160
160
|
// const midpoint = new Date((value[1].valueOf() + value[0].getTime()) / 2);
|
|
161
161
|
// return midpoint;
|
|
162
|
-
return value
|
|
162
|
+
return min(value);
|
|
163
163
|
}
|
|
164
164
|
else {
|
|
165
165
|
return value;
|
|
@@ -172,7 +172,7 @@ $: if (mode === 'quadtree') {
|
|
|
172
172
|
// Using first value. Consider using average, max, etc
|
|
173
173
|
// const midpoint = new Date((value[1].valueOf() + value[0].getTime()) / 2);
|
|
174
174
|
// return midpoint;
|
|
175
|
-
return value
|
|
175
|
+
return min(value);
|
|
176
176
|
}
|
|
177
177
|
else {
|
|
178
178
|
return value;
|
package/package.json
CHANGED
|
@@ -3,11 +3,11 @@
|
|
|
3
3
|
"author": "Sean Lynch <techniq35@gmail.com>",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"repository": "techniq/layerchart",
|
|
6
|
-
"version": "0.6.
|
|
6
|
+
"version": "0.6.9",
|
|
7
7
|
"devDependencies": {
|
|
8
8
|
"@rollup/plugin-dsv": "^2.0.3",
|
|
9
|
-
"@sveltejs/adapter-vercel": "^1.0.0-next.
|
|
10
|
-
"@sveltejs/kit": "^1.0.0-next.
|
|
9
|
+
"@sveltejs/adapter-vercel": "^1.0.0-next.59",
|
|
10
|
+
"@sveltejs/kit": "^1.0.0-next.354",
|
|
11
11
|
"@tailwindcss/typography": "^0.5.2",
|
|
12
12
|
"@types/d3-array": "^3.0.3",
|
|
13
13
|
"@types/d3-delaunay": "^6.0.1",
|
|
@@ -20,16 +20,16 @@
|
|
|
20
20
|
"@types/lodash-es": "^4.17.6",
|
|
21
21
|
"autoprefixer": "^10.4.7",
|
|
22
22
|
"mdsvex": "^0.10.6",
|
|
23
|
-
"prettier": "^2.
|
|
23
|
+
"prettier": "^2.7.1",
|
|
24
24
|
"prettier-plugin-svelte": "^2.7.0",
|
|
25
25
|
"prism-themes": "^1.9.0",
|
|
26
26
|
"svelte": "^3.48.0",
|
|
27
27
|
"svelte-check": "^2.7.2",
|
|
28
28
|
"svelte-preprocess": "^4.10.7",
|
|
29
29
|
"svelte2tsx": "^0.5.10",
|
|
30
|
-
"tailwindcss": "^3.1.
|
|
30
|
+
"tailwindcss": "^3.1.4",
|
|
31
31
|
"tslib": "^2.4.0",
|
|
32
|
-
"typescript": "^4.7.
|
|
32
|
+
"typescript": "^4.7.4",
|
|
33
33
|
"unist-util-visit": "^4.1.0",
|
|
34
34
|
"vite-plugin-sveld": "^1.0.3"
|
|
35
35
|
},
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"date-fns": "^2.28.0",
|
|
50
50
|
"layercake": "^6.1.0",
|
|
51
51
|
"lodash-es": "^4.17.21",
|
|
52
|
-
"svelte-ux": "^0.5
|
|
52
|
+
"svelte-ux": "^0.6.5"
|
|
53
53
|
},
|
|
54
54
|
"exports": {
|
|
55
55
|
"./package.json": "./package.json",
|