Add trend indicator blocks

components/editor/Editor.vue

@@ -52,6 +52,34 @@ onMounted(() => {
         kind: "block",
         type: "custom_rsi",
       },
+      {
+        kind: "block",
+        type: "ema",
+      },
+      {
+        kind: "block",
+        type: "apo",
+      },
+      {
+        kind: "block",
+        type: "sma",
+      },
+      {
+        kind: "block",
+        type: "macd",
+      },
+      {
+        kind: "block",
+        type: "psar",
+      },
+      {
+        kind: "block",
+        type: "kdj",
+      },
+      {
+        kind: "block",
+        type: "vwma",
+      },
     ],
   };
 

plugins/blockly/apo.ts

@@ -0,0 +1,31 @@
+import Blockly from "blockly";
+
+Blockly.Blocks["apo"] = {
+  init: function () {
+    this.appendDummyInput().appendField("APO");
+    this.appendDummyInput()
+      .appendField("(fast period =")
+      .appendField(new Blockly.FieldNumber(14, 0), "FAST_PERIOD")
+      .appendField("days)");
+    this.appendDummyInput()
+      .appendField("(slow period =")
+      .appendField(new Blockly.FieldNumber(30, 0), "SLOW_PERIOD")
+      .appendField("days)");
+    this.setOutput(true, "Array");
+    this.setColour(230);
+    this.setTooltip("");
+    this.setHelpUrl("");
+  },
+};
+
+Blockly.JavaScript["apo"] = function (block) {
+  const number_fast_period: number = block.getFieldValue("FAST_PERIOD");
+  const number_slow_period: number = block.getFieldValue("SLOW_PERIOD");
+  const code =
+    "indicatorts.absolutePriceOscillator(" +
+    number_fast_period +
+    ", " +
+    number_slow_period +
+    ", stock.closings)";
+  return [code, Blockly.JavaScript.ORDER_ATOMIC];
+};

plugins/blockly/ema.ts

@@ -0,0 +1,21 @@
+import Blockly from "blockly";
+
+Blockly.Blocks["ema"] = {
+  init: function () {
+    this.appendDummyInput().appendField("EMA");
+    this.appendDummyInput()
+      .appendField("(period =")
+      .appendField(new Blockly.FieldNumber(14, 0), "PERIOD")
+      .appendField("days)");
+    this.setOutput(true, "Array");
+    this.setColour(230);
+    this.setTooltip("");
+    this.setHelpUrl("");
+  },
+};
+
+Blockly.JavaScript["ema"] = function (block) {
+  const number_period: number = block.getFieldValue("PERIOD");
+  const code = "indicatorts.ema(" + number_period + ", stock.closings)";
+  return [code, Blockly.JavaScript.ORDER_ATOMIC];
+};

plugins/blockly/index.ts

@@ -1,7 +1,16 @@
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.hook("app:beforeMount", async () => {
-    await import("./custom-rsi");
-    await import("./rsi");
-    await import("./theme/custom-renderer");
+    await Promise.all([
+      import("./custom-rsi"),
+      import("./rsi"),
+      import("./ema"),
+      import("./apo"),
+      import("./sma"),
+      import("./macd"),
+      import("./psar"),
+      import("./kdj"),
+      import("./vwma"),
+      import("./theme/custom-renderer"),
+    ]);
   });
 });

plugins/blockly/kdj.ts

@@ -0,0 +1,51 @@
+import Blockly from "blockly";
+
+Blockly.Blocks["kdj"] = {
+  init: function () {
+    this.appendDummyInput().appendField("KDJ");
+    this.appendDummyInput()
+      .appendField("(RSI period =")
+      .appendField(new Blockly.FieldNumber(9, 2), "R_PERIOD")
+      .appendField("days)");
+    this.appendDummyInput()
+      .appendField("(K period =")
+      .appendField(new Blockly.FieldNumber(3, 2), "K_PERIOD")
+      .appendField("days)");
+    this.appendDummyInput()
+      .appendField("(D period =")
+      .appendField(new Blockly.FieldNumber(3, 2), "D_PERIOD")
+      .appendField("days)");
+    this.appendDummyInput()
+      .appendField("(")
+      .appendField(
+        new Blockly.FieldDropdown([
+          ["K", "K"],
+          ["D", "D"],
+          ["J", "J"],
+        ]),
+        "KDJ",
+      )
+      .appendField(")");
+    this.setOutput(true, "Array");
+    this.setColour(230);
+    this.setTooltip("");
+    this.setHelpUrl("");
+  },
+};
+
+Blockly.JavaScript["kdj"] = function (block) {
+  const number_r_period: number = block.getFieldValue("R_PERIOD");
+  const number_k_period: number = block.getFieldValue("K_PERIOD");
+  const number_d_period: number = block.getFieldValue("D_PERIOD");
+  const dropdown_kdj: string = block.getFieldValue("KDJ").toLowerCase();
+  const code =
+    "indicatorts.kdj(" +
+    number_r_period +
+    ", " +
+    number_k_period +
+    ", " +
+    number_d_period +
+    ", stock.highs, stock.lows, stock.closings)." +
+    dropdown_kdj;
+  return [code, Blockly.JavaScript.ORDER_ATOMIC];
+};

