diff --git a/src/modules/FlowArticle.vue b/src/modules/FlowArticle.vue index 672476b..1919f08 100644 --- a/src/modules/FlowArticle.vue +++ b/src/modules/FlowArticle.vue @@ -4,7 +4,6 @@ import FlowHypothesis from '@/modules/article/FlowHypothesis.vue' import FlowIntro from '@/modules/article/FlowIntro.vue' import FeatureSteps from '@/modules/feature/FeatureSteps.vue' import FlowDashboard from '@/modules/feature/FlowDashboard.vue' -import SimulationChart from '@/modules/simulation/SimulationChart.vue' import SimulationControls from '@/modules/simulation/SimulationControls.vue' import SimulationDashboard from '@/modules/simulation/SimulationDashboard.vue' @@ -22,7 +21,6 @@ import SimulationDashboard from '@/modules/simulation/SimulationDashboard.vue' - diff --git a/src/modules/simulation/SimulationChart.vue b/src/modules/simulation/SimulationChart.vue index ab56695..b2756c9 100644 --- a/src/modules/simulation/SimulationChart.vue +++ b/src/modules/simulation/SimulationChart.vue @@ -6,20 +6,25 @@ import { onMounted, ref, watch } from 'vue' const simulationStore = useSimulationStore() const SAMPLE = 15 +const svgElement = ref(null) const isChartInit = ref(false) const reloadGraph = () => { if (simulationStore.dashboards.length === 0) { return } + isChartInit.value = true + if (!svgElement.value) { + return + } + const samples = popNElement( [...simulationStore.dashboards], SAMPLE ).toReversed() - const svg = document.querySelector('svg.chart') const config = { title: `${SAMPLE} simulations`, xLabel: 'days', @@ -43,31 +48,35 @@ const reloadGraph = () => { fontFamily: 'Noto Serif' } } - new chartXkcd.Line(svg, config) + new chartXkcd.Line(svgElement.value, config) } watch(() => simulationStore.hasSimulationFinished, reloadGraph) +watch(svgElement, reloadGraph) onMounted(reloadGraph)