matterviz 0.1.12 → 0.1.13

package/dist/plot/Histogram.svelte

@@ -1,12 +1,23 @@
-<script lang="ts">import { DraggablePane } from '..';
+<script lang="ts">import { format_value } from '../labels';
 import { find_best_plot_area, HistogramControls, PlotLegend } from './';
+import { DEFAULTS } from '../settings';
 import { bin, max } from 'd3-array';
-import { extract_series_color, filter_visible_series, prepare_legend_data, } from './data-transform';
-import { format_value } from './formatting';
+import { untrack } from 'svelte';
+import { extract_series_color, prepare_legend_data } from './data-transform';
 import { get_relative_coords } from './interactions';
 import { calc_auto_padding, constrain_tooltip_position } from './layout';
-import { create_scale, generate_ticks, get_nice_data_range } from './scales';
-let { series = $bindable([]), x_lim = [null, null], y_lim = [null, null], x_range, y_range, range_padding = 0.05, bins = $bindable(100), x_label = `Value`, y_label = `Count`, x_format = $bindable(`.2~s`), y_format = $bindable(`d`), x_scale_type = $bindable(`linear`), y_scale_type = $bindable(`linear`), padding = { t: 20, b: 60, l: 60, r: 20 }, show_legend = $bindable(true), legend = { series_data: [] }, bar_opacity = $bindable(0.7), bar_stroke_width = $bindable(1), bar_color = $bindable(`cornflowerblue`), selected_property = $bindable(``), mode = $bindable(`single`), show_zero_lines = $bindable(true), x_grid = $bindable(true), y_grid = $bindable(true), x_ticks = $bindable(8), y_ticks = $bindable(6), tooltip, hovered = $bindable(false), change = () => { }, on_bar_click, on_bar_hover, show_controls = $bindable(true), controls_open = $bindable(false), plot_controls, on_series_toggle = () => { }, controls_toggle_props, ...rest } = $props();
+import { create_scale, generate_ticks, get_nice_data_range, get_tick_label, } from './scales';
+let { series = $bindable([]), x_axis = $bindable({ label: `Value`, format: `.2~s`, scale_type: `linear` }), y_axis = $bindable({ label: `Count`, format: `d`, scale_type: `linear` }), y2_axis = $bindable({ label: `Count`, format: `d`, scale_type: `linear` }), display = $bindable(DEFAULTS.histogram.display), x_range = [null, null], y_range = [null, null], y2_range = [null, null], range_padding = 0.05, padding = { t: 20, b: 60, l: 60, r: 20 }, bins = $bindable(100), show_legend = $bindable(true), legend = { series_data: [] }, bar = $bindable({}), selected_property = $bindable(``), mode = $bindable(`single`), tooltip, hovered = $bindable(false), change = () => { }, on_bar_click, on_bar_hover, show_controls = $bindable(true), controls_open = $bindable(false), on_series_toggle = () => { }, controls_toggle_props, controls_pane_props, children, ...rest } = $props();
+bar = { ...DEFAULTS.histogram.bar, ...bar }; // Initialize bar style defaults
+y2_axis = {
+    format: `d`,
+    scale_type: `linear`,
+    ticks: 5,
+    label_shift: { y: 60 },
+    tick_label_shift: { x: 8, y: 0 },
+    range: [null, null],
+    ...y2_axis,
+};
 // Core state
 let [width, height] = $state([0, 0]);
 let svg_element = $state(null);
