Skip to content

Commit

Permalink
Merge pull request #9 from AutomatedProcessImprovement/manager-test
Browse files Browse the repository at this point in the history
Tactical manager scope
  • Loading branch information
abakumova authored Jul 7, 2024
2 parents c0bcd7f + 5aff761 commit 3d19bd7
Show file tree
Hide file tree
Showing 23 changed files with 1,659 additions and 417 deletions.
4 changes: 4 additions & 0 deletions src/assets/styles/analyticalView.scss
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,10 @@
border-radius: 10px;
position: relative;

&.next_activity {
background-color: transparent;
}

.recommendation-status {
position: absolute;
right: 0;
Expand Down
4 changes: 4 additions & 0 deletions src/assets/styles/case.scss
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,10 @@
.case-performance {
padding-right: 20px;
}

.kpi {
margin-right: 1em;
}
}
}

Expand Down
5 changes: 2 additions & 3 deletions src/assets/styles/cases.scss
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
// Cases


#cases,
#recommendations {
#recommendations,
#resource-management {
padding: 20px 20px;
display: flex;
flex-direction: column;
Expand Down
66 changes: 60 additions & 6 deletions src/assets/styles/operationalView.scss
Original file line number Diff line number Diff line change
Expand Up @@ -54,21 +54,75 @@
.recommendation {
display: flex;
flex-direction: row;
margin: 5px 0px;
margin: 5px 0;
padding: 10px;
transition: .2s;
background-color: $k-blue3;
border-radius: 10px;
justify-content: space-between;

.column {
margin-right: 5px;
.recommendation-content {
display: flex;
justify-content: space-between;
width: 100%;
}

.left-column {
flex: 3;
margin-right: 10px;
}

.right-column {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-end;
}

.text-tooltip-container {
display: flex;
align-items: center;
}

.button-container {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-bottom: 10px;
}

.blue-button {
background-color: $k-blue;
color: white;
border: none;
padding: 0.4em 2em;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
margin: 4px 2px;
cursor: pointer;
border-radius: 25px;
}

&.next_activity {
background-color: transparent;
}
}

// .selected{
// background-color: $k-blue4;
// }
}

.resource-details {
max-width: 60em;
display: flex;
flex-direction: column;
flex-grow: 1;
background-color: $k-white;
padding: 15px;
border-radius: 10px;
height: calc(100vh - 110px - $case-top);
overflow-y: auto;
margin-right: 1em;
}

}
73 changes: 72 additions & 1 deletion src/assets/styles/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -369,7 +369,10 @@ textarea{
}

.cases-table,
.recommendations-table {
.recommendations-table,
.resources-table {
width: 100%;
overflow-x: auto;
display: flex;
flex: 1;
align-items: flex-start;
Expand Down Expand Up @@ -511,4 +514,72 @@ textarea{
width: 0 !important;
height: 0 !important;
}
}

.kpi {
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 10px;
margin: 10px 10px 0px 0px;
background-color: $k-white;
box-shadow: 0px 10px 27px rgba(0, 0, 0, 0.05);
color: $k-black;
border-radius: 10px;
transition: 0.2s;
height: max-content;
}

.kpi-number {
color: $k-blue;
}

.show-details {
background: none;
border: none;
font-size: 14px;
color: #007bff;
}

.resources-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
overflow-x: auto;
//min-width: 55rem;
}

.resources-table th,
.resources-table td {
padding: 8px;
vertical-align: middle;
border-bottom: 1px solid #ccc;
border-top: none !important;

th.sortable::after, th.vtl-asc::after, th.vtl-desc::after {
display: none !important;
}
}

.fixed-width {
width: auto;
min-width: 13em;
text-align: left;
}

.resource-status {
display: inline-block;
padding: 4px 8px;
text-align: center;
font-weight: bold;
border-radius: 7px;
width: 8em;
}

.resource-status.available {
background: linear-gradient(135deg, $k-green1 5%, $k-green2 100%);
}

