Added the sample into the repository
|
@ -0,0 +1,5 @@
|
|||
# Essential JS 2 for TypeScript - Expense Tracker
|
||||
|
||||
This expense tracker demo application showcases using several Essential JS 2 components together in
|
||||
a real-world application scenario. You can further explore the source code of this application and
|
||||
use it as a reference for integrating Essential JS 2 components into your applications.
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"sasslint": ["./styles/**/*.scss"],
|
||||
"tslint": ["./src/**/*.ts", "!./src/common/common.data.ts"],
|
||||
"styleDependency": ["ej2"],
|
||||
"ts": ["./src/**/*.ts"],
|
||||
"isShowCase": true
|
||||
}
|
После Ширина: | Высота: | Размер: 6.4 KiB |
|
@ -0,0 +1,80 @@
|
|||
var fs = require('fs');
|
||||
var gulp = require('gulp');
|
||||
var webpack = require('webpack');
|
||||
var webpackGulp = require('webpack-stream');
|
||||
|
||||
/**
|
||||
* Compile script files
|
||||
*/
|
||||
gulp.task('scripts', function (done) {
|
||||
var ts = require('gulp-typescript');
|
||||
var tsProject = ts.createProject('tsconfig.json', { typescript: require('typescript') });
|
||||
var tsResult = gulp.src(['./src/**/*.ts', './spec/**/*.ts'], { base: '.' })
|
||||
.pipe(ts(tsProject));
|
||||
tsResult.js
|
||||
.pipe(gulp.dest('./'))
|
||||
.on('end', function () {
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Compile scss files
|
||||
*/
|
||||
gulp.task('styles', function () {
|
||||
var sass = require('gulp-sass');
|
||||
return gulp.src(['./styles/**/*.scss'], { base: './' })
|
||||
.pipe(sass({
|
||||
outputStyle: 'expanded',
|
||||
includePaths: './node_modules/@syncfusion/'
|
||||
}))
|
||||
.pipe(gulp.dest('.'));
|
||||
});
|
||||
|
||||
/**
|
||||
* Bundle all module using webpack
|
||||
*/
|
||||
gulp.task('bundle', function () {
|
||||
var webpackConfig = require(fs.realpathSync('./webpack.config.js'));
|
||||
return gulp.src('')
|
||||
.pipe(webpackGulp(webpackConfig, webpack))
|
||||
.pipe(gulp.dest('.'));
|
||||
});
|
||||
|
||||
/**
|
||||
* Build ts and scss files
|
||||
*/
|
||||
gulp.task('build', function (done) {
|
||||
var runSequence = require('run-sequence');
|
||||
runSequence('scripts', 'styles', 'bundle', done);
|
||||
});
|
||||
|
||||
/**
|
||||
* Run test for samplebrowser
|
||||
*/
|
||||
gulp.task('test', function (done) {
|
||||
var karma = require('karma');
|
||||
new karma.Server({
|
||||
configFile: __dirname + '/karma.conf.js',
|
||||
singleRun: true,
|
||||
browsers: ['ChromeHeadless'],
|
||||
browserNoActivityTimeout: 30000
|
||||
}, function (e) {
|
||||
done(e === 0 ? null : 'karma exited with status ' + e);
|
||||
}).start();
|
||||
});
|
||||
|
||||
/**
|
||||
* Load the samples
|
||||
*/
|
||||
gulp.task('serve', ['build'], function (done) {
|
||||
var browserSync = require('browser-sync');
|
||||
var bs = browserSync.create('Essential JS 2');
|
||||
var options = {
|
||||
server: {
|
||||
baseDir: './'
|
||||
},
|
||||
ui: false
|
||||
};
|
||||
bs.init(options, done);
|
||||
});
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Essential JS 2 for TypeScript - Expense Tracker</title>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="Essential JS 2 for TypeScript - Expense Tracker">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<link rel="shortcut icon" href="./styles/favicon.ico" />
|
||||
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<link href="./styles/styles.css" rel="stylesheet" />
|
||||
<link href="./styles/index.css" rel="stylesheet" />
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed|Roboto" rel="stylesheet">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/shim.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/reflect-metadata/0.1.10/Reflect.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.8.18/zone.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
if (/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) {
|
||||
document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.5/bluebird.min.js"><\/script>');
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<div id="dialog" class="expense-dialog">
|
||||
</div>
|
||||
<div id="confirmDialog" style='min-width: 260px;'></div>
|
||||
|
||||
<body>
|
||||
<div id="addexpenseDialog" class="expense-dialog"></div>
|
||||
<nav class="navbar navbar-default" role="navigation">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<span id="menu-toggle" href="#" class="navbar-toggle e-icon" style="float:left"></span>
|
||||
<div class="navbar-brand samplenameheader"></div>
|
||||
<span id="filter-toggle" href="#" class="navbar-toggle filter-toggle e-icon" style="float:right"></span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div id="sidebar-wrapper" class="sidebar-toggle">
|
||||
<div class='samplename-header'>
|
||||
<div class='samplename'></div>
|
||||
</div>
|
||||
<div class="info align-center">
|
||||
<div class="image"></div>
|
||||
<div class="content nameContent">
|
||||
<p class='name' id='user-name'>Nicholas Delacruz</p>
|
||||
<div class='wallet-container'>
|
||||
<span style='height: 27px;' class='balance-align'><img src="./styles/images/cash-wallet.svg" /></span>
|
||||
<span id="current-balance" class='balance-align'>$ 0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-list align-center nav-list">
|
||||
<div class='nav-item'>
|
||||
<a class="overview ripple-element" id="nav-overview" href="#/dashboard">Dashboard</a>
|
||||
</div>
|
||||
<div class='nav-item'>
|
||||
<a class="expense ripple-element" id="nav-expense" href="#/expense">Transactions</a>
|
||||
</div>
|
||||
<div class='nav-item'>
|
||||
<a class="about ripple-element" id="nav-about" href="#/about">About</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content container-fluid rightpane">
|
||||
<div class="content-wrapper">
|
||||
<div id="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="overlay"></div>
|
||||
</body>
|
||||
<script src="./dist/common.js "></script>
|
||||
|
||||
<script>
|
||||
function retDate(DateTime) {
|
||||
return window.getDate(DateTime)
|
||||
}
|
||||
</script>
|
||||
</html>
|
|
@ -0,0 +1,10 @@
|
|||
Essential JS 2 library is available under the Syncfusion Essential Studio program, and can be licensed either under the Syncfusion Community License Program or the Syncfusion commercial license.
|
||||
|
||||
To be qualified for the Syncfusion Community License Program you must have a gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and have less than five (5) developers in your organization, and agree to be bound by Syncfusion’s terms and conditions.
|
||||
|
||||
Customers who do not qualify for the community license can contact sales@syncfusion.com for commercial licensing options.
|
||||
|
||||
Under no circumstances can you use this product without (1) either a Community License or a commercial license and (2) without agreeing and abiding by Syncfusion’s license containing all terms and conditions.
|
||||
|
||||
The Syncfusion license that contains the terms and conditions can be found at
|
||||
https://www.syncfusion.com/content/downloads/syncfusion_license.pdf
|
|
@ -0,0 +1,57 @@
|
|||
{
|
||||
"name": "@syncfusion/ej2-ts-expense-tracker",
|
||||
"version": "0.0.1",
|
||||
"description": "Essential JS 2 - Expense Tracker",
|
||||
"author": "Syncfusion Inc.",
|
||||
"license": "SEE LICENSE IN license",
|
||||
"dependencies": {
|
||||
"@syncfusion/ej2-base": "*",
|
||||
"@syncfusion/ej2-buttons": "*",
|
||||
"@syncfusion/ej2-calendars": "*",
|
||||
"@syncfusion/ej2-charts": "*",
|
||||
"@syncfusion/ej2-data": "*",
|
||||
"@syncfusion/ej2-dropdowns": "*",
|
||||
"@syncfusion/ej2-grids": "*",
|
||||
"@syncfusion/ej2-inputs": "*",
|
||||
"@syncfusion/ej2-popups": "*",
|
||||
"browser-sync": "^2.23.6",
|
||||
"crossroads": "^0.12.2",
|
||||
"hasher": "^1.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/chai": "^3.4.28",
|
||||
"@types/hasher": "0.0.27",
|
||||
"@types/crossroads": "0.0.28",
|
||||
"@types/jasmine": "^2.2.29",
|
||||
"@types/jasmine-ajax": "^3.1.27",
|
||||
"@types/requirejs": "^2.1.26",
|
||||
"gulp": "^3.9.0",
|
||||
"gulp-sass": "^3.1.0",
|
||||
"gulp-print": "^2.0.1",
|
||||
"gulp-tslint": "^7.0.1",
|
||||
"gulp-sass-lint": "^1.1.1",
|
||||
"gulp-typescript": "^2.13.0",
|
||||
"tslint": "4.0.2",
|
||||
"run-sequence": "2.2.0",
|
||||
"typescript": "2.3.3",
|
||||
"webpack": "2.5.1",
|
||||
"webpack-stream": "^3.2.0"
|
||||
},
|
||||
"keywords": [
|
||||
"ej2",
|
||||
"syncfusion",
|
||||
"Expense Tracker"
|
||||
],
|
||||
"scripts": {
|
||||
"compile": "gulp ci-compile",
|
||||
"ci-publish": "gulp publish-samples",
|
||||
"build": "gulp lint && gulp build"
|
||||
},
|
||||
"config": {
|
||||
"ghooks": {
|
||||
"pre-commit": "gulp pre-commit",
|
||||
"pre-push": "gulp pre-push",
|
||||
"commit-msg": "gulp commit-msg"
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,59 @@
|
|||
<div>
|
||||
<div class='about-heading'>About this sample</div>
|
||||
<div class='about-description'>This expense tracker demo application showcases using several Essential JS 2 components together in a real-world application scenario. You can further explore the source code of this application and use it as a reference for integrating Essential JS 2 components into your applications.</div>
|
||||
<div class='list-heading'>List of EJ2 components used in this sample</div>
|
||||
<div class='about-component'>
|
||||
<div class='control-item'>
|
||||
<span class="icon-button e-sb-icon control-icon"></span>
|
||||
<a class='control-name' href="http://ej2.syncfusion.com/documentation/button/getting-started.html" target="_blank">Button</a>
|
||||
</div>
|
||||
<div class='control-item'>
|
||||
<span class="icon-chart e-sb-icon control-icon"></span>
|
||||
<a class='control-name' href="http://ej2.syncfusion.com/documentation/chart/getting-started.html" target="_blank">Chart</a>
|
||||
</div>
|
||||
<div class='control-item'>
|
||||
<span class="icon-checkbox e-sb-icon control-icon"></span>
|
||||
<a class='control-name' href="http://ej2.syncfusion.com/documentation/check-box/getting-started.html" target="_blank">CheckBox</a>
|
||||
</div>
|
||||
<div class='control-item'>
|
||||
<span class="icon-datepicker e-sb-icon control-icon"></span>
|
||||
<a class='control-name' href="http://ej2.syncfusion.com/documentation/datepicker/getting-started.html" target="_blank">DatePicker</a>
|
||||
</div>
|
||||
<div class='control-item'>
|
||||
<span class="icon-daterangepicker e-sb-icon control-icon"></span>
|
||||
<a class='control-name' href="http://ej2.syncfusion.com/documentation/daterangepicker/getting-started.html" target="_blank">DateRangePicker</a>
|
||||
</div>
|
||||
<div class='control-item'>
|
||||
<span class="icon-dialog e-sb-icon control-icon"></span>
|
||||
<a class='control-name' href="http://ej2.syncfusion.com/documentation/dialog/getting-started.html" target="_blank">Dialog</a>
|
||||
</div>
|
||||
<div class='control-item'>
|
||||
<span class="icon-dropdownlist e-sb-icon control-icon"></span>
|
||||
<a class='control-name' href="http://ej2.syncfusion.com/documentation/drop-down-list/getting-started.html" target="_blank">DropDownList</a>
|
||||
</div>
|
||||
<div class='control-item'>
|
||||
<span class="icon-grid e-sb-icon control-icon"></span>
|
||||
<a class='control-name' href="http://ej2.syncfusion.com/documentation/grid/getting-started.html" target="_blank">Grid</a>
|
||||
</div>
|
||||
<div class='control-item'>
|
||||
<span class="icon-multiselect e-sb-icon control-icon"></span>
|
||||
<a class='control-name' href="http://ej2.syncfusion.com/documentation/multi-select/getting-started.html" target="_blank">MultiSelect</a>
|
||||
</div>
|
||||
<div class='control-item'>
|
||||
<span class="icon-numerictextbox e-sb-icon control-icon"></span>
|
||||
<a class='control-name' href="http://ej2.syncfusion.com/documentation/numerictextbox/getting-started.html" target="_blank">NumericTextBox</a>
|
||||
</div>
|
||||
<div class='control-item'>
|
||||
<span class="icon-radiobutton e-sb-icon control-icon"></span>
|
||||
<a class='control-name' href="http://ej2.syncfusion.com/documentation/radio-button/getting-started.html" target="_blank">RadioButton</a>
|
||||
</div>
|
||||
<div class='control-item'>
|
||||
<span class="icon-textboxes e-sb-icon control-icon"></span>
|
||||
<a class='control-name' href="http://ej2.syncfusion.com/documentation/textbox/getting-started.html" target="_blank">TextBoxes</a>
|
||||
</div>
|
||||
<div class='control-item'>
|
||||
<span class="icon-timepicker e-sb-icon control-icon"></span>
|
||||
<a class='control-name' href="http://ej2.syncfusion.com/documentation/timepicker/getting-started.html" target="_blank">TimePicker</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
|
@ -0,0 +1,12 @@
|
|||
/**
|
||||
* About handler
|
||||
*/
|
||||
|
||||
import { MyWindow } from '../index';
|
||||
import { cardUpdate } from '../dashboard/dashboard';
|
||||
|
||||
declare let window: MyWindow;
|
||||
|
||||
window.about = (): void => {
|
||||
cardUpdate();
|
||||
};
|
|
@ -0,0 +1,181 @@
|
|||
<div class="row" style="margin-bottom: 16px;">
|
||||
<div class="page-title">
|
||||
<div style="display: inline-block">Dashboard</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-xs-12 col-xl-6 col-lg-3 daterange overview-range-picker">
|
||||
<input id="daterange" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-xs-6 col-xl-3 col-lg-3 col-md-3 col-sm-6 card-container">
|
||||
<div class="card">
|
||||
<div class="card-body income-card">
|
||||
<div class="card-block">
|
||||
<div class="media">
|
||||
<div class="media-body text-xs-left float-right">
|
||||
<h3 class="card-value" id="tolincome">$0</h3>
|
||||
<span class="card-text">Income</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-xl-3 col-lg-3 col-md-3 col-sm-6 card-container">
|
||||
<div class="card">
|
||||
<div class="card-body expense-card">
|
||||
<div class="card-block">
|
||||
<div class="media">
|
||||
<div class="media-body text-xs-left float-right">
|
||||
<h3 class="card-value" id='tolexpense'>$0</h3>
|
||||
<span class="card-text">Expenses</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-xl-3 col-lg-3 col-md-3 col-sm-6 card-container">
|
||||
<div class="card">
|
||||
<div class="card-body balance">
|
||||
<div class="card-block">
|
||||
<div class="media">
|
||||
<div class="media-body text-xs-left float-right">
|
||||
<h3 class="card-value" id="tolbalance">$0</h3>
|
||||
<span class="card-text">Balance</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-xl-3 col-lg-3 col-md-3 col-sm-6 card-container">
|
||||
<div class="card">
|
||||
<div class="card-body transaction">
|
||||
<div class="card-block">
|
||||
<div class="media">
|
||||
<div class="media-body text-xs-left float-right">
|
||||
<h3 class="card-value" id="toltransaction">0</h3>
|
||||
<span class="card-text">Transactions</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='pie-chart-container'>
|
||||
<div class="row pie-chart" id='totalExpense'>
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<div class="pane col-xs-12 col-sm-12 col-md-12 pie-container">
|
||||
<div class="pieChartHeader">
|
||||
<p class="chart-title">Total Expenses</p>
|
||||
<p id="rangeDate" class="chart-value"></p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="pieChart">
|
||||
<div id="total-expense"></div>
|
||||
</div>
|
||||
<div class="chartLegend" style="margin: 0 auto;">
|
||||
<div style="position: relative">
|
||||
<div class="legend-waitingpopup" id="grid-popup" style="display:none">
|
||||
<span class="legend-image">
|
||||
<svg class="e-spin-material" viewBox="0 0 30 30" >
|
||||
<path class="e-path-circle" stroke-width="3" d="M15,1.5A13.5,13.5 0 1 1 1.5,15" stroke-dasharray="63.61725123519331" stroke-dashoffset="190.0035236891107" transform="rotate(-90 15 15)"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pane legendGrid" style="box-shadow: none; min-width: 250px;" id="legend-grid"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div class="line-chart-area">
|
||||
<div class="col-xs-12 col-sm-6 col-md-6 chart-container">
|
||||
<div class="chart-padding">
|
||||
<div id="balance" class="line-chart" style="width:100%; max-width: 494px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column-chart-area">
|
||||
<div class="col-xs-12 col-sm-6 col-md-6 chart-container">
|
||||
<div class="chart-padding">
|
||||
<div class="column-chart" id="account-balance" style="width:100% "></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row recent-expense-grid">
|
||||
<div class="col-xs-6 col-sm-6 col-md-12" style="width:100%">
|
||||
<div id="recentexpense-grid"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script id="rowtemplate" type="text/x-template">
|
||||
<tr style="height: 30px;">
|
||||
<td>
|
||||
<div style="width: 16px; height: 16px; margin-left: 1px; border-radius: 16px; background:${color}"></div>
|
||||
</td>
|
||||
<td> ${text} </td>
|
||||
<td> ${getCurrencyVal(data.y)} </td>
|
||||
<td style="text-align:right;"> ${x} </td>
|
||||
</tr>
|
||||
</script>
|
||||
|
||||
<script id="template" type="text/x-template">
|
||||
<div class="normalRes">
|
||||
<div class="category-icon ${Category}"></div>
|
||||
<div class='category-text'>${Category}</div>
|
||||
</div>
|
||||
<div class="mediumRes">
|
||||
<div>
|
||||
<div class="category-icon ${Category}"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div> ${Category} </div>
|
||||
<div class="description-section"> ${Description} </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="smallRes">
|
||||
<div class='sm-category sm-icon'>
|
||||
<div class="category-icon ${Category}"></div>
|
||||
</div>
|
||||
<div class='sm-category category-content'>
|
||||
<div> ${Category} </div>
|
||||
<div class="description-section"> ${Description} </div>
|
||||
<div> ${PaymentMode} </div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script id="amtTemplate" type="text/x-template">
|
||||
<div class="normalRes">
|
||||
<div class='amt-payment ${TransactionType}'>
|
||||
<span>$</span> <span>${Amount}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mediumRes">
|
||||
<div class='amt-payment ${TransactionType}'>
|
||||
<span>$</span> <span>${Amount}</span>
|
||||
</div>
|
||||
<div>${getDate(data.DateTime)}</div>
|
||||
</div>
|
||||
<div class="smallRes">
|
||||
<div class='amt-payment ${TransactionType}'>
|
||||
<span>$</span> <span>${Amount}</span>
|
||||
</div>
|
||||
<div>${getDate(data.DateTime)}</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script id="dateTemplate" type="text/x-template">
|
||||
${getDate(data.DateTime)}
|
||||
</script>
|
|
@ -0,0 +1,743 @@
|
|||
/**
|
||||
* Dashboard handler
|
||||
*/
|
||||
import { DateRangePicker, RangeEventArgs } from '@syncfusion/ej2-calendars';
|
||||
import { Query, DataManager, Predicate } from '@syncfusion/ej2-data';
|
||||
import { Internationalization, isNullOrUndefined as isNOU, extend } from '@syncfusion/ej2-base';
|
||||
import {
|
||||
AccumulationChart, AccumulationLegend, PieSeries, AccumulationDataLabel, AccumulationTooltip,
|
||||
IAccTextRenderEventArgs, AccumulationSelection, IAccAnimationCompleteEventArgs,
|
||||
Chart, ColumnSeries, Category, Legend, Tooltip, ChartAnnotation,
|
||||
LineSeries, AreaSeries, DateTime, Logarithmic, Crosshair
|
||||
} from '@syncfusion/ej2-charts';
|
||||
AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationDataLabel, AccumulationTooltip, AccumulationSelection, ChartAnnotation);
|
||||
Chart.Inject(ColumnSeries, Category, Legend, Tooltip, ChartAnnotation, DateTime, Crosshair);
|
||||
Chart.Inject(LineSeries, AreaSeries, DateTime, Logarithmic, Legend, Tooltip);
|
||||
import { Grid, Page, Toolbar } from '@syncfusion/ej2-grids';
|
||||
|
||||
Grid.Inject(Page, Toolbar);
|
||||
import { MyWindow, dataSource } from '../index';
|
||||
|
||||
export interface IExpense {
|
||||
UniqueId: string;
|
||||
DateTime: Date;
|
||||
Category: string;
|
||||
PaymentMode: string;
|
||||
TransactionType: string;
|
||||
Description: string;
|
||||
Amount: number;
|
||||
}
|
||||
|
||||
interface IExpenseData {
|
||||
x: string;
|
||||
y: number;
|
||||
text: string;
|
||||
}
|
||||
|
||||
let predicateStart: Predicate = new Predicate('DateTime', 'greaterthanorequal', window.startDate);
|
||||
let predicateEnd: Predicate = new Predicate('DateTime', 'lessthanorequal', window.endDate);
|
||||
let predicate: Predicate = predicateStart.and(predicateEnd);
|
||||
|
||||
declare let window: MyWindow;
|
||||
|
||||
let chartDS: { [key: string]: Object[] };
|
||||
let pieChartDS: { [key: string]: Object[] };
|
||||
let gridDS: { [key: string]: Object[] };
|
||||
let linechartObj: Chart;
|
||||
let columnChartObj: Chart;
|
||||
let gridObj: Grid;
|
||||
let pie: AccumulationChart;
|
||||
let grid: Grid;
|
||||
let pieLegendData: Object[] = [];
|
||||
let pieRenderData: IExpenseData[] = [];
|
||||
let tempData: IExpense[] = <IExpense[]>dataSource;
|
||||
let legendData: IExpense[] = [];
|
||||
let pieRenderingData: Object[] = [];
|
||||
export let category: string[] = [];
|
||||
let expTotal: number = 0;
|
||||
let dateRangePickerObject: DateRangePicker;
|
||||
let groupValue: number = 0;
|
||||
let renderData: Object[];
|
||||
let hiGridData: Object[];
|
||||
|
||||
export function cardUpdate(toUpdate?: boolean): void {
|
||||
if (toUpdate) {
|
||||
updatePredicate();
|
||||
}
|
||||
let intl: Internationalization = new Internationalization();
|
||||
let nFormatter: Function = intl.getNumberFormat({ skeleton: 'C0', currency: 'USD' });
|
||||
let incomeRS: number = 0;
|
||||
let expenseRS: number = 0;
|
||||
/* tslint:disable-next-line */
|
||||
let incomeD: any[];
|
||||
/* tslint:disable-next-line */
|
||||
let expenseD: any[];
|
||||
new DataManager(window.expenseDS).executeQuery((new Query()
|
||||
.where((predicateStart.and(predicateEnd)).and('TransactionType', 'equal', 'Income'))))
|
||||
/* tslint:disable-next-line */
|
||||
.then(function (e: any) {
|
||||
incomeD = objectAssign(e);
|
||||
for (let i: number = 0; i < incomeD.length - 1; i++) {
|
||||
incomeRS += parseInt(incomeD[i].Amount, 0);
|
||||
}
|
||||
if (document.getElementById('tolincome')) {
|
||||
document.getElementById('tolincome').textContent = window.getCurrencyVal(incomeRS ? incomeRS : 0);
|
||||
}
|
||||
});
|
||||
|
||||
new DataManager(window.expenseDS)
|
||||
.executeQuery(new Query().where((predicateStart.and(predicateEnd)).and('TransactionType', 'equal', 'Expense')))
|
||||
/* tslint:disable-next-line */
|
||||
.then(function (e: any) {
|
||||
expenseD = objectAssign(e);
|
||||
for (let i: number = 0; i < expenseD.length - 1; i++) {
|
||||
expenseRS += parseInt(expenseD[i].Amount, 0);
|
||||
}
|
||||
if (document.getElementById('tolexpense')) {
|
||||
document.getElementById('tolexpense').textContent = window.getCurrencyVal(expenseRS ? expenseRS : 0);
|
||||
}
|
||||
if (document.getElementById('current-balance')) {
|
||||
document.getElementById('current-balance').textContent = window.getCurrencyVal(incomeRS - expenseRS);
|
||||
}
|
||||
if (document.getElementById('tolbalance')) {
|
||||
document.getElementById('tolbalance').textContent = window.getCurrencyVal(incomeRS - expenseRS);
|
||||
}
|
||||
});
|
||||
|
||||
/* tslint:disable-next-line */
|
||||
let transaction: any = new DataManager(window.expenseDS)
|
||||
.executeLocal((new Query().where(predicateStart.and(predicateEnd))));
|
||||
if (document.getElementById('toltransaction')) {
|
||||
document.getElementById('toltransaction').textContent = window.getNumberVal(transaction.length);
|
||||
}
|
||||
}
|
||||
|
||||
/* tslint:disable-next-line */
|
||||
let columnIncomeDS: any = [];
|
||||
/* tslint:disable-next-line */
|
||||
let columnExpenseDS: any = [];
|
||||
/* tslint:disable-next-line */
|
||||
let lineDS: any = [];
|
||||
/* tslint:disable-next-line */
|
||||
let tempChartIncomeDS: any = {};
|
||||
/* tslint:disable-next-line */
|
||||
let tempChartExpenseDS: any = {};
|
||||
/* tslint:disable-next-line */
|
||||
let tempChartLineDS: any = {};
|
||||
/* tslint:disable-next-line */
|
||||
let curDateTime: any;
|
||||
/* tslint:disable-next-line */
|
||||
let lineD: any = [];
|
||||
|
||||
function updatePredicate(): void {
|
||||
predicateStart = new Predicate('DateTime', 'greaterthanorequal', window.startDate);
|
||||
predicateEnd = new Predicate('DateTime', 'lessthanorequal', window.endDate);
|
||||
predicate = predicateStart.and(predicateEnd);
|
||||
}
|
||||
function getLineChartDS(): void {
|
||||
lineD = [];
|
||||
lineDS = [];
|
||||
tempChartLineDS = [];
|
||||
tempChartLineDS = columnIncomeDS.concat(columnExpenseDS);
|
||||
for (let i: number = 0; i < tempChartLineDS.length; i++) {
|
||||
/* tslint:disable-next-line */
|
||||
let cur: any = tempChartLineDS[i];
|
||||
if (cur.DateTime.getMonth() in lineD) {
|
||||
curDateTime = lineD[cur.DateTime.getMonth()];
|
||||
lineD[cur.DateTime.getMonth()].Amount = Math.abs((parseInt(curDateTime.Amount, 0) - parseInt(cur.Amount, 0)));
|
||||
} else {
|
||||
lineD[cur.DateTime.getMonth()] = cur;
|
||||
}
|
||||
}
|
||||
/* tslint:disable-next-line */
|
||||
for (let data: number = 0; data <= lineD.length; data++) {
|
||||
if (lineD[data]) {
|
||||
lineDS.push(lineD[data]);
|
||||
}
|
||||
}
|
||||
}
|
||||
/* tslint:disable-next-line */
|
||||
function objectAssign(e: any): Object[] {
|
||||
let result: Object[] = [];
|
||||
/* tslint:disable-next-line */
|
||||
let obj: any;
|
||||
obj = extend(obj, e.result, {}, true);
|
||||
for (let data: number = 0; data <= Object.keys(e.result).length; data++) {
|
||||
result.push(obj[data]);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
/* tslint:disable-next-line */
|
||||
function getCoulmnChartExpenseDS(e: any): void {
|
||||
columnExpenseDS = [];
|
||||
tempChartExpenseDS = [];
|
||||
let result: Object[] = objectAssign(e);
|
||||
for (let i: number = 0; i < result.length - 1; i++) {
|
||||
/* tslint:disable-next-line */
|
||||
let cur: any = result[i];
|
||||
if (cur.DateTime.getMonth() in tempChartExpenseDS) {
|
||||
curDateTime = tempChartExpenseDS[cur.DateTime.getMonth()];
|
||||
tempChartExpenseDS[cur.DateTime.getMonth()].Amount = parseInt(curDateTime.Amount, 0) + parseInt(cur.Amount, 0);
|
||||
} else {
|
||||
tempChartExpenseDS[cur.DateTime.getMonth()] = cur;
|
||||
/* tslint:disable-next-line */
|
||||
tempChartExpenseDS[cur.DateTime.getMonth()].DateTime = new Date(new Date(tempChartExpenseDS[cur.DateTime.getMonth()].DateTime.setHours(0, 0, 0, 0)).setDate(1));
|
||||
}
|
||||
}
|
||||
/* tslint:disable-next-line */
|
||||
for (let data in tempChartExpenseDS) {
|
||||
columnExpenseDS.push(tempChartExpenseDS[data]);
|
||||
}
|
||||
}
|
||||
/* tslint:disable-next-line */
|
||||
function getCoulmnChartIncomeDS(e: any): void {
|
||||
columnIncomeDS = [];
|
||||
tempChartIncomeDS = [];
|
||||
let result: Object[] = objectAssign(e);
|
||||
for (let i: number = 0; i < result.length - 1; i++) {
|
||||
/* tslint:disable-next-line */
|
||||
let cur: any = result[i];
|
||||
if (cur.DateTime.getMonth() in tempChartIncomeDS) {
|
||||
curDateTime = tempChartIncomeDS[cur.DateTime.getMonth()];
|
||||
tempChartIncomeDS[cur.DateTime.getMonth()].Amount = parseInt(curDateTime.Amount, 0) + parseInt(cur.Amount, 0);
|
||||
} else {
|
||||
tempChartIncomeDS[cur.DateTime.getMonth()] = cur;
|
||||
/* tslint:disable-next-line */
|
||||
tempChartIncomeDS[cur.DateTime.getMonth()].DateTime = new Date(new Date(tempChartIncomeDS[cur.DateTime.getMonth()].DateTime.setHours(0, 0, 0, 0)).setDate(1));;
|
||||
}
|
||||
}
|
||||
/* tslint:disable-next-line */
|
||||
for (let data in tempChartIncomeDS) {
|
||||
columnIncomeDS.push(tempChartIncomeDS[data]);
|
||||
}
|
||||
}
|
||||
|
||||
// tslint:disable-next-line:max-func-body-length
|
||||
function onDateRangeChange(args: RangeEventArgs): void {
|
||||
window.startDate = args.startDate;
|
||||
window.endDate = args.endDate;
|
||||
lineDS = [];
|
||||
lineD = [];
|
||||
columnIncomeDS = [];
|
||||
columnExpenseDS = [];
|
||||
tempChartExpenseDS = [];
|
||||
tempChartIncomeDS = [];
|
||||
lineD = [];
|
||||
predicateStart = new Predicate('DateTime', 'greaterthanorequal', args.startDate);
|
||||
predicateEnd = new Predicate('DateTime', 'lessthanorequal', args.endDate);
|
||||
predicate = predicateStart.and(predicateEnd);
|
||||
cardUpdate();
|
||||
/* tslint:disable */
|
||||
new DataManager(window.expenseDS)
|
||||
.executeQuery(new Query().where(predicate.and('TransactionType', 'equal', 'Expense')))
|
||||
.then((e: any) => {
|
||||
getCoulmnChartExpenseDS(e);
|
||||
|
||||
});
|
||||
/* tslint:enable */
|
||||
/* tslint:disable */
|
||||
new DataManager(window.expenseDS)
|
||||
.executeQuery(new Query().where(predicate.and('TransactionType', 'equal', 'Income')))
|
||||
.then((e: any) => {
|
||||
getCoulmnChartIncomeDS(e);
|
||||
columnChartObj.setProperties({
|
||||
//Initializing Chart Series
|
||||
primaryXAxis: {
|
||||
labelFormat: 'MMM',
|
||||
valueType: 'DateTime',
|
||||
edgeLabelPlacement: 'Shift'
|
||||
},
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis:
|
||||
{
|
||||
title: 'Amount',
|
||||
labelFormat: 'c0'
|
||||
},
|
||||
useGroupingSeparator: true,
|
||||
series: [
|
||||
{
|
||||
type: 'Column',
|
||||
dataSource: columnIncomeDS,
|
||||
legendShape: 'Circle',
|
||||
xName: 'DateTime',
|
||||
width: 2,
|
||||
yName: 'Amount',
|
||||
name: 'Income',
|
||||
marker: {
|
||||
visible: true, height: 10, width: 10
|
||||
},
|
||||
fill: '#A16EE5',
|
||||
border: { width: 0.5, color: '#A16EE5' },
|
||||
animation: { enable: false },
|
||||
},
|
||||
{
|
||||
type: 'Column',
|
||||
dataSource: columnExpenseDS,
|
||||
legendShape: 'Circle',
|
||||
xName: 'DateTime',
|
||||
width: 2,
|
||||
yName: 'Amount',
|
||||
name: 'Expense',
|
||||
marker: {
|
||||
visible: true, height: 10, width: 10
|
||||
},
|
||||
fill: '#4472C4',
|
||||
animation: { enable: false },
|
||||
},
|
||||
]
|
||||
});
|
||||
columnChartObj.refresh();
|
||||
lineD = [];
|
||||
getLineChartDS();
|
||||
linechartObj.setProperties({
|
||||
//Initializing Chart Series
|
||||
series: [
|
||||
{
|
||||
type: 'Area',
|
||||
dataSource: lineDS,
|
||||
xName: 'DateTime', width: 2, marker: {
|
||||
visible: true,
|
||||
width: 10,
|
||||
height: 10,
|
||||
fill: 'white',
|
||||
border: { width: 2, color: '#0470D8' },
|
||||
},
|
||||
legendShape: 'Circle',
|
||||
yName: 'Amount', name: 'Amount',
|
||||
fill: 'rgba(4, 112, 216, 0.3)',
|
||||
border: { width: 0.5, color: '#0470D8' }
|
||||
}]
|
||||
});
|
||||
linechartObj.refresh();
|
||||
});
|
||||
|
||||
/* tslint:enable */
|
||||
gridObj.setProperties({
|
||||
|
||||
dataSource: window.expenseDS,
|
||||
//Initializing Chart Series
|
||||
query: new Query().where(predicate).sortByDesc('DateTime').take(5)
|
||||
});
|
||||
gridObj.refresh();
|
||||
getTotalExpense();
|
||||
pie.series = [{
|
||||
dataSource: pieRenderingData,
|
||||
xName: 'text',
|
||||
yName: 'y',
|
||||
radius: '83%',
|
||||
startAngle: 0,
|
||||
endAngle: 360,
|
||||
innerRadius: '50%',
|
||||
dataLabel: {
|
||||
name: 'x',
|
||||
visible: true,
|
||||
position: 'Outside',
|
||||
connectorStyle: { length: '10%' },
|
||||
font: {
|
||||
color: 'Black',
|
||||
size: '14px'
|
||||
}
|
||||
},
|
||||
palettes: ['#61EFCD', '#CDDE1F', '#FEC200', '#CA765A', '#2485FA', '#F57D7D', '#C152D2',
|
||||
'#8854D9', '#3D4EB8', '#00BCD7']
|
||||
}];
|
||||
pie.dataBind();
|
||||
pie.refresh();
|
||||
createLegendData('pieUpdate');
|
||||
grid.dataSource = pieRenderData;
|
||||
grid.dataBind();
|
||||
grid.refresh();
|
||||
formatRangeDate();
|
||||
}
|
||||
function DateRange(): void {
|
||||
dateRangePickerObject = new DateRangePicker({
|
||||
format: 'MM/dd/yyyy', change: onDateRangeChange,
|
||||
startDate: window.startDate,
|
||||
endDate: window.endDate,
|
||||
showClearButton: false,
|
||||
readonly: true,
|
||||
presets: [
|
||||
{ label: 'Last Month', start: new Date('10/1/2017'), end: new Date('10/31/2017') },
|
||||
{ label: 'Last 3 Months', start: new Date('9/1/2017'), end: new Date('11/30/2017') },
|
||||
{ label: 'All Time', start: new Date('6/1/2017'), end: new Date('11/30/2017') }
|
||||
]
|
||||
});
|
||||
dateRangePickerObject.appendTo('#daterange');
|
||||
window.startDate = dateRangePickerObject.startDate;
|
||||
window.endDate = dateRangePickerObject.endDate;
|
||||
}
|
||||
let centerTitle: HTMLDivElement = document.createElement('div') as HTMLDivElement;
|
||||
centerTitle.innerHTML = 'Expenses <br> Year 2013';
|
||||
centerTitle.style.position = 'absolute';
|
||||
centerTitle.style.visibility = 'hidden';
|
||||
|
||||
function getFontSize(width: number): string {
|
||||
if (width > 300) {
|
||||
return '13px';
|
||||
} else if (width > 250) {
|
||||
return '8px';
|
||||
} else {
|
||||
return '6px';
|
||||
}
|
||||
}
|
||||
|
||||
function createLegendData(initiate: string): void {
|
||||
if (pieRenderingData.length > 10) {
|
||||
pie.series[0].groupTo = groupValue.toString();
|
||||
pie.dataBind();
|
||||
pie.refresh();
|
||||
}
|
||||
if (initiate === 'pieUpdate' || pieLegendData.length === 0) {
|
||||
pieLegendData = [];
|
||||
pieLegendData = pie.visibleSeries[0].points;
|
||||
}
|
||||
pie.legendSettings.visible = false;
|
||||
pie.dataBind();
|
||||
pieRenderData = [];
|
||||
for (let i: number = 0; i < pieLegendData.length; i++) {
|
||||
/* tslint:disable-next-line */
|
||||
let data: IExpenseData = <IExpenseData>pieLegendData[i];
|
||||
/* tslint:enable-next-line */
|
||||
if (data.text.indexOf('Others') > -1) {
|
||||
data.x = ((data.y / expTotal) * 100).toFixed(2).toString() + '%';
|
||||
}
|
||||
pieRenderData.push(data);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// tslint:disable-next-line:max-func-body-length
|
||||
function InitializeComponet(): void {
|
||||
interface Result {
|
||||
result: Object;
|
||||
}
|
||||
if (document.getElementById('user-name')) {
|
||||
document.getElementById('user-name').textContent = window.userName;
|
||||
}
|
||||
cardUpdate();
|
||||
/* tslint:disable-next-line */
|
||||
new DataManager(window.expenseDS)
|
||||
.executeQuery(new Query().where(predicate.and('TransactionType', 'equal', 'Expense')))
|
||||
/* tslint:disable-next-line */
|
||||
.then((e: any) => {
|
||||
getCoulmnChartExpenseDS(e);
|
||||
});
|
||||
new DataManager(window.expenseDS)
|
||||
.executeQuery(new Query().where(predicate.and('TransactionType', 'equal', 'Income')))
|
||||
/* tslint:disable-next-line */
|
||||
.then((e: any) => {
|
||||
getCoulmnChartIncomeDS(e);
|
||||
columnChartObj = new Chart({
|
||||
//Initializing Primary X Axis
|
||||
primaryXAxis: {
|
||||
labelFormat: 'MMM',
|
||||
valueType: 'DateTime',
|
||||
intervalType: 'Months',
|
||||
edgeLabelPlacement: 'Shift'
|
||||
},
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis: {
|
||||
minimum: 3000,
|
||||
maximum: 9000,
|
||||
labelFormat: 'c0'
|
||||
},
|
||||
useGroupingSeparator: true,
|
||||
series: [
|
||||
{
|
||||
type: 'Column',
|
||||
dataSource: columnIncomeDS,
|
||||
legendShape: 'Circle',
|
||||
xName: 'DateTime',
|
||||
width: 2,
|
||||
yName: 'Amount',
|
||||
name: 'Income',
|
||||
marker: {
|
||||
visible: true, height: 10, width: 10
|
||||
},
|
||||
fill: '#A16EE5',
|
||||
border: { width: 0.5, color: '#A16EE5' },
|
||||
animation: { enable: false },
|
||||
},
|
||||
{
|
||||
type: 'Column',
|
||||
dataSource: columnExpenseDS,
|
||||
legendShape: 'Circle',
|
||||
xName: 'DateTime',
|
||||
width: 2,
|
||||
yName: 'Amount',
|
||||
name: 'Expense',
|
||||
marker: {
|
||||
visible: true, height: 10, width: 10
|
||||
},
|
||||
fill: '#4472C4',
|
||||
animation: { enable: false },
|
||||
},
|
||||
],
|
||||
annotations: [{
|
||||
// tslint:disable-next-line:max-line-length
|
||||
content: '<p style="font-family:Roboto;font-size: 16px;font-weight: 400;font-weight: 400;letter-spacing: 0.02em;line-height: 16px;color: #797979 !important;">Income - Expense</p>',
|
||||
x: '75px', y: '9%', coordinateUnits: 'Pixel', region: 'Chart'
|
||||
}],
|
||||
margin: { top: 90 },
|
||||
legendSettings: { visible: true },
|
||||
titleStyle: {
|
||||
textAlignment: 'Near', fontWeight: '500', size: '16', color: '#000'
|
||||
},
|
||||
tooltip: {
|
||||
fill: '#707070',
|
||||
enable: true,
|
||||
shared: true,
|
||||
format: '${series.name} : ${point.y}',
|
||||
header: 'Month - ${point.x} ',
|
||||
}
|
||||
});
|
||||
columnChartObj.appendTo('#account-balance');
|
||||
getLineChartDS();
|
||||
/* tslint:disable */
|
||||
let content: string = '<p style="font-family:Roboto;font-size: 16px;font-weight: 400;font-weight: 400;letter-spacing: 0.02em;line-height: 16px;color: #797979 !important;">Account - Balance</p>';
|
||||
/* tslint:eanble */
|
||||
linechartObj = new Chart({
|
||||
//Initializing Primary X Axis
|
||||
primaryXAxis: {
|
||||
valueType: 'DateTime',
|
||||
labelFormat: 'MMM',
|
||||
majorGridLines: { width: 0 },
|
||||
intervalType: 'Months'
|
||||
},
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis: {
|
||||
maximum: 1800,
|
||||
interval: 300,
|
||||
labelFormat: 'c0',
|
||||
},
|
||||
useGroupingSeparator: true,
|
||||
chartArea: {
|
||||
border: {
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
annotations: [{
|
||||
content: content,
|
||||
x: '75px', y: '9%', coordinateUnits: 'Pixel', region: 'Chart'
|
||||
}],
|
||||
series: [
|
||||
{
|
||||
type: 'Area',
|
||||
dataSource: lineDS,
|
||||
xName: 'DateTime', width: 2, marker: {
|
||||
visible: true,
|
||||
width: 10,
|
||||
height: 10,
|
||||
fill: 'white',
|
||||
border: { width: 2, color: '#0470D8' },
|
||||
},
|
||||
yName: 'Amount', name: 'Amount',
|
||||
fill: 'rgba(4, 112, 216, 0.3)',
|
||||
border: { width: 0.5, color: '#0470D8' }
|
||||
},
|
||||
|
||||
],
|
||||
margin: { top: 90 },
|
||||
tooltip: {
|
||||
fill: '#707070',
|
||||
enable: true, shared: true,
|
||||
format: '${series.name} : ${point.y}',
|
||||
header: 'Month - ${point.x} '
|
||||
}
|
||||
});
|
||||
linechartObj.appendTo('#balance');
|
||||
|
||||
});
|
||||
pie = new AccumulationChart({
|
||||
enableSmartLabels: true,
|
||||
width: '100%',
|
||||
height: '350px',
|
||||
series: [
|
||||
{
|
||||
dataSource: pieRenderingData,
|
||||
xName: 'text',
|
||||
yName: 'y',
|
||||
radius: '83%',
|
||||
startAngle: 0,
|
||||
endAngle: 360,
|
||||
innerRadius: '50%',
|
||||
dataLabel: {
|
||||
name: 'x',
|
||||
visible: true,
|
||||
position: 'Outside',
|
||||
connectorStyle: { length: '10%' },
|
||||
font: {
|
||||
color: 'Black',
|
||||
size: '14px',
|
||||
fontFamily: 'Roboto'
|
||||
}
|
||||
},
|
||||
animation: { enable: false },
|
||||
palettes: ['#61EFCD', '#CDDE1F', '#FEC200', '#CA765A', '#2485FA', '#F57D7D', '#C152D2',
|
||||
'#8854D9', '#3D4EB8', '#00BCD7']
|
||||
}
|
||||
],
|
||||
legendSettings: {
|
||||
visible: true
|
||||
},
|
||||
textRender: (args: IAccTextRenderEventArgs) => {
|
||||
args.series.dataLabel.font.size = getFontSize(pie.initialClipRect.width);
|
||||
pie.animateSeries = true;
|
||||
if (args.text.indexOf('Others') > -1) {
|
||||
args.text = 'Others';
|
||||
}
|
||||
},
|
||||
animationComplete: (args: IAccAnimationCompleteEventArgs) => {
|
||||
let element: HTMLElement = document.getElementById('total-expense_datalabel_Series_0');
|
||||
if (!isNOU(element)) { element.style.visibility = 'visible'; }
|
||||
}
|
||||
});
|
||||
pie.appendTo('#total-expense');
|
||||
createLegendData('pie');
|
||||
grid = new Grid({
|
||||
width: '100%',
|
||||
dataSource: pieRenderData,
|
||||
rowTemplate: '#rowtemplate',
|
||||
columns: [
|
||||
{ field: 'color', width: '10%', textAlign: 'Center' },
|
||||
{ field: 'text', width: '50%' },
|
||||
{ field: 'y', width: '20%' },
|
||||
{ field: 'x', width: '20%' }
|
||||
],
|
||||
load: (args: any) => {
|
||||
if (document.getElementById('grid-popup')) {
|
||||
document.getElementById('grid-popup').style.display = "block";
|
||||
}
|
||||
},
|
||||
dataBound: (args: Object) => {
|
||||
if (document.getElementById('grid-popup')) {
|
||||
document.getElementById('grid-popup').style.display = "none";
|
||||
}
|
||||
}
|
||||
});
|
||||
grid.appendTo('#legend-grid');
|
||||
gridObj = new Grid({
|
||||
dataSource: dataSource,
|
||||
allowSorting: true,
|
||||
enableHover: false,
|
||||
allowKeyboard: true,
|
||||
allowPaging: false,
|
||||
query: new Query().where(predicate).sortByDesc('DateTime').take(5),
|
||||
width: '100%',
|
||||
toolbar: [{ text: 'Recent Transactions' }],
|
||||
pageSettings: {
|
||||
pageCount: 4,
|
||||
pageSize: 14
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
field: 'DateTime',
|
||||
headerText: 'Date',
|
||||
width: 120,
|
||||
format: 'yMd',
|
||||
hideAtMedia: '(min-width: 600px)',
|
||||
template: '#dateTemplate'
|
||||
}, {
|
||||
field: 'Category',
|
||||
headerText: 'Category',
|
||||
template: '#template',
|
||||
width: 170,
|
||||
},
|
||||
{
|
||||
field: 'PaymentMode',
|
||||
headerText: 'Payment Mode',
|
||||
width: 160,
|
||||
hideAtMedia: '(min-width: 600px)'
|
||||
},
|
||||
{
|
||||
field: 'Description',
|
||||
headerText: 'Description',
|
||||
hideAtMedia: '(min-width: 1050px)'
|
||||
},
|
||||
{
|
||||
field: 'Amount',
|
||||
headerText: 'Amount',
|
||||
width: 120,
|
||||
textAlign: 'right',
|
||||
template: '#amtTemplate',
|
||||
}
|
||||
]
|
||||
});
|
||||
gridObj.appendTo('#recentexpense-grid');
|
||||
}
|
||||
window.dashboard = (): void => {
|
||||
|
||||
predicateStart = new Predicate('DateTime', 'greaterthanorequal', window.startDate);
|
||||
predicateEnd = new Predicate('DateTime', 'lessthanorequal', window.endDate);
|
||||
predicate = predicateStart.and(predicateEnd);
|
||||
getTotalExpense();
|
||||
InitializeComponet();
|
||||
// DateRangePicker Initialization.
|
||||
DateRange();
|
||||
formatRangeDate();
|
||||
updateChart();
|
||||
window.addEventListener('resize', () => {
|
||||
setTimeout(() => {
|
||||
updateChart();
|
||||
}, 1000);
|
||||
});
|
||||
};
|
||||
function updateChart(): void {
|
||||
let pieContainerObj: HTMLElement = document.getElementById('totalExpense');
|
||||
if (!isNOU(pieContainerObj) && pieContainerObj.offsetWidth < 480) {
|
||||
disableChartLabel();
|
||||
} else {
|
||||
enableChartLabel();
|
||||
}
|
||||
}
|
||||
function disableChartLabel(): void {
|
||||
pie.series[0].dataLabel.visible = false;
|
||||
pie.dataBind();
|
||||
pie.refresh();
|
||||
}
|
||||
function enableChartLabel(): void {
|
||||
pie.series[0].dataLabel.visible = true;
|
||||
pie.dataBind();
|
||||
pie.refresh();
|
||||
}
|
||||
function formatRangeDate(): void {
|
||||
let intl: Internationalization = new Internationalization();
|
||||
let dateStart: string = intl.formatDate(dateRangePickerObject.startDate, { skeleton: 'MMMd' });
|
||||
let dateEnd: string = intl.formatDate(dateRangePickerObject.endDate, { skeleton: 'MMMd' });
|
||||
document.getElementById('rangeDate').textContent = dateStart + ' - ' + dateEnd;
|
||||
}
|
||||
export function getTotalExpense(): void {
|
||||
expTotal = 0;
|
||||
category = [];
|
||||
legendData = [];
|
||||
let renderingData: IExpenseData[] = [];
|
||||
/* tslint:disable-next-line */
|
||||
tempData.forEach(item => {
|
||||
if (item.TransactionType === 'Expense' && window.startDate.valueOf() <= item.DateTime.valueOf()
|
||||
&& window.endDate.valueOf() >= item.DateTime.valueOf()) {
|
||||
expTotal += Number(item.Amount);
|
||||
legendData.push(item);
|
||||
if (category.indexOf(item.Category) < 0) {
|
||||
category.push(item.Category);
|
||||
}
|
||||
}
|
||||
});
|
||||
/* tslint:disable */
|
||||
category.forEach(str => {
|
||||
let total: number = 0;
|
||||
legendData.forEach(item => {
|
||||
if (str === item.Category) {
|
||||
total += Number(item.Amount);
|
||||
}
|
||||
});
|
||||
let percent: string = ((total / expTotal) * 100).toFixed(2) + '%';
|
||||
renderingData.push({ x: str, y: total, text: percent });
|
||||
});
|
||||
pieRenderingData = new DataManager(JSON.parse(JSON.stringify(renderingData))).executeLocal((new Query().sortByDesc('y')));
|
||||
if (pieRenderingData.length > 10) {
|
||||
let temp: IExpenseData = <IExpenseData>new DataManager(JSON.parse(JSON.stringify(renderingData))).executeLocal((new Query().sortByDesc('y').range(0, 9)))[8];
|
||||
groupValue = temp.y - 1;
|
||||
hiGridData = new DataManager(JSON.parse(JSON.stringify(renderingData))).executeLocal((new Query().sortByDesc('y').skip(9)));
|
||||
}
|
||||
}
|
|
@ -0,0 +1,61 @@
|
|||
<div class='dlg-content'>
|
||||
<div class="transaction-dialog">
|
||||
<div class='dlg-radio-btn-section'>
|
||||
<div class='dlg-income-radio-section'>
|
||||
<input id="incomeradio" />
|
||||
</div>
|
||||
<div class='dlg-expense-radio-section'>
|
||||
<input id="expenseradio" />
|
||||
</div>
|
||||
</div>
|
||||
<div class='dlg-date-section'>
|
||||
<div class='dlg-date-picker-container'>
|
||||
<div>
|
||||
<input id="datepicker" />
|
||||
</div>
|
||||
</div>
|
||||
<div class='dlg-time-picker-container'>
|
||||
<div>
|
||||
<input id="timepicker" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='category-section'>
|
||||
<div class='dlg-category-container'>
|
||||
<div>
|
||||
<input type="text" id="category">
|
||||
</div>
|
||||
</div>
|
||||
<div class='dlg-amount-container'>
|
||||
<div>
|
||||
<input id="amount" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='description-container'>
|
||||
<div>
|
||||
<div class="e-float-input">
|
||||
<input type='text' id="description" class="e-input required readonly" />
|
||||
<span class="e-float-line"></span>
|
||||
<label class="e-float-text e-label-top">Descriptions</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class='payment-label'>
|
||||
<label class="">Payment Mode</label>
|
||||
</div>
|
||||
<div class='payment-radio-container'>
|
||||
<div class='dlg-cash-payment'>
|
||||
<input id="cashradio" />
|
||||
</div>
|
||||
<div class='dlg-debit-payment'>
|
||||
<input id="debitradio" />
|
||||
</div>
|
||||
<div class='dlg-credit-payment'>
|
||||
<input id="creditradio" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
|
@ -0,0 +1,125 @@
|
|||
<div class='exp-content-container'>
|
||||
<div>
|
||||
<h1 class="page-title"> All Transactions </h1>
|
||||
</div>
|
||||
<div>
|
||||
<div class="col-md-12 margin-top col-lg-12">
|
||||
<div class="expense-grid-container">
|
||||
<div class="expense-head-padding">
|
||||
<div class="search-wrapper search-section">
|
||||
<div id="search">
|
||||
<input id="txt" type="search" placeholder="Search" class="search e-input">
|
||||
<span id="searchbtn" class="e-search-icon expense-search-icon e-icons"></span>
|
||||
</div>
|
||||
<div class="button-section search-section">
|
||||
<button id="addexpense" class="e-btn small e-info">Add Transaction</button>
|
||||
<button id="filterExpense" class="e-btn small e-info">Filter</button>
|
||||
<div id="add-btn" class='e-btn'>
|
||||
<span class='e-icons add-icon add-head-item'></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id='grid' class="margin-top-10 expense-grid-margin pane" style="height:100%;width:100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class='filter-container'>
|
||||
<div class="filter pane sidebar-wrapper-filter">
|
||||
<div class="filter-head">
|
||||
<span class="e-icon filter-icon filter-head-item"></span>
|
||||
<span class="filter-txt filter-head-item">Filters</span>
|
||||
</div>
|
||||
<div class="expense-filter-container">
|
||||
<label class="label-font">Select a range</label>
|
||||
<div class='filter-item'>
|
||||
<input type="text" id="daterange" class="DateTime" />
|
||||
</div>
|
||||
<label class="label-font">Category</label>
|
||||
<div class="treeview filter-item">
|
||||
<input type="text" id="expense-category">
|
||||
</div>
|
||||
<label class="label-font bottom-align">Cashflow</label>
|
||||
<div class="cashflow filter-item">
|
||||
<input id="income" class="cashflow-section" type="checkbox">
|
||||
<input id="expenses" class="cashflow-section" type="checkbox">
|
||||
</div>
|
||||
<label class="label-font bottom-align">Payment Mode</label>
|
||||
<div class="paymentModes filter-item">
|
||||
<input id="cash" class="cashflow-section" type="checkbox">
|
||||
<input id="debitcard" class="cashflow-section" type="checkbox">
|
||||
<br/><br/>
|
||||
<input id="creditcard" class="cashflow-section" type="checkbox">
|
||||
</div>
|
||||
<div>
|
||||
<label class="label-font">Amount</label>
|
||||
<div class='amount-filter'>
|
||||
<div class='min-numeric amt-filter'>
|
||||
<label class="inlineAlign minLabel">Min :</label>
|
||||
<input id="filterMinAmount" type="tel" />
|
||||
</div>
|
||||
<span class='amt-filter separateLine'></span>
|
||||
<div class='max-numeric amt-filter'>
|
||||
<label class="inlineAlign maxLabel">Max :</label>
|
||||
<input id="filterMaxAmount" type="tel" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script id="template" type="text/x-template">
|
||||
<div class="normalRes">
|
||||
<div class="category-icon ${Category}"></div>
|
||||
<div class='category-text'>${Category}</div>
|
||||
</div>
|
||||
<div class="mediumRes">
|
||||
<div>
|
||||
<div class="category-icon ${Category}"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div> ${Category} </div>
|
||||
<div class="description-section"> ${Description} </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="smallRes">
|
||||
<div class='sm-category sm-icon'>
|
||||
<div class="category-icon ${Category}"></div>
|
||||
</div>
|
||||
<div class='sm-category category-content'>
|
||||
<div> ${Category} </div>
|
||||
<div class="description-section"> ${Description} </div>
|
||||
<div> ${PaymentMode} </div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script id="amtTemplate" type="text/x-template">
|
||||
<div class="normalRes">
|
||||
<div class="lg-amount">
|
||||
<div class='amt-payment ${TransactionType}'>
|
||||
<span>$</span> <span>${Amount}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mediumRes">
|
||||
<div class="res-amount">
|
||||
<div class='amt-payment ${TransactionType}'>
|
||||
<span>$</span> <span>${Amount}</span>
|
||||
</div>
|
||||
<div> ${getDate(data.DateTime)} </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="smallRes">
|
||||
<div class="res-amount">
|
||||
<div class='amt-payment ${TransactionType}'>
|
||||
<span>$</span> <span>${Amount}</span>
|
||||
</div>
|
||||
<div> ${getDate(data.DateTime)} </div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
|
@ -0,0 +1,719 @@
|
|||
/**
|
||||
* Expense handler
|
||||
*/
|
||||
import { DateRangePicker, DatePicker, TimePicker, RangeEventArgs } from '@syncfusion/ej2-calendars';
|
||||
import { DataManager, Query, Predicate } from '@syncfusion/ej2-data';
|
||||
import { Grid, Page, Edit, Toolbar, CommandColumn, ContextMenu, Resize, CheckBoxChangeEventArgs } from '@syncfusion/ej2-grids';
|
||||
import { Button, CheckBox, RadioButton, ChangeArgs } from '@syncfusion/ej2-buttons';
|
||||
import { Dialog, Tooltip } from '@syncfusion/ej2-popups';
|
||||
import { DropDownList, MultiSelect } from '@syncfusion/ej2-dropdowns';
|
||||
import { NumericTextBox, Input } from '@syncfusion/ej2-inputs';
|
||||
import { Ajax, KeyboardEventArgs, isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
|
||||
Grid.Inject(Edit, Toolbar, Page, CommandColumn, ContextMenu, Resize, );
|
||||
import { cardUpdate, IExpense } from '../dashboard/dashboard';
|
||||
import { MyWindow, dataSource, toggleFilterMenu } from '../index';
|
||||
import { Category } from '@syncfusion/ej2-charts';
|
||||
import { categoryIncomeData, categoryExpenseData } from '../common/common.data';
|
||||
|
||||
declare let window: MyWindow;
|
||||
let incomeRadio: RadioButton;
|
||||
let expenseRadio: RadioButton;
|
||||
let cashRadio: RadioButton;
|
||||
let creditRadio: RadioButton;
|
||||
let debitRadio: RadioButton;
|
||||
let datepicker: DatePicker;
|
||||
let timepicker: TimePicker;
|
||||
let amount: NumericTextBox;
|
||||
let category: DropDownList;
|
||||
let paymentmode: DropDownList;
|
||||
let subCategory: DropDownList;
|
||||
let income: CheckBox;
|
||||
let cash: CheckBox;
|
||||
let creditcard: CheckBox;
|
||||
let debitcard: CheckBox;
|
||||
let expense: CheckBox;
|
||||
let dateRangePickerObject: DateRangePicker;
|
||||
let addExpenseDialog: Dialog;
|
||||
let editExpenseDialog: Dialog;
|
||||
let confirmDialogObj: Dialog;
|
||||
let tooltipEdit: Tooltip;
|
||||
let tooltipDelete: Tooltip;
|
||||
let tooltipHover: boolean;
|
||||
|
||||
let gridDS: { [key: string]: Object[] };
|
||||
let multiSelectFilter: MultiSelect;
|
||||
let grid: Grid;
|
||||
let filterMinAmount: NumericTextBox;
|
||||
let filterMaxAmount: NumericTextBox;
|
||||
let tempData: IExpense[] = <IExpense[]>dataSource;
|
||||
let filterCategory: string[] = [];
|
||||
let numMinValue: number;
|
||||
let numMaxValue: number;
|
||||
/* tslint:disable */
|
||||
let editRowData: any;
|
||||
let minAmount: any;
|
||||
let maxAmount: any;
|
||||
let editValue: number;
|
||||
let deleteValue: number;
|
||||
/* tslint:enable */
|
||||
let defaultGrigColumns: Object[] = [
|
||||
{ type: 'checkbox', width: 40, },
|
||||
{
|
||||
field: 'Category',
|
||||
headerText: 'Category',
|
||||
template: '#template',
|
||||
width: 178,
|
||||
editType: 'dropdownedit',
|
||||
validationRules: { required: true },
|
||||
clipMode: 'ellipsiswithtooltip'
|
||||
}, {
|
||||
field: 'DateTime',
|
||||
headerText: 'Date',
|
||||
format: 'yMd',
|
||||
width: 112,
|
||||
editType: 'datepickeredit',
|
||||
validationRules: { required: true },
|
||||
hideAtMedia: '(min-width: 1050px)'
|
||||
},
|
||||
{
|
||||
field: 'PaymentMode',
|
||||
headerText: 'Payment Mode',
|
||||
width: 140,
|
||||
editType: 'dropdownedit',
|
||||
validationRules: { required: true },
|
||||
hideAtMedia: '(min-width: 600px)'
|
||||
},
|
||||
{
|
||||
field: 'Description',
|
||||
headerText: 'Description',
|
||||
clipMode: 'ellipsis',
|
||||
validationRules: { required: true },
|
||||
hideAtMedia: '(min-width: 1050px)'
|
||||
},
|
||||
{
|
||||
field: 'UniqueId',
|
||||
headerText: 'Unique Id',
|
||||
isPrimaryKey: true,
|
||||
visible: false
|
||||
},
|
||||
{
|
||||
field: 'Amount',
|
||||
headerText: 'Amount',
|
||||
editType: 'numericedit',
|
||||
width: 120,
|
||||
format: 'C0',
|
||||
template: '#amtTemplate',
|
||||
validationRules: { required: true },
|
||||
textAlign: 'right'
|
||||
}
|
||||
];
|
||||
|
||||
function onGridRender(): void {
|
||||
if (grid) {
|
||||
let editElement: HTMLElement = document.getElementById('grid_edit');
|
||||
let deleteElement: HTMLElement = document.getElementById('grid_delete');
|
||||
if (editElement) {
|
||||
grid.toolbarModule.toolbar.enableItems(editElement.parentElement, false);
|
||||
editElement.parentElement.title = ' ';
|
||||
}
|
||||
if (deleteElement) {
|
||||
grid.toolbarModule.toolbar.enableItems(deleteElement.parentElement, false);
|
||||
deleteElement.parentElement.title = ' ';
|
||||
}
|
||||
editValue = 0;
|
||||
deleteValue = 0;
|
||||
}
|
||||
}
|
||||
|
||||
function onGridCheckBoxChange(args: CheckBoxChangeEventArgs): void {
|
||||
if (grid.getSelectedRowIndexes().length > 1) {
|
||||
grid.toolbarModule.toolbar.enableItems(document.getElementById('grid_edit').parentElement, false);
|
||||
grid.toolbarModule.toolbar.enableItems(document.getElementById('grid_delete').parentElement, true);
|
||||
editValue = 2;
|
||||
deleteValue = 2;
|
||||
|
||||
} else if (grid.getSelectedRowIndexes().length === 0) {
|
||||
grid.toolbarModule.toolbar.enableItems(document.getElementById('grid_edit').parentElement, false);
|
||||
grid.toolbarModule.toolbar.enableItems(document.getElementById('grid_delete').parentElement, false);
|
||||
editValue = 0;
|
||||
deleteValue = 0;
|
||||
} else if (grid.getSelectedRowIndexes().length === 1) {
|
||||
grid.toolbarModule.toolbar.enableItems(document.getElementById('grid_edit').parentElement, true);
|
||||
grid.toolbarModule.toolbar.enableItems(document.getElementById('grid_delete').parentElement, true);
|
||||
editValue = 1;
|
||||
deleteValue = 1;
|
||||
}
|
||||
}
|
||||
// tslint:disable-next-line:max-func-body-length
|
||||
|
||||
window.expense = (): void => {
|
||||
cardUpdate();
|
||||
let predicateSt: Predicate = new Predicate('Spent', 'equal', 10);
|
||||
let predicateStart: Predicate = new Predicate('DateTime', 'greaterthanorequal', window.startDate);
|
||||
let predicateEnd: Predicate = new Predicate('DateTime', 'lessthanorequal', window.endDate);
|
||||
let predicate: Predicate = predicateStart.and(predicateEnd);
|
||||
let query: Query = new Query().where(predicate).select(['Category', 'Budget', 'DateTime', 'Items', 'PaymentMode', 'Spent']).take(5);
|
||||
minMaxAmount(window.startDate, window.endDate);
|
||||
|
||||
function minMaxAmount(start: Date, end: Date): void {
|
||||
let predicateStart: Predicate = new Predicate('DateTime', 'greaterthanorequal', start);
|
||||
let predicateEnd: Predicate = new Predicate('DateTime', 'lessthanorequal', end);
|
||||
minAmount = new DataManager(window.expenseDS).executeLocal((new Query()
|
||||
.where((predicateStart.and(predicateEnd))))
|
||||
.requiresCount().aggregate('min', 'Amount'));
|
||||
maxAmount = new DataManager(window.expenseDS).executeLocal((new Query()
|
||||
.where((predicateStart.and(predicateEnd))))
|
||||
.requiresCount().aggregate('max', 'Amount'));
|
||||
numMinValue = minAmount.aggregates['Amount - min'];
|
||||
numMaxValue = maxAmount.aggregates['Amount - max'];
|
||||
}
|
||||
/* tslint:disable */
|
||||
function onGridEditBegin(e: any): void {
|
||||
if (e.requestType == 'beginEdit') {
|
||||
editRowData = e;
|
||||
e.cancel = true;
|
||||
}
|
||||
}
|
||||
/* tslint:enable */
|
||||
let rowDiv: HTMLElement;
|
||||
let incomeElem: HTMLElement;
|
||||
let expenseElem: HTMLElement;
|
||||
let gridColumns: Object[] = defaultGrigColumns;
|
||||
|
||||
grid = new Grid({
|
||||
dataSource: window.expenseDS,
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
allowSelection: true,
|
||||
rowSelected: onGridCheckBoxChange,
|
||||
rowDeselected: onGridCheckBoxChange,
|
||||
created: onGridRender,
|
||||
editSettings: { allowEditing: true },
|
||||
allowPaging: true,
|
||||
pageSettings: { pageSize: 11 },
|
||||
query: new Query().where(predicate).sortByDesc('DateTime'),
|
||||
cellSave: onGridSave,
|
||||
allowTextWrap: false,
|
||||
toolbar: ['Edit', 'Delete'],
|
||||
actionBegin: onGridEditBegin,
|
||||
columns: gridColumns,
|
||||
actionComplete: onGridActionComplete
|
||||
});
|
||||
grid.appendTo('#grid');
|
||||
if (document.getElementById('grid_edit')) {
|
||||
document.getElementById('grid_edit').onclick = (): void => {
|
||||
let ajax: Ajax = new Ajax('./src/expense/dialog.html', 'GET', true);
|
||||
ajax.send().then();
|
||||
ajax.onSuccess = (data: string): void => {
|
||||
grid.toolbarModule.toolbar.enableItems(document.getElementById('grid_delete').parentElement, true);
|
||||
if (editExpenseDialog) {
|
||||
editExpenseDialog.show();
|
||||
} else {
|
||||
editExpenseDialog = new Dialog({
|
||||
header: 'Edit Transaction',
|
||||
content: data,
|
||||
visible: false,
|
||||
showCloseIcon: true,
|
||||
closeOnEscape: false,
|
||||
isModal: true,
|
||||
target: document.body,
|
||||
buttons: [{
|
||||
click: onSaveTransaction, buttonModel: { content: 'Save', cssClass: 'e-info e-save', isPrimary: true }
|
||||
}, { click: onNewDialogCancel, buttonModel: { cssClass: 'e-outline e-cancel', content: 'Cancel' } }],
|
||||
width: '100%',
|
||||
height: '85%',
|
||||
animationSettings: { effect: 'None' },
|
||||
open: onEditDialogOpen,
|
||||
close: onEditDialogClose,
|
||||
overlayClick: dlgOverlayClicked
|
||||
});
|
||||
editExpenseDialog.appendTo('#dialog');
|
||||
editExpenseDialog.show();
|
||||
}
|
||||
};
|
||||
};
|
||||
}
|
||||
if (document.getElementById('grid_delete')) {
|
||||
document.getElementById('grid_delete').onclick = (): void => {
|
||||
confirmDialogObj = new Dialog({
|
||||
header: 'Delete',
|
||||
visible: false,
|
||||
width: '40%',
|
||||
isModal: true,
|
||||
content: '<span>Are you sure you want to delete the selected transaction(s)?</span>',
|
||||
showCloseIcon: true, closeOnEscape: false,
|
||||
buttons: [{
|
||||
click: confirmDlgYesBtnClick,
|
||||
buttonModel: { content: 'Yes', cssClass: 'e-ok e-flat', isPrimary: true }
|
||||
},
|
||||
{ click: confirmDlgNoBtnClick, buttonModel: { cssClass: 'e-flat e-no', content: 'No' } }],
|
||||
target: document.body,
|
||||
animationSettings: { effect: 'None' },
|
||||
open: alertDialogOpen, close: dialogClose,
|
||||
overlayClick: dlgOverlayClicked
|
||||
});
|
||||
confirmDialogObj.appendTo('#confirmDialog');
|
||||
confirmDialogObj.show();
|
||||
};
|
||||
}
|
||||
function dialogClose(): void {
|
||||
confirmDialogObj.destroy();
|
||||
confirmDialogObj = null;
|
||||
}
|
||||
function confirmDlgNoBtnClick(): void {
|
||||
confirmDialogObj.hide();
|
||||
}
|
||||
function confirmDlgYesBtnClick(): void {
|
||||
let selectedRecords: Object[] = grid.getSelectedRecords();
|
||||
for (let i: number = 0; i < selectedRecords.length; i++) {
|
||||
new DataManager(window.expenseDS).remove('UniqueId', selectedRecords[i]);
|
||||
}
|
||||
grid.setProperties({
|
||||
dataSource: window.expenseDS,
|
||||
query: new Query().where(predicate).sortByDesc('DateTime')
|
||||
});
|
||||
grid.refresh();
|
||||
cardUpdate();
|
||||
confirmDialogObj.hide();
|
||||
}
|
||||
|
||||
let searchKey: HTMLInputElement = document.getElementById('txt') as HTMLInputElement;
|
||||
Input.createInput({
|
||||
element: searchKey,
|
||||
properties: {
|
||||
showClearButton: true
|
||||
}
|
||||
});
|
||||
document.getElementById('searchbtn').onclick = () => {
|
||||
grid.search(searchKey.value);
|
||||
};
|
||||
|
||||
/** Performs search operation when press Enter key */
|
||||
searchKey.onkeyup = (e: KeyboardEventArgs) => {
|
||||
if (e.keyCode === 13) { grid.search(searchKey.value); }
|
||||
};
|
||||
|
||||
searchKey.onblur = () => {
|
||||
grid.search(searchKey.value);
|
||||
};
|
||||
(document.getElementsByClassName('e-clear-icon')[0] as HTMLElement).onmousedown = (): void => {
|
||||
searchKey.value = '';
|
||||
};
|
||||
// Initializing the add expense button
|
||||
let button: Button = new Button({});
|
||||
button.appendTo('#addexpense');
|
||||
function onCheckBoxChange(): void {
|
||||
generatePredicate(dateRangePickerObject.startDate, dateRangePickerObject.endDate, '');
|
||||
}
|
||||
|
||||
document.getElementById('add-btn').onclick = (): void => {
|
||||
showAddDialog();
|
||||
};
|
||||
|
||||
document.getElementById('addexpense').onclick = (): void => {
|
||||
showAddDialog();
|
||||
};
|
||||
|
||||
/** Disables edit toolbar item in the Expense Grid on the initial load */
|
||||
/* tslint:disable */
|
||||
function onGridActionComplete(e: any): void {
|
||||
setTimeout(() => {
|
||||
grid.toolbarModule.toolbar.enableItems(document.getElementById('grid_edit').parentElement, false);
|
||||
}, 0);
|
||||
}
|
||||
/* tslint:enable */
|
||||
|
||||
function showAddDialog(): void {
|
||||
let ajax: Ajax = new Ajax('./src/expense/dialog.html', 'GET', true);
|
||||
ajax.send().then();
|
||||
ajax.onSuccess = (data: string): void => {
|
||||
if (addExpenseDialog) {
|
||||
addExpenseDialog.show();
|
||||
} else {
|
||||
addExpenseDialog = new Dialog({
|
||||
header: 'New Transaction',
|
||||
content: data,
|
||||
visible: false,
|
||||
showCloseIcon: true,
|
||||
closeOnEscape: false,
|
||||
isModal: true,
|
||||
target: document.body,
|
||||
buttons: [{
|
||||
click: addNewTransaction, buttonModel: { content: 'Add', cssClass: 'e-info e-add', isPrimary: true }
|
||||
},
|
||||
{
|
||||
click: onNewDialogCancel, buttonModel: { cssClass: 'e-outline e-cancel', content: 'Cancel' }
|
||||
}
|
||||
],
|
||||
width: '100%',
|
||||
height: '85%',
|
||||
animationSettings: { effect: 'None' },
|
||||
open: onNewDialogOpen,
|
||||
close: onNewDialogClose,
|
||||
overlayClick: dlgOverlayClicked
|
||||
});
|
||||
addExpenseDialog.appendTo('#addexpenseDialog');
|
||||
addExpenseDialog.show();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function dlgOverlayClicked(): void {
|
||||
if (addExpenseDialog) {
|
||||
addExpenseDialog.hide();
|
||||
}
|
||||
if (confirmDialogObj) {
|
||||
confirmDialogObj.hide();
|
||||
}
|
||||
if (editExpenseDialog) {
|
||||
editExpenseDialog.hide();
|
||||
}
|
||||
}
|
||||
|
||||
/* tslint:disable-next-line */
|
||||
function onSaveTransaction(args: any): void {
|
||||
let newExpense: NewExpense = {
|
||||
'UniqueId': editRowData.rowData.UniqueId,
|
||||
'DateTime': new Date(datepicker.value.setHours(timepicker.value.getHours())),
|
||||
'Category': <string>category.value,
|
||||
'PaymentMode': (cashRadio.checked && cashRadio.label) ||
|
||||
(creditRadio.checked && creditRadio.label) || (debitRadio.checked && debitRadio.label),
|
||||
'TransactionType': (incomeRadio.checked && incomeRadio.label) || (expenseRadio.checked && expenseRadio.label),
|
||||
'Description': (<HTMLInputElement>document.getElementById('description')).value,
|
||||
'Amount': '' + amount.value
|
||||
};
|
||||
new DataManager(window.expenseDS).update('UniqueId', newExpense);
|
||||
grid.setProperties({
|
||||
dataSource: window.expenseDS,
|
||||
query: new Query().where(predicate).sortByDesc('DateTime')
|
||||
});
|
||||
grid.refresh();
|
||||
cardUpdate();
|
||||
editExpenseDialog.hide();
|
||||
}
|
||||
|
||||
function addNewTransaction(): void {
|
||||
let newExpense: NewExpense = {
|
||||
'UniqueId': 'T' + ('' + (+new Date())).substring(5, 10),
|
||||
'DateTime': new Date(datepicker.value.setHours(timepicker.value.getHours())),
|
||||
'Category': <string>category.value,
|
||||
'PaymentMode': (cashRadio.checked && cashRadio.label) ||
|
||||
(creditRadio.checked && creditRadio.label) || (debitRadio.checked && debitRadio.label),
|
||||
'TransactionType': (incomeRadio.checked && incomeRadio.label) || (expenseRadio.checked && expenseRadio.label),
|
||||
'Description': (<HTMLInputElement>document.getElementById('description')).value,
|
||||
'Amount': '' + amount.value
|
||||
};
|
||||
new DataManager(window.expenseDS).insert(newExpense);
|
||||
new DataManager(window.expenseDS).update('UniqueId', {
|
||||
UniqueId: newExpense.UniqueId,
|
||||
'DateTime': (datepicker.value),
|
||||
'Category': newExpense.Category,
|
||||
'PaymentMode': (cashRadio.checked && cashRadio.label) ||
|
||||
(creditRadio.checked && creditRadio.label) || (debitRadio.checked && debitRadio.label),
|
||||
'TransactionType': newExpense.TransactionType,
|
||||
'Description': newExpense.Description,
|
||||
'Amount': '' + newExpense.Amount
|
||||
});
|
||||
grid.setProperties({
|
||||
dataSource: window.expenseDS,
|
||||
query: new Query().where(predicate).sortByDesc('DateTime')
|
||||
|
||||
});
|
||||
grid.refresh();
|
||||
addExpenseDialog.hide();
|
||||
cardUpdate();
|
||||
}
|
||||
|
||||
function onNewDialogCancel(): void {
|
||||
(<HTMLElement>document.querySelector('.e-dlg-closeicon-btn')).click();
|
||||
}
|
||||
function onNewDialogClose(): void {
|
||||
this.dlgContainer.style.zIndex = '100';
|
||||
addExpenseDialog.destroy();
|
||||
addExpenseDialog = null;
|
||||
}
|
||||
|
||||
function onChange(args: ChangeArgs): void {
|
||||
if (this.element.value === 'Income') {
|
||||
category.dataSource = categoryIncomeData;
|
||||
} else {
|
||||
category.dataSource = categoryExpenseData;
|
||||
}
|
||||
}
|
||||
|
||||
function createDialogComponent(): void {
|
||||
incomeRadio = new RadioButton({ value: 'Income', label: 'Income', name: 'dlgTransactionType', change: onChange });
|
||||
incomeRadio.appendTo('#incomeradio');
|
||||
expenseRadio = new RadioButton({ value: 'Expense', label: 'Expense', name: 'dlgTransactionType', checked: true, change: onChange });
|
||||
expenseRadio.appendTo('#expenseradio');
|
||||
datepicker = new DatePicker({
|
||||
placeholder: 'Choose a Date', width: '100%', value: window.endDate,
|
||||
floatLabelType: 'Always'
|
||||
});
|
||||
datepicker.appendTo('#datepicker');
|
||||
timepicker = new TimePicker({
|
||||
placeholder: 'Choose a Time', width: '100%', floatLabelType: 'Always', value: new Date()
|
||||
});
|
||||
timepicker.appendTo('#timepicker');
|
||||
category = new DropDownList({
|
||||
placeholder: 'Select a Category',
|
||||
cssClass: 'Category',
|
||||
floatLabelType: 'Always',
|
||||
dataSource: categoryExpenseData,
|
||||
fields: { text: 'Category', iconCss: 'Class', value: 'Category' },
|
||||
});
|
||||
category.appendTo('#category');
|
||||
creditRadio = new RadioButton({ value: 'Credit Card', label: 'Credit Card', name: 'dlgPaymentMode' });
|
||||
creditRadio.appendTo('#creditradio');
|
||||
debitRadio = new RadioButton({ value: 'Debit Card', label: 'Debit Card', name: 'dlgPaymentMode' });
|
||||
debitRadio.appendTo('#debitradio');
|
||||
cashRadio = new RadioButton({ value: 'Cash', label: 'Cash', checked: true, name: 'dlgPaymentMode' });
|
||||
cashRadio.appendTo('#cashradio');
|
||||
amount = new NumericTextBox({
|
||||
placeholder: 'Enter a Amount',
|
||||
floatLabelType: 'Always',
|
||||
format: 'c2',
|
||||
min: 0
|
||||
});
|
||||
amount.appendTo('#amount');
|
||||
}
|
||||
function alertDialogOpen(): void {
|
||||
this.dlgContainer.style.zIndex = '1000000';
|
||||
}
|
||||
function onEditDialogClose(): void {
|
||||
document.body.style.overflowY = 'auto';
|
||||
editExpenseDialog.destroy();
|
||||
editExpenseDialog = null;
|
||||
}
|
||||
function onEditDialogOpen(): void {
|
||||
this.dlgContainer.style.zIndex = '1000000';
|
||||
document.body.style.overflowY = 'hidden';
|
||||
createDialogComponent();
|
||||
if (editRowData.rowData.TransactionType === 'Income') {
|
||||
incomeRadio.checked = true;
|
||||
category.dataSource = categoryIncomeData;
|
||||
}
|
||||
if (editRowData.rowData.TransactionType === 'expense') {
|
||||
expenseRadio.checked = true;
|
||||
category.dataSource = categoryExpenseData;
|
||||
}
|
||||
datepicker.value = editRowData.rowData.DateTime;
|
||||
timepicker.value = editRowData.rowData.DateTime;
|
||||
if (editRowData.rowData.PaymentMode === 'Credit Card') {
|
||||
creditRadio.checked = true;
|
||||
} else if (editRowData.rowData.PaymentMode === 'Debit Card') {
|
||||
debitRadio.checked = true;
|
||||
} else if (editRowData.rowData.PaymentMode === 'Cash') {
|
||||
cashRadio.checked = true;
|
||||
}
|
||||
(<HTMLInputElement>document.getElementById('description')).value = editRowData.rowData.Description;
|
||||
category.value = editRowData.rowData.Category;
|
||||
amount.value = editRowData.rowData.Amount;
|
||||
|
||||
}
|
||||
function onNewDialogOpen(): void {
|
||||
this.dlgContainer.style.zIndex = '1000000';
|
||||
createDialogComponent();
|
||||
}
|
||||
function generatePredicate(start: Date, end: Date, updater: string): void {
|
||||
let predicates: Predicate;
|
||||
let predicatesStart: Predicate = new Predicate('DateTime', 'greaterthanorequal', start);
|
||||
let predicatesEnd: Predicate = new Predicate('DateTime', 'lessthanorequal', end);
|
||||
predicates = predicatesStart.and(predicatesEnd);
|
||||
let predIncome: Predicate;
|
||||
let predExpense: Predicate;
|
||||
let predCash: Predicate;
|
||||
let predDebit: Predicate;
|
||||
let preCredit: Predicate;
|
||||
let preCategory: Predicate;
|
||||
let preCategorys: Predicate;
|
||||
minMaxAmount(dateRangePickerObject.startDate, dateRangePickerObject.endDate);
|
||||
if (updater === 'dateChange') {
|
||||
if (!isNOU(numMinValue) && !isNOU(numMaxValue)) {
|
||||
filterMinAmount.setProperties({
|
||||
min: numMinValue,
|
||||
value: numMinValue
|
||||
});
|
||||
filterMaxAmount.setProperties({
|
||||
max: numMaxValue,
|
||||
value: numMaxValue
|
||||
});
|
||||
}
|
||||
}
|
||||
/* tslint:disable */
|
||||
let val: any = [filterMinAmount.value, filterMaxAmount.value];
|
||||
/* tslint:enable */
|
||||
let predMinAmt: Predicate = new Predicate('Amount', 'greaterthanorequal', val[0]);
|
||||
let predMaxAmt: Predicate = new Predicate('Amount', 'lessthanorequal', val[1]);
|
||||
predicates = predicates.and(predMinAmt).and(predMaxAmt);
|
||||
if (income.checked || expense.checked) {
|
||||
if (income.checked) {
|
||||
predIncome = new Predicate('TransactionType', 'equal', 'Income');
|
||||
}
|
||||
if (expense.checked) {
|
||||
predExpense = new Predicate('TransactionType', 'equal', 'Expense');
|
||||
}
|
||||
if (expense.checked && income.checked) {
|
||||
predIncome = predIncome.or(predExpense);
|
||||
predicates = predicates.and(predIncome);
|
||||
} else if (income.checked) {
|
||||
predicates = predicates.and(predIncome);
|
||||
} else if (expense.checked) {
|
||||
predicates = predicates.and(predExpense);
|
||||
}
|
||||
}
|
||||
if (cash.checked || debitcard.checked || creditcard.checked) {
|
||||
if (cash.checked) {
|
||||
predCash = new Predicate('PaymentMode', 'equal', 'Cash');
|
||||
}
|
||||
if (creditcard.checked) {
|
||||
preCredit = new Predicate('PaymentMode', 'equal', 'Credit Card');
|
||||
}
|
||||
if (debitcard.checked) {
|
||||
predDebit = new Predicate('PaymentMode', 'equal', 'Debit Card');
|
||||
}
|
||||
if (cash.checked && creditcard.checked && debitcard.checked) {
|
||||
predIncome = preCredit.or(predDebit).or(predCash);
|
||||
predicates = predicates.and(predIncome);
|
||||
} else if (cash.checked && creditcard.checked) {
|
||||
predIncome = predCash.or(preCredit);
|
||||
predicates = predicates.and(predIncome);
|
||||
} else if (cash.checked && debitcard.checked) {
|
||||
predIncome = predCash.or(predDebit);
|
||||
predicates = predicates.and(predIncome);
|
||||
} else if (creditcard.checked && debitcard.checked) {
|
||||
predIncome = preCredit.or(predDebit);
|
||||
predicates = predicates.and(predIncome);
|
||||
} else if (cash.checked) {
|
||||
predicates = predicates.and(predCash);
|
||||
} else if (debitcard.checked) {
|
||||
predicates = predicates.and(predDebit);
|
||||
} else if (creditcard.checked) {
|
||||
predicates = predicates.and(preCredit);
|
||||
}
|
||||
}
|
||||
if (!isNOU(multiSelectFilter.value) && multiSelectFilter.value.length > 0) {
|
||||
let list: string[] = <string[]>multiSelectFilter.value;
|
||||
for (let i: number = 0; i < list.length; i++) {
|
||||
preCategory = new Predicate('Category', 'equal', list[i]);
|
||||
if (i === 0) {
|
||||
preCategorys = preCategory;
|
||||
} else {
|
||||
preCategorys = preCategorys.or(preCategory);
|
||||
}
|
||||
}
|
||||
predicates = predicates.and(preCategorys);
|
||||
}
|
||||
grid.setProperties({
|
||||
dataSource: window.expenseDS,
|
||||
query: new Query().where(predicates).sortByDesc('DateTime')
|
||||
|
||||
});
|
||||
grid.refresh();
|
||||
getCategory(dateRangePickerObject.startDate, dateRangePickerObject.endDate);
|
||||
multiSelectFilter.dataSource = filterCategory;
|
||||
multiSelectFilter.dataBind();
|
||||
}
|
||||
function amountChanged(): void {
|
||||
generatePredicate(dateRangePickerObject.startDate, dateRangePickerObject.endDate, '');
|
||||
}
|
||||
function dateRangeChanged(args?: RangeEventArgs): void {
|
||||
window.startDate = args.startDate;
|
||||
window.endDate = args.endDate;
|
||||
cardUpdate(true);
|
||||
generatePredicate(dateRangePickerObject.startDate, dateRangePickerObject.endDate, 'dateChange');
|
||||
}
|
||||
dateRangePickerObject = new DateRangePicker({
|
||||
startDate: window.startDate,
|
||||
endDate: window.endDate,
|
||||
cssClass: 'DateTime',
|
||||
format: 'MM/dd/yyyy',
|
||||
showClearButton: false,
|
||||
readonly: true,
|
||||
change: dateRangeChanged
|
||||
});
|
||||
dateRangePickerObject.appendTo('#daterange');
|
||||
getCategory(dateRangePickerObject.startDate, dateRangePickerObject.endDate);
|
||||
multiSelectFilter = new MultiSelect({
|
||||
dataSource: filterCategory,
|
||||
placeholder: 'Select Categories',
|
||||
mode: 'Box',
|
||||
hideSelectedItem: true,
|
||||
closePopupOnSelect: false,
|
||||
select: categoryUpdated,
|
||||
removed: categoryUpdated
|
||||
});
|
||||
multiSelectFilter.appendTo('#expense-category');
|
||||
let searchEle: Element = document.getElementsByClassName('e-searcher')[0];
|
||||
searchEle.querySelector('input').setAttribute('readonly', 'true');
|
||||
filterMinAmount = new NumericTextBox({
|
||||
cssClass: 'inlineAlign',
|
||||
width: '55px',
|
||||
showSpinButton: false,
|
||||
format: 'c0',
|
||||
min: numMinValue,
|
||||
value: numMinValue,
|
||||
change: amountChanged
|
||||
});
|
||||
filterMinAmount.appendTo('#filterMinAmount');
|
||||
filterMaxAmount = new NumericTextBox({
|
||||
cssClass: 'inlineAlign',
|
||||
width: '60px',
|
||||
showSpinButton: false,
|
||||
format: 'c0',
|
||||
max: numMaxValue,
|
||||
value: numMaxValue,
|
||||
change: amountChanged,
|
||||
});
|
||||
filterMaxAmount.appendTo('#filterMaxAmount');
|
||||
|
||||
income = new CheckBox({ label: 'Income', checked: true, cssClass: 'TransactionType', change: onCheckBoxChange });
|
||||
income.appendTo('#income');
|
||||
expense = new CheckBox({ label: 'Expense', checked: true, cssClass: 'TransactionType', change: onCheckBoxChange });
|
||||
expense.appendTo('#expenses');
|
||||
cash = new CheckBox({ label: 'Cash', checked: true, cssClass: 'PaymentMode', change: onCheckBoxChange });
|
||||
cash.appendTo('#cash');
|
||||
creditcard = new CheckBox({ label: 'Credit Card', checked: true, cssClass: 'PaymentMode', change: onCheckBoxChange });
|
||||
creditcard.appendTo('#creditcard');
|
||||
debitcard = new CheckBox({ label: 'Debit Card', checked: true, cssClass: 'PaymentMode', change: onCheckBoxChange });
|
||||
debitcard.appendTo('#debitcard');
|
||||
/* tslint:disable-next-line */
|
||||
function onGridSave(args: any): void {
|
||||
new DataManager(window.expenseDS).update('UniqueId', args.rowData);
|
||||
}
|
||||
|
||||
function categoryUpdated(): void {
|
||||
setTimeout(() => {
|
||||
generatePredicate(dateRangePickerObject.startDate, dateRangePickerObject.endDate, '');
|
||||
/* tslint:disable-next-line */
|
||||
}, 10);
|
||||
}
|
||||
|
||||
document.getElementById('filterExpense').onclick = (): void => {
|
||||
toggleFilterMenu();
|
||||
};
|
||||
};
|
||||
|
||||
export function getCategory(start: Date, end: Date): void {
|
||||
filterCategory = [];
|
||||
/* tslint:disable-next-line */
|
||||
tempData.forEach(item => {
|
||||
/* tslint:enable-next-line */
|
||||
if (start.valueOf() <= item.DateTime.valueOf() && end.valueOf() >= item.DateTime.valueOf()) {
|
||||
if (filterCategory.indexOf(item.Category) < 0) {
|
||||
filterCategory.push(item.Category);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
interface NewExpense {
|
||||
UniqueId: string;
|
||||
DateTime: Date;
|
||||
Category: string;
|
||||
Amount: string;
|
||||
PaymentMode: number | string;
|
||||
TransactionType: string;
|
||||
Description: string;
|
||||
}
|
|
@ -0,0 +1,266 @@
|
|||
/**
|
||||
* Expense Tracker
|
||||
*/
|
||||
import { addRoute, bypassed, parse } from 'crossroads';
|
||||
import { Ajax, rippleEffect, enableRipple } from '@syncfusion/ej2-base';
|
||||
import * as hasher from 'hasher';
|
||||
import { isNullOrUndefined, Browser, Internationalization } from '@syncfusion/ej2-base';
|
||||
import { expenseData, userInfo, startDate, endDate } from './common/common.data';
|
||||
enableRipple(true);
|
||||
|
||||
window.expenseDS = expenseData;
|
||||
window.userName = userInfo.FullName;
|
||||
window.userFirstName = userInfo.FirstName;
|
||||
|
||||
let intl: Internationalization = new Internationalization();
|
||||
window.getDate = (value: Date): string => {
|
||||
return intl.formatDate(value, { skeleton: 'yMd', type: 'date' });
|
||||
};
|
||||
window.getCurrencyVal = (value: number): string => {
|
||||
return intl.formatNumber(value, { format: 'C0' });
|
||||
};
|
||||
window.getNumberVal = (value: number): string => {
|
||||
return intl.getNumberFormat({ skeleton: 'C0', currency: 'USD' })(value);
|
||||
};
|
||||
|
||||
export let dataSource: Object[] = [];
|
||||
let menu: HTMLElement;
|
||||
let overlay: HTMLElement;
|
||||
declare let window: MyWindow;
|
||||
enum ExpensePage {
|
||||
dashboard, about, expense
|
||||
}
|
||||
if (isNullOrUndefined(window.startDate)) {
|
||||
window.startDate = startDate;
|
||||
window.endDate = endDate;
|
||||
}
|
||||
|
||||
/* tslint:disable-next-line */
|
||||
function updateDate(list: any) {
|
||||
dataSource = list;
|
||||
}
|
||||
/* tslint:disable-next-line */
|
||||
function parseDate(date: any) {
|
||||
return new Date((date).match(/\d+/)[0] * 1);
|
||||
}
|
||||
updateDate(expenseData);
|
||||
handleResize();
|
||||
function getCurrentPage(): string {
|
||||
let currentPage: string;
|
||||
if ((window.location.hash === '#/' + ExpensePage[ExpensePage.dashboard])) {
|
||||
currentPage = ExpensePage[ExpensePage.dashboard];
|
||||
} else if ((window.location.hash === '#/' + ExpensePage[ExpensePage.expense])) {
|
||||
currentPage = ExpensePage[ExpensePage.expense];
|
||||
} else if ((window.location.hash === '#/' + ExpensePage[ExpensePage.about])) {
|
||||
currentPage = ExpensePage[ExpensePage.about];
|
||||
}
|
||||
return currentPage;
|
||||
}
|
||||
|
||||
rippleEffect(document.body, { selector: '.ripple-element', rippleFlag: true });
|
||||
|
||||
routeDefault();
|
||||
let currentPage: string;
|
||||
addRoute('/:lang:', () => {
|
||||
let sample: string = currentPage || getCurrentPage();
|
||||
if ((currentPage && currentPage !== '') || (window.location.hash === '#/' + getCurrentPage())) {
|
||||
if (!isNullOrUndefined(document.querySelector('.expense-active-page'))) {
|
||||
document.querySelector('.expense-active-page').classList.remove('expense-active-page');
|
||||
}
|
||||
let ajaxHTML: Ajax = new Ajax('src/' + sample + '/' + sample + '.html', 'GET', true);
|
||||
ajaxHTML.send().then((value: Object): void => {
|
||||
document.getElementById('content').innerHTML = '';
|
||||
document.getElementById('content').innerHTML = value.toString();
|
||||
document.body.className = '';
|
||||
if ((currentPage === ExpensePage[ExpensePage.dashboard]) ||
|
||||
('#/' + ExpensePage[ExpensePage.dashboard] === window.location.hash)) {
|
||||
window.dashboard();
|
||||
document.querySelectorAll('.overview')[0].classList.add('expense-active-page');
|
||||
document.body.classList.add('dashboard-page');
|
||||
} else if ((currentPage === ExpensePage[ExpensePage.expense]) ||
|
||||
('#/' + ExpensePage[ExpensePage.expense] === window.location.hash)) {
|
||||
window.expense();
|
||||
document.querySelectorAll('.expense')[0].classList.add('expense-active-page');
|
||||
document.body.classList.add('expense-page');
|
||||
} else if ((currentPage === ExpensePage[ExpensePage.about]) ||
|
||||
('#/' + ExpensePage[ExpensePage.about] === window.location.hash)) {
|
||||
document.querySelectorAll('.about')[0].classList.add('expense-active-page');
|
||||
document.body.classList.add('about-page');
|
||||
}
|
||||
});
|
||||
}
|
||||
}).rules = { lang: ['dashboard', 'about', 'expense'] };
|
||||
bypassed.add((request: string) => {
|
||||
let samplePath: string[] = ['dashboard', 'about', 'expense'];
|
||||
let hash: string = request.split(' ')[0];
|
||||
if (samplePath.indexOf(hash) === -1) {
|
||||
location.hash = '#/' + samplePath[0];
|
||||
}
|
||||
});
|
||||
|
||||
for (let i: number = 0; i < document.querySelectorAll('li').length; i++) {
|
||||
document.querySelectorAll('li')[i].addEventListener('click', hash, false);
|
||||
}
|
||||
function hash(args: MouseEvent): void {
|
||||
document.getElementById('sidebar-wrapper').classList.remove('close');
|
||||
document.getElementById('overlay').classList.remove('dialog');
|
||||
document.getElementById('overlay').style.background = 'none';
|
||||
if (!isNullOrUndefined(document.querySelector('.expense-active-page'))) {
|
||||
document.querySelector('.expense-active-page').classList.remove('expense-active-page');
|
||||
}
|
||||
(<HTMLElement>args.currentTarget).firstElementChild.classList.add('expense-active-page');
|
||||
hasher.setHash((<HTMLElement>args.currentTarget).firstElementChild.getAttribute('href').split('/')[1]);
|
||||
}
|
||||
|
||||
function routeDefault(): void {
|
||||
addRoute('', () => {
|
||||
window.location.href = '#/dashboard';
|
||||
});
|
||||
}
|
||||
|
||||
hasher.initialized.add((hashValue: string) => {
|
||||
parse(hashValue);
|
||||
});
|
||||
|
||||
hasher.changed.add((hashValue: string) => {
|
||||
currentPage = hashValue;
|
||||
parse(hashValue);
|
||||
});
|
||||
hasher.init();
|
||||
|
||||
window.onresize = (args: MouseEvent): void => {
|
||||
handleResize();
|
||||
if (!Browser.isDevice) {
|
||||
if (document.getElementById('sidebar-wrapper') &&
|
||||
document.getElementById('sidebar-wrapper').classList.contains('open')) {
|
||||
document.getElementById('sidebar-wrapper').classList.remove('open');
|
||||
}
|
||||
if (document.getElementById('sidebar-wrapper') &&
|
||||
document.getElementById('sidebar-wrapper').classList.contains('close')) {
|
||||
document.getElementById('sidebar-wrapper').classList.remove('close');
|
||||
}
|
||||
if (document.getElementById('overlay') &&
|
||||
document.getElementById('overlay').classList.contains('dialog')) {
|
||||
document.getElementById('overlay').classList.remove('dialog');
|
||||
}
|
||||
if ((<HTMLElement>document.getElementsByClassName('filter')[0]) &&
|
||||
(<HTMLElement>document.getElementsByClassName('filter')[0]).classList.contains('filter-open')) {
|
||||
(<HTMLElement>document.getElementsByClassName('filter')[0]).classList.remove('filter-open');
|
||||
}
|
||||
if ((<HTMLElement>document.getElementsByClassName('filter')[0]) &&
|
||||
(<HTMLElement>document.getElementsByClassName('filter')[0]).classList.contains('filter-close')) {
|
||||
(<HTMLElement>document.getElementsByClassName('filter')[0]).classList.remove('filter-close');
|
||||
}
|
||||
}
|
||||
};
|
||||
document.getElementById('menu-toggle').onclick = (): void => {
|
||||
menu = document.getElementById('sidebar-wrapper');
|
||||
overlay = document.getElementById('overlay');
|
||||
toggleMenu();
|
||||
};
|
||||
document.getElementById('filter-toggle').onclick = (): void => {
|
||||
toggleFilterMenu();
|
||||
};
|
||||
document.getElementById('overlay').onclick = (): void => {
|
||||
menu = document.getElementById('sidebar-wrapper');
|
||||
overlay = document.getElementById('overlay');
|
||||
handleOverlay();
|
||||
};
|
||||
(document.getElementsByClassName('nav-list')[0] as HTMLElement).onclick = (args: MouseEvent): void => {
|
||||
if ((args.target as HTMLElement).nodeName === 'A') {
|
||||
menu = document.getElementById('sidebar-wrapper');
|
||||
overlay = document.getElementById('overlay');
|
||||
handleOverlay();
|
||||
}
|
||||
};
|
||||
|
||||
function toggleMenu(): void {
|
||||
if (menu.classList.contains('open')) {
|
||||
removeToggleClass();
|
||||
menu.classList.add('close');
|
||||
disableOverlay();
|
||||
} else if (menu.classList.contains('close')) {
|
||||
removeToggleClass();
|
||||
menu.classList.add('open');
|
||||
enableOverlay();
|
||||
} else {
|
||||
menu.classList.add('open');
|
||||
enableOverlay();
|
||||
}
|
||||
}
|
||||
|
||||
function removeToggleClass(): void {
|
||||
menu.classList.remove('open');
|
||||
menu.classList.remove('close');
|
||||
}
|
||||
|
||||
function enableOverlay(): void {
|
||||
overlay.classList.add('dialog');
|
||||
overlay.style.background = '#383838';
|
||||
}
|
||||
|
||||
function disableOverlay(): void {
|
||||
overlay.classList.remove('dialog');
|
||||
overlay.style.background = 'none';
|
||||
}
|
||||
|
||||
export function toggleFilterMenu(): void {
|
||||
menu = document.getElementById('sidebar-wrapper');
|
||||
overlay = document.getElementById('overlay');
|
||||
menu.style.zIndex = '10000';
|
||||
let filterMenu: Element = document.getElementsByClassName('sidebar-wrapper-filter')[0];
|
||||
if (filterMenu.classList.contains('filter-open')) {
|
||||
filterMenu.classList.remove('filter-open');
|
||||
filterMenu.classList.add('filter-close');
|
||||
disableOverlay();
|
||||
} else if (filterMenu.classList.contains('filter-close')) {
|
||||
filterMenu.classList.remove('filter-close');
|
||||
filterMenu.classList.add('filter-open');
|
||||
enableOverlay();
|
||||
} else {
|
||||
filterMenu.classList.add('filter-open');
|
||||
enableOverlay();
|
||||
}
|
||||
}
|
||||
|
||||
function handleOverlay(): void {
|
||||
disableOverlay();
|
||||
removeToggleClass();
|
||||
removeFilterToggleClass();
|
||||
}
|
||||
|
||||
function removeFilterToggleClass(): void {
|
||||
menu.style.zIndex = '100001';
|
||||
let filterMenu: Element = document.getElementsByClassName('sidebar-wrapper-filter')[0];
|
||||
if (!isNullOrUndefined(filterMenu)) {
|
||||
filterMenu.classList.remove('filter-open');
|
||||
filterMenu.classList.remove('filter-close');
|
||||
}
|
||||
}
|
||||
|
||||
function handleResize(): void {
|
||||
if (document.documentElement.offsetWidth > 1400) {
|
||||
document.body.style.minHeight = 'auto';
|
||||
document.body.style.minHeight = document.documentElement.offsetHeight + 'px';
|
||||
}
|
||||
}
|
||||
|
||||
export interface ResultData {
|
||||
result: { [key: string]: Object[] }[];
|
||||
}
|
||||
|
||||
export interface MyWindow extends Window {
|
||||
expense: () => void;
|
||||
about: () => void;
|
||||
settings: () => void;
|
||||
dashboard: () => void;
|
||||
getDate: (value: Date) => string;
|
||||
getCurrencyVal: (value: number) => string;
|
||||
getNumberVal: (value: number) => string;
|
||||
expenseDS: Object;
|
||||
startDate: Date;
|
||||
endDate: Date;
|
||||
userName: string;
|
||||
userFirstName: string;
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
$accent: #ff4081;
|
||||
$accent-font: #fff;
|
||||
|
||||
$primary: #3f51b5;
|
||||
$primary-50: lighten($primary, 38%);
|
||||
$primary-100: lighten($primary, 31%);
|
||||
$primary-200: lighten($primary, 19%);
|
||||
$primary-300: lighten($primary, 8%);
|
||||
$primary-font: #fff;
|
||||
$primary-50-font: #000;
|
||||
$primary-100-font: #000;
|
||||
$primary-200-font: #000;
|
||||
$primary-300-font: #fff;
|
||||
$grey-white: #fff;
|
||||
$grey-black: #000;
|
||||
$grey-50: #fafafa;
|
||||
$grey-100: #f5f5f5;
|
||||
$grey-200: #eee;
|
||||
$grey-300: #e0e0e0;
|
||||
$grey-400: #bdbdbd;
|
||||
$grey-500: #9e9e9e;
|
||||
$grey-600: #757575;
|
||||
$grey-700: #616161;
|
||||
$grey-800: #424242;
|
||||
$grey-900: #212121;
|
||||
$grey-dark: #303030;
|
||||
$grey-light-font: #000;
|
||||
$grey-dark-font: #fff;
|
||||
$base-font: #000;
|
||||
$error-font: #f44336;
|
После Ширина: | Высота: | Размер: 6.4 KiB |
|
@ -0,0 +1,15 @@
|
|||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #494949;
|
||||
fill-rule: evenodd;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<title>03 About</title>
|
||||
<g>
|
||||
<path class="cls-1" d="M13.19,17.81V9.45a1.19,1.19,0,0,0-2.39,0v8.37a1.19,1.19,0,0,0,2.39,0Z"/>
|
||||
<path class="cls-1" d="M12,7.36h0a1.18,1.18,0,1,0-1.19-1.17A1.18,1.18,0,0,0,12,7.36Z"/>
|
||||
</g>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 473 B |
|
@ -0,0 +1 @@
|
|||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 42 42"><defs><style>.cls-1{fill-rule:evenodd;fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="1.37" y1="37.95" x2="39.99" y2="6.56" gradientTransform="translate(0.04 -1.02) rotate(0.14)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#04af7a"/><stop offset="1" stop-color="#04cd93"/></linearGradient></defs><title>Available Cash</title><path class="cls-1" d="M31,19.5h0l0,0a2.18,2.18,0,0,1,1.48-.6,2.15,2.15,0,0,1,1.54.65l0,0a2.16,2.16,0,0,1,.6,1.5,2.26,2.26,0,0,1-.63,1.51,2.18,2.18,0,0,1-1.54.63,2.06,2.06,0,0,1-1.5-.64A2.13,2.13,0,0,1,30.4,21,2.05,2.05,0,0,1,31,19.5Zm1.49,5.62h0a4.09,4.09,0,0,0,3-6.92l0-.07a4.2,4.2,0,0,0-2.92-1.19,4,4,0,0,0-2.83,1.14l-.06,0a4.1,4.1,0,0,0,0,5.81A4.13,4.13,0,0,0,32.54,25.12Zm6.25-11.3-12.18,0A2.61,2.61,0,0,0,24,16.34l0,9.31a2.52,2.52,0,0,0,.75,1.81v0a2.72,2.72,0,0,0,1.83.77l12.18,0v4.23A2.45,2.45,0,0,1,38,34.3a2.48,2.48,0,0,1-1.77.75L5.73,35a2.59,2.59,0,0,1-2.54-2.55L3.25,9.48A2.57,2.57,0,0,1,4,7.68,2.52,2.52,0,0,1,5.8,7L36.28,7A2.53,2.53,0,0,1,38.8,9.57Zm0,12.49-12.18,0a.59.59,0,0,1-.46-.17.67.67,0,0,1-.19-.46l0-9.31a.66.66,0,0,1,.65-.63l12.18,0ZM40.39,5.52h0a5.66,5.66,0,0,0-4.06-1.7L5.81,3.73A5.77,5.77,0,0,0,0,9.47L0,32.41a5.79,5.79,0,0,0,1.65,4.05l0,0a5.78,5.78,0,0,0,4.07,1.68l30.48.07A5.69,5.69,0,0,0,42,32.52L42,9.57A5.83,5.83,0,0,0,40.39,5.52Z"/></svg>
|
После Ширина: | Высота: | Размер: 1.4 KiB |
|
@ -0,0 +1,12 @@
|
|||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #494949;
|
||||
fill-rule: evenodd;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<title>01 Home</title>
|
||||
<path class="cls-1" d="M21.92,7.56a2.33,2.33,0,0,0-2.24-1.73,2.46,2.46,0,0,0-.61.08A2.35,2.35,0,0,0,17.66,7a2.27,2.27,0,0,0-.24,1.73L15.8,10.34a4.5,4.5,0,0,1-2.25,1.11h0a3.59,3.59,0,0,1-1-1.89,2.55,2.55,0,0,0-.06-.29,2.34,2.34,0,0,0-2.26-1.72A2.32,2.32,0,0,0,8,10.46l-2,2a4.38,4.38,0,0,1-2.22,1.12l-.09,0a2.33,2.33,0,0,0-1.42,1.08,2.38,2.38,0,0,0-.24,1.76,2.23,2.23,0,0,0,1,1.37l.06.05h0a2.4,2.4,0,0,0,1.16.3,2.28,2.28,0,0,0,.55-.07h.06A2.44,2.44,0,0,0,6.35,17a2.37,2.37,0,0,0,.23-1.73l2-2a3.63,3.63,0,0,1,2-1.07l.25-.05a4.51,4.51,0,0,1,1,2.1l0,.08a2.29,2.29,0,0,0,1.09,1.41,2.33,2.33,0,0,0,1.75.24l.09,0h0a2.28,2.28,0,0,0,1.33-1.06,2.25,2.25,0,0,0,.25-1.74L18,11.53a4.32,4.32,0,0,1,2.21-1.1l.07,0a2.35,2.35,0,0,0,1.41-1.08l0-.09A2.25,2.25,0,0,0,21.92,7.56ZM5.16,16.32h0a.93.93,0,0,1-.58.45h0a1,1,0,0,1-.71-.1h0a1,1,0,0,1-.42-.58.9.9,0,0,1,.09-.72,1,1,0,0,1,.59-.45h0a1,1,0,0,1,.71.08,1.06,1.06,0,0,1,.45.59A1,1,0,0,1,5.16,16.32Zm5.94-5.93a1,1,0,0,1-1.31.35,1,1,0,0,1-.45-.59,1,1,0,0,1,.1-.73h0A1,1,0,0,1,10,9a.93.93,0,0,1,.72.1.89.89,0,0,1,.45.59A1,1,0,0,1,11.1,10.38Zm3.83,3.83a.88.88,0,0,1-.58.44h0a1.06,1.06,0,0,1-.69-.07l-.06,0a1,1,0,0,1-.42-.58.94.94,0,0,1,.08-.69l0,0a.89.89,0,0,1,.57-.43h0a1,1,0,0,1,.72.1l0,0a1,1,0,0,1,.42.57A1,1,0,0,1,14.94,14.21Zm5.59-5.59,0,.06a1,1,0,0,1-.58.42A1,1,0,0,1,19.23,9l-.06,0a1.05,1.05,0,0,1-.42-.57h0a.92.92,0,0,1,.08-.69l0-.06a1,1,0,0,1,.57-.42.9.9,0,0,1,.69.08l.06,0a1,1,0,0,1,.44.58A1,1,0,0,1,20.52,8.61Z"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 1.7 KiB |
|
@ -0,0 +1 @@
|
|||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 42 42"><defs><style>.cls-1{fill-rule:evenodd;fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="1.01" y1="21.61" x2="41.01" y2="21.61" gradientTransform="translate(0.04 -0.66) rotate(0.14)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#666"/><stop offset="1" stop-color="#515151"/></linearGradient></defs><title>Overall Transactions</title><path class="cls-1" d="M21,37.94h0A16.92,16.92,0,1,1,37.94,21,17,17,0,0,1,21,37.94ZM21,1h0A20,20,0,1,0,41,21.05,20,20,0,0,0,21,1ZM17.23,19.46h0l-3-3,8.86,0a1.54,1.54,0,0,0,0-3.08l-8.87,0,3-3a1.53,1.53,0,1,0-2.14-2.19L9.52,13.75v0l-.06.07-.07.06,0,0L9.3,14l0,0a.72.72,0,0,0-.1.18l-.06.12,0,0L9,14.49v0l0,.13v.13l0,.11v.06L9,15v.16l0,.11v0l.06.12,0,.07.06.11a.42.42,0,0,0,.1.17l0,.06.06,0,0,0,.07.07L15,21.65a1.55,1.55,0,1,0,2.2-2.19ZM33,27v-.15l0-.15v0a1.36,1.36,0,0,0-.08-.19l-.06-.11a.57.57,0,0,0-.1-.18l0,0,0-.06-.1-.09-.06-.06,0,0-5.53-5.56a1.54,1.54,0,0,0-2.17,2.18l3,3-8.86,0a1.54,1.54,0,0,0,0,3.08l8.86,0-3,3a1.55,1.55,0,0,0,2.19,2.19l5.62-5.62.07-.07,0,0,0,0,0-.06a.72.72,0,0,0,.1-.18l0-.07,0,0a1,1,0,0,0,.08-.19v0l0-.13v-.13l0-.1V27Z"/></svg>
|
После Ширина: | Высота: | Размер: 1.2 KiB |
После Ширина: | Высота: | Размер: 18 KiB |
После Ширина: | Высота: | Размер: 8.2 KiB |
|
@ -0,0 +1,11 @@
|
|||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill-rule: evenodd;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<title>Search</title>
|
||||
<path class="cls-1" d="M15.76,14.26H15L14.69,14a6.51,6.51,0,1,0-.7.7l.27.28v.79l5,5,1.49-1.49Zm-6,0a4.5,4.5,0,1,1,4.5-4.5A4.49,4.49,0,0,1,9.76,14.26Z"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 398 B |
|
@ -0,0 +1 @@
|
|||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 42 42"><defs><style>.cls-1{fill-rule:evenodd;fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" y1="21.69" x2="42" y2="21.69" gradientTransform="translate(0.04 -0.77) rotate(0.14)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f14d52"/><stop offset="1" stop-color="#d64954"/></linearGradient></defs><title>Total Expenses</title><path class="cls-1" d="M22.49,32.9h0a1,1,0,0,0-1,1v1.79a1,1,0,0,0,1,1,1,1,0,0,0,1-1V33.89A1,1,0,0,0,22.49,32.9Zm2.7,0h0a1,1,0,0,0-1,1v1.79a1,1,0,0,0,1,1,1,1,0,0,0,1-1V33.9A1,1,0,0,0,25.19,32.91Zm2.71,0h0a1,1,0,0,0-1,1v1.79a1,1,0,0,0,1,1,1,1,0,0,0,1-1V33.9A1,1,0,0,0,27.91,32.92Zm10.83,4.31h0a.39.39,0,0,1-.06.19l-27.45-.07a.41.41,0,0,1,0-.19l0-19.06V18h0l27.45.07a.44.44,0,0,1,.06.19ZM8,18.19l0,8.44L3.27,18.42s0-.13,0-.19h0l0,0L27,4.57a.28.28,0,0,1,.15.15l0,0L33,14.83l-21.7-.05A3.38,3.38,0,0,0,8,18.19ZM41.1,15.91h0a3.15,3.15,0,0,0-2.35-1.06H36.68L30,3.24a1.13,1.13,0,0,0-.19-.32A3.5,3.5,0,0,0,28,1.51a3.13,3.13,0,0,0-2.41.18,1,1,0,0,0-.28.14L1.67,15.41l-.07,0A3.17,3.17,0,0,0,.07,17.55v0A3.49,3.49,0,0,0,.48,20l7.46,13v4.08a3.56,3.56,0,0,0,.91,2.36,3.13,3.13,0,0,0,2.36,1.06l27.49.07A3.11,3.11,0,0,0,41,39.59,3.49,3.49,0,0,0,42,37.24l0-19A3.53,3.53,0,0,0,41.1,15.91Zm-4,17h0a1,1,0,0,0-1,1v1.79a1,1,0,1,0,1.93,0V33.93A1,1,0,0,0,37.08,32.94Zm-2.71,0h0a1,1,0,0,0-1,1V35.7a1,1,0,0,0,1.94,0V33.92A1,1,0,0,0,34.37,32.93Zm-2.7,0h0a1,1,0,0,0-1,1v1.79a1,1,0,0,0,1.93,0V33.91A1,1,0,0,0,31.66,32.92ZM16,32.89h0a1,1,0,0,0-1,1v1.79a1,1,0,1,0,1.93,0V33.88A1,1,0,0,0,16,32.89Zm2.7,0h0a1,1,0,0,0-1,1v1.79a1,1,0,0,0,1.95,0V33.88A1,1,0,0,0,18.71,32.89Zm-4.39-3.78h4.27V24.86H14.33Zm5.28-6.19-6.21,0a1,1,0,0,0-1,1l0,6.2a1,1,0,0,0,1,1l6.21,0a1,1,0,0,0,1-1l0-6.2A1,1,0,0,0,19.59,22.92Zm-6.27,10a1,1,0,0,0-1,1v1.79a1,1,0,0,0,1,1,1,1,0,0,0,1-1V33.87A1,1,0,0,0,13.32,32.88Z"/></svg>
|
После Ширина: | Высота: | Размер: 1.9 KiB |
|
@ -0,0 +1,15 @@
|
|||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="42" height="42" viewBox="0 0 42 42">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: url(#linear-gradient);
|
||||
}
|
||||
</style>
|
||||
<linearGradient id="linear-gradient" x1="15.2" y1="21.88" x2="27.41" y2="21.88" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#497df2"/>
|
||||
<stop offset="1" stop-color="#6890fb"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<title>Total Income_1</title>
|
||||
<path class="cls-1" d="M22.25,30.24v2.19H20.77V30.27a7.83,7.83,0,0,1-5.57-2.55l1.22-1.53a6.75,6.75,0,0,0,4.35,2.26V22.53c-2.48-.66-5.06-1.51-5.06-4.5,0-2.53,2.14-4.31,5.06-4.5V11.32h1.48v2.26A7.22,7.22,0,0,1,27,15.8l-1.22,1.48a5.76,5.76,0,0,0-3.58-1.85v5.28c2.5.71,5.16,1.63,5.16,4.82C27.41,27.71,26,30,22.25,30.24Zm-1.48-9.92v-5c-1.75.1-3,1.12-3,2.55S19.14,19.86,20.77,20.32Zm4.57,5.38c0-1.65-1.41-2.26-3.09-2.77v5.5C24.59,28.22,25.34,26.81,25.34,25.7Z"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 992 B |
|
@ -0,0 +1,27 @@
|
|||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="42" height="42" viewBox="0 0 42 42">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1, .cls-2 {
|
||||
fill-rule: evenodd;
|
||||
}
|
||||
|
||||
.cls-1 {
|
||||
fill: url(#linear-gradient);
|
||||
}
|
||||
|
||||
.cls-2 {
|
||||
fill: url(#linear-gradient-2);
|
||||
}
|
||||
</style>
|
||||
<linearGradient id="linear-gradient" x1="8.98" y1="14.94" x2="24.62" y2="14.94" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#666"/>
|
||||
<stop offset="1" stop-color="#515151"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="linear-gradient-2" x1="17.38" y1="27.06" x2="33.02" y2="27.06" xlink:href="#linear-gradient"/>
|
||||
</defs>
|
||||
<title>Overall Transactions_1</title>
|
||||
<g>
|
||||
<path class="cls-1" d="M17.23,19.46h0l-3-3,8.86,0a1.54,1.54,0,0,0,0-3.08l-8.87,0,3-3a1.53,1.53,0,1,0-2.14-2.19L9.52,13.75v0l-.06.07-.07.06,0,0L9.3,14l0,0a.72.72,0,0,0-.1.18l-.06.12,0,0L9,14.49v0l0,.13v.13l0,.11v.06L9,15v.16l0,.11v0l.06.12,0,.07.06.11a.42.42,0,0,0,.1.17l0,.06.06,0,0,0,.07.07L15,21.65a1.55,1.55,0,1,0,2.2-2.19Z"/>
|
||||
<path class="cls-2" d="M33,27v-.15l0-.15v0a1.36,1.36,0,0,0-.08-.19l-.06-.11a.57.57,0,0,0-.1-.18l0,0,0-.06-.1-.09-.06-.06,0,0-5.53-5.56a1.54,1.54,0,0,0-2.17,2.18l3,3-8.86,0a1.54,1.54,0,0,0,0,3.08l8.86,0-3,3a1.55,1.55,0,0,0,2.19,2.19l5.62-5.62.07-.07,0,0,0,0,0-.06a.72.72,0,0,0,.1-.18l0-.07,0,0a1,1,0,0,0,.08-.19v0l0-.13v-.13l0-.1V27Z"/>
|
||||
</g>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 1.4 KiB |
|
@ -0,0 +1,16 @@
|
|||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="42" height="42" viewBox="0 0 42 42">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill-rule: evenodd;
|
||||
fill: url(#linear-gradient);
|
||||
}
|
||||
</style>
|
||||
<linearGradient id="linear-gradient" x1="5.76" y1="34.27" x2="35.49" y2="10.11" gradientTransform="translate(0.17 -1.02) rotate(0.14)" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#04af7a"/>
|
||||
<stop offset="1" stop-color="#04cd93"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<title>Available Cash_1</title>
|
||||
<path class="cls-1" d="M28.73,19.85h0l0,0a1.68,1.68,0,0,1,1.14-.46,1.65,1.65,0,0,1,1.18.5l0,0A1.66,1.66,0,0,1,31.55,21a1.74,1.74,0,0,1-.48,1.16,1.68,1.68,0,0,1-1.19.49,1.59,1.59,0,0,1-1.16-.49A1.64,1.64,0,0,1,28.23,21,1.58,1.58,0,0,1,28.73,19.85Zm1.15,4.32h0a3.14,3.14,0,0,0,2.28-5.33l0-.05a3.23,3.23,0,0,0-2.25-.92,3.07,3.07,0,0,0-2.18.88l0,0a3.15,3.15,0,0,0,0,4.47A3.18,3.18,0,0,0,29.88,24.17Zm4.81-8.7-9.37,0a2,2,0,0,0-2,2l0,7.17A1.94,1.94,0,0,0,23.88,26v0a2.09,2.09,0,0,0,1.41.59l9.37,0v3.25a1.89,1.89,0,0,1-.58,1.38,1.91,1.91,0,0,1-1.37.58L9.25,31.76a2,2,0,0,1-2-2l0-17.66a2,2,0,0,1,.59-1.38,1.94,1.94,0,0,1,1.38-.56l23.46.06A1.94,1.94,0,0,1,34.7,12.2Zm0,9.62-9.37,0a.46.46,0,0,1-.35-.13.52.52,0,0,1-.14-.35l0-7.17a.51.51,0,0,1,.5-.49l9.37,0Zm1.26-16h0a4.35,4.35,0,0,0-3.12-1.31L9.31,7.71a4.44,4.44,0,0,0-4.45,4.42l0,17.66a4.45,4.45,0,0,0,1.27,3.12l0,0a4.45,4.45,0,0,0,3.13,1.29l23.46.06a4.38,4.38,0,0,0,4.44-4.43l0-17.66A4.48,4.48,0,0,0,35.93,9.08Z"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 1.5 KiB |
|
@ -0,0 +1,7 @@
|
|||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 38 38">
|
||||
<title>Wallet</title>
|
||||
<g>
|
||||
<path d="M5.34,33.24h24.2a3.13,3.13,0,0,0,3.12-3.12V26.57A2.73,2.73,0,0,0,35,23.88V19.2a2.73,2.73,0,0,0-2.34-2.69V13a3.13,3.13,0,0,0-3.12-3.12H26.3l-.66-4.41a.76.76,0,0,0-.35-.55.72.72,0,0,0-.62-.08L6.9,9.83H5.34A2.35,2.35,0,0,0,3,12.17V30.9A2.35,2.35,0,0,0,5.34,33.24Zm28.1-14v4.68A1.15,1.15,0,0,1,32.27,25H26.41a2.35,2.35,0,0,1-2.34-2.34V20.37A2.35,2.35,0,0,1,26.41,18h5.85A1.15,1.15,0,0,1,33.44,19.2ZM24.23,6.51l.51,3.32H12.6ZM4.56,12.17a.78.78,0,0,1,.78-.78h24.2A1.57,1.57,0,0,1,31.1,13v3.51H26.41a3.91,3.91,0,0,0-3.9,3.9v2.34a3.91,3.91,0,0,0,3.9,3.9H31.1v3.51a1.57,1.57,0,0,1-1.56,1.56H5.34a.78.78,0,0,1-.78-.78Z"/>
|
||||
<path d="M27.59,19.2a2.34,2.34,0,1,0,2.34,2.34A2.35,2.35,0,0,0,27.59,19.2Zm0,3.12a.78.78,0,1,1,.78-.78A.78.78,0,0,1,27.59,22.32Z"/>
|
||||
</g>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 922 B |
После Ширина: | Высота: | Размер: 855 B |
После Ширина: | Высота: | Размер: 1007 B |
После Ширина: | Высота: | Размер: 911 B |
После Ширина: | Высота: | Размер: 1.0 KiB |
После Ширина: | Высота: | Размер: 891 B |
После Ширина: | Высота: | Размер: 1.1 KiB |
После Ширина: | Высота: | Размер: 1.1 KiB |
После Ширина: | Высота: | Размер: 1.0 KiB |
После Ширина: | Высота: | Размер: 879 B |
После Ширина: | Высота: | Размер: 945 B |
После Ширина: | Высота: | Размер: 1.0 KiB |
После Ширина: | Высота: | Размер: 892 B |
После Ширина: | Высота: | Размер: 919 B |
После Ширина: | Высота: | Размер: 1.2 KiB |
После Ширина: | Высота: | Размер: 1.0 KiB |
После Ширина: | Высота: | Размер: 1.3 KiB |
После Ширина: | Высота: | Размер: 976 B |
После Ширина: | Высота: | Размер: 1.0 KiB |
После Ширина: | Высота: | Размер: 1.1 KiB |
После Ширина: | Высота: | Размер: 3.1 KiB |
|
@ -0,0 +1,37 @@
|
|||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="42" height="42" viewBox="0 0 42 42">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: url(#linear-gradient);
|
||||
}
|
||||
|
||||
.cls-2 {
|
||||
fill: url(#linear-gradient-2);
|
||||
}
|
||||
|
||||
.cls-3 {
|
||||
fill: url(#linear-gradient-3);
|
||||
}
|
||||
|
||||
.cls-4 {
|
||||
fill: url(#linear-gradient-4);
|
||||
}
|
||||
</style>
|
||||
<linearGradient id="linear-gradient" x1="14.44" y1="26.57" x2="37.99" y2="7.42" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#f14d52"/>
|
||||
<stop offset="1" stop-color="#d64954"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="linear-gradient-2" x1="29.6" y1="21.49" x2="34.5" y2="17.51" xlink:href="#linear-gradient"/>
|
||||
<linearGradient id="linear-gradient-3" x1="4.59" y1="32.6" x2="18.08" y2="21.69" xlink:href="#linear-gradient"/>
|
||||
<linearGradient id="linear-gradient-4" x1="7.84" y1="27.15" x2="14.84" y2="27.15" xlink:href="#linear-gradient"/>
|
||||
</defs>
|
||||
<title>Total Expenses_1</title>
|
||||
<g>
|
||||
<g>
|
||||
<path class="cls-1" d="M38.08,7.56h0a4.35,4.35,0,0,0-3.12-1.31L11.46,6.18A4.44,4.44,0,0,0,7,10.6L7,17.4a10.58,10.58,0,0,1,2.48-.76v-6a2,2,0,0,1,.59-1.38,1.94,1.94,0,0,1,1.38-.56l23.46.06a1.94,1.94,0,0,1,1.94,1.95v3.27l-9.37,0a2,2,0,0,0-2,2l0,7.17A1.94,1.94,0,0,0,26,24.44v0a2.09,2.09,0,0,0,1.41.59l9.37,0v3.25a1.89,1.89,0,0,1-.58,1.38,1.91,1.91,0,0,1-1.37.58l-13.32,0a10.6,10.6,0,0,1-1.13,2.47l14.44,0a4.38,4.38,0,0,0,4.44-4.43l0-17.66A4.48,4.48,0,0,0,38.08,7.56Zm-1.26,16-9.37,0a.46.46,0,0,1-.35-.13.52.52,0,0,1-.14-.35l0-7.17a.51.51,0,0,1,.5-.49l9.37,0Z"/>
|
||||
<path class="cls-2" d="M32,22.64a3.14,3.14,0,0,0,2.28-5.33l0-.05A3.23,3.23,0,0,0,32,16.34a3.07,3.07,0,0,0-2.18.88l0,0a3.15,3.15,0,0,0,0,4.47A3.18,3.18,0,0,0,32,22.64Zm-1.15-4.32,0,0A1.68,1.68,0,0,1,32,17.83a1.65,1.65,0,0,1,1.18.5l0,0a1.66,1.66,0,0,1,.46,1.16,1.74,1.74,0,0,1-.48,1.16,1.68,1.68,0,0,1-1.19.49,1.59,1.59,0,0,1-1.16-.49,1.64,1.64,0,0,1-.49-1.17A1.58,1.58,0,0,1,30.89,18.32Z"/>
|
||||
</g>
|
||||
<path class="cls-3" d="M11.34,21a6.17,6.17,0,1,1-6.17,6.17A6.18,6.18,0,0,1,11.34,21m0-2.5A8.67,8.67,0,1,0,20,27.15a8.67,8.67,0,0,0-8.67-8.67Z"/>
|
||||
<rect class="cls-4" x="7.84" y="26.4" width="7" height="1.5"/>
|
||||
</g>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 2.2 KiB |
|
@ -0,0 +1,12 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>Generated by IcoMoon</metadata>
|
||||
<defs>
|
||||
<font id="Expense-Analysis-Sample" horiz-adv-x="1024">
|
||||
<font-face units-per-em="1024" ascent="960" descent="-64" />
|
||||
<missing-glyph horiz-adv-x="1024" />
|
||||
<glyph unicode=" " horiz-adv-x="512" d="" />
|
||||
<glyph unicode="" glyph-name="Filters" d="M118.187 686.507h484.267v-37.547c0.233-10.744 8.882-19.393 19.605-19.626h141.675c10.744 0.233 19.393 8.882 19.626 19.605v37.569h122.88c18.144 0 32.853 14.709 32.853 32.853s-14.709 32.853-32.853 32.853v0h-123.307v37.12c-0.233 10.744-8.882 19.393-19.605 19.626h-141.675c-10.84 0-19.627-8.787-19.627-19.627v0-37.547h-483.84c-18.144 0-32.853-14.709-32.853-32.853s14.709-32.853 32.853-32.853v0zM640 770.133h101.547v-101.547h-101.547zM905.813 480.427h-484.267v37.547c0.003 0.128 0.005 0.28 0.005 0.431 0 10.691-8.548 19.386-19.183 19.622h-141.249c-0.001 0-0.003 0-0.005 0-10.84 0-19.627-8.787-19.627-19.627 0-0.15 0.002-0.3 0.005-0.449v0.022-37.547h-123.307c-1.122 0.136-2.421 0.213-3.738 0.213-18.144 0-32.853-14.709-32.853-32.853s14.709-32.853 32.853-32.853c1.317 0 2.616 0.078 3.893 0.228l-0.155-0.015h123.307v-37.973c0-10.84 8.787-19.627 19.627-19.627h141.227c10.654 0.239 19.2 8.933 19.2 19.622 0 0.002 0 0.003 0 0.005v0 37.973h484.267c1.122-0.136 2.421-0.213 3.738-0.213 18.144 0 32.853 14.709 32.853 32.853s-14.709 32.853-32.853 32.853c-1.317 0-2.616-0.078-3.893-0.228l0.155 0.015zM384 397.227h-103.253v101.547h103.253zM905.813 209.493h-303.36v37.547c0 0.001 0 0.003 0 0.005 0 10.604-8.596 19.2-19.2 19.2-0.15 0-0.3-0.002-0.449-0.005h-140.778c-0.001 0-0.003 0-0.005 0-10.689 0-19.383-8.546-19.622-19.178v-37.569h-304.213c-18.144 0-32.853-14.709-32.853-32.853s14.709-32.853 32.853-32.853h303.36v-37.12c0.233-10.744 8.882-19.393 19.605-19.626h140.822c10.84 0 19.627 8.787 19.627 19.627v0 37.547h303.787c18.144 0 32.853 14.709 32.853 32.853s-14.709 32.853-32.853 32.853v0zM564.48 124.16h-103.253v103.68h101.973z" />
|
||||
<glyph unicode="" glyph-name="Mobile-Menu" d="M938.667 746.667h-853.333c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h853.333c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0zM796.587 490.667h-711.253c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h711.253c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0zM654.080 234.667h-568.747c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h568.747c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0z" />
|
||||
</font></defs></svg>
|
После Ширина: | Высота: | Размер: 2.6 KiB |
|
@ -0,0 +1,59 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>Generated by IcoMoon</metadata>
|
||||
<defs>
|
||||
<font id="Controls" horiz-adv-x="1024">
|
||||
<font-face units-per-em="1024" ascent="960" descent="-64" />
|
||||
<missing-glyph horiz-adv-x="1024" />
|
||||
<glyph unicode=" " horiz-adv-x="512" d="" />
|
||||
<glyph unicode="" glyph-name="Accordion" d="M981.333 892.16h-938.667c-17.673 0-32-14.327-32-32v0-277.333c0-17.673 14.327-32 32-32v0h938.667c17.673 0 32 14.327 32 32v0 277.333c0 17.673-14.327 32-32 32v0zM949.333 614.827h-874.24v213.333h873.813zM893.44 757.76h-142.080l70.827-72.533 71.253 72.533zM100.267 762.88h423.68v-85.333h-423.68v85.333zM981.333 513.28h-938.667c-17.673 0-32-14.327-32-32v0-445.44c0-17.673 14.327-32 32-32v0h938.667c17.673 0 32 14.327 32 32v0 445.44c0 17.673-14.327 32-32 32v0zM949.333 67.84h-874.24v380.16h873.813zM822.187 377.173l-70.827-72.107h142.080l-71.253 72.107zM100.267 384h423.68v-85.333h-423.68v85.333zM100.267 217.173h793.173v-85.333h-793.173v85.333z" />
|
||||
<glyph unicode="" glyph-name="API-Configuration" d="M760.747 428.8c1.584 11.494 2.513 24.815 2.56 38.344v0.056c-0.047 13.585-0.976 26.906-2.732 39.966l0.172-1.566 82.347 64.427c4.497 3.627 7.35 9.137 7.35 15.313 0 3.632-0.987 7.034-2.707 9.952l0.050-0.092-79.787 135.253c-3.46 5.895-9.767 9.79-16.984 9.79-2.483 0-4.858-0.461-7.044-1.302l0.134 0.045-95.573-39.253c-19.087 14.944-40.878 27.83-64.255 37.696l-1.878 0.704-14.933 103.68c-1.306 9.446-9.327 16.641-19.029 16.641-0.060 0-0.12 0-0.181-0.001h-156.151c-0.051 0-0.111 0.001-0.171 0.001-9.701 0-17.722-7.195-19.017-16.54l-0.011-0.101-14.933-103.68c-25.248-10.735-47.023-23.608-66.823-38.913l0.69 0.513-97.28 39.253c-2.102 0.861-4.543 1.361-7.099 1.361-7.188 0-13.453-3.95-16.744-9.798l-0.050-0.096-78.080-135.253c-1.751-2.84-2.788-6.281-2.788-9.964 0-6.172 2.912-11.664 7.438-15.176l0.044-0.033 82.347-64.427c-1.569-11.479-2.497-24.799-2.56-38.325v-0.075c0.063-13.601 0.991-26.921 2.733-39.985l-0.173 1.585-82.347-66.133c-4.497-3.627-7.35-9.137-7.35-15.313 0-3.632 0.987-7.034 2.707-9.952l-0.050 0.092 78.080-133.547c3.46-5.895 9.767-9.79 16.984-9.79 2.483 0 4.858 0.461 7.044 1.302l-0.134-0.045 97.28 39.253c19.087-14.944 40.878-27.83 64.255-37.696l1.878-0.704 14.933-103.68c1.306-9.446 9.327-16.641 19.029-16.641 0.060 0 0.12 0 0.181 0.001h156.578c0.051 0 0.111-0.001 0.171-0.001 9.701 0 17.722 7.195 19.017 16.54l0.011 0.101 14.933 103.68c25.083 10.767 46.714 23.634 66.384 38.906l-0.678-0.506 97.28-39.253c2.102-0.861 4.543-1.361 7.099-1.361 7.188 0 13.453 3.95 16.744 9.798l0.050 0.096 78.080 135.253c1.67 2.826 2.657 6.228 2.657 9.86 0 6.176-2.853 11.686-7.312 15.284l-0.038 0.029zM469.333 330.24c-75.641 0-136.96 61.319-136.96 136.96s61.319 136.96 136.96 136.96c75.641 0 136.96-61.319 136.96-136.96v0c0-75.641-61.319-136.96-136.96-136.96v0z" />
|
||||
<glyph unicode="" glyph-name="API" d="M685.653 595.627l-113.493 110.933-302.080-295.68v-110.933h113.92zM775.253 680.96c5.757 5.318 9.35 12.906 9.35 21.333s-3.593 16.015-9.33 21.315l-0.020 0.018-70.827 70.4c-5.518 5.331-13.042 8.616-21.333 8.616s-15.816-3.285-21.342-8.624l0.009 0.008-58.88-58.027 113.493-110.933zM149.333 211.627h725.333v-118.187h-725.333v118.187z" />
|
||||
<glyph unicode="" glyph-name="Autocomplete" d="M983.893 436.053h-943.787c-17.673 0-32 14.327-32 32v0 278.613c0 17.673 14.327 32 32 32v0h943.787c17.673 0 32-14.327 32-32v0-277.333c0.016-0.382 0.026-0.83 0.026-1.28 0-17.673-14.327-32-32-32-0.009 0-0.018 0-0.027 0h0.001zM72.107 500.053h879.787v213.333h-879.787zM87.893 648.107h341.333v-85.333h-341.333v85.333zM981.333 366.080v-226.133h-951.040v226.133h951.040zM1002.667 387.413h-993.707v-268.8h993.28v268.8z" />
|
||||
<glyph unicode="" glyph-name="Button" d="M987.733 202.667h-951.467c-17.673 0-32 14.327-32 32v0 426.667c0 17.673 14.327 32 32 32v0h951.467c17.673 0 32-14.327 32-32v0-426.667c0-17.673-14.327-32-32-32v0zM68.267 266.667h887.467v362.667h-887.467zM206.507 551.68h610.56c23.564 0 42.667-19.103 42.667-42.667v-122.453c0-23.564-19.103-42.667-42.667-42.667h-610.56c-23.564 0-42.667 19.103-42.667 42.667v122.453c0 23.564 19.103 42.667 42.667 42.667z" />
|
||||
<glyph unicode="" glyph-name="Calendar" d="M780.8 755.2h-38.4v76.8h-76.8v-76.8h-307.2v76.8h-76.8v-76.8h-38.4c-42.318-0.241-76.559-34.482-76.8-76.777v-537.623c0.241-42.318 34.482-76.559 76.777-76.8h537.623c42.318 0.241 76.559 34.482 76.8 76.777v537.623c-0.241 42.318-34.482 76.559-76.777 76.8h-0.023zM780.8 140.8h-537.6v422.4h537.6zM339.2 505.6h150.613v-115.2h-150.613v115.2zM534.187 505.6h150.613v-115.2h-150.613v115.2zM339.2 323.413h150.613v-115.2h-150.613v115.2zM534.187 323.413h150.613v-115.2h-150.613v115.2z" />
|
||||
<glyph unicode="" glyph-name="Chart" d="M822.187 758.187h-124.16c-17.202 0-31.147-13.945-31.147-31.147v-558.507c0-17.202 13.945-31.147 31.147-31.147v0h124.16c17.202 0 31.147 13.945 31.147 31.147v0 558.933c-0.241 17.017-14.092 30.72-31.144 30.72-0.001 0-0.002 0-0.003 0v0zM791.040 199.68h-61.867v496.64h61.867zM573.867 603.307h-123.733c-17.202 0-31.147-13.945-31.147-31.147v0-403.2c0-17.202 13.945-31.147 31.147-31.147v0h124.16c17.202 0 31.147 13.945 31.147 31.147v403.2c0 0.001 0 0.002 0 0.003 0 17.202-13.945 31.147-31.147 31.147-0.15 0-0.3-0.001-0.449-0.003h0.023zM542.72 200.107h-61.867v341.333h61.867zM325.973 448h-124.16c-17.202 0-31.147-13.945-31.147-31.147v0-248.32c0-17.202 13.945-31.147 31.147-31.147h124.16c17.202 0 31.147 13.945 31.147 31.147v0 248.32c0 17.202-13.945 31.147-31.147 31.147v0zM294.827 199.68h-62.293v186.453h62.293z" />
|
||||
<glyph unicode="" glyph-name="Checkbox" d="M810.667 832h-597.333c-47.128 0-85.333-38.205-85.333-85.333v0-597.333c0-47.128 38.205-85.333 85.333-85.333v0h597.333c47.128 0 85.333 38.205 85.333 85.333v0 597.333c0 47.128-38.205 85.333-85.333 85.333v0zM753.92 570.88l-275.2-322.56c-10.829-12.773-26.866-20.844-44.789-20.907h-0.011c-17.934 0.063-33.971 8.133-44.729 20.821l-0.071 0.085-119.467 141.653c-8.601 10.19-13.828 23.471-13.828 37.973 0 32.615 26.44 59.054 59.054 59.054 18.113 0 34.321-8.155 45.154-20.993l0.073-0.088 73.813-87.893 229.973 269.653c10.918 12.743 27.029 20.767 45.013 20.767 32.677 0 59.167-26.49 59.167-59.167 0-14.693-5.355-28.134-14.221-38.48l0.067 0.080z" />
|
||||
<glyph unicode="" glyph-name="Circular-Gauge" d="M512 733.013c-259.206 0-469.333-210.128-469.333-469.333v0c0-13.227 0-27.733 0-42.667 0-32.519 26.361-58.88 58.88-58.88v0h194.133v76.8h-177.493c0 8.533 0 16.213 0 23.893 0 216.79 175.743 392.533 392.533 392.533s392.533-175.743 392.533-392.533v0c0-7.68 0-15.36 0-24.32-17.067 0-42.667 0-74.24 0h-103.68v-76.8h194.56c0.644-0.025 1.4-0.039 2.159-0.039 32.754 0 59.307 26.552 59.307 59.307 0 0.614-0.009 1.226-0.028 1.835l0.002-0.089c0 14.933 0 28.16 0 42.667-0.97 258.471-210.725 467.627-469.33 467.627-0.001 0-0.002 0-0.003 0h-0.001zM384 538.027l76.8-346.027c1.945-8.259 5.185-15.533 9.536-21.996l-0.15 0.236c12.060-15.297 30.59-25.027 51.393-25.027 36.053 0 65.28 29.227 65.28 65.28 0 11.7-3.078 22.681-8.468 32.177l0.169-0.323z" />
|
||||
<glyph unicode="" glyph-name="Code" d="M341.333 704l-256-256 256-256 59.733 59.733-196.267 196.267 196.267 196.267-59.733 59.733zM682.667 704l-59.733-59.733 196.267-196.267-196.267-196.267 59.733-59.733 256 256-256 256z" />
|
||||
<glyph unicode="" glyph-name="Combobox" d="M981.333 436.053h-938.667c-17.673 0-32 14.327-32 32v0 278.613c0.706 17.114 14.751 30.72 31.974 30.72 0.009 0 0.018 0 0.027 0h938.665c17.673 0 32-14.327 32-32v0-277.333c0-17.673-14.327-32-32-32v0zM75.093 500.053h873.813v213.333h-873.813zM822.187 570.453l-70.827 72.533h142.080l-71.253-72.533zM100.267 648.107h588.373v-85.333h-588.373v85.333zM983.893 366.080v-226.133h-950.613v226.133h950.613zM1005.227 387.413h-993.28v-268.8h993.28v268.8z" />
|
||||
<glyph unicode="" glyph-name="Context-menu" d="M241.493 572.587h512c11.782 0 21.333 9.551 21.333 21.333s-9.551 21.333-21.333 21.333v0h-512c-11.782 0-21.333-9.551-21.333-21.333s9.551-21.333 21.333-21.333v0zM241.493 424.96h512c11.782 0 21.333 9.551 21.333 21.333s-9.551 21.333-21.333 21.333v0h-512c-11.782 0-21.333-9.551-21.333-21.333s9.551-21.333 21.333-21.333v0zM241.493 277.333h512c11.782 0 21.333 9.551 21.333 21.333s-9.551 21.333-21.333 21.333v0h-512c-11.782 0-21.333-9.551-21.333-21.333s9.551-21.333 21.333-21.333v0zM957.44 797.867h-890.88c-17.673 0-32-14.327-32-32v0-635.733c0-17.673 14.327-32 32-32v0h890.88c17.673 0 32 14.327 32 32v0 635.733c0 17.673-14.327 32-32 32v0zM925.44 162.133h-826.88v571.733h826.88z" />
|
||||
<glyph unicode="" glyph-name="Copy-to-clipboard" d="M669.013 762.027h-418.987v-488.533h-69.547v488.533c0 0 0 0.001 0 0.001 0 38.495 31.085 69.73 69.547 69.972h418.987zM773.973 692.48v0c38.645 0 69.973-31.328 69.973-69.973v-488.533c0-38.645-31.328-69.973-69.973-69.973h-384c-38.645 0-69.973 31.328-69.973 69.973v488.533c0 0 0 0.001 0 0.001 0 38.495 31.085 69.73 69.547 69.972h384zM389.547 133.973h384v488.533h-384z" />
|
||||
<glyph unicode="" glyph-name="Currency" d="M512 874.667c-235.641 0-426.667-191.025-426.667-426.667s191.025-426.667 426.667-426.667c235.641 0 426.667 191.025 426.667 426.667v0c0 235.641-191.025 426.667-426.667 426.667v0zM572.16 188.16v-81.493h-113.92v82.347c-74.965 9.152-133.342 69.431-139.483 144.499l-0.037 0.568h85.333c4.267-42.667 34.987-79.787 113.067-79.787s102.4 42.667 102.4 67.84c0 35.413-18.773 68.693-113.92 91.307-105.813 25.6-178.347 69.12-178.347 156.587-1.707 73.387 56.747 121.173 130.987 136.96v82.347h113.92v-85.333c68.668-13.986 119.884-73.091 121.597-144.458l0.003-0.182h-85.333c0 47.36-27.307 79.787-94.72 79.787s-102.4-29.013-102.4-69.973 27.733-59.307 113.92-81.493 178.347-59.307 178.347-166.827c1.28-75.947-57.173-118.613-131.413-132.693z" />
|
||||
<glyph unicode="" glyph-name="date-range-picker" d="M780.8 755.2h-38.4v76.8h-76.8v-76.8h-307.2v76.8h-76.8v-76.8h-38.4c-42.318-0.241-76.559-34.482-76.8-76.777v-537.623c0.241-42.318 34.482-76.559 76.777-76.8h537.623c42.318 0.241 76.559 34.482 76.8 76.777v537.623c-0.241 42.318-34.482 76.559-76.777 76.8h-0.023zM780.8 140.8h-537.6v422.4h537.6v-422.4zM300.8 511.147h422.827v-105.813h-422.827v105.813zM300.8 340.48h211.2v-105.813h-211.2v105.813z" />
|
||||
<glyph unicode="" glyph-name="Datepicker" d="M780.8 755.2h-38.4v76.8h-76.8v-76.8h-307.2v76.8h-76.8v-76.8h-38.4c-42.318-0.241-76.559-34.482-76.8-76.777v-537.623c0.241-42.318 34.482-76.559 76.777-76.8h537.623c42.318 0.241 76.559 34.482 76.8 76.777v537.623c-0.241 42.318-34.482 76.559-76.777 76.8h-0.023zM780.8 140.8h-537.6v422.4h537.6v-422.4zM300.8 511.147h170.667v-170.667h-170.667v170.667z" />
|
||||
<glyph unicode="" glyph-name="Demo" d="M810.667 832h-597.333c-47.128 0-85.333-38.205-85.333-85.333v0-597.333c0-47.128 38.205-85.333 85.333-85.333v0h597.333c47.128 0 85.333 38.205 85.333 85.333v0 597.333c0 47.128-38.205 85.333-85.333 85.333v0zM384 234.667h-85.333v298.667h85.333zM554.667 234.667h-85.333v426.667h85.333zM725.333 234.667h-85.333v170.667h85.333z" />
|
||||
<glyph unicode="" glyph-name="Dialog" d="M938.667 853.333h-853.333c-11.782 0-21.333-9.551-21.333-21.333v0-768c0-11.782 9.551-21.333 21.333-21.333v0h853.333c11.782 0 21.333 9.551 21.333 21.333v0 768c0 11.782-9.551 21.333-21.333 21.333v0zM917.333 810.667v-356.267h-810.667v356.267zM106.667 433.067h394.667v-347.733h-394.667zM522.667 85.333v347.733h394.667v-347.733zM413.013 353.28c-2.87 2.944-6.875 4.769-11.307 4.769s-8.436-1.826-11.303-4.766l-0.003-0.003-134.4-157.867-49.067 60.16c-2.935 3.469-7.292 5.657-12.16 5.657-8.78 0-15.897-7.117-15.897-15.897 0-3.912 1.413-7.494 3.757-10.263l-0.019 0.023 62.72-74.667c2.988-3.408 7.349-5.547 12.211-5.547 0.057 0 0.114 0 0.171 0.001h-1.716c0.048-0.001 0.105-0.001 0.162-0.001 4.862 0 9.224 2.14 12.195 5.529l0.016 0.019 145.493 170.667c2.57 2.799 4.144 6.546 4.144 10.662 0 4.542-1.918 8.637-4.989 11.517l-0.009 0.008zM816.213 352.427c-2.917 2.841-6.907 4.593-11.307 4.593s-8.389-1.752-11.31-4.596l0.004 0.003-73.813-75.093-73.813 73.813c-2.976 4.139-7.778 6.803-13.203 6.803-8.954 0-16.213-7.259-16.213-16.213 0-5.424 2.664-10.227 6.755-13.17l0.048-0.033 73.813-73.813-74.24-72.96c-1.882-2.614-3.011-5.881-3.011-9.411 0-8.954 7.259-16.213 16.213-16.213 3.53 0 6.797 1.128 9.459 3.044l-0.048-0.033 74.24 75.52 73.813-73.813c2.976-4.139 7.778-6.803 13.203-6.803 8.954 0 16.213 7.259 16.213 16.213 0 5.424-2.664 10.227-6.755 13.17l-0.048 0.033-73.813 72.533 73.813 73.813c2.841 2.917 4.593 6.907 4.593 11.307s-1.752 8.389-4.596 11.31l0.003-0.004zM220.587 675.413h590.080c11.782 0 21.333 9.551 21.333 21.333s-9.551 21.333-21.333 21.333v0h-590.080c-11.782 0-21.333-9.551-21.333-21.333s9.551-21.333 21.333-21.333v0zM220.587 555.947h344.747c11.782 0 21.333 9.551 21.333 21.333s-9.551 21.333-21.333 21.333v0h-344.747c-11.782 0-21.333-9.551-21.333-21.333s9.551-21.333 21.333-21.333v0z" />
|
||||
<glyph unicode="" glyph-name="Dropdown" d="M321.28 576l190.72-256 190.72 256h-381.44z" />
|
||||
<glyph unicode="" glyph-name="Dropdownlist" d="M977.493 436.053h-930.987c-17.673 0-32 14.327-32 32v0 278.613c0 17.673 14.327 32 32 32v0h930.987c17.673 0 32-14.327 32-32v0-277.333c0.016-0.382 0.026-0.83 0.026-1.28 0-17.673-14.327-32-32-32-0.009 0-0.018 0-0.027 0h0.001zM78.507 500.053h866.987v213.333h-866.987zM987.307 366.080v-226.133h-950.613v226.133h950.613zM1008.64 387.413h-993.28v-268.8h993.28v268.8zM819.2 570.453l-71.253 72.533h142.080l-70.827-72.533z" />
|
||||
<glyph unicode="" glyph-name="Editinplunkr" d="M192 261.12v-133.12h133.12l393.387 393.387-133.12 133.12-393.387-393.387zM821.76 624.213c6.36 6.4 10.292 15.221 10.292 24.96s-3.931 18.56-10.293 24.962l-85.331 85.331c-6.4 6.36-15.221 10.292-24.96 10.292s-18.56-3.931-24.962-10.293l0.002 0.002-63.147-66.987 133.547-133.547z" />
|
||||
<glyph unicode="" glyph-name="Form-validator" d="M621.653 759.040h-581.12c-17.673 0-32-14.327-32-32v0-213.333c0-17.673 14.327-32 32-32v0h581.12c17.673 0 32 14.327 32 32v0 213.333c0 17.673-14.327 32-32 32v0zM589.653 545.707h-517.12v149.333h517.12zM621.653 414.293h-581.12c-17.673 0-32-14.327-32-32v0-213.333c0-17.673 14.327-32 32-32v0h581.12c17.673 0 32 14.327 32 32v0 213.333c0 17.673-14.327 32-32 32v0zM589.653 200.96h-517.12v149.333h517.12zM814.507 512.427c5.855-6.995 14.56-11.435 24.306-11.52h0.014c0.028 0 0.061 0 0.094 0 9.663 0 18.325 4.283 24.193 11.054l0.034 0.040 148.907 174.933c4.987 5.663 8.031 13.143 8.031 21.333 0 17.867-14.484 32.351-32.351 32.351-9.676 0-18.361-4.248-24.289-10.982l-0.031-0.036-124.16-147.2-40.107 47.787c-5.993 6.865-14.759 11.178-24.533 11.178-17.956 0-32.511-14.556-32.511-32.511 0-8.182 3.022-15.657 8.011-21.372l-0.033 0.038zM926.293 277.333l85.333 85.333c7.537 5.911 12.335 15.017 12.335 25.244 0 17.673-14.327 32-32 32-11.196 0-21.048-5.749-26.767-14.457l-0.075-0.121-85.333-85.333-85.333 85.333c-5.699 5.321-13.376 8.588-21.815 8.588-17.673 0-32-14.327-32-32 0-8.44 3.267-16.116 8.606-21.834l-0.017 0.019 85.333-85.333-85.333-85.333c-6.274-5.858-10.185-14.178-10.185-23.412 0-17.673 14.327-32 32-32 9.234 0 17.554 3.911 23.394 10.166l0.017 0.019 85.333 85.333 85.333-85.333c5.882-5.576 13.847-9.004 22.613-9.004 18.169 0 32.898 14.729 32.898 32.898 0 9.403-3.945 17.884-10.269 23.879l-0.015 0.014z" />
|
||||
<glyph unicode="" glyph-name="Grid" d="M170.667 789.333v-682.667h682.667v682.667zM472.747 168.533h-232.533v128h232.533zM472.747 352.427h-232.533v128h232.533zM472.747 536.32h-232.533v128h232.533zM776.96 168.533h-239.36v128h239.36zM776.96 352.427h-239.36v128h239.36zM776.96 536.32h-239.36v128h239.36z" />
|
||||
<glyph unicode="" glyph-name="Hamburger" d="M128 277.333h768v-85.333h-768v85.333zM128 490.667h768v-85.333h-768v85.333zM128 704h768v-85.333h-768v85.333z" />
|
||||
<glyph unicode="" glyph-name="Home" d="M433.92 115.627v234.667h156.16v-234.667h195.84v312.747h117.333l-391.253 352-391.253-352h117.333v-312.747h195.84z" />
|
||||
<glyph unicode="" glyph-name="Linear-gauge" d="M682.667 326.4l-160 298.667h320l-160-298.667zM981.333 526.933h-167.253l-45.653-85.333h170.667v-128h-239.36l-17.067-32-17.067 32h-580.267v128h512l-45.653 85.333h-509.013c-23.564 0-42.667-19.103-42.667-42.667v0-213.333c0-23.564 19.103-42.667 42.667-42.667v0h938.667c23.564 0 42.667 19.103 42.667 42.667v0 213.333c0 23.564-19.103 42.667-42.667 42.667v0z" />
|
||||
<glyph unicode="" glyph-name="Listview" d="M418.56 789.333v-60.587h498.773v60.587zM106.667 853.333v-186.88h186.88v186.88zM170.667 789.333v-60.587h60.587v60.587zM106.667 541.44v-186.88h186.88v186.88zM170.667 479.147v-62.293h60.587v62.293zM420.267 479.147v-62.293h497.067v62.293zM106.667 229.547v-186.88h186.88v186.88zM170.667 167.253v-60.587h60.587v60.587zM420.267 167.253v-60.587h497.067v60.587z" />
|
||||
<glyph unicode="" glyph-name="Localization" d="M512 874.667c-235.641 0-426.667-191.025-426.667-426.667s191.025-426.667 426.667-426.667c235.641 0 426.667 191.025 426.667 426.667v0c0 235.641-191.025 426.667-426.667 426.667v0zM807.68 618.667h-125.013c-14.76 57.735-34.919 108.279-60.616 155.367l1.736-3.474c78.598-27.913 142.316-81.406 182.594-150.278l0.873-1.615zM512 789.333c34.171-48.97 61.956-105.654 80.383-166.409l1.11-4.258h-162.987c19.56 65.011 47.344 121.693 82.794 172.641l-1.3-1.974zM181.76 362.667c-7.019 25.601-11.053 54.996-11.053 85.333s4.033 59.733 11.593 87.679l-0.54-2.345h144.213c-3.525-25.38-5.687-54.959-5.971-84.987l-0.003-0.347c0.287-30.374 2.449-59.953 6.376-88.971l-0.403 3.638zM216.747 277.333h124.587c14.832-57.754 34.986-108.292 60.631-155.409l-1.751 3.516c-78.598 27.913-142.316 81.406-182.594 150.278l-0.873 1.615zM341.333 618.667h-124.587c41.447 70.693 105.637 124.242 182.355 151.162l2.392 0.731c-24.319-43.604-44.888-94.108-59.094-147.212l-1.066-4.681zM512 106.667c-34.149 48.974-61.933 105.656-80.38 166.4l-1.114 4.266h162.987c-19.537-65.012-47.323-121.696-82.789-172.633l1.296 1.966zM611.84 362.667h-199.68c-4.018 25.4-6.488 54.931-6.824 84.974l-0.003 0.36c0.321 30.385 2.791 59.917 7.267 88.785l-0.441-3.452h199.68c4.014-25.397 6.483-54.927 6.823-84.969l0.003-0.364c-0.363-30.424-2.832-59.954-7.269-88.834l0.443 3.501zM622.507 125.44c24.387 43.616 44.96 94.127 59.11 147.257l1.050 4.636h128c-42.232-71.252-107.687-124.949-185.752-151.191l-2.408-0.702zM698.027 362.667c3.525 25.38 5.687 54.959 5.971 84.987l0.003 0.347c-0.287 30.374-2.449 59.953-6.376 88.971l0.403-3.638h144.213c7.047-25.599 11.097-54.993 11.097-85.333s-4.050-59.734-11.638-87.671l0.541 2.338z" />
|
||||
<glyph unicode="" glyph-name="Maskedtextbox" d="M987.733 481.707h-951.467c-17.673 0-32 14.327-32 32v0 213.333c0 17.673 14.327 32 32 32v0h951.467c17.673 0 32-14.327 32-32v0-213.333c0-17.673-14.327-32-32-32v0zM68.267 545.707h887.467v149.333h-887.467zM987.733 136.96h-951.467c-17.673 0-32 14.327-32 32v0 213.333c0 17.673 14.327 32 32 32v0h951.467c17.673 0 32-14.327 32-32v0-213.333c0-17.673-14.327-32-32-32v0zM68.267 200.96h887.467v149.333h-887.467zM224.853 599.040h-89.173c-11.782 0-21.333 9.551-21.333 21.333s9.551 21.333 21.333 21.333v0h89.173c11.782 0 21.333-9.551 21.333-21.333s-9.551-21.333-21.333-21.333v0zM857.6 599.040h-138.667c-11.782 0-21.333 9.551-21.333 21.333s9.551 21.333 21.333 21.333v0h138.667c11.782 0 21.333-9.551 21.333-21.333s-9.551-21.333-21.333-21.333v0zM626.773 599.040h-313.173c-11.782 0-21.333 9.551-21.333 21.333s9.551 21.333 21.333 21.333v0h313.173c11.782 0 21.333-9.551 21.333-21.333s-9.551-21.333-21.333-21.333v0zM224.853 254.293h-89.173c-11.782 0-21.333 9.551-21.333 21.333s9.551 21.333 21.333 21.333v0h89.173c11.782 0 21.333-9.551 21.333-21.333s-9.551-21.333-21.333-21.333v0zM857.6 254.293h-138.667c-11.782 0-21.333 9.551-21.333 21.333s9.551 21.333 21.333 21.333v0h138.667c11.782 0 21.333-9.551 21.333-21.333s-9.551-21.333-21.333-21.333v0zM626.773 254.293h-313.173c-11.782 0-21.333 9.551-21.333 21.333s9.551 21.333 21.333 21.333v0h313.173c11.782 0 21.333-9.551 21.333-21.333s-9.551-21.333-21.333-21.333v0z" />
|
||||
<glyph unicode="" glyph-name="Multiselect" d="M986.88 695.893h-949.76c-17.673 0-32-14.327-32-32v0-431.787c0-17.673 14.327-32 32-32v0h949.76c17.673 0 32 14.327 32 32v0 431.787c0 17.673-14.327 32-32 32v0zM954.88 264.533h-885.76v367.36h885.76zM127.147 566.613h185.173v-85.333h-185.173v85.333zM127.147 413.44h413.44v-85.333h-413.44v85.333zM581.547 413.44h308.48v-85.333h-308.48v85.333zM360.533 566.613h221.013v-85.333h-221.013v85.333zM635.307 566.613h255.147v-85.333h-255.147v85.333z" />
|
||||
<glyph unicode="" glyph-name="Next" d="M298.667 186.88l263.68 261.12-263.68 261.12 81.067 80.213 345.6-341.333-345.6-341.333-81.067 80.213z" />
|
||||
<glyph unicode="" glyph-name="Numeric-Textbox" d="M987.733 160h-951.467c-17.673 0-32 14.327-32 32v0 512c0 17.673 14.327 32 32 32v0h951.467c17.673 0 32-14.327 32-32v0-512c0-17.673-14.327-32-32-32v0zM68.267 224h887.467v448h-887.467zM803.413 276.053l-96 115.627h191.573l-95.573-115.627zM801.28 619.947l96-115.627h-191.573l95.573 115.627zM132.693 512h381.867v-128h-381.867v128z" />
|
||||
<glyph unicode="" glyph-name="Palette" d="M512 832c-212.077 0-384-171.923-384-384s171.923-384 384-384v0c0.013 0 0.027 0 0.042 0 35.346 0 64 28.654 64 64 0 16.623-6.337 31.765-16.727 43.143l0.045-0.050c-10.202 11.235-16.448 26.223-16.448 42.67 0 35.111 28.463 63.573 63.573 63.573 0.232 0 0.464-0.001 0.696-0.004h75.485c117.821 0 213.333 95.513 213.333 213.333v0c0 188.587-170.667 341.333-384 341.333zM277.333 448c-35.346 0-64 28.654-64 64s28.654 64 64 64c35.346 0 64-28.654 64-64v0c0-35.346-28.654-64-64-64v0zM405.333 618.667c-35.346 0-64 28.654-64 64s28.654 64 64 64c35.346 0 64-28.654 64-64v0c0-35.346-28.654-64-64-64v0zM618.667 618.667c-35.346 0-64 28.654-64 64s28.654 64 64 64c35.346 0 64-28.654 64-64v0c0-35.346-28.654-64-64-64v0zM746.667 448c-35.346 0-64 28.654-64 64s28.654 64 64 64c35.346 0 64-28.654 64-64v0c0-35.346-28.654-64-64-64v0z" />
|
||||
<glyph unicode="" glyph-name="Popout" d="M777.387 182.613h-530.773v530.773h265.387v75.947h-265.387c-41.944 0-75.947-34.002-75.947-75.947v0-530.773c0-41.944 34.002-75.947 75.947-75.947v0h530.773c41.944 0 75.947 34.002 75.947 75.947v0 265.387h-75.947zM587.947 789.333v-75.947h136.107l-372.907-372.907 53.333-53.333 372.907 372.907v-136.107h75.947v265.387h-265.387z" />
|
||||
<glyph unicode="" glyph-name="Popup" d="M957.44 797.867h-890.88c-17.673 0-32-14.327-32-32v0-635.733c0-17.673 14.327-32 32-32v0h890.88c17.673 0 32 14.327 32 32v0 635.733c0 17.673-14.327 32-32 32v0zM925.44 162.133h-826.88v571.733h826.88zM597.333 448c3.867-3.898 9.225-6.31 15.147-6.31s11.28 2.413 15.145 6.309l80.641 80.641 78.933-80.64c3.876-3.876 9.232-6.274 15.147-6.274 11.83 0 21.421 9.59 21.421 21.421 0 5.915-2.398 11.27-6.274 15.147v0l-81.067 78.507 80.64 80.64c3.876 3.876 6.274 9.232 6.274 15.147 0 11.83-9.59 21.421-21.421 21.421-5.915 0-11.27-2.398-15.147-6.274v0l-80.213-80.64-80.64 80.64c-3.876 3.876-9.232 6.274-15.147 6.274-11.83 0-21.421-9.59-21.421-21.421 0-5.915 2.398-11.27 6.274-15.147l80.64-80.64-78.933-80.64c-3.295-3.736-5.306-8.673-5.306-14.080s2.011-10.344 5.326-14.103l-0.020 0.023z" />
|
||||
<glyph unicode="" glyph-name="Previous" d="M725.333 186.88l-263.68 261.12 263.68 261.12-81.067 80.213-345.6-341.333 345.6-341.333 81.067 80.213z" />
|
||||
<glyph unicode="" glyph-name="Radio-button" d="M512 874.667c-235.641 0-426.667-191.025-426.667-426.667s191.025-426.667 426.667-426.667c235.641 0 426.667 191.025 426.667 426.667v0c0 235.641-191.025 426.667-426.667 426.667v0zM512 106.667c-188.513 0-341.333 152.82-341.333 341.333s152.82 341.333 341.333 341.333c188.513 0 341.333-152.82 341.333-341.333v0c0-188.513-152.82-341.333-341.333-341.333v0zM723.627 448c0-116.878-94.748-211.627-211.627-211.627s-211.627 94.748-211.627 211.627c0 116.878 94.748 211.627 211.627 211.627s211.627-94.748 211.627-211.627z" />
|
||||
<glyph unicode="" glyph-name="Responsive" d="M170.667 704h768v85.333h-768c-47.128 0-85.333-38.205-85.333-85.333v0-469.333h-85.333v-128h597.333v128h-426.667zM981.333 618.667h-256c-23.564 0-42.667-19.103-42.667-42.667v0-426.667c0-23.564 19.103-42.667 42.667-42.667v0h256c23.564 0 42.667 19.103 42.667 42.667v0 426.667c0 23.564-19.103 42.667-42.667 42.667v0zM938.667 234.667h-170.667v298.667h170.667z" />
|
||||
<glyph unicode="" glyph-name="Search" d="M672.427 351.573h-32.427l-13.227 11.093c41.633 48.289 66.989 111.635 66.989 180.904 0 153.403-124.357 277.76-277.76 277.76s-277.76-124.357-277.76-277.76c0-153.403 124.357-277.76 277.76-277.76 69.269 0 132.615 25.356 181.264 67.293l-0.36-0.304 11.52-11.947v-33.707l213.333-213.333 63.573 63.573zM416.427 351.573c-106.039 0-192 85.961-192 192s85.961 192 192 192c106.039 0 192-85.961 192-192v0c0-0.127 0-0.277 0-0.427 0-105.803-85.77-191.573-191.573-191.573-0.15 0-0.3 0-0.45 0.001h0.023z" />
|
||||
<glyph unicode="" glyph-name="Selection" d="M387.84 299.093l-162.987 160.427-54.187-53.333 217.173-214.187 465.493 458.667-54.187 53.333-411.307-404.907z" />
|
||||
<glyph unicode="" glyph-name="Settings-Preferences" d="M554.667 661.333c0-94.257-76.41-170.667-170.667-170.667s-170.667 76.41-170.667 170.667c0 94.257 76.41 170.667 170.667 170.667s170.667-76.41 170.667-170.667zM981.333 618.667c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0h-384c2.741-12.827 4.31-27.563 4.31-42.667s-1.569-29.84-4.554-44.056l0.244 1.389zM42.667 618.667h128c-2.686 12.827-4.224 27.567-4.224 42.667s1.538 29.839 4.466 44.072l-0.242-1.406h-128c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0zM981.333 277.333h-128c2.686-12.827 4.224-27.567 4.224-42.667s-1.538-29.839-4.466-44.072l0.242 1.406h128c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0zM42.667 277.333c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h384c-2.741 12.827-4.31 27.563-4.31 42.667s1.569 29.84 4.554 44.056l-0.244-1.389zM810.667 234.667c0-94.257-76.41-170.667-170.667-170.667s-170.667 76.41-170.667 170.667c0 94.257 76.41 170.667 170.667 170.667s170.667-76.41 170.667-170.667z" />
|
||||
<glyph unicode="" glyph-name="Slider" d="M653.653 618.667c-0.137 0-0.299 0.001-0.462 0.001-92.371 0-167.253-74.882-167.253-167.253 0-1.2 0.013-2.398 0.038-3.592l-0.003 0.178c2.143-94.428 78.974-170.213 173.609-170.667h0.044c0.137 0 0.299-0.001 0.462-0.001 92.371 0 167.253 74.882 167.253 167.253 0 1.2-0.013 2.398-0.038 3.592l0.003-0.178c-2.143 94.428-78.974 170.213-173.609 170.667h-0.044zM971.947 490.667h-106.667c2.792-12.826 4.391-27.56 4.391-42.667s-1.599-29.841-4.637-44.041l0.246 1.374h105.813c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0zM447.147 490.667h-395.093c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h396.373c-2.78 12.826-4.373 27.56-4.373 42.667s1.592 29.84 4.618 44.044l-0.246-1.377z" />
|
||||
<glyph unicode="" glyph-name="Tab" d="M163.84 435.627c0-11.782 9.551-21.333 21.333-21.333v0h615.253c11.782 0 21.333 9.551 21.333 21.333s-9.551 21.333-21.333 21.333v0h-615.253c-11.782 0-21.333-9.551-21.333-21.333v0zM697.173 309.333h-512c-11.782 0-21.333-9.551-21.333-21.333s9.551-21.333 21.333-21.333v0h512c11.782 0 21.333 9.551 21.333 21.333s-9.551 21.333-21.333 21.333v0zM957.44 614.827v119.040c0 23.564-19.103 42.667-42.667 42.667v0h-170.667c-23.564 0-42.667-19.103-42.667-42.667v0-118.613h-47.787v118.613c0 23.564-19.103 42.667-42.667 42.667v0h-170.667c-23.564 0-42.667-19.103-42.667-42.667v0-118.613h-61.867v139.52c0 17.673-14.327 32-32 32v0h-237.227c-17.673 0-32-14.327-32-32v0-635.307c0-17.673 14.327-32 32-32v0h890.88c17.673 0 32 14.327 32 32v0 463.36c0 17.673-14.327 32-32 32v0zM925.44 149.333h-826.88v573.867h174.080v-139.52c0-17.673 14.327-32 32-32v0h620.8z" />
|
||||
<glyph unicode="" glyph-name="Textboxes" d="M989.44 481.707h-954.88c-17.673 0-32 14.327-32 32v0 213.333c0 17.673 14.327 32 32 32v0h954.88c17.673 0 32-14.327 32-32v0-213.333c0-17.673-14.327-32-32-32v0zM66.56 545.707h890.88v149.333h-890.88zM989.44 136.96h-954.88c-17.673 0-32 14.327-32 32v0 213.333c0 17.673 14.327 32 32 32v0h954.88c17.673 0 32-14.327 32-32v0-213.333c0-17.673-14.327-32-32-32v0zM66.56 200.96h890.88v149.333h-890.88zM101.973 307.627h264.107v-64h-264.107v64zM101.973 652.373h524.8v-64h-524.8v64z" />
|
||||
<glyph unicode="" glyph-name="Timepicker" d="M657.067 354.987l-114.773 64.853v236.8c0 17.202-13.945 31.147-31.147 31.147s-31.147-13.945-31.147-31.147v0-256c-0.030-0.51-0.047-1.106-0.047-1.707s0.017-1.197 0.051-1.789l-0.004 0.082v-18.773h4.693l130.56-73.813c4.42-2.531 9.716-4.024 15.36-4.024 17.303 0 31.33 14.027 31.33 31.33 0 11.659-6.368 21.83-15.816 27.226l-0.154 0.081zM512 874.667c-235.641 0-426.667-191.025-426.667-426.667s191.025-426.667 426.667-426.667c235.641 0 426.667 191.025 426.667 426.667v0c0 235.641-191.025 426.667-426.667 426.667v0zM539.307 90.453v62.293h-54.613v-62.293c-168.46 13.295-303.456 140.995-327.866 304.806l-0.241 1.968h64.427v54.187h-67.84c2.175 186.935 146.792 339.412 330.26 354.052l1.26 0.081v-62.293h54.187v62.293c184.728-14.721 329.345-167.198 331.518-353.917l0.002-0.216h-64v-54.187h61.013c-24.65-165.779-159.647-293.479-326.856-306.694l-1.251-0.079z" />
|
||||
<glyph unicode="" glyph-name="Toolbar" d="M983.893 778.667h-943.787c-17.673 0-32-14.327-32-32v0-597.333c0-17.673 14.327-32 32-32v0h943.787c17.673 0 32 14.327 32 32v0 597.333c0 17.673-14.327 32-32 32v0zM951.893 181.333h-879.787v533.333h879.787zM165.547 666.88h170.667v-170.667h-170.667v170.667zM426.667 666.88h170.667v-170.667h-170.667v170.667zM688.213 666.88h170.667v-170.667h-170.667v170.667zM165.547 404.48h170.667v-170.667h-170.667v170.667zM426.667 404.48h170.667v-170.667h-170.667v170.667zM688.213 404.48h170.667v-170.667h-170.667v170.667z" />
|
||||
<glyph unicode="" glyph-name="Tooltip" d="M252.16 641.707h519.68c11.782 0 21.333 9.551 21.333 21.333s-9.551 21.333-21.333 21.333v0h-519.68c-11.782 0-21.333-9.551-21.333-21.333s9.551-21.333 21.333-21.333v0zM252.16 513.707h519.68c11.782 0 21.333 9.551 21.333 21.333s-9.551 21.333-21.333 21.333v0h-519.68c-11.782 0-21.333-9.551-21.333-21.333s9.551-21.333 21.333-21.333v0zM252.16 385.707h302.507c11.782 0 21.333 9.551 21.333 21.333s-9.551 21.333-21.333 21.333v0h-302.507c-11.782 0-21.333-9.551-21.333-21.333s9.551-21.333 21.333-21.333v0zM957.44 861.867h-890.88c-17.673 0-32-14.327-32-32v0-635.733c0-17.673 14.327-32 32-32v0h294.827l128-119.467c5.635-5.057 13.123-8.149 21.333-8.149s15.698 3.092 21.363 8.175l-0.030-0.026 125.013 119.040h298.667c17.673 0 32 14.327 32 32v0 636.16c0 0.014 0 0.030 0 0.046 0 17.073-13.37 31.023-30.211 31.951l-0.082 0.004zM925.44 226.133h-279.467c-8.622-0.006-16.445-3.42-22.196-8.969l0.010 0.009-111.787-107.093-116.053 107.52c-5.692 5.288-13.345 8.533-21.756 8.533-0.001 0-0.003 0-0.004 0h-275.626v571.733h826.88z" />
|
||||
<glyph unicode="" glyph-name="Tree-Down" d="M768 546.133l-256-256.427-256 256.427 60.16 60.16 195.84-195.84 195.84 195.84 60.16-60.16z" />
|
||||
<glyph unicode="" glyph-name="Treeview" d="M640 320v-64h-128v128h64v256h-256v-64h-128v128h64v192h-192v-192h64v-192h192v-128h128v-192h192v-192h320v320h-320z" />
|
||||
</font></defs></svg>
|
После Ширина: | Высота: | Размер: 30 KiB |
|
@ -0,0 +1,13 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>Generated by IcoMoon</metadata>
|
||||
<defs>
|
||||
<font id="icons" horiz-adv-x="1024">
|
||||
<font-face units-per-em="1024" ascent="960" descent="-64" />
|
||||
<missing-glyph horiz-adv-x="1024" />
|
||||
<glyph unicode=" " horiz-adv-x="512" d="" />
|
||||
<glyph unicode="ꦙ" glyph-name="Search" d="M672.427 351.573h-32.427l-13.227 11.093c41.633 48.289 66.989 111.635 66.989 180.904 0 153.403-124.357 277.76-277.76 277.76s-277.76-124.357-277.76-277.76c0-153.403 124.357-277.76 277.76-277.76 69.269 0 132.615 25.356 181.264 67.293l-0.36-0.304 11.52-11.947v-33.707l213.333-213.333 63.573 63.573zM416.427 351.573c-106.039 0-192 85.961-192 192s85.961 192 192 192c106.039 0 192-85.961 192-192v0c0-0.127 0-0.277 0-0.427 0-105.803-85.77-191.573-191.573-191.573-0.15 0-0.3 0-0.45 0.001h0.023z" />
|
||||
<glyph unicode="" glyph-name="Filters" d="M118.187 686.507h484.267v-37.547c0.233-10.744 8.882-19.393 19.605-19.626h141.675c10.744 0.233 19.393 8.882 19.626 19.605v37.569h122.88c18.144 0 32.853 14.709 32.853 32.853s-14.709 32.853-32.853 32.853v0h-123.307v37.12c-0.233 10.744-8.882 19.393-19.605 19.626h-141.675c-10.84 0-19.627-8.787-19.627-19.627v0-37.547h-483.84c-18.144 0-32.853-14.709-32.853-32.853s14.709-32.853 32.853-32.853v0zM640 770.133h101.547v-101.547h-101.547zM905.813 480.427h-484.267v37.547c0.003 0.128 0.005 0.28 0.005 0.431 0 10.691-8.548 19.386-19.183 19.622h-141.249c-0.001 0-0.003 0-0.005 0-10.84 0-19.627-8.787-19.627-19.627 0-0.15 0.002-0.3 0.005-0.449v0.022-37.547h-123.307c-1.122 0.136-2.421 0.213-3.738 0.213-18.144 0-32.853-14.709-32.853-32.853s14.709-32.853 32.853-32.853c1.317 0 2.616 0.078 3.893 0.228l-0.155-0.015h123.307v-37.973c0-10.84 8.787-19.627 19.627-19.627h141.227c10.654 0.239 19.2 8.933 19.2 19.622 0 0.002 0 0.003 0 0.005v0 37.973h484.267c1.122-0.136 2.421-0.213 3.738-0.213 18.144 0 32.853 14.709 32.853 32.853s-14.709 32.853-32.853 32.853c-1.317 0-2.616-0.078-3.893-0.228l0.155 0.015zM384 397.227h-103.253v101.547h103.253zM905.813 209.493h-303.36v37.547c0 0.001 0 0.003 0 0.005 0 10.604-8.596 19.2-19.2 19.2-0.15 0-0.3-0.002-0.449-0.005h-140.778c-0.001 0-0.003 0-0.005 0-10.689 0-19.383-8.546-19.622-19.178v-37.569h-304.213c-18.144 0-32.853-14.709-32.853-32.853s14.709-32.853 32.853-32.853h303.36v-37.12c0.233-10.744 8.882-19.393 19.605-19.626h140.822c10.84 0 19.627 8.787 19.627 19.627v0 37.547h303.787c18.144 0 32.853 14.709 32.853 32.853s-14.709 32.853-32.853 32.853v0zM564.48 124.16h-103.253v103.68h101.973z" />
|
||||
<glyph unicode="" glyph-name="Mobile-Menu" d="M938.667 746.667h-853.333c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h853.333c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0zM796.587 490.667h-711.253c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h711.253c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0zM654.080 234.667h-568.747c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h568.747c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0z" />
|
||||
</font></defs></svg>
|
После Ширина: | Высота: | Размер: 3.1 KiB |
|
@ -0,0 +1,15 @@
|
|||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="42" height="42" viewBox="0 0 42 42">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: url(#linear-gradient);
|
||||
}
|
||||
</style>
|
||||
<linearGradient id="linear-gradient" x1="15.2" y1="21.88" x2="27.41" y2="21.88" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#497df2"/>
|
||||
<stop offset="1" stop-color="#6890fb"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<title>Total Income_1</title>
|
||||
<path class="cls-1" d="M22.25,30.24v2.19H20.77V30.27a7.83,7.83,0,0,1-5.57-2.55l1.22-1.53a6.75,6.75,0,0,0,4.35,2.26V22.53c-2.48-.66-5.06-1.51-5.06-4.5,0-2.53,2.14-4.31,5.06-4.5V11.32h1.48v2.26A7.22,7.22,0,0,1,27,15.8l-1.22,1.48a5.76,5.76,0,0,0-3.58-1.85v5.28c2.5.71,5.16,1.63,5.16,4.82C27.41,27.71,26,30,22.25,30.24Zm-1.48-9.92v-5c-1.75.1-3,1.12-3,2.55S19.14,19.86,20.77,20.32Zm4.57,5.38c0-1.65-1.41-2.26-3.09-2.77v5.5C24.59,28.22,25.34,26.81,25.34,25.7Z"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 992 B |
|
@ -0,0 +1,39 @@
|
|||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="42" height="42" viewBox="0 0 42 42">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: url(#linear-gradient);
|
||||
}
|
||||
|
||||
.cls-2 {
|
||||
fill: url(#linear-gradient-2);
|
||||
}
|
||||
|
||||
.cls-3 {
|
||||
fill: url(#linear-gradient-3);
|
||||
}
|
||||
|
||||
.cls-4 {
|
||||
fill: url(#linear-gradient-4);
|
||||
}
|
||||
</style>
|
||||
<linearGradient id="linear-gradient" x1="18.23" y1="15.16" x2="23.12" y2="15.16" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#497df2"/>
|
||||
<stop offset="1" stop-color="#6890fb"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="linear-gradient-2" x1="9.77" y1="15.16" x2="14.66" y2="15.16" xlink:href="#linear-gradient"/>
|
||||
<linearGradient id="linear-gradient-3" x1="14" y1="10.76" x2="18.89" y2="10.76" xlink:href="#linear-gradient"/>
|
||||
<linearGradient id="linear-gradient-4" x1="4.84" y1="25.96" x2="38.76" y2="25.96" xlink:href="#linear-gradient"/>
|
||||
</defs>
|
||||
<title>Total Income_1</title>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path class="cls-1" d="M21.68,13.72a1.44,1.44,0,1,1,0,2.88h-2a1.44,1.44,0,1,1,0-2.88Z"/>
|
||||
<path class="cls-2" d="M13.22,13.72a1.44,1.44,0,0,1,0,2.88h-2a1.44,1.44,0,0,1,0-2.88Z"/>
|
||||
</g>
|
||||
<path class="cls-3" d="M17.45,9.33a1.44,1.44,0,1,1,0,2.88h-2a1.44,1.44,0,0,1,0-2.88Z"/>
|
||||
</g>
|
||||
<path class="cls-4" d="M5.2,22.81a2.83,2.83,0,0,0,1.51,4c15.34,5.82,15.55,5.82,15.72,5.82s.34,0,13.34-2.46c2.36-.37,3.19-3.61,3-6.66-.16-2.08-.88-4.31-2.42-4.31H24.61a2.82,2.82,0,0,0-2.78,3.29,2.91,2.91,0,0,0,2.9,2.36h1.51l-3.87,1.56L8.73,21.57a3,3,0,0,0-1-.18A2.83,2.83,0,0,0,5.2,22.81Z"/>
|
||||
</g>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 1.7 KiB |
После Ширина: | Высота: | Размер: 2.1 KiB |
|
@ -0,0 +1,15 @@
|
|||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 42 42">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #34d3eb;
|
||||
fill-rule: evenodd;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<title>Overall Transactions_1</title>
|
||||
<g>
|
||||
<path class="cls-1" d="M17.23,19.46h0l-3-3,8.86,0a1.54,1.54,0,0,0,0-3.08l-8.87,0,3-3a1.53,1.53,0,1,0-2.14-2.19L9.52,13.75v0l-.06.07-.07.06,0,0L9.3,14l0,0a.72.72,0,0,0-.1.18l-.06.12,0,0L9,14.49v0l0,.13v.13l0,.11v.06L9,15v.16l0,.11v0l.06.12,0,.07.06.11a.42.42,0,0,0,.1.17l0,.06.06,0,0,0,.07.07L15,21.65a1.55,1.55,0,1,0,2.2-2.19Z"/>
|
||||
<path class="cls-1" d="M33,27v-.15l0-.15v0a1.36,1.36,0,0,0-.08-.19l-.06-.11a.57.57,0,0,0-.1-.18l0,0,0-.06-.1-.09-.06-.06,0,0-5.53-5.56a1.54,1.54,0,0,0-2.17,2.18l3,3-8.86,0a1.54,1.54,0,0,0,0,3.08l8.86,0-3,3a1.55,1.55,0,0,0,2.19,2.19l5.62-5.62.07-.07,0,0,0,0,0-.06a.72.72,0,0,0,.1-.18l0-.07,0,0a1,1,0,0,0,.08-.19v0l0-.13v-.13l0-.1V27Z"/>
|
||||
</g>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 969 B |
|
@ -0,0 +1,80 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 179.6 30.5" style="enable-background:new 0 0 179.6 30.5;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{clip-path:url(#SVGID_2_);}
|
||||
.st1{fill:url(#SVGID_3_);}
|
||||
.st2{fill:none;}
|
||||
.st3{fill:url(#SVGID_4_);}
|
||||
.st4{fill:url(#SVGID_5_);}
|
||||
.st5{fill:#F7F7F7;}
|
||||
</style>
|
||||
<g>
|
||||
<defs>
|
||||
<path id="SVGID_1_" d="M41.8,16h-3.9v3.3h4.6v1.8h-6.9V9.5h6.9v1.8h-4.6v2.9h3.9L41.8,16z M48,13.5L48,13.5l1.6-4.1h2.6l-2.8,5.8
|
||||
l3,5.9h-2.7L48.1,17l0,0l-1.6,4.1h-2.7l2.9-5.9l-2.8-5.8h2.6L48,13.5z M56.6,16.9v4.2h-2.3V9.5h4c1.9-0.1,3.6,1.3,3.8,3.2
|
||||
c0,0.2,0,0.3,0,0.5c0.1,1.9-1.3,3.6-3.3,3.7c-0.2,0-0.3,0-0.5,0L56.6,16.9z M56.6,15.1h1.8c0.4,0,0.9-0.2,1.1-0.5
|
||||
c0.3-0.4,0.4-0.9,0.4-1.4c0-0.5-0.1-1-0.4-1.4c-0.2-0.4-0.7-0.6-1.1-0.6h-1.8V15.1z M70.6,16h-3.9v3.3h4.6v1.8h-6.9V9.5h6.9v1.8
|
||||
h-4.6v2.9h3.9L70.6,16z M81.4,21.1h-2.3l-3.6-7.4l0,0v7.4h-2.3V9.5h2.3l3.6,7.4l0,0V9.5h2.3L81.4,21.1z M89.2,18.1
|
||||
c0-0.4-0.1-0.8-0.4-1.1c-0.4-0.3-0.8-0.6-1.2-0.8c-1-0.3-1.9-0.8-2.7-1.4c-0.6-0.6-1-1.4-0.9-2.2c0-0.9,0.4-1.8,1.1-2.3
|
||||
c0.8-0.6,1.7-0.9,2.7-0.9c1,0,2,0.3,2.7,1c0.7,0.7,1,1.6,1,2.5l0,0h-2.2c0-0.5-0.1-0.9-0.4-1.3c-0.6-0.6-1.6-0.7-2.2-0.1
|
||||
c-0.2,0.3-0.4,0.6-0.4,1c0,0.4,0.1,0.7,0.4,0.9c0.4,0.3,0.9,0.6,1.5,0.8c0.9,0.3,1.8,0.8,2.5,1.4c0.6,0.6,0.9,1.5,0.8,2.3
|
||||
c0,0.9-0.3,1.8-1,2.4c-0.8,0.6-1.7,0.9-2.7,0.9c-1,0-2.1-0.3-2.9-1c-0.8-0.7-1.3-1.7-1.2-2.8l0,0h2.2C85.8,18,86,18.6,86.3,19
|
||||
c0.4,0.3,0.9,0.5,1.4,0.5c0.4,0,0.8-0.1,1.1-0.4C89,18.8,89.1,18.4,89.2,18.1L89.2,18.1z M99.8,16h-3.9v3.3h4.6v1.8h-6.9V9.5h6.9
|
||||
v1.8h-4.6v2.9h3.9L99.8,16z M113.8,11.3h-2.6v9.8h-2.3v-9.8h-2.6V9.5h7.5V11.3z M118,16.5v4.6h-2.3V9.5h3.8c1-0.1,2,0.3,2.7,0.9
|
||||
c0.7,0.7,1,1.6,1,2.5c0,0.6-0.1,1.1-0.4,1.6c-0.3,0.5-0.7,0.8-1.2,1.1c0.5,0.2,1,0.5,1.3,1c0.3,0.5,0.4,1.1,0.4,1.8v0.8
|
||||
c0,0.3,0,0.7,0.1,1c0,0.3,0.2,0.6,0.4,0.8v0.2h-2.3c-0.2-0.2-0.3-0.5-0.3-0.8c0-0.4-0.1-0.8-0.1-1.2v-0.8c0-0.5-0.1-1-0.4-1.4
|
||||
c-0.2-0.3-0.6-0.5-1-0.5L118,16.5z M118,14.7h1.5c0.4,0,0.8-0.1,1.1-0.4c0.3-0.4,0.4-0.8,0.3-1.3c0-0.5-0.1-0.9-0.4-1.3
|
||||
c-0.2-0.3-0.6-0.5-1-0.5H118V14.7z M131.1,18.7H128l-0.6,2.5H125l3.3-11.6h2.4l3.3,11.6h-2.3L131.1,18.7z M128.5,16.9h2.1l-1-4.1
|
||||
l0,0L128.5,16.9z M142.9,17.4L142.9,17.4c0.1,1-0.2,2.1-0.9,2.9c-0.7,0.7-1.7,1.1-2.7,1c-1.1,0-2.1-0.4-2.9-1.1
|
||||
c-0.8-0.9-1.2-2-1.1-3.2v-3.4c-0.1-1.1,0.3-2.3,1-3.1c0.7-0.8,1.7-1.2,2.8-1.1c1-0.1,2,0.3,2.8,1c0.7,0.8,1.1,1.9,1,2.9l0,0h-2.2
|
||||
c0.1-0.6,0-1.1-0.3-1.6c-0.3-0.4-0.8-0.6-1.2-0.5c-0.5,0-0.9,0.2-1.2,0.6c-0.3,0.6-0.5,1.2-0.4,1.8V17c0,0.6,0.1,1.3,0.4,1.8
|
||||
c0.3,0.4,0.8,0.6,1.3,0.6c0.4,0.1,0.8-0.1,1.1-0.4c0.3-0.5,0.4-1.1,0.3-1.6L142.9,17.4z M148.4,16.3h-1v4.8h-2.3V9.5h2.3v4.7h0.7
|
||||
l2.3-4.7h2.8l-3.2,5.3l3.4,6.3h-2.8L148.4,16.3z M161.2,16h-3.9v3.3h4.6v1.8H155V9.5h6.9v1.8h-4.6v2.9h3.9L161.2,16z M166.2,16.5
|
||||
v4.6h-2.3V9.5h3.8c1-0.1,2,0.3,2.7,0.9c0.7,0.7,1,1.6,1,2.5c0,0.6-0.1,1.1-0.4,1.6c-0.3,0.5-0.7,0.8-1.2,1.1c0.5,0.2,1,0.5,1.3,1
|
||||
c0.3,0.5,0.4,1.1,0.4,1.8v0.8c0,0.3,0,0.7,0.1,1c0,0.3,0.2,0.6,0.4,0.8v0.2h-2.4c-0.2-0.2-0.3-0.5-0.4-0.8c0-0.4-0.1-0.8-0.1-1.2
|
||||
v-0.8c0-0.5-0.1-1-0.4-1.4c-0.2-0.3-0.6-0.5-1-0.5L166.2,16.5z M166.2,14.7h1.5c0.4,0,0.8-0.1,1.1-0.4c0.3-0.3,0.4-0.8,0.4-1.2
|
||||
c0-0.5-0.1-0.9-0.4-1.3c-0.2-0.3-0.6-0.5-1-0.5h-1.5L166.2,14.7z"/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_2_">
|
||||
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
|
||||
</clipPath>
|
||||
<g class="st0">
|
||||
|
||||
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="191.97" y1="16.77" x2="-12.39" y2="16.77" gradientTransform="matrix(1 0 0 -1 0 32)">
|
||||
<stop offset="0" style="stop-color:#00C6FB"/>
|
||||
<stop offset="0.2" style="stop-color:#00C2FA"/>
|
||||
<stop offset="0.39" style="stop-color:#00B7F9"/>
|
||||
<stop offset="0.58" style="stop-color:#00A3F5"/>
|
||||
<stop offset="0.77" style="stop-color:#0088F1"/>
|
||||
<stop offset="0.95" style="stop-color:#0065EC"/>
|
||||
<stop offset="1" style="stop-color:#005BEA"/>
|
||||
</linearGradient>
|
||||
<rect x="-12.4" y="-7" class="st1" width="204.4" height="44.5"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="31.3333" y1="15.23" x2="-17.3436" y2="15.23">
|
||||
<stop offset="0" style="stop-color:#00C6FB"/>
|
||||
<stop offset="1" style="stop-color:#005BEA"/>
|
||||
</linearGradient>
|
||||
<path class="st3" d="M16.7,0.7C9.6,0.7,3.8,6.5,3.8,13.6c0,5.7,3.7,10.5,8.8,12.2l3.8,3.8c0.1,0.1,0.2,0.1,0.3,0.1
|
||||
c0.1,0,0.2,0,0.3-0.1l3.8-3.8c5.1-1.7,8.8-6.5,8.8-12.2C29.6,6.5,23.8,0.7,16.7,0.7z M20.3,24.6l-0.3,0.1l-0.2,0.2l-3.2,3.2
|
||||
l-3.2-3.2l-0.2-0.2L13,24.6c-4.7-1.6-7.9-6-7.9-11C5.1,7.2,10.3,2,16.7,2c6.4,0,11.6,5.2,11.6,11.6C28.3,18.6,25.1,23,20.3,24.6z"
|
||||
/>
|
||||
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="31.3333" y1="13.6002" x2="-17.3436" y2="13.6002">
|
||||
<stop offset="0" style="stop-color:#00C6FB"/>
|
||||
<stop offset="1" style="stop-color:#005BEA"/>
|
||||
</linearGradient>
|
||||
<circle class="st4" cx="16.7" cy="13.6" r="8.5"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="st5" d="M19,15.1c0,0.6-0.2,1.1-0.5,1.5c-0.3,0.4-0.8,0.6-1.5,0.7v1.2h-0.7v-1.2c-0.7,0-1.4-0.2-2-0.5v-1.4
|
||||
c0.3,0.2,0.6,0.3,1,0.4c0.3,0.1,0.7,0.2,1,0.2v-2l-0.2-0.1c-0.7-0.3-1.1-0.6-1.4-1c-0.3-0.3-0.4-0.8-0.4-1.3c0-0.6,0.2-1,0.5-1.4
|
||||
c0.3-0.4,0.8-0.6,1.5-0.6V8.7H17v0.9c0.6,0,1.2,0.2,1.8,0.5l-0.5,1.2C17.8,11.2,17.4,11,17,11v1.8c0.1,0,0.2,0.1,0.2,0.1
|
||||
c0.5,0.2,0.9,0.4,1.1,0.6c0.2,0.2,0.4,0.4,0.5,0.7C18.9,14.5,19,14.8,19,15.1z M15.7,11.7c0,0.2,0,0.4,0.1,0.5
|
||||
c0.1,0.1,0.2,0.2,0.5,0.3V11C15.9,11,15.7,11.3,15.7,11.7z M17.6,15.2c0-0.2,0-0.3-0.1-0.4c-0.1-0.1-0.2-0.2-0.5-0.4V16
|
||||
C17.4,15.9,17.6,15.6,17.6,15.2z"/>
|
||||
</g>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 5.6 KiB |
|
@ -0,0 +1,15 @@
|
|||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #494949;
|
||||
fill-rule: evenodd;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<title>02 Overall Transactions</title>
|
||||
<g>
|
||||
<path class="cls-1" d="M9.71,11.07h0L7.9,9.27h5.36a.93.93,0,0,0,0-1.86H7.89L9.7,5.59A.93.93,0,1,0,8.4,4.27L5,7.63H5l0,0,0,0v0l0,0h0a.44.44,0,0,0-.06.11L4.8,8V8l0,.09h0l0,.08V8.5l0,.07v0l0,.07v0l0,.07a.26.26,0,0,0,.06.1v0l0,0H5L5,9,8.39,12.4a.94.94,0,0,0,1.33-1.33Z"/>
|
||||
<path class="cls-1" d="M19.28,15.59V15.5l0-.09h0l0-.12,0-.07a.34.34,0,0,0-.06-.11v0l0,0L19,15l0,0h0L15.6,11.6a.93.93,0,0,0-1.31,1.32l1.82,1.82H10.74a.93.93,0,0,0,0,1.86h5.36l-1.82,1.82a.94.94,0,0,0,1.33,1.32L19,16.32l0,0h0v0a.44.44,0,0,0,.06-.11l0,0v0a.59.59,0,0,0,0-.12h0l0-.08v-.24Z"/>
|
||||
</g>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 860 B |
После Ширина: | Высота: | Размер: 224 KiB |
|
@ -0,0 +1,69 @@
|
|||
//sass-lint:disable-all
|
||||
@import 'definition/material.scss';
|
||||
$accent: #4273F9;
|
||||
$accent-font: #fff;
|
||||
@import 'ej2-base/styles/material-definition.scss';
|
||||
@import 'ej2-base/styles/all.scss';
|
||||
@import 'ej2-buttons/styles/button/definition.scss';
|
||||
@import 'ej2-buttons/styles/button/material-definition.scss';
|
||||
@import 'ej2-buttons/styles/button/all.scss';
|
||||
@import 'ej2-calendars/styles/calendar/definition.scss';
|
||||
@import 'ej2-calendars/styles/calendar/material-definition.scss';
|
||||
@import 'ej2-calendars/styles/calendar/all.scss';
|
||||
@import 'ej2-buttons/styles/check-box/definition.scss';
|
||||
@import 'ej2-buttons/styles/check-box/material-definition.scss';
|
||||
@import 'ej2-buttons/styles/check-box/all.scss';
|
||||
@import 'ej2-navigations/styles/context-menu/definition.scss';
|
||||
@import 'ej2-navigations/styles/context-menu/material-definition.scss';
|
||||
@import 'ej2-navigations/styles/context-menu/all.scss';
|
||||
@import 'ej2-calendars/styles/datepicker/definition.scss';
|
||||
@import 'ej2-calendars/styles/datepicker/material-definition.scss';
|
||||
@import 'ej2-calendars/styles/datepicker/all.scss';
|
||||
@import 'ej2-calendars/styles/daterangepicker/material-definition.scss';
|
||||
@import 'ej2-calendars/styles/daterangepicker/all.scss';
|
||||
@import 'ej2-popups/styles/dialog/definition.scss';
|
||||
@import 'ej2-popups/styles/dialog/material-definition.scss';
|
||||
@import 'ej2-popups/styles/dialog/all.scss';
|
||||
@import 'ej2-dropdowns/styles/drop-down-base/definition.scss';
|
||||
@import 'ej2-dropdowns/styles/drop-down-base/material-definition.scss';
|
||||
@import 'ej2-dropdowns/styles/drop-down-base/all.scss';
|
||||
@import 'ej2-dropdowns/styles/drop-down-list/definition.scss';
|
||||
@import 'ej2-dropdowns/styles/drop-down-list/material-definition.scss';
|
||||
@import 'ej2-dropdowns/styles/drop-down-list/all.scss';
|
||||
@import 'ej2-grids/styles/grid/definition.scss';
|
||||
@import 'ej2-grids/styles/grid/material-definition.scss';
|
||||
@import 'ej2-grids/styles/grid/all.scss';
|
||||
@import 'ej2-navigations/styles/h-scroll/definition.scss';
|
||||
@import 'ej2-navigations/styles/h-scroll/material-definition.scss';
|
||||
@import 'ej2-navigations/styles/h-scroll/all.scss';
|
||||
@import 'ej2-inputs/styles/input/definition.scss';
|
||||
@import 'ej2-inputs/styles/input/material-definition.scss';
|
||||
@import 'ej2-inputs/styles/input/all.scss';
|
||||
@import 'ej2-lists/styles/list-view/definition.scss';
|
||||
@import 'ej2-lists/styles/list-view/material-definition.scss';
|
||||
@import 'ej2-lists/styles/list-view/all.scss';
|
||||
@import 'ej2-dropdowns/styles/multi-select/definition.scss';
|
||||
@import 'ej2-dropdowns/styles/multi-select/material-definition.scss';
|
||||
@import 'ej2-dropdowns/styles/multi-select/all.scss';
|
||||
@import 'ej2-inputs/styles/numerictextbox/definition.scss';
|
||||
@import 'ej2-inputs/styles/numerictextbox/material-definition.scss';
|
||||
@import 'ej2-inputs/styles/numerictextbox/all.scss';
|
||||
@import 'ej2-grids/styles/pager/definition.scss';
|
||||
@import 'ej2-grids/styles/pager/material-definition.scss';
|
||||
@import 'ej2-grids/styles/pager/all.scss';
|
||||
@import 'ej2-popups/styles/popup/all.scss';
|
||||
@import 'ej2-buttons/styles/radio-button/definition.scss';
|
||||
@import 'ej2-buttons/styles/radio-button/material-definition.scss';
|
||||
@import 'ej2-buttons/styles/radio-button/all.scss';
|
||||
@import 'ej2-popups/styles/spinner/definition.scss';
|
||||
@import 'ej2-popups/styles/spinner/material-definition.scss';
|
||||
@import 'ej2-popups/styles/spinner/all.scss';
|
||||
@import 'ej2-calendars/styles/timepicker/definition.scss';
|
||||
@import 'ej2-calendars/styles/timepicker/material-definition.scss';
|
||||
@import 'ej2-calendars/styles/timepicker/all.scss';
|
||||
@import 'ej2-navigations/styles/toolbar/definition.scss';
|
||||
@import 'ej2-navigations/styles/toolbar/material-definition.scss';
|
||||
@import 'ej2-navigations/styles/toolbar/all.scss';
|
||||
@import 'ej2-popups/styles/tooltip/definition.scss';
|
||||
@import 'ej2-popups/styles/tooltip/material-definition.scss';
|
||||
@import 'ej2-popups/styles/tooltip/all.scss';
|
|
@ -0,0 +1,31 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"module": "amd",
|
||||
"declaration": true,
|
||||
"removeComments": true,
|
||||
"noLib": false,
|
||||
"experimentalDecorators": true,
|
||||
"sourceMap": true,
|
||||
"pretty": true,
|
||||
"allowUnreachableCode": false,
|
||||
"allowUnusedLabels": false,
|
||||
"noImplicitAny": true,
|
||||
"noImplicitReturns": true,
|
||||
"noImplicitUseStrict": false,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"allowJs": false,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"moduleResolution": "node",
|
||||
"lib": ["es5", "es2015.promise", "dom"],
|
||||
"types": ["jasmine","jasmine-ajax","requirejs","chai"]
|
||||
},
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
"dist",
|
||||
"public",
|
||||
"coverage",
|
||||
"test-report"
|
||||
],
|
||||
"compileOnSave": false
|
||||
}
|
|
@ -0,0 +1,28 @@
|
|||
var fs = require('fs');
|
||||
var glob = require('glob');
|
||||
var webpack = require('webpack');
|
||||
var path = require('path');
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
js: glob.sync("./src/**/*.js"),
|
||||
},
|
||||
output: {
|
||||
path: __dirname + '/',
|
||||
filename: "./dist/common.js"
|
||||
},
|
||||
plugins: [
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
compress: {
|
||||
warnings: true,
|
||||
dead_code: true,
|
||||
unused: true
|
||||
},
|
||||
output: {
|
||||
beautify: true,
|
||||
comments: false
|
||||
},
|
||||
sourceMap: true
|
||||
})
|
||||
]
|
||||
}
|