added api to fetch data
This commit is contained in:
@@ -1,115 +1,115 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import MultiLevelDropdown from '../../../../ui/inputs/MultiLevelDropDown'
|
||||
import { AddIcon } from '../../../../icons/ExportCommonIcons'
|
||||
import RegularDropDown from '../../../../ui/inputs/RegularDropDown'
|
||||
import useChartStore from '../../../../../store/useChartStore'
|
||||
import axios from 'axios'
|
||||
|
||||
type Props = {}
|
||||
|
||||
const LineGrapInput = (props: Props) => {
|
||||
const [dropDowndata, setDropDownData] = useState({})
|
||||
const [selections, setSelections] = useState<Record<string, { name: string, fields: string }>>({})
|
||||
const [selectedOption, setSelectedOption] = useState('1h')
|
||||
const { measurements, setMeasurements, updateDuration, duration } = useChartStore();
|
||||
|
||||
const handleSelectDuration = (option: string) => {
|
||||
updateDuration(option); // Normalize for key matching
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const fetchZoneData = async () => {
|
||||
try {
|
||||
const response = await axios.get('http://192.168.0.192:5010/getinput');
|
||||
if (response.status === 200) {
|
||||
console.log('dropdown data:', response.data);
|
||||
setDropDownData(response.data)
|
||||
} else {
|
||||
console.log('Unexpected response:', response);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('There was an error!', error);
|
||||
}
|
||||
};
|
||||
fetchZoneData();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
console.log(selections);
|
||||
}, [selections])
|
||||
|
||||
const handleSelect = (inputKey: string, selectedData: { name: string, fields: string } | null) => {
|
||||
setSelections(prev => {
|
||||
if (selectedData === null) {
|
||||
const newSelections = { ...prev };
|
||||
delete newSelections[inputKey];
|
||||
return newSelections;
|
||||
} else {
|
||||
return {
|
||||
...prev,
|
||||
[inputKey]: selectedData
|
||||
};
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
interface Measurement {
|
||||
name: string;
|
||||
fields: string;
|
||||
}
|
||||
|
||||
interface InputData {
|
||||
[key: string]: Measurement;
|
||||
}
|
||||
|
||||
const extractMeasurements = (input: InputData): Measurement[] => {
|
||||
return Object.values(input);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const measurementsData = extractMeasurements(selections);
|
||||
setMeasurements(measurementsData);
|
||||
}, [selections]);
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="inputs-wrapper">
|
||||
{[...Array(6)].map((_, index) => {
|
||||
const inputKey = `input${index + 1}`;
|
||||
return (
|
||||
<div key={index} className="datas">
|
||||
<div className="datas__label">Input {index + 1}</div>
|
||||
<div className="datas__class">
|
||||
<MultiLevelDropdown
|
||||
data={dropDowndata}
|
||||
onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
|
||||
onUnselect={() => handleSelect(inputKey, null)}
|
||||
selectedValue={selections[inputKey]}
|
||||
/>
|
||||
<div className="icon">
|
||||
<AddIcon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div>
|
||||
<div className="datas">
|
||||
<div className="datas__label">duration</div>
|
||||
<div className="datas__class">
|
||||
<RegularDropDown
|
||||
header={duration}
|
||||
options={["1h", "2h", "12h"]}
|
||||
onSelect={handleSelectDuration}
|
||||
search={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import MultiLevelDropdown from '../../../../ui/inputs/MultiLevelDropDown'
|
||||
import { AddIcon } from '../../../../icons/ExportCommonIcons'
|
||||
import RegularDropDown from '../../../../ui/inputs/RegularDropDown'
|
||||
import useChartStore from '../../../../../store/useChartStore'
|
||||
import axios from 'axios'
|
||||
|
||||
type Props = {}
|
||||
|
||||
const LineGrapInput = (props: Props) => {
|
||||
const [dropDowndata, setDropDownData] = useState({})
|
||||
const [selections, setSelections] = useState<Record<string, { name: string, fields: string }>>({})
|
||||
const [selectedOption, setSelectedOption] = useState('1h')
|
||||
const { measurements, setMeasurements, updateDuration, duration } = useChartStore();
|
||||
|
||||
const handleSelectDuration = (option: string) => {
|
||||
updateDuration(option); // Normalize for key matching
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const fetchZoneData = async () => {
|
||||
try {
|
||||
const response = await axios.get('http://192.168.0.192:5010/getinput');
|
||||
if (response.status === 200) {
|
||||
console.log('dropdown data:', response.data);
|
||||
setDropDownData(response.data)
|
||||
} else {
|
||||
console.log('Unexpected response:', response);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('There was an error!', error);
|
||||
}
|
||||
};
|
||||
fetchZoneData();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
console.log(selections);
|
||||
}, [selections])
|
||||
|
||||
const handleSelect = (inputKey: string, selectedData: { name: string, fields: string } | null) => {
|
||||
setSelections(prev => {
|
||||
if (selectedData === null) {
|
||||
const newSelections = { ...prev };
|
||||
delete newSelections[inputKey];
|
||||
return newSelections;
|
||||
} else {
|
||||
return {
|
||||
...prev,
|
||||
[inputKey]: selectedData
|
||||
};
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
interface Measurement {
|
||||
name: string;
|
||||
fields: string;
|
||||
}
|
||||
|
||||
interface InputData {
|
||||
[key: string]: Measurement;
|
||||
}
|
||||
|
||||
const extractMeasurements = (input: InputData): Measurement[] => {
|
||||
return Object.values(input);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const measurementsData = extractMeasurements(selections);
|
||||
setMeasurements(measurementsData);
|
||||
}, [selections]);
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="inputs-wrapper">
|
||||
{[...Array(6)].map((_, index) => {
|
||||
const inputKey = `input${index + 1}`;
|
||||
return (
|
||||
<div key={index} className="datas">
|
||||
<div className="datas__label">Input {index + 1}</div>
|
||||
<div className="datas__class">
|
||||
<MultiLevelDropdown
|
||||
data={dropDowndata}
|
||||
onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
|
||||
onUnselect={() => handleSelect(inputKey, null)}
|
||||
selectedValue={selections[inputKey]}
|
||||
/>
|
||||
<div className="icon">
|
||||
<AddIcon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div>
|
||||
<div className="datas">
|
||||
<div className="datas__label">duration</div>
|
||||
<div className="datas__class">
|
||||
<RegularDropDown
|
||||
header={duration}
|
||||
options={["1h", "2h", "12h"]}
|
||||
onSelect={handleSelectDuration}
|
||||
search={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default LineGrapInput
|
||||
@@ -1,77 +1,77 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import MultiLevelDropdown from '../../../../ui/inputs/MultiLevelDropDown'
|
||||
import { AddIcon } from '../../../../icons/ExportCommonIcons'
|
||||
import axios from 'axios'
|
||||
|
||||
type Props = {}
|
||||
|
||||
const PieChartInput = (props: Props) => {
|
||||
const [dropDowndata, setDropDownData] = useState({})
|
||||
const [selections, setSelections] = useState<Record<string, {name: string, fields: string}>>({})
|
||||
|
||||
useEffect(() => {
|
||||
const fetchZoneData = async () => {
|
||||
try {
|
||||
const response = await axios.get('http://192.168.0.192:5010/getinput');
|
||||
if (response.status === 200) {
|
||||
console.log('dropdown data:', response.data);
|
||||
setDropDownData(response.data)
|
||||
} else {
|
||||
console.log('Unexpected response:', response);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('There was an error!', error);
|
||||
}
|
||||
};
|
||||
fetchZoneData();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {console.log(selections);
|
||||
},[selections])
|
||||
|
||||
const handleSelect = (inputKey: string, selectedData: {name: string, fields: string} | null) => {
|
||||
setSelections(prev => {
|
||||
if (selectedData === null) {
|
||||
const newSelections = {...prev};
|
||||
delete newSelections[inputKey];
|
||||
return newSelections;
|
||||
} else {
|
||||
return {
|
||||
...prev,
|
||||
[inputKey]: selectedData
|
||||
};
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="inputs-wrapper">
|
||||
{[...Array(3)].map((_, index) => {
|
||||
const inputKey = `input${index+1}`;
|
||||
return (
|
||||
<div key={index} className="datas">
|
||||
<div className="datas__label">Input {index+1}</div>
|
||||
<div className="datas__class">
|
||||
<MultiLevelDropdown
|
||||
data={dropDowndata}
|
||||
onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
|
||||
onUnselect={() => handleSelect(inputKey, null)}
|
||||
selectedValue={selections[inputKey]}
|
||||
/>
|
||||
<div className="icon">
|
||||
<AddIcon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import MultiLevelDropdown from '../../../../ui/inputs/MultiLevelDropDown'
|
||||
import { AddIcon } from '../../../../icons/ExportCommonIcons'
|
||||
import axios from 'axios'
|
||||
|
||||
type Props = {}
|
||||
|
||||
const PieChartInput = (props: Props) => {
|
||||
const [dropDowndata, setDropDownData] = useState({})
|
||||
const [selections, setSelections] = useState<Record<string, {name: string, fields: string}>>({})
|
||||
|
||||
useEffect(() => {
|
||||
const fetchZoneData = async () => {
|
||||
try {
|
||||
const response = await axios.get('http://192.168.0.192:5010/getinput');
|
||||
if (response.status === 200) {
|
||||
console.log('dropdown data:', response.data);
|
||||
setDropDownData(response.data)
|
||||
} else {
|
||||
console.log('Unexpected response:', response);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('There was an error!', error);
|
||||
}
|
||||
};
|
||||
fetchZoneData();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {console.log(selections);
|
||||
},[selections])
|
||||
|
||||
const handleSelect = (inputKey: string, selectedData: {name: string, fields: string} | null) => {
|
||||
setSelections(prev => {
|
||||
if (selectedData === null) {
|
||||
const newSelections = {...prev};
|
||||
delete newSelections[inputKey];
|
||||
return newSelections;
|
||||
} else {
|
||||
return {
|
||||
...prev,
|
||||
[inputKey]: selectedData
|
||||
};
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="inputs-wrapper">
|
||||
{[...Array(3)].map((_, index) => {
|
||||
const inputKey = `input${index+1}`;
|
||||
return (
|
||||
<div key={index} className="datas">
|
||||
<div className="datas__label">Input {index+1}</div>
|
||||
<div className="datas__class">
|
||||
<MultiLevelDropdown
|
||||
data={dropDowndata}
|
||||
onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
|
||||
onUnselect={() => handleSelect(inputKey, null)}
|
||||
selectedValue={selections[inputKey]}
|
||||
/>
|
||||
<div className="icon">
|
||||
<AddIcon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default PieChartInput
|
||||
Reference in New Issue
Block a user