JSFiddle - React, Tailwind, and code Playground

by Vladymyr Shevchuk

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>ColumnChart</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>

  <body>
    <div class="dashboard__charts">
      <div id="orders" class="dashboard__chart_orders">

      </div>
      <div id="sales" class="dashboard__chart_sales">

      </div>
      <div id="customers" class="dashboard__chart_customers">

      </div>
    </div>

    <script type="module">
      /* import ColumnChart from './index.js'; */

      const ordersData = [];
      const salesData = [ 30, 40, 20, 80, 35, 15 ];
      const customersData = [ 100, 90, 80, 35, 90, 25 ];

      const ordersChart = new ColumnChart({
        data: ordersData,
        label: 'orders',
        value: 344,
        link: '#'
      });

      const salesChart = new ColumnChart({
        data: salesData,
        label: 'sales',
        value: '$243,437'
      });

      const customersChart = new ColumnChart({
        data: customersData,
        label: 'customers',
        value: 321
      });
      
      // console.log(ordersChart);
      // console.log(salesChart);
      // console.log(customersChart);

      // orders.append(ordersChart.element);
      // sales.append(salesChart.element);
      // customers.append(customersChart.element);
    </script>
  </body>
</html>

CSS

/* Component styles */
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap');

body {
  font-family: 'Source Sans Pro', sans-serif;
}

:root {
  --blue: #109cf1;
  --dark-blue: #334d6e;
  --light-blue: #cfebfc;
  --middle-blue: #9fd7f9;
  --yellow: #ffb946;
  --red: #f7685b;
  --green: #2ed47a;
  --purple: #885af8;
  --black: #192a3e;
  --table-black: #323c47;
  --table-grey: #707683;
  --grey: #90a0b7;
  --grey-light: #c2cfe0;
  --grey-extra-light: #eff1f4;
  --grey-skeleton: #f5f6f8;
  --grey-middle: #e0e4eb;
  --white: #ffffff;
}

.dashboard__charts {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 24px;
  --chart-height: 50;
}

.dashboard__chart_orders {
  --chart-column-color: var(--yellow);
}

.dashboard__chart_sales {
  --chart-column-color: var(--green);
}

.dashboard__chart_customers {
  --chart-column-color: var(--purple);
}

/* ColumnChart styles */
.column-chart__chart {
  width: 100%;
  height: calc(var(--chart-height) * 1px);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}

.column-chart__chart div {
  height: calc(var(--value) * 1px);
  background-color: var(--chart-column-color);
  min-width: 1px;
  flex-grow: 1;
  margin: 0 0 0 1px;
  cursor: pointer;
}

.column-chart__chart div:first-child {
  margin: 0;
}

.column-chart__chart div.is-hovered {
  opacity: 1;
}

.column-chart__chart.has-hovered div:not(.is-hovered) {
  opacity: 0.5;
}

.column-chart__container {
  max-width: 100%;
  position: relative;
}

.column-chart {
  padding: 16px 26px 24px;
  background: var(--white);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  border-left: 2px solid var(--chart-column-color);
  position: relative;
}

.column-chart__title {
  font-size: 16px;
  line-height: 20px;
  color: var(--grey);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 8px;
}

.column-chart__link {
  color: var(--blue);
 ...

JavaScript

class ColumnChart {
  element; // HTMLElement;

  constructor(obj) {
    this.data = obj.data;
    this.label = obj.label;
    this.value = obj.value;
    this.link = obj.link;

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

  initEventListeners() {}

  render() {
      this.element = `    <div class="column-chart">
      <div class="column-chart__title">
        Total orders
      </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" data-tooltip="<div><small>26 янв. 2020 г.</small></div><strong>3</strong>"></div>
          <div style="--value:31"...