Пример визуализации: Помощник расчета налога УСН

<div id="tax_usn_calculator" tabindex="-1" role="dialog">
  <h4 class="font-weight-normal">Помощника расчета налога УСН</h4>
  <div v-if="!usn.income" class="align-middle">
    <img width='25' height='25' :src="status.img" />&nbsp;&nbsp;{{ status.message }}</div>
  <div v-else>
    <p>ИНН: {{ param.inn }}
      <br> За период: {{ param.date }}</p>
    <h5 class="font-weight-normal text-success">Показатели для расчета налога</h5>
    <table>
      <tr>
        <td class="px-2" style="width: 35%;">Доходы:</td>
        <td class="px-2 text-right">{{ usn.income | currency}}</td>
        <td class="px-2" style="width: 5%;"></td>
        <td class="px-2" style="width: 35%;">Ставка налога:</td>
        <td class="px-2 text-right">{{ usn.tax_rate_presentation }}</td>
      </tr>
      <tr>
        <td class="px-2" style="width: 35%;">Возвраты покупателям:</td>
        <td class="px-2 text-right">{{ usn.refund | currency}}</td>
        <td class="px-2" style="width: 5%;"></td>
        <td class="px-2" style="width: 35%;">Авансовые платежи за {{ usn.advance_payments_period_presentation }}:</td>
        <td class="px-2 text-right">{{ usn.advance_payments | currency}}</td>
      </tr>
      <tr>
        <td class="px-2">Страховые взносы:</td>
        <td class="px-2 text-right">{{ usn.insurance_payments | currency}}</td>
        <td class="px-2" style="width: 5%;"></td>
        <td class="px-2" style="width: 35%;"></td>
        <td class="px-2"> </td>
      </tr>
    </table>
    <h5 class="font-weight-normal text-success">Расчет суммы налога к уплате</h5>
    <table class="table table-sm table-hover">
      <tr v-for="el in usn.calculation">
        <td class="px-2 text-center" scope="row" style="width: 5%;">{{ el.step }}</td>
        <td v-html="el.description.replace(/(?:\r\n|\r|\n)/g, '<br>')"></td>
        <td class="px-2 text-right" style="width: 20%;">{{ el.value }}</td>
      </tr>
    </table>
    <span v-for="el in usn.links">
      <a v-if="el.type == 'anchor'" class="btn-warning m-1 btn btn-sm" :href='"#user="+user_settings.email+"&tenant="+user_settings.app_tenant+"&anchor="+el.address'
        target="_blank">{{ el.title }}</a>
      <button v-if="el.name == 'tasks_status'" class="btn-success m-1 btn btn-sm" :href="'#'+el.name" v-on:click="close_task(el.id)">{{ el.title }}</button>
      <button v-if="el.name == 'tax_payment_details'" :class="(el.name == 'tasks_status' ? 'btn-success' : 'btn-primary') + ' m-1 btn btn-sm'"
        :href="'#'+el.name" data-toggle="modal" data-backdrop="" :data-target="'#'+el.name" data-backdrop="" :data-inn="el.settings.organization.inn"
        :data-kpp="el.settings.organization.kpp" :data-date="el.settings.date" :data-tax="el.settings.tax" :data-liability="el.settings.liability">{{ el.title }}</button>
    </span>
  </div>
</div>
<script src="./res/ex/usn.js?_=1731688237"></script>

"use strict";

var usnDataUrl = "./res/ex/usn.json";

new Vue({
  el: "#tax_usn_calculator",
  data: {
    usn: [],
    user: [],
    user_settings: [],
    status: initialStatus(),
    param: {
      inn: "783900281039",
      date: "Июнь 2018"
    }
  },
  created: function created() {
    var self = this;
    getUserData(self);
    $.ajaxSetup({async: false});
    $.get(usnDataUrl, function(data) {
      self.usn = data;
      self.status.ready = true;
    }).fail(function(error) {
      self.status = errorStatus(error);
    });
  },

  methods: {
    close_task: function close_task(task_id) {}
  }
});

{
  "income": 397671,
  "refund": 0,
  "tax_rate": 6,
  "tax_rate_presentation": "6%",
  "advance_payments": 23860,
  "advance_payments_period_presentation": "1 квартал",
  "tax_reduction": 0,
  "tax_initial_overpayment": 0,
  "tax_to_pay": 0,
  "calculation": [{
      "step": 1,
      "description": "Налог за 1 полугодие 2018 г. = Доходы * Ставка налога\n(397 671,00 * 6%)",
      "value": "23 860,00"
    },
    {
      "step": 2,
      "description": "Налоговый вычет\n(расходы, уменьшающие сумму налога)",
      "value": "0,00"
    },
    {
      "step": 3,
      "description": "Сумма к вычету (Налоговый вычет, но не более 50% от налога за 1 полугодие)\n(0,00 < 11 930,00)",
      "value": "0,00"
    },
    {
      "step": 4,
      "description": "Налог исчисленный = Налог за 1 полугодие - Налоговый вычет\n(23 860,00 - 0,00)",
      "value": "23 860,00"
    },
    {
      "step": 5,
      "description": "Налог к уплате = Налог за 1 полугодие - Авансовый платеж за 1 квартал\n(23 860,00 - 23 860,00)",
      "value": "0,00"
    }
  ],
  "links": [{
      "name": "goto1C",
      "type": "anchor",
      "title": "Проверить расчет в 1С",
      "address": "e1cib/data/РегистрСведений.ПубликуемыеНавигационныеСсылки?Идентификатор=e9902bb1-f8db-4577-ab1d-22f7ab57b15c"
    },
    {
      "name": "tax_payment_details",
      "type": "endpoint",
      "title": "Оплатить налог",
      "address": "hs/dt/storage/async/tax_payment_details",
      "settings": {
        "organization": {
          "inn": "783900281039",
          "kpp": ""
        },
        "date": "2018-06-30T23:59:59",
        "tax": "УСН_Доходы",
        "liability": "Налог"
      }
    },
    {
      "name": "tasks_status",
      "type": "endpoint",
      "title": "Уже оплачено",
      "address": "hs/api/v1/tasks/status",
      "settings": {
        "id": "",
        "done": true
      }
    }
  ]
}