interactive-streamlit-bar-plot 0.1.0__py3-none-any.whl

interactive_streamlit_bar_plot-0.1.0.dist-info/METADATA

@@ -0,0 +1,112 @@
+Metadata-Version: 2.4
+Name: interactive-streamlit-bar-plot
+Version: 0.1.0
+Summary: Clickable diverging bars with a live net line for Streamlit
+Author: John Della Rosa
+License-Expression: MIT
+Project-URL: Repository, https://github.com/johndellarosa/interactive-streamlit-bar-plot
+Project-URL: Issues, https://github.com/johndellarosa/interactive-streamlit-bar-plot/issues
+Keywords: streamlit,component,chart,bar-plot,cumulative-net
+Classifier: Development Status :: 3 - Alpha
+Classifier: Programming Language :: Python :: 3
+Classifier: Programming Language :: Python :: 3 :: Only
+Classifier: Operating System :: OS Independent
+Classifier: Topic :: Scientific/Engineering :: Visualization
+Requires-Python: >=3.10
+Description-Content-Type: text/markdown
+License-File: LICENSE
+Requires-Dist: streamlit<2,>=1.51
+Provides-Extra: release
+Requires-Dist: build>=1.2; extra == "release"
+Requires-Dist: twine>=6; extra == "release"
+Dynamic: license-file
+
+# Streamlit Net Bars
+
+A reusable Streamlit component with diverging stacked bars and an overlaid net line.
+Click any bar segment to hide that entire series across all x positions. Toggle
+legend buttons to restore individual series, or select **Show all**.
+Use **Undo** to reverse visibility changes one at a time, including legend
+toggles and Show all. Undo is disabled until a change is made. History is kept
+per chart across Streamlit reruns for the current session.
+
+Positive values stack above the centered zero line; negative values stack below.
+The line is the signed sum of the **visible** series at each position. All hidden
+means a zero line. The symmetric y scale adjusts to the visible contributions.
+
+Toggle **Cumulative net** to show the running signed sum of the visible net
+values, starting at the first x position. For net values `[40, 50, -20]`, the
+cumulative line is `[40, 90, 70]`. Positions use the supplied order, so sort time
+data before passing it in. Bars keep their per-position contributions, and the
+shared axis expands to fit the line. Toggle off to return to per-position net.
+Mode survives reruns; hiding, restoring, and Undo work in either mode. Undo
+continues to reverse visibility changes, independently of the selected mode.
+
+**Copy image** copies a PNG of the current chart, title, visible-series legend,
+and net mode at double resolution. It includes the full plot even when the chart
+scrolls horizontally. Paste into an app that accepts images. Copying requires a
+browser that supports image clipboard writes and a secure context (HTTPS or
+localhost). A **Download PNG** link is offered after copying, and also as a
+fallback if clipboard access is unavailable or denied. Copying does not change
+visibility, mode, or Undo history.
+
+## Run the demo
+
+```powershell
+python -m venv .venv
+.venv\Scripts\python -m pip install -e .
+.venv\Scripts\python -m streamlit run app.py
+```
+
+Once published on PyPI, install with `python -m pip install interactive-streamlit-bar-plot`.
+
+## Use the component
+
+```python
+import streamlit as st
+from streamlit_net_bars import net_bar_chart
+
+result = net_bar_chart(
+    x=["Jan", "Feb", "Mar"],
+    series={"Revenue": [100, 120, 140], "Costs": [-60, -70, -80]},
+    key="cashflow",  # unique, stable key per chart
+    title="Monthly cashflow",
+    height=420,  # plot height in pixels; header and legend add height
+)
+st.write(result.net)      # [40, 50, 60] with all series visible
+st.write(result.hidden)   # names of hidden series
+st.write(result.visible)  # names of visible series
+st.write(result.cumulative)  # whether cumulative mode is selected
+st.write(result.line_values)  # displayed line, including cumulative mode
+```
+
+Pass a mapping of names to equally sized numeric sequences. DataFrame columns
+work with `series={name: df[name].tolist() for name in columns}`. Values must be
+finite; fill or drop missing values before calling. Labels are displayed in the
+provided order; duplicate labels remain distinct positions. Series names are
+their identities, so use stable names when updating data. Visibility survives
+Streamlit reruns; new series start visible and removed series are ignored.
+
+Use `on_change=callback` for a Streamlit callback when visibility or line mode changes. The
+returned net values are recalculated in Python from the current visibility and
+input data. Multiple chart instances are independent when given different keys.
+
+## Development
+
+The frontend is plain JavaScript and SVG, with no Node build or CDN dependency.
+Assets ship inside the Python package. The component uses Streamlit Components
+v2 (Streamlit 1.51 or newer). Bars support Enter/Space and provide native hover
+tooltips. The legend also supports hiding zero-only series. Long charts scroll
+horizontally; long x labels are abbreviated in the plot and shown fully in tooltips.
+
+```powershell
+python -m unittest discover -s tests -v
+Get-Content streamlit_net_bars/frontend/chart.js -Raw | node --input-type=module --check
+```
+
+The demo uses illustrative monthly contributions, not real financial data.
+
+## Releases
+
+See [PUBLISHING.md](PUBLISHING.md) for the GitHub Actions Trusted Publishing
+setup and release procedure. Licensed under MIT; copyright John Della Rosa.

