Как визуализировать компонент из EJS бэкэнда во внешнем интерфейсе с JavaScript? - PullRequest
Новая
       2

Как визуализировать компонент из EJS бэкэнда во внешнем интерфейсе с JavaScript?

0 голосов
/ 07 ноября 2018

Я создаю аналитическую панель и использую API CHARTJS ...

Я строю Графики из информации, поступающей динамически от API, который я использую в бэкэнде, то есть я не знаю, сколько графиков у меня будет на странице ...

С этими первыми графическими изображениями и компонентами, которые я генерирую при первом доступе, с данными, поступающими из серверной части.

В чем моя проблема? Когда я нажимаю на каждую полосу графика, мне нужно сгенерировать новые карточки (которые являются компонентом в ejs), но единственный способ, которым я знаю, это использовать javascript, скопировать и вставить весь мой HTML из этого элемента обратно в мой innerHTML ...

Хотелось бы узнать, есть ли у вас лучший способ повторно использовать мою карточку там, на моем фронте, с новыми данными, по нажатию на столбцы диаграммы.

Помня, что для графики у меня есть объектно-ориентированный класс javascript ... 

<!DOCTYPE html>
<html lang="en">
<head>
    <title><%= data.general.titlePage %></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/css/fonts/_font-icons.css">
    <link rel="stylesheet" href="/css/fonts/_font-trebuchet.css">
    <link rel="stylesheet" href="/css/fonts/_font-verdana.css">
    <link rel="stylesheet" href="/css/utilities/_colors.css">
    <link rel="stylesheet" href="/css/utilities/buttons/shapes/_circle.css">
    <link rel="stylesheet" href="/css/utilities/buttons/types/_switch-indicator.css">
    <link rel="stylesheet" href="/css/utilities/_sizing.css">
    <link rel="stylesheet" href="/css/components/partials/cards/charts/main/_main.css">
    <link rel="stylesheet" href="/css/components/partials/cards/charts/secondary/_sales.css">
    <link rel="stylesheet" href="/css/effects/_no-select.css">


    <!-- TEMPORÁRIO -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css">
