fernando/luos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

task metrics

Browse Source
This commit is contained in:
Henry Jordan
2021-07-30 20:18:11 +00:00
parent 89c3311d55
commit ff2956714c
11 changed files with 632 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
resources/assets/js/api/Cases.js
View File

@@ -293,6 +293,17 @@ export let cases = {
window.config.SYS_URI +
`cases/debug_triggers?r=${r}&_dc=${dc}`);
},
/**
* Make a search request to the Api service
* @param {object} dt - filter parameters
*/
listTotalCases(dt) {
return Api.get({
service: "LIST_TOTAL_CASES",
params: {},
keys: {}
})
},
};
export let casesHeader = {

3
resources/assets/js/api/Services.js
View File

@@ -67,5 +67,6 @@
USERS: "/home/users",
TASKS: "/home/tasks",
CATEGORIES: "/home/categories",
DEBUG_STATUS: "/home/process-debug-status?processUid={prj_uid}"
DEBUG_STATUS: "/home/process-debug-status?processUid={prj_uid}",
LIST_TOTAL_CASES: "/metrics/list-total-cases"
};

4
resources/assets/js/home/Home.vue
View File

@@ -44,6 +44,7 @@ import Todo from "./Inbox/Todo.vue";
import Paused from "./Paused/Paused.vue";
import Draft from "./Draft/Draft.vue";
import Unassigned from "./Unassigned/Unassigned.vue";
import TaskMetrics from "./TaskMetrics/TaskMetrics.vue";
import BatchRouting from "./BatchRouting";
import CaseDetail from "./CaseDetail";
import XCase from "./XCase";
@@ -68,7 +69,8 @@ export default {
Paused,
Unassigned,
CaseDetail,
LegacyFrame
LegacyFrame,
TaskMetrics
},
data() {
return {

1
resources/assets/js/home/Inbox/Todo.vue
View File

@@ -1,6 +1,7 @@
<template>
<div id="v-todo" ref="v-todo" class="v-container-todo">
<button-fleft :data="newCase"></button-fleft>
<button type="button" @click="task" class="btn btn-primary">Primary</button>
<modal-new-request ref="newRequest"></modal-new-request>
<ModalPauseCase ref="modal-pause-case"></ModalPauseCase>
<ModalReassignCase ref="modal-reassign-case"></ModalReassignCase>

3
resources/assets/js/home/Inbox/defaultMixins.js
View File

@@ -172,6 +172,9 @@ export default {
}
this.columns = cols;
this.random = _.random(0, 10000000000);
},
task(){
this.$emit("onUpdatePage", "task-metrics");
}
}
}

151
resources/assets/js/home/TaskMetrics/DrillDown.vue Normal file
View File

@@ -0,0 +1,151 @@
<template>
<div
id="v-pm-drill-down"
ref="v-pm-drill-down"
class="v-pm-drill-down vp-inline-block"
>
<div class="p-1 v-flex">
<h6 class="v-search-title">Drill Down Navigator</h6>
</div>
<div
v-for="item in loadItems(data, index)"
:key="item.content"
class="vp-padding-b10"
>
<span class="vp-inline-block vp-padding-r10 vp-font-size-r1">
{{ item.label }}
</span>
<div class="vp-inline-block">
<span :class="item.classObject" @click="onClick(item)">
{{ item.content }}</span
>
</div>
</div>
</div>
</template>
<script>
import _ from "lodash";
export default {
name: "DrillDown",
mixins: [],
components: {},
props: [],
data() {
let that = this;
return {
index: 0,
classObject: {
"rounded-circle": true,
"v-pm-drill-down-number": true,
"vp-btn-secondary": true,
"btn-primary": false,
"vp-block": true,
},
data: [
{
label: "Level",
content: "1",
click() {},
},
{
label: "Level",
content: "2",
click() {},
},
{
label: "Level",
content: "3",
click() {},
},
{
label: "Level",
content: "4",
click() {},
},
],
};
},
created() {},
mounted() {},
watch: {},
computed: {},
updated() {},
beforeCreate() {},
methods: {
onClick(item) {
let array,
i = 0,
nindex;
array = _.clone(this.data);
array.forEach((el) => {
if (el.content === item.content) {
nindex = i;
}
i++;
});
this.index = nindex;
item.click(item);
},
loadItems(items, index) {
let array,
i = 0,
that = this;
array = _.clone(items);
array.forEach((el) => {
el.classObject = _.clone(that.classObject);
if (i <= index) {
el.classObject["vp-btn-secondary"] = false;
el.classObject["btn-primary"] = true;
}
i++;
});
console.log("aquiaaa");
return array;
},
changeItem(item) {},
},
};
</script>
<style>
.v-pm-drill-down-number {
height: 5rem;
width: 5rem;
text-align: center;
line-height: 5rem;
font-size: 1.5rem;
}
.vp-inline-block {
display: inline-block;
}
.vp-block {
display: block;
}
.vp-padding-r10 {
padding-right: 10px;
}
.vp-padding-b10 {
padding-bottom: 10px;
}
.vp-font-size-r1 {
font-size: 1rem;
}
.vp-btn-secondary {
color: #2f3133;
background-color: #b5b6b6;
}
.vp-btn-secondary:hover {
color: #fff;
background-color: #6c757d;
border-color: #6c757d;
}
.v-pm-drill-down {
vertical-align: top;
}
</style>

