Skip to content

Commit 06f1384

Browse files
SrisabariSF4261SrisabariSF4261
committed
Save and load report through the toolbar in javascript pivotview component
1 parent 9683db1 commit 06f1384

6 files changed

Lines changed: 206 additions & 2 deletions

File tree

‎.github/workflows/gitleaks.yaml‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
name: Secret Value found!!
2+
on:
3+
push:
4+
public:
5+
jobs:
6+
scan:
7+
name: gitleaks
8+
runs-on: ubuntu-latest
9+
steps:
10+
- name: Checkout
11+
uses: actions/checkout@v3
12+
- name: Install the gitleaks
13+
run: wget https://github.com/zricethezav/gitleaks/releases/download/v8.15.2/gitleaks_8.15.2_linux_x64.tar.gz
14+
shell: pwsh
15+
- name: Extract the tar file
16+
run: tar xzvf gitleaks_8.15.2_linux_x64.tar.gz
17+
- name: Generate the report
18+
id: gitleaks
19+
run: $GITHUB_WORKSPACE/gitleaks detect -s $GITHUB_WORKSPACE -f json -r $GITHUB_WORKSPACE/leaksreport.json
20+
shell: bash
21+
continue-on-error: true
22+
- name: Setup NuGet.exe
23+
if: steps.gitleaks.outcome != 'success'
24+
uses: nuget/setup-nuget@v1
25+
with:
26+
nuget-version: latest
27+
- name: Install the dotnet
28+
if: steps.gitleaks.outcome != 'success'
29+
uses: actions/setup-dotnet@v3
30+
with:
31+
dotnet-version: '3.1.x'
32+
- name: Install the report tool packages
33+
if: steps.gitleaks.outcome != 'success'
34+
run: |
35+
nuget install "Syncfusion.Email" -source ${{ secrets.NexusFeedLink }} -ExcludeVersion
36+
dir $GITHUB_WORKSPACE/Syncfusion.Email/lib/netcoreapp3.1
37+
dotnet $GITHUB_WORKSPACE/Syncfusion.Email/lib/netcoreapp3.1/GitleaksReportMail.dll ${{ secrets.CITEAMCREDENTIALS }} "$GITHUB_REF_NAME" ${{ secrets.NETWORKCREDENTIALS }} ${{ secrets.NETWORKKEY }} "$GITHUB_WORKSPACE" ${{ secrets.ORGANIZATIONNAME }}
38+
exit 1

‎README.md‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,8 @@
1-
# save-and-load-report-through-the-toolbar-in-javascript-pivotview-component
2-
A quick-start project that demonstrates how to save and load reports in the Syncfusion Angular Pivotview component using the toolbar.
1+
# Save and load report through the toolbar in javascript pivotview component
2+
A quick-start project that demonstrates how to save and load reports in the Syncfusion Javascript Pivotview component using the toolbar.
3+
4+
# Project prerequisites
5+
Make sure that you have the compatible versions of Visual Studio Code in your machine before starting to work on this project.
6+
7+
# How to run this application
8+
To run this application, you first need to clone the [Save-and-load-report-through-the-toolbar-in-javascript-pivotview-component](https://github.com/SyncfusionExamples/save-and-load-report-through-the-toolbar-in-javascript-pivotview-component) repository and then open it in Visual Studio Code. Now, run the index.html in web browser, it will render the Essential JS 2 pivot table control.

‎es5-datasource.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
var pivotData = [
2+
{ Amount: 2100, Country: "Canada", Date: "FY 2005", Product: "Bike", Quantity: 22, State: "Alberta" },
3+
{ Amount: 1100, Country: "Canada", Date: "FY 2006", Product: "Van", Quantity: 32, State: "Quebec" },
4+
{ Amount: 3100, Country: "Canada", Date: "FY 2007", Product: "Car", Quantity: 22, State: "Alberta" },
5+
{ Amount: 4800, Country: "France", Date: "FY 2005", Product: "Bike", Quantity: 49, State: "Charente-Maritime" },
6+
{ Amount: 9100, Country: "France", Date: "FY 2007", Product: "Car", Quantity: 64, State: "Charente-Maritime" },
7+
{ Amount: 2350, Country: "France", Date: "FY 2008", Product: "Van", Quantity: 46, State: "Gers" },
8+
{ Amount: 3400, Country: "Germany", Date: "FY 2005", Product: "Bike", Quantity: 78, State: "Bayern" },
9+
{ Amount: 8400, Country: "Germany", Date: "FY 2006", Product: "Van", Quantity: 90, State: "Hamburg" },
10+
{ Amount: 7200, Country: "Germany", Date: "FY 2008", Product: "Car", Quantity: 92, State: "Bayern" },
11+
{ Amount: 1040, Country: "United Kingdom", Date: "FY 2005", Product: "Bike", Quantity: 47, State: "England" },
12+
{ Amount: 1500, Country: "United Kingdom", Date: "FY 2006", Product: "Van", Quantity: 24, State: "England" },
13+
{ Amount: 4820, Country: "United Kingdom", Date: "FY 2008", Product: "Car", Quantity: 72, State: "England" },
14+
{ Amount: 1520, Country: "United States", Date: "FY 2006", Product: "Bike", Quantity: 53, State: "North Carolina" },
15+
{ Amount: 3320, Country: "United States", Date: "FY 2007", Product: "Car", Quantity: 49, State: "South Carolina" },
16+
{ Amount: 6300, Country: "United States", Date: "FY 2008", Product: "Van", Quantity: 45, State: "South Carolina" },
17+
];

‎index.css‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
.e-save-report::before {
2+
content: "\e703";
3+
font-size: 30px;
4+
}
5+
6+
.e-open-report::before {
7+
content: "\e65f";
8+
font-size: 30px;
9+
}
10+
11+
#template {
12+
display: flex;
13+
align-items: center;
14+
gap: 20px;
15+
height: 55px !important;
16+
}
17+
18+
.icon-container {
19+
display: flex;
20+
flex-direction: column;
21+
align-items: center;
22+
color: black;
23+
text-decoration: none;
24+
}
25+
26+
.icon-container:hover,
27+
.icon-container:focus,
28+
.icon-container:active {
29+
text-decoration: none;
30+
color: black;
31+
}
32+
33+
.file-input {
34+
position: absolute;
35+
width: 24px;
36+
height: 24px;
37+
opacity: 0;
38+
}
39+
40+
.e-open-report{
41+
margin-left: 10px;
42+
}
43+
44+
.e-save-report,
45+
.e-open-report {
46+
cursor: pointer;
47+
font-size: 14px;
48+
}