interactive_streamlit_bar_plot-0.1.0.dist-info/RECORD

@@ -0,0 +1,9 @@
+interactive_streamlit_bar_plot-0.1.0.dist-info/licenses/LICENSE,sha256=NlHKkzYNvoR1Y437A4jBqKBcbg9mFTpQasqq7sEHjKo,1072
+streamlit_net_bars/__init__.py,sha256=vRqjVrPZYmStcEEPlmfeDJwmGRexgfCb-8sMv7hWtiU,3571
+streamlit_net_bars/model.py,sha256=0IMTP6JJoZdYdOzY6DlsUB9a7nnw9RfS8rH_VEP20Ag,1527
+streamlit_net_bars/frontend/chart.css,sha256=0PxyyG2cln6sICf7ApYiIDolbFIWQmawNJnaw4CtOSU,2533
+streamlit_net_bars/frontend/chart.js,sha256=g3bdBMXpQ7SmwXgUrLbMNoPu3tF-iAxhNj32OzG4URE,12924
+interactive_streamlit_bar_plot-0.1.0.dist-info/METADATA,sha256=jZjd-6IYDgqg_jcg9Pb5eKWu3SHzGG0br4yMpmzIcc4,5173
+interactive_streamlit_bar_plot-0.1.0.dist-info/WHEEL,sha256=mOdXR9C3wMVov7cSY8PY-XCzo3SmmWCHvGQr5csJoao,91
+interactive_streamlit_bar_plot-0.1.0.dist-info/top_level.txt,sha256=YuL85to3_3BqXJg-___fxipmXDJV9Oi7f4BKPc92gho,19
+interactive_streamlit_bar_plot-0.1.0.dist-info/RECORD,,

interactive_streamlit_bar_plot-0.1.0.dist-info/WHEEL

@@ -0,0 +1,5 @@
+Wheel-Version: 1.0
+Generator: setuptools (84.2.1)
+Root-Is-Purelib: true
+Tag: py3-none-any
+

interactive_streamlit_bar_plot-0.1.0.dist-info/licenses/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 John Della Rosa
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

interactive_streamlit_bar_plot-0.1.0.dist-info/top_level.txt

@@ -0,0 +1 @@
+streamlit_net_bars

streamlit_net_bars/__init__.py

