Legend :
The first column represents the state.
The second column represents the winner margin in the last eleven elections, from 1976 to 2016.
It uses the Column Sparkline, red color represents GOP, and blue color represents DNC.
The third column represents the forecasted vote share for DNC.
It uses a formula rule, highlight color represents more than 50%.
The fourth column represents the forecasted vote share for GOP.
It uses a formula rule, highlight color represents more than 50%.
The fifth column represents the difference of the forecasted vote share between the two parties.
It uses the Vari Sparkline, red color represents GOP, and blue color represents DNC.
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 GC from '@mescius/spread-sheets';
import "@mescius/spread-sheets-tablesheet";
import './styles.css';
@Component({
selector: 'app-component',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
hostStyle = {
width: '100%',
height: '100%',
overflow: 'hidden',
float: 'left'
};
constructor() {
}
initSpread($event: any) {
let spread = $event.spread;
spread.suspendPaint();
spread.clearSheets();
spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader;
//init a data manager
var dataManager = spread.dataManager();
//add product table
var myTable = dataManager.addTable("myTable", {
remote: {
read: {
url: "$DEMOROOT$/spread/source/data/2020-election-results.json"
}
},
schema: {
dataPath: "2020-election-data"
}
});
//init a table sheet
var sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet);
sheet.options.allowAddNew = false;
sheet.actionColumn.options({ visible: false }); //hide action column
sheet.setDefaultRowHeight(40, GC.Spread.Sheets.SheetArea.colHeader);
sheet.setDefaultRowHeight(35);
sheet.options.alternatingRowOptions = null;
//bind a view to the table sheet
var normalStyle = { vAlign: "center" };
var style = { vAlign: "center", wordWrap: true, hAlign:"center" };
var redRule = {
ruleType: "formulaRule",
formula: 'VALUE(LEFT(@,FIND("%",@)-1))>50',
style: { backColor: "#e45d5d", foreColor: "white", hAlign:"center" }
};
var blueRule = {
ruleType: "formulaRule",
formula: 'VALUE(LEFT(@,FIND("%",@)-1))>50',
style: { backColor: "#4f9bed", foreColor: "white" , hAlign:"center"}
};
var myView = myTable.addView("myView", [
{ value: "State", width: 130, style: normalStyle, },
{ value: '=COLUMNSPARKLINE([@past_elections],1,,,"{sc:#e45d5d,sn:true,nc:#4f9bed,dh:true,dxa:true}")', caption: "Winner margin in the last eleven elections", width: 200 },
{ value: '=CONCAT(TEXT([@[Forecast GOP %]], "00.0%"), "\n", TEXT([@[Forecast GOP Low]], "00.0%"), "-", TEXT([@[Forecast GOP High]], "00.0%"))', caption: "Forecasted vote share for GOP", width: 200, style: style, conditionalFormats: [redRule] },
{ value: '=CONCAT(TEXT([@[Forecast DNC]], "00.0%"), "\n", TEXT([@[Forecast DNC Low]], "00.0%"), "-", TEXT([@[Forecast DNC High]], "00.0%"))', caption: "Forecasted vote share for DNC", width: 200, style: style, conditionalFormats: [blueRule] },
{ value: '=VARISPARKLINE([@[Winner Margin]],0,,,,,TRUE,"#e45d5d","#4f9bed")', caption: "Difference", width: 200, style: normalStyle },
]);
myView.fetch().then(function () {
sheet.setDataView(myView);
});
spread.resumePaint();
}
}
@NgModule({
imports: [BrowserModule, SpreadSheetsModule],
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)="initSpread($event)">
</gc-spread-sheets>
</div>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
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-tablesheet': 'npm:@mescius/spread-sheets-tablesheet/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);
