-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Deploying to gh-page from @ 8e83b7f 🚀
- Loading branch information
0 parents
commit bc92d86
Showing
5 changed files
with
21,233 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>squarified - Api</title><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta property="og:type" content="website"/><meta property="og:title" content="squarified"/><meta property="og:description" content="A simple and fast way to generate treemaps"/><style>html:not([data-theme=dark]) pre code.hljs{display:block;overflow-x:auto;padding:1em}html:not([data-theme=dark]) code.hljs{padding:3px 5px}html:not([data-theme=dark]) .hljs{color:#24292e;background:#fff}html:not([data-theme=dark]) .hljs-doctag,html:not([data-theme=dark]) .hljs-keyword,html:not([data-theme=dark]) .hljs-meta .hljs-keyword,html:not([data-theme=dark]) .hljs-template-tag,html:not([data-theme=dark]) .hljs-template-variable,html:not([data-theme=dark]) .hljs-type,html:not([data-theme=dark]) .hljs-variable.language_{color:#d73a49}html:not([data-theme=dark]) .hljs-title,html:not([data-theme=dark]) .hljs-title.class_,html:not([data-theme=dark]) .hljs-title.class_.inherited__,html:not([data-theme=dark]) .hljs-title.function_{color:#6f42c1}html:not([data-theme=dark]) .hljs-attr,html:not([data-theme=dark]) .hljs-attribute,html:not([data-theme=dark]) .hljs-literal,html:not([data-theme=dark]) .hljs-meta,html:not([data-theme=dark]) .hljs-number,html:not([data-theme=dark]) .hljs-operator,html:not([data-theme=dark]) .hljs-variable,html:not([data-theme=dark]) .hljs-selector-attr,html:not([data-theme=dark]) .hljs-selector-class,html:not([data-theme=dark]) .hljs-selector-id{color:#005cc5}html:not([data-theme=dark]) .hljs-regexp,html:not([data-theme=dark]) .hljs-string,html:not([data-theme=dark]) .hljs-meta .hljs-string{color:#032f62}html:not([data-theme=dark]) .hljs-built_in,html:not([data-theme=dark]) .hljs-symbol{color:#e36209}html:not([data-theme=dark]) .hljs-comment,html:not([data-theme=dark]) .hljs-code,html:not([data-theme=dark]) .hljs-formula{color:#6a737d}html:not([data-theme=dark]) .hljs-name,html:not([data-theme=dark]) .hljs-quote,html:not([data-theme=dark]) .hljs-selector-tag,html:not([data-theme=dark]) .hljs-selector-pseudo{color:#22863a}html:not([data-theme=dark]) .hljs-subst{color:#24292e}html:not([data-theme=dark]) .hljs-section{color:#005cc5;font-weight:700}html:not([data-theme=dark]) .hljs-bullet{color:#735c0f}html:not([data-theme=dark]) .hljs-emphasis{color:#24292e;font-style:italic}html:not([data-theme=dark]) .hljs-strong{color:#24292e;font-weight:700}html:not([data-theme=dark]) .hljs-addition{color:#22863a;background-color:#f0fff4}html:not([data-theme=dark]) .hljs-deletion{color:#b31d28;background-color:#ffeef0} | ||
| </style><style>html[data-theme=dark] pre code.hljs{display:block;overflow-x:auto;padding:1em}html[data-theme=dark] code.hljs{padding:3px 5px}html[data-theme=dark] .hljs{color:#c9d1d9;background:#0d1117}html[data-theme=dark] .hljs-doctag,html[data-theme=dark] .hljs-keyword,html[data-theme=dark] .hljs-meta .hljs-keyword,html[data-theme=dark] .hljs-template-tag,html[data-theme=dark] .hljs-template-variable,html[data-theme=dark] .hljs-type,html[data-theme=dark] .hljs-variable.language_{color:#ff7b72}html[data-theme=dark] .hljs-title,html[data-theme=dark] .hljs-title.class_,html[data-theme=dark] .hljs-title.class_.inherited__,html[data-theme=dark] .hljs-title.function_{color:#d2a8ff}html[data-theme=dark] .hljs-attr,html[data-theme=dark] .hljs-attribute,html[data-theme=dark] .hljs-literal,html[data-theme=dark] .hljs-meta,html[data-theme=dark] .hljs-number,html[data-theme=dark] .hljs-operator,html[data-theme=dark] .hljs-variable,html[data-theme=dark] .hljs-selector-attr,html[data-theme=dark] .hljs-selector-class,html[data-theme=dark] .hljs-selector-id{color:#79c0ff}html[data-theme=dark] .hljs-regexp,html[data-theme=dark] .hljs-string,html[data-theme=dark] .hljs-meta .hljs-string{color:#a5d6ff}html[data-theme=dark] .hljs-built_in,html[data-theme=dark] .hljs-symbol{color:#ffa657}html[data-theme=dark] .hljs-comment,html[data-theme=dark] .hljs-code,html[data-theme=dark] .hljs-formula{color:#8b949e}html[data-theme=dark] .hljs-name,html[data-theme=dark] .hljs-quote,html[data-theme=dark] .hljs-selector-tag,html[data-theme=dark] .hljs-selector-pseudo{color:#7ee787}html[data-theme=dark] .hljs-subst{color:#c9d1d9}html[data-theme=dark] .hljs-section{color:#1f6feb;font-weight:700}html[data-theme=dark] .hljs-bullet{color:#f2cc60}html[data-theme=dark] .hljs-emphasis{color:#c9d1d9;font-style:italic}html[data-theme=dark] .hljs-strong{color:#c9d1d9;font-weight:700}html[data-theme=dark] .hljs-addition{color:#aff5b4;background-color:#033a16}html[data-theme=dark] .hljs-deletion{color:#ffdcd7;background-color:#67060c} | ||
| </style><style>html:not([data-theme=dark]){--background-color: #fff;--foreground-color: #000;--accents_1: #fafafa;--theme_display_dark: none;--theme_display_light: block;--anchor-color: #000}:root{--font_sans: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font_mono: ui-monospace, "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace}html[data-theme=dark]{color-scheme:dark;--background-color: #000;--foreground-color: #ddd;--accents_1: #111;--theme_display_dark: block;--theme_display_light: none;--anchor-color: #ddd}body{font-size:16px;font-family:var(--font_sans);line-height:1.5}a{color:inherit}p,small{font-weight:400;color:inherit;letter-spacing:-.005625em}p{margin:1em 0;font-size:1em;line-height:1.625em}small{margin:0;font-size:.875em;line-height:1.5em}nav a{text-decoration:none}b,strong{color:var(--foreground-color);font-weight:600}ul,ol{padding:0;color:var(--foreground-color);margin:8px 8px 8px 16px;list-style-type:none}ol{list-style-type:decimal}li{margin-bottom:.625em;font-size:1em;line-height:1.625em}h1,h2,h3,h4,h5,h6{color:inherit;margin:0 0 .7rem}h1{font-size:3rem;letter-spacing:-.02em;line-height:1.5;font-weight:700}h2{font-size:2.25rem;letter-spacing:-.02em;font-weight:600}h3{font-size:1.5rem;letter-spacing:-.02em;font-weight:600}h4{font-size:1.25rem;letter-spacing:-.02em;font-weight:600}h5{font-size:1rem;letter-spacing:-.01em;font-weight:600}h6{font-size:.875rem;letter-spacing:-.005em;font-weight:600}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;margin:0}button:focus,input:focus,select:focus,textarea:focus{outline:none}code{font-family:var(--font-mono);font-size:.9em;white-space:pre-wrap}code:before,code:after{content:"`"}pre{padding:14px 16px;background-color:var(--accents_1);margin:16px 0;font-family:var(--font-mono);white-space:pre;line-height:1.5;text-align:left;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;font-size:14px}#menu-container{display:none;position:fixed;left:-20px;top:0;right:-20px;height:50px;padding:0 20px;z-index:2}#theme-light{display:var(--theme_display_light)}#theme-dark{display:var(--theme_display_dark)}.anchorlink{opacity:0;color:var(--anchor-color);font-size:.85em;float:left;text-decoration:none;margin-left:-1em;margin-top:.15em}.anchorlink:hover{opacity:1}@media screen and (min-width: 800px){body{position:relative;max-width:1000px;margin:0 auto;padding:50px 50px 500px 250px}main{position:relative;z-index:1}#menu{position:fixed;left:0;right:0;top:0;bottom:0;max-width:1300px;margin:0 auto;display:block}#menu>div{margin-top:20px;position:absolute;left:0;top:0;bottom:0;padding:50px 0 30px 30px}#menu #widget{display:inline-flex;width:100%;justify-content:center}#menu>div svg{height:24px;width:24px}#menu #widget>a:not(:first-child){margin-left:6px}#menu ul li{cursor:pointer}} | ||
| </style></head><body><aside><nav id="menu"><div><div id="widget"><a aria-label="View this project on GitHub" href="https://github.com/nonzzz/squarified"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"> | ||
| <path fill="currentColor" d="M208.31 75.68A59.78 59.78 0 0 0 202.93 28a8 8 | ||
| 0 0 0-6.93-4a59.75 59.75 0 0 0-48 24h-24a59.75 59.75 0 0 0-48-24a8 8 0 0 | ||
| 0-6.93 4a59.78 59.78 0 0 0-5.38 47.68A58.14 58.14 0 0 0 56 104v8a56.06 | ||
| 56.06 0 0 0 48.44 55.47A39.8 39.8 0 0 0 96 192v8H72a24 24 0 0 1-24-24a40 | ||
| 40 0 0 0-40-40a8 8 0 0 0 0 16a24 24 0 0 1 24 24a40 40 0 0 0 40 40h24v16a8 | ||
| 8 0 0 0 16 0v-40a24 24 0 0 1 48 0v40a8 8 0 0 0 16 0v-40a39.8 39.8 0 0 | ||
| 0-8.44-24.53A56.06 56.06 0 0 0 216 112v-8a58.14 58.14 0 0 0-7.69-28.32M200 | ||
| 112a40 40 0 0 1-40 40h-48a40 40 0 0 1-40-40v-8a41.74 41.74 0 0 1 | ||
| 6.9-22.48a8 8 0 0 0 1.1-7.69a43.8 43.8 0 0 1 .79-33.58a43.88 43.88 0 0 1 | ||
| 32.32 20.06a8 8 0 0 0 6.71 3.69h32.35a8 8 0 0 0 6.74-3.69a43.87 43.87 0 0 | ||
| 1 32.32-20.06a43.8 43.8 0 0 1 .77 33.58a8.09 8.09 0 0 0 1 7.65a41.7 41.7 | ||
| 0 0 1 7 22.52Z"/> | ||
| </svg></a><a href="javascript:void(0)" aria-label="Toggle theme" id="theme-toggle"><svg id="theme-light" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"> | ||
| <path fill="currentColor" d="M233.54 142.23a8 8 0 0 0-8-2a88.08 88.08 0 0 | ||
| 1-109.8-109.8a8 8 0 0 0-10-10a104.84 104.84 0 0 0-52.91 37A104 104 0 0 0 | ||
| 136 224a103.1 103.1 0 0 0 62.52-20.88a104.84 104.84 0 0 0 37-52.91a8 8 0 | ||
| 0 0-1.98-7.98m-44.64 48.11A88 88 0 0 1 65.66 67.11a89 89 0 0 1 | ||
| 31.4-26A106 106 0 0 0 96 56a104.11 104.11 0 0 0 104 104a106 106 0 0 0 | ||
| 14.92-1.06a89 89 0 0 1-26.02 31.4"/> | ||
| </svg><svg id="theme-dark" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"> | ||
| <path fill="currentColor" d="M120 40V16a8 8 0 0 1 16 0v24a8 8 0 0 1-16 0m72 | ||
| 88a64 64 0 1 1-64-64a64.07 64.07 0 0 1 64 64m-16 0a48 48 0 1 0-48 48a48.05 | ||
| 48.05 0 0 0 48-48M58.34 69.66a8 8 0 0 0 11.32-11.32l-16-16a8 8 0 0 | ||
| 0-11.32 11.32Zm0 116.68l-16 16a8 8 0 0 0 11.32 11.32l16-16a8 8 0 0 | ||
| 0-11.32-11.32M192 72a8 8 0 0 0 5.66-2.34l16-16a8 8 0 0 0-11.32-11.32l-16 | ||
| 16A8 8 0 0 0 192 72m5.66 114.34a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 | ||
| 11.32-11.32ZM48 128a8 8 0 0 0-8-8H16a8 8 0 0 0 0 16h24a8 8 0 0 0 | ||
| 8-8m80 80a8 8 0 0 0-8 8v24a8 8 0 0 0 16 0v-24a8 8 0 0 0-8-8m112-88h-24a8 | ||
| 8 0 0 0 0 16h24a8 8 0 0 0 0-16"/> | ||
| </svg></a></div><ul><li><strong>Getting Started</strong></li><li><a href="getting-started#install-squarified">Install squarified</a></li><li><a href="getting-started#the-first-application">The first application</a></li><li><strong>Api</strong></li><li><a href="api#draw-layout-api">Draw Layout Api</a></li><ul><li><a href="api#createtreemap">createTreemap</a></li></ul><li><a href="api#data-transform-api">Data Transform Api</a></li><ul><li><a href="api#c2m">c2m</a></li><li><a href="api#findrelativenode">findRelativeNode</a></li><li><a href="api#findrelativenodebyid">findRelativeNodeById</a></li><li><a href="api#flattenmodule">flattenModule</a></li><li><a href="api#getnodedepth">getNodeDepth</a></li><li><a href="api#sortchildrenbykey">sortChildrenByKey</a></li><li><a href="api#visit">visit</a></li></ul><li><strong><a href="example">Example</a></strong></li></ul></div></nav></aside><main><h1>Api</h1> | ||
| <p>All the methods and options of the squarified library are documented here.</p> | ||
| <h2 id="draw-layout-api"><a class="anchorlink" aria-hidden="true" href="#draw-layout-api">#</a>Draw Layout Api</h2> | ||
| <p>The draw layout API is the main API for the treemap. It provides methods to draw the treemap layout. | ||
| Now, the draw layout is opinionated and provides a minimalistic API to draw the treemap layout.</p> | ||
| <h3 id="createtreemap"><a class="anchorlink" aria-hidden="true" href="#createtreemap">#</a>createTreemap</h3> | ||
| <p>Create a new instance of the treemap. This method returns a new instance of the treemap.</p> | ||
| <pre class="language-js"><span class="hljs-keyword">import</span> { createTreemap } <span class="hljs-keyword">from</span> <span class="hljs-string">'squarified'</span> | ||
| <span class="hljs-keyword">const</span> treemap = <span class="hljs-title function_">createTreemap</span>()</pre> | ||
| <h2 id="data-transform-api"><a class="anchorlink" aria-hidden="true" href="#data-transform-api">#</a>Data Transform Api</h2> | ||
| <p>The data transform API provides methods to transform the data into a format that the treemap can understand.</p> | ||
| <h3 id="c2m"><a class="anchorlink" aria-hidden="true" href="#c2m">#</a>c2m</h3> | ||
| <p>Convert the original data into a format data that the treemap can understand. This method returns a new data format.</p> | ||
| <pre class="language-js"><span class="hljs-keyword">import</span> { c2m } <span class="hljs-keyword">from</span> <span class="hljs-string">'squarified'</span> | ||
| <span class="hljs-keyword">const</span> data = [{ <span class="hljs-attr">name</span>: <span class="hljs-string">'root'</span>, <span class="hljs-attr">value</span>: <span class="hljs-number">100</span> }, { <span class="hljs-attr">name</span>: <span class="hljs-string">'root2'</span>, <span class="hljs-attr">value</span>: <span class="hljs-number">50</span>}, { <span class="hljs-attr">name</span>: <span class="hljs-string">'root3'</span>, <span class="hljs-attr">value</span>: <span class="hljs-number">150</span> }] | ||
| <span class="hljs-keyword">const</span> transformedData = <span class="hljs-title function_">c2m</span>(data, <span class="hljs-string">'value'</span> , <span class="hljs-function">(<span class="hljs-params">d</span>) =></span> ({ ...d, <span class="hljs-attr">label</span>: d.<span class="hljs-property">name</span> }))</pre> | ||
| <h3 id="findrelativenode"><a class="anchorlink" aria-hidden="true" href="#findrelativenode">#</a>findRelativeNode</h3> | ||
| <p>Find the relative node of the given node. This method returns the relative node of the given node. Note: This function is based on the <code>visit</code> and respect the calculated coordinates.</p> | ||
| <h3 id="findrelativenodebyid"><a class="anchorlink" aria-hidden="true" href="#findrelativenodebyid">#</a>findRelativeNodeById</h3> | ||
| <p>Find the relative node of the given node by id. This method returns the relative node of the given node by id. Note: This function is based on the <code>visit</code>.</p> | ||
| <h3 id="flattenmodule"><a class="anchorlink" aria-hidden="true" href="#flattenmodule">#</a>flattenModule</h3> | ||
| <p>Flatten the module. This method returns the flattened module.</p> | ||
| <h3 id="getnodedepth"><a class="anchorlink" aria-hidden="true" href="#getnodedepth">#</a>getNodeDepth</h3> | ||
| <p>Get the depth of the node. This method returns the depth of the node.</p> | ||
| <h3 id="sortchildrenbykey"><a class="anchorlink" aria-hidden="true" href="#sortchildrenbykey">#</a>sortChildrenByKey</h3> | ||
| <p>Sort the children by key. This method returns the sorted children by key.</p> | ||
| <h3 id="visit"><a class="anchorlink" aria-hidden="true" href="#visit">#</a>visit</h3> | ||
| <p>Walk Nodes.</p></main></body><script>(()=>{const a=window.matchMedia("(prefers-color-scheme: dark)"),t=document.documentElement.dataset,o=document.querySelector("#theme-toggle"),n=a.matches||localStorage.getItem("theme")==="dark";o&&o.addEventListener("click",d);function c(e){localStorage.setItem("theme",e),t.theme=e,console.log("Theme set to ".concat(e),t)}function d(){const e=t.theme==="light"?"dark":"light";c(e)}c(n?"dark":"light")})(); | ||
| </script></html> |
Oops, something went wrong.