REDUCE

Syntax The REDUCE function syntax has the following arguments and parameters: initial_value Sets the starting value for the accumulator. array An array to be reduced. lambda A LAMBDA that is called to reduce the array. The LAMBDA takes two parameters: accumulator The value totaled up and returned as the final result. value The calculation applied to each element in the array. Tip Before using this function, you need to turn on the allowDynamicArray option Basic Usage Sum the squared values Count only even values

import { Component, NgModule, enableProdMode } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { SpreadSheetsModule } from "@mescius/spread-sheets-angular";
import GC from "@mescius/spread-sheets";
import "./styles.css";
const spreadNS = GC.Spread.Sheets,
SheetArea = spreadNS.SheetArea;
@Component({
selector: "app-component",
templateUrl: "src/app.component.html",
})
export class AppComponent {
spread: GC.Spread.Sheets.Workbook;
hostStyle = {
width: "100%",
height: "100%",
overflow: "hidden",
float: "left",
};
data = {
values: {
"1": { "1": "Examples:" },
"3": { "1": "Example 1: Sum the squared values" },
"4": { "1": "Data:", "5": "Formula:" },
"5": { "1": 1, "2": 2, "3": 3, "5": "Result:" },
"6": { "1": 4, "2": 5, "3": 6 },
"8": { "1": 'Example 2: Create a customized "PRODUCTIF" function to multiply only values greater than 50' },
"9": { "1": "Table2:" },
"10": { "1": "Nums", "5": "Formula:" },
"11": { "1": 24, "5": "Result:" },
"12": { "1": 100 },
"13": { "1": 97 },
"14": { "1": 11 },
"15": { "1": 37 },
"16": { "1": 42 },
"17": { "1": 76 },
"18": { "1": 66 },
"19": { "1": 4 },
"20": { "1": 62 },
"22": { "1": "Example 3: Count only even values" },
"23": { "1": "Table4:" },
"24": { "1": "Nums", "5": "Formula:" },
"25": { "1": 24, "5": "Result:" },
"26": { "1": 100 },
"27": { "1": 97 },
"28": { "1": 11 },
"29": { "1": 37 },
"30": { "1": 42 },
"31": { "1": 76 },
"32": { "1": 66 },
"33": { "1": 4 },
"34": { "1": 62 },
},
formulas: {
"4": { "6": "FORMULATEXT(G6)" },
"5": { "6": "REDUCE(,B6:D7,LAMBDA(a,b,a+b^2))" },
"10": { "6": "FORMULATEXT(G12)" },
"11": { "6": "REDUCE(1,Table2[Nums],LAMBDA(a,b,IF(b>50,a+b,a)))" },
"24": { "6": "FORMULATEXT(G26)" },
"25": { "6": "REDUCE(0,Table4[Nums],LAMBDA(a,n,IF(ISEVEN(n),1+a,a)))" },
},
cellStyles: {
"B2:C2": 0,
"B4:E4": 1,
B5: 2,
C5: 3,
D5: 4,
F5: 5,
"G5:J5": 6,
"B6:D7": 7,
F6: 8,
G6: 6,
"B9:K9": 1,
B10: 9,
"F11:F12": 8,
"G11:L11": 6,
G12: 6,
"B23:E23": 1,
B24: 9,
"F25:F26": 8,
"G25:L25": 6,
G26: 6,
},
styles: {
records: [
{ foreColor: 0, font: 0, border: [null, null, 0] },
{ foreColor: 0, font: 1, border: [null, null, 1] },
{ backColor: 2, foreColor: 1, font: 1, border: [1, null, 2, 3] },
{ backColor: 2, foreColor: 1, font: 1, border: [1, null, 2] },
{ backColor: 2, foreColor: 1, font: 1, border: [1, 3, 2] },
{ backColor: 2, foreColor: 1, font: 1, border: [3, 2, 3, 3] },
{ backColor: 4, foreColor: 3, font: 1, border: [2, 2, 2, 2] },
{ backColor: 6, foreColor: 5, border: [2, 2, 2, 2] },
{ backColor: 2, foreColor: 1, font: 1, border: [3, 3, 3, 3] },
{ foreColor: 0, font: 1 },
],
borders: [
{ color: "#accdea", style: 5 },
{ color: "#9bc3e6", style: 2 },
{ color: "#7f7f7f", style: 1 },
{ color: "#9bc3e6", style: 1 },
],
colors: ["#44546a", "#ffffff", "#5b9bd5", "#fa7d00", "#f2f2f2", "#3f3f76", "#ffcc99"],
fonts: ["700 17.3px Calibri", "700 14.7px Calibri"],
},
others: {
columnWidth: { "0": 30 },
rowHeight: { "1": 24, "2": 21, "3": 21, "8": 21, "22": 21 },
spans: ["B5:D5"],
tables: [
{ name: "Table4", ref: "B25:B35" },
{ name: "Table2", ref: "B11:B21" },
],
},
};
constructor() {}
init($event: any) {
let workbook = (this.spread = $event.spread);
initWorkbook(workbook, this.data);
}
}
function initWorkbook(workbook: GC.Spread.Sheets.Workbook, data: any) {
workbook.options.allowDynamicArray = true;
workbook.suspendPaint();
initSheet1(workbook.getSheet(0), data);
workbook.resumePaint();
}
function initSheet1(sheet: GC.Spread.Sheets.Worksheet, data: any) {
setSheetPr(sheet, data);
setCells(sheet, data);
}
function setCells(sheet: GC.Spread.Sheets.Worksheet, data: any) {
foreachObj(data.values, function (r: string, row: any) {
foreachObj(row, function (c: string, v: any) {
setValue(sheet, Number(r), Number(c), v);
});
});
foreachObj(data.formulas, function (r: string, row: any) {
foreachObj(row, function (c: string, v: any) {
setFormula(sheet, Number(r), Number(c), v);
});
});
foreachObj(data.cellStyles, function (ref: string, id: number) {
setStyle(sheet, ref, data.styles.records[id], data.styles);
});
}
function setValue(sheet: GC.Spread.Sheets.Worksheet, r: number, c: number, v: any) {
if (v === undefined || v === null) return;
sheet.setValue(r, c, v);
}
function setFormula(sheet: GC.Spread.Sheets.Worksheet, r: number, c: number, v: string) {
if (v === undefined || v === null) return;
sheet.setFormula(r, c, v);
}
function setStyle(sheet: GC.Spread.Sheets.Worksheet, ref: string, v: any, styles: any) {
if (v === undefined || v === null) return;
var range = sheet.getRange(ref);
var foreColor = styles.colors[v.foreColor];
var backColor = styles.colors[v.backColor];
var font = styles.fonts[v.font];
var wordWrap = v.wordWrap;
if (foreColor) {
range.foreColor(foreColor);
}
if (backColor) {
range.backColor(backColor);
}
if (font) {
range.font(font);
}
if (wordWrap) {
range.wordWrap(wordWrap);
}
var border = v.border || [];
var borderTop = styles.borders[border[0]];
var borderRight = styles.borders[border[1]];
var borderBottom = styles.borders[border[2]];
var borderLeft = styles.borders[border[3]];
if (borderTop) {
range.borderTop(createLineStyle(borderTop));
}
if (borderBottom) {
range.borderBottom(createLineStyle(borderBottom));
}
if (borderLeft) {
range.borderLeft(createLineStyle(borderLeft));
}
if (borderRight) {
range.borderRight(createLineStyle(borderRight));
}
}
function setSheetPr(sheet: GC.Spread.Sheets.Worksheet, data: any) {
// set column width
foreachObj(data.others.columnWidth, function (index: string, v: any) {
sheet.setColumnWidth(Number(index), v);
});
// set row height
foreachObj(data.others.rowHeight, function (index: string, v: any) {
sheet.setRowHeight(Number(index), v);
});
// set spans
var spans = data.others.spans || [];
for (var i = 0; i < spans.length; i++) {
var range = sheet.getRange(spans[i]);
sheet.addSpan(range.row, range.col, range.rowCount, range.colCount);
}
// set tables
var tables = data.others.tables || [];
for (var i = 0; i < tables.length; i++) {
var table = tables[i];
var range = sheet.getRange(table.ref);
sheet.tables.add(table.name, range.row, range.col, range.rowCount, range.colCount);
}
}
function createLineStyle(v: any) {
return new GC.Spread.Sheets.LineBorder(v.color, v.style);
}
function foreachObj(obj: any, func: Function) {
if (!obj) return;
var keys = Object.keys(obj);
for (var i = 0; i < keys.length; i++) {
var key = keys[i];
var v = obj[key];
func(key, v);
}
}
@NgModule({
imports: [BrowserModule, SpreadSheetsModule, FormsModule],
declarations: [AppComponent],
exports: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
enableProdMode();
// Bootstrap application with hash style navigation and global services.
platformBrowserDynamic().bootstrapModule(AppModule);

<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/angular/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- Polyfills -->
<script src="$DEMOROOT$/en/angular/node_modules/core-js/client/shim.min.js"></script>
<script src="$DEMOROOT$/en/angular/node_modules/zone.js/fesm2015/zone.min.js"></script>
<!-- SystemJS -->
<script src="$DEMOROOT$/en/angular/node_modules/systemjs/dist/system.js"></script>
<script src="systemjs.config.js"></script>
<script>
// workaround to load 'rxjs/operators' from the rxjs bundle
System.import('rxjs').then(function (m) {
System.import('@angular/compiler');
System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators));
System.import('$DEMOROOT$/en/lib/angular/license.ts');
System.import('./src/app.component');
});
</script>
</head>
<body>
<app-component></app-component>
</body>
</html>

