Factor and Decay sliders

src/App.vue

@@ -37,8 +37,8 @@
     </div>
   </div>
   <div style="font-size: 75%; width: 100%;">
-    <Slider :info="desiredRSlider" v-model="desiredR" />
-    <Slider v-for="(slider, index) in sliders" :info="slider" v-model="w[index]" v-on:change="commit" />
+    <Slider v-for="(slider, index) in additionalSliders" :info="slider" v-model="fsrs_params.m[index]" v-on:change="commit" />
+    <Slider v-for="(slider, index) in sliders" :info="slider" v-model="fsrs_params.w[index]" v-on:change="commit" />
   </div>
   <table class="table-dataset">
     <tr v-for="dataset in data.datasets">
@@ -116,7 +116,7 @@ import {
 } from 'chart.js';
 import type { ChartData, ChartDataset } from 'chart.js';
 import { Card, FsrsCalculator } from './fsrsCalculator';
-import { sliders, desiredRSlider } from './sliderInfo';
+import { sliders, additionalSliders } from './sliderInfo';
 import { useManualRefHistory } from '@vueuse/core';
 import zoomPlugin from 'chartjs-plugin-zoom';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
@@ -169,18 +169,22 @@ const scores_text = computed({
 });
 
 const initial_w = [0.5614, 1.2546, 3.5878, 7.9731, 5.1043, 1.1303, 0.8230, 0.0465, 1.6290, 0.1350, 1.0045, 2.1320, 0.0839, 0.3204, 1.3547, 0.2190, 2.7849];
-const w = ref([...initial_w]);
-const desiredR = ref(0.9);
+const initial_m = [0.9, -0.5, 19 / 81];
 
