판매 요약 보고서

새 창에서 데모를 열어 디자이너 열기

다음 단계에 따라 '그룹' 및 '요약' 셀 유형을 사용하여 판매 요약 보고서를 생성할 수 있습니다.

• DataManager에서 Order, OrderDetail(계산된 열 포함), Employee 표를 정의합니다.
• 템플릿의 스타일을 설정합니다.
• 데이터 열을 템플릿에 바인딩하고 '그룹'(수식 그룹) 및 '요약' 셀 유형을 사용하고 '가로' 및 '세로' 분산 방향을 모두 사용합니다.
• sortOptions와 템플릿 셀의 필터를 설정합니다.
• 요약 셀의 수식을 추가합니다.

window.onload = async () => {
    const spread = new GC.Spread.Sheets.Workbook('demo-host', { sheetCount: 1 });
    await addTables(spread);
    addSalesSummaryReport(spread);
}

async function addTables(spread) {
    const baseUrl = window.location.href.match(/http.+spreadjs\/demos\//)[0] + 'server/api';
    const tables = ['Order', 'OrderDetail', 'Employee'].map(x => spread.dataManager().addTable(x, { remote: { read: { url: `${baseUrl}/${x}` } } }));
    await Promise.all(tables.map(x => x.fetch()));
    tables[1].columns['Sales'] = {
        value: '=[@UnitPrice]*[@Quantity]*(1-[@Discount])',
        caption: 'Sales',
    };
}
function addSalesSummaryReport(spread) {
    const reportSheet = spread.addSheetTab(0, 'Sales Summary Report', GC.Spread.Sheets.SheetType.reportSheet);
    const templateSheet = reportSheet.getTemplate();

    templateSheet.options.gridline.showHorizontalGridline = false;
    templateSheet.options.gridline.showVerticalGridline = false;
    templateSheet.defaults.colWidth = 160;
    templateSheet.defaults.rowHeight = 30;
    const headerStyle = new GC.Spread.Sheets.Style();
    headerStyle.backColor = '#BBDEFB';
    headerStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
    headerStyle.vAlign = GC.Spread.Sheets.VerticalAlign.center;
    headerStyle.foreColor = '#424242';
    headerStyle.font = '12px "Open Sans"';
    const dataStyle = new GC.Spread.Sheets.Style();
    dataStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
    dataStyle.vAlign = GC.Spread.Sheets.VerticalAlign.center;
    dataStyle.foreColor = '#424242';
    dataStyle.font = '12px "Open Sans"';
    const border = new GC.Spread.Sheets.LineBorder('#e0e0e0', 1);
    dataStyle.borderBottom = border;
    templateSheet.setValue(0, 0, 'Employee');
    templateSheet.setValue(0, 2, 'Trend');
    templateSheet.getRange(0, 0, 1, 3).setStyle(headerStyle);
    templateSheet.getRange(1, 0, 1, 3).setStyle(dataStyle);
    templateSheet.setFormatter(1, 1, '0.00');
    templateSheet.setFormula(1, 2, '=LINESPARKLINE(B2,0)');
    const summaryStyle = dataStyle.clone();
    summaryStyle.backColor = '#FFECB3';
    templateSheet.getRange(2, 0, 1, 3).setStyle(summaryStyle);
    templateSheet.setValue(2, 0, 'Total');
    templateSheet.setFormatter(2, 1, '0.00');
    templateSheet.setFormula(2, 1, 'SUM(B2)');
    templateSheet.setFormula(2, 2, '=LINESPARKLINE(B3,0)');

    templateSheet.setTemplateCell(0, 1, {
        type: 'Group',
        formula: '=Year([@OrderDate])',
        binding: 'Order[OrderDate]',
        spillDirection: 'Horizontal',
    });
    templateSheet.setTemplateCell(1, 0, {
        type: 'Group',
        binding: 'Employee[FirstName]',
        filter: {
            condition: {
                column: 'Id',
                operator: 'Equal',
                dataColumn: {
                    tableName: 'Order',
                    columnName: 'EmployeeId',
                }
            },
        },
        sortOptions: [{ asc: 'FirstName' }]
    });
    templateSheet.setTemplateCell(1, 1, {
        type: 'Summary',
        aggregate: 'Sum',
        binding: 'OrderDetail[Sales]',
        filter: {
            condition: {
                column: 'OrderId',
                operator: 'Equal',
                dataColumn: {
                    tableName: 'Order',
                    columnName: 'Id',
                }
            },
        },
    });

    reportSheet.refresh();
}