WSoilColumn

以WSegmentsVertical繪製隨深度之土柱圖，各土層依土壤圖例代碼(legendCode)顯示對應土壤圖示，為WSoilColumnWithAnchors與WSptLiqPlotDepths共用之土柱圖核心

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

土壤圖示內建於套件(src/js/getSoilCodeIcon.mjs，取自w-demores)，不依賴網路載入，可支援無連外網路之環境；若需自訂圖示可由kpIcon給予

具名插槽(slot)：'text'為土層右側描述文字區塊，提供作用域參數item與index，未給予時使用WSegmentsVertical之預設文字區(三角+keyText文字)；'popup'為土層彈窗內容區塊，提供作用域參數item與index；'support-left'與'support-right'為繪圖區左右側之附加內容區塊，提供作用域參數convertValueToY，為深度轉繪圖區y座標之函數，供外部定位水位等標記

Props

Name Type Default value Required? Description
items Array [] No 輸入土層項目物件陣列，各項目至少含keyDepthStart與keyDepthEnd兩數字欄位(往下為正)，並以keyLegendCode欄位對應土壤圖示，其餘欄位原樣供popup插槽使用，預設[]
keyDepthStart String 'depthStart' No 輸入土層項目存放起始深度之欄位字串，預設'depthStart'
keyDepthEnd String 'depthEnd' No 輸入土層項目存放結束深度之欄位字串，預設'depthEnd'
keyText String 'description' No 輸入土層項目存放說明文字之欄位字串，預設'description'
keyLegendCode String 'legendCode' No 輸入土層項目存放土壤圖例代碼之欄位字串，供對應土壤圖示，預設'legendCode'
mergeSameLayers Boolean false No 輸入是否合併相鄰且圖例代碼與說明文字皆相同土層布林值，預設false
kpIcon Object null No 輸入土壤圖例代碼對應土壤圖示物件，key為圖例代碼字串，值為圖片data URI或網址字串，給予null時使用內建之getSoilCodeIcon，預設null
width Number 191 No 輸入土柱繪圖寬度數字，單位px，預設191
height Number 504 No 輸入土柱繪圖高度數字，單位px，預設504
paddingStyle Object {top:10,right:0,bottom:10,left:60} No 輸入內距物件，可用鍵值為top、right、bottom、left，各為數字，單位px，left須容納深度刻度文字，預設{top:10,right:0,bottom:10,left:60}
depthMin Number null No 輸入深度軸最小值數字，給予null時自items自動計算，無items時為0，預設null
depthMax Number null No 輸入深度軸最大值數字，給予null時自items自動計算，無items時為12，預設null
title String '' No 輸入深度軸標題字串，給予空字串時不顯示，預設''
tickSize Number 25 No 輸入深度刻度尺寸(為單側寬度)數字，刻度文字位於刻度左側，故須大於等於segmentSize文字才不會與土柱重疊，單位px，預設25
segmentSize Number 20 No 輸入土柱區塊尺寸(為單側寬度)數字，單位px，預設20
tickDownPositive Boolean true No 輸入深度刻度顯示符號布林值，true代表往下顯示為正(原值)，false代表往下顯示為負(深度0不加負號)，僅影響顯示不影響計算，預設true
tickDigits Number 1 No 輸入深度刻度文字取用小數點位數數字，預設1
funFormatTickValue function null No 輸入處理深度刻度值用以顯示函數，給予時取代內建格式化(tickDownPositive與tickDigits失效)，預設null
layerWithPopup Boolean false No 輸入土層是否可點擊顯示popup彈窗布林值，彈窗內容由slot之popup提供，預設false
layerCanClick Boolean false No 輸入土層是否可點擊布林值，可點擊時發出click-layer事件，預設false
optionsSegments Object {} No 輸入向下傳遞至WSegmentsVertical之設定物件，鍵值同WSegmentsVertical之props(如tickColor、axisColor、segmentBorderColor、textShift、segmentBackgroundType等)，惟組件已顯式綁定之props(items、width、height、paddingStyle、keyValueStart、keyValueEnd、keyText、valueMin、valueMax、title、tickSize、segmentSize、segmentWithPopup、segmentCanClick、funSegmentBackgroundImage、funFormatTickValue)以組件為準不可覆蓋；另內建預設segmentBackgroundType為'image'、tickColor為'#444'、axisColor為'transparent'、segmentBorderColor為{v:'transparent',h:'#444'}、alignEnd為'left'，皆可由本物件覆蓋，預設{}

Computed

Name Type Description
kpIconEff Object 回傳實際使用之土壤圖示物件，優先取用kpIcon，否則為內建圖示
useItems Array 回傳實際供繪製之土層項目陣列，已依mergeSameLayers合併相鄰同層
depthMinEff Number 回傳實際使用之深度軸最小值數字
depthMaxEff Number 回傳實際使用之深度軸最大值數字
optionsSegmentsEff Object 回傳實際向下傳遞至WSegmentsVertical之設定物件，已套用內建預設

Events

Name Payload Type Description
click-layer Object 當layerCanClick為true且使用者點擊土層時，回傳{ev,item}物件，item為該土層物件

