layerchart 0.16.0 → 0.17.0

package/dist/components/Arc.svelte

@@ -1,7 +1,7 @@
 <script>/*
-    TODO:
-    - [ ] Allow spring/tweened to be reactive (but ignore value)
-*/
+      TODO:
+      - [ ] Allow spring/tweened to be reactive (but ignore value)
+  */
 // https://caniuse.com/#feat=css-conic-gradients
 // https://css-tricks.com/snippets/css/css-conic-gradient/
 // https://developer.mozilla.org/en-US/docs/Web/CSS/conic-gradient
@@ -107,16 +107,16 @@ $: yOffset = -Math.cos(angle) * offset;
 </script>
 
 {#if track}
-	<path d={trackArc()} class="track" bind:this={trackArcEl} {...track} />
+  <path d={trackArc()} class="track" bind:this={trackArcEl} {...track} />
 {/if}
 
 <path
-	d={arc()}
-	transform="translate({xOffset}, {yOffset})"
-	{...$$restProps}
-	on:click
-	on:mousemove
-	on:mouseleave
+  d={arc()}
+  transform="translate({xOffset}, {yOffset})"
+  {...$$restProps}
+  on:click
+  on:mousemove
+  on:mouseleave
 />
 
 <slot value={$tweened_value} centroid={trackArcCentroid} {boundingBox} />

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

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import type { SVGAttributes } from 'svelte/elements';
 import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
 declare const __propDef: {
     props: {
@@ -14,7 +15,7 @@ declare const __propDef: {
         outerRadius?: undefined;
         cornerRadius?: number | undefined;
         padAngle?: number | undefined;
-        track?: boolean | svelte.JSX.SVGProps<SVGPathElement>;
+        track?: boolean | SVGAttributes<SVGPathElement> | undefined;
         offset?: number | undefined;
     };
     events: {

package/dist/components/Area.svelte

@@ -35,17 +35,17 @@ $: {
 </script>
 
 {#if line}
-	<Path {data} {curve} {defined} {color} {tweened} {...line} />
+  <Path {data} {curve} {defined} {color} {tweened} {...line} />
 {/if}
 
 <path
-	class="path-area"
-	d={$tweened_d}
-	clip-path={clipPath}
-	fill={color}
-	fill-opacity={opacity}
-	{...$$restProps}
-	on:click
-	on:mousemove
-	on:mouseleave
+  class="path-area"
+  d={$tweened_d}
+  clip-path={clipPath}
+  fill={color}
+  fill-opacity={opacity}
+  {...$$restProps}
+  on:click
+  on:mousemove
+  on:mouseleave
 />

package/dist/components/AreaStack.svelte

@@ -12,32 +12,32 @@ $: lineData = [...$data].reverse();
 </script>
 
 {#if line}
-	<g class="line-group">
-		{#each lineData as seriesData}
-			<Path
-				data={seriesData}
-				y={(d) => $yScale(d[1])}
-				color={$rGet(seriesData)}
-				{curve}
-				{defined}
-				{tweened}
-				{...line}
-			/>
-		{/each}
-	</g>
+  <g class="line-group">
+    {#each lineData as seriesData}
+      <Path
+        data={seriesData}
+        y={(d) => $yScale(d[1])}
+        color={$rGet(seriesData)}
+        {curve}
+        {defined}
+        {tweened}
+        {...line}
+      />
+    {/each}
+  </g>
 {/if}
 
 <g class="area-group">
-	{#each $data as seriesData}
-		<Area
-			data={seriesData}
-			y0={(d) => $yScale(d[0])}
-			y1={(d) => $yScale(d[1])}
-			color={$rGet(seriesData)}
-			{curve}
-			{defined}
-			{opacity}
-			{tweened}
-		/>
-	{/each}
+  {#each $data as seriesData}
+    <Area
+      data={seriesData}
+      y0={(d) => $yScale(d[0])}
+      y1={(d) => $yScale(d[1])}
+      color={$rGet(seriesData)}
+      {curve}
+      {defined}
+      {opacity}
+      {tweened}
+    />
+  {/each}
 </g>

package/dist/components/Axis.svelte

@@ -0,0 +1,131 @@
+<script>import { getContext } from 'svelte';
+import { format as formatValue } from 'svelte-ux';
+import { max, min } from 'd3-array';
+import Text from './Text.svelte';
+import { isScaleBand } from '../utils/scales';
+const { xScale, yScale, xRange, yRange, width } = getContext('LayerCake');
+export let placement;
+/** Control the number of ticks*/
+export let ticks = placement === 'left' || placement === 'right' ? 4 : undefined;
+export let gridlines = false;
+export let tickSize = 4;
+export let format = undefined;
+export let labelProps = undefined;
+$: orientation = ['top', 'bottom'].includes(placement) ? 'horizontal' : 'vertical';
+$: scale = orientation === 'horizontal' ? $xScale : $yScale;
+$: tickVals = Array.isArray(ticks)
+    ? ticks
+    : isScaleBand(scale)
+        ? scale.domain()
+        : scale.ticks(typeof ticks === 'function' ? ticks(scale) : ticks);
+function getCoords(tick) {
+    switch (placement) {
+        case 'top':
+            return {
+                x: $xScale(tick) + (isScaleBand($xScale) ? $xScale.bandwidth() / 2 : 0),
+                y: min($yRange)
+            };
+        case 'bottom':
+            return {
+                x: $xScale(tick) + (isScaleBand($xScale) ? $xScale.bandwidth() / 2 : 0),
+                y: max($yRange)
+            };
+        case 'left':
+            return {
+                x: min($xRange),
+                y: $yScale(tick) + (isScaleBand($yScale) ? $yScale.bandwidth() / 2 : 0)
+            };
+        case 'right':
+            return {
+                x: max($xRange),
+                y: $yScale(tick) + (isScaleBand($yScale) ? $yScale.bandwidth() / 2 : 0)
+            };
+    }
+}
+function getDefaultLabelProps() {
+    switch (placement) {
+        case 'top':
+            return {
+                textAnchor: 'middle',
+                verticalAnchor: 'end',
+                dy: -6 // manually adjusted until Text supports custom styles
+            };
+        case 'bottom':
+            return {
+                textAnchor: 'middle',
+                verticalAnchor: 'start',
+                dy: 4 // manually adjusted until Text supports custom styles
+            };
+        case 'left':
+            return {
+                textAnchor: 'end',
+                verticalAnchor: 'middle',
+                dx: -4,
+                dy: -2 // manually adjusted until Text supports custom styles
+            };
+        case 'right':
+            return {
+                textAnchor: 'start',
+                verticalAnchor: 'middle',
+                dx: 4,
+                dy: -2 // manually adjusted until Text supports custom styles
+            };
+    }
+}
+</script>
+
+<g class="Axis placement-{placement}">
+  {#each tickVals as tick, i}
+    {@const tickCoords = getCoords(tick)}
+    <g>
+      {#if gridlines !== false}
+        {#if orientation === 'horizontal'}
+          <line
+            x1={tickCoords.x}
+            y1={min($yRange)}
+            x2={tickCoords.x}
+            y2={max($yRange)}
+            class="gridline stroke-gray-200"
+            {...gridlines}
+          />
+        {:else if orientation === 'vertical'}
+          <line
+            x1={0}
+            y1={tickCoords.y}
+            x2={$width}
+            y2={tickCoords.y}
+            class="gridline stroke-gray-200"
+            {...gridlines}
+          />
+        {/if}
+      {/if}
+
+      {#if orientation === 'horizontal'}
+        <line
+          x1={tickCoords.x}
+          y1={tickCoords.y}
+          x2={tickCoords.x}
+          y2={tickCoords.y + (placement === 'top' ? -tickSize : tickSize)}
+          class="tick stroke-gray-400"
+        />
+      {:else if orientation === 'vertical'}
+        <line
+          x1={tickCoords.x}
+          y1={tickCoords.y}
+          x2={tickCoords.x + (placement === 'left' ? -tickSize : tickSize)}
+          y2={tickCoords.y}
+          class="tick stroke-gray-400"
+        />
+      {/if}
+
+      <Text
+        x={tickCoords.x}
+        y={tickCoords.y}
+        class="label text-[10px] stroke-white [stroke-width:2px] font-light"
+        value={formatValue(tick, format ?? scale.tickFormat?.())}
+        {...getDefaultLabelProps()}
+        {...labelProps}
+      />
+    </g>
+  {/each}
+</g>

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

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import { type ComponentProps } from 'svelte';
+import type { SVGAttributes } from 'svelte/elements';
+import { type FormatType } from 'svelte-ux';
+import Text from './Text.svelte';
+declare const __propDef: {
+    props: {
+        placement: 'top' | 'bottom' | 'left' | 'right';
+        /** Control the number of ticks*/ ticks?: number | Function | undefined;
+        gridlines?: boolean | SVGAttributes<SVGLineElement> | undefined;
+        tickSize?: number | undefined;
+        format?: FormatType;
+        labelProps?: ComponentProps<Text> | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AxisProps = typeof __propDef.props;
+export type AxisEvents = typeof __propDef.events;
+export type AxisSlots = typeof __propDef.slots;
+export default class Axis extends SvelteComponentTyped<AxisProps, AxisEvents, AxisSlots> {
+}
+export {};

package/dist/components/Bars.svelte

@@ -1,9 +1,7 @@
 <script>import { getContext } from 'svelte';
-import { scaleBand } from 'd3-scale';
-import { max, min } from 'd3-array';
-import { unique } from 'svelte-ux/utils/array';
 import Rect from './Rect.svelte';
-const { data, flatData, xGet, yRange, xScale, yScale, x: xContext, y: yContext, rGet, config } = getContext('LayerCake');
+import { createDimensionGetter } from '../utils/rect';
+const { data, xScale, x: xContext, y: yContext, rGet, config } = getContext('LayerCake');
 /**
  * Override `x` from context.  Useful for multiple Bar instances
  */
@@ -15,69 +13,31 @@ $: _x = x ? (typeof x === 'string' ? (d) => d[x] : x) : $xContext;
  */
 export let y = $yContext;
 $: _y = y ? (typeof y === 'string' ? (d) => d[y] : y) : $yContext;
-/*
-TODO:
-      - [ ] Support vertical/horizontal layout (Bar/Column)
-*/
 export let color = 'var(--color-blue-500)';
 export let opacity = 1;
 export let stroke = 'black';
 export let strokeWidth = 0;
 export let radius = 0;
-export let getKey = (item) => _x(item);
+export let getKey = (item) => $xScale.bandwidth ? _x(item) : _y(item);
 export let getProps = undefined;
-export let widthOffset = 0;
+/** Inset the rect for amount of padding.  Useful with multiple bars (bullet, overlap, etc) */
+export let padding = 0;
 export let spring = undefined;
 export let tweened = undefined;
 // See: https://svelte.dev/repl/7000c5ce05b84cd98ccbfb2768b4be3d?version=3.38.3
 export let groupBy = undefined;
 export let groupPaddingInner = 0.2;
 export let groupPaddingOuter = 0;
-// 	$: console.log({ $data, $flatData, groupBy, stackBy })
-$: groupKeys = unique($flatData.map((d) => d[groupBy]));
-$: x1Scale = scaleBand()
-    .domain(groupKeys)
-    .range([0, $xScale.bandwidth()])
-    .paddingInner(groupPaddingInner)
-    .paddingOuter(groupPaddingOuter);
-$: getDimensions = (item) => {
-    // console.log({ item, y: $y(item) });
-    const x = $xGet(item) + (groupBy ? x1Scale(item[groupBy]) : 0) - widthOffset / 2;
-    // TODO: Do we need to support the non-bandwidth scale?
-    //   const width = $xScale.bandwidth
-    //     ? $xScale.bandwidth()
-    //     : Math.max(0, $xGet(d)[1] - $xGet(d)[0]);
-    const width = Math.max(0, (groupBy ? x1Scale.bandwidth() : $xScale.bandwidth()) + widthOffset);
-    const yValue = _y(item);
-    let yTop = 0;
-    let yBottom = 0;
-    if (Array.isArray(yValue)) {
-        // Array contains both top and bottom values (stack, etc);
-        yTop = max(yValue);
-        yBottom = min(yValue);
+$: getDimensions = createDimensionGetter(getContext('LayerCake'), {
+    x,
+    y,
+    groupBy,
+    padding,
+    groupPadding: {
+        inner: groupPaddingInner,
+        outer: groupPaddingOuter
     }
-    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;
-    }
-    return {
-        x,
-        y: $yScale(yTop),
-        width,
-        height: $yScale(yBottom) - $yScale(yTop)
-    };
-};
+});
 function getColor(item, index) {
     if (typeof color === 'function') {
         return color({ value: _y(item), item, index });
@@ -91,21 +51,20 @@ function getColor(item, index) {
 }
 </script>
 
-<g class="column-group">
-	{#each $data as item, index (getKey(item, index))}
-		<Rect
-			class="group-rect"
-			data-id={index}
-			fill={getColor(item, index)}
-			fill-opacity={opacity}
-			{stroke}
-			stroke-width={strokeWidth}
-			rx={radius}
-			{spring}
-			{tweened}
-			{...getDimensions(item)}
-			{...getProps?.({ value: _y(item), item, index })}
-			{...$$restProps}
-		/>
-	{/each}
+<g class="Bars">
+  {#each $data as item, index (getKey(item, index))}
+    <Rect
+      data-id={index}
+      fill={getColor(item, index)}
+      fill-opacity={opacity}
+      {stroke}
+      stroke-width={strokeWidth}
+      rx={radius}
+      {spring}
+      {tweened}
+      {...$getDimensions(item)}
+      {...getProps?.({ value: _y(item), item, index })}
+      {...$$restProps}
+    />
+  {/each}
 </g>

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

@@ -20,7 +20,7 @@ declare const __propDef: {
             item: any;
             index: number;
         }) => any) | undefined;
-        widthOffset?: number | undefined;
+        padding?: number | undefined;
         spring?: boolean | Parameters<typeof springStore>[1];
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
         groupBy?: string | undefined;

package/dist/components/Baseline.svelte

@@ -2,29 +2,29 @@
 import { getContext } from 'svelte';
 import { cls } from 'svelte-ux';
 import { isScaleBand } from '../utils/scales';
-const { xRange, yScale, yRange } = getContext('LayerCake');
+const { xScale, yScale, xRange, yRange } = getContext('LayerCake');
 export let x = false;
 export let y = false;
 </script>
 
 <g class="baseline">
-	{#if x}
-		<line
-			x1={0}
-			x2={max($xRange) || 0}
-			y1={isScaleBand($yScale) ? max($yRange) : $yScale(0) || 0}
-			y2={isScaleBand($yScale) ? max($yRange) : $yScale(0) || 0}
-			class={cls('stroke-gray-400', $$props.class)}
-		/>
-	{/if}
+  {#if x}
+    <line
+      x1={0}
+      x2={max($xRange) || 0}
+      y1={isScaleBand($yScale) ? max($yRange) : $yScale(0) || 0}
+      y2={isScaleBand($yScale) ? max($yRange) : $yScale(0) || 0}
+      class={cls('stroke-gray-400', $$props.class)}
+    />
+  {/if}
 
-	{#if y}
-		<line
-			x1={0}
-			x2={0}
-			y1={min($yRange) || 0}
-			y2={max($yRange) || 0}
-			class={cls('stroke-gray-400', $$props.class)}
-		/>
-	{/if}
+  {#if y}
+    <line
+      x1={isScaleBand($xScale) ? min($xRange) : $xScale(0) || 0}
+      x2={isScaleBand($xScale) ? min($xRange) : $xScale(0) || 0}
+      y1={min($yRange) || 0}
+      y2={max($yRange) || 0}
+      class={cls('stroke-gray-400', $$props.class)}
+    />
+  {/if}
 </g>

package/dist/components/Blur.svelte

@@ -4,13 +4,13 @@ export let stdDeviation = 5;
 </script>
 
 <defs>
-	<filter {id}>
-		<feGaussianBlur in="SourceGraphic" {stdDeviation} />
-	</filter>
+  <filter {id}>
+    <feGaussianBlur in="SourceGraphic" {stdDeviation} />
+  </filter>
 </defs>
 
 {#if $$slots.default}
-	<g filter="url(#{id})">
-		<slot {id} />
-	</g>
+  <g filter="url(#{id})">
+    <slot {id} />
+  </g>
 {/if}

package/dist/components/Chart.svelte

@@ -64,51 +64,51 @@ export let geo = undefined;
 </script>
 
 <LayerCake
-	{data}
-	{x}
-	{xDomain}
-	{y}
-	{yScale}
-	{yDomain}
-	{yReverse}
-	{...$$restProps}
-	let:aspectRatio
-	let:containerHeight
-	let:containerWidth
-	let:height
-	let:width
-	let:element
-	let:xScale
-	let:yScale
+  {data}
+  {x}
+  {xDomain}
+  {y}
+  {yScale}
+  {yDomain}
+  {yReverse}
+  {...$$restProps}
+  let:aspectRatio
+  let:containerHeight
+  let:containerWidth
+  let:height
+  let:width
+  let:element
+  let:xScale
+  let:yScale
 >
-	<GeoContext {...geo} let:projection>
-		{#if tooltip}
-			<TooltipContext {...tooltip} let:tooltip>
-				<slot
-					{aspectRatio}
-					{containerHeight}
-					{containerWidth}
-					{height}
-					{width}
-					{element}
-					{projection}
-					{tooltip}
-					{xScale}
-					{yScale}
-				/>
-			</TooltipContext>
-		{:else}
-			<slot
-				{aspectRatio}
-				{containerHeight}
-				{containerWidth}
-				{height}
-				{width}
-				{element}
-				{projection}
-				{xScale}
-				{yScale}
-			/>
-		{/if}
-	</GeoContext>
+  <GeoContext {...geo} let:projection>
+    {#if tooltip}
+      <TooltipContext {...tooltip} let:tooltip>
+        <slot
+          {aspectRatio}
+          {containerHeight}
+          {containerWidth}
+          {height}
+          {width}
+          {element}
+          {projection}
+          {tooltip}
+          {xScale}
+          {yScale}
+        />
+      </TooltipContext>
+    {:else}
+      <slot
+        {aspectRatio}
+        {containerHeight}
+        {containerWidth}
+        {height}
+        {width}
+        {element}
+        {projection}
+        {xScale}
+        {yScale}
+      />
+    {/if}
+  </GeoContext>
 </LayerCake>

package/dist/components/ChartClipPath.svelte

@@ -4,12 +4,12 @@ const { width, height, padding } = getContext('LayerCake');
 </script>
 
 <RectClipPath
-	x={-$padding.left}
-	y={-$padding.top}
-	width={$width + $padding.left + $padding.right}
-	height={$height + $padding.top + $padding.bottom}
-	on:click
-	{...$$restProps}
+  x={-$padding.left}
+  y={-$padding.top}
+  width={$width + $padding.left + $padding.right}
+  height={$height + $padding.top + $padding.bottom}
+  on:click
+  {...$$restProps}
 >
-	<slot />
+  <slot />
 </RectClipPath>

package/dist/components/Circle.svelte

@@ -13,11 +13,11 @@ $: tweened_r.set(r);
 </script>
 
 <circle
-	cx={$tweened_cx}
-	cy={$tweened_cy}
-	r={$tweened_r}
-	{...$$restProps}
-	on:click
-	on:mousemove
-	on:mouseleave
+  cx={$tweened_cx}
+  cy={$tweened_cy}
+  r={$tweened_r}
+  {...$$restProps}
+  on:click
+  on:mousemove
+  on:mouseleave
 />

package/dist/components/CircleClipPath.svelte

@@ -11,11 +11,11 @@ export let tweened = undefined;
 </script>
 
 <ClipPath {id}>
-	<Circle {cx} {cy} {r} {spring} {tweened} />
+  <Circle {cx} {cy} {r} {spring} {tweened} />
 </ClipPath>
 
 {#if $$slots.default}
-	<g style="clip-path: url(#{id})" on:click on:mousemove on:mouseleave>
-		<slot {id} />
-	</g>
+  <g style="clip-path: url(#{id})" on:click on:mousemove on:mouseleave>
+    <slot {id} />
+  </g>
 {/if}

package/dist/components/ClipPath.svelte

@@ -4,7 +4,7 @@ export let id = uniqueId('clipPath-');
 </script>
 
 <defs>
-	<clipPath {id} {...$$restProps}>
-		<slot {id} />
-	</clipPath>
+  <clipPath {id} {...$$restProps}>
+    <slot {id} />
+  </clipPath>
 </defs>