layerchart 2.0.0-next.60 → 2.0.0-next.62

package/dist/components/Axis.svelte

@@ -1,630 +0,0 @@
-<script lang="ts" module>
-  import type { Transition, TransitionParams, Without } from '../utils/types.js';
-
-  export type AxisPropsWithoutHTML<In extends Transition = Transition> = {
-    /**
-     * Location of axis
-     */
-    placement: 'top' | 'bottom' | 'left' | 'right' | 'angle' | 'radius';
-
-    /**
-     * The label for the axis.
-     *
-     * Can either be a string or a snippet to render custom content.
-     * The snippet receives spreadable props to apply to the label.
-     */
-    label?: string | Snippet<[{ props: ComponentProps<typeof Text> }]>;
-
-    /**
-     * Location of axis label
-     * @default 'middle'
-     */
-    labelPlacement?: 'start' | 'middle' | 'end';
-
-    /**
-     * Props applied to label Text
-     */
-    labelProps?: Partial<ComponentProps<typeof Text>>;
-
-    /**
-     * Draw a rule line. Use Rule component for greater rendering order control
-     * @default false
-     */
-    rule?: boolean | Partial<ComponentProps<typeof Rule>>;
-
-    /**
-     * Draw grid lines. Pass props (class, style, stroke, strokeWidth, opacity,
-     * dashArray) to forward onto the underlying grid line.
-     * @default false
-     */
-    grid?:
-      | boolean
-      | (Pick<SVGAttributes<SVGElement>, 'class' | 'style'> & {
-          stroke?: string;
-          strokeWidth?: number;
-          opacity?: number;
-          dashArray?: number | number[] | string;
-        });
-
-    /**
-     * Control the number of ticks
-     */
-    ticks?: TicksConfig;
-
-    /**
-     * Width or height of each tick in pixels (enabling responsive count)
-     * @default 80 (top|bottom|angle) or 50 (left|right|radius)
-     */
-    tickSpacing?: number | null;
-
-    /**
-     * Whether to render tick labels on multiple lines for additional context
-     *
-     * @default false
-     */
-    tickMultiline?: boolean;
-
-    /**
-     * Length of the tick line
-     * @default 4
-     */
-    tickLength?: number;
-
-    /**
-     * Whether to render tick marks.
-     *
-     * @default true
-     */
-    tickMarks?: boolean;
-
-    /**
-     * Format tick labels
-     */
-    format?: FormatType | FormatConfig;
-
-    /**
-     * Props to apply to each tick label
-     */
-    tickLabelProps?: Partial<ComponentProps<typeof Text>>;
-
-    /**
-     * A snippet to render your own custom tick label.
-     */
-    tickLabel?: Snippet<[{ props: ComponentProps<typeof Text>; index: number }]>;
-
-    /**
-     * Transition function for entering elements
-     * @default defaults to fade if the motion prop is set to tweened
-     */
-    transitionIn?: In;
-
-    /**
-     * Parameters for the transitionIn function
-     * @default { easing: cubicIn }
-     */
-    transitionInParams?: TransitionParams<In>;
-
-    /**
-     * Override scale for the axis
-     */
-    scale?: any;
-
-    /**
-     * Stroke color for axis rule, grid lines, and tick marks.
-     * Useful for server-side rendering where CSS variables are not available.
-     */
-    stroke?: string;
-
-    /**
-     * Fill color for tick labels and axis label.
-     * Useful for server-side rendering where CSS variables are not available.
-     */
-    fill?: string;
-
-    /**
-     * Classes for styling various parts of the axis
-     * @default {}
-     */
-    classes?: {
-      root?: string;
-      label?: string;
-      rule?: string;
-      tick?: string;
-      tickLabel?: string;
-    };
-
-    motion?: MotionProp;
-  };
-
-  export type AxisProps<In extends Transition = Transition> = AxisPropsWithoutHTML<In> &
-    Without<GroupProps, AxisPropsWithoutHTML<In>>;
-</script>
-
-<script lang="ts" generics="T extends Transition = Transition">
-  import { type ComponentProps, type Snippet } from 'svelte';
-  import type { SVGAttributes } from 'svelte/elements';
-
-  import { extent } from 'd3-array';
-  import { pointRadial } from 'd3-shape';
-  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';
-
-  import Group, { type GroupProps } from './Group.svelte';
-  import Line from './Line.svelte';
-  import Rule from './Rule.svelte';
-  import Text from './Text.svelte';
-  import { isScaleBand } from '../utils/scales.svelte.js';
-
-  import { getChartContext } from '../contexts/chart.js';
-  import { extractLayerProps } from '../utils/attributes.js';
-  import { type MotionProp } from '../utils/motion.svelte.js';
-  import { autoTickVals, autoTickFormat, type TicksConfig } from '../utils/ticks.js';
-
-  let {
-    placement,
-    label = '',
-    labelPlacement = 'middle',
-    labelProps,
-    rule = false,
-    grid = false,
-    ticks,
-    tickSpacing: tickSpacingProp,
-    tickMultiline = false,
-    tickLength = 4,
-    tickMarks = true,
-    format,
-    tickLabelProps,
-    stroke,
-    fill,
-    motion,
-    transitionIn,
-    transitionInParams,
-    scale: scaleProp,
-    classes = {},
-    class: className,
-    tickLabel,
-    ...restProps
-  }: AxisProps<T> = $props();
-
-  const ctx = getChartContext();
-
-  ctx.registerComponent({ name: 'Axis', kind: 'composite-mark' });
-
-  const orientation = $derived(
-    placement === 'angle'
-      ? 'angle'
-      : placement === 'radius'
-        ? 'radius'
-        : ['top', 'bottom'].includes(placement)
-          ? 'horizontal'
-          : 'vertical'
-  );
-
-  const scale = $derived(
-    scaleProp ?? (['horizontal', 'angle'].includes(orientation) ? ctx.xScale : ctx.yScale)
-  );
-
-  const interval = $derived(
-    ['horizontal', 'angle'].includes(orientation) ? ctx.xInterval : ctx.yInterval
-  );
-
-  const defaultTickSpacing = $derived(
-    ['top', 'bottom', 'angle'].includes(placement)
-      ? 80
-      : ['left', 'right', 'radius'].includes(placement)
-        ? 50
-        : undefined
-  );
-
-  // Disable tick thinning for categorical band scales (no interval), but keep spacing for date-based band scales
-  const tickSpacing = $derived(
-    tickSpacingProp !== undefined
-      ? tickSpacingProp
-      : isScaleBand(scale) && interval == null
-        ? null
-        : defaultTickSpacing
-  );
-
-  // Default format to 'percentRound' for stackExpand layout considering axis direction
-  const resolvedFormat = $derived.by(() => {
-    if (format !== undefined) return format;
-
-    if (ctx.series.stackLayout === 'stackExpand') {
-      const isValueAxis =
-        (ctx.valueAxis === 'x' && ['horizontal', 'angle'].includes(orientation)) ||
-        (ctx.valueAxis === 'y' && ['vertical', 'radius'].includes(orientation));
-      if (isValueAxis) {
-        return 'percentRound';
-      }
-    }
-
-    return undefined;
-  });
-
-  const xRangeMinMax = $derived(extent<number>(ctx.xRange)) as [number, number];
-  const yRangeMinMax = $derived(extent<number>(ctx.yRange)) as [number, number];
-
-  const ctxSize = $derived(
-    orientation === 'vertical'
-      ? ctx.height
-      : orientation === 'horizontal'
-        ? ctx.width
-        : orientation === 'radius'
-          ? ctx.height / 2
-          : orientation === 'angle'
-            ? ctx.width
-            : null
-  );
-
-  // For band scales with domain-mode transform, scale up effective size by the zoom factor
-  // so that more tick labels appear as bands get wider when zoomed in
-  const effectiveSize = $derived.by(() => {
-    if (!ctxSize) return ctxSize;
-    const ts = ctx.transformState;
-    if (ts?.mode === 'domain' && isScaleBand(scale) && ts.scale > 1) {
-      return ctxSize * ts.scale;
-    }
-    return ctxSize;
-  });
-
-  // Count used for tick thinning (null tickSpacing disables thinning)
-  const tickCount = $derived(
-    typeof ticks === 'number'
-      ? ticks
-      : tickSpacing && effectiveSize
-        ? Math.round(effectiveSize / tickSpacing)
-        : undefined
-  );
-
-  // Count used for formatting (always based on default spacing so time formatting works)
-  const formatCount = $derived(
-    typeof ticks === 'number'
-      ? ticks
-      : defaultTickSpacing && effectiveSize
-        ? Math.round(effectiveSize / defaultTickSpacing)
-        : undefined
-  );
-  const tickVals = $derived.by(() => {
-    let tickVals = autoTickVals(scale, ticks, tickCount);
-
-    if (interval != null) {
-      // Remove last tick when interval is provided (such as for bar charts with center aligned (offset) ticks)
-      tickVals.pop();
-    }
-
-    // Use format to filter ticks (helpful to keep ticks above a threshold for wide charts or short durations)
-    const formatType = typeof resolvedFormat === 'object' ? resolvedFormat?.type : resolvedFormat;
-
-    if (formatType === 'integer') {
-      tickVals = tickVals.filter(Number.isInteger);
-    } else if (formatType === 'year' || formatType === PeriodType.CalendarYear) {
-      tickVals = tickVals.filter((val) => +timeYear.floor(val) === +val);
-    } else if (
-      formatType === 'month' ||
-      formatType === PeriodType.Month ||
-      formatType === PeriodType.MonthYear
-    ) {
-      // tickVals = tickVals.filter((val) => +timeMonth.floor(val) === +val);
-      tickVals = tickVals.filter((val) => val.getDate() < 7); // first week of the month
-    } else if (formatType === 'day' || formatType === PeriodType.Day) {
-      tickVals = tickVals.filter((val) => +timeDay.floor(val) === +val);
-    } else if (formatType === 'hour' || formatType === PeriodType.Hour) {
-      tickVals = tickVals.filter((val) => +timeHour.floor(val) === +val);
-    } else if (formatType === 'minute' || formatType === PeriodType.Minute) {
-      tickVals = tickVals.filter((val) => +timeMinute.floor(val) === +val);
-    } else if (formatType === 'second' || formatType === PeriodType.Second) {
-      tickVals = tickVals.filter((val) => +timeSecond.floor(val) === +val);
-    } else if (formatType === 'millisecond' || formatType === PeriodType.Millisecond) {
-      tickVals = tickVals.filter((val) => +timeMillisecond.floor(val) === +val);
-    }
-
-    // Remove any duplicates (manually added)
-    return unique(tickVals);
-  });
-
-  const tickFormat = $derived(
-    autoTickFormat({
-      scale,
-      ticks,
-      count: formatCount,
-      formatType: resolvedFormat,
-      multiline: tickMultiline,
-      placement,
-    })
-  );
-
-  function getCoords(tick: any) {
-    switch (placement) {
-      case 'top':
-      case 'bottom':
-        return {
-          x:
-            scale(tick) +
-            (isScaleBand(scale)
-              ? scale.bandwidth() / 2
-              : ctx.xInterval
-                ? (scale(ctx.xInterval.offset(tick)) - scale(tick)) / 2 // offset 1/2 width of time interval
-                : 0),
-          y: placement === 'top' ? yRangeMinMax[0] : yRangeMinMax[1],
-        };
-
-      case 'left':
-      case 'right':
-        return {
-          x: placement === 'left' ? xRangeMinMax[0] : xRangeMinMax[1],
-          y:
-            scale(tick) +
-            (isScaleBand(scale)
-              ? scale.bandwidth() / 2
-              : ctx.yInterval
-                ? (scale(ctx.yInterval.offset(tick)) - scale(tick)) / 2 // offset 1/2 height of time interval
-                : 0),
-        };
-
-      case 'angle':
-        return {
-          x: scale(tick),
-          y: yRangeMinMax[1],
-        };
-
-      case 'radius':
-        return {
-          x: xRangeMinMax[0],
-          y: scale(tick) + (isScaleBand(scale) ? scale.bandwidth() / 2 : 0),
-        };
-    }
-  }
-
-  function getDefaultTickLabelProps(tick: any): ComponentProps<typeof Text> {
-    switch (placement) {
-      case 'top':
-        return {
-          textAnchor: 'middle',
-          verticalAnchor: 'end',
-          dy: -tickLength,
-        };
-
-      case 'bottom':
-        return {
-          textAnchor: 'middle',
-          verticalAnchor: 'start',
-          dy: tickLength,
-        };
-
-      case 'left':
-        return {
-          textAnchor: 'end',
-          verticalAnchor: 'middle',
-          dx: -tickLength,
-        };
-
-      case 'right':
-        return {
-          textAnchor: 'start',
-          verticalAnchor: 'middle',
-          dx: tickLength,
-        };
-
-      case 'angle':
-        const xValue = scale(tick); // angle in radians
-        return {
-          textAnchor:
-            xValue === 0 ||
-            Math.abs(xValue - Math.PI) < 0.01 || // ~180deg
-            Math.abs(xValue - Math.PI * 2) < 0.01 // ~360deg
-              ? 'middle'
-              : xValue > Math.PI
-                ? 'end'
-                : 'start',
-          verticalAnchor: 'middle',
-          dx: Math.sin(xValue) * tickLength,
-          dy: -Math.cos(xValue) * (tickLength + 4), // manually adjusted until Text supports custom styles
-        };
-
-      case 'radius':
-        return {
-          textAnchor: 'middle',
-          verticalAnchor: 'middle',
-          dx: 2,
-        };
-    }
-  }
-
-  const resolvedLabelX = $derived.by(() => {
-    if (placement === 'left' || (orientation === 'horizontal' && labelPlacement === 'start')) {
-      return -ctx.padding.left;
-    } else if (
-      placement === 'right' ||
-      (orientation === 'horizontal' && labelPlacement === 'end')
-    ) {
-      return ctx.width + ctx.padding.right;
-    }
-
-    return ctx.width / 2;
-  });
-
-  const resolvedLabelY = $derived.by(() => {
-    if (placement === 'top' || (orientation === 'vertical' && labelPlacement === 'start')) {
-      return -ctx.padding.top;
-    } else if (orientation === 'vertical' && labelPlacement === 'middle') {
-      return ctx.height / 2;
-    } else if (placement === 'bottom' || labelPlacement === 'end') {
-      return ctx.height + ctx.padding.bottom;
-    }
-    return '0';
-  });
-
-  const resolvedLabelTextAnchor = $derived.by(() => {
-    if (labelPlacement === 'middle') {
-      return 'middle';
-    } else if (
-      placement === 'right' ||
-      (orientation === 'horizontal' && labelPlacement === 'end')
-    ) {
-      return 'end';
-    }
-    return 'start';
-  });
-
-  const resolvedLabelVerticalAnchor = $derived.by(() => {
-    if (
-      placement === 'top' ||
-      (orientation === 'vertical' && labelPlacement === 'start') ||
-      (placement === 'left' && labelPlacement === 'middle')
-    ) {
-      return 'start';
-    }
-    return 'end';
-  });
-
-  const resolvedLabelProps = $derived({
-    value: typeof label === 'function' ? '' : label,
-    x: resolvedLabelX,
-    y: resolvedLabelY,
-    textAnchor: resolvedLabelTextAnchor,
-    verticalAnchor: resolvedLabelVerticalAnchor,
-    rotate: orientation === 'vertical' && labelPlacement === 'middle' ? -90 : 0,
-    // complement 10px text (until Text supports custom styles)
-    capHeight: '7px',
-    lineHeight: '11px',
-    fill,
-    stroke,
-    ...labelProps,
-    class: cls('lc-axis-label', classes.label, labelProps?.class),
-  }) satisfies ComponentProps<typeof Text>;
-</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: resolvedLabelProps })}
-  {:else if label}
-    <Text {...resolvedLabelProps} />
-  {/if}
-
-  {#each tickVals as tick, index (tick.valueOf())}
-    {@const tickCoords = getCoords(tick)}
-    {@const [radialTickCoordsX, radialTickCoordsY] = pointRadial(tickCoords.x, tickCoords.y)}
-    {@const [radialTickMarkCoordsX, radialTickMarkCoordsY] = pointRadial(
-      tickCoords.x,
-      tickCoords.y + tickLength
-    )}
-    {@const resolvedTickLabelProps = {
-      x: orientation === 'angle' ? radialTickCoordsX : tickCoords.x,
-      y: orientation === 'angle' ? radialTickCoordsY : tickCoords.y,
-      value: tickFormat(tick, index),
-      ...getDefaultTickLabelProps(tick),
-      motion,
-      // complement 10px text (until Text supports custom styles)
-      capHeight: '7px',
-      lineHeight: '11px',
-      fill,
-      stroke,
-      ...tickLabelProps,
-      class: cls('lc-axis-tick-label', classes.tickLabel, tickLabelProps?.class),
-    }}
-
-    <Group {transitionIn} {transitionInParams} class="lc-axis-tick-group">
-      {#if grid !== false}
-        <Rule
-          x={orientation === 'horizontal' || orientation === 'angle' ? tick : false}
-          y={orientation === 'vertical' || orientation === 'radius' ? tick : false}
-          {stroke}
-          {motion}
-          {...extractLayerProps(grid, 'lc-axis-grid', classes.rule ?? '')}
-        />
-      {/if}
-
-      {#if tickMarks}
-        {@const tickClasses = cls('lc-axis-tick', classes.tick)}
-        {#if orientation === 'horizontal'}
-          <Line
-            x1={tickCoords.x}
-            y1={tickCoords.y}
-            x2={tickCoords.x}
-            y2={tickCoords.y + (placement === 'top' ? -tickLength : tickLength)}
-            {stroke}
-            {motion}
-            class={tickClasses}
-          />
-        {:else if orientation === 'vertical'}
-          <Line
-            x1={tickCoords.x}
-            y1={tickCoords.y}
-            x2={tickCoords.x + (placement === 'left' ? -tickLength : tickLength)}
-            y2={tickCoords.y}
-            {stroke}
-            {motion}
-            class={tickClasses}
-          />
-        {:else if orientation === 'angle'}
-          <Line
-            x1={radialTickCoordsX}
-            y1={radialTickCoordsY}
-            x2={radialTickMarkCoordsX}
-            y2={radialTickMarkCoordsY}
-            {stroke}
-            {motion}
-            class={tickClasses}
-          />
-        {/if}
-      {/if}
-
-      {#if tickLabel}
-        {@render tickLabel({ props: resolvedTickLabelProps, index })}
-      {:else}
-        <Text {...resolvedTickLabelProps} />
-      {/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>