From 54d48c16d53b062b9e074acd2241bc8137e61515 Mon Sep 17 00:00:00 2001
From: David Mendez <dmendez@ebi.ac.uk>
Date: Fri, 9 Sep 2022 15:10:50 -0500
Subject: [PATCH] Cell health and viability: organise colours and order for
viability properties
---
.../CellPropsRows/LineChart.vue | 33 +++++++++++++------
1 file changed, 23 insertions(+), 10 deletions(-)
diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/LineChart.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/LineChart.vue
index 09bdb14..87e2ce7 100644
--- a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/LineChart.vue
+++ b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/LineChart.vue
@@ -1,6 +1,6 @@
<template>
<div>
- <div class="d-flex justify-space-between">
+ <div class="d-flex justify-space-between align-center">
<v-btn-toggle v-model="propsType" tile group>
<v-btn small value="phenotypes"> Phenotypes </v-btn>
<v-btn small value="viability"> Viability </v-btn>
@@ -74,7 +74,6 @@ export default {
curve: 'straight',
},
labels: ['0h', '12h', '24h', '48h'], // check why this needs to be like that!
- xaxis: {},
yaxis: {
min: 0,
max: 100,
@@ -88,6 +87,7 @@ export default {
},
},
barChartOptions: {
+ colors: ['#8BC34A', '#FFC107', '#795548'],
chart: {
type: 'bar',
stacked: true,
@@ -105,7 +105,7 @@ export default {
xaxis: {
labels: {
formatter: (value) => {
- return `${value}`
+ return `${parseInt(value)}`
},
},
},
@@ -134,6 +134,11 @@ export default {
position: 'bottom',
},
},
+ activityIDs: [
+ 'Population Healthy Nuclei (%)',
+ 'Population Fragmented Nuclei (%)',
+ 'Population Pyknosed Nuclei (%)',
+ ],
}
},
computed: {
@@ -175,6 +180,20 @@ export default {
data: values,
})
}
+
+ const thisComponent = this
+ series.sort((seriesA, seriesB) => {
+ const nameA = seriesA.name
+ const nameB = seriesB.name
+ const positionA = thisComponent.activityIDs.findIndex(
+ (key) => key === nameA
+ )
+ const positionB = thisComponent.activityIDs.findIndex(
+ (key) => key === nameB
+ )
+
+ return positionA - positionB
+ })
return series
},
phenotypesActivities() {
@@ -198,15 +217,9 @@ export default {
},
viabilityActivities() {
const activities = {}
- const activityIDs = [
- 'Population Fragmented Nuclei (%)',
- 'Population Healthy Nuclei (%)',
- 'Population Pyknosed Nuclei (%)',
- ]
-
for (const propKey of Object.keys(this.propertiesData)) {
const propData = this.propertiesData[propKey]
- if (activityIDs.includes(propKey)) {
+ if (this.activityIDs.includes(propKey)) {
if (propData.config.show) {
activities[propKey] = propData
}
--
GitLab