نقشه گرمایی (Heat Map)

import { PartoHeatMap, toPersianDigits } from '@parto-system-design/ui';

// نام روزهای هفته به فارسی
const persianWeekdays = ['شنبه', 'یکشنبه', 'دوشنبه', 'سه‌شنبه', 'چهارشنبه', 'پنج‌شنبه', 'جمعه'];

// ساخت داده برای 24 ساعت
const data = persianWeekdays.map(day => ({
  id: day,  // مهم: id باید نام روز باشد (نه عدد)
  data: Array.from({ length: 24 }, (_, hour) => ({
    x: toPersianDigits(String(hour).padStart(2, '0')) + ':۰۰',
    y: Math.floor(Math.random() * 100),
  })),
}));

<div className="h-[400px]">
  <PartoHeatMap
    data={data}
    locale="fa"
    margin={{ top: 60, right: 50, bottom: 60, left: 150 }}
    axisTop={{
      tickSize: 0,
      tickPadding: 8,
    }}
    axisLeft={{
      tickSize: 0,
      tickPadding: 12,
      legend: 'روز هفته',
      legendPosition: 'middle',
      legendOffset: -120,
    }}
    axisBottom={{
      legend: 'ساعات',
      legendPosition: 'middle',
      legendOffset: 45,
    }}
  />
</div>

<PartoHeatMap
  data={dataFa}
  locale="fa"  // اعداد فارسی + نام روزهای فارسی
  valueFormat={(value) => toPersianDigits(value)}
  axisLeft={{
    legend: 'روز هفته',
  }}
  axisBottom={{
    legend: 'ساعات',
  }}
/>

<PartoHeatMap
  data={dataEn}
  locale="en"  // اعداد انگلیسی + نام روزهای انگلیسی
  axisLeft={{
    legend: 'Day of Week',
  }}
  axisBottom={{
    legend: 'Hours',
  }}
/>

import { toPersianDigits } from '@parto-system-design/ui';

<PartoHeatMap
  data={data}
  dir="rtl"
  valueFormat={(value) => toPersianDigits(value)}
  axisBottom={{
    format: (value) => {
      const hour = parseInt(value.split(':')[0]);
      if (hour % 3 === 0) {
        return toPersianDigits(hour.toString().padStart(2, '0')) + ':' + toPersianDigits('00');
      }
      return '';
    }
  }}
/>

<PartoHeatMap
  data={data}
  colors={{
    type: 'sequential',
    scheme: 'blues', // یا 'greens', 'reds', 'purples', etc.
  }}
/>

<PartoHeatMap
  data={data}
  tooltip={({ cell }) => (
    <div className="bg-popover text-popover-foreground rounded-md shadow-lg px-3 py-2 border border-border">
      <div className="font-semibold">
        {cell.serieId} - {cell.data.x}
      </div>
      <div>
        فعالیت: <span className="font-bold">{cell.value}</span>
      </div>
    </div>
  )}
/>

// ✅ درست
const data = [
  { id: 'شنبه', data: [...] },
  { id: 'یکشنبه', data: [...] },
];

// ❌ اشتباه
const data = [
  { id: 1, data: [...] },  // نباید عدد باشد
  { id: 2, data: [...] },
];

'use client';

import { PartoHeatMap, toPersianDigits } from '@parto-system-design/ui';

// نام روزهای هفته به فارسی
const persianWeekdays = ['شنبه', 'یکشنبه', 'دوشنبه', 'سه‌شنبه', 'چهارشنبه', 'پنج‌شنبه', 'جمعه'];

const data = persianWeekdays.map(day => ({
  id: day,  // استفاده از نام روز
  data: Array.from({ length: 24 }, (_, i) => ({
    x: toPersianDigits(String(i).padStart(2, '0')) + ':۰۰',
    y: Math.floor(Math.random() * 100),
  })),
}));

export function ActivityHeatMap() {
  return (
    <div className="h-[500px]">
      <PartoHeatMap
        data={data}
        locale="fa"
        margin={{ top: 60, right: 50, bottom: 60, left: 150 }}
        valueFormat={(value) => toPersianDigits(value)}
        axisTop={{
          tickSize: 0,
          tickPadding: 8,
          format: (value) => {
            const hour = parseInt(value.split(':')[0]);
            return hour % 3 === 0 ? value : '';
          }
        }}
        axisLeft={{
          tickSize: 0,
          tickPadding: 12,
          legend: 'روز هفته',
          legendPosition: 'middle',
          legendOffset: -120,
        }}
        axisBottom={{
          tickSize: 0,
          tickPadding: 8,
          legend: 'ساعات',
          legendPosition: 'middle',
          legendOffset: 45,
          format: (value) => {
            const hour = parseInt(value.split(':')[0]);
            return hour % 3 === 0 ? value : '';
          }
        }}
        colors={{
          type: 'sequential',
          scheme: 'blues',
        }}
        borderRadius={2}
        borderWidth={3}
        enableLabels={false}
        animate={true}
        legends={[
          {
            anchor: 'bottom',
            translateY: 30,
            length: 400,
            thickness: 8,
            direction: 'row',
            title: 'شدت فعالیت',
          }
        ]}
      />
    </div>
  );
}