layerchart 0.8.0 → 0.9.1

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
  */

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;
     };

package/components/TooltipContainer.svelte

@@ -0,0 +1,18 @@
+<script>export let header = undefined;
+</script>
+
+<div
+	class="bg-gray-900/90 backdrop-filter backdrop-blur-[2px] text-white rounded elevation-1 px-2 py-1"
+>
+	{#if header || $$slots.header}
+		<div class="text-center font-semibold pb-1 whitespace-nowrap">
+			<slot name="header">
+				{header}
+			</slot>
+		</div>
+	{/if}
+
+	<div class="grid grid-cols-[1fr,auto] gap-x-2 gap-y-1 items-center">
+		<slot />
+	</div>
+</div>

package/components/TooltipContainer.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        header?: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        header: {};
+        default: {};
+    };
+};
+export declare type TooltipContainerProps = typeof __propDef.props;
+export declare type TooltipContainerEvents = typeof __propDef.events;
+export declare type TooltipContainerSlots = typeof __propDef.slots;
+export default class TooltipContainer extends SvelteComponentTyped<TooltipContainerProps, TooltipContainerEvents, TooltipContainerSlots> {
+}
+export {};

package/components/TooltipItem.svelte

@@ -0,0 +1,18 @@
+<script>import clsx from 'clsx';
+export let label;
+export let value;
+export let valueAlign = 'left';
+</script>
+
+<div class="text-xs text-white/75 text-right whitespace-nowrap">
+	<slot name="label">{label}:</slot>
+</div>
+
+<div
+	class={clsx('text-sm tabular-nums', {
+		'text-right': valueAlign === 'right',
+		'text-center': valueAlign === 'center'
+	})}
+>
+	<slot>{value}</slot>
+</div>

package/components/TooltipItem.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        label: any;
+        value: any;
+        valueAlign?: 'left' | 'right' | 'center';
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        label: {};
+        default: {};
+    };
+};
+export declare type TooltipItemProps = typeof __propDef.props;
+export declare type TooltipItemEvents = typeof __propDef.events;
+export declare type TooltipItemSlots = typeof __propDef.slots;
+export default class TooltipItem extends SvelteComponentTyped<TooltipItemProps, TooltipItemEvents, TooltipItemSlots> {
+}
+export {};

package/components/TooltipSeparator.svelte

@@ -0,0 +1 @@
+<div class="rounded bg-white/50 my-1 col-span-full h-px" />

package/components/TooltipSeparator.svelte.d.ts

@@ -0,0 +1,19 @@
+/** @typedef {typeof __propDef.props}  TooltipSeparatorProps */
+/** @typedef {typeof __propDef.events}  TooltipSeparatorEvents */
+/** @typedef {typeof __propDef.slots}  TooltipSeparatorSlots */
+export default class TooltipSeparator extends SvelteComponentTyped<{}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type TooltipSeparatorProps = typeof __propDef.props;
+export type TooltipSeparatorEvents = typeof __propDef.events;
+export type TooltipSeparatorSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/index.d.ts

@@ -32,6 +32,9 @@ export { default as Sankey } from './Sankey.svelte';
 export { default as Text } from './Text.svelte';
 export { default as Threshold } from './Threshold.svelte';
 export { default as Tooltip } from './Tooltip.svelte';
+export { default as TooltipContainer } from './TooltipContainer.svelte';
+export { default as TooltipItem } from './TooltipItem.svelte';
+export { default as TooltipSeparator } from './TooltipSeparator.svelte';
 export { default as Tree } from './Tree.svelte';
 export { default as Treemap } from './Treemap.svelte';
 export { default as Zoom } from './Zoom.svelte';

package/components/index.js

@@ -32,6 +32,9 @@ export { default as Sankey } from './Sankey.svelte';
 export { default as Text } from './Text.svelte';
 export { default as Threshold } from './Threshold.svelte';
 export { default as Tooltip } from './Tooltip.svelte';
+export { default as TooltipContainer } from './TooltipContainer.svelte';
+export { default as TooltipItem } from './TooltipItem.svelte';
+export { default as TooltipSeparator } from './TooltipSeparator.svelte';
 export { default as Tree } from './Tree.svelte';
 export { default as Treemap } from './Treemap.svelte';
 export { default as Zoom } from './Zoom.svelte';

package/package.json

@@ -3,7 +3,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.8.0",
+  "version": "0.9.1",
   "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",
@@ -87,6 +87,9 @@
     "./components/Text.svelte": "./components/Text.svelte",
     "./components/Threshold.svelte": "./components/Threshold.svelte",
     "./components/Tooltip.svelte": "./components/Tooltip.svelte",
+    "./components/TooltipContainer.svelte": "./components/TooltipContainer.svelte",
+    "./components/TooltipItem.svelte": "./components/TooltipItem.svelte",
+    "./components/TooltipSeparator.svelte": "./components/TooltipSeparator.svelte",
     "./components/Tree.svelte": "./components/Tree.svelte",
     "./components/Treemap.svelte": "./components/Treemap.svelte",
     "./components/Zoom.svelte": "./components/Zoom.svelte",