@@ -0,0 +1,88 @@
+"""Streamlit component with clickable series and an overlaid net line."""
+
+from pathlib import Path
+from collections.abc import Callable, Mapping, Sequence
+from dataclasses import dataclass
+from hashlib import sha256
+
+from .model import cumulative_values, net_values, prepare_data
+
+__all__ = ["net_bar_chart", "NetBarResult"]
+
+
+@dataclass(frozen=True)
+class NetBarResult:
+    hidden: list[str]
+    visible: list[str]
+    net: list[float]
+    cumulative: bool = False
+
+    @property
+    def line_values(self) -> list[float]:
+        """Values currently displayed by the line; net stays per-position."""
+        return cumulative_values(self.net) if self.cumulative else list(self.net)
+
+
+_renderer = None
+_renderer_assets = None
+
+
+def net_bar_chart(
+    x: Sequence,
+    series: Mapping[str, Sequence[float]],
+    *,
+    key: str,
+    title: str = "Contributions & net",
+    height: int = 460,
+    on_change: Callable | None = None,
+) -> NetBarResult:
+    """Render diverging stacked bars. Click any segment to hide its series.
+
+    Positive values stack above zero; negative values stack below zero.
+    The line sums all visible series at each x position. Legend buttons toggle
+    series and Show all resets visibility. Undo reverses visibility changes.
+    The Cumulative net toggle displays a running total in the supplied x order.
+    A stable, unique key is required.
+    Missing, non-finite, and non-numeric values raise ValueError.
+    """
+    import streamlit as st
+
+    global _renderer, _renderer_assets
+    if not isinstance(key, str) or not key:
+        raise ValueError("key must be a non-empty string unique to this chart.")
+    if not isinstance(height, int) or not 280 <= height <= 1000:
+        raise ValueError("height must be an integer between 280 and 1000.")
+    data = prepare_data(x, series)
+    names = [s["name"] for s in data["series"]]
+    state = st.session_state.get(key, {})
+    hidden = [name for name in state.get("hidden", []) if name in names]
+    cumulative = bool(state.get("cumulative", False))
+    # Historical snapshots refer to series identities, not their numeric data.
+    history = [[name for name in snapshot if name in names]
+               for snapshot in state.get("history", [])]
+    assets = Path(__file__).parent / "frontend"
+    css = (assets / "chart.css").read_text(encoding="utf-8")
+    js = (assets / "chart.js").read_text(encoding="utf-8")
+    asset_version = sha256((css + "\0" + js).encode("utf-8")).hexdigest()[:16]
+    # Imported modules persist between reruns. Refresh the renderer when assets
+    # change, and version its identity so clients fetch the new definition.
+    if _renderer is None or _renderer_assets != asset_version:
+        _renderer = st.components.v2.component(
+            f"streamlit_net_bars_{asset_version}",
+            html='<div class="net-bars"></div>',
+            css=css,
+            js=js,
+        )
+        _renderer_assets = asset_version
+    result = _renderer(
+        key=key,
+        data={**data, "hidden": hidden, "history": history, "cumulative": cumulative,
+              "title": str(title), "height": height},
+        default={"hidden": hidden, "history": history, "cumulative": cumulative},
+        on_history_change=lambda: None,
+        on_hidden_change=on_change or (lambda: None),
+        on_cumulative_change=on_change or (lambda: None),
+    )
+    hidden = [name for name in (result.hidden or []) if name in names]
+    return NetBarResult(hidden, [n for n in names if n not in hidden],
+                        net_values(data, hidden), bool(result.cumulative))

streamlit_net_bars/frontend/chart.css

