matterviz 0.3.1 → 0.3.3

package/dist/plot/SpacegroupBarPlot.svelte

@@ -1,112 +1,169 @@
-<script lang="ts">import { format_num, format_value } from '../labels';
-import { BarPlot } from './';
-import * as symmetry from '../symmetry';
-import * as spg from '../symmetry/spacegroups';
-import { SvelteMap } from 'svelte/reactivity';
-// Merge tick config with default rotation, preserving user overrides
-const with_rotation = (tick, default_rot) => ({
+<script lang="ts">
+  import { format_num, format_value } from '../labels'
+  import type { BarHandlerProps, BarSeries, TickConfig } from './'
+  import { BarPlot } from './'
+  import type { CrystalSystem } from '../symmetry'
+  import * as symmetry from '../symmetry'
+  import * as spg from '../symmetry/spacegroups'
+  import type { ComponentProps } from 'svelte'
+  import { SvelteMap } from 'svelte/reactivity'
+
+  // Merge tick config with default rotation, preserving user overrides
+  const with_rotation = (
+    tick: TickConfig | undefined,
+    default_rot: number,
+  ): TickConfig => ({
     ...tick,
     label: { ...tick?.label, rotation: tick?.label?.rotation ?? default_rot },
-});
-const MAX_SPACEGROUP = 230;
-let { data, show_counts = true, orientation = `vertical`, x_axis = {}, y_axis = {}, ...rest } = $props();
-// Normalize input data to space group numbers
-const normalized_data = $derived(data.map(spg.normalize_spacegroup).filter((sg) => sg !== null));
-// Compute histogram of space group numbers
-const histogram = $derived.by(() => {
-    const hist = new SvelteMap();
+  })
+
+  const MAX_SPACEGROUP = 230
+  let {
+    data,
+    show_counts = true,
+    orientation = `vertical`,
+    x_axis = {},
+    y_axis = {},
+    ...rest
+  }: ComponentProps<typeof BarPlot> & {
+    data: (number | string)[]
+    show_counts?: boolean
+  } = $props()
+
+  // Normalize input data to space group numbers
+  const normalized_data = $derived(
+    data.map(spg.normalize_spacegroup).filter((sg): sg is number => sg !== null),
+  )
+
+  // Compute histogram of space group numbers
+  const histogram = $derived.by(() => {
+    const hist = new SvelteMap<number, number>()
+
     // Count occurrences
     for (const sg of normalized_data) {
-        hist.set(sg, (hist.get(sg) ?? 0) + 1);
+      hist.set(sg, (hist.get(sg) ?? 0) + 1)
     }
-    return hist;
-});
-// Group counts by crystal system
-const crystal_system_stats = $derived.by(() => {
-    const stats = new SvelteMap();
+
+    return hist
+  })
+
+  // Group counts by crystal system
+  const crystal_system_stats = $derived.by(() => {
+    const stats = new SvelteMap<
+      CrystalSystem,
+      { count: number; spacegroups: number[] }
+    >()
+
     for (const system of symmetry.CRYSTAL_SYSTEMS) {
-        stats.set(system, { count: 0, spacegroups: [] });
+      stats.set(system, { count: 0, spacegroups: [] })
     }
+
     for (const [sg, count] of histogram) {
-        const system = spg.spacegroup_to_crystal_sys(sg);
-        if (system) {
-            const stat = stats.get(system);
-            stat.count += count;
-            stat.spacegroups.push(sg);
-        }
+      const system = spg.spacegroup_to_crystal_sys(sg)
+      if (!system) continue
+      const stat = stats.get(system)
+      if (!stat) continue
+      stat.count += count
+      stat.spacegroups.push(sg)
     }
-    return stats;
-});
-// Create sorted list of space groups for x-axis
-const sorted_spacegroups = $derived(Array.from(histogram.keys()).sort((a, b) => a - b));
-// Smart tick selection: thin out ticks for dense data
-const x_axis_ticks = $derived.by(() => {
-    const non_zero_count = sorted_spacegroups.filter((sg) => (histogram.get(sg) ?? 0) > 0).length;
+
+    return stats
+  })
+
+  // Create sorted list of space groups for x-axis
+  const sorted_spacegroups = $derived(
+    Array.from(histogram.keys()).sort((a, b) => a - b),
+  )
+
+  // Smart tick selection: thin out ticks for dense data
+  const x_axis_ticks = $derived.by(() => {
+    const non_zero_count = sorted_spacegroups.filter(
+      (sg) => (histogram.get(sg) ?? 0) > 0,
+    ).length
+
     // If data is dense (>40 space groups with data), show only multiples of 5
     return non_zero_count > 40
-        ? sorted_spacegroups.filter((sg) => sg % 5 === 0)
-        : sorted_spacegroups;
-});
-// Build BarSeries - one series per crystal system for proper coloring
-const bar_series = $derived.by(() => {
-    const series_by_system = new SvelteMap();
+      ? sorted_spacegroups.filter((sg) => sg % 5 === 0)
+      : sorted_spacegroups
+  })
+
+  // Build BarSeries - one series per crystal system for proper coloring
+  const bar_series = $derived.by<BarSeries[]>(() => {
+    const series_by_system = new SvelteMap<
+      CrystalSystem,
+      { x: number[]; y: number[] }
+    >()
+
     // Group data by crystal system
     for (const sg of sorted_spacegroups) {
-        const system = spg.spacegroup_to_crystal_sys(sg);
-        if (system) {
-            let series = series_by_system.get(system);
-            if (!series) {
-                series = { x: [], y: [] };
-                series_by_system.set(system, series);
-            }
-            series.x.push(sg);
-            series.y.push(histogram.get(sg) ?? 0);
+      const system = spg.spacegroup_to_crystal_sys(sg)
+      if (system) {
+        let series = series_by_system.get(system)
+        if (!series) {
+          series = { x: [], y: [] }
+          series_by_system.set(system, series)
         }
+        series.x.push(sg)
+        series.y.push(histogram.get(sg) ?? 0)
+      }
     }
+
     // Convert to BarSeries array, maintaining order of crystal systems
-    const result = [];
+    const result: BarSeries[] = []
     for (const system of symmetry.CRYSTAL_SYSTEMS) {
-        const data = series_by_system.get(system);
-        if (data) {
-            const { x, y } = data;
-            const color = symmetry.CRYSTAL_SYSTEM_COLORS[system];
-            result.push({ x, y, color, label: system, bar_width: 0.9, visible: true });
-        }
+      const data = series_by_system.get(system)
+      if (data) {
+        const { x, y } = data
+        const color = symmetry.CRYSTAL_SYSTEM_COLORS[system]
+        result.push({ x, y, color, label: system, bar_width: 0.9, visible: true })
+      }
     }
-    return result;
-});
-// Always show full space group range (1-230)
-const x_range = [0.5, MAX_SPACEGROUP + 0.5];
-// Calculate crystal system region boundaries using full theoretical ranges
-const crystal_system_regions = $derived.by(() => {
-    const [range_min, range_max] = x_range;
+    return result
+  })
+
+  // Always show full space group range (1-230)
+  const x_range: [number, number] = [0.5, MAX_SPACEGROUP + 0.5]
+
+  // Calculate crystal system region boundaries using full theoretical ranges
+  const crystal_system_regions = $derived.by(() => {
+    const [range_min, range_max] = x_range
+
     return symmetry.CRYSTAL_SYSTEMS.map((system) => {
-        const [sg_start, sg_end] = symmetry.CRYSTAL_SYSTEM_RANGES[system];
-        const stats = crystal_system_stats.get(system);
-        const count = stats?.count ?? 0;
-        const color = symmetry.CRYSTAL_SYSTEM_COLORS[system];
-        return { system, sg_start, sg_end, count, color };
-    }).filter((region) => region.sg_end >= range_min && region.sg_start <= range_max);
-});
-const total_count = $derived(normalized_data.length);
-// Build axis configurations based on orientation
-const x_axis_config = $derived(orientation === `horizontal` ? { ...x_axis, label: x_axis.label ?? `Counts` } : {
-    ...x_axis,
-    label: x_axis.label ?? `International Spacegroup Number`,
-    range: x_range,
-    ticks: x_axis_ticks,
-    tick: with_rotation(x_axis.tick, 90), // Rotate ticks 90° to avoid overlap
-    label_shift: { x: 0, y: 20, ...x_axis.label_shift }, // Move label down for rotated ticks
-});
-const y_axis_config = $derived(orientation === `horizontal`
-    ? {
+      const [sg_start, sg_end] = symmetry.CRYSTAL_SYSTEM_RANGES[system]
+      const stats = crystal_system_stats.get(system)
+      const count = stats?.count ?? 0
+      const color = symmetry.CRYSTAL_SYSTEM_COLORS[system]
+      return { system, sg_start, sg_end, count, color }
+    }).filter(
+      (region) => region.sg_end >= range_min && region.sg_start <= range_max, // Only visible systems
+    )
+  })
+
+  const total_count = $derived(normalized_data.length)
+
+  // Build axis configurations based on orientation
+  const x_axis_config = $derived(
+    orientation === `horizontal` ? { ...x_axis, label: x_axis.label ?? `Counts` } : {
+      ...x_axis,
+      label: x_axis.label ?? `International Spacegroup Number`,
+      range: x_range,
+      ticks: x_axis_ticks,
+      tick: with_rotation(x_axis.tick, 90), // Rotate ticks 90° to avoid overlap
+      label_shift: { x: 0, y: 20, ...x_axis.label_shift }, // Move label down for rotated ticks
+    },
+  )
+
+  const y_axis_config = $derived(
+    orientation === `horizontal`
+      ? {
         ...y_axis,
         label: y_axis.label ?? `International Spacegroup Number`,
         range: x_range,
         ticks: x_axis_ticks,
         tick: with_rotation(y_axis.tick, 0),
-    }
-    : { ...y_axis, label: y_axis.label ?? `Counts` });
+      }
+      : { ...y_axis, label: y_axis.label ?? `Counts` },
+  )
 </script>
 
 {#snippet tooltip(info: BarHandlerProps)}

package/dist/plot/Surface3D.svelte

@@ -1,137 +1,188 @@
-<script lang="ts">import { T } from '@threlte/core';
-import * as THREE from 'three';
-let { config, x_range = [0, 1], y_range = [0, 1], z_range = [0, 1], scene_x = 10, scene_y = 10, scene_z = 5, } = $props();
-// Normalize value to scene coordinates (centered around 0)
-function normalize(value, [min_val, max_val], scene_size) {
-    return ((value - min_val) / (max_val - min_val || 1) - 0.5) * scene_size;
-}
-// Parse color to THREE.Color with fallback
-function parse_color(color) {
+<script lang="ts">
+  import type { Surface3DConfig } from './types'
+  import { T } from '@threlte/core'
+  import * as THREE from 'three'
+
+  let {
+    config,
+    x_range = [0, 1],
+    y_range = [0, 1],
+    z_range = [0, 1],
+    scene_x = 10,
+    scene_y = 10,
+    scene_z = 5,
+  }: {
+    config: Surface3DConfig
+    x_range?: [number, number]
+    y_range?: [number, number]
+    z_range?: [number, number]
+    scene_x?: number
+    scene_y?: number
+    scene_z?: number
+  } = $props()
+
+  // Normalize value to scene coordinates (centered around 0)
+  function normalize(
+    value: number,
+    [min_val, max_val]: [number, number],
+    scene_size: number,
+  ): number {
+    return ((value - min_val) / (max_val - min_val || 1) - 0.5) * scene_size
+  }
+
+  // Parse color to THREE.Color with fallback
+  function parse_color(color: string): THREE.Color {
     try {
-        return new THREE.Color(color);
+      return new THREE.Color(color)
+    } catch {
+      return new THREE.Color(0x4488ff)
     }
-    catch {
-        return new THREE.Color(0x4488ff);
-    }
-}
-// Calculate vertex color based on config
-function get_vertex_color(x_val, y_val, z_val) {
-    if (config.color_fn)
-        return parse_color(config.color_fn(x_val, y_val, z_val));
-    if (config.color)
-        return parse_color(config.color);
+  }
+
+  // Calculate vertex color based on config
+  function get_vertex_color(
+    x_val: number,
+    y_val: number,
+    z_val: number,
+  ): THREE.Color {
+    if (config.color_fn) return parse_color(config.color_fn(x_val, y_val, z_val))
+    if (config.color) return parse_color(config.color)
     // Default: color by z value (blue to red gradient)
-    const z_norm = (z_val - z_range[0]) / (z_range[1] - z_range[0] || 1);
-    return new THREE.Color().setHSL(0.66 - z_norm * 0.66, 0.8, 0.5);
-}
-// Add vertex position (with Y/Z swap for Three.js) and color to arrays
-function add_vertex(positions, colors, x_val, y_val, z_val) {
-    positions.push(normalize(x_val, x_range, scene_x), normalize(z_val, z_range, scene_z), // user Z → Three.js Y (vertical)
-    normalize(y_val, y_range, scene_y));
-    const color = get_vertex_color(x_val, y_val, z_val);
-    colors.push(color.r, color.g, color.b);
-}
-// Build geometry from positions/colors arrays with optional grid indices
-function build_geometry(positions, colors, res_a, res_b, triangles) {
-    const geom = new THREE.BufferGeometry();
-    geom.setAttribute(`position`, new THREE.Float32BufferAttribute(positions, 3));
-    geom.setAttribute(`color`, new THREE.Float32BufferAttribute(colors, 3));
+    const z_norm = (z_val - z_range[0]) / (z_range[1] - z_range[0] || 1)
+    return new THREE.Color().setHSL(0.66 - z_norm * 0.66, 0.8, 0.5)
+  }
+
+  // Add vertex position (with Y/Z swap for Three.js) and color to arrays
+  function add_vertex(
+    positions: number[],
+    colors: number[],
+    x_val: number,
+    y_val: number,
+    z_val: number,
+  ): void {
+    positions.push(
+      normalize(x_val, x_range, scene_x),
+      normalize(z_val, z_range, scene_z), // user Z → Three.js Y (vertical)
+      normalize(y_val, y_range, scene_y), // user Y → Three.js Z (depth)
+    )
+    const color = get_vertex_color(x_val, y_val, z_val)
+    colors.push(color.r, color.g, color.b)
+  }
+
+  // Build geometry from positions/colors arrays with optional grid indices
+  function build_geometry(
+    positions: number[],
+    colors: number[],
+    res_a?: number,
+    res_b?: number,
+    triangles?: number[][],
+  ): THREE.BufferGeometry {
+    const geom = new THREE.BufferGeometry()
+    geom.setAttribute(`position`, new THREE.Float32BufferAttribute(positions, 3))
+    geom.setAttribute(`color`, new THREE.Float32BufferAttribute(colors, 3))
     // Set indices: either from explicit triangles or generate grid
     if (triangles?.length) {
-        geom.setIndex(triangles.flat());
-    }
-    else if (res_a && res_b && res_a >= 2 && res_b >= 2) {
-        const indices = [];
-        for (let ib = 0; ib < res_b - 1; ib++) {
-            for (let ia = 0; ia < res_a - 1; ia++) {
-                const tl = ib * res_a + ia;
-                indices.push(tl, tl + res_a, tl + 1, tl + 1, tl + res_a, tl + res_a + 1);
-            }
+      geom.setIndex(triangles.flat())
+    } else if (res_a && res_b && res_a >= 2 && res_b >= 2) {
+      const indices: number[] = []
+      for (let ib = 0; ib < res_b - 1; ib++) {
+        for (let ia = 0; ia < res_a - 1; ia++) {
+          const tl = ib * res_a + ia
+          indices.push(tl, tl + res_a, tl + 1, tl + 1, tl + res_a, tl + res_a + 1)
         }
-        geom.setIndex(indices);
+      }
+      geom.setIndex(indices)
     }
-    geom.computeVertexNormals();
-    return geom;
-}
-// Parse resolution config into [res_a, res_b]
-function get_resolution() {
+    geom.computeVertexNormals()
+    return geom
+  }
+
+  // Parse resolution config into [res_a, res_b]
+  function get_resolution(): [number, number] {
     return Array.isArray(config.resolution)
-        ? config.resolution
-        : [config.resolution ?? 20, config.resolution ?? 20];
-}
-function create_geometry() {
-    const [res_a, res_b] = get_resolution();
-    const positions = [];
-    const colors = [];
+      ? config.resolution
+      : [config.resolution ?? 20, config.resolution ?? 20]
+  }
+
+  function create_geometry(): THREE.BufferGeometry | null {
+    const [res_a, res_b] = get_resolution()
+    const positions: number[] = []
+    const colors: number[] = []
+
     if (config.type === `grid` && config.z_fn) {
-        if (res_a < 2 || res_b < 2)
-            return new THREE.BufferGeometry();
-        const [x0, x1] = config.x_range ?? x_range;
-        const [y0, y1] = config.y_range ?? y_range;
-        const x_step = (x1 - x0) / (res_a - 1);
-        const y_step = (y1 - y0) / (res_b - 1);
-        for (let ib = 0; ib < res_b; ib++) {
-            for (let ia = 0; ia < res_a; ia++) {
-                const x_val = x0 + ia * x_step;
-                const y_val = y0 + ib * y_step;
-                add_vertex(positions, colors, x_val, y_val, config.z_fn(x_val, y_val));
-            }
+      if (res_a < 2 || res_b < 2) return new THREE.BufferGeometry()
+      const [x0, x1] = config.x_range ?? x_range
+      const [y0, y1] = config.y_range ?? y_range
+      const x_step = (x1 - x0) / (res_a - 1)
+      const y_step = (y1 - y0) / (res_b - 1)
+      for (let ib = 0; ib < res_b; ib++) {
+        for (let ia = 0; ia < res_a; ia++) {
+          const x_val = x0 + ia * x_step
+          const y_val = y0 + ib * y_step
+          add_vertex(positions, colors, x_val, y_val, config.z_fn(x_val, y_val))
         }
-        return build_geometry(positions, colors, res_a, res_b);
+      }
+      return build_geometry(positions, colors, res_a, res_b)
     }
+
     if (config.type === `parametric` && config.parametric_fn) {
-        if (res_a < 2 || res_b < 2)
-            return new THREE.BufferGeometry();
-        const [u0, u1] = config.u_range ?? [0, 1];
-        const [v0, v1] = config.v_range ?? [0, 1];
-        const u_step = (u1 - u0) / (res_a - 1);
-        const v_step = (v1 - v0) / (res_b - 1);
-        for (let ib = 0; ib < res_b; ib++) {
-            for (let ia = 0; ia < res_a; ia++) {
-                const pt = config.parametric_fn(u0 + ia * u_step, v0 + ib * v_step);
-                add_vertex(positions, colors, pt.x, pt.y, pt.z);
-            }
+      if (res_a < 2 || res_b < 2) return new THREE.BufferGeometry()
+      const [u0, u1] = config.u_range ?? [0, 1]
+      const [v0, v1] = config.v_range ?? [0, 1]
+      const u_step = (u1 - u0) / (res_a - 1)
+      const v_step = (v1 - v0) / (res_b - 1)
+      for (let ib = 0; ib < res_b; ib++) {
+        for (let ia = 0; ia < res_a; ia++) {
+          const pt = config.parametric_fn(u0 + ia * u_step, v0 + ib * v_step)
+          add_vertex(positions, colors, pt.x, pt.y, pt.z)
         }
-        return build_geometry(positions, colors, res_a, res_b);
+      }
+      return build_geometry(positions, colors, res_a, res_b)
     }
+
     if (config.type === `triangulated` && config.points?.length) {
-        for (const pt of config.points) {
-            add_vertex(positions, colors, pt.x, pt.y, pt.z);
-        }
-        return build_geometry(positions, colors, undefined, undefined, config.triangles);
+      for (const pt of config.points) {
+        add_vertex(positions, colors, pt.x, pt.y, pt.z)
+      }
+      return build_geometry(positions, colors, undefined, undefined, config.triangles)
     }
-    return null;
-}
-// Geometry with proper disposal on change/unmount
-let geometry = $state(null);
-let wireframe_geometry = $state(null);
-$effect(() => {
-    const new_geom = create_geometry();
-    const new_wireframe = new_geom ? new THREE.WireframeGeometry(new_geom) : null;
-    geometry = new_geom;
-    wireframe_geometry = new_wireframe;
+
+    return null
+  }
+
+  // Geometry with proper disposal on change/unmount
+  let geometry: THREE.BufferGeometry | null = $state(null)
+  let wireframe_geometry: THREE.WireframeGeometry | null = $state(null)
+
+  $effect(() => {
+    const new_geom = create_geometry()
+    const new_wireframe = new_geom ? new THREE.WireframeGeometry(new_geom) : null
+    geometry = new_geom
+    wireframe_geometry = new_wireframe
     return () => {
-        new_geom?.dispose();
-        new_wireframe?.dispose();
-    };
-});
-// Material properties
-let is_transparent = $derived((config.opacity ?? 1) < 1);
-let material_props = $derived({
+      new_geom?.dispose()
+      new_wireframe?.dispose()
+    }
+  })
+
+  // Material properties
+  let is_transparent = $derived((config.opacity ?? 1) < 1)
+  let material_props = $derived({
     transparent: is_transparent,
     opacity: config.opacity ?? 1,
     side: (config.double_sided ?? is_transparent)
-        ? THREE.DoubleSide
-        : THREE.FrontSide,
+      ? THREE.DoubleSide
+      : THREE.FrontSide,
     vertexColors: true,
     depthWrite: true,
-});
-let wireframe_props = $derived({
+  })
+
+  let wireframe_props = $derived({
     color: config.wireframe_color ?? `#333`,
     linewidth: config.wireframe_width ?? 1,
     transparent: true,
     opacity: 0.5,
-});
+  })
 </script>
 
 {#if geometry}

package/dist/plot/ZeroLines.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+  import type { Vec2 } from '../math'
+  import { get_scale_type_name, type ScaleType, type Sides } from './'
+
+  let {
+    display,
+    x_scale_fn,
+    x2_scale_fn,
+    y_scale_fn,
+    y2_scale_fn,
+    x_range,
+    x2_range,
+    y_range,
+    y2_range,
+    x_scale_type,
+    x2_scale_type,
+    y_scale_type,
+    y2_scale_type,
+    x_is_time = false,
+    x2_is_time = false,
+    has_x2 = false,
+    has_y2 = false,
+    width,
+    height,
+    pad,
+  }: {
+    display: {
+      x_zero_line?: boolean
+      x2_zero_line?: boolean
+      y_zero_line?: boolean
+      y2_zero_line?: boolean
+    }
+    x_scale_fn: (val: number) => number
+    x2_scale_fn?: (val: number) => number
+    y_scale_fn: (val: number) => number
+    y2_scale_fn?: (val: number) => number
+    x_range: Vec2
+    x2_range?: Vec2
+    y_range: Vec2
+    y2_range?: Vec2
+    x_scale_type?: ScaleType
+    x2_scale_type?: ScaleType
+    y_scale_type?: ScaleType
+    y2_scale_type?: ScaleType
+    x_is_time?: boolean
+    x2_is_time?: boolean
+    has_x2?: boolean
+    has_y2?: boolean
+    width: number
+    height: number
+    pad: Required<Sides>
+  } = $props()
+
+  const spans_zero = (range: Vec2): boolean =>
+    Math.min(range[0], range[1]) <= 0 && Math.max(range[0], range[1]) >= 0
+</script>
+
+{#if display.x_zero_line && get_scale_type_name(x_scale_type) !== `log` &&
+    !x_is_time && spans_zero(x_range)}
+  {@const zero_x = x_scale_fn(0)}
+  {#if isFinite(zero_x)}
+    <line class="zero-line" x1={zero_x} x2={zero_x} y1={pad.t} y2={height - pad.b} />
+  {/if}
+{/if}
+
+{#if display.x2_zero_line && has_x2 && x2_scale_fn && x2_range &&
+    get_scale_type_name(x2_scale_type) !== `log` && !x2_is_time && spans_zero(x2_range)}
+  {@const zero_x2 = x2_scale_fn(0)}
+  {#if isFinite(zero_x2)}
+    <line class="zero-line" x1={zero_x2} x2={zero_x2} y1={pad.t} y2={height - pad.b} />
+  {/if}
+{/if}
+
+{#if display.y_zero_line && get_scale_type_name(y_scale_type) !== `log` &&
+    spans_zero(y_range)}
+  {@const zero_y = y_scale_fn(0)}
+  {#if isFinite(zero_y)}
+    <line class="zero-line" x1={pad.l} x2={width - pad.r} y1={zero_y} y2={zero_y} />
+  {/if}
+{/if}
+
+{#if display.y2_zero_line && has_y2 && y2_scale_fn && y2_range &&
+    get_scale_type_name(y2_scale_type) !== `log` && spans_zero(y2_range)}
+  {@const zero_y2 = y2_scale_fn(0)}
+  {#if isFinite(zero_y2)}
+    <line class="zero-line" x1={pad.l} x2={width - pad.r} y1={zero_y2} y2={zero_y2} />
+  {/if}
+{/if}
+
+<style>
+  .zero-line {
+    stroke: var(--plot-zero-line-color, light-dark(black, white));
+    stroke-width: var(--plot-zero-line-width, 1);
+    opacity: var(--plot-zero-line-opacity, 0.3);
+  }
+</style>