New metric for percentage of cpu usage

portal/src/app/components/dashboard/components/charts/BarChart/BarChart.module.scss

@@ -1,8 +0,0 @@
-@import "src/styles/variables-keys";
-
-.bar {
-    background-color: var($primaryWhite);
-    border: 1px solid #BDC2C7;
-    max-block-size: 450px;
-    padding: 18px;
-}

portal/src/app/components/dashboard/components/charts/BarChart/BarChart.tsx

@@ -2,9 +2,9 @@ import { ChartData, ChartOptions, TooltipItem, Chart, LegendItem, ChartDataset }
 import { Bar } from 'react-chartjs-2';
 import { useEffect, useRef, useState } from 'react';
 import { IDatasets } from './models/BarChart.model';
-import { TITLE_PREFIX, colors, defaultOptions } from './barChart.const';
-import styles from './BarChart.module.scss';
+import { TITLE_PREFIX, defaultOptions } from './barChart.const';
 import { uniq } from 'lodash';
+import { getColorByName } from '../utils/charts.utils';
 
 export interface BarChartProps {
     labels: string[];
@@ -13,10 +13,11 @@ export interface BarChartProps {
     tooltipKeys: string[];
     tooltipLabels: string[];   
     title?: string;
+    xAxiosTitle?: string;
 }
 
 export const BarChart: React.FC<BarChartProps> = (props: BarChartProps) => {
-    const { labels, data, tooltipKeys, tooltipLabels, keyOfData, title } = props;
+    const { labels, data, tooltipKeys, tooltipLabels, keyOfData, title, xAxiosTitle } = props;
     const [dataValues, setDataValues] = useState();
     const [datasets, setDatasets] = useState<IDatasets[]>([]);
     const [algorithmsColors, setAlgorithmsColors] = useState<{[key: string]: string}>();
@@ -28,8 +29,8 @@ export const BarChart: React.FC<BarChartProps> = (props: BarChartProps) => {
 
         const algorithms: string[] = uniq(data.map((item: any) => item.algorithm));
         const algorithmColors: {[key: string]: string} = {};
-        algorithms.forEach((algorithm, index) => {
-          algorithmColors[algorithm] = colors[index % colors.length];
+        algorithms.forEach((algorithm) => {
+          algorithmColors[algorithm] = getColorByName(algorithm);
         });
         setAlgorithmsColors(algorithmColors);
     }, [data, keyOfData]);
@@ -99,8 +100,8 @@ export const BarChart: React.FC<BarChartProps> = (props: BarChartProps) => {
           },
           title: {
             display: true,
-            text: title,
-            align: 'start',
+            text: xAxiosTitle,
+            align: 'end',
             font: {
               size: 18,
               weight: '500',
@@ -153,7 +154,7 @@ export const BarChart: React.FC<BarChartProps> = (props: BarChartProps) => {
           (event.currentTarget as HTMLElement).style.cursor = 'default';
         }}
       >
-        <Bar ref={chartRef as any} data={tempData} options={options} style={{ height: '450px' }} className={styles.bar} />
+        <Bar ref={chartRef as any} data={tempData} options={options} style={{ height: '450px' }} />
       </div>
     );
 }

portal/src/app/components/dashboard/components/charts/BarChart/barChart.const.ts

@@ -1,7 +1,7 @@
 import { ChartOptions } from 'chart.js';
 import { CHARTS_EN } from '../../../../home/components/experiment/components/charts/translate/en';
 
-export const colors: string[] = ['#086CE1', '#FF8500', '#05BBFF', '#6D3FFC'];
+export const colors: string[] = ['#086CE1', '#FF8500', '#05BBFF', '#6D3FFC', '#E2180B', '#8208E1', '#08E145', '#9AB2C9', '#EB00FF', '#FFC700', '#8F5C47', '#05FFFF', '#FA9BF7'];
 
 export let defaultOptions: ChartOptions<any> = {
     responsive: true,

portal/src/app/components/dashboard/components/charts/LineChart/LineChart.module.scss

@@ -1,8 +0,0 @@
-@import "src/styles/variables-keys";
-
-.line_chart {
-    background-color: var($primaryWhite);
-    border: 1px solid #BDC2C7;
-    max-block-size: 450px;
-    padding: 18px;
-}

portal/src/app/components/dashboard/components/charts/LineChart/LineChart.tsx

@@ -1,17 +1,17 @@
 import { Line } from 'react-chartjs-2';
 import { ChartOptions, Chart, TooltipItem } from 'chart.js';
 import { TITLE_PREFIX, defaultOptions } from './LineChart.const';
-import styles from './LineChart.module.scss';
 import { useRef } from 'react';
 
 export interface LineChartProps {
     data: any;
     tooltipLabel?: string;
     title?: string;
+    xAxiosTitle?: string;
 }
 
 export const LineChart: React.FC<LineChartProps> = (props: LineChartProps) => {
-    const { data, title, tooltipLabel } = props;
+    const { data, title, tooltipLabel, xAxiosTitle } = props;
     const chartRef = useRef<Chart<"line", number[], unknown>>(null);
 
     const options: ChartOptions<any> = {
@@ -29,7 +29,7 @@ export const LineChart: React.FC<LineChartProps> = (props: LineChartProps) => {
       plugins: {
         title: {
           display: true,
-          text: title,
+          text: xAxiosTitle,
           align: 'start',
           font: {
             size: 18,
@@ -86,7 +86,7 @@ export const LineChart: React.FC<LineChartProps> = (props: LineChartProps) => {
           (event.currentTarget as HTMLElement).style.cursor = 'default';
         }}
       >
-        <Line ref={chartRef} data={data} options={options} style={{ blockSize: '450px' }} className={styles.line_chart} />
+        <Line ref={chartRef} data={data} options={options} style={{ blockSize: '450px' }} />
       </div>
     );
 }

portal/src/app/components/dashboard/components/charts/utils/charts.utils.test.ts

@@ -0,0 +1,7 @@
+import { getColorByName } from './charts.utils';
+
+describe('Charts Util Test', () => {
+  test('should get color by name', () => {
+    expect(getColorByName('bikel1')).toBe('#FF8500');
+  });
+});

portal/src/app/components/dashboard/components/charts/utils/charts.utils.ts

@@ -0,0 +1,15 @@
+import { colors } from "../BarChart/barChart.const";
+
+export function getColorByName(name: string): string {
+    const firstLetter: string = name.trim().substring(0, 1);
+    if (isLetter(firstLetter)) {
+      const numberFromStr: number = firstLetter.toLowerCase().charCodeAt(0) - 97;
+      return colors[numberFromStr % colors.length];
+    }
+
+    return colors[0];
+}
+
+function isLetter(str: string) {
+    return str.length === 1 && str.match(/[a-z]/i);
+}

portal/src/app/components/home/components/experiment/components/charts/Charts.tsx

@@ -1,51 +1,11 @@
-/* eslint-disable no-null/no-null */
-import { BarChart } from '../../../../../dashboard/components/charts/BarChart';
-import { LineChart } from '../../../../../dashboard/components/charts/LineChart';
 import { IExperimentData } from '../../Experiment';
 import styles from './Charts.module.scss';
-import { useChartsData } from './hooks/useChartsData';
-import { tooltipKeys, tooltipLabels } from './models/bar-chart.const';
-import { CHARTS_EN } from './translate/en';
-import { getChartTitleByType } from './utils/chart.utils';
+import { DynamicChart } from './components/dynamic-chart';
 
 export const Charts: React.FC<IExperimentData> = (props: IExperimentData) => {
-    const { barChartData, barChartLabels, barChartKeysOfData, lineChartData } = useChartsData(props);
-
     return (
         <div className={styles.charts_wrapper}>
-          <div className={styles.title}>{CHARTS_EN.TITLE}</div>
-          <>
-            <div className={styles.row}>
-                {barChartKeysOfData.map((key, index) => (
-                    <div key={`${index}-${key}`} className={styles.chart_item}>
-                        <BarChart title={getChartTitleByType(key)} labels={barChartLabels} data={barChartData} tooltipKeys={tooltipKeys} tooltipLabels={tooltipLabels} keyOfData={key} />
-                    </div>
-                ))}
-            </div>
-            <div className={styles.row}>
-                {barChartKeysOfData.map((key, index) => {
-                        const datasets = lineChartData.datasets
-                        .filter(dataset => dataset.data[key])
-                        .map(dataset => ({
-                            ...dataset,
-                            data: dataset.data[key]
-                        }));
-
-                        if (datasets.length === 0) return null;
-
-                        const data = {
-                        labels: lineChartData.labels,
-                        datasets: datasets
-                        };
-
-                        return (
-                            <div  key={`${index} + ${key}`} className={styles.chart_item}>
-                                <LineChart data={data} title={getChartTitleByType(key)} tooltipLabel={getChartTitleByType(key)} />
-                            </div>
-                        );
-                    })}
-              </div>
-          </>
+            <DynamicChart chartData={props.data} />
         </div>
     );
 }

portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/DynamicChart.module.scss

@@ -0,0 +1,28 @@
+@import "src/styles/variables-keys";
+
+.chart_wrapper {
+    inline-size: 880px;
+    min-block-size: 550px;
+    background-color: var($primaryWhite);
+    border: 1px solid #BDC2C7;
+    padding: 36px;
+}
+
+.chart_filters {
+    display: flex;
+    justify-content: space-between;
+}
+
+.select_item {
+    inline-size: 260px;
+    margin-inline-start: 16px;
+}
+
+.select_type_item {
+    inline-size: 187px;
+}
+
+.select_item_wrapper {
+    display: flex;
+    align-items: center;
+}

portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/DynamicChart.test.tsx

@@ -0,0 +1,33 @@
+import { render } from '@testing-library/react';
+import { useDynamicChartData } from './hooks/useDynamicChartData';
+import { BarChart } from '../../../../../../../dashboard/components/charts/BarChart/BarChart';
+import { LineChart } from '../../../../../../../dashboard/components/charts/LineChart/LineChart';
+
+jest.mock('../../../../../../../dashboard/components/charts/BarChart/BarChart');
+jest.mock('../../../../../../../dashboard/components/charts/LineChart/LineChart');
+jest.mock('../../../../../../../../shared/components/att-select/AttSelect', () => ({
+    AttSelect: jest.fn(() => <div>Mocked AttSelect</div>),
+}));
+jest.mock('./hooks/useDynamicChartData');
+
+describe('DynamicChart', () => {
+    test('should render Charts', async () => {
+        (BarChart as jest.Mock).mockImplementation(() => <div>BarChart</div>);
+        (LineChart as jest.Mock).mockImplementation(() => <div>LineChart</div>);
+
+
+      (useDynamicChartData as jest.Mock).mockReturnValue({
+        yAxiosOptions: [{
+            label: 'averageCPU',
+            value: 'averageCPU'
+        },
+        {
+            label: 'averageMemory',
+            value: 'averageMemory'
+        }],
+        });
+
+      const { container } = render(<BarChart title='Iterations' labels={[]} data={undefined} keyOfData={''} tooltipKeys={[]} tooltipLabels={[]} />);
+      expect(container).toBeTruthy();
+    });
+});

portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/DynamicChart.tsx

@@ -0,0 +1,110 @@
+import { ChartType, chartTypeOptions, xAxisTypeOptions } from "./models/dynamic-chart.interface";
+import styles from './DynamicChart.module.scss';
+import { AttSelect, AttSelectOption, OnSelectChanged } from "../../../../../../../../shared/components/att-select";
+import { useCallback, useEffect, useState } from "react";
+import { SelectOptionType } from "../../../../../../../protocol-query";
+import { ITestRunResult } from "../../../../../../../../shared/models/test-run-result.interface";
+import { useDynamicChartData } from "./hooks/useDynamicChartData";
+import { DYNAMIC_CHART_EN } from "./translate/en";
+import { CustomValueContainer } from "./components/custom-value-container";
+import { CustomOption } from "./components/custom-option";
+import { CustomDropdownIndicator } from "./components/custom-dropdown-indicator";
+import { BarChart } from "../../../../../../../dashboard/components/charts/BarChart";
+import { useChartsData } from "../../hooks/useChartsData";
+import { tooltipKeys, tooltipLabels } from "../../models/bar-chart.const";
+import { getTitleByXAxiosValue } from "./utils/dynamic-chart.utils";
+import { LineChart } from "../../../../../../../dashboard/components/charts/LineChart";
+import { getChartTitleByType } from "../../utils/chart.utils";
+
+export interface DynamicChartProps {
+    chartData: ITestRunResult;
+}
+export const DynamicChart: React.FC<DynamicChartProps> = (props: DynamicChartProps) => {
+    const { chartData } = props;
+    const { yAxiosOptions } = useDynamicChartData(chartData);
+    const [chartType, setChartType] = useState<AttSelectOption>();
+    const [xAxisValue, setXAxisValue] = useState<AttSelectOption>();
+    const [yAxisValue, setYAxisValue] = useState<AttSelectOption>();
+    const { barChartData, barChartLabels, lineChartData } = useChartsData({ data: chartData });
+    const [lineChartConvertData, setLineChartConvertData] = useState<{labels: number[], datasets: unknown}>();
+
+    useEffect(() => {
+        if (lineChartData) {
+            const datasets = lineChartData.datasets
+            .filter(dataset => dataset.data[yAxisValue?.value as string])
+            .map(dataset => ({
+                ...dataset,
+                data: dataset.data[yAxisValue?.value as string]
+            }));
+
+            setLineChartConvertData({
+                labels: lineChartData.labels,
+                datasets: datasets.length === 0 ? null : datasets,
+            });
+        }
+    }, [lineChartData, yAxisValue?.value]);
+
+    const onChartTypeChanged: OnSelectChanged = useCallback((options: SelectOptionType): void => {
+        const selectedChartType: AttSelectOption = options as AttSelectOption;
+        setChartType(selectedChartType);
+    }, []);
+
+    const onXAxisValueChanged: OnSelectChanged = useCallback((options: SelectOptionType): void => {
+        const selectedXAxisValue: AttSelectOption = options as AttSelectOption;
+        setXAxisValue(selectedXAxisValue);
+    }, []);
+
+    const onYAxisValueChanged: OnSelectChanged = useCallback((options: SelectOptionType): void => {
+        const selectedYAxisValue: AttSelectOption = options as AttSelectOption;
+        setYAxisValue(selectedYAxisValue);
+    }, []);
+
+    return (
+        <div className={styles.chart_wrapper}>
+            <div className={styles.chart_filters}>
+                <div className={styles.select_item_wrapper}>
+                    <label htmlFor='yAxiosSelector'>{DYNAMIC_CHART_EN.SELECTORS.LABELS.Y_AXIOS}</label>
+                    <AttSelect
+                        id='yAxiosSelector'
+                        className={styles.select_item}
+                        placeholder={DYNAMIC_CHART_EN.SELECTORS.PLACEHOLDERS.Y_AXIOS}
+                        options={yAxiosOptions}
+                        value={yAxisValue as AttSelectOption}
+                        onChange={onYAxisValueChanged}
+                        required
+                    />
+                </div>
+                <div className={styles.select_item_wrapper}>
+                    <label htmlFor='xAxiosSelector'>{DYNAMIC_CHART_EN.SELECTORS.LABELS.X_AXIOS}</label>
+                    <AttSelect
+                        id='xAxiosSelector'
+                        className={styles.select_item}
+                        options={xAxisTypeOptions}
+                        placeholder={DYNAMIC_CHART_EN.SELECTORS.PLACEHOLDERS.X_AXIOS}
+                        value={xAxisValue as AttSelectOption}
+                        onChange={onXAxisValueChanged}
+                        required
+                    />
+                </div>
+                <div className={styles.select_item_wrapper}>
+                    <AttSelect
+                        className={styles.select_type_item}
+                        options={chartTypeOptions}
+                        placeholder={DYNAMIC_CHART_EN.SELECTORS.PLACEHOLDERS.CHART_TYPE}
+                        value={chartType as AttSelectOption}
+                        onChange={onChartTypeChanged}
+                        customComponent={{ Option: CustomOption as React.FC, ValueContainer: CustomValueContainer as React.FC, DropdownIndicator: CustomDropdownIndicator as React.FC }}
+                        required
+                    />
+                </div>
+            </div>
+
+            {xAxisValue?.value && chartType?.value && yAxisValue?.value &&
+                <>
+                    {chartType?.value === ChartType.BAR && barChartData && <BarChart title={getTitleByXAxiosValue(xAxisValue.value)} labels={barChartLabels} data={barChartData} tooltipKeys={tooltipKeys} tooltipLabels={tooltipLabels} keyOfData={yAxisValue.value} />}
+                    {chartType?.value === ChartType.LINE && lineChartConvertData && <LineChart data={lineChartConvertData} title={getTitleByXAxiosValue(xAxisValue.value)} tooltipLabel={getChartTitleByType(yAxisValue.value)} />}
+                </>
+            }
+        </div>
+    );
+}