Merge pull request #23 from catenax-ng/feature/DCMFOSS-75

Added Chronogram and Demand View Table - 75

demand-capacity-mgmt-backend/src/main/java/org/eclipse/tractusx/demandcapacitymgmt/demandcapacitymgmtbackend/services/impl/CapacityGroupServiceImpl.java

@@ -1,4 +1,4 @@
-/*
+    /*
  *  *******************************************************************************
  *  Copyright (c) 2023 BMW AG
  *  Copyright (c) 2023 Contributors to the Eclipse Foundation
@@ -324,13 +324,9 @@ private UnitMeasure enrichUnitMeasure(UnitMeasureEntity unitMeasureEntity) {
     private CapacityRequest convertCapacityTimeSeries(CapacityTimeSeries capacityTimeSeries) {
         CapacityRequest capacityRequest = new CapacityRequest();
 
-        capacityRequest.setActualCapacity(new BigDecimal(capacityTimeSeries.getActualCapacity()));
-        capacityRequest.setMaximumCapacity(new BigDecimal(capacityTimeSeries.getMaximumCapacity()));
-
-        DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyy-MM-dd");
-        String formattedDate = capacityTimeSeries.getCalendarWeek().format(formatter);
-
-        capacityRequest.setCalendarWeek(formattedDate);
+        capacityRequest.setActualCapacity(BigDecimal.valueOf(capacityTimeSeries.getActualCapacity()));
+        capacityRequest.setMaximumCapacity(BigDecimal.valueOf(capacityTimeSeries.getMaximumCapacity()));
+        capacityRequest.setCalendarWeek(capacityTimeSeries.getCalendarWeek().toString());
 
         return capacityRequest;
     }

demand-capacity-mgmt-backend/src/main/java/org/eclipse/tractusx/demandcapacitymgmt/demandcapacitymgmtbackend/services/impl/FavoriteServiceImpl.java

@@ -66,9 +66,9 @@ public FavoriteResponse createFavorite(FavoriteRequest favoriteRequest) {
     @Override
     public FavoriteResponse updateFavorite(UUID id, FavoriteType type, FavoriteRequest favoriteRequest) {
         FavoriteEntity entity = favoriteRepository.findByFavoriteIdAndTypeAndId(
-            id,
-            type,
-            UUID.fromString("8842f835-38e9-42b1-8c07-fb310b90ef3a")
+                id,
+                type,
+                UUID.fromString("8842f835-38e9-42b1-8c07-fb310b90ef3a")
         ); //TODO FETCH USER ID TO UPDATE OPERATION
 
         if (entity != null) {
@@ -100,10 +100,10 @@ private FavoriteResponse convertFavoriteResponse(FavoriteEntity request) {
 
     private FavoriteEntity generateFavoriteEntity(FavoriteRequest request) {
         return FavoriteEntity
-            .builder()
-            .id(UUID.randomUUID()) //TODO USER ID HERE
-            .favoriteId(UUID.fromString(request.getFavoriteId()))
-            .type(FavoriteType.valueOf(request.getfType()))
-            .build();
+                .builder()
+                .id(UUID.randomUUID()) //TODO USER ID HERE
+                .favoriteId(UUID.fromString(request.getFavoriteId()))
+                .type(FavoriteType.valueOf(request.getfType()))
+                .build();
     }
-}
+}

demand-capacity-mgmt-frontend/src/components/capacitygroup/CapacityGroupChronogram.tsx

@@ -27,9 +27,11 @@ import {
     YAxis,
     CartesianGrid,
     Tooltip,
-    Legend, Brush
+    Legend,
+    Brush, ReferenceArea, BarChart
 } from "recharts";
 import {SingleCapacityGroup} from "../../interfaces/capacitygroup_interfaces";
+import {useEffect, useRef, useState} from "react";
 
 type CapacityGroupChronogramProps = {
     capacityGroup: SingleCapacityGroup | null | undefined;
@@ -38,10 +40,18 @@ type CapacityGroupChronogramProps = {
 const computeLinkedDemandSum = (capacityGroup: SingleCapacityGroup | null | undefined) => {
     if (!capacityGroup || !capacityGroup.linkedDemandSeries) return 0;
 
+
     return capacityGroup.linkedDemandSeries.length;
 };
 
 function CapacityGroupChronogram(props: CapacityGroupChronogramProps) {
+
+    type SelectedRangeType = {
+        start: string | null;
+        end: string | null;
+    };
+
+
     const { capacityGroup } = props;
 
     const rawCapacities = capacityGroup?.capacities || [];
@@ -51,11 +61,18 @@ function CapacityGroupChronogram(props: CapacityGroupChronogramProps) {
 
 
     // Sorted data by date
-    const data = rawCapacities.map(d => ({
-        ...d,
-        Demand: linkedDemandSum,
-        dateEpoch: new Date(d.calendarWeek).getTime()
-    })).sort((a, b) => a.dateEpoch - b.dateEpoch);
+// Sorted data by date
+    const data = rawCapacities.map(d => {
+        // Convert to Date and back to simplified string format
+        const simplifiedDate = new Date(d.calendarWeek).toISOString().split('T')[0];
+
+        return {
+            ...d,
+            Demand: linkedDemandSum,
+            dateEpoch: new Date(simplifiedDate).getTime(),
+            calendarWeek: simplifiedDate
+        };
+    }).sort((a, b) => a.dateEpoch - b.dateEpoch);
 
     const getWeekNumber = (d: Date) => {
         d = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
@@ -106,8 +123,37 @@ function CapacityGroupChronogram(props: CapacityGroupChronogramProps) {
     };
 
 
+    const [selectedRange, setSelectedRange] = useState<SelectedRangeType>({ start: null, end: null });
+    type BrushStartEndIndex = {
+        startIndex?: number;
+        endIndex?:number;
+    };
+
+    const timer = useRef(2000);
+    const brushIndexesRef = useRef<BrushStartEndIndex | null>(null);
+
+    const handleBrushChange = (newIndex: BrushStartEndIndex) => {
+        if (typeof newIndex.startIndex === 'number' && typeof newIndex.endIndex === 'number') {
+            brushIndexesRef.current = newIndex;
+        }
+    };
+
+
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            if (brushIndexesRef.current?.startIndex !== undefined && brushIndexesRef.current?.endIndex !== undefined) {
+                const start = data[brushIndexesRef.current.startIndex].calendarWeek;
+                const end = data[brushIndexesRef.current.endIndex].calendarWeek;
+                setSelectedRange({ start, end });
+            }
+        }, timer.current);
+
+        return () => clearInterval(interval);
+    }, [data]);
 
     return (
+        <div>
         <ComposedChart
             width={1300}
             height={500}
@@ -147,8 +193,41 @@ function CapacityGroupChronogram(props: CapacityGroupChronogramProps) {
             <Bar dataKey="Demand" barSize={20} fill="#413ea0"/>
             <Line type="monotone" dataKey="actualCapacity" stroke="#ff7300"/>
             <Line type="monotone" dataKey="maximumCapacity"  stroke="#8884d8"/>
-            <Brush y={450} dataKey="calendarWeek" height={20} stroke="#8884d8" />
+            <Brush
+                y={450}
+                dataKey="calendarWeek"
+                height={20}
+                stroke="#8884d8"
+                onChange={handleBrushChange}
+                startIndex={brushIndexesRef.current?.startIndex}
+                endIndex={brushIndexesRef.current?.endIndex}
+            />
+
+
         </ComposedChart>
+
+            {/* Mini preview AreaChart */}
+            <BarChart
+                width={1300}
+                height={100}  // Adjust height as needed
+                data={data}
+                margin={{
+                    top: 5,
+                    right: 80,
+                    bottom: 20,
+                    left: 20
+                }}
+            >
+                <CartesianGrid />
+                <XAxis dataKey="calendarWeek" hide={true} />
+                <Bar type="monotone" dataKey="Demand" fill="#8884d8" stroke="#8884d8" />
+
+                {/* Highlighted area based on the brush selection from the main graph */}
+                {selectedRange.start && selectedRange.end && (
+                    <ReferenceArea x1={selectedRange.start} x2={selectedRange.end} fill="rgba(255,0,0,0.2)" />
+                )}
+            </BarChart>
+        </div>
     );
 }
 

