Как добавить гистограмму в Handlebars таблицу в Apache Superset?

Question

JognDoe @JognDoe

Handlebars

Как добавить гистограмму в Handlebars таблицу в Apache Superset?

Добрый день!

Я создал таблицу Handlebars в Superset.

Мне нужно добавить в столбец Revenue fact гистограмму.
Я не нашел подробной документации по работе с Handlebars в Superset. Различные ИИ также не справляются с поставленной задачей.

Версии ПО:
Superset v. 4.0.0
Docker version 26.1.3
Docker Compose version v2.27.0

Я пробовал добавить гистограммы таким способом, но сталкивался с ошибкой "Missing helper: 'calculateHistogramWidth'":

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"></script>
  <script>
    Handlebars.registerHelper('calculateHistogramWidth', function(revenueFact) {
        const minValue = 0;
        const maxValue = 100;
        const normalizedValue = (revenueFact - minValue) / (maxValue - minValue);
        const histogramWidth = normalizedValue * 200;
        return histogramWidth;
    });
  </script>

  <table id="table">
    <thead>
      <tr id="table-header">
        <th id="date-header">Date</th>
        <th id="revenue-plan-header">Revenue plan</th>
        <th id="revenue-fact-header">Revenue fact</th>
      </tr>
    </thead>
    <tbody>
      {{#each data}}
      <tr>
        <td id="date-cell">{{dateFormat date locale="en-US" pattern='yyyy-mm-dd'}}</td>
        <td id="revenue-plan-cell">{{revenue_plan}}</td>
        <td id="revenue-fact-cell">
          <span class="revenue-value">{{revenue_fact}}</span>
          <div class="histogram" style="width: {{calculateHistogramWidth revenue_fact}}px;"></div>
        </td>
      </tr>
      {{/each}}
    </tbody>
  </table>
  <div id="chart-container"></div>
</body>
</html>

Код таблицы без дополнительных элементов:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/handlebars/dist/handlebars.min.js"></script>
  <script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
</head>
<body>
  <table id="table">
    <thead>
      <tr id="table-header">
        <th id="date-header">Date</th>
        <th id="revenue-plan-header">Revenue plan</th>
        <th id="revenue-fact-header">Revenue fact</th>
      </tr>
    </thead>
    <tbody>
      {{#each data}}
      <tr>
        <td id="date-cell">{{dateFormat date locale="en-US" patter='yyyy-mm-dd'}}
        <td id="revenue-plan-cell">{{revenue_plan}}</td>
        <td id="revenue-fact-cell">
          <span class="revenue-value">{{revenue_fact}}</span>
          <canvas class="revenue-chart" data-revenue-fact="{{revenue_fact}}"></canvas>
        </td>
      </tr>
      {{/each}}
    </tbody>
  </table>
  <div id="chart-container"></div>
</body>
</html>

CSS-код:

.css-33igcc #user-content-table {
  width: 100%;
}

.css-33igcc #user-content-table-header {
  border-left-style: solid;
  border-left-width: 1px;
  border-right-style: solid;
  border-right-width: 1px;
  border-top-style: solid;
  border-top-width: 1px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}


.css-33igcc #user-content-date-header {
  padding-left: 10px;
  border-right-width: 1px;
  border-right-style: solid;
}

.css-33igcc #user-content-revenue-plan-header {
  padding-left: 10px;
  border-right-width: 1px;
  border-right-style: solid;
}

.css-33igcc #user-content-revenue-fact-header {
  padding-left: 10px;
}


.css-33igcc #user-content-date-cell {
  padding-left: 10px;
  border-left-width: 1px;
  border-left-style: solid;
  border-right-width: 1px;
  border-right-style: solid;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.css-33igcc #user-content-revenue-plan-cell {
  padding-left: 10px;
  border-right-width: 1px;
  border-right-style: solid;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.css-33igcc #user-content-revenue-fact-cell {
  padding-left: 10px;
  border-right-width: 1px;
  border-right-style: solid;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}