Merge pull request #791 from buerokratt/v3.3.1

merging v3.3.1 to test

Author: ffrose

DSL/Liquibase/changelog/1785269433-create-user-overview-date-preference.sql

@@ -0,0 +1,17 @@
+-- liquibase formatted sql
+-- changeset 1AhmedYasser:1785269433
+CREATE TYPE overview_date_preference_unit AS ENUM (
+    'day',
+    'week',
+    'month',
+    'period'
+);
+
+CREATE TABLE public."user_overview_date_preference" (
+    id int8 NOT NULL GENERATED BY DEFAULT AS IDENTITY,
+    user_id_code text NOT NULL,
+    unit overview_date_preference_unit NOT NULL DEFAULT 'week',
+    created_at timestamp NOT NULL DEFAULT now(),
+    CONSTRAINT user_overview_date_preference_pkey PRIMARY KEY (id),
+    CONSTRAINT user_overview_date_preference_user_id_code_key UNIQUE (user_id_code)
+);

DSL/Resql/analytics/POST/select-user-overview-date-preference-unit.sql

@@ -0,0 +1,3 @@
+SELECT unit
+FROM user_overview_date_preference
+WHERE user_id_code = :user_id_code;

DSL/Resql/analytics/POST/update-date-preference.sql

@@ -0,0 +1,6 @@
+INSERT INTO user_overview_date_preference (user_id_code, unit)
+VALUES (:user_id_code, :unit)
+ON CONFLICT (user_id_code)
+DO UPDATE SET
+    unit = EXCLUDED.unit
+RETURNING user_id_code, unit;

DSL/Ruuter/analytics/GET/overview/date-preference-unit.yml

@@ -0,0 +1,32 @@
+declaration:
+  call: declare
+  version: 0.1
+  description: "Decription placeholder for 'DATE-PREFERENCE'"
+  method: get
+  accepts: json
+  returns: json
+  namespace: analytics
+  allowlist:
+    header:
+      - field: cookie
+        type: string
+        description: "Cookie field"
+
+check_if_authorized:
+  template: "[#ANALYTICS_PROJECT_LAYER]/check-user-authority"
+  requestType: templates
+  headers:
+    cookie: ${incoming.headers.cookie}
+  result: authority_result
+
+get_date_preference:
+  call: http.post
+  args:
+    url: "[#ANALYTICS_RESQL]/select-user-overview-date-preference-unit"
+    body:
+      user_id_code: ${authority_result.idCode}
+  result: preference
+
+return_value:
+  return: ${preference.response.body}
+  next: end

DSL/Ruuter/analytics/POST/overview/date-preference.yml

@@ -0,0 +1,55 @@
+declaration:
+  call: declare
+  version: 0.1
+  description: "Decription placeholder for 'DATE-PREFERENCE'"
+  method: post
+  accepts: json
+  returns: json
+  namespace: analytics
+  allowlist:
+    body:
+      - field: unit
+        type: string
+        description: "Body field 'unit'"
+    header:
+      - field: cookie
+        type: string
+        description: "Cookie field"
+
+check_for_required_parameters:
+  switch:
+    - condition: ${incoming.body == null || incoming.body.unit == null}
+      next: return_incorrect_request
+  next: extract_request_data
+
+extract_request_data:
+  assign:
+    cookie: ${incoming.headers.cookie}
+    unit: ${incoming.body.unit}
+  next: check_if_authorized
+
+check_if_authorized:
+  template: "[#ANALYTICS_PROJECT_LAYER]/check-user-authority"
+  requestType: templates
+  headers:
+    cookie: ${cookie}
+  result: authority_result
+
+update_date_preference:
+  call: http.post
+  args:
+    url: "[#ANALYTICS_RESQL]/update-date-preference"
+    body:
+      user_id_code: ${authority_result.idCode}
+      unit: ${unit}
+  result: result
+  next: return_value
+
+return_value:
+  return: ${result.response.body}
+  next: end
+
+return_incorrect_request:
+  status: 400
+  return: 'missing parameters'
+  next: end

GUI/src/components/FormElements/FormDatepicker/index.tsx

