WSoilColumnWithAnchors

以WSoilColumn繪製隨深度之土柱圖，並於地表上方與土柱右側依深度錨定指標區塊(marker)，地表指標區塊(depth<=0)靠右水平排列，地下指標區塊(depth>0)依深度定位於土柱右側並自動防重疊

土壤圖示為套件內建不依賴網路載入，可由optionsColumn.kpIcon給予自訂圖示物件

深度方向約定：組件內部一律往下為正(地表為0、地下大於0)，傳入之土層深度(keyDepthStart/keyDepthEnd)與指標深度(depth)皆須依此預先處理好正負號，刻度顯示符號另由tickDownPositive控制，僅影響刻度顯示文字不影響任何計算

指標區塊狀態位階：deactive > active > hover > normal，deactive為最高位階，不觸發hover樣式、不發出點擊事件且cursor為default

具名插槽(slot)：'layer-text'為土層右側描述文字區塊，提供作用域參數item，代表該土層物件，未給予時預設為空(關閉WSegmentsVertical之預設描述文字)；'layer-popup'為土層彈窗內容區塊，提供作用域參數item，代表該土層物件；'marker'為指標區塊內容，提供作用域參數item與state，分別代表該指標區塊物件與當前生效狀態，未給予時預設渲染text與subText

Props

Name Type Default value Required? Description
items Array [] No 輸入土層項目物件陣列，各項目至少含keyDepthStart與keyDepthEnd兩數字欄位(往下為正)，並以legendCode欄位(可由optionsColumn.keyLegendCode更改)對應土壤圖示，其餘欄位原樣供layer-popup插槽使用，預設[]
keyDepthStart String 'depthStart' No 輸入土層項目存放起始深度之欄位字串，預設'depthStart'
keyDepthEnd String 'depthEnd' No 輸入土層項目存放結束深度之欄位字串，預設'depthEnd'
width Number 191 No 輸入土柱繪圖寬度數字，單位px，組件根元素寬度為100%由外容器決定，預設191
height Number 504 No 輸入組件高度數字，單位px，預設504
groundY Number 90 No 輸入地表線y座標數字，其上方為地表指標區塊區，即土柱圖之上方內距，單位px，預設90
paddingBottom Number 22 No 輸入土柱圖下方內距數字，單位px，預設22
paddingLeft Number 60 No 輸入土柱圖左方內距數字，用以容納深度刻度文字，單位px，預設60
tickSize Number 25 No 輸入深度刻度尺寸(為單側寬度)數字，刻度文字位於刻度左側，故須大於等於segmentSize文字才不會與土柱重疊，單位px，預設25
segmentSize Number 20 No 輸入土柱區塊尺寸(為單側寬度)數字，單位px，預設20
depthMin Number null No 輸入深度軸最小值數字，給予null時自items自動計算，無items時為0，預設null
depthMax Number null No 輸入深度軸最大值數字，給予null時自items自動計算，無items時取地下指標最深處乘1.25，再無則為12，預設null
tickDownPositive Boolean true No 輸入深度刻度顯示符號布林值，true代表往下顯示為正(原值)，false代表往下顯示為負(深度0不加負號)，僅影響顯示不影響計算，預設true
tickDigits Number 1 No 輸入深度刻度文字取用小數點位數數字，預設1
funFormatTickValue function null No 輸入處理深度刻度值用以顯示函數，給予時取代內建格式化(tickDownPositive與tickDigits失效)，預設null
groundColor String '#7f7a6f' No 輸入地表線顏色字串，預設'#7f7a6f'
groundWidth Number 1.6 No 輸入地表線寬度數字，單位px，給予0時不顯示，預設1.6
layerWithPopup Boolean false No 輸入土層是否可點擊顯示popup彈窗布林值，彈窗內容由slot之layer-popup提供，預設false
layerCanClick Boolean false No 輸入土層是否可點擊布林值，可點擊時發出click-layer事件，預設false
optionsColumn Object {} No 輸入向下傳遞至WSoilColumn之設定物件，可用鍵值為keyText、keyLegendCode、mergeSameLayers、kpIcon、title，說明同WSoilColumn之props，其餘WSoilColumn之props已由組件顯式綁定不可覆蓋，預設{}
optionsSegments Object {} No 輸入經WSoilColumn向下傳遞至WSegmentsVertical之設定物件，鍵值同WSegmentsVertical之props(如tickColor、axisColor、segmentBackgroundType等)，內建預設與不可覆蓋項同WSoilColumn之optionsSegments，預設{}
markers Array [] No 輸入指標區塊物件陣列，各項目可用鍵值為key、depth、text、subText、state、title、style，外部變更狀態時傳入新陣列即可更新各區塊樣式，預設[]
markers.key String - No 輸入指標區塊識別字串，必填且不可重複，預設無
markers.depth Number - No 輸入指標深度數字，往下為正，小於等於0時為地表區塊，大於0時為地下區塊，預設無
markers.text String - No 輸入指標區塊主文字字串，預設無
markers.subText String - No 輸入指標區塊次文字字串，預設無
markers.state String 'normal' No 輸入指標區塊狀態字串，可選'normal'、'active'、'deactive'，預設'normal'
markers.title String - No 輸入指標區塊滑鼠懸停提示文字字串，預設無
markers.style Object - No 輸入指標區塊各狀態樣式覆寫物件，結構同markerStyle，優先於markerStyle，預設無
markerStyle Object {} No 輸入指標區塊預設樣式物件，可用鍵值為backgroundColor、borderColor、borderWidth、textColor、subTextColor、opacity(各為{normal,hover,active,deactive}物件)與textFontSize、subTextFontSize、textFontFamily、subTextFontFamily(字串)，未給予部分使用內建預設，預設{}
markerRight Number 11 No 輸入地表指標區塊列右緣內縮距離數字，單位px，預設11
markerGap Number 8 No 輸入地表指標區塊間距數字，單位px，預設8
markerMinSpacing Number 48 No 輸入地下指標區塊防重疊之最小垂直間距數字，單位px，預設48
surfaceClearance Number 25 No 輸入地下指標區塊與地表線之最小距離數字，單位px，預設25