plugins/blockly/macd.ts

@@ -0,0 +1,16 @@
+import Blockly from "blockly";
+
+Blockly.Blocks["macd"] = {
+  init: function () {
+    this.appendDummyInput().appendField("MACD");
+    this.setOutput(true, "Array");
+    this.setColour(230);
+    this.setTooltip("");
+    this.setHelpUrl("");
+  },
+};
+
+Blockly.JavaScript["macd"] = function (_) {
+  const code = "indicatorts.macd(stock.closings).macdLine";
+  return [code, Blockly.JavaScript.ORDER_ATOMIC];
+};

plugins/blockly/psar.ts

@@ -0,0 +1,17 @@
+import Blockly from "blockly";
+
+Blockly.Blocks["psar"] = {
+  init: function () {
+    this.appendDummyInput().appendField("Parabolic SAR");
+    this.setOutput(true, "Array");
+    this.setColour(230);
+    this.setTooltip("");
+    this.setHelpUrl("");
+  },
+};
+
+Blockly.JavaScript["psar"] = function (_) {
+  const code =
+    "indicatorts.parabolicSar(stock.highs, stock.lows, stock.closings).psar";
+  return [code, Blockly.JavaScript.ORDER_ATOMIC];
+};

plugins/blockly/sma.ts

@@ -0,0 +1,21 @@
+import Blockly from "blockly";
+
+Blockly.Blocks["sma"] = {
+  init: function () {
+    this.appendDummyInput().appendField("SMA");
+    this.appendDummyInput()
+      .appendField("(period =")
+      .appendField(new Blockly.FieldNumber(10, 1), "PERIOD")
+      .appendField("days)");
+    this.setOutput(true, "Array");
+    this.setColour(230);
+    this.setTooltip("");
+    this.setHelpUrl("");
+  },
+};
+
+Blockly.JavaScript["sma"] = function (block) {
+  const number_period: number = block.getFieldValue("PERIOD");
+  const code = "indicatorts.sma(" + number_period + ", stock.closings)";
+  return [code, Blockly.JavaScript.ORDER_ATOMIC];
+};

plugins/blockly/vwma.ts

@@ -0,0 +1,22 @@
+import Blockly from "blockly";
+
+Blockly.Blocks["vwma"] = {
+  init: function () {
+    this.appendDummyInput().appendField("VWMA");
+    this.appendDummyInput()
+      .appendField("(period =")
+      .appendField(new Blockly.FieldNumber(15, 1), "PERIOD")
+      .appendField("days)");
+    this.setOutput(true, "Array");
+    this.setColour(230);
+    this.setTooltip("");
+    this.setHelpUrl("");
+  },
+};
+
+Blockly.JavaScript["vwma"] = function (block) {
+  const number_period: number = block.getFieldValue("PERIOD");
+  const code =
+    "indicatorts.vwma(" + number_period + ", stock.closings, stock.volumes)";
+  return [code, Blockly.JavaScript.ORDER_ATOMIC];
+};

stock/stock.ts

@@ -6,6 +6,7 @@ export class Stock {
   private _closings: number[] | undefined;
   private _highs: number[] | undefined;
   private _lows: number[] | undefined;
+  private _volumes: number[] | undefined;
   constructor(ticker: Ticker) {
     this._ticker = ticker;
   }
@@ -37,4 +38,11 @@ export class Stock {
     }
     return this._lows;
   }
+
+  public get volumes(): number[] {
+    if (this._volumes === undefined) {
+      this._volumes = this._ticker.historicalData.map((data) => data.volume);
+    }
+    return this._volumes;
+  }
 }