57
resources/assets/js/home/TaskMetrics/TaskMetrics.vue Normal file
View File

@@ -0,0 +1,57 @@
<template>
<div id="v-pm-task-metrics" ref="v-pm-task-metrics" class="v-pm-task-metrics">
<button-fleft :data="newCase"></button-fleft>
<div class="p-1 v-flex">
<h5 class="v-search-title">Task metrics</h5>
</div>
<modal-new-request ref="newRequest"></modal-new-request>
<div class="d-inline-flex p-2">
<vue-charts />
<div class="vp-6"></div>
<drill-down />
</div>
</div>
</template>
<script>
import ButtonFleft from "../../components/home/ButtonFleft.vue";
import ModalNewRequest from "../ModalNewRequest.vue";
import DrillDown from "./DrillDown.vue";
import VueCharts from "./VueCharts.vue";
import defaultMixins from "./defaultMixins";
export default {
name: "TaskMetrics",
mixins: [defaultMixins],
components: {
ButtonFleft,
ModalNewRequest,
DrillDown,
VueCharts,
},
props: [],
data() {
let that = this;
return {};
},
created() {},
mounted() {},
watch: {},
computed: {},
updated() {},
beforeCreate() {},
methods: {},
};
</script>
<style>
.v-pm-task-metrics {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 50px;
padding-right: 50px;
}
.vp-6 {
padding: 3.5rem !important;
}
</style>

339
resources/assets/js/home/TaskMetrics/VueChartLvOne.vue Normal file
View File

@@ -0,0 +1,339 @@
<template>
<div id="v-pm-charts" ref="v-pm-charts" class="v-pm-charts vp-inline-block">
<div class="p-1 v-flex">
<h6 class="v-search-title">Number of tasks per Task Status</h6>
<apexchart
v-show="typeView === 'donut'"
ref="apexchart1"
:width="width"
:options="chartOptions1"
:series="series1"
></apexchart>
<apexchart
v-show="typeView === 'bar'"
ref="apexchart2"
:width="width"
:options="chartOptions2"
:series="series2"
></apexchart>
<div class="row">
<div class="col-sm vp-center">
<button
@click="changeView('donut')"
type="button"
class="btn btn-primary"
>
<i class="fas fa-chart-pie"></i
><span class="vp-padding-l10">View</span>
</button>
</div>
<div class="col-sm">
<button
@click="changeView('bar')"
type="button"
class="btn btn-primary"
>
<i class="fas fa-chart-bar"></i
><span class="vp-padding-l10">View</span>
</button>
</div>
</div>
</div>
</div>
</template>
<script>
import _ from "lodash";
import Api from "../../api/index";
export default {
name: "VueChartLvOne",
mixins: [],
components: {},
props: [],
data() {
let that = this;
return {
typeView: "bar",
width: 0,
series1: [],
chartOptions1: {
labels: ["Team A", "Team B", "Team C", "Team D", "Team E"],
chart: {
id: "apexchart1",
type: "pie",
},
},
series2: [
{
name: "Inflation",
data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2],
},
],
chartOptions2: {
chart: {
id: "apexchart2",
type: "bar",
},
plotOptions: {
bar: {
borderRadius: 10,
dataLabels: {
position: "top", // top, center, bottom
},
},
},
dataLabels: {
enabled: true,
formatter: function (val) {
return val + "%";
},
offsetY: -20,
style: {
fontSize: "12px",
colors: ["#304758"],
},
},
xaxis: {
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
],
position: "top",
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
crosshairs: {
fill: {
type: "gradient",
gradient: {
colorFrom: "#D8E3F0",
colorTo: "#BED1E6",
stops: [0, 100],
opacityFrom: 0.4,
opacityTo: 0.5,
},
},
},
tooltip: {
enabled: true,
},
},
yaxis: {
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
formatter: function (val) {
return val + "%";
},
},
},
title: {
text: "Monthly Inflation in Argentina, 2002",
floating: true,
offsetY: 330,
align: "center",
style: {
color: "#444",
},
},
},
};
},
created() {},
mounted() {
this.getBodyHeight();
this.getDataDonut();
this.getData();
},
watch: {},
computed: {},
updated() {},
beforeCreate() {},
methods: {
/**
* Return the height for Vue Card View body
*/
getBodyHeight() {
this.width = window.innerHeight * 0.8;
},
/**
* Change view - donut/bar
*/
changeView(view) {
this.typeView = view;
if (view == "donut") {
this.getDataDonut();
} else {
//this.getDataBar();
}
},
getDataDonut() {
this.chartOptions1 = {
labels: ["Team A", "Team B", "Team C", "Team D", "Team E"],
chart: {
id: "apexchart1",
type: "donut",
},
responsive: [
{
breakpoint: 480,
options: {
chart: {
width: 200,
},
legend: {
position: "bottom",
},
},
},
],
};
this.series1 = [44, 55, 41, 17, 15];
},
getDataBar() {
this.chartOptions2 = {
chart: {
id: "apexchart2",
type: "bar",
},
plotOptions: {
bar: {
borderRadius: 10,
dataLabels: {
position: "top", // top, center, bottom
},
},
},
dataLabels: {
enabled: true,
formatter: function (val) {
return val + "%";
},
offsetY: -20,
style: {
fontSize: "12px",
colors: ["#304758"],
},
},
xaxis: {
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
],
position: "top",
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
crosshairs: {
fill: {
type: "gradient",
gradient: {
colorFrom: "#D8E3F0",
colorTo: "#BED1E6",
stops: [0, 100],
opacityFrom: 0.4,
opacityTo: 0.5,
},
},
},
tooltip: {
enabled: true,
},
},
yaxis: {
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
formatter: function (val) {
return val + "%";
},
},
},
title: {
text: "Monthly Inflation in Argentina, 2002",
floating: true,
offsetY: 330,
align: "center",
style: {
color: "#444",
},
},
};
/*
this.$apexcharts.exec("apexchart2", "updateSeries", [
{
name: "Inflation",
data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2],
},
]);*/
/*this.series2 = [
{
name: "Inflation",
data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2],
},
];*/
},
getData() {
Api.cases
.listTotalCases()
.then((response) => {
console.log("response");
console.log(response);
})
.catch((response) => {
console.log("error");
console.log(response);
});
},
},
};
</script>
<style>
.vp-center {
text-align: center;
}
.vp-padding-l10 {
padding-left: 10px;
}
</style>

