fix: add verticalBars component

Author: artemmufazalov

src/components/VerticalBars/VerticalBars.scss

@@ -0,0 +1,17 @@
+.ydb-bars {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+
+    height: 20px;
+
+    &__value {
+        display: flex;
+
+        width: 6px;
+        min-height: 3px;
+        margin-right: 2px;
+
+        background-color: var(--yc-color-infographics-info-heavy);
+    }
+}

src/components/VerticalBars/VerticalBars.tsx

@@ -0,0 +1,38 @@
+import cn from 'bem-cn-lite';
+import {useMemo} from 'react';
+
+import './VerticalBars.scss';
+
+const b = cn('ydb-bars');
+
+const calculateValuesInPercents = (values: number[]) => {
+    const max = Math.max(...values);
+
+    if (!max) {
+        return values;
+    }
+
+    const res = [];
+
+    for (const value of values) {
+        res.push((value / max) * 100);
+    }
+
+    return res;
+};
+
+interface VerticalBarsProps {
+    values: number[];
+}
+
+export const VerticalBars = ({values}: VerticalBarsProps) => {
+    const preparedValues = useMemo(() => calculateValuesInPercents(values), [values]);
+
+    const getBars = () => {
+        return preparedValues.map((value, index) => {
+            return <div key={index} style={{height: `${value}%`}} className={b('value')} />;
+        });
+    };
+
+    return <div className={b()}>{getBars()}</div>;
+};

src/components/VerticalBars/index.ts

@@ -0,0 +1 @@
+export * from './VerticalBars';