<div class="sample-tutorial">
<gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="init($event)">
<gc-worksheet>
</gc-worksheet>
</gc-spread-sheets>
</div>

.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.options-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
input {
padding: 4px 6px;
display: inline-block;
}
input[type="text"] {
width: 200px;
}
label {
display: block;
margin-bottom: 6px;
}
input[type=button] {
margin-top: 6px;
display: block;
width:216px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

(function (global) {
System.config({
transpiler: 'ts',
typescriptOptions: {
tsconfig: true
},
meta: {
'typescript': {
"exports": "ts"
},
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'core-js': 'npm:core-js/client/shim.min.js',
'zone': 'npm:zone.js/fesm2015/zone.min.js',
'rxjs': 'npm:rxjs/dist/bundles/rxjs.umd.min.js',
'@angular/core': 'npm:@angular/core/fesm2022',
'@angular/common': 'npm:@angular/common/fesm2022/common.mjs',
'@angular/compiler': 'npm:@angular/compiler/fesm2022/compiler.mjs',
'@angular/platform-browser': 'npm:@angular/platform-browser/fesm2022/platform-browser.mjs',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/fesm2022/platform-browser-dynamic.mjs',
'@angular/common/http': 'npm:@angular/common/fesm2022/http.mjs',
'@angular/router': 'npm:@angular/router/fesm2022/router.mjs',
'@angular/forms': 'npm:@angular/forms/fesm2022/forms.mjs',
'jszip': 'npm:jszip/dist/jszip.min.js',
'typescript': 'npm:typescript/lib/typescript.js',
'ts': './plugin.js',
'tslib':'npm:tslib/tslib.js',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js',
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-angular': 'npm:@mescius/spread-sheets-angular/fesm2020/mescius-spread-sheets-angular.mjs',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
"node_modules/@angular": {
defaultExtension: 'mjs'
},
"@mescius/spread-sheets-angular": {
defaultExtension: 'mjs'
},
'@angular/core': {
defaultExtension: 'mjs',
main: 'core.mjs'
}
}
});
})(this);

Syntax

Tip

Basic Usage

Feedback