jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
189 lines (178 loc) • 10.2 kB
JavaScript
var teamSalesContacts = '<tr><td style="width: 100px;"><img src="../images/janet.png" /></td><td style=""><strong>Team lead:</strong> Petra Wilson<br /><strong>Phone: </strong>555-313-899<br /><strong>Email: </strong>petraw@company.com</td></tr>',
teamSalesStaff = '<strong>Petra Wilson</strong> Team lead, Phone: 555-313-899<br /><strong>Jenny Oswald</strong> Marketing consultant, Phone: 555-313-333<br /><strong>Peter Tennant</strong> Accountant, Phone: 555-313-161',
teamSupportContacts = '<tr><td style="width: 100px;"><img src="../images/steven.png" /></td><td style=""><strong>Team lead:</strong> Michael Nagase<br /><strong>Phone: </strong>555-313-643<br /><strong>Email: </strong>nagase@company.com</td></tr>',
teamSupportStaff = '<strong>Michael Nagase</strong> Team lead, Phone: 555-313-643<br /><strong>Sam Forrester</strong> Chief support officer, Phone: 555-313-644<br /><strong>Dean Milhouse</strong> Support officer, Phone: 555-313-188',
teamSalesProjects = ['2015 marketing research', 'Advertisement revenue increase'],
teamSupportProjects = ['Governmental support task', 'Conference preparation', 'HelloCompany support task'],
teamSalesProjectsTimeline = '<strong>January - December</strong><br /> 2015 marketing research<br /><br /><strong>February - June</strong><br /> Advertisement revenue increase',
teamSupportProjectsTimeline = '<strong>September - December</strong><br /> Governmental support task<br /><br /><strong>July - August</strong><br /> Conference preparation<br /><br /><strong>January - December</strong><br /> HelloCompany support task',
project1Data = [{ Month: 'January', Resources: 50, Issues: 2 }, { Month: 'February', Resources: 90, Issues: 7 }, { Month: 'March', Resources: 93, Issues: 15 }, { Month: 'April', Resources: 70, Issues: 36 }, { Month: 'May', Resources: 70, Issues: 20 }, { Month: 'June', Resources: 70, Issues: 20 }, { Month: 'July', Resources: 68, Issues: 16 }, { Month: 'August', Resources: 69, Issues: 9 }, { Month: 'September', Resources: 33, Issues: 2 }, { Month: 'October', Resources: 50, Issues: 0 }, { Month: 'November', Resources: 13, Issues: 0 }, { Month: 'December', Resources: 20, Issues: 0}],
project2Data = [{ Month: 'January', Resources: null, Issues: null }, { Month: 'February', Resources: 90, Issues: 38 }, { Month: 'March', Resources: 100, Issues: 45 }, { Month: 'April', Resources: 80, Issues: 13 }, { Month: 'May', Resources: 27, Issues: 11 }, { Month: 'June', Resources: 20, Issues: 7 }, { Month: 'July', Resources: null, Issues: null }, { Month: 'August', Resources: null, Issues: null }, { Month: 'September', Resources: null, Issues: null }, { Month: 'October', Resources: null, Issues: null }, { Month: 'November', Resources: null, Issues: null }, { Month: 'December', Resources: null, Issues: null}],
project3Data = [{ Month: 'January', Resources: null, Issues: null }, { Month: 'February', Resources: null, Issues: null }, { Month: 'March', Resources: null, Issues: null }, { Month: 'April', Resources: null, Issues: null }, { Month: 'May', Resources: null, Issues: null }, { Month: 'June', Resources: null, Issues: null }, { Month: 'July', Resources: null, Issues: null }, { Month: 'August', Resources: null, Issues: null }, { Month: 'September', Resources: 10, Issues: 1 }, { Month: 'October', Resources: 80, Issues: 15 }, { Month: 'November', Resources: 99, Issues: 30 }, { Month: 'December', Resources: 20, Issues: 0}],
project4Data = [{ Month: 'January', Resources: null, Issues: null }, { Month: 'February', Resources: null, Issues: null }, { Month: 'March', Resources: null, Issues: null }, { Month: 'April', Resources: null, Issues: null }, { Month: 'May', Resources: null, Issues: null }, { Month: 'June', Resources: null, Issues: null }, { Month: 'July', Resources: 70, Issues: 3 }, { Month: 'August', Resources: 11, Issues: 5 }, { Month: 'September', Resources: null, Issues: null }, { Month: 'October', Resources: null, Issues: null }, { Month: 'November', Resources: null, Issues: null }, { Month: 'December', Resources: null, Issues: null}],
project5Data = [{ Month: 'January', Resources: 20, Issues: 0 }, { Month: 'February', Resources: 20, Issues: 2 }, { Month: 'March', Resources: 33, Issues: 12 }, { Month: 'April', Resources: 42, Issues: 16 }, { Month: 'May', Resources: 80, Issues: 24 }, { Month: 'June', Resources: 78, Issues: 28 }, { Month: 'July', Resources: 68, Issues: 16 }, { Month: 'August', Resources: 10, Issues: 2 }, { Month: 'September', Resources: 47, Issues: 12 }, { Month: 'October', Resources: 50, Issues: 10 }, { Month: 'November', Resources: 8, Issues: 1 }, { Month: 'December', Resources: 15, Issues: 3}],
team = 'Sales';
function initTeamDataTable() {
var teamData = [{
team: 'Sales Team',
lead: 'Petra Wilson'
}, {
team: 'Support Team',
lead: 'Michael Nagase'
}];
var source = {
dataType: "json",
dataFields: [{
name: 'team',
type: 'string'
}, {
name: 'lead',
type: 'string'
}],
localdata: teamData
};
var dataAdapter = new jqx.dataAdapter(source);
JQXLite("#teamsDataTable").jqxDataTable({
width: '100%',
height: '100%',
source: dataAdapter,
ready: function () {
JQXLite("#teamsDataTable").jqxDataTable('selectRow', 0);
},
columns: [{
text: 'Team',
dataField: 'team',
width: 120
}, {
text: 'Lead',
dataField: 'lead'
}]
});
JQXLite('#teamsDataTable').on('rowSelect', function (event) {
var boundIndex = event.args.boundIndex,
contacts, staff, projects, projectsTimeline, projectsHistory;
if (boundIndex === 0) {
team = 'Sales';
contacts = teamSalesContacts;
staff = teamSalesStaff;
projects = teamSalesProjects;
projectsTimeline = teamSalesProjectsTimeline;
projectsHistory = project1Data;
} else {
team = 'Support';
contacts = teamSupportContacts;
staff = teamSupportStaff;
projects = teamSupportProjects;
projectsTimeline = teamSupportProjectsTimeline;
projectsHistory = project3Data;
}
if (JQXLite('#contactsTable').length > 0) {
JQXLite('#contactsTable').html(contacts);
}
if (JQXLite('#staffDiv').length > 0) {
JQXLite('#staffDiv').html(staff);
}
if (JQXLite('#projectsListBox').length > 0) {
JQXLite('#projectsListBox').jqxListBox({
source: projects
});
JQXLite('#projectsListBox').jqxListBox('selectIndex', 0);
}
if (JQXLite('#projectsTimelineDiv').length > 0) {
JQXLite('#projectsTimelineDiv').html(projectsTimeline);
}
if (JQXLite('#projectHistoryChart').length > 0) {
JQXLite('#projectHistoryChart').jqxChart({
source: projectsHistory
});
}
});
}
function initProjectsListBox() {
JQXLite('#projectsListBox').jqxListBox({
selectedIndex: 0,
source: teamSalesProjects,
width: '100%',
height: '100%'
});
JQXLite('#projectsListBox').on('select', function (event) {
if (JQXLite('#projectHistoryChart').length > 0) {
var args = event.args;
if (args) {
var label = args.item.label;
switch (label) {
case '2015 marketing research':
JQXLite('#projectHistoryChart').jqxChart({
source: project1Data
});
break;
case 'Advertisement revenue increase':
JQXLite('#projectHistoryChart').jqxChart({
source: project2Data
});
break;
case 'Governmental support task':
JQXLite('#projectHistoryChart').jqxChart({
source: project3Data
});
break;
case 'Conference preparation':
JQXLite('#projectHistoryChart').jqxChart({
source: project4Data
});
break;
case 'HelloCompany support task':
JQXLite('#projectHistoryChart').jqxChart({
source: project5Data
});
break;
}
}
}
});
}
function initProjectHistoryChart() {
var settings = {
title: 'Project History',
description: 'Overview of project resources and solved issues',
showBorderLine: false,
titlePadding: {
left: 90,
top: 0,
right: 0,
bottom: 10
},
source: project1Data,
xAxis: {
dataField: 'Month',
gridLines: {
visible: false
}
},
valueAxis: {
minValue: 0,
maxValue: 100,
unitInterval: 10,
description: 'Resources (in relative units)'
},
colorScheme: 'scheme05',
seriesGroups: [{
type: 'column',
columnsGapPercent: 30,
seriesGapPercent: 0,
series: [{
dataField: 'Resources',
displayText: 'Resources spent'
}]
}, {
type: 'line',
columnsGapPercent: 30,
seriesGapPercent: 0,
series: [{
dataField: 'Issues',
displayText: 'Issues'
}]
}]
};
JQXLite('#projectHistoryChart').jqxChart(settings);
}