@@ -13,15 +13,17 @@ import i18next from 'i18next';
 registerLocale('et-EE', et);
 
 type FormDatepickerProps = ControllerRenderProps & {
-  label: string;
-  name: string;
-  hideLabel?: boolean;
-  disabled?: boolean;
-  placeholder?: string;
-  timePicker?: boolean;
-  monthPicker?: boolean;
-  portalId?: string;
-  trailingIcon?: ReactNode;
+  readonly label: string;
+  readonly name: string;
+  readonly hideLabel?: boolean;
+  readonly disabled?: boolean;
+  readonly placeholder?: string;
+  readonly timePicker?: boolean;
+  readonly monthPicker?: boolean;
+  readonly portalId?: string;
+  readonly trailingIcon?: ReactNode;
+  readonly minDate?: Date;
+  readonly maxDate?: Date;
 }
 
 const FormDatepicker = forwardRef<any, FormDatepickerProps>((

GUI/src/components/overview/OverviewBarChart/index.tsx

@@ -1,8 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Bar, BarChart, CartesianGrid, LabelList, Tooltip, XAxis, YAxis } from 'recharts';
 import { useTranslation } from 'react-i18next';
+import { endOfWeek } from 'date-fns';
+import { MdFlag } from 'react-icons/md';
+import Icon from '../../Icon';
+import TooltipWrapper from '../../TooltipWrapper';
 import { formatDate, getDistributionYAxisTicks } from '../../../util/charts-utils';
-import { DateRange, formatOverviewDate, OverviewUnit } from '../../../util/overview-date-utils';
+import { DateRange, formatOverviewDate, isLongPeriod, OverviewUnit, WEEK_OPTIONS } from '../../../util/overview-date-utils';
 import { OVERVIEW_AXIS_STROKE, OVERVIEW_BLUE, OVERVIEW_GREEN, OVERVIEW_TICK_FILL } from '../../../util/overview-colors';
 import { createStackedBarShape } from './barShapes';
 import { useOverviewChartData } from './useOverviewChartData';
@@ -22,9 +26,10 @@ type Props = {
 
 const OverviewBarChart = ({ range, unit }: Props) => {
   const { t } = useTranslation();
-  const buckets = useOverviewChartData(range, unit);
+  const { buckets, period } = useOverviewChartData(range, unit);
   const ref = useRef<HTMLDivElement>(null);
   const [width, setWidth] = useState<number>(0);
+  const isHourly = period === 'hour';
 
   useEffect(() => {
     const handleResize = () => setWidth(ref.current?.clientWidth ?? 0);
@@ -37,7 +42,17 @@ const OverviewBarChart = ({ range, unit }: Props) => {
   const yAxisMax = roundUpToTen(maxTotal);
   const yAxisTicks = getDistributionYAxisTicks(yAxisMax);
 
-  const tickFormatter = (value: number) => formatDate(new Date(value), unit === 'day' ? 'HH:mm' : 'dd.MM');
+  const tickFormatter = (value: number) => formatDate(new Date(value), isHourly ? 'HH:mm' : 'dd.MM');
+
+  const tooltipLabelFormatter = (value: number) => {
+    const date = new Date(value);
+    if (isHourly) return formatDate(date, 'HH:mm');
+    if (period === 'week') {
+      const weekEnd = endOfWeek(date, WEEK_OPTIONS);
+      return `${formatDate(date, 'dd.MM.yyyy')} - ${formatDate(weekEnd, 'dd.MM.yyyy')}`;
+    }
+    return formatDate(date, 'dd-MM-yyyy');
+  };
 
   const totalCount = buckets.reduce((sum, bucket) => sum + bucket.burokratt + bucket.csa, 0);
 
@@ -50,7 +65,16 @@ const OverviewBarChart = ({ range, unit }: Props) => {
   return (
     <div ref={ref} className="overview-bar-chart">
       <div className="overview-bar-chart__header">
-        <h2 className="overview-bar-chart__title">{title}</h2>
+        <h2 className="overview-bar-chart__title">
+          {title}
+          {isLongPeriod(range) && (
+            <span className="overview-bar-chart__title-warning">
+              <TooltipWrapper enabled text={t('overview.longPeriodWarning')}>
+                <Icon icon={<MdFlag />} size="small" />
+              </TooltipWrapper>
+            </span>
+          )}
+        </h2>
         <div className="overview-bar-chart__legend">
           {LEGEND_ITEMS.map(({ key, color }) => (
             <div key={key} className="overview-bar-chart__legend-item">
@@ -60,7 +84,7 @@ const OverviewBarChart = ({ range, unit }: Props) => {
           ))}
         </div>
       </div>
-      <BarChart width={width} height={width / 3.76} data={buckets} barSize={unit === 'day' ? 8 : 20} margin={{ top: 20, right: 20, bottom: 30 }}>
+      <BarChart width={width} height={width / 3.76} data={buckets} barSize={isHourly ? 8 : 20} margin={{ top: 20, right: 20, bottom: 30 }}>
         <CartesianGrid
           vertical={false}
           horizontalValues={yAxisTicks.filter((tick) => tick > 0)}
@@ -73,7 +97,7 @@ const OverviewBarChart = ({ range, unit }: Props) => {
           type="number"
           domain={['dataMin', 'dataMax']}
           scale="time"
-          padding={{ left: unit === 'day' ? 8 : 14, right: unit === 'day' ? 8 : 14 }}
+          padding={{ left: isHourly ? 8 : 14, right: isHourly ? 8 : 14 }}
           axisLine={{ stroke: OVERVIEW_AXIS_STROKE }}
           tickLine={false}
           tick={{ fill: OVERVIEW_TICK_FILL, fontSize: 12 }}
@@ -88,7 +112,7 @@ const OverviewBarChart = ({ range, unit }: Props) => {
         />
         <Tooltip
           cursor={{ fill: 'rgba(151, 153, 164, 0.12)' }}
-          labelFormatter={(value) => formatDate(new Date(value as number), unit === 'day' ? 'HH:mm' : 'dd-MM-yyyy')}
+          labelFormatter={(value) => tooltipLabelFormatter(value as number)}
         />
         <Bar dataKey="burokratt" stackId="total" fill={OVERVIEW_BLUE} shape={createStackedBarShape('burokratt')} />
         <Bar dataKey="csa" stackId="total" fill={OVERVIEW_GREEN} shape={createStackedBarShape('csa')}>

GUI/src/components/overview/OverviewBarChart/styles.scss

@@ -18,13 +18,21 @@
   }
 
   &__title {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
     margin: 0;
     color: get-color(black-coral-6);
     font-size: $veera-font-size-100;
     font-weight: 400;
     text-transform: uppercase;
   }
 
+  &__title-warning {
+    display: inline-flex;
+    color: get-color(dark-tangerine-10);
+  }
+
   &__legend {
     display: flex;
     flex-shrink: 0;

GUI/src/components/overview/OverviewBarChart/useOverviewChartData.ts

@@ -1,41 +1,54 @@
 import { useEffect, useState } from 'react';
-import { eachDayOfInterval, eachHourOfInterval, format, formatISO } from 'date-fns';
+import { eachDayOfInterval, eachHourOfInterval, eachWeekOfInterval, format, formatISO, startOfWeek } from 'date-fns';
 import { Methods, request } from '../../../util/axios-client';
 import { getDomainsArray } from '../../../util/multiDomain-utils';
 import { getShowTestData } from '../../../util/testChat-utils';
 import { getTotalChats } from '../../../resources/api-constants';
-import { DateRange, OverviewUnit } from '../../../util/overview-date-utils';
-import { OverviewChartRequestData, TotalChatsOverviewResponse } from '../../../types/overview-api';
+import { DateRange, isWeeklyBucketPeriod, OverviewUnit, WEEK_OPTIONS } from '../../../util/overview-date-utils';
+import { OverviewChartPeriod, OverviewChartRequestData, TotalChatsOverviewResponse } from '../../../types/overview-api';
 
 export type OverviewChartBucket = {
   readonly bucket: number;
   readonly burokratt: number;
   readonly csa: number;
 };
 
-const bucketKey = (date: string | Date, period: 'hour' | 'day'): string | null => {
+const bucketKey = (date: string | Date, period: OverviewChartPeriod): string | null => {
   const parsed = new Date(date);
   if (Number.isNaN(parsed.getTime())) return null;
-  return format(parsed, period === 'hour' ? "yyyy-MM-dd'T'HH" : 'yyyy-MM-dd');
+  if (period === 'hour') return format(parsed, "yyyy-MM-dd'T'HH");
+  if (period === 'week') return format(startOfWeek(parsed, WEEK_OPTIONS), 'yyyy-MM-dd');
+  return format(parsed, 'yyyy-MM-dd');
 };
 
 const toBucketEntries = (
   rows: Record<string, unknown>[],
   dateField: string,
-  period: 'hour' | 'day'
+  period: OverviewChartPeriod
 ): [string, number][] =>
   rows.reduce<[string, number][]>((entries, row) => {
     const key = bucketKey(row[dateField] as string | Date, period);
     if (key !== null) entries.push([key, Number(row.count)]);
     return entries;
   }, []);
 
+const getChartPeriod = (range: DateRange, unit: OverviewUnit): OverviewChartPeriod => {
+  if (unit === 'day') return 'hour';
+  return isWeeklyBucketPeriod(range) ? 'week' : 'day';
+};
+
+const getIntervals = (range: DateRange, period: OverviewChartPeriod): Date[] => {
+  if (period === 'hour') return eachHourOfInterval({ start: range.start, end: range.end });
+  if (period === 'week') return eachWeekOfInterval({ start: range.start, end: range.end }, WEEK_OPTIONS);
+  return eachDayOfInterval({ start: range.start, end: range.end });
+};
+
 export const useOverviewChartData = (range: DateRange, unit: OverviewUnit) => {
   const [buckets, setBuckets] = useState<OverviewChartBucket[]>([]);
+  const period = getChartPeriod(range, unit);
 
   useEffect(() => {
     let cancelled = false;
-    const period = unit === 'day' ? 'hour' : 'day';
     const urls = getDomainsArray();
     const showTest = getShowTestData();
     const start_date = formatISO(range.start);
@@ -56,10 +69,7 @@ export const useOverviewChartData = (range: DateRange, unit: OverviewUnit) => {
         const bykMap = new Map(toBucketEntries([...bykRows], 'time', period));
         const csaMap = new Map(toBucketEntries([...csaRows], 'time', period));
 
-        const intervals =
-          period === 'hour'
-            ? eachHourOfInterval({ start: range.start, end: range.end })
-            : eachDayOfInterval({ start: range.start, end: range.end });
+        const intervals = getIntervals(range, period);
 
         const newBuckets = intervals.map((date) => {
           const key = bucketKey(date, period) ?? '';
@@ -76,7 +86,7 @@ export const useOverviewChartData = (range: DateRange, unit: OverviewUnit) => {
     return () => {
       cancelled = true;
     };
-  }, [range.start.getTime(), range.end.getTime(), unit]);
+  }, [range.start.getTime(), range.end.getTime(), unit, period]);
 
-  return buckets;
+  return { buckets, period };
 };