Add value format setting.

align.js

@@ -16,6 +16,7 @@ import { Rational, one } from "./rational.js"
 export const DEFAULT_RATE = "m"
 export const DEFAULT_RATE_PRECISION = 3
 export const DEFAULT_COUNT_PRECISION = 1
+export const DEFAULT_FORMAT = "decimal"
 
 let seconds = one
 let minutes = Rational.from_float(60)

calc.html

@@ -24,12 +24,13 @@
         var handlers = {}
     </script>
     <script type="module">
-        import { plusHandler, clickTab, changeRatePrecision, changeCountPrecision, changeVisType, changeVisRender } from "./events.js"
+        import { plusHandler, clickTab, changeRatePrecision, changeCountPrecision, changeFormat, changeVisType, changeVisRender } from "./events.js"
         import { init } from "./init.js"
         handlers.plusHandler = plusHandler
         handlers.clickTab = clickTab
         handlers.changeRatePrecision = changeRatePrecision
         handlers.changeCountPrecision = changeCountPrecision
+        handlers.changeFormat = changeFormat
         handlers.changeVisType = changeVisType
         handlers.changeVisRender = changeVisRender
         handlers.init = init
@@ -142,6 +143,14 @@
             <td><input id="cprec" class="prec" type="number" value="1" min="0" onchange="handlers.changeCountPrecision(event)"></td>
             </tr>
 
+            <tr class="setting-row">
+            <td class="setting-label top">Format values as:</td>
+            <td><form id="value_format">
+                <input id="decimal_format" type="radio" name="format" value="decimal" checked onchange="handlers.changeFormat(event)"><label for="decimal_format">Decimals</label><br />
+                <input id="rational_format" type="radio" name="format" value="rational" onchange="handlers.changeFormat(event)"><label for="rational_format">Rationals</label><br />
+            </form></td>
+            </tr>
+
         <tr class="setting-section">
         <td colspan="2"><span>Factory</span><hr></td>
         </tr>

events.js

@@ -59,6 +59,11 @@ export function changeCountPrecision(event) {
     spec.display()
 }
 
+export function changeFormat(event) {
+    spec.format.displayFormat = event.target.value
+    spec.display()
+}
+
 // visualizer events
 
 export const DEFAULT_VISUALIZER = "sankey"

fragment.js

@@ -11,7 +11,7 @@ distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.*/
-import { DEFAULT_RATE, DEFAULT_RATE_PRECISION, DEFAULT_COUNT_PRECISION } from "./align.js"
+import { DEFAULT_RATE, DEFAULT_RATE_PRECISION, DEFAULT_COUNT_PRECISION, DEFAULT_FORMAT } from "./align.js"
 import { DEFAULT_TAB, currentTab, DEFAULT_VISUALIZER, visualizerType, DEFAULT_RENDER, visualizerRender } from "./events.js"
 import { spec, DEFAULT_PURITY, DEFAULT_BELT, DEFAULT_PIPE } from "./factory.js"
 import { Rational } from "./rational.js"
@@ -34,6 +34,9 @@ export function formatSettings(overrideTab, targets) {
     if (spec.format.countPrecision !== DEFAULT_COUNT_PRECISION) {
         settings += "cp=" + spec.format.countPrecision + "&"
     }
+    if (spec.format.displayFormat !== DEFAULT_FORMAT) {
+        settings += "vf=" + spec.format.displayFormat[0] + "&"
+    }
     if (spec.belt.key !== DEFAULT_BELT) {
         settings += "belt=" + spec.belt.key + "&"
     }

settings.js

@@ -11,7 +11,7 @@ distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.*/
-import { DEFAULT_RATE, DEFAULT_RATE_PRECISION, DEFAULT_COUNT_PRECISION, longRateNames } from "./align.js"
+import { DEFAULT_RATE, DEFAULT_RATE_PRECISION, DEFAULT_COUNT_PRECISION, DEFAULT_FORMAT, longRateNames } from "./align.js"
 import { dropdown } from "./dropdown.js"
 import { DEFAULT_TAB, clickTab, DEFAULT_VISUALIZER, visualizerType, setVisualizerType, DEFAULT_RENDER, visualizerRender, setVisualizerRender } from "./events.js"
 import { spec, resourcePurities, DEFAULT_BELT, DEFAULT_PIPE } from "./factory.js"
@@ -169,6 +169,22 @@ function renderPrecisions(settings) {
     d3.select("#cprec").attr("value", spec.format.countPrecision)
 }
 
+// value format
+
+let displayFormats = new Map([
+    ["d", "decimal"],
+    ["r", "rational"],
+])
+
+function renderValueFormat(settings) {
+    spec.format.displayFormat = DEFAULT_FORMAT
+    if (settings.has("vf")) {
+        spec.format.displayFormat = displayFormats.get(settings.get("vf"))
+    }
+    let input = document.getElementById(spec.format.displayFormat + "_format")
+    input.checked = true
+}
+
 // belt
 
 function beltHandler(event, belt) {
@@ -419,6 +435,7 @@ export function renderSettings(settings) {
     renderSomersloop(settings)
     renderRateOptions(settings)
     renderPrecisions(settings)
+    renderValueFormat(settings)
     renderBelts(settings)
     renderVisualizer(settings)
     renderResources(settings)