layerchart 2.0.0-next.17 → 2.0.0-next.19

package/dist/components/Calendar.svelte

@@ -43,7 +43,7 @@
      */
     tooltipContext?: TooltipContextValue;
 
-    children?: Snippet<[{ cells: CalendarCell[] }]>;
+    children?: Snippet<[{ cells: CalendarCell[]; cellSize: [number, number] }]>;
   } & Omit<
     RectPropsWithoutHTML,
     'children' | 'x' | 'y' | 'width' | 'height' | 'fill' | 'onpointermove' | 'onpointerleave'
@@ -117,7 +117,7 @@
 </script>
 
 {#if children}
-  {@render children({ cells })}
+  {@render children({ cells, cellSize })}
 {:else}
   {#each cells as cell}
     <Rect

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

@@ -37,6 +37,7 @@ export type CalendarPropsWithoutHTML = {
     tooltipContext?: TooltipContextValue;
     children?: Snippet<[{
         cells: CalendarCell[];
+        cellSize: [number, number];
     }]>;
 } & Omit<RectPropsWithoutHTML, 'children' | 'x' | 'y' | 'width' | 'height' | 'fill' | 'onpointermove' | 'onpointerleave'>;
 export type CalendarProps = CalendarPropsWithoutHTML & Without<SVGAttributes<SVGRectElement>, CalendarPropsWithoutHTML>;

package/dist/components/MonthPath.svelte

@@ -30,8 +30,8 @@
 </script>
 
 <script lang="ts">
-  import { timeWeek, timeYear } from 'd3-time';
-  import { endOfMonth } from 'date-fns';
+  import { timeWeek, timeMonth, timeYear } from 'd3-time';
+  import { endOfInterval } from '../utils/date.js';
   import { cls } from '@layerstack/tailwind';
   import { layerClass } from '../utils/attributes.js';
   import Spline, { type SplinePropsWithoutHTML } from './Spline.svelte';
@@ -58,7 +58,7 @@
   const startWeek = $derived(timeWeek.count(timeYear(date), date));
 
   // end of month
-  const monthEnd = $derived(endOfMonth(date));
+  const monthEnd = $derived(endOfInterval(date, timeMonth));
   const endDayOfWeek = $derived(monthEnd.getDay());
   const endWeek = $derived(timeWeek.count(timeYear(monthEnd), monthEnd));
 

package/dist/components/Text.svelte

@@ -281,27 +281,34 @@
       // Split each line into words
       const words = line.split(/(?:(?!\u00A0+)\s+)/);
 
-      // Handle word wrapping within each line
-      return words.reduce((result: { words: string[]; width?: number }[], item) => {
-        const currentLine = result[result.length - 1];
-        const itemWidth = getStringWidth(item, style) || 0;
-
-        if (
-          currentLine &&
-          (width == null || scaleToFit || (currentLine.width || 0) + itemWidth + spaceWidth < width)
-        ) {
-          // Word can be added to an existing line
-          currentLine.words.push(item);
-          currentLine.width = currentLine.width || 0;
-          currentLine.width += itemWidth + spaceWidth;
-        } else {
-          // Add first word to line or word is too long to scaleToFit on existing line
-          const newLine = { words: [item], width: itemWidth };
-          result.push(newLine);
-        }
-
-        return result;
-      }, []);
+      if (width == null) {
+        // No width specified, only use explicit line breaks (if used)
+        return [{ words }];
+      } else {
+        // Handle word wrapping within each line
+        return words.reduce((result: { words: string[]; width?: number }[], item) => {
+          const currentLine = result[result.length - 1];
+          const itemWidth = getStringWidth(item, style) || 0;
+
+          if (
+            currentLine &&
+            (width == null ||
+              scaleToFit ||
+              (currentLine.width || 0) + itemWidth + spaceWidth < width)
+          ) {
+            // Word can be added to an existing line
+            currentLine.words.push(item);
+            currentLine.width = currentLine.width || 0;
+            currentLine.width += itemWidth + spaceWidth;
+          } else {
+            // Add first word to line or word is too long to scaleToFit on existing line
+            const newLine = { words: [item], width: itemWidth };
+            result.push(newLine);
+          }
+
+          return result;
+        }, []);
+      }
     });
   });
 

package/dist/utils/date.d.ts

