layerchart 0.7.5 → 0.8.0

package/components/Area.svelte

@@ -35,7 +35,7 @@ $: {
 </script>
 
 {#if line}
-	<Path {curve} {defined} {color} {tweened} {...line} />
+	<Path {data} {curve} {defined} {color} {tweened} {...line} />
 {/if}
 
 <path

package/components/Chart.svelte

@@ -52,6 +52,21 @@ $: if (yBaseline != null) {
 $: yReverse = yScale ? !isScaleBand(yScale) : true;
 </script>
 
-<LayerCake {data} {x} {xDomain} {y} {yScale} {yDomain} {yReverse} {...$$restProps}>
-	<slot />
+<LayerCake
+	{data}
+	{x}
+	{xDomain}
+	{y}
+	{yScale}
+	{yDomain}
+	{yReverse}
+	{...$$restProps}
+	let:aspectRatio
+	let:containerHeight
+	let:containerWidth
+	let:height
+	let:width
+	let:element
+>
+	<slot {aspectRatio} {containerHeight} {containerWidth} {height} {width} {element} />
 </LayerCake>

package/components/Chart.svelte.d.ts

@@ -15,7 +15,14 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            aspectRatio: number;
+            containerHeight: number;
+            containerWidth: number;
+            height: number;
+            width: number;
+            element: Element;
+        };
     };
 };
 export declare type ChartProps = typeof __propDef.props;

package/components/Labels.svelte

@@ -10,7 +10,7 @@ import Text from './Text.svelte';
 import { formatNumberAsStyle } from 'svelte-ux/utils/number';
 import { isScaleBand } from '../utils/scales';
 import { greatestAbs, unique } from 'svelte-ux/utils/array';
-const { data, flatData, xGet, yRange, xScale, yScale, x, y, custom } = getContext('LayerCake');
+const { flatData, xGet, yRange, xScale, yScale, x, y, custom } = getContext('LayerCake');
 export let orientation = 'auto';
 export let significantDigits = 3;
 export let formatStyle = null;
