layerchart 2.0.0-next.42 → 2.0.0-next.44

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';
 

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

@@ -35,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';

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/styles/skeleton-4.css

@@ -0,0 +1,15 @@
+.lc-root-container {
+  --color-primary: var(--color-primary-500);
+
+  --color-surface-100: var(--color-surface-50);
+  --color-surface-200: var(--color-surface-100);
+  --color-surface-300: var(--color-surface-200);
+  --color-surface-content: var(--base-font-color);
+
+  html.dark & {
+    --color-surface-100: var(--color-surface-700);
+    --color-surface-200: var(--color-surface-800);
+    --color-surface-300: var(--color-surface-900);
+    --color-surface-content: var(--base-font-color-dark);
+  }
+}

package/dist/utils/color.js

@@ -1,21 +1,24 @@
 /** Generator to create a new color on each call */
-export function* rgbColorGenerator(step = 500) {
+export function* rgbColorGenerator(step = 200) {
     let nextColor = 0;
-    while (nextColor < 16777216) {
-        const r = nextColor & 0xff;
-        const g = (nextColor & 0xff00) >> 8;
-        const b = (nextColor & 0xff0000) >> 16;
+    while (nextColor < 1 << 21) {
+        const r = nextColor & 0x7f;
+        const g = (nextColor >> 7) & 0x7f;
+        const b = (nextColor >> 14) & 0x7f;
         nextColor += step;
-        yield { r, g, b, a: 255 };
+        yield { r: r * 2, g: g * 2, b: b * 2, a: 255 };
     }
     return { r: 0, g: 0, b: 0, a: 255 };
 }
 export function getColorStr(color) {
+    const r = color.r & 0xfe;
+    const g = color.g & 0xfe;
+    const b = color.b & 0xfe;
     if (color.a !== undefined) {
-        return `rgba(${color.r},${color.g},${color.b},${color.a})`;
+        return `rgba(${r},${g},${b},${color.a})`;
     }
     else {
-        return `rgb(${color.r},${color.g},${color.b})`;
+        return `rgb(${r},${g},${b})`;
     }
 }
 export function getColorIfDefined(data) {

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.42",
+  "version": "2.0.0-next.44",
   "devDependencies": {
     "@changesets/cli": "^2.29.6",
     "@iconify-json/lucide": "^1.2.62",