layerchart 0.7.6 → 0.9.0

package/components/AxisX.svelte

@@ -11,6 +11,7 @@ export let xTick = undefined;
 export let yTick = 8;
 export let dxTick = 0;
 export let dyTick = 0;
+export let labelProps = undefined;
 $: isBand = isScaleBand($xScale);
 $: tickVals = Array.isArray(ticks)
     ? ticks
@@ -23,7 +24,7 @@ $: tickVals = Array.isArray(ticks)
 	{#each tickVals as tick, i}
 		<g class="tick tick-{tick}" transform="translate({$xScale(tick)},{max($yRange)})">
 			{#if gridlines !== false}
-				<line y1={$height * -1} y2="0" x1="0" x2="0" {...gridlines} />
+				<line y1={$height * -1} y2="0" x1="0" x2="0" class="stroke-gray-200" {...gridlines} />
 			{/if}
 			<Text
 				x={xTick || isBand ? $xScale.bandwidth() / 2 : 0}
@@ -33,21 +34,10 @@ $: tickVals = Array.isArray(ticks)
 				rotate={315}
 				textAnchor="end"
 				verticalAnchor="middle"
-				style="font-size: 10px; stroke: white; stroke-width: 2px;"
+				class="text-[10px] stroke-white [stroke-width: 2px] font-light"
 				value={format(tick, formatTick ?? $xScale.tickFormat?.())}
+				{...labelProps}
 			/>
 		</g>
 	{/each}
 </g>
-
-<style>
-	.tick {
-		font-size: 0.725em;
-		font-weight: 200;
-	}
-
-	line,
-	.tick line {
-		stroke: #e0e0e0;
-	}
-</style>

package/components/AxisX.svelte.d.ts

@@ -1,5 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import type { FormatType } from 'svelte-ux/utils/format';
+import Text from './Text.svelte';
+import type { ComponentProps } from 'svelte-ux';
 declare const __propDef: {
     props: {
         gridlines?: boolean | svelte.JSX.SVGProps<SVGLineElement>;
@@ -9,6 +11,7 @@ declare const __propDef: {
         yTick?: number;
         dxTick?: number;
         dyTick?: number;
+        labelProps?: ComponentProps<Text>;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/AxisY.svelte

@@ -11,6 +11,7 @@ export let xTick = 0;
 export let yTick = 0;
 export let dxTick = 0;
 export let dyTick = -3; // TODO: Maualliy tweak based on font-size until <Text /> handles custom styles
+export let labelProps = undefined;
 $: isBand = isScaleBand($yScale);
 $: tickVals = Array.isArray(ticks)
     ? ticks
@@ -28,6 +29,7 @@ $: tickVals = Array.isArray(ticks)
 					x2={$width + $padding.left}
 					y1={yTick + (isBand ? $yScale.bandwidth() / 2 : 0)}
 					y2={yTick + (isBand ? $yScale.bandwidth() / 2 : 0)}
+					class="stroke-gray-200"
 					{...gridlines}
 				/>
 			{/if}
@@ -44,21 +46,10 @@ $: tickVals = Array.isArray(ticks)
 				dy={dyTick}
 				textAnchor="end"
 				verticalAnchor="middle"
-				style="font-size: 10px; stroke: white; stroke-width: 2px;"
 				value={format(tick, formatTick ?? $yScale.tickFormat?.())}
+				class="text-[10px] stroke-white [stroke-width: 2px] font-light"
+				{...labelProps}
 			/>
 		</g>
 	{/each}
 </g>
-
-<style>
-	.tick {
-		font-size: 0.725em;
-		font-weight: 200;
-	}
-
-	.tick line {
-		stroke: #e0e0e0;
-		/* stroke-dasharray: 2; */
-	}
-</style>

package/components/AxisY.svelte.d.ts

@@ -1,5 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import type { FormatType } from 'svelte-ux/utils/format';
+import Text from './Text.svelte';
+import type { ComponentProps } from 'svelte-ux';
 declare const __propDef: {
     props: {
         gridlines?: boolean | svelte.JSX.SVGProps<SVGLineElement>;
@@ -9,6 +11,7 @@ declare const __propDef: {
         yTick?: number;
         dxTick?: number;
         dyTick?: number;
+        labelProps?: ComponentProps<Text>;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/Chart.svelte

@@ -23,9 +23,9 @@ function getValue(accessor, d) {
     }
 }
 export let data = [];
-export let x;
-export let y;
-export let yScale;
+export let x = undefined;
+export let y = undefined;
+export let yScale = undefined;
 /**
  * xBaseline guaranteed to be visible in xDomain
  */
@@ -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

@@ -5,9 +5,9 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         data?: any[];
-        x: (string | ((d: any) => number)) | (string | ((d: any) => number))[];
-        y: (string | ((d: any) => number)) | (string | ((d: any) => number))[];
-        yScale: Function;
+        x?: (string | ((d: any) => number)) | (string | ((d: any) => number))[];
+        y?: (string | ((d: any) => number)) | (string | ((d: any) => number))[];
+        yScale?: Function;
         xBaseline?: number | null;
         yBaseline?: number | null;
     };
@@ -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/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/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/package.json

@@ -3,7 +3,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.7.6",
+  "version": "0.9.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.7.0"
+    "svelte-ux": "^0.8.8"
   },
   "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",