Clear columns on changing resource along with form validation in y axis column form

Author: bhavabhuthi

app/[locale]/dashboard/[entityType]/[entitySlug]/charts/[chartID]/components/ChartGenVizPreview.tsx

@@ -9,6 +9,7 @@ import * as echarts from 'echarts/core';
 import {
   Button,
   Dialog,
+  Form,
   Label,
   Popover,
   Select,
@@ -445,7 +446,11 @@ const ChartGenVizPreview = ({ params }: { params: any }) => {
             chartId: params.chartID,
             resource: value,
             name: chartData.name,
-            options: chartData.options,
+            options: {
+              ...chartData.options,
+              xAxisColumn: '',
+              yAxisColumn: [],
+            },
             type: chartData.type,
             filters: chartData.filters,
           },
@@ -689,7 +694,7 @@ const ChartGenVizPreview = ({ params }: { params: any }) => {
                   </div>
                 ) : (
                   <div className="sticky top-36 flex w-full items-center justify-center">
-                    <Text variant="bodyLg">No Chart Data</Text>
+                    <Text variant="bodyLg">No Valid Chart Data</Text>
                   </div>
                 )}
               </div>
@@ -903,11 +908,6 @@ const ChartGenVizPreview = ({ params }: { params: any }) => {
                               columnLabel={''}
                               columnColor={''}
                               onSubmit={(e) => {
-                                console.log(
-                                  'addYAxisColumn :::::::::',
-                                  e,
-                                  chartData.options.yAxisColumn
-                                );
                                 if (
                                   chartData.options.yAxisColumn === undefined ||
                                   chartData.options.yAxisColumn?.findIndex(
@@ -1054,62 +1054,65 @@ const YaxisColumnForm = ({
 
   return (
     <div className="flex w-full min-w-full flex-col gap-1 p-8">
-      {/* Y axis Column */}
-      <Select
-        name="selectYAxisColumn"
-        label="Column"
-        options={yAxisOptions}
-        value={yAxisColumn}
-        onChange={(e) => {
-          setYAxisColumn(e);
-        }}
-      />
-
-      {/* Label for specific element */}
-      <TextField
-        name="selectYAxisColumnLabel"
-        label="Label"
-        value={yAxisColumnLabel}
-        onChange={(e) => {
-          setYAxisColumnLabel(e);
-        }}
-      />
-
-      {/* Color for specific element */}
-      <TextField
-        name="selectYAxisColumnColor"
-        label="Color"
-        value={yAxisColumnColor}
-        onChange={(e) => {
-          setYAxisColumnColor(e);
-        }}
-      />
-
-      <div className="mt-1 flex flex-row justify-between gap-8">
-        <Button
-          kind="secondary"
-          size="slim"
-          className="rounded-2 border-1 border-solid border-greyExtralight"
-          onClick={onCancel}
-        >
-          Cancel
-        </Button>
-
-        <Button
-          kind="primary"
-          size="slim"
-          className="rounded-2 border-1 border-solid border-greyExtralight"
-          onClick={() => {
-            onSubmit({
-              fieldName: yAxisColumn,
-              label: yAxisColumnLabel,
-              color: yAxisColumnColor,
-            });
+      <Form>
+        {/* Y axis Column */}
+        <Select
+          name="selectYAxisColumn"
+          label="Column"
+          options={yAxisOptions}
+          value={yAxisColumn}
+          onChange={(e) => {
+            setYAxisColumn(e);
           }}
-        >
-          Save
-        </Button>
-      </div>
+          required
+        />
+
+        {/* Label for specific element */}
+        <TextField
+          name="selectYAxisColumnLabel"
+          label="Label"
+          value={yAxisColumnLabel}
+          onChange={(e) => {
+            setYAxisColumnLabel(e);
+          }}
+        />
+
+        {/* Color for specific element */}
+        <TextField
+          name="selectYAxisColumnColor"
+          label="Color"
+          value={yAxisColumnColor}
+          onChange={(e) => {
+            setYAxisColumnColor(e);
+          }}
+        />
+
+        <div className="mt-1 flex flex-row justify-between gap-8">
+          <Button
+            kind="secondary"
+            size="slim"
+            className="rounded-2 border-1 border-solid border-greyExtralight"
+            onClick={onCancel}
+          >
+            Cancel
+          </Button>
+
+          <Button
+            kind="primary"
+            size="slim"
+            className="rounded-2 border-1 border-solid border-greyExtralight"
+            onClick={() => {
+              onSubmit({
+                fieldName: yAxisColumn,
+                label: yAxisColumnLabel,
+                color: yAxisColumnColor,
+              });
+            }}
+          >
+            Save
+          </Button>
+        </div>
+      </Form>
     </div>
   );
 };