-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
225 lines (217 loc) · 10.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>skrub reports</title>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/build/pure-min.css"
integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls"
crossorigin="anonymous">
<style>
{% include "skrub-online-report.css" %}
</style>
<link rel="icon" href="skrub.svg">
<script src="copybutton.js?__skrub_XXXX__" defer></script>
<script src="skrub-online-report.js?__skrub_XXXX__" defer></script>
</head>
<body class="color-links">
{% include "nav.html" %}
<main class="flow">
<h1 class="banner"><span class="from">from</span> <a href="https://skrub-data.org/"><img
class="skrub" src="skrub.svg"></a> <span
class="import">import</span> <a
href="https://skrub-data.org/stable/reference/generated/skrub.TableReport.html#"
class="table-report">TableReport</a></h1>
<div class="wrapper">
<p>
This page allows you to try out the
<a href="https://skrub-data.org/stable/reference/generated/skrub.TableReport.html#"><code>TableReport</code></a>
from the <a href="https://skrub-data.org/">Skrub</a> Python library.
</p>
<p>
Select a Parquet or CSV file to see an overview of its contents
and summary statistics. Everything runs locally in your browser,
the file is not uploaded anywhere.</p>
<div class="highlighted-block warning-block">
<h2>This online demo is experimental.</h2>
<p>Due to the limitations
inherent to running Python in a web page, we recommend choosing
a small file (<strong>less than 100 MB</strong>).
A <strong>more reliable and performant way</strong> of generating
reports is to
<a href="https://skrub-data.org/stable/install.html">install</a>
skrub and use a Python script — see an
<a href="https://skrub-data.org/stable/auto_examples/00_getting_started.html#generating-an-interactive-report-for-a-dataframe">example</a>.
</p>
</div>
</div>
<div class="flex file-select">
<label data-handler="DisableDuringComputation" for="file-input"
id="file-input-label" class="button">Choose CSV
or Parquet file
<input data-handler="FileInput" id="file-input" type="file"
accept=".parquet, .csv, .tsv" autocomplete="off" />
</label>
<code data-handler="FileNameDisplay"></code>
</div>
<div class="flex" data-handler="LargeFileWarning" data-hidden>
<div class="highlighted-block warning-block">
<div>
The selected file may be too large (<span
data-role="file-size-display"></span>)
</div>
<div>
This online demonstrator is running in your browser with
limited memory. We recommend trying it out on small data
files (less than 100 MB), otherwise the report generation
might be slow or fail. For larger files, consider installing
Skrub and generating the report with a Python script.
</div>
</div>
</div>
<div data-handler="StatusContainer" data-hidden></div>
<details data-handler="CsvDialog" data-hidden
class="flow align-with-highlighted-block">
<summary>CSV parsing parameters</summary>
<div class="highlighted-block">
<p>
Use the settings below to adjust the parameters used to
parse the CSV, if necessary. When the table preview looks
like the parameters are correct, click <strong>"Create
report"</strong>.
</p>
</div>
<div class="flow">
<form data-handler="CsvDialogForm">
<fieldset data-handler="DisableDuringComputation" class="flex">
<div>
<label for="delimiter">Delimiter:</label>
<select id="delimiter" name="delimiter" value=",">
<option value="," selected>,</option>
<option value="	">TAB</option>
<option value=" ">SPACE</option>
<option value=";">;</option>
<option value="|">|</option>
</select>
</div>
<div>
<label for="quote">Quote:</label>
<select id="quote" name="quote">
<option value='"' selected>"</option>
<option value="'">'</option>
</select>
</div>
<div>
<label for="escape">Escape:</label>
<select id="escape" name="escape">
<option value="none" selected>none</option>
<option value="\">\</option>
</select>
</div>
<div>
<label for="encoding">Text encoding:</label>
<select id="encoding" name="encoding"></select>
</div>
<button type="button" class="button blue-bg"
data-handler="CsvParamsSubmit">Create report</button>
</fieldset>
</form>
<div data-handler="CsvTextPreview">
<h2>File contents</h2>
<div class="scroll">
<div>
<pre data-role="csv-text-display"></pre>
</div>
</div>
</div>
<div data-handler="CsvTablePreview">
<h2>Table preview</h2>
<div class="scroll">
<div data-role="csv-table-display"></div>
</div>
</div>
<div data-handler="CsvPreviewError"
class="highlighted-block error-block">
<div>
There was an error processing <span data-role="file-name-display"></span>.
You may need to adjust the encoding or CSV formatting
information above.
The error is shown below.
</div>
<div class="horizontal-scroll">
<pre data-role="csv-error-display"></pre>
</div>
</div>
</div>
</details>
<div data-handler="PythonSnippets" data-hidden>
<details class="highlighted-block tip-block">
<summary>How to generate this report in Python</summary>
<div>
<p>
To produce the same report from Python code,
<a href="https://skrub-data.org/stable/install.html#advanced-usage-for-contributors">install</a>
Skrub and execute:
</p>
<div class="tabs">
<input type="radio" name="library" id="pandas" checked />
<label for="pandas">pandas</label>
<div class="tab-panel">
<div class="copy-paste">
<div class="horizontal-scroll gray-bg">
<pre data-role="pandas-snippet-display"
id="pandas-snippet-display"
class="padding"></pre>
</div>
<copy-button class="copybutton" target-id="pandas-snippet-display"></copy-button>
</div>
</div>
<input type="radio" name="library" id="polars" />
<label for="polars">polars</label>
<div class="tab-panel">
<div data-role="polars-escape-warning" data-hidden
class="highlighted-block warning-block margin-bottom">
<div>
Polars only supports parsing CSV files that
respect the <a
href="https://datatracker.ietf.org/doc/html/rfc4180">rfc4180</a>
standard. In particular, it does not support
specifying an "escape" character, which your
file seems to use. The snippet below is
therefore likely to fail, in which case you can
read the file with Pandas then convert to Polars
with <code>pl.from_pandas</code>.
</div>
</div>
<div class="copy-paste">
<div class="horizontal-scroll gray-bg">
<pre data-role="polars-snippet-display"
id="polars-snippet-display"
class="padding"></pre>
</div>
<copy-button class="copybutton" target-id="polars-snippet-display"></copy-button>
</div>
</div>
<div class="tab-list-border" ></div>
</div>
</div>
</details>
</div>
<div data-handler="Report" data-hidden></div>
<div data-handler="ReportError" data-hidden
class="highlighted-block error-block">
<div>
Failed to compute report for <span data-role="file-name-display"></span>.
If the input is a CSV file, you may need to adjust the values for the
delimiter,
quote or escape characters in the menu above.
The error message is shown below.
</div>
<div class="horizontal-scroll">
<pre data-role="report-error-display"></pre>
</div>
</div>
</main>
</body>
</html>