Collapse the strategy, backtest and sweep panels
Adds a reusable CollapsiblePanel (chevron header, optional summary shown when collapsed, state persisted in localStorage) and wraps the Strategy, Backtest and Parameter sweep panels with it, so any single part of the dashboard can be focused on quickly. Panels stay mounted (v-show) so their form/results state is preserved across collapse. Includes component tests.
This commit is contained in:
1 parent
fedcd07ffd
commit
1b44e456c6
5 files changed
+190
-55
No files matched your search
@@ -2,6 +2,7 @@
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import * as api from '../api'
|
||||
import { fmtMoney, pnlClass, signed } from '../format'
|
||||
import CollapsiblePanel from './CollapsiblePanel.vue'
|
||||
|
||||
const props = defineProps({
|
||||
strategies: { type: Array, required: true },
|
||||
@@ -21,6 +22,13 @@ const gridText = ref({})
|
||||
|
||||
const selected = computed(() => props.strategies.find((s) => s.key === selectedKey.value))
|
||||
|
||||
const summary = computed(() => {
|
||||
if (!result.value) return ''
|
||||
const top = result.value.rows[0]
|
||||
const best = top ? ` · best ${signed(top.metrics.total_return_pct)}%` : ''
|
||||
return `${result.value.combinations} combinations${best}`
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.strategies,
|
||||
(list) => {
|
||||
@@ -84,14 +92,8 @@ async function run() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="font-semibold">Parameter sweep</h2>
|
||||
<span v-if="result" class="text-xs text-slate-400">
|
||||
{{ result.combinations }} combinations · top {{ result.rows.length }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<CollapsiblePanel title="Parameter sweep" storage-key="sweep" :summary="summary">
|
||||
<div class="space-y-3">
|
||||
<div class="grid gap-2 sm:grid-cols-4">
|
||||
<label class="space-y-1">
|
||||
<span class="label">Strategy</span>
|
||||
@@ -168,5 +170,6 @@ async function run() {
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CollapsiblePanel>
|
||||
</template>
|
||||
Reference in new issue
Block a user