layerchart 2.0.0-next.41 → 2.0.0-next.43

package/dist/components/Arc.svelte

@@ -251,7 +251,7 @@
   const ctx = getChartContext();
 
   const endAngle = $derived(
-    endAngleProp ?? degreesToRadians(ctx.config.xRange ? max(ctx.xRange) : max(range))
+    endAngleProp ?? degreesToRadians(ctx.xRange ? max(ctx.xRange) : max(range))
   );
 
   const motionEndAngle = createMotion(initialValue, () => value, motion);

package/dist/components/Axis.svelte

@@ -125,15 +125,7 @@
 
   import { extent } from 'd3-array';
   import { pointRadial } from 'd3-shape';
-  import {
-    timeDay,
-    timeHour,
-    timeMillisecond,
-    timeMinute,
-    timeMonth,
-    timeSecond,
-    timeYear,
-  } from 'd3-time';
+  import { timeDay, timeHour, timeMillisecond, timeMinute, timeSecond, timeYear } from 'd3-time';
 
   import { type FormatType, type FormatConfig, unique, PeriodType } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';

package/dist/components/Calendar.svelte

@@ -55,7 +55,7 @@
 
 <script lang="ts">
   import { type ComponentProps, type Snippet } from 'svelte';
-  import { timeDays, timeMonths, timeWeek, timeYear } from 'd3-time';
+  import { timeDays, timeMonths, timeWeek } from 'd3-time';
   import { index } from 'd3-array';
   import { format } from '@layerstack/utils';
 