demand-capacity-mgmt-frontend/src/components/capacitygroup/CapacityGroupSumView.tsx

@@ -258,9 +258,6 @@ const CapacityGroupSumView: React.FC<WeeklyViewProps> = () => {
   const totalWeeksCurrentYear = monthsCurrentYear.reduce((total, month) => total + month.weeks.length, 0);
   const totalWeeksNextYear = monthsNextYear.reduce((total, month) => total + month.weeks.length, 0);
 
-  // Object to store the demand values based on year, month, and week
-  type DemandValuesMap = Record<string, Record<number, Record<string, number>>>;
-  let [demandValuesMap] = useState<DemandValuesMap>({});
 
   //Mapping of categories
   const idToNumericIdMap: Record<string, number> = {};
@@ -271,7 +268,6 @@ const CapacityGroupSumView: React.FC<WeeklyViewProps> = () => {
     });
   }
 
-  console.log(demandValuesMap);
 
   // Track which Demand.description rows are expanded
   const [expandedDemandRows, setExpandedDemandRows] = useState<Record<string, boolean>>({});

demand-capacity-mgmt-frontend/src/components/capacitygroup/CapacityGroupsView.tsx

@@ -23,9 +23,9 @@
 import React, { useContext, useState, useMemo } from 'react';
 import { Form, Col, Row, Button, OverlayTrigger, Tooltip,Dropdown  } from 'react-bootstrap';
 import { CapacityGroupContext } from '../../contexts/CapacityGroupsContextProvider';