@@ -82,7 +82,7 @@ $: getValue = (item) => {
 </script>
 
 <g class="label-group">
-	{#each $data as item, index}
+	{#each $flatData as item, index}
 		<Text
 			class="group-rect"
 			textAnchor="middle"

package/components/Legend.svelte

@@ -0,0 +1,18 @@
+<script>import { getContext } from 'svelte';
+const { rScale } = getContext('LayerCake');
+const domain = $rScale.domain();
+const range = $rScale.range();
+// zip values together
+export let items = domain.map((d, i) => ({ label: d, color: range[i] }));
+</script>
+
+<slot {items} scale={$rScale}>
+	<div {...$$restProps}>
+		{#each items as { label, color }}
+			<div class="flex items-center gap-1">
+				<div class="h-4 w-4 rounded-full" style:background-color={color} />
+				{label}
+			</div>
+		{/each}
+	</div>
+</slot>

package/components/Legend.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        items?: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            items: any;
+            scale: any;
+        };
+    };
+};
+export declare type LegendProps = typeof __propDef.props;
+export declare type LegendEvents = typeof __propDef.events;
+export declare type LegendSlots = typeof __propDef.slots;
+export default class Legend extends SvelteComponentTyped<LegendProps, LegendEvents, LegendSlots> {
+}
+export {};

package/components/Path.svelte

@@ -7,7 +7,7 @@ import { line as d3Line } from 'd3-shape';
 // import { interpolateString } from 'd3-interpolate';
 import { interpolatePath } from 'd3-interpolate-path';
 import { motionStore } from '../stores/motionStore';
-const { data: contextData, xGet, yGet, zGet } = getContext('LayerCake');
+const { data: contextData, xGet, yGet } = getContext('LayerCake');
 // Properties to override what is used from context
 export let data = undefined; // TODO: Update Type
 export let x = undefined; // TODO: Update Type

package/components/index.d.ts

@@ -16,6 +16,7 @@ export { default as Group } from './Group.svelte';
 export { default as HighlightLine } from './HighlightLine.svelte';
 export { default as HighlightRect } from './HighlightRect.svelte';
 export { default as Labels } from './Labels.svelte';
+export { default as Legend } from './Legend.svelte';
 export { default as Line } from './Line.svelte';
 export { default as LinearGradient } from './LinearGradient.svelte';
 export { default as Link } from './Link.svelte';

package/components/index.js

@@ -16,6 +16,7 @@ export { default as Group } from './Group.svelte';
 export { default as HighlightLine } from './HighlightLine.svelte';
 export { default as HighlightRect } from './HighlightRect.svelte';
 export { default as Labels } from './Labels.svelte';
+export { default as Legend } from './Legend.svelte';
 export { default as Line } from './Line.svelte';
 export { default as LinearGradient } from './LinearGradient.svelte';
 export { default as Link } from './Link.svelte';

package/docs/Layout.svelte

@@ -13,31 +13,32 @@
 
 <script>
 	// frontmatter: https://mdsvex.com/docs#frontmatter-1
-	export let component;
-	export let filename;
+	export let name;
+	export let sourceUrl;
+	export let docUrl;
 	export let description;
 </script>
 
-{#if component}
+{#if name}
 	<div class="flex items-center gap-2">
-		<span class="text-2xl font-bold">{component}</span>
-		{#if component}
+		<span class="text-2xl font-bold">{name}</span>
+		{#if sourceUrl}
 			<Tooltip title="View source">
 				<Button
 					class="text-black/50"
 					icon={mdiCodeTags}
-					href="https://github.com/techniq/layerchart/blob/master/src/lib/components/{component}.svelte"
+					href="https://github.com/techniq/layerchart/blob/master/{sourceUrl}"
 					target="_blank"
 				/>
 			</Tooltip>
 		{/if}
 
-		{#if filename}
+		{#if docUrl}
 			<Tooltip title="Edit this page">
 				<Button
 					class="text-black/50"
 					icon={mdiFileDocumentEditOutline}
-					href="https://github.com/techniq/layerchart/blob/master/{filename}"
+					href="https://github.com/techniq/layerchart/blob/master/{docUrl}"
 					target="_blank"
 				/>
 			</Tooltip>

package/docs/Layout.svelte.d.ts

@@ -2,8 +2,9 @@
 /** @typedef {typeof __propDef.events}  LayoutEvents */
 /** @typedef {typeof __propDef.slots}  LayoutSlots */
 export default class Layout extends SvelteComponentTyped<{
-    component: any;
-    filename: any;
+    name: any;
+    sourceUrl: any;
+    docUrl: any;
     description: any;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -21,8 +22,9 @@ import h1 from "./Header1.svelte";
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        component: any;
-        filename: any;
+        name: any;
+        sourceUrl: any;
+        docUrl: any;
         description: any;
     };
     events: {

package/package.json

@@ -3,7 +3,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.7.5",
+  "version": "0.8.0",
   "devDependencies": {
     "@rollup/plugin-dsv": "^2.0.3",
     "@sveltejs/adapter-vercel": "^1.0.0-next.59",
@@ -49,7 +49,7 @@
     "date-fns": "^2.28.0",
     "layercake": "^6.1.0",
     "lodash-es": "^4.17.21",
-    "svelte-ux": "^0.6.10"
+    "svelte-ux": "^0.7.0"
   },
   "exports": {
     "./package.json": "./package.json",
@@ -71,6 +71,7 @@
     "./components/HighlightLine.svelte": "./components/HighlightLine.svelte",
     "./components/HighlightRect.svelte": "./components/HighlightRect.svelte",
     "./components/Labels.svelte": "./components/Labels.svelte",
+    "./components/Legend.svelte": "./components/Legend.svelte",
     "./components/Line.svelte": "./components/Line.svelte",
     "./components/LinearGradient.svelte": "./components/LinearGradient.svelte",
     "./components/Link.svelte": "./components/Link.svelte",