Data

Name Type Default value Description
hoverKey String - 儲存當前滑鼠懸停之指標區塊key字串

Computed

Name Type Description
colRight Number 回傳土柱右緣x座標數字，為地表線起點與地下指標區塊定位基準，單位px
paddingStyle Object 回傳向下傳遞至WSoilColumn之內距物件
depthMinEff Number 回傳實際使用之深度軸最小值數字，顯式傳入WSoilColumn使土柱值域與指標區塊定位同源
depthMaxEff Number 回傳實際使用之深度軸最大值數字，顯式傳入WSoilColumn使土柱值域與指標區塊定位同源
markersSurf Array 回傳地表指標區塊(depth<=0)物件陣列
markersDeep Array 回傳地下指標區塊(depth>0)物件陣列，已依深度排序並計算防重疊後之y座標存於_y

Events

Name Payload Type Description
click-marker Object 當使用者點擊指標區塊時(state為deactive時不觸發)，回傳{ev,item}物件，item為該指標區塊物件
click-layer Object 當layerCanClick為true且使用者點擊土層時，回傳{ev,item}物件，item為該土層物件

Description:

  • 以WSoilColumn繪製隨深度之土柱圖，並於地表上方與土柱右側依深度錨定指標區塊(marker)，地表指標區塊(depth<=0)靠右水平排列，地下指標區塊(depth>0)依深度定位於土柱右側並自動防重疊

    土壤圖示為套件內建不依賴網路載入，可由optionsColumn.kpIcon給予自訂圖示物件

    深度方向約定：組件內部一律往下為正(地表為0、地下大於0)，傳入之土層深度(keyDepthStart/keyDepthEnd)與指標深度(depth)皆須依此預先處理好正負號，刻度顯示符號另由tickDownPositive控制，僅影響刻度顯示文字不影響任何計算

    指標區塊狀態位階：deactive > active > hover > normal，deactive為最高位階，不觸發hover樣式、不發出點擊事件且cursor為default

    具名插槽(slot)：'layer-text'為土層右側描述文字區塊，提供作用域參數item，代表該土層物件，未給予時預設為空(關閉WSegmentsVertical之預設描述文字)；'layer-popup'為土層彈窗內容區塊，提供作用域參數item，代表該土層物件；'marker'為指標區塊內容，提供作用域參數item與state，分別代表該指標區塊物件與當前生效狀態，未給予時預設渲染text與subText

Props