@@ -0,0 +1,32 @@
+.net-bars { font-family: var(--st-font, sans-serif); color: var(--st-text-color, #17253c); }
+* { box-sizing: border-box; }
+.card { border: 1px solid color-mix(in srgb, currentColor 16%, transparent); border-radius: 16px; padding: 22px; background: var(--st-background-color, #fff); }
+.heading { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
+.actions { display: flex; flex-wrap: wrap; gap: 8px; }
+.mode-toggle[aria-pressed="true"] { background: color-mix(in srgb, #3b82b5 18%, transparent); border-color: #3b82b5; }
+.mode-toggle[aria-pressed="false"] { opacity: 1; text-decoration: none; }
+h3 { margin: 0; font-size: 19px; font-weight: 650; }
+.hint { opacity: .65; font-size: 13px; margin: 8px 0 20px; line-height: 1.5; }
+.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
+button { color: inherit; background: transparent; font: inherit; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: 8px; padding: 7px 11px; cursor: pointer; font-size: 13px; }
+button:hover { background: color-mix(in srgb, currentColor 7%, transparent); }
+button:focus-visible, .bar:focus-visible { outline: 3px solid #568bf5; outline-offset: 3px; }
+button[aria-pressed="false"] { opacity: .5; text-decoration: line-through; }
+button:disabled { cursor: default; opacity: .4; }
+.swatch { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 7px; }
+.net-key { font-size: 13px; margin-left: 8px; }
+.net-key::before { content: ''; display: inline-block; width: 20px; border-top: 3px solid currentColor; vertical-align: middle; margin-right: 7px; }
+.plot-scroll { overflow-x: auto; }
+svg { width: 100%; display: block; overflow: visible; }
+svg text { fill: currentColor; font-size: 12px; }
+.grid { stroke: currentColor; opacity: .1; }
+.zero { stroke: currentColor; opacity: .4; }
+.bar { cursor: pointer; transition: opacity .12s; }
+.bar:hover { opacity: .7; }
+.net-line { stroke: currentColor; stroke-width: 3; fill: none; pointer-events: none; stroke-linejoin: round; stroke-linecap: round; }
+.net-dot { fill: var(--st-background-color, white); stroke: currentColor; stroke-width: 2.5; }
+.status { margin: 12px 0 0; font-size: 12px; opacity: .65; }
+.copy-feedback { margin: 8px 0 0; font-size: 13px; }
+.copy-feedback:empty { display: none; }
+.copy-feedback a { color: inherit; text-decoration: underline; }
+@media (max-width: 600px) { .card { padding: 14px; } .heading { align-items: flex-start; flex-direction: column; } }

streamlit_net_bars/frontend/chart.js

@@ -0,0 +1,250 @@
+export default function(component) {
+  const {parentElement, data, setStateValue} = component;
+  const root = parentElement.querySelector('.net-bars');
+  const colors = ['#3b82b5', '#55b6a4', '#9c86cf', '#ed9b55', '#dc7081', '#a39567', '#6a97d6', '#b76bad'];
+  let hidden = new Set(data.hidden);
+  let cumulative = Boolean(data.cumulative);
+  const history = (data.history || []).map(snapshot => [...snapshot]);
+  function publish() {
+    draw();
+    setStateValue('history', history.map(snapshot => [...snapshot]));
+    setStateValue('hidden', [...hidden]);
+  }
+  const ns = 'http://www.w3.org/2000/svg';
+  const make = (tag, attrs = {}, text) => {
+    const node = document.createElement(tag);
+    for (const [k,v] of Object.entries(attrs)) node.setAttribute(k, v);
+    if (text !== undefined) node.textContent = text;
+    return node;
+  };
+  const shape = (tag, attrs = {}, text) => {
+    const node = document.createElementNS(ns, tag);
+    for (const [k,v] of Object.entries(attrs)) node.setAttribute(k, v);
+    if (text !== undefined) node.textContent = text;
+    return node;
+  };
+  const fmt = value => new Intl.NumberFormat(undefined, {maximumFractionDigits: 2, notation: Math.abs(value) >= 10000 ? 'compact' : 'standard'}).format(value);
+  function toggle(name) {
+    history.push([...hidden]);
+    if (hidden.has(name)) hidden.delete(name); else hidden.add(name);
+    publish();
+  }
+  function draw() {
+    root.replaceChildren();
+    const card = make('div', {class: 'card'});
+    const heading = make('div', {class: 'heading'});
+    heading.append(make('h3', {}, data.title));
+    const actions = make('div', {class: 'actions'});
+    const copy = make('button', {type: 'button', title: 'Copy the current chart as a PNG image'}, 'Copy image');
+    const copyFeedback = make('p', {class: 'copy-feedback', 'aria-live': 'polite'});
+    function offerDownload(blob) {
+      const download = make('a', {href: '#'}, 'Download PNG');
+      download.onclick = event => {
+        event.preventDefault();
+        const url = URL.createObjectURL(blob);
+        const link = make('a', {href: url, download: 'net-bars.png'});
+        link.click();
+        setTimeout(() => URL.revokeObjectURL(url), 1000);
+      };
+      copyFeedback.append(document.createTextNode(' '), download);
+    }
+    copy.onclick = async () => {
+      copy.disabled = true;
+      copyFeedback.replaceChildren(document.createTextNode('Copying image…'));
+      let png;
+      try {
+        // Start writing during the click gesture. The image promise lets browsers
+        // retain user activation while SVG rasterization finishes asynchronously.
+        png = chartPng(svg, lineLabel);
+        if (!navigator.clipboard?.write || typeof ClipboardItem === 'undefined') {
+          throw new Error('Image clipboard unavailable');
+        }
+        await navigator.clipboard.write([new ClipboardItem({'image/png': png})]);
+        copyFeedback.textContent = 'Image copied. Paste it into your document or message.';
+        offerDownload(await png);
+      } catch (error) {
+        try {
+          const blob = await png;
+          if (!blob) throw error;
+          copyFeedback.textContent = 'Could not copy the image. You can download it instead: ';
+          offerDownload(blob);
+        } catch {
+          copyFeedback.textContent = 'Could not create the image. Please try again.';
+        }
+      } finally {
+        copy.disabled = false;
+      }
+    };
+    const mode = make('button', {type: 'button', 'aria-pressed': String(cumulative),
+      class: 'mode-toggle', title: 'Show a running total in x-axis order'}, 'Cumulative net');
+    mode.onclick = () => {
+      cumulative = !cumulative;
+      draw();
+      setStateValue('cumulative', cumulative);
+      root.querySelector('.mode-toggle')?.focus();
+    };
+    const undo = make('button', {type: 'button', title: 'Undo the last visibility change'}, 'Undo');
+    undo.disabled = history.length === 0;
+    undo.onclick = () => {
+      if (!history.length) return;
+      hidden = new Set(history.pop());
+      publish();
+    };
+    const reset = make('button', {type: 'button'}, 'Show all');
+    reset.disabled = hidden.size === 0;
+    reset.onclick = () => {
+      if (!hidden.size) return;
+      history.push([...hidden]);
+      hidden.clear();
+      publish();
+    };
+    actions.append(copy, mode, undo, reset);
+    heading.append(actions);
+    card.append(heading, make('p', {class: 'hint'}, 'Click a bar to hide its series. Use the legend to bring it back. ' +
+      (cumulative ? 'The line shows the running net total from the first position.' : 'The line shows the net of visible series at each position.')));
+    const legend = make('div', {class: 'legend', role: 'group', 'aria-label': 'Series visibility'});
+    data.series.forEach((s, j) => {
+      const button = make('button', {type: 'button', 'aria-pressed': String(!hidden.has(s.name)), 'aria-label': `${hidden.has(s.name) ? 'Show' : 'Hide'} ${s.name}`});
+      const swatch = make('span', {class: 'swatch'});
+      swatch.style.background = colors[j % colors.length];
+      button.append(swatch, document.createTextNode(s.name));
+      button.onclick = () => toggle(s.name);
+      legend.append(button);
+    });
+    const lineLabel = cumulative ? 'Cumulative net' : 'Net';
+    legend.append(make('span', {class: 'net-key'}, lineLabel));
+    card.append(legend);
+    const width = Math.max(600, data.x.length * 65);
+    const height = data.height;
+    const left = 70, right = 28, top = 28, bottom = 54;
+    const plotW = width - left - right, plotH = height - top - bottom;
+    const visible = data.series.filter(s => !hidden.has(s.name));
+    const net = data.x.map((_,i) => visible.reduce((sum,s) => sum + s.values[i], 0));
+    let running = 0;
+    const line = cumulative ? net.map(value => (running += value)) : net;
+    const pos = data.x.map((_,i) => visible.reduce((sum,s) => sum + Math.max(0,s.values[i]), 0));
+    const neg = data.x.map((_,i) => visible.reduce((sum,s) => sum + Math.min(0,s.values[i]), 0));
+    // Keep a symmetric scale so the zero line remains in the center.
+    const extent = Math.max(1, ...pos, ...neg.map(v => -v), ...line.map(Math.abs)) * 1.12;
+    const y = v => top + plotH * (extent - v) / (2 * extent);
+    const step = plotW / data.x.length;
+    const x = i => left + step * (i + .5);
+    const svg = shape('svg', {viewBox: `0 0 ${width} ${height}`, role: 'group', 'aria-label': data.title});
+    svg.style.minWidth = `${width}px`;
+    svg.append(shape('title', {}, 'Interactive contributions and net. Bar segments are buttons; press Enter or Space to hide a series.'));
+    for (let tick = -2; tick <= 2; tick++) {
+      const value = extent * tick / 2;
+      svg.append(shape('line', {x1: left, x2: width-right, y1: y(value), y2: y(value), class: tick === 0 ? 'zero' : 'grid'}));
+      svg.append(shape('text', {x: left-10, y: y(value)+4, 'text-anchor': 'end'}, fmt(value)));
+    }
+    const positive = data.x.map(() => 0), negative = data.x.map(() => 0);
+    data.series.forEach((s,j) => {
+      if (hidden.has(s.name)) return;
+      s.values.forEach((value,i) => {
+        const stack = value >= 0 ? positive : negative;
+        const from = stack[i];
+        stack[i] += value;
+        if (value === 0) return;
+        const label = `${s.name}, ${data.x[i]}: ${fmt(value)}. Click to hide ${s.name}.`;
+        const rect = shape('rect', {x: x(i)-step*.31, y: y(Math.max(from,stack[i])), width: step*.62, height: Math.abs(y(from)-y(stack[i])), fill: colors[j % colors.length], class: 'bar', tabindex: 0, role: 'button', 'aria-label': label});
+        rect.append(shape('title', {}, label));
+        rect.onclick = () => { toggle(s.name); focusLegend(s.name); };
+        rect.onkeydown = e => {if (e.key === 'Enter' || e.key === ' ') {e.preventDefault(); toggle(s.name); focusLegend(s.name);}};
+        svg.append(rect);
+      });
+    });
+    svg.append(shape('polyline', {points: line.map((v,i) => `${x(i)},${y(v)}`).join(' '), class: 'net-line'}));
+    line.forEach((v,i) => {
+      const dot = shape('circle', {cx: x(i), cy: y(v), r: 4, class: 'net-dot', tabindex: 0, 'aria-label': `${data.x[i]} ${lineLabel.toLowerCase()}: ${fmt(v)}`});
+      dot.append(shape('title', {}, `${data.x[i]} · ${lineLabel}: ${fmt(v)}`));
+      svg.append(dot);
+      svg.append(shape('text', {x: x(i), y: height-20, 'text-anchor': 'middle'}, data.x[i].length > 12 ? data.x[i].slice(0,11)+'…' : data.x[i]));
+    });
+    const scroll = make('div', {class: 'plot-scroll'});
+    scroll.append(svg);
+    card.append(scroll, make('p', {class: 'status', role: 'status', 'aria-live': 'polite'}, visible.length ? `${visible.length} of ${data.series.length} series visible · ` +
+      (cumulative ? 'Cumulative net = running sum of visible net values in x-axis order' : 'Net = sum of visible values at each position') : 'All series hidden · Net is zero. Restore a series using the legend or Show all.'));
+    card.append(copyFeedback);
+    root.append(card);
+  }
+  async function chartPng(svg, lineLabel) {
+    const plot = svg.cloneNode(true);
+    // SVG images cannot inherit the shadow root's CSS. Freeze resolved styles,
+    // including theme colors, so the PNG matches the chart and works offline.
+    const sourceNodes = [svg, ...svg.querySelectorAll('*')];
+    const cloneNodes = [plot, ...plot.querySelectorAll('*')];
+    const properties = ['fill', 'stroke', 'stroke-width', 'stroke-linejoin',
+      'stroke-linecap', 'opacity', 'font-family', 'font-size', 'font-weight', 'color'];
+    sourceNodes.forEach((node, i) => {
+      const computed = getComputedStyle(node);
+      cloneNodes[i].removeAttribute('style');
+      for (const property of properties) {
+        cloneNodes[i].style.setProperty(property, computed.getPropertyValue(property));
+      }
+      cloneNodes[i].removeAttribute('tabindex');
+    });
+    const width = svg.viewBox.baseVal.width;
+    const height = svg.viewBox.baseVal.height;
+    const exportWidth = width + 40;
+    const textColor = getComputedStyle(root).color;
+    const background = getComputedStyle(root.querySelector('.card')).backgroundColor;
+    const imageSvg = shape('svg', {xmlns: ns, width: exportWidth});
+    imageSvg.append(shape('rect', {width: '100%', height: '100%', fill: background}));
+    const text = (x, y, label, size = 13) => shape('text', {
+      x, y, fill: textColor, 'font-family': 'Arial, sans-serif', 'font-size': size,
+    }, label);
+    imageSvg.append(text(24, 32, data.title, 20));
+    let legendX = 24, legendY = 62;
+    const measurement = document.createElement('canvas').getContext('2d');
+    measurement.font = '13px Arial';
+    const entries = data.series.map((s,i) => ({label: s.name, color: colors[i % colors.length], hidden: hidden.has(s.name)}))
+      .filter(s => !s.hidden);
+    entries.push({label: lineLabel, color: textColor});
+    entries.forEach(entry => {
+      const entryWidth = measurement.measureText(entry.label).width + 40;
+      if (legendX + entryWidth > exportWidth - 24 && legendX > 24) {
+        legendX = 24;
+        legendY += 24;
+      }
+      imageSvg.append(shape('rect', {x: legendX, y: legendY-9, width: 10, height: 10, rx: 2, fill: entry.color}));
+      imageSvg.append(text(legendX+17, legendY, entry.label));
+      legendX += entryWidth;
+    });
+    const plotTop = legendY + 20;
+    plot.setAttribute('x', '20');
+    plot.setAttribute('y', String(plotTop));
+    plot.setAttribute('width', String(width));
+    plot.setAttribute('height', String(height));
+    imageSvg.append(plot);
+    const exportHeight = plotTop + height + 30;
+    imageSvg.setAttribute('height', String(exportHeight));
+    imageSvg.setAttribute('viewBox', `0 0 ${exportWidth} ${exportHeight}`);
+    imageSvg.append(text(24, exportHeight-14, `${data.series.length-hidden.size} of ${data.series.length} series visible · ${lineLabel}`));
+    const blob = new Blob([new XMLSerializer().serializeToString(imageSvg)], {type: 'image/svg+xml;charset=utf-8'});
+    const url = URL.createObjectURL(blob);
+    try {
+      const image = new Image();
+      await new Promise((resolve, reject) => {
+        image.onload = resolve;
+        image.onerror = () => reject(new Error('SVG image could not be loaded'));
+        image.src = url;
+      });
+      const canvas = document.createElement('canvas');
+      canvas.width = exportWidth * 2;
+      canvas.height = exportHeight * 2;
+      const context = canvas.getContext('2d');
+      context.scale(2, 2);
+      context.drawImage(image, 0, 0, exportWidth, exportHeight);
+      return await new Promise((resolve, reject) => canvas.toBlob(
+        value => value ? resolve(value) : reject(new Error('PNG encoding failed')), 'image/png'));
+    } finally {
+      URL.revokeObjectURL(url);
+    }
+  }
+  function focusLegend(name) {
+    const buttons = root.querySelectorAll('.legend button');
+    const index = data.series.findIndex(s => s.name === name);
+    buttons[index]?.focus();
+  }
+  draw();
+}

streamlit_net_bars/model.py

@@ -0,0 +1,36 @@
+"""Validation and net calculations, independent of Streamlit."""
+
+import math
+from collections.abc import Mapping, Sequence
+from numbers import Real
+from itertools import accumulate
+
+
+def prepare_data(x: Sequence, series: Mapping) -> dict:
+    labels = [str(label) for label in x]
+    if not labels:
+        raise ValueError("x must contain at least one label.")
+    if not isinstance(series, Mapping) or not series:
+        raise ValueError("series must be a non-empty mapping of names to values.")
+    traces = []
+    for name, values in series.items():
+        if not isinstance(name, str) or not name.strip():
+            raise ValueError("Series names must be non-empty strings.")
+        values = list(values)
+        if len(values) != len(labels):
+            raise ValueError(f"Series {name!r} must have {len(labels)} values.")
+        if any(isinstance(v, bool) or not isinstance(v, Real) or not math.isfinite(v) for v in values):
+            raise ValueError(f"Series {name!r} must contain finite numbers (no missing values).")
+        traces.append({"name": name, "values": [float(v) for v in values]})
+    return {"x": labels, "series": traces}
+
+
+def net_values(data: dict, hidden=()) -> list[float]:
+    hidden = set(hidden)
+    return [sum(s["values"][i] for s in data["series"] if s["name"] not in hidden)
+            for i in range(len(data["x"]))]
+
+
+def cumulative_values(values: Sequence[float]) -> list[float]:
+    """Running signed total in the caller's x-axis order."""
+    return list(accumulate(values))