[{"data":1,"prerenderedAt":1343},["ShallowReactive",2],{"page-\u002Frender\u002Fguides\u002Fpanels-and-layout":3,"navigation":960},{"collection":4,"page":5},"docs_en",{"id":6,"title":7,"body":8,"description":952,"extension":953,"meta":954,"navigation":298,"path":955,"rawbody":956,"seo":957,"stem":958,"__hash__":959},"docs_en\u002Frender\u002F2.guides\u002F1.panels-and-layout.md","Panels and layout",{"type":9,"value":10,"toc":944},"minimark",[11,28,205,216,221,228,232,239,441,444,448,459,629,651,655,675,791,795,798,893,910,914,940],[12,13,14,15,19,20,23,24,27],"p",{},"A ",[16,17,18],"code",{},"WellRenderer"," draws into one or more panels, each an ",[16,21,22],{},"\u003Csvg>"," element described by an ",[16,25,26],{},"SvgInstance",":",[29,30,35],"pre",{"className":31,"code":32,"language":33,"meta":34,"style":34},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","type SvgInstance = {\n  selector: string; \u002F\u002F CSS selector of the \u003Csvg>\n  width: number; \u002F\u002F drawing width in px, without margins\n  height: number; \u002F\u002F drawing height in px, without margins\n  margins: { top: number; right: number; bottom: number; left: number };\n  depthRange?: [number, number]; \u002F\u002F depth window in m\n  repeatedTo?: number; \u002F\u002F end of a band repeated from the previous panel, in m\n};\n","ts","",[16,36,37,57,76,92,107,155,184,199],{"__ignoreMap":34},[38,39,42,46,50,54],"span",{"class":40,"line":41},"line",1,[38,43,45],{"class":44},"spNyl","type",[38,47,49],{"class":48},"sBMFI"," SvgInstance",[38,51,53],{"class":52},"sMK4o"," =",[38,55,56],{"class":52}," {\n",[38,58,60,64,66,69,72],{"class":40,"line":59},2,[38,61,63],{"class":62},"swJcz","  selector",[38,65,27],{"class":52},[38,67,68],{"class":48}," string",[38,70,71],{"class":52},";",[38,73,75],{"class":74},"sHwdD"," \u002F\u002F CSS selector of the \u003Csvg>\n",[38,77,79,82,84,87,89],{"class":40,"line":78},3,[38,80,81],{"class":62},"  width",[38,83,27],{"class":52},[38,85,86],{"class":48}," number",[38,88,71],{"class":52},[38,90,91],{"class":74}," \u002F\u002F drawing width in px, without margins\n",[38,93,95,98,100,102,104],{"class":40,"line":94},4,[38,96,97],{"class":62},"  height",[38,99,27],{"class":52},[38,101,86],{"class":48},[38,103,71],{"class":52},[38,105,106],{"class":74}," \u002F\u002F drawing height in px, without margins\n",[38,108,110,113,115,118,121,123,125,127,130,132,134,136,139,141,143,145,148,150,152],{"class":40,"line":109},5,[38,111,112],{"class":62},"  margins",[38,114,27],{"class":52},[38,116,117],{"class":52}," {",[38,119,120],{"class":62}," top",[38,122,27],{"class":52},[38,124,86],{"class":48},[38,126,71],{"class":52},[38,128,129],{"class":62}," right",[38,131,27],{"class":52},[38,133,86],{"class":48},[38,135,71],{"class":52},[38,137,138],{"class":62}," bottom",[38,140,27],{"class":52},[38,142,86],{"class":48},[38,144,71],{"class":52},[38,146,147],{"class":62}," left",[38,149,27],{"class":52},[38,151,86],{"class":48},[38,153,154],{"class":52}," };\n",[38,156,158,161,164,168,171,174,176,179,181],{"class":40,"line":157},6,[38,159,160],{"class":62},"  depthRange",[38,162,163],{"class":52},"?:",[38,165,167],{"class":166},"sTEyZ"," [",[38,169,170],{"class":48},"number",[38,172,173],{"class":52},",",[38,175,86],{"class":48},[38,177,178],{"class":166},"]",[38,180,71],{"class":52},[38,182,183],{"class":74}," \u002F\u002F depth window in m\n",[38,185,187,190,192,194,196],{"class":40,"line":186},7,[38,188,189],{"class":62},"  repeatedTo",[38,191,163],{"class":52},[38,193,86],{"class":48},[38,195,71],{"class":52},[38,197,198],{"class":74}," \u002F\u002F end of a band repeated from the previous panel, in m\n",[38,200,202],{"class":40,"line":201},8,[38,203,204],{"class":52},"};\n",[12,206,207,208,211,212,215],{},"The SVG element is sized to ",[16,209,210],{},"width + left + right"," by ",[16,213,214],{},"height + top + bottom",". Keep about 40 to 50 px on the left for the depth scale.",[217,218,220],"h2",{"id":219},"one-panel","One panel",[12,222,223,224,227],{},"With one panel and no ",[16,225,226],{},"depthRange",", the whole well is drawn to fit the height. The depth scale is linear, so a 1561 m well and a 10 m well both fill the panel.",[217,229,231],{"id":230},"several-panels","Several panels",[12,233,234,235,238],{},"Long wells drawn in one panel lose detail. Give several panels and, by default, ",[16,236,237],{},"draw()"," splits the depth between them in proportion to their heights, back to back:",[29,240,242],{"className":31,"code":241,"language":33,"meta":34,"style":34},"const margins = { top: 24, right: 16, bottom: 20, left: 48 };\n\nnew WellRenderer([\n  { selector: '#part-1', width: 380, height: 700, margins },\n  { selector: '#part-2', width: 380, height: 700, margins },\n  { selector: '#part-3', width: 380, height: 700, margins },\n]);\n",[16,243,244,294,300,312,359,396,433],{"__ignoreMap":34},[38,245,246,249,252,255,257,259,261,265,267,269,271,274,276,278,280,283,285,287,289,292],{"class":40,"line":41},[38,247,248],{"class":44},"const",[38,250,251],{"class":166}," margins ",[38,253,254],{"class":52},"=",[38,256,117],{"class":52},[38,258,120],{"class":62},[38,260,27],{"class":52},[38,262,264],{"class":263},"sbssI"," 24",[38,266,173],{"class":52},[38,268,129],{"class":62},[38,270,27],{"class":52},[38,272,273],{"class":263}," 16",[38,275,173],{"class":52},[38,277,138],{"class":62},[38,279,27],{"class":52},[38,281,282],{"class":263}," 20",[38,284,173],{"class":52},[38,286,147],{"class":62},[38,288,27],{"class":52},[38,290,291],{"class":263}," 48",[38,293,154],{"class":52},[38,295,296],{"class":40,"line":59},[38,297,299],{"emptyLinePlaceholder":298},true,"\n",[38,301,302,305,309],{"class":40,"line":78},[38,303,304],{"class":52},"new",[38,306,308],{"class":307},"s2Zo4"," WellRenderer",[38,310,311],{"class":166},"([\n",[38,313,314,317,320,322,325,329,332,334,337,339,342,344,347,349,352,354,356],{"class":40,"line":94},[38,315,316],{"class":52},"  {",[38,318,319],{"class":62}," selector",[38,321,27],{"class":52},[38,323,324],{"class":52}," '",[38,326,328],{"class":327},"sfazB","#part-1",[38,330,331],{"class":52},"'",[38,333,173],{"class":52},[38,335,336],{"class":62}," width",[38,338,27],{"class":52},[38,340,341],{"class":263}," 380",[38,343,173],{"class":52},[38,345,346],{"class":62}," height",[38,348,27],{"class":52},[38,350,351],{"class":263}," 700",[38,353,173],{"class":52},[38,355,251],{"class":166},[38,357,358],{"class":52},"},\n",[38,360,361,363,365,367,369,372,374,376,378,380,382,384,386,388,390,392,394],{"class":40,"line":109},[38,362,316],{"class":52},[38,364,319],{"class":62},[38,366,27],{"class":52},[38,368,324],{"class":52},[38,370,371],{"class":327},"#part-2",[38,373,331],{"class":52},[38,375,173],{"class":52},[38,377,336],{"class":62},[38,379,27],{"class":52},[38,381,341],{"class":263},[38,383,173],{"class":52},[38,385,346],{"class":62},[38,387,27],{"class":52},[38,389,351],{"class":263},[38,391,173],{"class":52},[38,393,251],{"class":166},[38,395,358],{"class":52},[38,397,398,400,402,404,406,409,411,413,415,417,419,421,423,425,427,429,431],{"class":40,"line":157},[38,399,316],{"class":52},[38,401,319],{"class":62},[38,403,27],{"class":52},[38,405,324],{"class":52},[38,407,408],{"class":327},"#part-3",[38,410,331],{"class":52},[38,412,173],{"class":52},[38,414,336],{"class":62},[38,416,27],{"class":52},[38,418,341],{"class":263},[38,420,173],{"class":52},[38,422,346],{"class":62},[38,424,27],{"class":52},[38,426,351],{"class":263},[38,428,173],{"class":52},[38,430,251],{"class":166},[38,432,358],{"class":52},[38,434,435,438],{"class":40,"line":186},[38,436,437],{"class":166},"])",[38,439,440],{"class":52},";\n",[12,442,443],{},"Place the three SVGs side by side to read the well as columns, as on a printed profile.",[217,445,447],{"id":446},"choosing-depth-windows","Choosing depth windows",[12,449,450,451,455,456,458],{},"Give ",[452,453,454],"strong",{},"every"," panel a ",[16,457,226],{}," to choose the windows yourself. Panels may then overlap or skip depths:",[29,460,462],{"className":31,"code":461,"language":33,"meta":34,"style":34},"new WellRenderer([\n  { selector: '#p1', width: 480, height: 600, margins, depthRange: [0, 124] },\n  {\n    selector: '#p2',\n    width: 480,\n    height: 700,\n    margins,\n    depthRange: [116, 292],\n    repeatedTo: 124,\n  },\n]);\n",[16,463,464,472,532,537,554,565,576,583,604,616,622],{"__ignoreMap":34},[38,465,466,468,470],{"class":40,"line":41},[38,467,304],{"class":52},[38,469,308],{"class":307},[38,471,311],{"class":166},[38,473,474,476,478,480,482,485,487,489,491,493,496,498,500,502,505,507,510,512,515,517,519,522,524,527,530],{"class":40,"line":59},[38,475,316],{"class":52},[38,477,319],{"class":62},[38,479,27],{"class":52},[38,481,324],{"class":52},[38,483,484],{"class":327},"#p1",[38,486,331],{"class":52},[38,488,173],{"class":52},[38,490,336],{"class":62},[38,492,27],{"class":52},[38,494,495],{"class":263}," 480",[38,497,173],{"class":52},[38,499,346],{"class":62},[38,501,27],{"class":52},[38,503,504],{"class":263}," 600",[38,506,173],{"class":52},[38,508,509],{"class":166}," margins",[38,511,173],{"class":52},[38,513,514],{"class":62}," depthRange",[38,516,27],{"class":52},[38,518,167],{"class":166},[38,520,521],{"class":263},"0",[38,523,173],{"class":52},[38,525,526],{"class":263}," 124",[38,528,529],{"class":166},"] ",[38,531,358],{"class":52},[38,533,534],{"class":40,"line":78},[38,535,536],{"class":52},"  {\n",[38,538,539,542,544,546,549,551],{"class":40,"line":94},[38,540,541],{"class":62},"    selector",[38,543,27],{"class":52},[38,545,324],{"class":52},[38,547,548],{"class":327},"#p2",[38,550,331],{"class":52},[38,552,553],{"class":52},",\n",[38,555,556,559,561,563],{"class":40,"line":109},[38,557,558],{"class":62},"    width",[38,560,27],{"class":52},[38,562,495],{"class":263},[38,564,553],{"class":52},[38,566,567,570,572,574],{"class":40,"line":157},[38,568,569],{"class":62},"    height",[38,571,27],{"class":52},[38,573,351],{"class":263},[38,575,553],{"class":52},[38,577,578,581],{"class":40,"line":186},[38,579,580],{"class":166},"    margins",[38,582,553],{"class":52},[38,584,585,588,590,592,595,597,600,602],{"class":40,"line":201},[38,586,587],{"class":62},"    depthRange",[38,589,27],{"class":52},[38,591,167],{"class":166},[38,593,594],{"class":263},"116",[38,596,173],{"class":52},[38,598,599],{"class":263}," 292",[38,601,178],{"class":166},[38,603,553],{"class":52},[38,605,607,610,612,614],{"class":40,"line":606},9,[38,608,609],{"class":62},"    repeatedTo",[38,611,27],{"class":52},[38,613,526],{"class":263},[38,615,553],{"class":52},[38,617,619],{"class":40,"line":618},10,[38,620,621],{"class":52},"  },\n",[38,623,625,627],{"class":40,"line":624},11,[38,626,437],{"class":166},[38,628,440],{"class":52},[12,630,631,634,635,638,639,642,643,646,647,650],{},[16,632,633],{},"repeatedTo"," marks the band ",[16,636,637],{},"[116, 124]"," of the second panel as a repetition of the end of the first. It is hatched and labelled using ",[16,640,641],{},"renderConfig.overlap.label"," (",[16,644,645],{},"{range}"," becomes ",[16,648,649],{},"116–124 m","). This is how paged PDF output repeats a few meters at the top of each page.",[217,652,654],{"id":653},"stick-up-and-the-top-of-the-drawing","Stick-up and the top of the drawing",[12,656,657,658,661,662,667,668,671,672,674],{},"Depth zero is the ground surface. A casing, screen or surface case with a negative ",[16,659,660],{},"from"," sticks up above it (",[663,664,666],"a",{"href":665},"\u002Fformat\u002Fconcepts\u002Fdepths-and-intervals","depths and intervals","), and the renderer draws it to scale above the wellhead pad. The default split therefore starts at the highest stick-up, not at 0. ",[16,669,670],{},"getProfileTopDepth(well)"," returns that depth, so you can start your first ",[16,673,226],{}," there:",[29,676,678],{"className":31,"code":677,"language":33,"meta":34,"style":34},"import { getProfileTopDepth } from '@welldot\u002Frender';\n\nconst top = getProfileTopDepth(well); \u002F\u002F e.g. -0.5\nconst ranges: [number, number][] = [\n  [top, 120],\n  [120, 265],\n];\n",[16,679,680,706,710,729,754,768,785],{"__ignoreMap":34},[38,681,682,686,688,691,694,697,699,702,704],{"class":40,"line":41},[38,683,685],{"class":684},"s7zQu","import",[38,687,117],{"class":52},[38,689,690],{"class":166}," getProfileTopDepth",[38,692,693],{"class":52}," }",[38,695,696],{"class":684}," from",[38,698,324],{"class":52},[38,700,701],{"class":327},"@welldot\u002Frender",[38,703,331],{"class":52},[38,705,440],{"class":52},[38,707,708],{"class":40,"line":59},[38,709,299],{"emptyLinePlaceholder":298},[38,711,712,714,717,719,721,724,726],{"class":40,"line":78},[38,713,248],{"class":44},[38,715,716],{"class":166}," top ",[38,718,254],{"class":52},[38,720,690],{"class":307},[38,722,723],{"class":166},"(well)",[38,725,71],{"class":52},[38,727,728],{"class":74}," \u002F\u002F e.g. -0.5\n",[38,730,731,733,736,738,740,742,744,746,749,751],{"class":40,"line":94},[38,732,248],{"class":44},[38,734,735],{"class":166}," ranges",[38,737,27],{"class":52},[38,739,167],{"class":166},[38,741,170],{"class":48},[38,743,173],{"class":52},[38,745,86],{"class":48},[38,747,748],{"class":166},"][] ",[38,750,254],{"class":52},[38,752,753],{"class":166}," [\n",[38,755,756,759,761,764,766],{"class":40,"line":109},[38,757,758],{"class":166},"  [top",[38,760,173],{"class":52},[38,762,763],{"class":263}," 120",[38,765,178],{"class":166},[38,767,553],{"class":52},[38,769,770,773,776,778,781,783],{"class":40,"line":157},[38,771,772],{"class":166},"  [",[38,774,775],{"class":263},"120",[38,777,173],{"class":52},[38,779,780],{"class":263}," 265",[38,782,178],{"class":166},[38,784,553],{"class":52},[38,786,787,789],{"class":40,"line":186},[38,788,178],{"class":166},[38,790,440],{"class":52},[217,792,794],{"id":793},"responsive-width","Responsive width",[12,796,797],{},"The renderer does not observe its container. To follow the page width, create a new renderer when the container resizes (debounced), as the live previews on this site do:",[29,799,801],{"className":31,"code":800,"language":33,"meta":34,"style":34},"const observer = new ResizeObserver(() => {\n  clearTimeout(timer);\n  timer = setTimeout(redraw, 150);\n});\nobserver.observe(container);\n",[16,802,803,829,844,868,877],{"__ignoreMap":34},[38,804,805,807,810,812,815,818,821,824,827],{"class":40,"line":41},[38,806,248],{"class":44},[38,808,809],{"class":166}," observer ",[38,811,254],{"class":52},[38,813,814],{"class":52}," new",[38,816,817],{"class":307}," ResizeObserver",[38,819,820],{"class":166},"(",[38,822,823],{"class":52},"()",[38,825,826],{"class":44}," =>",[38,828,56],{"class":52},[38,830,831,834,836,839,842],{"class":40,"line":59},[38,832,833],{"class":307},"  clearTimeout",[38,835,820],{"class":62},[38,837,838],{"class":166},"timer",[38,840,841],{"class":62},")",[38,843,440],{"class":52},[38,845,846,849,851,854,856,859,861,864,866],{"class":40,"line":78},[38,847,848],{"class":166},"  timer",[38,850,53],{"class":52},[38,852,853],{"class":307}," setTimeout",[38,855,820],{"class":62},[38,857,858],{"class":166},"redraw",[38,860,173],{"class":52},[38,862,863],{"class":263}," 150",[38,865,841],{"class":62},[38,867,440],{"class":52},[38,869,870,873,875],{"class":40,"line":94},[38,871,872],{"class":52},"}",[38,874,841],{"class":166},[38,876,440],{"class":52},[38,878,879,882,885,888,891],{"class":40,"line":109},[38,880,881],{"class":166},"observer",[38,883,884],{"class":52},".",[38,886,887],{"class":307},"observe",[38,889,890],{"class":166},"(container)",[38,892,440],{"class":52},[12,894,895,896,898,899,901,902,905,906,909],{},"where ",[16,897,858],{}," builds a ",[16,900,18],{}," with the container's ",[16,903,904],{},"clientWidth"," minus the margins, calls ",[16,907,908],{},"prepareSvg()"," and draws.",[217,911,913],{"id":912},"column-proportions","Column proportions",[12,915,916,919,920,923,924,927,928,931,932,935,936,939],{},[16,917,918],{},"renderConfig.layout"," sets how much of the width the construction column takes (",[16,921,922],{},"pocoWidthRatio",") and where it sits (",[16,925,926],{},"pocoCenterRatio","); ",[16,929,930],{},"renderConfig.geologic"," sets the lithology column's insets. The two presets differ here: ",[16,933,934],{},"INTERACTIVE_RENDER_CONFIG"," is laid out for a screen, ",[16,937,938],{},"STATIC_RENDER_CONFIG"," leaves room on the right for description annotations, as in printed reports.",[941,942,943],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}",{"title":34,"searchDepth":59,"depth":59,"links":945},[946,947,948,949,950,951],{"id":219,"depth":59,"text":220},{"id":230,"depth":59,"text":231},{"id":446,"depth":59,"text":447},{"id":653,"depth":59,"text":654},{"id":793,"depth":59,"text":794},{"id":912,"depth":59,"text":913},"Size the drawing, split a long well over several panels, choose each panel's depth window, repeat bands between pages, and handle casing stick-up.","md",{},"\u002Frender\u002Fguides\u002Fpanels-and-layout","---\ntitle: Panels and layout\ndescription: Size the drawing, split a long well over several panels, choose each panel's depth window, repeat bands between pages, and handle casing stick-up.\n---\n\nA `WellRenderer` draws into one or more panels, each an `\u003Csvg>` element described by an `SvgInstance`:\n\n```ts\ntype SvgInstance = {\n  selector: string; \u002F\u002F CSS selector of the \u003Csvg>\n  width: number; \u002F\u002F drawing width in px, without margins\n  height: number; \u002F\u002F drawing height in px, without margins\n  margins: { top: number; right: number; bottom: number; left: number };\n  depthRange?: [number, number]; \u002F\u002F depth window in m\n  repeatedTo?: number; \u002F\u002F end of a band repeated from the previous panel, in m\n};\n```\n\nThe SVG element is sized to `width + left + right` by `height + top + bottom`. Keep about 40 to 50 px on the left for the depth scale.\n\n## One panel\n\nWith one panel and no `depthRange`, the whole well is drawn to fit the height. The depth scale is linear, so a 1561 m well and a 10 m well both fill the panel.\n\n## Several panels\n\nLong wells drawn in one panel lose detail. Give several panels and, by default, `draw()` splits the depth between them in proportion to their heights, back to back:\n\n```ts\nconst margins = { top: 24, right: 16, bottom: 20, left: 48 };\n\nnew WellRenderer([\n  { selector: '#part-1', width: 380, height: 700, margins },\n  { selector: '#part-2', width: 380, height: 700, margins },\n  { selector: '#part-3', width: 380, height: 700, margins },\n]);\n```\n\nPlace the three SVGs side by side to read the well as columns, as on a printed profile.\n\n## Choosing depth windows\n\nGive **every** panel a `depthRange` to choose the windows yourself. Panels may then overlap or skip depths:\n\n```ts\nnew WellRenderer([\n  { selector: '#p1', width: 480, height: 600, margins, depthRange: [0, 124] },\n  {\n    selector: '#p2',\n    width: 480,\n    height: 700,\n    margins,\n    depthRange: [116, 292],\n    repeatedTo: 124,\n  },\n]);\n```\n\n`repeatedTo` marks the band `[116, 124]` of the second panel as a repetition of the end of the first. It is hatched and labelled using `renderConfig.overlap.label` (`{range}` becomes `116–124 m`). This is how paged PDF output repeats a few meters at the top of each page.\n\n## Stick-up and the top of the drawing\n\nDepth zero is the ground surface. A casing, screen or surface case with a negative `from` sticks up above it ([depths and intervals](\u002Fformat\u002Fconcepts\u002Fdepths-and-intervals)), and the renderer draws it to scale above the wellhead pad. The default split therefore starts at the highest stick-up, not at 0. `getProfileTopDepth(well)` returns that depth, so you can start your first `depthRange` there:\n\n```ts\nimport { getProfileTopDepth } from '@welldot\u002Frender';\n\nconst top = getProfileTopDepth(well); \u002F\u002F e.g. -0.5\nconst ranges: [number, number][] = [\n  [top, 120],\n  [120, 265],\n];\n```\n\n## Responsive width\n\nThe renderer does not observe its container. To follow the page width, create a new renderer when the container resizes (debounced), as the live previews on this site do:\n\n```ts\nconst observer = new ResizeObserver(() => {\n  clearTimeout(timer);\n  timer = setTimeout(redraw, 150);\n});\nobserver.observe(container);\n```\n\nwhere `redraw` builds a `WellRenderer` with the container's `clientWidth` minus the margins, calls `prepareSvg()` and draws.\n\n## Column proportions\n\n`renderConfig.layout` sets how much of the width the construction column takes (`pocoWidthRatio`) and where it sits (`pocoCenterRatio`); `renderConfig.geologic` sets the lithology column's insets. The two presets differ here: `INTERACTIVE_RENDER_CONFIG` is laid out for a screen, `STATIC_RENDER_CONFIG` leaves room on the right for description annotations, as in printed reports.\n",{"title":7,"description":952},"render\u002F2.guides\u002F1.panels-and-layout","UlP7Cbna5DWWjqeOL2uXwumHQmakX_btjgYtokneb34",{"docs_en":961,"spec":1275,"changelogs":1325},[962,982,1001,1057,1166,1217],{"title":963,"path":964,"stem":965,"children":966},"Ai","\u002Fai","ai",[967,970,974,978],{"title":968,"path":964,"stem":969},"Introduction","ai\u002Findex",{"title":971,"path":972,"stem":973},"Converting reports with an assistant","\u002Fai\u002Fconversion-skill","ai\u002Fconversion-skill",{"title":975,"path":976,"stem":977},"llms.txt and Markdown pages","\u002Fai\u002Fllms","ai\u002Fllms",{"title":979,"path":980,"stem":981},"MCP server","\u002Fai\u002Fmcp","ai\u002Fmcp",{"title":983,"path":984,"stem":985,"children":986},"Contributing","\u002Fcontributing","contributing",[987,989,993,997],{"title":968,"path":984,"stem":988},"contributing\u002Findex",{"title":990,"path":991,"stem":992},"Writing docs","\u002Fcontributing\u002Fwriting-docs","contributing\u002F1.writing-docs",{"title":994,"path":995,"stem":996},"Update rules","\u002Fcontributing\u002Fupdate-rules","contributing\u002F2.update-rules",{"title":998,"path":999,"stem":1000},"Content components","\u002Fcontributing\u002Fcomponents","contributing\u002Fcomponents",{"title":1002,"path":1003,"stem":1004,"children":1005},"Core","\u002Fcore","core",[1006,1008,1022,1051],{"title":968,"path":1003,"stem":1007},"core\u002Findex",{"title":1009,"path":1010,"stem":1011,"children":1012,"page":1021},"Getting Started","\u002Fcore\u002Fgetting-started","core\u002F1.getting-started",[1013,1017],{"title":1014,"path":1015,"stem":1016},"Installation","\u002Fcore\u002Fgetting-started\u002Finstallation","core\u002F1.getting-started\u002F1.installation",{"title":1018,"path":1019,"stem":1020},"First use","\u002Fcore\u002Fgetting-started\u002Ffirst-use","core\u002F1.getting-started\u002F2.first-use",false,{"title":1023,"path":1024,"stem":1025,"children":1026,"page":1021},"Guides","\u002Fcore\u002Fguides","core\u002F2.guides",[1027,1031,1035,1039,1043,1047],{"title":1028,"path":1029,"stem":1030},"Parsing and validating","\u002Fcore\u002Fguides\u002Fparsing-and-validating","core\u002F2.guides\u002F1.parsing-and-validating",{"title":1032,"path":1033,"stem":1034},"Serializing and sharing","\u002Fcore\u002Fguides\u002Fserializing-and-sharing","core\u002F2.guides\u002F2.serializing-and-sharing",{"title":1036,"path":1037,"stem":1038},"Unit conversion","\u002Fcore\u002Fguides\u002Funit-conversion","core\u002F2.guides\u002F3.unit-conversion",{"title":1040,"path":1041,"stem":1042},"Vocabularies and textures","\u002Fcore\u002Fguides\u002Fvocabularies-and-textures","core\u002F2.guides\u002F4.vocabularies-and-textures",{"title":1044,"path":1045,"stem":1046},"Water quality vocabulary","\u002Fcore\u002Fguides\u002Fwater-quality-vocabulary","core\u002F2.guides\u002F5.water-quality-vocabulary",{"title":1048,"path":1049,"stem":1050},"Versions and time zones","\u002Fcore\u002Fguides\u002Fversions-and-time-zones","core\u002F2.guides\u002F6.versions-and-time-zones",{"title":1052,"path":1053,"stem":1054,"children":1055},"API reference","\u002Fcore\u002Fapi","core\u002Fapi\u002Findex",[1056],{"title":1052,"path":1053,"stem":1054},{"title":1058,"path":1059,"stem":1060,"children":1061},"Format","\u002Fformat","format",[1062,1064,1084,1112,1136,1156,1162],{"title":968,"path":1059,"stem":1063},"format\u002Findex",{"title":1009,"path":1065,"stem":1066,"children":1067,"page":1021},"\u002Fformat\u002Fgetting-started","format\u002F1.getting-started",[1068,1072,1076,1080],{"title":1069,"path":1070,"stem":1071},"What is .well?","\u002Fformat\u002Fgetting-started\u002Fwhat-is-well","format\u002F1.getting-started\u002F1.what-is-well",{"title":1073,"path":1074,"stem":1075},"For geologists","\u002Fformat\u002Fgetting-started\u002Ffor-geologists","format\u002F1.getting-started\u002F2.for-geologists",{"title":1077,"path":1078,"stem":1079},"For developers","\u002Fformat\u002Fgetting-started\u002Ffor-developers","format\u002F1.getting-started\u002F3.for-developers",{"title":1081,"path":1082,"stem":1083},"Your first .well file","\u002Fformat\u002Fgetting-started\u002Ffirst-well-file","format\u002F1.getting-started\u002F4.first-well-file",{"title":1085,"path":1086,"stem":1087,"children":1088,"page":1021},"Concepts","\u002Fformat\u002Fconcepts","format\u002F2.concepts",[1089,1092,1096,1100,1104,1108],{"title":1090,"path":665,"stem":1091},"Depths and intervals","format\u002F2.concepts\u002F1.depths-and-intervals",{"title":1093,"path":1094,"stem":1095},"Units and precision","\u002Fformat\u002Fconcepts\u002Funits-and-precision","format\u002F2.concepts\u002F2.units-and-precision",{"title":1097,"path":1098,"stem":1099},"Vocabularies","\u002Fformat\u002Fconcepts\u002Fvocabularies","format\u002F2.concepts\u002F3.vocabularies",{"title":1101,"path":1102,"stem":1103},"Profiles","\u002Fformat\u002Fconcepts\u002Fprofiles","format\u002F2.concepts\u002F4.profiles",{"title":1105,"path":1106,"stem":1107},"Versions and deprecation","\u002Fformat\u002Fconcepts\u002Fversions-and-deprecation","format\u002F2.concepts\u002F5.versions-and-deprecation",{"title":1109,"path":1110,"stem":1111},"Extensibility","\u002Fformat\u002Fconcepts\u002Fextensibility","format\u002F2.concepts\u002F6.extensibility",{"title":1023,"path":1113,"stem":1114,"children":1115,"page":1021},"\u002Fformat\u002Fguides","format\u002F3.guides",[1116,1120,1124,1128,1132],{"title":1117,"path":1118,"stem":1119},"Writing a .well by hand","\u002Fformat\u002Fguides\u002Fwriting-by-hand","format\u002F3.guides\u002F1.writing-by-hand",{"title":1121,"path":1122,"stem":1123},"Converting a report","\u002Fformat\u002Fguides\u002Fconverting-a-report","format\u002F3.guides\u002F2.converting-a-report",{"title":1125,"path":1126,"stem":1127},"Validating","\u002Fformat\u002Fguides\u002Fvalidating","format\u002F3.guides\u002F3.validating",{"title":1129,"path":1130,"stem":1131},"Extending for your own needs","\u002Fformat\u002Fguides\u002Fextending","format\u002F3.guides\u002F4.extending",{"title":1133,"path":1134,"stem":1135},"Building an editor or database on .well","\u002Fformat\u002Fguides\u002Fbuilding-on-well","format\u002F3.guides\u002F5.building-on-well",{"title":1137,"path":1138,"stem":1139,"children":1140},"Overview","\u002Fformat\u002Freference","format\u002F4.reference\u002Findex",[1141,1142,1146,1150],{"title":1137,"path":1138,"stem":1139},{"title":1143,"path":1144,"stem":1145},"JSON Schema","\u002Fformat\u002Freference\u002Fjson-schema","format\u002F4.reference\u002F1.json-schema",{"title":1147,"path":1148,"stem":1149},"Example wells","\u002Fformat\u002Freference\u002Fexamples","format\u002F4.reference\u002F2.examples",{"title":1151,"path":1152,"stem":1153,"children":1154},"Object reference","\u002Fformat\u002Freference\u002Fobjects","format\u002Freference\u002Fobjects\u002Findex",[1155],{"title":1151,"path":1152,"stem":1153},{"title":1157,"path":1158,"stem":1159,"children":1160},"About the spec","\u002Fformat\u002Fspec","format\u002F5.spec\u002Findex",[1161],{"title":1157,"path":1158,"stem":1159},{"title":1163,"path":1164,"stem":1165},"Changelog","\u002Fformat\u002Fchangelog","format\u002F6.changelog",{"title":1167,"path":1168,"stem":1169,"children":1170},"Render","\u002Frender","render",[1171,1173,1183,1212],{"title":968,"path":1168,"stem":1172},"render\u002Findex",{"title":1009,"path":1174,"stem":1175,"children":1176,"page":1021},"\u002Frender\u002Fgetting-started","render\u002F1.getting-started",[1177,1180],{"title":1014,"path":1178,"stem":1179},"\u002Frender\u002Fgetting-started\u002Finstallation","render\u002F1.getting-started\u002F1.installation",{"title":1018,"path":1181,"stem":1182},"\u002Frender\u002Fgetting-started\u002Ffirst-use","render\u002F1.getting-started\u002F2.first-use",{"title":1023,"path":1184,"stem":1185,"children":1186,"page":1021},"\u002Frender\u002Fguides","render\u002F2.guides",[1187,1188,1192,1196,1200,1204,1208],{"title":7,"path":955,"stem":958},{"title":1189,"path":1190,"stem":1191},"Layers and labels","\u002Frender\u002Fguides\u002Flayers-and-labels","render\u002F2.guides\u002F2.layers-and-labels",{"title":1193,"path":1194,"stem":1195},"Theming","\u002Frender\u002Fguides\u002Ftheming","render\u002F2.guides\u002F3.theming",{"title":1197,"path":1198,"stem":1199},"Locale and units","\u002Frender\u002Fguides\u002Flocale-and-units","render\u002F2.guides\u002F4.locale-and-units",{"title":1201,"path":1202,"stem":1203},"Legends","\u002Frender\u002Fguides\u002Flegends","render\u002F2.guides\u002F5.legends",{"title":1205,"path":1206,"stem":1207},"Zoom, pan and highlights","\u002Frender\u002Fguides\u002Finteraction","render\u002F2.guides\u002F6.interaction",{"title":1209,"path":1210,"stem":1211},"Using it in a framework","\u002Frender\u002Fguides\u002Fframeworks","render\u002F2.guides\u002F7.frameworks",{"title":1052,"path":1213,"stem":1214,"children":1215},"\u002Frender\u002Fapi","render\u002Fapi\u002Findex",[1216],{"title":1052,"path":1213,"stem":1214},{"title":1218,"path":1219,"stem":1220,"children":1221},"Utils","\u002Futils","utils",[1222,1224,1234,1270],{"title":968,"path":1219,"stem":1223},"utils\u002Findex",{"title":1009,"path":1225,"stem":1226,"children":1227,"page":1021},"\u002Futils\u002Fgetting-started","utils\u002F1.getting-started",[1228,1231],{"title":1014,"path":1229,"stem":1230},"\u002Futils\u002Fgetting-started\u002Finstallation","utils\u002F1.getting-started\u002F1.installation",{"title":1018,"path":1232,"stem":1233},"\u002Futils\u002Fgetting-started\u002Ffirst-use","utils\u002F1.getting-started\u002F2.first-use",{"title":1023,"path":1235,"stem":1236,"children":1237,"page":1021},"\u002Futils\u002Fguides","utils\u002F2.guides",[1238,1242,1246,1250,1254,1258,1262,1266],{"title":1239,"path":1240,"stem":1241},"Geometry and volumes","\u002Futils\u002Fguides\u002Fgeometry-and-volumes","utils\u002F2.guides\u002F1.geometry-and-volumes",{"title":1243,"path":1244,"stem":1245},"Water levels and pumping tests","\u002Futils\u002Fguides\u002Fpumping-tests","utils\u002F2.guides\u002F2.pumping-tests",{"title":1247,"path":1248,"stem":1249},"Permits","\u002Futils\u002Fguides\u002Fpermits","utils\u002F2.guides\u002F3.permits",{"title":1251,"path":1252,"stem":1253},"Operation and production","\u002Futils\u002Fguides\u002Foperation","utils\u002F2.guides\u002F4.operation",{"title":1255,"path":1256,"stem":1257},"Water quality","\u002Futils\u002Fguides\u002Fwater-quality","utils\u002F2.guides\u002F5.water-quality",{"title":1259,"path":1260,"stem":1261},"Logger import","\u002Futils\u002Fguides\u002Flogger-import","utils\u002F2.guides\u002F6.logger-import",{"title":1263,"path":1264,"stem":1265},"SIAGAS import","\u002Futils\u002Fguides\u002Fsiagas-import","utils\u002F2.guides\u002F7.siagas-import",{"title":1267,"path":1268,"stem":1269},"Formatting","\u002Futils\u002Fguides\u002Fformatting","utils\u002F2.guides\u002F8.formatting",{"title":1052,"path":1271,"stem":1272,"children":1273},"\u002Futils\u002Fapi","utils\u002Fapi\u002Findex",[1274],{"title":1052,"path":1271,"stem":1272},[1276],{"title":1058,"path":1059,"stem":1060,"children":1277,"page":1021},[1278],{"title":1279,"path":1158,"stem":1280,"children":1281,"page":1021},"Spec","format\u002Fspec",[1282,1291,1300],{"title":1283,"path":1284,"stem":1285,"children":1286,"page":1021},"Reference","\u002Fformat\u002Fspec\u002Freference","format\u002Fspec\u002Freference",[1287],{"title":1288,"path":1289,"stem":1290},"FGDC Texture Patterns Reference","\u002Fformat\u002Fspec\u002Freference\u002Ffgdc-textures","format\u002Fspec\u002Freference\u002Ffgdc-textures",{"title":1292,"path":1293,"stem":1294,"children":1295,"page":1021},"V1","\u002Fformat\u002Fspec\u002Fv1","format\u002Fspec\u002Fv1",[1296],{"title":1297,"path":1298,"stem":1299},".well File Format Specification","\u002Fformat\u002Fspec\u002Fv1\u002Fwell-format","format\u002Fspec\u002Fv1\u002Fwell-format",{"title":1301,"path":1302,"stem":1303,"children":1304,"page":1021},"V2","\u002Fformat\u002Fspec\u002Fv2","format\u002Fspec\u002Fv2",[1305,1309,1313,1317,1321],{"title":1306,"path":1307,"stem":1308},".well File Format Specification — Version 2.4: Format Reference","\u002Fformat\u002Fspec\u002Fv2\u002Fformat-reference","format\u002Fspec\u002Fv2\u002Fformat-reference",{"title":1310,"path":1311,"stem":1312},".well File Format Specification — Version 2.4: Interoperability","\u002Fformat\u002Fspec\u002Fv2\u002Finteroperability","format\u002Fspec\u002Fv2\u002Finteroperability",{"title":1314,"path":1315,"stem":1316},".well File Format Specification — Version 2.4: Object Schemas","\u002Fformat\u002Fspec\u002Fv2\u002Fobject-schemas","format\u002Fspec\u002Fv2\u002Fobject-schemas",{"title":1318,"path":1319,"stem":1320},".well File Format Specification — Version 2.4: Overview","\u002Fformat\u002Fspec\u002Fv2\u002Foverview","format\u002Fspec\u002Fv2\u002Foverview",{"title":1322,"path":1323,"stem":1324},".well File Format Specification — Version 2.4: Water Quality","\u002Fformat\u002Fspec\u002Fv2\u002Fwater-quality","format\u002Fspec\u002Fv2\u002Fwater-quality",[1326,1332,1337],{"title":1002,"path":1003,"stem":1004,"children":1327,"page":1021},[1328],{"title":1329,"path":1330,"stem":1331},"@welldot\u002Fcore","\u002Fcore\u002Fchangelog","core\u002FCHANGELOG",{"title":1167,"path":1168,"stem":1169,"children":1333,"page":1021},[1334],{"title":701,"path":1335,"stem":1336},"\u002Frender\u002Fchangelog","render\u002FCHANGELOG",{"title":1218,"path":1219,"stem":1220,"children":1338,"page":1021},[1339],{"title":1340,"path":1341,"stem":1342},"@welldot\u002Futils","\u002Futils\u002Fchangelog","utils\u002FCHANGELOG",1793050494664]