XCalc.vue

<template>
  <div>
    <h1>XCalc</h1>
    <mathjaxEl></mathjaxEl>
    <textarea class="input" rows="10" v-model="input" @input="parse"></textarea>
    <textarea class="result" readonly rows="20" v-model="output"></textarea>
    <textarea class="av" readonly rows="10" v-model="av"></textarea>
  </div>
</template>

<script>
import mathjaxEl from "@/components/mathjaxEl";
import _ from "antlr4ts";
import * as XCalc from "@/static/analysis/Expressions/XCalc.js";

export default {
  components: {
    mathjaxEl
  },
  data() {
    return {
      input: "",
      output: "",
      av: ""
    };
  },
  methods: {
    parse() {
      console.log(this.input);
      let rows = this.input.split("\n");
      let r = rows.map(x => `[${x}], `);
      this.output = rows.join(",");
      //console.log(ExpressionGroup);
      try {
        let eg = new XCalc.default.ExpressionGroup(rows);
        eg.evaluate();
        let outRows = eg.expressions.map(
          x =>
            `${x.print(false)}  \n ->  ${
              isNaN(x.print(true))
                ? x.print(true)
                : Math.round(Number(x.print(true)) * 1000) / 1000
            }`
        );
        this.output = outRows.join("\n");
        this.av = eg.variableMap.print().join("\n");
      } catch (e) {
        this.output = e;
      }
    }
    //read more later: https://stackoverflow.com/questions/114586/smart-design-of-a-math-parser
  }
};
</script>

<style scoped>
textarea {
  width: 100%;
  border-radius: 3px;
}
.input {
  background-color: white;
}
.result,
.av {
  background-color: lightgray;
}
</style>