Skip to content

Commit

Permalink
Deploying to gh-page from @ 05c3363 🚀
Browse files Browse the repository at this point in the history
  • Loading branch information
@nonzzz
nonzzz committed Feb 17, 2025
0 parents commit 0101d5b
Show file tree
Hide file tree
Showing 5 changed files with 21,259 additions and 0 deletions.
59 changes: 59 additions & 0 deletions api.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<!DOCTYPE html><html lang="en" ><head ><meta char-set="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1" /><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 name="og:description" content="A simple, fast, and lightweight layout algorithm for nested rectangles." /><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;--menu-opacity: .25;--menu-bg: var(--accents_1)}: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;--menu-opacity: .65;--menu-bg: #222}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{position:fixed;left:0;right:0;top:0;bottom:0;max-width:1300px;transform:translate(-220px);transition:transform .25s;width:220px;box-sizing:border-box;background-color:var(--menu-bg);box-shadow:none;margin:0}#menu.open{box-shadow:none;padding:30px 0 0 30px;transform:translate(0);box-shadow:0 0 20px rgba(0,0,0,.5);box-sizing:border-box;z-index:4}#shadow{position:fixed;left:0;top:0;right:0;bottom:0;z-index:3;visibility:hidden;background-color:rgba(0,0,0,0);transition:visibility .25s,background-color .25s}#shadow.open{visibility:visible;background-color:rgba(0,0,0,.5)}#menu.open li{font-size:.875rem}#menu #widget svg{height:20px;width:20px}#menu #widget>a:not(:first-child){margin-left:6px}main{padding:60px 20px 0;box-sizing:border-box}#menu-container{display:block;position:fixed;left:-20px;top:0;right:-20px;height:50px;padding:0 20px;z-index:2;box-shadow:0 0 10px rgba(0,0,0,var(--menu-opacity));background-color:var(--menu-bg);color:var(--foreground-color)}#menu-container svg{height:50px;width:25px;padding-left:12px}#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}#menu #widget{display:inline-flex;width:100%;justify-content:center}@media screen and (min-width: 800px){body{position:relative;max-width:1000px;margin:0 auto;padding:50px 50px 500px 250px}main{padding:0;position:relative;z-index:1}#menu-container{display:none}#menu{transform:translate(0);margin:0 auto;width:initial;display:block;background-color:transparent}#menu>div{margin-top:20px;position:absolute;left:0;top:0;bottom:0;padding:50px 0 30px 30px}#menu>div svg{height:24px;width:24px}#menu ul li{cursor:pointer}}
</style></head><body ><div id="menu-container" ><a href="javascript:void(0)" id="menu-toggle" ><svg xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><path fill="#888888" d="M224 128a8 8 0 0 1-8 8H40a8 8 0 0 1 0-16h176a8 8 0 0 1 8 8M40
72h176a8 8 0 0 0 0-16H40a8 8 0 0 0 0 16m176 112H40a8 8 0 0 0 0 16h176a8 8 0 0 0 0-16" ></path></svg></a></div><div id="shadow" ></div><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" 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" ></path></svg></a><a href="javascript:void(0)" aria-label="Toggle theme" id="theme-toggle" ><svg xmlns="http://www.w3.org/2000/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" ></path></svg><svg xmlns="http://www.w3.org/2000/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" ></path></svg></a></div><ul ><li ><strong ><a href="./" >Home</a></strong></li><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><ul ><li ><a href="api#createtreemap" >createTreemap</a></li></ul></li><li ><a href="api#data-transform-api" >Data Transform Api</a><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><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="#${slug}" >#</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="#${slug}" >#</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">&#x27;squarified&#x27;</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="#${slug}" >#</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="#${slug}" >#</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">&#x27;squarified&#x27;</span>
<span class="hljs-keyword">const</span> data = [{ <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;root&#x27;</span>, <span class="hljs-attr">value</span>: <span class="hljs-number">100</span> }, { <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;root2&#x27;</span>, <span class="hljs-attr">value</span>: <span class="hljs-number">50</span>}, { <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;root3&#x27;</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">&#x27;value&#x27;</span> , <span class="hljs-function">(<span class="hljs-params">d</span>) =&gt;</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="#${slug}" >#</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="#${slug}" >#</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="#${slug}" >#</a>flattenModule</h3><p >Flatten the module. This method returns the flattened module.</p><h3 id="getnodedepth" ><a class="anchorlink" aria-hidden="true" href="#${slug}" >#</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="#${slug}" >#</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="#${slug}" >#</a>visit</h3><p >Walk Nodes.</p></main></body></html><script>
function useTheme() {
const darkMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
const doc = document.documentElement
const docDataset = doc.dataset
const preferredDark = darkMediaQuery.matches || localStorage.getItem('theme') === 'dark'

const updateTheme = function(theme) {
localStorage.setItem('theme', theme)
docDataset.theme = theme
}

const toggleTheme = function() {
const theme = docDataset.theme === 'light' ? 'dark' : 'light'
updateTheme(theme)
}

return { preferredDark, updateTheme, toggleTheme }
};
window.__MOUNTED_CALLBACKS__ = [{"f":"()=>{const{toggleTheme}=window.useTheme();const btn=document.querySelector(\"#theme-toggle\");btn.addEventListener(\"click\",toggleTheme)}"},{"f":"()=>{const{preferredDark,updateTheme}=window.useTheme();updateTheme(preferredDark?\"dark\":\"light\");const menuButton=document.querySelector(\"#menu-toggle\");const shadow=document.querySelector(\"#shadow\");const sideMenu=document.querySelector(\"#menu\");menuButton.addEventListener(\"click\",()=>{sideMenu.classList.toggle(\"open\");shadow.classList.toggle(\"open\")});shadow.addEventListener(\"click\",()=>{sideMenu.classList.toggle(\"open\");shadow.classList.toggle(\"open\")})}"}];
window.addEventListener('DOMContentLoaded', () => {
window.__MOUNTED_CALLBACKS__.forEach(({f}) => {
const fn = new Function('return (' + f + ')();');
fn();
});
});
</script>
Loading

0 comments on commit 0101d5b

Please sign in to comment.