@@ -39,24 +39,24 @@ const ChartForm: React.FC<ChartFormProps> = ({
3939 ) {
4040 handleChange ( 'options' , {
4141 ...chartData . options ,
42- yAxisColumn : [ { fieldName : '' , label : '' , color : '' } ] ,
42+ yAxisColumn : [ { fieldName : '' , label : '' , color : '#000000 ' } ] ,
4343 } ) ;
4444 }
4545 } , [ chartData . options . yAxisColumn ] ) ;
4646
4747
4848
49- // useEffect(() => {
50- // if (
51- // !chartData.filters ||
52- // chartData.filters.length === 0
53- // ) {
54- // handleChange('filters', {
55- // ...chartData,
56- // // filters: [{ column: '', operator: '==', value: '' }],
57- // });
58- // }
59- // }, [chartData.filters]);
49+ useEffect ( ( ) => {
50+ if (
51+ ! chartData . filters ||
52+ chartData . filters . length === 0
53+ ) {
54+ handleChange ( 'filters' , {
55+ ...chartData ,
56+ filters : [ { column : '' , operator : '==' , value : '' } ] ,
57+ } ) ;
58+ }
59+ } , [ chartData . filters ] ) ;
6060
6161 const handleYAxisColumnChange = (
6262 index : number ,
@@ -77,7 +77,7 @@ const ChartForm: React.FC<ChartFormProps> = ({
7777 const addYAxisColumn = ( ) => {
7878 const newYAxisColumns = [
7979 ...( chartData . options . yAxisColumn ?? [ ] ) ,
80- { fieldName : '' , label : '' , color : '' } ,
80+ { fieldName : '' , label : '' , color : '#000000 ' } ,
8181 ] ;
8282 handleChange ( 'options' , {
8383 ...chartData . options ,
@@ -93,35 +93,37 @@ const ChartForm: React.FC<ChartFormProps> = ({
9393 ...chartData . options ,
9494 yAxisColumn : newYAxisColumns ,
9595 } ) ;
96+ handleSave ( chartData )
9697 } ;
9798
98- // const handlefilterColumnChange = (
99- // index: number,
100- // field: string,
101- // value: any
102- // ) => {
103- // const currentFilters = Array.isArray(chartData.filters) ? chartData.filters : [];
104- // const newFiltersColumns = [...currentFilters];
105- // newFiltersColumns[index] = {
106- // ...newFiltersColumns[index],
107- // [field]: value,
108- // };
109- // handleChange('filters', newFiltersColumns); // Changed this line
110- // };
111- // const addFilterColumn = () => {
112- // const currentFilters = Array.isArray(chartData.filters) ? chartData.filters : [];
113- // const newFiltersColumns = [
114- // ...currentFilters,
115- // { column: '', operator: '==', value: '' },
116- // ];
117- // handleChange('filters', newFiltersColumns);
118- // };
99+ const handlefilterColumnChange = (
100+ index : number ,
101+ field : string ,
102+ value : any
103+ ) => {
104+ const currentFilters = Array . isArray ( chartData . filters ) ? chartData . filters : [ ] ;
105+ const newFiltersColumns = [ ...currentFilters ] ;
106+ newFiltersColumns [ index ] = {
107+ ...newFiltersColumns [ index ] ,
108+ [ field ] : value ,
109+ } ;
110+ handleChange ( 'filters' , newFiltersColumns ) ; // Changed this line
111+ } ;
112+ const addFilterColumn = ( ) => {
113+ const currentFilters = Array . isArray ( chartData . filters ) ? chartData . filters : [ ] ;
114+ const newFiltersColumns = [
115+ ...currentFilters ,
116+ { column : '' , operator : '==' , value : '' } ,
117+ ] ;
118+ handleChange ( 'filters' , newFiltersColumns ) ;
119+ } ;
119120
120- // const removeFilterColumn = (index: number) => {
121- // const currentFilters = Array.isArray(chartData.filters) ? chartData.filters : [];
122- // const newFiltersColumns = currentFilters.filter((_, i) => i !== index);
123- // handleChange('filters', newFiltersColumns);
124- // };
121+ const removeFilterColumn = ( index : number ) => {
122+ const currentFilters = Array . isArray ( chartData . filters ) ? chartData . filters : [ ] ;
123+ const newFiltersColumns = currentFilters . filter ( ( _ , i ) => i !== index ) ;
124+ handleChange ( 'filters' , newFiltersColumns ) ;
125+ handleSave ( chartData )
126+ } ;
125127 const updateChartData = ( field : string , value : any ) => {
126128 if ( field === 'type' ) {
127129 const newData = {
@@ -132,7 +134,7 @@ const ChartForm: React.FC<ChartFormProps> = ({
132134 yAxisColumn :
133135 chartData . options . yAxisColumn . length > 0
134136 ? chartData . options . yAxisColumn
135- : [ { fieldName : '' , label : '' , color : '' } ] ,
137+ : [ { fieldName : '' , label : '' , color : '#000000 ' } ] ,
136138 } ,
137139 } ;
138140 handleChange ( field , value ) ;
@@ -197,7 +199,7 @@ const ChartForm: React.FC<ChartFormProps> = ({
197199 { label : 'Sum' , value : 'SUM' } ,
198200 { label : 'Average' , value : 'AVERAGE' } ,
199201 { label : 'Count' , value : 'COUNT' } ,
200- ] }
202+ ] }
201203 label = "Aggregate"
202204 value = { chartData . options . aggregateType }
203205 defaultValue = "SUM"
@@ -380,7 +382,7 @@ const ChartForm: React.FC<ChartFormProps> = ({
380382 </ >
381383 ) }
382384
383- { /* <div className="flex flex-row flex-wrap justify-between gap-4">
385+ < div className = "flex flex-row flex-wrap justify-between gap-4" >
384386 < div className = "flex flex-col gap-4 " >
385387 { Array . isArray ( chartData ?. filters ) && chartData ?. filters ?. map ( ( column , index ) => (
386388 < div
@@ -430,20 +432,20 @@ const ChartForm: React.FC<ChartFormProps> = ({
430432 } }
431433 onBlur = { ( ) => handleSave ( chartData ) }
432434 />
433- { index > 0 && (
435+ { (
434436 < Button onClick = { ( ) => removeFilterColumn ( index ) } >
435437 Remove
436438 </ Button >
437439 ) }
438440 </ div >
439441 ) ) }
440442 </ div >
441- { (
443+ { (
442444 < Button className = "mt-4 h-fit w-fit" onClick = { addFilterColumn } >
443445 Add Filter Column
444446 </ Button >
445447 ) }
446- </div> */ }
448+ </ div >
447449 </ div >
448450 ) ;
449451} ;
0 commit comments