This demo show how to use range template show sparkline.
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
<gc-worksheet></gc-worksheet>
</gc-spread-sheets>
</div>
</template>
<script>
import Vue from 'vue';
import '@grapecity/spread-sheets-vue'
import GC from '@grapecity/spread-sheets';
import './styles.css';
let App = Vue.extend({
name: "app",
methods: {
initSpread: function (spread) {
spread.suspendPaint();
let line_templatesheet = new GC.Spread.Sheets.Worksheet();
let column_templatesheet = new GC.Spread.Sheets.Worksheet();
let area_templatesheet = new GC.Spread.Sheets.Worksheet();
let desc_templatesheet = new GC.Spread.Sheets.Worksheet();
line_templatesheet.fromJSON(line_templatejson);
column_templatesheet.fromJSON(column_templatejson);
area_templatesheet.fromJSON(area_templatejson);
desc_templatesheet.fromJSON(des_templatejson);
let sheet = spread.getSheet(0),
line_ct = new GC.Spread.Sheets.CellTypes.RangeTemplate(line_templatesheet, 0, 0, 10, 5),
column_ct = new GC.Spread.Sheets.CellTypes.RangeTemplate(column_templatesheet, 0, 0, 10, 5),
area_ct = new GC.Spread.Sheets.CellTypes.RangeTemplate(area_templatesheet, 0, 0, 10, 5),
desc_ct = new GC.Spread.Sheets.CellTypes.RangeTemplate(desc_templatesheet, 0, 0, 4, 1);
let data = [{
title: "Sales per Square foot",
money: 311.76,
percent: 0.04,
data: {
item1: 300,
item2: 20,
item3: 310,
item4: 360,
item5: 420,
item6: 500,
item7: 425,
item8: 430,
item9: 420,
item10: 425
}
}, {
title: "Sales per Hour",
money: 12745.11,
percent: 0.27,
data: {
item1: 300,
item2: 400,
item3: 340,
item4: 500,
item5: 200,
item6: 380,
item7: 240,
item8: 420,
item9: 320,
item10: 430
}
}, {
title: "Average Price",
money: 17.55,
percent: -0.02,
data: {
item1: 200,
item2: 300,
item3: 280,
item4: 450,
item5: 250,
item6: 180,
item7: 290,
item8: 300,
item9: 320,
item10: 270
}
}, {
title: "Avg Sale per Customer",
money: 179,
percent: -0.03,
data: {
item1: 30,
item2: 38,
item3: 4,
item4: 10,
item5: 6,
item6: 12,
item7: 18,
item8: 7,
item9: 16,
item10: 12
}
}, {
title: "Avg Minutes in Store",
money: 8.32,
percent: -0.17,
data: {
item1: 150,
item2: 370,
item3: -60,
item4: 10,
item5: -190,
item6: 40,
item7: 50,
item8: 130,
item9: -70,
item10: 0
}
}, {
title: "Top Product Score",
money: 320,
percent: 0.23,
data: {
item1: 1,
item2: 3,
item3: 8,
item4: 2,
item5: 8,
item6: 2,
item7: 9,
item8: 3,
item9: 7,
item10: 4
}
}, {
title: "Avg Units per Customer",
money: 4.31,
percent: -0.14,
data: {
item1: 1,
item2: 3,
item3: 8,
item4: 2,
item5: 8,
item6: 2,
item7: 9,
item8: 3,
item9: 7,
item10: 4
}
}, {
title: "Top Region",
area: "North America"
}];
sheet.options.gridline.showHorizontalGridline = false;
sheet.options.gridline.showVerticalGridline = false;
sheet.setColumnWidth(0, 250);
sheet.setColumnWidth(2, 250);
sheet.setColumnWidth(4, 250);
sheet.setColumnWidth(1, 20);
sheet.setColumnWidth(3, 20);
sheet.setRowHeight(1, 160);
sheet.setRowHeight(2, 20);
sheet.setRowHeight(3, 160);
sheet.setRowHeight(4, 20);
sheet.setRowHeight(5, 160);
sheet.setRowHeight(0, 45);
sheet.getCell(0, 0).hAlign(1).vAlign(1).font("bold 18pt Calibri").value("Retail Metrics");
let green = "rgb(150,196,0)",
orange = "rgb(246,191,0)",
red = "rgb(222,0,0";
sheet.getCell(1, 0).backColor(green).cellType(line_ct).value(data[0]);
sheet.getCell(1, 2).backColor(green).cellType(line_ct).value(data[1]);
sheet.getCell(1, 4).backColor(orange).cellType(line_ct).value(data[2]);
sheet.getCell(3, 0).backColor(orange).cellType(area_ct).value(data[3]);
sheet.getCell(3, 2).backColor(red).cellType(column_ct).value(data[4]);
sheet.getCell(3, 4).backColor(green).cellType(column_ct).value(data[5]);
sheet.getCell(5, 0).backColor(red).cellType(column_ct).value(data[6]);
sheet.getCell(5, 2).backColor("rgb(85,85,85)").cellType(desc_ct).value(data[7]);
spread.resumePaint();
},
}
});
new Vue({
render: h => h(App)
}).$mount('#app');
</script>
<!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/vue/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- SystemJS -->
<script src="$DEMOROOT$/en/vue/node_modules/systemjs/dist/system.src.js"></script>
<script src="$DEMOROOT$/spread/source/data/range-temeplate.js" type="text/javascript"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app.vue');
System.import('$DEMOROOT$/en/lib/vue/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
meta: {
'*.css': { loader: 'css' },
'*.vue': { loader: 'vue-loader' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@grapecity/spread-sheets': 'npm:@grapecity/spread-sheets/index.js',
'@grapecity/spread-sheets-vue': 'npm:@grapecity/spread-sheets-vue/index.js',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js',
'jszip': 'npm:jszip/dist/jszip.js',
'css': 'npm:systemjs-plugin-css/css.js',
'vue': 'npm:vue/dist/vue.min.js',
'vue-loader': 'npm:systemjs-vue-browser/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
}
}
});
})(this);