v19.4.38 is released
This commit is contained in:
pipeline
Родитель
7e9652f80f
Коммит
22e0e0fa14
13
gulpfile.js
13
gulpfile.js
|
|
@ -58,17 +58,24 @@ gulp.task('whole-bundle', function (done) {
|
|||
|
||||
gulp.task('build', function(done){
|
||||
var runSequence = require('run-sequence');
|
||||
runSequence('create-locale', 'scripts', 'whole-bundle', done);
|
||||
runSequence('create-locale', 'combine-samplelists', 'scripts', 'whole-bundle', done);
|
||||
})
|
||||
var jsoncombine = require('gulp-jsoncombine');
|
||||
var elasticlunr = require('elasticlunr');
|
||||
var sampleOrder = '';
|
||||
var sampleList;
|
||||
|
||||
gulp.task('combine-samplelists', function (done) {
|
||||
combineSampleList(platform, false, done);
|
||||
gulp.task('combine-samplelists', function () {
|
||||
combineSampleList(platform, false);
|
||||
});
|
||||
|
||||
gulp.task('styles', function() {
|
||||
var styleFiles = glob.sync('./node_modules/@syncfusion/ej2/*.css');
|
||||
for(var i=0; i < styleFiles.length; i++) {
|
||||
shelljs.cp('-R',styleFiles[i], './styles');
|
||||
}
|
||||
})
|
||||
|
||||
function combineSampleList(platform, done) {
|
||||
var filename = platform === 'javascript' ? 'samplelist.js' : 'sampleList.ts';
|
||||
sampleOrder = JSON.parse(fs.readFileSync(`./src/common/sampleOrder.json`));
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@syncfusion/ej2-samples",
|
||||
"version": "19.3.43",
|
||||
"version": "19.4.38",
|
||||
"description": "Samples for Syncfusion Essential JS 2",
|
||||
"author": "Syncfusion Inc.",
|
||||
"license": "SEE LICENSE IN license",
|
||||
|
|
|
|||
|
|
@ -919,6 +919,14 @@
|
|||
"sidebar-list": "Sidebar with ListView"
|
||||
}
|
||||
},
|
||||
"signature": {
|
||||
"ControlName": "Signature",
|
||||
"Samples": {
|
||||
"default": "Default Functionalities",
|
||||
"toolbar": "Toolbar",
|
||||
"keyboard-navigation": "Keyboard Navigation"
|
||||
}
|
||||
},
|
||||
"slider": {
|
||||
"ControlName": "Range Slider",
|
||||
"Samples": {
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
.e-accordion table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
width: 95%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.e-accordion table th,
|
||||
|
|
|
|||
|
|
@ -51,6 +51,19 @@
|
|||
.bootstrap4 .e-list-icon{
|
||||
color: #495057;
|
||||
}
|
||||
.material-dark .e-list-icon,
|
||||
.bootstrap5-dark .e-list-icon,
|
||||
.tailwind-dark .e-list-icon {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bootstrap-dark .e-list-icon {
|
||||
color: #f0f0f0;
|
||||
}
|
||||
|
||||
.fabric-dark .e-list-icon {
|
||||
color: #dadada;
|
||||
}
|
||||
/* custom code end*/
|
||||
|
||||
.e-list-icon {
|
||||
|
|
|
|||
|
|
@ -62,19 +62,17 @@
|
|||
}
|
||||
|
||||
.bootstrap .header {
|
||||
background-color: #fff;
|
||||
background-color: #f5f5f5;
|
||||
border-bottom: 1px solid #ccc;
|
||||
color: #777;
|
||||
font-family: "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 30px;
|
||||
height: 30px;
|
||||
padding: 0 0 0 24px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
height: 48px;
|
||||
padding: 15px 0 0 16px;
|
||||
}
|
||||
|
||||
.e-bigger.bootstrap .header {
|
||||
line-height: 44px;
|
||||
height: 44px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
|
@ -93,7 +91,7 @@
|
|||
|
||||
.e-bigger.bootstrap .job {
|
||||
font-size: 15px;
|
||||
margin-top: -32px;
|
||||
margin-top: -18px;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
|
||||
|
|
@ -105,6 +103,7 @@
|
|||
}
|
||||
|
||||
.e-bigger.bootstrap .ename {
|
||||
line-height: 1.063em;
|
||||
font-size: 16px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
|
@ -172,5 +171,17 @@
|
|||
margin-top: -15px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.bootstrap5 #employees_popup .job,
|
||||
.bootstrap-dark #employees_popup .job,
|
||||
.bootstrap5-dark #employees_popup .job,
|
||||
.tailwind-dark #employees_popup .job {
|
||||
margin-top: 0;
|
||||
}
|
||||
.e-bigger.bootstrap5 #employees_popup .job,
|
||||
.e-bigger.bootstrap-dark #employees_popup .job,
|
||||
.e-bigger.bootstrap5-dark #employees_popup .job,
|
||||
.e-bigger.tailwind-dark #employees_popup .job {
|
||||
margin-top: -15px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -145,8 +145,9 @@
|
|||
padding: 8px 16px 8px 16px;
|
||||
}
|
||||
|
||||
body.bootstrap5-dark #letterAvatarList .listWrapper .e-avatar,
|
||||
body.tailwind-dark #letterAvatarList .listWrapper .e-avatar {
|
||||
body.bootstrap5 #letterAvatarList .e-list-item .e-avatar,
|
||||
body.bootstrap5-dark #letterAvatarList .e-list-item .e-avatar,
|
||||
.tailwind-dark #letterAvatarList .e-list-item .e-avatar {
|
||||
top: calc(100% - 48px);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -34,16 +34,16 @@
|
|||
font-style: normal;
|
||||
}
|
||||
|
||||
.people,
|
||||
.e-people {
|
||||
.badge-accordion .people,
|
||||
.badge-accordion .e-people {
|
||||
font-family: 'Contacts';
|
||||
}
|
||||
|
||||
.e-people:before {
|
||||
.badge-accordion .e-icons.e-people:before {
|
||||
content: '\e700';
|
||||
}
|
||||
|
||||
.people:before {
|
||||
.badge-accordion .people:before {
|
||||
content: '\e701';
|
||||
}
|
||||
|
||||
|
|
@ -74,17 +74,28 @@
|
|||
display: block;
|
||||
}
|
||||
/* Tailwind customization*/
|
||||
.tailwind .sample_container.badge-accordion #accordion .e-toggle-icon,
|
||||
.tailwind-dark .sample_container.badge-accordion #accordion .e-toggle-icon,
|
||||
.bootstrap5 .sample_container.badge-accordion #accordion .e-toggle-icon,
|
||||
.bootstrap5-dark .sample_container.badge-accordion #accordion .e-toggle-icon {
|
||||
.tailwind .sample_container.badge-accordion #accordion .e-toggle-icon {
|
||||
top: 7px;
|
||||
}
|
||||
|
||||
body.tailwind-dark .sample_container.badge-accordion #accordion .e-toggle-icon,
|
||||
body.bootstrap5 .sample_container.badge-accordion #accordion .e-toggle-icon,
|
||||
body.bootstrap5-dark .sample_container.badge-accordion #accordion .e-toggle-icon {
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.e-bigger.tailwind .sample_container.badge-accordion #accordion .e-toggle-icon,
|
||||
.e-bigger.tailwind-dark .sample_container.badge-accordion #accordion .e-toggle-icon,
|
||||
.e-bigger.bootstrap5 .sample_container.badge-accordion #accordion .e-toggle-icon,
|
||||
.e-bigger.bootstrap5-dark .sample_container.badge-accordion #accordion .e-toggle-icon {
|
||||
top: 11px;
|
||||
}
|
||||
|
||||
body.tailwind-dark .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon .e-acrdn-icons.e-icons,
|
||||
body.tailwind .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon .e-acrdn-icons.e-icons,
|
||||
body.bootstrap5 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon .e-acrdn-icons.e-icons,
|
||||
body.bootstrap5-dark .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon .e-acrdn-icons.e-icons {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -29,7 +29,16 @@
|
|||
|
||||
#lists {
|
||||
margin: auto;
|
||||
border: 1px solid rgba(0, 0, 0, 0.12)
|
||||
}
|
||||
|
||||
body.material #lists,
|
||||
body.material-dark #lists,
|
||||
body.fabric #lists,
|
||||
body.fabric-dark #lists,
|
||||
body.bootstrap #lists,
|
||||
body.bootstrap-dark #lists,
|
||||
body.highcontrast #lists {
|
||||
border: 1px solid #dddddd;
|
||||
}
|
||||
|
||||
#lists .e-list-item {
|
||||
|
|
|
|||
|
|
@ -73,6 +73,19 @@
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
body.bootstrap5 .badge-toolbar .e-toolbar,
|
||||
body.material .badge-toolbar .e-toolbar,
|
||||
body.tailwind .badge-toolbar .e-toolbar{
|
||||
border: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.tailwind-dark .sample_container.badge-toolbar,
|
||||
.bootstrap5-dark .sample_container.badge-toolbar,
|
||||
.bootstrap-dark .sample_container.badge-toolbar,
|
||||
.fabric-dark .sample_container.badge-toolbar {
|
||||
border: 1px solid #dddddd;
|
||||
}
|
||||
|
||||
#toolbar .header {
|
||||
font-size: 18px;
|
||||
margin-right: 56px;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@
|
|||
<div class="content-wrapper">
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<h5>File Manager like Breadcrumb</h5>
|
||||
<h5 style="display: inline-block">File Manager like Breadcrumb</h5>
|
||||
<button id="reset" class="reset-btn">Reset State</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row material2">
|
||||
|
|
@ -15,19 +16,23 @@
|
|||
<script id="itemTemplate" type="text/x-template">
|
||||
<div style="display: flex;">
|
||||
<ul></ul>
|
||||
</div>
|
||||
</script>
|
||||
<script id="separatorTemplate" type="text/x-template">
|
||||
<div style="display: flex;">
|
||||
<ul></ul>
|
||||
</div>
|
||||
</script>
|
||||
<div id="action-description">
|
||||
<p> This sample demonstrates the Address Bar functionalities using the <b>Breadcrumb</b> component. Click the
|
||||
<p> This sample demonstrates the address bar functionalities using the <b>Breadcrumb</b> component. Click the
|
||||
right arrow icon to view and navigate to the next level items.</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>In the <code>Breadcrumb</code> component, <code>itemTemplate</code> property is used to render <code>Menu</code>
|
||||
as <code>Breadcrumb</code> items.</p>
|
||||
<p>In this demo, we have rendered Address of <b>Pictures</b> folder in <code>Breadcrumb</code>. And click the
|
||||
as Breadcrumb items.</p>
|
||||
<p>In this demo, we have rendered address of pictures folder in Breadcrumb. And click the
|
||||
right arrow icon to view and navigate to the next level items.</p>
|
||||
<p>More information about <code>Breadcrumb</code> component can be found in this <a target='_blank'
|
||||
<p>More information about Breadcrumb component can be found in this <a target='_blank'
|
||||
href="https://ej2.syncfusion.com/documentation/breadcrumb/getting-started/">documentation section</a>.</p>
|
||||
</div>
|
||||
<!-- custom code start -->
|
||||
|
|
@ -78,6 +83,11 @@
|
|||
.e-bigger.highcontrast .e-custom-breadcrumb .e-menu-wrapper ul .e-menu-item.e-menu-caret-icon {
|
||||
padding-right: 22px !important;
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
float: right;
|
||||
margin: 5px 2px 5px 0;
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end -->
|
||||
<style>
|
||||
|
|
@ -96,6 +106,7 @@
|
|||
.bootstrap5 .e-custom-breadcrumb .e-menu-wrapper ul .e-menu-item.e-menu-caret-icon,
|
||||
.bootstrap5-dark .e-custom-breadcrumb .e-menu-wrapper ul .e-menu-item.e-menu-caret-icon {
|
||||
padding-right: 23px !important;
|
||||
margin-top: -2px
|
||||
}
|
||||
|
||||
.e-custom-breadcrumb .e-menu-wrapper ul .e-menu-item .e-caret {
|
||||
|
|
@ -129,10 +140,6 @@
|
|||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.e-custom-breadcrumb .e-breadcrumb-separator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.e-custom-breadcrumb .e-menu-wrapper ul .e-menu-item .e-menu-icon {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { getComponent } from '@syncfusion/ej2-base';
|
||||
import { Button } from '@syncfusion/ej2-buttons';
|
||||
import { BreadcrumbItemModel, Breadcrumb, Menu, MenuItemModel, MenuEventArgs, BreadcrumbBeforeItemRenderEventArgs } from '@syncfusion/ej2-navigations';
|
||||
|
||||
(window as any).default = (): void => {
|
||||
|
|
@ -24,6 +26,7 @@ import { BreadcrumbItemModel, Breadcrumb, Menu, MenuItemModel, MenuEventArgs, Br
|
|||
text: 'Pictures'
|
||||
}
|
||||
];
|
||||
let initialBreadcrumbItems: BreadcrumbItemModel[] = [].slice.call(breadcrumbItems);
|
||||
|
||||
let items: any = [
|
||||
{
|
||||
|
|
@ -108,12 +111,54 @@ import { BreadcrumbItemModel, Breadcrumb, Menu, MenuItemModel, MenuEventArgs, Br
|
|||
let breadcrumbObj: Breadcrumb = new Breadcrumb({
|
||||
cssClass: 'e-custom-breadcrumb',
|
||||
itemTemplate: '#itemTemplate',
|
||||
separatorTemplate: '#separatorTemplate',
|
||||
items: breadcrumbItems,
|
||||
beforeItemRender: beforeItemRenderHanlder
|
||||
}, '#address-bar');
|
||||
|
||||
function beforeItemRenderHanlder(args: BreadcrumbBeforeItemRenderEventArgs): void {
|
||||
if (!args.element.classList.contains('e-breadcrumb-separator')) {
|
||||
if (args.element.classList.contains('e-breadcrumb-separator')) {
|
||||
const previousItemText: string = (args.item as { previousItem: BreadcrumbItemModel }).previousItem.text;
|
||||
if (previousItemText !== 'LastItem' && getItems(previousItemText)[0].items) {
|
||||
new Menu({
|
||||
items: getItems(previousItemText),
|
||||
showItemOnClick: true,
|
||||
select: function (args: MenuEventArgs): void {
|
||||
if (!args.element.parentElement.classList.contains('e-menu') && this.items[0] && this.items[0].items) {
|
||||
let idx: number;
|
||||
for (let i: number = 0; i < this.items[0].items.length; i++) {
|
||||
for (let j: number = 0; j < breadcrumbItems.length; j++) {
|
||||
if (this.items[0].items[i].text === breadcrumbItems[j].text) {
|
||||
idx = j;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (idx) {
|
||||
breadcrumbItems = breadcrumbItems.slice(0, idx);
|
||||
}
|
||||
breadcrumbItems[0].iconCss = 'e-bicons e-' + (args.item as { type: string }).type;
|
||||
if (breadcrumbItems[breadcrumbItems.length - 1].text === 'LastItem') {
|
||||
breadcrumbItems.pop();
|
||||
}
|
||||
breadcrumbItems.push({ text: args.item.text });
|
||||
breadcrumbItems.push({ text: 'LastItem' });
|
||||
breadcrumbObj.items = breadcrumbItems;
|
||||
}
|
||||
},
|
||||
beforeOpen: function () {
|
||||
this.element.classList.add('e-open');
|
||||
},
|
||||
onClose: function () {
|
||||
this.element.classList.remove('e-open');
|
||||
}
|
||||
}, args.element.querySelector('ul'));
|
||||
}
|
||||
} else {
|
||||
if (args.item.text === 'LastItem') {
|
||||
args.element.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
new Menu({
|
||||
items: [{
|
||||
text: args.item.text, iconCss: args.item.iconCss
|
||||
|
|
@ -127,40 +172,10 @@ import { BreadcrumbItemModel, Breadcrumb, Menu, MenuItemModel, MenuEventArgs, Br
|
|||
break;
|
||||
}
|
||||
}
|
||||
breadcrumbObj.items.push({ text: 'LastItem' });
|
||||
breadcrumbObj.activeItem = 'LastItem';
|
||||
}
|
||||
}, args.element.querySelector('ul'));
|
||||
if (args.item) {
|
||||
if (getItems(args.item.text)[0].items) {
|
||||
new Menu({
|
||||
items: getItems(args.item.text),
|
||||
showItemOnClick: true,
|
||||
select: function (args: MenuEventArgs): void {
|
||||
if (!args.element.parentElement.classList.contains('e-menu') && this.items[0] && this.items[0].items) {
|
||||
let idx: number;
|
||||
for (let i: number = 0; i < this.items[0].items.length; i++) {
|
||||
for (let j: number = 0; j < breadcrumbItems.length; j++) {
|
||||
if (this.items[0].items[i].text === breadcrumbItems[j].text) {
|
||||
idx = j;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (idx) {
|
||||
breadcrumbItems = breadcrumbItems.slice(0, idx);
|
||||
}
|
||||
breadcrumbItems[0].iconCss = 'e-bicons e-' + (args.item as { type: string }).type;
|
||||
breadcrumbItems.push({ text: args.item.text });
|
||||
breadcrumbObj.items = breadcrumbItems;
|
||||
}
|
||||
},
|
||||
beforeOpen: function () {
|
||||
this.element.classList.add('e-open');
|
||||
},
|
||||
onClose: function () {
|
||||
this.element.classList.remove('e-open');
|
||||
}
|
||||
}, args.element.querySelectorAll('ul')[1]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -206,4 +221,11 @@ import { BreadcrumbItemModel, Breadcrumb, Menu, MenuItemModel, MenuEventArgs, Br
|
|||
}
|
||||
return subItems;
|
||||
}
|
||||
|
||||
// To refresh Breadcrumb control state when reset button clicked
|
||||
new Button({ cssClass: 'e-small' }, '#reset').element.onclick = () => {
|
||||
var breadcrumb = document.getElementById('address-bar');
|
||||
var breadcrumbInst = (getComponent(breadcrumb as HTMLElement, 'breadcrumb') as Breadcrumb);
|
||||
breadcrumbInst.items = initialBreadcrumbItems;
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
<div class="col-lg-12 control-section">
|
||||
<div class="content-wrapper">
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-10 col-md-12">
|
||||
<h5>Bind to Location</h5>
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<h5 style="display: inline-block">Bind to Location</h5>
|
||||
<button id="reset" class="reset-btn">Reset State</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row material2">
|
||||
|
|
@ -12,7 +13,7 @@
|
|||
</div>
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-10 col-md-12">
|
||||
<h5>URL Binding</h5>
|
||||
<h5>URL Binding and Navigation</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row material2">
|
||||
|
|
@ -24,11 +25,12 @@
|
|||
</div>
|
||||
|
||||
<div id="action-description">
|
||||
<p> This sample demonstrates the Navigation functionality of the <b>Breadcrumb</b> component.</p>
|
||||
<p> This sample demonstrates the navigation functionality of the <b>Breadcrumb</b> component.</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>The <code>Breadcrumb</code> component can be rendered by using the href(url) of the current page or by using <code>url</code> property when the user is not specified the breadcrumb items using <code>items</code> property.</p>
|
||||
<p>More information about <code>Breadcrumb</code> component navigations feature can be found in this <a target='_blank' href="https://ej2.syncfusion.com/documentation/breadcrumb/getting-started/">documentation section</a>.</p>
|
||||
<p>The <code>Breadcrumb</code> component can be rendered by using the href(URL) of the current page or by using <code>url</code> property when the user is not specified the breadcrumb items using <code>items</code> property.
|
||||
In this demonstration, URL navigation is enabled for bind to location sample and <code>beforeItemRender</code> event is used to customize rendering Breadcrumb item.</p>
|
||||
<p>More information about Breadcrumb component navigations feature can be found in this <a target='_blank' href="https://ej2.syncfusion.com/documentation/breadcrumb/data-binding/#items-based-on-current-url">documentation section</a>.</p>
|
||||
</div>
|
||||
<!-- custom code start -->
|
||||
<style>
|
||||
|
|
@ -74,5 +76,10 @@
|
|||
.highcontrast .e-breadcrumb {
|
||||
margin-left: -4px;
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
float: right;
|
||||
margin: 5px 2px 5px 0;
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end -->
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { Breadcrumb } from '@syncfusion/ej2-navigations';
|
||||
import { Breadcrumb, BreadcrumbBeforeItemRenderEventArgs } from '@syncfusion/ej2-navigations';
|
||||
import { getComponent } from '@syncfusion/ej2-base';
|
||||
import { Button } from '@syncfusion/ej2-buttons';
|
||||
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
|
|
@ -8,8 +10,30 @@ import { Breadcrumb } from '@syncfusion/ej2-navigations';
|
|||
enableNavigation: false
|
||||
}, '#bind-to-location');
|
||||
|
||||
var url = 'https://ej2.syncfusion.com/demos/#/bootstrap5/breadcrumb/bind-to-location.html',
|
||||
themeName = url.split('/')[5];
|
||||
new Breadcrumb({
|
||||
enableNavigation: false,
|
||||
url: "https://ej2.syncfusion.com/demos/breadcrumb/navigation"
|
||||
url: url,
|
||||
beforeItemRender: (args: BreadcrumbBeforeItemRenderEventArgs) => {
|
||||
if (args.item.text == 'demos') {
|
||||
args.item.url = args.item.url + '/#/' + themeName;
|
||||
}
|
||||
else if (args.item.text == 'breadcrumb') {
|
||||
args.item.url = 'https://ej2.syncfusion.com/demos/#/bootstrap5/breadcrumb/default.html'
|
||||
}
|
||||
else if (args.item.text == '#' || args.item.text == themeName) {
|
||||
args.cancel = true;
|
||||
}
|
||||
}
|
||||
}, '#url-binding');
|
||||
|
||||
// To refresh Breadcrumb control state when reset button clicked
|
||||
new Button({ cssClass: 'e-small' }, '#reset').element.onclick = () => {
|
||||
var breadcrumb, breadcrumbInst, breadcrumbs = document.querySelector('.content-wrapper').getElementsByClassName("e-breadcrumb");
|
||||
for (var i = 0; i < breadcrumbs.length; i++) {
|
||||
breadcrumb = breadcrumbs[i];
|
||||
breadcrumbInst = (getComponent(breadcrumb as HTMLElement, 'breadcrumb') as Breadcrumb);
|
||||
breadcrumbInst.activeItem = breadcrumbInst.items[breadcrumbInst.items.length - 1].text;
|
||||
}
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
<div class="control-section">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-wrapper">
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<h5>Simple Breadcrumb</h5>
|
||||
<h5 style="display: inline-block">Simple Breadcrumb</h5>
|
||||
<button id="reset" class="reset-btn">Reset State</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row material2">
|
||||
|
|
@ -33,23 +34,18 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>This sample demonstrates the basic rendering, overflow feature and navigable active item of the <b>Breadcrumb</b> component with icon support.</p>
|
||||
<p>This sample demonstrates the basic rendering, overflow feature and navigable active item of the <b>Breadcrumb</b> component with icon support. Click the <b>Reset State</b> button to refresh Breadcrumb component states.</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>The <code>Breadcrumb</code> component is used as a navigational aid to identify the current page location within the navigational hierarchy structure of websites. It has list of items that can be populated using the <code>items</code> property.</p>
|
||||
<p><b>Simple Breadcrumb</b></p>
|
||||
<p>In this sample, the <code>Breadcrumb</code> is populated with Text, Icon, and Url.</p>
|
||||
<p>In this sample, the Breadcrumb is populated with text, icon, and URL.</p>
|
||||
<p><b>Breadcrumb with Overflow</b></p>
|
||||
<p>In the <code>Breadcrumb</code> component, <code>maxItems</code> and <code>overflowMode</code> properties were used to limit the number of breadcrumb items to be displayed.</p>
|
||||
<p>The following overflow mode's were available in the <code>Breadcrumb</code> component.</p>
|
||||
<ul>
|
||||
<li><code>Default</code> - Specified maxItems count will be visible and the remaining items will be hidden. While clicking on the previous item, the hidden item will become visible.</li>
|
||||
<li><code>Collapsed</code> - Only the first and last items will be visible, and the remaining items will be hidden in the collapsed icon. When the collapsed icon is clicked, all items become visible.</li>
|
||||
</ul>
|
||||
<p>In this sample, the maxItems is set as 3 with overflowMode as Default. To prevent breadcrumb item navigation we have set <code>false</code> in <code>enableNavigation</code> property of <code>Breadcrumb</code> component.</p>
|
||||
<p>In the Breadcrumb component, <code>maxItems</code> and <code>overflowMode</code> properties were used to limit the number of breadcrumb items to be displayed.</p>
|
||||
<p>In this sample, the <code>maxItems</code> is set as <code>3</code> with <code>overflowMode</code> as <code>Menu</code>. To prevent breadcrumb item navigation we have set <code>false</code> in <code>enableNavigation</code> property of Breadcrumb component.</p>
|
||||
<p><b>Active Last Breadcrumb</b></p>
|
||||
<p>In this sample, navigation for the last item is enabled by using <code>enableActiveItemNavigation</code> property.</p>
|
||||
<p>More information about <code>Breadcrumb</code> component can be found in this <a target='_blank' href="https://ej2.syncfusion.com/documentation/breadcrumb/getting-started/">documentation section</a>.</p>
|
||||
<p>More information about Breadcrumb component can be found in this <a target='_blank' href="https://ej2.syncfusion.com/documentation/breadcrumb/getting-started/">documentation section</a>.</p>
|
||||
</div>
|
||||
<!-- custom code start -->
|
||||
<style>
|
||||
|
|
@ -95,6 +91,11 @@
|
|||
.highcontrast .e-breadcrumb {
|
||||
margin-left: -4px;
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
float: right;
|
||||
margin: 5px 2px 5px 0;
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end -->
|
||||
<style>
|
||||
|
|
@ -136,4 +137,4 @@
|
|||
font-weight: 800;
|
||||
font-size: 9px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { getComponent } from '@syncfusion/ej2-base';
|
||||
import { Button } from '@syncfusion/ej2-buttons';
|
||||
import { BreadcrumbItemModel, Breadcrumb } from '@syncfusion/ej2-navigations';
|
||||
|
||||
(window as any).default = (): void => {
|
||||
|
|
@ -26,7 +28,7 @@ import { BreadcrumbItemModel, Breadcrumb } from '@syncfusion/ej2-navigations';
|
|||
let overflowItems: BreadcrumbItemModel[] = [
|
||||
{
|
||||
text: "Home",
|
||||
url: "../"
|
||||
url: "./"
|
||||
},
|
||||
{
|
||||
text: "Breadcrumb",
|
||||
|
|
@ -82,4 +84,14 @@ import { BreadcrumbItemModel, Breadcrumb } from '@syncfusion/ej2-navigations';
|
|||
enableNavigation: false,
|
||||
enableActiveItemNavigation: true
|
||||
}, '#active-item');
|
||||
|
||||
// To refresh all Breadcrumb control state when reset button clicked
|
||||
new Button({ cssClass: 'e-small' }, '#reset').element.onclick = () => {
|
||||
var breadcrumb, breadcrumbInst, breadcrumbs = document.querySelector('.content-wrapper').getElementsByClassName("e-breadcrumb");
|
||||
for (var i = 0; i < breadcrumbs.length; i++) {
|
||||
breadcrumb = breadcrumbs[i];
|
||||
breadcrumbInst = (getComponent(breadcrumb as HTMLElement, 'breadcrumb') as Breadcrumb);
|
||||
breadcrumbInst.activeItem = breadcrumbInst.items[breadcrumbInst.items.length - 1].text;
|
||||
}
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,7 +3,8 @@
|
|||
<div class="content-wrapper">
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<h5>Breadcrumb with Events</h5>
|
||||
<h5 style="display: inline-block">Breadcrumb with Events</h5>
|
||||
<button id="reset" class="reset-btn">Reset State</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row material2">
|
||||
|
|
@ -40,9 +41,9 @@
|
|||
<ul>
|
||||
<li>created - Triggers when the Breadcrumb is created.</li>
|
||||
<li>itemClick - Triggers when a Breadcrumb item is clicked.</li>
|
||||
<li>beforeItemRender - Triggers while rendering each Breadcrumb item.</li>
|
||||
<li>beforeItemRender - Triggers while rendering each Breadcrumb item and separator.</li>
|
||||
</ul>
|
||||
<p>More information about <code>Breadcrumb</code> component can be found in this <a target='_blank' href="https://ej2.syncfusion.com/documentation/breadcrumb/getting-started/">documentation section</a>.</p>
|
||||
<p>More information about Breadcrumb component can be found in this <a target='_blank' href="https://ej2.syncfusion.com/documentation/breadcrumb/getting-started/">documentation section</a>.</p>
|
||||
</div>
|
||||
<!-- custom code start -->
|
||||
<style>
|
||||
|
|
@ -96,6 +97,11 @@ hr {
|
|||
.highcontrast .e-breadcrumb {
|
||||
margin-left: -4px;
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
float: right;
|
||||
margin: 5px 2px 5px 0;
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end -->
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { BreadcrumbItemModel, Breadcrumb, BreadcrumbClickEventArgs, BreadcrumbBeforeItemRenderEventArgs } from '@syncfusion/ej2-navigations';
|
||||
import { Button } from '@syncfusion/ej2-buttons';
|
||||
import { getComponent } from '@syncfusion/ej2-base';
|
||||
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
|
|
@ -53,8 +54,18 @@ let items: BreadcrumbItemModel[] = [
|
|||
|
||||
function logEvent(eventName: string): void {
|
||||
let span: HTMLElement = document.createElement('span');
|
||||
span.innerHTML = 'Breadcrumb <b>' + eventName + '</b> event called<hr>';
|
||||
span.innerHTML = 'Breadcrumb <b>' + eventName + '</b> event is triggered<hr>';
|
||||
let log: HTMLElement = document.getElementById('EventLog');
|
||||
log.insertBefore(span, log.firstChild);
|
||||
}
|
||||
|
||||
// To refresh Breadcrumb control state when reset button clicked
|
||||
new Button({ cssClass: 'e-small' }, '#reset').element.onclick = () => {
|
||||
var breadcrumb, breadcrumbInst, breadcrumbs = document.querySelector('.content-wrapper').getElementsByClassName("e-breadcrumb");
|
||||
for (var i = 0; i < breadcrumbs.length; i++) {
|
||||
breadcrumb = breadcrumbs[i];
|
||||
breadcrumbInst = (getComponent(breadcrumb as HTMLElement, 'breadcrumb') as Breadcrumb);
|
||||
breadcrumbInst.activeItem = breadcrumbInst.items[breadcrumbInst.items.length -1].text;
|
||||
}
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@
|
|||
<div class="content-wrapper">
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<h5>Simple Breadcrumb</h5>
|
||||
<h5 style="display: inline-block">Simple Breadcrumb</h5>
|
||||
<button id="reset" class="reset-btn">Reset State</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row material2">
|
||||
|
|
@ -14,7 +15,7 @@
|
|||
</div>
|
||||
|
||||
<div id="action-description">
|
||||
<p> This sample demonstrates the Keyboard Navigation functionalities of the <b>Breadcrumb</b> component.</p>
|
||||
<p> This sample demonstrates the keyboard navigation functionalities of the <b>Breadcrumb</b> component.</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>The <code>Breadcrumb</code> component can be interacted with keyboard navigation. Below key combinations can be used in Breadcrumb to initiate various actions.</p>
|
||||
|
|
@ -23,7 +24,7 @@
|
|||
<li><b>Shift + Tab</b> to navigate to the previous item.</li>
|
||||
<li><b>Enter</b> to click the item.</li>
|
||||
</ul>
|
||||
<p>More information about <code>Breadcrumb</code> component Keyboard navigations can be found in this <a target='_blank' href="https://ej2.syncfusion.com/documentation/breadcrumb/getting-started/">documentation section</a>.</p>
|
||||
<p>More information about Breadcrumb component keyboard navigations can be found in this <a target='_blank' href="https://ej2.syncfusion.com/documentation/breadcrumb/getting-started/">documentation section</a>.</p>
|
||||
</div>
|
||||
<!-- custom code start -->
|
||||
<style>
|
||||
|
|
@ -69,5 +70,10 @@
|
|||
.highcontrast .e-breadcrumb {
|
||||
margin-left: -4px;
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
float: right;
|
||||
margin: 5px 2px 5px 0;
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end -->
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { getComponent } from '@syncfusion/ej2-base';
|
||||
import { Button } from '@syncfusion/ej2-buttons';
|
||||
import { Breadcrumb } from '@syncfusion/ej2-navigations';
|
||||
|
||||
(window as any).default = (): void => {
|
||||
|
|
@ -7,4 +9,11 @@ import { Breadcrumb } from '@syncfusion/ej2-navigations';
|
|||
new Breadcrumb({
|
||||
enableNavigation: false
|
||||
}, '#keyboard-navigation');
|
||||
|
||||
// To refresh Breadcrumb control state when reset button clicked
|
||||
new Button({ cssClass: 'e-small' }, '#reset').element.onclick = () => {
|
||||
var breadcrumb = document.getElementById('keyboard-navigation');
|
||||
var breadcrumbInst = (getComponent(breadcrumb as HTMLElement, 'breadcrumb') as Breadcrumb);
|
||||
breadcrumbInst.activeItem = breadcrumbInst.items[breadcrumbInst.items.length - 1].text;
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,126 @@
|
|||
<div class="control-section">
|
||||
<div class="content-wrapper">
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<h5 style="display: inline-block">Overflow Mode - Hidden</h5>
|
||||
<button id="reset" class="reset-btn">Reset State</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<nav id="default-mode"></nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<h5>Overflow Mode - Menu</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<nav id="menu-mode"></nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<h5>Overflow Mode - Collapsed</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<nav id="collapsed-mode"></nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<h5>Overflow Mode - Wrap</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<nav style="width:255px;" id="wrap-mode"></nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<h5>Overflow Mode - Scroll</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<nav style="width:300px;" id="scroll-mode"></nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>This sample demonstrates the different types of overflow mode such as <code>Hidden</code>, <code>Menu</code>, <code>Wrap</code>, <code>Collapsed</code>, and <code>Scroll</code> in the <b>Breadcrumb</b> component.</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>Overflow mode limits the number of items to be displayed in the view when the breadcrumb's width exceeds the container width or <code>maxItems</code> property.</p>
|
||||
<p>The following overflow mode's were available in the <code>Breadcrumb</code> component.</p>
|
||||
<ul>
|
||||
<li><code>Hidden</code> - Specified maxItems count will be visible and the remaining items will be hidden. While clicking on the previous item, the hidden item will become visible.</li>
|
||||
<li><code>Collapsed</code> - Only the first and last items will be visible, and the remaining items will be hidden with collapsed icon. When the collapsed icon is clicked, all the items become visible.</li>
|
||||
<li><code>Menu</code> - Shows the number of breadcrumb items that can be accommodated within the container space, and creates a sub menu with the remaining items.</li>
|
||||
<li><code>Wrap</code> - Wraps the items on multiple lines when the Breadcrumb’s width exceeds the container space.</li>
|
||||
<li><code>Scroll</code> - Shows an HTML scroll bar when the Breadcrumb’s width exceeds the container space.</li>
|
||||
<li><code>None</code> - Shows all the items on a single line.</li>
|
||||
</ul>
|
||||
<p>More information about Breadcrumb component can be found in this <a target='_blank' href="https://ej2.syncfusion.com/documentation/breadcrumb/overflow/">documentation section</a>.</p>
|
||||
</div>
|
||||
<!-- custom code start -->
|
||||
<style>
|
||||
.content-wrapper {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
min-width: 85px;
|
||||
}
|
||||
|
||||
.content-wrapper div.row {
|
||||
padding: 15px 0px;
|
||||
}
|
||||
|
||||
.content-wrapper div.row:nth-child(even) {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.content-wrapper {
|
||||
width: 92%;
|
||||
}
|
||||
|
||||
.col-xs-12,
|
||||
.col-xs-4,
|
||||
.col-xs-12 {
|
||||
padding: 10px 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content-wrapper div.row {
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.tailwind .e-breadcrumb,
|
||||
.tailwind-dark .e-breadcrumb {
|
||||
margin-left: -12px;
|
||||
}
|
||||
|
||||
.material .e-breadcrumb,
|
||||
.material-dark .e-breadcrumb {
|
||||
margin-left: -8px;
|
||||
}
|
||||
|
||||
.fabric .e-breadcrumb,
|
||||
.fabric-dark .e-breadcrumb,
|
||||
.highcontrast .e-breadcrumb {
|
||||
margin-left: -4px;
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
float: right;
|
||||
margin: 5px 2px 5px 0;
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end -->
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { getComponent } from '@syncfusion/ej2-base';
|
||||
import { Button } from '@syncfusion/ej2-buttons';
|
||||
import { BreadcrumbItemModel, Breadcrumb } from '@syncfusion/ej2-navigations';
|
||||
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
|
||||
let overflowItems: BreadcrumbItemModel[] = [
|
||||
{
|
||||
text: "Home",
|
||||
url: "./"
|
||||
},
|
||||
{
|
||||
text: "Breadcrumb",
|
||||
url: "./breadcrumb"
|
||||
},
|
||||
{
|
||||
text: "Default",
|
||||
url: "./breadcrumb/default"
|
||||
},
|
||||
{
|
||||
text: "Icons",
|
||||
url: "./breadcrumb/icons"
|
||||
},
|
||||
{
|
||||
text: "Navigation",
|
||||
url: "./breadcrumb/navigation"
|
||||
},
|
||||
{
|
||||
text: "Overflow",
|
||||
url: "./breadcrumb/overflow"
|
||||
}
|
||||
];
|
||||
|
||||
new Breadcrumb({
|
||||
items: overflowItems,
|
||||
maxItems: 3,
|
||||
overflowMode: 'Hidden',
|
||||
enableNavigation: false
|
||||
}, '#default-mode');
|
||||
|
||||
new Breadcrumb({
|
||||
items: overflowItems,
|
||||
maxItems: 3,
|
||||
overflowMode: 'Menu',
|
||||
enableNavigation: false
|
||||
}, '#menu-mode');
|
||||
|
||||
new Breadcrumb({
|
||||
items: overflowItems,
|
||||
maxItems: 3,
|
||||
overflowMode: 'Collapsed',
|
||||
enableNavigation: false
|
||||
}, '#collapsed-mode');
|
||||
|
||||
new Breadcrumb({
|
||||
items: overflowItems,
|
||||
overflowMode: 'Wrap',
|
||||
enableNavigation: false
|
||||
}, '#wrap-mode');
|
||||
|
||||
new Breadcrumb({
|
||||
items: overflowItems,
|
||||
overflowMode: 'Scroll',
|
||||
enableNavigation: false
|
||||
}, '#scroll-mode');
|
||||
|
||||
// To refresh all Breadcrumb control state when reset button clicked
|
||||
new Button({ cssClass: 'e-small' }, '#reset').element.onclick = () => {
|
||||
var breadcrumb, breadcrumbInst, breadcrumbs = document.querySelector('.content-wrapper').getElementsByClassName("e-breadcrumb");
|
||||
for (var i = 0; i < breadcrumbs.length; i++) {
|
||||
breadcrumb = breadcrumbs[i];
|
||||
breadcrumbInst = (getComponent(breadcrumb as HTMLElement, 'breadcrumb') as Breadcrumb);
|
||||
breadcrumbInst.activeItem = breadcrumbInst.items[breadcrumbInst.items.length - 1].text;
|
||||
}
|
||||
};
|
||||
};
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
"directory": "breadcrumb",
|
||||
"category": "Navigation",
|
||||
"ftName" :"breadcrumb",
|
||||
"type": "preview",
|
||||
"type": "update",
|
||||
"samples": [
|
||||
{
|
||||
"url": "default",
|
||||
|
|
@ -16,6 +16,7 @@
|
|||
"url": "bind-to-location",
|
||||
"name": "Bind to Location",
|
||||
"category": "Breadcrumb",
|
||||
"type": "update",
|
||||
"api":{"Breadcrumb":["url"]},
|
||||
"description": "This example demonstrates the binding of current url location to the items and items based on static url of Syncfusion JavaScript Breadcrumb component."
|
||||
},
|
||||
|
|
@ -26,6 +27,14 @@
|
|||
"api":{ "Breadcrumb":["items", "cssClass", "itemTemplate", "separatorTemplate"], "BreadcrumbItem": ["text", "iconCss"] },
|
||||
"description": "This example demonstrates how to customize item and separator by using templates, disable, add icon for item, with the Syncfusion JavaScript Breadcrumb component."
|
||||
},
|
||||
{
|
||||
"url": "overflow-modes",
|
||||
"name": "Overflow Modes",
|
||||
"category": "Breadcrumb",
|
||||
"type": "new",
|
||||
"api":{ "Breadcrumb":["items", "width", "overflowMode"], "BreadcrumbItem": ["text", "url"] },
|
||||
"description": "This example demonstrates different types of overflow mode such as Menu, Wrap, Collapsed, Scroll, and None in the Syncfusion JavaScript Breadcrumb component."
|
||||
},
|
||||
{
|
||||
"url": "events",
|
||||
"name": "Events",
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@
|
|||
<div class="content-wrapper">
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<h5>Custom Breadcrumb</h5>
|
||||
<h5 style="display: inline-block">Custom Breadcrumb</h5>
|
||||
<button id="reset" class="reset-btn">Reset State</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row material2">
|
||||
|
|
@ -98,15 +99,15 @@
|
|||
</p>
|
||||
<p>The icons are used for the visual representation of the breadcrumb items. You can specify the
|
||||
<code>iconCss</code> property to display the icon within the corresponding breadcrumb item. By default, the icons are aligned in the left position.</p>
|
||||
<p>You can enable or disable the entire Breadcrumb by adding/removing the <b>e-disabled</b> class by using <code>cssClass</code> property.
|
||||
<p>You can enable or disable the entire Breadcrumb using <code>disabled</code> property.
|
||||
</p>
|
||||
<p>In this demo, we have used Shopping Cart details as Breadcrumb Items and customized the items using
|
||||
<code>itemTemplate</code> and <code>separatorTemplate</code>.</p>
|
||||
<p>And, showcased the file path of the config.json file with icons using the <code>iconCss</code> property and
|
||||
disabled the specific Breadcrumb items by adding <b>e-disabled</b> class to the item element in <code>beforeItemRender</code> event.</p>
|
||||
<p>More information about <code>Breadcrumb</code> component template feature can be found in this <a
|
||||
disabled the specific Breadcrumb items in <code>beforeItemRender</code> event using item <code>disabled</code> property.</p>
|
||||
<p>More information about Breadcrumb component template feature can be found in this <a
|
||||
target='_blank'
|
||||
href="https://ej2.syncfusion.com/documentation/breadcrumb/getting-started/">documentation section</a>.
|
||||
href="https://ej2.syncfusion.com/documentation/breadcrumb/templates/">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
@ -265,10 +266,15 @@
|
|||
|
||||
.e-searchfor-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.e-searchfor-text .e-breadcrumb-text {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.e-bigger .e-searchfor-text {
|
||||
font-size: 16px
|
||||
}
|
||||
|
|
@ -288,6 +294,11 @@
|
|||
.e-specific-item-template .e-breadcrumb-item:last-child a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
float: right;
|
||||
margin: 5px 2px 5px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- custom code start -->
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { getComponent } from '@syncfusion/ej2-base';
|
||||
import { Button } from '@syncfusion/ej2-buttons';
|
||||
import { BreadcrumbItemModel, Breadcrumb, BreadcrumbBeforeItemRenderEventArgs } from '@syncfusion/ej2-navigations';
|
||||
|
||||
(window as any).default = (): void => {
|
||||
|
|
@ -89,8 +91,18 @@ import { BreadcrumbItemModel, Breadcrumb, BreadcrumbBeforeItemRenderEventArgs }
|
|||
items: iconItems,
|
||||
beforeItemRender: (args: BreadcrumbBeforeItemRenderEventArgs) => {
|
||||
if(args.item.text !== 'Program Files') {
|
||||
args.element.classList.add('e-disabled');
|
||||
args.item.disabled = true;
|
||||
}
|
||||
}
|
||||
}, '#disabled');
|
||||
|
||||
// To refresh all Breadcrumb control state when reset button clicked
|
||||
new Button({ cssClass: 'e-small' }, '#reset').element.onclick = () => {
|
||||
var breadcrumb, breadcrumbInst, breadcrumbs = document.querySelector('.content-wrapper').getElementsByClassName("e-breadcrumb");
|
||||
for (var i = 0; i < breadcrumbs.length; i++) {
|
||||
breadcrumb = breadcrumbs[i];
|
||||
breadcrumbInst = (getComponent(breadcrumb as HTMLElement, 'breadcrumb') as Breadcrumb);
|
||||
breadcrumbInst.activeItem = breadcrumbInst.items[breadcrumbInst.items.length -1].text;
|
||||
}
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -249,6 +249,11 @@
|
|||
.tailwind-dark .card-control-section.reveal_card_layout .e-card .e-reveal-icon:before{
|
||||
content: "\e76f";
|
||||
}
|
||||
|
||||
.bootstrap5 .card-control-section.reveal_card_layout .e-card .e-reveal-icon:before,
|
||||
.bootstrap5-dark .card-control-section.reveal_card_layout .e-card .e-reveal-icon:before {
|
||||
content: "\e71c";
|
||||
}
|
||||
|
||||
.card-control-section.reveal_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
<div class="control-section">
|
||||
<div id="container" align="center"></div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample visualizes the company performance with default column chart in right-to-left(RTL) direction.
|
||||
The values of the data points are displayed in a tooltip, and the legend in the sample displays information about the series.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
Right-to-left(RTL) is used to render the component from right to left direction and it can be enabled by setting <code>enableRtl</code> property as <b>true</b>.
|
||||
In this demo, you can see <code>axis</code>, <code>data points</code>, <code>tooltip</code> and <code>legend</code> are aligned from right to left direction.
|
||||
</p>
|
||||
<p>
|
||||
<code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
|
||||
</p>
|
||||
<p><b>Injecting Module</b></p>
|
||||
<p>
|
||||
Chart component features are segregated into individual feature-wise modules. To use column series, we need to inject
|
||||
<code>ColumnSeries</code> module using <code>Chart.Inject(ColumnSeries)</code> method.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
#control-container {
|
||||
padding: 0px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { ChartTheme, Chart, ColumnSeries, Category, Legend, DataLabel, Tooltip,
|
||||
ILoadedEventArgs, IAxisLabelRenderEventArgs, } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(ColumnSeries, DataLabel, Category, Legend, Tooltip);
|
||||
import { Browser, EmitType } from '@syncfusion/ej2-base';
|
||||
|
||||
/**
|
||||
* Sample for Column Series
|
||||
*/
|
||||
let labelRender: EmitType<IAxisLabelRenderEventArgs> = (args: IAxisLabelRenderEventArgs): void => {
|
||||
if (args.axis.orientation === 'Horizontal') {
|
||||
args.cancel = args.value === 2015 || args.value === 2020;
|
||||
}
|
||||
};
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let chart: Chart = new Chart({
|
||||
//Initializing Primary X and Y Axis
|
||||
primaryXAxis: {
|
||||
valueType: 'Double', majorGridLines: { width: 0 },
|
||||
minimum: 2015, maximum: 2020, interval: 1
|
||||
},
|
||||
primaryYAxis:
|
||||
{
|
||||
valueType: 'Double', minimum: 0, maximum: 1200, interval: 200,
|
||||
lineStyle: { width: 0 },labelFormat: '{value}B'
|
||||
},
|
||||
chartArea: { border: { width: 0 } },
|
||||
//Initializing Chart Series
|
||||
series: [
|
||||
{
|
||||
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Sales',
|
||||
dataSource: [{ x: 2016, y: 1000 }, { x: 2017, y: 970}, { x: 2018, y: 1060 }, { x: 2019, y: 1030 }]
|
||||
},
|
||||
{
|
||||
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Expense',
|
||||
dataSource: [{ x: 2016, y: 400 }, { x: 2017, y: 360 }, { x: 2018, y: 920 }, { x: 2019, y: 540 }]
|
||||
},
|
||||
{
|
||||
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Profit',
|
||||
dataSource: [{ x: 2016, y: 600 }, { x: 2017, y: 610 }, { x: 2018, y: 140 }, { x: 2019, y: 490 }]
|
||||
}
|
||||
],
|
||||
//Initializing Chart title
|
||||
width: Browser.isDevice ? '100%' : '60%',
|
||||
enableRtl: true,
|
||||
title: 'Company Performance', tooltip: { enable: true },
|
||||
axisLabelRender: labelRender,
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.chart.theme = <ChartTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
|
|
@ -156,7 +156,7 @@
|
|||
</div>
|
||||
</script>
|
||||
<script id='Male-MaterialDark' type="text/x-template">
|
||||
<div id='templateWrap' style="background-color:#00bdae;border-radius: 3px;">
|
||||
<div id='templateWrap' style="background-color:#9ECB08;border-radius: 3px;">
|
||||
<img src='src/chart/images/male.png' />
|
||||
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
|
||||
<span>${point.y}M </span>
|
||||
|
|
@ -164,7 +164,7 @@
|
|||
</div>
|
||||
</script>
|
||||
<script id='Female-MaterialDark' type="text/x-template">
|
||||
<div id='templateWrap' style="background-color:#404041;border-radius: 3px;">
|
||||
<div id='templateWrap' style="background-color: #56AEFF;border-radius: 3px;">
|
||||
<img src='src/chart/images/female.png' />
|
||||
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
|
||||
<span>${point.y}M </span>
|
||||
|
|
|
|||
|
|
@ -102,6 +102,11 @@ AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationTooltip, Acc
|
|||
textRender: (args: IAccTextRenderEventArgs) => { args.text = args.point.x + ' ' + args.point.y + ' %'; },
|
||||
tooltip: { enable: false, format: '${point.x} <br> ${point.y} %' },
|
||||
title: 'Automobile Sales by Category',
|
||||
chartMouseMove: (args: IMouseEventArgs) => {
|
||||
if (args.target.indexOf("container_Series_0_") > -1) {
|
||||
document.getElementById(args.target).style.cursor = "pointer";
|
||||
}
|
||||
},
|
||||
load: (args: IAccLoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
<div class="control-section">
|
||||
<div id="container" align="center"></div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample visualizes the Olympic medal count using grouped column series. Data labels are used to display the values of data points.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure the column type charts.
|
||||
Column type charts are used for comparing the frequency, count, total or average of data in different categories.
|
||||
You can group the column series by using <code>groupName</code> property.
|
||||
</p>
|
||||
<p>
|
||||
<code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
|
||||
</p>
|
||||
<p><b>Injecting Module</b></p>
|
||||
<p>
|
||||
Chart component features are segregated into individual feature-wise modules. To use column series, we need to inject
|
||||
<code>ColumnSeries</code> module using <code>Chart.Inject(ColumnSeries)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on the column series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/chart-types/#column-chart">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
#control-container {
|
||||
padding: 0px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { ChartTheme, Chart, ColumnSeries, Category, Legend, DataLabel, Tooltip, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(ColumnSeries, DataLabel, Category, Legend, Tooltip);
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
|
||||
/**
|
||||
* Sample for Column Series
|
||||
*/
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let chart: Chart = new Chart({
|
||||
//Initializing Primary X and Y Axis
|
||||
primaryXAxis: {
|
||||
valueType: 'Category', interval: 1, majorGridLines: { width: 0 }
|
||||
},
|
||||
chartArea: { border: { width: 0 } },
|
||||
primaryYAxis:
|
||||
{
|
||||
majorGridLines: { width: 0 }, majorTickLines: { width: 0 },
|
||||
lineStyle: { width: 0 }, labelStyle: { color: 'transparent' }
|
||||
},
|
||||
//Initializing Chart Series
|
||||
series: [
|
||||
{
|
||||
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'USA Total', groupName: 'USA', columnWidth: 0.7,
|
||||
dataSource: [{ x: '2012', y: 104 }, { x: '2016', y: 121 }, { x: '2020', y: 113 }], columnSpacing: 0.1,
|
||||
marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }
|
||||
},
|
||||
{
|
||||
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'USA Gold', groupName: 'USA', columnWidth: 0.5,
|
||||
dataSource: [{ x: '2012', y: 46 }, { x: '2016', y: 46 }, { x: '2020', y: 39 }], columnSpacing: 0.1,
|
||||
marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }
|
||||
},
|
||||
{
|
||||
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'UK Total', groupName: 'UK', columnWidth: 0.7,
|
||||
dataSource: [{ x: '2012', y: 65 }, { x: '2016', y: 67 },{ x: '2020', y: 65 }], columnSpacing: 0.1,
|
||||
marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }
|
||||
},
|
||||
{
|
||||
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'UK Gold', groupName: 'UK', columnWidth: 0.5,
|
||||
dataSource: [{ x: '2012', y: 29 }, { x: '2016', y: 27 },{ x: '2020', y: 22 }], columnSpacing: 0.1,
|
||||
marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }
|
||||
},
|
||||
{
|
||||
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'China Total', groupName: 'China', columnWidth: 0.7,
|
||||
dataSource: [{ x: '2012', y: 91 }, { x: '2016', y: 70 },{ x: '2020', y: 88 }], columnSpacing: 0.1,
|
||||
marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }
|
||||
},
|
||||
{
|
||||
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'China Gold', groupName: 'China', columnWidth: 0.5,
|
||||
dataSource: [{ x: '2012', y: 38 }, { x: '2016', y: 26 },{ x: '2020', y: 38 }], columnSpacing: 0.1,
|
||||
marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }
|
||||
},
|
||||
],
|
||||
//Initializing Chart title
|
||||
width: Browser.isDevice ? '100%' : '60%',
|
||||
title: 'Olympics Medal Tally', tooltip: { enable: true },
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.chart.theme = <ChartTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
|
|
@ -45,8 +45,8 @@ this.renderChart = (chartData: Object[]): void => {
|
|||
majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: 80, maximum: 120, interval: 20,
|
||||
majorTickLines: { width: 0 }, title: 'Momentum', stripLines: [
|
||||
{
|
||||
start: 80, end: 120, text: '', color: 'black', visible: true,
|
||||
opacity: 0.03, zIndex: 'Behind'
|
||||
start: 80, end: 120, text: '', color: '#6063ff', visible: true,
|
||||
opacity: 0.1, zIndex: 'Behind'
|
||||
}]
|
||||
}],
|
||||
//Initializing Chart Series
|
||||
|
|
|
|||
|
|
@ -44,8 +44,8 @@ this.renderChart = (chartData: Object[]): void => {
|
|||
majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: -3.5, maximum: 3.5, interval: 3.5,
|
||||
majorTickLines: { width: 0 }, title: 'MACD', stripLines: [
|
||||
{
|
||||
start: -3.5, end: 3.5, text: '', color: 'black', visible: true,
|
||||
opacity: 0.03, zIndex: 'Behind'
|
||||
start: -3.5, end: 3.5, text: '', color: '#6063ff', visible: true,
|
||||
opacity: 0.1, zIndex: 'Behind'
|
||||
}]
|
||||
}],
|
||||
//Initializing Chart Series
|
||||
|
|
|
|||
|
|
@ -3,13 +3,18 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample compares countries by population density and total area by using the various radius in pie series.
|
||||
This sample compares countries by population density and total area by using various radius in pie series.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p> In this example, you can see how to render doughnut chart with different radius. You can use <code>radius</code> mapping property to achieve this feature.<code>dataLabel</code> is used to represent individual data and its value.
|
||||
<p> <code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
|
||||
<p style="font-weight: 500">Injecting Module</p>
|
||||
<p>
|
||||
In this example, you can see how to render doughnut chart with different radius. You can use <code>radius</code> mapping property to achieve this feature. <code>dataLabel</code> is used to represent individual data and its value.
|
||||
In addition, the sample shows how to shift the order of the legend for the doughnut chart by using the <code>reverse</code> property.
|
||||
</p>
|
||||
<p>
|
||||
<code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
|
||||
</p>
|
||||
<p><b>Injecting Module</b></p>
|
||||
<p>
|
||||
AccumulationChart component features are segregated into individual feature-wise modules. To use legend, we need to Inject
|
||||
<code>AccumulationLegend</code> module using <code>AccumulationChart.Inject(AccumulationLegend)</code> method.
|
||||
|
|
|
|||
|
|
@ -37,9 +37,11 @@ AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationTooltip, Acc
|
|||
enableSmartLabels: true,
|
||||
legendSettings: {
|
||||
visible: true,
|
||||
reverse: true
|
||||
},
|
||||
useGroupingSeparator: true,
|
||||
// Initialize tht tooltip
|
||||
tooltip: { enable: true, format: '${point.x} : <b>${point.y}</b>' },
|
||||
tooltip: { enable: true },
|
||||
enableAnimation: true,
|
||||
load: (args: IAccLoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
|
|
|
|||
|
|
@ -45,8 +45,8 @@ this.renderChart = (chartData: Object[]): void => {
|
|||
majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: 0, maximum: 120, interval: 60,
|
||||
majorTickLines: { width: 0 }, title: 'RSI', stripLines: [
|
||||
{
|
||||
start: 0, end: 120, text: '', color: 'black', visible: true,
|
||||
opacity: 0.03, zIndex: 'Behind'
|
||||
start: 0, end: 120, text: '', color: '#6063ff', visible: true,
|
||||
opacity: 0.1, zIndex: 'Behind'
|
||||
}]
|
||||
}],
|
||||
//Initializing Chart Series
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
{
|
||||
"name": "Chart",
|
||||
"directory": "chart",
|
||||
"type":"update",
|
||||
"category": "Data Visualization",
|
||||
"ftName": "chart",
|
||||
"samples": [
|
||||
|
|
@ -279,6 +280,22 @@
|
|||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"url": "grouped-column",
|
||||
"name": "Grouped Column",
|
||||
"type": "new",
|
||||
"description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the grouping in column series.",
|
||||
"category": "Bar Charts",
|
||||
"api": {
|
||||
"Chart": [
|
||||
"primaryXAxis",
|
||||
"primaryYAxis",
|
||||
"series",
|
||||
"tooltip",
|
||||
"legendSettings"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"url": "rounded-column",
|
||||
"name": "Rounded Column",
|
||||
|
|
@ -785,6 +802,7 @@
|
|||
{
|
||||
"url": "pie-radius",
|
||||
"name": "Pie with Various Radius",
|
||||
"type": "update",
|
||||
"description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the various radius pie chart.",
|
||||
"category": "Accumulation Charts",
|
||||
"api": {
|
||||
|
|
@ -1260,7 +1278,23 @@
|
|||
"tooltip"
|
||||
]
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
"url": "RTL",
|
||||
"name": "RTL",
|
||||
"type": "new",
|
||||
"description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the RTL feature in chart.",
|
||||
"category": "Chart Customization",
|
||||
"api": {
|
||||
"Chart": [
|
||||
"primaryXAxis",
|
||||
"primaryYAxis",
|
||||
"series",
|
||||
"tooltip",
|
||||
"legendSettings"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"url": "pie-annotation",
|
||||
"name": "Annotation",
|
||||
|
|
@ -1387,6 +1421,7 @@
|
|||
{
|
||||
"url": "selection",
|
||||
"name": "Selection",
|
||||
"type": "update",
|
||||
"description": "This demo sample for Essential JavaScript2 Chart control demonstrates the selection behavior in chart.",
|
||||
"category": "User Interaction",
|
||||
"api": {
|
||||
|
|
|
|||
|
|
@ -6,6 +6,14 @@
|
|||
</div>
|
||||
<div class="col-md-4 property-section">
|
||||
<table id="property" title="Properties" style="width: 100%">
|
||||
<tr id='' style="height: 50px">
|
||||
<td style="width: 80%">
|
||||
<div> Enable Multi Selection:</div>
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox" id="select" style="margin-top: 15px">
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td style="width: 60%">
|
||||
<div>Selection Mode:</div>
|
||||
|
|
@ -18,14 +26,6 @@
|
|||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id='' style="height: 50px">
|
||||
<td style="width: 80%">
|
||||
<div> Enable Multi Selection:</div>
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox" id="select" style="margin-top: 15px">
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td style="width: 60%">
|
||||
<div>Selection Patterns:</div>
|
||||
|
|
@ -49,6 +49,14 @@
|
|||
<input type="checkbox" id="highlight" style="margin-top: 15px">
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td style="width: 60%">
|
||||
<div>Highlight Color:</div>
|
||||
</td>
|
||||
<td style="width: 40%;">
|
||||
<input id="color-picker" type="color">
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td style="width: 60%">
|
||||
<div>Highlight Patterns:</div>
|
||||
|
|
@ -69,16 +77,15 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample illustrates the selection feature in chart. To select a specific point, click the point. The selection mode can be changed by changing Selection Mode in panel. <code>Multiple selection</code> also can be enabled by <code>Enable MultipleSelection.</code>
|
||||
This sample demonstrates the selection behavior and its mode along with the highlight and highlight patterns in the chart.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="description">
|
||||
<p>
|
||||
This sample demonstrates the selection behavior in a chart. Any point or a series can be selected in a chart by clicking
|
||||
or touching the point. We can also select the point while loading chart through
|
||||
<code>selectedDataIndexes</code> properties. Click to select a point or series, click and drag to enable rectangular selection. Rectangular selection
|
||||
will return the collection point that are selected under the region.
|
||||
In this sample, any point or series can be selected in the chart by clicking on or touching the point. You can also change the selection mode by changing the <code>Selection Mode</code> option in the properties panel.
|
||||
You can enable multiple selections with the <code>Enable Multi Selection</code> option. You can also select a point while loading a chart using the <code>SelectedDataIndexes</code> option.
|
||||
While hovering the point, the point is highlighted using the <code>Enable Highlight</code> option, as well as you can set different highlight patterns and colors using the <code>Highlight Patterns</code> and <code>Highlight Color</code> option.
|
||||
</p>
|
||||
<p>
|
||||
Tap to select a point or series, double tap and drag to enable rectangular selection in touch enabled devices.
|
||||
|
|
@ -102,8 +109,7 @@
|
|||
<li>
|
||||
<code>Lasso</code> - Select free form of selection area points.</li>
|
||||
</ul>
|
||||
<br>
|
||||
<p style="font-weight: 500">Injecting Module</p>
|
||||
<p><b>Injecting Module</b></p>
|
||||
<p>
|
||||
Chart component features are segregated into individual feature-wise modules. To use selection feature, we need to inject
|
||||
<code>Selection</code> module using
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { Chart, Selection, SelectionMode, ColumnSeries, ChartTheme, SelectionPattern, Highlight } from '@syncfusion/ej2-charts';
|
||||
import { Legend, Category, ScatterSeries, ILoadedEventArgs, HighlightMode } from '@syncfusion/ej2-charts';
|
||||
import { ColorPicker, ColorPickerEventArgs } from '@syncfusion/ej2-inputs';
|
||||
Chart.Inject(Selection, Legend, ColumnSeries, Category, ScatterSeries, Highlight);
|
||||
import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
||||
|
||||
|
|
@ -39,6 +40,7 @@ import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
|||
],
|
||||
xName: 'x', width: 2,
|
||||
yName: 'y', name: 'Age 0-14',
|
||||
animation: { enable: false },
|
||||
},
|
||||
{
|
||||
type: 'Column',
|
||||
|
|
@ -49,6 +51,7 @@ import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
|||
],
|
||||
xName: 'x', width: 2,
|
||||
yName: 'y', name: 'Age 15-64',
|
||||
animation: { enable: false },
|
||||
},
|
||||
{
|
||||
type: 'Column',
|
||||
|
|
@ -59,6 +62,7 @@ import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
|||
],
|
||||
xName: 'x', width: 2,
|
||||
yName: 'y', name: 'Age 65 & Above',
|
||||
animation: { enable: false },
|
||||
}
|
||||
],
|
||||
//Initializing Chart title
|
||||
|
|
@ -118,6 +122,16 @@ import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
|||
}
|
||||
});
|
||||
highLight.appendTo('#highpattern');
|
||||
let colorPicker: ColorPicker = new ColorPicker(
|
||||
{
|
||||
value: 'null',
|
||||
mode: 'Palette',
|
||||
change: (args: ColorPickerEventArgs) => {
|
||||
chart.highlightColor = args.currentValue.hex;
|
||||
chart.dataBind();
|
||||
}
|
||||
});
|
||||
colorPicker.appendTo('#color-picker');
|
||||
document.getElementById('highlight').onchange = () => {
|
||||
let element: HTMLInputElement = <HTMLInputElement>(document.getElementById('highlight'));
|
||||
if (element.checked) {
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationDataLabel, A
|
|||
},
|
||||
}
|
||||
],
|
||||
enableAnimation: false,
|
||||
//Initializing Tooltip
|
||||
tooltip: { enable: true, format: '${point.x} : <b>${point.y}%</b>' },
|
||||
legendSettings: {
|
||||
|
|
|
|||
|
|
@ -44,8 +44,8 @@ this.renderChart = (chartData: Object[]): void => {
|
|||
majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: 0, maximum: 120, interval: 60,
|
||||
majorTickLines: { width: 0 }, title: 'Stochastic', stripLines: [
|
||||
{
|
||||
start: 0, end: 120, text: '', color: 'black', visible: true,
|
||||
opacity: 0.03, zIndex: 'Behind'
|
||||
start: 0, end: 120, text: '', color: '#6063ff', visible: true,
|
||||
opacity: 0.1, zIndex: 'Behind'
|
||||
}]
|
||||
}],
|
||||
//Initializing Chart Series
|
||||
|
|
|
|||
|
|
@ -38,20 +38,23 @@ export function gauge1(): CircularGauge {
|
|||
],
|
||||
annotations: [{
|
||||
angle: 270, radius: '50%', zIndex: '1',
|
||||
content: '<div id="minutes" style="width:75px;height:75px;"></div>'
|
||||
content: '<div id="minutes" style="width:75px;height:75px; font-family: Segoe UI;"></div>'
|
||||
}, {
|
||||
angle: 180, radius: '50%', zIndex: '1',
|
||||
content: '<div id="seconds" style="width:75px;height:75px;"></div>'
|
||||
content: '<div id="seconds" style="width:75px;height:75px; font-family: Segoe UI;"></div>'
|
||||
}, {
|
||||
angle: 90, zIndex: '1',
|
||||
radius: '40%',
|
||||
content: '<div id="hr" style="background-color:rgb(128,128,128); color:white;font-size:12px;">11:11 AM</div>'
|
||||
content: '<div id="hr" style="background-color:rgb(128,128,128); color:white;font-size:12px font-family: Segoe UI;;">11:11 AM</div>'
|
||||
}, {
|
||||
angle: 360, radius: '50%', zIndex: '1',
|
||||
content: '<div id="tm" style="font-size:10px;">21-06-17</div>'
|
||||
content: '<div id="tm" style="font-size:10px; font-family: Segoe UI;">21-06-17</div>'
|
||||
}],
|
||||
labelStyle: {
|
||||
hiddenLabel: 'First', autoAngle: false
|
||||
hiddenLabel: 'First', autoAngle: false,
|
||||
font: {
|
||||
fontFamily: 'Segoe UI'
|
||||
}
|
||||
}, majorTicks: {
|
||||
width: 2, height: 14, interval: 1
|
||||
}, minorTicks: {
|
||||
|
|
@ -148,7 +151,7 @@ export function gauge2(): CircularGauge {
|
|||
}, {
|
||||
angle: 360, zIndex: '1',
|
||||
radius: '35%',
|
||||
content: '<div id="tm" style="font-size:10px;">21-06-17</div>'
|
||||
content: '<div id="tm" style="font-size:10px; font-family: Segoe UI;">21-06-17</div>'
|
||||
}],
|
||||
labelStyle: {
|
||||
hiddenLabel: 'First',
|
||||
|
|
|
|||
|
|
@ -9,24 +9,24 @@
|
|||
<div class="subgauge" id="gauge2" style="float: left;margin-top: 3%"></div>
|
||||
<div class="content">
|
||||
<span class="firstcontent" style="font-size: 17px;">MOVE</span>
|
||||
<span class="firstcontent" style="font-size: 17px;color: #E7092E">65%</span><br />
|
||||
<span class="secondcontent" style="color: #E7092E; font-size: 19px">338/520 CAL</span>
|
||||
<span class="firstcontent" style="font-size: 17px;color: #fa114f;">65%</span><br />
|
||||
<span class="secondcontent" style="color: #fa114f; font-size: 19px">338/520 CAL</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel" id="panel2" align="center">
|
||||
<div class="subgauge" id="gauge3" style="float: left;margin-top: 3%"></div>
|
||||
<div class="content">
|
||||
<span class="firstcontent" style="font-size: 17px;">EXERCISE</span>
|
||||
<span class="firstcontent" style="font-size: 17px;color: #52E908">43%</span><br />
|
||||
<span class="secondcontent" style="color: #52E908; font-size: 19px">13/30 MIN</span>
|
||||
<span class="firstcontent" style="font-size: 17px;color: #99ff01;">43%</span><br />
|
||||
<span class="secondcontent" style="color: #99ff01;; font-size: 19px">13/30 MIN</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel" id="panel3" align="center">
|
||||
<div class="subgauge" id="gauge4" style="float: left;margin-top: 3%"></div>
|
||||
<div class="content">
|
||||
<span class="firstcontent" style="font-size: 17px;">STAND</span>
|
||||
<span class="firstcontent" style="font-size: 17px;color: #04CBF3">58%</span><br />
|
||||
<span class="secondcontent" style="color: #04CBF3; font-size: 19px">7/12 HR</span>
|
||||
<span class="firstcontent" style="font-size: 17px;color: #00d8fe">58%</span><br />
|
||||
<span class="secondcontent" style="color: #00d8fe; font-size: 19px">7/12 HR</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -127,5 +127,42 @@
|
|||
margin-top: 3% !important;
|
||||
}
|
||||
}
|
||||
.e-view.tailwind div.annotation4, .e-view.tailwind-dark div.annotation4 {
|
||||
margin-top: -3px; margin-left: 2px
|
||||
}
|
||||
.e-view.fabric div.annotation4, .e-view.fabric-dark div.annotation4 {
|
||||
margin-top: -5px;
|
||||
margin-left: 2px
|
||||
}
|
||||
.e-view.tailwind div.annotation5, .e-view.tailwind-dark div.annotation5, .e-view.fabric div.annotation5, .e-view.fabric-dark div.annotation5 {
|
||||
margin-top: -4px; margin-left: 1px;
|
||||
}
|
||||
.e-view.tailwind div.annotation6, .e-view.tailwind-dark div.annotation6, .e-view.fabric div.annotation6, .e-view.fabric-dark div.annotation6 {
|
||||
margin-top: -6px;
|
||||
}
|
||||
.e-view.bootstrap5 div.annotation4, .e-view.bootstrap5-dark div.annotation4 {
|
||||
margin-left: 2px
|
||||
}
|
||||
.e-view.bootstrap5 div.annotation5, .e-view.bootstrap5-dark div.annotation5 {
|
||||
margin-left: 1px
|
||||
}
|
||||
.e-view.bootstrap5 div.annotation6, .e-view.bootstrap5-dark div.annotation6 {
|
||||
margin-top: -1px; margin-left: 1px;
|
||||
}
|
||||
|
||||
.e-view.material div.annotation4, .e-view.material-dark div.annotation4, .e-view.bootstrap div.annotation4, .e-view.bootstrap-dark div.annotation4,
|
||||
.e-view.bootstrap4 div.annotation4{
|
||||
margin-left: 2px; margin-top: 2px;
|
||||
}
|
||||
|
||||
.e-view.highcontrast div.annotation4 {
|
||||
margin-left: 2px; margin-top: 1px;
|
||||
}
|
||||
|
||||
.e-view.material div.annotation5, .e-view.material-dark div.annotation5, .e-view.bootstrap div.annotation5, .e-view.bootstrap-dark div.annotation5,
|
||||
.e-view.bootstrap4 div.annotation5, .e-view.highcontrast div.annotation5 {
|
||||
margin-top: 2px;
|
||||
margin-left: 1px;
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end -->
|
||||
|
|
@ -40,26 +40,26 @@ CircularGauge.Inject(Annotations);
|
|||
start: 0, end: 100,
|
||||
radius: '90%',
|
||||
startWidth: 40, endWidth: 40,
|
||||
color: '#E30219', opacity: 0.2
|
||||
color: '#fa114f', opacity: 0.2
|
||||
},
|
||||
{
|
||||
start: 0, end: 100,
|
||||
radius: '68%',
|
||||
startWidth: 40, endWidth: 40,
|
||||
color: '#3EDE00', opacity: 0.2
|
||||
color: '#99ff01', opacity: 0.2
|
||||
},
|
||||
{
|
||||
start: 0, end: 100,
|
||||
radius: '46%',
|
||||
startWidth: 40, endWidth: 40,
|
||||
color: '#18F8F6', opacity: 0.2
|
||||
color: '#00d8fe', opacity: 0.2
|
||||
}],
|
||||
pointers: [{
|
||||
roundedCornerRadius: 25,
|
||||
value: 65,
|
||||
type: 'RangeBar',
|
||||
radius: '90%',
|
||||
color: '#E2011A',
|
||||
color: '#fa114f',
|
||||
animation: { enable: true },
|
||||
pointerWidth: 40
|
||||
},
|
||||
|
|
@ -68,7 +68,7 @@ CircularGauge.Inject(Annotations);
|
|||
value: 43,
|
||||
type: 'RangeBar',
|
||||
radius: '68%',
|
||||
color: '#3FE000',
|
||||
color: '#99ff01',
|
||||
animation: { enable: true },
|
||||
pointerWidth: 40
|
||||
},
|
||||
|
|
@ -77,7 +77,7 @@ CircularGauge.Inject(Annotations);
|
|||
value: 58,
|
||||
type: 'RangeBar',
|
||||
radius: '46%',
|
||||
color: '#00C9E6',
|
||||
color: '#00d8fe',
|
||||
animation: { enable: true },
|
||||
pointerWidth: 40
|
||||
}]
|
||||
|
|
@ -94,7 +94,7 @@ CircularGauge.Inject(Annotations);
|
|||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
if (selectedTheme === 'highcontrast') {
|
||||
args.gauge.axes[0].annotations[0].content =
|
||||
'<div id="annotation4"><img style="width:17px;height:17px;" src="src/circular-gauge/images/image4.svg" /></div>';
|
||||
'<div class="annotation4"><img style="width:17px;height:17px;" src="src/circular-gauge/images/image4.svg" /></div>';
|
||||
}
|
||||
},
|
||||
// custom code end
|
||||
|
|
@ -103,7 +103,7 @@ CircularGauge.Inject(Annotations);
|
|||
axes: [{
|
||||
annotations: [{
|
||||
angle: 0, radius: '0%', zIndex: '1',
|
||||
content: '<div id="annotation4"><img style="width:17px;height:17px;" src="src/circular-gauge/images/image1.svg" /></div>'
|
||||
content: '<div class="annotation4"><img style="width:17px;height:17px;" src="src/circular-gauge/images/image1.svg" /></div>'
|
||||
}],
|
||||
startAngle: 0, endAngle: 360,
|
||||
lineStyle: { width: 0 },
|
||||
|
|
@ -117,14 +117,14 @@ CircularGauge.Inject(Annotations);
|
|||
start: 0, end: 100,
|
||||
radius: '100%',
|
||||
startWidth: 8, endWidth: 8,
|
||||
color: '#E30219', opacity: 0.2
|
||||
color: '#fa114f', opacity: 0.2
|
||||
}],
|
||||
pointers: [{
|
||||
roundedCornerRadius: 5,
|
||||
value: 65,
|
||||
type: 'RangeBar',
|
||||
radius: '100%',
|
||||
color: '#E2011A',
|
||||
color: '#fa114f',
|
||||
animation: { enable: true },
|
||||
pointerWidth: 8
|
||||
}]
|
||||
|
|
@ -141,7 +141,7 @@ CircularGauge.Inject(Annotations);
|
|||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
if (selectedTheme === 'highcontrast') {
|
||||
args.gauge.axes[0].annotations[0].content =
|
||||
'<div id="annotation5"><img style="width:15px;height:15px;" src="src/circular-gauge/images/image5.svg" /></div>';
|
||||
'<div class="annotation5"><img style="width:15px;height:15px;" src="src/circular-gauge/images/image5.svg" /></div>';
|
||||
}
|
||||
},
|
||||
// custom code end
|
||||
|
|
@ -150,7 +150,7 @@ CircularGauge.Inject(Annotations);
|
|||
axes: [{
|
||||
annotations: [{
|
||||
angle: 0, radius: '0%', zIndex: '1',
|
||||
content: '<div id="annotation5"><img style="width:15px;height:15px;" src="src/circular-gauge/images/image2.svg" /></div>'
|
||||
content: '<div class="annotation5"><img style="width:15px;height:15px;" src="src/circular-gauge/images/image2.svg" /></div>'
|
||||
}],
|
||||
startAngle: 0, endAngle: 360,
|
||||
lineStyle: { width: 0 },
|
||||
|
|
@ -164,14 +164,14 @@ CircularGauge.Inject(Annotations);
|
|||
start: 0, end: 100,
|
||||
radius: '100%',
|
||||
startWidth: 8, endWidth: 8,
|
||||
color: '#3EDE00', opacity: 0.2
|
||||
color: '#99ff01', opacity: 0.2
|
||||
}],
|
||||
pointers: [{
|
||||
roundedCornerRadius: 5,
|
||||
value: 43,
|
||||
type: 'RangeBar',
|
||||
radius: '100%',
|
||||
color: '#3FE000',
|
||||
color: '#99ff01',
|
||||
animation: { enable: true },
|
||||
pointerWidth: 8
|
||||
}]
|
||||
|
|
@ -188,7 +188,7 @@ CircularGauge.Inject(Annotations);
|
|||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
if (selectedTheme === 'highcontrast') {
|
||||
args.gauge.axes[0].annotations[0].content =
|
||||
'<div id="annotation6"><img style="width:17px;height:17px;" src="src/circular-gauge/images/image6.svg" /></div>';
|
||||
'<div class="annotation6"><img style="width:17px;height:17px;" src="src/circular-gauge/images/image6.svg" /></div>';
|
||||
}
|
||||
},
|
||||
// custom code end
|
||||
|
|
@ -197,7 +197,7 @@ CircularGauge.Inject(Annotations);
|
|||
axes: [{
|
||||
annotations: [{
|
||||
angle: 0, radius: '0%', zIndex: '1',
|
||||
content: '<div id="annotation6"><img style="width:17px;height:17px;" src="src/circular-gauge/images/image3.svg" /></div>'
|
||||
content: '<div class="annotation6"><img style="width:17px;height:17px;" src="src/circular-gauge/images/image3.svg" /></div>'
|
||||
}],
|
||||
startAngle: 0, endAngle: 360,
|
||||
lineStyle: { width: 0 },
|
||||
|
|
@ -211,14 +211,14 @@ CircularGauge.Inject(Annotations);
|
|||
start: 0, end: 100,
|
||||
radius: '100%',
|
||||
startWidth: 8, endWidth: 8,
|
||||
color: '#18F8F6', opacity: 0.2
|
||||
color: '#00d8fe', opacity: 0.2
|
||||
}],
|
||||
pointers: [{
|
||||
roundedCornerRadius: 5,
|
||||
value: 58,
|
||||
type: 'RangeBar',
|
||||
radius: '100%',
|
||||
color: '#00C9E6',
|
||||
color: '#00d8fe',
|
||||
animation: { enable: true },
|
||||
pointerWidth: 8
|
||||
}]
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
<!-- property panel-->
|
||||
<div class="col-md-4 property-section">
|
||||
<table id="property" title="Properties" style="width: 100%; margin-left:-10px">
|
||||
<tbody>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div id=''>Pointer Color</div>
|
||||
|
|
@ -35,6 +36,7 @@
|
|||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
|||
lineStyle: { width: 10 },
|
||||
labelStyle: {
|
||||
font: {
|
||||
size: '12px', fontFamily: 'Roboto'
|
||||
size: '12px', fontFamily: 'Segoe UI'
|
||||
},
|
||||
autoAngle: true,
|
||||
hiddenLabel: 'Last'
|
||||
|
|
@ -70,7 +70,7 @@ import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
|||
pointerColor = new DropDownList({
|
||||
index: 0,
|
||||
placeholder: 'Select Range Bar Color',
|
||||
width: 120,
|
||||
width: "100%",
|
||||
change: () => {
|
||||
let rangeColor: string = pointerColor.value.toString();
|
||||
circulargauge.axes[0].pointers[0].color = rangeColor;
|
||||
|
|
@ -82,7 +82,7 @@ import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
|||
labelColor = new DropDownList({
|
||||
index: 0,
|
||||
placeholder: 'Select Range Bar Color',
|
||||
width: 120,
|
||||
width: "100%",
|
||||
change: () => {
|
||||
let rangeColor: string = labelColor.value.toString();
|
||||
circulargauge.axes[0].labelStyle.font.color = rangeColor;
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ export function gauge1(): CircularGauge {
|
|||
// custom code end
|
||||
axes: [{
|
||||
annotations: [{
|
||||
content: '<div style="color:#666666;font-size:35px;">1800</div>',
|
||||
content: '<div style="color:#666666;font-size:35px;font-family: Segoe UI;">1800</div>',
|
||||
angle: 0,
|
||||
zIndex: '1',
|
||||
radius: '110%'
|
||||
|
|
@ -64,13 +64,13 @@ export function gauge2(): CircularGauge {
|
|||
// custom code end
|
||||
axes: [{
|
||||
annotations: [{
|
||||
content: '<div style="color:#666666;font-size:35px;">50.5GB</div>',
|
||||
content: '<div style="color:#666666;font-size:35px; font-family: Segoe UI;">50.5GB</div>',
|
||||
angle: 180, radius: '0%', zIndex: '1',
|
||||
}, {
|
||||
content: '<div style="color:#757575;font-size:15px;">Used</div>',
|
||||
angle: 180, radius: '25%', zIndex: '1',
|
||||
textStyle: {
|
||||
fontFamily: 'Roboto',
|
||||
fontFamily: 'Segoe UI',
|
||||
color: '#9E9E9E',
|
||||
fontStyle: 'Bold',
|
||||
fontWeight: 'Regular',
|
||||
|
|
|
|||
|
|
@ -8,27 +8,36 @@
|
|||
<!-- property panel image-->
|
||||
<div class="col-md-4 property-section">
|
||||
<table id="property" title="Properties" style="width: 100%; margin-left:-10px">
|
||||
<colgroup>
|
||||
<col span="1" style="width: 50%;">
|
||||
<col span="1" style="width: 30%;">
|
||||
<col span="1" style="width: 20%;">
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<img id='random' src="src/circular-gauge/images/gauge1.png" alt="Customized gauge 1" style="margin-left:25px;margin-top:10px;"
|
||||
<td align="center">
|
||||
<img id='random' src="src/circular-gauge/images/gauge1.png" alt="Customized gauge 1" style="margin-top:10px;"
|
||||
/>
|
||||
<div id="random_line" style="display:block;left: 0px;background: #ff4081;padding-top: 0px;height: 2px !important;width: 85px;margin: 2px 2px 2px 17px;"></div>
|
||||
<div id="random_line" style="display:block;left: 0px;background: #ff4081;padding-top: 0px;height: 2px !important;width: 85px;margin: 2px 2px 2px 5px;"></div>
|
||||
</td>
|
||||
<td>
|
||||
<img id='usage' src="src/circular-gauge/images/gauge2.png" alt="Customized gauge 2" style="margin-left:25px;margin-top:10px;" />
|
||||
<div id="usage_line" style="display:none;left: 0px;background: #ff4081;padding-top: 0px;height: 2px !important;width: 85px;margin: 2px 2px 2px 17px;"></div>
|
||||
<td align="center">
|
||||
<img id='usage' src="src/circular-gauge/images/gauge2.png" alt="Customized gauge 2" style="margin-top:10px;" />
|
||||
<div id="usage_line" style="display:none;left: 0px;background: #ff4081;padding-top: 0px;height: 2px !important;width: 85px;margin: 2px 2px 2px 5px;"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<!--- property panel -->
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div id='currentPointerValue'>Current Value <span> 1800</span> </div>
|
||||
<tr style="height: 70px">
|
||||
<td style="padding-top: 20px">
|
||||
<div>Current Value</div>
|
||||
</td>
|
||||
<td>
|
||||
<td style="padding-top: 20px">
|
||||
<div style="margin-left: 10px">
|
||||
<input type="range" id="currentValue" value="1800" min="1000" max="2000" style="width: 120px" />
|
||||
<input type="range" id="currentValue" value="1800" min="1000" max="2000" style="width: 65%" />
|
||||
</div>
|
||||
</td>
|
||||
<td style="padding-top: 30px; text-align: center;">
|
||||
<span id='currentPointerValue' style="margin-left: -35px;">1800</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
|
|
@ -72,6 +81,7 @@
|
|||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
|||
let gauge: CircularGauge = random; let isUsage: boolean = false;
|
||||
let barColor: DropDownList; let rangeColor: DropDownList; let pointerColor: DropDownList;
|
||||
barColor = new DropDownList({
|
||||
index: 0, width: 120,
|
||||
index: 0, width: '100%',
|
||||
change: () => {
|
||||
gauge.axes[0].pointers[0].color = barColor.value.toString();
|
||||
gauge.refresh();
|
||||
|
|
@ -27,7 +27,7 @@ import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
|||
});
|
||||
barColor.appendTo('#barColor');
|
||||
rangeColor = new DropDownList({
|
||||
index: 0, width: 120,
|
||||
index: 0, width: '100%',
|
||||
change: () => {
|
||||
gauge.axes[0].ranges[0].color = rangeColor.value.toString();
|
||||
gauge.refresh();
|
||||
|
|
@ -35,7 +35,7 @@ import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
|||
});
|
||||
rangeColor.appendTo('#rangeColor');
|
||||
pointerColor = new DropDownList({
|
||||
index: 0, width: 120,
|
||||
index: 0, width: '100%',
|
||||
change: () => {
|
||||
let color: string = pointerColor.value.toString();
|
||||
if (!isUsage) {
|
||||
|
|
@ -54,8 +54,7 @@ import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
|||
let element: HTMLSelectElement = <HTMLSelectElement>document.getElementById('currentValue');
|
||||
element.min = '0.5'; element.max = '100';
|
||||
element.value = usage.axes[0].pointers[0].value.toString();
|
||||
document.getElementById('currentPointerValue').innerHTML = 'Current Value <span> '
|
||||
+ usage.axes[0].pointers[0].value + '</span>';
|
||||
document.getElementById('currentPointerValue').innerHTML = usage.axes[0].pointers[0].value.toString();
|
||||
barColor.value = usage.axes[0].pointers[0].color; rangeColor.value = usage.axes[0].ranges[0].color;
|
||||
pointerColor.enabled = false;
|
||||
let pointElement: HTMLSelectElement = <HTMLSelectElement>document.getElementById('pointColor');
|
||||
|
|
@ -82,8 +81,7 @@ import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
|||
pointElement.className = 'e-enabled'; pointerColor.enabled = true;
|
||||
element.min = '1000'; element.max = '2000';
|
||||
element.value = random.axes[0].pointers[0].value.toString();
|
||||
document.getElementById('currentPointerValue').innerHTML = 'Current Value <span> ' +
|
||||
random.axes[0].pointers[0].value + '</span>';
|
||||
document.getElementById('currentPointerValue').innerHTML = random.axes[0].pointers[0].value.toString();
|
||||
barColor.value = random.axes[0].pointers[0].color;
|
||||
rangeColor.value = random.axes[0].ranges[0].color;
|
||||
pointerColor.value = random.axes[0].pointers[1].color;
|
||||
|
|
@ -100,7 +98,7 @@ import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
|||
gauge.setPointerValue(0, 1, value);
|
||||
}
|
||||
gauge.setAnnotationValue(0, 0, '<div style="color:#666666;font-size:35px;">' + value + (isUsage ? 'GB' : '') + '</div>');
|
||||
document.getElementById('currentPointerValue').innerHTML = 'Current Value <span> ' + value + '</span>';
|
||||
document.getElementById('currentPointerValue').innerHTML = value.toString();
|
||||
};
|
||||
// custom code start
|
||||
let selectedTheme: string = location.hash.split('/')[1]; let color: string;
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ export function gauge1(): CircularGauge {
|
|||
angle: 180, zIndex: '1',
|
||||
radius: '30%'
|
||||
}, {
|
||||
content: '<div style="color:#9E9E9E;font-size:16px;font-family:Roboto">Germany</div>',
|
||||
content: '<div style="color:#9E9E9E;font-size:16px;font-family:Segoe UI">Germany</div>',
|
||||
angle: 180, zIndex: '1',
|
||||
radius: '65%'
|
||||
}],
|
||||
|
|
@ -74,7 +74,7 @@ export function gauge2(): CircularGauge {
|
|||
angle: 180, zIndex: '1',
|
||||
radius: '30%'
|
||||
}, {
|
||||
content: '<div style="color:#9E9E9E;font-size:16px;font-family:Roboto">USA</div>',
|
||||
content: '<div style="color:#9E9E9E;font-size:16px;font-family:Segoe UI">USA</div>',
|
||||
angle: 180, zIndex: '1',
|
||||
radius: '65%'
|
||||
}],
|
||||
|
|
@ -127,7 +127,7 @@ export function gauge3(): CircularGauge {
|
|||
angle: 180, zIndex: '1',
|
||||
radius: '30%'
|
||||
}, {
|
||||
content: '<div style="color:#9E9E9E;font-size:16px;font-family:Roboto">UK</div>',
|
||||
content: '<div style="color:#9E9E9E;font-size:16px;font-family:Segoe UI">UK</div>',
|
||||
angle: 180, zIndex: '1',
|
||||
radius: '65%'
|
||||
}],
|
||||
|
|
|
|||
|
|
@ -31,9 +31,9 @@ import { CircularGauge, ILoadedEventArgs, GaugeTheme } from '@syncfusion/ej2-cir
|
|||
},
|
||||
labelStyle: {
|
||||
font: {
|
||||
fontFamily: 'Roboto',
|
||||
fontFamily: 'Segoe UI',
|
||||
size: '12px',
|
||||
fontWeight: 'Regular'
|
||||
fontWeight: 'Regular'
|
||||
},
|
||||
offset: -5
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,18 +1,19 @@
|
|||
<div>
|
||||
<div class="col-md-9 control-section">
|
||||
<div class="col-md-8 control-section">
|
||||
<div class="control-section">
|
||||
<div id="gauge"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- property panel-->
|
||||
<div class="col-md-3 property-section">
|
||||
<div class="col-md-4 property-section">
|
||||
<table id="property" title="Properties" style="width: 100%; margin-left:-10px">
|
||||
<tbody>
|
||||
<tr style="height: 50px">
|
||||
<td style="width: 40%">
|
||||
<td>
|
||||
<div> Export Type </div>
|
||||
</td>
|
||||
<td style="width: 60%;">
|
||||
<div style="margin-left: -5px">
|
||||
<td>
|
||||
<div>
|
||||
<select id="type">
|
||||
<option value='JPEG' selected>JPEG</option>
|
||||
<option value='PNG'>PNG</option>
|
||||
|
|
@ -22,32 +23,31 @@
|
|||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td style="width: 40%">
|
||||
<td>
|
||||
<div> File Name </div>
|
||||
</td>
|
||||
<td style="width: 40%;">
|
||||
<div class="e-float-input" style='margin-top: 0px; margin-left: -5px'>
|
||||
<input type="text" value="Gauge" id="fileName" style="width: 100px;">
|
||||
<td>
|
||||
<div class="e-float-input" style='margin-top: 0px;'>
|
||||
<input value="Gauge" id="fileName" style="width: 100%;">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="button-control" style="height: 50px" align='center'>
|
||||
<td>
|
||||
<div style="width: 100px">
|
||||
</tr>
|
||||
<tr id="button-control" style="height: 70px" align='center'>
|
||||
<td align='center'>
|
||||
<div>
|
||||
<button id="export" style="text-transform:none !important;width: 90px;">Export</button>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div style="margin-left: 10px; width: 100px">
|
||||
<td align='center'>
|
||||
<div>
|
||||
<button id="print" style="text-transform:none !important;width: 90px;">Print</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tr>
|
||||
</tbody>
|
||||
<br/>
|
||||
</table>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import { loadCultureFiles } from '../common/culture-loader';
|
|||
import { CircularGauge, ILoadedEventArgs, GaugeTheme, ExportType, Print, ImageExport, PdfExport } from '@syncfusion/ej2-circulargauge';
|
||||
import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
||||
import { Button } from '@syncfusion/ej2-buttons';
|
||||
import { TextBox } from '@syncfusion/ej2-inputs';
|
||||
|
||||
CircularGauge.Inject(Print, ImageExport, PdfExport);
|
||||
(window as any).default = (): void => {
|
||||
|
|
@ -67,7 +68,7 @@ CircularGauge.Inject(Print, ImageExport, PdfExport);
|
|||
labelStyle: {
|
||||
font: {
|
||||
color: '#424242',
|
||||
fontFamily: 'Roboto',
|
||||
fontFamily: 'Segoe UI',
|
||||
size: '12px',
|
||||
fontWeight: 'Regular'
|
||||
},
|
||||
|
|
@ -83,15 +84,18 @@ CircularGauge.Inject(Print, ImageExport, PdfExport);
|
|||
|
||||
let mode: DropDownList = new DropDownList({
|
||||
index: 0,
|
||||
width: '100px'
|
||||
width: '100%'
|
||||
});
|
||||
mode.appendTo('#type');
|
||||
let exportGauge: Button = new Button({
|
||||
iconCss: 'e-icons e-play-icon1', cssClass: 'e-flat', isPrimary: true,
|
||||
});
|
||||
exportGauge.appendTo('#export');
|
||||
let fileText: TextBox = new TextBox({
|
||||
});
|
||||
fileText.appendTo('#fileName');
|
||||
document.getElementById('export').onclick = () => {
|
||||
let fileName: string = (<HTMLInputElement>(document.getElementById('fileName'))).value;
|
||||
let fileName: string = fileText.value;
|
||||
circulargauge.export(<ExportType>mode.value, fileName);
|
||||
};
|
||||
let printGauge: Button = new Button({
|
||||
|
|
|
|||
|
|
@ -6,14 +6,18 @@
|
|||
</div>
|
||||
<!-- property panel -->
|
||||
<div class="col-md-4 property-section">
|
||||
<table id="property" title="Properties" style="width: 100%; margin-left:5px">
|
||||
<tbody>
|
||||
<tr style="height: 50px">
|
||||
<table id="property" title="Properties" style="width: 100%; margin-left:-10px">
|
||||
<colgroup>
|
||||
<col span="1" style="width: 30%;">
|
||||
<col span="1" style="width: 70%;">
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div style="margin-top:30px;margin-left:-15px;width: 120px;"> Gradient Type </div>
|
||||
<div> Gradient Type </div>
|
||||
</td>
|
||||
<td>
|
||||
<div style="margin-top:20px;margin-left:-15px;">
|
||||
<div style="margin-left: -20px">
|
||||
<select id="gradient" class="form-control">
|
||||
<option value='0' >Linear Gradient</option>
|
||||
<option value='1'>Radial Gradient</option>
|
||||
|
|
@ -23,10 +27,10 @@
|
|||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div style="margin-top:30px;margin-left:-15px;">Elements</div>
|
||||
<div>Elements</div>
|
||||
</td>
|
||||
<td>
|
||||
<div style="margin-top:30px;margin-left:-15px;">
|
||||
<div style="margin-left: -20px">
|
||||
<select id="element" class="form-control">
|
||||
<option value='0' >Range</option>
|
||||
<option value='1'>Pointer</option>
|
||||
|
|
@ -34,7 +38,7 @@
|
|||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ let pointerRadialGradient: Object = {
|
|||
axes: [{
|
||||
lineStyle: { width: 0, color: 'transparent' },
|
||||
startAngle: 210, endAngle: 150, minimum: 0, maximum: 100, radius: '80%',
|
||||
labelStyle: { font: { fontFamily: 'Roboto',
|
||||
labelStyle: { font: { fontFamily: 'Segoe UI',
|
||||
size: '12px',
|
||||
fontWeight: 'Regular' }, offset: 10 },
|
||||
majorTicks: { width: 0, interval: 10 },
|
||||
|
|
@ -75,7 +75,7 @@ let pointerRadialGradient: Object = {
|
|||
|
||||
let gradientType: DropDownList = new DropDownList({
|
||||
index: 0,
|
||||
width: '145px',
|
||||
width: '100%',
|
||||
change: () => {
|
||||
if (gradientType.value === '1' && element.value === '0') {
|
||||
circulargauge.axes[0].ranges[0].linearGradient = null;
|
||||
|
|
@ -102,7 +102,7 @@ let pointerRadialGradient: Object = {
|
|||
gradientType.appendTo('#gradient');
|
||||
let element: DropDownList = new DropDownList({
|
||||
index: 0,
|
||||
width: '145px',
|
||||
width: '100%',
|
||||
change: () => {
|
||||
if (gradientType.value === '1' && element.value === '0') {
|
||||
circulargauge.axes[0].ranges[0].linearGradient = null;
|
||||
|
|
|
|||
|
|
@ -7,8 +7,13 @@
|
|||
<!-- property panel-->
|
||||
<div class="col-md-4 property-section">
|
||||
<table id="property" title="Properties" style="width: 100%; margin-left:-10px;">
|
||||
<tbody>
|
||||
<tr>
|
||||
<colgroup>
|
||||
<col span="1" style="width: 50%;">
|
||||
<col span="1" style="width: 30%;">
|
||||
<col span="1" style="width: 20%;">
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div> Ticks </div>
|
||||
</td>
|
||||
|
|
@ -20,8 +25,8 @@
|
|||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div> Tick Position </div>
|
||||
</td>
|
||||
|
|
@ -34,8 +39,8 @@
|
|||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div> Label Position </div>
|
||||
</td>
|
||||
|
|
@ -48,49 +53,57 @@
|
|||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div id='offset' style="margin-top:10px">Tick Offset <span> 0</span> </div>
|
||||
<div>Tick Offset</div>
|
||||
</td>
|
||||
<td>
|
||||
<div style="margin-top:10px">
|
||||
<input type="range" id="tickOffset" value="0" min="0" max="50" style="width:120px" />
|
||||
<div>
|
||||
<input type="range" id="tickOffset" value="0" min="0" max="50" style="width:70%" />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding-top: 10px; text-align: center;">
|
||||
<span id='offset' style="margin-left: -30px;">0</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div id='height' style="margin-top:15px">Tick Height <span> 10</span> </div>
|
||||
<div>Tick Height</div>
|
||||
</td>
|
||||
<td>
|
||||
<div style="margin-top:20px">
|
||||
<input type="range" id="tickHeight" value="10" min="1" max="50" style="width:120px" />
|
||||
<div>
|
||||
<input type="range" id="tickHeight" value="10" min="1" max="50" style="width:70%" />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding-top: 10px; text-align: center;">
|
||||
<span id='height' style="margin-left: -30px;">10</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div id='labelOffsetValue' style="margin-top:20px">Label Offset <span> 0</span> </div>
|
||||
<div>Label Offset</div>
|
||||
</td>
|
||||
<td>
|
||||
<div style="margin-top:20px">
|
||||
<input type="range" id="labelOffset" value="0" min="0" max="50" style="width:120px" />
|
||||
<div>
|
||||
<input type="range" id="labelOffset" value="0" min="0" max="50" style="width:70%" />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<td style="padding-top: 10px; text-align: center;">
|
||||
<span id='labelOffsetValue' style="margin-left: -30px;">0</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td style="width: 20%">
|
||||
<div id='enablePointer' style="margin-top:10px;">Show Last Label</div>
|
||||
<td>
|
||||
<div id='enablePointer'>Show Last Label</div>
|
||||
</td>
|
||||
<td style="width: 40%;">
|
||||
<div style="margin-left:40px">
|
||||
<td>
|
||||
<div style="margin-top: -10px; margin-left: -10px">
|
||||
<input type="checkbox" id="showLastLabel" />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<br/>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ CircularGauge.Inject(Annotations);
|
|||
lineStyle: { width: 2, color: '#9E9E9E' },
|
||||
labelStyle: {
|
||||
position: 'Outside', autoAngle: true,
|
||||
font: { size: '10px' }
|
||||
font: { size: '10px', fontFamily: 'Segoe UI' }
|
||||
}, majorTicks: {
|
||||
position: 'Inside', color: '#757575', width: 2, height: 10, interval: 20
|
||||
}, minorTicks: {
|
||||
|
|
@ -53,7 +53,7 @@ CircularGauge.Inject(Annotations);
|
|||
// code for property panel
|
||||
let ticks: DropDownList; let tickPosition: DropDownList; let labelPosition: DropDownList;
|
||||
ticks = new DropDownList({
|
||||
index: 0, width: 120,
|
||||
index: 0, width: '100%',
|
||||
change: () => {
|
||||
let value: string = ticks.value.toString();
|
||||
let tick: TickModel; isMajorTicks = value === 'major';
|
||||
|
|
@ -65,8 +65,8 @@ CircularGauge.Inject(Annotations);
|
|||
tickPosition.value = tick.position;
|
||||
(<HTMLInputElement>document.getElementById('tickOffset')).value = tick.offset.toString();
|
||||
(<HTMLInputElement>document.getElementById('tickHeight')).value = tick.height.toString();
|
||||
document.getElementById('offset').innerHTML = 'Tick Offset <span> ' + tick.offset;
|
||||
document.getElementById('height').innerHTML = 'Tick Height <span> ' + tick.height;
|
||||
document.getElementById('offset').innerHTML = tick.offset.toString();
|
||||
document.getElementById('height').innerHTML = tick.height.toString();
|
||||
}
|
||||
});
|
||||
ticks.appendTo('#Ticks');
|
||||
|
|
@ -84,7 +84,7 @@ CircularGauge.Inject(Annotations);
|
|||
}
|
||||
|
||||
tickPosition = new DropDownList({
|
||||
index: 0, width: 120,
|
||||
index: 0, width: '100%',
|
||||
change: () => {
|
||||
let value: string = tickPosition.value.toString();
|
||||
if (isMajorTicks) {
|
||||
|
|
@ -98,7 +98,7 @@ CircularGauge.Inject(Annotations);
|
|||
tickPosition.appendTo('#tickposition');
|
||||
|
||||
labelPosition = new DropDownList({
|
||||
index: 0, width: 120,
|
||||
index: 0, width: '100%',
|
||||
change: () => {
|
||||
circulargauge.axes[0].labelStyle.position = <Position>labelPosition.value.toString();
|
||||
circulargauge.refresh();
|
||||
|
|
@ -114,7 +114,7 @@ CircularGauge.Inject(Annotations);
|
|||
} else {
|
||||
circulargauge.axes[0].minorTicks.offset = value;
|
||||
}
|
||||
document.getElementById('offset').innerHTML = 'Tick Offset <span> ' + value;
|
||||
document.getElementById('offset').innerHTML = value.toString();
|
||||
circulargauge.refresh();
|
||||
};
|
||||
|
||||
|
|
@ -126,7 +126,7 @@ CircularGauge.Inject(Annotations);
|
|||
} else {
|
||||
circulargauge.axes[0].minorTicks.height = value;
|
||||
}
|
||||
document.getElementById('height').innerHTML = 'Tick Height <span> ' + value;
|
||||
document.getElementById('height').innerHTML = value.toString();
|
||||
circulargauge.refresh();
|
||||
};
|
||||
|
||||
|
|
@ -134,7 +134,7 @@ CircularGauge.Inject(Annotations);
|
|||
document.getElementById('labelOffset').onchange = () => {
|
||||
let value: number = parseInt((<HTMLInputElement>document.getElementById('labelOffset')).value, 10);
|
||||
circulargauge.axes[0].labelStyle.offset = value;
|
||||
document.getElementById('labelOffsetValue').innerHTML = 'Label Offset <span> ' + value;
|
||||
document.getElementById('labelOffsetValue').innerHTML = value.toString();
|
||||
circulargauge.refresh();
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -7,23 +7,27 @@
|
|||
</div>
|
||||
<div class="col-md-4 property-section">
|
||||
<table id="property" title="Properties" style="width: 100%; margin-left:-10px">
|
||||
<tbody>
|
||||
<colgroup>
|
||||
<col span="1" style="width: 60%;">
|
||||
<col span="1" style="width: 40%;">
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr style="height: 50px">
|
||||
<td style="width: 20%">
|
||||
<td>
|
||||
<div id="enablelegend">Show legend </div>
|
||||
</td>
|
||||
<td style="width: 40%;">
|
||||
<div style="margin-left: 35px">
|
||||
<td>
|
||||
<div style="margin-top: 2px;">
|
||||
<input type="checkbox" id="enable" checked="true">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td style="width: 60%">
|
||||
<div id="togglelegend">Show range when the legend item is toggled</div>
|
||||
<td>
|
||||
<div id="togglelegend" style="width: 90%">Show range when the legend item is toggled</div>
|
||||
</td>
|
||||
<td style="width: 30%;">
|
||||
<div style="margin-left: 35px">
|
||||
<td>
|
||||
<div style="margin-top: 2px;">
|
||||
<input type="checkbox" id="toggle" checked="true">
|
||||
</div>
|
||||
</td>
|
||||
|
|
@ -33,7 +37,7 @@
|
|||
<div> Position </div>
|
||||
</td>
|
||||
<td>
|
||||
<div style="width: 110px">
|
||||
<div style="width: 100%">
|
||||
<select id="position" class="form-control">
|
||||
<option value="Auto">Auto</option>
|
||||
<option value="Top">Top</option>
|
||||
|
|
@ -49,7 +53,7 @@
|
|||
<div> Alignment </div>
|
||||
</td>
|
||||
<td>
|
||||
<div style="width: 110px">
|
||||
<div style="width: 100%">
|
||||
<select id="alignment" class="form-control">
|
||||
<option value="Far">Far</option>
|
||||
<option value="Center" selected="true">Center</option>
|
||||
|
|
@ -63,7 +67,7 @@
|
|||
<div> Shape </div>
|
||||
</td>
|
||||
<td>
|
||||
<div style="width: 110px">
|
||||
<div style="width: 100%">
|
||||
<select id="shape" class="form-control">
|
||||
<option value="Circle" selected="true">Circle</option>
|
||||
<option value="Rectangle">Rectangle</option>
|
||||
|
|
@ -75,7 +79,7 @@
|
|||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,14 +19,21 @@ CircularGauge.Inject(Annotations, Legend);
|
|||
},
|
||||
// custom code end
|
||||
title: 'Measure of wind speed in Km/h',
|
||||
titleStyle: {
|
||||
fontFamily: 'Segoe UI'
|
||||
},
|
||||
legendSettings: {
|
||||
visible: true,
|
||||
position: 'Bottom'
|
||||
position: 'Bottom',
|
||||
textStyle: {
|
||||
fontFamily: 'Segoe UI'
|
||||
}
|
||||
},
|
||||
axes: [{
|
||||
lineStyle: { width: 2 },
|
||||
labelStyle: {
|
||||
position: 'Inside', useRangeColor: false
|
||||
position: 'Inside', useRangeColor: false,
|
||||
font: { fontFamily: 'Segoe UI' }
|
||||
}, majorTicks: { height: 16, color: '#9E9E9E', interval: 20 }, minorTicks: { height: 8, interval: 10 },
|
||||
startAngle: 210, endAngle: 150, minimum: 0, maximum: 120, radius: '80%',
|
||||
ranges: [
|
||||
|
|
|
|||
|
|
@ -7,7 +7,13 @@
|
|||
<!-- property panel -->
|
||||
<div class="col-md-4 property-section">
|
||||
<table id="property" title="Properties" style="width: 100%; margin-left:-10px">
|
||||
<tr>
|
||||
<colgroup>
|
||||
<col span="1" style="width: 40%;">
|
||||
<col span="1" style="width: 30%;">
|
||||
<col span="1" style="width: 30%;">
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div> Axis </div>
|
||||
</td>
|
||||
|
|
@ -19,8 +25,8 @@
|
|||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div> Direction </div>
|
||||
</td>
|
||||
|
|
@ -32,27 +38,34 @@
|
|||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div id='start' style="margin-top: 10px">Start Angle <span> 220</span> </div>
|
||||
<div>Start Angle</div>
|
||||
</td>
|
||||
<td>
|
||||
<div style="margin-top: 10px">
|
||||
<input type="range" id="startAngle" value="220" min="0" max="360" style="width: 120px" />
|
||||
<div>
|
||||
<input type="range" id="startAngle" value="220" min="0" max="360" style="width: 70%" />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div id='end' style="margin-top: 20px">End Angle <span> 140</span> </div>
|
||||
</td>
|
||||
<td>
|
||||
<div style="margin-top: 20px">
|
||||
<input type="range" id="endAngle" value="140" min="0" max="360" style="width: 120px" />
|
||||
</div>
|
||||
<td style="padding-top: 10px; text-align: center;">
|
||||
<span id='start' style="margin-left: -30px;">220</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div>End Angle</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<input type="range" id="endAngle" value="140" min="0" max="360" style="width: 70%" />
|
||||
</div>
|
||||
</td>
|
||||
<td style="padding-top: 10px; text-align: center;">
|
||||
<span id='end' style="margin-left: -30px;">140</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -23,13 +23,14 @@ import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
|||
},
|
||||
// custom code end
|
||||
title: 'Gauge with Multiple Axes',
|
||||
titleStyle: { color: 'gray', size: '16px' },
|
||||
titleStyle: { color: 'gray', size: '16px', fontFamily: 'Segoe UI' },
|
||||
axes: [{
|
||||
lineStyle: { width: 1.5 },
|
||||
radius: '95%',
|
||||
labelStyle: {
|
||||
position: 'Inside', autoAngle: true,
|
||||
hiddenLabel: 'None',
|
||||
font: { fontFamily: 'Segoe UI' }
|
||||
}, majorTicks: {
|
||||
position: 'Inside',
|
||||
width: 2, height: 10
|
||||
|
|
@ -47,7 +48,7 @@ import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
|||
lineStyle: { width: 1.5, color: '#E84011' }, radius: '95%',
|
||||
labelStyle: {
|
||||
position: 'Outside', autoAngle: true,
|
||||
hiddenLabel: 'None', font: { color: '#E84011' }
|
||||
hiddenLabel: 'None', font: { color: '#E84011', fontFamily: 'Segoe UI' }
|
||||
}, majorTicks: {
|
||||
position: 'Outside', width: 2, height: 10,
|
||||
color: '#E84011'
|
||||
|
|
@ -66,14 +67,14 @@ import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
|||
circulargauge.appendTo('#axis-container');
|
||||
// code for property panel
|
||||
axis = new DropDownList({
|
||||
index: 0, width: 120,
|
||||
index: 0, width: '100%',
|
||||
change: () => {
|
||||
axisIndex = +axis.value;
|
||||
direction.value = circulargauge.axes[axisIndex].direction;
|
||||
let startAngle: number = circulargauge.axes[axisIndex].startAngle;
|
||||
let endAngle: number = circulargauge.axes[axisIndex].endAngle;
|
||||
document.getElementById('start').innerHTML = 'Start Angle <span> ' + startAngle;
|
||||
document.getElementById('end').innerHTML = 'End Angle <span> ' + endAngle;
|
||||
document.getElementById('start').innerHTML = startAngle.toString();
|
||||
document.getElementById('end').innerHTML = endAngle.toString();
|
||||
(<HTMLInputElement>document.getElementById('startAngle')).value = startAngle.toString();
|
||||
(<HTMLInputElement>document.getElementById('endAngle')).value = endAngle.toString();
|
||||
}
|
||||
|
|
@ -81,7 +82,7 @@ import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
|||
axis.appendTo('#axisIndex');
|
||||
|
||||
direction = new DropDownList({
|
||||
index: 0, width: 120,
|
||||
index: 0, width: '100%',
|
||||
change: () => {
|
||||
circulargauge.axes[axisIndex].direction = <GaugeDirection>direction.value.toString();
|
||||
circulargauge.axes[0].pointers[0].animation.enable = false;
|
||||
|
|
@ -97,7 +98,7 @@ import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
|||
circulargauge.axes[0].pointers[0].animation.enable = false;
|
||||
circulargauge.axes[1].pointers[0].animation.enable = false;
|
||||
circulargauge.axes[axisIndex].startAngle = value;
|
||||
document.getElementById('start').innerHTML = 'Start Angle <span> ' + value;
|
||||
document.getElementById('start').innerHTML = value.toString();
|
||||
circulargauge.axes[axisIndex].labelStyle.hiddenLabel =
|
||||
isCompleteAngle(circulargauge.axes[axisIndex].startAngle, circulargauge.axes[axisIndex].endAngle) ?
|
||||
'First' : 'None';
|
||||
|
|
@ -110,7 +111,7 @@ import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
|||
circulargauge.axes[0].pointers[0].animation.enable = false;
|
||||
circulargauge.axes[1].pointers[0].animation.enable = false;
|
||||
circulargauge.axes[axisIndex].endAngle = value;
|
||||
document.getElementById('end').innerHTML = 'End Angle <span> ' + value;
|
||||
document.getElementById('end').innerHTML = value.toString();
|
||||
circulargauge.axes[axisIndex].labelStyle.hiddenLabel =
|
||||
isCompleteAngle(circulargauge.axes[axisIndex].startAngle, circulargauge.axes[axisIndex].endAngle) ?
|
||||
'First' : 'None';
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ export function gauge1(): CircularGauge {
|
|||
{
|
||||
angle: 180, zIndex: '1',
|
||||
radius: '20%',
|
||||
content: '<div style="color:#757575; font-family:Roboto; font-size:14px;">Range Bar</div>'
|
||||
content: '<div style="color:#757575; font-family:Segoe UI; font-size:14px;">Range Bar</div>'
|
||||
}
|
||||
]
|
||||
}],
|
||||
|
|
@ -92,7 +92,7 @@ export function gauge2(): CircularGauge {
|
|||
{
|
||||
angle: 180, zIndex: '1',
|
||||
radius: '20%',
|
||||
content: '<div style="color:#757575; font-family:Roboto; font-size:14px;">Marker</div>'
|
||||
content: '<div style="color:#757575; font-family:Segoe UI; font-size:14px;">Marker</div>'
|
||||
}
|
||||
]
|
||||
}],
|
||||
|
|
@ -148,7 +148,7 @@ export function gauge4(): CircularGauge {
|
|||
{
|
||||
angle: 180, zIndex: '1',
|
||||
radius: '20%',
|
||||
content: '<div style="color:#757575; font-family:Roboto; font-size:14px; padding-top: 26px">Customized Needle</div>'
|
||||
content: '<div style="color:#757575; font-family:Segoe UI; font-size:14px; padding-top: 26px">Customized Needle</div>'
|
||||
}
|
||||
]
|
||||
}],
|
||||
|
|
@ -198,7 +198,7 @@ export function gauge3(): CircularGauge {
|
|||
{
|
||||
angle: 180, zIndex: '1',
|
||||
radius: '20%',
|
||||
content: '<div style="color:#757575; font-family:Roboto; font-size:14px;">Needle</div>'
|
||||
content: '<div style="color:#757575; font-family:Segoe UI; font-size:14px;">Needle</div>'
|
||||
}
|
||||
]
|
||||
}],
|
||||
|
|
@ -349,7 +349,7 @@ export function gauge5(): CircularGauge {
|
|||
{
|
||||
angle: 180, zIndex: '1',
|
||||
radius: '20%',
|
||||
content: '<div style="color:#757575; font-family:Roboto; font-size:14px; padding-top:26px">Live Update</div>'
|
||||
content: '<div style="color:#757575; font-family:Segoe UI; font-size:14px; padding-top:26px">Live Update</div>'
|
||||
}
|
||||
]
|
||||
}],
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample visualizes the short-put distance covered by the athletes by using the image pointer in gauge.
|
||||
This sample visualizes the shot-put distance covered by the athletes by using the image pointer in gauge.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
</p>
|
||||
<br>
|
||||
<p>
|
||||
In this sample, a pointer with image is used to show the short-put distance thrown by the player.
|
||||
In this sample, a pointer with image is used to show the shot-put distance thrown by the player.
|
||||
</p>
|
||||
<p>
|
||||
More information on the pointers can be found in this
|
||||
|
|
|
|||
|
|
@ -22,22 +22,41 @@ CircularGauge.Inject(Annotations);
|
|||
// custom code end
|
||||
title: 'Shot Put Distance',
|
||||
titleStyle: {
|
||||
size: '18px'
|
||||
size: '18px',
|
||||
fontFamily: 'Segoe UI'
|
||||
},
|
||||
centerY: '57%',
|
||||
axes: [{
|
||||
annotations: [{
|
||||
content: '12 M', radius: '108%', angle: 98, zIndex: '1'
|
||||
content: '12 M', radius: '108%', angle: 98, zIndex: '1',
|
||||
textStyle: {
|
||||
fontFamily: 'Segoe UI'
|
||||
}
|
||||
}, {
|
||||
content: '11 M', radius: '80%', angle: 81, zIndex: '1'
|
||||
content: '11 M', radius: '80%', angle: 81, zIndex: '1',
|
||||
textStyle: {
|
||||
fontFamily: 'Segoe UI'
|
||||
}
|
||||
}, {
|
||||
content: '10 M', radius: '50%', angle: 69, zIndex: '1'
|
||||
content: '10 M', radius: '50%', angle: 69, zIndex: '1',
|
||||
textStyle: {
|
||||
fontFamily: 'Segoe UI'
|
||||
}
|
||||
}, {
|
||||
content: 'Doe', radius: '108%', angle: 190, zIndex: '1'
|
||||
content: 'Doe', radius: '108%', angle: 190, zIndex: '1',
|
||||
textStyle: {
|
||||
fontFamily: 'Segoe UI'
|
||||
}
|
||||
}, {
|
||||
content: 'Almaida', radius: '80%', angle: 185, zIndex: '1'
|
||||
content: 'Almaida', radius: '80%', angle: 185, zIndex: '1',
|
||||
textStyle: {
|
||||
fontFamily: 'Segoe UI'
|
||||
}
|
||||
}, {
|
||||
content: 'John', radius: '50%', angle: 180, zIndex: '1'
|
||||
content: 'John', radius: '50%', angle: 180, zIndex: '1',
|
||||
textStyle: {
|
||||
fontFamily: 'Segoe UI'
|
||||
}
|
||||
}],
|
||||
lineStyle: {
|
||||
width: 0, color: '#1d1d1d'
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ CircularGauge.Inject(Annotations);
|
|||
{
|
||||
angle: 180, zIndex: '1',
|
||||
radius: '25%',
|
||||
content: '<div style="color:#757575; font-family:Roboto; font-size:14px; padding-top:20px">Multiple Needles</div>'
|
||||
content: '<div style="color:#757575; font-family:Segoe UI; font-size:14px; padding-top:20px">Multiple Needles</div>'
|
||||
}
|
||||
]
|
||||
}],
|
||||
|
|
|
|||
|
|
@ -7,6 +7,12 @@
|
|||
<!-- property panel -->
|
||||
<div class="col-md-4 property-section">
|
||||
<table id="property" title="Properties" style="width: 100%; margin-left:-10px">
|
||||
<colgroup>
|
||||
<col span="1" style="width: 40%;">
|
||||
<col span="1" style="width: 30%;">
|
||||
<col span="1" style="width: 30%;">
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div> Select Range </div>
|
||||
|
|
@ -23,24 +29,30 @@
|
|||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div id='rangeStart'>Range Start <span> 0</span> </div>
|
||||
<div>Range Start</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<input type="range" id="start" value="0" min="0" max="120" style="width:120px" />
|
||||
<input type="range" id="start" value="0" min="0" max="120" style="width:70%" />
|
||||
</div>
|
||||
</td>
|
||||
<td style="padding-top: 10px; text-align: center;">
|
||||
<span id='rangeStart' style="margin-left: -30px;">0</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div id='rangeEnd'>Range End <span> 40</span> </div>
|
||||
<div>Range End</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<input type="range" id="end" value="40" min="0" max="120" style="width:120px" />
|
||||
<input type="range" id="end" value="40" min="0" max="120" style="width:70%" />
|
||||
</div>
|
||||
</td>
|
||||
<td style="padding-top: 10px; text-align: center;">
|
||||
<span id='rangeEnd' style="margin-left: -30px;">40</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
|
|
@ -61,40 +73,49 @@
|
|||
<div id='enablePointer'>Range Font Color</div>
|
||||
</td>
|
||||
<td style="width: 40%;">
|
||||
<div style="margin-left: 50px">
|
||||
<div style="margin-top: -10px;margin-left: -10px;">
|
||||
<input type="checkbox" id="enable" />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div id='rangeStartWidth'>Start Width <span> 10</span> </div>
|
||||
<div>Start Width</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<input type="range" id="startWidth" value="10" min="0" max="30" style="width:120px" />
|
||||
<input type="range" id="startWidth" value="10" min="0" max="30" style="width:70%" />
|
||||
</div>
|
||||
</td>
|
||||
<td style="padding-top: 10px; text-align: center;">
|
||||
<span id='rangeStartWidth' style="margin-left: -30px;">10</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div id='rangeEndWidth'>End Width <span> 10</span> </div>
|
||||
<div>End Width</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<input type="range" id="endWidth" value="10" min="0" max="30" style="width:120px" />
|
||||
<input type="range" id="endWidth" value="10" min="0" max="30" style="width:70%" />
|
||||
</div>
|
||||
</td>
|
||||
<td style="padding-top: 10px; text-align: center;">
|
||||
<span id='rangeEndWidth' style="margin-left: -30px;">10</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div id='cornerRadius'>Corner Radius <span> 0</span> </div>
|
||||
<div>Corner Radius</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<input type="range" id="radius" value="0" min="0" max="30" step="5" style="width:120px" />
|
||||
<input type="range" id="radius" value="0" min="0" max="30" step="5" style="width:70%" />
|
||||
</div>
|
||||
</td>
|
||||
<td style="padding-top: 10px; text-align: center;">
|
||||
<span id='cornerRadius' style="margin-left: -30px;">0</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@ import { loadCultureFiles } from '../common/culture-loader';
|
|||
*/
|
||||
import { CircularGauge, Annotations, ILoadedEventArgs, GaugeTheme } from '@syncfusion/ej2-circulargauge';
|
||||
import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
||||
import { CheckBox, ChangeEventArgs as CheckBoxChangeEvents } from '@syncfusion/ej2-buttons';
|
||||
import { EmitType } from '@syncfusion/ej2-base';
|
||||
CircularGauge.Inject(Annotations);
|
||||
(window as any).default = (): void => {
|
||||
// custom code start
|
||||
|
|
@ -25,13 +27,13 @@ CircularGauge.Inject(Annotations);
|
|||
lineStyle: { width: 10, color: 'transparent' },
|
||||
labelStyle: {
|
||||
position: 'Inside', useRangeColor: false,
|
||||
font: { size: '12px', fontFamily: 'Roboto', fontStyle: 'Regular' }
|
||||
font: { size: '12px', fontFamily: 'Segoe UI', fontStyle: 'Regular' }
|
||||
}, majorTicks: { height: 10, offset: 5 }, minorTicks: { height: 0 },
|
||||
annotations: [{
|
||||
content: '<div><span style="font-size:14px; font-family:Regular">Speedometer</span></div>',
|
||||
content: '<div><span style="font-size:14px; font-family:Segoe UI">Speedometer</span></div>',
|
||||
radius: '30%', angle: 0, zIndex: '1'
|
||||
}, {
|
||||
content: '<div><span style="font-size:20px; font-family:Regular">65 MPH</span></div>',
|
||||
content: '<div><span style="font-size:20px; font-family:Segoe UI">65 MPH</span></div>',
|
||||
radius: '40%', angle: 180, zIndex: '1'
|
||||
}],
|
||||
startAngle: 210, endAngle: 150, minimum: 0, maximum: 120, radius: '80%',
|
||||
|
|
@ -47,31 +49,26 @@ CircularGauge.Inject(Annotations);
|
|||
// code for property panel
|
||||
let colortObj: DropDownList;
|
||||
let listObj: DropDownList = new DropDownList({
|
||||
index: 0, width: 120,
|
||||
index: 0, width: '100%',
|
||||
change: () => {
|
||||
let index: number = +listObj.value;
|
||||
colortObj.value = circulargauge.axes[0].ranges[index].color;
|
||||
(<HTMLInputElement>document.getElementById('endWidth')).value = circulargauge.axes[0].ranges[index].endWidth.toString();
|
||||
document.getElementById('rangeEndWidth').innerHTML = 'End Width <span> ' +
|
||||
circulargauge.axes[0].ranges[index].endWidth;
|
||||
document.getElementById('rangeEndWidth').innerHTML = circulargauge.axes[0].ranges[index].endWidth.toString();
|
||||
(<HTMLInputElement>document.getElementById('startWidth')).value = circulargauge.axes[0].ranges[index].startWidth.toString();
|
||||
document.getElementById('rangeStartWidth').innerHTML = 'Start Width <span> ' +
|
||||
circulargauge.axes[0].ranges[index].startWidth;
|
||||
document.getElementById('rangeStartWidth').innerHTML = circulargauge.axes[0].ranges[index].startWidth.toString();
|
||||
(<HTMLInputElement>document.getElementById('end')).value = circulargauge.axes[0].ranges[index].end.toString();
|
||||
document.getElementById('rangeEnd').innerHTML = 'Range End <span> ' +
|
||||
circulargauge.axes[0].ranges[index].end;
|
||||
document.getElementById('rangeEnd').innerHTML = circulargauge.axes[0].ranges[index].end.toString();
|
||||
(<HTMLInputElement>document.getElementById('start')).value = circulargauge.axes[0].ranges[index].start.toString();
|
||||
document.getElementById('rangeStart').innerHTML = 'Range Start <span> ' +
|
||||
circulargauge.axes[0].ranges[index].start;
|
||||
document.getElementById('rangeStart').innerHTML = circulargauge.axes[0].ranges[index].start.toString();
|
||||
(<HTMLInputElement>document.getElementById('radius')).value = circulargauge.axes[0].ranges[index].roundedCornerRadius.toString();
|
||||
document.getElementById('cornerRadius').innerHTML = 'Corner Radius <span> ' +
|
||||
circulargauge.axes[0].ranges[index].roundedCornerRadius;
|
||||
document.getElementById('cornerRadius').innerHTML = circulargauge.axes[0].ranges[index].roundedCornerRadius.toString();
|
||||
}
|
||||
});
|
||||
listObj.appendTo('#rangeSelect');
|
||||
|
||||
colortObj = new DropDownList({
|
||||
index: 0, width: 120,
|
||||
index: 0, width: '100%',
|
||||
change: () => {
|
||||
circulargauge.axes[0].ranges[+listObj.value].color = colortObj.value.toString();
|
||||
circulargauge.axes[0].pointers[0].animation.enable = false; circulargauge.refresh();
|
||||
|
|
@ -82,7 +79,7 @@ CircularGauge.Inject(Annotations);
|
|||
document.getElementById('start').onpointermove = document.getElementById('start').ontouchmove =
|
||||
document.getElementById('start').onchange = () => {
|
||||
let min: number = parseInt((<HTMLInputElement>document.getElementById('start')).value, 10);
|
||||
document.getElementById('rangeStart').innerHTML = 'Range Start <span> ' + min;
|
||||
document.getElementById('rangeStart').innerHTML = min.toString();
|
||||
circulargauge.axes[0].ranges[+listObj.value].start = min;
|
||||
circulargauge.axes[0].pointers[0].animation.enable = false; circulargauge.refresh();
|
||||
};
|
||||
|
|
@ -90,7 +87,7 @@ CircularGauge.Inject(Annotations);
|
|||
document.getElementById('end').onpointermove = document.getElementById('end').ontouchmove =
|
||||
document.getElementById('end').onchange = () => {
|
||||
let max: number = parseInt((<HTMLInputElement>document.getElementById('end')).value, 10);
|
||||
document.getElementById('rangeEnd').innerHTML = 'Range End <span> ' + max;
|
||||
document.getElementById('rangeEnd').innerHTML = max.toString();
|
||||
circulargauge.axes[0].ranges[+listObj.value].end = max;
|
||||
circulargauge.axes[0].pointers[0].animation.enable = false; circulargauge.refresh();
|
||||
};
|
||||
|
|
@ -98,7 +95,7 @@ CircularGauge.Inject(Annotations);
|
|||
document.getElementById('startWidth').onpointermove = document.getElementById('startWidth').ontouchmove =
|
||||
document.getElementById('startWidth').onchange = () => {
|
||||
let startWidth: number = parseInt((<HTMLInputElement>document.getElementById('startWidth')).value, 10);
|
||||
document.getElementById('rangeStartWidth').innerHTML = 'Start Width <span> ' + startWidth;
|
||||
document.getElementById('rangeStartWidth').innerHTML = startWidth.toString();
|
||||
circulargauge.axes[0].ranges[+listObj.value].startWidth = startWidth;
|
||||
circulargauge.axes[0].pointers[0].animation.enable = false; circulargauge.refresh();
|
||||
};
|
||||
|
|
@ -106,7 +103,7 @@ CircularGauge.Inject(Annotations);
|
|||
document.getElementById('endWidth').onpointermove = document.getElementById('endWidth').ontouchmove =
|
||||
document.getElementById('endWidth').onchange = () => {
|
||||
let endWidth: number = parseInt((<HTMLInputElement>document.getElementById('endWidth')).value, 10);
|
||||
document.getElementById('rangeEndWidth').innerHTML = 'End Width <span> ' + endWidth;
|
||||
document.getElementById('rangeEndWidth').innerHTML = endWidth.toString();
|
||||
circulargauge.axes[0].ranges[+listObj.value].endWidth = endWidth;
|
||||
circulargauge.axes[0].pointers[0].animation.enable = false; circulargauge.refresh();
|
||||
};
|
||||
|
|
@ -114,16 +111,22 @@ CircularGauge.Inject(Annotations);
|
|||
document.getElementById('radius').onpointermove = document.getElementById('radius').ontouchmove =
|
||||
document.getElementById('radius').onchange = () => {
|
||||
let radius: number = parseInt((<HTMLInputElement>document.getElementById('radius')).value, 10);
|
||||
document.getElementById('cornerRadius').innerHTML = 'Corner Radius <span> ' + radius;
|
||||
document.getElementById('cornerRadius').innerHTML = radius.toString();
|
||||
circulargauge.axes[0].ranges[+listObj.value].roundedCornerRadius = radius;
|
||||
circulargauge.axes[0].pointers[0].animation.enable = false; circulargauge.refresh();
|
||||
};
|
||||
|
||||
document.getElementById('enable').onchange = () => {
|
||||
let useRangeColor: boolean = (<HTMLInputElement>document.getElementById('enable')).checked;
|
||||
circulargauge.axes[0].labelStyle.useRangeColor = useRangeColor;
|
||||
circulargauge.axes[0].majorTicks.useRangeColor = useRangeColor;
|
||||
circulargauge.axes[0].minorTicks.useRangeColor = useRangeColor;
|
||||
let rangeFontchange: EmitType<CheckBoxChangeEvents>;
|
||||
let rangeFontchangeCheckBox: CheckBox = new CheckBox(
|
||||
{
|
||||
change: rangeFontchange
|
||||
},
|
||||
'#enable');
|
||||
|
||||
rangeFontchangeCheckBox.change = rangeFontchange = (e: CheckBoxChangeEvents) => {
|
||||
let boolean: boolean = e.checked;
|
||||
circulargauge.axes[0].labelStyle.useRangeColor = boolean;
|
||||
circulargauge.axes[0].majorTicks.useRangeColor = boolean;
|
||||
circulargauge.axes[0].minorTicks.useRangeColor = boolean;
|
||||
circulargauge.axes[0].pointers[0].animation.enable = false; circulargauge.refresh();
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -7,78 +7,99 @@
|
|||
<!-- property panel -->
|
||||
<div class="col-md-4 property-section">
|
||||
<table id="property" title="Properties" style="width: 100%; margin-left:-10px">
|
||||
<colgroup>
|
||||
<col span="1" style="width: 30%;">
|
||||
<col span="1" style="width: 40%;">
|
||||
<col span="1" style="width: 30%;">
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div id='rangeStart'>Start Angle <span> 270°</span> </div>
|
||||
<div>Start Angle</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<input type="range" id="start" value="270" min="0" max="360" style="width:110px; margin-left: 20px" />
|
||||
<input type="range" id="start" value="270" min="0" max="360" style="width:65%;" />
|
||||
</div>
|
||||
</td>
|
||||
<td style="padding-top: 10px; text-align: center;">
|
||||
<span id='rangeStart' style="margin-left: -40px;">270°</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div id='rangeEnd'>End Angle<span> 90°</span> </div>
|
||||
<div>End Angle</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<input type="range" id="end" value="90" min="0" max="360" style="width:110px; margin-left: 20px" />
|
||||
<input type="range" id="end" value="90" min="0" max="360" style="width:65%;" />
|
||||
</div>
|
||||
</td>
|
||||
<td style="padding-top: 10px; text-align: center;">
|
||||
<span id='rangeEnd' style="margin-left: -40px;">90°</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div id='radius1'>Radius <span> 80%</span> </div>
|
||||
<div>Radius</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<input type="range" id="radius" value="80" min="0" max="100" style="width:110px; margin-left: 20px" />
|
||||
<input type="range" id="radius" value="80" min="0" max="100" style="width:65%;" />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr >
|
||||
<td style="width: 40%">
|
||||
<div class="property-text"> Radius based on angle</div>
|
||||
<td style="padding-top: 10px; text-align: center;">
|
||||
<span id='radius1' style="margin-left: -40px;">80%</span>
|
||||
</td>
|
||||
<td style="width: 40%;">
|
||||
<div style="margin-left: 40px">
|
||||
<input type="checkbox" id="angle" style="margin-left: 25px"/>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div class="property-text" style="width: 100%"> Radius based on angle</div>
|
||||
</td>
|
||||
<td>
|
||||
<div style="padding-top: -10px;">
|
||||
<input type="checkbox" id="angle"/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div id='center1'>Center X <span> 50%</span> </div>
|
||||
<div>Center X</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<input type="range" id="centerX" value="50" min="0" max="100" style="width:110px; margin-left: 20px" />
|
||||
<input type="range" id="centerX" value="50" min="0" max="100" style="width:65%;" />
|
||||
</div>
|
||||
</td>
|
||||
<td style="padding-top: 10px; text-align: center;">
|
||||
<span id='center1' style="margin-left: -40px;">50%</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div id='center2'>Center Y <span> 50%</span> </div>
|
||||
<div>Center Y</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<input type="range" id="centerY" value="50" min="0" max="100" style="width:110px; margin-left: 20px" />
|
||||
<input type="range" id="centerY" value="50" min="0" max="100" style="width:65%;" />
|
||||
</div>
|
||||
</td>
|
||||
<td style="padding-top: 10px; text-align: center;">
|
||||
<span id='center2' style="margin-left: -40px;">50%</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div id="enablehide" style="width: 103%"> Hide intersecting labels</span> </div>
|
||||
</td>
|
||||
<td>
|
||||
<div style="padding-top: -10px;">
|
||||
<input type="checkbox" id="hidelabel" checked >
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div id="enablehide"> Hide intersecting labels</span> </div>
|
||||
</td>
|
||||
<td>
|
||||
<div style="margin-left: 40px">
|
||||
<input type="checkbox" id="hidelabel" style="margin-left: 25px" checked >
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -89,7 +110,7 @@
|
|||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render the circular gauge with modified start and end angles to form semi or quarter circular gauges. By enabling the radius based on angle option, the radius of circular gauge will be calculated based on the start and end angles. You can also hide the intersect labels using 'hideIntersectingLabel' property.
|
||||
In this example, you can see how to render the circular gauge with modified start and end angles to form semi or quarter circular gauges. By enabling the radius based on angle option, the radius of circular gauge will be calculated based on the start and end angles. You can also hide the intersect labels using <code>hideIntersectingLabel</code> property.
|
||||
</p>
|
||||
<p>
|
||||
For more information on ranges, refer to this
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@ import { loadCultureFiles } from '../common/culture-loader';
|
|||
* Default sample
|
||||
*/
|
||||
import { CircularGauge, ILoadedEventArgs, GaugeTheme } from '@syncfusion/ej2-circulargauge';
|
||||
import { CheckBox, ChangeEventArgs as CheckBoxChangeEvents } from '@syncfusion/ej2-buttons';
|
||||
import { EmitType } from '@syncfusion/ej2-base';
|
||||
(window as any).default = (): void => {
|
||||
// custom code start
|
||||
loadCultureFiles();
|
||||
|
|
@ -26,7 +28,7 @@ import { CircularGauge, ILoadedEventArgs, GaugeTheme } from '@syncfusion/ej2-cir
|
|||
lineStyle: { width: 0, color: '#0450C2' },
|
||||
labelStyle: {
|
||||
position: 'Outside', autoAngle: true,
|
||||
font: { fontWeight: 'normal' }
|
||||
font: { fontWeight: 'normal', fontFamily: 'Segoe UI' }
|
||||
}, majorTicks: {
|
||||
position: 'Inside', width: 2, height: 12, interval: 4
|
||||
}, minorTicks: {
|
||||
|
|
@ -69,21 +71,21 @@ import { CircularGauge, ILoadedEventArgs, GaugeTheme } from '@syncfusion/ej2-cir
|
|||
document.getElementById('start').onpointermove = document.getElementById('start').ontouchmove =
|
||||
document.getElementById('start').onchange = () => {
|
||||
let min: number = parseInt((<HTMLInputElement>document.getElementById('start')).value, 10);
|
||||
document.getElementById('rangeStart').innerHTML = 'Start Angle <span> ' + min + '°';
|
||||
document.getElementById('rangeStart').innerHTML = min + '°';
|
||||
circulargauge.axes[0].startAngle = min;
|
||||
circulargauge.refresh();
|
||||
};
|
||||
document.getElementById('end').onpointermove = document.getElementById('end').ontouchmove =
|
||||
document.getElementById('end').onchange = () => {
|
||||
let max: number = parseInt((<HTMLInputElement>document.getElementById('end')).value, 10);
|
||||
document.getElementById('rangeEnd').innerHTML = 'End Angle <span> ' + max + '°';
|
||||
document.getElementById('rangeEnd').innerHTML = max + '°';
|
||||
circulargauge.axes[0].endAngle = max;
|
||||
circulargauge.refresh();
|
||||
};
|
||||
document.getElementById('radius').onpointermove = document.getElementById('radius').ontouchmove =
|
||||
document.getElementById('radius').onchange = () => {
|
||||
let max: number = parseInt((<HTMLInputElement>document.getElementById('radius')).value, 10);
|
||||
document.getElementById('radius1').innerHTML = 'Radius <span> ' + max + '%';
|
||||
document.getElementById('radius1').innerHTML = max + '%';
|
||||
circulargauge.axes[0].radius = '' + max + '%';
|
||||
circulargauge.refresh();
|
||||
};
|
||||
|
|
@ -91,7 +93,7 @@ import { CircularGauge, ILoadedEventArgs, GaugeTheme } from '@syncfusion/ej2-cir
|
|||
document.getElementById('centerX').onchange = () => {
|
||||
if (!highlightCheckBox.checked) {
|
||||
let max: number = parseInt((<HTMLInputElement>document.getElementById('centerX')).value, 10);
|
||||
document.getElementById('center1').innerHTML = 'Center X <span> ' + max + '%';
|
||||
document.getElementById('center1').innerHTML = max + '%';
|
||||
circulargauge.centerX = '' + max + '%';
|
||||
circulargauge.refresh();
|
||||
}
|
||||
|
|
@ -100,7 +102,7 @@ import { CircularGauge, ILoadedEventArgs, GaugeTheme } from '@syncfusion/ej2-cir
|
|||
document.getElementById('centerY').onchange = () => {
|
||||
if (!highlightCheckBox.checked) {
|
||||
let max: number = parseInt((<HTMLInputElement>document.getElementById('centerY')).value, 10);
|
||||
document.getElementById('center2').innerHTML = 'Center Y <span> ' + max + '%';
|
||||
document.getElementById('center2').innerHTML = max + '%';
|
||||
circulargauge.centerY = '' + max + '%';
|
||||
circulargauge.refresh();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,45 +7,54 @@
|
|||
</div>
|
||||
<!-- property panel -->
|
||||
<div class="col-lg-3 property-section">
|
||||
<table id="property" title="Properties" style="width: 100%; margin-left:-10px">
|
||||
<tbody>
|
||||
<tr >
|
||||
<td style="width: 40%">
|
||||
<div class="property-text" style="width:100px"> Show text labels</div>
|
||||
<table id="property" title="Properties" style="width: 100%;">
|
||||
<colgroup>
|
||||
<col span="1" style="width: 70%;">
|
||||
<col span="1" style="width: 30%;">
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div class="property-text" style="width: 110%;"> Show text labels</div>
|
||||
</td>
|
||||
<td style="width: 40%;">
|
||||
<div style="margin-left: 30px">
|
||||
<td>
|
||||
<div style="margin-left: 60px; margin-top:-10px;" class="property-text">
|
||||
<input type="checkbox" id="showText" checked/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr >
|
||||
<td style="width: 40%">
|
||||
<div class="property-text" style="width:100px"> Combine ranges</div>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div class="property-text" style="width: 110%;"> Combine ranges</div>
|
||||
</td>
|
||||
<td style="width: 40%;">
|
||||
<div style="margin-left: 30px">
|
||||
<td>
|
||||
<div style="margin-left: 60px; margin-top:-10px;" class="property-text">
|
||||
<input type="checkbox" id="combineRange" checked/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr >
|
||||
<td style="width: 40%">
|
||||
<div class="property-text" style="width:100px"> Gap between ranges</div>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div style="width: 136%;" class="property-text"> Gap between ranges</div>
|
||||
</td>
|
||||
<td style="width: 40%;">
|
||||
<div style="margin-left: 30px">
|
||||
<td>
|
||||
<div style="margin-left: 60px; margin-top:-10px;" class="property-text">
|
||||
<input type="checkbox" id="range" checked/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<style>
|
||||
div.property-text {
|
||||
padding-left: 0px; padding-top: 0px;
|
||||
}
|
||||
</style>
|
||||
<script id='pointerValue' type="text/x-template">
|
||||
<div id='templateWrap'>
|
||||
<div class='des'>
|
||||
<div id='pointerannotation' style="width:90px;text-align:center;font-size:20px;font-family:Roboto">${pointers[0].value} km/h</div>
|
||||
<div id='pointerannotation' style="width:90px;text-align:center;font-size:20px;font-family:Segoe UI;">${pointers[0].value} km/h</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ CircularGauge.Inject(GaugeTooltip);
|
|||
},
|
||||
// custom code end
|
||||
title: 'Tooltip Customization',
|
||||
titleStyle: { size: '15px', color: 'grey' },
|
||||
titleStyle: { size: '15px', color: 'grey', fontFamily: 'Segoe UI' },
|
||||
axes: [{
|
||||
radius: '90%',
|
||||
minimum: 0,
|
||||
|
|
@ -31,7 +31,7 @@ CircularGauge.Inject(GaugeTooltip);
|
|||
lineStyle: { width: 0 },
|
||||
majorTicks: { color: 'white', offset: -5, height: 12 },
|
||||
minorTicks: { width: 0 },
|
||||
labelStyle: { useRangeColor: true, font: { color: '#424242', size: '13px', fontFamily: 'Roboto' } },
|
||||
labelStyle: { useRangeColor: true, font: { color: '#424242', size: '13px', fontFamily: 'Segoe UI' } },
|
||||
pointers: [{
|
||||
value: 70,
|
||||
radius: '60%',
|
||||
|
|
|
|||
|
|
@ -7,36 +7,46 @@
|
|||
<!-- property panel -->
|
||||
<div class="col-md-4 property-section">
|
||||
<table id="property" title="Properties" style="width: 100%; margin-left:-10px">
|
||||
<colgroup>
|
||||
<col span="1" style="width: 50%;">
|
||||
<col span="1" style="width: 40%;">
|
||||
<col span="1" style="width: 10%;">
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr style="height: 50px">
|
||||
<td style="width: 30%">
|
||||
<div id='pointerValue'>Pointer Value <span> 70</span> </div>
|
||||
<td>
|
||||
<div>Pointer Value</div>
|
||||
</td>
|
||||
<td style="width: 40%;">
|
||||
<div style="margin-left: 20px">
|
||||
<input type="range" id="value" value="70" min="0" max="120" style="width: 100px"/>
|
||||
<td>
|
||||
<div>
|
||||
<input type="range" id="value" value="70" min="0" max="120" style="width: 70%"/>
|
||||
</div>
|
||||
</td>
|
||||
<td style="padding-top: 10px; text-align: center;">
|
||||
<span id="pointerValue" style="margin-left: -30px;">70</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td style="width: 20%">
|
||||
<div id='enablePointer'>Allow Pointer Drag</div>
|
||||
<td>
|
||||
<div id='enablePointer' style="width: 97%">Allow Pointer Drag</div>
|
||||
</td>
|
||||
<td style="width: 40%;">
|
||||
<div style="margin-left: 63px">
|
||||
<td>
|
||||
<div style="margin-left: -10px; padding-top: 0px">
|
||||
<input type="checkbox" id="enable" checked="true" />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td style="width: 20%">
|
||||
<div id='enableRange'>Allow Ranges Drag</div>
|
||||
<td>
|
||||
<div id='enableRange' style="width: 98%">Allow Ranges Drag</div>
|
||||
</td>
|
||||
<td style="width: 40%;">
|
||||
<div style="margin-left: 63px">
|
||||
<td>
|
||||
<div style="margin-left: -10px; padding-top: 0px">
|
||||
<input type="checkbox" id="enable1" />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,12 +7,14 @@ import { loadCultureFiles } from '../common/culture-loader';
|
|||
*/
|
||||
import { CircularGauge, IPointerDragEventArgs, Annotations, getRangeColor, Range } from '@syncfusion/ej2-circulargauge';
|
||||
import { ILoadedEventArgs, GaugeTheme } from '@syncfusion/ej2-circulargauge';
|
||||
import { CheckBox, ChangeEventArgs as CheckBoxChangeEvents } from '@syncfusion/ej2-buttons';
|
||||
import { EmitType } from '@syncfusion/ej2-base';
|
||||
CircularGauge.Inject(Annotations);
|
||||
(window as any).default = (): void => {
|
||||
// custom code start
|
||||
loadCultureFiles();
|
||||
// custom code end
|
||||
let content: string = '<div style="font-size: 14px;color:#E5C31C;font-weight: lighter;font-style: oblique;"><span>';
|
||||
let content: string = '<div style="font-size: 14px;color:#E5C31C;font-weight: lighter;font-style: oblique; font-family: Segoe UI;"><span>';
|
||||
let pointerValue: number;
|
||||
let circulargauge: CircularGauge = new CircularGauge({
|
||||
// custom code start
|
||||
|
|
@ -28,7 +30,7 @@ CircularGauge.Inject(Annotations);
|
|||
dragMove: (args: IPointerDragEventArgs) => {
|
||||
if (isNaN(args.rangeIndex)) {
|
||||
pointerValue = Math.round(args.currentValue);
|
||||
document.getElementById('pointerValue').innerHTML = 'Pointer Value <span> ' + pointerValue;
|
||||
document.getElementById('pointerValue').innerHTML = pointerValue.toString();
|
||||
(<HTMLInputElement>document.getElementById('value')).value = pointerValue.toString();
|
||||
circulargauge.setAnnotationValue(0, 0, content + pointerValue + ' MPH</span></div>');
|
||||
}
|
||||
|
|
@ -53,7 +55,7 @@ CircularGauge.Inject(Annotations);
|
|||
maximum: 120,
|
||||
majorTicks: { useRangeColor: true },
|
||||
minorTicks: { useRangeColor: true },
|
||||
labelStyle: { useRangeColor: true },
|
||||
labelStyle: { useRangeColor: true, font: { fontFamily: 'Segoe UI' } },
|
||||
ranges: [{
|
||||
start: 0,
|
||||
end: 40,
|
||||
|
|
@ -110,15 +112,30 @@ CircularGauge.Inject(Annotations);
|
|||
document.getElementById('value').onchange = () => {
|
||||
let pointerValue: number = parseInt((<HTMLInputElement>document.getElementById('value')).value, 10);
|
||||
setPointersValue(circulargauge, pointerValue);
|
||||
document.getElementById('pointerValue').innerHTML = 'Pointer Value <span> ' + pointerValue;
|
||||
document.getElementById('pointerValue').innerHTML = pointerValue.toString();
|
||||
};
|
||||
let pointerchange: EmitType<CheckBoxChangeEvents>;
|
||||
let rangechange: EmitType<CheckBoxChangeEvents>;
|
||||
let pointerchangeCheckBox: CheckBox = new CheckBox(
|
||||
{
|
||||
change: pointerchange,
|
||||
checked: true
|
||||
},
|
||||
'#enable');
|
||||
|
||||
pointerchangeCheckBox.change = pointerchange = (e: CheckBoxChangeEvents) => {
|
||||
let boolean: boolean = e.checked;
|
||||
circulargauge.enablePointerDrag = boolean;
|
||||
}
|
||||
|
||||
document.getElementById('enable').onchange = () => {
|
||||
let value: boolean = (<HTMLInputElement>document.getElementById('enable')).checked;
|
||||
circulargauge.enablePointerDrag = value;
|
||||
};
|
||||
document.getElementById('enable1').onchange = () => {
|
||||
let value: boolean = (<HTMLInputElement>document.getElementById('enable1')).checked;
|
||||
circulargauge.enableRangeDrag = value;
|
||||
};
|
||||
let rangechangeCheckBox: CheckBox = new CheckBox(
|
||||
{
|
||||
change: rangechange
|
||||
},
|
||||
'#enable1');
|
||||
|
||||
rangechangeCheckBox.change = rangechange = (e: CheckBoxChangeEvents) => {
|
||||
let boolean: boolean = e.checked;
|
||||
circulargauge.enableRangeDrag = boolean;
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -166,6 +166,25 @@
|
|||
.e-container .e-palette .e-scroll-palette.e-selected::before {
|
||||
content: '\e933';
|
||||
}
|
||||
.tailwind .e-container .e-palette .e-scroll-palette.e-selected::before,
|
||||
.tailwind-dark .e-container .e-palette .e-scroll-palette.e-selected::before {
|
||||
content: '\e856';
|
||||
}
|
||||
.bootstrap5 .e-container .e-palette .e-scroll-palette.e-selected::before,
|
||||
.bootstrap5-dark .e-container .e-palette .e-scroll-palette.e-selected::before {
|
||||
content: '\e727';
|
||||
}
|
||||
.bootstrap4 .e-container .e-palette .e-scroll-palette.e-selected::before,
|
||||
.bootstrap4-dark .e-container .e-palette .e-scroll-palette.e-selected::before {
|
||||
content: '\e718';
|
||||
}
|
||||
.bootstrap .e-container .e-palette .e-scroll-palette.e-selected::before,
|
||||
.bootstrap-dark .e-container .e-palette .e-scroll-palette.e-selected::before,
|
||||
.fabric .e-container .e-palette .e-scroll-palette.e-selected::before,
|
||||
.fabric-dark .e-container .e-palette .e-scroll-palette.e-selected::before,
|
||||
.highcontrast .e-container .e-palette .e-scroll-palette.e-selected::before {
|
||||
content: '\e7ff';
|
||||
}
|
||||
.highcontrast .e-container .e-palette {
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,6 +49,19 @@
|
|||
.bootstrap4 .e-list-icon {
|
||||
color: #495057;
|
||||
}
|
||||
.material-dark .e-list-icon,
|
||||
.bootstrap5-dark .e-list-icon,
|
||||
.tailwind-dark .e-list-icon {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bootstrap-dark .e-list-icon {
|
||||
color: #f0f0f0;
|
||||
}
|
||||
|
||||
.fabric-dark .e-list-icon {
|
||||
color: #dadada;
|
||||
}
|
||||
/* custom code end*/
|
||||
.e-list-icon {
|
||||
font-family: 'Socialicons' !important;
|
||||
|
|
|
|||
|
|
@ -58,19 +58,17 @@
|
|||
}
|
||||
|
||||
.bootstrap .header {
|
||||
background-color: #fff;
|
||||
background-color: #f5f5f5;
|
||||
border-bottom: 1px solid #ccc;
|
||||
color: #777;
|
||||
font-family: "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 30px;
|
||||
height: 30px;
|
||||
padding: 0 0 0 24px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
height: 48px;
|
||||
padding: 15px 0 0 16px;
|
||||
}
|
||||
|
||||
.e-bigger.bootstrap .header {
|
||||
line-height: 44px;
|
||||
height: 44px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
|
@ -89,7 +87,7 @@
|
|||
|
||||
.e-bigger.bootstrap .job {
|
||||
font-size: 15px;
|
||||
margin-top: -32px;
|
||||
margin-top: -18px;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
|
||||
|
|
@ -103,6 +101,7 @@
|
|||
.e-bigger.bootstrap .ename {
|
||||
font-size: 16px;
|
||||
padding-bottom: 15px;
|
||||
line-height: 1.063em;
|
||||
}
|
||||
|
||||
.bootstrap .empImage,
|
||||
|
|
@ -165,5 +164,16 @@
|
|||
margin-top: -15px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.bootstrap5 #employees_popup .job,
|
||||
.bootstrap-dark #employees_popup .job,
|
||||
.bootstrap5-dark #employees_popup .job,
|
||||
.tailwind-dark #employees_popup .job {
|
||||
margin-top: 0;
|
||||
}
|
||||
.e-bigger.bootstrap5 #employees_popup .job,
|
||||
.e-bigger.bootstrap-dark #employees_popup .job,
|
||||
.e-bigger.bootstrap5-dark #employees_popup .job,
|
||||
.e-bigger.tailwind-dark #employees_popup .job {
|
||||
margin-top: -15px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
"Dropdowns": ["AutoComplete", "ComboBox", "Dropdown List", "Dropdown Tree", "MultiSelect Dropdown", "List Box"],
|
||||
"Navigation": ["Accordion", "Breadcrumb", "Context Menu", "Menu Bar", "Sidebar", "Tabs", "Toolbar", "TreeView", "File Manager"],
|
||||
"Notifications": ["Badge", "Toast", "Progress Bar"],
|
||||
"Inputs": ["Form Validation", "TextBox", "Input Mask", "Numeric Textbox", "Color Picker", "File Upload", "Range Slider"],
|
||||
"Inputs": ["Form Validation", "TextBox", "Input Mask", "Numeric Textbox", "Color Picker", "File Upload", "Range Slider", "Signature"],
|
||||
"Layout": ["Avatar", "Card", "Dialog", "ListView", "Tooltip", "Splitter", "Dashboard Layout"],
|
||||
"Forms": ["Query Builder"],
|
||||
"Viewer": ["PDF Viewer"]
|
||||
|
|
|
|||
|
|
@ -63,8 +63,39 @@
|
|||
display: block;
|
||||
}
|
||||
|
||||
.e-panel .e-header-text {
|
||||
padding: 12px 0 12px 0;
|
||||
.bootstrap5 .e-panel .e-header-text,
|
||||
.bootstrap5-dark .e-panel .e-header-text,
|
||||
.tailwind .e-panel .e-header-text,
|
||||
.tailwind-dark .e-panel .e-header-text,
|
||||
.material .e-panel .e-header-text,
|
||||
.bootstrap4 .e-panel .e-header-text,
|
||||
.bootstrap .e-panel .e-header-text,
|
||||
.bootstrap-dark .e-panel .e-header-text,
|
||||
.fabric .e-panel .e-header-text,
|
||||
.fabric-dark .e-panel .e-header-text,
|
||||
.highcontrast .e-panel .e-header-text{
|
||||
padding: 10px 0 0;
|
||||
}
|
||||
|
||||
.e-bigger.bootstrap5 .e-panel .e-header-text,
|
||||
.e-bigger.bootstrap5-dark .e-panel .e-header-text,
|
||||
.e-bigger.tailwind .e-panel .e-header-text,
|
||||
.e-bigger.tailwind-dark .e-panel .e-header-text {
|
||||
padding: 2px 0 0;
|
||||
}
|
||||
|
||||
.e-bigger.material .e-panel .e-header-text,
|
||||
.e-bigger.bootstrap4 .e-panel .e-header-text,
|
||||
.e-bigger.bootstrap .e-panel .e-header-text,
|
||||
.e-bigger.bootstrap-dark .e-panel .e-header-text
|
||||
{
|
||||
padding: 8px 0 0;
|
||||
}
|
||||
|
||||
.e-bigger.fabric .e-panel .e-header-text,
|
||||
.e-bigger.fabric-dark .e-panel .e-header-text,
|
||||
.e-bigger.highcontrast .e-panel .e-header-text {
|
||||
padding: 6px 0 0;
|
||||
}
|
||||
|
||||
.e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-header {
|
||||
|
|
|
|||
|
|
@ -274,7 +274,7 @@
|
|||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#property-section .e-input-group, .e-input-group.e-control-wrapper {
|
||||
.property-section.dashboard .e-input-group.e-control-wrapper {
|
||||
width:122px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -367,37 +367,67 @@ function dragEnter(args: IDragEnterEventArgs): void {
|
|||
function contextMenuClick(args: MenuEventArgs): void {
|
||||
if (diagram.selectedItems.nodes.length > 0) {
|
||||
let bpmnShape: BpmnShapeModel = diagram.selectedItems.nodes[0].shape as BpmnShapeModel;
|
||||
if (args.item.iconCss.indexOf('e-adhocs') > -1) {
|
||||
bpmnShape.activity.subProcess.adhoc = args.item.id === 'AdhocNone' ? false : true;
|
||||
}
|
||||
if (args.item.iconCss.indexOf('e-event') > -1) {
|
||||
bpmnShape.event.event = (args.item.id as BpmnEvents);
|
||||
}
|
||||
if (args.item.iconCss.indexOf('e-trigger') > -1) {
|
||||
bpmnShape.event.trigger = (args.item.text as BpmnTriggers);
|
||||
}
|
||||
if (args.item.iconCss.indexOf('e-loop') > -1) {
|
||||
let loop: string = (args.item.id === 'LoopNone' as BpmnLoops) ? 'None' : args.item.id;
|
||||
if (bpmnShape.activity.activity === 'Task') {
|
||||
bpmnShape.activity.task.loop = loop as BpmnLoops;
|
||||
if (args.item.iconCss) {
|
||||
if (args.item.iconCss.indexOf('e-adhocs') > -1) {
|
||||
bpmnShape.activity.subProcess.adhoc = args.item.id === 'AdhocNone' ? false : true;
|
||||
}
|
||||
if (bpmnShape.activity.activity === 'SubProcess') {
|
||||
bpmnShape.activity.subProcess.loop = loop as BpmnLoops;
|
||||
if (args.item.iconCss.indexOf('e-event') > -1) {
|
||||
bpmnShape.event.event = (args.item.id as BpmnEvents);
|
||||
}
|
||||
}
|
||||
if (args.item.iconCss.indexOf('e-compensation') > -1) {
|
||||
let compensation: boolean = (args.item.id === 'CompensationNone') ? false : true;
|
||||
if (bpmnShape.activity.activity === 'Task') {
|
||||
bpmnShape.activity.task.compensation = compensation;
|
||||
if (args.item.iconCss.indexOf('e-trigger') > -1) {
|
||||
bpmnShape.event.trigger = (args.item.text as BpmnTriggers);
|
||||
}
|
||||
if (bpmnShape.activity.activity === 'SubProcess') {
|
||||
bpmnShape.activity.subProcess.compensation = compensation;
|
||||
if (args.item.iconCss.indexOf('e-loop') > -1) {
|
||||
let loop: string = (args.item.id === 'LoopNone' as BpmnLoops) ? 'None' : args.item.id;
|
||||
if (bpmnShape.activity.activity === 'Task') {
|
||||
bpmnShape.activity.task.loop = loop as BpmnLoops;
|
||||
}
|
||||
if (bpmnShape.activity.activity === 'SubProcess') {
|
||||
bpmnShape.activity.subProcess.loop = loop as BpmnLoops;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (args.item.iconCss.indexOf('e-call') > -1) {
|
||||
let compensation: boolean = (args.item.id === 'CallNone') ? false : true;
|
||||
if (bpmnShape.activity.activity === 'Task') {
|
||||
bpmnShape.activity.task.call = compensation;
|
||||
if (args.item.iconCss.indexOf('e-compensation') > -1) {
|
||||
let compensation: boolean = (args.item.id === 'CompensationNone') ? false : true;
|
||||
if (bpmnShape.activity.activity === 'Task') {
|
||||
bpmnShape.activity.task.compensation = compensation;
|
||||
}
|
||||
if (bpmnShape.activity.activity === 'SubProcess') {
|
||||
bpmnShape.activity.subProcess.compensation = compensation;
|
||||
}
|
||||
}
|
||||
if (args.item.iconCss.indexOf('e-call') > -1) {
|
||||
let compensation: boolean = (args.item.id === 'CallNone') ? false : true;
|
||||
if (bpmnShape.activity.activity === 'Task') {
|
||||
bpmnShape.activity.task.call = compensation;
|
||||
}
|
||||
}
|
||||
|
||||
if (args.item.iconCss.indexOf('e-boundry') > -1) {
|
||||
let call: string = args.item.id;
|
||||
if (args.item.id !== 'Default') {
|
||||
call = (args.item.id === 'BoundryEvent') ? 'Event' : 'Call';
|
||||
}
|
||||
bpmnShape.activity.subProcess.boundary = call as BpmnBoundary;
|
||||
}
|
||||
if (args.item.iconCss.indexOf('e-data') > -1) {
|
||||
let call: string = args.item.id === 'DataObjectNone' ? 'None' : args.item.id;
|
||||
bpmnShape.dataObject.type = call as BpmnDataObjects;
|
||||
}
|
||||
if (args.item.iconCss.indexOf('e-collection') > -1) {
|
||||
let call: boolean = (args.item.id === 'Collectioncollection') ? true : false;
|
||||
bpmnShape.dataObject.collection = call;
|
||||
}
|
||||
if (args.item.iconCss.indexOf('e-task') > -1) {
|
||||
let task: string = args.item.id === 'TaskNone' ? 'None' : args.item.id;
|
||||
if (bpmnShape.activity.activity === 'Task') {
|
||||
bpmnShape.activity.task.type = task as BpmnTasks;
|
||||
}
|
||||
}
|
||||
if (args.item.iconCss.indexOf('e-gate') > -1) {
|
||||
let task: string = args.item.id.replace('Gateway', '');
|
||||
if (bpmnShape.shape === 'Gateway') {
|
||||
bpmnShape.gateway.type = task as BpmnGateways;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (args.item.id === 'CollapsedSubProcess' || args.item.id === 'ExpandedSubProcess') {
|
||||
|
|
@ -409,33 +439,6 @@ function contextMenuClick(args: MenuEventArgs): void {
|
|||
bpmnShape.activity.subProcess.collapsed = true;
|
||||
}
|
||||
}
|
||||
if (args.item.iconCss.indexOf('e-boundry') > -1) {
|
||||
let call: string = args.item.id;
|
||||
if (args.item.id !== 'Default') {
|
||||
call = (args.item.id === 'BoundryEvent') ? 'Event' : 'Call';
|
||||
}
|
||||
bpmnShape.activity.subProcess.boundary = call as BpmnBoundary;
|
||||
}
|
||||
if (args.item.iconCss.indexOf('e-data') > -1) {
|
||||
let call: string = args.item.id === 'DataObjectNone' ? 'None' : args.item.id;
|
||||
bpmnShape.dataObject.type = call as BpmnDataObjects;
|
||||
}
|
||||
if (args.item.iconCss.indexOf('e-collection') > -1) {
|
||||
let call: boolean = (args.item.id === 'Collectioncollection') ? true : false;
|
||||
bpmnShape.dataObject.collection = call;
|
||||
}
|
||||
if (args.item.iconCss.indexOf('e-task') > -1) {
|
||||
let task: string = args.item.id === 'TaskNone' ? 'None' : args.item.id;
|
||||
if (bpmnShape.activity.activity === 'Task') {
|
||||
bpmnShape.activity.task.type = task as BpmnTasks;
|
||||
}
|
||||
}
|
||||
if (args.item.iconCss.indexOf('e-gate') > -1) {
|
||||
let task: string = args.item.id.replace('Gateway', '');
|
||||
if (bpmnShape.shape === 'Gateway') {
|
||||
bpmnShape.gateway.type = task as BpmnGateways;
|
||||
}
|
||||
}
|
||||
diagram.dataBind();
|
||||
}
|
||||
|
||||
|
|
@ -573,19 +576,19 @@ function contextMenuOpen(args: DiagramBeforeMenuOpenEventArgs): void {
|
|||
let connectorSymbols: ConnectorModel[] = [
|
||||
{
|
||||
id: 'Link1', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },
|
||||
targetDecorator: { shape: 'Arrow', style:{strokeColor: '#757575', fill: '#757575'} }, style: { strokeWidth: 2, strokeColor: '#757575' }
|
||||
targetDecorator: { shape: 'Arrow', style: { strokeColor: '#757575', fill: '#757575' } }, style: { strokeWidth: 2, strokeColor: '#757575' }
|
||||
},
|
||||
{
|
||||
id: 'Link2', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },
|
||||
targetDecorator: { shape: 'Arrow', style:{strokeColor: '#757575', fill: '#757575'} }, style: { strokeWidth: 2, strokeDashArray: '4 4',strokeColor: '#757575' }
|
||||
targetDecorator: { shape: 'Arrow', style: { strokeColor: '#757575', fill: '#757575' } }, style: { strokeWidth: 2, strokeDashArray: '4 4', strokeColor: '#757575' }
|
||||
},
|
||||
{
|
||||
id: 'Link3', type: 'Straight', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },
|
||||
targetDecorator: { shape: 'Arrow', style:{strokeColor: '#757575', fill: '#757575'} }, style: { strokeWidth: 2, strokeColor: '#757575' }
|
||||
targetDecorator: { shape: 'Arrow', style: { strokeColor: '#757575', fill: '#757575' } }, style: { strokeWidth: 2, strokeColor: '#757575' }
|
||||
},
|
||||
{
|
||||
id: 'link4', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 }, type: 'Orthogonal',
|
||||
targetDecorator: { style:{strokeColor: '#757575', fill: '#757575'} },
|
||||
targetDecorator: { style: { strokeColor: '#757575', fill: '#757575' } },
|
||||
shape: {
|
||||
type: 'Bpmn',
|
||||
flow: 'Association',
|
||||
|
|
|
|||
|
|
@ -276,16 +276,24 @@ function getConnectorDefaults(connector: ConnectorModel): ConnectorModel {
|
|||
},
|
||||
contextMenuOpen: function (args: DiagramBeforeMenuOpenEventArgs) {
|
||||
for (let item of args.items) {
|
||||
if ((diagram.selectedItems.connectors.length + diagram.selectedItems.nodes.length) > 0) {
|
||||
if (item.id === 'InsertLaneBefore' || item.id === 'InsertLaneAfter') {
|
||||
if (diagram.selectedItems.connectors.length || (diagram.selectedItems.nodes.length && !(diagram.selectedItems.nodes[0] as Node).isLane)) {
|
||||
args.hiddenItems.push(item.text);
|
||||
}
|
||||
if (
|
||||
diagram.selectedItems.connectors.length +
|
||||
diagram.selectedItems.nodes.length >
|
||||
0
|
||||
) {
|
||||
if (item.id === 'InsertLaneBefore' || item.id === 'InsertLaneAfter') {
|
||||
if (
|
||||
diagram.selectedItems.connectors.length ||
|
||||
(diagram.selectedItems.nodes.length &&
|
||||
!(diagram.selectedItems.nodes[0] as Node).isLane)
|
||||
) {
|
||||
args.hiddenItems.push(item.id);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
args.hiddenItems.push(item.text);
|
||||
args.hiddenItems.push(item.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
contextMenuClick: function (args: MenuEventArgs) {
|
||||
if (args.item.id === 'InsertLaneBefore' || args.item.id === 'InsertLaneAfter') {
|
||||
|
|
|
|||
|
|
@ -94,6 +94,7 @@ function setNodeTemplate(obj: NodeModel): void {
|
|||
format: '###.##',
|
||||
value: 0.8,
|
||||
step: .1,
|
||||
max: 3.5
|
||||
});
|
||||
springfactor.appendTo('#springfactor');
|
||||
|
||||
|
|
|
|||
|
|
@ -1715,5 +1715,5 @@
|
|||
}
|
||||
]
|
||||
},
|
||||
"compatibilityMode": 3
|
||||
"compatibilityMode": "Word2013"
|
||||
}
|
||||
|
|
@ -701,7 +701,6 @@
|
|||
"url": "table-formatting",
|
||||
"name": "Table Formatting",
|
||||
"category": "Editing Features",
|
||||
"type": "update",
|
||||
"description": "The Document Editor supports table formatting such as cell margins, cell spacing, horizontal merge, vertical merge, border styles, background color, and more.",
|
||||
"api": {
|
||||
"DocumentEditor": [
|
||||
|
|
|
|||
|
|
@ -49,6 +49,20 @@
|
|||
color: #495057;
|
||||
}
|
||||
|
||||
.material-dark .e-list-icon,
|
||||
.bootstrap5-dark .e-list-icon,
|
||||
.tailwind-dark .e-list-icon {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bootstrap-dark .e-list-icon {
|
||||
color: #f0f0f0;
|
||||
}
|
||||
|
||||
.fabric-dark .e-list-icon {
|
||||
color: #dadada;
|
||||
}
|
||||
|
||||
/* custom code end*/
|
||||
.e-list-icon {
|
||||
font-family: 'Socialicons' !important;
|
||||
|
|
|
|||
|
|
@ -43,14 +43,37 @@
|
|||
|
||||
/* custom code start*/
|
||||
|
||||
.material .inlinecss.e-ddl .e-control.e-dropdownlist.e-input {
|
||||
margin: 4px 0px 0px 0px;
|
||||
}
|
||||
|
||||
.bootstrap .inlinecss.e-ddl .e-control.e-dropdownlist.e-input {
|
||||
margin-top: -1px;
|
||||
margin: -2px 0 0 0;
|
||||
}
|
||||
|
||||
.material .inlinecss.e-ddl .e-control.e-dropdownlist.e-input,
|
||||
.material-dark .inlinecss.e-ddl .e-control.e-dropdownlist.e-input {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.tailwind .inlinecss.e-ddl .e-control.e-dropdownlist.e-input,
|
||||
.tailwind-dark .inlinecss.e-ddl .e-control.e-dropdownlist.e-input {
|
||||
margin: -4px 0 0 0;
|
||||
}
|
||||
|
||||
.bootstrap4 .inlinecss.e-ddl .e-control.e-dropdownlist.e-input,
|
||||
.bootstrap-dark .inlinecss.e-ddl .e-control.e-dropdownlist.e-input {
|
||||
margin: -4px 0 0 0;
|
||||
}
|
||||
|
||||
.bootstrap5 .inlinecss.e-ddl .e-control.e-dropdownlist.e-input,
|
||||
.bootstrap5-dark .inlinecss.e-ddl .e-control.e-dropdownlist.e-input
|
||||
.fabric .inlinecss.e-ddl .e-control.e-dropdownlist.e-input,
|
||||
.fabric-dark .inlinecss.e-ddl .e-control.e-dropdownlist.e-input {
|
||||
margin: -6px 0 0 0;
|
||||
}
|
||||
|
||||
.e-bigger .inlinecss.e-ddl .e-control.e-dropdownlist.e-input {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
/* custom code end*/
|
||||
#contentText .e-input-group.e-control-wrapper.e-ddl::before,
|
||||
#contentText .e-input-group.e-control-wrapper.e-ddl::after {
|
||||
|
|
@ -67,4 +90,44 @@
|
|||
border-bottom: 1px dashed black;
|
||||
box-shadow: none;
|
||||
}
|
||||
.highcontrast #contentText .e-input-group.e-control-wrapper.e-ddl,
|
||||
.highcontrast #contentText .e-input-group.e-control-wrapper.e-ddl:hover,
|
||||
.highcontrast #contentText .e-input-group.e-ddl.e-input-focus,
|
||||
.highcontrast #contentText .e-input-group.e-ddl.e-input-focus::before,
|
||||
.highcontrast #contentText .e-input-group.e-ddl.e-input-focus::after {
|
||||
border-bottom: 1px dashed #f0f0f0;
|
||||
}
|
||||
.material-dark #contentText .e-input-group.e-control-wrapper.e-ddl,
|
||||
.material-dark #contentText .e-input-group.e-control-wrapper.e-ddl,
|
||||
.material-dark #contentText .e-input-group.e-control-wrapper.e-ddl:hover,
|
||||
.material-dark #contentText .e-input-group.e-ddl.e-input-focus,
|
||||
.material-dark #contentText .e-input-group.e-ddl.e-input-focus::before,
|
||||
.material-dark #contentText .e-input-group.e-ddl.e-input-focus::after,
|
||||
.fabric-dark #contentText .e-input-group.e-control-wrapper.e-ddl,
|
||||
.fabric-dark #contentText .e-input-group.e-control-wrapper.e-ddl,
|
||||
.fabric-dark #contentText .e-input-group.e-control-wrapper.e-ddl:hover,
|
||||
.fabric-dark #contentText .e-input-group.e-ddl.e-input-focus,
|
||||
.fabric-dark #contentText .e-input-group.e-ddl.e-input-focus::before,
|
||||
.fabric-dark #contentText .e-input-group.e-ddl.e-input-focus::after,
|
||||
.bootstrap-dark #contentText .e-input-group.e-control-wrapper.e-ddl,
|
||||
.bootstrap-dark #contentText .e-input-group.e-control-wrapper.e-ddl,
|
||||
.bootstrap-dark #contentText .e-input-group.e-control-wrapper.e-ddl:hover,
|
||||
.bootstrap-dark #contentText .e-input-group.e-ddl.e-input-focus,
|
||||
.bootstrap-dark #contentText .e-input-group.e-ddl.e-input-focus::before,
|
||||
.bootstrap-dark #contentText .e-input-group.e-ddl.e-input-focus::after,
|
||||
.bootstrap5-dark #contentText .e-input-group.e-control-wrapper.e-ddl,
|
||||
.bootstrap5-dark #contentText .e-input-group.e-control-wrapper.e-ddl,
|
||||
.bootstrap5-dark #contentText .e-input-group.e-control-wrapper.e-ddl:hover,
|
||||
.bootstrap5-dark #contentText .e-input-group.e-ddl.e-input-focus,
|
||||
.bootstrap5-dark #contentText .e-input-group.e-ddl.e-input-focus::before,
|
||||
.bootstrap5-dark #contentText .e-input-group.e-ddl.e-input-focus::after {
|
||||
border-bottom: 1px dashed #f0f0f0;
|
||||
}
|
||||
.tailwind-dark #contentText .e-input-group.e-control-wrapper.e-ddl,
|
||||
.tailwind-dark #contentText .e-input-group.e-control-wrapper.e-ddl:hover,
|
||||
.tailwind-dark #contentText .e-input-group.e-ddl.e-input-focus,
|
||||
.tailwind-dark #contentText .e-input-group.e-ddl.e-input-focus::before,
|
||||
.tailwind-dark #contentText .e-input-group.e-ddl.e-input-focus::after {
|
||||
border-bottom: 1px dashed #f0f0f0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -19,7 +19,7 @@ import * as data from './dataSource.json';
|
|||
// set the placeholder to DropDownList input element
|
||||
placeholder: 'Select an employee',
|
||||
// set the width to component
|
||||
width: '60px',
|
||||
width: '605x',
|
||||
// set the width to popup element
|
||||
popupWidth: '140px',
|
||||
// set the height to popup element
|
||||
|
|
|
|||
|
|
@ -64,19 +64,17 @@
|
|||
}
|
||||
|
||||
.bootstrap .header {
|
||||
background-color: #fff;
|
||||
background-color: #f5f5f5;
|
||||
border-bottom: 1px solid #ccc;
|
||||
color: #777;
|
||||
font-family: "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 30px;
|
||||
height: 30px;
|
||||
padding: 0 0 0 24px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
height: 48px;
|
||||
padding: 15px 0 0 16px;
|
||||
}
|
||||
|
||||
.e-bigger.bootstrap .header {
|
||||
line-height: 44px;
|
||||
height: 44px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
|
@ -95,7 +93,7 @@
|
|||
|
||||
.e-bigger.bootstrap .job {
|
||||
font-size: 15px;
|
||||
margin-top: -32px;
|
||||
margin-top: -18px;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
|
||||
|
|
@ -109,6 +107,7 @@
|
|||
.e-bigger.bootstrap .ename {
|
||||
font-size: 16px;
|
||||
padding-bottom: 15px;
|
||||
line-height: 1.063em;
|
||||
}
|
||||
|
||||
.bootstrap .empImage,
|
||||
|
|
@ -182,7 +181,7 @@
|
|||
}
|
||||
|
||||
.e-bigger:not(.bootstrap) .value {
|
||||
margin-top: 7px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.e-bigger:not(.bootstrap) .name {
|
||||
|
|
@ -212,5 +211,17 @@
|
|||
margin-top: -15px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.bootstrap5 #employees_popup .job,
|
||||
.bootstrap-dark #employees_popup .job,
|
||||
.bootstrap5-dark #employees_popup .job,
|
||||
.tailwind-dark #employees_popup .job {
|
||||
margin-top: 0;
|
||||
}
|
||||
.e-bigger.bootstrap5 #employees_popup .job,
|
||||
.e-bigger.bootstrap-dark #employees_popup .job,
|
||||
.e-bigger.bootstrap5-dark #employees_popup .job,
|
||||
.e-bigger.tailwind-dark #employees_popup .job {
|
||||
margin-top: -15px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -27,6 +27,10 @@
|
|||
background-position: -10px -552px
|
||||
}
|
||||
|
||||
.e-bigger .dropdowntree-icon .e-treeview .e-list-icon.folder {
|
||||
background-position: -10px -550px;
|
||||
}
|
||||
|
||||
.dropdowntree-icon .e-treeview .e-list-icon.docx {
|
||||
background-position: -10px -20px
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
"directory": "drop-down-tree",
|
||||
"category": "Dropdowns",
|
||||
"ftName": "dropdown-tree",
|
||||
"type": "update",
|
||||
"samples": [
|
||||
{
|
||||
"url": "default",
|
||||
|
|
@ -79,7 +78,6 @@
|
|||
"name": "Custom Template",
|
||||
"description": "This example demonstrates how to customize the display text of the selected items in the JavaScript drop-down tree control using the customTemplate.",
|
||||
"category": "Dropdown Tree",
|
||||
"type": "new",
|
||||
"api": {
|
||||
"DropDownTree": [
|
||||
"placeholder",
|
||||
|
|
|
|||
|
|
@ -81,6 +81,13 @@
|
|||
background-color: #1A1A1A;
|
||||
}
|
||||
|
||||
.bootstrap5-dark .ddt-template .head,
|
||||
.bootstrap5-dark .ddt-template .footer,
|
||||
.bootstrap5-dark .ddt-template .footer-content .e-badge {
|
||||
color: #fff;
|
||||
background-color: #212529;
|
||||
}
|
||||
|
||||
.tailwind-dark .ddt-template .head,
|
||||
.tailwind-dark .ddt-template .footer,
|
||||
.tailwind-dark .ddt-template .footer-content .e-badge {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<tbody>
|
||||
<tr>
|
||||
<td style="width: 50%">
|
||||
<div>Toolbar</div>
|
||||
<div id="checkboxElement">Toolbar</div>
|
||||
</td>
|
||||
<td style="width: 50%;padding-right: 10px">
|
||||
<div>
|
||||
|
|
@ -44,6 +44,8 @@
|
|||
#all-option-table .property-panel-section .property-panel-content table#property tr {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
#checkboxElement {
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
|
||||
.tailwind #openBtn,
|
||||
.tailwind-dark #openBtn {
|
||||
top: 40px;
|
||||
top: 29px;
|
||||
}
|
||||
|
||||
.bootstrap #openBtn,
|
||||
|
|
|
|||
|
|
@ -1,3 +1,48 @@
|
|||
<style>
|
||||
.material img.resource, .fabric img.resource, .bootstrap img.resource,
|
||||
.tailwind img.resource, .bootstrap5 img.resource, .bootstrap4 img.resource{
|
||||
content: url("src/gantt/images/Resources.png");
|
||||
}
|
||||
.material-dark img.resource, .fabric-dark img.resource, .bootstrap-dark img.resource,
|
||||
.tailwind-dark img.resource, .bootstrap5-dark img.resource, .highcontrast img.resource{
|
||||
content: url("src/gantt/images/__Resources.png");
|
||||
}
|
||||
.material img.taskName, .fabric img.taskName, .bootstrap img.taskName,
|
||||
.tailwind img.taskName, .bootstrap5 img.taskName, .bootstrap4 img.taskName{
|
||||
content: url("src/gantt/images/Task name.png");
|
||||
}
|
||||
.material-dark img.taskName, .fabric-dark img.taskName, .bootstrap-dark img.taskName,
|
||||
.tailwind-dark img.taskName, .bootstrap5-dark img.taskName, .highcontrast img.taskName{
|
||||
content: url("src/gantt/images/__Task name.png");
|
||||
}
|
||||
.material img.startDate, .fabric img.startDate, .bootstrap img.startDate,
|
||||
.tailwind img.startDate, .bootstrap5 img.startDate, .bootstrap4 img.startDate{
|
||||
content: url("src/gantt/images/Start date.png");
|
||||
}
|
||||
.material-dark img.startDate, .fabric-dark img.startDate, .bootstrap-dark img.startDate,
|
||||
.tailwind-dark img.startDate, .bootstrap5-dark img.startDate, .highcontrast img.startDate{
|
||||
content: url("src/gantt/images/__Start date.png");
|
||||
}
|
||||
.material img.duration, .fabric img.duration, .bootstrap img.duration,
|
||||
.tailwind img.duration, .bootstrap5 img.duration, .bootstrap4 img.duration{
|
||||
content: url("src/gantt/images/Duration.png");
|
||||
}
|
||||
.material-dark img.duration, .fabric-dark img.duration, .bootstrap-dark img.duration,
|
||||
.tailwind-dark img.duration, .bootstrap5-dark img.duration, .highcontrast img.duration{
|
||||
content: url("src/gantt/images/__Duration.png");
|
||||
}
|
||||
.material img.progressTemplate, .fabric img.progressTemplate, .bootstrap img.progressTemplate,
|
||||
.tailwind img.progressTemplate, .bootstrap5 img.progressTemplate, .bootstrap4 img.progressTemplate{
|
||||
content: url("src/gantt/images/Progress.png");
|
||||
}
|
||||
.material-dark img.progressTemplate, .fabric-dark img.progressTemplate, .bootstrap-dark img.progressTemplate,
|
||||
.tailwind-dark img.progressTemplate, .bootstrap5-dark img.progressTemplate, .highcontrast img.progressTemplate{
|
||||
content: url("src/gantt/images/__Progress.png");
|
||||
}
|
||||
img.resource, img.taskName, img.startDate, img.duration, img.progressTemplate{
|
||||
margin-right: 8px;
|
||||
}
|
||||
</style>
|
||||
<div class="control-section">
|
||||
<div class="content-wrapper">
|
||||
<div id="HeaderTemplate">
|
||||
|
|
@ -8,35 +53,35 @@
|
|||
<script type="text/x-template" id="resource">
|
||||
<div>
|
||||
<div>
|
||||
<img src="src/gantt/images/Resources.png" width="20" height="20" class="e-image" />Resources
|
||||
<img class="resource" width="20" height="20"/>Resources
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script type="text/x-template" id="projectName">
|
||||
<div>
|
||||
<div>
|
||||
<img src="src/gantt/images/Task name.png" width="20" height="20" class="e-image" /> Task Name
|
||||
<img class="taskName" width="20" height="20"/> Task Name
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script type="text/x-template" id="dateTemplate">
|
||||
<div>
|
||||
<div>
|
||||
<img src="src/gantt/images/Start date.png" width="20" height="20" class="e-image" /> Start Date
|
||||
<img class="startDate" width="20" height="20"/> Start Date
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script type="text/x-template" id="durationTemplate">
|
||||
<div>
|
||||
<div>
|
||||
<img src="src/gantt/images/Duration.png" width="20" height="20" class="e-image" /> Duration
|
||||
<img class="duration" width="20" height="20"/> Duration
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script type="text/x-template" id="progressTemplate">
|
||||
<div>
|
||||
<div>
|
||||
<img src="src/gantt/images/Progress.png" width="20" height="20" class="e-image" /> Progress
|
||||
<img class="progressTemplate" width="20" height="20"/> Progress
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
|
@ -54,8 +99,3 @@
|
|||
<p>More information about the header template can be found in documentation section.</p>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.e-image {
|
||||
margin-right: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 826 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 215 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 544 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 244 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 360 B |
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Загрузка…
Ссылка в новой задаче