init research
This commit is contained in:
Vendored
+6
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE categories
|
||||
SYSTEM "https://resources.jetbrains.com/writerside/1.0/categories.dtd">
|
||||
<categories>
|
||||
<category id="related" name="Related topics" order="1"/>
|
||||
</categories>
|
||||
@@ -0,0 +1,10 @@
|
||||
<!DOCTYPE root
|
||||
SYSTEM "https://resources.jetbrains.com/writerside/1.0/build-script.dtd">
|
||||
|
||||
<root>
|
||||
<builds>
|
||||
<instance id="d" master="project.ihp" family="idea">
|
||||
<artifact type="web2" name="webHelpD2.zip" universal-zip="true" platform="primary" local-update="true"/>
|
||||
</instance>
|
||||
</builds>
|
||||
</root>
|
||||
@@ -0,0 +1,33 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
|
||||
<buildprofiles xsi:noNamespaceSchemaLocation="https://resources.jetbrains.com/writerside/1.0/build-profiles.xsd"
|
||||
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
|
||||
<variables>
|
||||
<header-logo>kotlin-logo.svg</header-logo>
|
||||
<web-root>https://kotlin.github.io/dataframe/</web-root>
|
||||
<download-page/>
|
||||
<feedback-widget>false</feedback-widget>
|
||||
<webmaster>webmaster@jetbrains.com</webmaster>
|
||||
<algolia-id>JWPLKSKZVF</algolia-id>
|
||||
<algolia-index>prod_DATAFRAME_HELP</algolia-index>
|
||||
<algolia-api-key>bce9ba6ce7419efe813d671244d3bf6a</algolia-api-key>
|
||||
<search-scopes-provider>https://www.jetbrains.com/search/json/</search-scopes-provider>
|
||||
<generate-sitemap-url-prefix>https://kotlin.github.io/dataframe/</generate-sitemap-url-prefix>
|
||||
<analytics-head-script-file>google-search.html</analytics-head-script-file>
|
||||
<enable-browser-edits>true</enable-browser-edits>
|
||||
<browser-edits-url>https://github.com/Kotlin/dataframe/edit/master/docs/StardustDocs/</browser-edits-url>
|
||||
<include-in-head>include-head.html</include-in-head>
|
||||
</variables>
|
||||
<sitemap change-frequency="monthly"/>
|
||||
<build-profile instance="d">
|
||||
<variables>
|
||||
<noindex-content>false</noindex-content>
|
||||
</variables>
|
||||
</build-profile>
|
||||
<footer>
|
||||
<social type="twitter" href="https://twitter.com/KotlinForData"/>
|
||||
<social type="youtube" href="https://www.youtube.com/@Kotlin"/>
|
||||
<link href="https://github.com/Kotlin/dataframe">GitHub</link>
|
||||
<link href="https://kotlinlang.slack.com/archives/C4W52CFEZ">Slack Community</link>
|
||||
</footer>
|
||||
</buildprofiles>
|
||||
@@ -0,0 +1,13 @@
|
||||
<meta name="google-site-verification" content="Lffz_ab-_S5cmA07ZXVbucHVklaRsnk8gEt8frHKjMk"/>
|
||||
<!-- Google Analytics -->
|
||||
<script>
|
||||
(function (w, d, s, l, i) {
|
||||
w[l] = w[l] || [];
|
||||
w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
|
||||
var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : '';
|
||||
j.async = true;
|
||||
j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl;
|
||||
f.parentNode.insertBefore(j, f);
|
||||
})(window, document, 'script', 'dataLayer', 'GTM-5P98');
|
||||
</script>
|
||||
<!-- End Google Analytics -->
|
||||
@@ -0,0 +1,2 @@
|
||||
<script src="static/iframe-config.js"></script>
|
||||
<script src="static/iframe-config-old.js"></script>
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<platforms>
|
||||
<platform id="primary">
|
||||
<src>keymap.xml</src>
|
||||
<use-keymaps>
|
||||
primary_macOS
|
||||
</use-keymaps>
|
||||
<use-keymaps>
|
||||
primary_Win-Linux
|
||||
</use-keymaps>
|
||||
</platform>
|
||||
</platforms>
|
||||
@@ -0,0 +1,67 @@
|
||||
window.addEventListener('load', () => {
|
||||
function updateIframeThemes(theme) {
|
||||
const iframes = document.querySelectorAll('iframe');
|
||||
|
||||
iframes.forEach((iframe) => {
|
||||
if (iframe.contentWindow && iframe.contentWindow.document) {
|
||||
iframe.contentWindow.document.documentElement.setAttribute('theme', theme);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function observeHtmlClassChanges() {
|
||||
const htmlElement = document.documentElement;
|
||||
|
||||
const observer = new MutationObserver((mutations) => {
|
||||
mutations.forEach((mutation) => {
|
||||
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
|
||||
const theme = htmlElement.classList.contains('theme-light') ? 'light' : 'dark';
|
||||
updateIframeThemes(theme);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
observer.observe(htmlElement, { attributes: true });
|
||||
}
|
||||
|
||||
window.addEventListener('message', (event) => {
|
||||
if (event.data.type === 'iframeHeight') {
|
||||
document.querySelectorAll('iframe').forEach((iframe) => {
|
||||
if (iframe.contentWindow === event.source) {
|
||||
iframe.style.height = event.data.height + 'px';
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function observeIframe(iframe) {
|
||||
const theme = document.documentElement.classList.contains('theme-light') ? 'light' : 'dark';
|
||||
|
||||
function sendTheme() {
|
||||
iframe.contentDocument.documentElement.setAttribute('theme', theme);
|
||||
}
|
||||
|
||||
iframe.addEventListener('load', sendTheme);
|
||||
if (iframe.contentDocument.readyState === 'complete') sendTheme();
|
||||
}
|
||||
|
||||
document.querySelectorAll('iframe').forEach(observeIframe);
|
||||
|
||||
const bodyObserver = new MutationObserver((mutations) => {
|
||||
mutations.forEach((mutation) => {
|
||||
mutation.addedNodes.forEach((node) => {
|
||||
if (node.tagName === 'IFRAME') observeIframe(node);
|
||||
else if (node.querySelectorAll) {
|
||||
node.querySelectorAll('iframe').forEach(observeIframe);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
bodyObserver.observe(document.body, { childList: true, subtree: true });
|
||||
|
||||
observeHtmlClassChanges();
|
||||
|
||||
const initialTheme = document.documentElement.classList.contains('theme-light') ? 'light' : 'dark';
|
||||
updateIframeThemes(initialTheme);
|
||||
});
|
||||
Vendored
+233
@@ -0,0 +1,233 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE instance-profile
|
||||
SYSTEM "https://resources.jetbrains.com/writerside/1.0/product-profile.dtd">
|
||||
|
||||
<instance-profile id="d"
|
||||
name="DataFrame"
|
||||
status="release"
|
||||
start-page="Home.topic">
|
||||
<toc-element topic="Home.topic"/>
|
||||
<toc-element topic="Guides-And-Examples.md">
|
||||
<toc-element topic="quickstart.md"/>
|
||||
<toc-element topic="Kotlin-DataFrame-Features-in-Kotlin-Notebook.md">
|
||||
<toc-element topic="Trobleshooting.md"/>
|
||||
</toc-element>
|
||||
<toc-element topic="Guide-for-backend-SQL-developers.md"/>
|
||||
</toc-element>
|
||||
|
||||
<toc-element topic="Setup.md" accepts-web-file-names="gettingstarted">
|
||||
<toc-element topic="SetupKotlinNotebook.md" accepts-web-file-names="gettingstartedkotlinnotebook.html"/>
|
||||
<toc-element topic="SetupGradle.md" accepts-web-file-names="gettingstartedgradle.html"/>
|
||||
<toc-element topic="SetupMaven.md"/>
|
||||
<toc-element topic="SetupJupyter.md" accepts-web-file-names="gettingstartedjupyternotebook.html"/>
|
||||
<toc-element topic="SetupDatalore.md" accepts-web-file-names="gettingstarteddatalore.html"/>
|
||||
<toc-element topic="SetupAndroid.md"/>
|
||||
<toc-element topic="SetupCustomGradle.md" accepts-web-file-names="gettingstartedgradleadvanced.html"/>
|
||||
<toc-element topic="Modules.md"/>
|
||||
</toc-element>
|
||||
<toc-element topic="concepts.md" accepts-web-file-names="overview.html">
|
||||
<toc-element topic="apiLevels.md"/>
|
||||
<toc-element topic="types.md">
|
||||
<toc-element topic="DataFrame.md"/>
|
||||
<toc-element topic="DataColumn.md"/>
|
||||
<toc-element topic="DataRow.md"/>
|
||||
</toc-element>
|
||||
<toc-element topic="hierarchical.md"/>
|
||||
<toc-element topic="nanAndNa.md"/>
|
||||
<toc-element topic="numberUnification.md"/>
|
||||
<toc-element topic="spellingConventions.md"/>
|
||||
</toc-element>
|
||||
<toc-element topic="extensionPropertiesApi.md"/>
|
||||
<toc-element topic="schemas.md">
|
||||
<toc-element topic="DataSchemaGenerationMethods.md"/>
|
||||
<toc-element topic="schemasInheritance.md"/>
|
||||
<toc-element topic="Data-Schemas-In-Kotlin-Notebook.md"/>
|
||||
<toc-element topic="schemasImportOpenApiJupyter.md"/>
|
||||
<toc-element topic="Gradle-Plugin.md">
|
||||
<toc-element topic="schemasGradle.md"/>
|
||||
<toc-element topic="schemasImportSqlGradle.md"/>
|
||||
<toc-element topic="schemasImportOpenApiGradle.md"/>
|
||||
</toc-element>
|
||||
</toc-element>
|
||||
<toc-element toc-title="Compiler Plugin">
|
||||
<toc-element topic="Compiler-Plugin.md"/>
|
||||
<toc-element topic="staticInterpretation.md"/>
|
||||
<toc-element topic="dataSchema.md"/>
|
||||
<toc-element topic="compilerPluginExamples.md"/>
|
||||
<toc-element topic="compilerPluginLimitationsAndWorkarounds.md"/>
|
||||
</toc-element>
|
||||
<toc-element topic="operations.md">
|
||||
<toc-element topic="create.md">
|
||||
<toc-element topic="createColumn.md" toc-title="DataColumn"/>
|
||||
<toc-element topic="createDataFrame.md" toc-title="DataFrame"/>
|
||||
</toc-element>
|
||||
<toc-element topic="io.md">
|
||||
<toc-element topic="read.md"/>
|
||||
<toc-element topic="readSqlDatabases.md"/>
|
||||
<toc-element topic="readSqlFromCustomDatabase.md"/>
|
||||
<toc-element topic="write.md"/>
|
||||
</toc-element>
|
||||
<toc-element topic="info.md">
|
||||
<toc-element topic="columnsCount.md"/>
|
||||
<toc-element topic="rowsCount.md"/>
|
||||
<toc-element topic="countDistinct.md"/>
|
||||
<toc-element topic="columnNames.md"/>
|
||||
<toc-element topic="columnTypes.md"/>
|
||||
<toc-element topic="head.md"/>
|
||||
<toc-element topic="tail.md"/>
|
||||
<toc-element topic="schema.md"/>
|
||||
<toc-element topic="describe.md"/>
|
||||
</toc-element>
|
||||
<toc-element topic="access.md" toc-title="Access">
|
||||
<toc-element topic="indexing.md"/>
|
||||
<toc-element topic="iterate.md"/>
|
||||
<toc-element topic="getRow.md">
|
||||
<toc-element topic="rows.md"/>
|
||||
<toc-element topic="single.md"/>
|
||||
<toc-element topic="first.md"/>
|
||||
<toc-element topic="last.md"/>
|
||||
<toc-element topic="minBy.md"/>
|
||||
<toc-element topic="maxBy.md"/>
|
||||
<toc-element topic="asSequence.md"/>
|
||||
</toc-element>
|
||||
<toc-element topic="getColumns.md">
|
||||
<toc-element topic="columns.md"/>
|
||||
<toc-element topic="getColumn.md"/>
|
||||
</toc-element>
|
||||
<toc-element topic="getValues.md">
|
||||
<toc-element topic="values.md"/>
|
||||
</toc-element>
|
||||
</toc-element>
|
||||
<toc-element topic="modify.md">
|
||||
<toc-element topic="add.md"/>
|
||||
<toc-element topic="adjustSchema.md"/>
|
||||
<toc-element topic="append.md"/>
|
||||
<toc-element topic="cast.md"/>
|
||||
<toc-element topic="concat.md"/>
|
||||
<toc-element topic="convert.md"/>
|
||||
<toc-element topic="convertTo.md"/>
|
||||
<toc-element topic="distinct.md"/>
|
||||
<toc-element topic="drop.md"/>
|
||||
<toc-element topic="duplicate.md"/>
|
||||
<toc-element topic="explode.md"/>
|
||||
<toc-element topic="fill.md"/>
|
||||
<toc-element topic="filter.md"/>
|
||||
<toc-element topic="flatten.md"/>
|
||||
<toc-element topic="gather.md"/>
|
||||
<toc-element topic="group.md"/>
|
||||
<toc-element topic="groupBy.md"/>
|
||||
<toc-element topic="implode.md"/>
|
||||
<toc-element topic="inferType.md"/>
|
||||
<toc-element topic="insert.md"/>
|
||||
<toc-element topic="join.md"/>
|
||||
<toc-element topic="joinWith.md"/>
|
||||
<toc-element topic="map.md"/>
|
||||
<toc-element topic="merge.md"/>
|
||||
<toc-element topic="move.md"/>
|
||||
<toc-element topic="parse.md"/>
|
||||
<toc-element topic="pivot.md"/>
|
||||
<toc-element topic="remove.md"/>
|
||||
<toc-element topic="rename.md"/>
|
||||
<toc-element topic="reorder.md"/>
|
||||
<toc-element topic="replace.md"/>
|
||||
<toc-element topic="reverse.md"/>
|
||||
<toc-element topic="select.md"/>
|
||||
<toc-element topic="sliceRows.md"/>
|
||||
<toc-element topic="sortBy.md"/>
|
||||
<toc-element topic="split.md"/>
|
||||
<toc-element topic="toList.md"/>
|
||||
<toc-element topic="unfold.md"/>
|
||||
<toc-element topic="ungroup.md"/>
|
||||
<toc-element topic="update.md"/>
|
||||
<toc-element topic="xs.md"/>
|
||||
<toc-element topic="addRemove.md" hidden="true"/>
|
||||
<toc-element topic="sliceRows.md" hidden="true"/>
|
||||
<toc-element topic="filterRows.md" hidden="true"/>
|
||||
<toc-element topic="reorderRows.md" hidden="true"/>
|
||||
<toc-element topic="groupByConcat.md" hidden="true"/>
|
||||
<toc-element topic="updateConvert.md" hidden="true"/>
|
||||
<toc-element topic="splitMerge.md" hidden="true"/>
|
||||
<toc-element topic="moveRename.md" hidden="true"/>
|
||||
<toc-element topic="groupUngroupFlatten.md" hidden="true"/>
|
||||
<toc-element topic="insertReplace.md" hidden="true"/>
|
||||
<toc-element topic="explodeImplode.md" hidden="true"/>
|
||||
<toc-element topic="pivotGather.md" hidden="true"/>
|
||||
<toc-element topic="appendDuplicate.md" hidden="true"/>
|
||||
</toc-element>
|
||||
<toc-element toc-title="Statistics">
|
||||
<toc-element topic="summaryStatistics.md">
|
||||
<toc-element topic="count.md"/>
|
||||
<toc-element topic="minmax.md"/>
|
||||
<toc-element topic="sum.md"/>
|
||||
<toc-element topic="median.md"/>
|
||||
<toc-element topic="percentile.md"/>
|
||||
<toc-element topic="mean.md"/>
|
||||
<toc-element topic="std.md"/>
|
||||
<toc-element topic="valueCounts.md"/>
|
||||
</toc-element>
|
||||
<toc-element topic="cumulativeStatistics.md">
|
||||
<toc-element topic="cumSum.md"/>
|
||||
</toc-element>
|
||||
<toc-element topic="statisticalRelationship.md">
|
||||
<toc-element topic="corr.md"/>
|
||||
</toc-element>
|
||||
<toc-element topic="rowStats.md"/>
|
||||
</toc-element>
|
||||
<toc-element topic="multipleDataFrames.md">
|
||||
<toc-element topic="addDf.md"/>
|
||||
<toc-element topic="concatDf.md"/>
|
||||
<toc-element topic="join.md"/>
|
||||
<toc-element topic="joinWith.md"/>
|
||||
</toc-element>
|
||||
<toc-element topic="columnOperations.md">
|
||||
<toc-element topic="columnStatistics.md" toc-title="Statistics"/>
|
||||
<toc-element topic="asIterable.md"/>
|
||||
<toc-element topic="asSequenceColumn.md" toc-title="asSequence"/>
|
||||
<toc-element topic="between.md"/>
|
||||
</toc-element>
|
||||
<toc-element topic="ColumnSelectors.md"/>
|
||||
<toc-element topic="Utils.md">
|
||||
<toc-element topic="any.md"/>
|
||||
<toc-element topic="all.md"/>
|
||||
<toc-element topic="chunked.md"/>
|
||||
<toc-element topic="shuffle.md"/>
|
||||
</toc-element>
|
||||
<toc-element topic="collectionsInterop.md">
|
||||
<toc-element topic="toList.md"/>
|
||||
<toc-element topic="toMap.md"/>
|
||||
<toc-element topic="associate.md"/>
|
||||
<toc-element topic="associateBy.md"/>
|
||||
</toc-element>
|
||||
<toc-element topic="rendering.md">
|
||||
<toc-element topic="toHTML.md"/>
|
||||
<toc-element topic="format.md"/>
|
||||
<toc-element topic="jupyterRendering.md"/>
|
||||
</toc-element>
|
||||
</toc-element>
|
||||
<toc-element topic="Data-Sources.md">
|
||||
<toc-element topic="JSON.md">
|
||||
<toc-element topic="OpenAPI.md"/>
|
||||
</toc-element>
|
||||
<toc-element topic="CSV-TSV.md"/>
|
||||
<toc-element topic="Excel.md"/>
|
||||
<toc-element topic="ApacheArrow.md"/>
|
||||
<toc-element topic="Parquet.md"/>
|
||||
<toc-element topic="SQL.md">
|
||||
<toc-element topic="PostgreSQL.md"/>
|
||||
<toc-element topic="MySQL.md"/>
|
||||
<toc-element topic="Microsoft-SQL-Server.md"/>
|
||||
<toc-element topic="SQLite.md"/>
|
||||
<toc-element topic="H2.md"/>
|
||||
<toc-element topic="MariaDB.md"/>
|
||||
<toc-element topic="DuckDB.md"/>
|
||||
<toc-element topic="Custom-SQL-Source.md"/>
|
||||
</toc-element>
|
||||
<toc-element topic="Integrations.md"/>
|
||||
</toc-element>
|
||||
<toc-element topic="_shadow_resources.md" hidden="true"/>
|
||||
<toc-element topic="Support.md"/>
|
||||
<toc-element topic="FAQ.md"/>
|
||||
<toc-element topic="MigrationTo_1_0.md">
|
||||
<toc-element topic="Migration-From-Plugins.md"/>
|
||||
</toc-element>
|
||||
</instance-profile>
|
||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 253 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 236 KiB |
@@ -0,0 +1 @@
|
||||
<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f"/></svg>
|
||||
|
After Width: | Height: | Size: 963 B |
Binary file not shown.
|
After Width: | Height: | Size: 227 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 249 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 262 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 271 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 498 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 484 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 370 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 382 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 410 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 414 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 441 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 451 KiB |
+400
@@ -0,0 +1,400 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="705.0" height="470.0">
|
||||
<style type="text/css">
|
||||
.plt-container {
|
||||
font-family: sans-serif;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
text {
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
#_sample_helper_static_id_prefix_0 .plot-title {
|
||||
fill: #474747;
|
||||
font-weight: normal;
|
||||
font-style: normal;font-family: sans-serif;
|
||||
font-size: 16.0px;
|
||||
|
||||
}
|
||||
#_sample_helper_static_id_prefix_0 .plot-subtitle {
|
||||
fill: #474747;
|
||||
font-weight: normal;
|
||||
font-style: normal;font-family: sans-serif;
|
||||
font-size: 15.0px;
|
||||
|
||||
}
|
||||
#_sample_helper_static_id_prefix_0 .plot-caption {
|
||||
fill: #474747;
|
||||
font-weight: normal;
|
||||
font-style: normal;font-family: sans-serif;
|
||||
font-size: 13.0px;
|
||||
|
||||
}
|
||||
#_sample_helper_static_id_prefix_0 .hyperlink-element {
|
||||
fill: #118ed8;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
#_sample_helper_static_id_prefix_0 .legend-title {
|
||||
fill: #474747;
|
||||
font-weight: normal;
|
||||
font-style: normal;font-family: sans-serif;
|
||||
font-size: 15.0px;
|
||||
|
||||
}
|
||||
#_sample_helper_static_id_prefix_0 .legend-item {
|
||||
fill: #474747;
|
||||
font-weight: normal;
|
||||
font-style: normal;font-family: sans-serif;
|
||||
font-size: 13.0px;
|
||||
|
||||
}
|
||||
#_sample_helper_static_id_prefix_0 .axis-title-x {
|
||||
fill: #474747;
|
||||
font-weight: normal;
|
||||
font-style: normal;font-family: sans-serif;
|
||||
font-size: 15.0px;
|
||||
|
||||
}
|
||||
#_sample_helper_static_id_prefix_0 .axis-text-x {
|
||||
fill: #474747;
|
||||
font-weight: normal;
|
||||
font-style: normal;font-family: sans-serif;
|
||||
font-size: 13.0px;
|
||||
|
||||
}
|
||||
#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
|
||||
fill: #ffffff;
|
||||
font-weight: normal;
|
||||
font-style: normal;font-family: sans-serif;
|
||||
font-size: 13.0px;
|
||||
|
||||
}
|
||||
#_sample_helper_static_id_prefix_0 .axis-title-y {
|
||||
fill: #474747;
|
||||
font-weight: normal;
|
||||
font-style: normal;font-family: sans-serif;
|
||||
font-size: 15.0px;
|
||||
|
||||
}
|
||||
#_sample_helper_static_id_prefix_0 .axis-text-y {
|
||||
fill: #474747;
|
||||
font-weight: normal;
|
||||
font-style: normal;font-family: sans-serif;
|
||||
font-size: 13.0px;
|
||||
|
||||
}
|
||||
#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
|
||||
fill: #ffffff;
|
||||
font-weight: normal;
|
||||
font-style: normal;font-family: sans-serif;
|
||||
font-size: 13.0px;
|
||||
|
||||
}
|
||||
#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
|
||||
fill: #474747;
|
||||
font-weight: normal;
|
||||
font-style: normal;font-family: sans-serif;
|
||||
font-size: 13.0px;
|
||||
|
||||
}
|
||||
#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
|
||||
fill: #474747;
|
||||
font-weight: normal;
|
||||
font-style: normal;font-family: sans-serif;
|
||||
font-size: 13.0px;
|
||||
|
||||
}
|
||||
#_sample_helper_static_id_prefix_2 .tooltip-text {
|
||||
fill: #474747;
|
||||
font-weight: normal;
|
||||
font-style: normal;font-family: sans-serif;
|
||||
font-size: 13.0px;
|
||||
|
||||
}
|
||||
#_sample_helper_static_id_prefix_2 .tooltip-title {
|
||||
fill: #474747;
|
||||
font-weight: bold;
|
||||
font-style: normal;font-family: sans-serif;
|
||||
font-size: 13.0px;
|
||||
|
||||
}
|
||||
#_sample_helper_static_id_prefix_2 .tooltip-label {
|
||||
fill: #474747;
|
||||
font-weight: bold;
|
||||
font-style: normal;font-family: sans-serif;
|
||||
font-size: 13.0px;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
<g id="_sample_helper_static_id_prefix_0">
|
||||
<path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
|
||||
</path>
|
||||
<g transform="translate(21.0 22.0 ) ">
|
||||
<g>
|
||||
<g transform="translate(46.97651758668602 0.0 ) ">
|
||||
<g>
|
||||
<line x1="39.8218702493839" y1="0.0" x2="39.8218702493839" y2="328.13961002434917" stroke="rgb(233,233,233)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
|
||||
</line>
|
||||
<line x1="101.08628601766682" y1="0.0" x2="101.08628601766682" y2="328.13961002434917" stroke="rgb(233,233,233)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
|
||||
</line>
|
||||
<line x1="162.35070178594975" y1="0.0" x2="162.35070178594975" y2="328.13961002434917" stroke="rgb(233,233,233)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
|
||||
</line>
|
||||
<line x1="223.61511755423265" y1="0.0" x2="223.61511755423265" y2="328.13961002434917" stroke="rgb(233,233,233)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
|
||||
</line>
|
||||
<line x1="284.8795333225156" y1="0.0" x2="284.8795333225156" y2="328.13961002434917" stroke="rgb(233,233,233)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
|
||||
</line>
|
||||
<line x1="346.1439490907985" y1="0.0" x2="346.1439490907985" y2="328.13961002434917" stroke="rgb(233,233,233)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
|
||||
</line>
|
||||
<line x1="407.4083648590814" y1="0.0" x2="407.4083648590814" y2="328.13961002434917" stroke="rgb(233,233,233)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
|
||||
</line>
|
||||
<line x1="468.6727806273644" y1="0.0" x2="468.6727806273644" y2="328.13961002434917" stroke="rgb(233,233,233)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
|
||||
</line>
|
||||
<line x1="529.9371963956473" y1="0.0" x2="529.9371963956473" y2="328.13961002434917" stroke="rgb(233,233,233)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
|
||||
</line>
|
||||
<line x1="591.2016121639302" y1="0.0" x2="591.2016121639302" y2="328.13961002434917" stroke="rgb(233,233,233)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
|
||||
</line>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(46.97651758668602 0.0 ) ">
|
||||
<g>
|
||||
<line x1="0.0" y1="328.13961002434917" x2="631.023482413314" y2="328.13961002434917" stroke="rgb(233,233,233)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
|
||||
</line>
|
||||
<line x1="0.0" y1="288.48249689444407" x2="631.023482413314" y2="288.48249689444407" stroke="rgb(233,233,233)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
|
||||
</line>
|
||||
<line x1="0.0" y1="248.82538376453903" x2="631.023482413314" y2="248.82538376453903" stroke="rgb(233,233,233)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
|
||||
</line>
|
||||
<line x1="0.0" y1="209.16827063463393" x2="631.023482413314" y2="209.16827063463393" stroke="rgb(233,233,233)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
|
||||
</line>
|
||||
<line x1="0.0" y1="169.51115750472886" x2="631.023482413314" y2="169.51115750472886" stroke="rgb(233,233,233)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
|
||||
</line>
|
||||
<line x1="0.0" y1="129.8540443748238" x2="631.023482413314" y2="129.8540443748238" stroke="rgb(233,233,233)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
|
||||
</line>
|
||||
<line x1="0.0" y1="90.19693124491869" x2="631.023482413314" y2="90.19693124491869" stroke="rgb(233,233,233)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
|
||||
</line>
|
||||
<line x1="0.0" y1="50.53981811501359" x2="631.023482413314" y2="50.53981811501359" stroke="rgb(233,233,233)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
|
||||
</line>
|
||||
<line x1="0.0" y1="10.882704985108546" x2="631.023482413314" y2="10.882704985108546" stroke="rgb(233,233,233)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
|
||||
</line>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (46.97651758668602, 0.0), (631.023482413314, 328.13961002434917)]">
|
||||
<g transform="translate(46.97651758668602 0.0 ) ">
|
||||
<g>
|
||||
<g>
|
||||
<rect x="563.632625068203" y="308.9138415789712" height="19.22576844537798" width="55.137974191454646" stroke="rgb(255,255,255)" stroke-opacity="1.0" fill="rgb(17,142,216)" fill-opacity="1.0" stroke-width="1.6500000000000001">
|
||||
</rect>
|
||||
<rect x="502.36820929991995" y="307.2958313632711" height="20.84377866107809" width="55.137974191454646" stroke="rgb(255,255,255)" stroke-opacity="1.0" fill="rgb(17,142,216)" fill-opacity="1.0" stroke-width="1.6500000000000001">
|
||||
</rect>
|
||||
<rect x="441.10379353163705" y="305.646095457067" height="22.493514567282148" width="55.137974191454646" stroke="rgb(255,255,255)" stroke-opacity="1.0" fill="rgb(17,142,216)" fill-opacity="1.0" stroke-width="1.6500000000000001">
|
||||
</rect>
|
||||
<rect x="379.8393777633541" y="283.02567812776914" height="45.11393189658003" width="55.137974191454646" stroke="rgb(255,255,255)" stroke-opacity="1.0" fill="rgb(17,142,216)" fill-opacity="1.0" stroke-width="1.6500000000000001">
|
||||
</rect>
|
||||
<rect x="318.5749619950712" y="280.0831203335302" height="48.05648969081898" width="55.137974191454646" stroke="rgb(255,255,255)" stroke-opacity="1.0" fill="rgb(17,142,216)" fill-opacity="1.0" stroke-width="1.6500000000000001">
|
||||
</rect>
|
||||
<rect x="257.3105462267883" y="279.59930355334535" height="48.54030647100382" width="55.137974191454646" stroke="rgb(255,255,255)" stroke-opacity="1.0" fill="rgb(17,142,216)" fill-opacity="1.0" stroke-width="1.6500000000000001">
|
||||
</rect>
|
||||
<rect x="196.04613045850533" y="274.16627905454834" height="53.97333096980083" width="55.13797419145462" stroke="rgb(255,255,255)" stroke-opacity="1.0" fill="rgb(17,142,216)" fill-opacity="1.0" stroke-width="1.6500000000000001">
|
||||
</rect>
|
||||
<rect x="134.78171469022243" y="271.81857795725796" height="56.32103206709121" width="55.137974191454646" stroke="rgb(255,255,255)" stroke-opacity="1.0" fill="rgb(17,142,216)" fill-opacity="1.0" stroke-width="1.6500000000000001">
|
||||
</rect>
|
||||
<rect x="73.5172989219395" y="225.61804116091855" height="102.52156886343062" width="55.137974191454646" stroke="rgb(255,255,255)" stroke-opacity="1.0" fill="rgb(17,142,216)" fill-opacity="1.0" stroke-width="1.6500000000000001">
|
||||
</rect>
|
||||
<rect x="12.252883153656583" y="15.625695715445204" height="312.51391430890396" width="55.13797419145463" stroke="rgb(255,255,255)" stroke-opacity="1.0" fill="rgb(17,142,216)" fill-opacity="1.0" stroke-width="1.6500000000000001">
|
||||
</rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="_sample_helper_static_id_prefix_1">
|
||||
<rect x="46.97651758668602" y="0.0" width="631.023482413314" height="328.13961002434917">
|
||||
</rect>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</g>
|
||||
<g>
|
||||
<g transform="translate(46.97651758668602 328.13961002434917 ) ">
|
||||
<g transform="translate(39.8218702493839 0.0 ) ">
|
||||
<line stroke-width="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" x2="0.0" y2="4.0">
|
||||
</line>
|
||||
<g transform="translate(0.0 6.0 ) rotate(-30.0 ) ">
|
||||
<text class="axis-text-x" text-anchor="end" dy="0.7em" y="0.0">
|
||||
<tspan>kotlin</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(101.08628601766682 0.0 ) ">
|
||||
<line stroke-width="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" x2="0.0" y2="4.0">
|
||||
</line>
|
||||
<g transform="translate(0.0 6.0 ) rotate(-30.0 ) ">
|
||||
<text class="axis-text-x" text-anchor="end" dy="0.7em" y="0.0">
|
||||
<tspan>intellij-community</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(162.35070178594975 0.0 ) ">
|
||||
<line stroke-width="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" x2="0.0" y2="4.0">
|
||||
</line>
|
||||
<g transform="translate(0.0 6.0 ) rotate(-30.0 ) ">
|
||||
<text class="axis-text-x" text-anchor="end" dy="0.7em" y="0.0">
|
||||
<tspan>kotlin-native</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(223.61511755423265 0.0 ) ">
|
||||
<line stroke-width="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" x2="0.0" y2="4.0">
|
||||
</line>
|
||||
<g transform="translate(0.0 6.0 ) rotate(-30.0 ) ">
|
||||
<text class="axis-text-x" text-anchor="end" dy="0.7em" y="0.0">
|
||||
<tspan>compose-jb</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(284.8795333225156 0.0 ) ">
|
||||
<line stroke-width="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" x2="0.0" y2="4.0">
|
||||
</line>
|
||||
<g transform="translate(0.0 6.0 ) rotate(-30.0 ) ">
|
||||
<text class="axis-text-x" text-anchor="end" dy="0.7em" y="0.0">
|
||||
<tspan>ideavim</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(346.1439490907985 0.0 ) ">
|
||||
<line stroke-width="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" x2="0.0" y2="4.0">
|
||||
</line>
|
||||
<g transform="translate(0.0 6.0 ) rotate(-30.0 ) ">
|
||||
<text class="axis-text-x" text-anchor="end" dy="0.7em" y="0.0">
|
||||
<tspan>JetBrainsMono</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(407.4083648590814 0.0 ) ">
|
||||
<line stroke-width="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" x2="0.0" y2="4.0">
|
||||
</line>
|
||||
<g transform="translate(0.0 6.0 ) rotate(-30.0 ) ">
|
||||
<text class="axis-text-x" text-anchor="end" dy="0.7em" y="0.0">
|
||||
<tspan>Exposed</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(468.6727806273644 0.0 ) ">
|
||||
<line stroke-width="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" x2="0.0" y2="4.0">
|
||||
</line>
|
||||
<g transform="translate(0.0 6.0 ) rotate(-30.0 ) ">
|
||||
<text class="axis-text-x" text-anchor="end" dy="0.7em" y="0.0">
|
||||
<tspan>ring-ui</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(529.9371963956473 0.0 ) ">
|
||||
<line stroke-width="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" x2="0.0" y2="4.0">
|
||||
</line>
|
||||
<g transform="translate(0.0 6.0 ) rotate(-30.0 ) ">
|
||||
<text class="axis-text-x" text-anchor="end" dy="0.7em" y="0.0">
|
||||
<tspan>kotlinconf-app</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(591.2016121639302 0.0 ) ">
|
||||
<line stroke-width="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" x2="0.0" y2="4.0">
|
||||
</line>
|
||||
<g transform="translate(0.0 6.0 ) rotate(-30.0 ) ">
|
||||
<text class="axis-text-x" text-anchor="end" dy="0.7em" y="0.0">
|
||||
<tspan>create-react-kotlin-app</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
<line x1="0.0" y1="0.0" x2="631.023482413314" y2="0.0" stroke-width="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0">
|
||||
</line>
|
||||
</g>
|
||||
<g transform="translate(46.97651758668602 0.0 ) ">
|
||||
<g transform="translate(0.0 328.13961002434917 ) ">
|
||||
<g transform="translate(-2.0 0.0 ) ">
|
||||
<text class="axis-text-y" text-anchor="end" dy="0.35em" y="0.0">
|
||||
<tspan>0</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(0.0 288.48249689444407 ) ">
|
||||
<g transform="translate(-2.0 0.0 ) ">
|
||||
<text class="axis-text-y" text-anchor="end" dy="0.35em" y="0.0">
|
||||
<tspan>5,000</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(0.0 248.82538376453903 ) ">
|
||||
<g transform="translate(-2.0 0.0 ) ">
|
||||
<text class="axis-text-y" text-anchor="end" dy="0.35em" y="0.0">
|
||||
<tspan>10,000</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(0.0 209.16827063463393 ) ">
|
||||
<g transform="translate(-2.0 0.0 ) ">
|
||||
<text class="axis-text-y" text-anchor="end" dy="0.35em" y="0.0">
|
||||
<tspan>15,000</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(0.0 169.51115750472886 ) ">
|
||||
<g transform="translate(-2.0 0.0 ) ">
|
||||
<text class="axis-text-y" text-anchor="end" dy="0.35em" y="0.0">
|
||||
<tspan>20,000</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(0.0 129.8540443748238 ) ">
|
||||
<g transform="translate(-2.0 0.0 ) ">
|
||||
<text class="axis-text-y" text-anchor="end" dy="0.35em" y="0.0">
|
||||
<tspan>25,000</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(0.0 90.19693124491869 ) ">
|
||||
<g transform="translate(-2.0 0.0 ) ">
|
||||
<text class="axis-text-y" text-anchor="end" dy="0.35em" y="0.0">
|
||||
<tspan>30,000</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(0.0 50.53981811501359 ) ">
|
||||
<g transform="translate(-2.0 0.0 ) ">
|
||||
<text class="axis-text-y" text-anchor="end" dy="0.35em" y="0.0">
|
||||
<tspan>35,000</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(0.0 10.882704985108546 ) ">
|
||||
<g transform="translate(-2.0 0.0 ) ">
|
||||
<text class="axis-text-y" text-anchor="end" dy="0.35em" y="0.0">
|
||||
<tspan>40,000</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(67.97651758668601 15.8 ) ">
|
||||
<text class="plot-title" y="0.0">
|
||||
<tspan>Top 10 JetBrains repositories by stars count</tspan>
|
||||
</text>
|
||||
</g>
|
||||
<g transform="translate(15.0 186.06980501217458 ) rotate(-90.0 ) ">
|
||||
<text class="axis-title-y" y="0.0" text-anchor="middle">
|
||||
<tspan>starsCount</tspan>
|
||||
</text>
|
||||
</g>
|
||||
<g transform="translate(383.488258793343 464.0 ) ">
|
||||
<text class="axis-title-x" y="0.0" text-anchor="middle">
|
||||
<tspan>name</tspan>
|
||||
</text>
|
||||
</g>
|
||||
<path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
|
||||
</path>
|
||||
</g>
|
||||
<g id="_sample_helper_static_id_prefix_2">
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 18 KiB |
+400
@@ -0,0 +1,400 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="705.0" height="470.0">
|
||||
<style type="text/css">
|
||||
.plt-container {
|
||||
font-family: sans-serif;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
text {
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
#_sample_helper_static_id_prefix_0 .plot-title {
|
||||
fill: #bbbbbb;
|
||||
font-weight: normal;
|
||||
font-style: normal;font-family: sans-serif;
|
||||
font-size: 16.0px;
|
||||
|
||||
}
|
||||
#_sample_helper_static_id_prefix_0 .plot-subtitle {
|
||||
fill: #bbbbbb;
|
||||
font-weight: normal;
|
||||
font-style: normal;font-family: sans-serif;
|
||||
font-size: 15.0px;
|
||||
|
||||
}
|
||||
#_sample_helper_static_id_prefix_0 .plot-caption {
|
||||
fill: #bbbbbb;
|
||||
font-weight: normal;
|
||||
font-style: normal;font-family: sans-serif;
|
||||
font-size: 13.0px;
|
||||
|
||||
}
|
||||
#_sample_helper_static_id_prefix_0 .hyperlink-element {
|
||||
fill: #118ed8;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
#_sample_helper_static_id_prefix_0 .legend-title {
|
||||
fill: #bbbbbb;
|
||||
font-weight: normal;
|
||||
font-style: normal;font-family: sans-serif;
|
||||
font-size: 15.0px;
|
||||
|
||||
}
|
||||
#_sample_helper_static_id_prefix_0 .legend-item {
|
||||
fill: #bbbbbb;
|
||||
font-weight: normal;
|
||||
font-style: normal;font-family: sans-serif;
|
||||
font-size: 13.0px;
|
||||
|
||||
}
|
||||
#_sample_helper_static_id_prefix_0 .axis-title-x {
|
||||
fill: #bbbbbb;
|
||||
font-weight: normal;
|
||||
font-style: normal;font-family: sans-serif;
|
||||
font-size: 15.0px;
|
||||
|
||||
}
|
||||
#_sample_helper_static_id_prefix_0 .axis-text-x {
|
||||
fill: #bbbbbb;
|
||||
font-weight: normal;
|
||||
font-style: normal;font-family: sans-serif;
|
||||
font-size: 13.0px;
|
||||
|
||||
}
|
||||
#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
|
||||
fill: #303030;
|
||||
font-weight: normal;
|
||||
font-style: normal;font-family: sans-serif;
|
||||
font-size: 13.0px;
|
||||
|
||||
}
|
||||
#_sample_helper_static_id_prefix_0 .axis-title-y {
|
||||
fill: #bbbbbb;
|
||||
font-weight: normal;
|
||||
font-style: normal;font-family: sans-serif;
|
||||
font-size: 15.0px;
|
||||
|
||||
}
|
||||
#_sample_helper_static_id_prefix_0 .axis-text-y {
|
||||
fill: #bbbbbb;
|
||||
font-weight: normal;
|
||||
font-style: normal;font-family: sans-serif;
|
||||
font-size: 13.0px;
|
||||
|
||||
}
|
||||
#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
|
||||
fill: #303030;
|
||||
font-weight: normal;
|
||||
font-style: normal;font-family: sans-serif;
|
||||
font-size: 13.0px;
|
||||
|
||||
}
|
||||
#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
|
||||
fill: #bbbbbb;
|
||||
font-weight: normal;
|
||||
font-style: normal;font-family: sans-serif;
|
||||
font-size: 13.0px;
|
||||
|
||||
}
|
||||
#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
|
||||
fill: #bbbbbb;
|
||||
font-weight: normal;
|
||||
font-style: normal;font-family: sans-serif;
|
||||
font-size: 13.0px;
|
||||
|
||||
}
|
||||
#_sample_helper_static_id_prefix_2 .tooltip-text {
|
||||
fill: #bbbbbb;
|
||||
font-weight: normal;
|
||||
font-style: normal;font-family: sans-serif;
|
||||
font-size: 13.0px;
|
||||
|
||||
}
|
||||
#_sample_helper_static_id_prefix_2 .tooltip-title {
|
||||
fill: #bbbbbb;
|
||||
font-weight: bold;
|
||||
font-style: normal;font-family: sans-serif;
|
||||
font-size: 13.0px;
|
||||
|
||||
}
|
||||
#_sample_helper_static_id_prefix_2 .tooltip-label {
|
||||
fill: #bbbbbb;
|
||||
font-weight: bold;
|
||||
font-style: normal;font-family: sans-serif;
|
||||
font-size: 13.0px;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
<g id="_sample_helper_static_id_prefix_0">
|
||||
<path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
|
||||
</path>
|
||||
<g transform="translate(21.0 22.0 ) ">
|
||||
<g>
|
||||
<g transform="translate(46.97651758668602 0.0 ) ">
|
||||
<g>
|
||||
<line x1="39.8218702493839" y1="0.0" x2="39.8218702493839" y2="328.13961002434917" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
|
||||
</line>
|
||||
<line x1="101.08628601766682" y1="0.0" x2="101.08628601766682" y2="328.13961002434917" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
|
||||
</line>
|
||||
<line x1="162.35070178594975" y1="0.0" x2="162.35070178594975" y2="328.13961002434917" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
|
||||
</line>
|
||||
<line x1="223.61511755423265" y1="0.0" x2="223.61511755423265" y2="328.13961002434917" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
|
||||
</line>
|
||||
<line x1="284.8795333225156" y1="0.0" x2="284.8795333225156" y2="328.13961002434917" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
|
||||
</line>
|
||||
<line x1="346.1439490907985" y1="0.0" x2="346.1439490907985" y2="328.13961002434917" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
|
||||
</line>
|
||||
<line x1="407.4083648590814" y1="0.0" x2="407.4083648590814" y2="328.13961002434917" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
|
||||
</line>
|
||||
<line x1="468.6727806273644" y1="0.0" x2="468.6727806273644" y2="328.13961002434917" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
|
||||
</line>
|
||||
<line x1="529.9371963956473" y1="0.0" x2="529.9371963956473" y2="328.13961002434917" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
|
||||
</line>
|
||||
<line x1="591.2016121639302" y1="0.0" x2="591.2016121639302" y2="328.13961002434917" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
|
||||
</line>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(46.97651758668602 0.0 ) ">
|
||||
<g>
|
||||
<line x1="0.0" y1="328.13961002434917" x2="631.023482413314" y2="328.13961002434917" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
|
||||
</line>
|
||||
<line x1="0.0" y1="288.48249689444407" x2="631.023482413314" y2="288.48249689444407" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
|
||||
</line>
|
||||
<line x1="0.0" y1="248.82538376453903" x2="631.023482413314" y2="248.82538376453903" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
|
||||
</line>
|
||||
<line x1="0.0" y1="209.16827063463393" x2="631.023482413314" y2="209.16827063463393" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
|
||||
</line>
|
||||
<line x1="0.0" y1="169.51115750472886" x2="631.023482413314" y2="169.51115750472886" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
|
||||
</line>
|
||||
<line x1="0.0" y1="129.8540443748238" x2="631.023482413314" y2="129.8540443748238" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
|
||||
</line>
|
||||
<line x1="0.0" y1="90.19693124491869" x2="631.023482413314" y2="90.19693124491869" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
|
||||
</line>
|
||||
<line x1="0.0" y1="50.53981811501359" x2="631.023482413314" y2="50.53981811501359" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
|
||||
</line>
|
||||
<line x1="0.0" y1="10.882704985108546" x2="631.023482413314" y2="10.882704985108546" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
|
||||
</line>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(46.97651758668602 328.13961002434917 ) ">
|
||||
<g transform="translate(39.8218702493839 0.0 ) ">
|
||||
<line stroke-width="1.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" x2="0.0" y2="4.0">
|
||||
</line>
|
||||
<g transform="translate(0.0 6.0 ) rotate(-30.0 ) ">
|
||||
<text class="axis-text-x" text-anchor="end" dy="0.7em" y="0.0">
|
||||
<tspan>kotlin</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(101.08628601766682 0.0 ) ">
|
||||
<line stroke-width="1.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" x2="0.0" y2="4.0">
|
||||
</line>
|
||||
<g transform="translate(0.0 6.0 ) rotate(-30.0 ) ">
|
||||
<text class="axis-text-x" text-anchor="end" dy="0.7em" y="0.0">
|
||||
<tspan>intellij-community</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(162.35070178594975 0.0 ) ">
|
||||
<line stroke-width="1.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" x2="0.0" y2="4.0">
|
||||
</line>
|
||||
<g transform="translate(0.0 6.0 ) rotate(-30.0 ) ">
|
||||
<text class="axis-text-x" text-anchor="end" dy="0.7em" y="0.0">
|
||||
<tspan>kotlin-native</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(223.61511755423265 0.0 ) ">
|
||||
<line stroke-width="1.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" x2="0.0" y2="4.0">
|
||||
</line>
|
||||
<g transform="translate(0.0 6.0 ) rotate(-30.0 ) ">
|
||||
<text class="axis-text-x" text-anchor="end" dy="0.7em" y="0.0">
|
||||
<tspan>compose-jb</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(284.8795333225156 0.0 ) ">
|
||||
<line stroke-width="1.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" x2="0.0" y2="4.0">
|
||||
</line>
|
||||
<g transform="translate(0.0 6.0 ) rotate(-30.0 ) ">
|
||||
<text class="axis-text-x" text-anchor="end" dy="0.7em" y="0.0">
|
||||
<tspan>ideavim</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(346.1439490907985 0.0 ) ">
|
||||
<line stroke-width="1.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" x2="0.0" y2="4.0">
|
||||
</line>
|
||||
<g transform="translate(0.0 6.0 ) rotate(-30.0 ) ">
|
||||
<text class="axis-text-x" text-anchor="end" dy="0.7em" y="0.0">
|
||||
<tspan>JetBrainsMono</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(407.4083648590814 0.0 ) ">
|
||||
<line stroke-width="1.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" x2="0.0" y2="4.0">
|
||||
</line>
|
||||
<g transform="translate(0.0 6.0 ) rotate(-30.0 ) ">
|
||||
<text class="axis-text-x" text-anchor="end" dy="0.7em" y="0.0">
|
||||
<tspan>Exposed</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(468.6727806273644 0.0 ) ">
|
||||
<line stroke-width="1.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" x2="0.0" y2="4.0">
|
||||
</line>
|
||||
<g transform="translate(0.0 6.0 ) rotate(-30.0 ) ">
|
||||
<text class="axis-text-x" text-anchor="end" dy="0.7em" y="0.0">
|
||||
<tspan>ring-ui</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(529.9371963956473 0.0 ) ">
|
||||
<line stroke-width="1.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" x2="0.0" y2="4.0">
|
||||
</line>
|
||||
<g transform="translate(0.0 6.0 ) rotate(-30.0 ) ">
|
||||
<text class="axis-text-x" text-anchor="end" dy="0.7em" y="0.0">
|
||||
<tspan>kotlinconf-app</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(591.2016121639302 0.0 ) ">
|
||||
<line stroke-width="1.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" x2="0.0" y2="4.0">
|
||||
</line>
|
||||
<g transform="translate(0.0 6.0 ) rotate(-30.0 ) ">
|
||||
<text class="axis-text-x" text-anchor="end" dy="0.7em" y="0.0">
|
||||
<tspan>create-react-kotlin-app</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
<line x1="0.0" y1="0.0" x2="631.023482413314" y2="0.0" stroke-width="1.0" stroke="rgb(187,187,187)" stroke-opacity="1.0">
|
||||
</line>
|
||||
</g>
|
||||
<g transform="translate(46.97651758668602 0.0 ) ">
|
||||
<g transform="translate(0.0 328.13961002434917 ) ">
|
||||
<g transform="translate(-2.0 0.0 ) ">
|
||||
<text class="axis-text-y" text-anchor="end" dy="0.35em" y="0.0">
|
||||
<tspan>0</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(0.0 288.48249689444407 ) ">
|
||||
<g transform="translate(-2.0 0.0 ) ">
|
||||
<text class="axis-text-y" text-anchor="end" dy="0.35em" y="0.0">
|
||||
<tspan>5,000</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(0.0 248.82538376453903 ) ">
|
||||
<g transform="translate(-2.0 0.0 ) ">
|
||||
<text class="axis-text-y" text-anchor="end" dy="0.35em" y="0.0">
|
||||
<tspan>10,000</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(0.0 209.16827063463393 ) ">
|
||||
<g transform="translate(-2.0 0.0 ) ">
|
||||
<text class="axis-text-y" text-anchor="end" dy="0.35em" y="0.0">
|
||||
<tspan>15,000</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(0.0 169.51115750472886 ) ">
|
||||
<g transform="translate(-2.0 0.0 ) ">
|
||||
<text class="axis-text-y" text-anchor="end" dy="0.35em" y="0.0">
|
||||
<tspan>20,000</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(0.0 129.8540443748238 ) ">
|
||||
<g transform="translate(-2.0 0.0 ) ">
|
||||
<text class="axis-text-y" text-anchor="end" dy="0.35em" y="0.0">
|
||||
<tspan>25,000</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(0.0 90.19693124491869 ) ">
|
||||
<g transform="translate(-2.0 0.0 ) ">
|
||||
<text class="axis-text-y" text-anchor="end" dy="0.35em" y="0.0">
|
||||
<tspan>30,000</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(0.0 50.53981811501359 ) ">
|
||||
<g transform="translate(-2.0 0.0 ) ">
|
||||
<text class="axis-text-y" text-anchor="end" dy="0.35em" y="0.0">
|
||||
<tspan>35,000</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(0.0 10.882704985108546 ) ">
|
||||
<g transform="translate(-2.0 0.0 ) ">
|
||||
<text class="axis-text-y" text-anchor="end" dy="0.35em" y="0.0">
|
||||
<tspan>40,000</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (46.97651758668602, 0.0), (631.023482413314, 328.13961002434917)]">
|
||||
<g transform="translate(46.97651758668602 0.0 ) ">
|
||||
<g>
|
||||
<g>
|
||||
<rect x="563.632625068203" y="308.9138415789712" height="19.22576844537798" width="55.137974191454646" stroke="rgb(48,48,48)" stroke-opacity="1.0" fill="rgb(17,142,216)" fill-opacity="1.0" stroke-width="1.6500000000000001">
|
||||
</rect>
|
||||
<rect x="502.36820929991995" y="307.2958313632711" height="20.84377866107809" width="55.137974191454646" stroke="rgb(48,48,48)" stroke-opacity="1.0" fill="rgb(17,142,216)" fill-opacity="1.0" stroke-width="1.6500000000000001">
|
||||
</rect>
|
||||
<rect x="441.10379353163705" y="305.646095457067" height="22.493514567282148" width="55.137974191454646" stroke="rgb(48,48,48)" stroke-opacity="1.0" fill="rgb(17,142,216)" fill-opacity="1.0" stroke-width="1.6500000000000001">
|
||||
</rect>
|
||||
<rect x="379.8393777633541" y="283.02567812776914" height="45.11393189658003" width="55.137974191454646" stroke="rgb(48,48,48)" stroke-opacity="1.0" fill="rgb(17,142,216)" fill-opacity="1.0" stroke-width="1.6500000000000001">
|
||||
</rect>
|
||||
<rect x="318.5749619950712" y="280.0831203335302" height="48.05648969081898" width="55.137974191454646" stroke="rgb(48,48,48)" stroke-opacity="1.0" fill="rgb(17,142,216)" fill-opacity="1.0" stroke-width="1.6500000000000001">
|
||||
</rect>
|
||||
<rect x="257.3105462267883" y="279.59930355334535" height="48.54030647100382" width="55.137974191454646" stroke="rgb(48,48,48)" stroke-opacity="1.0" fill="rgb(17,142,216)" fill-opacity="1.0" stroke-width="1.6500000000000001">
|
||||
</rect>
|
||||
<rect x="196.04613045850533" y="274.16627905454834" height="53.97333096980083" width="55.13797419145462" stroke="rgb(48,48,48)" stroke-opacity="1.0" fill="rgb(17,142,216)" fill-opacity="1.0" stroke-width="1.6500000000000001">
|
||||
</rect>
|
||||
<rect x="134.78171469022243" y="271.81857795725796" height="56.32103206709121" width="55.137974191454646" stroke="rgb(48,48,48)" stroke-opacity="1.0" fill="rgb(17,142,216)" fill-opacity="1.0" stroke-width="1.6500000000000001">
|
||||
</rect>
|
||||
<rect x="73.5172989219395" y="225.61804116091855" height="102.52156886343062" width="55.137974191454646" stroke="rgb(48,48,48)" stroke-opacity="1.0" fill="rgb(17,142,216)" fill-opacity="1.0" stroke-width="1.6500000000000001">
|
||||
</rect>
|
||||
<rect x="12.252883153656583" y="15.625695715445204" height="312.51391430890396" width="55.13797419145463" stroke="rgb(48,48,48)" stroke-opacity="1.0" fill="rgb(17,142,216)" fill-opacity="1.0" stroke-width="1.6500000000000001">
|
||||
</rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="_sample_helper_static_id_prefix_1">
|
||||
<rect x="46.97651758668602" y="0.0" width="631.023482413314" height="328.13961002434917">
|
||||
</rect>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(67.97651758668601 15.8 ) ">
|
||||
<text class="plot-title" y="0.0">
|
||||
<tspan>Top 10 JetBrains repositories by stars count</tspan>
|
||||
</text>
|
||||
</g>
|
||||
<g transform="translate(15.0 186.06980501217458 ) rotate(-90.0 ) ">
|
||||
<text class="axis-title-y" y="0.0" text-anchor="middle">
|
||||
<tspan>starsCount</tspan>
|
||||
</text>
|
||||
</g>
|
||||
<g transform="translate(383.488258793343 464.0 ) ">
|
||||
<text class="axis-title-x" y="0.0" text-anchor="middle">
|
||||
<tspan>name</tspan>
|
||||
</text>
|
||||
</g>
|
||||
<path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
|
||||
</path>
|
||||
</g>
|
||||
<g id="_sample_helper_static_id_prefix_2">
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 314 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 317 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
@@ -0,0 +1,58 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 27.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="96px" height="48px" x="0px" y="0px"
|
||||
viewBox="0 0 100 50" style="enable-background:new 0 0 100 50;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:url(#SVGID_1_);}
|
||||
.st1{fill:#FFFFFF;}
|
||||
</style>
|
||||
<g>
|
||||
<g id="Logotypes">
|
||||
<g>
|
||||
|
||||
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="99.9975" y1="-527.7114" x2="49.9875" y2="-577.7214" gradientTransform="matrix(0.9998 0 0 -0.9998 0.0225 -527.6058)">
|
||||
<stop offset="3.435144e-03" style="stop-color:#E44857"/>
|
||||
<stop offset="0.4689" style="stop-color:#C711E1"/>
|
||||
<stop offset="1" style="stop-color:#7F52FF"/>
|
||||
</linearGradient>
|
||||
<polygon class="st0" points="100,50 50,50 50,0 100,0 75,25 "/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<rect x="0" y="0" width="50" height="50"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="st1" d="M5.44,40.63l18.75,0l0,3.12l-18.75,0L5.44,40.63z"/>
|
||||
<path class="st1" d="M4.66,12.89l1.39-1.32C6.32,12,6.77,12.27,7.28,12.3c0.53,0,0.88-0.37,0.88-1.1l0-4.93l2.15,0l0,4.95
|
||||
c0.06,0.81-0.21,1.6-0.77,2.19c-0.57,0.56-1.34,0.86-2.14,0.83C6.32,14.29,5.28,13.78,4.66,12.89z"/>
|
||||
<path class="st1" d="M11.27,6.27l6.27,0l0,1.82l-4.17,0l0,1.19l3.74,0l0,1.67l-3.71,0l0,1.24l4.17,0l0,1.83l-6.33,0
|
||||
L11.27,6.27z"/>
|
||||
<path class="st1" d="M20.61,8.16l-2.33,0l0-1.89l6.84,0l0,1.89l-2.34,0l0,5.91l-2.17,0L20.61,8.16z"/>
|
||||
<path class="st1" d="M5.53,17.15l3.68,0c0.77-0.06,1.54,0.19,2.12,0.69c0.33,0.34,0.52,0.79,0.51,1.27
|
||||
c0.01,0.78-0.47,1.48-1.21,1.74c0.92,0.17,1.57,0.98,1.55,1.91c0,1.41-1.09,2.24-2.96,2.24l-3.7,0L5.53,17.15z M9.69,19.56
|
||||
c0-0.43-0.35-0.67-0.98-0.67l-1.07,0l0,1.37l1.04,0c0.65,0,1.03-0.22,1.03-0.67L9.69,19.56z M8.94,21.78l-1.31,0l0,1.44
|
||||
l1.35,0c0.67,0,1.03-0.26,1.03-0.72c-0.02-0.44-0.33-0.73-1.06-0.72H8.94z"/>
|
||||
<path class="st1" d="M12.88,17.15l3.46,0c0.92-0.08,1.84,0.23,2.54,0.83c0.47,0.48,0.72,1.14,0.69,1.82
|
||||
c0.03,1.06-0.61,2.03-1.61,2.41L19.83,25l-2.5,0l-1.58-2.37l-0.72,0l0,2.37l-2.17,0L12.88,17.15z M16.21,20.9
|
||||
c0.72,0,1.17-0.36,1.17-0.93c0-0.62-0.46-0.94-1.18-0.94l-1.16,0l0,1.89L16.21,20.9z"/>
|
||||
<path class="st1" d="M22.57,17.09l2.08,0l3.33,7.87l-2.32,0l-0.56-1.41l-3.02,0L21.53,25l-2.26,0L22.57,17.09z M24.47,21.87
|
||||
l-0.88-2.21l-0.88,2.21L24.47,21.87z"/>
|
||||
<path class="st1" d="M28.33,17.13l2.17,0l0,7.81l-2.17,0L28.33,17.13z"/>
|
||||
<path class="st1" d="M31.3,17.13l2.03,0l2.81,4.17l0-4.17l2.14,0l0,7.81l-1.89,0l-2.94-4.28l0,4.28l-2.15,0L31.3,17.13z"/>
|
||||
<path class="st1" d="M38.64,23.77l1.2-1.44c0.7,0.59,1.58,0.92,2.5,0.94c0.59,0,0.9-0.21,0.9-0.54
|
||||
c0-0.34-0.25-0.51-1.32-0.76c-1.67-0.38-2.94-0.83-2.94-2.44c0-1.45,1.15-2.5,3.02-2.5c1.16-0.04,2.3,0.33,3.21,1.04
|
||||
l-1.04,1.48c-0.63-0.48-1.39-0.74-2.18-0.77c-0.52,0-0.78,0.21-0.78,0.5c0,0.36,0.27,0.52,1.36,0.76
|
||||
c1.79,0.39,2.9,0.97,2.9,2.43c0,1.59-1.26,2.5-3.15,2.5C40.98,25.04,39.68,24.61,38.64,23.77z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
+13
@@ -0,0 +1,13 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<Keymap id="instance_id">
|
||||
<Action id="$Settings">
|
||||
<Description>Settings of Intellij IDEA</Description>
|
||||
<Shortcut layout="primary_macOS">Cmd+comma</Shortcut>
|
||||
<Shortcut layout="primary_Win-Linux">Ctrl+Alt+S</Shortcut>
|
||||
</Action>
|
||||
<Action id="$NewFile">
|
||||
<Description>Settings of Intellij IDEA</Description>
|
||||
<Shortcut layout="primary_macOS">Cmd+N</Shortcut>
|
||||
<Shortcut layout="primary_Win-Linux">Alt+Insert</Shortcut>
|
||||
</Action>
|
||||
</Keymap>
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE ihp SYSTEM "https://resources.jetbrains.com/writerside/1.0/ihp.dtd">
|
||||
|
||||
<ihp version="2.0">
|
||||
<categories src="c.list"/>
|
||||
<topics dir="topics"/>
|
||||
<images dir="images" version="1.0" web-path="images/" />
|
||||
<snippets dir="snippets" version="1.0" web-path="snippets/" />
|
||||
<vars src="v.list"/>
|
||||
<instance src="d.tree" version="1.0" id="dataframe"/>
|
||||
<settings>
|
||||
<default-property element-name="chapter" property-name="show-structure-depth" value="2"/>
|
||||
</settings>
|
||||
</ihp>
|
||||
Vendored
+5
@@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE resources SYSTEM "https://resources.jetbrains.com/writerside/1.0/resources.dtd">
|
||||
<resources>
|
||||
<resource id="movie-sample-data" file="movies.csv"/>
|
||||
</resources>
|
||||
@@ -0,0 +1,16 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE rules SYSTEM "https://resources.jetbrains.com/writerside/1.0/redirection-rules.dtd">
|
||||
<rules>
|
||||
<rule id="3b72033a">
|
||||
<description>Created after removal of "About Dataframe" from Dataframe</description>
|
||||
<accepts>about-dataframe.html</accepts>
|
||||
</rule>
|
||||
<rule id="4dc3d169">
|
||||
<description>Created after removal of "Reference" from Dataframe</description>
|
||||
<accepts>reference.html</accepts>
|
||||
</rule>
|
||||
<rule id="5dd2e2ea">
|
||||
<description>Created after removal of "Modify DataFrame schema" from Dataframe</description>
|
||||
<accepts>modifyschema.html</accepts>
|
||||
</rule>
|
||||
</rules>
|
||||
@@ -0,0 +1,511 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"name: String\">name</span>", children: [], rightAlign: false, values: ["Alice","Bob"] },
|
||||
{ name: "<span title=\"age: Int\">age</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">15</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>"] },
|
||||
], id: 0, rootId: 0, totalRows: 2 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,511 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"name: String\">name</span>", children: [], rightAlign: false, values: ["Alice","Bob"] },
|
||||
{ name: "<span title=\"age: Int\">age</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">15</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>"] },
|
||||
], id: 0, rootId: 0, totalRows: 2 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
+511
@@ -0,0 +1,511 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"name: String\">name</span>", children: [], rightAlign: false, values: ["Alice","Bob","Charlie","Diana"] },
|
||||
{ name: "<span title=\"age: Int\">age</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">15</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">25</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">30</span></span>"] },
|
||||
], id: 0, rootId: 0, totalRows: 4 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
+510
@@ -0,0 +1,510 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"age: Boolean\">age</span>", children: [], rightAlign: false, values: ["false","true","true","false"] },
|
||||
], id: 0, rootId: 0, totalRows: 4 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
+510
@@ -0,0 +1,510 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"age: Boolean\">age</span>", children: [], rightAlign: false, values: ["false","true","false","false"] },
|
||||
], id: 0, rootId: 0, totalRows: 4 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
+511
@@ -0,0 +1,511 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"name: String\">name</span>", children: [], rightAlign: false, values: ["Alice","Bob","Charlie","Diana","Eve"] },
|
||||
{ name: "<span title=\"age: Int\">age</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">15</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">25</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">30</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">35</span></span>"] },
|
||||
], id: 0, rootId: 0, totalRows: 5 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
+528
@@ -0,0 +1,528 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"groups: DataFrame<*>\">groups</span>", children: [], rightAlign: false, values: [{ frameId: 1, value: "<b>DataFrame 2 x 2</b>" },{ frameId: 2, value: "<b>DataFrame 2 x 2</b>" },{ frameId: 3, value: "<b>DataFrame 1 x 2</b>" }] },
|
||||
], id: 0, rootId: 0, totalRows: 3 } ) });
|
||||
/*-->*/
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"name: String\">name</span>", children: [], rightAlign: false, values: ["Alice","Bob"] },
|
||||
{ name: "<span title=\"age: Int\">age</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">15</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>"] },
|
||||
], id: 1, rootId: 0, totalRows: 2 } ) });
|
||||
/*-->*/
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"name: String\">name</span>", children: [], rightAlign: false, values: ["Charlie","Diana"] },
|
||||
{ name: "<span title=\"age: Int\">age</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">25</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">30</span></span>"] },
|
||||
], id: 2, rootId: 0, totalRows: 2 } ) });
|
||||
/*-->*/
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"name: String\">name</span>", children: [], rightAlign: false, values: ["Eve"] },
|
||||
{ name: "<span title=\"age: Int\">age</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">35</span></span>"] },
|
||||
], id: 3, rootId: 0, totalRows: 1 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
+528
@@ -0,0 +1,528 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"segments: DataFrame<*>\">segments</span>", children: [], rightAlign: false, values: [{ frameId: 1, value: "<b>DataFrame 1 x 2</b>" },{ frameId: 2, value: "<b>DataFrame 2 x 2</b>" },{ frameId: 3, value: "<b>DataFrame 2 x 2</b>" }] },
|
||||
], id: 0, rootId: 0, totalRows: 3 } ) });
|
||||
/*-->*/
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"name: String\">name</span>", children: [], rightAlign: false, values: ["Alice"] },
|
||||
{ name: "<span title=\"age: Int\">age</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">15</span></span>"] },
|
||||
], id: 1, rootId: 0, totalRows: 1 } ) });
|
||||
/*-->*/
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"name: String\">name</span>", children: [], rightAlign: false, values: ["Bob","Charlie"] },
|
||||
{ name: "<span title=\"age: Int\">age</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">25</span></span>"] },
|
||||
], id: 2, rootId: 0, totalRows: 2 } ) });
|
||||
/*-->*/
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"name: String\">name</span>", children: [], rightAlign: false, values: ["Diana","Eve"] },
|
||||
{ name: "<span title=\"age: Int\">age</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">30</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">35</span></span>"] },
|
||||
], id: 3, rootId: 0, totalRows: 2 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
+516
@@ -0,0 +1,516 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"firstName: String\">firstName</span>", children: [], rightAlign: false, values: ["Alice","Bob","Charlie","Charlie","Bob","Alice","Charlie"] },
|
||||
{ name: "<span title=\"lastName: String\">lastName</span>", children: [], rightAlign: false, values: ["Cooper","Dylan","Daniels","Chaplin","Marley","Wolf","Byrd"] },
|
||||
{ name: "<span title=\"name: DataRow<*>\">name</span>", children: [0, 1], rightAlign: false, values: ["<span class=\"formatted\" title=\"firstName: Alice\nlastName: Cooper\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Alice<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Cooper<span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Bob\nlastName: Dylan\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Bob<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Dylan<span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Charlie\nlastName: Daniels\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Charlie<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Dan<span class=\"structural\">...</span><span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Charlie\nlastName: Chaplin\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Charlie<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Cha<span class=\"structural\">...</span><span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Bob\nlastName: Marley\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Bob<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Marley<span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Alice\nlastName: Wolf\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Alice<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Wolf<span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Charlie\nlastName: Byrd\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Charlie<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Byrd<span class=\"structural\"> }</span></span>"] },
|
||||
{ name: "<span title=\"age: Int\">age</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">15</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">45</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">40</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">30</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">30</span></span>"] },
|
||||
{ name: "<span title=\"city: String?\">city</span>", children: [], rightAlign: false, values: ["London","Dubai","Moscow","Milan","Tokyo","<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>","Moscow"] },
|
||||
{ name: "<span title=\"weight: Int?\">weight</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">54</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">87</span></span>","<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>","<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">68</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">55</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">90</span></span>"] },
|
||||
{ name: "<span title=\"isHappy: Boolean\">isHappy</span>", children: [], rightAlign: false, values: ["true","true","false","true","true","false","true"] },
|
||||
], id: 0, rootId: 0, totalRows: 7 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
+516
@@ -0,0 +1,516 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"firstName: String\">firstName</span>", children: [], rightAlign: false, values: ["Alice","Bob","Charlie","Charlie","Bob","Alice","Charlie"] },
|
||||
{ name: "<span title=\"lastName: String\">lastName</span>", children: [], rightAlign: false, values: ["Cooper","Dylan","Daniels","Chaplin","Marley","Wolf","Byrd"] },
|
||||
{ name: "<span title=\"name: DataRow<*>\">name</span>", children: [0, 1], rightAlign: false, values: ["<span class=\"formatted\" title=\"firstName: Alice\nlastName: Cooper\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Alice<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Cooper<span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Bob\nlastName: Dylan\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Bob<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Dylan<span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Charlie\nlastName: Daniels\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Charlie<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Dan<span class=\"structural\">...</span><span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Charlie\nlastName: Chaplin\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Charlie<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Cha<span class=\"structural\">...</span><span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Bob\nlastName: Marley\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Bob<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Marley<span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Alice\nlastName: Wolf\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Alice<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Wolf<span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Charlie\nlastName: Byrd\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Charlie<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Byrd<span class=\"structural\"> }</span></span>"] },
|
||||
{ name: "<span title=\"age: Int\">age</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">15</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">45</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">40</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">30</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">30</span></span>"] },
|
||||
{ name: "<span title=\"city: String?\">city</span>", children: [], rightAlign: false, values: ["London","Dubai","Moscow","Milan","Tokyo","<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>","Moscow"] },
|
||||
{ name: "<span title=\"weight: Int?\">weight</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">54</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">87</span></span>","<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>","<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">68</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">55</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">90</span></span>"] },
|
||||
{ name: "<span title=\"isHappy: Boolean\">isHappy</span>", children: [], rightAlign: false, values: ["true","true","false","true","true","false","true"] },
|
||||
], id: 0, rootId: 0, totalRows: 7 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,516 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"firstName: String\" style=\"font-weight:bold;color:#ff0000\">firstName</span>", children: [], rightAlign: false, values: ["Alice","Bob","Charlie","Charlie","Bob","Alice","Charlie"] },
|
||||
{ name: "<span title=\"lastName: String\" style=\"font-weight:bold;color:#0000ff\">lastName</span>", children: [], rightAlign: false, values: ["Cooper","Dylan","Daniels","Chaplin","Marley","Wolf","Byrd"] },
|
||||
{ name: "<span title=\"name: DataRow<*>\" style=\"font-weight:bold;color:#ff0000\">name</span>", children: [0, 1], rightAlign: false, values: ["<span class=\"formatted\" title=\"firstName: Alice\nlastName: Cooper\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Alice<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Cooper<span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Bob\nlastName: Dylan\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Bob<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Dylan<span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Charlie\nlastName: Daniels\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Charlie<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Dan<span class=\"structural\">...</span><span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Charlie\nlastName: Chaplin\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Charlie<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Cha<span class=\"structural\">...</span><span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Bob\nlastName: Marley\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Bob<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Marley<span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Alice\nlastName: Wolf\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Alice<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Wolf<span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Charlie\nlastName: Byrd\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Charlie<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Byrd<span class=\"structural\"> }</span></span>"] },
|
||||
{ name: "<span title=\"age: Int\" style=\"font-weight:bold;text-decoration:underline\">age</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">15</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">45</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">40</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">30</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">30</span></span>"] },
|
||||
{ name: "<span title=\"city: String?\" style=\"font-weight:bold\">city</span>", children: [], rightAlign: false, values: ["London","Dubai","Moscow","Milan","Tokyo","<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>","Moscow"] },
|
||||
{ name: "<span title=\"weight: Int?\" style=\"font-weight:bold;text-decoration:underline\">weight</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">54</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">87</span></span>","<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>","<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">68</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">55</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">90</span></span>"] },
|
||||
{ name: "<span title=\"isHappy: Boolean\" style=\"font-weight:bold\">isHappy</span>", children: [], rightAlign: false, values: ["true","true","false","true","true","false","true"] },
|
||||
], id: 0, rootId: 0, totalRows: 7 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
+523
@@ -0,0 +1,523 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"user: String\">user</span>", children: [], rightAlign: false, values: ["Alice","Bob"] },
|
||||
{ name: "<span title=\"orders: DataFrame<*>\">orders</span>", children: [], rightAlign: false, values: [{ frameId: 1, value: "<b>DataFrame 2 x 2</b>" },{ frameId: 2, value: "<b>DataFrame 3 x 2</b>" }] },
|
||||
], id: 0, rootId: 0, totalRows: 2 } ) });
|
||||
/*-->*/
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"orderId: Int\">orderId</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">101</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">102</span></span>"] },
|
||||
{ name: "<span title=\"amount: Double\">amount</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">50.0</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">75.5</span></span>"] },
|
||||
], id: 1, rootId: 0, totalRows: 2 } ) });
|
||||
/*-->*/
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"orderId: Int\">orderId</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">103</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">104</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">105</span></span>"] },
|
||||
{ name: "<span title=\"amount: Double\">amount</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">20.0</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">30.0</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">25.0</span></span>"] },
|
||||
], id: 2, rootId: 0, totalRows: 3 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,512 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"name: String\" style=\"color:#f44336;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace\">name</span>", children: [], rightAlign: false, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Alice"},{ style: "background-color:#f5e2bf;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Bob"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Charlie"},{ style: "background-color:#bfdfe8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Charlie"}] },
|
||||
{ name: "<span title=\"age: Int\">age</span>", children: [], rightAlign: true, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">15</span></span>"},{ style: "background-color:#f5e2bf;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">45</span></span>"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>"},{ style: "background-color:#bfdfe8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">40</span></span>"}] },
|
||||
{ name: "<span title=\"city: String\" style=\"color:#2196f3;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace\">city</span>", children: [], rightAlign: false, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "London"},{ style: "background-color:#f5e2bf;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Dubai"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Moscow"},{ style: "background-color:#bfdfe8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Tokyo"}] },
|
||||
], id: 0, rootId: 0, totalRows: 4 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,512 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"name: String\" style=\"color:#f44336;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace\">name</span>", children: [], rightAlign: false, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Alice"},{ style: "background-color:#c8c8e8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Bob"},{ style: "background-color:#e9c7dc;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Alice"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Charlie"}] },
|
||||
{ name: "<span title=\"isBusy: Boolean\">isBusy</span>", children: [], rightAlign: false, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "true"},{ style: "background-color:#c8c8e8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "false"},{ style: "background-color:#e9c7dc;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "true"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "true"}] },
|
||||
{ name: "<span title=\"city: String?\" style=\"color:#2196f3;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace\">city</span>", children: [], rightAlign: false, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "London"},{ style: "background-color:#c8c8e8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Tokyo"},{ style: "background-color:#e9c7dc;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Moscow"}] },
|
||||
], id: 0, rootId: 0, totalRows: 4 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,512 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"name: String\" style=\"color:#f44336;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace\">name</span>", children: [], rightAlign: false, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Alice"},{ style: "background-color:#c8c8e8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Bob"},{ style: "background-color:#e9c7dc;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Alice"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Charlie"}] },
|
||||
{ name: "<span title=\"isBusy: Boolean\">isBusy</span>", children: [], rightAlign: false, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "true"},{ style: "background-color:#c8c8e8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "false"},{ style: "background-color:#e9c7dc;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "true"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "true"}] },
|
||||
{ name: "<span title=\"city: String?\">city</span>", children: [], rightAlign: false, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "London"},{ style: "background-color:#c8c8e8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Tokyo"},{ style: "background-color:#e9c7dc;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Moscow"}] },
|
||||
], id: 0, rootId: 0, totalRows: 4 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,514 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"name: String\" style=\"color:#f44336;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace\">name</span>", children: [], rightAlign: false, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Alice"},{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Alice"},{ style: "background-color:#f5e2bf;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Bob"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Charlie"},{ style: "background-color:#bfdfe8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Charlie"}] },
|
||||
{ name: "<span title=\"age: Int\">age</span>", children: [], rightAlign: true, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">15</span></span>"},{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">15</span></span>"},{ style: "background-color:#f5e2bf;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">45</span></span>"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>"},{ style: "background-color:#bfdfe8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">40</span></span>"}] },
|
||||
{ name: "<span title=\"city: String\">city</span>", children: [], rightAlign: false, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "London"},{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "London"},{ style: "background-color:#f5e2bf;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Dubai"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Moscow"},{ style: "background-color:#bfdfe8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Tokyo"}] },
|
||||
{ name: "<span title=\"isBusy: Boolean\">isBusy</span>", children: [], rightAlign: false, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "true"},{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "true"},{ style: "background-color:#f5e2bf;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "false"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "true"},{ style: "background-color:#bfdfe8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "true"}] },
|
||||
{ name: "<span title=\"city1: String?\">city1</span>", children: [], rightAlign: false, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "London"},{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>"},{ style: "background-color:#f5e2bf;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Tokyo"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Moscow"},{ style: "background-color:#bfdfe8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Moscow"}] },
|
||||
], id: 0, rootId: 0, totalRows: 5 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,513 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"name: String\" style=\"color:#f44336;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace\">name</span>", children: [], rightAlign: false, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Alice"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Charlie"}] },
|
||||
{ name: "<span title=\"age: Int\">age</span>", children: [], rightAlign: true, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">15</span></span>"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>"}] },
|
||||
{ name: "<span title=\"city: String\" style=\"color:#2196f3;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace\">city</span>", children: [], rightAlign: false, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "London"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Moscow"}] },
|
||||
{ name: "<span title=\"isBusy: Boolean\">isBusy</span>", children: [], rightAlign: false, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "true"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "true"}] },
|
||||
], id: 0, rootId: 0, totalRows: 2 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,512 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"name: String\" style=\"color:#f44336;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace\">name</span>", children: [], rightAlign: false, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Alice"},{ style: "background-color:#f5e2bf;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Bob"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Charlie"},{ style: "background-color:#bfdfe8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Charlie"}] },
|
||||
{ name: "<span title=\"age: Int\">age</span>", children: [], rightAlign: true, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">15</span></span>"},{ style: "background-color:#f5e2bf;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">45</span></span>"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>"},{ style: "background-color:#bfdfe8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">40</span></span>"}] },
|
||||
{ name: "<span title=\"city: String\" style=\"color:#2196f3;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace\">city</span>", children: [], rightAlign: false, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "London"},{ style: "background-color:#f5e2bf;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Dubai"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Moscow"},{ style: "background-color:#bfdfe8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Tokyo"}] },
|
||||
], id: 0, rootId: 0, totalRows: 4 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,512 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"name: String\" style=\"color:#f44336;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace\">name</span>", children: [], rightAlign: false, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Alice"},{ style: "background-color:#c8c8e8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Bob"},{ style: "background-color:#e9c7dc;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Alice"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Charlie"}] },
|
||||
{ name: "<span title=\"isBusy: Boolean\">isBusy</span>", children: [], rightAlign: false, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "true"},{ style: "background-color:#c8c8e8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "false"},{ style: "background-color:#e9c7dc;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "true"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "true"}] },
|
||||
{ name: "<span title=\"city: String?\" style=\"color:#2196f3;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace\">city</span>", children: [], rightAlign: false, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "London"},{ style: "background-color:#c8c8e8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Tokyo"},{ style: "background-color:#e9c7dc;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Moscow"}] },
|
||||
], id: 0, rootId: 0, totalRows: 4 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,513 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"name: String\" style=\"color:#f44336;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace\">name</span>", children: [], rightAlign: false, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Alice"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Charlie"}] },
|
||||
{ name: "<span title=\"age: Int\">age</span>", children: [], rightAlign: true, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">15</span></span>"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>"}] },
|
||||
{ name: "<span title=\"city: String\" style=\"color:#2196f3;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace\">city</span>", children: [], rightAlign: false, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "London"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Moscow"}] },
|
||||
{ name: "<span title=\"isBusy: Boolean\">isBusy</span>", children: [], rightAlign: false, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "true"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "true"}] },
|
||||
], id: 0, rootId: 0, totalRows: 2 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,512 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"name: String\" style=\"color:#f44336;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace\">name</span>", children: [], rightAlign: false, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Alice"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Charlie"}] },
|
||||
{ name: "<span title=\"age: Int\">age</span>", children: [], rightAlign: true, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">15</span></span>"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>"}] },
|
||||
{ name: "<span title=\"city: String\" style=\"color:#2196f3;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace\">city</span>", children: [], rightAlign: false, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "London"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Moscow"}] },
|
||||
], id: 0, rootId: 0, totalRows: 2 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,513 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"name: String\" style=\"color:#f44336;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace\">name</span>", children: [], rightAlign: false, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Alice"},{ style: "background-color:#f5e2bf;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Bob"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Charlie"},{ style: "background-color:#bfdfe8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Charlie"}] },
|
||||
{ name: "<span title=\"age: Int\">age</span>", children: [], rightAlign: true, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">15</span></span>"},{ style: "background-color:#f5e2bf;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">45</span></span>"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>"},{ style: "background-color:#bfdfe8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">40</span></span>"}] },
|
||||
{ name: "<span title=\"city: String\" style=\"color:#2196f3;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace\">city</span>", children: [], rightAlign: false, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "London"},{ style: "background-color:#f5e2bf;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Dubai"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Moscow"},{ style: "background-color:#bfdfe8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Tokyo"}] },
|
||||
{ name: "<span title=\"isBusy: Boolean?\">isBusy</span>", children: [], rightAlign: false, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "true"},{ style: "background-color:#f5e2bf;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;font-weight:bold", value: "<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "true"},{ style: "background-color:#bfdfe8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;font-weight:bold", value: "<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>"}] },
|
||||
], id: 0, rootId: 0, totalRows: 4 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,513 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"name: String\" style=\"color:#f44336;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace\">name</span>", children: [], rightAlign: false, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Alice"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Charlie"},{ style: "background-color:#c8c8e8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Bob"},{ style: "background-color:#e9c7dc;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Alice"}] },
|
||||
{ name: "<span title=\"age: Int?\">age</span>", children: [], rightAlign: true, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">15</span></span>"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>"},{ style: "background-color:#c8c8e8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;font-weight:bold", value: "<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>"},{ style: "background-color:#e9c7dc;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;font-weight:bold", value: "<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>"}] },
|
||||
{ name: "<span title=\"city: String?\" style=\"color:#2196f3;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace\">city</span>", children: [], rightAlign: false, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "London"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Moscow"},{ style: "background-color:#c8c8e8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Tokyo"},{ style: "background-color:#e9c7dc;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>"}] },
|
||||
{ name: "<span title=\"isBusy: Boolean\">isBusy</span>", children: [], rightAlign: false, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "true"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "true"},{ style: "background-color:#c8c8e8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "false"},{ style: "background-color:#e9c7dc;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "true"}] },
|
||||
], id: 0, rootId: 0, totalRows: 4 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,513 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"name: String\" style=\"color:#f44336;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace\">name</span>", children: [], rightAlign: false, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Alice"},{ style: "background-color:#f5e2bf;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Bob"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Charlie"},{ style: "background-color:#bfdfe8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Charlie"},{ style: "background-color:#c8c8e8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Bob"},{ style: "background-color:#e9c7dc;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Alice"}] },
|
||||
{ name: "<span title=\"age: Int?\">age</span>", children: [], rightAlign: true, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">15</span></span>"},{ style: "background-color:#f5e2bf;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">45</span></span>"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>"},{ style: "background-color:#bfdfe8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">40</span></span>"},{ style: "background-color:#c8c8e8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;font-weight:bold", value: "<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>"},{ style: "background-color:#e9c7dc;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;font-weight:bold", value: "<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>"}] },
|
||||
{ name: "<span title=\"city: String?\" style=\"color:#2196f3;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace\">city</span>", children: [], rightAlign: false, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "London"},{ style: "background-color:#f5e2bf;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Dubai"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Moscow"},{ style: "background-color:#bfdfe8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Tokyo"},{ style: "background-color:#c8c8e8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Tokyo"},{ style: "background-color:#e9c7dc;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>"}] },
|
||||
{ name: "<span title=\"isBusy: Boolean?\">isBusy</span>", children: [], rightAlign: false, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "true"},{ style: "background-color:#f5e2bf;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;font-weight:bold", value: "<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "true"},{ style: "background-color:#bfdfe8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;font-weight:bold", value: "<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>"},{ style: "background-color:#c8c8e8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "false"},{ style: "background-color:#e9c7dc;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "true"}] },
|
||||
], id: 0, rootId: 0, totalRows: 6 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,512 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"name: String\" style=\"color:#f44336;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace\">name</span>", children: [], rightAlign: false, values: [{ style: "background-color:#f5e2bf;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Bob"},{ style: "background-color:#bfdfe8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Charlie"}] },
|
||||
{ name: "<span title=\"age: Int\">age</span>", children: [], rightAlign: true, values: [{ style: "background-color:#f5e2bf;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">45</span></span>"},{ style: "background-color:#bfdfe8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">40</span></span>"}] },
|
||||
{ name: "<span title=\"city: String\" style=\"color:#2196f3;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace\">city</span>", children: [], rightAlign: false, values: [{ style: "background-color:#f5e2bf;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Dubai"},{ style: "background-color:#bfdfe8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Tokyo"}] },
|
||||
], id: 0, rootId: 0, totalRows: 2 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,511 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"firstName: String\" style=\"color:#f44336;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace\">firstName</span>", children: [], rightAlign: false, values: [{ style: "background-color:#bdcee9;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Alice"},{ style: "background-color:#c6e0c6;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Bob"},{ style: "background-color:#dbc6e6;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Charlie"}] },
|
||||
{ name: "<span title=\"age: Int\">age</span>", children: [], rightAlign: true, values: [{ style: "background-color:#bdcee9;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">14</span></span>"},{ style: "background-color:#c6e0c6;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">45</span></span>"},{ style: "background-color:#dbc6e6;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>"}] },
|
||||
], id: 0, rootId: 0, totalRows: 3 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,511 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"name: String\" style=\"color:#f44336;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace\">name</span>", children: [], rightAlign: false, values: [{ style: "background-color:#c6e0c6;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Bob"},{ style: "background-color:#bdcee9;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Alice"},{ style: "background-color:#dbc6e6;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Charlie"}] },
|
||||
{ name: "<span title=\"city: String\">city</span>", children: [], rightAlign: false, values: [{ style: "background-color:#c6e0c6;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "London"},{ style: "background-color:#bdcee9;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Dubai"},{ style: "background-color:#dbc6e6;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Moscow"}] },
|
||||
], id: 0, rootId: 0, totalRows: 3 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,512 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"firstName: String\" style=\"color:#f44336;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace\">firstName</span>", children: [], rightAlign: false, values: [{ style: "background-color:#bdcee9;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Alice"},{ style: "background-color:#c6e0c6;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Bob"},{ style: "background-color:#dbc6e6;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Charlie"}] },
|
||||
{ name: "<span title=\"age: Int\">age</span>", children: [], rightAlign: true, values: [{ style: "background-color:#bdcee9;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">14</span></span>"},{ style: "background-color:#c6e0c6;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">45</span></span>"},{ style: "background-color:#dbc6e6;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>"}] },
|
||||
{ name: "<span title=\"city: String\">city</span>", children: [], rightAlign: false, values: [{ style: "background-color:#bdcee9;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Dubai"},{ style: "background-color:#c6e0c6;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "London"},{ style: "background-color:#dbc6e6;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Moscow"}] },
|
||||
], id: 0, rootId: 0, totalRows: 3 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,512 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"name: String\" style=\"color:#f44336;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace\">name</span>", children: [], rightAlign: false, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Alice"},{ style: "background-color:#f5e2bf;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Bob"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Charlie"},{ style: "background-color:#bfdfe8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Charlie"}] },
|
||||
{ name: "<span title=\"age: Int\">age</span>", children: [], rightAlign: true, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">15</span></span>"},{ style: "background-color:#f5e2bf;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">45</span></span>"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>"},{ style: "background-color:#bfdfe8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">40</span></span>"}] },
|
||||
{ name: "<span title=\"city: String\">city</span>", children: [], rightAlign: false, values: [{ style: "background-color:#f2d2bd;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "London"},{ style: "background-color:#f5e2bf;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Dubai"},{ style: "background-color:#d2e5c7;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Moscow"},{ style: "background-color:#bfdfe8;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "Tokyo"}] },
|
||||
], id: 0, rootId: 0, totalRows: 4 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
+512
@@ -0,0 +1,512 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"ColumnA: Int\">ColumnA</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">1</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">2</span></span>"] },
|
||||
{ name: "<span title=\"column_b: String\">column_b</span>", children: [], rightAlign: false, values: ["a","b"] },
|
||||
{ name: "<span title=\"COLUMN-C: Boolean\">COLUMN-C</span>", children: [], rightAlign: false, values: ["true","false"] },
|
||||
], id: 0, rootId: 0, totalRows: 2 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
+512
@@ -0,0 +1,512 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"columnA: Int\">columnA</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">1</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">2</span></span>"] },
|
||||
{ name: "<span title=\"column_b: String\">column_b</span>", children: [], rightAlign: false, values: ["a","b"] },
|
||||
{ name: "<span title=\"columnC: Boolean\">columnC</span>", children: [], rightAlign: false, values: ["true","false"] },
|
||||
], id: 0, rootId: 0, totalRows: 2 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
+512
@@ -0,0 +1,512 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"columnA: Int\">columnA</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">1</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">2</span></span>"] },
|
||||
{ name: "<span title=\"columnB: String\">columnB</span>", children: [], rightAlign: false, values: ["a","b"] },
|
||||
{ name: "<span title=\"columnC: Boolean\">columnC</span>", children: [], rightAlign: false, values: ["true","false"] },
|
||||
], id: 0, rootId: 0, totalRows: 2 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
+511
@@ -0,0 +1,511 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"name: String\">name</span>", children: [], rightAlign: false, values: ["Alice","Bob","Charlie","Diana","Eve"] },
|
||||
{ name: "<span title=\"age: Int\">age</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">15</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">25</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">30</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">35</span></span>"] },
|
||||
], id: 0, rootId: 0, totalRows: 5 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
+511
@@ -0,0 +1,511 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"name: String\">name</span>", children: [], rightAlign: false, values: ["Alice","Eve","Charlie","Bob","Diana"] },
|
||||
{ name: "<span title=\"age: Int\">age</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">15</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">35</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">25</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">30</span></span>"] },
|
||||
], id: 0, rootId: 0, totalRows: 5 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,516 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"firstName: String\">firstName</span>", children: [], rightAlign: false, values: ["Alice","Bob","Charlie","Charlie","Bob","Alice","Charlie"] },
|
||||
{ name: "<span title=\"lastName: String\">lastName</span>", children: [], rightAlign: false, values: ["Cooper","Dylan","Daniels","Chaplin","Marley","Wolf","Byrd"] },
|
||||
{ name: "<span title=\"name: DataRow<*>\">name</span>", children: [0, 1], rightAlign: false, values: ["<span class=\"formatted\" title=\"firstName: Alice\nlastName: Cooper\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Alice<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Cooper<span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Bob\nlastName: Dylan\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Bob<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Dylan<span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Charlie\nlastName: Daniels\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Charlie<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Dan<span class=\"structural\">...</span><span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Charlie\nlastName: Chaplin\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Charlie<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Cha<span class=\"structural\">...</span><span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Bob\nlastName: Marley\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Bob<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Marley<span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Alice\nlastName: Wolf\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Alice<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Wolf<span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Charlie\nlastName: Byrd\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Charlie<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Byrd<span class=\"structural\"> }</span></span>"] },
|
||||
{ name: "<span title=\"age: Int\">age</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">15</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">45</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">40</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">30</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">30</span></span>"] },
|
||||
{ name: "<span title=\"city: String?\">city</span>", children: [], rightAlign: false, values: ["London","Dubai","Moscow","Milan","Tokyo","<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>","Moscow"] },
|
||||
{ name: "<span title=\"weight: Int?\">weight</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">54</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">87</span></span>","<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>","<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">68</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">55</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">90</span></span>"] },
|
||||
{ name: "<span title=\"isHappy: Boolean\">isHappy</span>", children: [], rightAlign: false, values: ["true","true","false","true","true","false","true"] },
|
||||
], id: 0, rootId: 0, totalRows: 7 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,516 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"firstName: String\">firstName</span>", children: [], rightAlign: false, values: ["Charlie","Charlie","Bob","Alice","Charlie"] },
|
||||
{ name: "<span title=\"lastName: String\">lastName</span>", children: [], rightAlign: false, values: ["Daniels","Chaplin","Marley","Wolf","Byrd"] },
|
||||
{ name: "<span title=\"name: DataRow<*>\">name</span>", children: [0, 1], rightAlign: false, values: ["<span class=\"formatted\" title=\"firstName: Charlie\nlastName: Daniels\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Charlie<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Dan<span class=\"structural\">...</span><span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Charlie\nlastName: Chaplin\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Charlie<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Cha<span class=\"structural\">...</span><span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Bob\nlastName: Marley\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Bob<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Marley<span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Alice\nlastName: Wolf\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Alice<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Wolf<span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Charlie\nlastName: Byrd\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Charlie<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Byrd<span class=\"structural\"> }</span></span>"] },
|
||||
{ name: "<span title=\"age: Int\">age</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">40</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">30</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">30</span></span>"] },
|
||||
{ name: "<span title=\"city: String?\">city</span>", children: [], rightAlign: false, values: ["Moscow","Milan","Tokyo","<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>","Moscow"] },
|
||||
{ name: "<span title=\"weight: Int?\">weight</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>","<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">68</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">55</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">90</span></span>"] },
|
||||
{ name: "<span title=\"isHappy: Boolean\">isHappy</span>", children: [], rightAlign: false, values: ["false","true","true","false","true"] },
|
||||
], id: 0, rootId: 0, totalRows: 5 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,516 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"firstName: String\">firstName</span>", children: [], rightAlign: false, values: ["Alice","Charlie"] },
|
||||
{ name: "<span title=\"lastName: String\">lastName</span>", children: [], rightAlign: false, values: ["Wolf","Byrd"] },
|
||||
{ name: "<span title=\"name: DataRow<*>\">name</span>", children: [0, 1], rightAlign: false, values: ["<span class=\"formatted\" title=\"firstName: Alice\nlastName: Wolf\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Alice<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Wolf<span class=\"structural\"> }</span></span>","<span class=\"formatted\" title=\"firstName: Charlie\nlastName: Byrd\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Charlie<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Byrd<span class=\"structural\"> }</span></span>"] },
|
||||
{ name: "<span title=\"age: Int\">age</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">30</span></span>"] },
|
||||
{ name: "<span title=\"city: String?\">city</span>", children: [], rightAlign: false, values: ["<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>","Moscow"] },
|
||||
{ name: "<span title=\"weight: Int\">weight</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">55</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">90</span></span>"] },
|
||||
{ name: "<span title=\"isHappy: Boolean\">isHappy</span>", children: [], rightAlign: false, values: ["false","true"] },
|
||||
], id: 0, rootId: 0, totalRows: 2 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,3 @@
|
||||
name,info
|
||||
Alice,"{""age"":23,""height"":175.5}"
|
||||
Bob,"{""age"":27,""height"":160.2}"
|
||||
|
File diff suppressed because one or more lines are too long
+513
File diff suppressed because one or more lines are too long
+527
@@ -0,0 +1,527 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"isIntellij: Boolean\">isIntellij</span>", children: [], rightAlign: false, values: ["true","false"] },
|
||||
{ name: "<span title=\"group: DataFrame<*>\">group</span>", children: [], rightAlign: false, values: [{ frameId: 1, value: "<b>DataFrame 7 x 4</b>" },{ frameId: 2, value: "<b>DataFrame 17 x 4</b>" }] },
|
||||
], id: 0, rootId: 0, totalRows: 2 } ) });
|
||||
/*-->*/
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"name: String\">name</span>", children: [], rightAlign: false, values: ["ideavim","intellij-community","intellij-scala","intellij-plugins","idea-gitignore"] },
|
||||
{ name: "<span title=\"starsCount: Int\">starsCount</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">6120</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">12926</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">1066</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">1737</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">1181</span></span>"] },
|
||||
{ name: "<span title=\"topics: List<String>\">topics</span>", children: [], rightAlign: false, values: ["<span class=\"formatted\" title=\"ideavim\nintellij\nintellij-platform\njb-official\nkotlin\nvim\nvim-emulator\"><span class=\"structural\">[</span>ideavim<span class=\"structural\">, </span>intellij<span class=\"structural\">, </span>intellij-pl<span class=\"structural\">...</span><span class=\"structural\">, </span><span class=\"structural\">...</span><span class=\"structural\">]</span></span>","<span class=\"formatted\" title=\"code-editor\nide\nintellij\nintellij-community\nintellij-platform\"><span class=\"structural\">[</span>code-editor<span class=\"structural\">, </span>ide<span class=\"structural\">, </span>intellij<span class=\"structural\">, </span>i<span class=\"structural\">...</span><span class=\"structural\">, </span>i<span class=\"structural\">...</span><span class=\"structural\">]</span></span>","<span class=\"formatted\" title=\"intellij-idea\nintellij-plugin\nscala\"><span class=\"structural\">[</span>intellij-idea<span class=\"structural\">, </span>intellij-plugin<span class=\"structural\">, </span>scala<span class=\"structural\">]</span></span>","<span class=\"formatted\" title=\"\"><span class=\"structural\">[</span><span class=\"structural\">]</span></span>","<span class=\"formatted\" title=\"gitignore\nignore-files\nintellij\nintellij-plugin\njava\"><span class=\"structural\">[</span>gitignore<span class=\"structural\">, </span>ignore-files<span class=\"structural\">, </span>intellij<span class=\"structural\">, </span><span class=\"structural\">...</span><span class=\"structural\">]</span></span>"] },
|
||||
{ name: "<span title=\"isIntellij: Boolean\">isIntellij</span>", children: [], rightAlign: false, values: ["true","true","true","true","true"] },
|
||||
], id: 1, rootId: 0, totalRows: 7 } ) });
|
||||
/*-->*/
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"name: String\">name</span>", children: [], rightAlign: false, values: ["MPS","kotlin","Exposed","kotlin-web-site","swot"] },
|
||||
{ name: "<span title=\"starsCount: Int\">starsCount</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">1241</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">39402</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">5688</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">1074</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">1072</span></span>"] },
|
||||
{ name: "<span title=\"topics: List<String>\">topics</span>", children: [], rightAlign: false, values: ["<span class=\"formatted\" title=\"domain-specific-language\ndsl\"><span class=\"structural\">[</span>domain-specific-language<span class=\"structural\">, </span>dsl<span class=\"structural\">]</span></span>","<span class=\"formatted\" title=\"compiler\ngradle-plugin\nintellij-plugin\nkotlin\nkotlin-library\nmaven-plugin\nprogramming-language\"><span class=\"structural\">[</span>compiler<span class=\"structural\">, </span>gradle-plugin<span class=\"structural\">, </span>intel<span class=\"structural\">...</span><span class=\"structural\">, </span><span class=\"structural\">...</span><span class=\"structural\">]</span></span>","<span class=\"formatted\" title=\"dao\nkotlin\norm\nsql\"><span class=\"structural\">[</span>dao<span class=\"structural\">, </span>kotlin<span class=\"structural\">, </span>orm<span class=\"structural\">, </span>sql<span class=\"structural\">]</span></span>","<span class=\"formatted\" title=\"kotlin\"><span class=\"structural\">[</span>kotlin<span class=\"structural\">]</span></span>","<span class=\"formatted\" title=\"\"><span class=\"structural\">[</span><span class=\"structural\">]</span></span>"] },
|
||||
{ name: "<span title=\"isIntellij: Boolean\">isIntellij</span>", children: [], rightAlign: false, values: ["false","false","false","false","false"] },
|
||||
], id: 2, rootId: 0, totalRows: 17 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
+511
@@ -0,0 +1,511 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"isIntellij: Boolean\">isIntellij</span>", children: [], rightAlign: false, values: ["true","false"] },
|
||||
{ name: "<span title=\"count: Int\">count</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">7</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">17</span></span>"] },
|
||||
], id: 0, rootId: 0, totalRows: 2 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
+512
@@ -0,0 +1,512 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"isIntellij: Boolean\">isIntellij</span>", children: [], rightAlign: false, values: ["true","false"] },
|
||||
{ name: "<span title=\"sumStars: Int\">sumStars</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">25221</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">85392</span></span>"] },
|
||||
{ name: "<span title=\"maxStars: Int\">maxStars</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">12926</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">39402</span></span>"] },
|
||||
], id: 0, rootId: 0, totalRows: 2 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
+513
@@ -0,0 +1,513 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"name: String\">name</span>", children: [], rightAlign: false, values: ["kotlin","intellij-community","kotlin-native","compose-jb","ideavim","JetBrainsMono","Exposed","ring-ui","kotlinconf-app","create-react-kotlin-app"] },
|
||||
{ name: "<span title=\"starsCount: Int\">starsCount</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">39402</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">12926</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">7101</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">6805</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">6120</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">6059</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">5688</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">2836</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">2628</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">2424</span></span>"] },
|
||||
{ name: "<span title=\"topics: List<String>\">topics</span>", children: [], rightAlign: false, values: ["<span class=\"formatted\" title=\"compiler\ngradle-plugin\nintellij-plugin\nkotlin\nkotlin-library\nmaven-plugin\nprogramming-language\"><span class=\"structural\">[</span>compiler<span class=\"structural\">, </span>gradle-plugin<span class=\"structural\">, </span>intel<span class=\"structural\">...</span><span class=\"structural\">, </span><span class=\"structural\">...</span><span class=\"structural\">]</span></span>","<span class=\"formatted\" title=\"code-editor\nide\nintellij\nintellij-community\nintellij-platform\"><span class=\"structural\">[</span>code-editor<span class=\"structural\">, </span>ide<span class=\"structural\">, </span>intellij<span class=\"structural\">, </span>i<span class=\"structural\">...</span><span class=\"structural\">, </span>i<span class=\"structural\">...</span><span class=\"structural\">]</span></span>","<span class=\"formatted\" title=\"c\ncompiler\nkotlin\nllvm\nobjective-c\"><span class=\"structural\">[</span>c<span class=\"structural\">, </span>compiler<span class=\"structural\">, </span>kotlin<span class=\"structural\">, </span>llvm<span class=\"structural\">, </span>objective-c<span class=\"structural\">]</span></span>","<span class=\"formatted\" title=\"android\nawt\ncompose\ndeclarative-ui\ndesktop\ngui\njavascript\nkotlin\nmultiplatform\nreactive\nswing\nui\"><span class=\"structural\">[</span>android<span class=\"structural\">, </span>awt<span class=\"structural\">, </span>compose<span class=\"structural\">, </span>declara<span class=\"structural\">...</span><span class=\"structural\">, </span><span class=\"structural\">...</span><span class=\"structural\">]</span></span>","<span class=\"formatted\" title=\"ideavim\nintellij\nintellij-platform\njb-official\nkotlin\nvim\nvim-emulator\"><span class=\"structural\">[</span>ideavim<span class=\"structural\">, </span>intellij<span class=\"structural\">, </span>intellij-pl<span class=\"structural\">...</span><span class=\"structural\">, </span><span class=\"structural\">...</span><span class=\"structural\">]</span></span>","<span class=\"formatted\" title=\"coding-font\nfont\nligatures\nmonospaced-font\nprogramming-font\nprogramming-ligatures\"><span class=\"structural\">[</span>coding-font<span class=\"structural\">, </span>font<span class=\"structural\">, </span>ligatures<span class=\"structural\">, </span><span class=\"structural\">...</span><span class=\"structural\">]</span></span>","<span class=\"formatted\" title=\"dao\nkotlin\norm\nsql\"><span class=\"structural\">[</span>dao<span class=\"structural\">, </span>kotlin<span class=\"structural\">, </span>orm<span class=\"structural\">, </span>sql<span class=\"structural\">]</span></span>","<span class=\"formatted\" title=\"components\njetbrains-ui\nreact\"><span class=\"structural\">[</span>components<span class=\"structural\">, </span>jetbrains-ui<span class=\"structural\">, </span>react<span class=\"structural\">]</span></span>","<span class=\"formatted\" title=\"\"><span class=\"structural\">[</span><span class=\"structural\">]</span></span>","<span class=\"formatted\" title=\"create-react-app\njetbrains-ui\nkotlin\nreact\nwebpack\"><span class=\"structural\">[</span>create-react-app<span class=\"structural\">, </span>jetbrains-ui<span class=\"structural\">, </span><span class=\"structural\">...</span><span class=\"structural\">]</span></span>"] },
|
||||
{ name: "<span title=\"isIntellij: Boolean\">isIntellij</span>", children: [], rightAlign: false, values: ["false","true","false","false","true","false","false","false","false","false"] },
|
||||
], id: 0, rootId: 0, totalRows: 10 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
+514
@@ -0,0 +1,514 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description">... showing only top 20 of 562 rows</p><p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"full_name: String\">full_name</span>", children: [], rightAlign: false, values: ["JetBrains/JPS","JetBrains/YouTrackSharp","JetBrains/colorSchemeTool","JetBrains/ideavim","JetBrains/youtrack-vcs-hooks","JetBrains/youtrack-rest-ruby-library","JetBrains/emacs4ij","JetBrains/codereview4intellij","JetBrains/teamcity-nuget-support","JetBrains/Grammar-Kit","JetBrains/intellij-starteam-plugin","JetBrains/la-clojure","JetBrains/MPS","JetBrains/intellij-community","JetBrains/TeamCity.ServiceMessages","JetBrains/youtrack-rest-python-library","JetBrains/intellij-scala","JetBrains/teamcity-messages","JetBrains/teamcity-cpp","JetBrains/kotlin"] },
|
||||
{ name: "<span title=\"html_url: URL\">html_url</span>", children: [], rightAlign: false, values: ["<a href='https://github.com/JetBrains/JPS' target='_blank'>https://github.com/JetBrains/JPS</a>","<span class=\"formatted\" title=\"https://github.com/JetBrains/YouTrackSharp\"><a href='https://github.com/JetBrains/YouTrackSharp' target='_blank'>https://github.com/JetBrains/YouTrack<span class=\"structural\">...</span></a></span>","<span class=\"formatted\" title=\"https://github.com/JetBrains/colorSchemeTool\"><a href='https://github.com/JetBrains/colorSchemeTool' target='_blank'>https://github.com/JetBrains/colorSch<span class=\"structural\">...</span></a></span>","<a href='https://github.com/JetBrains/ideavim' target='_blank'>https://github.com/JetBrains/ideavim</a>","<span class=\"formatted\" title=\"https://github.com/JetBrains/youtrack-vcs-hooks\"><a href='https://github.com/JetBrains/youtrack-vcs-hooks' target='_blank'>https://github.com/JetBrains/youtrack<span class=\"structural\">...</span></a></span>","<span class=\"formatted\" title=\"https://github.com/JetBrains/youtrack-rest-ruby-library\"><a href='https://github.com/JetBrains/youtrack-rest-ruby-library' target='_blank'>https://github.com/JetBrains/youtrack<span class=\"structural\">...</span></a></span>","<a href='https://github.com/JetBrains/emacs4ij' target='_blank'>https://github.com/JetBrains/emacs4ij</a>","<span class=\"formatted\" title=\"https://github.com/JetBrains/codereview4intellij\"><a href='https://github.com/JetBrains/codereview4intellij' target='_blank'>https://github.com/JetBrains/coderevi<span class=\"structural\">...</span></a></span>","<span class=\"formatted\" title=\"https://github.com/JetBrains/teamcity-nuget-support\"><a href='https://github.com/JetBrains/teamcity-nuget-support' target='_blank'>https://github.com/JetBrains/teamcity<span class=\"structural\">...</span></a></span>","<a href='https://github.com/JetBrains/Grammar-Kit' target='_blank'>https://github.com/JetBrains/Grammar-Kit</a>","<span class=\"formatted\" title=\"https://github.com/JetBrains/intellij-starteam-plugin\"><a href='https://github.com/JetBrains/intellij-starteam-plugin' target='_blank'>https://github.com/JetBrains/intellij<span class=\"structural\">...</span></a></span>","<a href='https://github.com/JetBrains/la-clojure' target='_blank'>https://github.com/JetBrains/la-clojure</a>","<a href='https://github.com/JetBrains/MPS' target='_blank'>https://github.com/JetBrains/MPS</a>","<span class=\"formatted\" title=\"https://github.com/JetBrains/intellij-community\"><a href='https://github.com/JetBrains/intellij-community' target='_blank'>https://github.com/JetBrains/intellij<span class=\"structural\">...</span></a></span>","<span class=\"formatted\" title=\"https://github.com/JetBrains/TeamCity.ServiceMessages\"><a href='https://github.com/JetBrains/TeamCity.ServiceMessages' target='_blank'>https://github.com/JetBrains/TeamCity<span class=\"structural\">...</span></a></span>","<span class=\"formatted\" title=\"https://github.com/JetBrains/youtrack-rest-python-library\"><a href='https://github.com/JetBrains/youtrack-rest-python-library' target='_blank'>https://github.com/JetBrains/youtrack<span class=\"structural\">...</span></a></span>","<span class=\"formatted\" title=\"https://github.com/JetBrains/intellij-scala\"><a href='https://github.com/JetBrains/intellij-scala' target='_blank'>https://github.com/JetBrains/intellij<span class=\"structural\">...</span></a></span>","<span class=\"formatted\" title=\"https://github.com/JetBrains/teamcity-messages\"><a href='https://github.com/JetBrains/teamcity-messages' target='_blank'>https://github.com/JetBrains/teamcity<span class=\"structural\">...</span></a></span>","<span class=\"formatted\" title=\"https://github.com/JetBrains/teamcity-cpp\"><a href='https://github.com/JetBrains/teamcity-cpp' target='_blank'>https://github.com/JetBrains/teamcity<span class=\"structural\">...</span></a></span>","<a href='https://github.com/JetBrains/kotlin' target='_blank'>https://github.com/JetBrains/kotlin</a>"] },
|
||||
{ name: "<span title=\"stargazers_count: Int\">stargazers_count</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">23</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">115</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">290</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">6120</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">5</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">8</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">47</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">11</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">41</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">534</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">6</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">218</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">1241</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">12926</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">39</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">118</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">1066</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">125</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">27</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">39402</span></span>"] },
|
||||
{ name: "<span title=\"topics: String\">topics</span>", children: [], rightAlign: false, values: ["[]","<span class=\"formatted\" title=\"[jetbrains, jetbrains-youtrack, youtrack, youtrack-api]\">[jetbrains, jetbrains-youtrack, youtr<span class=\"structural\">...</span></span>","[]","<span class=\"formatted\" title=\"[ideavim, intellij, intellij-platform, jb-official, kotlin, vim, vim-emulator]\">[ideavim, intellij, intellij-platform<span class=\"structural\">...</span></span>","[]","[]","[]","[]","<span class=\"formatted\" title=\"[nuget, nuget-feed, teamcity, teamcity-plugin]\">[nuget, nuget-feed, teamcity, teamcit<span class=\"structural\">...</span></span>","[]","[]","[]","[domain-specific-language, dsl]","<span class=\"formatted\" title=\"[code-editor, ide, intellij, intellij-community, intellij-platform]\">[code-editor, ide, intellij, intellij<span class=\"structural\">...</span></span>","<span class=\"formatted\" title=\"[c-sharp, teamcity, teamcity-service-messages]\">[c-sharp, teamcity, teamcity-service-<span class=\"structural\">...</span></span>","[]","[intellij-idea, intellij-plugin, scala]","[]","[]","<span class=\"formatted\" title=\"[compiler, gradle-plugin, intellij-plugin, kotlin, kotlin-library, maven-plugin, programming-language]\">[compiler, gradle-plugin, intellij-pl<span class=\"structural\">...</span></span>"] },
|
||||
{ name: "<span title=\"watchers: Int\">watchers</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">23</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">115</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">290</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">6120</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">5</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">8</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">47</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">11</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">41</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">534</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">6</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">218</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">1241</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">12926</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">39</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">118</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">1066</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">125</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">27</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">39402</span></span>"] },
|
||||
], id: 0, rootId: 0, totalRows: 562 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
+523
@@ -0,0 +1,523 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"name: String\">name</span>", children: [], rightAlign: false, values: ["full_name","html_url","stargazers_count","topics","watchers"] },
|
||||
{ name: "<span title=\"type: String\">type</span>", children: [], rightAlign: false, values: ["String","URL","Int","String","Int"] },
|
||||
{ name: "<span title=\"count: Int\">count</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">562</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">562</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">562</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">562</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">562</span></span>"] },
|
||||
{ name: "<span title=\"unique: Int\">unique</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">562</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">562</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">165</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">145</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">165</span></span>"] },
|
||||
{ name: "<span title=\"nulls: Int\">nulls</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">0</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">0</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">0</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">0</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">0</span></span>"] },
|
||||
{ name: "<span title=\"top: java.io.Serializable\">top</span>", children: [], rightAlign: false, values: ["JetBrains/JPS","<a href='https://github.com/JetBrains/JPS' target='_blank'>https://github.com/JetBrains/JPS</a>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">1</span></span>","[]","<span class=\"formatted\" title=\"\"><span class=\"numbers\">1</span></span>"] },
|
||||
{ name: "<span title=\"freq: Int\">freq</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">1</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">1</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">100</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">401</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">100</span></span>"] },
|
||||
{ name: "<span title=\"mean: Double?\">mean</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>","<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">244.759786</span></span>","<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">244.759786</span></span>"] },
|
||||
{ name: "<span title=\"std: Double?\">std</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>","<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">1862.801982</span></span>","<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">1862.801982</span></span>"] },
|
||||
{ name: "<span title=\"min: Comparable<*>?\">min</span>", children: [], rightAlign: false, values: ["JetBrains/Android-Tuts-Samples","<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">0</span></span>","[2d, graphics, java, skia]","<span class=\"formatted\" title=\"\"><span class=\"numbers\">0</span></span>"] },
|
||||
{ name: "<span title=\"p25: Comparable<*>?\">p25</span>", children: [], rightAlign: false, values: ["JetBrains/eslint-config","<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">2.0</span></span>","[]","<span class=\"formatted\" title=\"\"><span class=\"numbers\">2.0</span></span>"] },
|
||||
{ name: "<span title=\"median: Comparable<*>?\">median</span>", children: [], rightAlign: false, values: ["JetBrains/lightbeam","<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">8.0</span></span>","[]","<span class=\"formatted\" title=\"\"><span class=\"numbers\">8.0</span></span>"] },
|
||||
{ name: "<span title=\"p75: Comparable<*>?\">p75</span>", children: [], rightAlign: false, values: ["JetBrains/teamcity-bitbucket-issues","<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">48.0</span></span>","[awt, swing]","<span class=\"formatted\" title=\"\"><span class=\"numbers\">48.0</span></span>"] },
|
||||
{ name: "<span title=\"max: Comparable<*>?\">max</span>", children: [], rightAlign: false, values: ["JetBrains/ztools","<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">39402</span></span>","[youtrack, youtrack-workflow]","<span class=\"formatted\" title=\"\"><span class=\"numbers\">39402</span></span>"] },
|
||||
], id: 0, rootId: 0, totalRows: 5 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
+512
@@ -0,0 +1,512 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description">... showing only top 20 of 562 rows</p><p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"full_name: String\">full_name</span>", children: [], rightAlign: false, values: ["JetBrains/JPS","JetBrains/YouTrackSharp","JetBrains/colorSchemeTool","JetBrains/ideavim","JetBrains/youtrack-vcs-hooks","JetBrains/youtrack-rest-ruby-library","JetBrains/emacs4ij","JetBrains/codereview4intellij","JetBrains/teamcity-nuget-support","JetBrains/Grammar-Kit","JetBrains/intellij-starteam-plugin","JetBrains/la-clojure","JetBrains/MPS","JetBrains/intellij-community","JetBrains/TeamCity.ServiceMessages","JetBrains/youtrack-rest-python-library","JetBrains/intellij-scala","JetBrains/teamcity-messages","JetBrains/teamcity-cpp","JetBrains/kotlin"] },
|
||||
{ name: "<span title=\"stargazers_count: Int\">stargazers_count</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">23</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">115</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">290</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">6120</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">5</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">8</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">47</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">11</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">41</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">534</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">6</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">218</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">1241</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">12926</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">39</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">118</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">1066</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">125</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">27</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">39402</span></span>"] },
|
||||
{ name: "<span title=\"topics: String\">topics</span>", children: [], rightAlign: false, values: ["[]","<span class=\"formatted\" title=\"[jetbrains, jetbrains-youtrack, youtrack, youtrack-api]\">[jetbrains, jetbrains-youtrack, youtr<span class=\"structural\">...</span></span>","[]","<span class=\"formatted\" title=\"[ideavim, intellij, intellij-platform, jb-official, kotlin, vim, vim-emulator]\">[ideavim, intellij, intellij-platform<span class=\"structural\">...</span></span>","[]","[]","[]","[]","<span class=\"formatted\" title=\"[nuget, nuget-feed, teamcity, teamcity-plugin]\">[nuget, nuget-feed, teamcity, teamcit<span class=\"structural\">...</span></span>","[]","[]","[]","[domain-specific-language, dsl]","<span class=\"formatted\" title=\"[code-editor, ide, intellij, intellij-community, intellij-platform]\">[code-editor, ide, intellij, intellij<span class=\"structural\">...</span></span>","<span class=\"formatted\" title=\"[c-sharp, teamcity, teamcity-service-messages]\">[c-sharp, teamcity, teamcity-service-<span class=\"structural\">...</span></span>","[]","[intellij-idea, intellij-plugin, scala]","[]","[]","<span class=\"formatted\" title=\"[compiler, gradle-plugin, intellij-plugin, kotlin, kotlin-library, maven-plugin, programming-language]\">[compiler, gradle-plugin, intellij-pl<span class=\"structural\">...</span></span>"] },
|
||||
], id: 0, rootId: 0, totalRows: 562 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
+512
@@ -0,0 +1,512 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description">... showing only top 20 of 24 rows</p><p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"full_name: String\">full_name</span>", children: [], rightAlign: false, values: ["JetBrains/ideavim","JetBrains/MPS","JetBrains/intellij-community","JetBrains/intellij-scala","JetBrains/kotlin","JetBrains/intellij-plugins","JetBrains/Exposed","JetBrains/kotlin-web-site","JetBrains/idea-gitignore","JetBrains/swot","JetBrains/phpstorm-stubs","JetBrains/gradle-intellij-plugin","JetBrains/svg-sprite-loader","JetBrains/resharper-unity","JetBrains/kotlin-native","JetBrains/create-react-kotlin-app","JetBrains/ring-ui","JetBrains/kotlinconf-app","JetBrains/JetBrainsMono","<span class=\"formatted\" title=\"JetBrains/intellij-platform-plugin-template\">JetBrains/intellij-platform-plugin-te<span class=\"structural\">...</span></span>"] },
|
||||
{ name: "<span title=\"stargazers_count: Int\">stargazers_count</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">6120</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">1241</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">12926</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">1066</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">39402</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">1737</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">5688</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">1074</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">1181</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">1072</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">1110</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">1058</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">1815</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">1017</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">7101</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">2424</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">2836</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">2628</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">6059</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">1133</span></span>"] },
|
||||
{ name: "<span title=\"topics: String\">topics</span>", children: [], rightAlign: false, values: ["<span class=\"formatted\" title=\"[ideavim, intellij, intellij-platform, jb-official, kotlin, vim, vim-emulator]\">[ideavim, intellij, intellij-platform<span class=\"structural\">...</span></span>","[domain-specific-language, dsl]","<span class=\"formatted\" title=\"[code-editor, ide, intellij, intellij-community, intellij-platform]\">[code-editor, ide, intellij, intellij<span class=\"structural\">...</span></span>","[intellij-idea, intellij-plugin, scala]","<span class=\"formatted\" title=\"[compiler, gradle-plugin, intellij-plugin, kotlin, kotlin-library, maven-plugin, programming-language]\">[compiler, gradle-plugin, intellij-pl<span class=\"structural\">...</span></span>","[]","[dao, kotlin, orm, sql]","[kotlin]","<span class=\"formatted\" title=\"[gitignore, ignore-files, intellij, intellij-plugin, java]\">[gitignore, ignore-files, intellij, i<span class=\"structural\">...</span></span>","[]","[]","<span class=\"formatted\" title=\"[gradle, gradle-intellij-plugin, gradle-kotlin-dsl, groovy, intellij, intellij-ides, intellij-platform, intellij-plugin, intellij-sdk, jetbrains-plugin, kotlin, plugin-verifier, publishing-dsl, setup-dsl, teamcity, travis-configuration]\">[gradle, gradle-intellij-plugin, grad<span class=\"structural\">...</span></span>","<span class=\"formatted\" title=\"[sprite, svg, svg-sprite, svg-stack, webpack, webpack-loader, webpack-plugin, webpack2, webpack3]\">[sprite, svg, svg-sprite, svg-stack, <span class=\"structural\">...</span></span>","<span class=\"formatted\" title=\"[hacktoberfest, jetbrains, plugin, resharper, resharper-plugin, rider, unity, unity-editor]\">[hacktoberfest, jetbrains, plugin, re<span class=\"structural\">...</span></span>","[c, compiler, kotlin, llvm, objective-c]","<span class=\"formatted\" title=\"[create-react-app, jetbrains-ui, kotlin, react, webpack]\">[create-react-app, jetbrains-ui, kotl<span class=\"structural\">...</span></span>","[components, jetbrains-ui, react]","[]","<span class=\"formatted\" title=\"[coding-font, font, ligatures, monospaced-font, programming-font, programming-ligatures]\">[coding-font, font, ligatures, monosp<span class=\"structural\">...</span></span>","<span class=\"formatted\" title=\"[intellij, intellij-idea, intellij-idea-plugin, intellij-platform, intellij-plugin, intellij-plugins, jetbrains-plugin]\">[intellij, intellij-idea, intellij-id<span class=\"structural\">...</span></span>"] },
|
||||
], id: 0, rootId: 0, totalRows: 24 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
+512
@@ -0,0 +1,512 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description">... showing only top 20 of 24 rows</p><p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"name: String\">name</span>", children: [], rightAlign: false, values: ["JetBrains/ideavim","JetBrains/MPS","JetBrains/intellij-community","JetBrains/intellij-scala","JetBrains/kotlin","JetBrains/intellij-plugins","JetBrains/Exposed","JetBrains/kotlin-web-site","JetBrains/idea-gitignore","JetBrains/swot","JetBrains/phpstorm-stubs","JetBrains/gradle-intellij-plugin","JetBrains/svg-sprite-loader","JetBrains/resharper-unity","JetBrains/kotlin-native","JetBrains/create-react-kotlin-app","JetBrains/ring-ui","JetBrains/kotlinconf-app","JetBrains/JetBrainsMono","<span class=\"formatted\" title=\"JetBrains/intellij-platform-plugin-template\">JetBrains/intellij-platform-plugin-te<span class=\"structural\">...</span></span>"] },
|
||||
{ name: "<span title=\"starsCount: Int\">starsCount</span>", children: [], rightAlign: true, values: ["<span class=\"formatted\" title=\"\"><span class=\"numbers\">6120</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">1241</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">12926</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">1066</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">39402</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">1737</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">5688</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">1074</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">1181</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">1072</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">1110</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">1058</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">1815</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">1017</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">7101</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">2424</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">2836</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">2628</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">6059</span></span>","<span class=\"formatted\" title=\"\"><span class=\"numbers\">1133</span></span>"] },
|
||||
{ name: "<span title=\"topics: String\">topics</span>", children: [], rightAlign: false, values: ["<span class=\"formatted\" title=\"[ideavim, intellij, intellij-platform, jb-official, kotlin, vim, vim-emulator]\">[ideavim, intellij, intellij-platform<span class=\"structural\">...</span></span>","[domain-specific-language, dsl]","<span class=\"formatted\" title=\"[code-editor, ide, intellij, intellij-community, intellij-platform]\">[code-editor, ide, intellij, intellij<span class=\"structural\">...</span></span>","[intellij-idea, intellij-plugin, scala]","<span class=\"formatted\" title=\"[compiler, gradle-plugin, intellij-plugin, kotlin, kotlin-library, maven-plugin, programming-language]\">[compiler, gradle-plugin, intellij-pl<span class=\"structural\">...</span></span>","[]","[dao, kotlin, orm, sql]","[kotlin]","<span class=\"formatted\" title=\"[gitignore, ignore-files, intellij, intellij-plugin, java]\">[gitignore, ignore-files, intellij, i<span class=\"structural\">...</span></span>","[]","[]","<span class=\"formatted\" title=\"[gradle, gradle-intellij-plugin, gradle-kotlin-dsl, groovy, intellij, intellij-ides, intellij-platform, intellij-plugin, intellij-sdk, jetbrains-plugin, kotlin, plugin-verifier, publishing-dsl, setup-dsl, teamcity, travis-configuration]\">[gradle, gradle-intellij-plugin, grad<span class=\"structural\">...</span></span>","<span class=\"formatted\" title=\"[sprite, svg, svg-sprite, svg-stack, webpack, webpack-loader, webpack-plugin, webpack2, webpack3]\">[sprite, svg, svg-sprite, svg-stack, <span class=\"structural\">...</span></span>","<span class=\"formatted\" title=\"[hacktoberfest, jetbrains, plugin, resharper, resharper-plugin, rider, unity, unity-editor]\">[hacktoberfest, jetbrains, plugin, re<span class=\"structural\">...</span></span>","[c, compiler, kotlin, llvm, objective-c]","<span class=\"formatted\" title=\"[create-react-app, jetbrains-ui, kotlin, react, webpack]\">[create-react-app, jetbrains-ui, kotl<span class=\"structural\">...</span></span>","[components, jetbrains-ui, react]","[]","<span class=\"formatted\" title=\"[coding-font, font, ligatures, monospaced-font, programming-font, programming-ligatures]\">[coding-font, font, ligatures, monosp<span class=\"structural\">...</span></span>","<span class=\"formatted\" title=\"[intellij, intellij-idea, intellij-idea-plugin, intellij-platform, intellij-plugin, intellij-plugins, jetbrains-plugin]\">[intellij, intellij-idea, intellij-id<span class=\"structural\">...</span></span>"] },
|
||||
], id: 0, rootId: 0, totalRows: 24 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
+512
File diff suppressed because one or more lines are too long
+519
@@ -0,0 +1,519 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"col1: Int\">col1</span>", children: [], rightAlign: true, values: [{ style: "background-color:#a9a9a9;color:#ffffff;--text-color:#ffffff !important;--text-color-dark:#ffffff !important;--text-color-pale:#ffffff !important;--text-color-medium:#ffffff !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">45</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">87</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">23</span></span>"},{ style: "background-color:#a9a9a9;color:#ffffff;--text-color:#ffffff !important;--text-color-dark:#ffffff !important;--text-color-pale:#ffffff !important;--text-color-medium:#ffffff !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">90</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">12</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">78</span></span>"},{ style: "background-color:#a9a9a9;color:#ffffff;--text-color:#ffffff !important;--text-color-dark:#ffffff !important;--text-color-pale:#ffffff !important;--text-color-medium:#ffffff !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">34</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">56</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">89</span></span>"},{ style: "background-color:#a9a9a9;color:#ffffff;--text-color:#ffffff !important;--text-color-dark:#ffffff !important;--text-color-pale:#ffffff !important;--text-color-medium:#ffffff !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">67</span></span>"}] },
|
||||
{ name: "<span title=\"col2: Int\">col2</span>", children: [], rightAlign: true, values: [{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">12</span></span>"},{ style: "background-color:#a9a9a9;color:#ffffff;--text-color:#ffffff !important;--text-color-dark:#ffffff !important;--text-color-pale:#ffffff !important;--text-color-medium:#ffffff !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">34</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">67</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">45</span></span>"},{ style: "background-color:#a9a9a9;color:#ffffff;--text-color:#ffffff !important;--text-color-dark:#ffffff !important;--text-color-pale:#ffffff !important;--text-color-medium:#ffffff !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">89</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">56</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">90</span></span>"},{ style: "background-color:#a9a9a9;color:#ffffff;--text-color:#ffffff !important;--text-color-dark:#ffffff !important;--text-color-pale:#ffffff !important;--text-color-medium:#ffffff !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">23</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">78</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">45</span></span>"}] },
|
||||
{ name: "<span title=\"col3: Int\">col3</span>", children: [], rightAlign: true, values: [{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">78</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">56</span></span>"},{ style: "background-color:#a9a9a9;color:#ffffff;--text-color:#ffffff !important;--text-color-dark:#ffffff !important;--text-color-pale:#ffffff !important;--text-color-medium:#ffffff !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">89</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">23</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">45</span></span>"},{ style: "background-color:#a9a9a9;color:#ffffff;--text-color:#ffffff !important;--text-color-dark:#ffffff !important;--text-color-pale:#ffffff !important;--text-color-medium:#ffffff !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">12</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">67</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">34</span></span>"},{ style: "background-color:#a9a9a9;color:#ffffff;--text-color:#ffffff !important;--text-color-dark:#ffffff !important;--text-color-pale:#ffffff !important;--text-color-medium:#ffffff !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">90</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">78</span></span>"}] },
|
||||
{ name: "<span title=\"col4: Int\">col4</span>", children: [], rightAlign: true, values: [{ style: "background-color:#a9a9a9;color:#ffffff;--text-color:#ffffff !important;--text-color-dark:#ffffff !important;--text-color-pale:#ffffff !important;--text-color-medium:#ffffff !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">34</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">78</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">45</span></span>"},{ style: "background-color:#a9a9a9;color:#ffffff;--text-color:#ffffff !important;--text-color-dark:#ffffff !important;--text-color-pale:#ffffff !important;--text-color-medium:#ffffff !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">67</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">90</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">23</span></span>"},{ style: "background-color:#a9a9a9;color:#ffffff;--text-color:#ffffff !important;--text-color-dark:#ffffff !important;--text-color-pale:#ffffff !important;--text-color-medium:#ffffff !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">12</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">89</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">56</span></span>"},{ style: "background-color:#a9a9a9;color:#ffffff;--text-color:#ffffff !important;--text-color-dark:#ffffff !important;--text-color-pale:#ffffff !important;--text-color-medium:#ffffff !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">12</span></span>"}] },
|
||||
{ name: "<span title=\"col5: Int\">col5</span>", children: [], rightAlign: true, values: [{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">90</span></span>"},{ style: "background-color:#a9a9a9;color:#ffffff;--text-color:#ffffff !important;--text-color-dark:#ffffff !important;--text-color-pale:#ffffff !important;--text-color-medium:#ffffff !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">12</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">78</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">34</span></span>"},{ style: "background-color:#a9a9a9;color:#ffffff;--text-color:#ffffff !important;--text-color-dark:#ffffff !important;--text-color-pale:#ffffff !important;--text-color-medium:#ffffff !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">56</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">89</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">45</span></span>"},{ style: "background-color:#a9a9a9;color:#ffffff;--text-color:#ffffff !important;--text-color-dark:#ffffff !important;--text-color-pale:#ffffff !important;--text-color-medium:#ffffff !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">67</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">23</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">90</span></span>"}] },
|
||||
{ name: "<span title=\"col6: Int\">col6</span>", children: [], rightAlign: true, values: [{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">23</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">45</span></span>"},{ style: "background-color:#a9a9a9;color:#ffffff;--text-color:#ffffff !important;--text-color-dark:#ffffff !important;--text-color-pale:#ffffff !important;--text-color-medium:#ffffff !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">90</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">78</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">34</span></span>"},{ style: "background-color:#a9a9a9;color:#ffffff;--text-color:#ffffff !important;--text-color-dark:#ffffff !important;--text-color-pale:#ffffff !important;--text-color-medium:#ffffff !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">67</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">23</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">12</span></span>"},{ style: "background-color:#a9a9a9;color:#ffffff;--text-color:#ffffff !important;--text-color-dark:#ffffff !important;--text-color-pale:#ffffff !important;--text-color-medium:#ffffff !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">89</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">56</span></span>"}] },
|
||||
{ name: "<span title=\"col7: Int\">col7</span>", children: [], rightAlign: true, values: [{ style: "background-color:#a9a9a9;color:#ffffff;--text-color:#ffffff !important;--text-color-dark:#ffffff !important;--text-color-pale:#ffffff !important;--text-color-medium:#ffffff !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">67</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">90</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">12</span></span>"},{ style: "background-color:#a9a9a9;color:#ffffff;--text-color:#ffffff !important;--text-color-dark:#ffffff !important;--text-color-pale:#ffffff !important;--text-color-medium:#ffffff !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">89</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">78</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">34</span></span>"},{ style: "background-color:#a9a9a9;color:#ffffff;--text-color:#ffffff !important;--text-color-dark:#ffffff !important;--text-color-pale:#ffffff !important;--text-color-medium:#ffffff !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">56</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">45</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">67</span></span>"},{ style: "background-color:#a9a9a9;color:#ffffff;--text-color:#ffffff !important;--text-color-dark:#ffffff !important;--text-color-pale:#ffffff !important;--text-color-medium:#ffffff !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">23</span></span>"}] },
|
||||
{ name: "<span title=\"col8: Int\">col8</span>", children: [], rightAlign: true, values: [{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">89</span></span>"},{ style: "background-color:#a9a9a9;color:#ffffff;--text-color:#ffffff !important;--text-color-dark:#ffffff !important;--text-color-pale:#ffffff !important;--text-color-medium:#ffffff !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">23</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">56</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">12</span></span>"},{ style: "background-color:#a9a9a9;color:#ffffff;--text-color:#ffffff !important;--text-color-dark:#ffffff !important;--text-color-pale:#ffffff !important;--text-color-medium:#ffffff !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">67</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">90</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">78</span></span>"},{ style: "background-color:#a9a9a9;color:#ffffff;--text-color:#ffffff !important;--text-color-dark:#ffffff !important;--text-color-pale:#ffffff !important;--text-color-medium:#ffffff !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">34</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">45</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">89</span></span>"}] },
|
||||
{ name: "<span title=\"col9: Int\">col9</span>", children: [], rightAlign: true, values: [{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">56</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">67</span></span>"},{ style: "background-color:#a9a9a9;color:#ffffff;--text-color:#ffffff !important;--text-color-dark:#ffffff !important;--text-color-pale:#ffffff !important;--text-color-medium:#ffffff !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">34</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">56</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">23</span></span>"},{ style: "background-color:#a9a9a9;color:#ffffff;--text-color:#ffffff !important;--text-color-dark:#ffffff !important;--text-color-pale:#ffffff !important;--text-color-medium:#ffffff !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">45</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">89</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">78</span></span>"},{ style: "background-color:#a9a9a9;color:#ffffff;--text-color:#ffffff !important;--text-color-dark:#ffffff !important;--text-color-pale:#ffffff !important;--text-color-medium:#ffffff !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">12</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">34</span></span>"}] },
|
||||
{ name: "<span title=\"col10: Int\">col10</span>", children: [], rightAlign: true, values: [{ style: "background-color:#a9a9a9;color:#ffffff;--text-color:#ffffff !important;--text-color-dark:#ffffff !important;--text-color-pale:#ffffff !important;--text-color-medium:#ffffff !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">43</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">89</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">78</span></span>"},{ style: "background-color:#a9a9a9;color:#ffffff;--text-color:#ffffff !important;--text-color-dark:#ffffff !important;--text-color-pale:#ffffff !important;--text-color-medium:#ffffff !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">23</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">90</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">12</span></span>"},{ style: "background-color:#a9a9a9;color:#ffffff;--text-color:#ffffff !important;--text-color-dark:#ffffff !important;--text-color-pale:#ffffff !important;--text-color-medium:#ffffff !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">67</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">90</span></span>"},{ style: "background-color:#ffffff;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">34</span></span>"},{ style: "background-color:#a9a9a9;color:#ffffff;--text-color:#ffffff !important;--text-color-dark:#ffffff !important;--text-color-pale:#ffffff !important;--text-color-medium:#ffffff !important", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">78</span></span>"}] },
|
||||
], id: 0, rootId: 0, totalRows: 10 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
+516
@@ -0,0 +1,516 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"firstName: String\">firstName</span>", children: [], rightAlign: false, values: [{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline", value: "Alice"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline", value: "Bob"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline", value: "Charlie"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline", value: "Charlie"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline", value: "Bob"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline", value: "Alice"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline", value: "Charlie"}] },
|
||||
{ name: "<span title=\"lastName: String\">lastName</span>", children: [], rightAlign: false, values: [{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline;font-style:italic", value: "Cooper"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline;font-style:italic", value: "Dylan"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline;font-style:italic", value: "Daniels"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline;font-style:italic", value: "Chaplin"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline;font-style:italic", value: "Marley"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline;font-style:italic", value: "Wolf"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline;font-style:italic", value: "Byrd"}] },
|
||||
{ name: "<span title=\"name: DataRow<*>\">name</span>", children: [0, 1], rightAlign: false, values: [{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline", value: "<span class=\"formatted\" title=\"firstName: Alice\nlastName: Cooper\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Alice<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Cooper<span class=\"structural\"> }</span></span>"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline", value: "<span class=\"formatted\" title=\"firstName: Bob\nlastName: Dylan\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Bob<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Dylan<span class=\"structural\"> }</span></span>"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline", value: "<span class=\"formatted\" title=\"firstName: Charlie\nlastName: Daniels\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Charlie<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Dan<span class=\"structural\">...</span><span class=\"structural\"> }</span></span>"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline", value: "<span class=\"formatted\" title=\"firstName: Charlie\nlastName: Chaplin\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Charlie<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Cha<span class=\"structural\">...</span><span class=\"structural\"> }</span></span>"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline", value: "<span class=\"formatted\" title=\"firstName: Bob\nlastName: Marley\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Bob<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Marley<span class=\"structural\"> }</span></span>"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline", value: "<span class=\"formatted\" title=\"firstName: Alice\nlastName: Wolf\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Alice<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Wolf<span class=\"structural\"> }</span></span>"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline", value: "<span class=\"formatted\" title=\"firstName: Charlie\nlastName: Byrd\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Charlie<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Byrd<span class=\"structural\"> }</span></span>"}] },
|
||||
{ name: "<span title=\"age: Int\">age</span>", children: [], rightAlign: true, values: [{ style: "font-weight:bold;color:#0000ff;--text-color:#0000ff !important;--text-color-dark:#0000ff !important;--text-color-pale:#0000ff !important;--text-color-medium:#0000ff !important;background-color:#ffffff", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">15</span></span>"},{ style: "font-weight:bold;color:#00ff00;--text-color:#00ff00 !important;--text-color-dark:#00ff00 !important;--text-color-pale:#00ff00 !important;--text-color-medium:#00ff00 !important;background-color:#ffffff", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">45</span></span>"},{ style: "font-weight:bold;color:#002ad4;--text-color:#002ad4 !important;--text-color-dark:#002ad4 !important;--text-color-pale:#002ad4 !important;--text-color-medium:#002ad4 !important;background-color:#ffffff", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>"},{ style: "font-weight:bold;color:#00d42a;--text-color:#00d42a !important;--text-color-dark:#00d42a !important;--text-color-pale:#00d42a !important;--text-color-medium:#00d42a !important;background-color:#ffffff", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">40</span></span>"},{ style: "font-weight:bold;color:#007f7f;--text-color:#007f7f !important;--text-color-dark:#007f7f !important;--text-color-pale:#007f7f !important;--text-color-medium:#007f7f !important;background-color:#ffffff", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">30</span></span>"},{ style: "font-weight:bold;color:#002ad4;--text-color:#002ad4 !important;--text-color-dark:#002ad4 !important;--text-color-pale:#002ad4 !important;--text-color-medium:#002ad4 !important;background-color:#ffffff", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>"},{ style: "font-weight:bold;color:#007f7f;--text-color:#007f7f !important;--text-color-dark:#007f7f !important;--text-color-pale:#007f7f !important;--text-color-medium:#007f7f !important;background-color:#ffffff", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">30</span></span>"}] },
|
||||
{ name: "<span title=\"city: String?\">city</span>", children: [], rightAlign: false, values: [{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff", value: "London"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff", value: "Dubai"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff", value: "Moscow"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff", value: "Milan"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff", value: "Tokyo"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff", value: "<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff", value: "Moscow"}] },
|
||||
{ name: "<span title=\"weight: Int?\">weight</span>", children: [], rightAlign: true, values: [{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#1900e5", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">54</span></span>"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#eb0013", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">87</span></span>"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff", value: "<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff", value: "<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#72008c", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">68</span></span>"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#1f00df", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">55</span></span>"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ff0000", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">90</span></span>"}] },
|
||||
{ name: "<span title=\"isHappy: Boolean\">isHappy</span>", children: [], rightAlign: false, values: [{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#00ff00", value: "true"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#00ff00", value: "true"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ff0000", value: "false"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#00ff00", value: "true"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#00ff00", value: "true"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ff0000", value: "false"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#00ff00", value: "true"}] },
|
||||
], id: 0, rootId: 0, totalRows: 7 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
+516
@@ -0,0 +1,516 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"], .dataframe_dark{
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
|
||||
p.dataframe_description {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-dark);
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.dataframe th, td {
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.dataframe th {
|
||||
background-color: var(--background);
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
table.dataframe td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataframe th.bottomBorder {
|
||||
border-bottom-color: var(--bold-border-color);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(odd) {
|
||||
background: var(--background-odd);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:nth-child(even) {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table.dataframe tbody > tr:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
table.dataframe a {
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table.dataframe tr:hover > td a {
|
||||
color: var(--link-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table.dataframe img {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
table.dataframe th.complex {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table.dataframe .leftBorder {
|
||||
border-left-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightBorder {
|
||||
border-right-color: var(--inner-border-color);
|
||||
}
|
||||
|
||||
table.dataframe .rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.dataframe .expanderSvg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table.dataframe .expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* formatting */
|
||||
|
||||
table.dataframe .null {
|
||||
color: var(--text-color-pale);
|
||||
}
|
||||
|
||||
table.dataframe .structural {
|
||||
color: var(--text-color-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .dataFrameCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataframe .numbers {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe td:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
table.dataframe tr:hover .formatted .structural, .null {
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
|
||||
details details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table class="dataframe" id="df_0"></table>
|
||||
|
||||
<p class="dataframe_description"></p>
|
||||
</body>
|
||||
<script>
|
||||
(function () {
|
||||
window.DataFrame = window.DataFrame || new (function () {
|
||||
this.addTable = function (df) {
|
||||
let cols = df.cols;
|
||||
for (let i = 0; i < cols.length; i++) {
|
||||
for (let c of cols[i].children) {
|
||||
cols[c].parent = i;
|
||||
}
|
||||
}
|
||||
df.nrow = 0
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
if (df.cols[i].values.length > df.nrow) df.nrow = df.cols[i].values.length
|
||||
}
|
||||
if (df.id === df.rootId) {
|
||||
df.expandedFrames = new Set()
|
||||
df.childFrames = {}
|
||||
const table = this.getTableElement(df.id)
|
||||
table.df = df
|
||||
for (let i = 0; i < df.cols.length; i++) {
|
||||
let col = df.cols[i]
|
||||
if (col.parent === undefined && col.children.length > 0) col.expanded = true
|
||||
}
|
||||
} else {
|
||||
const rootDf = this.getTableData(df.rootId)
|
||||
rootDf.childFrames[df.id] = df
|
||||
}
|
||||
}
|
||||
|
||||
this.computeRenderData = function (df) {
|
||||
let result = []
|
||||
let pos = 0
|
||||
for (let col = 0; col < df.cols.length; col++) {
|
||||
if (df.cols[col].parent === undefined)
|
||||
pos += this.computeRenderDataRec(df.cols, col, pos, 0, result, false, false)
|
||||
}
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let row = result[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
let cell = row[j]
|
||||
if (j === 0)
|
||||
cell.leftBd = false
|
||||
if (j < row.length - 1) {
|
||||
let nextData = row[j + 1]
|
||||
if (nextData.leftBd) cell.rightBd = true
|
||||
else if (cell.rightBd) nextData.leftBd = true
|
||||
} else cell.rightBd = false
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
this.computeRenderDataRec = function (cols, colId, pos, depth, result, leftBorder, rightBorder) {
|
||||
if (result.length === depth) {
|
||||
const array = [];
|
||||
if (pos > 0) {
|
||||
let j = 0
|
||||
for (let i = 0; j < pos; i++) {
|
||||
let c = result[depth - 1][i]
|
||||
j += c.span
|
||||
let copy = Object.assign({empty: true}, c)
|
||||
array.push(copy)
|
||||
}
|
||||
}
|
||||
result.push(array)
|
||||
}
|
||||
const col = cols[colId];
|
||||
let size = 0;
|
||||
if (col.expanded) {
|
||||
let childPos = pos
|
||||
for (let i = 0; i < col.children.length; i++) {
|
||||
let child = col.children[i]
|
||||
let childLeft = i === 0 && (col.children.length > 1 || leftBorder)
|
||||
let childRight = i === col.children.length - 1 && (col.children.length > 1 || rightBorder)
|
||||
let childSize = this.computeRenderDataRec(cols, child, childPos, depth + 1, result, childLeft, childRight)
|
||||
childPos += childSize
|
||||
size += childSize
|
||||
}
|
||||
} else {
|
||||
for (let i = depth + 1; i < result.length; i++)
|
||||
result[i].push({id: colId, span: 1, leftBd: leftBorder, rightBd: rightBorder, empty: true})
|
||||
size = 1
|
||||
}
|
||||
let left = leftBorder
|
||||
let right = rightBorder
|
||||
if (size > 1) {
|
||||
left = true
|
||||
right = true
|
||||
}
|
||||
result[depth].push({id: colId, span: size, leftBd: left, rightBd: right})
|
||||
return size
|
||||
}
|
||||
|
||||
this.getTableElement = function (id) {
|
||||
return document.getElementById("df_" + id)
|
||||
}
|
||||
|
||||
this.getTableData = function (id) {
|
||||
return this.getTableElement(id).df
|
||||
}
|
||||
|
||||
this.createExpander = function (isExpanded) {
|
||||
const svgNs = "http://www.w3.org/2000/svg"
|
||||
let svg = document.createElementNS(svgNs, "svg")
|
||||
svg.classList.add("expanderSvg")
|
||||
let path = document.createElementNS(svgNs, "path")
|
||||
if (isExpanded) {
|
||||
svg.setAttribute("viewBox", "0 -2 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 4 4 4 -4 -1 -1 -3 3Z")
|
||||
} else {
|
||||
svg.setAttribute("viewBox", "-2 0 8 8")
|
||||
path.setAttribute("d", "M1 0 l-1 1 3 3 -3 3 1 1 4 -4Z")
|
||||
}
|
||||
path.setAttribute("fill", "currentColor")
|
||||
svg.appendChild(path)
|
||||
return svg
|
||||
}
|
||||
|
||||
this.renderTable = function (id) {
|
||||
|
||||
let table = this.getTableElement(id)
|
||||
|
||||
if (table === null) return
|
||||
|
||||
table.innerHTML = ""
|
||||
|
||||
let df = table.df
|
||||
let rootDf = df.rootId === df.id ? df : this.getTableData(df.rootId)
|
||||
|
||||
// header
|
||||
let header = document.createElement("thead")
|
||||
table.appendChild(header)
|
||||
|
||||
let renderData = this.computeRenderData(df)
|
||||
for (let j = 0; j < renderData.length; j++) {
|
||||
let rowData = renderData[j]
|
||||
let tr = document.createElement("tr");
|
||||
let isLastRow = j === renderData.length - 1
|
||||
header.appendChild(tr);
|
||||
for (let i = 0; i < rowData.length; i++) {
|
||||
let cell = rowData[i]
|
||||
let th = document.createElement("th");
|
||||
th.setAttribute("colspan", cell.span)
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId];
|
||||
if (!cell.empty) {
|
||||
if (col.children.length === 0) {
|
||||
th.innerHTML = col.name
|
||||
} else {
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
col.expanded = !col.expanded
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(col.expanded))
|
||||
link.innerHTML += col.name
|
||||
th.appendChild(link)
|
||||
}
|
||||
}
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (isLastRow)
|
||||
classes += " bottomBorder"
|
||||
if (classes.length > 0)
|
||||
th.setAttribute("class", classes)
|
||||
tr.appendChild(th)
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
let body = document.createElement("tbody")
|
||||
table.appendChild(body)
|
||||
|
||||
let columns = renderData.pop()
|
||||
for (let row = 0; row < df.nrow; row++) {
|
||||
let tr = document.createElement("tr");
|
||||
body.appendChild(tr)
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
let cell = columns[i]
|
||||
let td = document.createElement("td");
|
||||
let colId = cell.id
|
||||
let col = df.cols[colId]
|
||||
let classes = (cell.leftBd ? " leftBorder" : "") + (cell.rightBd ? " rightBorder" : "")
|
||||
if (col.rightAlign)
|
||||
classes += " rightAlign"
|
||||
if (classes.length > 0)
|
||||
td.setAttribute("class", classes)
|
||||
tr.appendChild(td)
|
||||
let value = col.values[row]
|
||||
if (value.frameId !== undefined) {
|
||||
let frameId = value.frameId
|
||||
let expanded = rootDf.expandedFrames.has(frameId)
|
||||
let link = document.createElement("a")
|
||||
link.className = "expander"
|
||||
let that = this
|
||||
link.onclick = function () {
|
||||
if (rootDf.expandedFrames.has(frameId))
|
||||
rootDf.expandedFrames.delete(frameId)
|
||||
else rootDf.expandedFrames.add(frameId)
|
||||
that.renderTable(id)
|
||||
}
|
||||
link.appendChild(this.createExpander(expanded))
|
||||
link.innerHTML += value.value
|
||||
if (expanded) {
|
||||
td.appendChild(link)
|
||||
td.appendChild(document.createElement("p"))
|
||||
const childTable = document.createElement("table")
|
||||
childTable.className = "dataframe"
|
||||
childTable.id = "df_" + frameId
|
||||
let childDf = rootDf.childFrames[frameId]
|
||||
childTable.df = childDf
|
||||
td.appendChild(childTable)
|
||||
this.renderTable(frameId)
|
||||
if (childDf.nrow !== childDf.totalRows) {
|
||||
const footer = document.createElement("p")
|
||||
footer.innerText = `... showing only top ${childDf.nrow} of ${childDf.totalRows} rows`
|
||||
td.appendChild(footer)
|
||||
}
|
||||
} else {
|
||||
td.appendChild(link)
|
||||
}
|
||||
} else if (value.style !== undefined) {
|
||||
td.innerHTML = value.value
|
||||
td.setAttribute("style", value.style)
|
||||
} else td.innerHTML = value
|
||||
this.nodeScriptReplace(td)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.nodeScriptReplace = function (node) {
|
||||
if (this.nodeScriptIs(node) === true) {
|
||||
node.parentNode.replaceChild(this.nodeScriptClone(node), node);
|
||||
} else {
|
||||
let i = -1, children = node.childNodes;
|
||||
while (++i < children.length) {
|
||||
this.nodeScriptReplace(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
this.nodeScriptClone = function (node) {
|
||||
let script = document.createElement("script");
|
||||
script.text = node.innerHTML;
|
||||
|
||||
let i = -1, attrs = node.attributes, attr;
|
||||
while (++i < attrs.length) {
|
||||
script.setAttribute((attr = attrs[i]).name, attr.value);
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
this.nodeScriptIs = function (node) {
|
||||
return node.tagName === 'SCRIPT';
|
||||
}
|
||||
})()
|
||||
|
||||
window.call_DataFrame = function (f) {
|
||||
return f();
|
||||
};
|
||||
|
||||
let funQueue = window["kotlinQueues"] && window["kotlinQueues"]["DataFrame"];
|
||||
if (funQueue) {
|
||||
funQueue.forEach(function (f) {
|
||||
f();
|
||||
});
|
||||
funQueue = [];
|
||||
}
|
||||
})()
|
||||
|
||||
/*<!--*/
|
||||
call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"firstName: String\">firstName</span>", children: [], rightAlign: false, values: [{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline", value: "Alice"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline", value: "Bob"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline", value: "Charlie"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline", value: "Charlie"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline", value: "Bob"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline", value: "Alice"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline", value: "Charlie"}] },
|
||||
{ name: "<span title=\"lastName: String\">lastName</span>", children: [], rightAlign: false, values: [{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline;font-style:italic", value: "Cooper"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline;font-style:italic", value: "Dylan"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline;font-style:italic", value: "Daniels"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline;font-style:italic", value: "Chaplin"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline;font-style:italic", value: "Marley"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline;font-style:italic", value: "Wolf"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline;font-style:italic", value: "Byrd"}] },
|
||||
{ name: "<span title=\"name: DataRow<*>\">name</span>", children: [0, 1], rightAlign: false, values: [{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline", value: "<span class=\"formatted\" title=\"firstName: Alice\nlastName: Cooper\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Alice<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Cooper<span class=\"structural\"> }</span></span>"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline", value: "<span class=\"formatted\" title=\"firstName: Bob\nlastName: Dylan\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Bob<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Dylan<span class=\"structural\"> }</span></span>"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline", value: "<span class=\"formatted\" title=\"firstName: Charlie\nlastName: Daniels\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Charlie<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Dan<span class=\"structural\">...</span><span class=\"structural\"> }</span></span>"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline", value: "<span class=\"formatted\" title=\"firstName: Charlie\nlastName: Chaplin\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Charlie<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Cha<span class=\"structural\">...</span><span class=\"structural\"> }</span></span>"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline", value: "<span class=\"formatted\" title=\"firstName: Bob\nlastName: Marley\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Bob<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Marley<span class=\"structural\"> }</span></span>"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline", value: "<span class=\"formatted\" title=\"firstName: Alice\nlastName: Wolf\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Alice<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Wolf<span class=\"structural\"> }</span></span>"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff;text-decoration:underline", value: "<span class=\"formatted\" title=\"firstName: Charlie\nlastName: Byrd\"><span class=\"structural\">{ </span><span class=\"structural\">firstName: </span>Charlie<span class=\"structural\">, </span><span class=\"structural\">lastName: </span>Byrd<span class=\"structural\"> }</span></span>"}] },
|
||||
{ name: "<span title=\"age: Int\">age</span>", children: [], rightAlign: true, values: [{ style: "font-weight:bold;color:#0000ff;--text-color:#0000ff !important;--text-color-dark:#0000ff !important;--text-color-pale:#0000ff !important;--text-color-medium:#0000ff !important;background-color:#ffffff", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">15</span></span>"},{ style: "font-weight:bold;color:#00ff00;--text-color:#00ff00 !important;--text-color-dark:#00ff00 !important;--text-color-pale:#00ff00 !important;--text-color-medium:#00ff00 !important;background-color:#ffffff", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">45</span></span>"},{ style: "font-weight:bold;color:#002ad4;--text-color:#002ad4 !important;--text-color-dark:#002ad4 !important;--text-color-pale:#002ad4 !important;--text-color-medium:#002ad4 !important;background-color:#ffffff", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>"},{ style: "font-weight:bold;color:#00d42a;--text-color:#00d42a !important;--text-color-dark:#00d42a !important;--text-color-pale:#00d42a !important;--text-color-medium:#00d42a !important;background-color:#ffffff", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">40</span></span>"},{ style: "font-weight:bold;color:#007f7f;--text-color:#007f7f !important;--text-color-dark:#007f7f !important;--text-color-pale:#007f7f !important;--text-color-medium:#007f7f !important;background-color:#ffffff", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">30</span></span>"},{ style: "font-weight:bold;color:#002ad4;--text-color:#002ad4 !important;--text-color-dark:#002ad4 !important;--text-color-pale:#002ad4 !important;--text-color-medium:#002ad4 !important;background-color:#ffffff", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">20</span></span>"},{ style: "font-weight:bold;color:#007f7f;--text-color:#007f7f !important;--text-color-dark:#007f7f !important;--text-color-pale:#007f7f !important;--text-color-medium:#007f7f !important;background-color:#ffffff", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">30</span></span>"}] },
|
||||
{ name: "<span title=\"city: String?\">city</span>", children: [], rightAlign: false, values: [{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff", value: "London"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff", value: "Dubai"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff", value: "Moscow"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff", value: "Milan"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff", value: "Tokyo"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff", value: "<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff", value: "Moscow"}] },
|
||||
{ name: "<span title=\"weight: Int?\">weight</span>", children: [], rightAlign: true, values: [{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#1900e5", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">54</span></span>"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#eb0013", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">87</span></span>"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff", value: "<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ffffff", value: "<span class=\"formatted\" title=\"\"><span class=\"null\">null</span></span>"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#72008c", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">68</span></span>"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#1f00df", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">55</span></span>"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ff0000", value: "<span class=\"formatted\" title=\"\"><span class=\"numbers\">90</span></span>"}] },
|
||||
{ name: "<span title=\"isHappy: Boolean\">isHappy</span>", children: [], rightAlign: false, values: [{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#00ff00", value: "true"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#00ff00", value: "true"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ff0000", value: "false"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#00ff00", value: "true"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#00ff00", value: "true"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#ff0000", value: "false"},{ style: "font-weight:bold;color:#000000;--text-color:#000000 !important;--text-color-dark:#000000 !important;--text-color-pale:#000000 !important;--text-color-medium:#000000 !important;background-color:#00ff00", value: "true"}] },
|
||||
], id: 0, rootId: 0, totalRows: 7 } ) });
|
||||
/*-->*/
|
||||
|
||||
call_DataFrame(function() { DataFrame.renderTable(0) });
|
||||
|
||||
function sendHeight() {
|
||||
const table = document.querySelector('table.dataframe');
|
||||
if (!table) return;
|
||||
|
||||
let height = 0;
|
||||
|
||||
const thead = table.querySelector('thead');
|
||||
if (thead) height += thead.offsetHeight;
|
||||
|
||||
const rows = table.querySelectorAll(':scope > tbody > tr');
|
||||
rows.forEach(row => {
|
||||
height += row.offsetHeight;
|
||||
});
|
||||
|
||||
height += getVerticalMargins(table) + 10;
|
||||
|
||||
window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
|
||||
}
|
||||
|
||||
function getVerticalMargins(element) {
|
||||
const style = getComputedStyle(element);
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', repeatHeightCalculation);
|
||||
|
||||
const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
|
||||
observer.observe(document.querySelector('.dataframe'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,21 @@
|
||||
movieId,title,genres
|
||||
9b30aff7943f44579e92c261f3adc193,Women in Black (1997),Fantasy|Suspenseful|Comedy
|
||||
2a1ba1fc5caf492a80188e032995843e,Bumblebee Movie (2007),Comedy|Jazz|Family|Animation
|
||||
f44ceb4771504342bb856d76c112d5a6,Magical School Boy and the Rock of Wise Men (2001),Fantasy|Growing up|Magic
|
||||
43d02fb064514ff3bd30d1e3a7398357,Master of the Jewlery: The Company of the Jewel (2001),Fantasy|Magic|Suspenseful
|
||||
6aa0d26a483148998c250b9c80ddf550,Sun Conflicts: Part IV: A Novel Espair (1977),Fantasy
|
||||
eace16e59ce24eff90bf8924eb6a926c,The Outstanding Bulk (2008),Fantasy|Superhero|Family
|
||||
ae916bc4844a4bb7b42b70d9573d05cd,In Automata (2014),Horror|Existential
|
||||
c1f0a868aeb44c5ea8d154ec3ca295ac,Interplanetary (2014),Sci-fi|Futuristic
|
||||
9595b771f87f42a3b8dd07d91e7cb328,Woods Run (1994),Family|Drama
|
||||
aa9fc400e068443488b259ea0802a975,Anthropod-Dude (2002),Superhero|Fantasy|Family|Growing up
|
||||
22d20c2ba11d44cab83aceea39dc00bd,The Chamber (2003),Comedy|Drama
|
||||
8cf4d0c1bd7b41fab6af9d92c892141f,That Thing About an Iceberg (1997),Drama|History|Family|Romance
|
||||
c2f3e7588da84684a7d78d6bd8d8e1f4,Vehicles (2006),Animation|Family
|
||||
ce06175106af4105945f245161eac3c7,Playthings Tale (1995),Animation|Family
|
||||
ee28d7e69103485c83e10b8055ef15fb,Metal Man 2 (2010),Fantasy|Superhero|Family
|
||||
c32bdeed466f4ec09de828bb4b6fc649,Surgeon Odd in the Omniverse of Crazy (2022),Fantasy|Superhero|Family|Horror
|
||||
d4a325ab648a42c4a2d6f35dfabb387f,Bad Dream on Pine Street (1984),Horror
|
||||
60ebe74947234ddcab49dea1a958faed,The Shimmering (1980),Horror
|
||||
f24327f2b05147b197ca34bf13ae3524,Krubit: Societal Teachings for Do Many Good Amazing Country of Uzbekistan (2006),Comedy
|
||||
2bb29b3a245e434fa80542e711fd2cee,This is No Movie (1950),(no genres listed)
|
||||
|
+89
File diff suppressed because one or more lines are too long
+89
File diff suppressed because one or more lines are too long
+89
@@ -0,0 +1,89 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: #fff;
|
||||
--background-odd: #f5f5f5;
|
||||
--background-hover: #d9edfd;
|
||||
--header-text-color: #474747;
|
||||
--text-color: #848484;
|
||||
--text-color-dark: #000;
|
||||
--text-color-medium: #737373;
|
||||
--text-color-pale: #b3b3b3;
|
||||
--inner-border-color: #aaa;
|
||||
--bold-border-color: #000;
|
||||
--link-color: #296eaa;
|
||||
--link-color-pale: #296eaa;
|
||||
--link-hover: #1a466c;
|
||||
}
|
||||
:root[theme="dark"], :root [data-jp-theme-light="false"] {
|
||||
--background: #303030;
|
||||
--background-odd: #3c3c3c;
|
||||
--background-hover: #464646;
|
||||
--header-text-color: #dddddd;
|
||||
--text-color: #b3b3b3;
|
||||
--text-color-dark: #dddddd;
|
||||
--text-color-medium: #b2b2b2;
|
||||
--text-color-pale: #737373;
|
||||
--inner-border-color: #707070;
|
||||
--bold-border-color: #777777;
|
||||
--link-color: #008dc0;
|
||||
--link-color-pale: #97e1fb;
|
||||
--link-hover: #00688e;
|
||||
}
|
||||
body {
|
||||
font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
:root {
|
||||
color: #19191C;
|
||||
background-color: #fff;
|
||||
}
|
||||
:root[theme="dark"] {
|
||||
background-color: #19191C;
|
||||
color: #FFFFFFCC
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
function calculateBodyHeight() {
|
||||
const body = document.body;
|
||||
const html = document.documentElement;
|
||||
return Math.max(
|
||||
body.scrollHeight,
|
||||
body.offsetHeight,
|
||||
html.scrollHeight,
|
||||
html.offsetHeight,
|
||||
html.clientHeight
|
||||
);
|
||||
}
|
||||
|
||||
function sendHeight() {
|
||||
const height = calculateBodyHeight();
|
||||
window.parent.postMessage({ type: 'iframeHeight', height }, '*');
|
||||
}
|
||||
|
||||
function repeatHeightCalculation(maxRetries = 10, interval = 100) {
|
||||
let retries = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
sendHeight();
|
||||
retries++;
|
||||
if (retries >= maxRetries) clearInterval(intervalId);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
repeatHeightCalculation();
|
||||
const observer = new MutationObserver(() => {
|
||||
setTimeout(sendHeight, 50);
|
||||
});
|
||||
observer.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener('resize', sendHeight);
|
||||
</script>
|
||||
</head>
|
||||
<body><p><code>columnGroupReference: </code><code><code>String</code></code><code> | </code><code><code>ColumnPath</code></code></p><p><code>colSelector: </code><code><code>ColumnSelector</code></code></p><p><code>colsSelector: </code><code><code>ColumnsSelector</code></code></p><p><code>column: </code><code><code>ColumnAccessor</code></code><code> | </code><code><code>String</code></code><code> | </code><code><code>ColumnPath</code></code></p><p><code>columnGroup: </code><code><code>SingleColumn</code></code><code><</code><code><code>DataRow</code></code><code><*>> | </code><code><code>String</code></code><code> | </code><code><code>ColumnPath</code></code></p><p><code>columnNoAccessor: </code><code><code>String</code></code><code> | </code><code><code>ColumnPath</code></code></p><p><code>columnOrSet: </code><code><code>column</code></code><code> | </code><code><code>columnSet</code></code></p><p><code>columnSet: </code><code><code>ColumnSet</code></code><code><*></code></p><p><code>columnsResolver: </code><code><code>ColumnsResolver</code></code></p><p><code>condition: </code><code><code>ColumnFilter</code></code></p><p><code>expression: </code><code>Column Expression</code></p><p><code>ignoreCase: </code><code><code>Boolean</code></code></p><p><code>index: </code><code><code>Int</code></code></p><p><code>indexRange: </code><code><code>IntRange</code></code></p><p><code>infer: </code><code><code>Infer</code></code></p><p><code>kind: </code><code><code>ColumnKind</code></code></p><p><code>kType: </code><code><code>KType</code></code></p><p><code>name: </code><code><code>String</code></code></p><p><code>number: </code><code><code>Int</code></code></p><p><code>regex: </code><code><code>Regex</code></code></p><p><code>singleColumn: </code><code><code>SingleColumn</code></code><code><</code><code><code>DataRow</code></code><code><*>></code></p><p><code>T: Column type</code></p><p><code>text: </code><code><code>String</code></code></p></body>
|
||||
<html/>
|
||||
+89
File diff suppressed because one or more lines are too long
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user