window 함수의 유형은 세 가지이며 집계 함수, 순위 함수, 분석 함수입니다.
집계 함수: COUNT, AVERAGE, SUM, MAX, MIN 등.
순위 함수: WRANK, ROWNUMBER, DENSERANK, WPERCENTRANK, CUMEDIST.
분석 함수: FIRSTVALUE, LASTVALUE, NTHVALUE, LEAD, LAG, NTILE.
집계 함수에는 ORDERBY가 필요하지 않지만, 창 프레임 정의를 허용합니다.
ROWNUMBER
구문
사용법 참고 사항
해당 파티션 내의 현재 행 수를 반환합니다. 행 번호는 1부터 파티션 행 수까지입니다. ORDERBY가 필요하지 않으며 창 프레임 정의도 허용하지 않습니다.
W_RANK
구문
사용법 참고 사항
결과 집합의 파티션 내 각 행의 순위를 반환합니다. 피어는 동급으로 취급되며 동일한 순위를 받습니다. ORDERBY가 필요하며, 창 프레임 정의를 허용하지 않습니다.
DENSERANK
구문
사용법 참고 사항
파티션 내 현재 행 순위를 간격 없이 반환합니다. 피어는 동급으로 취급되며 동일한 순위를 받습니다. ORDERBY가 필요하며, 창 프레임 정의를 허용하지 않습니다.
W_PERCENTRANK
구문
사용법 참고 사항
행 파티션 내에 있는 행의 상대적 순위 백분율을 계산합니다. 행 순위와 행의 총수를 사용하여 백분율을 계산합니다. 순위 -1 / 행 -1. 범위는 [0,1]입니다. ORDERBY가 필요하며, 창 프레임 정의를 허용하지 않습니다.
CUMEDIST
구문
사용법 참고 사항
누적 분포 값입니다. 값이 현재 행 값보다 적거나 같은 행 수를 파티션 내 전체 행 수로 나눕니다. 범위는 (0,1]입니다. ORDERBY가 필요하며, 창 프레임 정의를 허용하지 않습니다.
LEAD
구문
인수
설명
value_function
(필수) 필드 이름 또는 수식입니다.
[offset_value]
(선택 사항) 현재 행 뒤의 행 오프셋으로, 오프셋 = 1입니다.
[default_value]
(선택 사항) 기본값으로, 기본값 = null입니다.
사용법 참고 사항
현재 행 뒤의 지정된 물리적 오프셋에서 행의 값에 액세스할 수 있습니다. 그러한 행이 없는 경우 반환 값은 기본값입니다. 창 프레임 정의를 허용하지 않습니다.
LAG
구문
인수
설명
value_function
(필수) 필드 이름 또는 수식입니다.
[offset_value]
(선택 사항) 현재 행 앞의 행 오프셋으로, 오프셋 = 1입니다.
[default_value]
(선택 사항) 기본값으로, 기본값 = null입니다.
사용법 참고 사항
현재 행 앞의 지정된 물리적 오프셋에서 행의 값에 액세스할 수 있습니다. 그러한 행이 없는 경우 반환 값은 기본값입니다. 창 프레임 정의를 허용하지 않습니다.
NTILE
구문
인수
설명
n
(필수) 버킷 수
사용법 참고 사항
파티션을 N개 버킷으로 나누고 파티션의 각 행에 버킷 번호를 할당합니다. 창 프레임 정의를 허용하지 않습니다.
FIRSTVALUE
구문
인수
설명
value_function
(필수) 필드 이름 또는 수식입니다.
사용법 참고 사항
창 프레임 내 첫 번째 행의 값입니다. ORDERBY가 필요하지 않습니다.
LASTVALUE
구문
인수
설명
value_function
(필수) 필드 이름 또는 수식입니다.
사용법 참고 사항
창 프레임 내 마지막 행의 값입니다. ORDERBY가 필요하지 않습니다.
NTHVALUE
구문
인수
설명
value_function
(필수) 필드 이름 또는 수식입니다.
n
(필수) 창 프레임 내 n번째 행입니다.
사용법 참고 사항
창 프레임 내 n번째 행의 값입니다. 그러한 행이 없는 경우 반환 값은 null입니다. ORDERBY가 필요하지 않습니다.
/*REPLACE_MARKER*/
/*DO NOT DELETE THESE COMMENTS*/
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 });
initSpread(spread);
};
function initSpread(spread) {
spread.suspendPaint();
spread.clearSheets();
spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader;
spread.options.allowDynamicArray = true;
spread.options.highlightInvalidData = true;
spread.options.calcOnDemand = true;
ratioMedals(spread);
countyMedals(spread);
athleteDenseRankMedals(spread);
employeeDepartmentPayRank(spread);
saleDivideGroups(spread);
timeToNextStation(spread);
revenueTrends(spread);
trainTravelTime(spread);
spread.resumePaint();
}
function ratioMedals(spread) {
//init a data manager
var dataManager = spread.dataManager();
var athleteMedalTable = dataManager.addTable("athleteMedalTable", {
remote: {
read: {
url: "$DEMOROOT$/spread/source/data/olympic-athlete-medals.csv"
}
},
schema: {
type: "csv",
columns: {
Medals: { dataType: "number" },
TotalMedals: { dataType: "formula", value: '=WINDOW(SUM([Medals]), "CountryMedals")' },
},
window: {
CountryMedals: "=WINDOWDEF(PARTITIONBY([Country]), ORDERBY([Country], ORDERDESC([Medals])), FRAMEROWS(-1, -1))"
}
}
});
//init a table sheet
var sheet = spread.addSheetTab(0, "Ratio Of Medals", GC.Spread.Sheets.SheetType.tableSheet);
sheet.setDefaultRowHeight(40, GC.Spread.Sheets.SheetArea.colHeader);
sheet.options.allowAddNew = false; //hide new row
//bind a view to the table sheet
athleteMedalTable.fetch().then(function () {
var myView = athleteMedalTable.addView("myView", [
{ value: "Country", width: 100 },
{ value: "Athlete", width: 80 },
{ value: "Medals", width: 80 },
{ value: "TotalMedals", caption: 'Total Medals', width: 150, style: { backColor: "#E2EFDA" } },
{ value: "=[@Medals] / [@TotalMedals]", caption: 'Ratio Of Medals', width: 150, style: { backColor: "#E2EFDA", formatter: '0.00%' } },
]);
spread.suspendPaint();
sheet.setDataView(myView);
spread.resumePaint();
});
}
function countyMedals(spread) {
//init a data manager
var dataManager = spread.dataManager();
var countryMedalTable = dataManager.addTable("countryMedalTable", {
remote: {
read: {
url: "$DEMOROOT$/spread/source/data/olympic-country-medals.csv"
}
},
schema: {
type: "csv",
columns: {
Medals: { dataType: "number" },
}
}
});
//init a table sheet
var sheet = spread.addSheetTab(1, "Country Medals Rank", GC.Spread.Sheets.SheetType.tableSheet);
sheet.setDefaultRowHeight(40, GC.Spread.Sheets.SheetArea.colHeader);
sheet.options.allowAddNew = false; //hide new row
//bind a view to the table sheet
countryMedalTable.fetch().then(function () {
var myView = countryMedalTable.addView("myView", [
{ value: "Country", width: 100 },
{ value: "Medals", width: 80 },
{ value: "=WINDOW(W_RANK(), ORDERBY(ORDERDESC([Medals])))", caption: 'Rank', width: 150, style: { backColor: "#E2EFDA" } },
]);
spread.suspendPaint();
sheet.setDataView(myView);
spread.resumePaint();
});
}
function athleteDenseRankMedals(spread) {
//init a data manager
var dataManager = spread.dataManager();
var athleteMedalTable = dataManager.addTable("athleteMedalRankTable", {
remote: {
read: {
url: "$DEMOROOT$/spread/source/data/olympic-athlete-medals.csv"
}
},
schema: {
type: "csv",
columns: {
Medals: { dataType: "number" },
}
}
});
//init a table sheet
var sheet = spread.addSheetTab(2, "Athlete Medals Rank", GC.Spread.Sheets.SheetType.tableSheet);
sheet.setDefaultRowHeight(40, GC.Spread.Sheets.SheetArea.colHeader);
sheet.options.allowAddNew = false; //hide new row
//bind a view to the table sheet
athleteMedalTable.fetch().then(function () {
var myView = athleteMedalTable.addView("myView", [
{ value: "=WINDOW(ROWNUMBER(), PARTITIONBY([Country]))", caption: 'No.', width: 70, style: { backColor: "#E2EFDA" } },
{ value: "Country", width: 100 },
{ value: "Athlete", width: 80 },
{ value: "Medals", width: 80 },
{ value: "=WINDOW(DENSERANK(), PARTITIONBY([Country]), ORDERBY(ORDERDESC([Medals])))", caption: 'Rank', width: 150, style: { backColor: "#E2EFDA" } },
]);
spread.suspendPaint();
sheet.setDataView(myView);
spread.resumePaint();
});
}
function employeeDepartmentPayRank(spread) {
//init a data manager
var dataManager = spread.dataManager();
var employeeDepartmentPayTable = dataManager.addTable("employeeDepartmentPayTable", {
remote: {
read: {
url: "$DEMOROOT$/spread/source/data/employee-department-pay.csv"
}
},
schema: {
type: "csv",
window: {
DepartmentRate: "=WINDOWDEF(PARTITIONBY([Department]), ORDERBY([Rate]))"
}
}
});
//init a table sheet
var sheet = spread.addSheetTab(3, "Employee Pay Rank", GC.Spread.Sheets.SheetType.tableSheet);
sheet.setDefaultRowHeight(40, GC.Spread.Sheets.SheetArea.colHeader);
sheet.options.allowAddNew = false; //hide new row
//bind a view to the table sheet
employeeDepartmentPayTable.fetch().then(function () {
var myView = employeeDepartmentPayTable.addView("myView", [
{ value: "Department", width: 120 },
{ value: "LastName", width: 120 },
{ value: "Rate", width: 80 },
// The CUMEDIST returns a value that represents the percent of employees with a salary less than or equal to the current employee in the same department.
{ value: "=WINDOW(CUMEDIST(), \"DepartmentRate\")", caption: 'Salary % ( <= current)', width: 180, style: { backColor: "#E2EFDA", formatter: '0.00' } },
// The W_PERCENTRANK function calculates the percent rank of the employee's salary within a department.
{ value: "=WINDOW(W_PERCENTRANK(), \"DepartmentRate\")", caption: 'Salary %', width: 140, style: { backColor: "#E2EFDA", formatter: '0.00' } },
]);
spread.suspendPaint();
sheet.setDataView(myView);
spread.resumePaint();
});
}
function timeToNextStation(spread) {
//init a data manager
var dataManager = spread.dataManager();
var timeToNextStationTable = dataManager.addTable("timeToNextStationTable", {
remote: {
read: {
url: "$DEMOROOT$/spread/source/data/train-details.csv"
}
},
schema: {
type: "csv",
columns: {
TrainNo: { dataName: 'Train No', dataType: 'number' },
TrainName: { dataName: 'Train Name' },
ArrivalTime: { dataName: 'Arrival time' },
DepartureTime: { dataName: 'Departure Time', },
LeadArrivalTime: { dataType: 'formula', value: '=WINDOW(LEAD([@ArrivalTime]), PARTITIONBY([TrainNo]))' },
}
}
});
//init a table sheet
var sheet = spread.addSheetTab(4, "Time To Next Station", GC.Spread.Sheets.SheetType.tableSheet);
sheet.setDefaultRowHeight(40, GC.Spread.Sheets.SheetArea.colHeader);
sheet.options.allowAddNew = false; //hide new row
//bind a view to the table sheet
timeToNextStationTable.fetch().then(function () {
var myView = timeToNextStationTable.addView("myView", [
{ value: "TrainNo", caption: "Train No", width: 120 },
{ value: "TrainName", caption: "Train Name", width: 120 },
{ value: "ArrivalTime", caption: "Arrival Time", width: 120 },
{ value: "DepartureTime", caption: "Departure Time", width: 150 },
{ value: "=IF(ISBLANK([@LeadArrivalTime]), 0 ,TIMEVALUE([@LeadArrivalTime]) - TIMEVALUE([@DepartureTime]))", caption: "Time To Next Station", width: 180, style: { backColor: "#E2EFDA", formatter: 'h:mm:ss;@' } },
{ value: '=TIMEVALUE([@ArrivalTime]) - WINDOW(MIN(MAP([ArrivalTime], LAMBDA(time,TIMEVALUE(time)))), PARTITIONBY([TrainNo]))', caption: "Elapsed Travel Time", width: 180, style: { backColor: "#E2EFDA", formatter: 'h:mm:ss;@' } },
]);
spread.suspendPaint();
sheet.setDataView(myView);
spread.resumePaint();
});
}
function revenueTrends(spread) {
//init a data manager
var dataManager = spread.dataManager();
var revenueTrendsTable = dataManager.addTable("revenueTrendsTable", {
data: orderYearProductDataSource,
schema: {
type: "csv",
columns: {
Quantity: { dataType: "number" },
Amount: { dataType: "number" },
PreviousRevenue: { dataType: "formula", value: '=WINDOW(LAG([@Amount]), "ProductYear")' }
},
window: {
ProductYear: "=WINDOWDEF(PARTITIONBY([Product]), ORDERBY([Year]))"
}
}
});
//init a table sheet
var sheet = spread.addSheetTab(5, "Revenue Trends", GC.Spread.Sheets.SheetType.tableSheet);
sheet.setDefaultRowHeight(40, GC.Spread.Sheets.SheetArea.colHeader);
sheet.options.allowAddNew = false; //hide new row
//bind a view to the table sheet
revenueTrendsTable.fetch().then(function () {
var myView = revenueTrendsTable.addView("myView", [
{ value: "YEAR", width: 150 },
{ value: "Product", width: 105 },
{ value: "Amount", caption: "Revenue", width: 100, style: { formatter: "#,##0.00" } },
{ value: "PreviousRevenue", caption: 'Previous Revenue', width: 180, style: { backColor: "#E2EFDA", formatter: "#,##0.00" } },
{ value: "=[@Amount] - IF(ISBLANK([@PreviousRevenue]), 0, [@PreviousRevenue])", caption: 'Revenue Trends', width: 150, style: { backColor: "#E2EFDA", formatter: "#,##0.00" } },
]);
spread.suspendPaint();
sheet.setDataView(myView);
spread.resumePaint();
});
}
function saleDivideGroups(spread) {
//init a data manager
var dataManager = spread.dataManager();
var saleYearToDateDivideGroupTable = dataManager.addTable("saleYearToDateDivideGroupTable", {
remote: {
read: {
url: "$DEMOROOT$/spread/source/data/sale-ytd.csv"
}
},
schema: {
type: "csv",
columns: {
SalesYTD: { dataType: "number" },
}
}
});
//init a table sheet
var sheet = spread.addSheetTab(6, "Sale Groups", GC.Spread.Sheets.SheetType.tableSheet);
sheet.setDefaultRowHeight(40, GC.Spread.Sheets.SheetArea.colHeader);
sheet.options.allowAddNew = false; //hide new row
//bind a view to the table sheet
saleYearToDateDivideGroupTable.fetch().then(function () {
var myView = saleYearToDateDivideGroupTable.addView("myView", [
{ value: "City", width: 100 },
{ value: "FirstName", width: 100 },
{ value: "LastName", width: 100 },
// It divides rows into four groups of employees based on their year-to-date sales
{ value: "=WINDOW(NTILE(4), PARTITIONBY([City]), ORDERBY(ORDERDESC([SalesYTD])))", caption: 'Quartile', width: 100, style: { backColor: "#E2EFDA" } },
{ value: "SalesYTD", caption: 'Sales', width: 100, style: { formatter: "$#,##0.00" } },
]);
spread.suspendPaint();
sheet.setDataView(myView);
spread.resumePaint();
});
}
function trainTravelTime(spread) {
//init a data manager
var dataManager = spread.dataManager();
var trainTravelTimeTable = dataManager.addTable("trainTravelTimeTable", {
remote: {
read: {
url: "$DEMOROOT$/spread/source/data/train-details.csv"
}
},
schema: {
type: "csv",
columns: {
TrainNo: { dataName: 'Train No', dataType: 'number' },
TrainName: { dataName: 'Train Name' },
ArrivalTime: { dataName: 'Arrival time' },
DepartureTime: { dataName: 'Departure Time', },
LastArrivalTime: { dataType: 'formula', value: '=WINDOW(LASTVALUE(TIMEVALUE([@ArrivalTime])), PARTITIONBY([TrainNo]))' },
FirstDepartureTime: { dataType: 'formula', value: '=WINDOW(FIRSTVALUE(TIMEVALUE([@DepartureTime])), PARTITIONBY([TrainNo]))' },
ForthArrivalTime: { dataType: 'formula', value: '=WINDOW(NTHVALUE(TIMEVALUE([@ArrivalTime]), 4), PARTITIONBY([TrainNo]))' },
SecondArrivalTime: { dataType: 'formula', value: '=WINDOW(NTHVALUE(TIMEVALUE([@DepartureTime]), 2), PARTITIONBY([TrainNo]))' },
}
}
});
//init a table sheet
var sheet = spread.addSheetTab(7, "Train Travel Time", GC.Spread.Sheets.SheetType.tableSheet);
sheet.setDefaultRowHeight(40, GC.Spread.Sheets.SheetArea.colHeader);
sheet.options.allowAddNew = false; //hide new row
//bind a view to the table sheet
trainTravelTimeTable.fetch().then(function () {
var myView = trainTravelTimeTable.addView("myView", [
{ value: "TrainNo", caption: "Train No", width: 120 },
{ value: "TrainName", caption: "Train Name", width: 120 },
{ value: "ArrivalTime", caption: "Arrival Time", width: 120 },
{ value: "DepartureTime", caption: "Departure Time", width: 150 },
{ value: '=[@LastArrivalTime] - [@FirstDepartureTime]', caption: "Max Travel Time", width: 150, style: { backColor: "#E2EFDA", formatter: 'h:mm:ss;@' } },
{ value: "=[@ForthArrivalTime] - [@SecondArrivalTime]", caption: "2nd - 4th Station Travel Time", width: 220, style: { backColor: "#E2EFDA", formatter: 'h:mm:ss;@' } },
]);
spread.suspendPaint();
sheet.setDataView(myView);
spread.resumePaint();
});
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="spreadjs culture" content="ko-kr"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- Promise Polyfill for IE, https://www.npmjs.com/package/promise-polyfill -->
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/orderDataSource.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/orderYearProductDataSource.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
</div>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}
.container {
width: 300px;
height: 100%;
float: left;
border: 1px solid lightgrey;
}