plotjs 0.0.6__tar.gz → 0.0.7__tar.gz

plotjs-0.0.7/.github/workflows/tests-browser.yaml

@@ -0,0 +1,42 @@
+name: Tests Browser
+
+on:
+  pull_request:
+    branches: [main]
+  push:
+    branches: [main]
+
+jobs:
+  browser-tests:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        python-version: ["3.10", "3.13"]
+    env:
+      UV_PYTHON: ${{ matrix.python-version }}
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install uv
+        uses: astral-sh/setup-uv@v5
+        with:
+          enable-cache: true
+
+      - name: Install the project
+        run: uv sync --all-groups
+
+      - name: Install Playwright browsers
+        run: uv run playwright install --with-deps chromium
+
+      - name: Run browser tests
+        run: uv run pytest tests/test-browser/ -v
+
+      - name: Upload test artifacts on failure
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: browser-test-artifacts-${{ matrix.python-version }}
+          path: |
+            /tmp/pytest-of-*/
+          retention-days: 7

{plotjs-0.0.6 → plotjs-0.0.7}/.github/workflows/tests-python.yaml

@@ -26,5 +26,5 @@ jobs:
       - name: Install the project
         run: uv sync --all-groups
 
-      - name: Run tests
-        run: uv run pytest
+      - name: Run unit tests (excluding browser tests)
+        run: uv run pytest tests/test-python/ -v

{plotjs-0.0.6 → plotjs-0.0.7}/AGENTS.md

@@ -9,7 +9,7 @@ PlotJS is a Python package that transforms static matplotlib charts into interac
 ## Quick Architecture
 
 ```
-Matplotlib Figure → SVG Export (Python) → HTML Template (Jinja2) → Interactive Browser (D3.js)
+Matplotlib Figure → SVG Export (Python) → HTML Template (Jinja2) → Interactive Browser
 ```
 
 ### Workflow:
@@ -53,7 +53,7 @@ Matplotlib Figure → SVG Export (Python) → HTML Template (Jinja2) → Interac
 **`template.html`** - Jinja2 template structure
 
 - Injects: `{{ svg }}`, `{{ default_css }}`, `{{ additional_css }}`, `{{ js_parser }}`, `{{ plot_data_json }}`
-- Creates tooltip container and D3-based event handling
+- Creates tooltip container and event handling
 
 **`plotparser.js`** - `PlotSVGParser` JavaScript class
 
@@ -156,10 +156,6 @@ docs/                        # Comprehensive documentation
 - jinja2 >= 3.0.0 (HTML templating)
 - narwhals >= 2.0.0 (dataframe abstraction)
 
-**JavaScript (via CDN):**
-
-- d3 v7.9.0 (DOM manipulation via d3-selection)
-
 **Python Version:** Requires 3.10+
 
 ## Critical Patterns & Limitations

{plotjs-0.0.6/plotjs.egg-info → plotjs-0.0.7}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: plotjs
-Version: 0.0.6
+Version: 0.0.7
 Summary: Turn static matplotlib charts into interactive web visualizations
 Author-email: Joseph Barbier <joseph.barbierdarnal@mail.com>
 License-Expression: MIT

{plotjs-0.0.6 → plotjs-0.0.7}/package.json

