matterviz 0.4.0 → 0.4.2

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

@@ -0,0 +1,249 @@
+<script lang="ts">
+  // Shared controls pane for the hierarchical part-of-whole charts. Exported as
+  // SunburstControls/TreemapControls from the chart barrels; `chart` picks the
+  // chart-specific controls (shape/rotation/radius vs cell paddings) and labels.
+  import { NumberRangeInput, SettingsSection } from '../../../layout'
+  import type {
+    SunburstLabelRotation,
+    SunburstLabelText,
+    SunburstShape,
+    SunburstValueMode,
+  } from '../..'
+  import { DEFAULTS, SETTINGS_CONFIG } from '../../../settings'
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import ControlPane from './ControlPane.svelte'
+
+  let {
+    chart,
+    show_controls = $bindable(true),
+    controls_open = $bindable(false),
+    // shared-option defaults come from the bound chart's own settings (chart is
+    // destructured first so later prop defaults can reference it)
+    value_mode = $bindable(DEFAULTS[chart].value_mode),
+    max_depth = $bindable(DEFAULTS[chart].max_depth),
+    min_fraction = $bindable(DEFAULTS[chart].min_fraction),
+    show_labels = $bindable(DEFAULTS[chart].show_labels),
+    label_text = $bindable(DEFAULTS[chart].label_text),
+    zoom_on_click = $bindable(DEFAULTS[chart].zoom_on_click),
+    show_breadcrumbs = $bindable(DEFAULTS[chart].show_breadcrumbs),
+    shape = $bindable(DEFAULTS.sunburst.shape),
+    inner_radius = $bindable(DEFAULTS.sunburst.inner_radius),
+    pad_angle = $bindable(DEFAULTS.sunburst.pad_angle),
+    label_rotation = $bindable(DEFAULTS.sunburst.label_rotation),
+    padding_inner = $bindable(DEFAULTS.treemap.padding_inner),
+    padding_top = $bindable(DEFAULTS.treemap.padding_top),
+    padding_outer = $bindable(DEFAULTS.treemap.padding_outer),
+    export_buttons = true,
+    on_export,
+    toggle_props = {},
+    pane_props = {},
+    children,
+  }: {
+    chart: `sunburst` | `treemap`
+    show_controls?: boolean
+    controls_open?: boolean
+    value_mode?: SunburstValueMode
+    max_depth?: number
+    min_fraction?: number
+    show_labels?: boolean
+    label_text?: SunburstLabelText
+    zoom_on_click?: boolean
+    show_breadcrumbs?: boolean
+    // sunburst-only (ignored for treemap)
+    shape?: SunburstShape
+    inner_radius?: number
+    pad_angle?: number
+    label_rotation?: SunburstLabelRotation
+    // treemap-only (ignored for sunburst)
+    padding_inner?: number
+    padding_top?: number
+    padding_outer?: number
+    export_buttons?: boolean // show SVG/PNG download buttons in the pane
+    on_export?: (format: `svg` | `png`) => void
+    toggle_props?: HTMLAttributes<HTMLButtonElement>
+    pane_props?: HTMLAttributes<HTMLDivElement>
+    children?: Snippet
+  } = $props()
+
+  let current_values = $derived({
+    value_mode,
+    max_depth,
+    min_fraction,
+    show_labels,
+    label_text,
+    zoom_on_click,
+    show_breadcrumbs,
+    ...(chart === `sunburst`
+      ? { shape, inner_radius, pad_angle, label_rotation }
+      : { padding_inner, padding_top, padding_outer }),
+  })
+
+  function reset_to_defaults() {
+    ;({
+      value_mode,
+      max_depth,
+      min_fraction,
+      show_labels,
+      label_text,
+      zoom_on_click,
+      show_breadcrumbs,
+    } = DEFAULTS[chart])
+    if (chart === `sunburst`) {
+      ;({ shape, inner_radius, pad_angle, label_rotation } = DEFAULTS.sunburst)
+    } else ({ padding_inner, padding_top, padding_outer } = DEFAULTS.treemap)
+  }
+</script>
+
+{#if show_controls}
+  <!-- snippets live at the template top level (not inside the components below) so
+  they're locally renderable rather than treated as ControlPane/SettingsSection props -->
+  {#snippet options(enum_map: Record<string, string>)}
+    {#each Object.entries(enum_map) as [value, label] (value)}
+      <option {value}>{label}</option>
+    {/each}
+  {/snippet}
+  <ControlPane bind:controls_open controls_class={chart} {toggle_props} {pane_props}>
+    {@render children?.()}
+    <SettingsSection
+      title={chart === `sunburst` ? `Sunburst` : `Treemap`}
+      {current_values}
+      on_reset={reset_to_defaults}
+      style="display: flex; flex-wrap: wrap; gap: 2ex"
+    >
+      <!-- select options come from the settings schema so labels/values have a
+      single source of truth -->
+      {#if chart === `sunburst`}
+        <label style="flex: 1">
+          Shape:
+          <select bind:value={shape}>
+            {@render options(SETTINGS_CONFIG.sunburst.shape.enum ?? {})}
+          </select>
+        </label>
+      {/if}
+      <label style="flex: 1">
+        Value mode:
+        <select bind:value={value_mode}>
+          {@render options(SETTINGS_CONFIG[chart].value_mode.enum ?? {})}
+        </select>
+      </label>
+      {#if chart === `sunburst` && shape === `sunburst`}
+        <!-- icicle labels are always horizontal; inner radius/pad angle are polar-only -->
+        <label style="flex: 1">
+          Labels:
+          <select bind:value={label_rotation}>
+            {@render options(SETTINGS_CONFIG.sunburst.label_rotation.enum ?? {})}
+          </select>
+        </label>
+      {/if}
+      <label style="flex: 1">
+        Label text:
+        <select bind:value={label_text}>
+          {@render options(SETTINGS_CONFIG[chart].label_text.enum ?? {})}
+        </select>
+      </label>
+      <NumberRangeInput min={0} max={10} step={1} bind:value={max_depth} style="flex: 1 1 100%"
+        >Max depth (0 = all):</NumberRangeInput
+      >
+      {#if chart === `sunburst`}
+        {#if shape === `sunburst`}
+          <NumberRangeInput
+            min={0}
+            max={0.8}
+            step={0.05}
+            bind:value={inner_radius}
+            style="flex: 1 1 100%">Inner radius:</NumberRangeInput
+          >
+          <NumberRangeInput
+            min={0}
+            max={4}
+            step={0.1}
+            bind:value={pad_angle}
+            style="flex: 1 1 100%">Pad angle (°):</NumberRangeInput
+          >
+        {/if}
+      {:else}
+        <NumberRangeInput
+          min={0}
+          max={10}
+          step={0.5}
+          bind:value={padding_inner}
+          style="flex: 1 1 100%">Cell gap (px):</NumberRangeInput
+        >
+        <NumberRangeInput
+          min={0}
+          max={40}
+          step={1}
+          bind:value={padding_top}
+          style="flex: 1 1 100%">Header height (px, 0 = none):</NumberRangeInput
+        >
+        <NumberRangeInput
+          min={0}
+          max={10}
+          step={0.5}
+          bind:value={padding_outer}
+          style="flex: 1 1 100%">Child inset (px):</NumberRangeInput
+        >
+      {/if}
+      <NumberRangeInput
+        min={0}
+        max={0.2}
+        step={0.005}
+        bind:value={min_fraction}
+        style="flex: 1 1 100%"
+        >Group {chart === `sunburst` ? `slices` : `cells`} below (fraction of total):</NumberRangeInput
+      >
+      <label style="flex: 1 1 100%">
+        <input type="checkbox" bind:checked={show_labels} />
+        Show {chart === `sunburst` ? `arc` : `cell`} labels
+      </label>
+      <label style="flex: 1 1 100%">
+        <input type="checkbox" bind:checked={zoom_on_click} />
+        Zoom on click
+      </label>
+      <label style="flex: 1 1 100%">
+        <input type="checkbox" bind:checked={show_breadcrumbs} />
+        Show breadcrumbs when zoomed
+      </label>
+    </SettingsSection>
+    {#if export_buttons && on_export}
+      <!-- --hier-btn-*: forward the chart's own theming vars (--sunburst-btn-bg /
+      --treemap-btn-bg); when unset, the outer var() falls back to the gray default -->
+      <div
+        class="export-row"
+        style="--hier-btn-bg: var(--{chart}-btn-bg); --hier-btn-hover-bg: var(--{chart}-btn-hover-bg)"
+      >
+        Export:
+        {#each [`svg`, `png`] as const as fmt (fmt)}
+          <button
+            type="button"
+            class="export-btn"
+            aria-label="Download {fmt.toUpperCase()}"
+            onclick={() => on_export?.(fmt)}>{fmt.toUpperCase()}</button
+          >
+        {/each}
+      </div>
+    {/if}
+  </ControlPane>
+{/if}
+
+<style>
+  .export-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-top: 6px;
+    font-size: 0.85em;
+  }
+  .export-btn {
+    background: var(--hier-btn-bg, rgba(128, 128, 128, 0.15));
+    color: inherit;
+    border: none;
+    border-radius: 3pt;
+    padding: 1px 6px;
+    cursor: pointer;
+  }
+  .export-btn:hover {
+    background: var(--hier-btn-hover-bg, rgba(128, 128, 128, 0.35));
+  }
+</style>

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" | "controls_open" | "value_mode" | "min_fraction" | "show_labels" | "shape" | "max_depth" | "inner_radius" | "pad_angle" | "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,8 +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'
@@ -17,22 +20,28 @@
     area_stroke = null,
     line_tween = {},
     line_dash = DEFAULTS.scatter.line.dash,
+    curve = `monotone`,
     ...rest
   }: Omit<SVGAttributes<SVGPathElement>, `origin` | `points`> & {
-    points: readonly [number, number][]
-    origin: [number, number]
+    points: readonly Vec2[]
+    origin: Vec2
     line_color?: string
     line_width?: number
     area_color?: string
     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
@@ -47,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`
       : ``,
@@ -79,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,14 +1,17 @@
+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`> & {
-    points: readonly [number, number][];
-    origin: [number, number];
+    points: readonly Vec2[];
+    origin: Vec2;
     line_color?: string;
     line_width?: number;
     area_color?: string;
     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,5 +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'
@@ -40,7 +42,7 @@
     show_baseline?: boolean // axis spine line (ScatterPlot omits it)
     tick_label?: (tick: number) => string | null | undefined // custom/categorical label
     tick_color?: (tick: number) => string | undefined // per-tick label color (else axis.color)
-    domain?: [number, number] // when set, cull off-plot ticks and hide out-of-domain labels
+    domain?: Vec2 // 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
@@ -66,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(
@@ -93,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
@@ -113,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">
@@ -141,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>
@@ -160,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/PlotAxis.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { Vec2 } from '../../../math';
 import type { Sides } from '../layout';
 import type { AxisConfig } from '../types';
 type Side = `x` | `x2` | `y` | `y2`;
@@ -13,7 +14,7 @@ type $$ComponentProps = {
     show_baseline?: boolean;
     tick_label?: (tick: number) => string | null | undefined;
     tick_color?: (tick: number) => string | undefined;
-    domain?: [number, number];
+    domain?: Vec2;
     unit_on_first_tick?: boolean;
     label_x?: number;
     label_y?: number;