matterviz 0.3.6 → 0.3.7

package/dist/plot/Histogram.svelte.d.ts

@@ -0,0 +1,50 @@
+import type { AxisLoadError, BarStyle, DataLoaderFn, HistogramHandlerProps, PanConfig, RefLine, RefLineEvent } from './';
+import type { BasePlotProps, DataSeries, LegendConfig, PlotConfig } from './types';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & BasePlotProps & PlotConfig & {
+    series: DataSeries[];
+    bins?: number;
+    show_legend?: boolean;
+    legend?: LegendConfig | null;
+    bar?: BarStyle;
+    selected_property?: string;
+    mode?: `single` | `overlay`;
+    tooltip?: Snippet<[HistogramHandlerProps]>;
+    header_controls?: Snippet<[
+        {
+            height: number;
+            width: number;
+            fullscreen: boolean;
+        }
+    ]>;
+    controls_extra?: Snippet<[Required<PlotConfig>]>;
+    change?: (data: {
+        value: number;
+        count: number;
+        property: string;
+    } | null) => void;
+    on_bar_click?: (data: {
+        value: number;
+        count: number;
+        property: string;
+        event: MouseEvent | KeyboardEvent;
+    }) => void;
+    on_bar_hover?: (data: {
+        value: number;
+        count: number;
+        property: string;
+        event: MouseEvent;
+    } | null) => void;
+    ref_lines?: RefLine[];
+    on_ref_line_click?: (event: RefLineEvent) => void;
+    on_ref_line_hover?: (event: RefLineEvent | null) => void;
+    on_series_toggle?: (series_idx: number) => void;
+    data_loader?: DataLoaderFn;
+    on_axis_change?: (axis: `x` | `x2` | `y` | `y2`, key: string, new_series: DataSeries[]) => void;
+    on_error?: (error: AxisLoadError) => void;
+    pan?: PanConfig;
+};
+declare const Histogram: import("svelte").Component<$$ComponentProps, {}, "mode" | "show_controls" | "fullscreen" | "series" | "bins" | "show_legend" | "selected_property" | "hovered" | "ref_lines" | "controls_open">;
+type Histogram = ReturnType<typeof Histogram>;
+export default Histogram;

package/dist/plot/HistogramControls.svelte

