JSFiddle - React, Tailwind, and code Playground

by Vladymyr Shevchuk

HTML

<div></div>

JavaScript

class ColumnChart {
  element; // HTMLElement;

  constructor(obj = {}) {
    this.data = obj.data || [];
    this.label = obj.label || 'label';
    this.value = obj.value || 'value';
    this.link = obj.link || 'link';

    this.render();
    this.initEventListeners();
    this.renderLink();
  }

  initEventListeners() {}

  render() {
    const element = document.createElement("div");
    element.className = "column-chart"
    element.innerHTML = `
    <div class="column-chart__title">
    Total orders
    <a href="/sales" class="column-chart__link">View all</a>
  </div>
  <div class="column-chart__container">
    <div class="column-chart__header">344</div>
    <div class="column-chart__chart">
      <div style="--value:28" data-tooltip="<div><small>15 янв. 2020 г.</small></div><strong>11</strong>"></div>
      <div style="--value:28" data-tooltip="<div><small>16 янв. 2020 г.</small></div><strong>11</strong>"></div>
      <div style="--value:23" data-tooltip="<div><small>17 янв. 2020 г.</small></div><strong>9</strong>"></div>
      <div style="--value:7" data-tooltip="<div><small>18 янв. 2020 г.</small></div><strong>3</strong>"></div>
      <div style="--value:34" data-tooltip="<div><small>19 янв. 2020 г.</small></div><strong>13</strong>"></div>
      <div style="--value:36" data-tooltip="<div><small>20 янв. 2020 г.</small></div><strong>14</strong>"></div>
      <div style="--value:39" data-tooltip="<div><small>21 янв. 2020 г.</small></div><strong>15</strong>"></div>
      <div style="--value:7" data-tooltip="<div><small>22 янв. 2020 г.</small></div><strong>3</strong>"></div>
      <div style="--value:34" data-tooltip="<div><small>23 янв. 2020 г.</small></div><strong>13</strong>"></div>
      <div style="--value:42" data-tooltip="<div><small>24 янв. 2020 г.</small></div><strong>16</strong>"></div>
      <div style="--value:42" data-tooltip="<div><small>25 янв. 2020 г.</small></div><strong>16</strong>"></div>
      <div style="--value:7"...