From 8973bda0c2620306ee1fcca26427371f547fa17e Mon Sep 17 00:00:00 2001 From: iadibar Date: Sun, 18 Feb 2024 14:23:01 +0200 Subject: [PATCH 1/3] add default options to the chart --- .../components/charts/Charts.module.scss | 18 ++++++++++++++- .../experiment/components/charts/Charts.tsx | 23 +++++++++++++++++-- .../dynamic-chart/DynamicChart.module.scss | 2 +- .../components/dynamic-chart/DynamicChart.tsx | 11 +++++---- 4 files changed, 46 insertions(+), 8 deletions(-) diff --git a/portal/src/app/components/home/components/experiment/components/charts/Charts.module.scss b/portal/src/app/components/home/components/experiment/components/charts/Charts.module.scss index 1ac9a58c..05ec188a 100644 --- a/portal/src/app/components/home/components/experiment/components/charts/Charts.module.scss +++ b/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; diff --git a/portal/src/app/components/home/components/experiment/components/charts/Charts.tsx b/portal/src/app/components/home/components/experiment/components/charts/Charts.tsx index f3a51eff..45699782 100644 --- a/portal/src/app/components/home/components/experiment/components/charts/Charts.tsx +++ b/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 = (props: IExperimentData) => { + const { yAxiosOptions } = useDynamicChartData(props.data); + const xDefaultOption: AttSelectOption = xAxisTypeOptions[0]; return ( -
+
{CHARTS_EN.TITLE}
- +
+ { + yAxiosOptions?.map((item, index) => ( +
+ + +
+ )) + } +
); } + +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); +} diff --git a/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/DynamicChart.module.scss b/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/DynamicChart.module.scss index 5ab99e00..29178582 100644 --- a/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/DynamicChart.module.scss +++ b/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; diff --git a/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/DynamicChart.tsx b/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/DynamicChart.tsx index 39a54ca0..13f238da 100644 --- a/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/DynamicChart.tsx +++ b/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 = (props: DynamicChartProps) => { - const { chartData } = props; + const { chartData, xDefaultOption, yDefaultOption, chartDefaultType } = props; const { yAxiosOptions } = useDynamicChartData(chartData); - const [chartType, setChartType] = useState(); - const [xAxisValue, setXAxisValue] = useState(); - const [yAxisValue, setYAxisValue] = useState(); + const [chartType, setChartType] = useState(chartDefaultType); + const [xAxisValue, setXAxisValue] = useState(xDefaultOption); + const [yAxisValue, setYAxisValue] = useState(yDefaultOption); const { barChartData, barChartLabels, lineChartData } = useChartsData({ data: chartData }); const [lineChartConvertData, setLineChartConvertData] = useState<{labels: number[], datasets: unknown}>(); From fbdc891378bc2cc1cdca2382cda100f35a279bc8 Mon Sep 17 00:00:00 2001 From: iadibar Date: Sun, 18 Feb 2024 15:26:59 +0200 Subject: [PATCH 2/3] fix --- .../home/components/experiment/components/charts/Charts.tsx | 3 +-- .../charts/components/dynamic-chart/DynamicChart.module.scss | 1 + 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/portal/src/app/components/home/components/experiment/components/charts/Charts.tsx b/portal/src/app/components/home/components/experiment/components/charts/Charts.tsx index 45699782..84c3e68b 100644 --- a/portal/src/app/components/home/components/experiment/components/charts/Charts.tsx +++ b/portal/src/app/components/home/components/experiment/components/charts/Charts.tsx @@ -16,8 +16,7 @@ export const Charts: React.FC = (props: IExperimentData) => { { yAxiosOptions?.map((item, index) => (
- - +
)) } diff --git a/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/DynamicChart.module.scss b/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/DynamicChart.module.scss index 29178582..91bc37b9 100644 --- a/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/DynamicChart.module.scss +++ b/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/DynamicChart.module.scss @@ -11,6 +11,7 @@ .chart_filters { display: flex; justify-content: space-between; + flex-wrap: wrap; } .select_item { From 238ab8d85e9508b874ad4d6f2ce829e6f1df78b2 Mon Sep 17 00:00:00 2001 From: iadibar Date: Sun, 18 Feb 2024 15:31:28 +0200 Subject: [PATCH 3/3] fix PR --- .../components/experiment/components/charts/Charts.tsx | 4 ++-- .../charts/components/dynamic-chart/DynamicChart.tsx | 4 ++-- .../components/dynamic-chart/hooks/useDynamicChartData.ts | 8 ++++---- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/portal/src/app/components/home/components/experiment/components/charts/Charts.tsx b/portal/src/app/components/home/components/experiment/components/charts/Charts.tsx index 84c3e68b..6cecfecc 100644 --- a/portal/src/app/components/home/components/experiment/components/charts/Charts.tsx +++ b/portal/src/app/components/home/components/experiment/components/charts/Charts.tsx @@ -7,14 +7,14 @@ import { ChartType, chartTypeOptions, xAxisTypeOptions } from './components/dyna import { CHARTS_EN } from './translate/en'; export const Charts: React.FC = (props: IExperimentData) => { - const { yAxiosOptions } = useDynamicChartData(props.data); + const { yAxisOptions } = useDynamicChartData(props.data); const xDefaultOption: AttSelectOption = xAxisTypeOptions[0]; return (
{CHARTS_EN.TITLE}
{ - yAxiosOptions?.map((item, index) => ( + yAxisOptions?.map((item, index) => (
diff --git a/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/DynamicChart.tsx b/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/DynamicChart.tsx index 13f238da..ae625c2f 100644 --- a/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/DynamicChart.tsx +++ b/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/DynamicChart.tsx @@ -24,7 +24,7 @@ export interface DynamicChartProps { } export const DynamicChart: React.FC = (props: DynamicChartProps) => { const { chartData, xDefaultOption, yDefaultOption, chartDefaultType } = props; - const { yAxiosOptions } = useDynamicChartData(chartData); + const { yAxisOptions } = useDynamicChartData(chartData); const [chartType, setChartType] = useState(chartDefaultType); const [xAxisValue, setXAxisValue] = useState(xDefaultOption); const [yAxisValue, setYAxisValue] = useState(yDefaultOption); @@ -71,7 +71,7 @@ export const DynamicChart: React.FC = (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 diff --git a/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/hooks/useDynamicChartData.ts b/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/hooks/useDynamicChartData.ts index ee3f7be9..298822b0 100644 --- a/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/hooks/useDynamicChartData.ts +++ b/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([]); + const [yAxisOptions, setYAxisOptions] = useState([]); useEffect(() => { const uniqueKeys = new Set(); @@ -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, }; }