@licklist/design 0.78.5-dev.33 → 0.78.5-dev.34

package/src/v2/dashboard-analytics/chart/Chart.stories.tsx

@@ -0,0 +1,157 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Chart } from './Chart';
+
+const meta = {
+  title: 'v2/Dashboard Analytics/Chart',
+  component: Chart,
+
+  tags: [],
+} satisfies Meta<typeof Chart>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const bookingsData = [
+  { time: '00:00', value: 4, participants: 8 },
+  { time: '01:00', value: 3, participants: 6 },
+  { time: '02:00', value: 2, participants: 4 },
+  { time: '03:00', value: 5, participants: 10 },
+  { time: '04:00', value: 8, participants: 16 },
+  { time: '05:00', value: 6, participants: 12 },
+  { time: '06:00', value: 9, participants: 18 },
+  { time: '07:00', value: 12, participants: 24 },
+  { time: '08:00', value: 15, participants: 30 },
+  { time: '09:00', value: 18, participants: 36 },
+];
+
+const weeklyData = [
+  { time: 'Mon', value: 45, participants: 90 },
+  { time: 'Tue', value: 52, participants: 104 },
+  { time: 'Wed', value: 48, participants: 96 },
+  { time: 'Thu', value: 61, participants: 122 },
+  { time: 'Fri', value: 55, participants: 110 },
+  { time: 'Sat', value: 67, participants: 134 },
+  { time: 'Sun', value: 58, participants: 116 },
+];
+
+const monthlyData = [
+  { time: 'Jan', value: 120 },
+  { time: 'Feb', value: 135 },
+  { time: 'Mar', value: 142 },
+  { time: 'Apr', value: 160 },
+  { time: 'May', value: 155 },
+  { time: 'Jun', value: 175 },
+  { time: 'Jul', value: 182 },
+  { time: 'Aug', value: 168 },
+  { time: 'Sep', value: 190 },
+  { time: 'Oct', value: 210 },
+  { time: 'Nov', value: 198 },
+  { time: 'Dec', value: 225 },
+];
+
+const revenueData = [
+  { time: '00:00', value: 45.50 },
+  { time: '01:00', value: 38.75 },
+  { time: '02:00', value: 52.25 },
+  { time: '03:00', value: 61.00 },
+  { time: '04:00', value: 78.50 },
+  { time: '05:00', value: 85.25 },
+  { time: '06:00', value: 92.75 },
+  { time: '07:00', value: 125.50 },
+  { time: '08:00', value: 145.75 },
+  { time: '09:00', value: 168.25 },
+];
+
+export const TodayBookings: Story = {
+  args: {
+    title: 'Bookings',
+    subtitle: 'Today',
+    data: bookingsData,
+    isRevenue: false,
+  },
+};
+
+export const YesterdayBookings: Story = {
+  args: {
+    title: 'Bookings',
+    subtitle: 'Yesterday',
+    data: bookingsData,
+    isRevenue: false,
+  },
+};
+
+export const ThisWeekBookings: Story = {
+  args: {
+    title: 'Bookings',
+    subtitle: 'Mon 8th - Sun 14th Sept',
+    data: weeklyData,
+    isRevenue: false,
+  },
+};
+
+export const ThisMonthBookings: Story = {
+  args: {
+    title: 'Bookings',
+    subtitle: 'September 2025',
+    data: monthlyData.slice(0, 14),
+    isRevenue: false,
+  },
+};
+
+export const ThisYearBookings: Story = {
+  args: {
+    title: 'Bookings',
+    subtitle: '2025',
+    data: monthlyData,
+    isRevenue: false,
+  },
+};
+
+export const TodayRevenue: Story = {
+  args: {
+    title: 'Revenue',
+    subtitle: 'Today',
+    data: revenueData,
+    isRevenue: true,
+  },
+};
+
+export const ThisWeekRevenue: Story = {
+  args: {
+    title: 'Revenue',
+    subtitle: 'Mon 8th - Sun 14th Sept',
+    data: [
+      { time: 'Mon', value: 425.50 },
+      { time: 'Tue', value: 512.75 },
+      { time: 'Wed', value: 485.25 },
+      { time: 'Thu', value: 610.00 },
+      { time: 'Fri', value: 558.50 },
+      { time: 'Sat', value: 675.25 },
+      { time: 'Sun', value: 580.75 },
+    ],
+    isRevenue: true,
+  },
+};
+
+export const ThisYearRevenue: Story = {
+  args: {
+    title: 'Revenue',
+    subtitle: '2025',
+    data: [
+      { time: 'Jan', value: 1200 },
+      { time: 'Feb', value: 1350 },
+      { time: 'Mar', value: 1420 },
+      { time: 'Apr', value: 1600 },
+      { time: 'May', value: 1550 },
+      { time: 'Jun', value: 1750 },
+      { time: 'Jul', value: 1820 },
+      { time: 'Aug', value: 1680 },
+      { time: 'Sep', value: 1900 },
+      { time: 'Oct', value: 2100 },
+      { time: 'Nov', value: 1980 },
+      { time: 'Dec', value: 2250 },
+    ],
+    isRevenue: true,
+  },
+};