37
resources/assets/js/home/TaskMetrics/VueCharts.vue Normal file
View File

@@ -0,0 +1,37 @@
<template>
<div
id="v-pm-charts"
ref="v-pm-charts"
class="v-pm-charts vp-inline-block"
>
<vue-chart-lv-one/>
</div>
</template>
<script>
import VueChartLvOne from "./VueChartLvOne.vue";
export default {
name: "VueCharts",
mixins: [],
components: {
VueChartLvOne,
},
props: [],
data() {
let that = this;
return {
width: 0,
};
},
created() {},
mounted() {},
watch: {},
computed: {},
updated() {},
beforeCreate() {},
methods: {},
};
</script>
<style>
</style>

21
resources/assets/js/home/TaskMetrics/defaultMixins.js Normal file
View File

@@ -0,0 +1,21 @@
import _ from "lodash";
import api from "../../api/index";
export default {
data() {
let that = this;
return {
newCase: {
title: this.$i18n.t("ID_NEW_CASE"),
class: "btn-success",
onClick: () => {
this.$refs["newRequest"].show();
},
},
}
},
created: function () {
},
methods: {
}
}

9
resources/assets/js/home/main.js
View File

@@ -11,9 +11,11 @@ import "@fortawesome/fontawesome-free/css/all.css";
import "@fortawesome/fontawesome-free/js/all.js";
import 'bootstrap/dist/css/bootstrap-grid.css';
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import 'bootstrap-vue/dist/bootstrap-vue.css';
import VueApexCharts from 'vue-apexcharts'
import Home from "./Home";
Vue.use(VueApexCharts);
Vue.use(VueRouter);
Vue.use(VueSidebarMenu);
Vue.use(BootstrapVue);
@@ -25,9 +27,12 @@ Vue.use(ServerTable, {}, false, 'bootstrap3', {
});
Vue.use(ClientTable, {}, false, 'bootstrap3', {});
Vue.component('settings-popover', SettingsPopover);
Vue.component('apexchart', VueApexCharts);
window.ProcessMaker = {
apiClient: require('axios')
};
window.ProcessMaker.pluginBase = "/sysworkflow/en/neoclassic/viena/index.php";
window.ProcessMaker.apiClient.defaults.baseURL = '/sysworkflow/en/neoclassic/viena/index.php/api/';
window.ProcessMaker.SYS_SYS = "workflow";