feat: update data structure for tag history and adjust related components for consistency
This commit is contained in:
@@ -8,54 +8,33 @@ import dayjs from 'dayjs';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
// Line Chart Data (same as IndexTrending) converted to table format
|
||||
const lineChartData = [
|
||||
// New data structure for tag history
|
||||
const tagHistoryData = [
|
||||
{
|
||||
id: 'Compressor Section 1',
|
||||
tag: 'TEMP_SENSOR_1',
|
||||
color: '#FF6B4A',
|
||||
data: [
|
||||
{ x: 'Jan', y: 15 },
|
||||
{ x: 'Feb', y: 18 },
|
||||
{ x: 'Mar', y: 17 },
|
||||
{ x: 'Apr', y: 24 },
|
||||
{ x: 'Mei', y: 21 },
|
||||
{ x: 'Jun', y: 19 },
|
||||
{ x: 'Jul', y: 28 },
|
||||
{ x: 'Agu', y: 26 },
|
||||
{ x: 'Sep', y: 22 },
|
||||
{ x: 'Okt', y: 25 },
|
||||
history: [
|
||||
{ timestamp: '2025-10-09 08:00', value: 75 },
|
||||
{ timestamp: '2025-10-09 08:05', value: 76 },
|
||||
{ timestamp: '2025-10-09 08:10', value: 75 },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'Compressor Section 2',
|
||||
tag: 'GAS_LEAK_SENSOR_1',
|
||||
color: '#4ECDC4',
|
||||
data: [
|
||||
{ x: 'Jan', y: 12 },
|
||||
{ x: 'Feb', y: 14 },
|
||||
{ x: 'Mar', y: 19 },
|
||||
{ x: 'Apr', y: 21 },
|
||||
{ x: 'Mei', y: 22 },
|
||||
{ x: 'Jun', y: 20 },
|
||||
{ x: 'Jul', y: 19 },
|
||||
{ x: 'Agu', y: 21 },
|
||||
{ x: 'Sep', y: 18 },
|
||||
{ x: 'Okt', y: 20 },
|
||||
history: [
|
||||
{ timestamp: '2025-10-09 08:00', value: 10 },
|
||||
{ timestamp: '2025-10-09 08:05', value: 150 },
|
||||
{ timestamp: '2025-10-09 08:10', value: 12 },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'Compressor Section 3',
|
||||
tag: 'PRESSURE_SENSOR_1',
|
||||
color: '#FFE66D',
|
||||
data: [
|
||||
{ x: 'Jan', y: 8 },
|
||||
{ x: 'Feb', y: 10 },
|
||||
{ x: 'Mar', y: 12 },
|
||||
{ x: 'Apr', y: 15 },
|
||||
{ x: 'Mei', y: 18 },
|
||||
{ x: 'Jun', y: 20 },
|
||||
{ x: 'Jul', y: 22 },
|
||||
{ x: 'Agu', y: 21 },
|
||||
{ x: 'Sep', y: 19 },
|
||||
{ x: 'Okt', y: 26 },
|
||||
history: [
|
||||
{ timestamp: '2025-10-09 08:00', value: 1.2 },
|
||||
{ timestamp: '2025-10-09 08:05', value: 1.3 },
|
||||
{ timestamp: '2025-10-09 08:10', value: 1.2 },
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -67,7 +46,7 @@ const IndexReport = memo(function IndexReport() {
|
||||
const [plantSubSection, setPlantSubSection] = useState('Semua Plant');
|
||||
const [startDate, setStartDate] = useState(dayjs('2025-09-30'));
|
||||
const [endDate, setEndDate] = useState(dayjs('2025-10-09'));
|
||||
const [periode, setPeriode] = useState('Bulanan');
|
||||
const [periode, setPeriode] = useState('30 Menit');
|
||||
const [userRole, setUserRole] = useState(null);
|
||||
const [roleLevel, setRoleLevel] = useState(null);
|
||||
|
||||
@@ -120,63 +99,53 @@ const IndexReport = memo(function IndexReport() {
|
||||
setPlantSubSection('Semua Plant');
|
||||
setStartDate(dayjs('2025-09-30'));
|
||||
setEndDate(dayjs('2025-10-09'));
|
||||
setPeriode('Bulanan');
|
||||
setPeriode('30 Menit');
|
||||
};
|
||||
|
||||
// Check if user has permission to view data (all except guest)
|
||||
const canViewData = userRole && userRole !== 'guest';
|
||||
|
||||
// Convert chart data to table format
|
||||
// Convert tag history data to table format
|
||||
const convertToTableData = () => {
|
||||
return lineChartData.map((section, index) => {
|
||||
const rowData = {
|
||||
key: index,
|
||||
section: section.id,
|
||||
color: section.color,
|
||||
};
|
||||
const timestamps = {}; // Use an object to collect data per timestamp
|
||||
|
||||
// Add each month's data as a column
|
||||
section.data.forEach((point) => {
|
||||
rowData[point.x] = point.y;
|
||||
tagHistoryData.forEach((tagData) => {
|
||||
tagData.history.forEach((point) => {
|
||||
if (!timestamps[point.timestamp]) {
|
||||
timestamps[point.timestamp] = {
|
||||
key: point.timestamp,
|
||||
'Date and Time': point.timestamp,
|
||||
};
|
||||
}
|
||||
timestamps[point.timestamp][tagData.tag] = point.value;
|
||||
});
|
||||
|
||||
return rowData;
|
||||
});
|
||||
|
||||
// Convert the object to an array
|
||||
return Object.values(timestamps);
|
||||
};
|
||||
|
||||
const tableData = convertToTableData();
|
||||
|
||||
// Create dynamic columns based on months
|
||||
const months = lineChartData[0]?.data.map((point) => point.x) || [];
|
||||
// Create dynamic columns based on tags
|
||||
const tags = tagHistoryData.map((tagData) => tagData.tag);
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'Plant Sub Section',
|
||||
dataIndex: 'section',
|
||||
key: 'section',
|
||||
title: 'Date and Time',
|
||||
dataIndex: 'Date and Time',
|
||||
key: 'Date and Time',
|
||||
fixed: 'left',
|
||||
width: 200,
|
||||
render: (text, record) => (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
<div
|
||||
style={{
|
||||
width: '12px',
|
||||
height: '12px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: record.color,
|
||||
}}
|
||||
/>
|
||||
<Text strong>{text}</Text>
|
||||
</div>
|
||||
),
|
||||
width: 180,
|
||||
render: (text) => <Text strong>{text}</Text>,
|
||||
},
|
||||
...months.map((month) => ({
|
||||
title: month,
|
||||
dataIndex: month,
|
||||
key: month,
|
||||
...tags.map((tag) => ({
|
||||
title: tag,
|
||||
dataIndex: tag,
|
||||
key: tag,
|
||||
align: 'center',
|
||||
width: 80,
|
||||
render: (value) => <Text>{value}</Text>,
|
||||
width: 150,
|
||||
render: (value) => <Text>{value !== undefined ? value : '-'}</Text>,
|
||||
})),
|
||||
];
|
||||
|
||||
@@ -242,9 +211,10 @@ const IndexReport = memo(function IndexReport() {
|
||||
onChange={setPeriode}
|
||||
style={{ width: '100%', marginTop: '4px' }}
|
||||
options={[
|
||||
{ value: 'Harian', label: 'Harian' },
|
||||
{ value: 'Mingguan', label: 'Mingguan' },
|
||||
{ value: 'Bulanan', label: 'Bulanan' },
|
||||
{ value: '5 Menit', label: '5 Menit' },
|
||||
{ value: '10 Menit', label: '10 Menit' },
|
||||
{ value: '30 Menit', label: '30 Menit' },
|
||||
{ value: '1 Jam', label: '1 Jam' },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -272,9 +242,8 @@ const IndexReport = memo(function IndexReport() {
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
|
||||
{/* Table Section */}
|
||||
{!canViewData ? (
|
||||
{/* {!canViewData ? (
|
||||
<Card style={{ marginTop: '24px', textAlign: 'center', padding: '40px' }}>
|
||||
<Text style={{ fontSize: '16px', color: '#999' }}>
|
||||
Anda tidak memiliki akses untuk melihat data report.
|
||||
@@ -282,22 +251,22 @@ const IndexReport = memo(function IndexReport() {
|
||||
Silakan hubungi administrator untuk mendapatkan akses.
|
||||
</Text>
|
||||
</Card>
|
||||
) : (
|
||||
<Card style={{ marginTop: '24px' }}>
|
||||
<div style={{ marginBottom: '16px' }}>
|
||||
<Text strong style={{ fontSize: '16px' }}>
|
||||
☰ Trending Error per Plant Sub Section
|
||||
</Text>
|
||||
</div>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={tableData}
|
||||
pagination={false}
|
||||
scroll={{ x: 1000 }}
|
||||
size="middle"
|
||||
/>
|
||||
</Card>
|
||||
)}
|
||||
) : ( */}
|
||||
<Card style={{ marginTop: '24px' }}>
|
||||
<div style={{ marginBottom: '16px' }}>
|
||||
<Text strong style={{ fontSize: '16px' }}>
|
||||
☰ History Report
|
||||
</Text>
|
||||
</div>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={tableData}
|
||||
pagination={false}
|
||||
scroll={{ x: 1000 }}
|
||||
size="middle"
|
||||
/>
|
||||
</Card>
|
||||
{/* )} */}
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
@@ -17,7 +17,7 @@ const IndexTrending = memo(function IndexTrending() {
|
||||
const [plantSubSection, setPlantSubSection] = useState('Semua Plant');
|
||||
const [startDate, setStartDate] = useState(dayjs('2025-09-30'));
|
||||
const [endDate, setEndDate] = useState(dayjs('2025-10-09'));
|
||||
const [periode, setPeriode] = useState('Bulanan');
|
||||
const [periode, setPeriode] = useState('10 Menit');
|
||||
const [userRole, setUserRole] = useState(null);
|
||||
const [roleLevel, setRoleLevel] = useState(null);
|
||||
|
||||
@@ -66,79 +66,53 @@ const IndexTrending = memo(function IndexTrending() {
|
||||
}
|
||||
}, []);
|
||||
|
||||
const lineChartData = [
|
||||
const tagTrendingData = [
|
||||
{
|
||||
id: 'Compressor Section 1',
|
||||
id: 'TEMP_SENSOR_1',
|
||||
color: '#FF6B4A',
|
||||
data: [
|
||||
{ x: 'Jan', y: 15 },
|
||||
{ x: 'Feb', y: 18 },
|
||||
{ x: 'Mar', y: 17 },
|
||||
{ x: 'Apr', y: 24 },
|
||||
{ x: 'Mei', y: 21 },
|
||||
{ x: 'Jun', y: 19 },
|
||||
{ x: 'Jul', y: 28 },
|
||||
{ x: 'Agu', y: 26 },
|
||||
{ x: 'Sep', y: 22 },
|
||||
{ x: 'Okt', y: 25 },
|
||||
{ y: '08:00', x: 75 },
|
||||
{ y: '08:05', x: 76 },
|
||||
{ y: '08:10', x: 75 },
|
||||
{ y: '08:15', x: 77 },
|
||||
{ y: '08:20', x: 76 },
|
||||
{ y: '08:25', x: 78 },
|
||||
{ y: '08:30', x: 79 },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'Compressor Section 2',
|
||||
id: 'GAS_LEAK_SENSOR_1',
|
||||
color: '#4ECDC4',
|
||||
data: [
|
||||
{ x: 'Jan', y: 12 },
|
||||
{ x: 'Feb', y: 14 },
|
||||
{ x: 'Mar', y: 19 },
|
||||
{ x: 'Apr', y: 21 },
|
||||
{ x: 'Mei', y: 22 },
|
||||
{ x: 'Jun', y: 20 },
|
||||
{ x: 'Jul', y: 19 },
|
||||
{ x: 'Agu', y: 21 },
|
||||
{ x: 'Sep', y: 18 },
|
||||
{ x: 'Okt', y: 20 },
|
||||
{ y: '08:00', x: 10 },
|
||||
{ y: '08:05', x: 150 },
|
||||
{ y: '08:10', x: 40 },
|
||||
{ y: '08:15', x: 20 },
|
||||
{ y: '08:20', x: 15 },
|
||||
{ y: '08:25', x: 18 },
|
||||
{ y: '08:30', x: 25 },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'Compressor Section 3',
|
||||
id: 'PRESSURE_SENSOR_1',
|
||||
color: '#FFE66D',
|
||||
data: [
|
||||
{ x: 'Jan', y: 8 },
|
||||
{ x: 'Feb', y: 10 },
|
||||
{ x: 'Mar', y: 12 },
|
||||
{ x: 'Apr', y: 15 },
|
||||
{ x: 'Mei', y: 18 },
|
||||
{ x: 'Jun', y: 20 },
|
||||
{ x: 'Jul', y: 22 },
|
||||
{ x: 'Agu', y: 21 },
|
||||
{ x: 'Sep', y: 19 },
|
||||
{ x: 'Okt', y: 26 },
|
||||
{ y: '08:00', x: 1.2 },
|
||||
{ y: '08:05', x: 1.3 },
|
||||
{ y: '08:10', x: 1.2 },
|
||||
{ y: '08:15', x: 1.4 },
|
||||
{ y: '08:20', x: 1.5 },
|
||||
{ y: '08:25', x: 1.3 },
|
||||
{ y: '08:30', x: 1.2 },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const donutChartData = [
|
||||
{ id: 'Section 1', label: 'Section 1', value: 35, color: '#FF6B4A' },
|
||||
{ id: 'Section 2', label: 'Section 2', value: 25, color: '#4ECDC4' },
|
||||
{ id: 'Section 3', label: 'Section 3', value: 15, color: '#FFE66D' },
|
||||
{ id: 'Section 4', label: 'Section 4', value: 12, color: '#95E1D3' },
|
||||
{ id: 'Section 5', label: 'Section 5', value: 8, color: '#F38BA0' },
|
||||
{ id: 'Section 6', label: 'Section 6', value: 5, color: '#A78BFA' },
|
||||
];
|
||||
|
||||
const barChartData = [
|
||||
{ label: 'Overheat', value: 65 },
|
||||
{ label: 'Low Pressure', value: 48 },
|
||||
{ label: 'High Vibration', value: 42 },
|
||||
{ label: 'Oil Leak', value: 35 },
|
||||
{ label: 'Sensor Error', value: 28 },
|
||||
];
|
||||
|
||||
const handleReset = () => {
|
||||
setPlantSubSection('Semua Plant');
|
||||
setStartDate(dayjs('2025-09-30'));
|
||||
setEndDate(dayjs('2025-10-09'));
|
||||
setPeriode('Bulanan');
|
||||
setPeriode('10 Menit');
|
||||
};
|
||||
|
||||
// Check if user has permission to view data (all except guest)
|
||||
@@ -204,9 +178,10 @@ const IndexTrending = memo(function IndexTrending() {
|
||||
onChange={setPeriode}
|
||||
style={{ width: '100%', marginTop: '4px' }}
|
||||
options={[
|
||||
{ value: 'Harian', label: 'Harian' },
|
||||
{ value: 'Mingguan', label: 'Mingguan' },
|
||||
{ value: 'Bulanan', label: 'Bulanan' },
|
||||
{ value: '5 Menit', label: '5 Menit' },
|
||||
{ value: '10 Menit', label: '10 Menit' },
|
||||
{ value: '30 Menit', label: '30 Menit' },
|
||||
{ value: '1 Jam', label: '1 Jam' },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -234,9 +209,8 @@ const IndexTrending = memo(function IndexTrending() {
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
|
||||
{/* Charts Section */}
|
||||
{!canViewData ? (
|
||||
{/* {!canViewData ? (
|
||||
<Card style={{ marginTop: '24px', textAlign: 'center', padding: '40px' }}>
|
||||
<Text style={{ fontSize: '16px', color: '#999' }}>
|
||||
Anda tidak memiliki akses untuk melihat data trending.
|
||||
@@ -244,64 +218,78 @@ const IndexTrending = memo(function IndexTrending() {
|
||||
Silakan hubungi administrator untuk mendapatkan akses.
|
||||
</Text>
|
||||
</Card>
|
||||
) : (
|
||||
<>
|
||||
<Row gutter={16} style={{ marginTop: '24px' }}>
|
||||
{/* Line Chart */}
|
||||
<Col xs={24}>
|
||||
<Card className="chart-card">
|
||||
<div className="chart-header">
|
||||
<Text strong style={{ fontSize: '14px' }}>
|
||||
☰ Trending Error per Plant Sub Section
|
||||
</Text>
|
||||
</div>
|
||||
<div style={{ height: '500px', marginTop: '16px' }}>
|
||||
<ResponsiveLine
|
||||
data={lineChartData}
|
||||
margin={{ top: 20, right: 20, bottom: 50, left: 50 }}
|
||||
xScale={{ type: 'point' }}
|
||||
yScale={{ type: 'linear', min: 0, max: 35 }}
|
||||
curve="natural"
|
||||
axisBottom={{
|
||||
tickSize: 5,
|
||||
tickPadding: 5,
|
||||
tickRotation: 0,
|
||||
}}
|
||||
axisLeft={{
|
||||
tickSize: 5,
|
||||
tickPadding: 5,
|
||||
tickRotation: 0,
|
||||
}}
|
||||
colors={{ datum: 'color' }}
|
||||
pointSize={6}
|
||||
pointColor={{ theme: 'background' }}
|
||||
pointBorderWidth={2}
|
||||
pointBorderColor={{ from: 'serieColor' }}
|
||||
pointLabelYOffset={-12}
|
||||
useMesh={true}
|
||||
legends={[
|
||||
{
|
||||
anchor: 'bottom',
|
||||
direction: 'row',
|
||||
justify: false,
|
||||
translateX: 0,
|
||||
translateY: 50,
|
||||
itemsSpacing: 10,
|
||||
itemDirection: 'left-to-right',
|
||||
itemWidth: 140,
|
||||
itemHeight: 20,
|
||||
itemOpacity: 0.75,
|
||||
symbolSize: 12,
|
||||
symbolShape: 'circle',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
)}
|
||||
) : ( */}
|
||||
<>
|
||||
<Row gutter={16} style={{ marginTop: '24px' }}>
|
||||
{/* Line Chart */}
|
||||
<Col xs={24}>
|
||||
<Card className="chart-card">
|
||||
<div className="chart-header">
|
||||
<Text strong style={{ fontSize: '14px' }}>
|
||||
☰ Tag Value Trending
|
||||
</Text>
|
||||
</div>
|
||||
<div style={{ height: '500px', marginTop: '16px' }}>
|
||||
<ResponsiveLine
|
||||
data={tagTrendingData}
|
||||
margin={{ top: 20, right: 20, bottom: 50, left: 60 }}
|
||||
xScale={{
|
||||
type: 'linear',
|
||||
min: 'auto',
|
||||
max: 'auto',
|
||||
stacked: false,
|
||||
reverse: false,
|
||||
}}
|
||||
yScale={{
|
||||
type: 'point',
|
||||
}}
|
||||
curve="natural"
|
||||
axisBottom={{
|
||||
tickSize: 5,
|
||||
tickPadding: 5,
|
||||
tickRotation: 0,
|
||||
legend: 'Value',
|
||||
legendOffset: 40,
|
||||
legendPosition: 'middle',
|
||||
}}
|
||||
axisLeft={{
|
||||
tickSize: 5,
|
||||
tickPadding: 5,
|
||||
tickRotation: 0,
|
||||
legend: 'Time',
|
||||
legendOffset: -45,
|
||||
legendPosition: 'middle',
|
||||
}}
|
||||
colors={{ datum: 'color' }}
|
||||
pointSize={6}
|
||||
pointColor={{ theme: 'background' }}
|
||||
pointBorderWidth={2}
|
||||
pointBorderColor={{ from: 'serieColor' }}
|
||||
pointLabelYOffset={-12}
|
||||
useMesh={true}
|
||||
legends={[
|
||||
{
|
||||
anchor: 'bottom-right',
|
||||
direction: 'column',
|
||||
justify: false,
|
||||
translateX: 100,
|
||||
translateY: 0,
|
||||
itemsSpacing: 2,
|
||||
itemDirection: 'left-to-right',
|
||||
itemWidth: 80,
|
||||
itemHeight: 20,
|
||||
itemOpacity: 0.75,
|
||||
symbolSize: 12,
|
||||
symbolShape: 'circle',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
{/* )} */}
|
||||
</React.Fragment>
|
||||
);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user