Add stories

Author: adamwoodnz

projects/js-packages/charts/src/components/geo-chart/stories/index.stories.tsx

@@ -0,0 +1,92 @@
+import {
+	chartDecorator,
+	sharedChartArgTypes,
+	ChartStoryArgs,
+	ordersByCountry,
+	themeArgTypes,
+} from '../../../stories';
+import GeoChart from '../geo-chart';
+import type { Meta, StoryObj } from '@storybook/react';
+
+type StoryArgs = ChartStoryArgs< React.ComponentProps< typeof GeoChart > >;
+
+const meta: Meta< StoryArgs > = {
+	title: 'JS Packages/Charts/Types/Geo Chart',
+	component: GeoChart,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: [ 'autodocs' ],
+	argTypes: {
+		data: {
+			control: 'object',
+			description: 'Record mapping country ISO codes to numeric values',
+			table: {
+				type: { summary: 'Record<string, number>' },
+			},
+		},
+		width: {
+			control: { type: 'number', min: 400, max: 1200, step: 50 },
+			description: 'Width of the chart in pixels',
+			table: {
+				type: { summary: 'number' },
+				defaultValue: { summary: '800' },
+			},
+		},
+		height: {
+			control: { type: 'number', min: 300, max: 800, step: 50 },
+			description: 'Height of the chart in pixels',
+			table: {
+				type: { summary: 'number' },
+				defaultValue: { summary: '500' },
+			},
+		},
+		className: {
+			control: 'text',
+			description: 'Additional CSS class name',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+		...sharedChartArgTypes,
+		...themeArgTypes,
+	},
+	decorators: [ chartDecorator ],
+};
+
+export default meta;
+type Story = StoryObj< StoryArgs >;
+
+export const Default: Story = {
+	args: {
+		data: ordersByCountry,
+		width: 800,
+		height: 500,
+	},
+};
+
+export const SmallSize: Story = {
+	args: {
+		data: ordersByCountry,
+		width: 600,
+		height: 400,
+	},
+};
+
+export const SingleCountry: Story = {
+	args: {
+		data: {
+			USA: 1500,
+		},
+		width: 800,
+		height: 500,
+	},
+};
+
+export const EmptyData: Story = {
+	args: {
+		data: {},
+		width: 800,
+		height: 500,
+	},
+};

projects/js-packages/charts/src/stories/sample-data/index.ts

@@ -929,3 +929,27 @@ export const customerRevenueLegendData = [
 		comparison: '133%',
 	},
 ];
+
+/**
+ * Orders by country data
+ *
+ * Orders by country data for geo chart visualization
+ * - Category: categorical
+ * - Data points: 12
+ * - Suitable for: GeoChart
+ */
+export const ordersByCountry: Record< string, number > = {
+	USA: 1000,
+	CAN: 500,
+	GBR: 450,
+	DEU: 400,
+	AUS: 350,
+	FRA: 300,
+	MEX: 250,
+	JPN: 200,
+	BRA: 150,
+	IND: 120,
+	ITA: 100,
+	ESP: 80,
+	NLD: 60,
+};