entur · mansoor-sajjad · Apr 18, 2023
diff --git a/public/index.html b/public/index.html
@@ -7,7 +7,7 @@
         <meta name="theme-color" content="#000000" />
         <meta
             name="description"
-            content="Line Statisticsss"
+            content="Line Statistics"
         />
         <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
         <!--
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-        <title>NeTEx validation reports</title>
+        <title>Line Statistics</title>
     </head>
     <body>
         <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/lineStatistics/apiHooks/lineStatistics.response.types.ts b/src/lineStatistics/apiHooks/lineStatistics.response.types.ts
@@ -1,4 +1,9 @@
-import { LineStatistics, PublicLine, Validity } from '../lineStatistics.types';
+import {
+  LineStatistics,
+  LineType,
+  PublicLine,
+  Validity,
+} from '../lineStatistics.types';
 
 export type FetchError = {
   status: number;
@@ -44,6 +49,7 @@ export interface ExportedDayTypeStatisticsResponse {
 
 export interface ExportedLine {
   lineName: string;
+  lineType: LineType;
   operatingPeriodTo: string;
   operatingPeriodFrom: string;
   exportedDayTypesStatistics: ExportedDayTypeStatisticsResponse[];

diff --git a/src/lineStatistics/apiHooks/useExportedLineStatisticsForAllProviders.ts b/src/lineStatistics/apiHooks/useExportedLineStatisticsForAllProviders.ts
@@ -35,6 +35,7 @@ export const useExportedLineStatisticsForAllProviders = (
         operatingPeriodFrom
         lines {
           lineName
+          lineType
           operatingPeriodTo
           operatingPeriodFrom
           exportedDayTypesStatistics {
@@ -57,7 +58,7 @@ export const useExportedLineStatisticsForAllProviders = (
         const client = new GraphQLClient(endpoint, {
           headers: {
             Authorization: `Bearer ${accessToken}`,
-            'Et-Client-Name': 'entur-ninsar'
+            'Et-Client-Name': 'entur-ninsar',
           },
         });
         const response = await client.request<{

diff --git a/src/lineStatistics/apiHooks/useExportedLineStatisticsForProvider.ts b/src/lineStatistics/apiHooks/useExportedLineStatisticsForProvider.ts
@@ -19,19 +19,20 @@ export const useExportedLineStatisticsForProvider = (provider?: Provider) => {
   const getLineForProviderQuery = `
   query GetExportedLineStatistics($providerCode: ID!) {
     lineStatistics(providerCode: $providerCode) {
-      startDate,
+      startDate
       publicLines {
         providerCode
-        publicCode,
-        operatingPeriodTo,
-        operatingPeriodFrom,
+        publicCode
+        operatingPeriodTo
+        operatingPeriodFrom
         lines {
-          lineName,
-          operatingPeriodTo,
-          operatingPeriodFrom,
+          lineName
+          lineType
+          operatingPeriodTo
+          operatingPeriodFrom
           exportedDayTypesStatistics {
-            dayTypeNetexId,
-            operatingPeriodTo,
+            dayTypeNetexId
+            operatingPeriodTo
             operatingPeriodFrom
             serviceJourneyName
           }
@@ -50,15 +51,15 @@ export const useExportedLineStatisticsForProvider = (provider?: Provider) => {
           const client = new GraphQLClient(endpoint, {
             headers: {
               Authorization: `Bearer ${accessToken}`,
-              'Et-Client-Name': 'entur-ninsar'
+              'Et-Client-Name': 'entur-ninsar',
             },
           });
           const response = await client.request<{
             lineStatistics: ExportedLineStatisticsResponse;
           }>(getLineForProviderQuery, { providerCode: provider.code });
 
           setExportedLineStatistics(
-            calculateExportedLineStatistics(response.lineStatistics)
+            calculateExportedLineStatistics(response.lineStatistics),
           );
           setExportedLineStatisticsError(undefined);
         }

diff --git a/src/lineStatistics/components/linesValidity/linesFilters/lineTypeChips.tsx b/src/lineStatistics/components/linesValidity/linesFilters/lineTypeChips.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { ChoiceChip, ChoiceChipGroup } from '@entur/chip';
+import { useLocale } from '../../../../appContext';
+import { lineTypeLabel, titleText } from '../../../lineStatistics.constants';
+import { useRandomId } from '@entur/utils';
+import { LineType } from '../../../lineStatistics.types';
+
+interface Props {
+  selectedLineType: LineType;
+  setSelectedLineType: (selectedValidity: LineType) => void;
+}
+
+export const LineTypeChips = ({
+  selectedLineType,
+  setSelectedLineType,
+}: Props) => {
+  const randomId = useRandomId('lineType');
+  const locale = useLocale();
+
+  return (
+    <div style={{ marginBottom: '20px' }}>
+      <ChoiceChipGroup
+        name={randomId}
+        label={titleText(locale).selectLineTypes}
+        onChange={(e) =>
+          setSelectedLineType(LineType[e.target.value as keyof typeof LineType])
+        }
+        value={`${selectedLineType}`}
+      >
+        <ChoiceChip value={LineType.ALL}>
+          {lineTypeLabel(locale)[LineType.ALL]}
+        </ChoiceChip>
+        <ChoiceChip value={LineType.FIXED}>
+          {lineTypeLabel(locale)[LineType.FIXED]}
+        </ChoiceChip>
+        <ChoiceChip value={LineType.FLEXIBLE}>
+          {lineTypeLabel(locale)[LineType.FLEXIBLE]}
+        </ChoiceChip>
+      </ChoiceChipGroup>
+    </div>
+  );
+};
diff --git a/src/lineStatistics/components/linesValidity/linesValidityList.tsx b/src/lineStatistics/components/linesValidity/linesValidityList.tsx
@@ -1,42 +1,53 @@
 import React, { useEffect, useState } from 'react';
 import style from './linesValidity.module.scss';
-import { LineStatistics, PeriodValidity, Validity } from '../../lineStatistics.types';
+import {
+  LineStatistics,
+  LineType,
+  PeriodValidity,
+  Validity,
+} from '../../lineStatistics.types';
 import { sortLines } from './linesFilters/sortingUtilities';
 import { LinesValidityHeader } from './linesValidityHeader';
 import {
   infoText,
   validityCategoryLabel,
 } from '../../lineStatistics.constants';
 import { useLocale } from '../../../appContext';
-import { Timeline } from "../timeline/timeline";
-import { ExpandableTimeline } from "../expandableTimeline/expandableTimeline";
-import { useRandomId } from "@entur/utils";
-import { Heading3 } from "@entur/typography";
-import { SortingChips } from "./linesFilters/sortingChips";
-import { ValidityChips } from "./linesFilters/validityChips";
-import { BannerAlertBox } from "@entur/alert";
-import { ValidNumberOfDaysText } from "./validNumberOfDaysText";
+import { Timeline } from '../timeline/timeline';
+import { ExpandableTimeline } from '../expandableTimeline/expandableTimeline';
+import { useRandomId } from '@entur/utils';
+import { Heading3 } from '@entur/typography';
+import { SortingChips } from './linesFilters/sortingChips';
+import { ValidityChips } from './linesFilters/validityChips';
+import { BannerAlertBox } from '@entur/alert';
+import { ValidNumberOfDaysText } from './validNumberOfDaysText';
 
 interface Props {
   defaultSelectedValidity: Validity;
   lineStatistics: LineStatistics;
   listTitle: string;
+  selectedLineType?: LineType;
 }
 
 export const LinesValidityList = ({
   defaultSelectedValidity,
   lineStatistics,
-  listTitle
+  listTitle,
+  selectedLineType = LineType.ALL,
 }: Props) => {
   const locale = useLocale();
   const randomId = useRandomId('eds-expandable');
 
-  const [expandedLinesState, setExpandedLinesState] = useState<Map<string, boolean>>(new Map<string, boolean>());
+  const [expandedLinesState, setExpandedLinesState] = useState<
+    Map<string, boolean>
+  >(new Map<string, boolean>());
 
   const [sorting, setSorting] = useState<number>(1);
   const [sortedLineNumbers, setSortedLineNumbers] = useState<string[]>();
 
-  const [selectedValidity, setSelectedValidity] = useState<Validity>(defaultSelectedValidity);
+  const [selectedValidity, setSelectedValidity] = useState<Validity>(
+    defaultSelectedValidity,
+  );
 
   const toggleLineOpen = (lineNumber: string) => {
     const expandedLinesStateCopy = new Map<string, boolean>(expandedLinesState);
@@ -50,28 +61,19 @@ export const LinesValidityList = ({
 
   useEffect(() => {
     setSelectedValidity(defaultSelectedValidity);
-  }, [defaultSelectedValidity])
+  }, [defaultSelectedValidity]);
 
   useEffect(() => {
     lineStatistics &&
-    setSortedLineNumbers(
-      sortLines(sorting, lineStatistics, selectedValidity),
-    );
+      setSortedLineNumbers(
+        sortLines(sorting, lineStatistics, selectedValidity),
+      );
   }, [lineStatistics, selectedValidity, sorting]);
 
-  const DayTypesValidity = ({
-    index,
-    lineNumber,
-  }: {
-    index: number;
-    lineNumber: string;
-  }) => (
+  const DayTypesValidity = ({ lineNumber }: { lineNumber: string }) => (
     <>
       {lineStatistics.linesMap[lineNumber].lines.map((l, i) => (
-        <Timeline
-          key={`Timeline${randomId}${i}`}
-          timetables={l.timetables}
-        />
+        <Timeline key={`Timeline${randomId}${i}`} timetables={l.timetables} />
       ))}
     </>
   );
@@ -80,51 +82,70 @@ export const LinesValidityList = ({
     <>
       <Heading3>{listTitle}</Heading3>
       <div className={style.linesValidityListContainer}>
-        <ValidityChips selectedValidity={selectedValidity} setSelectedValidity={setSelectedValidity} />
+        <ValidityChips
+          selectedValidity={selectedValidity}
+          setSelectedValidity={setSelectedValidity}
+        />
         {!sortedLineNumbers || sortedLineNumbers.length === 0 ? (
           <BannerAlertBox variant="info">
             {selectedValidity === Validity.ALL
               ? infoText(locale).noLinesFoundInfo
-              : infoText(locale).foundNot(validityCategoryLabel(locale)[selectedValidity])}
+              : infoText(locale).foundNot(
+                  validityCategoryLabel(locale)[selectedValidity],
+                )}
           </BannerAlertBox>
         ) : (
           <>
-            {sortedLineNumbers.length > 1 &&
-             <SortingChips sorting={sorting} setSorting={setSorting} />
-            }
-            {sortedLineNumbers.map((lineNumber, index) => (
-              <>
-                <ExpandableTimeline
-                  id={randomId}
-                  open={isLineOpen(lineNumber)}
-                  onToggle={() => toggleLineOpen(lineNumber)}
-                  effectivePeriodsForLineNumber={lineStatistics.linesMap[lineNumber].effectivePeriods as PeriodValidity[]}
-                  lineNumber={lineNumber}
-                  lineNames={lineStatistics.linesMap[lineNumber].lineNames.join(', ')}
-                  key={`LineItem${randomId}${index}`}
-                  numberOfDaysHeader={
-                    <ValidNumberOfDaysText
+            {sortedLineNumbers.length > 1 && (
+              <SortingChips sorting={sorting} setSorting={setSorting} />
+            )}
+            {sortedLineNumbers
+              .filter(
+                (lineNumber) =>
+                  selectedLineType === LineType.ALL ||
+                  !lineStatistics.linesMap[lineNumber].lineType ||
+                  lineStatistics.linesMap[lineNumber].lineType ===
+                    selectedLineType,
+              )
+              .map((lineNumber, index) => (
+                <>
+                  <ExpandableTimeline
+                    id={randomId}
+                    open={isLineOpen(lineNumber)}
+                    onToggle={() => toggleLineOpen(lineNumber)}
+                    effectivePeriodsForLineNumber={
+                      lineStatistics.linesMap[lineNumber]
+                        .effectivePeriods as PeriodValidity[]
+                    }
+                    lineNumber={lineNumber}
+                    lineNames={lineStatistics.linesMap[
+                      lineNumber
+                    ].lineNames.join(', ')}
+                    key={`LineItem${randomId}${index}`}
+                    numberOfDaysHeader={
+                      <ValidNumberOfDaysText
+                        lineNumber={lineNumber}
+                        numberOfDays={
+                          lineStatistics.linesMap[lineNumber].daysValid
+                        }
+                      />
+                    }
+                    linesValidityListHeader={
+                      <LinesValidityHeader
+                        key={`LineItemHeader${randomId}`}
+                        startDate={lineStatistics.startDate}
+                        validFromDate={lineStatistics.requiredValidityDate}
+                        endDate={lineStatistics.endDate}
+                      />
+                    }
+                  >
+                    <DayTypesValidity
                       lineNumber={lineNumber}
-                      numberOfDays={lineStatistics.linesMap[lineNumber].daysValid}
-                    />
-                  }
-                  linesValidityListHeader={
-                    <LinesValidityHeader
-                      key={`LineItemHeader${randomId}`}
-                      startDate={lineStatistics.startDate}
-                      validFromDate={lineStatistics.requiredValidityDate}
-                      endDate={lineStatistics.endDate}
+                      key={`DayTypesValidity${randomId}`}
                     />
-                  }
-                >
-                  <DayTypesValidity
-                    index={index}
-                    lineNumber={lineNumber}
-                    key={`DayTypesValidity${randomId}`}
-                  />
-                </ExpandableTimeline>
-              </>
-            ))}
+                  </ExpandableTimeline>
+                </>
+              ))}
           </>
         )}
       </div>