‎index.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html><html lang="en"><head>
2+
<title>EJ2 Pivot Grid</title>
3+
<meta charset="utf-8">
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta name="description" content="Typescript Pivot Grid Control">
6+
<meta name="author" content="Syncfusion">
7+
<link href="index.css" rel="stylesheet">
8+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet">
9+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet">
10+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-calendars/styles/material.css" rel="stylesheet">
11+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet">
12+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-grids/styles/material.css" rel="stylesheet">
13+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-charts/styles/material.css" rel="stylesheet">
14+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet">
15+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/material.css" rel="stylesheet">
16+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet">
17+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet">
18+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-pivotview/styles/material.css" rel="stylesheet">
19+
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
20+
<link href="index.css" rel="stylesheet">
21+
22+
<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
23+
<script src="es5-datasource.js" type="text/javascript"></script>
24+
</head>
25+
26+
<body>
27+
<div id="container">
28+
<div>
29+
<div id="PivotTable"></div>
30+
</div>
31+
</div>
32+
<div id="template">
33+
<label for="files" class="e-btn-icon e-open-report e-icons icon-container">
34+
<input id="files" type="file" class="file-input" onchange="readBlob()" />
35+
<span class="icon-text">Open</span>
36+
</label>
37+
<a id="save" class="e-btn-icon e-save-report e-icons icon-container">
38+
<span class="icon-text">Save</span>
39+
</a>
40+
</div>
41+
42+
<script>
43+
var ele = document.getElementById('container');
44+
if(ele) {
45+
ele.style.visibility = "visible";
46+
}
47+
</script>
48+
<script src="index.js" type="text/javascript"></script>
49+
</body></html>

‎index.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
var pivotTableObj = new ej.pivotview.PivotView({
2+
dataSourceSettings: {
3+
columns: [{ name: 'Date', caption: 'Date' }, { name: 'Product' }],
4+
dataSource: pivotData,
5+
expandAll: false,
6+
enableSorting: true,
7+
filters: [],
8+
drilledMembers: [{ name: 'Country', items: ['France'] }],
9+
formatSettings: [{ name: 'Amount', format: 'C0' }],
10+
rows: [{ name: 'Country' }, { name: 'State' }],
11+
values: [{ name: 'Amount', caption: 'Sold Amount' }, { name: 'Quantity', caption: 'Quantity' }]
12+
},
13+
showToolbar: true,
14+
toolbarTemplate: '#template',
15+
height: 350,
16+
dataBound: function ondataBound() {
17+
const dataSource = JSON.parse(pivotTableObj.getPersistData()).dataSourceSettings;
18+
const a = document.getElementById('save');
19+
const mime_type = 'application/octet-stream';
20+
a.setAttribute('download', 'pivot.JSON');
21+
a.href = 'data:' + mime_type + ';base64,' + btoa(JSON.stringify(dataSource) || '');
22+
document.getElementById('files').addEventListener('change', readBlob, false);
23+
}
24+
});
25+
26+
function readBlob() {
27+
const files = document.getElementById('files').files;
28+
const file = files[0];
29+
let start = 0, stop = 0;
30+
if (file && file.size) {
31+
stop = file.size - 1;
32+
}
33+
const reader = new FileReader();
34+
reader.onloadend = function(evt) {
35+
if (evt.target.readyState == FileReader.DONE) {
36+
pivotTableObj.dataSourceSettings = JSON.parse(evt.target.result);
37+
}
38+
};
39+
if (file) {
40+
const blob = file.slice(start, stop + 1);
41+
reader.readAsBinaryString(blob);
42+
}
43+
document.getElementById('files').value = '';
44+
}
45+
46+
pivotTableObj.appendTo('#PivotTable');

0 commit comments

Comments
 (0)