layerchart 0.20.1 → 0.20.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.
- package/dist/stores/motionStore.js +1 -1
- package/dist/utils/event.js +4 -4
- package/dist/utils/genData.js +9 -9
- package/dist/utils/graph.js +2 -2
- package/dist/utils/rect.js +3 -3
- package/dist/utils/scales.js +3 -3
- package/dist/utils/stack.js +3 -3
- package/dist/utils/ticks.js +27 -27
- package/package.json +6 -6
package/dist/utils/event.js
CHANGED
|
@@ -16,14 +16,14 @@ export function localPoint(node, event) {
|
|
|
16
16
|
point = point.matrixTransform(screenCTM.inverse());
|
|
17
17
|
return {
|
|
18
18
|
x: point.x,
|
|
19
|
-
y: point.y
|
|
19
|
+
y: point.y,
|
|
20
20
|
};
|
|
21
21
|
}
|
|
22
22
|
// fall back to bounding box
|
|
23
23
|
const rect = node.getBoundingClientRect();
|
|
24
24
|
return {
|
|
25
25
|
x: coords.x - rect.left - node.clientLeft,
|
|
26
|
-
y: coords.y - rect.top - node.clientTop
|
|
26
|
+
y: coords.y - rect.top - node.clientTop,
|
|
27
27
|
};
|
|
28
28
|
}
|
|
29
29
|
function getPointFromEvent(event) {
|
|
@@ -33,12 +33,12 @@ function getPointFromEvent(event) {
|
|
|
33
33
|
return event.changedTouches.length > 0
|
|
34
34
|
? {
|
|
35
35
|
x: event.changedTouches[0].clientX,
|
|
36
|
-
y: event.changedTouches[0].clientY
|
|
36
|
+
y: event.changedTouches[0].clientY,
|
|
37
37
|
}
|
|
38
38
|
: { x: 0, y: 0 };
|
|
39
39
|
}
|
|
40
40
|
return {
|
|
41
41
|
x: event.clientX,
|
|
42
|
-
y: event.clientY
|
|
42
|
+
y: event.clientY,
|
|
43
43
|
};
|
|
44
44
|
}
|
package/dist/utils/genData.js
CHANGED
|
@@ -27,9 +27,9 @@ export function createSeries(options) {
|
|
|
27
27
|
...Object.fromEntries(keys.map((key) => {
|
|
28
28
|
return [
|
|
29
29
|
key,
|
|
30
|
-
options.value === 'integer' ? getRandomInteger(min, max) : getRandomNumber(min, max)
|
|
30
|
+
options.value === 'integer' ? getRandomInteger(min, max) : getRandomNumber(min, max),
|
|
31
31
|
];
|
|
32
|
-
}))
|
|
32
|
+
})),
|
|
33
33
|
};
|
|
34
34
|
});
|
|
35
35
|
}
|
|
@@ -45,9 +45,9 @@ export function createDateSeries(options) {
|
|
|
45
45
|
...Object.fromEntries(keys.map((key) => {
|
|
46
46
|
return [
|
|
47
47
|
key,
|
|
48
|
-
options.value === 'integer' ? getRandomInteger(min, max) : getRandomNumber(min, max)
|
|
48
|
+
options.value === 'integer' ? getRandomInteger(min, max) : getRandomNumber(min, max),
|
|
49
49
|
];
|
|
50
|
-
}))
|
|
50
|
+
})),
|
|
51
51
|
};
|
|
52
52
|
});
|
|
53
53
|
}
|
|
@@ -68,9 +68,9 @@ export function createTimeSeries(options) {
|
|
|
68
68
|
...Object.fromEntries(keys.map((key) => {
|
|
69
69
|
return [
|
|
70
70
|
key,
|
|
71
|
-
options.value === 'integer' ? getRandomInteger(min, max) : getRandomNumber(min, max)
|
|
71
|
+
options.value === 'integer' ? getRandomInteger(min, max) : getRandomNumber(min, max),
|
|
72
72
|
];
|
|
73
|
-
}))
|
|
73
|
+
})),
|
|
74
74
|
};
|
|
75
75
|
});
|
|
76
76
|
return timeSeries;
|
|
@@ -79,7 +79,7 @@ export const wideData = [
|
|
|
79
79
|
{ year: '2019', apples: 3840, bananas: 1920, cherries: 960, dates: 400 },
|
|
80
80
|
{ year: '2018', apples: 1600, bananas: 1440, cherries: 960, dates: 400 },
|
|
81
81
|
{ year: '2017', apples: 820, bananas: 1000, cherries: 640, dates: 400 },
|
|
82
|
-
{ year: '2016', apples: 820, bananas: 560, cherries: 720, dates: 400 }
|
|
82
|
+
{ year: '2016', apples: 820, bananas: 560, cherries: 720, dates: 400 },
|
|
83
83
|
];
|
|
84
84
|
export const longData = [
|
|
85
85
|
{ year: '2019', basket: 1, fruit: 'apples', value: 3840 },
|
|
@@ -97,7 +97,7 @@ export const longData = [
|
|
|
97
97
|
{ year: '2016', basket: 1, fruit: 'apples', value: 820 },
|
|
98
98
|
{ year: '2016', basket: 1, fruit: 'bananas', value: 560 },
|
|
99
99
|
{ year: '2016', basket: 2, fruit: 'cherries', value: 720 },
|
|
100
|
-
{ year: '2016', basket: 2, fruit: 'dates', value: 400 }
|
|
100
|
+
{ year: '2016', basket: 2, fruit: 'dates', value: 400 },
|
|
101
101
|
];
|
|
102
102
|
export function getPhyllotaxis({ radius, count, width, height }) {
|
|
103
103
|
// Phyllotaxis: https://www.youtube.com/watch?v=KWoJgHFYWxY
|
|
@@ -110,7 +110,7 @@ export function getSpiral({ angle, radius, count, width, height }) {
|
|
|
110
110
|
const a = degreesToRadians(angle * i);
|
|
111
111
|
return {
|
|
112
112
|
x: width / 2 + r * Math.cos(a),
|
|
113
|
-
y: height / 2 + r * Math.sin(a)
|
|
113
|
+
y: height / 2 + r * Math.sin(a),
|
|
114
114
|
};
|
|
115
115
|
});
|
|
116
116
|
}
|
package/dist/utils/graph.js
CHANGED
|
@@ -8,7 +8,7 @@ export function graphFromCsv(csv) {
|
|
|
8
8
|
source,
|
|
9
9
|
target,
|
|
10
10
|
// @ts-ignore
|
|
11
|
-
value: !value || isNaN((value = +value)) ? 1 : value
|
|
11
|
+
value: !value || isNaN((value = +value)) ? 1 : value,
|
|
12
12
|
// color: linkColor,
|
|
13
13
|
}
|
|
14
14
|
: null);
|
|
@@ -20,7 +20,7 @@ export function graphFromCsv(csv) {
|
|
|
20
20
|
export function graphFromHierarchy(hierarchy) {
|
|
21
21
|
return {
|
|
22
22
|
nodes: hierarchy.descendants(),
|
|
23
|
-
links: hierarchy.links().map((link) => ({ ...link, value: link.target.value }))
|
|
23
|
+
links: hierarchy.links().map((link) => ({ ...link, value: link.target.value })),
|
|
24
24
|
};
|
|
25
25
|
}
|
|
26
26
|
/**
|
package/dist/utils/rect.js
CHANGED
|
@@ -3,7 +3,7 @@ import { max, min } from 'd3-array';
|
|
|
3
3
|
import { groupScaleBand, isScaleBand } from './scales';
|
|
4
4
|
// TOOD: Pass in overrides for `x` and `y` accessors
|
|
5
5
|
export function createDimensionGetter(context, options) {
|
|
6
|
-
const { flatData, xGet, yGet, xRange, yRange, xScale, yScale, x: xAccessor, y: yAccessor } = context;
|
|
6
|
+
const { flatData, xGet, yGet, xRange, yRange, xScale, yScale, x: xAccessor, y: yAccessor, } = context;
|
|
7
7
|
const groupBy = options?.groupBy;
|
|
8
8
|
const padding = options?.padding ?? 0;
|
|
9
9
|
return derived([flatData, xGet, yGet, xRange, yRange, xScale, yScale, xAccessor, yAccessor], ([$flatData, $xGet, $yGet, $xRange, $yRange, $xScale, $yScale, $xAccessor, $yAccessor]) => {
|
|
@@ -47,7 +47,7 @@ export function createDimensionGetter(context, options) {
|
|
|
47
47
|
x: $xScale(left),
|
|
48
48
|
y,
|
|
49
49
|
width: $xScale(right) - $xScale(left),
|
|
50
|
-
height
|
|
50
|
+
height,
|
|
51
51
|
};
|
|
52
52
|
}
|
|
53
53
|
else {
|
|
@@ -89,7 +89,7 @@ export function createDimensionGetter(context, options) {
|
|
|
89
89
|
x,
|
|
90
90
|
y: $yScale(top),
|
|
91
91
|
width,
|
|
92
|
-
height: $yScale(bottom) - $yScale(top)
|
|
92
|
+
height: $yScale(bottom) - $yScale(top),
|
|
93
93
|
};
|
|
94
94
|
}
|
|
95
95
|
};
|
package/dist/utils/scales.js
CHANGED
|
@@ -72,7 +72,7 @@ export function tweenedScale(scale, tweenedOptions = {}) {
|
|
|
72
72
|
return {
|
|
73
73
|
subscribe: tweenedScale.subscribe,
|
|
74
74
|
domain: (values) => tweenedDomain.set(values),
|
|
75
|
-
range: (values) => tweenedRange.set(values)
|
|
75
|
+
range: (values) => tweenedRange.set(values),
|
|
76
76
|
};
|
|
77
77
|
}
|
|
78
78
|
/**
|
|
@@ -94,7 +94,7 @@ export function springScale(scale, springOptions = {}) {
|
|
|
94
94
|
return {
|
|
95
95
|
subscribe: tweenedScale.subscribe,
|
|
96
96
|
domain: (values) => domainStore.set(values),
|
|
97
|
-
range: (values) => rangeStore.set(values)
|
|
97
|
+
range: (values) => rangeStore.set(values),
|
|
98
98
|
};
|
|
99
99
|
}
|
|
100
100
|
/**
|
|
@@ -116,6 +116,6 @@ export function motionScale(scale, options) {
|
|
|
116
116
|
return {
|
|
117
117
|
subscribe: tweenedScale.subscribe,
|
|
118
118
|
domain: (values) => domainStore.set(values),
|
|
119
|
-
range: (values) => rangeStore.set(values)
|
|
119
|
+
range: (values) => rangeStore.set(values),
|
|
120
120
|
};
|
|
121
121
|
}
|
package/dist/utils/stack.js
CHANGED
|
@@ -18,7 +18,7 @@ export function createStackData(data, options) {
|
|
|
18
18
|
return {
|
|
19
19
|
...itemData[0],
|
|
20
20
|
keys: options.stackBy ? [...groupKeys, series.key] : groupKeys,
|
|
21
|
-
values: options.stackBy ? [s[0], s[1]] : [0, sum(itemData, (d) => d.value)]
|
|
21
|
+
values: options.stackBy ? [s[0], s[1]] : [0, sum(itemData, (d) => d.value)],
|
|
22
22
|
};
|
|
23
23
|
});
|
|
24
24
|
});
|
|
@@ -35,7 +35,7 @@ export function createStackData(data, options) {
|
|
|
35
35
|
return {
|
|
36
36
|
...s.data,
|
|
37
37
|
keys: [s.data[options.xKey], series.key],
|
|
38
|
-
values: [s[0], s[1]]
|
|
38
|
+
values: [s[0], s[1]],
|
|
39
39
|
};
|
|
40
40
|
});
|
|
41
41
|
});
|
|
@@ -46,7 +46,7 @@ export function createStackData(data, options) {
|
|
|
46
46
|
return Array.from(rollup(data, (items) => {
|
|
47
47
|
return {
|
|
48
48
|
keys: [items[0][options.xKey]],
|
|
49
|
-
values: [0, sum(items, (d) => d.value)]
|
|
49
|
+
values: [0, sum(items, (d) => d.value)],
|
|
50
50
|
};
|
|
51
51
|
}, (d) => d[options.xKey]).values());
|
|
52
52
|
}
|
package/dist/utils/ticks.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { timeYear, timeMonth, timeWeek, timeDay, timeHour, timeMinute, timeSecond, timeMillisecond } from 'd3-time';
|
|
1
|
+
import { timeYear, timeMonth, timeWeek, timeDay, timeHour, timeMinute, timeSecond, timeMillisecond, } from 'd3-time';
|
|
2
2
|
import { format } from 'date-fns';
|
|
3
3
|
import { formatDate, PeriodType } from 'svelte-ux/utils/date';
|
|
4
4
|
import { getDuration } from 'svelte-ux/utils/duration';
|
|
@@ -8,125 +8,125 @@ const majorTicks = [
|
|
|
8
8
|
{
|
|
9
9
|
predicate: (duration) => duration == null,
|
|
10
10
|
interval: timeYear.every(1),
|
|
11
|
-
format: (date) => date.toString()
|
|
11
|
+
format: (date) => date.toString(),
|
|
12
12
|
},
|
|
13
13
|
{
|
|
14
14
|
predicate: (duration) => duration.years > 1,
|
|
15
15
|
interval: timeYear.every(1),
|
|
16
|
-
format: (date) => formatDate(date, PeriodType.CalendarYear, 'short')
|
|
16
|
+
format: (date) => formatDate(date, PeriodType.CalendarYear, 'short'),
|
|
17
17
|
},
|
|
18
18
|
{
|
|
19
19
|
predicate: (duration) => duration.years,
|
|
20
20
|
interval: timeMonth.every(1),
|
|
21
|
-
format: (date) => formatDate(date, PeriodType.Month, 'short')
|
|
21
|
+
format: (date) => formatDate(date, PeriodType.Month, 'short'),
|
|
22
22
|
},
|
|
23
23
|
{
|
|
24
24
|
predicate: (duration) => duration.days > 30,
|
|
25
25
|
interval: timeMonth.every(1),
|
|
26
|
-
format: (date) => formatDate(date, PeriodType.Month, 'short')
|
|
26
|
+
format: (date) => formatDate(date, PeriodType.Month, 'short'),
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
predicate: (duration) => duration.days,
|
|
30
30
|
interval: timeDay.every(1),
|
|
31
|
-
format: (date) => formatDate(date, PeriodType.Day, 'short')
|
|
31
|
+
format: (date) => formatDate(date, PeriodType.Day, 'short'),
|
|
32
32
|
},
|
|
33
33
|
{
|
|
34
34
|
predicate: (duration) => duration.hours,
|
|
35
35
|
interval: timeHour.every(1),
|
|
36
|
-
format: (date) => format(date, 'h:mm a')
|
|
36
|
+
format: (date) => format(date, 'h:mm a'),
|
|
37
37
|
},
|
|
38
38
|
{
|
|
39
39
|
predicate: (duration) => duration.minutes > 10,
|
|
40
40
|
interval: timeMinute.every(10),
|
|
41
|
-
format: (date) => format(date, 'h:mm a')
|
|
41
|
+
format: (date) => format(date, 'h:mm a'),
|
|
42
42
|
},
|
|
43
43
|
{
|
|
44
44
|
predicate: (duration) => duration.minutes,
|
|
45
45
|
interval: timeMinute.every(1),
|
|
46
|
-
format: (date) => format(date, 'h:mm a')
|
|
46
|
+
format: (date) => format(date, 'h:mm a'),
|
|
47
47
|
},
|
|
48
48
|
{
|
|
49
49
|
predicate: (duration) => duration.seconds > 10,
|
|
50
50
|
interval: timeSecond.every(10),
|
|
51
|
-
format: (date) => format(date, 'h:mm:ss')
|
|
51
|
+
format: (date) => format(date, 'h:mm:ss'),
|
|
52
52
|
},
|
|
53
53
|
{
|
|
54
54
|
predicate: (duration) => duration.seconds,
|
|
55
55
|
interval: timeSecond.every(1),
|
|
56
|
-
format: (date) => format(date, 'h:mm:ss')
|
|
56
|
+
format: (date) => format(date, 'h:mm:ss'),
|
|
57
57
|
},
|
|
58
58
|
{
|
|
59
59
|
predicate: (duration) => true,
|
|
60
60
|
interval: timeMillisecond.every(100),
|
|
61
|
-
format: (date) => format(date, 'h:mm:ss.SSS')
|
|
62
|
-
}
|
|
61
|
+
format: (date) => format(date, 'h:mm:ss.SSS'),
|
|
62
|
+
},
|
|
63
63
|
];
|
|
64
64
|
const minorTicks = [
|
|
65
65
|
{
|
|
66
66
|
predicate: (duration) => duration == null,
|
|
67
67
|
interval: timeYear.every(1),
|
|
68
|
-
format: (date) => date.toString()
|
|
68
|
+
format: (date) => date.toString(),
|
|
69
69
|
},
|
|
70
70
|
{
|
|
71
71
|
predicate: (duration) => duration.years,
|
|
72
72
|
interval: timeMonth.every(1),
|
|
73
|
-
format: (date) => formatDate(date, PeriodType.Month, 'short')
|
|
73
|
+
format: (date) => formatDate(date, PeriodType.Month, 'short'),
|
|
74
74
|
},
|
|
75
75
|
{
|
|
76
76
|
predicate: (duration) => duration.days > 90,
|
|
77
77
|
interval: timeMonth.every(1),
|
|
78
|
-
format: (date) => formatDate(date, PeriodType.Month, 'short')
|
|
78
|
+
format: (date) => formatDate(date, PeriodType.Month, 'short'),
|
|
79
79
|
},
|
|
80
80
|
{
|
|
81
81
|
predicate: (duration) => duration.days > 30,
|
|
82
82
|
interval: timeWeek.every(1),
|
|
83
|
-
format: (date) => formatDate(date, PeriodType.WeekSun, 'short')
|
|
83
|
+
format: (date) => formatDate(date, PeriodType.WeekSun, 'short'),
|
|
84
84
|
},
|
|
85
85
|
{
|
|
86
86
|
predicate: (duration) => duration.days > 7,
|
|
87
87
|
interval: timeDay.every(1),
|
|
88
|
-
format: (date) => formatDate(date, PeriodType.Day, 'short')
|
|
88
|
+
format: (date) => formatDate(date, PeriodType.Day, 'short'),
|
|
89
89
|
},
|
|
90
90
|
{
|
|
91
91
|
predicate: (duration) => duration.days > 3,
|
|
92
92
|
interval: timeHour.every(8),
|
|
93
|
-
format: (date) => format(date, 'h:mm a')
|
|
93
|
+
format: (date) => format(date, 'h:mm a'),
|
|
94
94
|
},
|
|
95
95
|
{
|
|
96
96
|
predicate: (duration) => duration.days,
|
|
97
97
|
interval: timeHour.every(1),
|
|
98
|
-
format: (date) => format(date, 'h:mm a')
|
|
98
|
+
format: (date) => format(date, 'h:mm a'),
|
|
99
99
|
},
|
|
100
100
|
{
|
|
101
101
|
predicate: (duration) => duration.hours,
|
|
102
102
|
interval: timeMinute.every(15),
|
|
103
|
-
format: (date) => format(date, 'h:mm a')
|
|
103
|
+
format: (date) => format(date, 'h:mm a'),
|
|
104
104
|
},
|
|
105
105
|
{
|
|
106
106
|
predicate: (duration) => duration.minutes > 10,
|
|
107
107
|
interval: timeMinute.every(10),
|
|
108
|
-
format: (date) => format(date, 'h:mm a')
|
|
108
|
+
format: (date) => format(date, 'h:mm a'),
|
|
109
109
|
},
|
|
110
110
|
{
|
|
111
111
|
predicate: (duration) => duration.minutes > 2,
|
|
112
112
|
interval: timeMinute.every(1),
|
|
113
|
-
format: (date) => format(date, 'h:mm a')
|
|
113
|
+
format: (date) => format(date, 'h:mm a'),
|
|
114
114
|
},
|
|
115
115
|
{
|
|
116
116
|
predicate: (duration) => duration.minutes,
|
|
117
117
|
interval: timeSecond.every(10),
|
|
118
|
-
format: (date) => format(date, 'h:mm:ss')
|
|
118
|
+
format: (date) => format(date, 'h:mm:ss'),
|
|
119
119
|
},
|
|
120
120
|
{
|
|
121
121
|
predicate: (duration) => duration.seconds,
|
|
122
122
|
interval: timeSecond.every(1),
|
|
123
|
-
format: (date) => format(date, 'h:mm:ss')
|
|
123
|
+
format: (date) => format(date, 'h:mm:ss'),
|
|
124
124
|
},
|
|
125
125
|
{
|
|
126
126
|
predicate: (duration) => true,
|
|
127
127
|
interval: timeMillisecond.every(10),
|
|
128
|
-
format: (date) => format(date, 'h:mm:ss.SSS')
|
|
129
|
-
}
|
|
128
|
+
format: (date) => format(date, 'h:mm:ss.SSS'),
|
|
129
|
+
},
|
|
130
130
|
];
|
|
131
131
|
export function getMajorTicks(start, end) {
|
|
132
132
|
const duration = getDuration(start, end);
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"author": "Sean Lynch <techniq35@gmail.com>",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"repository": "techniq/layerchart",
|
|
6
|
-
"version": "0.20.
|
|
6
|
+
"version": "0.20.2",
|
|
7
7
|
"scripts": {
|
|
8
8
|
"dev": "vite dev",
|
|
9
9
|
"build": "vite build",
|
|
@@ -43,11 +43,11 @@
|
|
|
43
43
|
"@types/shapefile": "^0.6.1",
|
|
44
44
|
"@types/topojson-client": "^3.1.1",
|
|
45
45
|
"autoprefixer": "^10.4.14",
|
|
46
|
-
"execa": "^7.
|
|
46
|
+
"execa": "^7.2.0",
|
|
47
47
|
"marked": "^5.1.2",
|
|
48
48
|
"mdsvex": "^0.11.0",
|
|
49
|
-
"prettier": "^
|
|
50
|
-
"prettier-plugin-svelte": "^
|
|
49
|
+
"prettier": "^3.0.0",
|
|
50
|
+
"prettier-plugin-svelte": "^3.0.1",
|
|
51
51
|
"prism-themes": "^1.9.0",
|
|
52
52
|
"rehype-slug": "^5.1.0",
|
|
53
53
|
"svelte-check": "^3.4.6",
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"tailwindcss": "^3.3.3",
|
|
57
57
|
"tslib": "^2.6.1",
|
|
58
58
|
"typescript": "^5.1.6",
|
|
59
|
-
"unist-util-visit": "^
|
|
59
|
+
"unist-util-visit": "^5.0.0",
|
|
60
60
|
"us-atlas": "^3.0.1",
|
|
61
61
|
"vite": "^4.4.7",
|
|
62
62
|
"vite-plugin-sveld": "^1.1.0"
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
"lodash-es": "^4.17.21",
|
|
86
86
|
"shapefile": "^0.6.6",
|
|
87
87
|
"svelte": "^3.59.1",
|
|
88
|
-
"svelte-ux": "^0.
|
|
88
|
+
"svelte-ux": "^0.47.0",
|
|
89
89
|
"topojson-client": "^3.1.0"
|
|
90
90
|
},
|
|
91
91
|
"main": "./dist/index.js",
|