diff --git a/components/content/ArticleSystemDistributionPlot.vue b/components/content/ArticleSystemDistributionPlot.vue index 13f8ed2d915e0d89d2ef3c0f672f6ad51992a94b..964363b1f7d43faf183fcb33966d24ad2bc5f832 100644 --- a/components/content/ArticleSystemDistributionPlot.vue +++ b/components/content/ArticleSystemDistributionPlot.vue @@ -52,6 +52,10 @@ const axisOptions = ref<string[]>(["percent", "size"]) const plotY = ref<string>("percent") const plotFill = ref<string>("size") +const plotLabelPercent = ref<string>(`% of genomes encoding ${toValue(page)?.title ?? 'the system'}`) +const plotLabelCount = ref<string>(`Nb of genomes encoding ${toValue(page)?.title ?? 'the system'}`) + + // onBeforeMount(() => { // fetchSystemHits() // fetchRefSeqTaxo() @@ -129,7 +133,7 @@ const distributionOptions = computed(() => { const { marginLeft, marginRight } = toValue(margin) return { ...toValue(margin), - y: { label: `% of genomes encoding ${toValue(page)?.title ?? 'the system'}` }, + y: { label: toValue(plotY) === 'percent' ? toValue(plotLabelPercent) : toValue(plotLabelCount) }, x: { label: selectedTaxoRank.value, tickRotate: 45 }, color: { scheme: "plasma", @@ -137,7 +141,7 @@ const distributionOptions = computed(() => { reverse: true, // domain: [0, 100], marginLeft: 10, - label: `Nb of genomes encoding ${toValue(page)?.title ?? 'the system'}`, + label: toValue(plotFill) === 'percent' ? toValue(plotLabelPercent) : toValue(plotLabelCount), }, width: computedWidth.value - marginRight - marginLeft, marks: [ diff --git a/composables/useNumericalfilter.ts b/composables/useNumericalfilter.ts index 8f776e3cc93168fa567c26cf1b48621ad100b576..7756b73f909982a9d5ce7e07392981da5e685cbe 100644 --- a/composables/useNumericalfilter.ts +++ b/composables/useNumericalfilter.ts @@ -5,20 +5,24 @@ export function useNumericalFilter( ) { + + const minRef = toRef(min) + const maxRef = toRef(max) + const range: Ref<[number, number]> = ref([toValue(min), toValue(max)]) const stringifyFilter: Ref<string | undefined> = ref(undefined) watchEffect(() => { - if (range.value[0] === toValue(min) && range.value[1] === toValue(max)) { + if (range.value[0] === toValue(minRef) && range.value[1] === toValue(maxRef)) { stringifyFilter.value = undefined } else { stringifyFilter.value = `'${toValue(id)}' ${range.value[0]} TO ${range.value[1]}` } }) function reset() { - range.value = [toValue(min), toValue(max)] + range.value = [toValue(minRef), toValue(maxRef)] } // watch(() => range, () => { // console.log("watch reange")