ninejs 0.0.1__py3-none-any.whl
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- ninejs/__init__.py +4 -0
- ninejs/main.py +329 -0
- ninejs/static/PlotParser.js +76 -0
- ninejs/static/default.css +40 -0
- ninejs/static/template.html +96 -0
- ninejs/style.py +100 -0
- ninejs/utils.py +43 -0
- ninejs-0.0.1.dist-info/METADATA +23 -0
- ninejs-0.0.1.dist-info/RECORD +12 -0
- ninejs-0.0.1.dist-info/WHEEL +5 -0
- ninejs-0.0.1.dist-info/licenses/LICENSE +21 -0
- ninejs-0.0.1.dist-info/top_level.txt +1 -0
ninejs/__init__.py
ADDED
ninejs/main.py
ADDED
|
@@ -0,0 +1,329 @@
|
|
|
1
|
+
import os
|
|
2
|
+
import re
|
|
3
|
+
import io
|
|
4
|
+
import uuid
|
|
5
|
+
from typing import Any, Text
|
|
6
|
+
from pathlib import Path
|
|
7
|
+
|
|
8
|
+
import numpy as np
|
|
9
|
+
from jinja2 import Environment, FileSystemLoader
|
|
10
|
+
from narwhals.typing import SeriesT
|
|
11
|
+
import matplotlib.pyplot as plt
|
|
12
|
+
from matplotlib.figure import Figure
|
|
13
|
+
from matplotlib.axes import Axes
|
|
14
|
+
from plotnine import ggplot
|
|
15
|
+
import narwhals.stable.v2 as nw
|
|
16
|
+
from narwhals.stable.v2.dependencies import is_numpy_array, is_into_series
|
|
17
|
+
|
|
18
|
+
from ninejs import style
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
def _vector_to_list(vector, name="labels and groups") -> list:
|
|
22
|
+
"""
|
|
23
|
+
Function used to easily convert various kind of iterables to
|
|
24
|
+
lists in order to have standardised objects passed to javascript.
|
|
25
|
+
|
|
26
|
+
It accepts all backend series from narwhals and common objects
|
|
27
|
+
such as numpy arrays.
|
|
28
|
+
|
|
29
|
+
Todo: test this extensively to make sure it behaves as expected.
|
|
30
|
+
|
|
31
|
+
Args:
|
|
32
|
+
vector: A valid iterable.
|
|
33
|
+
name: The name passed to the error message when type is
|
|
34
|
+
invalid.
|
|
35
|
+
|
|
36
|
+
Returns:
|
|
37
|
+
A list
|
|
38
|
+
"""
|
|
39
|
+
if isinstance(vector, (list, tuple)) or is_numpy_array(vector):
|
|
40
|
+
return list(vector)
|
|
41
|
+
elif is_into_series(vector):
|
|
42
|
+
return nw.from_native(vector, allow_series=True).to_list()
|
|
43
|
+
else:
|
|
44
|
+
raise ValueError(
|
|
45
|
+
f"{name} must be a Series or a valid iterable (list, tuple, ndarray...)."
|
|
46
|
+
)
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
def _get_and_sanitize_js(file_path, after_pattern):
|
|
50
|
+
with open(file_path) as f:
|
|
51
|
+
content = f.read()
|
|
52
|
+
|
|
53
|
+
match = re.search(after_pattern, content, re.DOTALL)
|
|
54
|
+
if match:
|
|
55
|
+
return match.group(0)
|
|
56
|
+
else:
|
|
57
|
+
raise ValueError(f"Could not find '{after_pattern}' in the file")
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
MAIN_DIR: Path = Path(__file__).parent
|
|
61
|
+
TEMPLATE_DIR: Path = MAIN_DIR / "static"
|
|
62
|
+
CSS_PATH: str = os.path.join(TEMPLATE_DIR, "default.css")
|
|
63
|
+
JS_PARSER_PATH: str = os.path.join(TEMPLATE_DIR, "PlotParser.js")
|
|
64
|
+
|
|
65
|
+
env: Environment = Environment(loader=FileSystemLoader(str(TEMPLATE_DIR)))
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
class _InteractivePlot:
|
|
69
|
+
"""
|
|
70
|
+
Class to convert static plotnine plots to interactive charts.
|
|
71
|
+
"""
|
|
72
|
+
|
|
73
|
+
def __init__(
|
|
74
|
+
self,
|
|
75
|
+
fig: Figure | None = None,
|
|
76
|
+
**savefig_kws: Any,
|
|
77
|
+
):
|
|
78
|
+
"""
|
|
79
|
+
Initiate an `_InteractivePlot` instance to convert plotnine
|
|
80
|
+
figures to interactive charts.
|
|
81
|
+
|
|
82
|
+
Args:
|
|
83
|
+
savefig_kws: Additional keyword arguments passed to `plt.savefig()`.
|
|
84
|
+
"""
|
|
85
|
+
if fig is None:
|
|
86
|
+
fig: Figure = plt.gcf()
|
|
87
|
+
buf: io.StringIO = io.StringIO()
|
|
88
|
+
fig.savefig(buf, format="svg", **savefig_kws)
|
|
89
|
+
buf.seek(0)
|
|
90
|
+
self.svg_content = buf.getvalue()
|
|
91
|
+
|
|
92
|
+
self.axes: list[Axes] = fig.get_axes()
|
|
93
|
+
self.additional_css = ""
|
|
94
|
+
self.additional_javascript = ""
|
|
95
|
+
self.template = env.get_template("template.html")
|
|
96
|
+
|
|
97
|
+
with open(CSS_PATH) as f:
|
|
98
|
+
self._default_css = f.read()
|
|
99
|
+
|
|
100
|
+
self._js_parser = _get_and_sanitize_js(
|
|
101
|
+
file_path=JS_PARSER_PATH,
|
|
102
|
+
after_pattern=r"class PlotSVGParser.*",
|
|
103
|
+
)
|
|
104
|
+
|
|
105
|
+
def add_tooltip(
|
|
106
|
+
self,
|
|
107
|
+
*,
|
|
108
|
+
labels: list | tuple | np.ndarray | SeriesT | None = None,
|
|
109
|
+
groups: list | tuple | np.ndarray | SeriesT | None = None,
|
|
110
|
+
tooltip_x_shift: int = 0,
|
|
111
|
+
tooltip_y_shift: int = 0,
|
|
112
|
+
ax: Axes | None = None,
|
|
113
|
+
) -> "_InteractivePlot":
|
|
114
|
+
self._tooltip_x_shift = tooltip_x_shift
|
|
115
|
+
self._tooltip_y_shift = tooltip_y_shift
|
|
116
|
+
|
|
117
|
+
if ax is None:
|
|
118
|
+
ax: Axes = self.axes[0]
|
|
119
|
+
self._legend_handles, self._legend_handles_labels = (
|
|
120
|
+
ax.get_legend_handles_labels()
|
|
121
|
+
)
|
|
122
|
+
|
|
123
|
+
if labels is None:
|
|
124
|
+
self._tooltip_labels = []
|
|
125
|
+
else:
|
|
126
|
+
self._tooltip_labels = _vector_to_list(labels)
|
|
127
|
+
self._tooltip_labels.extend(self._legend_handles_labels)
|
|
128
|
+
if groups is None:
|
|
129
|
+
self._tooltip_groups = list(range(len(self._tooltip_labels)))
|
|
130
|
+
else:
|
|
131
|
+
self._tooltip_groups = _vector_to_list(groups)
|
|
132
|
+
self._tooltip_groups.extend(self._legend_handles_labels)
|
|
133
|
+
|
|
134
|
+
if not hasattr(self, "axes_tooltip"):
|
|
135
|
+
self.axes_tooltip: dict = dict()
|
|
136
|
+
axe_idx: int = self.axes.index(ax) + 1
|
|
137
|
+
axe_tooltip: dict[str, dict] = {
|
|
138
|
+
f"axes_{axe_idx}": {
|
|
139
|
+
"tooltip_labels": self._tooltip_labels,
|
|
140
|
+
"tooltip_groups": self._tooltip_groups,
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
self.axes_tooltip.update(axe_tooltip)
|
|
144
|
+
|
|
145
|
+
return self
|
|
146
|
+
|
|
147
|
+
def _set_plot_data_json(self):
|
|
148
|
+
if not hasattr(self, "_tooltip_labels"):
|
|
149
|
+
self.add_tooltip()
|
|
150
|
+
|
|
151
|
+
self.plot_data_json = {
|
|
152
|
+
"tooltip_labels": self._tooltip_labels,
|
|
153
|
+
"tooltip_groups": self._tooltip_groups,
|
|
154
|
+
"tooltip_x_shift": self._tooltip_x_shift,
|
|
155
|
+
"tooltip_y_shift": self._tooltip_y_shift,
|
|
156
|
+
"axes": self.axes_tooltip,
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
def _set_html(self):
|
|
160
|
+
self._set_plot_data_json()
|
|
161
|
+
self.html: Text = self.template.render(
|
|
162
|
+
uuid=str(uuid.uuid4()),
|
|
163
|
+
default_css=self._default_css,
|
|
164
|
+
additional_css=self.additional_css,
|
|
165
|
+
svg=self.svg_content,
|
|
166
|
+
plot_data_json=self.plot_data_json,
|
|
167
|
+
additional_javascript=self.additional_javascript,
|
|
168
|
+
js_parser=self._js_parser,
|
|
169
|
+
favicon_path=self._favicon_path,
|
|
170
|
+
document_title=self._document_title,
|
|
171
|
+
)
|
|
172
|
+
|
|
173
|
+
def as_html(self) -> str:
|
|
174
|
+
self._set_html()
|
|
175
|
+
return self.html
|
|
176
|
+
|
|
177
|
+
def add_css(self, css_content: str) -> "_InteractivePlot":
|
|
178
|
+
self.additional_css += css_content
|
|
179
|
+
return self
|
|
180
|
+
|
|
181
|
+
def save(
|
|
182
|
+
self,
|
|
183
|
+
file_path: str,
|
|
184
|
+
favicon_path: str = "https://github.com/JosephBARBIERDARNAL/static/blob/main/python-libs/plotjs/favicon.ico?raw=true",
|
|
185
|
+
document_title: str = "Made with ninejs",
|
|
186
|
+
) -> "_InteractivePlot":
|
|
187
|
+
self._favicon_path = favicon_path
|
|
188
|
+
self._document_title = document_title
|
|
189
|
+
|
|
190
|
+
self._set_html()
|
|
191
|
+
|
|
192
|
+
if not file_path.endswith(".html"):
|
|
193
|
+
file_path += ".html"
|
|
194
|
+
with open(file_path, "w") as f:
|
|
195
|
+
f.write(self.html)
|
|
196
|
+
|
|
197
|
+
return self
|
|
198
|
+
|
|
199
|
+
|
|
200
|
+
class interactive:
|
|
201
|
+
"""
|
|
202
|
+
Wrapper for a plotnine `ggplot` object to make it interactive.
|
|
203
|
+
|
|
204
|
+
It automatically extracts
|
|
205
|
+
tooltips and grouping information from the plot mapping if present.
|
|
206
|
+
|
|
207
|
+
Attributes:
|
|
208
|
+
gg (ggplot): The original plotnine `ggplot` object.
|
|
209
|
+
|
|
210
|
+
Example:
|
|
211
|
+
```python
|
|
212
|
+
from plotnine import ggplot, aes, geom_point
|
|
213
|
+
from ninejs import interactive, css, save
|
|
214
|
+
|
|
215
|
+
p = ggplot(df, aes("x", "y", tooltip="label")) + geom_point()
|
|
216
|
+
(
|
|
217
|
+
interactive(p)
|
|
218
|
+
+ css(from_file="style.css")
|
|
219
|
+
+ save("chart.html")
|
|
220
|
+
)
|
|
221
|
+
```
|
|
222
|
+
"""
|
|
223
|
+
|
|
224
|
+
def __init__(self, gg: ggplot):
|
|
225
|
+
self.gg = ggplot
|
|
226
|
+
fig = gg.draw()
|
|
227
|
+
df: Any = gg.data
|
|
228
|
+
mapping = gg.mapping
|
|
229
|
+
|
|
230
|
+
tooltip_labels = None
|
|
231
|
+
tooltip_groups = None
|
|
232
|
+
if df is not None:
|
|
233
|
+
if "tooltip" in mapping:
|
|
234
|
+
tooltip_labels = df[mapping["tooltip"]]
|
|
235
|
+
if "data_id" in mapping:
|
|
236
|
+
tooltip_groups = df[mapping["data_id"]]
|
|
237
|
+
|
|
238
|
+
self.mp = _InteractivePlot(fig=fig).add_tooltip(
|
|
239
|
+
labels=tooltip_labels, groups=tooltip_groups
|
|
240
|
+
)
|
|
241
|
+
|
|
242
|
+
def __add__(self, other_obj):
|
|
243
|
+
if isinstance(other_obj, css):
|
|
244
|
+
self.mp.add_css(other_obj.css_content)
|
|
245
|
+
elif isinstance(other_obj, save):
|
|
246
|
+
self.mp.save(file_path=other_obj.file_path)
|
|
247
|
+
|
|
248
|
+
return self
|
|
249
|
+
|
|
250
|
+
|
|
251
|
+
class css:
|
|
252
|
+
"""
|
|
253
|
+
Utility class to handle CSS injection for interactive plots.
|
|
254
|
+
|
|
255
|
+
This class provides multiple ways to load CSS: directly from a
|
|
256
|
+
string, from a dictionary, or from a CSS file. It is intended to
|
|
257
|
+
be combined with `interactive` plots.
|
|
258
|
+
|
|
259
|
+
Attributes:
|
|
260
|
+
css_content (str): The CSS rules to be injected.
|
|
261
|
+
|
|
262
|
+
Example:
|
|
263
|
+
```python
|
|
264
|
+
(
|
|
265
|
+
interactive(p)
|
|
266
|
+
+ css(".tooltip: {font-size: 2rem}")
|
|
267
|
+
+ css(from_dict={".tooltip": {"font-size": "2rem"})
|
|
268
|
+
+ css(from_file="style.css")
|
|
269
|
+
+ save("output.html")
|
|
270
|
+
)
|
|
271
|
+
```
|
|
272
|
+
"""
|
|
273
|
+
|
|
274
|
+
def __init__(self, from_string=None, *, from_dict=None, from_file=None):
|
|
275
|
+
if from_string is not None:
|
|
276
|
+
self.css_content = from_string
|
|
277
|
+
elif from_dict is not None:
|
|
278
|
+
self.css_content = style.from_dict(css_dict=from_dict)
|
|
279
|
+
elif from_file is not None:
|
|
280
|
+
self.css_content = style.from_file(css_file=from_file)
|
|
281
|
+
|
|
282
|
+
|
|
283
|
+
class save:
|
|
284
|
+
"""
|
|
285
|
+
Utility class to specify an output HTML file for saving an
|
|
286
|
+
interactive plot.
|
|
287
|
+
|
|
288
|
+
Attributes:
|
|
289
|
+
file_path (str): Path to the output HTML file.
|
|
290
|
+
|
|
291
|
+
Example:
|
|
292
|
+
```python
|
|
293
|
+
(
|
|
294
|
+
interactive(p)
|
|
295
|
+
+ css(from_file="style.css")
|
|
296
|
+
+ save("output.html")
|
|
297
|
+
)
|
|
298
|
+
```
|
|
299
|
+
"""
|
|
300
|
+
|
|
301
|
+
def __init__(self, file_path):
|
|
302
|
+
self.file_path = file_path
|
|
303
|
+
|
|
304
|
+
|
|
305
|
+
if __name__ == "__main__":
|
|
306
|
+
from plotnine import ggplot, aes, geom_point, theme_minimal
|
|
307
|
+
from plotnine.data import anscombe_quartet
|
|
308
|
+
|
|
309
|
+
gg = (
|
|
310
|
+
ggplot(
|
|
311
|
+
data=anscombe_quartet,
|
|
312
|
+
mapping=aes(
|
|
313
|
+
x="x",
|
|
314
|
+
y="y",
|
|
315
|
+
color="dataset",
|
|
316
|
+
tooltip="dataset",
|
|
317
|
+
data_id="dataset",
|
|
318
|
+
),
|
|
319
|
+
)
|
|
320
|
+
+ geom_point(size=7, alpha=0.5)
|
|
321
|
+
+ theme_minimal()
|
|
322
|
+
)
|
|
323
|
+
|
|
324
|
+
(
|
|
325
|
+
interactive(gg=gg)
|
|
326
|
+
+ css(".tooltip{font-size: 2em;}")
|
|
327
|
+
+ css(from_dict={".tooltip": {"font-size": "5em"}})
|
|
328
|
+
+ save("index.html")
|
|
329
|
+
)
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import * as d3 from "d3-selection";
|
|
2
|
+
|
|
3
|
+
export default class PlotSVGParser {
|
|
4
|
+
constructor(svg, tooltip, tooltip_x_shift, tooltip_y_shift) {
|
|
5
|
+
this.svg = svg;
|
|
6
|
+
this.tooltip = tooltip;
|
|
7
|
+
this.tooltip_x_shift = tooltip_x_shift;
|
|
8
|
+
this.tooltip_y_shift = tooltip_y_shift;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
findBars(svg, axes_class) {
|
|
12
|
+
const bars = svg.selectAll(`g#${axes_class} g[id^="PolyCollection_"] path`);
|
|
13
|
+
|
|
14
|
+
bars.attr("class", "bar plot-element");
|
|
15
|
+
return bars;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
findPoints(svg, axes_class, tooltip_groups) {
|
|
19
|
+
const points = svg.selectAll(
|
|
20
|
+
`g#${axes_class} g[id^="PathCollection"] path`
|
|
21
|
+
);
|
|
22
|
+
|
|
23
|
+
points.each(function (_, i) {
|
|
24
|
+
d3.select(this).attr("data-group", tooltip_groups[i]);
|
|
25
|
+
});
|
|
26
|
+
points.attr("class", "point plot-element");
|
|
27
|
+
return points;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
findLines(svg, axes_class) {
|
|
31
|
+
const lines = svg
|
|
32
|
+
.selectAll(`g#${axes_class} g[id^="line2d"] path`)
|
|
33
|
+
.filter(function () {
|
|
34
|
+
return !this.closest('g[id^="matplotlib.axis"]');
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
lines.attr("class", "line plot-element");
|
|
38
|
+
return lines;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
findAreas(svg, axes_class) {
|
|
42
|
+
const areas = svg.selectAll(
|
|
43
|
+
`g#${axes_class} g[id^="FillBetweenPolyCollection"] path`
|
|
44
|
+
);
|
|
45
|
+
areas.attr("class", "area plot-element");
|
|
46
|
+
return areas;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
setHoverEffect(plot_element, tooltip_labels, tooltip_groups, show_tooltip) {
|
|
50
|
+
const self = this;
|
|
51
|
+
plot_element
|
|
52
|
+
.on("mouseover", function (event, d) {
|
|
53
|
+
const nodes = plot_element.nodes();
|
|
54
|
+
let i = nodes.indexOf(this);
|
|
55
|
+
|
|
56
|
+
const hovered_group = tooltip_groups[i];
|
|
57
|
+
plot_element.classed("not-hovered", true);
|
|
58
|
+
plot_element
|
|
59
|
+
.filter((_, j) => {
|
|
60
|
+
return tooltip_groups[j] === hovered_group;
|
|
61
|
+
})
|
|
62
|
+
.classed("not-hovered", false)
|
|
63
|
+
.classed("hovered", true);
|
|
64
|
+
|
|
65
|
+
self.tooltip
|
|
66
|
+
.style("display", show_tooltip)
|
|
67
|
+
.style("left", event.pageX + self.tooltip_x_shift + "px")
|
|
68
|
+
.style("top", event.pageY + self.tooltip_y_shift + "px")
|
|
69
|
+
.html(tooltip_labels[i]);
|
|
70
|
+
})
|
|
71
|
+
.on("mouseout", function () {
|
|
72
|
+
plot_element.classed("not-hovered", false).classed("hovered", false);
|
|
73
|
+
self.tooltip.style("display", "none");
|
|
74
|
+
});
|
|
75
|
+
}
|
|
76
|
+
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--default-opacity: 1;
|
|
3
|
+
--default-not-hovered-opacity: 0.2;
|
|
4
|
+
--default-transition: opacity 0.1s ease;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
svg {
|
|
8
|
+
width: 100%;
|
|
9
|
+
height: auto;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.tooltip {
|
|
13
|
+
position: absolute;
|
|
14
|
+
background: #001d3d;
|
|
15
|
+
padding: 8px 12px;
|
|
16
|
+
border-radius: 6px;
|
|
17
|
+
color: #ffffff;
|
|
18
|
+
font-size: 14px;
|
|
19
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
20
|
+
pointer-events: none;
|
|
21
|
+
display: none;
|
|
22
|
+
font-family: "Helvetica Neue", "Arial", sans-serif;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.plot-element {
|
|
26
|
+
opacity: var(--default-opacity);
|
|
27
|
+
transition: var(--default-transition);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.plot-element:hover {
|
|
31
|
+
opacity: var(--default-opacity);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.plot-element.not-hovered {
|
|
35
|
+
opacity: var(--default-not-hovered-opacity);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.plot-element.hovered {
|
|
39
|
+
opacity: var(--default-opacity);
|
|
40
|
+
}
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<title>{{ document_title | safe }}</title>
|
|
6
|
+
<link rel="icon" href="{{ favicon_path | safe }}" type="image/x-icon" />
|
|
7
|
+
<style>
|
|
8
|
+
{{ default_css | safe }}
|
|
9
|
+
{{ additional_css | safe }}
|
|
10
|
+
</style>
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
{% set chart_id = "plot-container-" + uuid %}
|
|
14
|
+
|
|
15
|
+
<div id="{{ chart_id }}">
|
|
16
|
+
{{ svg | safe }}
|
|
17
|
+
<div class="tooltip" id="tooltip-{{ uuid }}"></div>
|
|
18
|
+
</div>
|
|
19
|
+
|
|
20
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
|
|
21
|
+
<script type="module">
|
|
22
|
+
(function () {
|
|
23
|
+
// prettier-ignore
|
|
24
|
+
{{ js_parser | safe }}
|
|
25
|
+
|
|
26
|
+
const container = document.getElementById("{{ chart_id }}");
|
|
27
|
+
|
|
28
|
+
const tooltip = d3.select("#tooltip-{{ uuid }}");
|
|
29
|
+
const svg = d3.select(container).select("svg");
|
|
30
|
+
|
|
31
|
+
const plot_data = JSON.parse(`{{ plot_data_json | tojson | safe }}`);
|
|
32
|
+
const tooltip_x_shift = plot_data["tooltip_x_shift"];
|
|
33
|
+
const tooltip_y_shift = -plot_data["tooltip_y_shift"];
|
|
34
|
+
const axes = plot_data["axes"];
|
|
35
|
+
|
|
36
|
+
const plotParser = new PlotSVGParser(
|
|
37
|
+
svg,
|
|
38
|
+
tooltip,
|
|
39
|
+
tooltip_x_shift,
|
|
40
|
+
tooltip_y_shift,
|
|
41
|
+
);
|
|
42
|
+
|
|
43
|
+
// Process each axes that has tooltip configuration
|
|
44
|
+
for (const axes_class in axes) {
|
|
45
|
+
if (axes.hasOwnProperty(axes_class)) {
|
|
46
|
+
const axe_data = axes[axes_class];
|
|
47
|
+
const tooltip_labels = axe_data["tooltip_labels"];
|
|
48
|
+
const tooltip_groups = axe_data["tooltip_groups"];
|
|
49
|
+
const show_tooltip = tooltip_labels.length === 0 ? "none" : "block";
|
|
50
|
+
|
|
51
|
+
// Find plot elements within this specific axes
|
|
52
|
+
const lines = plotParser.findLines(svg, axes_class);
|
|
53
|
+
const bars = plotParser.findBars(svg, axes_class);
|
|
54
|
+
const points = plotParser.findPoints(
|
|
55
|
+
svg,
|
|
56
|
+
axes_class,
|
|
57
|
+
tooltip_groups,
|
|
58
|
+
);
|
|
59
|
+
const areas = plotParser.findAreas(svg, axes_class);
|
|
60
|
+
|
|
61
|
+
// Apply hover effects only to elements in this axes
|
|
62
|
+
plotParser.setHoverEffect(
|
|
63
|
+
points,
|
|
64
|
+
tooltip_labels,
|
|
65
|
+
tooltip_groups,
|
|
66
|
+
show_tooltip,
|
|
67
|
+
);
|
|
68
|
+
plotParser.setHoverEffect(
|
|
69
|
+
lines,
|
|
70
|
+
tooltip_labels,
|
|
71
|
+
tooltip_groups,
|
|
72
|
+
show_tooltip,
|
|
73
|
+
);
|
|
74
|
+
plotParser.setHoverEffect(
|
|
75
|
+
bars,
|
|
76
|
+
tooltip_labels,
|
|
77
|
+
tooltip_groups,
|
|
78
|
+
show_tooltip,
|
|
79
|
+
);
|
|
80
|
+
plotParser.setHoverEffect(
|
|
81
|
+
areas,
|
|
82
|
+
tooltip_labels,
|
|
83
|
+
tooltip_groups,
|
|
84
|
+
show_tooltip,
|
|
85
|
+
);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
})();
|
|
89
|
+
</script>
|
|
90
|
+
|
|
91
|
+
<script type="module">
|
|
92
|
+
// prettier-ignore
|
|
93
|
+
{{ additional_javascript | safe }}
|
|
94
|
+
</script>
|
|
95
|
+
</body>
|
|
96
|
+
</html>
|
ninejs/style.py
ADDED
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import re
|
|
2
|
+
import warnings
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
def from_dict(css_dict: dict) -> str:
|
|
6
|
+
"""
|
|
7
|
+
Get raw CSS in a string from a dictionnary. It's a
|
|
8
|
+
utility function useful to write CSS from a Python
|
|
9
|
+
dictionnary.
|
|
10
|
+
|
|
11
|
+
Args:
|
|
12
|
+
css_dict: A dictionnary with keys (selectors) and value
|
|
13
|
+
(dictionnary of property-value).
|
|
14
|
+
|
|
15
|
+
Returns:
|
|
16
|
+
A string of raw CSS.
|
|
17
|
+
|
|
18
|
+
Examples:
|
|
19
|
+
```python
|
|
20
|
+
from plotjs import css
|
|
21
|
+
|
|
22
|
+
css.from_dict({
|
|
23
|
+
".tooltip": {"color": "red", "background": "blue !important"},
|
|
24
|
+
".point": {"width": "10px", "height": "200px"},
|
|
25
|
+
})
|
|
26
|
+
```
|
|
27
|
+
"""
|
|
28
|
+
css: str = ""
|
|
29
|
+
|
|
30
|
+
for selector, css_props in css_dict.items():
|
|
31
|
+
css += f"{selector}{{"
|
|
32
|
+
for prop, value in css_props.items():
|
|
33
|
+
css += f"{prop}:{value};"
|
|
34
|
+
css += "}"
|
|
35
|
+
|
|
36
|
+
if not is_css_like(css):
|
|
37
|
+
warnings.warn(f"CSS may be invalid:\n{css}")
|
|
38
|
+
|
|
39
|
+
return css
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
def from_file(css_file: str) -> str:
|
|
43
|
+
"""
|
|
44
|
+
Get raw CSS from a CSS file. This function just
|
|
45
|
+
reads the CSS from a given file and checks that
|
|
46
|
+
it looks like valid CSS.
|
|
47
|
+
|
|
48
|
+
Args:
|
|
49
|
+
css_file: Path to a CSS file.
|
|
50
|
+
|
|
51
|
+
Returns:
|
|
52
|
+
A string of raw CSS
|
|
53
|
+
|
|
54
|
+
Examples:
|
|
55
|
+
```python
|
|
56
|
+
from plotjs import css
|
|
57
|
+
|
|
58
|
+
css.from_file("path/to/style.css")
|
|
59
|
+
```
|
|
60
|
+
"""
|
|
61
|
+
with open(css_file, "r") as f:
|
|
62
|
+
css: str = f.read()
|
|
63
|
+
|
|
64
|
+
if not is_css_like(css):
|
|
65
|
+
warnings.warn(f"CSS may be invalid: {css}")
|
|
66
|
+
return css
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
def is_css_like(s: str) -> bool:
|
|
70
|
+
"""
|
|
71
|
+
Check whether a string looks like valid CSS. This function
|
|
72
|
+
is primarly used internally, but you can use it too.
|
|
73
|
+
|
|
74
|
+
Args:
|
|
75
|
+
s: A string to evaluate.
|
|
76
|
+
|
|
77
|
+
Returns:
|
|
78
|
+
Whether or not `s` looks like valid CSS.
|
|
79
|
+
|
|
80
|
+
Examples:
|
|
81
|
+
```python
|
|
82
|
+
from plotjs import is_css_like
|
|
83
|
+
|
|
84
|
+
is_css_like("This is not CSS.") # False
|
|
85
|
+
is_css_like(".box { broken }") # False
|
|
86
|
+
is_css_like(".tooltip { color: red; background: blue; }") # True
|
|
87
|
+
```
|
|
88
|
+
"""
|
|
89
|
+
css_block_pattern = re.compile(
|
|
90
|
+
r"""
|
|
91
|
+
[^{]+\s* # Selector (at least one char that's not '{')
|
|
92
|
+
\{\s* # Opening brace
|
|
93
|
+
([^:{}]+:\s*[^;{}]+;\s*)+ # At least one prop: value; pair
|
|
94
|
+
\} # Closing brace
|
|
95
|
+
""",
|
|
96
|
+
re.VERBOSE,
|
|
97
|
+
)
|
|
98
|
+
|
|
99
|
+
matches = css_block_pattern.findall(s)
|
|
100
|
+
return bool(matches)
|
ninejs/utils.py
ADDED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import re
|
|
2
|
+
|
|
3
|
+
import narwhals.stable.v2 as nw
|
|
4
|
+
from narwhals.stable.v2.dependencies import is_numpy_array, is_into_series
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
def _vector_to_list(vector, name="labels and groups") -> list:
|
|
8
|
+
"""
|
|
9
|
+
Function used to easily convert various kind of iterables to
|
|
10
|
+
lists in order to have standardised objects passed to javascript.
|
|
11
|
+
|
|
12
|
+
It accepts all backend series from narwhals and common objects
|
|
13
|
+
such as numpy arrays.
|
|
14
|
+
|
|
15
|
+
Todo: test this extensively to make sure it behaves as expected.
|
|
16
|
+
|
|
17
|
+
Args:
|
|
18
|
+
vector: A valid iterable.
|
|
19
|
+
name: The name passed to the error message when type is
|
|
20
|
+
invalid.
|
|
21
|
+
|
|
22
|
+
Returns:
|
|
23
|
+
A list
|
|
24
|
+
"""
|
|
25
|
+
if isinstance(vector, (list, tuple)) or is_numpy_array(vector):
|
|
26
|
+
return list(vector)
|
|
27
|
+
elif is_into_series(vector):
|
|
28
|
+
return nw.from_native(vector, allow_series=True).to_list()
|
|
29
|
+
else:
|
|
30
|
+
raise ValueError(
|
|
31
|
+
f"{name} must be a Series or a valid iterable (list, tuple, ndarray...)."
|
|
32
|
+
)
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
def _get_and_sanitize_js(file_path, after_pattern):
|
|
36
|
+
with open(file_path) as f:
|
|
37
|
+
content = f.read()
|
|
38
|
+
|
|
39
|
+
match = re.search(after_pattern, content, re.DOTALL)
|
|
40
|
+
if match:
|
|
41
|
+
return match.group(0)
|
|
42
|
+
else:
|
|
43
|
+
raise ValueError(f"Could not find '{after_pattern}' in the file")
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
Metadata-Version: 2.4
|
|
2
|
+
Name: ninejs
|
|
3
|
+
Version: 0.0.1
|
|
4
|
+
Summary: Bringing interactivity to plotnine
|
|
5
|
+
Author-email: Joseph Barbier <joseph@ysunflower.com>
|
|
6
|
+
License-Expression: MIT
|
|
7
|
+
Project-URL: Documentation, https://y-sunflower.github.io/ninejs/
|
|
8
|
+
Project-URL: Homepage, https://y-sunflower.github.io/ninejs/
|
|
9
|
+
Project-URL: Issues, https://github.com/y-sunflower/ninejs/issues
|
|
10
|
+
Project-URL: Repository, https://github.com/y-sunflower/ninejs
|
|
11
|
+
Keywords: a,keywords,list,of
|
|
12
|
+
Classifier: Development Status :: 3 - Alpha
|
|
13
|
+
Classifier: Operating System :: OS Independent
|
|
14
|
+
Classifier: Programming Language :: Python :: 3
|
|
15
|
+
Requires-Python: >=3.10
|
|
16
|
+
Description-Content-Type: text/markdown
|
|
17
|
+
License-File: LICENSE
|
|
18
|
+
Requires-Dist: jinja2>=3.0.0
|
|
19
|
+
Requires-Dist: narwhals>=2.0.0
|
|
20
|
+
Requires-Dist: plotnine>=0.13.0
|
|
21
|
+
Dynamic: license-file
|
|
22
|
+
|
|
23
|
+
# `ninejs`: Adding interactivity to plotnine
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
ninejs/__init__.py,sha256=VcWS-QmhPzCkp-T6pauMLItzJ7ym-cqaVeX2F3JI6gQ,111
|
|
2
|
+
ninejs/main.py,sha256=0AngL6JWKxx9In9X62wgv5MkM7Mij1HPnExSEWKEB4g,9568
|
|
3
|
+
ninejs/style.py,sha256=dqrZ-43KPUpILBsaCxsgAXXA0qA1duFoc__d8MFHbps,2403
|
|
4
|
+
ninejs/utils.py,sha256=185aSFpgY0zyzt0TTQ4vJbcqnYhuN-bSnSZccSEcG2Q,1283
|
|
5
|
+
ninejs/static/PlotParser.js,sha256=IeDBQNwFMEfdChTtFBM77BbGKyapcZ18sTJ_9lSre-g,2220
|
|
6
|
+
ninejs/static/default.css,sha256=eSaoCCCwJKSSN4eU4WwAPHzvXX_hIGKM-TCIxENhTVI,729
|
|
7
|
+
ninejs/static/template.html,sha256=yePygz4zAGhlcvH2Z_-6H1MS9Uvn8IgR3oaGwHppIGA,2936
|
|
8
|
+
ninejs-0.0.1.dist-info/licenses/LICENSE,sha256=mjh43o45EMFItxUq2TPJPK2PUglVPzVd9PtJV_t-c0k,1071
|
|
9
|
+
ninejs-0.0.1.dist-info/METADATA,sha256=KK1qUh5oqDWUyYU0tk_xSlk8RVccMYaYQq6rNFLOF7A,841
|
|
10
|
+
ninejs-0.0.1.dist-info/WHEEL,sha256=aeYiig01lYGDzBgS8HxWXOg3uV61G9ijOsup-k9o1sk,91
|
|
11
|
+
ninejs-0.0.1.dist-info/top_level.txt,sha256=PqnT7by5e5krXGKDHIY2XqFKoZB38J-eB_sRxEhATuc,7
|
|
12
|
+
ninejs-0.0.1.dist-info/RECORD,,
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Joseph Barbier
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
ninejs
|