VolkovLabs / volkovlabs-dynamictext-panel

Business Text Panel for @grafana
https://docs.volkovlabs.io
Apache License 2.0
78 stars 14 forks source link

possibilitity to select dynamic columns #331

Closed rafaelmonteiro10 closed 5 days ago

rafaelmonteiro10 commented 6 days ago
<div class="card">
  <div class="Title">
    <strong>{{Responsavel}}</strong>
  </div>
  <div class="info-row">
    <strong>Packing List:</strong>
    {{PackingList}}
  </div>
  <div class="info-row">
    <strong>Encomenda interna:</strong>
    {{EncomendaInterna}}
  </div>
  <table id="infoTable">
    <tr>
      <th></th>
      <th>Total</th>
      {{#if (eq STam_Tam_1 "")}}
      {{else}}
      <th>{{STam_Tam_1}}</th>
      {{/if}}
      {{#if (eq STam_Tam_2 "")}}
      {{else}}
      <th>{{STam_Tam_2}}</th>
      {{/if}}
      {{#if (eq STam_Tam_3 "")}}
      {{else}}
      <th>{{STam_Tam_3}}</th>
      {{/if}}
      {{#if (eq STam_Tam_4 "")}}
      {{else}}
      <th>{{STam_Tam_4}}</th>
      {{/if}}
      {{#if (eq STam_Tam_5 "")}}
      {{else}}
      <th>{{STam_Tam_5}}</th>
      {{/if}}
      {{#if (eq STam_Tam_6 "")}}
      {{else}}
      <th>{{STam_Tam_6}}</th>
      {{/if}}
      {{#if (eq STam_Tam_7 "")}}
      {{else}}
      <th>{{STam_Tam_7}}</th>
      {{/if}}
      {{#if (eq STam_Tam_8 "")}}
      {{else}}
      <th>{{STam_Tam_8}}</th>
      {{/if}}
      {{#if (eq STam_Tam_9 "")}}
      {{else}}
      <th>{{STam_Tam_9}}</th>
      {{/if}}
      {{#if (eq STam_Tam_10 "")}}
      {{else}}
      <th>{{STam_Tam_10}}</th>
      {{/if}}
      {{#if (eq STam_Tam_11 "")}}
      {{else}}
      <th>{{STam_Tam_11}}</th>
      {{/if}}
      {{#if (eq STam_Tam_12 "")}}
      {{else}}
      <th>{{STam_Tam_12}}</th>
      {{/if}}
      {{#if (eq STam_Tam_13 "")}}
      {{else}}
      <th>{{STam_Tam_13}}</th>
      {{/if}}
      {{#if (eq STam_Tam_14 "")}}
      {{else}}
      <th>{{STam_Tam_14}}</th>
      {{/if}}
      {{#if (eq STam_Tam_15 "")}}
      {{else}}
      <th>{{STam_Tam_15}}</th>
      {{/if}}
      {{#if (eq STam_Tam_16 "")}}
      {{else}}
      <th>{{STam_Tam_16}}</th>
      {{/if}}
      {{#if (eq STam_Tam_17 "")}}
      {{else}}
      <th>{{STam_Tam_17}}</th>
      {{/if}}
      {{#if (eq STam_Tam_18 "")}}
      {{else}}
      <th>{{STam_Tam_18}}</th>
      {{/if}}
      {{#if (eq STam_Tam_19 "")}}
      {{else}}
      <th>{{STam_Tam_19}}</th>
      {{/if}}
      {{#if (eq STam_Tam_20 "")}}
      {{else}}
      <th>{{STam_Tam_20}}</th>
      {{/if}}
      {{#if (eq STam_Tam_21 "")}}
      {{else}}
      <th>{{STam_Tam_21}}</th>
      {{/if}}
      {{#if (eq STam_Tam_22 "")}}
      {{else}}
      <th>{{STam_Tam_22}}</th>
      {{/if}}
      {{#if (eq STam_Tam_23 "")}}
      {{else}}
      <th>{{STam_Tam_23}}</th>
      {{/if}}
      {{#if (eq STam_Tam_24 "")}}
      {{else}}
      <th>{{STam_Tam_24}}</th>
      {{/if}}
    </tr>
    <tr>
      <th>Separar</th>
      <td>{{EEln_Qt_Total}}</td>
      {{#if (eq STam_Tam_1 "")}}
      {{else}}
      <td>{{EEln_Qt_ACrt_1}}</td>
      {{/if}}
      {{#if (eq STam_Tam_2 "")}}
      {{else}}
      <td>{{EEln_Qt_ACrt_2}}</td>
      {{/if}}
      {{#if (eq STam_Tam_3 "")}}
      {{else}}
      <td>{{EEln_Qt_ACrt_3}}</td>
      {{/if}}
      {{#if (eq STam_Tam_4 "")}}
      {{else}}
      <td>{{EEln_Qt_ACrt_4}}</td>
      {{/if}}
      {{#if (eq STam_Tam_5 "")}}
      {{else}}
      <td>{{EEln_Qt_ACrt_5}}</td>
      {{/if}}
      {{#if (eq STam_Tam_6 "")}}
      {{else}}
      <td>{{EEln_Qt_ACrt_6}}</td>
      {{/if}}
      {{#if (eq STam_Tam_7 "")}}
      {{else}}
      <td>{{EEln_Qt_ACrt_7}}</td>
      {{/if}}
      {{#if (eq STam_Tam_8 "")}}
      {{else}}
      <td>{{EEln_Qt_ACrt_8}}</td>
      {{/if}}
      {{#if (eq STam_Tam_9 "")}}
      {{else}}
      <td>{{EEln_Qt_ACrt_9}}</td>
      {{/if}}
      {{#if (eq STam_Tam_10 "")}}
      {{else}}
      <td>{{EEln_Qt_ACrt_10}}</td>
      {{/if}}
      {{#if (eq STam_Tam_11 "")}}
      {{else}}
      <td>{{EEln_Qt_ACrt_11}}</td>
      {{/if}}
      {{#if (eq STam_Tam_12 "")}}
      {{else}}
      <td>{{EEln_Qt_ACrt_12}}</td>
      {{/if}}
      {{#if (eq STam_Tam_13 "")}}
      {{else}}
      <td>{{EEln_Qt_ACrt_13}}</td>
      {{/if}}
      {{#if (eq STam_Tam_14 "")}}
      {{else}}
      <td>{{EEln_Qt_ACrt_14}}</td>
      {{/if}}
      {{#if (eq STam_Tam_15 "")}}
      {{else}}
      <td>{{EEln_Qt_ACrt_15}}</td>
      {{/if}}
      {{#if (eq STam_Tam_16 "")}}
      {{else}}
      <td>{{EEln_Qt_ACrt_16}}</td>
      {{/if}}
      {{#if (eq STam_Tam_17 "")}}
      {{else}}
      <td>{{EEln_Qt_ACrt_17}}</td>
      {{/if}}
      {{#if (eq STam_Tam_18 "")}}
      {{else}}
      <td>{{EEln_Qt_ACrt_18}}</td>
      {{/if}}
      {{#if (eq STam_Tam_19 "")}}
      {{else}}
      <td>{{EEln_Qt_ACrt_19}}</td>
      {{/if}}
      {{#if (eq STam_Tam_20 "")}}
      {{else}}
      <td>{{EEln_Qt_ACrt_20}}</td>
      {{/if}}
      {{#if (eq STam_Tam_21 "")}}
      {{else}}
      <td>{{EEln_Qt_ACrt_21}}</td>
      {{/if}}
      {{#if (eq STam_Tam_22 "")}}
      {{else}}
      <td>{{EEln_Qt_ACrt_22}}</td>
      {{/if}}
      {{#if (eq STam_Tam_23 "")}}
      {{else}}
      <td>{{EEln_Qt_ACrt_23}}</td>
      {{/if}}
      {{#if (eq STam_Tam_24 "")}}
      {{else}}
      <td>{{EEln_Qt_ACrt_24}}</td>
      {{/if}}
    </tr>
    <tr>
      <th>Separado</th>
      <td>{{EPpi_Qt_Total}}</td>
      {{#if (eq STam_Tam_1 "")}}
      {{else}}
      <td>{{EPpi_Qt_Tam_1}}</td>
      {{/if}}
      {{#if (eq STam_Tam_2 "")}}
      {{else}}
      <td>{{EPpi_Qt_Tam_2}}</td>
      {{/if}}
      {{#if (eq STam_Tam_3 "")}}
      {{else}}
      <td>{{EPpi_Qt_Tam_3}}</td>
      {{/if}}
      {{#if (eq STam_Tam_4 "")}}
      {{else}}
      <td>{{EPpi_Qt_Tam_4}}</td>
      {{/if}}
      {{#if (eq STam_Tam_5 "")}}
      {{else}}
      <td>{{EPpi_Qt_Tam_5}}</td>
      {{/if}}
      {{#if (eq STam_Tam_6 "")}}
      {{else}}
      <td>{{EPpi_Qt_Tam_6}}</td>
      {{/if}}
      {{#if (eq STam_Tam_7 "")}}
      {{else}}
      <td>{{EPpi_Qt_Tam_7}}</td>
      {{/if}}
      {{#if (eq STam_Tam_8 "")}}
      {{else}}
      <td>{{EPpi_Qt_Tam_8}}</td>
      {{/if}}
      {{#if (eq STam_Tam_9 "")}}
      {{else}}
      <td>{{EPpi_Qt_Tam_9}}</td>
      {{/if}}
      {{#if (eq STam_Tam_10 "")}}
      {{else}}
      <td>{{EPpi_Qt_Tam_10}}</td>
      {{/if}}
      {{#if (eq STam_Tam_11 "")}}
      {{else}}
      <td>{{EPpi_Qt_Tam_11}}</td>
      {{/if}}
      {{#if (eq STam_Tam_12 "")}}
      {{else}}
      <td>{{EPpi_Qt_Tam_12}}</td>
      {{/if}}
      {{#if (eq STam_Tam_13 "")}}
      {{else}}
      <td>{{EPpi_Qt_Tam_13}}</td>
      {{/if}}
      {{#if (eq STam_Tam_14 "")}}
      {{else}}
      <td>{{EPpi_Qt_Tam_14}}</td>
      {{/if}}
      {{#if (eq STam_Tam_15 "")}}
      {{else}}
      <td>{{EPpi_Qt_Tam_15}}</td>
      {{/if}}
      {{#if (eq STam_Tam_16 "")}}
      {{else}}
      <td>{{EPpi_Qt_Tam_16}}</td>
      {{/if}}
      {{#if (eq STam_Tam_17 "")}}
      {{else}}
      <td>{{EPpi_Qt_Tam_17}}</td>
      {{/if}}
      {{#if (eq STam_Tam_18 "")}}
      {{else}}
      <td>{{EPpi_Qt_Tam_18}}</td>
      {{/if}}
      {{#if (eq STam_Tam_19 "")}}
      {{else}}
      <td>{{EPpi_Qt_Tam_19}}</td>
      {{/if}}
      {{#if (eq STam_Tam_20 "")}}
      {{else}}
      <td>{{EPpi_Qt_Tam_20}}</td>
      {{/if}}
      {{#if (eq STam_Tam_21 "")}}
      {{else}}
      <td>{{EPpi_Qt_Tam_21}}</td>
      {{/if}}
      {{#if (eq STam_Tam_22 "")}}
      {{else}}
      <td>{{EPpi_Qt_Tam_22}}</td>
      {{/if}}
      {{#if (eq STam_Tam_23 "")}}
      {{else}}
      <td>{{EPpi_Qt_Tam_23}}</td>
      {{/if}}
      {{#if (eq STam_Tam_24 "")}}
      {{else}}
      <td>{{EPpi_Qt_Tam_24}}</td>
      {{/if}}
    </tr>
  </table>
</div>

Is it possible to make this "column chooser" dynamic?

vitPinchuk commented 5 days ago

@rafaelmonteiro10 Thank you for your question

I guess you use Every row in Render template option

In this case, I see one way at the current moment is to use handlebars library functionality like .registerHelper and define the necessary keys in the data object.

Please, follow my example using your data. I'm sure it will help to solve the question

For example, I create data using Business Input Data Source

image

The next step is to get correct data before mapping for headers and each row.

For that, please use Before Content Rendering Code editor. I use Custom Handlebars helper Link to documentation: Custom Handlebars helper

image

Code to copy

console.log('console >> context', context)

/**
 * Define the necessary header keys
 */
const tableHeaderKeys = [
  'STam_Tam_1',
  'STam_Tam_2',
  'STam_Tam_3',
  'STam_Tam_4',
  'STam_Tam_5'
]

/**
 * Define the necessary first row keys
 */
const tableFirstRowsKeys = [
  'EEln_Qt_ACrt_1',
  'EEln_Qt_ACrt_2',
  'EEln_Qt_ACrt_3',
  'EEln_Qt_ACrt_4',
  'EEln_Qt_ACrt_5'
]

/**
 * Define the necessary second row keys
 */
const tableSecondRowsKeys = [
  'EPpi_Qt_Tam_1',
  'EPpi_Qt_Tam_2',
  'EPpi_Qt_Tam_3',
  'EPpi_Qt_Tam_4',
  'EPpi_Qt_Tam_5'
]

/**
 * use handlebars.registerHelper to create array for table header
 */
context.handlebars.registerHelper('headersArray', (context) => {
  const headersArray = tableHeaderKeys.map(key => context.data.root[key])
  const newContext = Object.assign({});
  newContext.value = headersArray;
  return newContext;
});

/**
 * use handlebars.registerHelper to create array for table row
 */
context.handlebars.registerHelper('rowOneArray', (context) => {
  const headersArray = tableHeaderKeys.map(key => context.data.root[key])

  const rowOneArray = tableFirstRowsKeys.map((key, index) => {
    /**
      * check value for appropriate header cell
    */
    if (headersArray[index]) {
      return context.data.root[key]
    } else return ''
  })

  const newContext = Object.assign({});
  newContext.value = rowOneArray;
  return newContext;
});

/**
 * use handlebars.registerHelper to create array for table row
 */
context.handlebars.registerHelper('rowTwoArray', (context) => {
  const headersArray = tableHeaderKeys.map(key => context.data.root[key])

  const rowTwoArray = tableSecondRowsKeys.map((key, index) => {
    /**
      * check value for appropriate header cell
    */
    if (headersArray[index]) {
      return context.data.root[key]
    } else return ''
  })

  const newContext = Object.assign({});
  newContext.value = rowTwoArray;
  return newContext;
});

After that, we can use newly created helpers in Content code editor. I am use [Built-in Helpers]

image

Code to copy:

<div class="card">
  <div class="Title">
    <strong>{{Responsavel}}</strong>
  </div>
  <div class="info-row">
    <strong>Packing List:</strong>
    {{PackingList}}
  </div>
  <div class="info-row">
    <strong>Encomenda interna:</strong>
    {{EncomendaInterna}}
  </div>
  <table id="infoTable">
    <tr>
      <th></th>
      <th>Total</th>
      {{#with (headersArray)}}
        {{#each value}}
          {{#if (eq this "")}}
          {{else}}
            <th>{{this}}</th>
          {{/if}}
        {{/each}}
      {{/with}}
    </tr>
    <tr>
      <th>Separar</th>
      <td>{{EEln_Qt_Total}}</td>
      {{#with (rowOneArray)}}
        {{#each value}}
          {{#if (eq this "")}}
          {{else}}
            <td>{{this}}</td>
          {{/if}}
        {{/each}}
      {{/with}}
    </tr>
    <tr>
      <th>Separado</th>
      <td>{{EPpi_Qt_Total}}</td>
      {{#with (rowTwoArray)}}
        {{#each value}}
          {{#if (eq this "")}}
          {{else}}
            <td>{{this}}</td>
          {{/if}}
        {{/each}}
      {{/with}}
    </tr>
  </table>
</div>

In the result, I see 3 rows with dynamic data for the table

image