layerchart 0.7.6 → 0.8.0

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.
@@ -52,6 +52,21 @@ $: if (yBaseline != null) {
52
52
  $: yReverse = yScale ? !isScaleBand(yScale) : true;
53
53
  </script>
54
54
 
55
- <LayerCake {data} {x} {xDomain} {y} {yScale} {yDomain} {yReverse} {...$$restProps}>
56
- <slot />
55
+ <LayerCake
56
+ {data}
57
+ {x}
58
+ {xDomain}
59
+ {y}
60
+ {yScale}
61
+ {yDomain}
62
+ {yReverse}
63
+ {...$$restProps}
64
+ let:aspectRatio
65
+ let:containerHeight
66
+ let:containerWidth
67
+ let:height
68
+ let:width
69
+ let:element
70
+ >
71
+ <slot {aspectRatio} {containerHeight} {containerWidth} {height} {width} {element} />
57
72
  </LayerCake>
@@ -15,7 +15,14 @@ declare const __propDef: {
15
15
  [evt: string]: CustomEvent<any>;
16
16
  };
17
17
  slots: {
18
- default: {};
18
+ default: {
19
+ aspectRatio: number;
20
+ containerHeight: number;
21
+ containerWidth: number;
22
+ height: number;
23
+ width: number;
24
+ element: Element;
25
+ };
19
26
  };
20
27
  };
21
28
  export declare type ChartProps = typeof __propDef.props;
@@ -0,0 +1,18 @@
1
+ <script>import { getContext } from 'svelte';
2
+ const { rScale } = getContext('LayerCake');
3
+ const domain = $rScale.domain();
4
+ const range = $rScale.range();
5
+ // zip values together
6
+ export let items = domain.map((d, i) => ({ label: d, color: range[i] }));
7
+ </script>
8
+
9
+ <slot {items} scale={$rScale}>
10
+ <div {...$$restProps}>
11
+ {#each items as { label, color }}
12
+ <div class="flex items-center gap-1">
13
+ <div class="h-4 w-4 rounded-full" style:background-color={color} />
14
+ {label}
15
+ </div>
16
+ {/each}
17
+ </div>
18
+ </slot>
@@ -0,0 +1,22 @@
1
+ import { SvelteComponentTyped } from "svelte";
2
+ declare const __propDef: {
3
+ props: {
4
+ [x: string]: any;
5
+ items?: any;
6
+ };
7
+ events: {
8
+ [evt: string]: CustomEvent<any>;
9
+ };
10
+ slots: {
11
+ default: {
12
+ items: any;
13
+ scale: any;
14
+ };
15
+ };
16
+ };
17
+ export declare type LegendProps = typeof __propDef.props;
18
+ export declare type LegendEvents = typeof __propDef.events;
19
+ export declare type LegendSlots = typeof __propDef.slots;
20
+ export default class Legend extends SvelteComponentTyped<LegendProps, LegendEvents, LegendSlots> {
21
+ }
22
+ export {};
@@ -16,6 +16,7 @@ export { default as Group } from './Group.svelte';
16
16
  export { default as HighlightLine } from './HighlightLine.svelte';
17
17
  export { default as HighlightRect } from './HighlightRect.svelte';
18
18
  export { default as Labels } from './Labels.svelte';
19
+ export { default as Legend } from './Legend.svelte';
19
20
  export { default as Line } from './Line.svelte';
20
21
  export { default as LinearGradient } from './LinearGradient.svelte';
21
22
  export { default as Link } from './Link.svelte';
@@ -16,6 +16,7 @@ export { default as Group } from './Group.svelte';
16
16
  export { default as HighlightLine } from './HighlightLine.svelte';
17
17
  export { default as HighlightRect } from './HighlightRect.svelte';
18
18
  export { default as Labels } from './Labels.svelte';
19
+ export { default as Legend } from './Legend.svelte';
19
20
  export { default as Line } from './Line.svelte';
20
21
  export { default as LinearGradient } from './LinearGradient.svelte';
21
22
  export { default as Link } from './Link.svelte';
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.7.6",
6
+ "version": "0.8.0",
7
7
  "devDependencies": {
8
8
  "@rollup/plugin-dsv": "^2.0.3",
9
9
  "@sveltejs/adapter-vercel": "^1.0.0-next.59",
@@ -71,6 +71,7 @@
71
71
  "./components/HighlightLine.svelte": "./components/HighlightLine.svelte",
72
72
  "./components/HighlightRect.svelte": "./components/HighlightRect.svelte",
73
73
  "./components/Labels.svelte": "./components/Labels.svelte",
74
+ "./components/Legend.svelte": "./components/Legend.svelte",
74
75
  "./components/Line.svelte": "./components/Line.svelte",
75
76
  "./components/LinearGradient.svelte": "./components/LinearGradient.svelte",
76
77
  "./components/Link.svelte": "./components/Link.svelte",