Add storybook for license chart

BrunoQuaresma · BrunoQuaresma · commit 372649b2138d · 2025-01-16T19:45:25.000Z
diff --git a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicenseSeatConsumptionChart.stories.tsx b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicenseSeatConsumptionChart.stories.tsx
@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { LicenseSeatConsumptionChart } from "./LicenseSeatConsumptionChart";
+
+const meta: Meta<typeof LicenseSeatConsumptionChart> = {
+	title:
+		"pages/DeploymentSettingsPage/LicensesSettingsPage/LicenseSeatConsumptionChart",
+	component: LicenseSeatConsumptionChart,
+	args: {
+		limit: 220,
+		data: [
+			{ date: "1/1/2024", users: 150 },
+			{ date: "1/2/2024", users: 165 },
+			{ date: "1/3/2024", users: 180 },
+			{ date: "1/4/2024", users: 155 },
+			{ date: "1/5/2024", users: 190 },
+			{ date: "1/6/2024", users: 200 },
+			{ date: "1/7/2024", users: 210 },
+		],
+	},
+};
+
+export default meta;
+type Story = StoryObj<typeof LicenseSeatConsumptionChart>;
+
+export const Loaded: Story = {};
+
+export const Empty: Story = {
+	args: {
+		data: [],
+	},
+};
+
+export const Loading: Story = {
+	args: {
+		data: undefined,
+	},
+};
diff --git a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicenseSeatConsumptionChart.tsx b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicenseSeatConsumptionChart.tsx
@@ -146,6 +146,8 @@ export const LicenseSeatConsumptionChart: FC<
 										}
 									/>
 									<YAxis
+										// Adds space on Y to show always show the reference line without overflowing it.
+										domain={[0, limit ? "dataMax + 10" : "auto"]}
 										dataKey="users"
 										tickLine={false}
 										axisLine={false}
@@ -199,8 +201,9 @@ export const LicenseSeatConsumptionChart: FC<
 									/>
 									{limit && (
 										<ReferenceLine
+											isFront
 											ifOverflow="extendDomain"
-											y={70}
+											y={limit}
 											label={{
 												value: "license seat limit",
 												position: "insideBottomRight",
