layerchart 0.28.0-next.2 → 0.30.0

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

@@ -14,7 +14,7 @@ declare const __propDef: {
         clipPath?: string | undefined;
         curve?: CurveFactory | undefined;
         defined?: Parameters<Area<any>['defined']>[0] | undefined;
-        line?: boolean | {
+        line?: boolean | Partial<{
             [x: string]: any;
             data?: any;
             pathData?: string | null | undefined;
@@ -24,7 +24,7 @@ declare const __propDef: {
             draw?: boolean | import("svelte/transition").DrawParams | undefined;
             curve?: CurveFactory | import("d3-shape").CurveFactoryLineOnly | undefined;
             defined?: ((d: any, index: number, data: any[]) => boolean) | undefined;
-        } | undefined;
+        }> | undefined;
     };
     events: {
         click: MouseEvent;

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

@@ -1,7 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 import { type ComponentProps } from 'svelte';
 import type { SVGAttributes } from 'svelte/elements';
-import { type FormatType } from 'svelte-ux';
 import Text from './Text.svelte';
 declare const __propDef: {
     props: {
@@ -10,8 +9,8 @@ declare const __propDef: {
         /** Draw a grid lines */ grid?: boolean | SVGAttributes<SVGLineElement> | undefined;
         /** Control the number of ticks*/ ticks?: number | any[] | Function | undefined;
         /** Length of the tick line */ tickSize?: number | undefined;
-        format?: FormatType | undefined;
-        labelProps?: ComponentProps<Text> | undefined;
+        format?: any;
+        labelProps?: Partial<ComponentProps<Text>> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/Bounds.svelte

@@ -9,7 +9,7 @@ export let tweened = undefined;
 function getExtents(extents, axis, fallback) {
     const resolvedExtents = typeof extents === 'function' ? extents({ width: $width, height: $height }) : extents;
     return [
-        resolvedExtents?.[axis + '0'] ?? 0,
+        resolvedExtents?.[axis + '0'] ?? 0, // x0 or y0
         resolvedExtents?.[axis + '1'] ?? fallback // x1 or y1, fallback as $width or $height
     ];
 }

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

@@ -6,11 +6,11 @@ declare const __propDef: {
         start: Date;
         end: Date;
         cellSize?: number | [number, number] | undefined;
-        monthPath?: boolean | {
+        monthPath?: boolean | Partial<{
             [x: string]: any;
             date: Date;
             cellSize: number | [number, number];
-        } | undefined;
+        }> | undefined;
         tooltip?: TooltipContextValue | undefined;
     };
     events: {

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

@@ -16,8 +16,8 @@ declare const __propDef: {
         yScale?: Function | undefined;
         xBaseline?: number | null | undefined;
         yBaseline?: number | null | undefined;
-        tooltip?: ComponentProps<TooltipContext> | boolean | undefined;
-        geo?: ComponentProps<GeoContext> | undefined;
+        tooltip?: Partial<ComponentProps<TooltipContext>> | boolean | undefined;
+        geo?: Partial<ComponentProps<GeoContext>> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/Circle.svelte

@@ -1,4 +1,5 @@
 <script>import { tick } from 'svelte';
+import { cls } from 'svelte-ux';
 import { motionStore } from '../stores/motionStore';
 export let cx = 0;
 export let initialCx = cx;
@@ -22,6 +23,7 @@ $: tick().then(() => {
   cx={$tweened_cx}
   cy={$tweened_cy}
   r={$tweened_r}
+  class={cls($$props.fill === undefined && 'fill-surface-content')}
   {...$$restProps}
   on:click
   on:mousemove

package/dist/components/ClipPath.svelte

@@ -3,6 +3,8 @@
 export let id = uniqueId('clipPath-');
 /** Use existing path or shape (by id) for clipPath */
 export let useId = undefined;
+/** Disable clipping (show all) */
+export let disabled = false;
 </script>
 
 <defs>
@@ -16,7 +18,11 @@ export let useId = undefined;
 </defs>
 
 {#if $$slots.default}
-  <g style:clip-path="url(#{id})" on:click on:mousemove on:mouseleave on:keydown>
-    <slot {id} url="url(#{id})" {useId} />
-  </g>
+  {#if disabled}
+    <slot />
+  {:else}
+    <g style:clip-path="url(#{id})" on:click on:mousemove on:mouseleave on:keydown>
+      <slot {id} url="url(#{id})" {useId} />
+    </g>
+  {/if}
 {/if}

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

@@ -4,6 +4,7 @@ declare const __propDef: {
         [x: string]: any;
         id?: string | undefined;
         useId?: string | undefined;
+        disabled?: boolean | undefined;
     };
     events: {
         click: MouseEvent;

package/dist/components/GeoCircle.svelte

@@ -0,0 +1,12 @@
+<script>import { geoCircle } from 'd3-geo';
+import GeoPath from './GeoPath.svelte';
+/** Radius in degrees.  Default: 90 */
+export let radius = 90;
+/** Center point of circle in degree ([longitude, latitude]).  Default [0, 0] */
+export let center = [0, 0];
+/** sets the circle precision to the specified angle in degrees */
+export let precision = 6;
+$: geojson = geoCircle().radius(radius).center(center)();
+</script>
+
+<GeoPath {geojson} {...$$restProps} />

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        radius?: number | undefined;
+        center?: [number, number] | undefined;
+        precision?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GeoCircleProps = typeof __propDef.props;
+export type GeoCircleEvents = typeof __propDef.events;
+export type GeoCircleSlots = typeof __propDef.slots;
+export default class GeoCircle extends SvelteComponentTyped<GeoCircleProps, GeoCircleEvents, GeoCircleSlots> {
+}
+export {};

package/dist/components/Graticule.svelte

@@ -16,11 +16,11 @@ $: graticule.step(step);
 
   {#if lines}
     {#each graticule.lines() as line}
-      <GeoPath geojson={line} {...lines} />
+      <GeoPath geojson={line} {...typeof lines === 'object' ? lines : null} />
     {/each}
   {/if}
 
   {#if outline}
-    <GeoPath geojson={graticule.outline()} {...outline} />
+    <GeoPath geojson={graticule.outline()} {...typeof outline === 'object' ? outline : null} />
   {/if}
 </g>

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

@@ -4,8 +4,8 @@ import GeoPath from './GeoPath.svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        lines?: Omit<ComponentProps<GeoPath>, 'geojson'> | boolean | undefined;
-        outline?: Omit<ComponentProps<GeoPath>, 'geojson'> | boolean | undefined;
+        lines?: Partial<ComponentProps<GeoPath>> | boolean | undefined;
+        outline?: Partial<ComponentProps<GeoPath>> | boolean | undefined;
         step?: [number, number] | undefined;
     };
     events: {

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

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         axis?: 'x' | 'y' | 'both' | 'none' | undefined;
-        /** Show points and pass props to Circles */ points?: boolean | {
+        /** Show points and pass props to Circles */ points?: boolean | Partial<{
             [x: string]: any;
             cx?: number | undefined;
             initialCx?: number | undefined;
@@ -12,8 +12,8 @@ declare const __propDef: {
             initialR?: number | undefined;
             spring?: boolean | import("svelte/motion").SpringOpts | undefined;
             tweened?: boolean | import("svelte/motion").TweenedOptions<unknown> | undefined;
-        } | undefined;
-        /** Show lines and pass props to Lines */ lines?: boolean | {
+        }> | undefined;
+        /** Show lines and pass props to Lines */ lines?: boolean | Partial<{
             [x: string]: any;
             x1: number;
             initialX1?: number | undefined;
@@ -25,8 +25,8 @@ declare const __propDef: {
             initialY2?: number | undefined;
             spring?: boolean | import("svelte/motion").SpringOpts | undefined;
             tweened?: boolean | import("svelte/motion").TweenedOptions<unknown> | undefined;
-        } | undefined;
-        /** Show area and pass props to Rect */ area?: boolean | {
+        }> | undefined;
+        /** Show area and pass props to Rect */ area?: boolean | Partial<{
             [x: string]: any;
             x?: number | undefined;
             initialX?: number | undefined;
@@ -42,8 +42,8 @@ declare const __propDef: {
             tweened?: boolean | import("svelte/motion").TweenedOptions<unknown> | {
                 [prop: string]: import("svelte/motion").TweenedOptions<unknown> | undefined;
             } | undefined;
-        } | undefined;
-        /** Show bar and pass props to Rect */ bar?: boolean | {
+        }> | undefined;
+        /** Show bar and pass props to Rect */ bar?: boolean | Partial<{
             [x: string]: any;
             x?: number | undefined;
             initialX?: number | undefined;
@@ -59,7 +59,7 @@ declare const __propDef: {
             tweened?: boolean | import("svelte/motion").TweenedOptions<unknown> | {
                 [prop: string]: import("svelte/motion").TweenedOptions<unknown> | undefined;
             } | undefined;
-        } | undefined;
+        }> | undefined;
     };
     events: {
         click: MouseEvent;
@@ -76,7 +76,7 @@ declare const __propDef: {
             };
         };
         bar: {
-            bar: boolean | {
+            bar: boolean | Partial<{
                 [x: string]: any;
                 x?: number | undefined;
                 initialX?: number | undefined;
@@ -92,13 +92,21 @@ declare const __propDef: {
                 tweened?: boolean | import("svelte/motion").TweenedOptions<unknown> | {
                     [prop: string]: import("svelte/motion").TweenedOptions<unknown> | undefined;
                 } | undefined;
-            };
+            }>;
         };
         lines: {
-            lines: any[];
+            lines: {
+                x1: number;
+                y1: number;
+                x2: number;
+                y2: number;
+            }[];
         };
         points: {
-            points: any[];
+            points: {
+                x: number;
+                y: number;
+            }[];
         };
     };
 };

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

@@ -1,5 +1,4 @@
 import { SvelteComponentTyped } from "svelte";
-import { type FormatType } from 'svelte-ux';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -8,7 +7,7 @@ declare const __propDef: {
         width?: number | undefined;
         height?: number | undefined;
         ticks?: number | undefined;
-        tickFormat?: FormatType | undefined;
+        tickFormat?: any;
         tickValues?: any[] | undefined;
         tickFontSize?: number | undefined;
         tickSize?: number | undefined;

package/dist/components/Line.svelte

@@ -1,4 +1,5 @@
 <script>import { tick } from 'svelte';
+import { cls } from 'svelte-ux';
 import { motionStore } from '../stores/motionStore';
 export let x1;
 export let initialX1 = x1;
@@ -27,6 +28,7 @@ $: tick().then(() => {
   y1={$tweened_y1}
   x2={$tweened_x2}
   y2={$tweened_y2}
+  class={cls($$props.stroke === undefined && 'stroke-surface-content')}
   {...$$restProps}
   on:click
   on:mousemove

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

@@ -19,10 +19,10 @@ declare const __propDef: {
            *   value >  0: percent of `outerRadius`
            *   value <  0: offset of `outerRadius`
            *   default: yRange min
-           */ innerRadius?: undefined;
+           */ innerRadius?: number | undefined;
         /**
            * Define outerRadius.  Defaults to yRange max/2 (ie. chart height / 2)
-           */ outerRadius?: undefined;
+           */ outerRadius?: number | undefined;
         cornerRadius?: number | undefined;
         padAngle?: number | undefined;
         spring?: boolean | Parameters<typeof springStore>[1];

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

@@ -5,7 +5,7 @@ declare const __propDef: {
         r?: number | undefined;
         offsetX?: number | ((value: number, context: any) => number) | undefined;
         offsetY?: number | ((value: number, context: any) => number) | undefined;
-        links?: boolean | {
+        links?: boolean | Partial<{
             [x: string]: any;
             data?: any;
             sankey?: boolean | undefined;
@@ -16,7 +16,7 @@ declare const __propDef: {
             y?: ((d: any) => any) | undefined;
             curve?: import("d3-shape").CurveFactory | undefined;
             tweened?: boolean | import("svelte/motion").TweenedOptions<unknown> | undefined;
-        } | undefined;
+        }> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/Rect.svelte

@@ -1,4 +1,5 @@
 <script>import { tick } from 'svelte';
+import { cls } from 'svelte-ux';
 import { motionStore, resolveOptions, } from '../stores/motionStore';
 export let x = 0;
 export let initialX = x;
@@ -28,6 +29,7 @@ $: tick().then(() => {
   y={$tweened_y}
   width={$tweened_width}
   height={$tweened_height}
+  class={cls($$props.fill === undefined && 'fill-surface-content')}
   {...$$restProps}
   on:click
   on:mouseover

package/dist/components/Rule.svelte

@@ -31,7 +31,7 @@ export let y = false;
       y1={$yRange[0] || 0}
       y2={$yRange[1] || 0}
       {...$$restProps}
-      class={cls('stroke-gray-400', $$props.class)}
+      class={cls('stroke-surface-content/50', $$props.class)}
     />
   {/if}
 
@@ -42,7 +42,7 @@ export let y = false;
       y1={y === true || y === 'bottom' ? yRangeMax : y === 'top' ? yRangeMin : $yScale(y)}
       y2={y === true || y === 'bottom' ? yRangeMax : y === 'top' ? yRangeMin : $yScale(y)}
       {...$$restProps}
-      class={cls('stroke-gray-400', $$props.class)}
+      class={cls('stroke-surface-content/50', $$props.class)}
     />
   {/if}
 </g>

package/dist/components/Spline.svelte

@@ -22,6 +22,15 @@ export let y = undefined; // TODO: Update Type
 export let tweened = undefined;
 /** Draw path over time.  Works best without `tweened` enabled */
 export let draw = undefined;
+/**
+ * Curve of spline drawn. Imported via d3-shape.
+ *
+ * @example
+ * import { curveNatural } from 'd3-shape';
+ * <Spline curve={curveNatrual} />
+ *
+ * @type {CurveFactory | CurveFactoryLineOnly | undefined}
+ */
 export let curve = undefined;
 export let defined = undefined;
 let d = '';
@@ -81,7 +90,7 @@ $: {
   <path
     d={$tweened_d}
     {...$$restProps}
-    class={cls('path-line fill-none', !$$props.stroke && 'stroke-black', $$props.class)}
+    class={cls('path-line fill-none', !$$props.stroke && 'stroke-surface-content', $$props.class)}
     in:drawTransition|global={typeof draw === 'object' ? draw : undefined}
     on:click
     on:mousemove

package/dist/components/Text.svelte

@@ -130,7 +130,7 @@ function isValidXOrY(xOrY) {
       {transform}
       text-anchor={textAnchor}
       {...$$restProps}
-      class={cls('fill-surface-content', $$props.class)}
+      class={cls($$props.fill === undefined && 'fill-surface-content', $$props.class)}
     >
       {#each wordsByLines as line, index}
         <tspan {x} dy={index === 0 ? startDy : lineHeight}>

package/dist/components/TileImage.svelte

@@ -65,13 +65,7 @@ $: if (!disableCache) {
 />
 <image xlink:href={href} x={(x + tx) * k} y={(y + ty) * k} width={k} height={k} />
 {#if debug}
-  <rect
-    x={(x + tx) * k}
-    y={(y + ty) * k}
-    width={k}
-    height={k}
-    class="stroke-red-500/50 fill-none"
-  />
+  <rect x={(x + tx) * k} y={(y + ty) * k} width={k} height={k} class="stroke-danger/50 fill-none" />
   <Text
     x={(x + tx) * k}
     y={(y + ty) * k}

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

@@ -1,11 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-import { type FormatType } from 'svelte-ux';
 declare const __propDef: {
     props: {
         [x: string]: any;
         label: any;
         value?: any;
-        format?: FormatType | undefined;
+        format?: any;
         valueAlign?: "center" | "left" | "right" | undefined;
         classes?: {
             label?: string | undefined;

package/dist/components/index.d.ts

@@ -13,6 +13,7 @@ export { default as CircleClipPath } from './CircleClipPath.svelte';
 export { default as ClipPath } from './ClipPath.svelte';
 export { default as ColorRamp } from './ColorRamp.svelte';
 export { default as Frame } from './Frame.svelte';
+export { default as GeoCircle } from './GeoCircle.svelte';
 export { default as GeoContext, geoContext } from './GeoContext.svelte';
 export { default as GeoPath } from './GeoPath.svelte';
 export { default as GeoPoint } from './GeoPoint.svelte';

package/dist/components/index.js

@@ -13,6 +13,7 @@ export { default as CircleClipPath } from './CircleClipPath.svelte';
 export { default as ClipPath } from './ClipPath.svelte';
 export { default as ColorRamp } from './ColorRamp.svelte';
 export { default as Frame } from './Frame.svelte';
+export { default as GeoCircle } from './GeoCircle.svelte';
 export { default as GeoContext, geoContext } from './GeoContext.svelte';
 export { default as GeoPath } from './GeoPath.svelte';
 export { default as GeoPoint } from './GeoPoint.svelte';

package/dist/docs/Code.svelte

@@ -1,16 +1,16 @@
 <script>import Prism from 'prismjs';
 import 'prism-svelte';
-import { CopyButton, cls, getComponentTheme } from 'svelte-ux';
+import { CopyButton, cls, getComponentClasses } from 'svelte-ux';
 export let source = null;
 export let language = 'svelte';
 export let highlightedSource = source
     ? Prism.highlight(source, Prism.languages[language] ?? Prism.languages.text, language)
     : '';
 export let classes = {};
-const theme = getComponentTheme('Code');
+const settingsClasses = getComponentClasses('Code');
 </script>
 
-<div class={cls('Code', 'rounded', theme.root, classes.root, $$props.class)}>
+<div class={cls('Code', 'rounded', settingsClasses.root, classes.root, $$props.class)}>
   {#if source}
     <div class="relative">
       <pre

package/dist/docs/Code.svelte.d.ts

@@ -5,7 +5,7 @@ declare const __propDef: {
         [x: string]: any;
         source?: string | null | undefined;
         language?: string | undefined;
-        highlightedSource?: any;
+        highlightedSource?: string | undefined;
         classes?: {
             root?: string | undefined;
             pre?: string | undefined;

package/dist/docs/GeoDebug.svelte

@@ -39,6 +39,6 @@ let showCenter = false;
 
 {#if showCenter}
   <div
-    class="absolute w-2 h-2 bg-red-500/80 rounded-full z-[1] left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+    class="absolute w-2 h-2 bg-danger/80 rounded-full z-[1] left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
   />
 {/if}

package/dist/docs/Preview.svelte.d.ts

@@ -6,7 +6,7 @@ declare const __propDef: {
         code?: string | undefined;
         data?: any | undefined;
         language?: string | undefined;
-        highlightedCode?: any;
+        highlightedCode?: string | undefined;
         showCode?: boolean | undefined;
     };
     events: {

package/dist/docs/TilesetField.svelte

@@ -1,4 +1,4 @@
-<script>import { Field, Switch } from 'svelte-ux';
+<script>import { SelectField, Switch } from 'svelte-ux';
 export let doubleScale = devicePixelRatio > 1;
 // TODO: Access via context, or possibly global state
 const ACCESS_TOKEN = 'pk.eyJ1IjoidGVjaG5pcTM1IiwiYSI6ImNsZTR5cDd0ZjAyNm8zdnFvczhzdnFpcXkifQ.-LAr8sl5BZ3y-H0pDyD1qA';
@@ -25,7 +25,7 @@ const arcgisVector = (tileset) => (x, y, z) => {
     return `https://basemaps.arcgis.com/arcgis/rest/services/${tileset}/VectorTileServer/tile/${z}/${y}/${x}.pbf`;
     // https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/tile/12/1572/1108.pbf
 };
-$: serviceOptions = {
+$: services = {
     'mapbox v1': {
         'streets-v11': mapboxv1('streets-v11'),
         'light-v10': mapboxv1('light-v10'),
@@ -66,28 +66,31 @@ $: serviceOptions = {
     // 	 'Community Map', url: arcgisVector('World_Basemap_v2'),
     // }
 };
-$: defaultServiceUrl = serviceOptions['mapbox v1']['streets-v11'];
+$: serviceOptions = Object.entries(services).flatMap(([group, service]) => {
+    return Object.entries(service).map(([label, value]) => {
+        return { label, value: `${group}:${label}`, group, serviceUrl: value };
+    });
+});
+$: defaultServiceUrl = services['mapbox v1']['streets-v11'];
 export let serviceUrl = defaultServiceUrl;
 $: getServiceUrl = (option) => {
     const [selectedService, selectedTileset] = selected.split(':');
-    return serviceOptions[selectedService][selectedTileset];
+    return services[selectedService][selectedTileset];
 };
 let selected = 'mapbox v1:streets-v11';
 $: serviceUrl = getServiceUrl(selected);
 </script>
 
-<Field label="Tileset" let:id>
-  <select bind:value={selected} class="w-full outline-none appearance-none text-sm" {id}>
-    {#each Object.entries(serviceOptions) as [group, options]}
-      <optgroup label={group}>
-        {#each Object.keys(options) as option}
-          <option value="{group}:{option}">{option}</option>
-        {/each}
-      </optgroup>
-    {/each}
-  </select>
-  <div slot="append">
+<SelectField
+  label="Tileset"
+  options={serviceOptions}
+  bind:value={selected}
+  clearable={false}
+  toggleIcon={null}
+  stepper
+>
+  <div slot="append" on:click|stopPropagation>
     <div class="text-[10px] text-surface-content/50 text-center">2x</div>
     <Switch bind:checked={doubleScale} size="md" />
   </div>
-</Field>
+</SelectField>

package/dist/docs/TilesetField.svelte.d.ts

@@ -5,6 +5,8 @@ declare const __propDef: {
         serviceUrl?: ((x: number, y: number, z: number) => string) | undefined;
     };
     events: {
+        click: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/dist/utils/geo.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Return the point on Earth's surface that is diametrically opposite to another point
+ * @see: https://en.wikipedia.org/wiki/Antipodes
+ */
+export declare function antipode([longitude, latitude]: [number, number]): [number, number];

package/dist/utils/geo.js

@@ -0,0 +1,7 @@
+/**
+ * Return the point on Earth's surface that is diametrically opposite to another point
+ * @see: https://en.wikipedia.org/wiki/Antipodes
+ */
+export function antipode([longitude, latitude]) {
+    return [longitude + 180, -latitude];
+}

package/dist/utils/index.d.ts

@@ -1,3 +1,4 @@
+export * from './geo';
 export * from './graph';
 export * from './hierarchy';
 export * from './math';

package/dist/utils/index.js

@@ -1,3 +1,4 @@
+export * from './geo';
 export * from './graph';
 export * from './hierarchy';
 export * from './math';

package/dist/utils/stack.js

@@ -16,7 +16,7 @@ export function createStackData(data, options) {
                 //console.log({ series })
                 return series.flatMap((s) => {
                     return {
-                        ...itemData[0],
+                        ...itemData[0], // TODO: More than one should use stacks or aggregate values?
                         keys: options.stackBy ? [...groupKeys, series.key] : groupKeys,
                         values: options.stackBy ? [s[0], s[1]] : [0, sum(itemData, (d) => d.value)],
                     };

package/dist/utils/ticks.d.ts

@@ -1,3 +1,3 @@
 export declare function getMajorTicks(start: Date, end: Date): import("d3-time").TimeInterval | null;
-export declare function formatMajorTick(date: Date, rangeStart: Date, rangeEnd: Date): any;
+export declare function formatMajorTick(date: Date, rangeStart: Date, rangeEnd: Date): string;
 export declare function getMinorTicks(start: Date, end: Date): import("d3-time").TimeInterval | null;

package/dist/utils/ticks.js

@@ -1,34 +1,33 @@
 import { timeYear, timeMonth, timeWeek, timeDay, timeHour, timeMinute, timeSecond, timeMillisecond, } from 'd3-time';
 import { format } from 'date-fns';
-import { formatDate, PeriodType } from 'svelte-ux/utils/date';
-import { getDuration } from 'svelte-ux/utils/duration';
+import { formatDate, PeriodType, getDuration } from 'svelte-ux';
 import { fail } from 'svelte-ux';
 // TODO: Use PeriodType along with Duration to format (and possibly select intervals)
 const majorTicks = [
     {
-        predicate: (duration) => duration == null,
-        interval: timeYear.every(1),
+        predicate: (duration) => duration == null, // Unknown
+        interval: timeYear.every(1), // Better than rendering a lot of items
         format: (date) => date.toString(),
     },
     {
         predicate: (duration) => duration.years > 1,
         interval: timeYear.every(1),
-        format: (date) => formatDate(date, PeriodType.CalendarYear, 'short'),
+        format: (date) => formatDate(date, PeriodType.CalendarYear, { variant: 'short' }),
     },
     {
         predicate: (duration) => duration.years,
         interval: timeMonth.every(1),
-        format: (date) => formatDate(date, PeriodType.Month, 'short'),
+        format: (date) => formatDate(date, PeriodType.Month, { variant: 'short' }),
     },
     {
         predicate: (duration) => duration.days > 30,
         interval: timeMonth.every(1),
-        format: (date) => formatDate(date, PeriodType.Month, 'short'),
+        format: (date) => formatDate(date, PeriodType.Month, { variant: 'short' }),
     },
     {
         predicate: (duration) => duration.days,
         interval: timeDay.every(1),
-        format: (date) => formatDate(date, PeriodType.Day, 'short'),
+        format: (date) => formatDate(date, PeriodType.Day, { variant: 'short' }),
     },
     {
         predicate: (duration) => duration.hours,
@@ -56,36 +55,36 @@ const majorTicks = [
         format: (date) => format(date, 'h:mm:ss'),
     },
     {
-        predicate: (duration) => true,
+        predicate: (duration) => true, // 0 or more milliseconds
         interval: timeMillisecond.every(100),
         format: (date) => format(date, 'h:mm:ss.SSS'),
     },
 ];
 const minorTicks = [
     {
-        predicate: (duration) => duration == null,
-        interval: timeYear.every(1),
+        predicate: (duration) => duration == null, // Unknown
+        interval: timeYear.every(1), // Better than rendering a lot of items
         format: (date) => date.toString(),
     },
     {
         predicate: (duration) => duration.years,
         interval: timeMonth.every(1),
-        format: (date) => formatDate(date, PeriodType.Month, 'short'),
+        format: (date) => formatDate(date, PeriodType.Month, { variant: 'short' }),
     },
     {
         predicate: (duration) => duration.days > 90,
         interval: timeMonth.every(1),
-        format: (date) => formatDate(date, PeriodType.Month, 'short'),
+        format: (date) => formatDate(date, PeriodType.Month, { variant: 'short' }),
     },
     {
         predicate: (duration) => duration.days > 30,
         interval: timeWeek.every(1),
-        format: (date) => formatDate(date, PeriodType.WeekSun, 'short'),
+        format: (date) => formatDate(date, PeriodType.WeekSun, { variant: 'short' }),
     },
     {
         predicate: (duration) => duration.days > 7,
         interval: timeDay.every(1),
-        format: (date) => formatDate(date, PeriodType.Day, 'short'),
+        format: (date) => formatDate(date, PeriodType.Day, { variant: 'short' }),
     },
     {
         predicate: (duration) => duration.days > 3,
@@ -123,7 +122,7 @@ const minorTicks = [
         format: (date) => format(date, 'h:mm:ss'),
     },
     {
-        predicate: (duration) => true,
+        predicate: (duration) => true, // 0 or more milliseconds
         interval: timeMillisecond.every(10),
         format: (date) => format(date, 'h:mm:ss.SSS'),
     },

package/package.json

@@ -4,24 +4,14 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.28.0-next.2",
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build",
-    "preview": "vite preview",
-    "package": "svelte-package",
-    "prepublishOnly": "svelte-package",
-    "check": "svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. .",
-    "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. .",
-    "prepare": "svelte-kit sync"
-  },
+  "version": "0.30.0",
   "devDependencies": {
+    "@changesets/cli": "^2.27.1",
+    "@mdi/js": "^7.4.47",
     "@rollup/plugin-dsv": "^3.0.4",
-    "@sveltejs/adapter-auto": "^2.1.1",
-    "@sveltejs/kit": "^1.27.6",
-    "@sveltejs/package": "^2.2.2",
+    "@sveltejs/adapter-auto": "^3.1.0",
+    "@sveltejs/kit": "^2.3.2",
+    "@sveltejs/package": "^2.2.5",
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
     "@tailwindcss/typography": "^0.5.10",
     "@types/d3-array": "^3.2.1",
@@ -31,43 +21,50 @@
     "@types/d3-hierarchy": "^3.1.6",
     "@types/d3-interpolate": "^3.0.4",
     "@types/d3-interpolate-path": "^2.0.3",
-    "@types/d3-quadtree": "^3.0.5",
+    "@types/d3-quadtree": "^3.0.6",
     "@types/d3-random": "^3.0.3",
     "@types/d3-sankey": "^0.12.4",
     "@types/d3-scale": "^4.0.8",
-    "@types/d3-scale-chromatic": "^3.0.2",
-    "@types/d3-shape": "^3.1.5",
-    "@types/lodash-es": "^4.17.11",
+    "@types/d3-scale-chromatic": "^3.0.3",
+    "@types/d3-shape": "^3.1.6",
+    "@types/d3-time": "^3.0.2",
+    "@types/lodash-es": "^4.17.12",
     "@types/marked": "^6.0.0",
+    "@types/prismjs": "^1.26.3",
     "@types/shapefile": "^0.6.4",
     "@types/topojson-client": "^3.1.4",
     "autoprefixer": "^10.4.16",
-    "daisyui": "^4.4.19",
+    "d3-color": "^3.1.0",
     "execa": "^8.0.1",
-    "marked": "^10.0.0",
+    "marked": "^11.1.1",
     "mdsvex": "^0.11.0",
-    "prettier": "^3.1.0",
-    "prettier-plugin-svelte": "^3.1.0",
+    "posthog-js": "^1.95.1",
+    "prettier": "^3.2.2",
+    "prettier-plugin-svelte": "^3.1.2",
+    "prism-svelte": "^0.5.0",
     "prism-themes": "^1.9.0",
+    "prismjs": "^1.29.0",
     "rehype-slug": "^6.0.0",
-    "svelte": "^4.2.7",
-    "svelte-check": "^3.6.0",
+    "shapefile": "^0.6.6",
+    "solar-calculator": "^0.3.0",
+    "svelte": "^4.2.8",
+    "svelte-check": "^3.6.3",
     "svelte-json-tree": "^2.2.0",
-    "svelte-preprocess": "^5.1.0",
-    "svelte2tsx": "^0.6.25",
-    "tailwindcss": "^3.3.5",
+    "svelte-preprocess": "^5.1.3",
+    "svelte2tsx": "^0.7.0",
+    "tailwindcss": "^3.4.1",
+    "topojson-client": "^3.1.0",
     "tslib": "^2.6.2",
-    "typescript": "^5.2.2",
+    "typescript": "^5.3.3",
     "unist-util-visit": "^5.0.0",
     "us-atlas": "^3.0.1",
-    "vite": "^4.5.0"
+    "vite": "^5.0.11"
   },
   "type": "module",
   "dependencies": {
-    "@changesets/cli": "^2.26.2",
-    "@mdi/js": "^7.3.67",
-    "@types/d3-time": "^3.0.2",
+    "@sveltejs/vite-plugin-svelte": "^3.0.1",
     "d3-array": "^3.2.4",
+    "d3-color": "^3.1.0",
     "d3-delaunay": "^6.0.4",
     "d3-dsv": "^3.0.1",
     "d3-geo": "^3.1.0",
@@ -82,12 +79,12 @@
     "d3-shape": "^3.2.0",
     "d3-tile": "^1.0.0",
     "d3-time": "^3.1.0",
-    "date-fns": "^2.30.0",
+    "date-fns": "^3.2.0",
     "layercake": "^8.0.2",
     "lodash-es": "^4.17.21",
-    "posthog-js": "^1.95.1",
+    "posthog-js": "^1.100.0",
     "shapefile": "^0.6.6",
-    "svelte-ux": "0.58.0-next.4",
+    "svelte-ux": "0.60.0",
     "topojson-client": "^3.1.0"
   },
   "peerDependencies": {
@@ -103,5 +100,15 @@
   "files": [
     "dist"
   ],
-  "svelte": "./dist/index.js"
-}
+  "svelte": "./dist/index.js",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "package": "svelte-package",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. .",
+    "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
+  }
+}

package/dist/utils/string.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="lodash" />
-declare function _getStringWidth(str: string, style?: CSSStyleDeclaration): number | null;
-export declare const getStringWidth: typeof _getStringWidth & import("lodash").MemoizedFunction;
-export {};