layerchart 2.0.0-next.11 → 2.0.0-next.13

package/dist/components/Axis.svelte

@@ -71,7 +71,7 @@
     /**
      * Format tick labels
      */
-    format?: FormatType;
+    format?: FormatType | FormatConfig;
 
     /**
      * Props to apply to each tick label
@@ -126,7 +126,7 @@
   import { extent } from 'd3-array';
   import { pointRadial } from 'd3-shape';
 
-  import { type FormatType } from '@layerstack/utils';
+  import { type FormatType, type FormatConfig } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
 
   import Group, { type GroupProps } from './Group.svelte';

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

@@ -60,7 +60,7 @@ export type AxisPropsWithoutHTML<In extends Transition = Transition> = {
     /**
      * Format tick labels
      */
-    format?: FormatType;
+    format?: FormatType | FormatConfig;
     /**
      * Props to apply to each tick label
      */
@@ -102,7 +102,7 @@ export type AxisPropsWithoutHTML<In extends Transition = Transition> = {
 export type AxisProps<In extends Transition = Transition> = AxisPropsWithoutHTML<In> & Without<GroupProps, AxisPropsWithoutHTML<In>>;
 import { type ComponentProps, type Snippet } from 'svelte';
 import type { SVGAttributes } from 'svelte/elements';
-import { type FormatType } from '@layerstack/utils';
+import { type FormatType, type FormatConfig } from '@layerstack/utils';
 import { type GroupProps } from './Group.svelte';
 import Rule from './Rule.svelte';
 import Text from './Text.svelte';

package/dist/components/Calendar.svelte

@@ -57,7 +57,7 @@
   import { type ComponentProps, type Snippet } from 'svelte';
   import { timeDays, timeMonths, timeWeek, timeYear } from 'd3-time';
   import { index } from 'd3-array';
-  import { format } from 'date-fns';
+  import { format } from '@layerstack/utils';
 
   import Rect, { type RectPropsWithoutHTML } from './Rect.svelte';
   import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
@@ -140,7 +140,7 @@
     <Text
       x={timeWeek.count(timeYear.floor(date), timeWeek.ceil(date)) * cellSize[0]}
       y={-4}
-      value={format(date, 'MMM')}
+      value={format(date, 'month', { variant: 'short' })}
       {...extractLayerProps(monthLabel, 'calendar-month-label', 'text-xs')}
     />
   {/each}

package/dist/components/Group.svelte

@@ -100,7 +100,7 @@
     initialY: initialYProp,
     center = false,
     preventTouchMove = false,
-    opacity = 1,
+    opacity = undefined,
     motion,
     transitionIn: transitionInProp,
     transitionInParams: transitionInParamsProp,
@@ -144,7 +144,7 @@
       name: 'Group',
       render: (ctx) => {
         const currentGlobalAlpha = ctx.globalAlpha;
-        ctx.globalAlpha = opacity;
+        ctx.globalAlpha = opacity ?? 1;
 
         ctx.translate(motionX.current ?? 0, motionY.current ?? 0);
 

package/dist/components/Labels.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
   import Text, { type TextProps } from './Text.svelte';
   import { type ComponentProps, type Snippet } from 'svelte';
-  import { format as formatValue, type FormatType } from '@layerstack/utils';
+  import { format as formatValue, type FormatType, type FormatConfig } from '@layerstack/utils';
   import type { Without } from '../utils/types.js';
   import Points, { type Point } from './Points.svelte';
   import { accessor, type Accessor } from '../utils/common.js';
@@ -51,7 +51,7 @@
     /**
      * The format of the label
      */
-    format?: FormatType;
+    format?: FormatType | FormatConfig;
 
     /**
      * Define unique value for {#each} `(key)` expressions to improve transitions.
@@ -109,6 +109,7 @@
 
     const formattedValue = formatValue(
       displayValue,
+      // @ts-expect-error - improve types
       format ??
         (value
           ? undefined

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

@@ -1,6 +1,6 @@
 import Text, { type TextProps } from './Text.svelte';
 import { type ComponentProps, type Snippet } from 'svelte';
-import { type FormatType } from '@layerstack/utils';
+import { type FormatType, type FormatConfig } from '@layerstack/utils';
 import type { Without } from '../utils/types.js';
 import { type Point } from './Points.svelte';
 import { type Accessor } from '../utils/common.js';
@@ -42,7 +42,7 @@ export type LabelsPropsWithoutHTML<T = any> = {
     /**
      * The format of the label
      */
-    format?: FormatType;
+    format?: FormatType | FormatConfig;
     /**
      * Define unique value for {#each} `(key)` expressions to improve transitions.
      * `index` position used by default

package/dist/components/Legend.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
   import type { Snippet } from 'svelte';
   import type { Placement } from './types.js';
-  import type { Without } from '../utils/types.js';
+  import { asAny, type Without } from '../utils/types.js';
 
   export type LegendItem = {
     value: any;
@@ -37,7 +37,7 @@
      * @default width / 64
      */
     ticks?: number;
-    tickFormat?: FormatType;
+    tickFormat?: FormatType | FormatConfig;
     tickValues?: any[];
     /**
      * The font size of the tick labels.
@@ -110,7 +110,7 @@
   import { scaleBand, scaleLinear } from 'd3-scale';
   import { quantize, interpolate, interpolateRound } from 'd3-interpolate';
   import { quantile, range } from 'd3-array';
-  import { format, type FormatType } from '@layerstack/utils';
+  import { format, type FormatType, type FormatConfig } from '@layerstack/utils';
 
   import ColorRamp from './ColorRamp.svelte';
   import { cls } from '@layerstack/tailwind';
@@ -245,6 +245,7 @@
       const tickValues = range(thresholds.length);
       const tickFormat = (i: number) => {
         const value = thresholds[i];
+        // @ts-expect-error - improve types
         return tickFormatProp ? format(value, tickFormatProp) : value;
       };
 
@@ -360,7 +361,8 @@
               classes.label
             )}
           >
-            {tickFormatProp ? format(tick, tickFormatProp) : tick}
+            <!-- @ts-expect-error - improve types -->
+            {tickFormatProp ? format(tick, asAny(tickFormatProp)) : tick}
           </text>
 
           {#if scaleConfig.tickLine}
@@ -409,7 +411,8 @@
               classes.label
             )}
           >
-            {tickFormatProp ? format(tick, tickFormatProp) : tick}
+            <!-- @ts-expect-error - improve types -->
+            {tickFormatProp ? format(tick, asAny(tickFormatProp)) : tick}
           </div>
         </button>
       {/each}

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

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { Placement } from './types.js';
-import type { Without } from '../utils/types.js';
+import { type Without } from '../utils/types.js';
 export type LegendItem = {
     value: any;
     color: string;
@@ -30,7 +30,7 @@ export type LegendPropsWithoutHTML = {
      * @default width / 64
      */
     ticks?: number;
-    tickFormat?: FormatType;
+    tickFormat?: FormatType | FormatConfig;
     tickValues?: any[];
     /**
      * The font size of the tick labels.
@@ -90,7 +90,7 @@ export type LegendPropsWithoutHTML = {
 };
 export type LegendProps = LegendPropsWithoutHTML & Without<HTMLAttributes<HTMLElement>, LegendPropsWithoutHTML>;
 import type { HTMLAttributes } from 'svelte/elements';
-import { type FormatType } from '@layerstack/utils';
+import { type FormatType, type FormatConfig } from '@layerstack/utils';
 import type { AnyScale } from '../utils/scales.svelte.js';
 declare const Legend: import("svelte").Component<LegendProps, {}, "ref">;
 type Legend = ReturnType<typeof Legend>;

package/dist/components/charts/AreaChart.svelte

@@ -69,7 +69,6 @@
   import { onMount, type ComponentProps } from 'svelte';
   import { scaleLinear, scaleTime } from 'd3-scale';
   import { stack, stackOffsetDiverging, stackOffsetExpand, stackOffsetNone } from 'd3-shape';
-  import { format } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
 
   import Area from '../Area.svelte';
@@ -398,8 +397,7 @@
     if (axisDirection === 'y') {
       return {
         placement: radial ? 'radius' : 'left',
-        format:
-          seriesLayout === 'stackExpand' ? (value) => format(value, 'percentRound') : undefined,
+        format: seriesLayout === 'stackExpand' ? 'percentRound' : undefined,
         ...(typeof axis === 'object' ? axis : null),
         ...props.yAxis,
       };

package/dist/components/charts/BarChart.svelte

@@ -86,7 +86,6 @@
   import { onMount, type ComponentProps } from 'svelte';
   import { scaleBand, scaleLinear, scaleTime } from 'd3-scale';
   import { stack, stackOffsetDiverging, stackOffsetExpand, stackOffsetNone } from 'd3-shape';
-  import { format } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
 
   import Axis from '../Axis.svelte';
@@ -365,20 +364,14 @@
       return {
         placement: radial ? 'radius' : 'left',
 
-        format:
-          isVertical && seriesLayout === 'stackExpand'
-            ? (value) => format(value, 'percentRound')
-            : undefined,
+        format: isVertical && seriesLayout === 'stackExpand' ? 'percentRound' : undefined,
         ...(typeof axis === 'object' ? axis : null),
         ...props.yAxis,
       };
     }
     return {
       placement: radial ? 'angle' : 'bottom',
-      format:
-        !isVertical && seriesLayout === 'stackExpand'
-          ? (value) => format(value, 'percentRound')
-          : undefined,
+      format: !isVertical && seriesLayout === 'stackExpand' ? 'percentRound' : undefined,
       ...(typeof axis === 'object' ? axis : null),
       ...props.xAxis,
     };

package/dist/components/tooltip/TooltipHeader.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
   import type { HTMLAttributes } from 'svelte/elements';
   import type { Snippet } from 'svelte';
-  import type { Without } from '../../utils/types.js';
+  import { asAny, type Without } from '../../utils/types.js';
 
   export type TooltipHeaderPropsWithoutHTML = {
     /**
@@ -13,7 +13,7 @@
     /**
      * The format to use when displaying the value.
      */
-    format?: FormatType;
+    format?: FormatType | FormatConfig;
 
     /**
      * The color to use for the color dot.
@@ -54,7 +54,7 @@
 </script>
 
 <script lang="ts">
-  import { format as formatUtil, type FormatType } from '@layerstack/utils';
+  import { format as formatUtil, type FormatType, type FormatConfig } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
   import { layerClass } from '../../utils/attributes.js';
 
@@ -114,6 +114,7 @@
   {#if children}
     {@render children?.()}
   {:else}
-    {format ? formatUtil(value, format) : value}
+    <!-- @ts-expect-error - improve types -->
+    {format ? formatUtil(value, asAny(format)) : value}
   {/if}
 </div>

package/dist/components/tooltip/TooltipHeader.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from 'svelte/elements';
 import type { Snippet } from 'svelte';
-import type { Without } from '../../utils/types.js';
+import { type Without } from '../../utils/types.js';
 export type TooltipHeaderPropsWithoutHTML = {
     /**
      * The value to display in the tooltip header when the `children`
@@ -10,7 +10,7 @@ export type TooltipHeaderPropsWithoutHTML = {
     /**
      * The format to use when displaying the value.
      */
-    format?: FormatType;
+    format?: FormatType | FormatConfig;
     /**
      * The color to use for the color dot.
      */
@@ -40,7 +40,7 @@ export type TooltipHeaderPropsWithoutHTML = {
     children?: Snippet;
 };
 export type TooltipHeaderProps = TooltipHeaderPropsWithoutHTML & Without<HTMLAttributes<HTMLElement>, TooltipHeaderPropsWithoutHTML>;
-import { type FormatType } from '@layerstack/utils';
+import { type FormatType, type FormatConfig } from '@layerstack/utils';
 declare const TooltipHeader: import("svelte").Component<TooltipHeaderProps, {}, "ref" | "colorRef">;
 type TooltipHeader = ReturnType<typeof TooltipHeader>;
 export default TooltipHeader;

package/dist/components/tooltip/TooltipItem.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" module>
   import type { HTMLAttributes } from 'svelte/elements';
-  import type { Without } from '../../utils/types.js';
+  import { asAny, type Without } from '../../utils/types.js';
 
   export type TooltipItemPropsWithoutHTML = {
     /**
@@ -16,7 +16,7 @@
     /**
      * Format to use when displaying the value.
      */
-    format?: FormatType;
+    format?: FormatType | FormatConfig;
 
     /**
      * Alignment of the value.
@@ -75,7 +75,7 @@
 </script>
 
 <script lang="ts">
-  import { format as formatUtil, type FormatType } from '@layerstack/utils';
+  import { format as formatUtil, type FormatType, type FormatConfig } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
   import type { Snippet } from 'svelte';
   import { layerClass } from '../../utils/attributes.js';
@@ -189,7 +189,8 @@
     {#if children}
       {@render children()}
     {:else}
-      {format ? formatUtil(value, format) : value}
+      <!-- @ts-expect-error - improve types -->
+      {format ? formatUtil(value, asAny(format)) : value}
     {/if}
   </div>
 </div>

package/dist/components/tooltip/TooltipItem.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from 'svelte/elements';
-import type { Without } from '../../utils/types.js';
+import { type Without } from '../../utils/types.js';
 export type TooltipItemPropsWithoutHTML = {
     /**
      * The label to display in the tooltip item.
@@ -13,7 +13,7 @@ export type TooltipItemPropsWithoutHTML = {
     /**
      * Format to use when displaying the value.
      */
-    format?: FormatType;
+    format?: FormatType | FormatConfig;
     /**
      * Alignment of the value.
      *
@@ -59,7 +59,7 @@ export type TooltipItemPropsWithoutHTML = {
     colorRef?: HTMLElement;
 };
 export type TooltipItemProps = TooltipItemPropsWithoutHTML & Without<HTMLAttributes<HTMLElement>, TooltipItemPropsWithoutHTML>;
-import { type FormatType } from '@layerstack/utils';
+import { type FormatType, type FormatConfig } from '@layerstack/utils';
 import type { Snippet } from 'svelte';
 declare const TooltipItem: import("svelte").Component<TooltipItemProps, {}, "ref" | "colorRef" | "labelRef" | "valueRef">;
 type TooltipItem = ReturnType<typeof TooltipItem>;

package/dist/components/tooltip/tooltipMetaContext.d.ts

@@ -1,7 +1,7 @@
 import { type Accessor } from '../../utils/common.js';
 import type { SeriesData } from '../charts/index.js';
 import type { ChartContextValue } from '../Chart.svelte';
-import { type FormatType } from '@layerstack/utils';
+import { type FormatType, type FormatConfig } from '@layerstack/utils';
 export type SimplifiedChartType = 'bar' | 'area' | 'line' | 'pie' | 'scatter';
 export type BarTooltipMetaContextValue = {
     type: 'bar';
@@ -52,7 +52,7 @@ export type TooltipPayload = {
     chartType?: SimplifiedChartType;
     payload: any;
     rawSeriesData?: SeriesData<any, any>;
-    formatter?: FormatType;
+    formatter?: FormatType | FormatConfig;
 };
 type BasePayloadHandlerProps = {
     ctx: ChartContextValue;

package/dist/utils/ticks.d.ts

@@ -1,9 +1,9 @@
 import { type TimeInterval } from 'd3-time';
-import { Duration, type FormatType } from '@layerstack/utils';
+import { Duration, type FormatType, type FormatConfig } from '@layerstack/utils';
 import { type AnyScale } from './scales.svelte.js';
 export declare function getDurationFormat(duration: Duration, multiline?: boolean): (date: Date, i: number) => string;
 export type TicksConfig = number | any[] | ((scale: AnyScale) => any[] | undefined) | {
     interval: TimeInterval | null;
 } | null;
 export declare function resolveTickVals(scale: AnyScale, ticks?: TicksConfig, count?: number): any[];
-export declare function resolveTickFormat(scale: AnyScale, ticks?: TicksConfig, count?: number, formatType?: FormatType, multiline?: boolean): (date: Date, i: number) => string;
+export declare function resolveTickFormat(scale: AnyScale, ticks?: TicksConfig, count?: number, formatType?: FormatType | FormatConfig, multiline?: boolean): (date: Date, i: number) => string;

package/dist/utils/ticks.js

@@ -1,69 +1,68 @@
 import { timeYear, timeMonth, timeDay, timeTicks } from 'd3-time';
-import { format, PeriodType, Duration, isLiteralObject, DateToken, } from '@layerstack/utils';
+import { format, Duration, isLiteralObject, DateToken, } from '@layerstack/utils';
 import { isScaleBand, isScaleTime } from './scales.svelte.js';
 export function getDurationFormat(duration, multiline = false) {
     return function (date, i) {
         if (+duration >= +new Duration({ duration: { years: 1 } })) {
             // Year
-            return format(date, PeriodType.CalendarYear);
+            return format(date, 'year');
         }
         else if (+duration >= +new Duration({ duration: { days: 28 } })) {
             // Month
             const isFirst = i === 0 || +timeYear.floor(date) === +date;
             if (multiline) {
-                return (format(date, PeriodType.Month, { variant: 'short' }) +
-                    (isFirst ? `\n${format(date, PeriodType.CalendarYear)}` : ''));
+                return (format(date, 'month', { variant: 'short' }) + (isFirst ? `\n${format(date, 'year')}` : ''));
             }
             else {
-                return (format(date, PeriodType.Month, { variant: 'short' }) +
-                    (isFirst ? ` '${format(date, PeriodType.CalendarYear, { variant: 'short' })}` : ''));
+                return (format(date, 'month', { variant: 'short' }) +
+                    (isFirst ? ` '${format(date, 'year', { variant: 'short' })}` : ''));
             }
         }
         else if (+duration >= +new Duration({ duration: { days: 1 } })) {
             // Day
-            const isFirst = i === 0 || date.getDate() < duration.days;
+            const isFirst = i === 0 || date.getDate() <= duration.days;
             if (multiline) {
-                return (format(date, PeriodType.Custom, { custom: DateToken.DayOfMonth_numeric }) +
-                    (isFirst ? `\n${format(date, PeriodType.Month, { variant: 'short' })}` : ''));
+                return (format(date, 'custom', { custom: DateToken.DayOfMonth_numeric }) +
+                    (isFirst ? `\n${format(date, 'month', { variant: 'short' })}` : ''));
             }
             else {
-                return format(date, PeriodType.Day, { variant: 'short' });
+                return format(date, 'day', { variant: 'short' });
             }
         }
         else if (+duration >= +new Duration({ duration: { hours: 1 } })) {
             // Hours
             const isFirst = i === 0 || +timeDay.floor(date) === +date;
             if (multiline) {
-                return (format(date, PeriodType.Custom, { custom: DateToken.Hour_numeric }) +
-                    (isFirst ? `\n${format(date, PeriodType.Day, { variant: 'short' })}` : ''));
+                return (format(date, 'custom', { custom: DateToken.Hour_numeric }) +
+                    (isFirst ? `\n${format(date, 'day', { variant: 'short' })}` : ''));
             }
             else {
                 return isFirst
-                    ? format(date, PeriodType.Day, { variant: 'short' })
-                    : format(date, PeriodType.Custom, { custom: DateToken.Hour_numeric });
+                    ? format(date, 'day', { variant: 'short' })
+                    : format(date, 'custom', { custom: DateToken.Hour_numeric });
             }
         }
         else if (+duration >= +new Duration({ duration: { minutes: 1 } })) {
             // Minutes
             const isFirst = i === 0 || +timeDay.floor(date) === +date;
             if (multiline) {
-                return (format(date, PeriodType.TimeOnly, { variant: 'short' }) +
-                    (isFirst ? `\n${format(date, PeriodType.Day, { variant: 'short' })}` : ''));
+                return (format(date, 'time', { variant: 'short' }) +
+                    (isFirst ? `\n${format(date, 'day', { variant: 'short' })}` : ''));
             }
             else {
-                return format(date, PeriodType.TimeOnly, { variant: 'short' });
+                return format(date, 'time', { variant: 'short' });
             }
         }
         else if (+duration >= +new Duration({ duration: { seconds: 1 } })) {
             // Seconds
             const isFirst = i === 0 || +timeDay.floor(date) === +date;
-            return (format(date, PeriodType.TimeOnly) +
-                (multiline && isFirst ? `\n${format(date, PeriodType.Day, { variant: 'short' })}` : ''));
+            return (format(date, 'time') +
+                (multiline && isFirst ? `\n${format(date, 'day', { variant: 'short' })}` : ''));
         }
         else if (+duration >= +new Duration({ duration: { milliseconds: 1 } })) {
             // Milliseconds
             const isFirst = i === 0 || +timeDay.floor(date) === +date;
-            return (format(date, PeriodType.Custom, {
+            return (format(date, 'custom', {
                 custom: [
                     DateToken.Hour_2Digit,
                     DateToken.Minute_2Digit,
@@ -71,7 +70,7 @@ export function getDurationFormat(duration, multiline = false) {
                     DateToken.MiliSecond_3,
                     DateToken.Hour_woAMPM,
                 ],
-            }) + (multiline && isFirst ? `\n${format(date, PeriodType.Day, { variant: 'short' })}` : ''));
+            }) + (multiline && isFirst ? `\n${format(date, 'day', { variant: 'short' })}` : ''));
         }
         else {
             return date.toString();
@@ -107,6 +106,7 @@ export function resolveTickVals(scale, ticks, count) {
 export function resolveTickFormat(scale, ticks, count, formatType, multiline = false) {
     // Explicit format
     if (formatType) {
+        // @ts-expect-error - improve types
         return (tick) => format(tick, formatType);
     }
     // Time scale

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "2.0.0-next.11",
+  "version": "2.0.0-next.13",
   "devDependencies": {
     "@changesets/cli": "^2.29.4",
     "@iconify-json/lucide": "^1.2.44",
@@ -72,10 +72,10 @@
   "type": "module",
   "dependencies": {
     "@dagrejs/dagre": "^1.1.4",
-    "@layerstack/svelte-actions": "1.0.1-next.2",
-    "@layerstack/svelte-state": "0.1.0-next.7",
-    "@layerstack/tailwind": "2.0.0-next.4",
-    "@layerstack/utils": "2.0.0-next.3",
+    "@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",
     "d3-array": "^3.2.4",
     "d3-color": "^3.1.0",
     "d3-delaunay": "^6.0.4",