fix(result-search): consistent spacing in chart.js with echarts

EOSC-synergy · Sep 14, 2023 · 3502cb9 · 3502cb9
1 parent 2de07ed
commit 3502cb9
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/components/result-search/diagrams/chartjs.tsx b/components/result-search/diagrams/chartjs.tsx
@@ -111,7 +111,7 @@ const ChartJSDiagram: FC<ChartJSDiagramProps> = ({ results, suggestions }) => {
 
     return (
         <>
-            <Form.Group className="mb-1">
+            <Form.Group className="mb-2">
                 <Form.Label>Mode:</Form.Label>
                 <Form.Select
                     onChange={(e: ChangeEvent<HTMLSelectElement>) => {
@@ -122,7 +122,7 @@ const ChartJSDiagram: FC<ChartJSDiagramProps> = ({ results, suggestions }) => {
                     <option value={Mode.Logarithmic}>Logarithmic</option>
                 </Form.Select>
             </Form.Group>
-            <XAxis setXAxis={setXAxis} suggestions={suggestions} />
+            <XAxis setXAxis={setXAxis} suggestions={suggestions} className="mb-2" />
             <YAxis setYAxis={setYAxis} suggestions={suggestions} />
 
             {rejected.length > 0 && (

diff --git a/components/result-search/diagrams/helpers.tsx b/components/result-search/diagrams/helpers.tsx
@@ -49,9 +49,10 @@ export const generateDataPoints = (
 type XAxisProps = {
     setXAxis: (value: ((prevState: string) => string) | string) => void;
     suggestions?: Suggestion[];
+    className?: string;
 };
-export const XAxis: FC<XAxisProps> = ({ setXAxis, suggestions }) => (
-    <Form.Group className="mb-1">
+export const XAxis: FC<XAxisProps> = ({ setXAxis, suggestions, className }) => (
+    <Form.Group className={className}>
         <Form.Label>X Axis:</Form.Label>
         <InputWithSuggestions
             placeholder="Enter a JSON path (e.g. machine.cpu.count)"
@@ -64,9 +65,10 @@ export const XAxis: FC<XAxisProps> = ({ setXAxis, suggestions }) => (
 type YAxisProps = {
     setYAxis: (value: ((prevState: string) => string) | string) => void;
     suggestions?: Suggestion[];
+    className?: string;
 };
-export const YAxis: FC<YAxisProps> = ({ setYAxis, suggestions }) => (
-    <Form.Group>
+export const YAxis: FC<YAxisProps> = ({ setYAxis, suggestions, className }) => (
+    <Form.Group className={className}>
         <Form.Label>Y Axis:</Form.Label>
         <InputWithSuggestions
             placeholder="Enter a JSON path (e.g. result.score)"