From 31d412d55a831ac190f617e3963c82a21891b701 Mon Sep 17 00:00:00 2001 From: Jasen Qin Date: Thu, 18 Jul 2024 06:42:11 +1000 Subject: [PATCH] autocommit 18-07-2024-06-42 --- ...diagram-2024-07-17--4698255252461700455.md | 21 ------- ...-mockup-2024-07-17--3197451855480708115.md | 2 +- ...terface-observation-2024-07-17-4ctohp7v.md | 9 ++- package.json | 1 + src/components/ResultsVisualizer.js | 57 ++++++++++++++++++ static/img/manta.jpg | Bin 0 -> 3484 bytes yarn.lock | 12 ++++ 7 files changed, 79 insertions(+), 23 deletions(-) delete mode 100644 docs/diagrams/UserFlow-diagram-2024-07-17--4698255252461700455.md create mode 100644 src/components/ResultsVisualizer.js create mode 100644 static/img/manta.jpg diff --git a/docs/diagrams/UserFlow-diagram-2024-07-17--4698255252461700455.md b/docs/diagrams/UserFlow-diagram-2024-07-17--4698255252461700455.md deleted file mode 100644 index efd93c1..0000000 --- a/docs/diagrams/UserFlow-diagram-2024-07-17--4698255252461700455.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: UserFlow Diagram -date: 2024-07-17 -tags: [diagram, UserFlow] ---- - -import DiagramViewer from '@site/src/components/DiagramViewer'; - -# UserFlow Diagram - - B{Login?} - B -->|Yes| C[Dashboard] - B -->|No| D[Registration] - D --> C - -`} /> - -[Additional explanation or notes] diff --git a/docs/mockups/LoginScreen-mockup-2024-07-17--3197451855480708115.md b/docs/mockups/LoginScreen-mockup-2024-07-17--3197451855480708115.md index 610bfb2..7f6350d 100644 --- a/docs/mockups/LoginScreen-mockup-2024-07-17--3197451855480708115.md +++ b/docs/mockups/LoginScreen-mockup-2024-07-17--3197451855480708115.md @@ -8,6 +8,6 @@ import MockupGallery from '@site/src/components/MockupGallery'; # LoginScreen Mockup - + [Additional description or notes] diff --git a/docs/observations/UserInterface-observation-2024-07-17-4ctohp7v.md b/docs/observations/UserInterface-observation-2024-07-17-4ctohp7v.md index fe10a37..0ad4ff3 100644 --- a/docs/observations/UserInterface-observation-2024-07-17-4ctohp7v.md +++ b/docs/observations/UserInterface-observation-2024-07-17-4ctohp7v.md @@ -4,6 +4,13 @@ date: 2024-07-17 tags: [observation, UserInterface] --- +import ResultsVisualizer from '@site/src/components/ResultsVisualizer'; + # UserInterface Observation -[Your content here] +Today I noticed that the sky was bluer than usual. I am not entirely sure why. It really stood out to me. + + diff --git a/package.json b/package.json index 9461866..fadae87 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "@docusaurus/theme-live-codeblock": "^3.4.0", "@docusaurus/theme-mermaid": "^3.4.0", "@mdx-js/react": "^3.0.0", + "chart.js": "^4.4.3", "clsx": "^2.0.0", "docusaurus-lunr-search": "^3.4.0", "prism-react-renderer": "^2.3.0", diff --git a/src/components/ResultsVisualizer.js b/src/components/ResultsVisualizer.js new file mode 100644 index 0000000..9fd0470 --- /dev/null +++ b/src/components/ResultsVisualizer.js @@ -0,0 +1,57 @@ +import React, { useEffect, useRef, useState } from 'react' +import Chart from 'chart.js/auto' + +const ResultsVisualizer = ({ data, chartType = 'line' }) => { + const chartRef = useRef(null) + const [figureNumber, setFigureNumber] = useState(1) + + useEffect(() => { + // Find the current highest figure number in the document + const figures = document.querySelectorAll('[data-figure-number]') + const highestFigure = Math.max(...Array.from(figures).map(fig => parseInt(fig.dataset.figureNumber, 10)), 0) + setFigureNumber(highestFigure + 1) + }, []) + + useEffect(() => { + if (chartRef.current) { + const ctx = chartRef.current.getContext('2d') + + // Destroy existing chart if it exists + if (chartRef.current.chart) { + chartRef.current.chart.destroy() + } + + // Create new chart + chartRef.current.chart = new Chart(ctx, { + type: chartType, + data: { + labels: data.labels, + datasets: [{ + label: `Figure ${figureNumber}`, + data: data.data, + fill: false, + borderColor: 'rgb(75, 192, 192)', + tension: 0.1 + }] + }, + options: { + responsive: true, + plugins: { + title: { + display: true, + text: `Figure ${figureNumber}` + } + } + } + }) + } + }, [data, chartType, figureNumber]) + + return ( +
+ +
+ ) +} + +export default ResultsVisualizer \ No newline at end of file diff --git a/static/img/manta.jpg b/static/img/manta.jpg new file mode 100644 index 0000000000000000000000000000000000000000..aa1caaba76d1a6abd30353281303250288c85f76 GIT binary patch literal 3484 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 literal 0 HcmV?d00001 diff --git a/yarn.lock b/yarn.lock index fd8586c..6b46076 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1774,6 +1774,11 @@ "@jridgewell/resolve-uri" "^3.1.0" "@jridgewell/sourcemap-codec" "^1.4.14" +"@kurkle/color@^0.3.0": + version "0.3.2" + resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.2.tgz#5acd38242e8bde4f9986e7913c8fdf49d3aa199f" + integrity sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw== + "@leichtgewicht/ip-codec@^2.0.1": version "2.0.5" resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz#4fc56c15c580b9adb7dc3c333a134e540b44bfb1" @@ -3084,6 +3089,13 @@ character-reference-invalid@^2.0.0: resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz#85c66b041e43b47210faf401278abf808ac45cb9" integrity sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw== +chart.js@^4.4.3: + version "4.4.3" + resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.4.3.tgz#3b2e11e7010fefa99b07d0349236f5098e5226ad" + integrity sha512-qK1gkGSRYcJzqrrzdR6a+I0vQ4/R+SoODXyAjscQ/4mzuNzySaMCd+hyVxitSY1+L2fjPD1Gbn+ibNqRmwQeLw== + dependencies: + "@kurkle/color" "^0.3.0" + cheerio-select@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/cheerio-select/-/cheerio-select-2.1.0.tgz#4d8673286b8126ca2a8e42740d5e3c4884ae21b4"