diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellCount.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellCount.vue
deleted file mode 100644
index 36c124d3d8e13bc7d2348ea2046cfd95da971454..0000000000000000000000000000000000000000
--- a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellCount.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
- <div>
- <div>12h</div>
- {{ normalisedCount }}
- </div>
-</template>
-
-<script>
-export default {
- computed: {
- normalisedCount() {
- return 10
- },
- },
-}
-</script>
-
-<style></style>
diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellCount/CellCount.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellCount/CellCount.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c9acf3129bac6cb1633811917b08063f36268b31
--- /dev/null
+++ b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellCount/CellCount.vue
@@ -0,0 +1,18 @@
+<template>
+ <div class="d-flex justify-space-between">
+ <SingleCellCountDialog title="12h" />
+ <SingleCellCountDialog title="24h" />
+ <SingleCellCountDialog title="48h" />
+ </div>
+</template>
+
+<script>
+import SingleCellCountDialog from '~/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellCount/SingleCellCountDialog.vue'
+export default {
+ components: {
+ SingleCellCountDialog,
+ },
+}
+</script>
+
+<style></style>
diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellCount/SingleCellCount.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellCount/SingleCellCount.vue
new file mode 100644
index 0000000000000000000000000000000000000000..01ba23a466805036eedcccf9275d644026e80a8d
--- /dev/null
+++ b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellCount/SingleCellCount.vue
@@ -0,0 +1,22 @@
+<template>
+ <v-progress-circular :value="normalisedCount" :color="color">
+ <div class="text-caption">{{ normalisedCount }}%</div>
+ </v-progress-circular>
+</template>
+
+<script>
+export default {
+ props: {
+ normalisedCount: {
+ type: Number,
+ default: () => 0,
+ },
+ color: {
+ type: String,
+ default: () => '',
+ },
+ },
+}
+</script>
+
+<style></style>
diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellCount/SingleCellCountDialog.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellCount/SingleCellCountDialog.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d07d0c32bf6a5c43901858254f75f5a973064c57
--- /dev/null
+++ b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellCount/SingleCellCountDialog.vue
@@ -0,0 +1,137 @@
+<template>
+ <div class="text-center">
+ <v-dialog v-model="dialog" width="500">
+ <template #activator="{ on, attrs }">
+ <div>
+ <div class="text-center">
+ {{ title }}
+ </div>
+ <v-btn icon v-bind="attrs" v-on="on">
+ <SingleCellCount
+ :normalised-count="normalisedCount"
+ :color="getColor(normalisedCount)"
+ />
+ </v-btn>
+ </div>
+ </template>
+
+ <v-card>
+ <v-card-title class="text-h5 grey lighten-2"> Cell Count </v-card-title>
+ <br />
+ <v-card-text>
+ <b>
+ Normalised Cell Count = Total Cell Count/Control DMSO Total Cell
+ Count
+ </b>
+ </v-card-text>
+ <v-divider />
+ <v-card-text>
+ <v-list dense>
+ <v-list-item>
+ <v-list-item-content>
+ <div><b>Total Cell Count:</b> {{ totalCellCount }}</div>
+ </v-list-item-content>
+ </v-list-item>
+ <v-list-item>
+ <v-list-item-content>
+ <div>
+ <b>Control DMSO Total Cell Count:</b>
+ {{ controlDMSOTotalCellCount }}
+ </div>
+ </v-list-item-content>
+ </v-list-item>
+ <v-list-item>
+ <v-list-item-content>
+ <div class="text-center">
+ <v-chip label outlined>
+ {{ totalCellCount }} / {{ controlDMSOTotalCellCount }} =
+ {{ normalisedCount }}%
+ </v-chip>
+ </div>
+ </v-list-item-content>
+ </v-list-item>
+ </v-list>
+ </v-card-text>
+
+ <v-divider />
+ <v-card-text>
+ <v-list>
+ <v-list-item>
+ <v-list-item-content>
+ <div :class="`${getColor(0)}--text`">
+ if Normalised Cell Count in [0, 50), the circle will be
+ {{ getColor(0) }}.
+ </div>
+ </v-list-item-content>
+ </v-list-item>
+ <v-list-item>
+ <v-list-item-content>
+ <div :class="`${getColor(60)}--text`">
+ if Normalised Cell Count in [50, 70), the circle will be
+ {{ getColor(60) }}.
+ </div>
+ </v-list-item-content>
+ </v-list-item>
+ <v-list-item>
+ <v-list-item-content>
+ <div :class="`${getColor(90)}--text`">
+ if Normalised Cell Count in [70, 100], the circle will be
+ {{ getColor(90) }}.
+ </div>
+ </v-list-item-content>
+ </v-list-item>
+ </v-list>
+ </v-card-text>
+ <v-divider />
+ <v-card-actions>
+ <v-spacer></v-spacer>
+ <v-btn color="primary" text @click="dialog = false"> Close </v-btn>
+ </v-card-actions>
+ </v-card>
+ </v-dialog>
+ </div>
+</template>
+
+<script>
+import SingleCellCount from '~/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellCount/SingleCellCount.vue'
+export default {
+ components: {
+ SingleCellCount,
+ },
+ props: {
+ title: {
+ type: String,
+ default: () => '',
+ },
+ },
+ data() {
+ return {
+ dialog: false,
+ controlDMSOTotalCellCount: 500,
+ }
+ },
+ computed: {
+ totalCellCount() {
+ return Math.floor(Math.random() * 500)
+ },
+ normalisedCount() {
+ return parseInt(
+ (this.totalCellCount / this.controlDMSOTotalCellCount) * 100
+ )
+ },
+ },
+ methods: {
+ getColor(normalisedCount) {
+ if (normalisedCount < 50) {
+ return 'red'
+ }
+ if (normalisedCount < 70) {
+ return 'orange'
+ }
+ return 'green'
+ },
+ },
+}
+</script>
+
+<style></style>
diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellPropsRows.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellPropsRows.vue
index 110b1fb535c5195438a98a61aec496a391a81f39..3b8302e80866795299f0dbc4e123b9edec320bc1 100644
--- a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellPropsRows.vue
+++ b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellPropsRows.vue
@@ -13,7 +13,9 @@
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel>
- <v-expansion-panel-header> Cell Count </v-expansion-panel-header>
+ <v-expansion-panel-header>
+ Normalised Cell Count
+ </v-expansion-panel-header>
<v-expansion-panel-content>
<CellCount />
</v-expansion-panel-content>
@@ -23,7 +25,7 @@
<script>
import ImagesInTime from '~/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/ImagesInTime/ImagesInTime.vue'
-import CellCount from '~/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellCount.vue'
+import CellCount from '~/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellCount/CellCount.vue'
import LineChart from '~/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/LineChart.vue'
export default {