matterviz 0.4.1 → 0.4.2

package/dist/plot/{sunburst/SunburstControls.svelte.d.ts → core/components/HierarchyControls.svelte.d.ts}

@@ -1,26 +1,30 @@
-import type { SunburstLabelRotation, SunburstLabelText, SunburstShape, SunburstValueMode } from '..';
+import type { SunburstLabelRotation, SunburstLabelText, SunburstShape, SunburstValueMode } from '../..';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 type $$ComponentProps = {
+    chart: `sunburst` | `treemap`;
     show_controls?: boolean;
     controls_open?: boolean;
-    shape?: SunburstShape;
     value_mode?: SunburstValueMode;
     max_depth?: number;
-    inner_radius?: number;
-    pad_angle?: number;
     min_fraction?: number;
     show_labels?: boolean;
-    label_rotation?: SunburstLabelRotation;
     label_text?: SunburstLabelText;
     zoom_on_click?: boolean;
     show_breadcrumbs?: boolean;
+    shape?: SunburstShape;
+    inner_radius?: number;
+    pad_angle?: number;
+    label_rotation?: SunburstLabelRotation;
+    padding_inner?: number;
+    padding_top?: number;
+    padding_outer?: number;
     export_buttons?: boolean;
     on_export?: (format: `svg` | `png`) => void;
     toggle_props?: HTMLAttributes<HTMLButtonElement>;
     pane_props?: HTMLAttributes<HTMLDivElement>;
     children?: Snippet;
 };
-declare const SunburstControls: import("svelte").Component<$$ComponentProps, {}, "show_controls" | "show_labels" | "controls_open" | "shape" | "value_mode" | "max_depth" | "inner_radius" | "pad_angle" | "min_fraction" | "label_rotation" | "label_text" | "zoom_on_click" | "show_breadcrumbs">;
-type SunburstControls = ReturnType<typeof SunburstControls>;
-export default SunburstControls;
+declare const HierarchyControls: import("svelte").Component<$$ComponentProps, {}, "show_controls" | "show_labels" | "controls_open" | "shape" | "inner_radius" | "pad_angle" | "label_rotation" | "padding_inner" | "padding_top" | "padding_outer" | "value_mode" | "max_depth" | "min_fraction" | "label_text" | "zoom_on_click" | "show_breadcrumbs">;
+type HierarchyControls = ReturnType<typeof HierarchyControls>;
+export default HierarchyControls;

package/dist/plot/core/components/InteractiveAxisLabel.svelte

@@ -43,7 +43,7 @@
   onkeydown={stop_key}
   role="group"
   {...rest}
-  class="interactive-axis-label {axis_type} {rest.class ?? ``}"
+  class={[`interactive-axis-label`, axis_type, rest.class]}
 >
   {#if is_interactive && options}
     <PortalSelect

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

@@ -9,6 +9,6 @@ type $$ComponentProps = {
     on_select?: (key: string) => void;
     [key: string]: unknown;
 };
-declare const InteractiveAxisLabel: import("svelte").Component<$$ComponentProps, {}, "color" | "loading" | "selected_key">;
+declare const InteractiveAxisLabel: import("svelte").Component<$$ComponentProps, {}, "color" | "selected_key" | "loading">;
 type InteractiveAxisLabel = ReturnType<typeof InteractiveAxisLabel>;
 export default InteractiveAxisLabel;

package/dist/plot/core/components/Line.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
   import type { Vec2 } from '../../../math'
+  import { line_curve_factory } from '../fill-utils'
+  import type { LineCurve } from '../types'
   import { DEFAULTS } from '../../../settings'
   import { extent, min } from 'd3-array'
   import { interpolatePath } from 'd3-interpolate-path'
-  import { curveMonotoneX, line } from 'd3-shape'
+  import { line } from 'd3-shape'
   import { untrack } from 'svelte'
   import { linear } from 'svelte/easing'
   import type { SVGAttributes } from 'svelte/elements'
@@ -18,6 +20,7 @@
     area_stroke = null,
     line_tween = {},
     line_dash = DEFAULTS.scatter.line.dash,
+    curve = `monotone`,
     ...rest
   }: Omit<SVGAttributes<SVGPathElement>, `origin` | `points`> & {
     points: readonly Vec2[]
@@ -28,12 +31,17 @@
     area_stroke?: string | null
     line_tween?: TweenOptions<string>
     line_dash?: string
+    curve?: LineCurve
   } = $props()
 
