feat: show input data scatterplot on forecast page

agileplanning-io · Jan 11, 2025 · 480cdb5 · 480cdb5
1 parent 66247a5
commit 480cdb5
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 5 deletions.
diff --git a/apps/client/src/app/projects/reports/forecast/forecast-page.tsx b/apps/client/src/app/projects/reports/forecast/forecast-page.tsx
@@ -3,19 +3,24 @@ import {
   CompletedIssue,
   DateFilterType,
   HierarchyLevel,
+  Issue,
   SummaryResult,
   filterCompletedIssues,
   forecast,
   fromClientFilter,
   toClientFilter,
 } from "@agileplanning-io/flow-metrics";
 import { useAtomValue } from "jotai";
-import { ForecastChart } from "@agileplanning-io/flow-charts";
+import { ForecastChart, Scatterplot } from "@agileplanning-io/flow-charts";
 import { useProjectContext } from "../../context";
 import { ChartParams, newSeed, useChartParams } from "./use-chart-params";
 import { chartStyleAtom } from "../chart-style";
 import { useFilterParams } from "@app/filter/use-filter-params";
-import { defaultDateRange, formatDate } from "@agileplanning-io/flow-lib";
+import {
+  asAbsolute,
+  defaultDateRange,
+  formatDate,
+} from "@agileplanning-io/flow-lib";
 import { Project } from "@data/projects";
 import {
   ControlBar,
@@ -25,9 +30,18 @@ import {
   Popdown,
   ReportType,
 } from "@agileplanning-io/flow-components";
-import { Button, Checkbox, Form, InputNumber, Space, Tooltip } from "antd";
+import {
+  Button,
+  Checkbox,
+  Form,
+  InputNumber,
+  Space,
+  Tooltip,
+  Typography,
+} from "antd";
 import { isNonNullish } from "remeda";
 import { RedoOutlined } from "@ant-design/icons";
+import { IssueDetailsDrawer } from "../components/issue-details-drawer";
 
 export const ForecastPage = () => {
   const { issues } = useProjectContext();
@@ -37,6 +51,7 @@ export const ForecastPage = () => {
     hierarchyLevel: HierarchyLevel.Story,
   }));
   const [filteredIssues, setFilteredIssues] = useState<CompletedIssue[]>([]);
+  const [selectedIssues, setSelectedIssues] = useState<Issue[]>([]);
   const { chartParams, setChartParams } = useChartParams();
   const chartStyle = useAtomValue(chartStyleAtom);
 
@@ -88,6 +103,30 @@ export const ForecastPage = () => {
           showPercentiles={chartParams.showPercentileLabels}
         />
       ) : null}
+
+      {filter?.dates && (
+        <>
+          <Typography.Title level={3}>Input Data</Typography.Title>
+          <Scatterplot
+            issues={filteredIssues}
+            range={asAbsolute(filter.dates)}
+            showPercentileLabels={false}
+            setSelectedIssues={setSelectedIssues}
+            hideOutliers={false}
+            options={{
+              scales: { x: { title: { display: false } } },
+              aspectRatio: 10,
+              plugins: { legend: { display: false } },
+            }}
+          />
+        </>
+      )}
+
+      <IssueDetailsDrawer
+        selectedIssues={selectedIssues}
+        onClose={() => setSelectedIssues([])}
+        open={selectedIssues.length > 0}
+      />
     </>
   );
 };

diff --git a/packages/charts/src/util/style.ts b/packages/charts/src/util/style.ts
@@ -10,10 +10,9 @@ const defaultStyle: ChartStyle = {
 
 export const buildFontSpec = (style?: ChartStyle): Partial<FontSpec> => {
   const fontSize = style?.fontSize ?? defaultStyle.fontSize;
-  const font = {
+  return {
     size: fontSize,
   };
-  return font;
 };
 
 export const defaultBarStyle = Object.freeze({