-const { commit, undo, redo, canUndo, canRedo, undoStack, redoStack } = useManualRefHistory(w, { clone: a => [...a] });
+const fsrs_params = ref({
+  w: [...initial_w],
+  m: [...initial_m],
+});
+
+const { commit, undo, redo, canUndo, canRedo, undoStack, redoStack } = useManualRefHistory(fsrs_params, { clone: true });
 
 function createLabels() {
   const max = Math.max(...scores.value.map(a => a.length));
   return Array.from({ length: max }, (_, i) => `${i}`)
 }
 
 function createData(): ChartData<'line', MyData[]> {
-  const calc = new FsrsCalculator(w.value, desiredR.value);
+  const calc = new FsrsCalculator(fsrs_params.value.w, fsrs_params.value.m);
 
   // could not use dataset's yAxisKey here because chart component is not watching it and doesn't update automatically
 
@@ -200,13 +204,17 @@ function createData(): ChartData<'line', MyData[]> {
 const data = computed(createData);
 
 const w_text = computed({
-  get: () => w.value.join(', '),
-  set: (newValue) => w.value = newValue.split(', ').map(parseFloat)
+  get: () => fsrs_params.value.w.join(', '),
+  set: (newValue) => fsrs_params.value.w = newValue.split(', ').map(parseFloat)
 });
 
 function reset() {
   for (let i in initial_w) {
-    w.value[i] = initial_w[i];
+    fsrs_params.value.w[i] = initial_w[i];
+  }
+
+  for (let i in initial_m) {
+    fsrs_params.value.m[i] = initial_m[i];
   }
 
   commit();

src/Slider.vue

@@ -2,15 +2,15 @@
   <div class="slider">
     <div style="white-space: nowrap; width: 14em">{{ props.info.name }}</div>
     <div>
-      <input style="width: 5em;" type="number" step="0.01" v-model="model" :min="props.info.min" :max="props.info.max"
+      <input style="width: 5em;" type="number" step="0.01" v-model.number="model" :min="props.info.min" :max="props.info.max"
         v-on:change="event => $emit('change', event)" />
     </div>
     <div style="flex: 1; min-width: 10em; display: flex; column-gap: 5px;">
       <div class="minmax" style="text-align: right;">
         {{ props.info.min }}
       </div>
       <div style="flex: 1;">
-        <input style="width: 100%;" type="range" step="0.01" v-model="model" :min="props.info.min" :max="props.info.max"
+        <input style="width: 100%;" type="range" step="0.01" v-model.number="model" :min="props.info.min" :max="props.info.max"
           v-on:change="event => $emit('change', event)" />
       </div>
       <div class="minmax">

src/fsrsCalculator.ts

@@ -1,17 +1,18 @@
 export class FsrsCalculator {
     readonly w: number[];
     readonly desiredR: number;
+    readonly decay: number;
+    readonly factor: number;
 
-    decay: number = -0.5;
-    factor: number = 19.0 / 81.0;
-
-    public constructor(w: number[], desiredR: number) {
+    public constructor(w: number[], m: number[]) {
         this.w = w;
-        this.desiredR = desiredR;
+        this.desiredR = m[0];
+        this.decay = m[1];
+        this.factor = m[2];
     }
 
     calcI(r: number, s: number): number {
-        return s / this.factor * (Math.pow(r, 1.0 / this.decay) - 1.0);
+        return (s / this.factor) * (Math.pow(r, 1.0 / this.decay) - 1.0);
     }
 
     calcS0(g: number): number {

src/sliderInfo.ts

@@ -5,23 +5,27 @@ export interface SliderInfo {
 }
 
 export const sliders: SliderInfo[] = [
-    { name: "initial stability (Again)", min: 0.1, max: 100 },
-    { name: "initial stability (Hard)", min: 0.1, max: 100 },
-    { name: "initial stability (Good)", min: 0.1, max: 100 },
-    { name: "initial stability (Easy)", min: 0.1, max: 100 },
-    { name: "initial difficulty (Good)", min: 1, max: 10 },
-    { name: "initial difficulty (multiplier)", min: 0.1, max: 5 },
-    { name: "difficulty (multiplier)", min: 0.1, max: 5 },
-    { name: "difficulty (multiplier)", min: 0, max: 0.75 },
-    { name: "stability (exponent)", min: 0, max: 4 },
-    { name: "stability (negative power)", min: 0.1, max: 0.8 },
-    { name: "stability (exponent)", min: 0.01, max: 3.0 },
-    { name: "fail stability (multiplier)", min: 0.5, max: 5 },
-    { name: "fail stability (negative power)", min: 0.01, max: 0.2 },
-    { name: "fail stability (power)", min: 0.01, max: 0.9 },
-    { name: "fail stability (exponent)", min: 0.01, max: 3 },
-    { name: "stability (multiplier for Hard)", min: 0, max: 1 },
-    { name: "stability (multiplier for Easy)", min: 1, max: 6 },
+    { name: "0. initial stability (Again)", min: 0.1, max: 100 },
+    { name: "1. initial stability (Hard)", min: 0.1, max: 100 },
+    { name: "2. initial stability (Good)", min: 0.1, max: 100 },
+    { name: "3. initial stability (Easy)", min: 0.1, max: 100 },
+    { name: "4. initial difficulty (Good)", min: 1, max: 10 },
+    { name: "5. initial difficulty (multiplier)", min: 0.1, max: 5 },
+    { name: "6. difficulty (multiplier)", min: 0.1, max: 5 },
+    { name: "7. difficulty (multiplier)", min: 0, max: 0.75 },
+    { name: "8. stability (exponent)", min: 0, max: 4 },
+    { name: "9. stability (negative power)", min: 0.1, max: 0.8 },
+    { name: "10. stability (exponent)", min: 0.01, max: 3.0 },
+    { name: "11. fail stability (multiplier)", min: 0.5, max: 5 },
+    { name: "12. fail stability (negative power)", min: 0.01, max: 0.2 },
+    { name: "13. fail stability (power)", min: 0.01, max: 0.9 },
+    { name: "14. fail stability (exponent)", min: 0.01, max: 3 },
+    { name: "15. stability (multiplier for Hard)", min: 0, max: 1 },
+    { name: "16. stability (multiplier for Easy)", min: 1, max: 6 },
 ];
 
-export const desiredRSlider: SliderInfo = { name: "Desired Retention", min: 0.8, max: 0.99 };
+export const additionalSliders: SliderInfo[] = [
+    { name: "desired retention", min: 0.8, max: 0.99 },
+    { name: "decay", min: -2, max: -0.1 },
+    { name: "factor", min: 0.01, max: 2 },
+];