layerchart 0.7.0 → 0.7.3

package/components/Arc.svelte

@@ -37,15 +37,14 @@ export let startAngle = undefined;
  */
 export let endAngle = undefined;
 /**
- * Define innerRadius.
- *   value >= 1: discrete value
- *   value >  0: percent of `outerRadius`
- *   value <  0: offset of `outerRadius`
- *   default: yRange min
+ * Define innerRadius. Defaults to yRange min
+ *   • value >= 1: discrete value
+ *   • value < 1: percent of `outerRadius`
+ *   • value < 0: offset of `outerRadius`
  */
 export let innerRadius = undefined;
 /**
- * Define outerRadius.  Defaults to yRange max/2 (ie. chart height / 2)
+ * Define outerRadius.  Defaults to yRange max / 2 (ie. chart height / 2)
  */
 export let outerRadius = undefined;
 export let cornerRadius = 0;

package/components/Baseline.svelte

@@ -1,5 +1,6 @@
 <script>import { getContext } from 'svelte';
 import { min, max } from 'd3-array';
+import { isScaleBand } from '../utils/scales';
 const { xRange, yScale, yRange } = getContext('LayerCake');
 export let x = false;
 export let y = false;
@@ -7,7 +8,13 @@ export let y = false;
 
 <g class="baseline">
 	{#if x}
-		<line x1={0} x2={max($xRange) || 0} y1={max($yRange)} y2={max($yRange)} class="baseline" />
+		<line
+			x1={0}
+			x2={max($xRange) || 0}
+			y1={isScaleBand($yScale) ? max($yRange) : $yScale(0) || 0}
+			y2={isScaleBand($yScale) ? max($yRange) : $yScale(0) || 0}
+			class="baseline"
+		/>
 	{/if}
 
 	{#if y}

package/components/Chart.svelte

@@ -9,7 +9,6 @@ import { isScaleBand } from '../utils/scales';
  *  Resolve a value from data based on the accessor type
  */
 function getValue(accessor, d) {
-    console.log({ accessor });
     if (Array.isArray(accessor)) {
         return accessor.map((a) => getValue(a, d));
     }
@@ -49,8 +48,7 @@ $: if (yBaseline != null) {
  * Reverse the default y range ([0, height] becomes [height, 0]). By default this is `true` unless using scaleBand y scale.
  * see: https://layercake.graphics/guide#yreverse
  * see: https://github.com/mhkeller/layercake/issues/83
-
-*/
+ */
 $: yReverse = yScale ? !isScaleBand(yScale) : true;
 </script>
 

package/components/Tooltip.svelte

@@ -107,9 +107,10 @@ function findData(previousValue, currentValue, valueAtPoint, accessor) {
     }
 }
 function handleTooltip(event, tooltipData) {
-    const point = localPoint(event.target, event);
-    const localX = point?.x ?? 0;
-    const localY = point?.y ?? 0;
+    const referenceNode = event.target.closest('.layercake-container');
+    const point = localPoint(referenceNode, event);
+    const localX = point?.x - $padding.left ?? 0;
+    const localY = point?.y - $padding.top ?? 0;
     // If tooltipData not provided already (voronoi, etc), attempt to find it
     // TODO: When using bisect-x/y/band, values should be sorted.  Tyipcally are for `x`, but not `y` (and band depends on if x or y scale)
     if (tooltipData == null) {
@@ -150,7 +151,6 @@ function handleTooltip(event, tooltipData) {
             const index = bisectX($flatData, xValueAtPoint, 1);
             const previousValue = $flatData[index - 1];
             const currentValue = $flatData[index];
-            console.log({ index, previousValue, currentValue });
             tooltipData = findData(previousValue, currentValue, xValueAtPoint, $x);
         }
         else if (mode === 'bisect-y') {
@@ -319,6 +319,9 @@ $: if (mode === 'bounds' || mode === 'band') {
 					style:stroke={debug ? 'red' : 'transparent'}
 					on:mousemove={(e) => handleTooltip(e, point.data)}
 					on:mouseleave={hideTooltip}
+					on:click={(e) => {
+						dispatch('click', { data: point.data });
+					}}
 				/>
 			</g>
 		{/each}
@@ -337,6 +340,9 @@ $: if (mode === 'bounds' || mode === 'band') {
 					style:stroke={debug ? 'red' : 'transparent'}
 					on:mousemove={(e) => handleTooltip(e, rect.data)}
 					on:mouseleave={hideTooltip}
+					on:click={(e) => {
+						dispatch('click', { data: rect.data });
+					}}
 				/>
 			{/each}
 		</g>

package/docs/Layout.svelte

@@ -26,7 +26,7 @@
 				<Button
 					class="text-black/50"
 					icon={mdiCodeTags}
-					href="https://github.com/techniq/svelte-ux/blob/master/src/lib/components/{component}.svelte"
+					href="https://github.com/techniq/layerchart/blob/master/src/lib/components/{component}.svelte"
 					target="_blank"
 				/>
 			</Tooltip>
@@ -37,7 +37,7 @@
 				<Button
 					class="text-black/50"
 					icon={mdiFileDocumentEditOutline}
-					href="https://github.com/techniq/svelte-ux/blob/master/{filename}"
+					href="https://github.com/techniq/layerchart/blob/master/{filename}"
 					target="_blank"
 				/>
 			</Tooltip>
@@ -46,9 +46,16 @@
 {/if}
 
 {#if description}
-	{description}
+	<div class="text-sm text-black/50">
+		{description}
+	</div>
 {/if}
 
-<slot name="toc" />
+{#if $$slots.toc}
+	<div class="text-xs uppercase text-black/50 leading-8 tracking-widest mt-4">Contents</div>
+	<div class="border border-black/20 rounded bg-white">
+		<slot name="toc" />
+	</div>
+{/if}
 
 <slot />

package/docs/Preview.svelte

@@ -1,9 +1,13 @@
-<script>import Prism from 'prismjs';
+<script>// TODO: No longer copy from svelte-ux after prismjs is migrated to ESM (commonjs causes issue with Vite from another library)
+import Prism from 'prismjs';
 import 'prism-svelte';
+import { mdiCodeTags, mdiContentCopy } from '@mdi/js';
+import { slide } from 'svelte/transition';
+import { Button } from 'svelte-ux';
 export let code = null;
 export let language = 'svelte';
-export let highlight = false;
-$: displayCode = highlight ? Prism.highlight(code, Prism.languages.svelte, 'svelte') : code;
+export let highlightedCode = Prism.highlight(code, Prism.languages.svelte, language);
+export let showCode = false;
 </script>
 
 <div class="border border-black/20 rounded bg-white">
@@ -11,9 +15,36 @@ $: displayCode = highlight ? Prism.highlight(code, Prism.languages.svelte, 'svel
 		<slot />
 	</div>
 
-	{#if displayCode}
-		<pre class="language-{language} rounded" style="margin: 0; white-space: normal;">
-			<code class="language-{language}">{@html displayCode}</code>
-		</pre>
+	{#if code && showCode}
+		<div class="relative">
+			<pre
+				class="language-{language} rounded"
+				style="margin: 0; white-space: normal;"
+				transition:slide|local>
+          <code class="language-{language}">{@html highlightedCode}</code>
+      </pre>
+
+			<div class="absolute top-0 right-0 p-2">
+				<Button
+					icon={mdiContentCopy}
+					small
+					class=" text-white/70 hover:bg-white/20 py-1"
+					on:click={() => navigator.clipboard.writeText(code)}
+				>
+					Copy
+				</Button>
+			</div>
+		</div>
 	{/if}
 </div>
+
+{#if code}
+	<Button
+		icon={mdiCodeTags}
+		small
+		class=" text-black/70 py-1"
+		on:click={() => (showCode = !showCode)}
+	>
+		{showCode ? 'Hide' : 'Show'} Code
+	</Button>
+{/if}

package/docs/Preview.svelte.d.ts

@@ -4,7 +4,8 @@ declare const __propDef: {
     props: {
         code?: any;
         language?: string;
-        highlight?: boolean;
+        highlightedCode?: any;
+        showCode?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

@@ -3,7 +3,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.7.0",
+  "version": "0.7.3",
   "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.5"
+    "svelte-ux": "^0.6.10"
   },
   "exports": {
     "./package.json": "./package.json",

package/utils/scales.d.ts

@@ -7,6 +7,8 @@ import { MotionOptions } from '../stores/motionStore';
  *      https://github.com/d3/d3-scale/pull/64
  *      https://github.com/vega/vega-scale/blob/master/src/scaleBand.js#L118
  *      https://observablehq.com/@d3/ordinal-brushing
+ * 			https://github.com/d3/d3-scale/blob/11777dac7d4b0b3e229d658aee3257ea67bd5ffa/src/band.js#L32
+ * 			https://gist.github.com/LuisSevillano/d53a1dc529eef518780c6df99613e2fd
  */
 export declare function scaleBandInvert(scale: any): (value: any) => any;
 export declare function isScaleBand(scale: any): boolean;

package/utils/scales.js

@@ -9,6 +9,8 @@ import { motionStore } from '../stores/motionStore';
  *      https://github.com/d3/d3-scale/pull/64
  *      https://github.com/vega/vega-scale/blob/master/src/scaleBand.js#L118
  *      https://observablehq.com/@d3/ordinal-brushing
+ * 			https://github.com/d3/d3-scale/blob/11777dac7d4b0b3e229d658aee3257ea67bd5ffa/src/band.js#L32
+ * 			https://gist.github.com/LuisSevillano/d53a1dc529eef518780c6df99613e2fd
  */
 export function scaleBandInvert(scale) {
     const domain = scale.domain();