feat: show input data scatterplot on forecast page

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

Hide file tree

Showing 2 changed files with 34 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
@@ -10,12 +10,16 @@ import {
   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,7 +29,15 @@ 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";
 
@@ -88,6 +100,24 @@ 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={() => {}}
+            hideOutliers={false}
+            options={{
+              scales: { x: { title: { display: false } } },
+              aspectRatio: 10,
+              plugins: { legend: { display: false } },
+            }}
+          />
+        </>
+      )}
     </>
   );
 };

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({