@@ -5,7 +5,6 @@
     "docs:js": "jsdoc2md plotjs/static/plotparser.js > docs/developers/svg-parser-reference.md"
   },
   "devDependencies": {
-    "d3-selection": "^3.0.0",
     "jsdoc": "^4.0.4",
     "jsdoc-to-markdown": "^9.1.2",
     "jsdom": "^24.0.0"

{plotjs-0.0.6 → plotjs-0.0.7}/plotjs/__init__.py

@@ -1,6 +1,6 @@
 from .main import PlotJS
 
-__version__ = "0.0.6"
+__version__ = "0.0.7"
 __all__: list[str] = [
     "PlotJS",
 ]

{plotjs-0.0.6 → plotjs-0.0.7}/plotjs/main.py

@@ -72,7 +72,7 @@ class PlotJS:
 
         self._js_parser = _get_and_sanitize_js(
             file_path=JS_PARSER_PATH,
-            after_pattern=r"class PlotSVGParser.*",
+            after_pattern=r"class Selection.*",
         )
 
         rnd = random.Random(22022001)

{plotjs-0.0.6 → plotjs-0.0.7}/plotjs/static/plotparser.js

@@ -1,4 +1,136 @@
-import * as d3 from "d3-selection";
+/**
+ * Lightweight Selection wrapper that mimics d3-selection's chainable API.
+ * Provides basic DOM manipulation methods for working with SVG elements.
+ */
+class Selection {
+  constructor(elements) {
+    this.elements = Array.isArray(elements) ? elements : [elements];
+  }
+
+  select(selector) {
+    const first = this.elements[0];
+    return first
+      ? new Selection(first.querySelector(selector))
+      : new Selection([]);
+  }
+
+  selectAll(selector) {
+    const matched = [];
+    this.elements.forEach((el) => {
+      if (el && el.querySelectorAll) {
+        matched.push(...el.querySelectorAll(selector));
+      }
+    });
+    return new Selection(matched);
+  }
+
+  attr(name, value) {
+    if (arguments.length === 1) {
+      return this.elements[0]?.getAttribute(name);
+    }
+    this.elements.forEach((el) => el?.setAttribute(name, value));
+    return this;
+  }
+
+  classed(name, add) {
+    if (arguments.length === 1) {
+      return this.elements[0]?.classList.contains(name);
+    }
+    this.elements.forEach((el) => {
+      if (add) el?.classList.add(name);
+      else el?.classList.remove(name);
+    });
+    return this;
+  }
+
+  style(name, value) {
+    if (arguments.length === 0) {
+      return this.elements[0]?.style[name];
+    }
+    this.elements.forEach((el) => {
+      if (el) el.style[name] = value;
+    });
+    return this;
+  }
+
+  html(content) {
+    if (arguments.length === 0) {
+      return this.elements[0]?.innerHTML;
+    }
+    this.elements.forEach((el) => {
+      if (el) el.innerHTML = content;
+    });
+    return this;
+  }
+
+  on(event, handler) {
+    this.elements.forEach((el) => {
+      if (el) el.addEventListener(event, handler);
+    });
+    return this;
+  }
+
+  filter(predicate) {
+    const filtered = this.elements.filter((el, i) =>
+      predicate.call(el, null, i),
+    );
+    return new Selection(filtered);
+  }
+
+  each(callback) {
+    this.elements.forEach((el, i) => {
+      callback.call(el, null, i);
+    });
+    return this;
+  }
+
+  nodes() {
+    return this.elements;
+  }
+
+  size() {
+    return this.elements.length;
+  }
+
+  empty() {
+    return this.elements.length === 0;
+  }
+}
+
+/**
+ * Create a Selection from a DOM element or selector string.
+ *
+ * @param {string|Element} selector - CSS selector string or DOM element
+ * @returns {Selection} New Selection instance
+ */
+function select(selector) {
+  const element =
+    typeof selector === "string" ? document.querySelector(selector) : selector;
+  return new Selection(element ? [element] : []);
+}
+
+/**
+ * Get mouse position relative to an SVG element.
+ *
+ * @param {MouseEvent} event - The mouse event
+ * @param {Element|Selection} svgElement - The SVG element or Selection
+ * @returns {number[]} [x, y] coordinates relative to the SVG
+ */
+function getPointerPosition(event, svgElement) {
+  const svg =
+    svgElement instanceof Selection ? svgElement.nodes()[0] : svgElement;
+
+  if (svg && svg.createSVGPoint) {
+    const point = svg.createSVGPoint();
+    point.x = event.clientX;
+    point.y = event.clientY;
+    const transformed = point.matrixTransform(svg.getScreenCTM().inverse());
+    return [transformed.x, transformed.y];
+  }
+
+  const rect = svg.getBoundingClientRect();
+  return [event.clientX - rect.left, event.clientY - rect.top];
+}
 
 /**
  * Core utility for parsing and interacting with matplotlib-generated SVG outputs.
@@ -16,14 +148,14 @@ export default class PlotSVGParser {
   /**
    * Create a new parser bound to an SVG figure.
    *
-   * @param {d3.Selection} svg - D3 selection of the target SVG element (e.g. the entire plot).
-   * @param {d3.Selection} tooltip - D3 selection of the tooltip container (e.g. a div).
+   * @param {Element|Selection} svg - The target SVG element or Selection (e.g. the entire plot).
+   * @param {Element|Selection} tooltip - The tooltip container element or Selection (e.g. a div).
    * @param {number} tooltip_x_shift - Horizontal offset for tooltip positioning.
    * @param {number} tooltip_y_shift - Vertical offset for tooltip positioning.
    */
   constructor(svg, tooltip, tooltip_x_shift, tooltip_y_shift) {
-    this.svg = svg;
-    this.tooltip = tooltip;
+    this.svg = svg instanceof Selection ? svg : select(svg);
+    this.tooltip = tooltip instanceof Selection ? tooltip : select(tooltip);
     this.tooltip_x_shift = tooltip_x_shift;
     this.tooltip_y_shift = tooltip_y_shift;
   }
@@ -31,16 +163,16 @@ export default class PlotSVGParser {
   /**
    * Find bar elements (`patch` groups with clipping) inside a given axes.
    *
-   * @param {d3.Selection} svg - D3 selection of the SVG element.
+   * @param {Selection} svg - Selection of the SVG element.
    * @param {string} axes_class - ID of the axes group (e.g. "axes_1").
-   * @returns {d3.Selection} D3 selection of bar elements.
+   * @returns {Selection} Selection of bar elements.
    */
   findBars(svg, axes_class) {
     // select all #patch within the specific axes
     const bars = svg
       .selectAll(`g#${axes_class} g[id^="patch"]`)
       .filter(function () {
-        const path = d3.select(this).select("path");
+        const path = select(this).select("path");
         // that have a clip-path attribute
         const clip = path.attr("clip-path");
         // starting with "url("
@@ -58,14 +190,14 @@ export default class PlotSVGParser {
    * Handles both `<use>` and `<path>` fallback cases,
    * and assigns `data-group` attributes based on tooltip groups.
    *
-   * @param {d3.Selection} svg - D3 selection of the SVG element.
+   * @param {Selection} svg - Selection of the SVG element.
    * @param {string} axes_class - ID of the axes group (e.g. "axes_1").
    * @param {string[]} tooltip_groups - Group identifiers for tooltips, parallel to points.
-   * @returns {d3.Selection} D3 selection of point elements.
+   * @returns {Selection} Selection of point elements.
    */
   findPoints(svg, axes_class, tooltip_groups) {
     let points = svg.selectAll(
-      `g#${axes_class} g[id^="PathCollection"] g[clip-path] use`
+      `g#${axes_class} g[id^="PathCollection"] g[clip-path] use`,
     );
 
     if (points.empty()) {
@@ -74,7 +206,7 @@ export default class PlotSVGParser {
     }
 
     points.each(function (_, i) {
-      d3.select(this).attr("data-group", tooltip_groups[i]);
+      select(this).attr("data-group", tooltip_groups[i]);
     });
     points.attr("class", "point plot-element");
 
@@ -86,9 +218,9 @@ export default class PlotSVGParser {
    * Find line elements (`line2d` paths) inside a given axes,
    * excluding axis grid lines.
    *
-   * @param {d3.Selection} svg - D3 selection of the SVG element.
+   * @param {Selection} svg - Selection of the SVG element.
    * @param {string} axes_class - ID of the axes group.
-   * @returns {d3.Selection} D3 selection of line elements.
+   * @returns {Selection} Selection of line elements.
    */
   findLines(svg, axes_class) {
     // select all <path> of Line2D elements within the specific axes
@@ -107,14 +239,14 @@ export default class PlotSVGParser {
   /**
    * Find filled area elements (`FillBetweenPolyCollection` paths) inside a given axes.
    *
-   * @param {d3.Selection} svg - D3 selection of the SVG element.
+   * @param {Selection} svg - Selection of the SVG element.
    * @param {string} axes_class - ID of the axes group.
-   * @returns {d3.Selection} D3 selection of area elements.
+   * @returns {Selection} Selection of area elements.
    */
   findAreas(svg, axes_class) {
     // select all <path> of FillBetweenPolyCollection elements within the specific axes
     const areas = svg.selectAll(
-      `g#${axes_class} g[id^="FillBetweenPolyCollection"] path`
+      `g#${axes_class} g[id^="FillBetweenPolyCollection"] path`,
     );
     areas.attr("class", "area plot-element");
 
@@ -129,7 +261,7 @@ export default class PlotSVGParser {
    *
    * @param {number} mouseX - X coordinate of the mouse relative to SVG.
    * @param {number} mouseY - Y coordinate of the mouse relative to SVG.
-   * @param {d3.Selection} elements - Selection of candidate elements.
+   * @param {Selection} elements - Selection of candidate elements.
    * @returns {Element|null} The nearest DOM element or `null`.
    */
   nearestElementFromMouse(mouseX, mouseY, elements) {
@@ -154,7 +286,7 @@ export default class PlotSVGParser {
    * Attach hover interaction and tooltip display to plot elements.
    * Can highlight nearest element (if enabled) or hovered element directly.
    *
-   * @param {d3.Selection} plot_element - Selection of plot elements (points, lines, etc.).
+   * @param {Selection} plot_element - Selection of plot elements (points, lines, etc.).
    * @param {string} axes_class - ID of the axes group.
    * @param {string[]} tooltip_labels - Tooltip labels for each element.
    * @param {string[]} tooltip_groups - Group identifiers for each element.
@@ -167,18 +299,19 @@ export default class PlotSVGParser {
     tooltip_labels,
     tooltip_groups,
     show_tooltip,
-    hover_nearest
+    hover_nearest,
   ) {
     const self = this;
     const axesGroup = this.svg.select(`g#${axes_class}`);
     const getHoveredIndex = hover_nearest
       ? (event) => {
-          const [mouseX, mouseY] = d3.pointer(event);
+          const svgNode = self.svg.nodes()[0];
+          const [mouseX, mouseY] = getPointerPosition(event, svgNode);
           const allElements = axesGroup.selectAll(".plot-element");
           const nearestElem = self.nearestElementFromMouse(
             mouseX,
             mouseY,
-            allElements
+            allElements,
           );
           return nearestElem ? allElements.nodes().indexOf(nearestElem) : null;
         }

plotjs-0.0.7/plotjs/static/template.html

@@ -0,0 +1,155 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>{{ document_title | safe }}</title>
+    <link rel="icon" href="{{ favicon_path | safe }}" type="image/x-icon" />
+    <style>
+      {{ default_css | safe }}
+      {{ additional_css | safe }}
+    </style>
+  </head>
+  <body>
+    {% set chart_id = "plot-container-" + uuid %}
+
+    <div id="{{ chart_id }}">
+      {{ svg | safe }}
+      <div class="tooltip" id="tooltip-{{ uuid }}"></div>
+    </div>
+
+    <script type="module">
+      (function () {
+        console.log("PlotJS: Initializing interactive plot");
+
+        // prettier-ignore
+        {{ js_parser | safe }}
+
+        const container = document.getElementById("{{ chart_id }}");
+        console.log(`PlotJS: Container found - ID: {{ chart_id }}`);
+
+        const tooltip = container.querySelector("#tooltip-{{ uuid }}");
+        const svg = container.querySelector("svg");
+        console.log(`PlotJS: SVG and tooltip elements loaded`);
+
+        const plot_data = JSON.parse(`{{ plot_data_json | tojson | safe }}`);
+        const tooltip_x_shift = plot_data["tooltip_x_shift"];
+        const tooltip_y_shift = -plot_data["tooltip_y_shift"];
+        const axes = plot_data["axes"];
+        console.log(
+          `PlotJS: Configuration - tooltip offset: (${tooltip_x_shift}, ${tooltip_y_shift})`,
+        );
+        console.log(
+          `PlotJS: Found ${Object.keys(axes).length} axes to process`,
+        );
+
+        const plotParser = new PlotSVGParser(
+          svg,
+          tooltip,
+          tooltip_x_shift,
+          tooltip_y_shift,
+        );
+        console.log("PlotJS: Parser created successfully");
+
+        // Process each axes that has tooltip configuration
+        for (const axes_class in axes) {
+          if (axes.hasOwnProperty(axes_class)) {
+            console.log(`PlotJS: Processing axes "${axes_class}"`);
+
+            const axe_data = axes[axes_class];
+            const tooltip_labels = axe_data["tooltip_labels"];
+            const tooltip_groups = axe_data["tooltip_groups"];
+            const hover_nearest = axe_data["hover_nearest"] === "true";
+            const show_tooltip = tooltip_labels.length === 0 ? "none" : "block";
+
+            console.log(`PlotJS:   - ${tooltip_labels.length} tooltip labels`);
+            console.log(`PlotJS:   - ${tooltip_groups.length} tooltip groups`);
+            console.log(`PlotJS:   - Hover nearest: ${hover_nearest}`);
+            console.log(
+              `PlotJS:   - Show tooltips: ${show_tooltip === "block"}`,
+            );
+
+            const lines = plotParser.findLines(plotParser.svg, axes_class);
+            const bars = plotParser.findBars(plotParser.svg, axes_class);
+            const points = plotParser.findPoints(
+              plotParser.svg,
+              axes_class,
+              tooltip_groups,
+            );
+            const areas = plotParser.findAreas(plotParser.svg, axes_class);
+
+            const totalElements =
+              lines.size() + bars.size() + points.size() + areas.size();
+            console.log(
+              `PlotJS:   - Total elements: ${totalElements} (${lines.size()} lines, ${bars.size()} bars, ${points.size()} points, ${areas.size()} areas)`,
+            );
+
+            if (points.size() > 0) {
+              plotParser.setHoverEffect(
+                points,
+                axes_class,
+                tooltip_labels,
+                tooltip_groups,
+                show_tooltip,
+                hover_nearest,
+              );
+              console.log(
+                `PlotJS:   - Hover effects attached to ${points.size()} points`,
+              );
+            }
+
+            if (lines.size() > 0) {
+              plotParser.setHoverEffect(
+                lines,
+                axes_class,
+                tooltip_labels,
+                tooltip_groups,
+                show_tooltip,
+                hover_nearest,
+              );
+              console.log(
+                `PlotJS:   - Hover effects attached to ${lines.size()} lines`,
+              );
+            }
+
+            if (bars.size() > 0) {
+              plotParser.setHoverEffect(
+                bars,
+                axes_class,
+                tooltip_labels,
+                tooltip_groups,
+                show_tooltip,
+                hover_nearest,
+              );
+              console.log(
+                `PlotJS:   - Hover effects attached to ${bars.size()} bars`,
+              );
+            }
+
+            if (areas.size() > 0) {
+              plotParser.setHoverEffect(
+                areas,
+                axes_class,
+                tooltip_labels,
+                tooltip_groups,
+                show_tooltip,
+                hover_nearest,
+              );
+              console.log(
+                `PlotJS:   - Hover effects attached to ${areas.size()} areas`,
+              );
+            }
+
+            console.log(`PlotJS: Finished processing axes "${axes_class}"`);
+          }
+        }
+
+        console.log("PlotJS: Initialization complete - plot is interactive");
+      })();
+    </script>
+
+    <script type="module">
+      // prettier-ignore
+      {{ additional_javascript | safe }}
+    </script>
+  </body>
+</html>

{plotjs-0.0.6 → plotjs-0.0.7}/plotjs/utils.py

@@ -33,11 +33,22 @@ def _vector_to_list(vector, name="labels and groups") -> list:
 
 
 def _get_and_sanitize_js(file_path, after_pattern):
+    """
+    Extract JavaScript code starting from a pattern and remove export statements.
+
+    Export statements (export, export default) are removed because the code
+    is injected inline into HTML within an IIFE, where exports are not valid.
+    The exports remain in the source file for testing purposes.
+    """
     with open(file_path) as f:
         content = f.read()
 
     match = re.search(after_pattern, content, re.DOTALL)
     if match:
-        return match.group(0)
+        js_code = match.group(0)
+        # Remove export statements since we're injecting inline
+        js_code = re.sub(r"^export\s+default\s+", "", js_code, flags=re.MULTILINE)
+        js_code = re.sub(r"^export\s+\{[^}]+\};?\s*$", "", js_code, flags=re.MULTILINE)
+        return js_code
     else:
         raise ValueError(f"Could not find '{after_pattern}' in the file")

{plotjs-0.0.6 → plotjs-0.0.7/plotjs.egg-info}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: plotjs
-Version: 0.0.6
+Version: 0.0.7
 Summary: Turn static matplotlib charts into interactive web visualizations
 Author-email: Joseph Barbier <joseph.barbierdarnal@mail.com>
 License-Expression: MIT

{plotjs-0.0.6 → plotjs-0.0.7}/plotjs.egg-info/SOURCES.txt

@@ -11,10 +11,12 @@ justfile
 mkdocs.yaml
 package.json
 pyproject.toml
+pytest.ini
 uv.lock
 .github/workflows/doc.yaml
 .github/workflows/lint.yaml
 .github/workflows/pypi.yaml
+.github/workflows/tests-browser.yaml
 .github/workflows/tests-js.yaml
 .github/workflows/tests-python.yaml
 .github/workflows/type.yaml
@@ -81,6 +83,11 @@ plotjs/data/titanic.csv
 plotjs/static/default.css
 plotjs/static/plotparser.js
 plotjs/static/template.html
+tests/test-browser/README.md
+tests/test-browser/__init__.py
+tests/test-browser/conftest.py
+tests/test-browser/test_interactions.py
+tests/test-browser/test_rendering.py
 tests/test-javascript/ParserSelectors.test.js
 tests/test-javascript/ParserSetHover.test.js
 tests/test-python/__init__.py

{plotjs-0.0.6 → plotjs-0.0.7}/pyproject.toml

@@ -1,7 +1,7 @@
 [project]
 name = "plotjs"
 description = "Turn static matplotlib charts into interactive web visualizations"
-version = "0.0.6"
+version = "0.0.7"
 license = "MIT"
 license-files = ["LICENSE"]
 keywords = ["matplotlib", "interactive", "javascript", "web", "css", "d3", "mpld3", "plotnine"]
@@ -56,6 +56,7 @@ dev = [
     "ipywidgets>=8.1.7",
     "highlight-text>=0.2",
     "drawarrow>=0.1.0",
+    "playwright>=1.40.0",
 ]
 
 [project.urls]

plotjs-0.0.7/pytest.ini

@@ -0,0 +1,7 @@
+[pytest]
+testpaths = tests
+python_files = test_*.py
+python_classes = Test*
+python_functions = test_*
+
+markers = browser: marks tests as browser tests (using Playwright, slower)