</head>
<body class="no-select">
    <header>
        <%- include('../../partials/navbars/header'); -%>
    </header>

    <aside>
        <%- include('../../partials/utilities/filter'); -%>
    </aside>

    <!-- GRÁFICO PRINCIPAL -->
    <main>
        <div class="container-fluid bg-lilas-2 shadow mt-4">
            <div class="row">
                <div class="col-12 mt-5">
                    <h5 id="CCMDT" class="card-compoment-main-date-title font-weight-light text-center text-white text-shadow"><%= data.general.titleData %></h5>    
                </div>
                <div class="col-12 mt-4">
                    <canvas id="MCJS" class="mx-auto d-block" style="height:40vh; width:80vw;"></canvas>
                </div>
            </div>
            <div class="row py-4 pt-5">
                <div class="col-12">
                    <div class="d-flex justify-content-between">
                        <% for(let i = 0; i < data.api.response.summary.quantity.kpis - 1; i++){ %>
                            <% if(data.api.response.records[data.api.response.summary.quantity.records - 1].INDICADORES[i].tipo === data.api.querys.IndicatorType) { %>
                                <% data.api.response.records[data.api.response.summary.quantity.records - 1].INDICADORES[i][data.api.querys.IndicatorType].KPIS.forEach(kpi => { %>
                                    <% if(kpi.tipo === "Venda"){ %>
                                        <div class="ml-4 ml-xl-5 pl-sm-1 pl-md-2 pl-lg-3">
                                            <h3 class="card-compoment-main-indicator-title text-white"><%= kpi.tipo %></h3>
                                            <h5 id="CCMIS" class="card-compoment-main-indicator-subtitle text-white">
                                                <% if(data.api.querys.IndicatorType === 'm²') { %>
                                                    <%= `${kpi[kpi.tipo][`${kpi.tipo} ${data.api.querys.IndicatorType}`]} ${data.api.querys.IndicatorType}` %>
                                                <% } else { %>
                                                    <%= `${kpi[kpi.tipo][kpi.tipo]} ${data.api.querys.IndicatorType}` %>
                                                <% } %>
                                            </h5>
                                        </div>
                                        <div class="mr-3 mr-xl-4 pr-sm-1 pr-md-2 pr-lg-3">
                                            <button type="button" id="CCMIPT" class="btn btn-sm btn-global-circle text-white <%= kpi[kpi.tipo][`Δ% ${kpi.tipo} ${data.api.querys.IndicatorType}`] < 0 ? 'bg-danger' : 'bg-success' %>">
                                                <% if(data.api.querys.IndicatorType === 'm²') { %>
                                                    <%= `${kpi[kpi.tipo][`Δ% ${kpi.tipo} ${data.api.querys.IndicatorType}`]} %` %>
                                                <% } else { %>
                                                    <%= `${kpi[kpi.tipo][`Δ% ${kpi.tipo}`]} %` %>
                                                <% } %>
                                            </button>
                                        </div>
                                    <% } %>
                                <% }); %>
                            <% } %>
                        <% } %>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- GRÁFICOS SECUNDÁRIOS -->
    <section>
        <div class="container-fluid py-3 mb-5">
            <div id="SCC" class="row">
                <% for(let i = 0; i < data.api.response.summary.quantity.kpis - 1; i++){ %>
                    <% if(data.api.response.records[data.api.response.summary.quantity.records - 1].INDICADORES[i].tipo === data.api.querys.IndicatorType) { %>
                        <% data.api.response.records[data.api.response.summary.quantity.records - 1].INDICADORES[i][data.api.querys.IndicatorType].KPIS.forEach(kpi => { %>
                            <% if(kpi.tipo !== "Venda"){ %>
                                <div class="col-12 col-lg-6">
                                    <div class="card rounded shadow mb-4">
                                        <!-- título do tipo de indicador -->
                                        <div id="" class="card-header card-component-sales-indicator-title border-bottom-0 bg-transparent"><%= kpi.tipo %></div>
                                        <div class="card-body p-1">
                                            <div class="container-fluid d-flex flex-wrap flex-sm-nowrap justify-content-between">
                                                <!-- valor do indicador -->
                                                <div>
                                                    <span class="card-component-sales-indicator-subtitle font-weight-bold">
                                                        <% if(data.api.querys.IndicatorType === 'm²') { %>
                                                            <%= `${kpi[kpi.tipo][`${kpi.tipo} ${data.api.querys.IndicatorType}`]} ${data.api.querys.IndicatorType}` %>
                                                        <% } else { %>
                                                            <%= `${kpi[kpi.tipo][kpi.tipo]} ${data.api.querys.IndicatorType}` %>
                                                        <% } %>
                                                   </span>
                                                </div>

                                                <!-- gráfico do indicador -->
                                                <div class="w-sm-50 mx-auto d-block py-5 py-sm-0"><canvas id="<%= `${kpi.tipo}Chartjs` %>"></canvas></div>
                                                <!-- valor de percentagem do indicador (para resolução small. medium, large e extra large) -->

                                                <div class="d-none d-sm-block">
                                                    <button type="button" class="btn btn-sm btn-esm-circle btn-sm-circle btn-lg-circle btn-xl-circle card-component-login-btn-indicator text-white mx-auto d-block <%= (kpi[kpi.tipo][`Δ% ${kpi.tipo} ${data.api.querys.IndicatorType}`] || kpi[kpi.tipo][`Δ% ${kpi.tipo}`]) <= 0 ? 'bg-danger' : 'bg-success' %>">
                                                        <% if(data.api.querys.IndicatorType === 'm²') { %>
                                                            <%= `${kpi[kpi.tipo][`Δ% ${kpi.tipo} ${data.api.querys.IndicatorType}`]} %` %>
                                                        <% } else { %>
                                                            <%= `${kpi[kpi.tipo][`Δ% ${kpi.tipo}`]} %` %>
                                                        <% } %>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- valor de percentagem do indicador (somente para resolução extra small ) -->
                                        <div class="card-footer text-center d-sm-none <%= (kpi[kpi.tipo][`Δ% ${kpi.tipo} ${data.api.querys.IndicatorType}`] || kpi[kpi.tipo][`Δ% ${kpi.tipo}`]) <= 0 ? 'bg-danger' : 'bg-success' %>">
                                            <span class="text-white">
                                                <% if(data.api.querys.IndicatorType === 'm²') { %>
                                                    <%= `${kpi[kpi.tipo][`Δ% ${kpi.tipo} ${data.api.querys.IndicatorType}`]} %` %>
                                                <% } else { %>
                                                    <%= `${kpi[kpi.tipo][`Δ% ${kpi.tipo}`]} %` %>
                                                <% } %>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <% } %>
                            <% }); %>
                        <% } %>
                    <% } %>
            </div>
    </section>

    <!-- TEMPORÁRIO -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="/js/library/axios/axios.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js" crossorigin="anonymous"></script>

    <!-- FIXOS -->
    <script src="/js/scripts/API/controller.js"></script>
    <script src="/js/scripts/graphs/controller.js"></script>
    <script src="/js/scripts/graphs/bar/controller.js"></script>


    <!-- SCRIPT PARA GERAR OS GRÁFICOS -->
    <script>
        // REQUEST API DATA
        API.data = <%- JSON.stringify(data.api.response) %>;
        API.queryIndicatorType = '<%= data.api.querys.IndicatorType %>';
        API.organizeData();
        console.log(API.data)

        // MAIN CHART - HOME PAGE
        const mainGraphBar = new GraphBar('MCJS', 'Venda', API.queryIndicatorType);
        mainGraphBar.data  = API.organizedData;
        mainGraphBar.generateHomePageData();
        mainGraphBar.render();

        // SECONDARY CHARTS (KPI) - HOME PAGE
        let kpiGraphBar;
        <% for(let i = 0; i < data.api.response.summary.quantity.kpis - 1; i++){ %>
            <% if(data.api.response.records[data.api.response.summary.quantity.records - 1].INDICADORES[i].tipo === data.api.querys.IndicatorType) { %>
                <% data.api.response.records[data.api.response.summary.quantity.records - 1].INDICADORES[i][data.api.querys.IndicatorType].KPIS.forEach(kpi => { %>
                    <% if(kpi.tipo !== "Venda"){ %>
                        kpiGraphBar = new GraphBar('<%= `${kpi.tipo}Chartjs` %>', '<%= kpi.tipo %>', API.queryIndicatorType);
                        kpiGraphBar.data  = API.organizedData[(API.organizedData.length - 1)];
                        kpiGraphBar.generateHomePageData();
                        kpiGraphBar.render();
                    <% } %>
                <% }); %>
            <% } %>
        <% } %>    
    </script>

</body>
</html>
...