.resource-status.unavailable {
background: linear-gradient(135deg, #AAAAAA 0%, #979797 100%);
}
8 changes: 8 additions & 0 deletions src/common/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,14 @@ export default {
pStatus: (p) => p.status,
pIsRecommended: (p) => p.output.cate > 0
},
'RESOURCE_ALLOCATION': {
pType: 'Resource allocation',
pColor: 'background-green',
pText: (p) => `Allocate resource ${p.output.resource} until ${new Date(p.output.allocated_until).toLocaleString()}`,
pMetric: (p) => `Causal effect: ${p.output.cate_category} (${p.output.cate})`,
pStatus: (p) => p.status,
pIsRecommended: (p) => p.output.cate > 0
}
},

parseDuration(duration) {
Expand Down
121 changes: 121 additions & 0 deletions src/components/OngoingChartsManagerComponent.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
<template>
<div class="cases-charts">
<div class="cases-chart shadow">
<h3>{{ recommendationTypesTitle }}</h3>
<apexchart
type="pie"
:options="recommendationTypes.chartOptions"
:series="recommendationTypes.series">
</apexchart>
</div>
<div class="cases-chart shadow">
<h3>{{ recommendationsAcceptanceTitle }}</h3>
<apexchart type="pie"
:options="recommendationsAcceptance.chartOptions"
:series="recommendationsAcceptance.series">
</apexchart>
</div>
</div>
</template>

<script>
import VueApexCharts from 'vue3-apexcharts';
export default {
name: "CustomChartsComponent",
components: {
apexchart: VueApexCharts,
},
props: {
cases: {
type: Array,
required: true,
},
casesData: {
type: Array,
required: true,
validator: function (value) {
return value.length === 2 && value.every(v => typeof v === 'number');
}
},
alarmThreshold: {
type: Number,
required: true,
},
recommendationTypesTitle: {
type: String,
default: 'Recommendation Types',
},
recommendationsAcceptanceTitle: {
type: String,
default: 'Recommendations Acceptance',
},
},
data() {
return {
recommendationTypes: {
series: this.casesData,
chartOptions: this.initChartOptions(['#56CCF2', '#F2994A'], ['Cases with recommendations', 'Cases without recommendations']),
},
recommendationsAcceptance: {
series: [],
chartOptions: this.initChartOptions(['#17ad37', '#7e7e7e'], ['Recommendations accepted', 'Recommendations declined']),
},
};
},
watch: {
cases: {
immediate: true,
handler() {
this.processData();
},
},
casesData: {
immediate: true,
handler(newVal) {
this.recommendationTypes.series = newVal;
},
}
},
methods: {
initChartOptions(colors, labels) {
return {
colors: colors,
chart: {
animations: {
enabled: false,
},
type: 'pie',
},
labels: labels,
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom',
}
}
}]
};
},
processData() {
const typeCounts = { total: 0, accepted: 0 };
this.cases.forEach(caseItem => {
caseItem.activities.forEach(activity => {
activity.prescriptions.forEach(prescription => {
if (prescription.status === 'accepted') {
typeCounts.accepted++;
}
typeCounts.total++;
});
});
});
this.recommendationsAcceptance.series = [typeCounts.accepted, typeCounts.total - typeCounts.accepted];
}
},
};
</script>
31 changes: 31 additions & 0 deletions src/components/PositiveOutcomeItemComponent.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<template>
<div class="stats-card column">
<p>Target</p>
<h3 class="blue target-value">{{ object.value }} {{ object.unit }}</h3>
<small>Case {{ object.column }} {{ object.operator }}</small>
</div>
</template>

<script>
export default {
name: 'PositiveOutcomeItemComponent',
props: {
object: undefined
},
computed: {
value() {
return this.positiveOutcomeItems.value;
},
unit() {
return this.positiveOutcomeItems.unit;
},
column() {
return this.positiveOutcomeItems.column;
},
operator() {
return this.positiveOutcomeItems.operator;
}
}
}
</script>
Loading

0 comments on commit 3d19bd7

Please sign in to comment.