@@ -14,63 +25,93 @@ let hover_info = $state(null);
 let drag_state = $state({ start: null, current: null, bounds: null });
 // Derived data
 let selected_series = $derived(mode === `single` && selected_property
-    ? filter_visible_series(series).filter((s) => s.label === selected_property)
-    : filter_visible_series(series));
+    ? series.filter((srs) => (srs.visible ?? true) && srs.label === selected_property)
+    : series.filter((srs) => srs.visible ?? true));
+// Separate series by y-axis
+let y1_series = $derived(selected_series.filter((srs) => (srs.y_axis ?? `y1`) === `y1`));
+let y2_series = $derived(selected_series.filter((srs) => srs.y_axis === `y2`));
 let auto_ranges = $derived.by(() => {
     const all_values = selected_series.flatMap((s) => s.y);
-    const auto_x = get_nice_data_range(all_values.map((val) => ({ x: val, y: 0 })), (p) => p.x, x_lim, x_scale_type, range_padding, false);
-    if (!selected_series.length) {
-        return {
-            x: auto_x,
-            y: [y_scale_type === `log` ? 1 : 0, 1],
-        };
-    }
-    const hist = bin().domain([auto_x[0], auto_x[1]]).thresholds(bins);
-    const max_count = Math.max(0, ...selected_series.map((s) => max(hist(s.y), (d) => d.length) || 0));
-    const [y0, y1] = get_nice_data_range([{ x: 0, y: 0 }, { x: max_count, y: 0 }], (p) => p.x, y_lim, y_scale_type, range_padding, false);
-    const y_min = y_scale_type === `log` ? Math.max(1, y0) : Math.max(0, y0);
-    return { x: auto_x, y: [y_min, y1] };
+    const auto_x = get_nice_data_range(all_values.map((val) => ({ x: val, y: 0 })), (p) => p.x, x_range, x_axis.scale_type ?? `linear`, range_padding, false);
+    // Calculate y-range for a specific set of series
+    const calc_y_range = (series_list, y_limit, scale_type) => {
+        if (!series_list.length) {
+            const fallback = scale_type === `log` ? 1 : 0;
+            return [fallback, 1];
+        }
+        const hist = bin().domain([auto_x[0], auto_x[1]]).thresholds(bins);
+        const max_count = Math.max(0, ...series_list.map((s) => max(hist(s.y), (d) => d.length) || 0));
+        const [y0, y1] = get_nice_data_range([{ x: 0, y: 0 }, { x: max_count, y: 0 }], (p) => p.x, y_limit, scale_type, range_padding, false);
+        const y_min = scale_type === `log` ? Math.max(1, y0) : Math.max(0, y0);
+        return [y_min, y1];
+    };
+    const y1_range = calc_y_range(y1_series, y_range, y_axis.scale_type ?? `linear`);
+    const y2_auto_range = calc_y_range(y2_series, y2_range, y2_axis.scale_type ?? `linear`);
+    return { x: auto_x, y: y1_range, y2: y2_auto_range };
 });
 // Initialize ranges
 let ranges = $state({
-    initial: { x: [0, 1], y: [0, 1] },
-    current: { x: [0, 1], y: [0, 1] },
+    initial: {
+        x: [0, 1],
+        y: [0, 1],
+        y2: [0, 1],
+    },
+    current: {
+        x: [0, 1],
+        y: [0, 1],
+        y2: [0, 1],
+    },
 });
 $effect(() => {
     // Support one-sided range pinning: merge user range with auto range for null values
-    const new_x = x_range
-        ? [x_range[0] ?? auto_ranges.x[0], x_range[1] ?? auto_ranges.x[1]]
+    const new_x = x_axis.range
+        ? [x_axis.range[0] ?? auto_ranges.x[0], x_axis.range[1] ?? auto_ranges.x[1]]
         : auto_ranges.x;
-    const new_y = y_range
-        ? [y_range[0] ?? auto_ranges.y[0], y_range[1] ?? auto_ranges.y[1]]
+    const new_y = y_axis.range
+        ? [y_axis.range[0] ?? auto_ranges.y[0], y_axis.range[1] ?? auto_ranges.y[1]]
         : auto_ranges.y;
-    const x_changed = (x_range !== undefined) !== (ranges.initial.x === auto_ranges.x) ||
-        new_x[0] !== ranges.initial.x[0] || new_x[1] !== ranges.initial.x[1];
-    const y_changed = (y_range !== undefined) !== (ranges.initial.y === auto_ranges.y) ||
-        new_y[0] !== ranges.initial.y[0] || new_y[1] !== ranges.initial.y[1];
+    const new_y2 = y2_axis.range
+        ? [y2_axis.range[0] ?? auto_ranges.y2[0], y2_axis.range[1] ?? auto_ranges.y2[1]]
+        : auto_ranges.y2;
+    // Only update if values changed (prevent infinite loop)
+    const x_changed = new_x[0] !== ranges.current.x[0] ||
+        new_x[1] !== ranges.current.x[1];
+    const y_changed = new_y[0] !== ranges.current.y[0] ||
+        new_y[1] !== ranges.current.y[1];
+    const y2_changed = new_y2[0] !== ranges.current.y2[0] ||
+        new_y2[1] !== ranges.current.y2[1];
     if (x_changed)
         [ranges.initial.x, ranges.current.x] = [new_x, new_x];
     if (y_changed)
         [ranges.initial.y, ranges.current.y] = [new_y, new_y];
+    if (y2_changed)
+        [ranges.initial.y2, ranges.current.y2] = [new_y2, new_y2];
 });
 // Layout: dynamic padding based on tick label widths
 const default_padding = { t: 20, b: 60, l: 60, r: 20 };
 let pad = $state({ ...default_padding, ...padding });
