layerchart 0.7.3 → 0.7.4
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/Rect.svelte +5 -5
- package/package.json +1 -1
- package/stores/motionStore.d.ts +19 -2
- package/stores/motionStore.js +17 -0
- package/utils/scales.js +1 -2
- package/utils/stack.js +8 -3
- package/components/Rect.svelte.d.ts +0 -27
package/components/Rect.svelte
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
<script>import { motionStore } from '../stores/motionStore';
|
|
1
|
+
<script>import { motionStore, resolveOptions } from '../stores/motionStore';
|
|
2
2
|
export let x = 0;
|
|
3
3
|
export let y = 0;
|
|
4
4
|
export let width;
|
|
5
5
|
export let height;
|
|
6
6
|
export let spring = undefined;
|
|
7
7
|
export let tweened = undefined;
|
|
8
|
-
let tweened_x = motionStore(x, { spring, tweened });
|
|
9
|
-
let tweened_y = motionStore(y, { spring, tweened });
|
|
10
|
-
let tweened_width = motionStore(width, { spring, tweened });
|
|
11
|
-
let tweened_height = motionStore(height, { spring, tweened });
|
|
8
|
+
let tweened_x = motionStore(x, resolveOptions('x', { spring, tweened }));
|
|
9
|
+
let tweened_y = motionStore(y, resolveOptions('y', { spring, tweened }));
|
|
10
|
+
let tweened_width = motionStore(width, resolveOptions('width', { spring, tweened }));
|
|
11
|
+
let tweened_height = motionStore(height, resolveOptions('height', { spring, tweened }));
|
|
12
12
|
$: tweened_x.set(x);
|
|
13
13
|
$: tweened_y.set(y);
|
|
14
14
|
$: tweened_width.set(width);
|
package/package.json
CHANGED
package/stores/motionStore.d.ts
CHANGED
|
@@ -1,9 +1,26 @@
|
|
|
1
1
|
import { spring, tweened } from 'svelte/motion';
|
|
2
|
+
export declare type SpringOptions = Parameters<typeof spring>[1];
|
|
3
|
+
export declare type TweenedOptions = Parameters<typeof tweened>[1];
|
|
2
4
|
export declare type MotionOptions = {
|
|
3
|
-
spring?: boolean |
|
|
4
|
-
tweened?: boolean |
|
|
5
|
+
spring?: boolean | SpringOptions;
|
|
6
|
+
tweened?: boolean | TweenedOptions;
|
|
7
|
+
};
|
|
8
|
+
export declare type PropMotionOptions = {
|
|
9
|
+
spring?: boolean | SpringOptions | {
|
|
10
|
+
[prop: string]: SpringOptions;
|
|
11
|
+
};
|
|
12
|
+
tweened?: boolean | TweenedOptions | {
|
|
13
|
+
[prop: string]: TweenedOptions;
|
|
14
|
+
};
|
|
5
15
|
};
|
|
6
16
|
/**
|
|
7
17
|
* Convenient wrapper to create a motion store (spring(), tweened()) based on properties, or fall back to basic writable() store
|
|
8
18
|
*/
|
|
9
19
|
export declare function motionStore(value: any, options: MotionOptions): import("svelte/motion").Tweened<unknown> | import("svelte/motion").Spring<any> | import("svelte/store").Writable<any>;
|
|
20
|
+
/**
|
|
21
|
+
* Helper to resolve motion options with specific property option (useful for specifying per-prop delays)
|
|
22
|
+
*/
|
|
23
|
+
export declare function resolveOptions(prop: string, options: PropMotionOptions): {
|
|
24
|
+
spring: any;
|
|
25
|
+
tweened: any;
|
|
26
|
+
};
|
package/stores/motionStore.js
CHANGED
|
@@ -14,3 +14,20 @@ export function motionStore(value, options) {
|
|
|
14
14
|
return writable(value);
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
|
+
/**
|
|
18
|
+
* Helper to resolve motion options with specific property option (useful for specifying per-prop delays)
|
|
19
|
+
*/
|
|
20
|
+
export function resolveOptions(prop, options) {
|
|
21
|
+
return {
|
|
22
|
+
spring: typeof options.spring === 'boolean' || options.spring == null
|
|
23
|
+
? options.spring
|
|
24
|
+
: prop in options.spring
|
|
25
|
+
? options.spring[prop]
|
|
26
|
+
: options.spring,
|
|
27
|
+
tweened: typeof options.tweened === 'boolean' || options.tweened == null
|
|
28
|
+
? options.tweened
|
|
29
|
+
: prop in options.tweened
|
|
30
|
+
? options.tweened[prop]
|
|
31
|
+
: options.tweened
|
|
32
|
+
};
|
|
33
|
+
}
|
package/utils/scales.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { derived } from 'svelte/store';
|
|
2
2
|
import { tweened, spring } from 'svelte/motion';
|
|
3
|
-
import { min } from 'd3-array';
|
|
4
3
|
import { motionStore } from '../stores/motionStore';
|
|
5
4
|
/**
|
|
6
5
|
* Implemenation for missing `scaleBand().invert()`
|
|
@@ -14,8 +13,8 @@ import { motionStore } from '../stores/motionStore';
|
|
|
14
13
|
*/
|
|
15
14
|
export function scaleBandInvert(scale) {
|
|
16
15
|
const domain = scale.domain();
|
|
17
|
-
const paddingOuter = scale(min(domain));
|
|
18
16
|
const eachBand = scale.step();
|
|
17
|
+
const paddingOuter = eachBand * scale.paddingOuter(); // scale(domain[0]);
|
|
19
18
|
return function (value) {
|
|
20
19
|
// TODO: Should this use Math.round to better select? https://stackoverflow.com/questions/38633082/d3-getting-invert-value-of-band-scales/50846323#comment104743795_50846323
|
|
21
20
|
const index = Math.floor((value - paddingOuter) / eachBand);
|
package/utils/stack.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { flatGroup, max, sum } from 'd3-array';
|
|
1
|
+
import { flatGroup, max, rollup, sum } from 'd3-array';
|
|
2
2
|
import { stack } from 'd3-shape';
|
|
3
3
|
import { pivotWider } from './pivot';
|
|
4
4
|
export function createStackData(data, options) {
|
|
@@ -42,8 +42,13 @@ export function createStackData(data, options) {
|
|
|
42
42
|
return result;
|
|
43
43
|
}
|
|
44
44
|
else {
|
|
45
|
-
//
|
|
46
|
-
return data
|
|
45
|
+
// No grouping or stacking. Aggregate based on `xKey`
|
|
46
|
+
return Array.from(rollup(data, (items) => {
|
|
47
|
+
return {
|
|
48
|
+
keys: [items[0][options.xKey]],
|
|
49
|
+
values: [0, sum(items, (d) => d.value)]
|
|
50
|
+
};
|
|
51
|
+
}, (d) => d[options.xKey]).values());
|
|
47
52
|
}
|
|
48
53
|
}
|
|
49
54
|
/**
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { SvelteComponentTyped } from "svelte";
|
|
2
|
-
import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
|
|
3
|
-
declare const __propDef: {
|
|
4
|
-
props: {
|
|
5
|
-
[x: string]: any;
|
|
6
|
-
x?: number;
|
|
7
|
-
y?: number;
|
|
8
|
-
width: number;
|
|
9
|
-
height: number;
|
|
10
|
-
spring?: boolean | Parameters<typeof springStore>[1];
|
|
11
|
-
tweened?: boolean | Parameters<typeof tweenedStore>[1];
|
|
12
|
-
};
|
|
13
|
-
events: {
|
|
14
|
-
click: MouseEvent;
|
|
15
|
-
mouseover: MouseEvent;
|
|
16
|
-
mouseout: MouseEvent;
|
|
17
|
-
} & {
|
|
18
|
-
[evt: string]: CustomEvent<any>;
|
|
19
|
-
};
|
|
20
|
-
slots: {};
|
|
21
|
-
};
|
|
22
|
-
export declare type RectProps = typeof __propDef.props;
|
|
23
|
-
export declare type RectEvents = typeof __propDef.events;
|
|
24
|
-
export declare type RectSlots = typeof __propDef.slots;
|
|
25
|
-
export default class Rect extends SvelteComponentTyped<RectProps, RectEvents, RectSlots> {
|
|
26
|
-
}
|
|
27
|
-
export {};
|