Default options - chart

portal/src/app/components/home/components/experiment/components/charts/Charts.module.scss

@@ -1,9 +1,25 @@
 @import "src/styles/variables-keys";
 
-.charts_wrapper {
+.charts_content {
     margin-block-start: 20px;
 }
 
+.charts_wrapper {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+.chart {
+    flex: 0 0 50%;
+    box-sizing: border-box;
+    overflow: hidden;
+    padding: 0 10px 10px 0;
+
+    &:nth-child(2n) {
+        padding-inline-end: 0;
+    }
+}
+
 .title {
     font-family: var($fontMedium);
     font-size: 18px;

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

@@ -1,13 +1,31 @@
+import { AttSelectOption } from '../../../../../../shared/components/att-select';
 import { IExperimentData } from '../../Experiment';
 import styles from './Charts.module.scss';
 import { DynamicChart } from './components/dynamic-chart';
+import { useDynamicChartData } from './components/dynamic-chart/hooks/useDynamicChartData';
+import { ChartType, chartTypeOptions, xAxisTypeOptions } from './components/dynamic-chart/models/dynamic-chart.interface';
 import { CHARTS_EN } from './translate/en';
 
 export const Charts: React.FC<IExperimentData> = (props: IExperimentData) => {
+    const { yAxisOptions } = useDynamicChartData(props.data);
+    const xDefaultOption: AttSelectOption = xAxisTypeOptions[0];
     return (
-        <div className={styles.charts_wrapper}>
+        <div className={styles.charts_content}>
             <div className={styles.title}>{CHARTS_EN.TITLE}</div>
-            <DynamicChart chartData={props.data} />
+            <div className={styles.charts_wrapper}>
+                {
+                    yAxisOptions?.map((item, index) => (
+                        <div className={styles.chart}>
+                            <DynamicChart chartData={props.data} xDefaultOption={xDefaultOption} yDefaultOption={item} chartDefaultType={getChartDefaultTypeByValue(item.value) as AttSelectOption} />
+                        </div>
+                    ))
+                }
+            </div>
         </div>
     );
 }
+
+function getChartDefaultTypeByValue(yValue: string): AttSelectOption | undefined {
+    const chartType = (yValue === 'average_cpu' || yValue === 'average_memory') ? ChartType.BAR : ChartType.LINE;
+    return chartTypeOptions.find(option => option.value === chartType);
+}

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

@@ -1,7 +1,7 @@
 @import "src/styles/variables-keys";
 
 .chart_wrapper {
-    inline-size: 880px;
+    inline-size: 100%;
     min-block-size: 550px;
     background-color: var($primaryWhite);
     border: 1px solid #BDC2C7;
@@ -11,6 +11,7 @@
 .chart_filters {
     display: flex;
     justify-content: space-between;
+    flex-wrap: wrap;
 }
 
 .select_item {

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

@@ -18,13 +18,16 @@ import { getChartTitleByType } from "../../utils/chart.utils";
 
 export interface DynamicChartProps {
     chartData: ITestRunResult;
+    xDefaultOption: AttSelectOption;
+    yDefaultOption: AttSelectOption;
+    chartDefaultType: AttSelectOption;
 }
 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 { chartData, xDefaultOption, yDefaultOption, chartDefaultType } = props;
+    const { yAxisOptions } = useDynamicChartData(chartData);
+    const [chartType, setChartType] = useState<AttSelectOption>(chartDefaultType);
+    const [xAxisValue, setXAxisValue] = useState<AttSelectOption>(xDefaultOption);
+    const [yAxisValue, setYAxisValue] = useState<AttSelectOption>(yDefaultOption);
     const { barChartData, barChartLabels, lineChartData } = useChartsData({ data: chartData });
     const [lineChartConvertData, setLineChartConvertData] = useState<{labels: number[], datasets: unknown}>();
 
@@ -68,7 +71,7 @@ export const DynamicChart: React.FC<DynamicChartProps> = (props: DynamicChartPro
                         id='yAxiosSelector'
                         className={styles.select_item}
                         placeholder={DYNAMIC_CHART_EN.SELECTORS.PLACEHOLDERS.Y_AXIOS}
-                        options={yAxiosOptions}
+                        options={yAxisOptions}
                         value={yAxisValue as AttSelectOption}
                         onChange={onYAxisValueChanged}
                         required

portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/hooks/useDynamicChartData.ts

@@ -3,10 +3,10 @@ import { AttSelectOption } from "../../../../../../../../../shared/components/at
 import { ITestRunResult } from "../../../../../../../../../shared/models/test-run-result.interface";
 
 export interface IUseDynamicChartData {
-  yAxiosOptions: AttSelectOption[];
+  yAxisOptions: AttSelectOption[];
 }
 export function useDynamicChartData(chartData: ITestRunResult): IUseDynamicChartData {
-  const [yAxiosOptions, setYAxiosOptions] = useState<AttSelectOption[]>([]);
+  const [yAxisOptions, setYAxisOptions] = useState<AttSelectOption[]>([]);
 
   useEffect(() => {
     const uniqueKeys = new Set<string>();
@@ -19,12 +19,12 @@ export function useDynamicChartData(chartData: ITestRunResult): IUseDynamicChart
     }
 
     if (uniqueKeys.size > 0) {
-      setYAxiosOptions(Array.from(uniqueKeys).map(key => ({ label: convertLabelByCapitalLetter(key), value: key })));
+      setYAxisOptions(Array.from(uniqueKeys).map(key => ({ label: convertLabelByCapitalLetter(key), value: key })));
     }
   }, [chartData]);
 
   return {
-    yAxiosOptions,
+    yAxisOptions,
   };
 }