@@ -0,0 +1,8 @@
+import { type TimeInterval } from 'd3-time';
+/**
+ * Get the date at the end of the interval
+ * Similar to `interval.ceil(date)` except:
+ *   - returns end of day instead of start of next day
+ *   - properly handles start of day (i.e. not return same date)
+ */
+export declare function endOfInterval(date: Date, interval: TimeInterval): Date;

package/dist/utils/date.js

@@ -0,0 +1,11 @@
+import {} from 'd3-time';
+/**
+ * Get the date at the end of the interval
+ * Similar to `interval.ceil(date)` except:
+ *   - returns end of day instead of start of next day
+ *   - properly handles start of day (i.e. not return same date)
+ */
+export function endOfInterval(date, interval) {
+    // Can not use `new Date(+interval.ceil(date) - 1)`; as `.ceil()` will return same date when start of the day (matching `.floor()`)
+    return new Date(interval.offset(interval.floor(date), 1).getTime() - 1);
+}

package/dist/utils/genData.js

@@ -1,4 +1,4 @@
-import { addMinutes, startOfDay, startOfToday, subDays } from 'date-fns';
+import { timeMinute, timeDay } from 'd3-time';
 import { cumsum } from 'd3-array';
 import { randomNormal } from 'd3-random';
 import { degreesToRadians, radiansToDegrees } from './math.js';
@@ -44,14 +44,14 @@ export function createSeries(options) {
     });
 }
 export function createDateSeries(options) {
-    const now = startOfToday();
+    const now = timeDay.floor(new Date());
     const count = options.count ?? 10;
     const min = options.min;
     const max = options.max;
     const keys = options.keys ?? ['value'];
     return Array.from({ length: count }).map((_, i) => {
         return {
-            date: subDays(now, count - i - 1),
+            date: timeDay.offset(now, -count + i),
             ...Object.fromEntries(keys.map((key) => {
                 return [
                     key,
@@ -66,10 +66,10 @@ export function createTimeSeries(options) {
     const min = options.min;
     const max = options.max;
     const keys = options.keys ?? ['value'];
-    let lastStartDate = startOfDay(new Date());
+    let lastStartDate = timeDay.floor(new Date());
     const timeSeries = Array.from({ length: count }).map((_, i) => {
-        const startDate = addMinutes(lastStartDate, getRandomInteger(0, 60));
-        const endDate = addMinutes(startDate, getRandomInteger(5, 60));
+        const startDate = timeMinute.offset(lastStartDate, getRandomInteger(0, 60));
+        const endDate = timeMinute.offset(startDate, getRandomInteger(5, 60));
         lastStartDate = startDate;
         return {
             name: `item ${i + 1}`,

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "2.0.0-next.17",
+  "version": "2.0.0-next.19",
   "devDependencies": {
     "@changesets/cli": "^2.29.4",
     "@iconify-json/lucide": "^1.2.44",
@@ -50,12 +50,13 @@
     "prism-themes": "^1.9.0",
     "prismjs": "^1.30.0",
     "rehype-slug": "^6.0.0",
+    "rollup-plugin-visualizer": "^6.0.3",
     "shapefile": "^0.6.6",
     "solar-calculator": "^0.3.0",
     "svelte": "5.32.1",
     "svelte-check": "^4.2.1",
     "svelte-json-tree": "^2.2.0",
-    "svelte-ux": "2.0.0-next.2",
+    "svelte-ux": "2.0.0-next.8",
     "svelte2tsx": "^0.7.39",
     "tailwindcss": "^4.1.7",
     "topojson-client": "^3.1.0",
@@ -72,10 +73,10 @@
   "type": "module",
   "dependencies": {
     "@dagrejs/dagre": "^1.1.4",
-    "@layerstack/svelte-actions": "1.0.1-next.4",
-    "@layerstack/svelte-state": "0.1.0-next.9",
-    "@layerstack/tailwind": "2.0.0-next.6",
-    "@layerstack/utils": "2.0.0-next.6",
+    "@layerstack/svelte-actions": "1.0.1-next.11",
+    "@layerstack/svelte-state": "0.1.0-next.16",
+    "@layerstack/tailwind": "2.0.0-next.13",
+    "@layerstack/utils": "2.0.0-next.11",
     "d3-array": "^3.2.4",
     "d3-color": "^3.1.0",
     "d3-delaunay": "^6.0.4",
@@ -95,7 +96,6 @@
     "d3-shape": "^3.2.0",
     "d3-tile": "^1.0.0",
     "d3-time": "^3.1.0",
-    "date-fns": "^4.1.0",
     "lodash-es": "^4.17.21",
     "runed": "^0.28.0"
   },