layerchart 0.16.0 → 0.17.1

package/dist/components/ClipPathUse.svelte

@@ -7,11 +7,11 @@ export let clipPathId = uniqueId('clipPath-');
 </script>
 
 <ClipPath id={clipPathId}>
-	<use href="#{refId}" />
+  <use href="#{refId}" />
 </ClipPath>
 
 {#if $$slots.default}
-	<g style="clip-path: url(#{clipPathId})" on:click on:mousemove on:mouseleave on:keydown>
-		<slot {refId} {clipPathId} />
-	</g>
+  <g style="clip-path: url(#{clipPathId})" on:click on:mousemove on:mouseleave on:keydown>
+    <slot {refId} {clipPathId} />
+  </g>
 {/if}

package/dist/components/ConnectedPoints.svelte

@@ -1,8 +1,8 @@
 <script>/*
-    TODO:
-        - [ ] Consider becoming LinkLine using d3-path buider https://github.com/d3/d3-path
-          - https://github.com/airbnb/visx/blob/master/packages/visx-shape/src/shapes/link/line/LinkHorizontalLine.tsx
-*/
+      TODO:
+          - [ ] Consider becoming LinkLine using d3-path buider https://github.com/d3/d3-path
+            - https://github.com/airbnb/visx/blob/master/packages/visx-shape/src/shapes/link/line/LinkHorizontalLine.tsx
+  */
 import { getContext } from 'svelte';
 import { extent } from 'd3-array';
 import Line from './Line.svelte';
@@ -28,9 +28,9 @@ function getOffset(value, offset, scale) {
 $: points = $data.flatMap((d) => {
     if (Array.isArray($config.x)) {
         /*
-            x={["prop1" ,"prop2"]}
-            y="prop3"
-        */
+                  x={["prop1" ,"prop2"]}
+                  y="prop3"
+              */
         const [xMin, xMax] = extent($xGet(d));
         return {
             x1: xMin + getOffset(xMin, offsetX, $xScale),
@@ -41,9 +41,9 @@ $: points = $data.flatMap((d) => {
     }
     else if (Array.isArray($config.y)) {
         /*
-            x="prop1"
-            y={["prop2" ,"prop3"]}
-        */
+                  x="prop1"
+                  y={["prop2" ,"prop3"]}
+              */
         const [yMin, yMax] = extent($yGet(d));
         return {
             x1: $xGet(d) + getOffset($xGet(d), offsetX, $xScale),
@@ -54,9 +54,9 @@ $: points = $data.flatMap((d) => {
     }
     else {
         /*
-            x="prop1"
-            y="prop2"
-        */
+                  x="prop1"
+                  y="prop2"
+              */
         // Not really supported (nothing to connect...)
         return {
             x1: $xGet(d) + getOffset($xGet(d), offsetX, $xScale),
@@ -69,7 +69,7 @@ $: points = $data.flatMap((d) => {
 </script>
 
 <g class="connected-points">
-	{#each points as p}
-		<Line x1={p.x1} y1={p.y1} x2={p.x2} y2={p.y2} {...$$restProps} />
-	{/each}
+  {#each points as p}
+    <Line x1={p.x1} y1={p.y1} x2={p.x2} y2={p.y2} {...$$restProps} />
+  {/each}
 </g>

package/dist/components/GeoPath.svelte

@@ -42,15 +42,15 @@ $: if (renderContext === 'canvas' && $ctx) {
 </script>
 
 {#if renderContext === 'svg'}
-	<slot {geoPath}>
-		<path
-			d={geoPath(geojson)}
-			fill={fill || (fillScale && $rGet(fillScale)) || 'transparent'}
-			stroke={stroke || 'black'}
-			on:mousemove={(e) => tooltip?.show(e, geojson)}
-			on:mouseleave={(e) => tooltip?.hide()}
-			on:click={(event) => dispatch('click', { geoPath, event })}
-			{...$$restProps}
-		/>
-	</slot>
+  <slot {geoPath}>
+    <path
+      d={geoPath(geojson)}
+      fill={fill || (fillScale && $rGet(fillScale)) || 'transparent'}
+      stroke={stroke || 'black'}
+      on:mousemove={(e) => tooltip?.show(e, geojson)}
+      on:mouseleave={(e) => tooltip?.hide()}
+      on:click={(event) => dispatch('click', { geoPath, event })}
+      {...$$restProps}
+    />
+  </slot>
 {/if}

package/dist/components/GeoPoint.svelte

@@ -22,7 +22,7 @@ $: if (renderContext === 'canvas' && $ctx) {
 </script>
 
 {#if renderContext === 'svg'}
-	<g transform="translate({x},{y})">
-		<slot />
-	</g>
+  <g transform="translate({x},{y})">
+    <slot />
+  </g>
 {/if}

package/dist/components/GeoTile.svelte

@@ -39,9 +39,9 @@ $: if (renderContext === 'canvas' && $ctx && url) {
 </script>
 
 {#if renderContext === 'svg' && url}
-	<slot {tiles}>
-		{#each tiles as [x, y, z] (url(x, y, z))}
-			<TileImage {url} {x} {y} {z} {tx} {ty} {k} {disableCache} {debug} />
-		{/each}
-	</slot>
+  <slot {tiles}>
+    {#each tiles as [x, y, z] (url(x, y, z))}
+      <TileImage {url} {x} {y} {z} {tx} {ty} {k} {disableCache} {debug} />
+    {/each}
+  </slot>
 {/if}

package/dist/components/Graticule.svelte

@@ -9,18 +9,18 @@ $: graticule.step(step);
 </script>
 
 <g class="graticule">
-	<!-- TODO: Any reason to still render the single `MultiLineString` path if using `lines` and/or `outline` -->
-	{#if !lines && !outline}
-		<GeoPath geojson={graticule()} {...$$restProps} />
-	{/if}
+  <!-- TODO: Any reason to still render the single `MultiLineString` path if using `lines` and/or `outline` -->
+  {#if !lines && !outline}
+    <GeoPath geojson={graticule()} {...$$restProps} />
+  {/if}
 
-	{#if lines}
-		{#each graticule.lines() as line}
-			<GeoPath geojson={line} {...lines} />
-		{/each}
-	{/if}
+  {#if lines}
+    {#each graticule.lines() as line}
+      <GeoPath geojson={line} {...lines} />
+    {/each}
+  {/if}
 
-	{#if outline}
-		<GeoPath geojson={graticule.outline()} {...outline} />
-	{/if}
+  {#if outline}
+    <GeoPath geojson={graticule.outline()} {...outline} />
+  {/if}
 </g>

package/dist/components/Group.svelte

@@ -29,5 +29,5 @@ $: if (center) {
 </script>
 
 <g {transform} {...$$restProps} on:click on:mousemove on:mouseleave>
-	<slot />
+  <slot />
 </g>

package/dist/components/HighlightLine.svelte

@@ -1,6 +1,6 @@
 <script>import { getContext } from 'svelte';
-import { get } from 'svelte/store';
 import { max } from 'd3-array';
+import { notNull } from 'svelte-ux';
 import { isScaleBand } from '../utils/scales';
 import Circle from './Circle.svelte';
 import Line from './Line.svelte';
@@ -10,7 +10,7 @@ const tooltip = tooltipContext();
 export let color = undefined;
 export let axis = 'x';
 // TODO: Fix circle points being backwards for stack (see AreaStack)
-function getColor(item, index = undefined) {
+function getColor(item, index = -1) {
     if (color) {
         if (typeof color === 'function') {
             return color({ value: $y(item), item, index });
@@ -40,7 +40,7 @@ $: if ($tooltip.data) {
             // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
             lines = [
                 ...lines,
-                ...x.map((xItem, i) => ({
+                ...x.filter(notNull).map((xItem, i) => ({
                     x1: xItem + xOffset,
                     y1: 0,
                     x2: xItem + xOffset,
@@ -65,7 +65,7 @@ $: if ($tooltip.data) {
             // `y` accessor with multiple properties (ex. `y={['start', 'end']})`)
             lines = [
                 ...lines,
-                ...y.map((yItem, i) => ({
+                ...y.filter(notNull).map((yItem, i) => ({
                     x1: 0,
                     y1: yItem + yOffset,
                     x2: max($xRange),
@@ -87,7 +87,7 @@ $: if ($tooltip.data) {
     }
     if (Array.isArray(x)) {
         // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
-        points = x.map((xItem, i) => ({
+        points = x.filter(notNull).map((xItem, i) => ({
             x: xItem + xOffset,
             y: $yGet($tooltip.data) + yOffset,
             color: getColor($tooltip.data) // TODO: improve
@@ -115,30 +115,30 @@ $: if ($tooltip.data) {
 </script>
 
 {#if $tooltip.data}
-	{#each lines as line}
-		<Line
-			spring
-			x1={line.x1}
-			y1={line.y1}
-			x2={line.x2}
-			y2={line.y2}
-			stroke="rgba(0,0,0,.5)"
-			stroke-width={2}
-			style="pointerEvents: none"
-			stroke-dasharray="2,2"
-		/>
-	{/each}
+  {#each lines as line}
+    <Line
+      spring
+      x1={line.x1}
+      y1={line.y1}
+      x2={line.x2}
+      y2={line.y2}
+      stroke="rgba(0,0,0,.5)"
+      stroke-width={2}
+      style="pointerEvents: none"
+      stroke-dasharray="2,2"
+    />
+  {/each}
 
-	{#each points as point}
-		<Circle
-			spring
-			cx={point.x}
-			cy={point.y}
-			r={7}
-			fill="rgba(255,255,255,.9)"
-			stroke={point.color}
-			stroke-width={2}
-		/>
-		<Circle spring cx={point.x} cy={point.y} r={3} fill={point.color} />
-	{/each}
+  {#each points as point}
+    <Circle
+      spring
+      cx={point.x}
+      cy={point.y}
+      r={7}
+      fill="rgba(255,255,255,.9)"
+      stroke={point.color}
+      stroke-width={2}
+    />
+    <Circle spring cx={point.x} cy={point.y} r={3} fill={point.color} />
+  {/each}
 {/if}

package/dist/components/HighlightRect.svelte

@@ -67,5 +67,5 @@ $: {
 </script>
 
 {#if $tooltip.data}
-	<Rect spring {...dimensions} fill="rgba(0,0,0,.1)" on:click />
+  <Rect spring {...dimensions} fill="rgba(0,0,0,.1)" on:click />
 {/if}

package/dist/components/Labels.svelte

@@ -4,79 +4,39 @@
  *   - [ ] Support multiple values (threshold, stacks, etc)
  */
 import { getContext } from 'svelte';
-import { scaleBand } from 'd3-scale';
-import { max, min } from 'd3-array';
 import Text from './Text.svelte';
 import { format as formatValue } from 'svelte-ux';
 import { formatNumberAsStyle } from 'svelte-ux/utils/number';
-import { greatestAbs, unique } from 'svelte-ux/utils/array';
+import { greatestAbs } from 'svelte-ux/utils/array';
 import { isScaleBand } from '../utils/scales';
-const { flatData, xGet, yRange, xScale, yScale, x, y, custom } = getContext('LayerCake');
-export let orientation = 'auto';
+import { createDimensionGetter } from '../utils/rect';
+const { flatData, yScale, x, y, custom } = getContext('LayerCake');
+// export let orientation: 'outside' | 'inside' | 'auto' = 'auto';
 export let significantDigits = 3;
 export let format = undefined;
 export let formatStyle = null;
-export let overlap = false;
+// export let overlap = false;
 $: yBaseline = $custom?.yBaseline ?? 0;
 export let groupBy = undefined;
-const x1Scale = scaleBand();
-$: if (isScaleBand($xScale) && groupBy) {
-    const groupKeys = unique($flatData.map((d) => d[groupBy]));
-    x1Scale.domain(groupKeys).range([0, $xScale.bandwidth()]).paddingInner(0.2);
-}
-$: getDimensions = (item) => {
-    // console.log({ item, y: $y(item) });
-    let x = $xGet(item);
-    let width = 0;
-    if (isScaleBand($xScale)) {
-        width = groupBy ? x1Scale.bandwidth() : $xScale.bandwidth();
-        x += (groupBy ? x1Scale(item[groupBy]) : 0) + width / 2;
-    }
-    const yValue = $y(item);
-    let yTop = 0;
-    let yBottom = 0;
-    if (Array.isArray(yValue)) {
-        // Array contains both top and bottom values;
-        yTop = max(yValue);
-        yBottom = min(yValue);
-    }
-    else if (yValue == null) {
-        // null/undefined value
-        yTop = 0;
-        yBottom = 0;
-    }
-    else if (yValue > 0) {
-        // Positive value
-        yTop = yValue;
-        yBottom = min($yRange); // or `0`?
-    }
-    else {
-        // Negative value
-        yTop = min($yRange); // or `0`?
-        yBottom = yValue;
-    }
-    if (yBottom < 0) {
-        // Show label below
-        return {
-            x,
-            y: $yScale(yBottom),
-            dy: '0.5em',
-            width
-        };
-    }
-    else {
-        // Show label above
-        return {
-            x,
-            y: $yScale(yTop),
-            dy: '-0.6em',
-            width
-        };
+export let groupPaddingInner = 0.2;
+export let groupPaddingOuter = 0;
+$: getDimensions = createDimensionGetter(getContext('LayerCake'), {
+    // x,
+    // y,
+    groupBy,
+    // padding,
+    groupPadding: {
+        inner: groupPaddingInner,
+        outer: groupPaddingOuter
     }
+});
+$: getValue = (item) => (isScaleBand($yScale) ? $x(item) : $y(item));
+$: getLabelValue = (item) => {
+    const value = getValue(item);
+    return (Array.isArray(value) ? greatestAbs(value) : value) + yBaseline;
 };
-$: getValue = (item) => {
-    const value = $y(item);
-    const labelValue = (Array.isArray(value) ? greatestAbs(value) : value) + yBaseline;
+$: getFormattedValue = (item) => {
+    const labelValue = getLabelValue(item);
     let formattedValue = labelValue;
     if (labelValue != null) {
         if (format) {
@@ -90,17 +50,66 @@ $: getValue = (item) => {
     }
     return formattedValue ?? '';
 };
+$: getTextProps = (item) => {
+    const labelValue = getLabelValue(item);
+    const dimensions = $getDimensions(item);
+    if (isScaleBand($yScale)) {
+        // Position label left/right on horizontal bars
+        if (labelValue < 0) {
+            // left
+            return {
+                x: dimensions?.x - 4,
+                y: dimensions?.y + (dimensions?.height ?? 0) / 2,
+                textAnchor: 'end',
+                verticalAnchor: 'middle',
+                capHeight: '.6rem'
+            };
+        }
+        else {
+            // right
+            return {
+                x: dimensions?.x + dimensions?.width + 4,
+                y: dimensions?.y + (dimensions?.height ?? 0) / 2,
+                textAnchor: 'start',
+                verticalAnchor: 'middle',
+                capHeight: '.6rem'
+            };
+        }
+    }
+    else {
+        // Position label top/bottom on vertical bars
+        if (labelValue < 0) {
+            // bottom
+            return {
+                x: dimensions?.x + (dimensions?.width ?? 0) / 2,
+                y: dimensions?.y + dimensions?.height,
+                dy: '0.5em',
+                textAnchor: 'middle',
+                verticalAnchor: 'middle'
+            };
+        }
+        else {
+            // top
+            return {
+                x: dimensions?.x + (dimensions?.width ?? 0) / 2,
+                y: dimensions?.y,
+                dy: '-0.6em',
+                textAnchor: 'middle',
+                verticalAnchor: 'middle'
+            };
+        }
+    }
+};
 </script>
 
-<g class="label-group">
-	{#each $flatData as item, index}
-		<Text
-			textAnchor="middle"
-			verticalAnchor="middle"
-			value={getValue(item)}
-			class="group-rect text-xs stroke-white [stroke-width:2px]"
-			{...getDimensions(item)}
-			{...$$restProps}
-		/>
-	{/each}
+<g class="Labels">
+  {#each $flatData as item, index}
+    <!-- TODO: Add labels for each item when array/stack?  Use `getValue(item)` instead and iterate -->
+    <Text
+      value={getFormattedValue(item)}
+      class="text-xs stroke-white [stroke-width:2px]"
+      {...getTextProps(item)}
+      {...$$restProps}
+    />
+  {/each}
 </g>

package/dist/components/Labels.svelte.d.ts

@@ -3,12 +3,12 @@ import { type FormatType } from 'svelte-ux';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        orientation?: "auto" | "outside" | "inside" | undefined;
         significantDigits?: number | undefined;
         format?: FormatType;
         formatStyle?: any;
-        overlap?: boolean | undefined;
         groupBy?: string | undefined;
+        groupPaddingInner?: number | undefined;
+        groupPaddingOuter?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/Legend.svelte

@@ -101,64 +101,64 @@ else {
 </script>
 
 <div
-	class={cls(
-		'inline-block',
-		{
-			'top-left': 'absolute top-0 left-0',
-			top: 'absolute top-0 left-1/2 -translate-x-1/2',
-			'top-right': 'absolute top-0 right-0',
-			left: 'absolute top-1/2 left-0 -translate-y-1/2',
-			center: 'absolute top-1/2 left-1/2 -translate-x-1/2  -translate-y-1/2',
-			right: 'absolute top-1/2 right-0 -translate-y-1/2',
-			'bottom-left': 'absolute bottom-0 left-0',
-			bottom: 'absolute bottom-0 left-1/2 -translate-x-1/2',
-			'bottom-right': 'absolute bottom-0 right-0'
-		}[placement],
-		classes.root
-	)}
-	{...$$restProps}
+  class={cls(
+    'inline-block',
+    {
+      'top-left': 'absolute top-0 left-0',
+      top: 'absolute top-0 left-1/2 -translate-x-1/2',
+      'top-right': 'absolute top-0 right-0',
+      left: 'absolute top-1/2 left-0 -translate-y-1/2',
+      center: 'absolute top-1/2 left-1/2 -translate-x-1/2  -translate-y-1/2',
+      right: 'absolute top-1/2 right-0 -translate-y-1/2',
+      'bottom-left': 'absolute bottom-0 left-0',
+      bottom: 'absolute bottom-0 left-1/2 -translate-x-1/2',
+      'bottom-right': 'absolute bottom-0 right-0'
+    }[placement],
+    classes.root
+  )}
+  {...$$restProps}
 >
-	<div class={cls('text-[10px] font-semibold', classes.title)}>{title}</div>
-	<slot values={tickValues} {scale}>
-		<svg
-			{width}
-			height={height + tickSize + tickFontSize}
-			viewBox="0 0 {width} {height + tickSize + tickFontSize}"
-			class="overflow-visible"
-		>
-			<g>
-				{#if interpolator}
-					<ColorRamp {width} {height} {interpolator} />
-				{:else if swatches}
-					{#each swatches as swatch, i}
-						<rect {...swatch} />
-					{/each}
-				{/if}
-			</g>
+  <div class={cls('text-[10px] font-semibold', classes.title)}>{title}</div>
+  <slot values={tickValues} {scale}>
+    <svg
+      {width}
+      height={height + tickSize + tickFontSize}
+      viewBox="0 0 {width} {height + tickSize + tickFontSize}"
+      class="overflow-visible"
+    >
+      <g>
+        {#if interpolator}
+          <ColorRamp {width} {height} {interpolator} />
+        {:else if swatches}
+          {#each swatches as swatch, i}
+            <rect {...swatch} />
+          {/each}
+        {/if}
+      </g>
 
-			<g>
-				{#each tickValues ?? xScale?.ticks?.(ticks) ?? [] as tick, i}
-					<text
-						text-anchor="middle"
-						x={xScale(tick) + tickLabelOffset}
-						y={height + tickSize + tickFontSize}
-						style:font-size={tickFontSize}
-						class={classes.label}
-					>
-						{tickFormat ? format(tick, tickFormat) : tick}
-					</text>
+      <g>
+        {#each tickValues ?? xScale?.ticks?.(ticks) ?? [] as tick, i}
+          <text
+            text-anchor="middle"
+            x={xScale(tick) + tickLabelOffset}
+            y={height + tickSize + tickFontSize}
+            style:font-size={tickFontSize}
+            class={classes.label}
+          >
+            {tickFormat ? format(tick, tickFormat) : tick}
+          </text>
 
-					{#if tickLine}
-						<line
-							x1={xScale(tick)}
-							y1={0}
-							x2={xScale(tick)}
-							y2={height + tickSize}
-							class={cls('stroke-black', classes.tick)}
-						/>
-					{/if}
-				{/each}
-			</g>
-		</svg>
-	</slot>
+          {#if tickLine}
+            <line
+              x1={xScale(tick)}
+              y1={0}
+              x2={xScale(tick)}
+              y2={height + tickSize}
+              class={cls('stroke-black', classes.tick)}
+            />
+          {/if}
+        {/each}
+      </g>
+    </svg>
+  </slot>
 </div>

package/dist/components/Legend.svelte.d.ts

@@ -12,7 +12,7 @@ declare const __propDef: {
         tickValues?: any[] | undefined;
         tickFontSize?: number | undefined;
         tickSize?: number | undefined;
-        placement?: ("left" | "right" | "top" | "center" | "top-left" | "top-right" | "bottom-left" | "bottom" | "bottom-right") | undefined;
+        placement?: ("top" | "bottom" | "left" | "right" | "center" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
         classes?: {
             root?: string | undefined;
             title?: string | undefined;

package/dist/components/Line.svelte

@@ -16,12 +16,12 @@ $: tweened_y2.set(y2);
 </script>
 
 <line
-	x1={$tweened_x1}
-	y1={$tweened_y1}
-	x2={$tweened_x2}
-	y2={$tweened_y2}
-	{...$$restProps}
-	on:click
-	on:mousemove
-	on:mouseleave
+  x1={$tweened_x1}
+  y1={$tweened_y1}
+  x2={$tweened_x2}
+  y2={$tweened_y2}
+  {...$$restProps}
+  on:click
+  on:mousemove
+  on:mouseleave
 />