Description:

  • 以WSegmentsVertical繪製隨深度之土柱圖，各土層依土壤圖例代碼(legendCode)顯示對應土壤圖示，為WSoilColumnWithAnchors與WSptLiqPlotDepths共用之土柱圖核心

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

    土壤圖示內建於套件(src/js/getSoilCodeIcon.mjs，取自w-demores)，不依賴網路載入，可支援無連外網路之環境；若需自訂圖示可由kpIcon給予

    具名插槽(slot)：'text'為土層右側描述文字區塊，提供作用域參數item與index，未給予時使用WSegmentsVertical之預設文字區(三角+keyText文字)；'popup'為土層彈窗內容區塊，提供作用域參數item與index；'support-left'與'support-right'為繪圖區左右側之附加內容區塊，提供作用域參數convertValueToY，為深度轉繪圖區y座標之函數，供外部定位水位等標記

Props

Name Type Default value Required? Description
items Array [] No 輸入土層項目物件陣列，各項目至少含keyDepthStart與keyDepthEnd兩數字欄位(往下為正)，並以keyLegendCode欄位對應土壤圖示，其餘欄位原樣供popup插槽使用，預設[]
keyDepthStart String 'depthStart' No 輸入土層項目存放起始深度之欄位字串，預設'depthStart'
keyDepthEnd String 'depthEnd' No 輸入土層項目存放結束深度之欄位字串，預設'depthEnd'
keyText String 'description' No 輸入土層項目存放說明文字之欄位字串，預設'description'
keyLegendCode String 'legendCode' No 輸入土層項目存放土壤圖例代碼之欄位字串，供對應土壤圖示，預設'legendCode'
mergeSameLayers Boolean false No 輸入是否合併相鄰且圖例代碼與說明文字皆相同土層布林值，預設false
kpIcon Object null No 輸入土壤圖例代碼對應土壤圖示物件，key為圖例代碼字串，值為圖片data URI或網址字串，給予null時使用內建之getSoilCodeIcon，預設null
width Number 191 No 輸入土柱繪圖寬度數字，單位px，預設191
height Number 504 No 輸入土柱繪圖高度數字，單位px，預設504
paddingStyle Object {top:10,right:0,bottom:10,left:60} No 輸入內距物件，可用鍵值為top、right、bottom、left，各為數字，單位px，left須容納深度刻度文字，預設{top:10,right:0,bottom:10,left:60}
depthMin Number null No 輸入深度軸最小值數字，給予null時自items自動計算，無items時為0，預設null
depthMax Number null No 輸入深度軸最大值數字，給予null時自items自動計算，無items時為12，預設null
title String '' No 輸入深度軸標題字串，給予空字串時不顯示，預設''
tickSize Number 25 No 輸入深度刻度尺寸(為單側寬度)數字，刻度文字位於刻度左側，故須大於等於segmentSize文字才不會與土柱重疊，單位px，預設25
segmentSize Number 20 No 輸入土柱區塊尺寸(為單側寬度)數字，單位px，預設20
tickDownPositive Boolean true No 輸入深度刻度顯示符號布林值，true代表往下顯示為正(原值)，false代表往下顯示為負(深度0不加負號)，僅影響顯示不影響計算，預設true
tickDigits Number 1 No 輸入深度刻度文字取用小數點位數數字，預設1
funFormatTickValue function null No 輸入處理深度刻度值用以顯示函數，給予時取代內建格式化(tickDownPositive與tickDigits失效)，預設null
layerWithPopup Boolean false No 輸入土層是否可點擊顯示popup彈窗布林值，彈窗內容由slot之popup提供，預設false
layerCanClick Boolean false No 輸入土層是否可點擊布林值，可點擊時發出click-layer事件，預設false
optionsSegments Object {} No 輸入向下傳遞至WSegmentsVertical之設定物件，鍵值同WSegmentsVertical之props(如tickColor、axisColor、segmentBorderColor、textShift、segmentBackgroundType等)，惟組件已顯式綁定之props(items、width、height、paddingStyle、keyValueStart、keyValueEnd、keyText、valueMin、valueMax、title、tickSize、segmentSize、segmentWithPopup、segmentCanClick、funSegmentBackgroundImage、funFormatTickValue)以組件為準不可覆蓋；另內建預設segmentBackgroundType為'image'、tickColor為'#444'、axisColor為'transparent'、segmentBorderColor為{v:'transparent',h:'#444'}、alignEnd為'left'，皆可由本物件覆蓋，預設{}

Computed

Name Type Description
kpIconEff Object 回傳實際使用之土壤圖示物件，優先取用kpIcon，否則為內建圖示
useItems Array 回傳實際供繪製之土層項目陣列，已依mergeSameLayers合併相鄰同層
depthMinEff Number 回傳實際使用之深度軸最小值數字
depthMaxEff Number 回傳實際使用之深度軸最大值數字
optionsSegmentsEff Object 回傳實際向下傳遞至WSegmentsVertical之設定物件，已套用內建預設

Events

Name Payload Type Description
click-layer Object 當layerCanClick為true且使用者點擊土層時，回傳{ev,item}物件，item為該土層物件