-// Update padding when format or ticks change, but prevent infinite loop
+// Update padding based on tick label widths (untrack breaks circular dependency)
 $effect(() => {
-    const base_pad = { ...default_padding, ...padding };
-    const new_pad = width && height && ticks.y.length
-        ? calc_auto_padding({ base_padding: base_pad, y_ticks: ticks.y, y_format })
-        : base_pad;
-    // Only update if padding actually changed (prevents infinite loop)
+    const current_ticks_y = untrack(() => ticks.y);
+    const current_ticks_y2 = untrack(() => ticks.y2);
+    const new_pad = width && height && current_ticks_y.length
+        ? calc_auto_padding({
+            padding,
+            default_padding,
+            y_axis: { ...y_axis, tick_values: current_ticks_y },
+            y2_axis: { ...y2_axis, tick_values: current_ticks_y2 },
+        })
+        : { ...default_padding, ...padding };
+    // Only update if padding actually changed
     if (pad.t !== new_pad.t || pad.b !== new_pad.b || pad.l !== new_pad.l ||
         pad.r !== new_pad.r)
         pad = new_pad;
 });
 // Scales and data
 let scales = $derived({
-    x: create_scale(x_scale_type, ranges.current.x, [pad.l, width - pad.r]),
-    y: create_scale(y_scale_type, ranges.current.y, [height - pad.b, pad.t]),
+    x: create_scale(x_axis.scale_type ?? `linear`, ranges.current.x, [pad.l, width - pad.r]),
+    y: create_scale(y_axis.scale_type ?? `linear`, ranges.current.y, [height - pad.b, pad.t]),
+    y2: create_scale(y2_axis.scale_type ?? `linear`, ranges.current.y2, [height - pad.b, pad.t]),
 });
 let histogram_data = $derived.by(() => {
     if (!selected_series.length || !width || !height)
@@ -80,27 +121,30 @@ let histogram_data = $derived.by(() => {
         .thresholds(bins);
     return selected_series.map((series_data, series_idx) => {
         const bins_arr = hist_generator(series_data.y);
+        const use_y2 = series_data.y_axis === `y2`;
         return {
+            id: series_data.id ?? series_idx,
             series_idx,
             label: series_data.label || `Series ${series_idx + 1}`,
             color: selected_series.length === 1
-                ? bar_color
+                ? bar.color
                 : extract_series_color(series_data),
             bins: bins_arr,
             max_count: max(bins_arr, (d) => d.length) || 0,
+            y_axis: series_data.y_axis,
+            y_scale: use_y2 ? scales.y2 : scales.y,
         };
     });
 });
 let ticks = $derived({
     x: width && height
-        ? generate_ticks(ranges.current.x, x_scale_type, x_ticks, scales.x, {
-            default_count: 8,
-        })
+        ? generate_ticks(ranges.current.x, x_axis.scale_type ?? `linear`, x_axis.ticks, scales.x, { default_count: 8 })
         : [],
     y: width && height
-        ? generate_ticks(ranges.current.y, y_scale_type, y_ticks, scales.y, {
-            default_count: 6,
-        })
+        ? generate_ticks(ranges.current.y, y_axis.scale_type ?? `linear`, y_axis.ticks, scales.y, { default_count: 6 })
+        : [],
+    y2: width && height && y2_series.length > 0
+        ? generate_ticks(ranges.current.y2, y2_axis.scale_type ?? `linear`, y2_axis.ticks, scales.y2, { default_count: 6 })
         : [],
 });
 let legend_data = $derived(prepare_legend_data(series));
@@ -109,11 +153,11 @@ let hist_points_for_placement = $derived.by(() => {
     if (!width || !height || !histogram_data.length)
         return [];
     const points = [];
-    for (const { bins } of histogram_data) {
+    for (const { bins, y_scale } of histogram_data) {
         for (const bin of bins) {
             if (bin.length > 0) {
                 const bar_x = scales.x((bin.x0 + bin.x1) / 2);
-                const bar_y = scales.y(bin.length);
+                const bar_y = y_scale(bin.length);
                 if (isFinite(bar_x) && isFinite(bar_y)) {
                     // Add multiple points for taller bars to increase their weight
                     const weight = Math.ceil(bin.length / 10); // More points for taller bars
@@ -146,12 +190,25 @@ const handle_zoom = () => {
     const end_x = scales.x.invert(drag_state.current.x);
     const start_y = scales.y.invert(drag_state.start.y);
     const end_y = scales.y.invert(drag_state.current.y);
+    const start_y2 = scales.y2.invert(drag_state.start.y);
+    const end_y2 = scales.y2.invert(drag_state.current.y);
     if (typeof start_x === `number` && typeof end_x === `number`) {
         const dx = Math.abs(drag_state.start.x - drag_state.current.x);
         const dy = Math.abs(drag_state.start.y - drag_state.current.y);
         if (dx > 5 && dy > 5) {
-            ranges.current.x = [Math.min(start_x, end_x), Math.max(start_x, end_x)];
-            ranges.current.y = [Math.min(start_y, end_y), Math.max(start_y, end_y)];
+            // Update axis ranges to trigger reactivity and prevent effect from overriding
+            x_axis = {
+                ...x_axis,
+                range: [Math.min(start_x, end_x), Math.max(start_x, end_x)],
+            };
+            y_axis = {
+                ...y_axis,
+                range: [Math.min(start_y, end_y), Math.max(start_y, end_y)],
+            };
+            y2_axis = {
+                ...y2_axis,
+                range: [Math.min(start_y2, end_y2), Math.max(start_y2, end_y2)],
+            };
         }
     }
 };
@@ -184,11 +241,14 @@ function handle_mouse_down(evt) {
     evt.preventDefault();
 }
 function handle_double_click() {
-    ranges.current = { x: [...ranges.initial.x], y: [...ranges.initial.y] };
+    // Clear axis ranges to reset to auto ranges
+    x_axis = { ...x_axis, range: undefined };
+    y_axis = { ...y_axis, range: undefined };
+    y2_axis = { ...y2_axis, range: undefined };
 }
-function handle_mouse_move(evt, value, count, property) {
+function handle_mouse_move(evt, value, count, property, axis = `y1`) {
     hovered = true;
-    hover_info = { value, count, property };
+    hover_info = { value, count, property, axis };
     change({ value, count, property });
     on_bar_hover?.({ value, count, property, event: evt });
 }
@@ -231,83 +291,13 @@ function toggle_series_visibility(series_idx) {
         }
       }}
     >
-      <!-- Zero lines -->
-      {#if show_zero_lines}
-        {#if ranges.current.x[0] <= 0 && ranges.current.x[1] >= 0}
-          {@const zero_x = scales.x(0)}
-          {#if isFinite(zero_x)}
-            <line
-              y1={pad.t}
-              y2={height - pad.b}
-              x1={zero_x}
-              x2={zero_x}
-              stroke="gray"
-              stroke-width="0.5"
-            />
-          {/if}
-        {/if}
-        {#if y_scale_type === `linear` && ranges.current.y[0] < 0 &&
-        ranges.current.y[1] > 0}
-          {@const zero_y = scales.y(0)}
-          {#if isFinite(zero_y)}
-            <line
-              x1={pad.l}
-              x2={width - pad.r}
-              y1={zero_y}
-              y2={zero_y}
-              stroke="gray"
-              stroke-width="0.5"
-            />
-          {/if}
-        {/if}
-      {/if}
-
-      <!-- Histogram bars -->
-      {#each histogram_data as { bins, color, label }, series_idx (series_idx)}
-        <g class="histogram-series" data-series-idx={series_idx}>
-          {#each bins as bin, bin_idx (bin_idx)}
-            {@const bar_x = scales.x(bin.x0!)}
-            {@const bar_width = Math.max(1, Math.abs(scales.x(bin.x1!) - bar_x))}
-            {@const bar_height = Math.max(0, (height - pad.b) - scales.y(bin.length))}
-            {@const bar_y = scales.y(bin.length)}
-            {@const value = (bin.x0! + bin.x1!) / 2}
-            {#if bar_height > 0}
-              <rect
-                x={bar_x}
-                y={bar_y}
-                width={bar_width}
-                height={bar_height}
-                fill={color}
-                opacity={bar_opacity}
-                stroke={mode === `overlay` ? color : `none`}
-                stroke-width={mode === `overlay` ? bar_stroke_width : 0}
-                role="button"
-                tabindex="0"
-                onmousemove={(evt) => handle_mouse_move(evt, value, bin.length, label)}
-                onmouseleave={() => {
-                  hover_info = null
-                  change(null)
-                  on_bar_hover?.(null)
-                }}
-                onclick={(event) =>
-                on_bar_click?.({ value, count: bin.length, property: label, event })}
-                onkeydown={(event: KeyboardEvent) => {
-                  if ([`Enter`, ` `].includes(event.key)) {
-                    event.preventDefault()
-                    on_bar_click?.({ value, count: bin.length, property: label, event })
-                  }
-                }}
-                style:cursor={on_bar_click ? `pointer` : undefined}
-              />
-            {/if}
-          {/each}
-        </g>
-      {/each}
-
       <!-- Tooltip -->
       {#if hover_info}
         {@const tooltip_x = scales.x(hover_info.value)}
-        {@const tooltip_y = scales.y(hover_info.count)}
+        {@const y_cfg = (hover_info.axis === `y2`) ? y2_axis : y_axis}
+        {@const tooltip_y = (hover_info.axis === `y2` ? scales.y2 : scales.y)(
+        hover_info.count,
+      )}
         {@const tooltip_size = { width: 120, height: mode === `overlay` ? 60 : 40 }}
         {@const tooltip_pos = constrain_tooltip_position(
         tooltip_x,
@@ -327,8 +317,8 @@ function toggle_series_visibility(series_idx) {
             {#if tooltip}
               {@render tooltip(hover_info)}
             {:else}
-              <div>Value: {format_value(hover_info.value, x_format)}</div>
-              <div>Count: {hover_info.count}</div>
+              <div>Value: {format_value(hover_info.value, x_axis.format || `.3~s`)}</div>
+              <div>Count: {format_value(hover_info.count, y_cfg.format || `.3~s`)}</div>
               {#if mode === `overlay`}<div>{hover_info.property}</div>{/if}
             {/if}
           </div>
@@ -351,35 +341,41 @@ function toggle_series_visibility(series_idx) {
           x2={width - pad.r}
           y1={height - pad.b}
           y2={height - pad.b}
-          stroke="var(--border-color, gray)"
+          stroke={x_axis.color || `var(--border-color, gray)`}
           stroke-width="1"
         />
         {#each ticks.x as tick (tick)}
           {@const tick_x = scales.x(tick as number)}
+          {@const custom_label = get_tick_label(tick as number, x_axis.ticks)}
           <g class="tick" transform="translate({tick_x}, {height - pad.b})">
-            {#if x_grid}
+            {#if display.x_grid}
               <line
                 y1={-(height - pad.b - pad.t)}
                 y2="0"
                 stroke="var(--border-color, gray)"
                 stroke-dasharray="4"
-                stroke-width="0.4"
-                {...typeof x_grid === `object` ? x_grid : {}}
+                stroke-width="1"
+                {...x_axis.grid_style ?? {}}
               />
             {/if}
-            <line y1="0" y2="5" stroke="var(--border-color, gray)" stroke-width="1" />
-            <text y="18" text-anchor="middle" fill="var(--text-color)">
-              {format_value(tick, x_format)}
+            <line
+              y1="0"
+              y2="5"
+              stroke={x_axis.color || `var(--border-color, gray)`}
+              stroke-width="1"
+            />
+            <text y="18" text-anchor="middle" fill={x_axis.color || `var(--text-color)`}>
+              {custom_label ?? format_value(tick, x_axis.format)}
             </text>
           </g>
         {/each}
         <text
-          x={(pad.l + width - pad.r) / 2}
-          y={height - 10}
+          x={(pad.l + width - pad.r) / 2 + (x_axis.label_shift?.x ?? 0)}
+          y={height - 10 + (x_axis.label_shift?.y ?? 0)}
           text-anchor="middle"
-          fill="var(--text-color)"
+          fill={x_axis.color || `var(--text-color)`}
         >
-          {x_label}
+          {@html x_axis.label}
         </text>
       </g>
 
@@ -390,73 +386,217 @@ function toggle_series_visibility(series_idx) {
           x2={pad.l}
           y1={pad.t}
           y2={height - pad.b}
-          stroke="var(--border-color, gray)"
+          stroke={y_axis.color || `var(--border-color, gray)`}
           stroke-width="1"
         />
         {#each ticks.y as tick (tick)}
           {@const tick_y = scales.y(tick as number)}
+          {@const custom_label = get_tick_label(tick as number, y_axis.ticks)}
           <g class="tick" transform="translate({pad.l}, {tick_y})">
-            {#if y_grid}
+            {#if display.y_grid}
               <line
                 x1="0"
                 x2={width - pad.l - pad.r}
                 stroke="var(--border-color, gray)"
                 stroke-dasharray="4"
-                stroke-width="0.4"
-                {...typeof y_grid === `object` ? y_grid : {}}
+                stroke-width="1"
+                {...y_axis.grid_style ?? {}}
               />
             {/if}
-            <line x1="-5" x2="0" stroke="var(--border-color, gray)" stroke-width="1" />
+            <line
+              x1="-5"
+              x2="0"
+              stroke={y_axis.color || `var(--border-color, gray)`}
+              stroke-width="1"
+            />
             <text
               x="-10"
               text-anchor="end"
               dominant-baseline="central"
-              fill="var(--text-color)"
+              fill={y_axis.color || `var(--text-color)`}
             >
-              {format_value(tick, y_format)}
+              {custom_label ?? format_value(tick, y_axis.format)}
             </text>
           </g>
         {/each}
-        <text
-          x={15}
-          y={(pad.t + height - pad.b) / 2}
-          text-anchor="middle"
-          fill="var(--text-color)"
-          transform="rotate(-90, 15, {(pad.t + height - pad.b) / 2})"
-        >
-          {y_label}
-        </text>
+        {#if y_axis.label}
+          {@const y_label_x = 15 + (y_axis.label_shift?.x ?? 0)}
+          {@const y_label_y = (pad.t + height - pad.b) / 2 + (y_axis.label_shift?.y ?? 0)}
+          <text
+            x={y_label_x}
+            y={y_label_y}
+            text-anchor="middle"
+            fill={y_axis.color || `var(--text-color)`}
+            transform="rotate(-90, {y_label_x}, {y_label_y})"
+          >
+            {@html y_axis.label}
+          </text>
+        {/if}
       </g>
+
+      <!-- Y2-axis (Right) -->
+      {#if y2_series.length > 0}
+        <g class="y2-axis">
+          <line
+            x1={width - pad.r}
+            x2={width - pad.r}
+            y1={pad.t}
+            y2={height - pad.b}
+            stroke={y2_axis.color || `var(--border-color, gray)`}
+            stroke-width="1"
+          />
+          {#each ticks.y2 as tick (tick)}
+            {@const tick_y = scales.y2(tick as number)}
+            {@const custom_label = get_tick_label(tick as number, y2_axis.ticks)}
+            <g class="tick" transform="translate({width - pad.r}, {tick_y})">
+              {#if display.y2_grid}
+                <line
+                  x1={-(width - pad.l - pad.r)}
+                  x2="0"
+                  stroke="var(--border-color, gray)"
+                  stroke-dasharray="4"
+                  stroke-width="1"
+                  {...y2_axis.grid_style ?? {}}
+                />
+              {/if}
+              <line
+                x1="0"
+                x2="5"
+                stroke={y2_axis.color || `var(--border-color, gray)`}
+                stroke-width="1"
+              />
+              <text
+                x={y2_axis.tick_label_shift?.x ?? 8}
+                y={y2_axis.tick_label_shift?.y ?? 0}
+                text-anchor="start"
+                dominant-baseline="central"
+                fill={y2_axis.color || `var(--text-color)`}
+              >
+                {custom_label ?? format_value(tick, y2_axis.format)}
+              </text>
+            </g>
+          {/each}
+          {#if y2_axis.label}
+            {@const y2_label_x = width - pad.r + 50 + (y2_axis.label_shift?.x ?? 0)}
+            {@const y2_label_y = (pad.t + height - pad.b) / 2 +
+          (y2_axis.label_shift?.y ?? 0)}
+            <text
+              x={y2_label_x}
+              y={y2_label_y}
+              text-anchor="middle"
+              fill={y2_axis.color || `var(--text-color)`}
+              transform="rotate(-90, {y2_label_x}, {y2_label_y})"
+            >
+              {@html y2_axis.label}
+            </text>
+          {/if}
+        </g>
+      {/if}
+
+      <!-- Zero lines -->
+      {#if display.x_zero_line && ranges.current.x[0] <= 0 && ranges.current.x[1] >= 0}
+        {@const x0 = scales.x(0)}
+        {#if isFinite(x0)}
+          <line class="zero-line" x1={x0} x2={x0} y1={pad.t} y2={height - pad.b} />
+        {/if}
+      {/if}
+      {#if display.y_zero_line && (y_axis.scale_type ?? `linear`) === `linear` &&
+        ranges.current.y[0] <= 0 && ranges.current.y[1] >= 0}
+        {@const zero_y = scales.y(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.y_zero_line && y2_series.length > 0 &&
+        (y2_axis.scale_type ?? `linear`) === `linear` &&
+        ranges.current.y2[0] <= 0 && ranges.current.y2[1] >= 0}
+        {@const zero_y2 = scales.y2(0)}
+        {#if isFinite(zero_y2)}
+          <line
+            class="zero-line"
+            x1={pad.l}
+            x2={width - pad.r}
+            y1={zero_y2}
+            y2={zero_y2}
+          />
+        {/if}
+      {/if}
+
+      <!-- Histogram bars -->
+      {#each histogram_data as
+        { id, bins, color, label, y_scale, y_axis },
+        series_idx
+        (id ?? series_idx)
+      }
+        <g class="histogram-series" data-series-idx={series_idx}>
+          {#each bins as bin, bin_idx (bin_idx)}
+            {@const bar_x = scales.x(bin.x0!)}
+            {@const bar_width = Math.max(1, Math.abs(scales.x(bin.x1!) - bar_x))}
+            {@const bar_height = Math.max(0, (height - pad.b) - y_scale(bin.length))}
+            {@const bar_y = y_scale(bin.length)}
+            {@const value = (bin.x0! + bin.x1!) / 2}
+            {#if bar_height > 0}
+              <rect
+                x={bar_x}
+                y={bar_y}
+                width={bar_width}
+                height={bar_height}
+                fill={color}
+                opacity={bar.opacity}
+                stroke={bar.stroke_color}
+                stroke-opacity={bar.stroke_opacity}
+                stroke-width={bar.stroke_width}
+                role="button"
+                tabindex="0"
+                onmousemove={(evt) =>
+                handle_mouse_move(
+                  evt,
+                  value,
+                  bin.length,
+                  label,
+                  (y_axis ?? `y1`) as `y1` | `y2`,
+                )}
+                onmouseleave={() => {
+                  hover_info = null
+                  change(null)
+                  on_bar_hover?.(null)
+                }}
+                onclick={(event) =>
+                on_bar_click?.({ value, count: bin.length, property: label, event })}
+                onkeydown={(event: KeyboardEvent) => {
+                  if ([`Enter`, ` `].includes(event.key)) {
+                    event.preventDefault()
+                    on_bar_click?.({ value, count: bin.length, property: label, event })
+                  }
+                }}
+                style:cursor={on_bar_click ? `pointer` : undefined}
+              />
+            {/if}
+          {/each}
+        </g>
+      {/each}
     </svg>
   {/if}
 
   {#if show_controls}
     <HistogramControls
       toggle_props={controls_toggle_props}
+      pane_props={controls_pane_props}
       bind:show_controls
       bind:controls_open
       bind:bins
       bind:mode
-      bind:bar_opacity
-      bind:bar_stroke_width
-      bind:bar_color
+      bind:bar
       bind:show_legend
-      bind:x_grid
-      bind:y_grid
-      bind:x_scale_type
-      bind:y_scale_type
-      bind:x_ticks
-      bind:y_ticks
-      bind:x_format
-      bind:y_format
       bind:selected_property
-      bind:show_zero_lines
-      bind:x_range
-      bind:y_range
+      bind:x_axis
+      bind:y_axis
+      bind:y2_axis
+      bind:display
       auto_x_range={auto_ranges.x}
       auto_y_range={auto_ranges.y}
+      auto_y2_range={auto_ranges.y2}
       {series}
-      {plot_controls}
     />
   {/if}
 
@@ -468,6 +608,9 @@ function toggle_series_visibility(series_idx) {
       wrapper_style="position: absolute; left: {legend_placement.x}px; top: {legend_placement.y}px; transform: {legend_placement.transform}; {legend?.wrapper_style || ``}"
     />
   {/if}
+
+  <!-- User-provided children (e.g. for custom absolutely-positioned overlays) -->
+  {@render children?.()}
 </div>
 
 <style>
@@ -483,7 +626,7 @@ function toggle_series_visibility(series_idx) {
     width: 100%;
     height: 100%;
   }
-  g:is(.x-axis, .y-axis) .tick text {
+  g:is(.x-axis, .y-axis, .y2-axis) .tick text {
     font-size: var(--tick-font-size, 0.8em); /* shrink tick labels */
   }
   .tooltip {
@@ -508,4 +651,9 @@ function toggle_series_visibility(series_idx) {
     stroke-width: var(--histogram-zoom-rect-stroke-width, 1);
     pointer-events: none;
   }
+  .zero-line {
+    stroke: var(--histogram-zero-line-color, light-dark(black, white));
+    stroke-width: var(--histogram-zero-line-width, 1);
+    opacity: var(--histogram-zero-line-opacity);
+  }
 </style>