[{"data":1,"prerenderedAt":2263},["ShallowReactive",2],{"page-\u002Frender\u002Fguides\u002Fframeworks":3,"navigation":1882},{"collection":4,"page":5},"docs_en",{"id":6,"title":7,"body":8,"description":1874,"extension":1875,"meta":1876,"navigation":204,"path":1877,"rawbody":1878,"seo":1879,"stem":1880,"__hash__":1881},"docs_en\u002Frender\u002F2.guides\u002F7.frameworks.md","Using it in a framework",{"type":9,"value":10,"toc":1868},"minimark",[11,24,51,56,964,977,981,1811,1823,1827,1841,1845,1864],[12,13,14,15,19,20,23],"p",{},"The renderer is framework-free: it needs an ",[16,17,18],"code",{},"\u003Csvg>"," element in the page and a ",[16,21,22],{},"Well",". In a component framework the pattern is always the same:",[25,26,27,34,45,48],"ol",{},[28,29,30,31,33],"li",{},"Render an empty ",[16,32,18],{}," with a unique id.",[28,35,36,37,40,41,44],{},"After mount, import the package, create the renderer, call ",[16,38,39],{},"prepareSvg()"," and ",[16,42,43],{},"draw()",".",[28,46,47],{},"Redraw when the well changes; rebuild when the size or theme changes.",[28,49,50],{},"Never run it during server-side rendering.",[52,53,55],"h2",{"id":54},"vue-3","Vue 3",[57,58,64],"pre",{"className":59,"code":60,"filename":61,"language":62,"meta":63,"style":63},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport type { Well } from '@welldot\u002Fcore';\nimport type { WellRenderer } from '@welldot\u002Frender';\nimport { onMounted, ref, useId, watch } from 'vue';\n\nconst props = defineProps\u003C{ well: Well; height?: number }>();\n\nconst id = `well-${useId()}`;\nconst container = ref\u003CHTMLElement | null>(null);\nlet renderer: WellRenderer | null = null;\n\nasync function build() {\n  const { WellRenderer, INTERACTIVE_RENDER_CONFIG, applyRenderLocale } =\n    await import('@welldot\u002Frender');\n  const margins = { top: 24, right: 16, bottom: 20, left: 48 };\n  const width =\n    (container.value?.clientWidth ?? 400) - margins.left - margins.right;\n  renderer = new WellRenderer(\n    [{ selector: `#${id}`, width, height: props.height ?? 600, margins }],\n    {\n      locale: 'en',\n      renderConfig: {\n        ...applyRenderLocale(INTERACTIVE_RENDER_CONFIG, 'en'),\n        zoom: false,\n        pan: false,\n      },\n      onError: e => console.error(e),\n    },\n  );\n  await renderer.prepareSvg();\n  renderer.draw(props.well);\n}\n\nonMounted(build);\nwatch(\n  () => props.well,\n  well => renderer?.draw(well),\n  { deep: true },\n);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv ref=\"container\">\n    \u003Csvg :id=\"id\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","WellProfile.vue","vue","",[16,65,66,101,136,161,199,206,253,258,287,324,347,352,369,394,415,469,479,530,546,607,613,630,640,666,680,692,698,730,736,744,761,785,791,796,807,815,831,850,867,874,884,889,899,920,945,955],{"__ignoreMap":63},[67,68,71,75,79,83,86,89,92,96,98],"span",{"class":69,"line":70},"line",1,[67,72,74],{"class":73},"sMK4o","\u003C",[67,76,78],{"class":77},"swJcz","script",[67,80,82],{"class":81},"spNyl"," setup",[67,84,85],{"class":81}," lang",[67,87,88],{"class":73},"=",[67,90,91],{"class":73},"\"",[67,93,95],{"class":94},"sfazB","ts",[67,97,91],{"class":73},[67,99,100],{"class":73},">\n",[67,102,104,108,111,114,118,121,124,127,130,133],{"class":69,"line":103},2,[67,105,107],{"class":106},"s7zQu","import",[67,109,110],{"class":106}," type",[67,112,113],{"class":73}," {",[67,115,117],{"class":116},"sTEyZ"," Well",[67,119,120],{"class":73}," }",[67,122,123],{"class":106}," from",[67,125,126],{"class":73}," '",[67,128,129],{"class":94},"@welldot\u002Fcore",[67,131,132],{"class":73},"'",[67,134,135],{"class":73},";\n",[67,137,139,141,143,145,148,150,152,154,157,159],{"class":69,"line":138},3,[67,140,107],{"class":106},[67,142,110],{"class":106},[67,144,113],{"class":73},[67,146,147],{"class":116}," WellRenderer",[67,149,120],{"class":73},[67,151,123],{"class":106},[67,153,126],{"class":73},[67,155,156],{"class":94},"@welldot\u002Frender",[67,158,132],{"class":73},[67,160,135],{"class":73},[67,162,164,166,168,171,174,177,179,182,184,187,189,191,193,195,197],{"class":69,"line":163},4,[67,165,107],{"class":106},[67,167,113],{"class":73},[67,169,170],{"class":116}," onMounted",[67,172,173],{"class":73},",",[67,175,176],{"class":116}," ref",[67,178,173],{"class":73},[67,180,181],{"class":116}," useId",[67,183,173],{"class":73},[67,185,186],{"class":116}," watch",[67,188,120],{"class":73},[67,190,123],{"class":106},[67,192,126],{"class":73},[67,194,62],{"class":94},[67,196,132],{"class":73},[67,198,135],{"class":73},[67,200,202],{"class":69,"line":201},5,[67,203,205],{"emptyLinePlaceholder":204},true,"\n",[67,207,209,212,215,217,221,224,227,230,233,236,239,242,245,248,251],{"class":69,"line":208},6,[67,210,211],{"class":81},"const",[67,213,214],{"class":116}," props ",[67,216,88],{"class":73},[67,218,220],{"class":219},"s2Zo4"," defineProps",[67,222,223],{"class":73},"\u003C{",[67,225,226],{"class":77}," well",[67,228,229],{"class":73},":",[67,231,117],{"class":232},"sBMFI",[67,234,235],{"class":73},";",[67,237,238],{"class":77}," height",[67,240,241],{"class":73},"?:",[67,243,244],{"class":232}," number",[67,246,247],{"class":73}," }>",[67,249,250],{"class":116},"()",[67,252,135],{"class":73},[67,254,256],{"class":69,"line":255},7,[67,257,205],{"emptyLinePlaceholder":204},[67,259,261,263,266,268,271,274,277,280,282,285],{"class":69,"line":260},8,[67,262,211],{"class":81},[67,264,265],{"class":116}," id ",[67,267,88],{"class":73},[67,269,270],{"class":73}," `",[67,272,273],{"class":94},"well-",[67,275,276],{"class":73},"${",[67,278,279],{"class":219},"useId",[67,281,250],{"class":116},[67,283,284],{"class":73},"}`",[67,286,135],{"class":73},[67,288,290,292,295,297,299,301,304,307,310,313,316,319,322],{"class":69,"line":289},9,[67,291,211],{"class":81},[67,293,294],{"class":116}," container ",[67,296,88],{"class":73},[67,298,176],{"class":219},[67,300,74],{"class":73},[67,302,303],{"class":232},"HTMLElement",[67,305,306],{"class":73}," |",[67,308,309],{"class":232}," null",[67,311,312],{"class":73},">",[67,314,315],{"class":116},"(",[67,317,318],{"class":73},"null",[67,320,321],{"class":116},")",[67,323,135],{"class":73},[67,325,327,330,333,335,337,339,341,344],{"class":69,"line":326},10,[67,328,329],{"class":81},"let",[67,331,332],{"class":116}," renderer",[67,334,229],{"class":73},[67,336,147],{"class":232},[67,338,306],{"class":73},[67,340,309],{"class":232},[67,342,343],{"class":73}," =",[67,345,346],{"class":73}," null;\n",[67,348,350],{"class":69,"line":349},11,[67,351,205],{"emptyLinePlaceholder":204},[67,353,355,358,361,364,366],{"class":69,"line":354},12,[67,356,357],{"class":81},"async",[67,359,360],{"class":81}," function",[67,362,363],{"class":219}," build",[67,365,250],{"class":73},[67,367,368],{"class":73}," {\n",[67,370,372,375,377,379,381,384,386,389,391],{"class":69,"line":371},13,[67,373,374],{"class":81},"  const",[67,376,113],{"class":73},[67,378,147],{"class":116},[67,380,173],{"class":73},[67,382,383],{"class":116}," INTERACTIVE_RENDER_CONFIG",[67,385,173],{"class":73},[67,387,388],{"class":116}," applyRenderLocale",[67,390,120],{"class":73},[67,392,393],{"class":73}," =\n",[67,395,397,400,403,405,407,409,411,413],{"class":69,"line":396},14,[67,398,399],{"class":106},"    await",[67,401,402],{"class":73}," import",[67,404,315],{"class":77},[67,406,132],{"class":73},[67,408,156],{"class":94},[67,410,132],{"class":73},[67,412,321],{"class":77},[67,414,135],{"class":73},[67,416,418,420,423,425,427,430,432,436,438,441,443,446,448,451,453,456,458,461,463,466],{"class":69,"line":417},15,[67,419,374],{"class":81},[67,421,422],{"class":116}," margins",[67,424,343],{"class":73},[67,426,113],{"class":73},[67,428,429],{"class":77}," top",[67,431,229],{"class":73},[67,433,435],{"class":434},"sbssI"," 24",[67,437,173],{"class":73},[67,439,440],{"class":77}," right",[67,442,229],{"class":73},[67,444,445],{"class":434}," 16",[67,447,173],{"class":73},[67,449,450],{"class":77}," bottom",[67,452,229],{"class":73},[67,454,455],{"class":434}," 20",[67,457,173],{"class":73},[67,459,460],{"class":77}," left",[67,462,229],{"class":73},[67,464,465],{"class":434}," 48",[67,467,468],{"class":73}," };\n",[67,470,472,474,477],{"class":69,"line":471},16,[67,473,374],{"class":81},[67,475,476],{"class":116}," width",[67,478,393],{"class":73},[67,480,482,485,488,490,493,496,499,502,505,508,511,513,515,518,521,523,525,528],{"class":69,"line":481},17,[67,483,484],{"class":77},"    (",[67,486,487],{"class":116},"container",[67,489,44],{"class":73},[67,491,492],{"class":116},"value",[67,494,495],{"class":73},"?.",[67,497,498],{"class":116},"clientWidth",[67,500,501],{"class":73}," ??",[67,503,504],{"class":434}," 400",[67,506,507],{"class":77},") ",[67,509,510],{"class":73},"-",[67,512,422],{"class":116},[67,514,44],{"class":73},[67,516,517],{"class":116},"left",[67,519,520],{"class":73}," -",[67,522,422],{"class":116},[67,524,44],{"class":73},[67,526,527],{"class":116},"right",[67,529,135],{"class":73},[67,531,533,536,538,541,543],{"class":69,"line":532},18,[67,534,535],{"class":116},"  renderer",[67,537,343],{"class":73},[67,539,540],{"class":73}," new",[67,542,147],{"class":219},[67,544,545],{"class":77},"(\n",[67,547,549,552,555,558,560,562,565,567,570,572,574,576,578,580,582,585,587,590,592,595,597,599,601,604],{"class":69,"line":548},19,[67,550,551],{"class":77},"    [",[67,553,554],{"class":73},"{",[67,556,557],{"class":77}," selector",[67,559,229],{"class":73},[67,561,270],{"class":73},[67,563,564],{"class":94},"#",[67,566,276],{"class":73},[67,568,569],{"class":116},"id",[67,571,284],{"class":73},[67,573,173],{"class":73},[67,575,476],{"class":116},[67,577,173],{"class":73},[67,579,238],{"class":77},[67,581,229],{"class":73},[67,583,584],{"class":116}," props",[67,586,44],{"class":73},[67,588,589],{"class":116},"height",[67,591,501],{"class":73},[67,593,594],{"class":434}," 600",[67,596,173],{"class":73},[67,598,422],{"class":116},[67,600,120],{"class":73},[67,602,603],{"class":77},"]",[67,605,606],{"class":73},",\n",[67,608,610],{"class":69,"line":609},20,[67,611,612],{"class":73},"    {\n",[67,614,616,619,621,623,626,628],{"class":69,"line":615},21,[67,617,618],{"class":77},"      locale",[67,620,229],{"class":73},[67,622,126],{"class":73},[67,624,625],{"class":94},"en",[67,627,132],{"class":73},[67,629,606],{"class":73},[67,631,633,636,638],{"class":69,"line":632},22,[67,634,635],{"class":77},"      renderConfig",[67,637,229],{"class":73},[67,639,368],{"class":73},[67,641,643,646,649,651,654,656,658,660,662,664],{"class":69,"line":642},23,[67,644,645],{"class":73},"        ...",[67,647,648],{"class":219},"applyRenderLocale",[67,650,315],{"class":77},[67,652,653],{"class":116},"INTERACTIVE_RENDER_CONFIG",[67,655,173],{"class":73},[67,657,126],{"class":73},[67,659,625],{"class":94},[67,661,132],{"class":73},[67,663,321],{"class":77},[67,665,606],{"class":73},[67,667,669,672,674,678],{"class":69,"line":668},24,[67,670,671],{"class":77},"        zoom",[67,673,229],{"class":73},[67,675,677],{"class":676},"sfNiH"," false",[67,679,606],{"class":73},[67,681,683,686,688,690],{"class":69,"line":682},25,[67,684,685],{"class":77},"        pan",[67,687,229],{"class":73},[67,689,677],{"class":676},[67,691,606],{"class":73},[67,693,695],{"class":69,"line":694},26,[67,696,697],{"class":73},"      },\n",[67,699,701,704,706,710,713,716,718,721,723,726,728],{"class":69,"line":700},27,[67,702,703],{"class":219},"      onError",[67,705,229],{"class":73},[67,707,709],{"class":708},"sHdIc"," e",[67,711,712],{"class":81}," =>",[67,714,715],{"class":116}," console",[67,717,44],{"class":73},[67,719,720],{"class":219},"error",[67,722,315],{"class":77},[67,724,725],{"class":116},"e",[67,727,321],{"class":77},[67,729,606],{"class":73},[67,731,733],{"class":69,"line":732},28,[67,734,735],{"class":73},"    },\n",[67,737,739,742],{"class":69,"line":738},29,[67,740,741],{"class":77},"  )",[67,743,135],{"class":73},[67,745,747,750,752,754,757,759],{"class":69,"line":746},30,[67,748,749],{"class":106},"  await",[67,751,332],{"class":116},[67,753,44],{"class":73},[67,755,756],{"class":219},"prepareSvg",[67,758,250],{"class":77},[67,760,135],{"class":73},[67,762,764,766,768,771,773,776,778,781,783],{"class":69,"line":763},31,[67,765,535],{"class":116},[67,767,44],{"class":73},[67,769,770],{"class":219},"draw",[67,772,315],{"class":77},[67,774,775],{"class":116},"props",[67,777,44],{"class":73},[67,779,780],{"class":116},"well",[67,782,321],{"class":77},[67,784,135],{"class":73},[67,786,788],{"class":69,"line":787},32,[67,789,790],{"class":73},"}\n",[67,792,794],{"class":69,"line":793},33,[67,795,205],{"emptyLinePlaceholder":204},[67,797,799,802,805],{"class":69,"line":798},34,[67,800,801],{"class":219},"onMounted",[67,803,804],{"class":116},"(build)",[67,806,135],{"class":73},[67,808,810,813],{"class":69,"line":809},35,[67,811,812],{"class":219},"watch",[67,814,545],{"class":116},[67,816,818,821,823,825,827,829],{"class":69,"line":817},36,[67,819,820],{"class":73},"  ()",[67,822,712],{"class":81},[67,824,584],{"class":116},[67,826,44],{"class":73},[67,828,780],{"class":116},[67,830,606],{"class":73},[67,832,834,837,839,841,843,845,848],{"class":69,"line":833},37,[67,835,836],{"class":708},"  well",[67,838,712],{"class":81},[67,840,332],{"class":116},[67,842,495],{"class":73},[67,844,770],{"class":219},[67,846,847],{"class":116},"(well)",[67,849,606],{"class":73},[67,851,853,856,859,861,864],{"class":69,"line":852},38,[67,854,855],{"class":73},"  {",[67,857,858],{"class":77}," deep",[67,860,229],{"class":73},[67,862,863],{"class":676}," true",[67,865,866],{"class":73}," },\n",[67,868,870,872],{"class":69,"line":869},39,[67,871,321],{"class":116},[67,873,135],{"class":73},[67,875,877,880,882],{"class":69,"line":876},40,[67,878,879],{"class":73},"\u003C\u002F",[67,881,78],{"class":77},[67,883,100],{"class":73},[67,885,887],{"class":69,"line":886},41,[67,888,205],{"emptyLinePlaceholder":204},[67,890,892,894,897],{"class":69,"line":891},42,[67,893,74],{"class":73},[67,895,896],{"class":77},"template",[67,898,100],{"class":73},[67,900,902,905,908,910,912,914,916,918],{"class":69,"line":901},43,[67,903,904],{"class":73},"  \u003C",[67,906,907],{"class":77},"div",[67,909,176],{"class":81},[67,911,88],{"class":73},[67,913,91],{"class":73},[67,915,487],{"class":94},[67,917,91],{"class":73},[67,919,100],{"class":73},[67,921,923,926,929,932,934,936,938,940,943],{"class":69,"line":922},44,[67,924,925],{"class":73},"    \u003C",[67,927,928],{"class":77},"svg",[67,930,931],{"class":81}," :id",[67,933,88],{"class":73},[67,935,91],{"class":73},[67,937,569],{"class":94},[67,939,91],{"class":73},[67,941,942],{"class":116}," \u002F",[67,944,100],{"class":73},[67,946,948,951,953],{"class":69,"line":947},45,[67,949,950],{"class":73},"  \u003C\u002F",[67,952,907],{"class":77},[67,954,100],{"class":73},[67,956,958,960,962],{"class":69,"line":957},46,[67,959,879],{"class":73},[67,961,896],{"class":77},[67,963,100],{"class":73},[12,965,966,968,969,972,973,976],{},[16,967,801],{}," never runs on the server, so this component is safe in Nuxt as it is. The dynamic ",[16,970,971],{},"import()"," keeps D3 out of the server bundle. In Nuxt, wrapping it in ",[16,974,975],{},"\u003CClientOnly>"," also avoids a hydration warning for the empty SVG.",[52,978,980],{"id":979},"react","React",[57,982,987],{"className":983,"code":984,"filename":985,"language":986,"meta":63,"style":63},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import type { Well } from '@welldot\u002Fcore';\nimport type { WellRenderer } from '@welldot\u002Frender';\nimport { useEffect, useId, useRef } from 'react';\n\nexport function WellProfile({\n  well,\n  height = 600,\n}: {\n  well: Well;\n  height?: number;\n}) {\n  const id = `well-${useId().replace(\u002F:\u002Fg, '')}`;\n  const container = useRef\u003CHTMLDivElement>(null);\n  const renderer = useRef\u003CWellRenderer | null>(null);\n\n  useEffect(() => {\n    let cancelled = false;\n    (async () => {\n      const { WellRenderer, INTERACTIVE_RENDER_CONFIG, applyRenderLocale } =\n        await import('@welldot\u002Frender');\n      if (cancelled) return;\n      const margins = { top: 24, right: 16, bottom: 20, left: 48 };\n      const width =\n        (container.current?.clientWidth ?? 400) - margins.left - margins.right;\n      const r = new WellRenderer(\n        [{ selector: `#${id}`, width, height, margins }],\n        {\n          locale: 'en',\n          renderConfig: {\n            ...applyRenderLocale(INTERACTIVE_RENDER_CONFIG, 'en'),\n            zoom: false,\n            pan: false,\n          },\n        },\n      );\n      await r.prepareSvg();\n      renderer.current = r;\n      r.draw(well);\n    })();\n    return () => {\n      cancelled = true;\n      renderer.current?.clear();\n    };\n  }, [id, height]);\n\n  useEffect(() => {\n    renderer.current?.draw(well);\n  }, [well]);\n\n  return (\n    \u003Cdiv ref={container}>\n      \u003Csvg id={id} \u002F>\n    \u003C\u002Fdiv>\n  );\n}\n","WellProfile.tsx","tsx",[16,988,989,1011,1033,1063,1067,1080,1086,1097,1104,1114,1124,1131,1178,1204,1233,1237,1250,1264,1277,1298,1317,1335,1377,1385,1425,1440,1479,1484,1499,1508,1531,1542,1553,1558,1563,1570,1585,1600,1617,1627,1638,1649,1666,1671,1690,1694,1706,1728,1741,1746,1755,1772,1789,1799,1806],{"__ignoreMap":63},[67,990,991,993,995,997,999,1001,1003,1005,1007,1009],{"class":69,"line":70},[67,992,107],{"class":106},[67,994,110],{"class":106},[67,996,113],{"class":73},[67,998,117],{"class":116},[67,1000,120],{"class":73},[67,1002,123],{"class":106},[67,1004,126],{"class":73},[67,1006,129],{"class":94},[67,1008,132],{"class":73},[67,1010,135],{"class":73},[67,1012,1013,1015,1017,1019,1021,1023,1025,1027,1029,1031],{"class":69,"line":103},[67,1014,107],{"class":106},[67,1016,110],{"class":106},[67,1018,113],{"class":73},[67,1020,147],{"class":116},[67,1022,120],{"class":73},[67,1024,123],{"class":106},[67,1026,126],{"class":73},[67,1028,156],{"class":94},[67,1030,132],{"class":73},[67,1032,135],{"class":73},[67,1034,1035,1037,1039,1042,1044,1046,1048,1051,1053,1055,1057,1059,1061],{"class":69,"line":138},[67,1036,107],{"class":106},[67,1038,113],{"class":73},[67,1040,1041],{"class":116}," useEffect",[67,1043,173],{"class":73},[67,1045,181],{"class":116},[67,1047,173],{"class":73},[67,1049,1050],{"class":116}," useRef",[67,1052,120],{"class":73},[67,1054,123],{"class":106},[67,1056,126],{"class":73},[67,1058,979],{"class":94},[67,1060,132],{"class":73},[67,1062,135],{"class":73},[67,1064,1065],{"class":69,"line":163},[67,1066,205],{"emptyLinePlaceholder":204},[67,1068,1069,1072,1074,1077],{"class":69,"line":201},[67,1070,1071],{"class":106},"export",[67,1073,360],{"class":81},[67,1075,1076],{"class":219}," WellProfile",[67,1078,1079],{"class":73},"({\n",[67,1081,1082,1084],{"class":69,"line":208},[67,1083,836],{"class":708},[67,1085,606],{"class":73},[67,1087,1088,1091,1093,1095],{"class":69,"line":255},[67,1089,1090],{"class":708},"  height",[67,1092,343],{"class":73},[67,1094,594],{"class":434},[67,1096,606],{"class":73},[67,1098,1099,1102],{"class":69,"line":260},[67,1100,1101],{"class":73},"}:",[67,1103,368],{"class":73},[67,1105,1106,1108,1110,1112],{"class":69,"line":289},[67,1107,836],{"class":77},[67,1109,229],{"class":73},[67,1111,117],{"class":232},[67,1113,135],{"class":73},[67,1115,1116,1118,1120,1122],{"class":69,"line":326},[67,1117,1090],{"class":77},[67,1119,241],{"class":73},[67,1121,244],{"class":232},[67,1123,135],{"class":73},[67,1125,1126,1129],{"class":69,"line":349},[67,1127,1128],{"class":73},"})",[67,1130,368],{"class":73},[67,1132,1133,1135,1138,1140,1142,1144,1146,1148,1150,1152,1155,1157,1160,1162,1164,1167,1169,1172,1174,1176],{"class":69,"line":354},[67,1134,374],{"class":81},[67,1136,1137],{"class":116}," id",[67,1139,343],{"class":73},[67,1141,270],{"class":73},[67,1143,273],{"class":94},[67,1145,276],{"class":73},[67,1147,279],{"class":219},[67,1149,250],{"class":116},[67,1151,44],{"class":73},[67,1153,1154],{"class":219},"replace",[67,1156,315],{"class":116},[67,1158,1159],{"class":73},"\u002F",[67,1161,229],{"class":94},[67,1163,1159],{"class":73},[67,1165,1166],{"class":434},"g",[67,1168,173],{"class":73},[67,1170,1171],{"class":73}," ''",[67,1173,321],{"class":116},[67,1175,284],{"class":73},[67,1177,135],{"class":73},[67,1179,1180,1182,1185,1187,1189,1191,1194,1196,1198,1200,1202],{"class":69,"line":371},[67,1181,374],{"class":81},[67,1183,1184],{"class":116}," container",[67,1186,343],{"class":73},[67,1188,1050],{"class":219},[67,1190,74],{"class":73},[67,1192,1193],{"class":232},"HTMLDivElement",[67,1195,312],{"class":73},[67,1197,315],{"class":77},[67,1199,318],{"class":73},[67,1201,321],{"class":77},[67,1203,135],{"class":73},[67,1205,1206,1208,1210,1212,1214,1216,1219,1221,1223,1225,1227,1229,1231],{"class":69,"line":396},[67,1207,374],{"class":81},[67,1209,332],{"class":116},[67,1211,343],{"class":73},[67,1213,1050],{"class":219},[67,1215,74],{"class":73},[67,1217,1218],{"class":232},"WellRenderer",[67,1220,306],{"class":73},[67,1222,309],{"class":232},[67,1224,312],{"class":73},[67,1226,315],{"class":77},[67,1228,318],{"class":73},[67,1230,321],{"class":77},[67,1232,135],{"class":73},[67,1234,1235],{"class":69,"line":417},[67,1236,205],{"emptyLinePlaceholder":204},[67,1238,1239,1242,1244,1246,1248],{"class":69,"line":471},[67,1240,1241],{"class":219},"  useEffect",[67,1243,315],{"class":77},[67,1245,250],{"class":73},[67,1247,712],{"class":81},[67,1249,368],{"class":73},[67,1251,1252,1255,1258,1260,1262],{"class":69,"line":481},[67,1253,1254],{"class":81},"    let",[67,1256,1257],{"class":116}," cancelled",[67,1259,343],{"class":73},[67,1261,677],{"class":676},[67,1263,135],{"class":73},[67,1265,1266,1268,1270,1273,1275],{"class":69,"line":532},[67,1267,484],{"class":77},[67,1269,357],{"class":81},[67,1271,1272],{"class":73}," ()",[67,1274,712],{"class":81},[67,1276,368],{"class":73},[67,1278,1279,1282,1284,1286,1288,1290,1292,1294,1296],{"class":69,"line":548},[67,1280,1281],{"class":81},"      const",[67,1283,113],{"class":73},[67,1285,147],{"class":116},[67,1287,173],{"class":73},[67,1289,383],{"class":116},[67,1291,173],{"class":73},[67,1293,388],{"class":116},[67,1295,120],{"class":73},[67,1297,393],{"class":73},[67,1299,1300,1303,1305,1307,1309,1311,1313,1315],{"class":69,"line":609},[67,1301,1302],{"class":106},"        await",[67,1304,402],{"class":73},[67,1306,315],{"class":77},[67,1308,132],{"class":73},[67,1310,156],{"class":94},[67,1312,132],{"class":73},[67,1314,321],{"class":77},[67,1316,135],{"class":73},[67,1318,1319,1322,1325,1328,1330,1333],{"class":69,"line":615},[67,1320,1321],{"class":106},"      if",[67,1323,1324],{"class":77}," (",[67,1326,1327],{"class":116},"cancelled",[67,1329,507],{"class":77},[67,1331,1332],{"class":106},"return",[67,1334,135],{"class":73},[67,1336,1337,1339,1341,1343,1345,1347,1349,1351,1353,1355,1357,1359,1361,1363,1365,1367,1369,1371,1373,1375],{"class":69,"line":632},[67,1338,1281],{"class":81},[67,1340,422],{"class":116},[67,1342,343],{"class":73},[67,1344,113],{"class":73},[67,1346,429],{"class":77},[67,1348,229],{"class":73},[67,1350,435],{"class":434},[67,1352,173],{"class":73},[67,1354,440],{"class":77},[67,1356,229],{"class":73},[67,1358,445],{"class":434},[67,1360,173],{"class":73},[67,1362,450],{"class":77},[67,1364,229],{"class":73},[67,1366,455],{"class":434},[67,1368,173],{"class":73},[67,1370,460],{"class":77},[67,1372,229],{"class":73},[67,1374,465],{"class":434},[67,1376,468],{"class":73},[67,1378,1379,1381,1383],{"class":69,"line":642},[67,1380,1281],{"class":81},[67,1382,476],{"class":116},[67,1384,393],{"class":73},[67,1386,1387,1390,1392,1394,1397,1399,1401,1403,1405,1407,1409,1411,1413,1415,1417,1419,1421,1423],{"class":69,"line":668},[67,1388,1389],{"class":77},"        (",[67,1391,487],{"class":116},[67,1393,44],{"class":73},[67,1395,1396],{"class":116},"current",[67,1398,495],{"class":73},[67,1400,498],{"class":116},[67,1402,501],{"class":73},[67,1404,504],{"class":434},[67,1406,507],{"class":77},[67,1408,510],{"class":73},[67,1410,422],{"class":116},[67,1412,44],{"class":73},[67,1414,517],{"class":116},[67,1416,520],{"class":73},[67,1418,422],{"class":116},[67,1420,44],{"class":73},[67,1422,527],{"class":116},[67,1424,135],{"class":73},[67,1426,1427,1429,1432,1434,1436,1438],{"class":69,"line":682},[67,1428,1281],{"class":81},[67,1430,1431],{"class":116}," r",[67,1433,343],{"class":73},[67,1435,540],{"class":73},[67,1437,147],{"class":219},[67,1439,545],{"class":77},[67,1441,1442,1445,1447,1449,1451,1453,1455,1457,1459,1461,1463,1465,1467,1469,1471,1473,1475,1477],{"class":69,"line":694},[67,1443,1444],{"class":77},"        [",[67,1446,554],{"class":73},[67,1448,557],{"class":77},[67,1450,229],{"class":73},[67,1452,270],{"class":73},[67,1454,564],{"class":94},[67,1456,276],{"class":73},[67,1458,569],{"class":116},[67,1460,284],{"class":73},[67,1462,173],{"class":73},[67,1464,476],{"class":116},[67,1466,173],{"class":73},[67,1468,238],{"class":116},[67,1470,173],{"class":73},[67,1472,422],{"class":116},[67,1474,120],{"class":73},[67,1476,603],{"class":77},[67,1478,606],{"class":73},[67,1480,1481],{"class":69,"line":700},[67,1482,1483],{"class":73},"        {\n",[67,1485,1486,1489,1491,1493,1495,1497],{"class":69,"line":732},[67,1487,1488],{"class":77},"          locale",[67,1490,229],{"class":73},[67,1492,126],{"class":73},[67,1494,625],{"class":94},[67,1496,132],{"class":73},[67,1498,606],{"class":73},[67,1500,1501,1504,1506],{"class":69,"line":738},[67,1502,1503],{"class":77},"          renderConfig",[67,1505,229],{"class":73},[67,1507,368],{"class":73},[67,1509,1510,1513,1515,1517,1519,1521,1523,1525,1527,1529],{"class":69,"line":746},[67,1511,1512],{"class":73},"            ...",[67,1514,648],{"class":219},[67,1516,315],{"class":77},[67,1518,653],{"class":116},[67,1520,173],{"class":73},[67,1522,126],{"class":73},[67,1524,625],{"class":94},[67,1526,132],{"class":73},[67,1528,321],{"class":77},[67,1530,606],{"class":73},[67,1532,1533,1536,1538,1540],{"class":69,"line":763},[67,1534,1535],{"class":77},"            zoom",[67,1537,229],{"class":73},[67,1539,677],{"class":676},[67,1541,606],{"class":73},[67,1543,1544,1547,1549,1551],{"class":69,"line":787},[67,1545,1546],{"class":77},"            pan",[67,1548,229],{"class":73},[67,1550,677],{"class":676},[67,1552,606],{"class":73},[67,1554,1555],{"class":69,"line":793},[67,1556,1557],{"class":73},"          },\n",[67,1559,1560],{"class":69,"line":798},[67,1561,1562],{"class":73},"        },\n",[67,1564,1565,1568],{"class":69,"line":809},[67,1566,1567],{"class":77},"      )",[67,1569,135],{"class":73},[67,1571,1572,1575,1577,1579,1581,1583],{"class":69,"line":817},[67,1573,1574],{"class":106},"      await",[67,1576,1431],{"class":116},[67,1578,44],{"class":73},[67,1580,756],{"class":219},[67,1582,250],{"class":77},[67,1584,135],{"class":73},[67,1586,1587,1590,1592,1594,1596,1598],{"class":69,"line":833},[67,1588,1589],{"class":116},"      renderer",[67,1591,44],{"class":73},[67,1593,1396],{"class":116},[67,1595,343],{"class":73},[67,1597,1431],{"class":116},[67,1599,135],{"class":73},[67,1601,1602,1605,1607,1609,1611,1613,1615],{"class":69,"line":852},[67,1603,1604],{"class":116},"      r",[67,1606,44],{"class":73},[67,1608,770],{"class":219},[67,1610,315],{"class":77},[67,1612,780],{"class":116},[67,1614,321],{"class":77},[67,1616,135],{"class":73},[67,1618,1619,1622,1625],{"class":69,"line":869},[67,1620,1621],{"class":73},"    }",[67,1623,1624],{"class":77},")()",[67,1626,135],{"class":73},[67,1628,1629,1632,1634,1636],{"class":69,"line":876},[67,1630,1631],{"class":106},"    return",[67,1633,1272],{"class":73},[67,1635,712],{"class":81},[67,1637,368],{"class":73},[67,1639,1640,1643,1645,1647],{"class":69,"line":886},[67,1641,1642],{"class":116},"      cancelled",[67,1644,343],{"class":73},[67,1646,863],{"class":676},[67,1648,135],{"class":73},[67,1650,1651,1653,1655,1657,1659,1662,1664],{"class":69,"line":891},[67,1652,1589],{"class":116},[67,1654,44],{"class":73},[67,1656,1396],{"class":116},[67,1658,495],{"class":73},[67,1660,1661],{"class":219},"clear",[67,1663,250],{"class":77},[67,1665,135],{"class":73},[67,1667,1668],{"class":69,"line":901},[67,1669,1670],{"class":73},"    };\n",[67,1672,1673,1676,1679,1681,1683,1685,1688],{"class":69,"line":922},[67,1674,1675],{"class":73},"  },",[67,1677,1678],{"class":77}," [",[67,1680,569],{"class":116},[67,1682,173],{"class":73},[67,1684,238],{"class":116},[67,1686,1687],{"class":77},"])",[67,1689,135],{"class":73},[67,1691,1692],{"class":69,"line":947},[67,1693,205],{"emptyLinePlaceholder":204},[67,1695,1696,1698,1700,1702,1704],{"class":69,"line":957},[67,1697,1241],{"class":219},[67,1699,315],{"class":77},[67,1701,250],{"class":73},[67,1703,712],{"class":81},[67,1705,368],{"class":73},[67,1707,1709,1712,1714,1716,1718,1720,1722,1724,1726],{"class":69,"line":1708},47,[67,1710,1711],{"class":116},"    renderer",[67,1713,44],{"class":73},[67,1715,1396],{"class":116},[67,1717,495],{"class":73},[67,1719,770],{"class":219},[67,1721,315],{"class":77},[67,1723,780],{"class":116},[67,1725,321],{"class":77},[67,1727,135],{"class":73},[67,1729,1731,1733,1735,1737,1739],{"class":69,"line":1730},48,[67,1732,1675],{"class":73},[67,1734,1678],{"class":77},[67,1736,780],{"class":116},[67,1738,1687],{"class":77},[67,1740,135],{"class":73},[67,1742,1744],{"class":69,"line":1743},49,[67,1745,205],{"emptyLinePlaceholder":204},[67,1747,1749,1752],{"class":69,"line":1748},50,[67,1750,1751],{"class":106},"  return",[67,1753,1754],{"class":77}," (\n",[67,1756,1758,1760,1762,1764,1767,1769],{"class":69,"line":1757},51,[67,1759,925],{"class":73},[67,1761,907],{"class":77},[67,1763,176],{"class":81},[67,1765,1766],{"class":73},"={",[67,1768,487],{"class":116},[67,1770,1771],{"class":73},"}>\n",[67,1773,1775,1778,1780,1782,1784,1786],{"class":69,"line":1774},52,[67,1776,1777],{"class":73},"      \u003C",[67,1779,928],{"class":77},[67,1781,1137],{"class":81},[67,1783,1766],{"class":73},[67,1785,569],{"class":116},[67,1787,1788],{"class":73},"} \u002F>\n",[67,1790,1792,1795,1797],{"class":69,"line":1791},53,[67,1793,1794],{"class":73},"    \u003C\u002F",[67,1796,907],{"class":77},[67,1798,100],{"class":73},[67,1800,1802,1804],{"class":69,"line":1801},54,[67,1803,741],{"class":77},[67,1805,135],{"class":73},[67,1807,1809],{"class":69,"line":1808},55,[67,1810,790],{"class":73},[12,1812,1813,1814,1817,1818,1820,1821,44],{},"In Next.js, mark the file ",[16,1815,1816],{},"'use client'",". React's ",[16,1819,279],{}," returns ids with colons, which are not valid in a CSS selector, hence the ",[16,1822,1154],{},[52,1824,1826],{"id":1825},"resizing-and-themes","Resizing and themes",[12,1828,1829,1830,1835,1836,1838,1839,44],{},"The renderer draws at the size it was created with. To follow the container, observe it and rebuild after a short pause; to follow a dark mode switch, rebuild with the other theme (",[1831,1832,1834],"a",{"href":1833},"\u002Frender\u002Fguides\u002Ftheming#dark-mode","Theming","). Rebuilding is cheap: create the new renderer, ",[16,1837,39],{},", ",[16,1840,43],{},[52,1842,1844],{"id":1843},"validation-first","Validation first",[12,1846,1847,1848,1851,1852,1856,1857,1859,1860,1863],{},"Parse with ",[16,1849,1850],{},"parseWell"," before handing data to the renderer, and show the errors when it fails, as the ",[1831,1853,1855],{"href":1854},"\u002Fcontributing\u002Fcomponents","live previews"," on this site do. The renderer expects a valid ",[16,1858,22],{},"; it reports drawing problems through ",[16,1861,1862],{},"onError"," but does not validate.",[1865,1866,1867],"style",{},"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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}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);}",{"title":63,"searchDepth":103,"depth":103,"links":1869},[1870,1871,1872,1873],{"id":54,"depth":103,"text":55},{"id":979,"depth":103,"text":980},{"id":1825,"depth":103,"text":1826},{"id":1843,"depth":103,"text":1844},"Wrap WellRenderer in a Vue or React component that renders on the client only, redraws when the data changes, follows the container width and cleans up.","md",{},"\u002Frender\u002Fguides\u002Fframeworks","---\ntitle: Using it in a framework\ndescription: Wrap WellRenderer in a Vue or React component that renders on the client only, redraws when the data changes, follows the container width and cleans up.\n---\n\nThe renderer is framework-free: it needs an `\u003Csvg>` element in the page and a `Well`. In a component framework the pattern is always the same:\n\n1. Render an empty `\u003Csvg>` with a unique id.\n2. After mount, import the package, create the renderer, call `prepareSvg()` and `draw()`.\n3. Redraw when the well changes; rebuild when the size or theme changes.\n4. Never run it during server-side rendering.\n\n## Vue 3\n\n```vue [WellProfile.vue]\n\u003Cscript setup lang=\"ts\">\nimport type { Well } from '@welldot\u002Fcore';\nimport type { WellRenderer } from '@welldot\u002Frender';\nimport { onMounted, ref, useId, watch } from 'vue';\n\nconst props = defineProps\u003C{ well: Well; height?: number }>();\n\nconst id = `well-${useId()}`;\nconst container = ref\u003CHTMLElement | null>(null);\nlet renderer: WellRenderer | null = null;\n\nasync function build() {\n  const { WellRenderer, INTERACTIVE_RENDER_CONFIG, applyRenderLocale } =\n    await import('@welldot\u002Frender');\n  const margins = { top: 24, right: 16, bottom: 20, left: 48 };\n  const width =\n    (container.value?.clientWidth ?? 400) - margins.left - margins.right;\n  renderer = new WellRenderer(\n    [{ selector: `#${id}`, width, height: props.height ?? 600, margins }],\n    {\n      locale: 'en',\n      renderConfig: {\n        ...applyRenderLocale(INTERACTIVE_RENDER_CONFIG, 'en'),\n        zoom: false,\n        pan: false,\n      },\n      onError: e => console.error(e),\n    },\n  );\n  await renderer.prepareSvg();\n  renderer.draw(props.well);\n}\n\nonMounted(build);\nwatch(\n  () => props.well,\n  well => renderer?.draw(well),\n  { deep: true },\n);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv ref=\"container\">\n    \u003Csvg :id=\"id\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n```\n\n`onMounted` never runs on the server, so this component is safe in Nuxt as it is. The dynamic `import()` keeps D3 out of the server bundle. In Nuxt, wrapping it in `\u003CClientOnly>` also avoids a hydration warning for the empty SVG.\n\n## React\n\n```tsx [WellProfile.tsx]\nimport type { Well } from '@welldot\u002Fcore';\nimport type { WellRenderer } from '@welldot\u002Frender';\nimport { useEffect, useId, useRef } from 'react';\n\nexport function WellProfile({\n  well,\n  height = 600,\n}: {\n  well: Well;\n  height?: number;\n}) {\n  const id = `well-${useId().replace(\u002F:\u002Fg, '')}`;\n  const container = useRef\u003CHTMLDivElement>(null);\n  const renderer = useRef\u003CWellRenderer | null>(null);\n\n  useEffect(() => {\n    let cancelled = false;\n    (async () => {\n      const { WellRenderer, INTERACTIVE_RENDER_CONFIG, applyRenderLocale } =\n        await import('@welldot\u002Frender');\n      if (cancelled) return;\n      const margins = { top: 24, right: 16, bottom: 20, left: 48 };\n      const width =\n        (container.current?.clientWidth ?? 400) - margins.left - margins.right;\n      const r = new WellRenderer(\n        [{ selector: `#${id}`, width, height, margins }],\n        {\n          locale: 'en',\n          renderConfig: {\n            ...applyRenderLocale(INTERACTIVE_RENDER_CONFIG, 'en'),\n            zoom: false,\n            pan: false,\n          },\n        },\n      );\n      await r.prepareSvg();\n      renderer.current = r;\n      r.draw(well);\n    })();\n    return () => {\n      cancelled = true;\n      renderer.current?.clear();\n    };\n  }, [id, height]);\n\n  useEffect(() => {\n    renderer.current?.draw(well);\n  }, [well]);\n\n  return (\n    \u003Cdiv ref={container}>\n      \u003Csvg id={id} \u002F>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\nIn Next.js, mark the file `'use client'`. React's `useId` returns ids with colons, which are not valid in a CSS selector, hence the `replace`.\n\n## Resizing and themes\n\nThe renderer draws at the size it was created with. To follow the container, observe it and rebuild after a short pause; to follow a dark mode switch, rebuild with the other theme ([Theming](\u002Frender\u002Fguides\u002Ftheming#dark-mode)). Rebuilding is cheap: create the new renderer, `prepareSvg()`, `draw()`.\n\n## Validation first\n\nParse with `parseWell` before handing data to the renderer, and show the errors when it fails, as the [live previews](\u002Fcontributing\u002Fcomponents) on this site do. The renderer expects a valid `Well`; it reports drawing problems through `onError` but does not validate.\n",{"title":7,"description":1874},"render\u002F2.guides\u002F7.frameworks","e9OUjDfMW1shAQ2Qt0uyHf1vgC_Ly29pwrqioB3WRdI",{"docs_en":1883,"spec":2196,"changelogs":2246},[1884,1904,1922,1978,2088,2138],{"title":1885,"path":1886,"stem":1887,"children":1888},"Ai","\u002Fai","ai",[1889,1892,1896,1900],{"title":1890,"path":1886,"stem":1891},"Introduction","ai\u002Findex",{"title":1893,"path":1894,"stem":1895},"Converting reports with an assistant","\u002Fai\u002Fconversion-skill","ai\u002Fconversion-skill",{"title":1897,"path":1898,"stem":1899},"llms.txt and Markdown pages","\u002Fai\u002Fllms","ai\u002Fllms",{"title":1901,"path":1902,"stem":1903},"MCP server","\u002Fai\u002Fmcp","ai\u002Fmcp",{"title":1905,"path":1906,"stem":1907,"children":1908},"Contributing","\u002Fcontributing","contributing",[1909,1911,1915,1919],{"title":1890,"path":1906,"stem":1910},"contributing\u002Findex",{"title":1912,"path":1913,"stem":1914},"Writing docs","\u002Fcontributing\u002Fwriting-docs","contributing\u002F1.writing-docs",{"title":1916,"path":1917,"stem":1918},"Update rules","\u002Fcontributing\u002Fupdate-rules","contributing\u002F2.update-rules",{"title":1920,"path":1854,"stem":1921},"Content components","contributing\u002Fcomponents",{"title":1923,"path":1924,"stem":1925,"children":1926},"Core","\u002Fcore","core",[1927,1929,1943,1972],{"title":1890,"path":1924,"stem":1928},"core\u002Findex",{"title":1930,"path":1931,"stem":1932,"children":1933,"page":1942},"Getting Started","\u002Fcore\u002Fgetting-started","core\u002F1.getting-started",[1934,1938],{"title":1935,"path":1936,"stem":1937},"Installation","\u002Fcore\u002Fgetting-started\u002Finstallation","core\u002F1.getting-started\u002F1.installation",{"title":1939,"path":1940,"stem":1941},"First use","\u002Fcore\u002Fgetting-started\u002Ffirst-use","core\u002F1.getting-started\u002F2.first-use",false,{"title":1944,"path":1945,"stem":1946,"children":1947,"page":1942},"Guides","\u002Fcore\u002Fguides","core\u002F2.guides",[1948,1952,1956,1960,1964,1968],{"title":1949,"path":1950,"stem":1951},"Parsing and validating","\u002Fcore\u002Fguides\u002Fparsing-and-validating","core\u002F2.guides\u002F1.parsing-and-validating",{"title":1953,"path":1954,"stem":1955},"Serializing and sharing","\u002Fcore\u002Fguides\u002Fserializing-and-sharing","core\u002F2.guides\u002F2.serializing-and-sharing",{"title":1957,"path":1958,"stem":1959},"Unit conversion","\u002Fcore\u002Fguides\u002Funit-conversion","core\u002F2.guides\u002F3.unit-conversion",{"title":1961,"path":1962,"stem":1963},"Vocabularies and textures","\u002Fcore\u002Fguides\u002Fvocabularies-and-textures","core\u002F2.guides\u002F4.vocabularies-and-textures",{"title":1965,"path":1966,"stem":1967},"Water quality vocabulary","\u002Fcore\u002Fguides\u002Fwater-quality-vocabulary","core\u002F2.guides\u002F5.water-quality-vocabulary",{"title":1969,"path":1970,"stem":1971},"Versions and time zones","\u002Fcore\u002Fguides\u002Fversions-and-time-zones","core\u002F2.guides\u002F6.versions-and-time-zones",{"title":1973,"path":1974,"stem":1975,"children":1976},"API reference","\u002Fcore\u002Fapi","core\u002Fapi\u002Findex",[1977],{"title":1973,"path":1974,"stem":1975},{"title":1979,"path":1980,"stem":1981,"children":1982},"Format","\u002Fformat","format",[1983,1985,2005,2034,2058,2078,2084],{"title":1890,"path":1980,"stem":1984},"format\u002Findex",{"title":1930,"path":1986,"stem":1987,"children":1988,"page":1942},"\u002Fformat\u002Fgetting-started","format\u002F1.getting-started",[1989,1993,1997,2001],{"title":1990,"path":1991,"stem":1992},"What is .well?","\u002Fformat\u002Fgetting-started\u002Fwhat-is-well","format\u002F1.getting-started\u002F1.what-is-well",{"title":1994,"path":1995,"stem":1996},"For geologists","\u002Fformat\u002Fgetting-started\u002Ffor-geologists","format\u002F1.getting-started\u002F2.for-geologists",{"title":1998,"path":1999,"stem":2000},"For developers","\u002Fformat\u002Fgetting-started\u002Ffor-developers","format\u002F1.getting-started\u002F3.for-developers",{"title":2002,"path":2003,"stem":2004},"Your first .well file","\u002Fformat\u002Fgetting-started\u002Ffirst-well-file","format\u002F1.getting-started\u002F4.first-well-file",{"title":2006,"path":2007,"stem":2008,"children":2009,"page":1942},"Concepts","\u002Fformat\u002Fconcepts","format\u002F2.concepts",[2010,2014,2018,2022,2026,2030],{"title":2011,"path":2012,"stem":2013},"Depths and intervals","\u002Fformat\u002Fconcepts\u002Fdepths-and-intervals","format\u002F2.concepts\u002F1.depths-and-intervals",{"title":2015,"path":2016,"stem":2017},"Units and precision","\u002Fformat\u002Fconcepts\u002Funits-and-precision","format\u002F2.concepts\u002F2.units-and-precision",{"title":2019,"path":2020,"stem":2021},"Vocabularies","\u002Fformat\u002Fconcepts\u002Fvocabularies","format\u002F2.concepts\u002F3.vocabularies",{"title":2023,"path":2024,"stem":2025},"Profiles","\u002Fformat\u002Fconcepts\u002Fprofiles","format\u002F2.concepts\u002F4.profiles",{"title":2027,"path":2028,"stem":2029},"Versions and deprecation","\u002Fformat\u002Fconcepts\u002Fversions-and-deprecation","format\u002F2.concepts\u002F5.versions-and-deprecation",{"title":2031,"path":2032,"stem":2033},"Extensibility","\u002Fformat\u002Fconcepts\u002Fextensibility","format\u002F2.concepts\u002F6.extensibility",{"title":1944,"path":2035,"stem":2036,"children":2037,"page":1942},"\u002Fformat\u002Fguides","format\u002F3.guides",[2038,2042,2046,2050,2054],{"title":2039,"path":2040,"stem":2041},"Writing a .well by hand","\u002Fformat\u002Fguides\u002Fwriting-by-hand","format\u002F3.guides\u002F1.writing-by-hand",{"title":2043,"path":2044,"stem":2045},"Converting a report","\u002Fformat\u002Fguides\u002Fconverting-a-report","format\u002F3.guides\u002F2.converting-a-report",{"title":2047,"path":2048,"stem":2049},"Validating","\u002Fformat\u002Fguides\u002Fvalidating","format\u002F3.guides\u002F3.validating",{"title":2051,"path":2052,"stem":2053},"Extending for your own needs","\u002Fformat\u002Fguides\u002Fextending","format\u002F3.guides\u002F4.extending",{"title":2055,"path":2056,"stem":2057},"Building an editor or database on .well","\u002Fformat\u002Fguides\u002Fbuilding-on-well","format\u002F3.guides\u002F5.building-on-well",{"title":2059,"path":2060,"stem":2061,"children":2062},"Overview","\u002Fformat\u002Freference","format\u002F4.reference\u002Findex",[2063,2064,2068,2072],{"title":2059,"path":2060,"stem":2061},{"title":2065,"path":2066,"stem":2067},"JSON Schema","\u002Fformat\u002Freference\u002Fjson-schema","format\u002F4.reference\u002F1.json-schema",{"title":2069,"path":2070,"stem":2071},"Example wells","\u002Fformat\u002Freference\u002Fexamples","format\u002F4.reference\u002F2.examples",{"title":2073,"path":2074,"stem":2075,"children":2076},"Object reference","\u002Fformat\u002Freference\u002Fobjects","format\u002Freference\u002Fobjects\u002Findex",[2077],{"title":2073,"path":2074,"stem":2075},{"title":2079,"path":2080,"stem":2081,"children":2082},"About the spec","\u002Fformat\u002Fspec","format\u002F5.spec\u002Findex",[2083],{"title":2079,"path":2080,"stem":2081},{"title":2085,"path":2086,"stem":2087},"Changelog","\u002Fformat\u002Fchangelog","format\u002F6.changelog",{"title":2089,"path":2090,"stem":2091,"children":2092},"Render","\u002Frender","render",[2093,2095,2105,2133],{"title":1890,"path":2090,"stem":2094},"render\u002Findex",{"title":1930,"path":2096,"stem":2097,"children":2098,"page":1942},"\u002Frender\u002Fgetting-started","render\u002F1.getting-started",[2099,2102],{"title":1935,"path":2100,"stem":2101},"\u002Frender\u002Fgetting-started\u002Finstallation","render\u002F1.getting-started\u002F1.installation",{"title":1939,"path":2103,"stem":2104},"\u002Frender\u002Fgetting-started\u002Ffirst-use","render\u002F1.getting-started\u002F2.first-use",{"title":1944,"path":2106,"stem":2107,"children":2108,"page":1942},"\u002Frender\u002Fguides","render\u002F2.guides",[2109,2113,2117,2120,2124,2128,2132],{"title":2110,"path":2111,"stem":2112},"Panels and layout","\u002Frender\u002Fguides\u002Fpanels-and-layout","render\u002F2.guides\u002F1.panels-and-layout",{"title":2114,"path":2115,"stem":2116},"Layers and labels","\u002Frender\u002Fguides\u002Flayers-and-labels","render\u002F2.guides\u002F2.layers-and-labels",{"title":1834,"path":2118,"stem":2119},"\u002Frender\u002Fguides\u002Ftheming","render\u002F2.guides\u002F3.theming",{"title":2121,"path":2122,"stem":2123},"Locale and units","\u002Frender\u002Fguides\u002Flocale-and-units","render\u002F2.guides\u002F4.locale-and-units",{"title":2125,"path":2126,"stem":2127},"Legends","\u002Frender\u002Fguides\u002Flegends","render\u002F2.guides\u002F5.legends",{"title":2129,"path":2130,"stem":2131},"Zoom, pan and highlights","\u002Frender\u002Fguides\u002Finteraction","render\u002F2.guides\u002F6.interaction",{"title":7,"path":1877,"stem":1880},{"title":1973,"path":2134,"stem":2135,"children":2136},"\u002Frender\u002Fapi","render\u002Fapi\u002Findex",[2137],{"title":1973,"path":2134,"stem":2135},{"title":2139,"path":2140,"stem":2141,"children":2142},"Utils","\u002Futils","utils",[2143,2145,2155,2191],{"title":1890,"path":2140,"stem":2144},"utils\u002Findex",{"title":1930,"path":2146,"stem":2147,"children":2148,"page":1942},"\u002Futils\u002Fgetting-started","utils\u002F1.getting-started",[2149,2152],{"title":1935,"path":2150,"stem":2151},"\u002Futils\u002Fgetting-started\u002Finstallation","utils\u002F1.getting-started\u002F1.installation",{"title":1939,"path":2153,"stem":2154},"\u002Futils\u002Fgetting-started\u002Ffirst-use","utils\u002F1.getting-started\u002F2.first-use",{"title":1944,"path":2156,"stem":2157,"children":2158,"page":1942},"\u002Futils\u002Fguides","utils\u002F2.guides",[2159,2163,2167,2171,2175,2179,2183,2187],{"title":2160,"path":2161,"stem":2162},"Geometry and volumes","\u002Futils\u002Fguides\u002Fgeometry-and-volumes","utils\u002F2.guides\u002F1.geometry-and-volumes",{"title":2164,"path":2165,"stem":2166},"Water levels and pumping tests","\u002Futils\u002Fguides\u002Fpumping-tests","utils\u002F2.guides\u002F2.pumping-tests",{"title":2168,"path":2169,"stem":2170},"Permits","\u002Futils\u002Fguides\u002Fpermits","utils\u002F2.guides\u002F3.permits",{"title":2172,"path":2173,"stem":2174},"Operation and production","\u002Futils\u002Fguides\u002Foperation","utils\u002F2.guides\u002F4.operation",{"title":2176,"path":2177,"stem":2178},"Water quality","\u002Futils\u002Fguides\u002Fwater-quality","utils\u002F2.guides\u002F5.water-quality",{"title":2180,"path":2181,"stem":2182},"Logger import","\u002Futils\u002Fguides\u002Flogger-import","utils\u002F2.guides\u002F6.logger-import",{"title":2184,"path":2185,"stem":2186},"SIAGAS import","\u002Futils\u002Fguides\u002Fsiagas-import","utils\u002F2.guides\u002F7.siagas-import",{"title":2188,"path":2189,"stem":2190},"Formatting","\u002Futils\u002Fguides\u002Fformatting","utils\u002F2.guides\u002F8.formatting",{"title":1973,"path":2192,"stem":2193,"children":2194},"\u002Futils\u002Fapi","utils\u002Fapi\u002Findex",[2195],{"title":1973,"path":2192,"stem":2193},[2197],{"title":1979,"path":1980,"stem":1981,"children":2198,"page":1942},[2199],{"title":2200,"path":2080,"stem":2201,"children":2202,"page":1942},"Spec","format\u002Fspec",[2203,2212,2221],{"title":2204,"path":2205,"stem":2206,"children":2207,"page":1942},"Reference","\u002Fformat\u002Fspec\u002Freference","format\u002Fspec\u002Freference",[2208],{"title":2209,"path":2210,"stem":2211},"FGDC Texture Patterns Reference","\u002Fformat\u002Fspec\u002Freference\u002Ffgdc-textures","format\u002Fspec\u002Freference\u002Ffgdc-textures",{"title":2213,"path":2214,"stem":2215,"children":2216,"page":1942},"V1","\u002Fformat\u002Fspec\u002Fv1","format\u002Fspec\u002Fv1",[2217],{"title":2218,"path":2219,"stem":2220},".well File Format Specification","\u002Fformat\u002Fspec\u002Fv1\u002Fwell-format","format\u002Fspec\u002Fv1\u002Fwell-format",{"title":2222,"path":2223,"stem":2224,"children":2225,"page":1942},"V2","\u002Fformat\u002Fspec\u002Fv2","format\u002Fspec\u002Fv2",[2226,2230,2234,2238,2242],{"title":2227,"path":2228,"stem":2229},".well File Format Specification — Version 2.4: Format Reference","\u002Fformat\u002Fspec\u002Fv2\u002Fformat-reference","format\u002Fspec\u002Fv2\u002Fformat-reference",{"title":2231,"path":2232,"stem":2233},".well File Format Specification — Version 2.4: Interoperability","\u002Fformat\u002Fspec\u002Fv2\u002Finteroperability","format\u002Fspec\u002Fv2\u002Finteroperability",{"title":2235,"path":2236,"stem":2237},".well File Format Specification — Version 2.4: Object Schemas","\u002Fformat\u002Fspec\u002Fv2\u002Fobject-schemas","format\u002Fspec\u002Fv2\u002Fobject-schemas",{"title":2239,"path":2240,"stem":2241},".well File Format Specification — Version 2.4: Overview","\u002Fformat\u002Fspec\u002Fv2\u002Foverview","format\u002Fspec\u002Fv2\u002Foverview",{"title":2243,"path":2244,"stem":2245},".well File Format Specification — Version 2.4: Water Quality","\u002Fformat\u002Fspec\u002Fv2\u002Fwater-quality","format\u002Fspec\u002Fv2\u002Fwater-quality",[2247,2252,2257],{"title":1923,"path":1924,"stem":1925,"children":2248,"page":1942},[2249],{"title":129,"path":2250,"stem":2251},"\u002Fcore\u002Fchangelog","core\u002FCHANGELOG",{"title":2089,"path":2090,"stem":2091,"children":2253,"page":1942},[2254],{"title":156,"path":2255,"stem":2256},"\u002Frender\u002Fchangelog","render\u002FCHANGELOG",{"title":2139,"path":2140,"stem":2141,"children":2258,"page":1942},[2259],{"title":2260,"path":2261,"stem":2262},"@welldot\u002Futils","\u002Futils\u002Fchangelog","utils\u002FCHANGELOG",1793050494852]