#407 (New Frontend) Refactor Sprint and Burndown Visualization

- changed way of styling axis description
- changed help section to fit naming
- extracted type
- added TODOs for after dialog rework
- removed usage of getDataSlice from simplePlugin

Author: bastianferch

binocular-frontend-new/src/plugins/visualizationPlugins/authorBehaviour/timeSpent/src/utilities/dataConverter.ts

@@ -3,27 +3,17 @@ import chroma from 'chroma-js';
 import _ from 'lodash';
 import type { TimeSpentSettings } from '../settings/settings.tsx';
 import type { DataPluginNote } from '../../../../../interfaces/dataPluginInterfaces/dataPluginNotes.ts';
-import type { DataPluginMergeRequest } from '../../../../../interfaces/dataPluginInterfaces/dataPluginMergeRequests.ts';
-import type { DataPluginAccount } from '../../../../../interfaces/dataPluginInterfaces/dataPluginAccounts.ts';
-import type { DataPluginIssue } from '../../../../../interfaces/dataPluginInterfaces/dataPluginIssues.ts';
+import type { TimeTrackingData } from '../../../../types/timeTrackingDataType';
 import distinctColors from 'distinct-colors';
 import type { VisualizationPluginProperties } from '../../../../../interfaces/visualizationPluginInterfaces/visualizationPluginProperties.ts';
 import type { AuthorType } from '../../../../../../types/data/authorType.ts';
-import { extractTimeTrackingDataFromNotes } from '../../../../../utils/extractTimeTrackingDataFromNotes.ts';
+import { extractTimeTrackingDataFromNotes } from '../../../../utils/extractTimeTrackingDataFromNotes.ts';
 
 interface TimeSpentChartData {
   date: number;
   [signature: string]: number;
 }
 
