yogiedigital/cod-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: yogiedigital:9db143972e63581062568ae07f12d6b911a760ea
Branches Tags
yogiedigital:main yogiedigital:lavoce
...
compare: yogiedigital:3e728a1ff5d8451c0dfc1e82e3e78cb93eed9e9b
Branches Tags
yogiedigital:lavoce yogiedigital:main

3 Commits
9db143972e ... 3e728a1ff5

Author SHA1 Message Date
Bragas Rexita Ecos Fernanda
3e728a1ff5 Merge pull request 'lavoce' (#9) from lavoce into main 
Reviewed-on: #9
 2025-10-27 03:48:58 +00:00
Fachba
39d8be10cc progress history report 2025-10-27 10:28:42 +07:00
Fachba
5a8e2dee2f integration api history alarm and event alarm 2025-10-25 23:54:22 +07:00
8 changed files with 429 additions and 202 deletions
Expand all files Collapse all files

54
src/api/history-value.jsx Normal file
View File

@@ -0,0 +1,54 @@
import { SendRequest } from '../components/Global/ApiRequest';
const getAllHistoryAlarm = async (queryParams) => {
const response = await SendRequest({
method: 'get',
prefix: `history/alarm?${queryParams.toString()}`,
});
return response.data;
};
const getAllHistoryEvent = async (queryParams) => {
const response = await SendRequest({
method: 'get',
prefix: `history/event?${queryParams.toString()}`,
});
return response.data;
};
const getAllHistoryValueReport = async (queryParams) => {
const response = await SendRequest({
method: 'get',
prefix: `history/value-report?${queryParams.toString()}`,
});
return response.data;
};
const getAllHistoryValueReportPivot = async (queryParams) => {
const response = await SendRequest({
method: 'get',
prefix: `history/value-report-pivot?${queryParams.toString()}`,
});
return response.data;
};
const getAllHistoryValueTrendingPivot = async (queryParams) => {
const response = await SendRequest({
method: 'get',
prefix: `history/value-trending?${queryParams.toString()}`,
});
return response.data;
};
export {
getAllHistoryAlarm,
getAllHistoryEvent,
getAllHistoryValueReport,
getAllHistoryValueReportPivot,
getAllHistoryValueTrendingPivot,
};

20
src/components/Global/CardList.jsx
View File

@@ -57,22 +57,28 @@ const CardList = ({
}
style={getCardStyle(fieldColor ? item[fieldColor] : cardColor)}
actions={[
<EyeOutlined
showPreviewModal && (
<EyeOutlined
style={{ color: '#1890ff' }}
key="preview"
onClick={() => showPreviewModal(item)}
/>,
<EditOutlined
/>
),
showEditModal && (
<EditOutlined
style={{ color: '#faad14' }}
key="edit"
onClick={() => showEditModal(item)}
/>,
<DeleteOutlined
/>
),
showDeleteDialog && (
<DeleteOutlined
style={{ color: '#ff1818' }}
key="delete"
onClick={() => showDeleteDialog(item)}
/>,
]}
/>
),
].filter(Boolean)} // <== Hapus elemen yang undefined
>
<div style={{ textAlign: 'left' }}>
{column.map((itemCard, index) => (

17
src/components/Global/TableList.jsx
View File

@@ -1,6 +1,6 @@
import React, { memo, useState, useEffect, useRef } from 'react';
import { Table, Pagination, Row, Col, Card, Grid, Button, Typography, Tag, Segmented } from 'antd';
import { AppstoreOutlined, TableOutlined } from '@ant-design/icons';
import { MacCommandOutlined, TableOutlined } from '@ant-design/icons';
import CardList from './CardList';
const { Text } = Typography;
@@ -18,6 +18,7 @@ const TableList = memo(function TableList({
showDeleteDialog,
cardColor,
fieldColor,
firstLoad = true,
}) {
const [gridLoading, setGridLoading] = useState(false);
@@ -30,12 +31,19 @@ const TableList = memo(function TableList({
total_page: 1,
});
const [viewMode, setViewMode] = useState('list');
const [viewMode, setViewMode] = useState('table');
const { useBreakpoint } = Grid;
const [renderCount, setRenderCount] = useState(firstLoad ? 1 : 0);
useEffect(() => {
filter(1, pagination.current_limit);
if (renderCount < 1) {
setRenderCount(renderCount + 1);
return;
} else {
filter(1, pagination.current_limit);
}
}, [triger]);
const filter = async (currentPage, pageSize) => {
@@ -90,8 +98,8 @@ const TableList = memo(function TableList({
<div>
<Segmented
options={[
{ value: 'card', icon: <AppstoreOutlined /> },
{ value: 'table', icon: <TableOutlined /> },
{ value: 'card', icon: <MacCommandOutlined /> },
]}
value={viewMode}
onChange={setViewMode}
@@ -116,6 +124,7 @@ const TableList = memo(function TableList({
pagination={false}
loading={gridLoading}
scroll={{ y: 520 }}
size="small"
/>
</Row>
)}

60
src/pages/history/alarm/component/ListHistoryAlarm.jsx
View File

@@ -2,6 +2,7 @@ import React, { memo, useState, useEffect } from 'react';
import { Button, Row, Col, Card, Input } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import TableList from '../../../../components/Global/TableList';
import { getAllHistoryAlarm } from '../../../../api/history-value';
const ListHistoryAlarm = memo(function ListHistoryAlarm(props) {
const columns = [
@@ -16,7 +17,8 @@ const ListHistoryAlarm = memo(function ListHistoryAlarm(props) {
title: 'Datetime',
dataIndex: 'datetime',
key: 'datetime',
width: '10%',
width: '15%',
// render: (_, record) => toAppDateTimezoneFormatter(record.datetime),
},
{
title: 'Tag Name',
@@ -26,50 +28,78 @@ const ListHistoryAlarm = memo(function ListHistoryAlarm(props) {
},
{
title: 'Value',
dataIndex: 'stat',
key: 'stat',
dataIndex: 'new_val',
key: 'new_val',
width: '10%',
render: (_, record) => Number(record.new_val).toFixed(4),
},
{
title: 'Threshold',
dataIndex: 'threshold',
key: 'threshold',
width: '10%',
render: (_, record) => {
switch (record.status) {
case 1:
return (
<span>
{record.lim_low + 1} : {record.lim_high - 1}
</span>
);
case 2:
return <span>{`< ${record.lim_low_crash}`}</span>;
case 3:
return (
<span>
{record.lim_low_crash + 1} : {record.lim_low - 1}
</span>
);
case 4:
return (
<span>
{record.lim_high + 1} : {record.lim_high_crash - 1}
</span>
);
case 5:
return <span>{`> ${record.lim_high_crash}`}</span>;
default:
return <span>Undefined</span>;
}
},
},
{
title: 'Condition',
dataIndex: 'condition',
key: 'condition',
width: '20%',
render: (_, record) => (
<Button type="text" style={{ backgroundColor: record.status_color, width: '100%' }}>
{record.condition}
</Button>
),
},
{
title: 'Stat',
dataIndex: 'stat',
key: 'stat',
dataIndex: 'status',
key: 'status',
width: '5%',
},
];
const [trigerFilter, setTrigerFilter] = useState(false);
const defaultFilter = { search: '' };
const defaultFilter = { criteria: '' };
const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
const [searchValue, setSearchValue] = useState('');
const getAllEventAlarm = async (params) => {
return {
data: [],
};
};
const handleSearch = () => {
setFormDataFilter({ search: searchValue });
setFormDataFilter({ criteria: searchValue });
setTrigerFilter((prev) => !prev);
};
const handleSearchClear = () => {
setSearchValue('');
setFormDataFilter({ search: '' });
setFormDataFilter({ criteria: '' });
setTrigerFilter((prev) => !prev);
};
@@ -113,7 +143,7 @@ const ListHistoryAlarm = memo(function ListHistoryAlarm(props) {
</Col>
<Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
<TableList
getData={getAllEventAlarm}
getData={getAllHistoryAlarm}
queryParams={formDataFilter}
columns={columns}
triger={trigerFilter}

39
src/pages/history/event/component/ListHistoryEvent.jsx
View File

@@ -2,6 +2,7 @@ import React, { memo, useState, useEffect } from 'react';
import { Button, Row, Col, Card, Input } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import TableList from '../../../../components/Global/TableList';
import { getAllHistoryEvent } from '../../../../api/history-value';
const ListHistoryEvent = memo(function ListHistoryEvent(props) {
const columns = [
@@ -16,7 +17,8 @@ const ListHistoryEvent = memo(function ListHistoryEvent(props) {
title: 'Datetime',
dataIndex: 'datetime',
key: 'datetime',
width: '10%',
width: '15%',
// render: (_, record) => toAppDateTimezoneFormatter(record.datetime),
},
{
title: 'Tag Name',
@@ -25,39 +27,38 @@ const ListHistoryEvent = memo(function ListHistoryEvent(props) {
width: '40%',
},
{
title: 'Stat',
dataIndex: 'stat',
key: 'stat',
width: '5%',
title: 'Description',
dataIndex: 'condition',
key: 'condition',
width: '20%',
render: (_, record) => (
<Button type="text" style={{ backgroundColor: record.status_color, width: '100%' }}>
{record.condition}
</Button>
),
},
{
title: 'Description',
dataIndex: 'description',
key: 'description',
width: '15%',
title: 'Stat',
dataIndex: 'status',
key: 'status',
width: '5%',
},
];
const [trigerFilter, setTrigerFilter] = useState(false);
const defaultFilter = { search: '' };
const defaultFilter = { criteria: '' };
const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
const [searchValue, setSearchValue] = useState('');
const getAllEventAlarm = async (params) => {
return {
data: [],
};
};
const handleSearch = () => {
setFormDataFilter({ search: searchValue });
setFormDataFilter({ criteria: searchValue });
setTrigerFilter((prev) => !prev);
};
const handleSearchClear = () => {
setSearchValue('');
setFormDataFilter({ search: '' });
setFormDataFilter({ criteria: '' });
setTrigerFilter((prev) => !prev);
};
@@ -101,7 +102,7 @@ const ListHistoryEvent = memo(function ListHistoryEvent(props) {
</Col>
<Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
<TableList
getData={getAllEventAlarm}
getData={getAllHistoryEvent}
queryParams={formDataFilter}
columns={columns}
triger={trigerFilter}

115
src/pages/report/report/component/ListReport.jsx
View File

@@ -3,6 +3,8 @@ import { Button, Row, Col, Card, Input, DatePicker, Select, Typography } from 'a
import TableList from '../../../../components/Global/TableList';
import dayjs from 'dayjs';
import { FileTextOutlined } from '@ant-design/icons';
import { getAllHistoryValueReport } from '../../../../api/history-value';
import { getAllPlantSection } from '../../../../api/master-plant-section';
const { Text } = Typography;
@@ -19,7 +21,7 @@ const ListReport = memo(function ListReport(props) {
title: 'Datetime',
dataIndex: 'datetime',
key: 'datetime',
width: '10%',
width: '15%',
},
{
title: 'Tag Name',
@@ -32,38 +34,73 @@ const ListReport = memo(function ListReport(props) {
dataIndex: 'val',
key: 'val',
width: '10%',
render: (_, record) => Number(record.val).toFixed(4),
},
{
title: 'Stat',
dataIndex: 'stat',
key: 'stat',
dataIndex: 'status',
key: 'status',
width: '10%',
},
];
const dateNow = dayjs();
const dateNowFormated = dateNow.format('YYYY-MM-DD');
const [trigerFilter, setTrigerFilter] = useState(false);
const defaultFilter = { search: '' };
const defaultFilter = {
criteria: '',
plant_sub_section_id: 0,
from: dateNowFormated,
to: dateNowFormated,
interval: 10,
};
const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
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('10 Menit');
const [plantSubSection, setPlantSubSection] = useState(0);
const [plantSubSectionList, setPlantSubSectionList] = useState([]);
const [startDate, setStartDate] = useState(dateNow);
const [endDate, setEndDate] = useState(dateNow);
const [periode, setPeriode] = useState(5);
const getAllReport = async (params) => {
return {
data: [],
};
const handleSearch = () => {
const formattedDateStart = startDate.format('YYYY-MM-DD');
const formattedDateEnd = endDate.format('YYYY-MM-DD');
setFormDataFilter({
criteria: '',
plant_sub_section_id: plantSubSection,
from: formattedDateStart,
to: formattedDateEnd,
interval: periode,
});
setTrigerFilter((prev) => !prev);
};
const handleReset = () => {
setPlantSubSection('Semua Plant');
setStartDate(dayjs('2025-09-30'));
setEndDate(dayjs('2025-10-09'));
setPeriode('10 Menit');
setPlantSubSection(0);
setStartDate(dateNow);
setEndDate(dateNow);
setPeriode(5);
};
const getPlantSubSection = async () => {
const params = new URLSearchParams({ page: 1 });
const response = await getAllPlantSection(params);
if (response && response.data) {
const activePlantSubSections = response.data.filter(
(section) => section.is_active === true
);
setPlantSubSectionList(activePlantSubSections);
}
};
useEffect(() => {
getPlantSubSection();
}, []);
return (
<React.Fragment>
<Card>
@@ -77,14 +114,21 @@ const ListReport = memo(function ListReport(props) {
</Text>
<Select
value={plantSubSection}
onChange={setPlantSubSection}
onChange={(value) => setPlantSubSection(value)}
style={{ width: '100%', marginTop: '4px' }}
options={[
{ value: 'Semua Plant', label: 'Semua Plant' },
{ value: 'Plant 1', label: 'Plant 1' },
{ value: 'Plant 2', label: 'Plant 2' },
]}
/>
>
<Select.Option key={0} value={0}>
Pilih Plant Sub Section
</Select.Option>
{plantSubSectionList.map((item) => (
<Select.Option
key={item.plant_sub_section_id}
value={item.plant_sub_section_id}
>
{item.plant_sub_section_name}
</Select.Option>
))}
</Select>
</div>
</Col>
<Col xs={24} sm={12} md={6}>
@@ -95,7 +139,7 @@ const ListReport = memo(function ListReport(props) {
<DatePicker
value={startDate}
onChange={setStartDate}
format="DD/MM/YYYY"
format="DD-MM-YYYY"
style={{ width: '100%', marginTop: '4px' }}
/>
</div>
@@ -108,7 +152,7 @@ const ListReport = memo(function ListReport(props) {
<DatePicker
value={endDate}
onChange={setEndDate}
format="DD/MM/YYYY"
format="DD-MM-YYYY"
style={{ width: '100%', marginTop: '4px' }}
/>
</div>
@@ -121,18 +165,24 @@ const ListReport = memo(function ListReport(props) {
onChange={setPeriode}
style={{ width: '100%', marginTop: '4px' }}
options={[
{ value: '5 Menit', label: '5 Menit' },
{ value: '10 Menit', label: '10 Menit' },
{ value: '30 Menit', label: '30 Menit' },
{ value: '1 Jam', label: '1 Jam' },
{ value: 5, label: '5 Minute' },
{ value: 10, label: '10 Minute' },
{ value: 30, label: '30 Minute' },
{ value: 60, label: '1 Hour' },
{ value: 120, label: '2 Hour' },
]}
/>
></Select>
</div>
</Col>
</Row>
<Row gutter={8} style={{ marginTop: '16px' }}>
<Col>
<Button type="primary" danger icon={<FileTextOutlined />}>
<Button
type="primary"
danger
icon={<FileTextOutlined />}
onClick={handleSearch}
>
Tampilkan
</Button>
</Col>
@@ -148,7 +198,8 @@ const ListReport = memo(function ListReport(props) {
</Col>
<Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
<TableList
getData={getAllReport}
firstLoad={false}
getData={getAllHistoryValueReport}
queryParams={formDataFilter}
columns={columns}
triger={trigerFilter}

1
src/pages/report/trending/IndexTrending.jsx
View File

@@ -9,7 +9,6 @@ const { Text } = Typography;
const IndexTrending = memo(function IndexTrending() {
const navigate = useNavigate();
const { setBreadcrumbItems } = useBreadcrumb();
const [selectedData, setSelectedData] = useState(null);
useEffect(() => {
const token = localStorage.getItem('token');

325
src/pages/report/trending/ReportTrending.jsx
View File

@@ -4,75 +4,94 @@ import dayjs from 'dayjs';
import { FileTextOutlined } from '@ant-design/icons';
import { ResponsiveLine } from '@nivo/line';
import './trending.css';
import { getAllPlantSection } from '../../../api/master-plant-section';
import { getAllHistoryValueTrendingPivot } from '../../../api/history-value';
const { Text } = Typography;
const tagTrendingData = [
{
id: 'TEMP_SENSOR_1',
color: '#FF6B4A',
data: [
{ 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: 'GAS_LEAK_SENSOR_1',
color: '#4ECDC4',
data: [
{ 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: 'PRESSURE_SENSOR_1',
color: '#FFE66D',
data: [
{ 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 ReportTrending = memo(function ReportTrending(props) {
const [trigerFilter, setTrigerFilter] = useState(false);
const dateNow = dayjs();
const dateNowFormated = dateNow.format('YYYY-MM-DD');
const defaultFilter = { search: '' };
const [plantSubSection, setPlantSubSection] = useState(0);
const [plantSubSectionList, setPlantSubSectionList] = useState([]);
const [startDate, setStartDate] = useState(dateNow);
const [endDate, setEndDate] = useState(dateNow);
const [periode, setPeriode] = useState(60);
const defaultFilter = {
criteria: '',
plant_sub_section_id: plantSubSection,
from: dateNowFormated,
to: dateNowFormated,
interval: periode,
};
const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
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('10 Menit');
const [trendingValue, setTrendingValue] = useState([]);
const getAllReport = async (params) => {
return {
data: [],
const handleSearch = async () => {
const formattedDateStart = startDate.format('YYYY-MM-DD');
const formattedDateEnd = endDate.format('YYYY-MM-DD');
const newFilter = {
criteria: '',
plant_sub_section_id: plantSubSection,
from: formattedDateStart,
to: formattedDateEnd,
interval: periode,
};
setFormDataFilter(newFilter);
const param = new URLSearchParams(newFilter);
const response = await getAllHistoryValueTrendingPivot(param);
if (response?.data?.length > 0) {
// 🔹 Bersihkan dan format data agar aman untuk Nivo
const cleanedData = response.data.map((serie) => ({
id: serie.id ?? 'Unknown',
data: Array.isArray(serie.data)
? serie.data.map((d) => ({
x: d?.x ?? null,
y:
d?.y !== null && d?.y !== undefined
? Number(d.y).toFixed(4) // format 4 angka di belakang koma
: null,
}))
: [],
}));
// setTrendingValue(cleanedData);
} else {
// 🔹 Jika tidak ada data dari API
// setTrendingValue([]);
}
};
const handleReset = () => {
setPlantSubSection('Semua Plant');
setStartDate(dayjs('2025-09-30'));
setEndDate(dayjs('2025-10-09'));
setPeriode('10 Menit');
setPlantSubSection(0);
setStartDate(dateNow);
setEndDate(dateNow);
setPeriode(5);
};
const getPlantSubSection = async () => {
const params = new URLSearchParams({ page: 1 });
const response = await getAllPlantSection(params);
if (response && response.data) {
const activePlantSubSections = response.data.filter(
(section) => section.is_active === true
);
setPlantSubSectionList(activePlantSubSections);
}
};
useEffect(() => {
getPlantSubSection();
}, []);
return (
<React.Fragment>
<Card>
@@ -86,14 +105,21 @@ const ReportTrending = memo(function ReportTrending(props) {
</Text>
<Select
value={plantSubSection}
onChange={setPlantSubSection}
onChange={(value) => setPlantSubSection(value)}
style={{ width: '100%', marginTop: '4px' }}
options={[
{ value: 'Semua Plant', label: 'Semua Plant' },
{ value: 'Plant 1', label: 'Plant 1' },
{ value: 'Plant 2', label: 'Plant 2' },
]}
/>
>
<Select.Option key={0} value={0}>
Pilih Plant Sub Section
</Select.Option>
{plantSubSectionList.map((item) => (
<Select.Option
key={item.plant_sub_section_id}
value={item.plant_sub_section_id}
>
{item.plant_sub_section_name}
</Select.Option>
))}
</Select>
</div>
</Col>
<Col xs={24} sm={12} md={6}>
@@ -104,7 +130,7 @@ const ReportTrending = memo(function ReportTrending(props) {
<DatePicker
value={startDate}
onChange={setStartDate}
format="DD/MM/YYYY"
format="DD-MM-YYYY"
style={{ width: '100%', marginTop: '4px' }}
/>
</div>
@@ -117,7 +143,7 @@ const ReportTrending = memo(function ReportTrending(props) {
<DatePicker
value={endDate}
onChange={setEndDate}
format="DD/MM/YYYY"
format="DD-MM-YYYY"
style={{ width: '100%', marginTop: '4px' }}
/>
</div>
@@ -130,18 +156,24 @@ const ReportTrending = memo(function ReportTrending(props) {
onChange={setPeriode}
style={{ width: '100%', marginTop: '4px' }}
options={[
{ value: '5 Menit', label: '5 Menit' },
{ value: '10 Menit', label: '10 Menit' },
{ value: '30 Menit', label: '30 Menit' },
{ value: '1 Jam', label: '1 Jam' },
{ value: 5, label: '5 Minute' },
{ value: 10, label: '10 Minute' },
{ value: 30, label: '30 Minute' },
{ value: 60, label: '1 Hour' },
{ value: 120, label: '2 Hour' },
]}
/>
></Select>
</div>
</Col>
</Row>
<Row gutter={8} style={{ marginTop: '16px' }}>
<Col>
<Button type="primary" danger icon={<FileTextOutlined />}>
<Button
type="primary"
danger
icon={<FileTextOutlined />}
onClick={handleSearch}
>
Tampilkan
</Button>
</Col>
@@ -157,60 +189,105 @@ const ReportTrending = memo(function ReportTrending(props) {
</Col>
<Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
<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',
},
]}
/>
{trendingValue && trendingValue.length > 0 ? (
<ResponsiveLine
data={trendingValue} // [{ id, data: [{x, y}] }]
// data={
// trendingValue && trendingValue.length
// ? trendingValue
// : [{ id, data: [{ x, y }] }]
// }
margin={{ top: 40, right: 100, bottom: 70, left: 70 }}
xScale={{
type: 'time',
format: '%Y-%m-%d %H:%M',
useUTC: false,
precision: 'minute',
}}
xFormat="time:%Y-%m-%d %H:%M"
yScale={{
type: 'linear',
min: 'auto',
max: 'auto',
stacked: false,
reverse: false,
}}
yFormat={(value) => Number(value).toFixed(4)} // ✅ format 4 angka di belakang koma
axisBottom={{
format: '%Y-%m-%d %H:%M', // ✅ tampilkan tanggal + jam
tickValues: 'every 2 hours', // tampilkan setiap 2 jam (bisa ubah ke every 30 minutes)
tickSize: 5,
tickPadding: 5,
tickRotation: -45,
legend: 'Tanggal & Waktu',
legendOffset: 60,
legendPosition: 'middle',
}}
axisLeft={{
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: 'Nilai (Avg)',
legendOffset: -60,
legendPosition: 'middle',
format: (value) => Number(value).toFixed(4), // ✅ tampilkan 4 angka di sumbu Y
}}
curve="monotoneX"
colors={{ scheme: 'category10' }}
pointSize={6}
pointColor={{ theme: 'background' }}
pointBorderWidth={2}
pointBorderColor={{ from: 'serieColor' }}
enablePointLabel={false}
enableGridX={true}
enableGridY={true}
useMesh={true}
tooltip={({ point }) => (
<div
style={{
background: 'white',
padding: '6px 9px',
border: '1px solid #ccc',
borderRadius: '6px',
}}
>
<strong>{point.serieId}</strong>
<br />
{point.data.xFormatted}
<br />
<span style={{ color: point.serieColor }}>
{Number(point.data.y).toFixed(4)}
</span>
</div>
)}
legends={[
{
anchor: 'bottom-right',
direction: 'column',
justify: false,
translateX: 100,
translateY: 0,
itemsSpacing: 2,
itemDirection: 'left-to-right',
itemWidth: 120,
itemHeight: 20,
itemOpacity: 0.85,
symbolSize: 12,
symbolShape: 'circle',
},
]}
/>
) : (
<div
style={{
textAlign: 'center',
marginTop: '40px',
color: '#999',
}}
>
Tidak ada data untuk ditampilkan
</div>
)}
</div>
</Col>
</Row>