amChart 추가 , 포틀릿 추가
This commit is contained in:
nhj
parent
e5aee659c4
commit
4323a699be
@ -307,6 +307,12 @@ public class CommonUtil
|
||||
return (Long.valueOf(str).longValue());
|
||||
}
|
||||
|
||||
public static int stoi(String str)
|
||||
{
|
||||
if(str == null ) return 0;
|
||||
return (Integer.valueOf(str).intValue());
|
||||
}
|
||||
|
||||
/**
|
||||
문자열을 중 특정 문자열을 변환시킨다.
|
||||
@version 1.0
|
||||
|
||||
@ -146,7 +146,7 @@ public class RestApiCallUtil
|
||||
|
||||
String strFullReturnData = returnObj.toString();
|
||||
|
||||
log.info("전체 리턴값 => [{}]", returnObj.toString());
|
||||
// log.info("전체 리턴값 => [{}]", returnObj.toString());
|
||||
|
||||
// Map 변환처리
|
||||
Map<String, Object> returnMap = null;
|
||||
|
||||
@ -52,7 +52,7 @@ public class EgovConfigAppProperties
|
||||
properties.put("Globals.fileUpload.Extensions.Images", ".gif.jpg.jpeg.png");
|
||||
|
||||
|
||||
long lMaxSize = (1024*1024)*10; // 10MB
|
||||
long lMaxSize = (1024*1024)*100; // 100MB
|
||||
// String strMaxSize = String.valueOf(lMaxSize);
|
||||
properties.put("Globals.fileUpload.maxSize", lMaxSize+"");
|
||||
|
||||
|
||||
@ -357,9 +357,7 @@ public class MainController
|
||||
request.getSession().setAttribute("list_headmenu", list_headmenu);
|
||||
request.getSession().setAttribute("list_menulist", list_menulist);
|
||||
|
||||
|
||||
log.info("한번 봅시다. [{}]", list_menulist.toString());
|
||||
|
||||
// log.info("한번 봅시다. [{}]", list_menulist.toString());
|
||||
|
||||
model.addAttribute("list_headmenu", list_headmenu);
|
||||
model.addAttribute("list_menulist", list_menulist);
|
||||
|
||||
@ -64,8 +64,6 @@ public class UserSearchController
|
||||
|
||||
log.info("strMultiUserSelectYn : {}", strMultiUserSelectYn);
|
||||
|
||||
|
||||
|
||||
// Body Setting Start -------------------------------
|
||||
searchVO.setPageUnit(propertyService.getInt("pageUnit"));
|
||||
searchVO.setPageSize(propertyService.getInt("pageSize"));
|
||||
@ -91,6 +89,13 @@ public class UserSearchController
|
||||
|
||||
paginationInfo.setTotalRecordCount(totCnt);
|
||||
|
||||
// 2025.11.19 나혁제 선잭조건이 없는경우 1 로 세팅
|
||||
if(searchVO.getSearchCondition() == null || searchVO.getSearchCondition().equals(""))
|
||||
{
|
||||
searchVO.setSearchCondition("1");
|
||||
}
|
||||
|
||||
|
||||
model.addAttribute("resultList" , resultList);
|
||||
model.addAttribute("resultCnt" , totCnt);
|
||||
model.addAttribute("paginationInfo" , paginationInfo);
|
||||
|
||||
@ -7,6 +7,7 @@ import java.util.Map;
|
||||
|
||||
import javax.annotation.Resource;
|
||||
import javax.servlet.http.HttpServletRequest;
|
||||
import javax.servlet.http.HttpServletResponse;
|
||||
|
||||
import org.egovframe.rte.fdl.property.EgovPropertyService;
|
||||
import org.egovframe.rte.ptl.mvc.tags.ui.pagination.PaginationInfo;
|
||||
@ -14,11 +15,14 @@ import org.springframework.security.core.context.SecurityContextHolder;
|
||||
import org.springframework.stereotype.Controller;
|
||||
import org.springframework.ui.ModelMap;
|
||||
import org.springframework.web.bind.annotation.ModelAttribute;
|
||||
import org.springframework.web.bind.annotation.RequestBody;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
import org.springframework.web.bind.annotation.RequestParam;
|
||||
import org.springframework.web.bind.annotation.ResponseBody;
|
||||
import org.springframework.web.servlet.ModelAndView;
|
||||
|
||||
import com.urpsys.itmsfront.bbs.domain.BoardVO;
|
||||
import com.urpsys.itmsfront.srm.domain.ReportOtherVo;
|
||||
import com.urpsys.basefront.common.egov.util.EgovStringUtil;
|
||||
import com.urpsys.basefront.common.util.CommonUtil;
|
||||
import com.urpsys.basefront.common.util.ConvertUtils;
|
||||
@ -27,6 +31,7 @@ import com.urpsys.basefront.domain.MemberVO;
|
||||
import com.urpsys.itmsfront.sys.domain.PrsnlPortletCreateVO;
|
||||
import com.urpsys.itmsfront.sys.domain.PrsnlPortletManageVO;
|
||||
|
||||
import kong.unirest.json.JSONArray;
|
||||
import lombok.extern.slf4j.Slf4j;
|
||||
|
||||
/**
|
||||
@ -98,23 +103,35 @@ public class PortletManageController {
|
||||
public ModelAndView insertUserPortlet( @ModelAttribute("prsnlPortletCreateVO") PrsnlPortletCreateVO prsnlPortletCreateVO
|
||||
, @RequestParam Map<?, ?> commandMap
|
||||
, HttpServletRequest request
|
||||
, ModelMap model) throws Exception {
|
||||
, ModelMap model) throws Exception
|
||||
{
|
||||
|
||||
log.info(">>>>>>>>>>>>>>> /potl/insertUserPortlet.do <<<<<<<<<<<<<<<");
|
||||
|
||||
MemberVO memberVo = (MemberVO)SecurityContextHolder.getContext().getAuthentication().getPrincipal();
|
||||
|
||||
String userId=memberVo == null ? "" : EgovStringUtil.isNullToString(memberVo.getTokenInfo().getStrMEM_ID());
|
||||
String userId = memberVo == null ? "" : EgovStringUtil.isNullToString(memberVo.getTokenInfo().getStrMEM_ID());
|
||||
|
||||
prsnlPortletCreateVO.setFrstRegisterId(memberVo == null ? "" : EgovStringUtil.isNullToString(memberVo.getTokenInfo().getUniqId()));
|
||||
prsnlPortletCreateVO.setUserId(memberVo == null ? "" : EgovStringUtil.isNullToString(memberVo.getTokenInfo().getStrMEM_ID()));
|
||||
|
||||
Map<String, Object> bodyMap = new LinkedHashMap();
|
||||
|
||||
prsnlPortletCreateVO.setPrsnlId((String)commandMap.get("insPrnslIds"));
|
||||
prsnlPortletCreateVO.setPortletSeq(CommonUtil.stoi((String)commandMap.get("insPrnslSeq")));
|
||||
prsnlPortletCreateVO.setUserId(userId);
|
||||
|
||||
// Body Setting Start ---------------------------------
|
||||
bodyMap.put("insPrnslIds" , commandMap.get("insPrnslIds"));
|
||||
bodyMap.put("userId", userId);
|
||||
bodyMap.put("prsnlPortletCreateVO", ConvertUtils.convertToMapAll(prsnlPortletCreateVO));
|
||||
// 2025.11.12 나혁제 불필요코딩 삭제
|
||||
// bodyMap.put("insPrnslIds" , commandMap.get("insPrnslIds") );
|
||||
// bodyMap.put("insPrnslSeq" , commandMap.get("insPrnslSeq") ); // 2025.11.12 나혁제 포틀릿 순서 추가
|
||||
// bodyMap.put("userId" , userId);
|
||||
|
||||
bodyMap.put("prsnlPortletCreateVO", ConvertUtils.convertToMapAll(prsnlPortletCreateVO));
|
||||
// Body Setting End ---------------------------------
|
||||
|
||||
Map<String, Object> returnMap = restApiCallUtil.RestApiCall(bodyMap, "/potl/insertUserPortlet.do");
|
||||
|
||||
log.info("<<<<<<<<<<<<<<< /potl/insertUserPortlet.do >>>>>>>>>>>>>>>");
|
||||
|
||||
ModelAndView mav = new ModelAndView("jsonView");
|
||||
@ -651,7 +668,7 @@ public class PortletManageController {
|
||||
// Body Setting End ---------------------------------
|
||||
|
||||
// RestApi Call Start ---------------------------------
|
||||
returnMap = restApiCallUtil.RestApiCall(bodyMap, "/srm/getResouceTotalStat.do");
|
||||
returnMap = restApiCallUtil.RestApiCall(bodyMap, "/sta/getResouceTotalStat.do");
|
||||
// RestApi Call End ---------------------------------
|
||||
|
||||
// Return Data Setting Start --------------------------
|
||||
@ -660,6 +677,10 @@ public class PortletManageController {
|
||||
|
||||
String potlId=(String) commandMap.get("prsnlId");
|
||||
|
||||
|
||||
JSONArray jsonArr = ConvertUtils.getJsonFromList(resultList);
|
||||
|
||||
model.addAttribute("resultJson", jsonArr.toString());
|
||||
model.addAttribute("resultList", resultList);
|
||||
model.addAttribute("potlId", potlId);
|
||||
model.addAttribute("potlWidth" , potlWidth);
|
||||
@ -670,6 +691,179 @@ public class PortletManageController {
|
||||
return "/itms/pot/MyResouceTotalStat";
|
||||
}
|
||||
|
||||
/**
|
||||
* SR 현황 통계 포틀릿
|
||||
* @author urp 인프라본부 나혁제
|
||||
* 작성일 : 2025.11.11
|
||||
*/
|
||||
@RequestMapping(value = "/potl/getIncidentStat.do")
|
||||
public String getIncidentStat( HttpServletRequest request
|
||||
, @RequestParam Map<String, Object> commandMap
|
||||
, ModelMap model) throws Exception
|
||||
{
|
||||
log.info(">>>>>>>>>>>>>>> /potl/getIncidentStat.do <<<<<<<<<<<<<<<");
|
||||
|
||||
PrsnlPortletManageVO prsnlPortletManageVO = new PrsnlPortletManageVO();
|
||||
|
||||
prsnlPortletManageVO.setPrsnlId((String) commandMap.get("prsnlId"));
|
||||
|
||||
// Body Setting Start ---------------------------------
|
||||
Map<String, Object> bodyMap2 = ConvertUtils.convertToMapAll(prsnlPortletManageVO);
|
||||
// Body Setting End ---------------------------------
|
||||
// RestApi Call Start ---------------------------------
|
||||
Map<String, Object> returnMap2 = restApiCallUtil.RestApiCall(bodyMap2, "/potl/selectPotlSize.do");
|
||||
// RestApi Call End ---------------------------------
|
||||
|
||||
// Return Data Setting Start --------------------------
|
||||
Map<String, Object> resultList2 = (Map<String, Object>)returnMap2.get("resultList");
|
||||
// Return Data Setting End --------------------------
|
||||
|
||||
int potlWidth= (int) resultList2.get("portletWidth");
|
||||
int potlHeight= (int) resultList2.get("portletHeight");
|
||||
|
||||
String potlId=(String) commandMap.get("prsnlId");
|
||||
|
||||
model.addAttribute("potlId", potlId);
|
||||
model.addAttribute("potlWidth" , potlWidth);
|
||||
model.addAttribute("potlHeight", potlHeight);
|
||||
|
||||
model.addAttribute("dtCurMonth" , CommonUtil.getKST("yyyy-MM")); // 조회일시
|
||||
|
||||
log.info("<<<<<<<<<<<<<<< /potl/getIncidentStat.do >>>>>>>>>>>>>>>");
|
||||
|
||||
return "/itms/pot/MyIncidentStat";
|
||||
}
|
||||
|
||||
/**
|
||||
* 월간 SR 현황 통계 조회
|
||||
* @author urp 인프라본부 나혁제
|
||||
* 작성일 : 2025.11.13
|
||||
*/
|
||||
@ResponseBody
|
||||
@RequestMapping(value="/potl/getIncidentMonStatus.do")
|
||||
public LinkedHashMap<String, Object> getIncidentMonStatus( @RequestBody LinkedHashMap<String, Object> requestMap
|
||||
, HttpServletRequest request
|
||||
, HttpServletResponse response ) throws Exception
|
||||
{
|
||||
log.info(">>>>>>>>>>>>>>> /potl/getIncidentMonStatus.do <<<<<<<<<<<<<<<");
|
||||
|
||||
// api in/out map 정의
|
||||
Map<String, Object> bodyMap = new LinkedHashMap();
|
||||
Map<String, Object> returnMap = new LinkedHashMap();
|
||||
|
||||
// return 처리
|
||||
LinkedHashMap<String, Object> resBody = new LinkedHashMap<String, Object>(); // Response Map
|
||||
|
||||
// Body Setting Start ---------------------------------
|
||||
bodyMap.put("strSearchMon" , (String)requestMap.get("strSearchMon"));
|
||||
// Body Setting End ---------------------------------
|
||||
|
||||
// RestApi Call Start ---------------------------------
|
||||
returnMap = restApiCallUtil.RestApiCall(bodyMap, "/srm/getIncidentMonStatus.do");
|
||||
// RestApi Call End ---------------------------------
|
||||
|
||||
// Return Data Setting Start --------------------------
|
||||
List<Map<String, Object>> resultList = (List<Map<String, Object>>)returnMap.get("resultList");
|
||||
// Return Data Setting End --------------------------
|
||||
|
||||
JSONArray jsonArr = ConvertUtils.getJsonFromList(resultList);
|
||||
|
||||
log.info("jsonArr [{}]", jsonArr.toString());
|
||||
|
||||
// resBody.put("resultList" , jsonArr.toString() );
|
||||
resBody.put("resultList" , resultList );
|
||||
|
||||
|
||||
log.info("<<<<<<<<<<<<<<< /potl/getIncidentMonStatus.do >>>>>>>>>>>>>>>");
|
||||
|
||||
return resBody;
|
||||
}
|
||||
|
||||
/**
|
||||
* 월간 보고서 현황 통계 포틀릿
|
||||
* @author urp 인프라본부 나혁제
|
||||
* 작성일 : 2025.11.14
|
||||
*/
|
||||
@RequestMapping(value = "/potl/getReportStat.do")
|
||||
public String getReportStat( HttpServletRequest request
|
||||
, @RequestParam Map<String, Object> commandMap
|
||||
, ModelMap model) throws Exception
|
||||
{
|
||||
log.info(">>>>>>>>>>>>>>> /potl/getReportStat.do <<<<<<<<<<<<<<<");
|
||||
|
||||
PrsnlPortletManageVO prsnlPortletManageVO = new PrsnlPortletManageVO();
|
||||
|
||||
prsnlPortletManageVO.setPrsnlId((String) commandMap.get("prsnlId"));
|
||||
|
||||
// Body Setting Start ---------------------------------
|
||||
Map<String, Object> bodyMap2 = ConvertUtils.convertToMapAll(prsnlPortletManageVO);
|
||||
// Body Setting End ---------------------------------
|
||||
// RestApi Call Start ---------------------------------
|
||||
Map<String, Object> returnMap2 = restApiCallUtil.RestApiCall(bodyMap2, "/potl/selectPotlSize.do");
|
||||
// RestApi Call End ---------------------------------
|
||||
|
||||
// Return Data Setting Start --------------------------
|
||||
Map<String, Object> resultList2 = (Map<String, Object>)returnMap2.get("resultList");
|
||||
// Return Data Setting End --------------------------
|
||||
|
||||
int potlWidth= (int) resultList2.get("portletWidth");
|
||||
int potlHeight= (int) resultList2.get("portletHeight");
|
||||
|
||||
String potlId=(String) commandMap.get("prsnlId");
|
||||
|
||||
model.addAttribute("potlId", potlId);
|
||||
model.addAttribute("potlWidth" , potlWidth);
|
||||
model.addAttribute("potlHeight", potlHeight);
|
||||
|
||||
model.addAttribute("dtCurMonth" , CommonUtil.getKST("yyyy-MM")); // 조회일시
|
||||
|
||||
log.info("<<<<<<<<<<<<<<< /potl/getReportStat.do >>>>>>>>>>>>>>>");
|
||||
|
||||
return "/itms/pot/MyReportStat";
|
||||
}
|
||||
|
||||
/**
|
||||
* 월간 보고서 현황 통계 조회
|
||||
* @author urp 인프라본부 나혁제
|
||||
* 작성일 : 2025.11.14
|
||||
*/
|
||||
@ResponseBody
|
||||
@RequestMapping(value="/potl/getReportMonStatus.do")
|
||||
public LinkedHashMap<String, Object> getReportMonStatus( @RequestBody LinkedHashMap<String, Object> requestMap
|
||||
, HttpServletRequest request
|
||||
, HttpServletResponse response ) throws Exception
|
||||
{
|
||||
log.info(">>>>>>>>>>>>>>> /potl/getReportMonStatus.do <<<<<<<<<<<<<<<");
|
||||
|
||||
// api in/out map 정의
|
||||
Map<String, Object> bodyMap = new LinkedHashMap();
|
||||
Map<String, Object> returnMap = new LinkedHashMap();
|
||||
|
||||
// return 처리
|
||||
LinkedHashMap<String, Object> resBody = new LinkedHashMap<String, Object>(); // Response Map
|
||||
|
||||
// Body Setting Start ---------------------------------
|
||||
bodyMap.put("strSearchMon" , (String)requestMap.get("strSearchMon"));
|
||||
// Body Setting End ---------------------------------
|
||||
|
||||
// RestApi Call Start ---------------------------------
|
||||
returnMap = restApiCallUtil.RestApiCall(bodyMap, "/srm/getReportMonStatus.do");
|
||||
// RestApi Call End ---------------------------------
|
||||
|
||||
// Return Data Setting Start --------------------------
|
||||
List<Map<String, Object>> resultList = (List<Map<String, Object>>)returnMap.get("resultList");
|
||||
// Return Data Setting End --------------------------
|
||||
|
||||
resBody.put("resultList" , resultList );
|
||||
|
||||
log.info("<<<<<<<<<<<<<<< /potl/getReportMonStatus.do >>>>>>>>>>>>>>>");
|
||||
|
||||
return resBody;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -26,12 +26,13 @@ public class AdminServiceVo
|
||||
*/
|
||||
private static final long serialVersionUID = 1L;
|
||||
|
||||
private String inServiceCode;
|
||||
private String vcServiceName;
|
||||
private String txServiceDesc;
|
||||
private String inChargeUser;
|
||||
private String vcChargeUser;
|
||||
private String txDefaultForm;
|
||||
private String inServiceCode ;
|
||||
private String vcServiceName ;
|
||||
private String txServiceDesc ;
|
||||
private String inChargeUser ;
|
||||
private String vcChargeUser ;
|
||||
private String txDefaultForm ;
|
||||
private String inSortSn ; // 2025.11.24 나혁제 추가
|
||||
|
||||
public String getInServiceCode() {
|
||||
return inServiceCode;
|
||||
@ -69,6 +70,14 @@ public class AdminServiceVo
|
||||
public void setTxDefaultForm(String txDefaultForm) {
|
||||
this.txDefaultForm = txDefaultForm;
|
||||
}
|
||||
public String getInSortSn() {
|
||||
return inSortSn;
|
||||
}
|
||||
public void setInSortSn(String inSortSn) {
|
||||
this.inSortSn = inSortSn;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -122,6 +122,14 @@ public class ReportCheckController
|
||||
model.addAttribute("paginationInfo" , paginationInfo);
|
||||
model.addAttribute("message" , egovMessageSource.getMessage("success.common.select"));
|
||||
|
||||
// 2025.11.24 나혁제 그룹정보가 없는경우 메세지 처리
|
||||
TokenInfo tokenInfo = CommonUtil.getTokenInfo();
|
||||
if(tokenInfo.getStrGRP_ID() == null || tokenInfo.getStrGRP_ID().equals(""))
|
||||
{
|
||||
model.addAttribute("error_msg", "그룹지정이 안되어 있습니다. 시스템관리자에게 연락하여 그룹지정을 해주세요.");
|
||||
}
|
||||
|
||||
|
||||
log.info("<<<<<<<<<<<<<<< /srm/searchReportCheck.do >>>>>>>>>>>>>>>");
|
||||
|
||||
return "uritms-tiles2/srm/ReportCheckList";
|
||||
@ -158,6 +166,14 @@ public class ReportCheckController
|
||||
|
||||
// 결과값 추출 Start ---------------------------------
|
||||
Map<String, Object> resultReportCheck = (Map<String, Object>)returnMap.get("resultReportCheck");
|
||||
|
||||
// 2025.11.20 나혁제 기본정보가 없는경우 목록 화면으로 이동
|
||||
if(resultReportCheck == null)
|
||||
{
|
||||
model.addAttribute("error_msg", "기본정보가 삭제되었습니다.");
|
||||
return "forward:/srm/searchReportCheck.do";
|
||||
}
|
||||
|
||||
List<Map<String, Object>> resultSharings = (List<Map<String, Object>>)returnMap.get("resultSharings");
|
||||
List<Map<String, Object>> resultAssets = (List<Map<String, Object>>)returnMap.get("resultAssets");
|
||||
List<Map<String, Object>> resultApprovals = (List<Map<String, Object>>)returnMap.get("resultApprovals");
|
||||
@ -877,6 +893,7 @@ public class ReportCheckController
|
||||
// Body Setting Start ---------------------------------
|
||||
bodyMap.put("txComment" , CommonUtil.getData(request, "reqAppRejTxComment") );
|
||||
bodyMap.put("inReportSeq" , CommonUtil.getData(request, "inReportSeq" ) );
|
||||
bodyMap.put("stsfdgCd" , CommonUtil.getData(request, "stsfdgCd" ) ); // 2025.11.17 나혁제 만족도 추가
|
||||
bodyMap.put("inUserSeq" , tokenInfo.getUniqId() );
|
||||
// Body Setting End ---------------------------------
|
||||
|
||||
@ -941,6 +958,7 @@ public class ReportCheckController
|
||||
|
||||
// Body Setting Start ---------------------------------
|
||||
bodyMap.put("txComment" , CommonUtil.getData(request, "reqAppRejTxComment") );
|
||||
bodyMap.put("stsfdgCd" , CommonUtil.getData(request, "stsfdgCd" ) ); // 2025.11.17 나혁제 만족도 추가
|
||||
bodyMap.put("inReportSeq" , CommonUtil.getData(request, "inReportSeq" ) );
|
||||
bodyMap.put("inUserSeq" , tokenInfo.getUniqId() );
|
||||
// Body Setting End ---------------------------------
|
||||
|
||||
@ -157,6 +157,14 @@ public class ReportErrorController
|
||||
|
||||
// 결과값 추출 Start ---------------------------------
|
||||
Map<String, Object> resultReportError = (Map<String, Object>)returnMap.get("resultReportError");
|
||||
|
||||
// 2025.11.20 나혁제 기본정보가 없는경우 목록 화면으로 이동
|
||||
if(resultReportError == null)
|
||||
{
|
||||
model.addAttribute("error_msg", "기본정보가 삭제되었습니다.");
|
||||
return "forward:/srm/searchReportError.do";
|
||||
}
|
||||
|
||||
List<Map<String, Object>> resultSharings = (List<Map<String, Object>>)returnMap.get("resultSharings");
|
||||
List<Map<String, Object>> resultAssets = (List<Map<String, Object>>)returnMap.get("resultAssets");
|
||||
List<Map<String, Object>> resultApprovals = (List<Map<String, Object>>)returnMap.get("resultApprovals");
|
||||
@ -870,6 +878,7 @@ public class ReportErrorController
|
||||
// Body Setting Start ---------------------------------
|
||||
bodyMap.put("txComment" , CommonUtil.getData(request, "reqAppRejTxComment") );
|
||||
bodyMap.put("inReportSeq" , CommonUtil.getData(request, "inReportSeq" ) );
|
||||
bodyMap.put("stsfdgCd" , CommonUtil.getData(request, "stsfdgCd" ) ); // 2025.11.17 나혁제 만족도 추가
|
||||
bodyMap.put("inUserSeq" , tokenInfo.getUniqId() );
|
||||
// Body Setting End ---------------------------------
|
||||
|
||||
@ -936,6 +945,7 @@ public class ReportErrorController
|
||||
// Body Setting Start ---------------------------------
|
||||
bodyMap.put("txComment" , CommonUtil.getData(request, "reqAppRejTxComment") );
|
||||
bodyMap.put("inReportSeq" , CommonUtil.getData(request, "inReportSeq" ) );
|
||||
bodyMap.put("stsfdgCd" , CommonUtil.getData(request, "stsfdgCd" ) ); // 2025.11.17 나혁제 만족도 추가
|
||||
bodyMap.put("inUserSeq" , tokenInfo.getUniqId() );
|
||||
// Body Setting End ---------------------------------
|
||||
|
||||
|
||||
@ -157,6 +157,14 @@ public class ReportIssueController
|
||||
|
||||
// 결과값 추출 Start ---------------------------------
|
||||
Map<String, Object> resultReportIssue = (Map<String, Object>)returnMap.get("resultReportIssue");
|
||||
|
||||
// 2025.11.20 나혁제 기본정보가 없는경우 목록 화면으로 이동
|
||||
if(resultReportIssue == null)
|
||||
{
|
||||
model.addAttribute("error_msg", "기본정보가 삭제되었습니다.");
|
||||
return "forward:/srm/searchReportIssue.do";
|
||||
}
|
||||
|
||||
List<Map<String, Object>> resultSharings = (List<Map<String, Object>>)returnMap.get("resultSharings");
|
||||
List<Map<String, Object>> resultAssets = (List<Map<String, Object>>)returnMap.get("resultAssets");
|
||||
List<Map<String, Object>> resultApprovals = (List<Map<String, Object>>)returnMap.get("resultApprovals");
|
||||
@ -870,6 +878,7 @@ public class ReportIssueController
|
||||
|
||||
// Body Setting Start ---------------------------------
|
||||
bodyMap.put("txComment" , CommonUtil.getData(request, "reqAppRejTxComment") );
|
||||
bodyMap.put("stsfdgCd" , CommonUtil.getData(request, "stsfdgCd" ) ); // 2025.11.17 나혁제 만족도 추가
|
||||
bodyMap.put("inReportSeq" , CommonUtil.getData(request, "inReportSeq" ) );
|
||||
bodyMap.put("inUserSeq" , tokenInfo.getUniqId() );
|
||||
// Body Setting End ---------------------------------
|
||||
@ -935,6 +944,7 @@ public class ReportIssueController
|
||||
|
||||
// Body Setting Start ---------------------------------
|
||||
bodyMap.put("txComment" , CommonUtil.getData(request, "reqAppRejTxComment") );
|
||||
bodyMap.put("stsfdgCd" , CommonUtil.getData(request, "stsfdgCd" ) ); // 2025.11.17 나혁제 만족도 추가
|
||||
bodyMap.put("inReportSeq" , CommonUtil.getData(request, "inReportSeq" ) );
|
||||
bodyMap.put("inUserSeq" , tokenInfo.getUniqId() );
|
||||
// Body Setting End ---------------------------------
|
||||
|
||||
@ -76,9 +76,9 @@ public class ReportOtherController
|
||||
CommonService commonService;
|
||||
|
||||
/**
|
||||
* 이슈보고서 목록을 조회한다.
|
||||
* 기타보고서 목록을 조회한다.
|
||||
* @author urp 인프라본부 나혁제
|
||||
* 작성일 : 2025.02.26
|
||||
* 작성일 : 2025.10.15
|
||||
*/
|
||||
@RequestMapping("/srm/searchReportOther.do")
|
||||
public String searchReportOther( @ModelAttribute("searchVO") ReportOtherListVo searchVO
|
||||
@ -131,9 +131,9 @@ public class ReportOtherController
|
||||
}
|
||||
|
||||
/**
|
||||
* 이슈보고서 상세조회 화면으로 이동한다.
|
||||
* 기타보고서 상세조회 화면으로 이동한다.
|
||||
* @author urp 인프라본부 나혁제
|
||||
* 작성일 : 2025.02.26
|
||||
* 작성일 : 2025.10.15
|
||||
*/
|
||||
@RequestMapping(value = "/srm/getReportWithBodyOther.do")
|
||||
public String getReportWithBodyOther( @ModelAttribute("ReportOtherListVo") ReportOtherListVo reportOtherListVo
|
||||
@ -160,6 +160,12 @@ public class ReportOtherController
|
||||
|
||||
// 결과값 추출 Start ---------------------------------
|
||||
Map<String, Object> resultReportOther = (Map<String, Object>)returnMap.get("resultReportOther");
|
||||
// 2025.11.20 나혁제 기본정보가 없는경우 목록 화면으로 이동
|
||||
if(resultReportOther == null)
|
||||
{
|
||||
model.addAttribute("error_msg", "기본정보가 삭제되었습니다.");
|
||||
return "forward:/srm/searchReportOther.do";
|
||||
}
|
||||
List<Map<String, Object>> resultSharings = (List<Map<String, Object>>)returnMap.get("resultSharings");
|
||||
List<Map<String, Object>> resultAssets = (List<Map<String, Object>>)returnMap.get("resultAssets");
|
||||
List<Map<String, Object>> resultApprovals = (List<Map<String, Object>>)returnMap.get("resultApprovals");
|
||||
@ -191,16 +197,15 @@ public class ReportOtherController
|
||||
model.addAttribute("resultAssets" , resultAssets ); // List
|
||||
model.addAttribute("resultApprovals" , resultApprovals ); // List
|
||||
|
||||
|
||||
log.info("<<<<<<<<<<<<<<< /srm/getReportWithBodyOther.do >>>>>>>>>>>>>>>");
|
||||
|
||||
return "uritms-tiles2/srm/ReportOtherDetail";
|
||||
}
|
||||
|
||||
/**
|
||||
* 이슈보고서 인쇄 화면으로 이동한다.
|
||||
* 기타보고서 인쇄 화면으로 이동한다.
|
||||
* @author urp 인프라본부 나혁제
|
||||
* 작성일 : 2025.02.26
|
||||
* 작성일 : 2025.10.15
|
||||
*/
|
||||
@RequestMapping(value = "/srm/getReportWithBodyOtherPrint.do")
|
||||
public String getReportWithBodyOtherPrint( @ModelAttribute("ReportOtherListVo") ReportOtherListVo reportOtherListVo
|
||||
@ -410,9 +415,9 @@ public class ReportOtherController
|
||||
}
|
||||
|
||||
/**
|
||||
* 이슈보고서 등록 처리를 한다.
|
||||
* 기타보고서 등록 처리를 한다.
|
||||
* @author urp 인프라본부 나혁제
|
||||
* 작성일 : 2025.02.26
|
||||
* 작성일 : 2025.10.15
|
||||
*/
|
||||
@ResponseBody
|
||||
@RequestMapping(value="/srm/addReportOther.do")
|
||||
@ -582,9 +587,9 @@ public class ReportOtherController
|
||||
}
|
||||
|
||||
/**
|
||||
* 이슈보고서 수정 처리를 한다.
|
||||
* 기타보고서 수정 처리를 한다.
|
||||
* @author urp 인프라본부 나혁제
|
||||
* 작성일 : 2025.02.26
|
||||
* 작성일 : 2025.10.15
|
||||
*/
|
||||
@ResponseBody
|
||||
@RequestMapping(value="/srm/updateReportOther.do")
|
||||
@ -770,9 +775,9 @@ public class ReportOtherController
|
||||
}
|
||||
|
||||
/**
|
||||
* 이슈보고서 삭제 처리를 한다.
|
||||
* 기타보고서 삭제 처리를 한다.
|
||||
* @author urp 인프라본부 나혁제
|
||||
* 작성일 : 2025.02.26
|
||||
* 작성일 : 2025.10.15
|
||||
*/
|
||||
@ResponseBody
|
||||
@RequestMapping(value="/srm/deleteReportOther.do")
|
||||
@ -806,9 +811,9 @@ public class ReportOtherController
|
||||
}
|
||||
|
||||
/**
|
||||
* 이슈보고서 승인요청 처리를 한다.
|
||||
* 기타보고서 승인요청 처리를 한다.
|
||||
* @author urp 인프라본부 나혁제
|
||||
* 작성일 : 2025.02.26
|
||||
* 작성일 : 2025.10.15
|
||||
*/
|
||||
@ResponseBody
|
||||
@RequestMapping(value="/srm/procApprovalReportOther.do")
|
||||
@ -858,9 +863,9 @@ public class ReportOtherController
|
||||
}
|
||||
|
||||
/**
|
||||
* 이슈보고서 승인 처리를 한다.
|
||||
* 기타보고서 승인 처리를 한다.
|
||||
* @author urp 인프라본부 나혁제
|
||||
* 작성일 : 2025.02.26
|
||||
* 작성일 : 2025.10.15
|
||||
*/
|
||||
@ResponseBody
|
||||
@RequestMapping(value="/srm/approvalReportOther.do")
|
||||
@ -881,6 +886,7 @@ public class ReportOtherController
|
||||
// Body Setting Start ---------------------------------
|
||||
bodyMap.put("txComment" , CommonUtil.getData(request, "reqAppRejTxComment") );
|
||||
bodyMap.put("inReportSeq" , CommonUtil.getData(request, "inReportSeq" ) );
|
||||
bodyMap.put("stsfdgCd" , CommonUtil.getData(request, "stsfdgCd" ) ); // 2025.11.20 나혁제 만족도 추가
|
||||
bodyMap.put("inUserSeq" , tokenInfo.getUniqId() );
|
||||
// Body Setting End ---------------------------------
|
||||
|
||||
@ -923,9 +929,9 @@ public class ReportOtherController
|
||||
}
|
||||
|
||||
/**
|
||||
* 이슈보고서 반려 처리를 한다.
|
||||
* 기타보고서 반려 처리를 한다.
|
||||
* @author urp 인프라본부 나혁제
|
||||
* 작성일 : 2025.02.26
|
||||
* 작성일 : 2025.10.15
|
||||
*/
|
||||
@ResponseBody
|
||||
@RequestMapping(value="/srm/rejectReportOther.do")
|
||||
@ -945,6 +951,7 @@ public class ReportOtherController
|
||||
|
||||
// Body Setting Start ---------------------------------
|
||||
bodyMap.put("txComment" , CommonUtil.getData(request, "reqAppRejTxComment") );
|
||||
bodyMap.put("stsfdgCd" , CommonUtil.getData(request, "stsfdgCd" ) ); // 2025.11.17 나혁제 만족도 추가
|
||||
bodyMap.put("inReportSeq" , CommonUtil.getData(request, "inReportSeq" ) );
|
||||
bodyMap.put("inUserSeq" , tokenInfo.getUniqId() );
|
||||
// Body Setting End ---------------------------------
|
||||
@ -981,7 +988,7 @@ public class ReportOtherController
|
||||
/**
|
||||
* 서비스 정보 결재라인 조회
|
||||
* @author urp 인프라본부 나혁제
|
||||
* 작성일 : 2025.02.26
|
||||
* 작성일 : 2025.10.15
|
||||
*/
|
||||
@ResponseBody
|
||||
@RequestMapping(value = "/srm/getSvcApprovalListOther.do")
|
||||
@ -1022,7 +1029,7 @@ public class ReportOtherController
|
||||
/**
|
||||
* 보고서 양식 조회
|
||||
* @author urp 인프라본부 나혁제
|
||||
* 작성일 : 2025.02.26
|
||||
* 작성일 : 2025.10.15
|
||||
*/
|
||||
@ResponseBody
|
||||
@RequestMapping(value = "/srm/getReportFormOther.do")
|
||||
|
||||
@ -16,6 +16,7 @@ import org.springframework.stereotype.Controller;
|
||||
import org.springframework.ui.ModelMap;
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
import org.springframework.web.bind.annotation.ModelAttribute;
|
||||
import org.springframework.web.bind.annotation.PostMapping;
|
||||
import org.springframework.web.bind.annotation.RequestBody;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
import org.springframework.web.bind.annotation.ResponseBody;
|
||||
@ -80,6 +81,7 @@ public class SvcDeskController
|
||||
* @author urp 인프라본부 나혁제
|
||||
* 작성일 : 2025.02.08
|
||||
*/
|
||||
// @PostMapping("/srm/searchIncident.do")
|
||||
@RequestMapping("/srm/searchIncident.do")
|
||||
public String searchIncident( @ModelAttribute("searchVO") SvcDeskListVo searchVO
|
||||
, HttpServletRequest request
|
||||
@ -289,7 +291,8 @@ public class SvcDeskController
|
||||
* @author urp 인프라본부 나혁제
|
||||
* 작성일 : 2025.02.13
|
||||
*/
|
||||
@RequestMapping(value = "/srm/insertViewIncident.do")
|
||||
// @RequestMapping(value = "/srm/insertViewIncident.do")
|
||||
@PostMapping(value = "/srm/insertViewIncident.do")
|
||||
public String insertViewIncident( @ModelAttribute("searchVO") SvcDeskListVo searchVO
|
||||
, HttpServletRequest request
|
||||
, HttpServletResponse response
|
||||
@ -331,7 +334,9 @@ public class SvcDeskController
|
||||
* @author urp 인프라본부 나혁제
|
||||
* 작성일 : 2025.02.13
|
||||
*/
|
||||
@RequestMapping(value = "/srm/updateViewIncident.do")
|
||||
// 2025.11.19 나혁제 호출방식 변경
|
||||
// @RequestMapping(value = "/srm/updateViewIncident.do")
|
||||
@PostMapping(value = "/srm/updateViewIncident.do")
|
||||
public String updateViewIncident( @ModelAttribute("SvcDeskListVo") SvcDeskListVo svcDeskListVo
|
||||
, @ModelAttribute("searchVO") SvcDeskListVo searchVO
|
||||
, HttpServletRequest request
|
||||
@ -899,6 +904,7 @@ public class SvcDeskController
|
||||
// Body Setting Start ---------------------------------
|
||||
bodyMap.put("txComment" , CommonUtil.getData(request, "reqAppRejTxComment") );
|
||||
bodyMap.put("inIncidentSeq" , CommonUtil.getData(request, "inIncidentSeq" ) );
|
||||
bodyMap.put("stsfdgCd" , CommonUtil.getData(request, "stsfdgCd" ) ); // 2025.11.17 나혁제 만족도 추가
|
||||
bodyMap.put("inUserSeq" , tokenInfo.getUniqId() );
|
||||
// Body Setting End ---------------------------------
|
||||
|
||||
@ -960,6 +966,7 @@ public class SvcDeskController
|
||||
// Body Setting Start ---------------------------------
|
||||
bodyMap.put("txComment" , CommonUtil.getData(request, "reqAppRejTxComment") );
|
||||
bodyMap.put("inIncidentSeq" , CommonUtil.getData(request, "inIncidentSeq" ) );
|
||||
bodyMap.put("stsfdgCd" , CommonUtil.getData(request, "stsfdgCd" ) ); // 2025.11.17 나혁제 만족도 추가
|
||||
bodyMap.put("inUserSeq" , tokenInfo.getUniqId() );
|
||||
// Body Setting End ---------------------------------
|
||||
|
||||
|
||||
@ -14,6 +14,7 @@ import org.springframework.stereotype.Controller;
|
||||
import org.springframework.ui.Model;
|
||||
import org.springframework.ui.ModelMap;
|
||||
import org.springframework.validation.BindingResult;
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
import org.springframework.web.bind.annotation.ModelAttribute;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
import org.springframework.web.bind.annotation.RequestParam;
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
timeout: 120m
|
||||
cookie:
|
||||
name: BASEJSP_JSESSIONID
|
||||
|
||||
# ssl:
|
||||
# enabled: true #Spring Security를 사용하는 경우 HTTPS 요청만 허용하도록 해주는 설정
|
||||
# key-store-type: PKCS12
|
||||
|
||||
@ -54,7 +54,10 @@ select[disabled="disabled"] {background:#ebebeb;color:#959595;}
|
||||
|
||||
/* form 요소 기본 스타일 지정 */
|
||||
input {height:36px; margin:1px; padding:0px 8px;border:solid 1px #ccc;line-height:36px; font-size:14px; vertical-align:middle; border-radius: 4px;}
|
||||
/* 2025.11.19 나혁제 높이변경
|
||||
input[type="text"] {height:36px; margin:1px; padding:0px 8px;border:solid 1px #ccc;line-height:36px; font-size:14px; vertical-align:middle; border-radius: 4px;}
|
||||
*/
|
||||
input[type="text"] {height:30px; margin:1px; padding:0px 8px;border:solid 1px #ccc;line-height:36px; font-size:14px; vertical-align:middle; border-radius: 4px;}
|
||||
input[type="submit"] {height:28px;line-height:28px;}
|
||||
input[type="radio"],input[type="checkbox"] {width:25px ()25px;height:25px ()25px;}
|
||||
textarea {min-height:80px;padding:3px 8px;border:solid 1px #ccc;line-height:25px;font-size: 14px;}
|
||||
|
||||
@ -332,9 +332,14 @@ button[class^='btn-']:hover {text-decoration:none;}
|
||||
.bbs_view {position:relative; width:100%; border-top: 1px solid #334263;margin-bottom: 30px;}
|
||||
.tbl_form {width:100%; border:0; background-color: #fff; border-bottom: 0; table-layout:fixed; border-collapse: separate; margin-bottom:20px;}
|
||||
.tbl_form th, .tbl_form td {vertical-align: middle;}
|
||||
/* 2025.11.19 나혁제 높이변경 38=>32
|
||||
.tbl_form th {padding:6px 10px; height: 38px; text-align:center; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; background: #f3f5fd; font-size: 13.5px; font-weight: 500; color: #112469; letter-spacing:-0.5px;}
|
||||
.tbl_form th.non_bg {background: #fff; }
|
||||
.tbl_form td {padding:6px 10px; height: 38px; text-align:left; font-size:14px; color:#333; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc;}
|
||||
*/
|
||||
.tbl_form th {padding:6px 10px; height: 32px; text-align:center; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; background: #f3f5fd; font-size: 13.5px; font-weight: 500; color: #112469; letter-spacing:-0.5px;}
|
||||
.tbl_form td {padding:6px 10px; height: 32px; text-align:left; font-size:14px; color:#333; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc;}
|
||||
|
||||
.tbl_form th.non_bg {background: #fff; }
|
||||
.tbl_form thead th:last-child, .tbl_form th:last-child, .tbl_form td:last-child {border-right: 0;}
|
||||
.tbl_form thead th {padding:2px 10px 2px 10px; height: 34px; text-align:center; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; background: #f3f5fd; font-size: 13.5px; font-weight: 500; color: #112469; letter-spacing:-0.5px;}
|
||||
.tbl_form td label {vertical-align:top;padding-right:10px;}
|
||||
@ -567,10 +572,18 @@ td label.txt {margin: 0 5px;}
|
||||
.hidden {font-size: 0; width:0 !important; height: 0; line-height: 0; overflow: hidden; visibility: hidden; width: 0; position:absolute;}
|
||||
|
||||
/* index */
|
||||
/* 2025.11.14 나혁제 변경*/
|
||||
.main_img {width: 100%; height: 140px; max-width: 1400px; margin: 0 auto 10px; position: relative; display: block; box-sizing: border-box; padding:30px 20px 30px 90px;border-radius: 38px 0 0 0; background: #3842a9 url('../images/main/main_img.png') no-repeat 93% 50%;}
|
||||
.main_img:after {content:''; display:block; position:absolute; bottom:0; left:0; width:78px; height:137px; background:url('../images/main/main_img_left.png') no-repeat 0 100%;}
|
||||
.main_img .l_txt {display:block;padding-top:50px; font-size: 45px; font-weight:700; color: #fff; line-height:1.8em;padding-left:50px;}
|
||||
.main_img .m_txt {display:block;width: 100%; font-size: 22px; font-weight:400; color: #bfdfed; padding-left:50px;}
|
||||
|
||||
/*
|
||||
.main_img {width: 100%; height: 280px; max-width: 1400px; margin: 0 auto 40px; position: relative; display: block; box-sizing: border-box; padding:30px 20px 30px 90px;border-radius: 38px 0 0 0; background: #3842a9 url('../images/main/main_img.png') no-repeat 93% 100%;}
|
||||
.main_img:after {content:''; display:block; position:absolute; bottom:0; left:0; width:160px; height:280px; background:url('../images/main/main_img_left.png') no-repeat 0 0;}
|
||||
.main_img .l_txt {display:block;padding-top:50px; font-size: 45px; font-weight:700; color: #fff; line-height:1.8em;padding-left:50px;}
|
||||
.main_img .m_txt {display:block;width: 100%; font-size: 22px; font-weight:400; color: #bfdfed; padding-left:50px;}
|
||||
*/
|
||||
|
||||
/* 오늘의 할일, 업무공지 */
|
||||
.week_news_wrap {padding:0;width:100%;max-width: 1400px;margin: 0 auto; box-sizing: border-box;}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 16 KiB |
BIN
src/main/resources/static/images/main/main_img.png.20251114
Normal file
BIN
src/main/resources/static/images/main/main_img.png.20251114
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 6.0 KiB |
BIN
src/main/resources/static/images/main/main_img_left.png.20251114
Normal file
BIN
src/main/resources/static/images/main/main_img_left.png.20251114
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
3026
src/main/resources/static/js/amcharts5/CHANGELOG.md
Normal file
3026
src/main/resources/static/js/amcharts5/CHANGELOG.md
Normal file
File diff suppressed because it is too large
Load Diff
35
src/main/resources/static/js/amcharts5/LICENSE
Normal file
35
src/main/resources/static/js/amcharts5/LICENSE
Normal file
@ -0,0 +1,35 @@
|
||||
## Free amCharts license
|
||||
|
||||
This amCharts software is copyrighted by Antanas Marcelionis.
|
||||
|
||||
This amCharts software is provided under linkware license, conditions of which are outlined below.
|
||||
|
||||
### You can
|
||||
|
||||
* Use amCharts software in any of your projects, including commercial.
|
||||
* Modify amCharts software to suit your needs (source code is available at [here](https://github.com/amcharts/amcharts5)).
|
||||
* Bundle amCharts software with your own projects (free, open source, or commercial).
|
||||
|
||||
### If the following conditions are met
|
||||
|
||||
* You do not disable, hide or alter the branding link which is displayed on all the content generated by amCharts software.
|
||||
* You include this original LICENSE file together with original (or modified) files from amCharts software.
|
||||
* Your own personal license does not supersede or in any way negate the effect of this LICENSE, or make the impression of doing so.
|
||||
|
||||
### You can't
|
||||
|
||||
* Remove or alter this LICENSE file.
|
||||
* Remove any of the amCharts copyright notices from any of the files of amCharts software.
|
||||
* Use amCharts software without built-in attribution (logo). Please see note about commercial amCharts licenses below.
|
||||
* Sell or receive any compensation for amCharts software.
|
||||
* Distribute amCharts software on its own, not as part of other application.
|
||||
|
||||
### The above does not suit you?
|
||||
|
||||
amCharts provides commercial licenses for purchase for various usage scenarios that are not covered by the above conditions.
|
||||
|
||||
Please refer to [this web page](https://www.amcharts.com/online-store/) or [contact amCharts support](mailto:contact@amcharts.com) for further information.
|
||||
|
||||
### In doubt?
|
||||
|
||||
[Contact amCharts](mailto:contact@amcharts.com). We'll be happy to sort you out.
|
||||
29
src/main/resources/static/js/amcharts5/LICENSE-3RD-PARTY.md
Normal file
29
src/main/resources/static/js/amcharts5/LICENSE-3RD-PARTY.md
Normal file
@ -0,0 +1,29 @@
|
||||
# 3rd-party libraries used in amCharts 5
|
||||
|
||||
## Used in Core package
|
||||
|
||||
|Package|Copyright (c)|License|
|
||||
|-------|-------------|-------|
|
||||
|d3|Mike Bostock|[License](https://github.com/d3/d3/blob/master/LICENSE)|
|
||||
|d3-chord|Mike Bostock|[License](https://github.com/d3/d3-fchord/blob/master/LICENSE)|
|
||||
|d3-geo|Mike Bostock|[License](https://github.com/d3/d3-geo/blob/master/LICENSE)|
|
||||
|d3-geo-projection|Mike Bostock|[License](https://github.com/d3/d3-geo-projection/blob/master/LICENSE)|
|
||||
|d3-force|Mike Bostock|[License](https://github.com/d3/d3-force/blob/master/LICENSE)|
|
||||
|d3-sankey|Mike Bostock|[License](https://github.com/d3/d3-sankey/blob/master/LICENSE)|
|
||||
|d3-selection|Mike Bostock|[License](https://github.com/d3/d3-selection/blob/main/LICENSE)|
|
||||
|d3-transition|Mike Bostock|[License](https://github.com/d3/d3-transition/blob/main/LICENSE)|
|
||||
|d3-voronoi-treemap|LEBEAU Franck|[License](https://github.com/Kcnarf/d3-voronoi-treemap/blob/master/LICENSE)|
|
||||
|flatpickr|Gregory Petrosyan|[License](https://github.com/flatpickr/flatpickr/blob/master/LICENSE.md)|
|
||||
|polylabel|Mapbox|[License](https://github.com/mapbox/polylabel/blob/master/LICENSE)|
|
||||
|seedrandom|David Bau|[License](https://github.com/davidbau/seedrandom?tab=readme-ov-file#license-mit)|
|
||||
|svg-arc-to-cubic-bezier|Colin Meinke|[License](https://github.com/colinmeinke/svg-arc-to-cubic-bezier/blob/master/LICENSE.md)|
|
||||
|tslib|Microsoft|[License](https://github.com/microsoft/tslib/blob/master/LICENSE.txt)|
|
||||
|
||||
|
||||
## Used in optional plugins
|
||||
|
||||
|Package|Copyright (c)|License|
|
||||
|-------|-------------|-------|
|
||||
|pdfmake|bpampuch|[License](https://github.com/bpampuch/pdfmake/blob/master/LICENSE)|
|
||||
|SheetJS js-xlsx|SheetJS LLC|[License](https://github.com/SheetJS/js-xlsx/blob/master/LICENSE)|
|
||||
|marker.js 2|Alan Mendelevich|[License](https://github.com/ailon/markerjs2/blob/master/LICENSE)|
|
||||
72
src/main/resources/static/js/amcharts5/README.md
Normal file
72
src/main/resources/static/js/amcharts5/README.md
Normal file
@ -0,0 +1,72 @@
|
||||
## amCharts 5
|
||||
|
||||
amCharts 5 is the fastest, most advanced amCharts data vizualization library, ever.
|
||||
|
||||
For a short overview of features, visit [amCharts website](https://www.amcharts.com/).
|
||||
|
||||
|
||||
### Important notice about support
|
||||
|
||||
amCharts support is guaranteed for holders of amPlus subscription service.
|
||||
GitHub issues is not usually monitored by amCharts support staff and may not be
|
||||
answered. If you do have a license/subscription, you
|
||||
may [contact us directly](https://www.amcharts.com/support/support-info/priority-support/)
|
||||
for support. If you don't, here are
|
||||
[a few options](https://www.amcharts.com/support/support-info/free-support/)
|
||||
for you.
|
||||
|
||||
|
||||
### Documentation
|
||||
|
||||
For extensive documentation, including getting started tutorials, as well
|
||||
as class reference visit [amCharts 5 documentation website](https://www.amcharts.com/docs/v5).
|
||||
|
||||
|
||||
### amCharts 5 is available as
|
||||
|
||||
* [NPM package](https://www.npmjs.com/package/@amcharts/amcharts5)
|
||||
* [GitHub repository](https://github.com/amcharts/amcharts5)
|
||||
* [ZIP download & CDN info](https://www.amcharts.com/download/)
|
||||
|
||||
|
||||
### Related packages
|
||||
|
||||
This package inlcudes `MapChart` (geographical maps) functionality. However,
|
||||
it does not include geodata itself (map files) needed to instantiate the maps.
|
||||
|
||||
Those are available via separate package:
|
||||
|
||||
* [NPM package](https://www.npmjs.com/package/@amcharts/amcharts5-geodata)
|
||||
* [GitHub repository (geodata)](https://github.com/amcharts/amcharts5-geodata)
|
||||
* [ZIP download](https://www.amcharts.com/download/download/)
|
||||
|
||||
|
||||
### License
|
||||
|
||||
If you have a commercial amCharts 5 license, this software is covered by your
|
||||
license, which supersedes any other license bundled with this package.
|
||||
|
||||
If you don't have a commercial license, the use of this software is covered by
|
||||
a freeware license. Refer to included LICENSE file. The license is also
|
||||
[available online](https://github.com/amcharts/amcharts5/blob/master/packages/shared/LICENSE).
|
||||
|
||||
|
||||
### Creating translations
|
||||
|
||||
Please refer to [this tutorial](https://www.amcharts.com/docs/v5/concepts/locales/creating-translations//).
|
||||
|
||||
|
||||
### Changelog
|
||||
|
||||
* [amCharts 5 Changelog](https://github.com/amcharts/amcharts5/blob/master/CHANGELOG.md)
|
||||
* [Documentation Changelog](https://www.amcharts.com/docs/v5/changelog/)
|
||||
|
||||
|
||||
### Questions?
|
||||
|
||||
[Contact amCharts](mailto:contact@amcharts.com).
|
||||
|
||||
|
||||
### Found a bug?
|
||||
|
||||
Open an [issue](https://github.com/amcharts/amcharts5/issues).
|
||||
3
src/main/resources/static/js/amcharts5/deps/markerjs2.js
Normal file
3
src/main/resources/static/js/amcharts5/deps/markerjs2.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
3
src/main/resources/static/js/amcharts5/deps/pdfmake.js
Normal file
3
src/main/resources/static/js/amcharts5/deps/pdfmake.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
3
src/main/resources/static/js/amcharts5/deps/xlsx.js
Normal file
3
src/main/resources/static/js/amcharts5/deps/xlsx.js
Normal file
File diff suppressed because one or more lines are too long
1
src/main/resources/static/js/amcharts5/deps/xlsx.js.map
Normal file
1
src/main/resources/static/js/amcharts5/deps/xlsx.js.map
Normal file
File diff suppressed because one or more lines are too long
@ -0,0 +1,4 @@
|
||||
Steps to use
|
||||
============
|
||||
|
||||
1. Open `index.html` in a browser
|
||||
@ -0,0 +1,11 @@
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
#chartdiv {
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>amCharts 5 Example - flow-arc-horizontal</title>
|
||||
<link rel="stylesheet" href="index.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartdiv"></div>
|
||||
<script src="../../index.js"></script>
|
||||
<script src="../../flow.js"></script>
|
||||
<script src="../../themes/Animated.js"></script>
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,110 @@
|
||||
// Create root element
|
||||
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
|
||||
var root = am5.Root.new("chartdiv");
|
||||
|
||||
|
||||
// Set themes
|
||||
// https://www.amcharts.com/docs/v5/concepts/themes/
|
||||
root.setThemes([
|
||||
am5themes_Animated.new(root)
|
||||
]);
|
||||
|
||||
|
||||
// Create series
|
||||
// https://www.amcharts.com/docs/v5/charts/flow-charts/arc-diagram/
|
||||
var series = root.container.children.push(am5flow.ArcDiagram.new(root, {
|
||||
sourceIdField: "from",
|
||||
targetIdField: "to",
|
||||
valueField: "value",
|
||||
orientation: "horizontal"
|
||||
}));
|
||||
|
||||
|
||||
// Configure labels
|
||||
// https://www.amcharts.com/docs/v5/charts/flow-charts/arc-diagram/#Labels
|
||||
series.nodes.labels.template.setAll({
|
||||
fontSize: "0.85em",
|
||||
paddingLeft: 20,
|
||||
paddingRight: 20
|
||||
});
|
||||
|
||||
// Selectively position/rotate labels if they fit within node circle
|
||||
series.nodes.labels.template.adapters.add("x", function (x, target) {
|
||||
var dataItem = target.dataItem;
|
||||
if (dataItem) {
|
||||
if (dataItem.get("circle").get("radius") > 30) {
|
||||
target.set("centerX", am5.p50);
|
||||
target.set("rotation", 0);
|
||||
}
|
||||
else {
|
||||
target.set("centerX", 0);
|
||||
target.set("rotation", 90);
|
||||
}
|
||||
}
|
||||
return x;
|
||||
});
|
||||
|
||||
|
||||
// Set data
|
||||
// https://www.amcharts.com/docs/v5/charts/flow-charts/#Setting_data
|
||||
series.data.setAll([
|
||||
{ "from": "Monica", "to": "Rachel", "value": 4 },
|
||||
{ "from": "Monica", "to": "Chandler", "value": 63 },
|
||||
{ "from": "Monica", "to": "Ross", "value": 16 },
|
||||
{ "from": "Monica", "to": "Joey", "value": 9 },
|
||||
{ "from": "Monica", "to": "Phoebe", "value": 3 },
|
||||
{ "from": "Monica", "to": "Paul the wine guy", "value": 1 },
|
||||
{ "from": "Monica", "to": "Mr Geller", "value": 6 },
|
||||
{ "from": "Monica", "to": "Mrs Geller", "value": 5 },
|
||||
{ "from": "Monica", "to": "Pete", "value": 10 },
|
||||
{ "from": "Monica", "to": "Chip", "value": 1 },
|
||||
{ "from": "Monica", "to": "Timothy (Burke)", "value": 1 },
|
||||
{ "from": "Monica", "to": "Emily", "value": 1 },
|
||||
{ "from": "Monica", "to": "Dr. Roger", "value": 3 },
|
||||
{ "from": "Rachel", "to": "Chandler", "value": 7 },
|
||||
{ "from": "Rachel", "to": "Ross", "value": 80 },
|
||||
{ "from": "Rachel", "to": "Joey", "value": 30 },
|
||||
{ "from": "Rachel", "to": "Phoebe", "value": 6 },
|
||||
{ "from": "Rachel", "to": "Tag", "value": 4 },
|
||||
{ "from": "Rachel", "to": "Melissa", "value": 1 },
|
||||
{ "from": "Rachel", "to": "Gavin", "value": 2 },
|
||||
{ "from": "Chandler", "to": "Joey", "value": 1 },
|
||||
{ "from": "Chandler", "to": "Phoebe", "value": 7 },
|
||||
{ "from": "Chandler", "to": "Janice", "value": 11 },
|
||||
{ "from": "Chandler", "to": "Joanna", "value": 5 },
|
||||
{ "from": "Chandler", "to": "Kathy", "value": 7 },
|
||||
{ "from": "Chandler", "to": "Mr Bing", "value": 1 },
|
||||
{ "from": "Ross", "to": "Joey", "value": 3 },
|
||||
{ "from": "Ross", "to": "Phoebe", "value": 18 },
|
||||
{ "from": "Ross", "to": "Carol", "value": 10 },
|
||||
{ "from": "Ross", "to": "Mrs Geller", "value": 8 },
|
||||
{ "from": "Ross", "to": "Ben", "value": 6 },
|
||||
{ "from": "Ross", "to": "Emily", "value": 12 },
|
||||
{ "from": "Ross", "to": "Jill", "value": 1 },
|
||||
{ "from": "Ross", "to": "Elizabeth", "value": 8 },
|
||||
{ "from": "Ross", "to": "Aunt Millie", "value": 2 },
|
||||
{ "from": "Ross", "to": "Mona", "value": 11 },
|
||||
{ "from": "Ross", "to": "Emma", "value": 7 },
|
||||
{ "from": "Ross", "to": "Charlie", "value": 10 },
|
||||
{ "from": "Joey", "to": "Phoebe", "value": 6 },
|
||||
{ "from": "Joey", "to": "Janine", "value": 9 },
|
||||
{ "from": "Joey", "to": "Erin", "value": 1 },
|
||||
{ "from": "Joey", "to": "Cecilia", "value": 3 },
|
||||
{ "from": "Joey", "to": "Charlie", "value": 3 },
|
||||
{ "from": "Phoebe", "to": "David", "value": 14 },
|
||||
{ "from": "Phoebe", "to": "Roger", "value": 1 },
|
||||
{ "from": "Phoebe", "to": "Duncan", "value": 1 },
|
||||
{ "from": "Phoebe", "to": "Rob Dohnen", "value": 2 },
|
||||
{ "from": "Phoebe", "to": "Sergei", "value": 1 },
|
||||
{ "from": "Phoebe", "to": "Vince", "value": 2 },
|
||||
{ "from": "Phoebe", "to": "Mike", "value": 18 },
|
||||
{ "from": "Carol", "to": "Ben", "value": 1 },
|
||||
{ "from": "Carol", "to": "Susan", "value": 1 },
|
||||
{ "from": "Mr Geller", "to": "Mrs Geller", "value": 3 },
|
||||
{ "from": "Frank", "to": "Alice", "value": 5 }
|
||||
]);
|
||||
|
||||
|
||||
|
||||
// Make stuff animate on load
|
||||
series.appear(1000, 100);
|
||||
@ -0,0 +1,4 @@
|
||||
Steps to use
|
||||
============
|
||||
|
||||
1. Open `index.html` in a browser
|
||||
@ -0,0 +1,11 @@
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
#chartdiv {
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>amCharts 5 Example - flow-arc-vertical</title>
|
||||
<link rel="stylesheet" href="index.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartdiv"></div>
|
||||
<script src="../../index.js"></script>
|
||||
<script src="../../flow.js"></script>
|
||||
<script src="../../themes/Animated.js"></script>
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,84 @@
|
||||
// Create root element
|
||||
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
|
||||
var root = am5.Root.new("chartdiv");
|
||||
|
||||
|
||||
// Set themes
|
||||
// https://www.amcharts.com/docs/v5/concepts/themes/
|
||||
root.setThemes([
|
||||
am5themes_Animated.new(root)
|
||||
]);
|
||||
|
||||
|
||||
// Create series
|
||||
// https://www.amcharts.com/docs/v5/charts/flow-charts/arc-diagram/
|
||||
var series = root.container.children.push(am5flow.ArcDiagram.new(root, {
|
||||
sourceIdField: "from",
|
||||
targetIdField: "to",
|
||||
valueField: "value",
|
||||
orientation: "vertical"
|
||||
}));
|
||||
|
||||
// Configure labels
|
||||
// https://www.amcharts.com/docs/v5/charts/flow-charts/arc-diagram/#Labels
|
||||
series.nodes.labels.template.setAll({
|
||||
fontSize: "0.85em",
|
||||
paddingLeft: 20,
|
||||
paddingRight: 20,
|
||||
width: 160
|
||||
});
|
||||
|
||||
|
||||
// Animated bullets
|
||||
series.bullets.push(function(_root, _series, dataItem) {
|
||||
var bullet = am5.Bullet.new(root, {
|
||||
locationY: Math.random(),
|
||||
sprite: am5.Circle.new(root, {
|
||||
radius: 2,
|
||||
fill: dataItem.get("source").get("fill")
|
||||
})
|
||||
});
|
||||
|
||||
bullet.animate({
|
||||
key: "locationY",
|
||||
to: 1,
|
||||
from: 0,
|
||||
duration: Math.random() * 1000 + 2000,
|
||||
loops: Infinity
|
||||
});
|
||||
|
||||
return bullet;
|
||||
});
|
||||
|
||||
|
||||
// Set data
|
||||
// https://www.amcharts.com/docs/v5/charts/flow-charts/#Setting_data
|
||||
series.data.setAll([
|
||||
{ "from": "Monica", "to": "Rachel", "value": 4 },
|
||||
{ "from": "Monica", "to": "Chandler", "value": 63 },
|
||||
{ "from": "Monica", "to": "Ross", "value": 16 },
|
||||
{ "from": "Monica", "to": "Joey", "value": 9 },
|
||||
{ "from": "Rachel", "to": "Chandler", "value": 7 },
|
||||
{ "from": "Rachel", "to": "Ross", "value": 80 },
|
||||
{ "from": "Rachel", "to": "Joey", "value": 30 },
|
||||
{ "from": "Rachel", "to": "Phoebe", "value": 6 },
|
||||
{ "from": "Chandler", "to": "Phoebe", "value": 7 },
|
||||
{ "from": "Chandler", "to": "Janice", "value": 11 },
|
||||
{ "from": "Chandler", "to": "Joanna", "value": 5 },
|
||||
{ "from": "Chandler", "to": "Kathy", "value": 7 },
|
||||
{ "from": "Monica", "to": "Pete", "value": 10 },
|
||||
{ "from": "Ross", "to": "Joey", "value": 3 },
|
||||
{ "from": "Ross", "to": "Phoebe", "value": 18 },
|
||||
{ "from": "Ross", "to": "Carol", "value": 10 },
|
||||
{ "from": "Ross", "to": "Mrs Geller", "value": 8 },
|
||||
{ "from": "Ross", "to": "Emily", "value": 12 },
|
||||
{ "from": "Ross", "to": "Elizabeth", "value": 8 },
|
||||
{ "from": "Ross", "to": "Mona", "value": 11 },
|
||||
{ "from": "Joey", "to": "Phoebe", "value": 6 },
|
||||
{ "from": "Phoebe", "to": "David", "value": 14 },
|
||||
{ "from": "Phoebe", "to": "Mike", "value": 18 }
|
||||
]);
|
||||
|
||||
|
||||
// Make stuff animate on load
|
||||
series.appear(1000, 100);
|
||||
@ -0,0 +1,4 @@
|
||||
Steps to use
|
||||
============
|
||||
|
||||
1. Open `index.html` in a browser
|
||||
@ -0,0 +1,11 @@
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
#chartdiv {
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>amCharts 5 Example - flow-chord-directed</title>
|
||||
<link rel="stylesheet" href="index.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartdiv"></div>
|
||||
<script src="../../index.js"></script>
|
||||
<script src="../../flow.js"></script>
|
||||
<script src="../../themes/Animated.js"></script>
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,149 @@
|
||||
// Create root element
|
||||
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
|
||||
var root = am5.Root.new("chartdiv");
|
||||
|
||||
|
||||
// Set themes
|
||||
// https://www.amcharts.com/docs/v5/concepts/themes/
|
||||
root.setThemes([
|
||||
am5themes_Animated.new(root)
|
||||
]);
|
||||
|
||||
|
||||
// Create series
|
||||
// https://www.amcharts.com/docs/v5/charts/flow-charts/
|
||||
var series = root.container.children.push(am5flow.ChordDirected.new(root, {
|
||||
startAngle: 80,
|
||||
padAngle: 1,
|
||||
linkHeadRadius: null,
|
||||
sourceIdField: "from",
|
||||
targetIdField: "to",
|
||||
valueField: "value"
|
||||
}));
|
||||
|
||||
series.nodes.labels.template.setAll({
|
||||
textType: "radial",
|
||||
centerX: 0,
|
||||
fontSize: 9
|
||||
});
|
||||
|
||||
series.links.template.set("fillStyle", "source");
|
||||
|
||||
|
||||
// Set data
|
||||
// https://www.amcharts.com/docs/v5/charts/flow-charts/#Setting_data
|
||||
series.data.setAll([
|
||||
{ "from": "Monica", "to": "Rachel", "value": 4 },
|
||||
{ "from": "Monica", "to": "Chandler", "value": 113 },
|
||||
{ "from": "Monica", "to": "Ross", "value": 16 },
|
||||
{ "from": "Monica", "to": "Joey", "value": 9 },
|
||||
{ "from": "Monica", "to": "Phoebe", "value": 3 },
|
||||
{ "from": "Monica", "to": "Paul the wine guy", "value": 1 },
|
||||
{ "from": "Monica", "to": "Mr Geller", "value": 6 },
|
||||
{ "from": "Monica", "to": "Mrs Geller", "value": 5 },
|
||||
{ "from": "Monica", "to": "Aunt Lilian", "value": 1 },
|
||||
{ "from": "Monica", "to": "Nana", "value": 1 },
|
||||
{ "from": "Monica", "to": "Young Ethan", "value": 5 },
|
||||
{ "from": "Monica", "to": "Ben", "value": 3 },
|
||||
{ "from": "Monica", "to": "Fun Bobby", "value": 3 },
|
||||
{ "from": "Monica", "to": "Richard", "value": 16 },
|
||||
{ "from": "Monica", "to": "Mrs Green", "value": 1 },
|
||||
{ "from": "Monica", "to": "Paolo2", "value": 1 },
|
||||
{ "from": "Monica", "to": "Pete", "value": 10 },
|
||||
{ "from": "Monica", "to": "Chip", "value": 1 },
|
||||
{ "from": "Monica", "to": "Timothy (Burke)", "value": 1 },
|
||||
{ "from": "Monica", "to": "Emily", "value": 1 },
|
||||
{ "from": "Monica", "to": "Dr. Roger", "value": 3 },
|
||||
{ "from": "Rachel", "to": "Chandler", "value": 7 },
|
||||
{ "from": "Rachel", "to": "Ross", "value": 80 },
|
||||
{ "from": "Rachel", "to": "Joey", "value": 30 },
|
||||
{ "from": "Rachel", "to": "Phoebe", "value": 6 },
|
||||
{ "from": "Rachel", "to": "Paolo", "value": 5 },
|
||||
{ "from": "Rachel", "to": "Mr Geller", "value": 2 },
|
||||
{ "from": "Rachel", "to": "Mrs Geller", "value": 1 },
|
||||
{ "from": "Rachel", "to": "Barry", "value": 1 },
|
||||
{ "from": "Rachel", "to": "Dr Green", "value": 3 },
|
||||
{ "from": "Rachel", "to": "Mark3", "value": 1 },
|
||||
{ "from": "Rachel", "to": "Josh", "value": 2 },
|
||||
{ "from": "Rachel", "to": "Gunther", "value": 1 },
|
||||
{ "from": "Rachel", "to": "Joshua", "value": 3 },
|
||||
{ "from": "Rachel", "to": "Danny", "value": 1 },
|
||||
{ "from": "Rachel", "to": "Mr. Zelner", "value": 1 },
|
||||
{ "from": "Rachel", "to": "Paul Stevens", "value": 3 },
|
||||
{ "from": "Rachel", "to": "Tag", "value": 4 },
|
||||
{ "from": "Rachel", "to": "Melissa", "value": 1 },
|
||||
{ "from": "Rachel", "to": "Gavin", "value": 2 },
|
||||
{ "from": "Chandler", "to": "Joey", "value": 1 },
|
||||
{ "from": "Chandler", "to": "Phoebe", "value": 7 },
|
||||
{ "from": "Chandler", "to": "Aurora", "value": 2 },
|
||||
{ "from": "Chandler", "to": "Jill Goodacre", "value": 1 },
|
||||
{ "from": "Chandler", "to": "Janice", "value": 11 },
|
||||
{ "from": "Chandler", "to": "Mrs Bing", "value": 3 },
|
||||
{ "from": "Chandler", "to": "Nina", "value": 1 },
|
||||
{ "from": "Chandler", "to": "Susie", "value": 5 },
|
||||
{ "from": "Chandler", "to": "Mary Theresa", "value": 1 },
|
||||
{ "from": "Chandler", "to": "Ginger", "value": 2 },
|
||||
{ "from": "Chandler", "to": "Joanna", "value": 5 },
|
||||
{ "from": "Chandler", "to": "Kathy", "value": 7 },
|
||||
{ "from": "Chandler", "to": "Mr Bing", "value": 1 },
|
||||
{ "from": "Ross", "to": "Joey", "value": 3 },
|
||||
{ "from": "Ross", "to": "Phoebe", "value": 18 },
|
||||
{ "from": "Ross", "to": "Carol", "value": 10 },
|
||||
{ "from": "Ross", "to": "Mrs Geller", "value": 8 },
|
||||
{ "from": "Ross", "to": "Aunt Lilian", "value": 1 },
|
||||
{ "from": "Ross", "to": "Mrs Bing", "value": 3 },
|
||||
{ "from": "Ross", "to": "Celia", "value": 2 },
|
||||
{ "from": "Ross", "to": "Julie", "value": 6 },
|
||||
{ "from": "Ross", "to": "Ben", "value": 6 },
|
||||
{ "from": "Ross", "to": "Mrs Green", "value": 2 },
|
||||
{ "from": "Ross", "to": "Chloe", "value": 1 },
|
||||
{ "from": "Ross", "to": "Bonnie", "value": 4 },
|
||||
{ "from": "Ross", "to": "Messy Girl (Cheryl)", "value": 5 },
|
||||
{ "from": "Ross", "to": "Emily", "value": 12 },
|
||||
{ "from": "Ross", "to": "Jill", "value": 1 },
|
||||
{ "from": "Ross", "to": "Elizabeth", "value": 8 },
|
||||
{ "from": "Ross", "to": "Aunt Millie", "value": 2 },
|
||||
{ "from": "Ross", "to": "Mona", "value": 11 },
|
||||
{ "from": "Ross", "to": "Emma", "value": 7 },
|
||||
{ "from": "Ross", "to": "Charlie", "value": 10 },
|
||||
{ "from": "Joey", "to": "Phoebe", "value": 6 },
|
||||
{ "from": "Joey", "to": "Janice", "value": 1 },
|
||||
{ "from": "Joey", "to": "Lorraine", "value": 2 },
|
||||
{ "from": "Joey", "to": "Melanie", "value": 2 },
|
||||
{ "from": "Joey", "to": "Erica", "value": 2 },
|
||||
{ "from": "Joey", "to": "Mrs Green", "value": 1 },
|
||||
{ "from": "Joey", "to": "Kate", "value": 4 },
|
||||
{ "from": "Joey", "to": "Lauren", "value": 2 },
|
||||
{ "from": "Joey", "to": "Estelle", "value": 1 },
|
||||
{ "from": "Joey", "to": "Kathy", "value": 2 },
|
||||
{ "from": "Joey", "to": "Emily", "value": 4 },
|
||||
{ "from": "Joey", "to": "Katie", "value": 2 },
|
||||
{ "from": "Joey", "to": "Janine", "value": 9 },
|
||||
{ "from": "Joey", "to": "Erin", "value": 1 },
|
||||
{ "from": "Joey", "to": "Cecilia", "value": 3 },
|
||||
{ "from": "Joey", "to": "Charlie", "value": 3 },
|
||||
{ "from": "Phoebe", "to": "David", "value": 14 },
|
||||
{ "from": "Phoebe", "to": "Roger", "value": 1 },
|
||||
{ "from": "Phoebe", "to": "Duncan", "value": 1 },
|
||||
{ "from": "Phoebe", "to": "Rob Dohnen", "value": 2 },
|
||||
{ "from": "Phoebe", "to": "Ryan", "value": 5 },
|
||||
{ "from": "Phoebe", "to": "Malcom", "value": 1 },
|
||||
{ "from": "Phoebe", "to": "Robert", "value": 1 },
|
||||
{ "from": "Phoebe", "to": "Sergei", "value": 1 },
|
||||
{ "from": "Phoebe", "to": "Vince", "value": 2 },
|
||||
{ "from": "Phoebe", "to": "Jason", "value": 1 },
|
||||
{ "from": "Phoebe", "to": "Rick", "value": 2 },
|
||||
{ "from": "Phoebe", "to": "Gunther", "value": 1 },
|
||||
{ "from": "Phoebe", "to": "Gary", "value": 7 },
|
||||
{ "from": "Phoebe", "to": "Jake", "value": 2 },
|
||||
{ "from": "Phoebe", "to": "Eric", "value": 3 },
|
||||
{ "from": "Phoebe", "to": "Mike", "value": 18 },
|
||||
{ "from": "Carol", "to": "Ben", "value": 1 },
|
||||
{ "from": "Carol", "to": "Susan", "value": 1 },
|
||||
{ "from": "Mr Geller", "to": "Mrs Geller", "value": 3 },
|
||||
{ "from": "Frank", "to": "Alice", "value": 5 }
|
||||
]);
|
||||
|
||||
|
||||
// Make stuff animate on load
|
||||
series.appear(1000, 100);
|
||||
@ -0,0 +1,4 @@
|
||||
Steps to use
|
||||
============
|
||||
|
||||
1. Open `index.html` in a browser
|
||||
@ -0,0 +1,11 @@
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
#chartdiv {
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>amCharts 5 Example - flow-chord-non-ribbon</title>
|
||||
<link rel="stylesheet" href="index.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartdiv"></div>
|
||||
<script src="../../index.js"></script>
|
||||
<script src="../../flow.js"></script>
|
||||
<script src="../../themes/Animated.js"></script>
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,84 @@
|
||||
// Create root element
|
||||
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
|
||||
var root = am5.Root.new("chartdiv");
|
||||
|
||||
|
||||
// Set themes
|
||||
// https://www.amcharts.com/docs/v5/concepts/themes/
|
||||
root.setThemes([
|
||||
am5themes_Animated.new(root)
|
||||
]);
|
||||
|
||||
|
||||
// Create series
|
||||
// https://www.amcharts.com/docs/v5/charts/flow-charts/
|
||||
var series = root.container.children.push(am5flow.ChordNonRibbon.new(root, {
|
||||
sourceIdField: "from",
|
||||
targetIdField: "to",
|
||||
valueField: "value"
|
||||
}));
|
||||
|
||||
series.nodes.get("colors").set("step", 2);
|
||||
|
||||
series.bullets.push(function (_root, _series, dataItem) {
|
||||
var bullet = am5.Bullet.new(root, {
|
||||
locationY: Math.random(),
|
||||
sprite: am5.Circle.new(root, {
|
||||
radius: 5,
|
||||
fill: dataItem.get("source").get("fill")
|
||||
})
|
||||
});
|
||||
|
||||
bullet.animate({
|
||||
key: "locationY",
|
||||
to: 1,
|
||||
from: 0,
|
||||
duration: Math.random() * 1000 + 2000,
|
||||
loops: Infinity,
|
||||
easing: am5.ease.yoyo(am5.ease.cubic)
|
||||
});
|
||||
|
||||
return bullet;
|
||||
});
|
||||
|
||||
series.nodes.labels.template.setAll({
|
||||
textType: "regular",
|
||||
fill: root.interfaceColors.get("background"),
|
||||
fontSize: "1.1em",
|
||||
radius: -5
|
||||
});
|
||||
|
||||
series.nodes.labels.template.states.create("disabled", { fill: am5.color(0xffffff) });
|
||||
|
||||
series.nodes.bullets.push(function(_root, _series, dataItem) {
|
||||
var sprite = am5.Circle.new(root, {
|
||||
radius: 20,
|
||||
fill: dataItem.get("fill")
|
||||
});
|
||||
|
||||
sprite.states.create("hidden", { fill: root.interfaceColors.get("disabled") })
|
||||
|
||||
return am5.Bullet.new(root, {
|
||||
sprite: sprite
|
||||
});
|
||||
});
|
||||
|
||||
series.children.moveValue(series.bulletsContainer, 0);
|
||||
|
||||
|
||||
// Set data
|
||||
// https://www.amcharts.com/docs/v5/charts/flow-charts/#Setting_data
|
||||
series.data.setAll([
|
||||
{ from: "A", to: "D", value: 10 },
|
||||
{ from: "B", to: "D", value: 8 },
|
||||
{ from: "B", to: "E", value: 4 },
|
||||
{ from: "B", to: "C", value: 2 },
|
||||
{ from: "C", to: "E", value: 14 },
|
||||
{ from: "E", to: "D", value: 8 },
|
||||
{ from: "C", to: "A", value: 4 },
|
||||
{ from: "G", to: "A", value: 7 }
|
||||
]);
|
||||
|
||||
|
||||
// Make stuff animate on load
|
||||
series.appear(1000, 100);
|
||||
@ -0,0 +1,4 @@
|
||||
Steps to use
|
||||
============
|
||||
|
||||
1. Open `index.html` in a browser
|
||||
@ -0,0 +1,11 @@
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
#chartdiv {
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>amCharts 5 Example - flow-chord</title>
|
||||
<link rel="stylesheet" href="index.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartdiv"></div>
|
||||
<script src="../../index.js"></script>
|
||||
<script src="../../flow.js"></script>
|
||||
<script src="../../themes/Animated.js"></script>
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,54 @@
|
||||
// Create root element
|
||||
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
|
||||
var root = am5.Root.new("chartdiv");
|
||||
|
||||
|
||||
// Set themes
|
||||
// https://www.amcharts.com/docs/v5/concepts/themes/
|
||||
root.setThemes([
|
||||
am5themes_Animated.new(root)
|
||||
]);
|
||||
|
||||
|
||||
// Create series
|
||||
// https://www.amcharts.com/docs/v5/charts/flow-charts/
|
||||
var series = root.container.children.push(am5flow.Chord.new(root, {
|
||||
sourceIdField: "source",
|
||||
targetIdField: "target",
|
||||
valueField: "value"
|
||||
}));
|
||||
series.nodes.get("colors").set("step", 2);
|
||||
|
||||
|
||||
// Set data
|
||||
// https://www.amcharts.com/docs/v5/charts/flow-charts/#Setting_data
|
||||
series.data.setAll([
|
||||
{ source: "Berlin", target: "Amsterdam", value: 14 },
|
||||
{ source: "Berlin", target: "London", value: 33 },
|
||||
{ source: "Berlin", target: "Paris", value: 13 },
|
||||
{ source: "Berlin", target: "Madrid", value: 36 },
|
||||
|
||||
{ source: "Amsterdam", target: "Berlin", value: 42 },
|
||||
{ source: "Amsterdam", target: "London", value: 20 },
|
||||
{ source: "Amsterdam", target: "Paris", value: 19 },
|
||||
{ source: "Amsterdam", target: "Madrid", value: 11 },
|
||||
|
||||
{ source: "London", target: "Amsterdam", value: 9 },
|
||||
{ source: "London", target: "Berlin", value: 38 },
|
||||
{ source: "London", target: "Paris", value: 41 },
|
||||
{ source: "London", target: "Madrid", value: 16 },
|
||||
|
||||
{ source: "Paris", target: "Amsterdam", value: 12 },
|
||||
{ source: "Paris", target: "London", value: 16 },
|
||||
{ source: "Paris", target: "Berlin", value: 21 },
|
||||
{ source: "Paris", target: "Madrid", value: 8 },
|
||||
|
||||
{ source: "Madrid", target: "Amsterdam", value: 22 },
|
||||
{ source: "Madrid", target: "London", value: 25 },
|
||||
{ source: "Madrid", target: "Paris", value: 19 },
|
||||
{ source: "Madrid", target: "Berlin", value: 7 }
|
||||
]);
|
||||
|
||||
|
||||
// Make stuff animate on load
|
||||
series.appear(1000, 100);
|
||||
@ -0,0 +1,4 @@
|
||||
Steps to use
|
||||
============
|
||||
|
||||
1. Open `index.html` in a browser
|
||||
@ -0,0 +1,11 @@
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
#chartdiv {
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>amCharts 5 Example - flow-sankey</title>
|
||||
<link rel="stylesheet" href="index.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartdiv"></div>
|
||||
<script src="../../index.js"></script>
|
||||
<script src="../../flow.js"></script>
|
||||
<script src="../../themes/Animated.js"></script>
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,43 @@
|
||||
// Create root element
|
||||
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
|
||||
var root = am5.Root.new("chartdiv");
|
||||
|
||||
|
||||
// Set themes
|
||||
// https://www.amcharts.com/docs/v5/concepts/themes/
|
||||
root.setThemes([
|
||||
am5themes_Animated.new(root)
|
||||
]);
|
||||
|
||||
|
||||
// Create series
|
||||
// https://www.amcharts.com/docs/v5/charts/flow-charts/
|
||||
var series = root.container.children.push(am5flow.Sankey.new(root, {
|
||||
sourceIdField: "from",
|
||||
targetIdField: "to",
|
||||
valueField: "value",
|
||||
paddingRight: 50
|
||||
}));
|
||||
|
||||
series.nodes.get("colors").set("step", 2);
|
||||
|
||||
|
||||
// Set data
|
||||
// https://www.amcharts.com/docs/v5/charts/flow-charts/#Setting_data
|
||||
series.data.setAll([
|
||||
{ from: "A", to: "D", value: 10 },
|
||||
{ from: "B", to: "D", value: 8 },
|
||||
{ from: "B", to: "E", value: 4 },
|
||||
{ from: "C", to: "E", value: 3 },
|
||||
{ from: "D", to: "G", value: 5 },
|
||||
{ from: "D", to: "I", value: 2 },
|
||||
{ from: "D", to: "H", value: 3 },
|
||||
{ from: "E", to: "H", value: 6 },
|
||||
{ from: "G", to: "J", value: 5 },
|
||||
{ from: "I", to: "J", value: 1 },
|
||||
{ from: "H", to: "J", value: 9 }
|
||||
]);
|
||||
|
||||
|
||||
// Make stuff animate on load
|
||||
series.appear(1000, 100);
|
||||
@ -0,0 +1,4 @@
|
||||
Steps to use
|
||||
============
|
||||
|
||||
1. Open `index.html` in a browser
|
||||
@ -0,0 +1,11 @@
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
#chartdiv {
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>amCharts 5 Example - gantt-multilevel</title>
|
||||
<link rel="stylesheet" href="index.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartdiv"></div>
|
||||
<script src="../../index.js"></script>
|
||||
<script src="../../xy.js"></script>
|
||||
<script src="../../plugins/colorPicker.js"></script>
|
||||
<script src="../../gantt.js"></script>
|
||||
<script src="../../themes/Animated.js"></script>
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,85 @@
|
||||
// Create root element
|
||||
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
|
||||
var root = am5.Root.new("chartdiv");
|
||||
|
||||
// Set themes
|
||||
// https://www.amcharts.com/docs/v5/concepts/themes/
|
||||
root.setThemes([
|
||||
am5themes_Animated.new(root)
|
||||
]);
|
||||
|
||||
// Create Gantt chart
|
||||
// https://www.amcharts.com/docs/v5/charts/gantt/
|
||||
var gantt = root.container.children.push(am5gantt.Gantt.new(root, {}));
|
||||
|
||||
// Set category data
|
||||
// https://www.amcharts.com/docs/v5/charts/gantt/#Category_data
|
||||
gantt.yAxis.data.setAll([{
|
||||
name: "Idea",
|
||||
id: "gantt_0"
|
||||
}, {
|
||||
name: "Kick-off",
|
||||
id: "gantt_1"
|
||||
}, {
|
||||
name: "Planning",
|
||||
id: "gantt_2"
|
||||
}, {
|
||||
name: "Development",
|
||||
id: "gantt_3"
|
||||
}, {
|
||||
name: "Testing",
|
||||
id: "gantt_4"
|
||||
}, {
|
||||
name: "Finalization",
|
||||
id: "gantt_5"
|
||||
}, {
|
||||
name: "Release",
|
||||
id: "gantt_6"
|
||||
}]);
|
||||
|
||||
// Set series data
|
||||
// https://www.amcharts.com/docs/v5/charts/gantt/#Series_data
|
||||
gantt.series.data.setAll([{
|
||||
start: 1758142800000,
|
||||
duration: 0,
|
||||
progress: 1,
|
||||
id: "gantt_0",
|
||||
linkTo: ["gantt_1"]
|
||||
}, {
|
||||
start: 1758142800000,
|
||||
duration: 2,
|
||||
progress: 1,
|
||||
id: "gantt_1",
|
||||
linkTo: ["gantt_2"]
|
||||
}, {
|
||||
start: 1758488400000,
|
||||
duration: 2,
|
||||
progress: 0.2,
|
||||
id: "gantt_2",
|
||||
linkTo: ["gantt_3"]
|
||||
}, {
|
||||
start: 1758661200000,
|
||||
duration: 1,
|
||||
progress: 0.8,
|
||||
id: "gantt_3",
|
||||
linkTo: ["gantt_4"]
|
||||
}, {
|
||||
start: 1758747600000,
|
||||
duration: 3,
|
||||
progress: 0,
|
||||
id: "gantt_4",
|
||||
linkTo: ["gantt_5"]
|
||||
}, {
|
||||
start: 1759179600000,
|
||||
duration: 0,
|
||||
progress: 0,
|
||||
id: "gantt_5",
|
||||
linkTo: ["gantt_6"]
|
||||
}, {
|
||||
start: 1759179600000,
|
||||
duration: 4,
|
||||
progress: 0,
|
||||
id: "gantt_6"
|
||||
}]);
|
||||
|
||||
gantt.appear();
|
||||
@ -0,0 +1,4 @@
|
||||
Steps to use
|
||||
============
|
||||
|
||||
1. Open `index.html` in a browser
|
||||
@ -0,0 +1,11 @@
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
#chartdiv {
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>amCharts 5 Example - gantt-simple</title>
|
||||
<link rel="stylesheet" href="index.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartdiv"></div>
|
||||
<script src="../../index.js"></script>
|
||||
<script src="../../xy.js"></script>
|
||||
<script src="../../plugins/colorPicker.js"></script>
|
||||
<script src="../../gantt.js"></script>
|
||||
<script src="../../themes/Animated.js"></script>
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,85 @@
|
||||
// Create root element
|
||||
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
|
||||
var root = am5.Root.new("chartdiv");
|
||||
|
||||
// Set themes
|
||||
// https://www.amcharts.com/docs/v5/concepts/themes/
|
||||
root.setThemes([
|
||||
am5themes_Animated.new(root)
|
||||
]);
|
||||
|
||||
// Create Gantt chart
|
||||
// https://www.amcharts.com/docs/v5/charts/gantt/
|
||||
var gantt = root.container.children.push(am5gantt.Gantt.new(root, {}));
|
||||
|
||||
// Set category data
|
||||
// https://www.amcharts.com/docs/v5/charts/gantt/#Category_data
|
||||
gantt.yAxis.data.setAll([{
|
||||
name: "Idea",
|
||||
id: "gantt_0"
|
||||
}, {
|
||||
name: "Kick-off",
|
||||
id: "gantt_1"
|
||||
}, {
|
||||
name: "Planning",
|
||||
id: "gantt_2"
|
||||
}, {
|
||||
name: "Development",
|
||||
id: "gantt_3"
|
||||
}, {
|
||||
name: "Testing",
|
||||
id: "gantt_4"
|
||||
}, {
|
||||
name: "Finalization",
|
||||
id: "gantt_5"
|
||||
}, {
|
||||
name: "Release",
|
||||
id: "gantt_6"
|
||||
}]);
|
||||
|
||||
// Set series data
|
||||
// https://www.amcharts.com/docs/v5/charts/gantt/#Series_data
|
||||
gantt.series.data.setAll([{
|
||||
start: 1758142800000,
|
||||
duration: 0,
|
||||
progress: 0,
|
||||
id: "gantt_0",
|
||||
linkTo: ["gantt_1"]
|
||||
}, {
|
||||
start: 1758142800000,
|
||||
duration: 2,
|
||||
progress: 0,
|
||||
id: "gantt_1",
|
||||
linkTo: ["gantt_2"]
|
||||
}, {
|
||||
start: 1758488400000,
|
||||
duration: 2,
|
||||
progress: 0,
|
||||
id: "gantt_2",
|
||||
linkTo: ["gantt_3"]
|
||||
}, {
|
||||
start: 1758661200000,
|
||||
duration: 1,
|
||||
progress: 0,
|
||||
id: "gantt_3",
|
||||
linkTo: ["gantt_4"]
|
||||
}, {
|
||||
start: 1758747600000,
|
||||
duration: 3,
|
||||
progress: 0,
|
||||
id: "gantt_4",
|
||||
linkTo: ["gantt_5"]
|
||||
}, {
|
||||
start: 1759179600000,
|
||||
duration: 0,
|
||||
progress: 0,
|
||||
id: "gantt_5",
|
||||
linkTo: ["gantt_6"]
|
||||
}, {
|
||||
start: 1759179600000,
|
||||
duration: 4,
|
||||
progress: 0,
|
||||
id: "gantt_6"
|
||||
}]);
|
||||
|
||||
gantt.appear();
|
||||
@ -0,0 +1,4 @@
|
||||
Steps to use
|
||||
============
|
||||
|
||||
1. Open `index.html` in a browser
|
||||
@ -0,0 +1,11 @@
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
#chartdiv {
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>amCharts 5 Example - gantt</title>
|
||||
<link rel="stylesheet" href="index.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartdiv"></div>
|
||||
<script src="../../index.js"></script>
|
||||
<script src="../../xy.js"></script>
|
||||
<script src="../../plugins/colorPicker.js"></script>
|
||||
<script src="../../gantt.js"></script>
|
||||
<script src="../../themes/Animated.js"></script>
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
223
src/main/resources/static/js/amcharts5/examples/gantt/index.js
Normal file
223
src/main/resources/static/js/amcharts5/examples/gantt/index.js
Normal file
@ -0,0 +1,223 @@
|
||||
// Create root element
|
||||
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
|
||||
var root = am5.Root.new("chartdiv");
|
||||
|
||||
// Set themes
|
||||
// https://www.amcharts.com/docs/v5/concepts/themes/
|
||||
root.setThemes([
|
||||
am5themes_Animated.new(root)
|
||||
]);
|
||||
|
||||
// Create Gantt chart
|
||||
// https://www.amcharts.com/docs/v5/charts/gantt/
|
||||
var gantt = root.container.children.push(am5gantt.Gantt.new(root, {}));
|
||||
|
||||
// Default data
|
||||
var categoryData = [{
|
||||
name: "Start",
|
||||
id: "gantt_0"
|
||||
}, {
|
||||
name: "Design",
|
||||
id: "gantt_1"
|
||||
}, {
|
||||
name: "Review",
|
||||
id: "gantt_2",
|
||||
parentId: "gantt_1",
|
||||
}, {
|
||||
name: "User tests",
|
||||
id: "gantt_3",
|
||||
parentId: "gantt_1",
|
||||
}, {
|
||||
name: "Programming",
|
||||
id: "gantt_4"
|
||||
}, {
|
||||
name: "Task delegation",
|
||||
id: "gantt_5",
|
||||
parentId: "gantt_4",
|
||||
}, {
|
||||
name: "Coding",
|
||||
id: "gantt_6",
|
||||
parentId: "gantt_4",
|
||||
}, {
|
||||
name: "Testing",
|
||||
id: "gantt_7",
|
||||
parentId: "gantt_4",
|
||||
}, {
|
||||
name: "Deploying",
|
||||
id: "gantt_8",
|
||||
parentId: "gantt_4",
|
||||
}, {
|
||||
name: "Testing",
|
||||
id: "gantt_9"
|
||||
}, {
|
||||
name: "Phase 1",
|
||||
id: "gantt_10",
|
||||
parentId: "gantt_9",
|
||||
}, {
|
||||
name: "Phase 2",
|
||||
id: "gantt_11",
|
||||
parentId: "gantt_9",
|
||||
}, {
|
||||
name: "Phase 3",
|
||||
id: "gantt_12",
|
||||
parentId: "gantt_9",
|
||||
}, {
|
||||
name: "End",
|
||||
id: "gantt_15"
|
||||
}];
|
||||
|
||||
var seriesData = [{
|
||||
start: 1758229200000,
|
||||
duration: 0,
|
||||
progress: 0,
|
||||
id: "gantt_0",
|
||||
linkTo: ["gantt_1"]
|
||||
}, {
|
||||
"category": "gantt_1",
|
||||
progress: 0,
|
||||
id: "gantt_1",
|
||||
linkTo: ["gantt_4"]
|
||||
}, {
|
||||
"category": "gantt_2",
|
||||
start: 1758488400000,
|
||||
duration: 1,
|
||||
progress: 1,
|
||||
id: "gantt_2",
|
||||
linkTo: ["gantt_3"]
|
||||
}, {
|
||||
"category": "gantt_3",
|
||||
start: 1758574800000,
|
||||
duration: 1,
|
||||
progress: 1,
|
||||
id: "gantt_3",
|
||||
linkTo: []
|
||||
}, {
|
||||
"category": "gantt_4",
|
||||
progress: 0,
|
||||
id: "gantt_4",
|
||||
linkTo: ["gantt_9"]
|
||||
}, {
|
||||
"category": "gantt_5",
|
||||
start: 1758747600000,
|
||||
duration: 1,
|
||||
progress: 1,
|
||||
id: "gantt_5",
|
||||
linkTo: ["gantt_6"]
|
||||
}, {
|
||||
"category": "gantt_6",
|
||||
start: 1758834000000,
|
||||
duration: 2,
|
||||
progress: 0.4956235693230202,
|
||||
id: "gantt_6",
|
||||
linkTo: ["gantt_7"]
|
||||
}, {
|
||||
"category": "gantt_7",
|
||||
start: 1759179600000,
|
||||
duration: 1,
|
||||
progress: 0,
|
||||
id: "gantt_7",
|
||||
linkTo: ["gantt_8"]
|
||||
}, {
|
||||
"category": "gantt_8",
|
||||
start: 1759266000000,
|
||||
duration: 2,
|
||||
progress: 0,
|
||||
id: "gantt_8"
|
||||
}, {
|
||||
"category": "gantt_9",
|
||||
progress: 0,
|
||||
id: "gantt_9",
|
||||
linkTo: ["gantt_15"]
|
||||
}, {
|
||||
"category": "gantt_10",
|
||||
start: 1759438800000,
|
||||
duration: 1,
|
||||
progress: 0,
|
||||
id: "gantt_10",
|
||||
linkTo: ["gantt_11"]
|
||||
}, {
|
||||
"category": "gantt_11",
|
||||
start: 1759698000000,
|
||||
duration: 1,
|
||||
progress: 0,
|
||||
id: "gantt_11",
|
||||
linkTo: ["gantt_12"]
|
||||
}, {
|
||||
"category": "gantt_12",
|
||||
start: 1759784400000,
|
||||
duration: 2,
|
||||
progress: 0,
|
||||
id: "gantt_12"
|
||||
}, {
|
||||
start: 1760302800000,
|
||||
duration: 0,
|
||||
progress: 0,
|
||||
id: "gantt_15"
|
||||
}];
|
||||
|
||||
var markedDates = [1758661200000, 1759352400000];
|
||||
|
||||
|
||||
// Check if we have user-saved data in local storage
|
||||
function loadGanttData() {
|
||||
if (localStorage.getItem("am_gantt_data")) {
|
||||
return JSON.parse(localStorage.getItem("am_gantt_data"));
|
||||
}
|
||||
return {};
|
||||
}
|
||||
|
||||
function saveGanttData(gantt_data) {
|
||||
localStorage.setItem("am_gantt_data", JSON.stringify(gantt_data));
|
||||
console.log("Data saved to localStorage");
|
||||
}
|
||||
|
||||
function saveGanttMarkedDates() {
|
||||
var gantt_data = loadGanttData();
|
||||
gantt_data.markedDates = gantt.xAxisMinor.axisRanges.values.map(function (range) {
|
||||
return range.get("value");
|
||||
});
|
||||
saveGanttData(gantt_data);
|
||||
}
|
||||
|
||||
var gantt_data = loadGanttData();
|
||||
|
||||
if (gantt_data.categoryData) {
|
||||
categoryData = gantt_data.categoryData;
|
||||
}
|
||||
if (gantt_data.seriesData) {
|
||||
seriesData = gantt_data.seriesData;
|
||||
}
|
||||
if (gantt_data.markedDates) {
|
||||
markedDates = gantt_data.markedDates;
|
||||
}
|
||||
|
||||
// Create axis ranges for marked dates
|
||||
am5.array.each(markedDates, function (value) {
|
||||
gantt.markDate(value);
|
||||
});
|
||||
|
||||
|
||||
// Set data on axis and series
|
||||
// https://www.amcharts.com/docs/v5/charts/gantt/#Category_data
|
||||
// https://www.amcharts.com/docs/v5/charts/gantt/#Series_data
|
||||
gantt.yAxis.data.setAll(categoryData);
|
||||
gantt.series.data.setAll(seriesData);
|
||||
|
||||
// Set up saving of data
|
||||
gantt.events.onDebounced("valueschanged", function (ev) {
|
||||
gantt_data.categoryData = gantt.yAxis.data.values;
|
||||
gantt_data.seriesData = gantt.series.data.values;
|
||||
saveGanttData(gantt_data);
|
||||
}, 500);
|
||||
|
||||
gantt.events.on("datemarked", function (ev) {
|
||||
console.log("Date marked: " + ev.date + " (" + new Date(ev.date) + ") in " + ev.dataItem.get(name));
|
||||
saveGanttMarkedDates();
|
||||
});
|
||||
|
||||
gantt.events.on("dateunmarked", function (ev) {
|
||||
console.log("Date unmarked: " + ev.date + " (" + new Date(ev.date) + ") in " + ev.dataItem.get(name));
|
||||
saveGanttMarkedDates();
|
||||
});
|
||||
|
||||
gantt.appear();
|
||||
@ -0,0 +1,4 @@
|
||||
Steps to use
|
||||
============
|
||||
|
||||
1. Open `index.html` in a browser
|
||||
@ -0,0 +1,11 @@
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
#chartdiv {
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>amCharts 5 Example - gauge-bands</title>
|
||||
<link rel="stylesheet" href="index.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartdiv"></div>
|
||||
<script src="../../index.js"></script>
|
||||
<script src="../../xy.js"></script>
|
||||
<script src="../../radar.js"></script>
|
||||
<script src="../../themes/Animated.js"></script>
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,162 @@
|
||||
// Create root element
|
||||
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
|
||||
var root = am5.Root.new("chartdiv");
|
||||
|
||||
|
||||
// Set themes
|
||||
// https://www.amcharts.com/docs/v5/concepts/themes/
|
||||
root.setThemes([
|
||||
am5themes_Animated.new(root)
|
||||
]);
|
||||
|
||||
|
||||
// Create chart
|
||||
// https://www.amcharts.com/docs/v5/charts/radar-chart/
|
||||
var chart = root.container.children.push(am5radar.RadarChart.new(root, {
|
||||
panX: false,
|
||||
panY: false,
|
||||
startAngle: 160,
|
||||
endAngle: 380
|
||||
}));
|
||||
|
||||
|
||||
// Create axis and its renderer
|
||||
// https://www.amcharts.com/docs/v5/charts/radar-chart/gauge-charts/#Axes
|
||||
var axisRenderer = am5radar.AxisRendererCircular.new(root, {
|
||||
innerRadius: -40
|
||||
});
|
||||
|
||||
axisRenderer.grid.template.setAll({
|
||||
stroke: root.interfaceColors.get("background"),
|
||||
visible: true,
|
||||
strokeOpacity: 0.8,
|
||||
strokeWidth: 2,
|
||||
crisp: false
|
||||
});
|
||||
|
||||
var xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
|
||||
maxDeviation: 0,
|
||||
min: -40,
|
||||
max: 100,
|
||||
strictMinMax: true,
|
||||
renderer: axisRenderer
|
||||
}));
|
||||
|
||||
|
||||
// Add clock hand
|
||||
// https://www.amcharts.com/docs/v5/charts/radar-chart/gauge-charts/#Clock_hands
|
||||
var axisDataItem = xAxis.makeDataItem({});
|
||||
|
||||
var clockHand = am5radar.ClockHand.new(root, {
|
||||
pinRadius: am5.percent(20),
|
||||
radius: am5.percent(100),
|
||||
bottomWidth: 40
|
||||
})
|
||||
|
||||
var bullet = axisDataItem.set("bullet", am5xy.AxisBullet.new(root, {
|
||||
sprite: clockHand
|
||||
}));
|
||||
|
||||
xAxis.createAxisRange(axisDataItem);
|
||||
|
||||
var label = chart.radarContainer.children.push(am5.Label.new(root, {
|
||||
fill: am5.color(0xffffff),
|
||||
centerX: am5.percent(50),
|
||||
textAlign: "center",
|
||||
centerY: am5.percent(50),
|
||||
fontSize: "3em"
|
||||
}));
|
||||
|
||||
axisDataItem.set("value", 50);
|
||||
bullet.get("sprite").on("rotation", function () {
|
||||
var value = axisDataItem.get("value");
|
||||
var text = Math.round(axisDataItem.get("value")).toString();
|
||||
var fill = am5.color(0x000000);
|
||||
xAxis.axisRanges.each(function (axisRange) {
|
||||
if (value >= axisRange.get("value") && value <= axisRange.get("endValue")) {
|
||||
fill = axisRange.get("axisFill").get("fill");
|
||||
}
|
||||
})
|
||||
|
||||
label.set("text", Math.round(value).toString());
|
||||
|
||||
clockHand.pin.animate({ key: "fill", to: fill, duration: 500, easing: am5.ease.out(am5.ease.cubic) })
|
||||
clockHand.hand.animate({ key: "fill", to: fill, duration: 500, easing: am5.ease.out(am5.ease.cubic) })
|
||||
});
|
||||
|
||||
setInterval(function () {
|
||||
axisDataItem.animate({
|
||||
key: "value",
|
||||
to: Math.round(Math.random() * 140 - 40),
|
||||
duration: 500,
|
||||
easing: am5.ease.out(am5.ease.cubic)
|
||||
});
|
||||
}, 2000)
|
||||
|
||||
chart.bulletsContainer.set("mask", undefined);
|
||||
|
||||
|
||||
// Create axis ranges bands
|
||||
// https://www.amcharts.com/docs/v5/charts/radar-chart/gauge-charts/#Bands
|
||||
var bandsData = [{
|
||||
title: "Unsustainable",
|
||||
color: "#ee1f25",
|
||||
lowScore: -40,
|
||||
highScore: -20
|
||||
}, {
|
||||
title: "Volatile",
|
||||
color: "#f04922",
|
||||
lowScore: -20,
|
||||
highScore: 0
|
||||
}, {
|
||||
title: "Foundational",
|
||||
color: "#fdae19",
|
||||
lowScore: 0,
|
||||
highScore: 20
|
||||
}, {
|
||||
title: "Developing",
|
||||
color: "#f3eb0c",
|
||||
lowScore: 20,
|
||||
highScore: 40
|
||||
}, {
|
||||
title: "Maturing",
|
||||
color: "#b0d136",
|
||||
lowScore: 40,
|
||||
highScore: 60
|
||||
}, {
|
||||
title: "Sustainable",
|
||||
color: "#54b947",
|
||||
lowScore: 60,
|
||||
highScore: 80
|
||||
}, {
|
||||
title: "High Performing",
|
||||
color: "#0f9747",
|
||||
lowScore: 80,
|
||||
highScore: 100
|
||||
}];
|
||||
|
||||
am5.array.each(bandsData, function (data) {
|
||||
var axisRange = xAxis.createAxisRange(xAxis.makeDataItem({
|
||||
above: true,
|
||||
value: data.lowScore,
|
||||
endValue: data.highScore
|
||||
}));
|
||||
|
||||
axisRange.get("axisFill").setAll({
|
||||
visible: true,
|
||||
fill: am5.color(data.color),
|
||||
fillOpacity: 0.8
|
||||
});
|
||||
|
||||
axisRange.get("label").setAll({
|
||||
text: data.title,
|
||||
inside: true,
|
||||
radius: 15,
|
||||
fontSize: "0.9em",
|
||||
fill: root.interfaceColors.get("background")
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// Make stuff animate on load
|
||||
chart.appear(1000, 100);
|
||||
@ -0,0 +1,4 @@
|
||||
Steps to use
|
||||
============
|
||||
|
||||
1. Open `index.html` in a browser
|
||||
@ -0,0 +1,11 @@
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
#chartdiv {
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>amCharts 5 Example - gauge</title>
|
||||
<link rel="stylesheet" href="index.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartdiv"></div>
|
||||
<script src="../../index.js"></script>
|
||||
<script src="../../xy.js"></script>
|
||||
<script src="../../radar.js"></script>
|
||||
<script src="../../themes/Animated.js"></script>
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,65 @@
|
||||
// Create root element
|
||||
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
|
||||
var root = am5.Root.new("chartdiv");
|
||||
|
||||
|
||||
// Set themes
|
||||
// https://www.amcharts.com/docs/v5/concepts/themes/
|
||||
root.setThemes([
|
||||
am5themes_Animated.new(root)
|
||||
]);
|
||||
|
||||
|
||||
// Create chart
|
||||
// https://www.amcharts.com/docs/v5/charts/radar-chart/
|
||||
var chart = root.container.children.push(am5radar.RadarChart.new(root, {
|
||||
panX: false,
|
||||
panY: false,
|
||||
startAngle: 180,
|
||||
endAngle: 360
|
||||
}));
|
||||
|
||||
|
||||
// Create axis and its renderer
|
||||
// https://www.amcharts.com/docs/v5/charts/radar-chart/gauge-charts/#Axes
|
||||
var axisRenderer = am5radar.AxisRendererCircular.new(root, {
|
||||
innerRadius: -10,
|
||||
strokeOpacity: 0.1
|
||||
});
|
||||
|
||||
var xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
|
||||
maxDeviation: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
strictMinMax: true,
|
||||
renderer: axisRenderer
|
||||
}));
|
||||
|
||||
|
||||
// Add clock hand
|
||||
// https://www.amcharts.com/docs/v5/charts/radar-chart/gauge-charts/#Clock_hands
|
||||
var axisDataItem = xAxis.makeDataItem({});
|
||||
axisDataItem.set("value", 0);
|
||||
|
||||
var bullet = axisDataItem.set("bullet", am5xy.AxisBullet.new(root, {
|
||||
sprite: am5radar.ClockHand.new(root, {
|
||||
radius: am5.percent(99)
|
||||
})
|
||||
}));
|
||||
|
||||
xAxis.createAxisRange(axisDataItem);
|
||||
|
||||
axisDataItem.get("grid").set("visible", false);
|
||||
|
||||
setInterval(function () {
|
||||
axisDataItem.animate({
|
||||
key: "value",
|
||||
to: Math.round(Math.random() * 100),
|
||||
duration: 800,
|
||||
easing: am5.ease.out(am5.ease.cubic)
|
||||
});
|
||||
}, 2000);
|
||||
|
||||
|
||||
// Make stuff animate on load
|
||||
chart.appear(1000, 100);
|
||||
@ -0,0 +1,4 @@
|
||||
Steps to use
|
||||
============
|
||||
|
||||
1. Open `index.html` in a browser
|
||||
@ -0,0 +1,11 @@
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
#chartdiv {
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>amCharts 5 Example - hierarchy-force-directed</title>
|
||||
<link rel="stylesheet" href="index.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartdiv"></div>
|
||||
<script src="../../index.js"></script>
|
||||
<script src="../../hierarchy.js"></script>
|
||||
<script src="../../themes/Animated.js"></script>
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,80 @@
|
||||
// Create root element
|
||||
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
|
||||
var root = am5.Root.new("chartdiv");
|
||||
|
||||
|
||||
// Set themes
|
||||
// https://www.amcharts.com/docs/v5/concepts/themes/
|
||||
root.setThemes([
|
||||
am5themes_Animated.new(root)
|
||||
]);
|
||||
|
||||
|
||||
// Create wrapper container
|
||||
var container = root.container.children.push(am5.Container.new(root, {
|
||||
width: am5.percent(100),
|
||||
height: am5.percent(100),
|
||||
layout: root.verticalLayout
|
||||
}));
|
||||
|
||||
|
||||
// Create series
|
||||
// https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
|
||||
var series = container.children.push(am5hierarchy.ForceDirected.new(root, {
|
||||
singleBranchOnly: false,
|
||||
downDepth: 1,
|
||||
initialDepth: 2,
|
||||
valueField: "value",
|
||||
categoryField: "name",
|
||||
childDataField: "children"
|
||||
}));
|
||||
|
||||
|
||||
// Generate and set data
|
||||
// https://www.amcharts.com/docs/v5/charts/hierarchy/#Setting_data
|
||||
var maxLevels = 2;
|
||||
var maxNodes = 3;
|
||||
var maxValue = 100;
|
||||
|
||||
var data = {
|
||||
name: "Root",
|
||||
children: []
|
||||
}
|
||||
generateLevel(data, "", 0);
|
||||
|
||||
series.data.setAll([data]);
|
||||
series.set("selectedDataItem", series.dataItems[0]);
|
||||
|
||||
function generateLevel(data, name, level) {
|
||||
for (var i = 0; i < Math.ceil(maxNodes * Math.random()) + 1; i++) {
|
||||
var nodeName = name + "ABCDEFGHIJKLMNOPQRSTUVWXYZ"[i];
|
||||
var child;
|
||||
if (level < maxLevels) {
|
||||
child = {
|
||||
name: nodeName + level
|
||||
}
|
||||
|
||||
if (level > 0 && Math.random() < 0.5) {
|
||||
child.value = Math.round(Math.random() * maxValue);
|
||||
}
|
||||
else {
|
||||
child.children = [];
|
||||
generateLevel(child, nodeName + i, level + 1)
|
||||
}
|
||||
}
|
||||
else {
|
||||
child = {
|
||||
name: name + i,
|
||||
value: Math.round(Math.random() * maxValue)
|
||||
}
|
||||
}
|
||||
data.children.push(child);
|
||||
}
|
||||
|
||||
level++;
|
||||
return data;
|
||||
}
|
||||
|
||||
|
||||
// Make stuff animate on load
|
||||
series.appear(1000, 100);
|
||||
@ -0,0 +1,4 @@
|
||||
Steps to use
|
||||
============
|
||||
|
||||
1. Open `index.html` in a browser
|
||||
@ -0,0 +1,11 @@
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
#chartdiv {
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>amCharts 5 Example - hierarchy-pack</title>
|
||||
<link rel="stylesheet" href="index.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartdiv"></div>
|
||||
<script src="../../index.js"></script>
|
||||
<script src="../../hierarchy.js"></script>
|
||||
<script src="../../themes/Animated.js"></script>
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,80 @@
|
||||
// Create root element
|
||||
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
|
||||
var root = am5.Root.new("chartdiv");
|
||||
|
||||
|
||||
// Set themes
|
||||
// https://www.amcharts.com/docs/v5/concepts/themes/
|
||||
root.setThemes([
|
||||
am5themes_Animated.new(root)
|
||||
]);
|
||||
|
||||
|
||||
// Create wrapper container
|
||||
var container = root.container.children.push(am5.Container.new(root, {
|
||||
width: am5.percent(100),
|
||||
height: am5.percent(100),
|
||||
layout: root.verticalLayout
|
||||
}));
|
||||
|
||||
|
||||
// Create series
|
||||
// https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
|
||||
var series = container.children.push(am5hierarchy.Pack.new(root, {
|
||||
singleBranchOnly: false,
|
||||
downDepth: 1,
|
||||
initialDepth: 10,
|
||||
valueField: "value",
|
||||
categoryField: "name",
|
||||
childDataField: "children"
|
||||
}));
|
||||
|
||||
|
||||
// Generate and set data
|
||||
// https://www.amcharts.com/docs/v5/charts/hierarchy/#Setting_data
|
||||
var maxLevels = 2;
|
||||
var maxNodes = 3;
|
||||
var maxValue = 100;
|
||||
|
||||
var data = {
|
||||
name: "Root",
|
||||
children: []
|
||||
}
|
||||
generateLevel(data, "", 0);
|
||||
|
||||
series.data.setAll([data]);
|
||||
series.set("selectedDataItem", series.dataItems[0]);
|
||||
|
||||
function generateLevel(data, name, level) {
|
||||
for (var i = 0; i < Math.ceil(maxNodes * Math.random()) + 1; i++) {
|
||||
var nodeName = name + "ABCDEFGHIJKLMNOPQRSTUVWXYZ"[i];
|
||||
var child;
|
||||
if (level < maxLevels) {
|
||||
child = {
|
||||
name: nodeName + level
|
||||
}
|
||||
|
||||
if (level > 0 && Math.random() < 0.5) {
|
||||
child.value = Math.round(Math.random() * maxValue);
|
||||
}
|
||||
else {
|
||||
child.children = [];
|
||||
generateLevel(child, nodeName + i, level + 1)
|
||||
}
|
||||
}
|
||||
else {
|
||||
child = {
|
||||
name: name + i,
|
||||
value: Math.round(Math.random() * maxValue)
|
||||
}
|
||||
}
|
||||
data.children.push(child);
|
||||
}
|
||||
|
||||
level++;
|
||||
return data;
|
||||
}
|
||||
|
||||
|
||||
// Make stuff animate on load
|
||||
series.appear(1000, 100);
|
||||
@ -0,0 +1,4 @@
|
||||
Steps to use
|
||||
============
|
||||
|
||||
1. Open `index.html` in a browser
|
||||
@ -0,0 +1,11 @@
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
#chartdiv {
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>amCharts 5 Example - hierarchy-partition</title>
|
||||
<link rel="stylesheet" href="index.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartdiv"></div>
|
||||
<script src="../../index.js"></script>
|
||||
<script src="../../hierarchy.js"></script>
|
||||
<script src="../../themes/Animated.js"></script>
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,81 @@
|
||||
// Create root element
|
||||
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
|
||||
var root = am5.Root.new("chartdiv");
|
||||
|
||||
|
||||
// Set themes
|
||||
// https://www.amcharts.com/docs/v5/concepts/themes/
|
||||
root.setThemes([
|
||||
am5themes_Animated.new(root)
|
||||
]);
|
||||
|
||||
|
||||
// Create wrapper container
|
||||
var container = root.container.children.push(am5.Container.new(root, {
|
||||
width: am5.percent(100),
|
||||
height: am5.percent(100),
|
||||
layout: root.verticalLayout
|
||||
}));
|
||||
|
||||
|
||||
// Create series
|
||||
// https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
|
||||
var series = container.children.push(am5hierarchy.Partition.new(root, {
|
||||
singleBranchOnly: false,
|
||||
orientation: "vertical",
|
||||
downDepth: 1,
|
||||
initialDepth: 10,
|
||||
valueField: "value",
|
||||
categoryField: "name",
|
||||
childDataField: "children"
|
||||
}));
|
||||
|
||||
|
||||
// Generate and set data
|
||||
// https://www.amcharts.com/docs/v5/charts/hierarchy/#Setting_data
|
||||
var maxLevels = 2;
|
||||
var maxNodes = 3;
|
||||
var maxValue = 100;
|
||||
|
||||
var data = {
|
||||
name: "Root",
|
||||
children: []
|
||||
}
|
||||
generateLevel(data, "", 0);
|
||||
|
||||
series.data.setAll([data]);
|
||||
series.set("selectedDataItem", series.dataItems[0]);
|
||||
|
||||
function generateLevel(data, name, level) {
|
||||
for (var i = 0; i < Math.ceil(maxNodes * Math.random()) + 1; i++) {
|
||||
var nodeName = name + "ABCDEFGHIJKLMNOPQRSTUVWXYZ"[i];
|
||||
var child;
|
||||
if (level < maxLevels) {
|
||||
child = {
|
||||
name: nodeName + level
|
||||
}
|
||||
|
||||
if (level > 0 && Math.random() < 0.5) {
|
||||
child.value = Math.round(Math.random() * maxValue);
|
||||
}
|
||||
else {
|
||||
child.children = [];
|
||||
generateLevel(child, nodeName + i, level + 1)
|
||||
}
|
||||
}
|
||||
else {
|
||||
child = {
|
||||
name: name + i,
|
||||
value: Math.round(Math.random() * maxValue)
|
||||
}
|
||||
}
|
||||
data.children.push(child);
|
||||
}
|
||||
|
||||
level++;
|
||||
return data;
|
||||
}
|
||||
|
||||
|
||||
// Make stuff animate on load
|
||||
series.appear(1000, 100);
|
||||
@ -0,0 +1,4 @@
|
||||
Steps to use
|
||||
============
|
||||
|
||||
1. Open `index.html` in a browser
|
||||
@ -0,0 +1,11 @@
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
#chartdiv {
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>amCharts 5 Example - hierarchy-sunburst</title>
|
||||
<link rel="stylesheet" href="index.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartdiv"></div>
|
||||
<script src="../../index.js"></script>
|
||||
<script src="../../hierarchy.js"></script>
|
||||
<script src="../../themes/Animated.js"></script>
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,80 @@
|
||||
// Create root element
|
||||
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
|
||||
var root = am5.Root.new("chartdiv");
|
||||
|
||||
|
||||
// Set themes
|
||||
// https://www.amcharts.com/docs/v5/concepts/themes/
|
||||
root.setThemes([
|
||||
am5themes_Animated.new(root)
|
||||
]);
|
||||
|
||||
|
||||
// Create wrapper container
|
||||
var container = root.container.children.push(am5.Container.new(root, {
|
||||
width: am5.percent(100),
|
||||
height: am5.percent(100),
|
||||
layout: root.verticalLayout
|
||||
}));
|
||||
|
||||
|
||||
// Create series
|
||||
// https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
|
||||
var series = container.children.push(am5hierarchy.Sunburst.new(root, {
|
||||
singleBranchOnly: true,
|
||||
downDepth: 10,
|
||||
initialDepth: 10,
|
||||
valueField: "value",
|
||||
categoryField: "name",
|
||||
childDataField: "children"
|
||||
}));
|
||||
|
||||
|
||||
// Generate and set data
|
||||
// https://www.amcharts.com/docs/v5/charts/hierarchy/#Setting_data
|
||||
var maxLevels = 2;
|
||||
var maxNodes = 3;
|
||||
var maxValue = 100;
|
||||
|
||||
var data = {
|
||||
name: "Root",
|
||||
children: []
|
||||
}
|
||||
generateLevel(data, "", 0);
|
||||
|
||||
series.data.setAll([data]);
|
||||
series.set("selectedDataItem", series.dataItems[0]);
|
||||
|
||||
function generateLevel(data, name, level) {
|
||||
for (var i = 0; i < Math.ceil(maxNodes * Math.random()) + 1; i++) {
|
||||
var nodeName = name + "ABCDEFGHIJKLMNOPQRSTUVWXYZ"[i];
|
||||
var child;
|
||||
if (level < maxLevels) {
|
||||
child = {
|
||||
name: nodeName + level
|
||||
}
|
||||
|
||||
if (level > 0 && Math.random() < 0.5) {
|
||||
child.value = Math.round(Math.random() * maxValue);
|
||||
}
|
||||
else {
|
||||
child.children = [];
|
||||
generateLevel(child, nodeName + i, level + 1)
|
||||
}
|
||||
}
|
||||
else {
|
||||
child = {
|
||||
name: name + i,
|
||||
value: Math.round(Math.random() * maxValue)
|
||||
}
|
||||
}
|
||||
data.children.push(child);
|
||||
}
|
||||
|
||||
level++;
|
||||
return data;
|
||||
}
|
||||
|
||||
|
||||
// Make stuff animate on load
|
||||
series.appear(1000, 100);
|
||||
@ -0,0 +1,4 @@
|
||||
Steps to use
|
||||
============
|
||||
|
||||
1. Open `index.html` in a browser
|
||||
@ -0,0 +1,11 @@
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
#chartdiv {
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>amCharts 5 Example - hierarchy-tree</title>
|
||||
<link rel="stylesheet" href="index.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartdiv"></div>
|
||||
<script src="../../index.js"></script>
|
||||
<script src="../../hierarchy.js"></script>
|
||||
<script src="../../themes/Animated.js"></script>
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,80 @@
|
||||
// Create root element
|
||||
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
|
||||
var root = am5.Root.new("chartdiv");
|
||||
|
||||
|
||||
// Set themes
|
||||
// https://www.amcharts.com/docs/v5/concepts/themes/
|
||||
root.setThemes([
|
||||
am5themes_Animated.new(root)
|
||||
]);
|
||||
|
||||
|
||||
// Create wrapper container
|
||||
var container = root.container.children.push(am5.Container.new(root, {
|
||||
width: am5.percent(100),
|
||||
height: am5.percent(100),
|
||||
layout: root.verticalLayout
|
||||
}));
|
||||
|
||||
|
||||
// Create series
|
||||
// https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
|
||||
var series = container.children.push(am5hierarchy.Tree.new(root, {
|
||||
singleBranchOnly: false,
|
||||
downDepth: 1,
|
||||
initialDepth: 10,
|
||||
valueField: "value",
|
||||
categoryField: "name",
|
||||
childDataField: "children"
|
||||
}));
|
||||
|
||||
|
||||
// Generate and set data
|
||||
// https://www.amcharts.com/docs/v5/charts/hierarchy/#Setting_data
|
||||
var maxLevels = 3;
|
||||
var maxNodes = 3;
|
||||
var maxValue = 100;
|
||||
|
||||
var data = {
|
||||
name: "Root",
|
||||
children: []
|
||||
}
|
||||
generateLevel(data, "", 0);
|
||||
|
||||
series.data.setAll([data]);
|
||||
series.set("selectedDataItem", series.dataItems[0]);
|
||||
|
||||
function generateLevel(data, name, level) {
|
||||
for (var i = 0; i < Math.ceil(maxNodes * Math.random()) + 1; i++) {
|
||||
var nodeName = name + "ABCDEFGHIJKLMNOPQRSTUVWXYZ"[i];
|
||||
var child;
|
||||
if (level < maxLevels) {
|
||||
child = {
|
||||
name: nodeName + level
|
||||
}
|
||||
|
||||
if (level > 0 && Math.random() < 0.5) {
|
||||
child.value = Math.round(Math.random() * maxValue);
|
||||
}
|
||||
else {
|
||||
child.children = [];
|
||||
generateLevel(child, nodeName + i, level + 1)
|
||||
}
|
||||
}
|
||||
else {
|
||||
child = {
|
||||
name: name + i,
|
||||
value: Math.round(Math.random() * maxValue)
|
||||
}
|
||||
}
|
||||
data.children.push(child);
|
||||
}
|
||||
|
||||
level++;
|
||||
return data;
|
||||
}
|
||||
|
||||
|
||||
// Make stuff animate on load
|
||||
series.appear(1000, 100);
|
||||
@ -0,0 +1,4 @@
|
||||
Steps to use
|
||||
============
|
||||
|
||||
1. Open `index.html` in a browser
|
||||
@ -0,0 +1,11 @@
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
#chartdiv {
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>amCharts 5 Example - hierarchy-treemap</title>
|
||||
<link rel="stylesheet" href="index.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartdiv"></div>
|
||||
<script src="../../index.js"></script>
|
||||
<script src="../../hierarchy.js"></script>
|
||||
<script src="../../themes/Animated.js"></script>
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,87 @@
|
||||
// Create root element
|
||||
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
|
||||
var root = am5.Root.new("chartdiv");
|
||||
|
||||
|
||||
// Set themes
|
||||
// https://www.amcharts.com/docs/v5/concepts/themes/
|
||||
root.setThemes([
|
||||
am5themes_Animated.new(root)
|
||||
]);
|
||||
|
||||
|
||||
// Create wrapper container
|
||||
var container = root.container.children.push(am5.Container.new(root, {
|
||||
width: am5.percent(100),
|
||||
height: am5.percent(100),
|
||||
layout: root.verticalLayout
|
||||
}));
|
||||
|
||||
|
||||
// Create series
|
||||
// https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
|
||||
var series = container.children.push(am5hierarchy.Treemap.new(root, {
|
||||
singleBranchOnly: false,
|
||||
downDepth: 1,
|
||||
upDepth: 1,
|
||||
initialDepth: 1,
|
||||
valueField: "value",
|
||||
categoryField: "name",
|
||||
childDataField: "children"
|
||||
}));
|
||||
|
||||
|
||||
// Generate and set data
|
||||
// https://www.amcharts.com/docs/v5/charts/hierarchy/#Setting_data
|
||||
var maxLevels = 2;
|
||||
var maxNodes = 6;
|
||||
var maxValue = 100;
|
||||
|
||||
var data = {
|
||||
name: "Root",
|
||||
children: []
|
||||
}
|
||||
generateLevel(data, "", 0);
|
||||
|
||||
series.data.setAll([data]);
|
||||
series.set("selectedDataItem", series.dataItems[0]);
|
||||
|
||||
container.children.moveValue(
|
||||
am5hierarchy.BreadcrumbBar.new(root, {
|
||||
series: series
|
||||
}), 0
|
||||
);
|
||||
|
||||
function generateLevel(data, name, level) {
|
||||
for (var i = 0; i < Math.ceil(maxNodes * Math.random()) + 1; i++) {
|
||||
var nodeName = name + "ABCDEFGHIJKLMNOPQRSTUVWXYZ"[i];
|
||||
var child;
|
||||
if (level < maxLevels) {
|
||||
child = {
|
||||
name: nodeName + level
|
||||
}
|
||||
|
||||
if (level > 0 && Math.random() < 0.5) {
|
||||
child.value = Math.round(Math.random() * maxValue);
|
||||
}
|
||||
else {
|
||||
child.children = [];
|
||||
generateLevel(child, nodeName + i, level + 1)
|
||||
}
|
||||
}
|
||||
else {
|
||||
child = {
|
||||
name: name + i,
|
||||
value: Math.round(Math.random() * maxValue)
|
||||
}
|
||||
}
|
||||
data.children.push(child);
|
||||
}
|
||||
|
||||
level++;
|
||||
return data;
|
||||
}
|
||||
|
||||
|
||||
// Make stuff animate on load
|
||||
series.appear(1000, 100);
|
||||
@ -0,0 +1,4 @@
|
||||
Steps to use
|
||||
============
|
||||
|
||||
1. Open `index.html` in a browser
|
||||
@ -0,0 +1,11 @@
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
#chartdiv {
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user