-import Pagination from '../Pagination';
+import Pagination from '../common/Pagination';
 import CapacityGroupsTable from './CapacityGroupsTable';
-import Search from '../Search';
+import Search from '../common/Search';
 import '../../index.css';
 import { FaCopy, FaEllipsisV, FaSearch } from 'react-icons/fa';
 

demand-capacity-mgmt-frontend/src/components/CapacityGroupDetails.tsx → demand-capacity-mgmt-frontend/src/components/common/CapacityGroupDetails.tsx

@@ -20,8 +20,8 @@
  *    ********************************************************************************
  */
 
-import CapacityGroupsList from "./capacitygroup/CapacityGroupsView";
-import CapacityGroupContext from "../contexts/CapacityGroupsContextProvider";
+import CapacityGroupsList from "../capacitygroup/CapacityGroupsView";
+import CapacityGroupContext from "../../contexts/CapacityGroupsContextProvider";
 
 function CapacityGroupDetails() {
 

demand-capacity-mgmt-frontend/src/components/CompanyOptions.tsx → demand-capacity-mgmt-frontend/src/components/common/CompanyOptions.tsx

@@ -21,7 +21,7 @@
  */
 
 import React, { useContext } from 'react';
-import { CompanyContext } from '../contexts/CompanyContextProvider';
+import { CompanyContext } from '../../contexts/CompanyContextProvider';
 
 interface CompanyOptionsProps {
   selectedCompanyName: string;

demand-capacity-mgmt-frontend/src/components/QuickAcessItems.tsx → demand-capacity-mgmt-frontend/src/components/common/QuickAcessItems.tsx

@@ -23,9 +23,9 @@ import { FaChartLine, FaLink } from 'react-icons/fa';
 import { FcComboChart } from 'react-icons/fc';
 import { Modal, Button } from 'react-bootstrap';
 import { useState } from 'react';
-import DemandsPage from './demands/DemandPage';
-import DemandContextProvider from '../contexts/DemandContextProvider';
-import '../index.css';
+import DemandsPage from '../demands/DemandPage';
+import DemandContextProvider from '../../contexts/DemandContextProvider';
+import '../../index.css';
 
 function QuickAcessItems() {
 

demand-capacity-mgmt-frontend/src/components/TopMenu.tsx → demand-capacity-mgmt-frontend/src/components/common/TopMenu.tsx

@@ -24,7 +24,7 @@ import Container from 'react-bootstrap/Container';
 import Nav from 'react-bootstrap/Nav';
 import Navbar from 'react-bootstrap/Navbar';
 import { FiSettings,FiLogOut } from 'react-icons/fi';
-import InfoMenu from "./menu/InfoMenu";
+import InfoMenu from "../menu/InfoMenu";
 
 
 function TopMenuLinks() {

demand-capacity-mgmt-frontend/src/components/UnitsofMeasureOptions.tsx → demand-capacity-mgmt-frontend/src/components/common/UnitsofMeasureOptions.tsx

@@ -21,7 +21,7 @@
  */
 
 import React, { useContext } from 'react';
-import { UnitsofMeasureContext } from '../contexts/UnitsOfMeasureContextProvider';
+import { UnitsofMeasureContext } from '../../contexts/UnitsOfMeasureContextProvider';
 
 interface UnitsOfMeasureOptionsProps {
   selectedUnitMeasureId: string;

demand-capacity-mgmt-frontend/src/components/demands/DemandAddForm.tsx

@@ -26,9 +26,9 @@ import { DemandContext } from '../../contexts/DemandContextProvider';
 import DemandCategoryContextProvider from '../../contexts/DemandCategoryProvider';
 import DemandCategoryOptions from './DemandCategoryOptions';
 import CompanyContextProvider from '../../contexts/CompanyContextProvider';
-import CompanyOptions from '../CompanyOptions';
+import CompanyOptions from '../common/CompanyOptions';
 import UnitsofMeasureContextContextProvider from '../../contexts/UnitsOfMeasureContextProvider';
-import UnitsOfMeasureOptions from '../UnitsofMeasureOptions';
+import UnitsOfMeasureOptions from '../common/UnitsofMeasureOptions';
 import { Demand } from '../../interfaces/demand_interfaces';
 import '../../App.css';
 

demand-capacity-mgmt-frontend/src/components/demands/DemandEditForm.tsx

@@ -23,8 +23,8 @@ import React, { useContext, useState, useEffect } from 'react';
 import { Form, Button, Col, Row } from 'react-bootstrap';
 import { DemandContext } from '../../contexts/DemandContextProvider';
 import { Demand, DemandSeriesValue, DemandProp, DemandSeries } from '../../interfaces/demand_interfaces';
-import CompanyOptions from '../CompanyOptions';
-import UnitsOfMeasureOptions from '../UnitsofMeasureOptions';
+import CompanyOptions from '../common/CompanyOptions';
+import UnitsOfMeasureOptions from '../common/UnitsofMeasureOptions';
 import Spinner from 'react-bootstrap/Spinner';
 import { FiSave } from 'react-icons/fi';
 

demand-capacity-mgmt-frontend/src/components/demands/DemandPage.tsx

@@ -23,17 +23,17 @@
 import React, { useContext, useState, useMemo, useCallback } from 'react';
 import { Modal, Button, Form, Col, Row, Breadcrumb, Dropdown } from 'react-bootstrap';
 import { DemandProp, DemandSeries, DemandSeriesValue } from '../../interfaces/demand_interfaces';
-import Pagination from '../Pagination';
+import Pagination from '../common/Pagination';
 import DemandsTable from './DemandsTable';
-import DemandsSearch from '../Search';
+import DemandsSearch from '../common/Search';
 import EditForm from './DemandEditForm';
 import { FaEllipsisV, FaSearch} from 'react-icons/fa';
 import AddForm from './DemandAddForm';
 import { DemandContext } from '../../contexts/DemandContextProvider';
 import UnitsofMeasureContextContextProvider from '../../contexts/UnitsOfMeasureContextProvider';
 import DemandCategoryContextProvider from '../../contexts/DemandCategoryProvider';
 import CompanyContextProvider from '../../contexts/CompanyContextProvider';
-import WeeklyView from '../WeeklyView';
+import WeeklyView from './DemandsOverview';
 
 const DemandsPage: React.FC = () => {
   const [showEditModal, setIsEditModalOpen] = useState(false);

demand-capacity-mgmt-frontend/src/components/WeeklyView.tsx → demand-capacity-mgmt-frontend/src/components/demands/DemandsOverview.tsx

@@ -21,11 +21,11 @@
  */
 
 import React, { useContext, useState, useEffect } from 'react';
-import '../../src/index.css';
-import { DemandCategoryContext } from '../contexts/DemandCategoryProvider';
-import { Demand, DemandCategory, DemandProp, DemandSeriesValue, MaterialDemandSery } from '../interfaces/demand_interfaces';
+import '../../index.css';
+import { DemandCategoryContext } from '../../contexts/DemandCategoryProvider';
+import { Demand, DemandCategory, DemandProp, DemandSeriesValue, MaterialDemandSery } from '../../interfaces/demand_interfaces';
 import { Button, ButtonGroup, ToggleButton, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import { DemandContext } from '../contexts/DemandContextProvider';
+import { DemandContext } from '../../contexts/DemandContextProvider';
 import moment from 'moment';
 import 'moment-weekday-calc';