-  const lineGenerator = line()
-    .x((point) => point[0])
-    .y((point) => point[1])
-    .curve(curveMonotoneX)
+  // falls back to monotone for unknown strings from untyped (Python/JSON) callers
+  let curve_fn = $derived(line_curve_factory(curve))
+  let lineGenerator = $derived(
+    line()
+      .x((point) => point[0])
+      .y((point) => point[1])
+      .curve(curve_fn),
+  )
 
   // Only compute/render/tween the area fill when it is actually visible. Most line
   // plots (e.g. every ScatterPlot line) pass a transparent area, so skipping it
@@ -48,7 +56,10 @@
   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(
-    show_area && line_path && isFinite(x_min ?? NaN) && isFinite(x_max ?? NaN) &&
+    show_area &&
+      line_path &&
+      isFinite(x_min ?? NaN) &&
+      isFinite(x_max ?? NaN) &&
       isFinite(ymin ?? NaN)
       ? `${line_path}L${x_max},${ymin}L${x_min},${ymin}Z`
       : ``,
@@ -80,9 +91,7 @@
   })
 
   let line_d = $derived(tween_disabled ? line_path : tweened_line.current)
-  let area_d = $derived(
-    show_area ? (tween_disabled ? area_path : tweened_area.current) : ``,
-  )
+  let area_d = $derived(show_area ? (tween_disabled ? area_path : tweened_area.current) : ``)
 </script>
 
 <path

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

@@ -1,4 +1,5 @@
 import type { Vec2 } from '../../../math';
+import type { LineCurve } from '../types';
 import type { SVGAttributes } from 'svelte/elements';
 import { type TweenOptions } from 'svelte/motion';
 type $$ComponentProps = Omit<SVGAttributes<SVGPathElement>, `origin` | `points`> & {
@@ -10,6 +11,7 @@ type $$ComponentProps = Omit<SVGAttributes<SVGPathElement>, `origin` | `points`>
     area_stroke?: string | null;
     line_tween?: TweenOptions<string>;
     line_dash?: string;
+    curve?: LineCurve;
 };
 declare const Line: import("svelte").Component<$$ComponentProps, {}, "">;
 type Line = ReturnType<typeof Line>;

package/dist/plot/core/components/PlotAxis.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-  import { format_value } from '../../../labels'
+  import { format_value_or_num } from '../../../labels'
   import type { Vec2 } from '../../../math'
+  import { AXIS_LABEL_CONTAINER } from '../axis-utils'
   import AxisLabel from './AxisLabel.svelte'
   import type { Sides } from '../layout'
   import type { AxisConfig } from '../types'
@@ -67,23 +68,39 @@
 
   // 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,
+    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,
+    is_x ? (side === `x` ? (inside ? -8 : 8) : inside ? 8 : -8) + shift_y : shift_y,
   )
   const text_anchor = $derived(
     is_x
-      ? (rotation === 0
+      ? rotation === 0
         ? `middle`
         : side === `x`
-        ? (inside ? `end` : `start`)
-        : (inside ? `start` : `end`)) // x2 rotates opposite to x
-      : (side === `y` ? (inside ? `start` : `end`) : (inside ? `end` : `start`)),
+          ? 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`))
+      ? side === `x`
+        ? inside
+          ? `auto`
+          : `hanging`
+        : inside
+          ? `hanging`
+          : `auto`
       : `central`,
   )
   const text_transform = $derived(
@@ -94,17 +111,21 @@
   // 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 }),
+      ? 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`
+      ? side === `x`
         ? { y1: 0, y2: inside ? -5 : 5 }
-        : { y1: inside ? 0 : -5, y2: inside ? 5 : 0 })
-      : (side === `y`
+        : { 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 }),
+        : { 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
@@ -114,7 +135,7 @@
     !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 ?? ``)
+    tick_label?.(tick) ?? format_value_or_num(tick, axis.format)
 </script>
 
 <g class="{side}-axis">
@@ -142,8 +163,9 @@
             fill={tick_color?.(tick) ?? text_fill}
             transform={text_transform}
           >