@@ -107,7 +107,7 @@
     yearDays.map((date) => {
       const cellData = dataByDate.get(date) ?? { date };
       return {
-        x: timeWeek.count(timeYear(date), date) * cellSize[0],
+        x: timeWeek.count(start, date) * cellSize[0],
         y: date.getDay() * cellSize[1],
         color: ctx.config.c ? ctx.cGet(cellData) : 'transparent',
         data: cellData,
@@ -136,14 +136,19 @@
 
 {#if monthPath}
   {#each yearMonths as date}
-    <MonthPath {date} {cellSize} {...extractLayerProps(monthPath, 'lc-calendar-month-path')} />
+    <MonthPath
+      {date}
+      startOfRange={start}
+      {cellSize}
+      {...extractLayerProps(monthPath, 'lc-calendar-month-path')}
+    />
   {/each}
 {/if}
 
 {#if monthLabel}
   {#each yearMonths as date}
     <Text
-      x={timeWeek.count(timeYear.floor(date), timeWeek.ceil(date)) * cellSize[0]}
+      x={timeWeek.count(start, timeWeek.ceil(date)) * cellSize[0]}
       value={format(date, 'month', { variant: 'short' })}
       capHeight="7px"
       {...extractLayerProps(monthLabel, 'lc-calendar-month-label')}

package/dist/components/Highlight.svelte

@@ -264,6 +264,11 @@
         tmpArea.width = max(xCoord) - min(xCoord); // Use first/last values for width
       } else if (isScaleBand(ctx.xScale)) {
         tmpArea.width = ctx.xScale.step();
+      } else if (ctx.xInterval) {
+        // x-axis time scale with interval
+        const start = ctx.xInterval.floor(xValue);
+        const end = ctx.xInterval.offset(start);
+        tmpArea.width = ctx.xScale(end) - ctx.xScale(start);
       } else {
         // Find width to next data point
         const index = ctx.flatData.findIndex((d) => Number(x(d)) === Number(x(highlightData)));
@@ -290,6 +295,11 @@
         tmpArea.height = max(yCoord) - min(yCoord); // Use first/last values for width
       } else if (isScaleBand(ctx.yScale)) {
         tmpArea.height = ctx.yScale.step();
+      } else if (ctx.yInterval) {
+        // y-axis time scale with interval
+        const start = ctx.yInterval.floor(yValue);
+        const end = ctx.yInterval.offset(start);
+        tmpArea.height = ctx.yScale(end) - ctx.yScale(start);
       } else {
         // Find width to next data point
         const index = ctx.flatData.findIndex((d) => Number(y(d)) === Number(y(highlightData)));

package/dist/components/MonthPath.svelte

@@ -15,6 +15,11 @@
      */
     cellSize: number | [number, number];
 
+    /**
+     * The start date of the calendar (used to calculate week offsets).
+     */
+    startOfRange: Date;
+
     /**
      * A bindable reference to the underlying `<path>` element.
      *
@@ -30,7 +35,7 @@
 </script>
 
 <script lang="ts">
-  import { timeWeek, timeYear } from 'd3-time';
+  import { timeWeek } from 'd3-time';
   import { cls } from '@layerstack/tailwind';
   import { endOfInterval } from '@layerstack/utils';
   import Spline, { type SplinePropsWithoutHTML } from './Spline.svelte';
@@ -38,6 +43,7 @@
   let {
     date,
     cellSize: cellSizeProp,
+    startOfRange,
     pathRef: pathRefProp = $bindable(),
     class: className,
     ...restProps
@@ -54,12 +60,12 @@
 
   // start of month
   const startDayOfWeek = $derived(date.getDay());
-  const startWeek = $derived(timeWeek.count(timeYear(date), date));
+  const startWeek = $derived(timeWeek.count(startOfRange, date));
 
   // end of month
   const monthEnd = $derived(endOfInterval('month', date));
   const endDayOfWeek = $derived(monthEnd.getDay());
-  const endWeek = $derived(timeWeek.count(timeYear(monthEnd), monthEnd));
+  const endWeek = $derived(timeWeek.count(startOfRange, monthEnd));
 
   const pathData = $derived(`
     M${(startWeek + 1) * cellSize[0]},${startDayOfWeek * cellSize[1]}

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

@@ -11,6 +11,10 @@ export type MonthPathPropsWithoutHTML = {
      * - array - sets [width, height].
      */
     cellSize: number | [number, number];
+    /**
+     * The start date of the calendar (used to calculate week offsets).
+     */
+    startOfRange: Date;
     /**
      * A bindable reference to the underlying `<path>` element.
      *

package/dist/components/tooltip/TooltipContext.svelte

@@ -518,6 +518,32 @@
                   height: ctx.yScale.step(),
                   data: d,
                 };
+              } else if (ctx.xInterval) {
+                // x-axis time scale with interval
+                const xVal = ctx.x(d);
+                const start = ctx.xInterval.floor(xVal);
+                const end = ctx.xInterval.offset(start);
+
+                return {
+                  x: ctx.xScale(start),
+                  y: isScaleBand(ctx.yScale) ? y - yOffset : min(ctx.yRange),
+                  width: ctx.xScale(end) - ctx.xScale(start),
+                  height: isScaleBand(ctx.yScale) ? ctx.yScale.step() : fullHeight,
+                  data: d,
+                };
+              } else if (ctx.yInterval) {
+                // y-axis time scale with interval
+                const yVal = ctx.y(d);
+                const start = ctx.yInterval.floor(yVal);
+                const end = ctx.yInterval.offset(start);
+
+                return {
+                  x: isScaleBand(ctx.xScale) ? x - xOffset : min(ctx.xRange),
+                  y: ctx.yScale(start),
+                  width: isScaleBand(ctx.xScale) ? ctx.xScale.step() : fullWidth,
+                  height: ctx.yScale(end) - ctx.yScale(start),
+                  data: d,
+                };
               } else if (isScaleTime(ctx.xScale)) {
                 // Find width to next data point
                 const index = ctx.flatData.findIndex(

package/dist/docs/ViewSourceButton.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { ComponentProps } from 'svelte';
   import { Button, Dialog, Toggle, Tooltip } from 'svelte-ux';
-  import LucideGithub from '~icons/lucide/github.svelte';
+  import LucideGithub from '~icons/lucide/github';
 
   import Code from './Code.svelte';
 

package/dist/utils/ticks.js

@@ -1,4 +1,4 @@
-import { timeYear, timeMonth, timeDay, timeTicks } from 'd3-time';
+import { timeYear, timeDay, timeTicks } from 'd3-time';
 import { format, Duration, isLiteralObject, DateToken, } from '@layerstack/utils';
 import { isScaleBand, isScaleTime } from './scales.svelte.js';
 export function getDurationFormat(duration, options = {

package/package.json

@@ -5,7 +5,7 @@
   "license": "MIT",
   "repository": "techniq/layerchart",
   "homepage": "https://layerchart.com",
-  "version": "2.0.0-next.41",
+  "version": "2.0.0-next.43",
   "devDependencies": {
     "@changesets/cli": "^2.29.6",
     "@iconify-json/lucide": "^1.2.62",