Name Type Default value Required? Description
items Array [] No 輸入土層項目物件陣列，各項目至少含keyDepthStart與keyDepthEnd兩數字欄位(往下為正)，並以legendCode欄位(可由optionsColumn.keyLegendCode更改)對應土壤圖示，其餘欄位原樣供layer-popup插槽使用，預設[]
keyDepthStart String 'depthStart' No 輸入土層項目存放起始深度之欄位字串，預設'depthStart'
keyDepthEnd String 'depthEnd' No 輸入土層項目存放結束深度之欄位字串，預設'depthEnd'
width Number 191 No 輸入土柱繪圖寬度數字，單位px，組件根元素寬度為100%由外容器決定，預設191
height Number 504 No 輸入組件高度數字，單位px，預設504
groundY Number 90 No 輸入地表線y座標數字，其上方為地表指標區塊區，即土柱圖之上方內距，單位px，預設90
paddingBottom Number 22 No 輸入土柱圖下方內距數字，單位px，預設22
paddingLeft Number 60 No 輸入土柱圖左方內距數字，用以容納深度刻度文字，單位px，預設60
tickSize Number 25 No 輸入深度刻度尺寸(為單側寬度)數字，刻度文字位於刻度左側，故須大於等於segmentSize文字才不會與土柱重疊，單位px，預設25
segmentSize Number 20 No 輸入土柱區塊尺寸(為單側寬度)數字，單位px，預設20
depthMin Number null No 輸入深度軸最小值數字，給予null時自items自動計算，無items時為0，預設null
depthMax Number null No 輸入深度軸最大值數字，給予null時自items自動計算，無items時取地下指標最深處乘1.25，再無則為12，預設null
tickDownPositive Boolean true No 輸入深度刻度顯示符號布林值，true代表往下顯示為正(原值)，false代表往下顯示為負(深度0不加負號)，僅影響顯示不影響計算，預設true
tickDigits Number 1 No 輸入深度刻度文字取用小數點位數數字，預設1
funFormatTickValue function null No 輸入處理深度刻度值用以顯示函數，給予時取代內建格式化(tickDownPositive與tickDigits失效)，預設null
groundColor String '#7f7a6f' No 輸入地表線顏色字串，預設'#7f7a6f'
groundWidth Number 1.6 No 輸入地表線寬度數字，單位px，給予0時不顯示，預設1.6
layerWithPopup Boolean false No 輸入土層是否可點擊顯示popup彈窗布林值，彈窗內容由slot之layer-popup提供，預設false
layerCanClick Boolean false No 輸入土層是否可點擊布林值，可點擊時發出click-layer事件，預設false
optionsColumn Object {} No 輸入向下傳遞至WSoilColumn之設定物件，可用鍵值為keyText、keyLegendCode、mergeSameLayers、kpIcon、title，說明同WSoilColumn之props，其餘WSoilColumn之props已由組件顯式綁定不可覆蓋，預設{}
optionsSegments Object {} No 輸入經WSoilColumn向下傳遞至WSegmentsVertical之設定物件，鍵值同WSegmentsVertical之props(如tickColor、axisColor、segmentBackgroundType等)，內建預設與不可覆蓋項同WSoilColumn之optionsSegments，預設{}
markers Array [] No 輸入指標區塊物件陣列，各項目可用鍵值為key、depth、text、subText、state、title、style，外部變更狀態時傳入新陣列即可更新各區塊樣式，預設[]
markers.key String - No 輸入指標區塊識別字串，必填且不可重複，預設無
markers.depth Number - No 輸入指標深度數字，往下為正，小於等於0時為地表區塊，大於0時為地下區塊，預設無
markers.text String - No 輸入指標區塊主文字字串，預設無
markers.subText String - No 輸入指標區塊次文字字串，預設無
markers.state String 'normal' No 輸入指標區塊狀態字串，可選'normal'、'active'、'deactive'，預設'normal'
markers.title String - No 輸入指標區塊滑鼠懸停提示文字字串，預設無
markers.style Object - No 輸入指標區塊各狀態樣式覆寫物件，結構同markerStyle，優先於markerStyle，預設無
markerStyle Object {} No 輸入指標區塊預設樣式物件，可用鍵值為backgroundColor、borderColor、borderWidth、textColor、subTextColor、opacity(各為{normal,hover,active,deactive}物件)與textFontSize、subTextFontSize、textFontFamily、subTextFontFamily(字串)，未給予部分使用內建預設，預設{}
markerRight Number 11 No 輸入地表指標區塊列右緣內縮距離數字，單位px，預設11
markerGap Number 8 No 輸入地表指標區塊間距數字，單位px，預設8
markerMinSpacing Number 48 No 輸入地下指標區塊防重疊之最小垂直間距數字，單位px，預設48
surfaceClearance Number 25 No 輸入地下指標區塊與地表線之最小距離數字，單位px，預設25

Data

Name Type Default value Description
hoverKey String - 儲存當前滑鼠懸停之指標區塊key字串

Computed

Name Type Description
colRight Number 回傳土柱右緣x座標數字，為地表線起點與地下指標區塊定位基準，單位px
paddingStyle Object 回傳向下傳遞至WSoilColumn之內距物件
depthMinEff Number 回傳實際使用之深度軸最小值數字，顯式傳入WSoilColumn使土柱值域與指標區塊定位同源
depthMaxEff Number 回傳實際使用之深度軸最大值數字，顯式傳入WSoilColumn使土柱值域與指標區塊定位同源
markersSurf Array 回傳地表指標區塊(depth<=0)物件陣列
markersDeep Array 回傳地下指標區塊(depth>0)物件陣列，已依深度排序並計算防重疊後之y座標存於_y

Events

Name Payload Type Description
click-marker Object 當使用者點擊指標區塊時(state為deactive時不觸發)，回傳{ev,item}物件，item為該指標區塊物件
click-layer Object 當layerCanClick為true且使用者點擊土層時，回傳{ev,item}物件，item為該土層物件