-            {tick_text(tick)}{#if unit_on_first_tick && idx === 0 && axis.unit}&zwnj;&ensp;{axis
-                .unit}{/if}
+            {tick_text(
+              tick,
+            )}{#if unit_on_first_tick && idx === 0 && axis.unit}&zwnj;&ensp;{axis.unit}{/if}
           </text>
         {/if}
       </g>
@@ -161,6 +183,7 @@
       axis_type={side}
       color={axis.color}
       on_select={(key) => on_axis_change?.(key)}
+      width={is_x ? Math.max(plot_w, AXIS_LABEL_CONTAINER.width) : undefined}
     />
   {/if}
 </g>

package/dist/plot/core/components/PlotControls.svelte

@@ -11,7 +11,11 @@
   import type { Vec2 } from '../../../math'
   import type { AxisKey, PlotControlsProps } from '../types'
   import { normalize_y2_sync } from '../interactions'
-  import { get_scale_type_name, is_scale_type_name, is_y2_sync_mode } from '../types'
+  import {
+    get_scale_type_name,
+    is_scale_type_name,
+    is_y2_sync_mode,
+  } from '../types'
 
   let {
     show_controls = $bindable(false),
@@ -37,9 +41,12 @@
   }: PlotControlsProps = $props()
 
   // Range input state
-  let range_inputs: Record<AxisKey, [number | null, number | null]> = $state(
-    { x: [null, null], x2: [null, null], y: [null, null], y2: [null, null] },
-  )
+  let range_inputs: Record<AxisKey, [number | null, number | null]> = $state({
+    x: [null, null],
+    x2: [null, null],
+    y: [null, null],
+    y2: [null, null],
+  })
   let range_els = $state<Record<string, HTMLInputElement>>({})
 
   // Check if an axis range spans zero (handles inverted ranges like [3.5, 1.4])
@@ -53,7 +60,8 @@
     ),
   )
   let x2_includes_zero = $derived(
-    has_x2_points && auto_x2_range != null &&
+    has_x2_points &&
+      auto_x2_range != null &&
       range_spans_zero(
         x2_axis.range?.[0] ?? auto_x2_range[0],
         x2_axis.range?.[1] ?? auto_x2_range[1],
@@ -66,7 +74,8 @@
     ),
   )
   let y2_includes_zero = $derived(
-    has_y2_points && auto_y2_range != null &&
+    has_y2_points &&
+      auto_y2_range != null &&
       range_spans_zero(
         y2_axis.range?.[0] ?? auto_y2_range[0],
         y2_axis.range?.[1] ?? auto_y2_range[1],
@@ -108,16 +117,18 @@
     const parsed = value === `` ? null : Number(value)
     range_inputs[axis][bound] = Number.isFinite(parsed) ? parsed : null
     const [min, max] = range_inputs[axis]
-    const auto =
-      { x: auto_x_range, x2: auto_x2_range, y: auto_y_range, y2: auto_y2_range }[axis]
+    const auto = { x: auto_x_range, x2: auto_x2_range, y: auto_y_range, y2: auto_y2_range }[
+      axis
+    ]
     const invalid = min !== null && max !== null && min >= max
     range_els[`${axis}-min`]?.classList.toggle(`invalid`, invalid)
     range_els[`${axis}-max`]?.classList.toggle(`invalid`, invalid)
     if (invalid) return
     const axis_config = { x: x_axis, x2: x2_axis, y: y_axis, y2: y2_axis }[axis]
-    const next_range = min === null && max === null
-      ? undefined
-      : [min ?? auto?.[0] ?? 0, max ?? auto?.[1] ?? 1] as Vec2
+    const next_range =
+      min === null && max === null
+        ? undefined
+        : ([min ?? auto?.[0] ?? 0, max ?? auto?.[1] ?? 1] as Vec2)
     // If auto range is undefined, only set if both min and max are provided
     if (!auto && (min === null || max === null)) return
     if (axis === `x`) x_axis = { ...axis_config, range: next_range }
@@ -149,7 +160,7 @@
 {#if show_controls}
   <ControlPane
     bind:controls_open
-    controls_class={controls_class}
+    {controls_class}
     title={controls_title}
     {toggle_props}
     {pane_props}
@@ -182,24 +193,30 @@
       style="display: flex; flex-wrap: wrap; gap: 1ex; align-items: center"
     >
       {#if x_includes_zero || x2_includes_zero || y_includes_zero || y2_includes_zero}
-        <span class="control-group" data-label="zero line">Zero line:
+        <span class="control-group" data-label="zero line"
+          >Zero line:
           {#if x_includes_zero}
             <label><input type="checkbox" bind:checked={display.x_zero_line} /> X</label>
           {/if}
           {#if x2_includes_zero}
-            <label><input type="checkbox" bind:checked={display.x2_zero_line} />
-              X2</label>
+            <label
+              ><input type="checkbox" bind:checked={display.x2_zero_line} />
+              X2</label
+            >
           {/if}
           {#if y_includes_zero}
             <label><input type="checkbox" bind:checked={display.y_zero_line} /> Y</label>
           {/if}
           {#if y2_includes_zero}
-            <label><input type="checkbox" bind:checked={display.y2_zero_line} />
-              Y2</label>
+            <label
+              ><input type="checkbox" bind:checked={display.y2_zero_line} />
+              Y2</label
+            >
           {/if}
         </span>
       {/if}
-      <span class="control-group" data-label="grid">Grid:
+      <span class="control-group" data-label="grid"
+        >Grid:
         <label><input type="checkbox" bind:checked={display.x_grid} /> X</label>
         {#if has_x2_points}
           <label><input type="checkbox" bind:checked={display.x2_grid} /> X2</label>
@@ -229,17 +246,10 @@
       }}
       style="display: flex; flex-wrap: wrap; gap: 2pt"
     >
-      {#each [
-        [`x`, `X`],
-        ...(has_x2_points ? [[`x2`, `X2`]] : []),
-        [`y`, `Y`],
-        ...(has_y2_points ? [[`y2`, `Y2`]] : []),
-      ] as
-        [axis_key, label]
-        (axis_key)
-      }
+      {#each [[`x`, `X`], ...(has_x2_points ? [[`x2`, `X2`]] : []), [`y`, `Y`], ...(has_y2_points ? [[`y2`, `Y2`]] : [])] as [axis_key, label] (axis_key)}
         {@const axis = axis_key as AxisKey}
-        <label>{label}:
+        <label
+          >{label}:
           <input
             type="number"
             value={range_inputs[axis][0] ?? ``}
@@ -248,7 +258,9 @@
             class="range-input"
             oninput={(evt) => update_range(axis, 0, evt.currentTarget.value)}
             onkeydown={(evt) => evt.key === `Enter` && evt.currentTarget?.blur()}
-          /> to <input
+          />
+          to
+          <input
             type="number"
             value={range_inputs[axis][1] ?? ``}
             bind:this={range_els[`${axis}-max`]}
@@ -273,7 +285,8 @@
         }}
         style="display: flex; flex-wrap: wrap; gap: 1ex"
       >
-        <label>X-axis:
+        <label
+          >X-axis:
           <input
             type="number"
             min={min_ticks}
@@ -290,7 +303,8 @@
             }}
           />
         </label>
-        <label>Y-axis:
+        <label
+          >Y-axis:
           <input
             type="number"
             min={min_ticks}
@@ -327,7 +341,8 @@
       }}
       style="display: flex; flex-wrap: wrap; gap: 1ex"
     >
-      <label>X:
+      <label
+        >X:
         <select
           value={get_scale_type_name(x_axis.scale_type)}
           onchange={(evt) => {
@@ -344,7 +359,8 @@
         </select>
       </label>
       {#if has_x2_points}
-        <label>X2:
+        <label
+          >X2:
           <select
             value={get_scale_type_name(x2_axis.scale_type)}
             onchange={(evt) => {
@@ -361,7 +377,8 @@
           </select>
         </label>
       {/if}
-      <label>Y:
+      <label
+        >Y:
         <select
           value={get_scale_type_name(y_axis.scale_type)}
           onchange={(evt) => {
@@ -378,7 +395,8 @@
         </select>
       </label>
       {#if has_y2_points}
-        <label>Y2:
+        <label
+          >Y2:
           <select
             value={get_scale_type_name(y2_axis.scale_type)}
             onchange={(evt) => {
@@ -412,7 +430,8 @@
         }}
         style="display: flex; gap: 1ex; align-items: center; flex-wrap: wrap"
       >
-        <label {@attach tooltip({ content: y2_sync_tip })}>Mode:
+        <label {@attach tooltip({ content: y2_sync_tip })}
+          >Mode:
           <select
             value={current_sync.mode}
             aria-label="Y2 axis synchronization mode"
@@ -437,7 +456,8 @@
           </select>
         </label>
         {#if current_sync.mode === `align`}
-          <label>Align at:
+          <label
+            >Align at:
             <input
               type="number"
               value={current_sync.align_value ?? 0}
@@ -478,7 +498,8 @@
       class="pane-grid"
       style="grid-template-columns: 1fr 1fr"
     >
-      <label style="white-space: nowrap">X-axis:
+      <label style="white-space: nowrap"
+        >X-axis:
         <input
           type="text"
           value={x_axis.format ?? DEFAULTS.plot.x_format}
@@ -487,7 +508,8 @@
         />
       </label>
       {#if has_x2_points}
-        <label style="white-space: nowrap">X2-axis:
+        <label style="white-space: nowrap"
+          >X2-axis:
           <input
             type="text"
             value={x2_axis.format ?? DEFAULTS.plot.x2_format}
@@ -497,7 +519,8 @@
           />
         </label>
       {/if}
-      <label style="white-space: nowrap">Y-axis:
+      <label style="white-space: nowrap"
+        >Y-axis:
         <input
           type="text"
           value={y_axis.format ?? DEFAULTS.plot.y_format}
@@ -507,7 +530,8 @@
         />
       </label>
       {#if has_y2_points}
-        <label style="white-space: nowrap">Y2-axis:
+        <label style="white-space: nowrap"
+          >Y2-axis:
           <input
             type="text"
             value={y2_axis.format ?? DEFAULTS.plot.y2_format}