-export interface TimeTrackingData {
-  author: DataPluginAccount;
-  timeSpent: number;
-  createdAt: string;
-  issue: DataPluginIssue | null;
-  mergeRequest: DataPluginMergeRequest | null;
-}
-
 interface IssueAndMR {
   id: string;
   title: string;

binocular-frontend-new/src/plugins/visualizationPlugins/issues/burndown/src/chart/components/BurndownChartXAxisLegend.tsx

@@ -12,7 +12,7 @@ export const BurndownChartXAxisLegend: React.FC<{
   return (
     <g>
       <rect x={margin * 2} y={height - legendBarHeight} height={1} width={width - margin * 3} />
-      <rect x={margin * 2} y={height + 1 - legendBarHeight} width={width - margin * 3} height={40} fill={'#EEE'} />
+      <rect x={margin * 2} y={height + 1 - legendBarHeight} width={width - margin * 3} height={40} fill={'white'} />
       {xScale.ticks().map((t) => {
         const x = xScale(t);
 

binocular-frontend-new/src/plugins/visualizationPlugins/issues/burndown/src/chart/components/BurndownChartYAxisLegend.tsx

@@ -5,7 +5,7 @@ import { margin } from '../BurndownChart';
 export const BurndownChartYAxisLegend: React.FC<{ height: number; yScale: d3.ScaleLinear<number, number> }> = ({ height, yScale }) => (
   <g>
     <rect x={margin * 2} y={0} height={height - margin * 2} width={1} />
-    <rect x={0} y={0} width={margin * 2} height={height} fill={'#EEE'} />
+    <rect x={0} y={0} width={margin * 2} height={height} fill={'white'} />
     {yScale.ticks().map((t) => {
       const y = yScale(t);
 

binocular-frontend-new/src/plugins/visualizationPlugins/issues/issuesTimeline/src/chart/Chart.tsx

@@ -5,8 +5,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import type { DataPluginIssue } from '../../../../../interfaces/dataPluginInterfaces/dataPluginIssues.ts';
 import type { VisualizationPluginProperties } from '../../../../../interfaces/visualizationPluginInterfaces/visualizationPluginProperties.ts';
 import { handelPopoutResizing } from '../../../../../utils/resizing.ts';
-import { getDataSlice } from '../../../../simpleVisualizationPlugin/src/reducer';
-import { DataState, type IssuesTimelineState } from '../reducer';
+import { DataState, type IssuesTimelineState, setDateRange } from '../reducer';
 import type { IssuesTimelineSettings } from '../settings/settings.tsx';
 import { IssuesTimelineChart } from './IssuesTimelineChart.tsx';
 
@@ -54,7 +53,7 @@ const Chart = (props: VisualizationPluginProperties<IssuesTimelineSettings, Data
 
   //Set Global state when parameters change. This will also conclude in a refresh of the data.
   useEffect(() => {
-    dispatch(getDataSlice(props.dataName!).actions.setDateRange(props.parameters.parametersDateRange));
+    dispatch(setDateRange(props.parameters.parametersDateRange));
   }, [props.parameters]);
 
   //Trigger Refresh when dataConnection changes

binocular-frontend-new/src/plugins/visualizationPlugins/issues/issuesTimeline/src/chart/components/DetailDialog.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import type { AuthorType } from '../../../../../../../types/data/authorType';
 import { BaseDetailDialogLayout } from '../../../../../../components/BaseDetailDialogLayout';
 import type { MappedSprint } from '../../../../../../components/SprintAreas';
-import { extractTimeTrackingDataFromNotes } from '../../../../../../utils/extractTimeTrackingDataFromNotes';
+import { extractTimeTrackingDataFromNotes } from '../../../../../utils/extractTimeTrackingDataFromNotes';
 import { aggregateTimeTrackingData } from '../helper/aggregateTimeTrackingData';
 import type { MappedDataPluginIssue, MappedDataPluginMergeRequest } from '../types';
 
@@ -19,6 +19,7 @@ const formatHours = (time: number) => {
   return `${hours}h ${minutes}min`;
 };
 
+// TODO refactor when Dialog is extendable
 export const DetailDialogIssue: React.FC<{
   iid: number;
   anchor: SVGElement;

binocular-frontend-new/src/plugins/visualizationPlugins/issues/issuesTimeline/src/chart/components/IssuesTimelineChartIssue.tsx

@@ -2,7 +2,7 @@ import * as d3 from 'd3';
 import type { Moment } from 'moment';
 import * as React from 'react';
 import type { AuthorType } from '../../../../../../../types/data/authorType';
-import { extractTimeTrackingDataFromNotes } from '../../../../../../utils/extractTimeTrackingDataFromNotes';
+import { extractTimeTrackingDataFromNotes } from '../../../../../utils/extractTimeTrackingDataFromNotes';
 import type { IssuesTimelineSettings } from '../../settings/settings';
 import { margin } from '../IssuesTimelineChart';
 import { aggregateTimeTrackingData } from '../helper/aggregateTimeTrackingData';

binocular-frontend-new/src/plugins/visualizationPlugins/issues/issuesTimeline/src/chart/components/IssuesTimelineChartLegend.tsx

@@ -13,7 +13,7 @@ export const IssuesTimelineChartLegend: React.FC<{
     <g>
       <rect x={margin} y={height - margin * 2} height={1} width={width - margin * 2} />
 
-      <rect x={margin} y={height - margin * 2 + 1} width={width - margin * 2} height={40} fill={'#EEE'} />
+      <rect x={margin} y={height - margin * 2 + 1} width={width - margin * 2} height={40} fill={'white'} />
 
       {xScale.ticks().map((tick) => {
         const x = xScale(tick);

binocular-frontend-new/src/plugins/visualizationPlugins/issues/issuesTimeline/src/chart/helper/aggregateTimeTrackingData.ts

@@ -1,4 +1,4 @@
-import type { TimeTrackingData } from '../../../../../authorBehaviour/timeSpent/src/utilities/dataConverter';
+import type { TimeTrackingData } from '../../../../../types/timeTrackingDataType';
 
 export const aggregateTimeTrackingData = (timeTrackingData: TimeTrackingData[]) => {
   const aggregatedTimeTrackingData = new Map<string, number>();

binocular-frontend-new/src/plugins/visualizationPlugins/issues/issuesTimeline/src/help/help.tsx

@@ -1,11 +1,11 @@
 export const Help = () => (
   <>
-    <h2>Sprints Help</h2>
+    <h2>Issues Timeline Help</h2>
 
     <h3>Data</h3>
     <p>
-      The sprints visualization provides an overview of the issues and merge requests in a given time frame. It allows users to view these
-      issues and merge requests on a timeline. The issues can be colored based on different modes. It is also possible to overlay the
+      The Issues Timeline visualization provides an overview of the issues and merge requests in a given time frame. It allows users to view
+      these issues and merge requests on a timeline. The issues can be colored based on different modes. It is also possible to overlay the
       sprints in the selected time frame.
     </p>
 

binocular-frontend-new/src/plugins/visualizationPlugins/types/timeTrackingDataType.ts

@@ -0,0 +1,11 @@
+import { type DataPluginAccount } from '../../interfaces/dataPluginInterfaces/dataPluginAccounts';
+import { type DataPluginIssue } from '../../interfaces/dataPluginInterfaces/dataPluginIssues';
+import { type DataPluginMergeRequest } from '../../interfaces/dataPluginInterfaces/dataPluginMergeRequests';
+
+export interface TimeTrackingData {
+  author: DataPluginAccount;
+  timeSpent: number;
+  createdAt: string;
+  issue: DataPluginIssue | null;
+  mergeRequest: DataPluginMergeRequest | null;
+}