@licklist/design 0.78.21 → 0.78.26

package/src/v2/dashboard-analytics/chart/Chart.scss

@@ -0,0 +1,424 @@
+@import '../../design-system/typography/Typography.scss';
+
+.chart {
+  position: relative;
+  width: 100%;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 1.4375rem;
+  padding: 1rem;
+  background-color: var(--surface-primary);
+  border: 1px solid var(--border-primary);
+  border-radius: 0.5rem;
+  overflow: hidden;
+  box-sizing: border-box;
+  min-width: 0;
+  transition: all 0.3s ease-in-out;
+
+  &--loading {
+    .chart__wrapper {
+      opacity: 0.6;
+      transition: opacity 0.3s ease-in-out;
+    }
+  }
+
+  &--refreshing {
+    .chart__wrapper {
+      opacity: 0.95;
+      transition: opacity 0.2s ease-in-out;
+    }
+    
+    border-color: rgba(31, 154, 181, 0.3);
+  }
+
+  &[data-full-width="true"] {
+    .chart__container {
+      margin-left: -1rem;
+      margin-right: -1rem;
+      padding: 0;
+      width: calc(100% + 2rem);
+    }
+    
+    .chart__wrapper {
+      margin-left: 0;
+      margin-right: 0;
+      width: 100%;
+      max-width: none;
+    }
+  }
+
+  @media (max-width: 480px) {
+    padding: 0.75rem;
+    gap: 1rem;
+  }
+
+  @media (min-width: 481px) and (max-width: 768px) {
+    padding: 1rem;
+    gap: 1.25rem;
+  }
+
+  @media (min-width: 769px) {
+    padding: 1.375rem 1rem;
+    gap: 1.4375rem;
+  }
+
+  &__header {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    margin-left: 0.25rem;
+
+    @media (min-width: 768px) {
+      margin-left: 0.75rem;
+    }
+  }
+
+  &__title {
+    @include typography('heading.h3');
+    line-height: 1.2;
+    color: var(--label-primary);
+    margin: 0;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    @media (min-width: 480px) {
+      font-size: 16px;
+    }
+
+    @media (min-width: 768px) {
+      font-size: 17px;
+      line-height: 1.176;
+    }
+  }
+
+  &__title-refresh-indicator {
+    font-size: 12px;
+    color: var(--label-primary);
+    animation: refreshSpin 1s linear infinite;
+    opacity: 0.7;
+  }
+
+  @keyframes refreshSpin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+
+  &__subtitle {
+
+    @include typography('heading.h5');
+    line-height: 1.4;
+    color: var(--label-secondary);
+    margin: 0;
+    padding: 0;
+
+    @media (min-width: 480px) {
+      font-size: 12.5px;
+    }
+
+    @media (min-width: 768px) {
+      font-size: 13px;
+      line-height: 1.538;
+    }
+  }
+
+  &__container {
+    width: 100%;
+    max-width: 100%;
+    margin: 0 -1rem -1rem -1rem;
+    padding: 0;
+    overflow: visible;
+    box-sizing: border-box;
+    transition: all 0.3s ease-in-out;
+    position: relative;
+
+    @media (max-width: 480px) {
+      margin: 0 -0.75rem -0.75rem -0.75rem;
+      padding: 0;
+    }
+
+    @media (min-width: 768px) {
+      margin: 0 -1rem -1.375rem -1rem;
+      padding: 0;
+    }
+  }
+
+  &__loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(248, 248, 250, 0.8);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+    backdrop-filter: blur(1px);
+    transition: opacity 0.3s ease-in-out;
+  }
+
+  @keyframes chartSpin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+  &__wrapper {
+    width: 100%;
+    max-width: 100%;
+    height: 220px;
+    overflow: visible;
+    box-sizing: border-box;
+    position: relative;
+    transition: all 0.3s ease-in-out;
+
+    @media (min-width: 480px) {
+      height: 250px;
+    }
+
+    @media (min-width: 768px) {
+      height: 280px;
+    }
+
+    @media (min-width: 1024px) {
+      height: 300px;
+    }
+
+    @media (min-width: 1440px) {
+      height: 320px;
+    }
+  }
+
+  &__tooltip {
+    background-color: #fff;
+    border: 1px solid var(--border-primary);
+    border-radius: 0.5rem;
+    padding: 0.5rem;
+    box-shadow: 0 4px 12px rgba(18, 30, 82, 0.1);
+    min-width: 80px;
+    max-width: 180px;
+
+    @media (min-width: 480px) {
+      padding: 0.625rem;
+      min-width: 90px;
+      max-width: 190px;
+    }
+
+    @media (min-width: 768px) {
+      padding: 0.75rem;
+      min-width: 100px;
+      max-width: 200px;
+    }
+  }
+
+  &__tooltip-label {
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 1;
+    color: var(--label-secondary);
+    margin-bottom: 0.25rem;
+
+    @media (min-width: 480px) {
+      font-size: 12px;
+    }
+
+    @media (min-width: 768px) {
+      font-size: 13px;
+    }
+  }
+
+  &__tooltip-value {
+    font-size: 13px;
+    font-weight: 700;
+    line-height: 1;
+    color: var(--label-primary);
+    margin-bottom: 0.25rem;
+
+    @media (min-width: 480px) {
+      font-size: 14px;
+    }
+
+    @media (min-width: 768px) {
+      font-size: 15px;
+    }
+  }
+
+  &__tooltip-participants {
+    font-size: 9px;
+    font-weight: 500;
+    line-height: 1;
+    color: var(--label-secondary);
+    margin-bottom: 0.5rem;
+
+    @media (min-width: 480px) {
+      font-size: 9.5px;
+    }
+
+    @media (min-width: 768px) {
+      font-size: 10px;
+    }
+  }
+
+  &__tooltip-trend {
+    font-size: 10px;
+    font-weight: 500;
+    line-height: 1;
+    margin-bottom: 0.25rem;
+
+    @media (min-width: 480px) {
+      font-size: 10.5px;
+    }
+
+    @media (min-width: 768px) {
+      font-size: 11px;
+    }
+
+    &.positive {
+      color: var(--success-dark, #2D6B18);
+    }
+
+    &.negative {
+      color: var(--error-dark, #CC3C35);
+    }
+
+    &.neutral {
+      color: var(--label-secondary);
+    }
+  }
+
+  &__tooltip-trend-content {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  &__tooltip-trend-icon {
+    flex-shrink: 0;
+
+    &.positive {
+      color: var(--success-dark, #2D6B18);
+    }
+
+    &.negative {
+      color: var(--error-dark, #CC3C35);
+    }
+  }
+
+  &__tooltip-trend-value {
+    font-weight: 600;
+  }
+
+  &__tooltip-comparison {
+    font-size: 9px;
+    font-weight: 500;
+    line-height: 1;
+    color: var(--label-secondary);
+    margin-top: 0.25rem;
+
+    @media (min-width: 480px) {
+      font-size: 9.5px;
+    }
+
+    @media (min-width: 768px) {
+      font-size: 10px;
+    }
+  }
+
+  :global {
+    .recharts-cartesian-axis-tick {
+      text {
+        fill: var(--label-secondary) !important;
+        @include typography('heading.h6');
+        @media (min-width: 480px) {
+          font-size: 10px !important;
+        }
+
+        @media (min-width: 768px) {
+          font-size: 11px !important;
+        }
+      }
+    }
+
+    .recharts-cartesian-grid-horizontal line,
+    .recharts-cartesian-grid-vertical line {
+      stroke: var(--label-secondary) !important;
+      stroke-dasharray: 3 3 !important;
+    }
+
+    .recharts-tooltip-cursor {
+      fill: transparent;
+    }
+
+    .recharts-reference-line {
+      line {
+        stroke: var(--fill-action) !important;
+        stroke-width: 2 !important;
+        stroke-dasharray: 6 4 !important;
+      }
+    }
+
+    .recharts-area-dot {
+      r: 3 !important;
+
+      @media (min-width: 480px) {
+        r: 3.5 !important;
+      }
+
+      @media (min-width: 768px) {
+        r: 4 !important;
+      }
+    }
+
+    .recharts-active-dot {
+      r: 5 !important;
+
+      @media (min-width: 480px) {
+        r: 5.5 !important;
+      }
+
+      @media (min-width: 768px) {
+        r: 6 !important;
+      }
+    }
+
+    .recharts-responsive-container {
+      width: 100% !important;
+      height: 100% !important;
+      transition: all 0.3s ease-in-out;
+    }
+
+    .recharts-surface {
+      width: 100% !important;
+      transition: all 0.3s ease-in-out;
+    }
+
+    .recharts-area {
+      filter: drop-shadow(0 2px 8px rgba(31, 154, 181, 0.15));
+      transition: filter 0.3s ease-in-out;
+      
+      &:hover {
+        filter: drop-shadow(0 4px 12px rgba(31, 154, 181, 0.25));
+      }
+    }
+
+    .recharts-cartesian-axis.recharts-yAxis {
+      .recharts-cartesian-axis-tick {
+        text {
+          text-anchor: end !important;
+        }
+      }
+    }
+  }
+
+  &[data-full-width="true"] {
+    :global {
+      .recharts-cartesian-axis-tick {
+        text {
+          font-size: 10px !important;
+        }
+      }
+    }
+  }
+}

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,
+  },
+};