layerchart 0.23.0 → 0.24.0

package/README.md

@@ -23,6 +23,8 @@ Others
 
 - Legends including ColorRamps
 
+See also [Svelte UX](http://svelte-ux.techniq.dev) for a large collection of components, actions, stores, and utilities to build highly interactive applications.
+
 ## Publishing
 
 - `npm run changeset` for each changelog worthy change

package/dist/components/Calendar.svelte

@@ -1,8 +1,10 @@
 <script>import { getContext } from 'svelte';
-import { timeDays, timeMonths, timeWeek, timeYear } from 'd3-time';
+import { timeDays, timeMonths, timeWeek, timeYear, utcYear } from 'd3-time';
+import { index } from 'd3-array';
+import { format } from 'date-fns';
 import Rect from './Rect.svelte';
 import MonthPath from './MonthPath.svelte';
-import { index } from 'd3-array';
+import Text from './Text.svelte';
 export let start;
 export let end;
 /**
@@ -33,8 +35,6 @@ $: cells = yearDays.map((date) => {
     return {
         x: timeWeek.count(timeYear(date), date) * cellWidth,
         y: date.getDay() * cellHeight,
-        width: cellWidth,
-        height: cellHeight,
         color: $config.r ? $rGet(cellData) : 'transparent',
         data: cellData,
     };
@@ -46,8 +46,8 @@ $: cells = yearDays.map((date) => {
     <Rect
       x={cell.x}
       y={cell.y}
-      width={cell.width}
-      height={cell.height}
+      width={cellWidth}
+      height={cellHeight}
       fill={cell.color}
       on:mousemove={(e) => tooltip?.show(e, cell.data)}
       on:mouseleave={(e) => tooltip?.hide()}
@@ -64,5 +64,12 @@ $: cells = yearDays.map((date) => {
       cellSize={[cellWidth, cellHeight]}
       {...typeof monthPath === 'object' ? monthPath : null}
     />
+
+    <Text
+      x={timeWeek.count(timeYear.floor(date), timeWeek.ceil(date)) * cellWidth}
+      y={-4}
+      value={format(date, 'MMM')}
+      class="text-xs"
+    />
   {/each}
 {/if}

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

@@ -21,8 +21,6 @@ declare const __propDef: {
             cells: {
                 x: number;
                 y: number;
-                width: number;
-                height: number;
                 color: any;
                 data: any;
             }[];

package/dist/components/Chart.svelte

@@ -82,6 +82,7 @@ export let geo = undefined;
   let:yScale
   let:zScale
   let:rScale
+  let:padding
 >
   <GeoContext {...geo} let:projection>
     {#if tooltip}
@@ -99,6 +100,7 @@ export let geo = undefined;
           {yScale}
           {zScale}
           {rScale}
+          {padding}
         />
       </TooltipContext>
     {:else}
@@ -114,6 +116,7 @@ export let geo = undefined;
         {yScale}
         {zScale}
         {rScale}
+        {padding}
       />
     {/if}
   </GeoContext>

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

@@ -35,6 +35,17 @@ declare const __propDef: {
             yScale: any;
             zScale: any;
             rScale: any;
+            padding: {
+                top: number;
+                right: number;
+                bottom: number;
+                left: number;
+            } & {
+                top?: number | undefined;
+                right?: number | undefined;
+                bottom?: number | undefined;
+                left?: number | undefined;
+            };
         };
     };
 };

package/dist/components/Legend.svelte

@@ -41,7 +41,7 @@ else if (scale.interpolator) {
     xScale = Object.assign(scale.copy().interpolator(interpolateRound(0, width)), {
         range() {
             return [0, width];
-        }
+        },
     });
     interpolator = scale.interpolator();
     // scaleSequentialQuantile doesn’t implement ticks or tickFormat.
@@ -72,7 +72,7 @@ else if (scale.invertExtent) {
             y: 0,
             width: xScale(i) - xScale(i - 1),
             height,
-            fill: d
+            fill: d,
         };
     });
     tickValues = range(thresholds.length);
@@ -90,7 +90,7 @@ else {
             y: 0,
             width: Math.max(0, xScale.bandwidth() - 1),
             height,
-            fill: scale(d)
+            fill: scale(d),
         };
     });
     tickValues = scale.domain();
@@ -101,6 +101,7 @@ else {
 </script>
 
 <div
+  {...$$restProps}
   class={cls(
     'inline-block',
     placement && [
@@ -114,12 +115,12 @@ else {
         right: 'top-1/2 right-0 -translate-y-1/2',
         'bottom-left': 'bottom-0 left-0',
         bottom: 'bottom-0 left-1/2 -translate-x-1/2',
-        'bottom-right': 'bottom-0 right-0'
-      }[placement]
+        'bottom-right': 'bottom-0 right-0',
+      }[placement],
     ],
+    $$restProps.class,
     classes.root
   )}
-  {...$$restProps}
 >
   <div class={cls('text-[10px] font-semibold', classes.title)}>{title}</div>
   <slot values={tickValues} {scale}>

package/dist/components/LinearGradient.svelte

@@ -1,9 +1,12 @@
 <script>import { uniqueId } from 'svelte-ux';
 /** Unique id for linearGradient */
 export let id = uniqueId('linearGradient-');
-export let from;
-export let via = undefined; // TODO: Currently --tw-gradient-via is not the color but the full stops
-export let to;
+/** Array array of strings (colors), will equally distributed from 0-100%.  If array of tuples, will use first value as the offset, and second as color */
+export let stops = [
+    'var(--tw-gradient-from)',
+    'var(--tw-gradient-to)',
+];
+/** Apply color stops top-to-bottom (true) or left-to-right (false) */
 export let vertical = false;
 export let x1 = '0%';
 export let y1 = '0%';
@@ -26,17 +29,14 @@ export let units = 'objectBoundingBox';
     {...$$restProps}
   >
     <slot name="stops">
-      {#if from}
-        <stop offset="0%" stop-color={from === true ? 'var(--tw-gradient-from)' : from} />
-      {/if}
-
-      {#if via}
-        <!-- <stop offset="50%" stop-color={via === true ? 'var(--tw-gradient-via)' : via} /> -->
-        <stop offset="50%" stop-color={via} />
-      {/if}
-
-      {#if to}
-        <stop offset="100%" stop-color={to === true ? 'var(--tw-gradient-to)' : to} />
+      {#if stops}
+        {#each stops as stop, i}
+          {#if Array.isArray(stop)}
+            <stop offset={stop[0]} stop-color={stop[1]} />
+          {:else}
+            <stop offset="{i * (100 / (stops.length - 1))}%" stop-color={stop} />
+          {/if}
+        {/each}
       {/if}
     </slot>
   </linearGradient>

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

@@ -3,9 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         id?: string | undefined;
-        from: string | boolean;
-        via?: string | boolean | undefined;
-        to: string | boolean;
+        stops?: string[] | [string | number, string][] | undefined;
         vertical?: boolean | undefined;
         x1?: string | undefined;
         y1?: string | undefined;

package/dist/components/Tooltip.svelte

@@ -4,8 +4,12 @@ import { fade } from 'svelte/transition';
 import { writable } from 'svelte/store';
 import { cls } from 'svelte-ux';
 import { tooltipContext } from './TooltipContext.svelte';
-export let topOffset = 10;
-export let leftOffset = 10;
+/** Use fixed `top` position instead of calculating based on data and mouse position */
+export let top = undefined;
+/** Use fixed `left` position instead of calculating based on data and mouse position */
+export let left = undefined;
+export let topOffset = top ? 0 : 10;
+export let leftOffset = left ? 0 : 10;
 export let contained = 'container'; // TODO: Support 'window' using getBoundingClientRect()
 export let animate = true;
 export let header = undefined;
@@ -14,24 +18,32 @@ const { containerWidth, containerHeight } = getContext('LayerCake');
 const tooltip = tooltipContext();
 let tooltipWidth = 0;
 let tooltipHeight = 0;
-let top = animate ? spring($tooltip.top) : writable($tooltip.top);
+let topPos = animate ? spring($tooltip.top) : writable($tooltip.top);
 $: if ($tooltip) {
-    if (contained === 'container' && $tooltip.top + topOffset + tooltipHeight > $containerHeight) {
+    if (top != null) {
+        $topPos = top;
+    }
+    else if (contained === 'container' &&
+        $tooltip.top + topOffset + tooltipHeight > $containerHeight) {
         // Change side.  Do not allow tooltip to go above the top
-        $top = Math.max($tooltip.top - (topOffset + tooltipHeight), 0);
+        $topPos = Math.max($tooltip.top - (topOffset + tooltipHeight), 0);
     }
     else {
-        $top = $tooltip.top + topOffset;
+        $topPos = $tooltip.top + topOffset;
     }
 }
-let left = animate ? spring($tooltip.left) : writable($tooltip.left);
+let leftPos = animate ? spring($tooltip.left) : writable($tooltip.left);
 $: if ($tooltip) {
-    if (contained === 'container' && $tooltip.left + leftOffset + tooltipWidth > $containerWidth) {
+    if (left != null) {
+        $leftPos = left;
+    }
+    else if (contained === 'container' &&
+        $tooltip.left + leftOffset + tooltipWidth > $containerWidth) {
         // Change side
-        $left = Math.max($tooltip.left - (leftOffset + tooltipWidth), 0);
+        $leftPos = Math.max($tooltip.left - (leftOffset + tooltipWidth), 0);
     }
     else {
-        $left = $tooltip.left + leftOffset;
+        $leftPos = $tooltip.left + leftOffset;
     }
 }
 </script>
@@ -39,8 +51,8 @@ $: if ($tooltip) {
 {#if $tooltip.data}
   <div
     class={cls('absolute pointer-events-none z-50', classes.root)}
-    style:top="{$top}px"
-    style:left="{$left}px"
+    style:top="{$topPos}px"
+    style:left="{$leftPos}px"
     transition:fade={{ duration: 100 }}
     bind:clientWidth={tooltipWidth}
     bind:clientHeight={tooltipHeight}

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

@@ -2,6 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        top?: number | undefined;
+        left?: number | undefined;
         topOffset?: number | undefined;
         leftOffset?: number | undefined;
         contained?: false | "container" | undefined;

package/dist/docs/ViewSourceButton.svelte

@@ -13,7 +13,7 @@ export let icon;
     <Dialog
       {open}
       on:close={toggle}
-      class="max-h-[98vh] md:max-h-[90vh] max-w-[98vw] md:max-w-[90vw] grid grid-rows-[auto,1fr,auto]"
+      class="max-h-[98dvh] md:max-h-[90dvh] max-w-[98vw] md:max-w-[90vw] grid grid-rows-[auto,1fr,auto]"
     >
       <div class="grid grid-cols-[1fr,auto] gap-3 items-center p-4">
         <div class="overflow-auto">

package/dist/utils/pivot.d.ts

@@ -1,14 +1,14 @@
-export declare function getAccessor(key: any): any;
+export declare function getAccessor(key: string): (d: any) => any;
 /**
  * Pivot longer (columns to rows)
  *  - see: https://observablehq.com/d/3ea8d446f5ba96fe
  *  - see also: https://observablehq.com/d/ac2a320cf2b0adc4 as generator
  */
-export declare function pivotLonger(data: any, columns: any, name: any, value: any): any;
+export declare function pivotLonger(data: any[], columns: string[], name: string, value: string): any[];
 /**
  * Pivot wider (rows to columns)
  *  - see: https://github.com/d3/d3-array/issues/142#issuecomment-761861983
  */
-export declare function pivotWider(data: any, column: any, name: any, value: any): unknown[];
-export declare function first(items: any): any;
-export declare function last(items: any): any;
+export declare function pivotWider(data: any[], column: string, name: string, value: string): any[];
+export declare function first(items: any[]): any;
+export declare function last(items: any[]): any;

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "layerchart",
+  "description": "Composable Svelte chart components to build a wide range of visualizations",
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
@@ -37,6 +38,7 @@
     "@types/d3-random": "^3.0.1",
     "@types/d3-sankey": "^0.12.1",
     "@types/d3-scale": "^4.0.4",
+    "@types/d3-scale-chromatic": "^3.0.0",
     "@types/d3-shape": "^3.1.2",
     "@types/lodash-es": "^4.17.9",
     "@types/marked": "^5.0.1",
@@ -86,7 +88,7 @@
     "layercake": "^7.6.1",
     "lodash-es": "^4.17.21",
     "shapefile": "^0.6.6",
-    "svelte-ux": "^0.49.0",
+    "svelte-ux": "^0.49.1",
     "topojson-client": "^3.1.0"
   },
   "peerDependencies": {