Report

package.json

@@ -120,6 +120,7 @@
     "react-transition-group": "^4.4.5",
     "recharts": "^2.6.2",
     "semver": "^7.5.4",
+    "squarify": "^1.1.0",
     "styled-components": "^6.1.0",
     "uuid": "^9.0.1",
     "zustand": "^4.5.5",

src/components/Dashboard/NewReport/Chart/Chart.stories.tsx

@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { Chart } from ".";
+import { mockedReport } from "../MetricsTable/mockData";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof Chart> = {
+  title: "Dashboard/NewReport/Chart",
+  component: Chart,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "fullscreen"
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Default: Story = {
+  args: {
+    data: mockedReport.reports
+  }
+};

src/components/Dashboard/NewReport/Chart/ServiceTile/TooltipKeyValue/index.tsx

@@ -0,0 +1,9 @@
+import * as s from "./styles";
+import { TooltipKeyValueProps } from "./types";
+
+export const TooltipKeyValue = ({ label, children }: TooltipKeyValueProps) => (
+  <s.Container>
+    <s.Label>{label}:</s.Label>
+    {children}
+  </s.Container>
+);

src/components/Dashboard/NewReport/Chart/ServiceTile/TooltipKeyValue/styles.ts

@@ -0,0 +1,14 @@
+import styled from "styled-components";
+import { footnoteRegularTypography } from "../../../../../common/App/typographies";
+
+export const Container = styled.div`
+  ${footnoteRegularTypography}
+
+  display: flex;
+  gap: 4px;
+  color: ${({ theme }) => theme.colors.v3.text.primary};
+`;
+
+export const Label = styled.span`
+  color: ${({ theme }) => theme.colors.v3.text.secondary};
+`;

src/components/Dashboard/NewReport/Chart/ServiceTile/TooltipKeyValue/types.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+
+export interface TooltipKeyValueProps {
+  label: string;
+  children: ReactNode;
+}

src/components/Dashboard/NewReport/Chart/ServiceTile/index.tsx

@@ -0,0 +1,47 @@
+import { Tile } from "../../../../common/TreeMap/Tile";
+import { ReportTimeMode } from "../../ReportHeader/types";
+import * as s from "./styles";
+import { TooltipKeyValue } from "./TooltipKeyValue";
+import { ServiceTileProps } from "./types";
+
+const getFormattedNumber = (viewMode: ReportTimeMode, value: number) =>
+  `${viewMode === "changes" && value > 0 ? "+" : ""}${value}`;
+
+export const ServiceTile = ({
+  name,
+  criticalIssuesCount,
+  impactScore,
+  severity,
+  viewMode,
+  onIssuesClick: onSeeIssuesClick
+}: ServiceTileProps) => {
+  const formattedCriticalIssuesCount = getFormattedNumber(
+    viewMode,
+    criticalIssuesCount
+  );
+  const formattedImpactScore = getFormattedNumber(viewMode, impactScore);
+
+  return (
+    <Tile
+      title={name}
+      severity={severity}
+      tooltip={
+        <s.TooltipContent>
+          <span>{name}</span>
+          <TooltipKeyValue label={"Critical Issues"}>
+            {formattedCriticalIssuesCount}
+          </TooltipKeyValue>
+          <TooltipKeyValue label={"Impact Score"}>
+            {formattedImpactScore}
+          </TooltipKeyValue>
+        </s.TooltipContent>
+      }
+    >
+      <s.StyledLink onClick={() => onSeeIssuesClick && onSeeIssuesClick(name)}>
+        <span>
+          {formattedCriticalIssuesCount} | {formattedImpactScore}
+        </span>
+      </s.StyledLink>
+    </Tile>
+  );
+};

src/components/Dashboard/NewReport/Chart/ServiceTile/styles.ts

@@ -0,0 +1,21 @@
+import styled from "styled-components";
+import { Link } from "../../../../common/v3/Link";
+
+export const StatsMainNumber = styled.span`
+  color: ${({ theme }) => theme.colors.v3.text.primary};
+`;
+
+export const TooltipContent = styled.div`
+  color: ${({ theme }) => theme.colors.v3.text.primary};
+`;
+
+export const StyledLink = styled(Link)`
+  color: ${({ theme }) => theme.colors.v3.text.primary};
+  font-size: 32px;
+  font-weight: 700;
+  line-height: normal;
+
+  :hover {
+    text-decoration: underline;
+  }
+`;

src/components/Dashboard/NewReport/Chart/ServiceTile/types.ts

@@ -0,0 +1,11 @@
+import { Severity } from "../../MetricsTable/types";
+import { ReportTimeMode } from "../../ReportHeader/types";
+
+export interface ServiceTileProps {
+  name: string;
+  criticalIssuesCount: number;
+  impactScore: number;
+  severity: Severity;
+  viewMode: ReportTimeMode;
+  onIssuesClick?: (service: string) => void;
+}

src/components/Dashboard/NewReport/Chart/index.tsx

@@ -0,0 +1,64 @@
+import useDimensions from "react-cool-dimensions";
+import { Input } from "squarify";
+import { isNumber } from "../../../../typeGuards/isNumber";
+import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent";
+import { TreeMap } from "../../../common/TreeMap";
+import { TileData } from "../../../common/TreeMap/types";
+import { ReportTimeMode } from "../ReportHeader/types";
+import { trackingEvents } from "../tracking";
+import { getSeverity } from "../utils";
+import { ServiceTile } from "./ServiceTile";
+import * as s from "./styles";
+import { ChartProps } from "./types";
+
+export const Chart = ({ data, onServiceSelected }: ChartProps) => {
+  const { width, height, observe } = useDimensions();
+
+  const viewMode: ReportTimeMode = data.some((service) =>
+    isNumber(service.key.lastDays)
+  )
+    ? "changes"
+    : "baseline";
+
+  const transformedData = data.map((service) => ({
+    ...service,
+    impact: Math.round(service.impact * 100)
+  }));
+
+  const handSeeIssuesClick = (service: string) => {
+    sendUserActionTrackingEvent(trackingEvents.HEATMAP_SEE_ISSUES_LINK_CLICKED);
+    onServiceSelected(service);
+  };
+
+  const minImpactScore = Math.min(...transformedData.map((x) => x.impact));
+  const maxImpactScore = Math.max(...transformedData.map((x) => x.impact));
+
+  const chartData: Input<TileData>[] = transformedData.map((service) => {
+    const severity = getSeverity(
+      minImpactScore,
+      maxImpactScore,
+      service.impact
+    );
+
+    return {
+      id: service.key.service,
+      value: service.impact,
+      content: (
+        <ServiceTile
+          name={service.key.service}
+          criticalIssuesCount={service.issues}
+          impactScore={service.impact}
+          severity={severity}
+          viewMode={viewMode}
+          onIssuesClick={handSeeIssuesClick}
+        />
+      )
+    };
+  });
+
+  return (
+    <s.Container ref={observe}>
+      <TreeMap data={chartData} padding={12} width={width} height={height} />
+    </s.Container>
+  );
+};

src/components/Dashboard/NewReport/Chart/styles.ts

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  width: 100%;
+  height: 100%;
+`;

src/components/Dashboard/NewReport/Chart/types.ts

@@ -0,0 +1,6 @@
+import { ServiceData } from "../types";
+
+export interface ChartProps {
+  data: ServiceData[];
+  onServiceSelected: (name: string) => void;
+}

src/components/Dashboard/NewReport/MetricsTable/MetricsTable.stories.tsx

@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { MetricsTable } from ".";
+import { mockedReport } from "./mockData";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof MetricsTable> = {
+  title: "Dashboard/NewReport/MetricsTable",
+  component: MetricsTable,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "fullscreen"
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+
+export const Default: Story = {
+  args: {
+    data: mockedReport.reports
+  }
+};
+
+export const Empty: Story = {
+  args: {
+    data: []
+  }
+};