update

src/ts/components/BarChart/components/HorizontalScale.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from 'react';
+
+import style from '../index.module.scss';
+
+interface HorizontalScaleProps {
+  max: number;
+  onChange: Function;
+}
+
+function HorizontalScale({
+  max,
+  onChange,
+}: HorizontalScaleProps): React.ReactElement | null {
+  const [timer, setTimer] = useState<any>(null);
+  const [range, setRange] = useState<number>(max);
+
+  useEffect(() => {
+    setRange(max);
+    onChange(max);
+  }, [max]);
+
+  return (
+    <div className={style.vertical_bar_scale_wrapper}>
+      <input
+        type="range"
+        min={1}
+        max={max}
+        value={range}
+        className={style.vertical_bar_scale}
+        onChange={(event: any) => {
+          const value = parseInt(event.target.value || '0', 10) || 0;
+          setRange(value);
+
+          clearTimeout(timer);
+          setTimer(setTimeout(() => {
+            onChange(value);
+          }, 300));
+        }}
+      />
+    </div>
+  );
+}
+
+export default HorizontalScale;

src/ts/components/BarChart/components/Line.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import style from '../index.module.scss';
+
+interface HorizontalScaleProps {
+  text: number | string;
+  bottom: number;
+}
+
+function Line({
+  text,
+  bottom,
+}: HorizontalScaleProps): React.ReactElement | null {
+  if (!text) return null;
+
+  return (
+    <div
+      className={style.vertical_bar_line}
+      style={{ bottom: `${bottom}%` }}
+    >
+      <span className={style.vertical_bar_line_text}>
+        {text}
+      </span>
+    </div>
+  );
+}
+
+export default Line;

src/ts/components/BarChart/index.module.scss

@@ -1,23 +1,84 @@
 @import 'src/styles/variables';
 
 .vertical_bar {
+  --temp-height: 300px;
+
+  position: relative;
   display: block;
   width: 100%;
-  height: 200px;
-  margin: 24px 0 0 0;
-  padding: 0;
+  height: var(--temp-height);
+  margin: var(--space-xxl) 0 0 0;
+  padding: 0 0 0 var(--space-xxl);
   white-space: nowrap;
+
+  &_item {
+    display: inline-block;
+    width: 10px;
+
+    vertical-align: bottom;
+    cursor: pointer;
+    transition: height 0.4s;
+
+    background-color: #DBDCDD;
+    -webkit-print-color-adjust: exact;
+
+    &:hover {
+      background-color: #ED675F;
+    }
+  }
+
+  &_scale {
+    display: inline-block;
+    width: var(--temp-height);
+
+    &_wrapper {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 1px;
+      height: 1px;
+      transform: rotate(-90deg);
+    }
+  }
+
+  &_line {
+    position: absolute;
+    left: var(--space-xxl);
+
+    display: block;
+    height: 1px;
+    width: calc(100% - var(--space-xxl));
+    border-top:  1px solid  var(--color-grey);
+    -webkit-print-color-adjust: exact;
+
+    &_text {
+      position: relative;
+      bottom: 10px;
+
+      display: inline-block;
+      box-sizing: border-box;
+      padding: var(--space-xxxs) var(--space-xs);
+      text-align: center;
+
+      border-radius: var(--border-radius-s);
+      border: 1px solid var(--color-border);
+      color: var(--color-black);
+      background-color: var(--color-white);
+    }
+  }
 }
 
-.vertical_bar_item {
-  display: inline-block;
-  width: 10px;
-  vertical-align: bottom;
-  cursor: pointer;
-  background-color: #DBDCDD;
-  -webkit-print-color-adjust: exact;
-}
+@media print {
+  .vertical_bar {
+    padding: 0;
 
-.vertical_bar_item:hover {
-  background-color: #ED675F;
+    &_scale {
+      display: none;
+    }
+
+    &_line {
+      left: 0;
+      width: 100%;
+    }
+  }
 }

src/ts/components/BarChart/index.tsx

@@ -1,4 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
+
+import HorizontalScale from './components/HorizontalScale';
+import Line from './components/Line';
 
 import style from './index.module.scss';
 
@@ -20,9 +23,15 @@ function BarChart({
   selected,
   onClick,
 }: IBarCharttProps): React.ReactElement | null {
+  const max = Math.max(...dots.map((dot: IDot) => dot.value));
+  const [range, setRange] = useState<number>(max);
+
   const width = (100 / dots.length) + '%';
-  const scale = 100 / Math.max(...dots.map((dot: IDot) => dot.value));
-  const getHeight = (value: number): number => value * scale;
+  const scale = 100 / range;
+  const getHeight = (value: number): number => {
+    if (value > range) return 100;
+    return value * scale;
+  };
 
   const lines = dots.map((dot: IDot, index: number) => (
     <div
@@ -42,6 +51,20 @@ function BarChart({
 
   return (
     <div className={style.vertical_bar}>
+      <HorizontalScale
+        max={max}
+        onChange={setRange}
+      />
+      <Line
+        text={range}
+        bottom={100}
+      />
+      {range >  10 ? (
+        <Line
+          text={range / 2}
+          bottom={50}
+        />
+      ) : null}
       {lines}
     </div>
   );

src/ts/pages/Common/components/Commits.tsx

@@ -12,7 +12,6 @@ import Title from 'ts/components/Title';
 import RECOMMENDATION_TYPES from 'ts/helpers/Recommendations/contstants';
 import localization from 'ts/helpers/Localization';
 
-
 interface ICommitsProps {
   statistic: any;
 }