Merge pull request #25 from mkobetic/help

coin2html: Add help link pointing to the README
mkobetic · Apr 4, 2024 · a1562ea · a1562ea
2 parents b846309 + a09478b
commit a1562ea
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 39 deletions.
diff --git a/cmd/coin2html/README.md b/cmd/coin2html/README.md
@@ -2,10 +2,11 @@ Converts the coin database into an HTML doc with a single page, interactive JS a
 Check out the [examples/yearly](https://mkobetic.github.io/coin/).
 
 Account hierarchy nav on the left, segregated by account type (Assets, Income, Expenses, Liabilities, Equity).
-Selecting a specific account restricts the detail view to that account's hierarchy.
+Clicking a specific account restricts the detail view on the right to that account's hierarchy.
+Currently selected account is shown as a heading above the details view.
 
-Details of selected accounts on the right with different presentation possibilities (Table, Chart, ...).
-Displayed transactions are restricted to selected time range.
+Details of the selected account are shown on the right with different presentation options (Register, Chart, ...).
+The details show account transactions restricted to selected time range, controlled by the From/To inputs.
 
 # Register View
 
@@ -16,15 +17,15 @@ Shows the transaction details in tabular form
 ## SubAccounts
 
 When un-checked only transactions for the selected account are shown.
-When checked transaction of the account and any subaccounts are shown.
+When checked transactions of the account and any sub-accounts are shown.
 
 ![Register Full With SubAccounts](https://github.com/mkobetic/coin/assets/871693/011f46e4-2f1d-4566-ac6a-58f7b4b8d66f)
 
 ## Aggregate
 
 When None, the individual transactions are shown.
 When not None, the transactions are aggregated by the selected aggregation period (Weekly, Monthly, Quarterly, Yearly).
-When aggregated with subaccounts, the SubAccount Max option controls how many "top" subaccounts should be shown; the rest of the subaccounts are combined into an "Other" column. Top means the subaccounts with the highest average transaction value across the time range.
+When aggregated with sub-accounts, the SubAccount Max option controls how many "top" sub-accounts should be shown; the rest of the sub-accounts are combined into the "Other" column. Top here means the sub-accounts with the highest average transaction value across the time range.
 
 ![Register Aggregated Monthly](https://github.com/mkobetic/coin/assets/871693/ca4897e1-54f3-4d94-93c7-c054b925f566)
 
@@ -34,6 +35,6 @@ When Aggregate is set to None, and Show Notes is checked, each transaction is di
 
 # Chart View
 
-Chart shows aggregated transactions (including subaccounts) by the selected aggregation period as a bar chart. The meaning of the available options is the same as for the Register aggregations.
+Chart shows aggregated transactions (including sub-accounts) by the selected aggregation period as a bar chart. The meaning of the available options is the same as for the Register aggregations.
 
 ![Chart Monthly](https://github.com/mkobetic/coin/assets/871693/7e265e93-131b-4a9e-b1db-3b201a53092b)
diff --git a/cmd/coin2html/js/body.html b/cmd/coin2html/js/body.html
@@ -1,23 +1,27 @@
-
 <div id="container">
-<nav id="sidebar">
+  <nav id="sidebar">
     <select id="root"></select>
     <ul id="accounts"></ul>
-</nav>
+  </nav>
 
-<section id="main">
-    <section id="controls">
+  <section id="main">
+    <section id="header">
+      <section id="controls">
         <select id="view"></select>
         <label for="start">From</label>
-        <input type="date" id="start"/>
+        <input type="date" id="start" />
         <label for="end">To</label>
-        <input type="date" id="end" label="To"/>
+        <input type="date" id="end" label="To" />
+      </section>
+      <a
+        id="help"
+        href="https://github.com/mkobetic/coin/tree/master/cmd/coin2html/README.md"
+        >Help</a
+      >
     </section>
     <h1>
-    <output id="account"></output>
+      <output id="account"></output>
     </h1>
-    <section id="view">
-    </section>
-</section>
+    <section id="view"></section>
+  </section>
 </div>
-
diff --git a/cmd/coin2html/js/src/index.js b/cmd/coin2html/js/src/index.js
@@ -835,9 +835,9 @@ function viewChart(options) {
 // UI Node Selectors
 const RootAccountSelect = "#sidebar select#root";
 const AccountList = "#sidebar ul#accounts";
-const ViewSelect = "#main>#controls select#view";
-const StartDateInput = "#main>#controls input#start";
-const EndDateInput = "#main>#controls input#end";
+const ViewSelect = "#main #controls select#view";
+const StartDateInput = "#main #controls input#start";
+const EndDateInput = "#main #controls input#end";
 const AccountOutput = "#main output#account";
 const MainView = "#main section#view";
 function emptyElement(selector) {

diff --git a/cmd/coin2html/js/src/index.ts b/cmd/coin2html/js/src/index.ts
@@ -1072,9 +1072,9 @@ function viewChart(options?: {
 const RootAccountSelect = "#sidebar select#root";
 const AccountList = "#sidebar ul#accounts";
 
-const ViewSelect = "#main>#controls select#view";
-const StartDateInput = "#main>#controls input#start";
-const EndDateInput = "#main>#controls input#end";
+const ViewSelect = "#main #controls select#view";
+const StartDateInput = "#main #controls input#start";
+const EndDateInput = "#main #controls input#end";
 const AccountOutput = "#main output#account";
 const MainView = "#main section#view";
 

diff --git a/cmd/coin2html/js/styles.css b/cmd/coin2html/js/styles.css
@@ -33,6 +33,16 @@ label {
   margin: 0.3em; /* reduce margin */
 }
 
+#main #header {
+  display: flex;
+  flex-basis: 100%;
+  justify-content: space-between; /* to make the Help link align right */
+}
+
+#main #header #help {
+  margin: 0.3em;
+}
+
 /* VIEW REGISTER */
 table#register {
   width: 100%;

diff --git a/examples/yearly/viewer/index.html b/examples/yearly/viewer/index.html
@@ -41,6 +41,16 @@
   margin: 0.3em; /* reduce margin */
 }
 
+#main #header {
+  display: flex;
+  flex-basis: 100%;
+  justify-content: space-between; /* to make the Help link align right */
+}
+
+#main #header #help {
+  margin: 0.3em;
+}
+
 /* VIEW REGISTER */
 table#register {
   width: 100%;
@@ -83,29 +93,33 @@
 	</style>
 </head>
 <body>
-
 <div id="container">
-<nav id="sidebar">
+  <nav id="sidebar">
     <select id="root"></select>
     <ul id="accounts"></ul>
-</nav>
+  </nav>
 
-<section id="main">
-    <section id="controls">
+  <section id="main">
+    <section id="header">
+      <section id="controls">
         <select id="view"></select>
         <label for="start">From</label>
-        <input type="date" id="start"/>
+        <input type="date" id="start" />
         <label for="end">To</label>
-        <input type="date" id="end" label="To"/>
+        <input type="date" id="end" label="To" />
+      </section>
+      <a
+        id="help"
+        href="https://github.com/mkobetic/coin/tree/master/cmd/coin2html/README.md"
+        >Help</a
+      >
     </section>
     <h1>
-    <output id="account"></output>
+      <output id="account"></output>
     </h1>
-    <section id="view">
-    </section>
-</section>
+    <section id="view"></section>
+  </section>
 </div>
-
 <script type="application/json" id="importedCommodities">{
 	"CAD": {
 		"decimals": 2,
@@ -47109,9 +47123,9 @@ <h1>
 // UI Node Selectors
 const RootAccountSelect = "#sidebar select#root";
 const AccountList = "#sidebar ul#accounts";
-const ViewSelect = "#main>#controls select#view";
-const StartDateInput = "#main>#controls input#start";
-const EndDateInput = "#main>#controls input#end";
+const ViewSelect = "#main #controls select#view";
+const StartDateInput = "#main #controls input#start";
+const EndDateInput = "#main #controls input#end";
 const AccountOutput = "#main output#account";
 const MainView = "#main section#view";
 function emptyElement(selector) {