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,32 @@
+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 { yAxiosOptions } = 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}>
+                {
+                    yAxiosOptions?.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;

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 { chartData, xDefaultOption, yDefaultOption, chartDefaultType } = props;
     const { yAxiosOptions } = useDynamicChartData(chartData);
-    const [chartType, setChartType] = useState<AttSelectOption>();
-    const [xAxisValue, setXAxisValue] = useState<AttSelectOption>();
-    const [yAxisValue, setYAxisValue] = useState<AttSelectOption>();
+    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}>();