The date to date filter condition interface is shown below:
conType: the type of condition.
operator: the type of date filter to use
val: the start and end date to be filtered
isDynamicEndDate: if value is true, will use current time for endDate. if value is false, we need to customize end time for endDate.
isParallel: it means whether to use the parallel mode.
by: month/quarter/year
On this basis, we have six built-in Date To Date filters in the pivot date filter context menu.
month to date(MTD)
quarter to date(QTD)
year to date(YTD)
parallel month to date(parallel MTD)
parallel quarter to date(parallel QTD)
parallel year to date(parallel YTD)
You can use the Date To Date Filter as follows:
import { Component, NgModule, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { SpreadSheetsModule } from '@mescius/spread-sheets-angular';
import { FormsModule } from '@angular/forms';
import GC from '@mescius/spread-sheets';
import "@mescius/spread-sheets-shapes";
import "@mescius/spread-sheets-pivot-addon";
import './styles.css';
@Component({
selector: 'app-component',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
autoGenerateColumns = false;
autoMergeMode = GC.Spread.Sheets.AutoMerge.AutoMergeMode.restricted;
autoMergeSelectionMode = GC.Spread.Sheets.AutoMerge.SelectionMode.merged;
dataSource: any[];
spread: GC.Spread.Sheets.Workbook;
hostStyle = {
width: 'calc(100% - 280px)',
height: '100%',
overflow: 'hidden',
float: 'left'
};
pivotTable:any;
startTime = '';
endTime = '';
isDynamicEndDate = false;
isParallel = false;
by = 1;
constructor() {
}
initSpread($Event: any) {
let spread = $Event.spread;
this.spread = spread;
spread.suspendPaint();
spread.setSheetCount(2);
let sheet1 = spread.getSheet(0);
let sheet2 = spread.getSheet(1);
let tableName = this.getSource(sheet2, pivotSales);
let pivotTable = this.addPivotTable(sheet1, tableName);
this.pivotTable = pivotTable;
spread.resumePaint();
}
getSource(sheet: GC.Spread.Sheets.Workbook, tableSource: any) {
sheet.name("DataSource");
sheet.setRowCount(1984);
sheet.setColumnWidth(0, 120);
sheet.getCell(-1, 0).formatter("YYYY-mm-DD");
sheet.getRange(-1,4,0,2).formatter("$ #,##0");
let table = sheet.tables.add('table', 0, 0, 1984, 6);
for(let i=2;i<=1984;i++)
{
sheet.setFormula(i-1,5,'=D'+i+'*E'+i)
}
table.style(GC.Spread.Sheets.Tables.TableThemes["none"]);
sheet.setArray(0, 0, tableSource);
return table.name();
}
clearDateFilter () {
let spread = this.spread;
let pivotTable = this.pivotTable;
spread.suspendPaint();
this.startTime = '';
this.endTime = '';
this.isDynamicEndDate = false;
this.isParallel = false;
this.by = 1;
pivotTable.labelFilter("date", null);
spread.resumePaint();
}
setDateFilter () {
let spread = this.spread;
let pivotTable = this.pivotTable;
spread.suspendPaint();
let startTime = new Date(this.startTime);
let endTime = new Date(this.endTime);
let by = +(this.by);
let isParallel = this.isParallel
let isDynamicEndDate = this.isDynamicEndDate
let condition = {
conType: GC.Pivot.PivotConditionType.date,
operator: GC.Pivot.PivotDateFilterOperator.dateToDate,
val: [startTime, endTime],
isDynamicEndDate,
isParallel,
by
};
let filterInfo = {
condition
};
pivotTable.labelFilter("date", filterInfo);
spread.resumePaint();
}
addPivotTable(sheet: GC.Spread.Sheets.Workbook, source: any) {
sheet.suspendPaint();
sheet.name("PivotTable");
sheet.setRowCount(10000);
let pivotTable = sheet.pivotTables.add("PivotTable", source, 1, 1, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.light8);
pivotTable.suspendLayout();
pivotTable.add("car", "Cars", GC.Spread.Pivot.PivotTableFieldType.columnField);
let groupInfo = { originFieldName: "date", dateGroups: [{ by: GC.Pivot.DateGroupType.years},{ by: GC.Pivot.DateGroupType.quarters },{ by: GC.Pivot.DateGroupType.months}, { by: GC.Pivot.DateGroupType.days}] };
pivotTable.group(groupInfo);
pivotTable.add("Years (date)", "Years (date)", GC.Spread.Pivot.PivotTableFieldType.rowField);
pivotTable.add("Quarters (date)", "Quarters (date)", GC.Spread.Pivot.PivotTableFieldType.rowField);
pivotTable.add("Months (date)", "Months (date)", GC.Spread.Pivot.PivotTableFieldType.rowField);
pivotTable.add("Days (date)", "Days (date)", GC.Spread.Pivot.PivotTableFieldType.rowField);
pivotTable.add("quantity", "Quantity", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
pivotTable.resumeLayout();
sheet.resumePaint();
pivotTable.autoFitColumn();
return pivotTable;
}
}
@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">
<script src="$DEMOROOT$/spread/source/data/pivot-data-filter.js" type="text/javascript"></script>
<!-- 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)="initSpread($event)">
</gc-spread-sheets>
<div class="options-container">
<div>custom date to date Filter:</div>
<div class="pivottable-filter date-filter">
<label class="filter-input">startTime: </label>
<input class="filter-input" type="text" id="startTime" [(ngModel)]="startTime">
<label class="filter-input">endTime: </label>
<input class="filter-input" type="text" id="endTime" [(ngModel)]="endTime">
<div class="filter-input">
<label>isDynamicEndDate: </label>
<input type="checkbox" id="isDynamicEndDate" [(ngModel)]="isDynamicEndDate">
</div>
<div class="filter-input">
<label>by: </label>
<select id="by" [(ngModel)]="by">
<option value=1>month</option>
<option value=2>quarter</option>
<option value=3>year</option>
</select>
</div>
<div class="filter-input">
<label>isParallel: </label>
<input type="checkbox" id="isParallel" [(ngModel)]="isParallel">
</div>
<button class="filter-input set-filter" id="clearFilter" (click)="clearDateFilter()">clearFilter</button>
<button class="filter-input set-filter" id="setFilter" (click)="setDateFilter()">setFilter</button>
</div>
</div>
</div>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.pivottable-filter{
height: 100px;
}
.pivot-filter{
width: 200px;
height: 25px;
display: block;
margin-bottom: 10px;
float: left;
}
.filter-input{
width: 200px;
height: 20px;
display: block;
/* margin-left: 15px; */
margin-top: 10px;
}
.set-filter{
width: 200px;
margin-top: 20px;
/* float: right; */
}
.dateFilterSettingItemDiv{
margin: 11px;
}
.set-filter{
width: 200px;
margin-top: 20px;
/* float: right; */
}
.filter-input{
width: 200px;
height: 20px;
display: block;
/* margin-left: 15px; */
margin-top: 10px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.whole-field{
margin-bottom: 10px;
}
(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-shapes': 'npm:@mescius/spread-sheets-shapes/index.js',
'@mescius/spread-sheets-pivot-addon': 'npm:@mescius/spread-sheets-pivot-addon/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);
