Skip to main content

Integration to 3rd party

  1. Зайти в маркетплейс и установить модуль с айтек дашбордом
  2. Сгенерировать токен, зайдя по ссылке
https://eu-central-2.finmars.com/{realm_code}/{space_code}/api/v1/auth-tokens/personal-access-token/create-token/
  1. Введите наименование и user_code токена (на свое усмотрение), acces_level == admin, Days to live - на свое усмотрение
  2. Требуется подготовить встроить script c js кодом на внешний сайт из примера ниже:
    • и добавить в него token
    • поменять realm_code и space_code в функции loadSecureModule
    • поменять значения для переменных в realCode, space_code
    • поменять идентификатор для селектора из html страницы, куда требуется вставить элемент дашборда
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Itech External Dashboard</title>
    <style type="text/css">
      html {
        font-size: 100%;
      }
      
      body {
        font-family: helvetica;
      }

    </style>
</head>
<body>

<h1>Itech</h1>

<div style="display: flex;">

<div style="margin-right: 20px;">
  <div><label>External Date Picker</label></div>
  <input class="date-picker" type="date" name="" value="2024-07-16">
</div>

<div>
  <div><label>External Portfolio Picker</label></div>
  <select class="portfolio-picker">
    <option>IKF1218.001</option>
  </select>
</div>

</div>

<div>

  <div class="finmars-holder" style="padding: 20px;  margin: 20px;">
    
    <div style="margin-bottom: 1rem;">Section for Finmars Dashboard</div>
    

    <div id="dashboardContainer"></div>

  </div>  
</div>




<script>

    var FINMARS_API_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzI4OTgzNDY0LCJpYXQiOjE3MjEyMDc0NjQsImp0aSI6ImQ2NmQ5MzUzNGM0OTRkMTY4NmJkMTJlYmQxZTZkZGFjIiwidXNlcl9pZCI6MywidXNlcm5hbWUiOiJhcGV0cnVzaGtpbiIsImFjY2Vzc19sZXZlbCI6ImFkbWluIiwibWV0YSI6eyJyZWFsbV9jb2RlIjoicmVhbG0wMDAwMCIsInNwYWNlX2NvZGUiOiJzcGFjZTAwMDAwIn19.V28bIdYwgMlfSMZ-hd_LVWJKX6jhqTcE-6oJbChMGpQ"

    function loadSecureModule(url, apiKey) {
        return fetch(url, {
            headers: {
                'Authorization': `Bearer ${apiKey}`
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! Status: ${response.status}`);
            }
            return response.text();
        })
        .then(scriptText => {
            const blob = new Blob([scriptText], { type: 'application/javascript' });
            const scriptURL = URL.createObjectURL(blob);
            return import(scriptURL);
        });
    }

    loadSecureModule('https://eu-central-2.finmars.com/realm0sqjq/space00ql8/api/storage/workflows/com/finmars/itech-dashboard/dashboard.js', FINMARS_API_KEY)
        .then(async (module) => {

          const FinmarsDashboard = module.default;

          const dashboard = new FinmarsDashboard({
                apiKey: FINMARS_API_KEY,
                selector: '#dashboardContainer',
                realmCode: "realm0sqjq",
                spaceCode: "space00ql8",
                domain: "eu-central-2.finmars.com",
            });

          await dashboard.init();

          dashboard.dashboardStore.setDateTo("2024-07-16");
          dashboard.dashboardStore.setPortfolios(["IKF1218.001"]);
          dashboard.renderDashboard();

          document.querySelector('.date-picker').addEventListener("change", function(event) {

            console.log('datePicker.event', event);

            dashboard.dashboardStore.setDateTo(event.target.value);
            dashboard.renderDashboard();


          })

          document.querySelector('.portfolio-picker').addEventListener("change", function(event) {

            console.log('datePicker.event', event);

            dashboard.dashboardStore.setPortfolios([event.target.value]);
            dashboard.renderDashboard();


          })

        })
        .catch(error => console.error('Error loading the script:', error));



</script>

</body>
</html>
  1. Дальше можно изменить date-picker, portfolio-picker на свои html элементы
Back to top