layerchart 2.0.0-next.60 → 2.0.0-next.61

package/dist/components/Axis/Axis.base.svelte

@@ -0,0 +1,195 @@
+<script lang="ts" module>
+  import type { Component } from 'svelte';
+  import type { Transition } from '../../utils/types.js';
+  import type { AxisProps } from './Axis.shared.svelte.js';
+
+  /**
+   * Per-layer primitive components a `<Axis.base>` consumer must inject.
+   * Each per-layer variant (`Axis.svg.svelte`, etc.) imports the matching
+   * primitive variants and forwards them here so the template stays in
+   * one place.
+   */
+  export type AxisBaseLayerComponents = {
+    Group: Component<any>;
+    Line: Component<any>;
+    Text: Component<any>;
+    Rule: Component<any>;
+  };
+
+  export type AxisBaseProps<In extends Transition = Transition> = AxisProps<In> &
+    AxisBaseLayerComponents;
+</script>
+
+<script lang="ts" generics="T extends Transition = Transition">
+  import { cls } from '@layerstack/tailwind';
+
+  import { extractLayerProps } from '../../utils/attributes.js';
+
+  import { AxisState } from './Axis.shared.svelte.js';
+
+  let {
+    Group,
+    Line,
+    Text,
+    Rule,
+    placement,
+    label = '',
+    labelPlacement = 'middle',
+    labelProps,
+    rule = false,
+    grid = false,
+    ticks,
+    tickSpacing,
+    tickMultiline = false,
+    tickLength = 4,
+    tickMarks = true,
+    format,
+    tickLabelProps,
+    stroke,
+    fill,
+    motion,
+    transitionIn,
+    transitionInParams,
+    scale,
+    classes = {},
+    class: className,
+    tickLabel,
+    ...restProps
+  }: AxisBaseProps<T> = $props();
+
+  const c = new AxisState(
+    () =>
+      ({
+        placement,
+        label,
+        labelPlacement,
+        labelProps,
+        rule,
+        grid,
+        ticks,
+        tickSpacing,
+        tickMultiline,
+        tickLength,
+        tickMarks,
+        format,
+        tickLabelProps,
+        stroke,
+        fill,
+        motion,
+        scale,
+        classes,
+      }) as AxisProps
+  );
+</script>
+
+<Group
+  {...restProps}
+  data-placement={placement}
+  class={cls('lc-axis', `placement-${placement}`, classes.root, className)}
+>
+  {#if rule !== false}
+    <Rule
+      x={placement === 'left' ? '$left' : placement === 'right' ? '$right' : placement === 'angle'}
+      y={placement === 'top' ? '$top' : placement === 'bottom' ? '$bottom' : placement === 'radius'}
+      {stroke}
+      {motion}
+      {...extractLayerProps(rule, 'lc-axis-rule', classes.rule ?? '')}
+    />
+  {/if}
+
+  {#if typeof label === 'function'}
+    {@render label({ props: c.resolvedLabelProps })}
+  {:else if label}
+    <Text {...c.resolvedLabelProps} />
+  {/if}
+
+  {#each c.tickItems as item, index (item.key)}
+    <Group {transitionIn} {transitionInParams} class="lc-axis-tick-group">
+      {#if grid !== false}
+        <Rule
+          x={c.orientation === 'horizontal' || c.orientation === 'angle' ? item.tick : false}
+          y={c.orientation === 'vertical' || c.orientation === 'radius' ? item.tick : false}
+          {stroke}
+          {motion}
+          {...extractLayerProps(grid, 'lc-axis-grid', classes.rule ?? '')}
+        />
+      {/if}
+
+      {#if tickMarks}
+        {@const tickClasses = cls('lc-axis-tick', classes.tick)}
+        {#if c.orientation === 'horizontal'}
+          <Line
+            x1={item.tickCoordsX}
+            y1={item.tickCoordsY}
+            x2={item.tickCoordsX}
+            y2={item.tickCoordsY + (placement === 'top' ? -tickLength : tickLength)}
+            {stroke}
+            {motion}
+            class={tickClasses}
+          />
+        {:else if c.orientation === 'vertical'}
+          <Line
+            x1={item.tickCoordsX}
+            y1={item.tickCoordsY}
+            x2={item.tickCoordsX + (placement === 'left' ? -tickLength : tickLength)}
+            y2={item.tickCoordsY}
+            {stroke}
+            {motion}
+            class={tickClasses}
+          />
+        {:else if c.orientation === 'angle'}
+          <Line
+            x1={item.radialTickCoordsX}
+            y1={item.radialTickCoordsY}
+            x2={item.radialTickMarkCoordsX}
+            y2={item.radialTickMarkCoordsY}
+            {stroke}
+            {motion}
+            class={tickClasses}
+          />
+        {/if}
+      {/if}
+
+      {#if tickLabel}
+        {@render tickLabel({ props: item.tickLabelProps, index })}
+      {:else}
+        <Text {...item.tickLabelProps} />
+      {/if}
+    </Group>
+  {/each}
+</Group>
+
+<style>
+  @layer components {
+    :global(:where(.lc-axis-rule)) {
+      --stroke-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 50%,
+        transparent
+      );
+    }
+
+    :global(:where(.lc-axis-tick)) {
+      --stroke-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 50%,
+        transparent
+      );
+    }
+
+    :global(:where(.lc-axis-grid)) {
+      --stroke-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 10%,
+        transparent
+      );
+    }
+
+    :global(:where(.lc-axis-label, .lc-axis-tick-label)) {
+      font-size: 10px;
+      stroke: var(--color-surface-100, light-dark(white, black));
+      stroke-width: 2px;
+      font-weight: 300;
+    }
+  }
+</style>

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

@@ -0,0 +1,40 @@
+import type { Component } from 'svelte';
+import type { Transition } from '../../utils/types.js';
+import type { AxisProps } from './Axis.shared.svelte.js';
+/**
+ * Per-layer primitive components a `<Axis.base>` consumer must inject.
+ * Each per-layer variant (`Axis.svg.svelte`, etc.) imports the matching
+ * primitive variants and forwards them here so the template stays in
+ * one place.
+ */
+export type AxisBaseLayerComponents = {
+    Group: Component<any>;
+    Line: Component<any>;
+    Text: Component<any>;
+    Rule: Component<any>;
+};
+export type AxisBaseProps<In extends Transition = Transition> = AxisProps<In> & AxisBaseLayerComponents;
+declare function $$render<T extends Transition = Transition>(): {
+    props: AxisBaseProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Transition = Transition> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Transition = Transition>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Transition = Transition>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Axis: $$IsomorphicComponent;
+type Axis<T extends Transition = Transition> = InstanceType<typeof Axis<T>>;
+export default Axis;

package/dist/components/Axis/Axis.canvas.svelte

@@ -0,0 +1,18 @@
+<script lang="ts" module>
+  export type { AxisProps, AxisPropsWithoutHTML } from './Axis.shared.svelte.js';
+</script>
+
+<script lang="ts" generics="T extends Transition = Transition">
+  import AxisBase from './Axis.base.svelte';
+  import Group from '../Group/Group.canvas.svelte';
+  import Line from '../Line/Line.canvas.svelte';
+  import Text from '../Text/Text.canvas.svelte';
+  import Rule from '../Rule/Rule.canvas.svelte';
+
+  import type { Transition } from '../../utils/types.js';
+  import type { AxisProps } from './Axis.shared.svelte.js';
+
+  let props: AxisProps<T> = $props();
+</script>
+
+<AxisBase {Group} {Line} {Text} {Rule} {...props} />

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

@@ -0,0 +1,27 @@
+export type { AxisProps, AxisPropsWithoutHTML } from './Axis.shared.svelte.js';
+import type { Transition } from '../../utils/types.js';
+import type { AxisProps } from './Axis.shared.svelte.js';
+declare function $$render<T extends Transition = Transition>(): {
+    props: AxisProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Transition = Transition> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Transition = Transition>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Transition = Transition>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Axis: $$IsomorphicComponent;
+type Axis<T extends Transition = Transition> = InstanceType<typeof Axis<T>>;
+export default Axis;

package/dist/components/Axis/Axis.html.svelte

@@ -0,0 +1,18 @@
+<script lang="ts" module>
+  export type { AxisProps, AxisPropsWithoutHTML } from './Axis.shared.svelte.js';
+</script>
+
+<script lang="ts" generics="T extends Transition = Transition">
+  import AxisBase from './Axis.base.svelte';
+  import Group from '../Group/Group.html.svelte';
+  import Line from '../Line/Line.html.svelte';
+  import Text from '../Text/Text.html.svelte';
+  import Rule from '../Rule/Rule.html.svelte';
+
+  import type { Transition } from '../../utils/types.js';
+  import type { AxisProps } from './Axis.shared.svelte.js';
+
+  let props: AxisProps<T> = $props();
+</script>
+
+<AxisBase {Group} {Line} {Text} {Rule} {...props} />

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

@@ -0,0 +1,27 @@
+export type { AxisProps, AxisPropsWithoutHTML } from './Axis.shared.svelte.js';
+import type { Transition } from '../../utils/types.js';
+import type { AxisProps } from './Axis.shared.svelte.js';
+declare function $$render<T extends Transition = Transition>(): {
+    props: AxisProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Transition = Transition> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Transition = Transition>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Transition = Transition>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Axis: $$IsomorphicComponent;
+type Axis<T extends Transition = Transition> = InstanceType<typeof Axis<T>>;
+export default Axis;

package/dist/components/{Axis.svelte.d.ts → Axis/Axis.shared.svelte.d.ts}

@@ -1,4 +1,13 @@
-import type { Transition, TransitionParams, Without } from '../utils/types.js';
+import type { ComponentProps, Snippet } from 'svelte';
+import type { SVGAttributes } from 'svelte/elements';
+import { type FormatType, type FormatConfig } from '@layerstack/utils';
+import type { Transition, TransitionParams, Without } from '../../utils/types.js';
+import type { GroupProps } from '../Group/Group.shared.svelte.js';
+import type { TextProps } from '../Text/Text.shared.svelte.js';
+import type Rule from '../Rule/Rule.svelte';
+import type { ChartState } from '../../states/chart.svelte.js';
+import { type MotionProp } from '../../utils/motion.svelte.js';
+import { type TicksConfig } from '../../utils/ticks.js';
 export type AxisPropsWithoutHTML<In extends Transition = Transition> = {
     /**
      * Location of axis
@@ -11,7 +20,7 @@ export type AxisPropsWithoutHTML<In extends Transition = Transition> = {
      * The snippet receives spreadable props to apply to the label.
      */
     label?: string | Snippet<[{
-        props: ComponentProps<typeof Text>;
+        props: TextProps;
     }]>;
     /**
      * Location of axis label
@@ -21,7 +30,7 @@ export type AxisPropsWithoutHTML<In extends Transition = Transition> = {
     /**
      * Props applied to label Text
      */
-    labelProps?: Partial<ComponentProps<typeof Text>>;
+    labelProps?: Partial<TextProps>;
     /**
      * Draw a rule line. Use Rule component for greater rendering order control
      * @default false
@@ -71,12 +80,12 @@ export type AxisPropsWithoutHTML<In extends Transition = Transition> = {
     /**
      * Props to apply to each tick label
      */
-    tickLabelProps?: Partial<ComponentProps<typeof Text>>;
+    tickLabelProps?: Partial<TextProps>;
     /**
      * A snippet to render your own custom tick label.
      */
     tickLabel?: Snippet<[{
-        props: ComponentProps<typeof Text>;
+        props: TextProps;
         index: number;
     }]>;
     /**
@@ -117,35 +126,47 @@ export type AxisPropsWithoutHTML<In extends Transition = Transition> = {
     motion?: MotionProp;
 };
 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, type FormatConfig } from '@layerstack/utils';
-import { type GroupProps } from './Group.svelte';
-import Rule from './Rule.svelte';
-import Text from './Text.svelte';
-import { type MotionProp } from '../utils/motion.svelte.js';
-import { type TicksConfig } from '../utils/ticks.js';
-declare function $$render<T extends Transition = Transition>(): {
-    props: AxisProps<T>;
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
+export type AxisTickItem = {
+    key: number;
+    tick: any;
+    tickCoordsX: number;
+    tickCoordsY: number;
+    radialTickCoordsX: number;
+    radialTickCoordsY: number;
+    radialTickMarkCoordsX: number;
+    radialTickMarkCoordsY: number;
+    tickLabelProps: TextProps;
 };
-declare class __sveltets_Render<T extends Transition = Transition> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <T extends Transition = Transition>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends Transition = Transition>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+/**
+ * Reactive state shared by every per-layer Axis variant.
+ */
+export declare class AxisState {
+    #private;
+    ctx: ChartState;
+    constructor(getProps: () => AxisProps);
+    orientation: string;
+    scale: any;
+    interval: import("d3-time").TimeInterval | null;
+    defaultTickSpacing: number | undefined;
+    tickSpacing: number | null | undefined;
+    resolvedFormat: FormatType | FormatConfig | undefined;
+    xRangeMinMax: [number, number];
+    yRangeMinMax: [number, number];
+    ctxSize: number | null;
+    effectiveSize: number | null;
+    tickCount: number | undefined;
+    formatCount: number | undefined;
+    tickVals: any[];
+    tickFormat: (date: Date, i: number) => string;
+    getCoords(tick: any): {
+        x: number;
+        y: number;
+    };
+    getDefaultTickLabelProps(tick: any): Partial<TextProps>;
+    resolvedLabelX: number;
+    resolvedLabelY: string | number;
+    resolvedLabelTextAnchor: string;
+    resolvedLabelVerticalAnchor: string;
+    resolvedLabelProps: TextProps;
+    tickItems: AxisTickItem[];
 }
-declare const Axis: $$IsomorphicComponent;
-type Axis<T extends Transition = Transition> = InstanceType<typeof Axis<T>>;
-export default Axis;