@@ -0,0 +1,212 @@
+<script lang="ts">
+  // NOTE: Axis config objects must be reassigned (not mutated) to trigger $bindable reactivity.
+  import { SettingsSection } from '../layout'
+  import type { Vec2 } from '../math'
+  import type { BarStyle, DataSeries, PlotConfig } from './'
+  import { PlotControls } from './'
+  import type { PlotControlsProps } from './types'
+  import { DEFAULTS } from '../settings'
+  import type { Snippet } from 'svelte'
+
+  let {
+    series = [],
+    bins = $bindable(DEFAULTS.histogram.bin_count),
+    mode = $bindable(DEFAULTS.histogram.mode),
+    bar = $bindable({}),
+    show_legend = $bindable(DEFAULTS.histogram.show_legend),
+    selected_property = $bindable(``),
+    x_axis = $bindable({}),
+    x2_axis = $bindable({}),
+    y_axis = $bindable({}),
+    y2_axis = $bindable({}),
+    display = $bindable({}),
+    show_controls = $bindable(false),
+    controls_open = $bindable(false),
+    auto_x2_range = undefined,
+    auto_y2_range = undefined,
+    has_x2_points = false,
+    has_y2_points = false,
+    children,
+    ...rest
+  }: Omit<PlotControlsProps, `children` | `post_children`> & {
+    // Series data for multi-series controls
+    series?: readonly DataSeries[]
+    // Histogram-specific controls
+    bins?: number
+    mode?: `single` | `overlay`
+    bar?: BarStyle
+    show_legend?: boolean
+    selected_property?: string
+    show_controls?: boolean
+    controls_open?: boolean
+    auto_x2_range?: Vec2
+    auto_y2_range?: Vec2
+    has_x2_points?: boolean
+    has_y2_points?: boolean
+    children?: Snippet<[Required<PlotConfig>]>
+  } = $props()
+
+  bar = { ...DEFAULTS.histogram.bar, ...bar } // Initialize bar styles with defaults (runs once)
+
+  let has_multiple_series = $derived(series.filter(Boolean).length > 1)
+  let visible_series = $derived(series.filter((srs) => srs && (srs.visible ?? true)))
+  let series_options = $derived(visible_series.map((srs) => srs.label || `Series`))
+</script>
+
+<PlotControls
+  bind:show_controls
+  bind:controls_open
+  bind:display
+  bind:x_axis
+  bind:x2_axis
+  bind:y_axis
+  bind:y2_axis
+  {auto_x2_range}
+  {auto_y2_range}
+  {...rest}
+>
+  {@render children?.({ x_axis, x2_axis, y_axis, y2_axis, display })}
+  <SettingsSection
+    title="Histogram"
+    current_values={{ bins, mode, show_legend }}
+    on_reset={() => {
+      ;({ bin_count: bins, mode, show_legend } = DEFAULTS.histogram)
+    }}
+  >
+    <div class="pane-row">
+      <label>Bins:
+        <input
+          type="range"
+          min="5"
+          max="100"
+          step="5"
+          bind:value={bins}
+        />
+      </label>
+      <input type="number" min="5" max="100" step="5" bind:value={bins} />
+    </div>
+    {#if has_multiple_series}
+      <div class="pane-row">
+        <label>Mode:
+          <select bind:value={mode}>
+            <option value="single">Single</option>
+            <option value="overlay">Overlay</option>
+          </select>
+        </label>
+      </div>
+      {#if mode === `single`}
+        <div class="pane-row">
+          <label>Property:
+            <select bind:value={selected_property}>
+              <option value="">All</option>
+              {#each series_options as option (option)}
+                <option value={option}>{option}</option>
+              {/each}
+            </select>
+          </label>
+        </div>
+      {/if}
+    {/if}
+    <label>
+      <input type="checkbox" bind:checked={show_legend} />
+      Show legend
+    </label>
+  </SettingsSection>
+
+  <SettingsSection
+    title="Bar Style"
+    current_values={bar}
+    on_reset={() => {
+      bar = { ...DEFAULTS.histogram.bar }
+    }}
+    class="pane-grid"
+  >
+    {#if bar}
+      {#if visible_series.length === 1}
+        <label>Fill: <input type="color" bind:value={bar.color} /></label>
+      {/if}
+      <label>Opacity:
+        <input type="range" min="0" max="1" step="0.05" bind:value={bar.opacity} />
+        <input type="number" min="0" max="1" step="0.05" bind:value={bar.opacity} />
+      </label>
+      <label>Stroke Width:
+        <input type="range" min="0" max="5" step="0.1" bind:value={bar.stroke_width} />
+        <input type="number" min="0" max="5" step="0.1" bind:value={bar.stroke_width} />
+      </label>
+      <label>Stroke Color:
+        <input type="color" bind:value={bar.stroke_color} />
+        <input
+          type="range"
+          min="0"
+          max="1"
+          step="0.05"
+          bind:value={bar.stroke_opacity}
+          title="Opacity"
+        />
+        <input
+          type="number"
+          min="0"
+          max="1"
+          step="0.05"
+          bind:value={bar.stroke_opacity}
+        />
+      </label>
+    {/if}
+  </SettingsSection>
+
+  <SettingsSection
+    title="Scale Type"
+    data-testid="scale-type-section"
+    current_values={{
+      x_scale_type: x_axis.scale_type,
+      ...(has_x2_points ? { x2_scale_type: x2_axis.scale_type } : {}),
+      y_scale_type: y_axis.scale_type,
+      ...(has_y2_points ? { y2_scale_type: y2_axis.scale_type } : {}),
+    }}
+    on_reset={() => {
+      x_axis = {
+        ...x_axis,
+        scale_type: DEFAULTS.plot.x_scale_type as `linear` | `log`,
+      }
+      y_axis = {
+        ...y_axis,
+        scale_type: DEFAULTS.plot.y_scale_type as `linear` | `log`,
+      }
+      if (has_x2_points) {
+        x2_axis = {
+          ...x2_axis,
+          scale_type: DEFAULTS.plot.x_scale_type as `linear` | `log`,
+        }
+      }
+      if (has_y2_points) {
+        y2_axis = {
+          ...y2_axis,
+          scale_type: DEFAULTS.plot.y_scale_type as `linear` | `log`,
+        }
+      }
+    }}
+    class="pane-grid"
+    style="grid-template-columns: 1fr 1fr"
+  >
+    <label>X: <select bind:value={x_axis.scale_type}>
+        <option value="linear">Linear</option>
+        <option value="log">Log</option>
+      </select></label>
+    {#if has_x2_points}
+      <label>X2: <select bind:value={x2_axis.scale_type}>
+          <option value="linear">Linear</option>
+          <option value="log">Log</option>
+        </select></label>
+    {/if}
+    <label>Y: <select bind:value={y_axis.scale_type}>
+        <option value="linear">Linear</option>
+        <option value="log">Log</option>
+      </select></label>
+    {#if has_y2_points}
+      <label>Y2: <select bind:value={y2_axis.scale_type}>
+          <option value="linear">Linear</option>
+          <option value="log">Log</option>
+        </select></label>
+    {/if}
+  </SettingsSection>
+</PlotControls>

package/dist/plot/HistogramControls.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Vec2 } from '../math';
+import type { BarStyle, DataSeries, PlotConfig } from './';
+import type { PlotControlsProps } from './types';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = Omit<PlotControlsProps, `children` | `post_children`> & {
+    series?: readonly DataSeries[];
+    bins?: number;
+    mode?: `single` | `overlay`;
+    bar?: BarStyle;
+    show_legend?: boolean;
+    selected_property?: string;
+    show_controls?: boolean;
+    controls_open?: boolean;
+    auto_x2_range?: Vec2;
+    auto_y2_range?: Vec2;
+    has_x2_points?: boolean;
+    has_y2_points?: boolean;
+    children?: Snippet<[Required<PlotConfig>]>;
+};
+declare const HistogramControls: import("svelte").Component<$$ComponentProps, {}, "display" | "mode" | "show_controls" | "x_axis" | "y_axis" | "bar" | "bins" | "show_legend" | "selected_property" | "controls_open" | "x2_axis" | "y2_axis">;
+type HistogramControls = ReturnType<typeof HistogramControls>;
+export default HistogramControls;

package/dist/plot/InteractiveAxisLabel.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+  import Spinner from '../feedback/Spinner.svelte'
+  import { sanitize_html } from '../sanitize'
+  import PortalSelect from './PortalSelect.svelte'
+  import type { AxisOption } from './types'
+
+  let {
+    label = ``,
+    options = undefined,
+    selected_key = $bindable(),
+    loading = $bindable(false),
+    axis_type = `x`,
+    color = $bindable(),
+    on_select,
+    ...rest
+  }: {
+    label?: string
+    options?: AxisOption[]
+    selected_key?: string
+    loading?: boolean
+    axis_type?: `x` | `x2` | `y` | `y2`
+    color?: string | null
+    on_select?: (key: string) => void
+    [key: string]: unknown
+  } = $props()
+
+  let is_interactive = $derived(Boolean(options?.length))
+
+  const stop = (evt: Event) => evt.stopPropagation()
+  // Only stop propagation for keys the dropdown handles, allow Tab/Escape for navigation
+  const stop_key = (evt: KeyboardEvent) => {
+    if (![`Tab`, `Escape`].includes(evt.key)) evt.stopPropagation()
+  }
+</script>
+
+<div
+  class:interactive={is_interactive}
+  class:loading
+  style:color
+  onmousedown={stop}
+  onmouseup={stop}
+  onclick={stop}
+  onkeydown={stop_key}
+  role="group"
+  {...rest}
+  class="interactive-axis-label {axis_type} {rest.class ?? ``}"
+>
+  {#if is_interactive && options}
+    <PortalSelect
+      {options}
+      bind:selected_key
+      {on_select}
+      disabled={loading}
+      class="axis-trigger"
+    />
+    {#if loading}
+      <Spinner
+        style="--spinner-size: 0.9em; --spinner-border-width: 2px; --spinner-margin: 0 0 0 0.3em"
+      />
+    {/if}
+  {:else}
+    <span class="static-label">{@html sanitize_html(label)}</span>
+  {/if}
+</div>
+
+<style>
+  .interactive-axis-label {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+  .static-label {
+    display: inline-flex;
+    align-items: baseline;
+  }
+  .loading :global(.axis-trigger) {
+    opacity: 0.7;
+    pointer-events: none;
+  }
+  .interactive-axis-label :global(:is(sub, sup)) {
+    font-size: 0.75em;
+    line-height: 0;
+    /* vertical-align is ignored in the flex label wrapper. */
+    position: relative;
+    vertical-align: baseline;
+  }
+  .interactive-axis-label :global(sub) {
+    top: 0.35em;
+  }
+  .interactive-axis-label :global(sup) {
+    top: -0.5em;
+  }
+</style>

package/dist/plot/InteractiveAxisLabel.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { AxisOption } from './types';
+type $$ComponentProps = {
+    label?: string;
+    options?: AxisOption[];
+    selected_key?: string;
+    loading?: boolean;
+    axis_type?: `x` | `x2` | `y` | `y2`;
+    color?: string | null;
+    on_select?: (key: string) => void;
+    [key: string]: unknown;
+};
+declare const InteractiveAxisLabel: import("svelte").Component<$$ComponentProps, {}, "color" | "selected_key" | "loading">;
+type InteractiveAxisLabel = ReturnType<typeof InteractiveAxisLabel>;
+export default InteractiveAxisLabel;

package/dist/plot/Line.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+  import { DEFAULTS } from '../settings'
+  import { extent, min } from 'd3-array'
+  import { interpolatePath } from 'd3-interpolate-path'
+  import { curveMonotoneX, line } from 'd3-shape'
+  import { untrack } from 'svelte'
+  import { linear } from 'svelte/easing'
+  import type { SVGAttributes } from 'svelte/elements'
+  import { Tween, type TweenOptions } from 'svelte/motion'
+
+  let {
+    points,
+    origin = [0, 0],
+    line_color = `rgba(255, 255, 255, 0.5)`,
+    line_width = 2,
+    area_color = `rgba(255, 255, 255, 0.1)`,
+    area_stroke = null,
+    line_tween = {},
+    line_dash = DEFAULTS.scatter.line.dash,
+    ...rest
+  }: Omit<SVGAttributes<SVGPathElement>, `origin` | `points`> & {
+    points: readonly [number, number][]
+    origin: [number, number]
+    line_color?: string
+    line_width?: number
+    area_color?: string
+    area_stroke?: string | null
+    line_tween?: TweenOptions<string>
+    line_dash?: string
+  } = $props()
+
+  const lineGenerator = line()
+    .x((point) => point[0])
+    .y((point) => point[1])
+    .curve(curveMonotoneX)
+
+  let [x_min, x_max] = $derived(extent(points.map((point) => point[0])))
+  let line_path = $derived(lineGenerator(points) ?? ``)
+  let ymin = $derived(origin[1] ?? min(points.map((point) => point[1])))
+  // Guard against NaN/Infinity in area_path coords (can happen during scale transitions)
+  let area_path = $derived(
+    line_path && isFinite(x_min ?? NaN) && isFinite(x_max ?? NaN) &&
+      isFinite(ymin ?? NaN)
+      ? `${line_path}L${x_max},${ymin}L${x_min},${ymin}Z`
+      : ``,
+  )
+
+  const default_tween = {
+    duration: 300,
+    easing: linear,
+    interpolate: interpolatePath,
+  }
+  // Tween objects are stateful - create once, update target via effect
+  // untrack() explicitly captures initial tween config (intentional - config set once at mount)
+  const tweened_line = new Tween(
+    ``,
+    untrack(() => ({ ...default_tween, ...line_tween })),
+  )
+  const tweened_area = new Tween(
+    ``,
+    untrack(() => ({ ...default_tween, ...line_tween })),
+  )
+
+  $effect.pre(() => {
+    tweened_line.target = line_path
+    tweened_area.target = area_path
+  })
+</script>
+
+<path
+  d={tweened_line.current}
+  stroke={line_color}
+  stroke-width={line_width}
+  stroke-dasharray={line_dash && line_dash !== `solid` ? line_dash : null}
+  fill="none"
+  {...rest}
+/>
+<path d={tweened_area.current} fill={area_color} stroke={area_stroke} {...rest} />
+
+<style>
+  path {
+    transition: var(--line-transition, all 0.2s);
+  }
+</style>

package/dist/plot/Line.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { SVGAttributes } from 'svelte/elements';
+import { type TweenOptions } from 'svelte/motion';
+type $$ComponentProps = Omit<SVGAttributes<SVGPathElement>, `origin` | `points`> & {
+    points: readonly [number, number][];
+    origin: [number, number];
+    line_color?: string;
+    line_width?: number;
+    area_color?: string;
+    area_stroke?: string | null;
+    line_tween?: TweenOptions<string>;
+    line_dash?: string;
+};
+declare const Line: import("svelte").Component<$$ComponentProps, {}, "">;
+type Line = ReturnType<typeof Line>;
+export default Line;

package/dist/plot/PlotAxis.svelte

@@ -0,0 +1,169 @@
+<script lang="ts">
+  import { format_value } from '../labels'
+  import AxisLabel from './AxisLabel.svelte'
+  import type { Sides } from './layout'
+  import type { AxisConfig } from './types'
+  import { DEFAULT_GRID_STYLE } from './types'
+
+  type Side = `x` | `x2` | `y` | `y2`
+
+  // Reusable single-axis renderer: baseline, per-tick (grid + tick mark + label), and AxisLabel.
+  // One <g class="{side}-axis"> with per-tick <g class="tick">; mirror the structure across all
+  // four sides so consumers (ScatterPlot/BarPlot/Histogram/BinnedScatterPlot) share one template.
+  let {
+    side,
+    ticks,
+    place,
+    axis = {},
+    pad,
+    width,
+    height,
+    show_grid = false,
+    show_baseline = true,
+    tick_label,
+    domain,
+    unit_on_first_tick = false,
+    label_x,
+    label_y,
+    axis_loading = false,
+    on_axis_change,
+  }: {
+    side: Side
+    ticks: number[]
+    place: (value: number) => number // data value -> pixel for this axis
+    axis?: AxisConfig
+    pad: Required<Sides>
+    width: number
+    height: number
+    show_grid?: boolean
+    show_baseline?: boolean // axis spine line (ScatterPlot omits it)
+    tick_label?: (tick: number) => string | null | undefined // custom/categorical label
+    domain?: [number, number] // when set, cull off-plot ticks and hide out-of-domain labels
+    unit_on_first_tick?: boolean // append axis.unit after the first tick label (ScatterPlot)
+    label_x?: number
+    label_y?: number
+    axis_loading?: boolean
+    on_axis_change?: (key: string) => void
+  } = $props()
+
+  const is_x = $derived(side === `x` || side === `x2`)
+  const inside = $derived(axis.tick?.label?.inside ?? false)
+  const rotation = $derived(axis.tick?.label?.rotation ?? 0)
+  const shift_x = $derived(axis.tick?.label?.shift?.x ?? 0)
+  const shift_y = $derived(axis.tick?.label?.shift?.y ?? 0)
+  const stroke = $derived(axis.color || `var(--border-color, gray)`)
+  const text_fill = $derived(axis.color || `var(--text-color)`)
+  const plot_w = $derived(width - pad.l - pad.r)
+  const plot_h = $derived(height - pad.b - pad.t)
+  const axis_y = $derived(side === `x` ? height - pad.b : pad.t) // baseline y for x/x2
+  const axis_x = $derived(side === `y` ? pad.l : width - pad.r) // baseline x for y/y2
+
+  const show_label = $derived(
+    Boolean(axis.label || axis.options?.length) && label_x != null && label_y != null,
+  )
+
+  // Tick-invariant label geometry (depends only on side/inside/rotation/shift)
+  const text_x = $derived(
+    is_x ? shift_x : (side === `y` ? (inside ? 8 : -8) : (inside ? -8 : 8)) + shift_x,
+  )
+  const text_y = $derived(
+    is_x ? (side === `x` ? (inside ? -8 : 8) : (inside ? 8 : -8)) + shift_y : shift_y,
+  )
+  const text_anchor = $derived(
+    is_x
+      ? (rotation === 0
+        ? `middle`
+        : side === `x`
+        ? (inside ? `end` : `start`)
+        : (inside ? `start` : `end`)) // x2 rotates opposite to x
+      : (side === `y` ? (inside ? `start` : `end`) : (inside ? `end` : `start`)),
+  )
+  const text_baseline = $derived(
+    is_x
+      ? (side === `x` ? (inside ? `auto` : `hanging`) : (inside ? `hanging` : `auto`))
+      : `central`,
+  )
+  const text_transform = $derived(
+    rotation !== 0 ? `rotate(${rotation}, ${text_x}, ${text_y})` : undefined,
+  )
+
+  // Tick-invariant line geometry within the per-tick group (origin sits on the axis).
+  // Keep tick marks' y1="0"/x1="0" explicit: BarPlot's grid test selects `.tick line:not([y1='0'])`.
+  const grid_line = $derived(
+    is_x
+      ? (side === `x` ? { y1: -plot_h, y2: 0 } : { y1: 0, y2: plot_h })
+      : (side === `y` ? { x1: 0, x2: plot_w } : { x1: -plot_w, x2: 0 }),
+  )
+  const tick_mark = $derived(
+    is_x
+      ? (side === `x`
+        ? { y1: 0, y2: inside ? -5 : 5 }
+        : { y1: inside ? 0 : -5, y2: inside ? 5 : 0 })
+      : (side === `y`
+        ? { x1: inside ? 0 : -5, x2: inside ? 5 : 0 }
+        : { x1: inside ? -5 : 0, x2: inside ? 0 : 5 }),
+  )
+
+  // ScatterPlot mode: cull ticks whose pixel pos is off-plot and hide labels outside the data domain
+  const in_domain = (tick: number): boolean =>
+    !domain || (tick >= Math.min(...domain) && tick <= Math.max(...domain))
+  const in_plot = (pos: number): boolean =>
+    !domain ||
+    (is_x ? pos >= pad.l && pos <= width - pad.r : pos >= pad.t && pos <= height - pad.b)
+  const tick_text = (tick: number): string =>
+    tick_label?.(tick) ?? format_value(tick, axis.format ?? ``)
+</script>
+
+<g class="{side}-axis">
+  {#if show_baseline}
+    {#if is_x}
+      <line x1={pad.l} x2={width - pad.r} y1={axis_y} y2={axis_y} {stroke} stroke-width="1" />
+    {:else}
+      <line x1={axis_x} x2={axis_x} y1={pad.t} y2={height - pad.b} {stroke} stroke-width="1" />
+    {/if}
+  {/if}
+  {#each ticks as tick, idx (tick)}
+    {@const pos = place(tick)}
+    {#if isFinite(pos) && in_plot(pos)}
+      <g class="tick" transform="translate({is_x ? pos : axis_x}, {is_x ? axis_y : pos})">
+        {#if show_grid}
+          <line {...grid_line} {...DEFAULT_GRID_STYLE} {...axis.grid_style} />
+        {/if}
+        <line {...tick_mark} {stroke} stroke-width="1" />
+        {#if in_domain(tick)}
+          <text
+            x={text_x}
+            y={text_y}
+            text-anchor={text_anchor}
+            dominant-baseline={text_baseline}
+            fill={text_fill}
+            transform={text_transform}
+          >
+            {tick_text(tick)}{#if unit_on_first_tick && idx === 0 && axis.unit}&zwnj;&ensp;{axis
+                .unit}{/if}
+          </text>
+        {/if}
+      </g>
+    {/if}
+  {/each}
+  {#if show_label}
+    <AxisLabel
+      x={label_x ?? 0}
+      y={label_y ?? 0}
+      rotate={side === `y` || side === `y2`}
+      label={axis.label ?? ``}
+      options={axis.options}
+      selected_key={axis.selected_key}
+      loading={axis_loading}
+      axis_type={side}
+      color={axis.color}
+      on_select={(key) => on_axis_change?.(key)}
+    />
+  {/if}
+</g>
+
+<style>
+  .tick text {
+    font-size: var(--tick-font-size, 0.8em);
+  }
+</style>

package/dist/plot/PlotAxis.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Sides } from './layout';
+import type { AxisConfig } from './types';
+type Side = `x` | `x2` | `y` | `y2`;
+type $$ComponentProps = {
+    side: Side;
+    ticks: number[];
+    place: (value: number) => number;
+    axis?: AxisConfig;
+    pad: Required<Sides>;
+    width: number;
+    height: number;
+    show_grid?: boolean;
+    show_baseline?: boolean;
+    tick_label?: (tick: number) => string | null | undefined;
+    domain?: [number, number];
+    unit_on_first_tick?: boolean;
+    label_x?: number;
+    label_y?: number;
+    axis_loading?: boolean;
+    on_axis_change?: (key: string) => void;
+};
+declare const PlotAxis: import("svelte").Component<$$ComponentProps, {}, "">;
+type PlotAxis = ReturnType<typeof PlotAxis>;
+export default PlotAxis;