@takaro/lib-components 0.3.3 → 0.4.0

package/src/components/charts/echarts/EChartsHeatmap.tsx

@@ -0,0 +1,141 @@
+import { FC, useMemo } from 'react';
+import { EChartsOption } from 'echarts';
+import { ResponsiveECharts, EChartsBaseProps } from './EChartsBase';
+import { useTheme } from '../../../hooks';
+
+export interface EChartsHeatmapProps<T = any> extends Omit<EChartsBaseProps, 'option'> {
+  data: T[];
+  xAccessor: (d: T) => number;
+  yAccessor: (d: T) => number;
+  valueAccessor: (d: T) => number;
+  xCategories?: string[];
+  yCategories?: string[];
+  title?: string;
+  subtitle?: string;
+  xAxisLabel?: string;
+  yAxisLabel?: string;
+  showLabel?: boolean;
+  tooltipFormatter?: (params: any) => string;
+  minValue?: number;
+  maxValue?: number;
+}
+
+export const EChartsHeatmap: FC<EChartsHeatmapProps> = ({
+  data,
+  xAccessor,
+  yAccessor,
+  valueAccessor,
+  xCategories,
+  yCategories,
+  title,
+  subtitle,
+  xAxisLabel,
+  yAxisLabel,
+  showLabel = false,
+  tooltipFormatter,
+  minValue,
+  maxValue,
+  ...chartProps
+}) => {
+  const theme = useTheme();
+
+  const option: EChartsOption = useMemo(() => {
+    const heatmapData = data.map((d) => [xAccessor(d), yAccessor(d), valueAccessor(d)]);
+    const values = data.map(valueAccessor);
+    const min = minValue !== undefined ? minValue : Math.min(...values);
+    const max = maxValue !== undefined ? maxValue : Math.max(...values);
+
+    // Default categories if not provided
+    const defaultXCategories = Array.from(new Set(data.map(xAccessor)))
+      .sort((a, b) => a - b)
+      .map(String);
+    const defaultYCategories = Array.from(new Set(data.map(yAccessor)))
+      .sort((a, b) => a - b)
+      .map(String);
+
+    return {
+      title: title
+        ? {
+            text: title,
+            subtext: subtitle,
+            left: 'center',
+          }
+        : undefined,
+      tooltip: {
+        position: 'top',
+        formatter: tooltipFormatter,
+      },
+      grid: {
+        left: '3%',
+        right: '10%',
+        bottom: '3%',
+        containLabel: true,
+      },
+      xAxis: {
+        type: 'category',
+        data: xCategories || defaultXCategories,
+        name: xAxisLabel,
+        nameLocation: 'middle',
+        nameGap: 30,
+        splitArea: {
+          show: true,
+        },
+      },
+      yAxis: {
+        type: 'category',
+        data: yCategories || defaultYCategories,
+        name: yAxisLabel,
+        nameLocation: 'middle',
+        nameGap: 50,
+        splitArea: {
+          show: true,
+        },
+      },
+      visualMap: {
+        min: min,
+        max: max,
+        calculable: true,
+        orient: 'vertical',
+        right: '0%',
+        top: 'middle',
+        inRange: {
+          color: [theme.colors.background, theme.colors.primary + '40', theme.colors.primary],
+        },
+      },
+      series: [
+        {
+          name: 'Heatmap',
+          type: 'heatmap',
+          data: heatmapData,
+          label: {
+            show: showLabel,
+          },
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowColor: 'rgba(0, 0, 0, 0.5)',
+            },
+          },
+        },
+      ],
+    };
+  }, [
+    data,
+    xAccessor,
+    yAccessor,
+    valueAccessor,
+    xCategories,
+    yCategories,
+    title,
+    subtitle,
+    xAxisLabel,
+    yAxisLabel,
+    showLabel,
+    tooltipFormatter,
+    minValue,
+    maxValue,
+    theme,
+  ]);
+
+  return <ResponsiveECharts option={option} {...chartProps} />;
+};

package/src/components/charts/echarts/EChartsLine.stories.tsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { EChartsLine, EChartsLineProps } from './EChartsLine';
+import { styled } from '../../../styled';
+import { Card } from '../../../components';
+import { faker } from '@faker-js/faker';
+
+export default {
+  title: 'Charts/ECharts/Line',
+  component: EChartsLine,
+  args: {
+    smooth: true,
+    area: false,
+    showGrid: true,
+    showLegend: true,
+    xAxisLabel: 'Time',
+    yAxisLabel: 'Value',
+    title: 'Line Chart Example',
+    subtitle: 'Sample data visualization',
+  },
+} as Meta<EChartsLineProps>;
+
+const Wrapper = styled.div`
+  height: 500px;
+  width: 100%;
+`;
+
+interface TimeSeriesData {
+  date: string;
+  value: number;
+}
+
+// Generate sample time series data
+function generateTimeSeriesData(days: number = 30): TimeSeriesData[] {
+  const data: TimeSeriesData[] = [];
+  const now = new Date();
+
+  for (let i = days - 1; i >= 0; i--) {
+    const date = new Date(now);
+    date.setDate(date.getDate() - i);
+
+    data.push({
+      date: date.toLocaleDateString(),
+      value: faker.number.int({ min: 100, max: 500 }) + Math.sin(i / 5) * 50,
+    });
+  }
+
+  return data;
+}
+
+export const Default: StoryFn<EChartsLineProps<TimeSeriesData>> = (args) => {
+  const data = generateTimeSeriesData();
+
+  return (
+    <Wrapper>
+      <EChartsLine<TimeSeriesData>
+        {...args}
+        data={data}
+        xAccessor={(d) => d.date}
+        yAccessor={(d) => d.value}
+        seriesName="Daily Value"
+      />
+    </Wrapper>
+  );
+};
+
+export const AreaChart: StoryFn<EChartsLineProps<TimeSeriesData>> = (args) => {
+  const data = generateTimeSeriesData();
+
+  return (
+    <Wrapper>
+      <EChartsLine<TimeSeriesData>
+        {...args}
+        data={data}
+        xAccessor={(d) => d.date}
+        yAccessor={(d) => d.value}
+        seriesName="Daily Revenue"
+        area={true}
+        title="Revenue Over Time"
+        subtitle="Last 30 days"
+      />
+    </Wrapper>
+  );
+};
+
+export const MultipleLines: StoryFn = () => {
+  const data = generateTimeSeriesData();
+
+  return (
+    <Wrapper>
+      <Card variant="outline">
+        <Card.Title label="Server Performance Metrics" />
+        <Card.Body>
+          <div style={{ height: '400px' }}>
+            <EChartsLine
+              data={data}
+              xAccessor={(d) => d.date}
+              yAccessor={(d) => d.value}
+              seriesName="CPU Usage"
+              smooth={true}
+              showGrid={true}
+              xAxisLabel="Date"
+              yAxisLabel="Usage (%)"
+              tooltipFormatter={(params: any) => {
+                return `${params[0].name}<br/>${params[0].seriesName}: ${params[0].value}%`;
+              }}
+            />
+          </div>
+        </Card.Body>
+      </Card>
+    </Wrapper>
+  );
+};
+
+export const SteppedLine: StoryFn<EChartsLineProps<TimeSeriesData>> = (args) => {
+  const data = generateTimeSeriesData(20);
+
+  return (
+    <Wrapper>
+      <EChartsLine<TimeSeriesData>
+        {...args}
+        data={data}
+        xAccessor={(d) => d.date}
+        yAccessor={(d) => d.value}
+        seriesName="Player Count"
+        smooth={false}
+        title="Players Online"
+        subtitle="Real-time monitoring"
+      />
+    </Wrapper>
+  );
+};

package/src/components/charts/echarts/EChartsLine.tsx

@@ -0,0 +1,111 @@
+import { FC, useMemo } from 'react';
+import { EChartsOption } from 'echarts';
+import { ResponsiveECharts, EChartsBaseProps } from './EChartsBase';
+
+export interface EChartsLineProps<T = any> extends Omit<EChartsBaseProps, 'option'> {
+  data: T[];
+  xAccessor: (d: T) => string | number | Date;
+  yAccessor: (d: T) => number;
+  seriesName?: string;
+  smooth?: boolean;
+  area?: boolean;
+  showGrid?: boolean;
+  showLegend?: boolean;
+  xAxisLabel?: string;
+  yAxisLabel?: string;
+  title?: string;
+  subtitle?: string;
+  tooltipFormatter?: (params: any) => string;
+}
+
+export const EChartsLine: FC<EChartsLineProps> = ({
+  data,
+  xAccessor,
+  yAccessor,
+  seriesName = 'Value',
+  smooth = true,
+  area = false,
+  showGrid = true,
+  showLegend = false,
+  xAxisLabel,
+  yAxisLabel,
+  title,
+  subtitle,
+  tooltipFormatter,
+  ...chartProps
+}) => {
+  const option: EChartsOption = useMemo(() => {
+    const xData = data.map(xAccessor);
+    const yData = data.map(yAccessor);
+
+    return {
+      title: title
+        ? {
+            text: title,
+            subtext: subtitle,
+            left: 'center',
+          }
+        : undefined,
+      legend: showLegend
+        ? {
+            data: [seriesName],
+            top: 30,
+          }
+        : undefined,
+      grid: showGrid
+        ? {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true,
+          }
+        : undefined,
+      tooltip: {
+        trigger: 'axis',
+        formatter: tooltipFormatter,
+      },
+      xAxis: {
+        type: 'category',
+        data: xData,
+        name: xAxisLabel,
+        nameLocation: 'middle',
+        nameGap: 30,
+        boundaryGap: false,
+      },
+      yAxis: {
+        type: 'value',
+        name: yAxisLabel,
+        nameLocation: 'middle',
+        nameGap: 50,
+      },
+      series: [
+        {
+          name: seriesName,
+          type: 'line',
+          data: yData,
+          smooth: smooth,
+          areaStyle: area ? {} : undefined,
+          emphasis: {
+            focus: 'series',
+          },
+        },
+      ],
+    };
+  }, [
+    data,
+    xAccessor,
+    yAccessor,
+    seriesName,
+    smooth,
+    area,
+    showGrid,
+    showLegend,
+    xAxisLabel,
+    yAxisLabel,
+    title,
+    subtitle,
+    tooltipFormatter,
+  ]);
+
+  return <ResponsiveECharts option={option} {...chartProps} />;
+};

package/src/components/charts/echarts/EChartsPie.stories.tsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { EChartsPie, EChartsPieProps } from './EChartsPie';
+import { styled } from '../../../styled';
+import { Card } from '../../../components';
+import { faker } from '@faker-js/faker';
+
+export default {
+  title: 'Charts/ECharts/Pie',
+  component: EChartsPie,
+  args: {
+    donut: false,
+    showLegend: true,
+    showLabel: true,
+    title: 'Pie Chart Example',
+  },
+} as Meta<EChartsPieProps>;
+
+const Wrapper = styled.div`
+  height: 500px;
+  width: 100%;
+`;
+
+interface SegmentData {
+  category: string;
+  count: number;
+}
+
+// Generate sample segment data
+function generateSegmentData(): SegmentData[] {
+  return [
+    { category: 'New Players', count: faker.number.int({ min: 100, max: 300 }) },
+    { category: 'Regular Players', count: faker.number.int({ min: 200, max: 500 }) },
+    { category: 'VIP Players', count: faker.number.int({ min: 50, max: 150 }) },
+    { category: 'Inactive', count: faker.number.int({ min: 30, max: 100 }) },
+  ];
+}
+
+export const Default: StoryFn<EChartsPieProps<SegmentData>> = (args) => {
+  const data = generateSegmentData();
+
+  return (
+    <Wrapper>
+      <EChartsPie<SegmentData>
+        {...args}
+        data={data}
+        nameAccessor={(d) => d.category}
+        valueAccessor={(d) => d.count}
+        seriesName="Player Segments"
+      />
+    </Wrapper>
+  );
+};
+
+export const DonutChart: StoryFn<EChartsPieProps<SegmentData>> = (args) => {
+  const data = generateSegmentData();
+
+  return (
+    <Wrapper>
+      <EChartsPie<SegmentData>
+        {...args}
+        data={data}
+        nameAccessor={(d) => d.category}
+        valueAccessor={(d) => d.count}
+        seriesName="Distribution"
+        donut={true}
+        title="Customer Segments"
+        subtitle="Based on purchase frequency"
+      />
+    </Wrapper>
+  );
+};
+
+export const RoseChart: StoryFn<EChartsPieProps<SegmentData>> = (args) => {
+  const categories = [
+    { category: 'Monday', count: 120 },
+    { category: 'Tuesday', count: 200 },
+    { category: 'Wednesday', count: 150 },
+    { category: 'Thursday', count: 180 },
+    { category: 'Friday', count: 290 },
+    { category: 'Saturday', count: 330 },
+    { category: 'Sunday', count: 310 },
+  ];
+
+  return (
+    <Wrapper>
+      <EChartsPie
+        {...args}
+        data={categories}
+        nameAccessor={(d) => d.category}
+        valueAccessor={(d) => d.count}
+        seriesName="Activity by Day"
+        roseType="radius"
+        title="Weekly Activity Distribution"
+        showLegend={false}
+      />
+    </Wrapper>
+  );
+};
+
+export const OrderStatusDistribution: StoryFn = () => {
+  const orderStatus = [
+    { category: 'Completed', count: 450 },
+    { category: 'Paid', count: 120 },
+    { category: 'Pending', count: 80 },
+    { category: 'Cancelled', count: 35 },
+  ];
+
+  return (
+    <Wrapper>
+      <Card variant="outline">
+        <Card.Title label="Order Status Distribution" />
+        <Card.Body>
+          <div style={{ height: '400px' }}>
+            <EChartsPie
+              data={orderStatus}
+              nameAccessor={(d) => d.category}
+              valueAccessor={(d) => d.count}
+              seriesName="Orders"
+              donut={true}
+              radius={['45%', '75%']}
+              tooltipFormatter={(params: any) => {
+                return `${params.seriesName}<br/>${params.name}: ${params.value} (${params.percent}%)`;
+              }}
+            />
+          </div>
+        </Card.Body>
+      </Card>
+    </Wrapper>
+  );
+};

package/src/components/charts/echarts/EChartsPie.tsx

@@ -0,0 +1,124 @@
+import { FC, useMemo } from 'react';
+import { EChartsOption } from 'echarts';
+import { ResponsiveECharts, EChartsBaseProps } from './EChartsBase';
+
+export interface EChartsPieProps<T = any> extends Omit<EChartsBaseProps, 'option'> {
+  data: T[];
+  nameAccessor: (d: T) => string;
+  valueAccessor: (d: T) => number;
+  seriesName?: string;
+  donut?: boolean;
+  roseType?: boolean | 'radius' | 'area';
+  showLegend?: boolean;
+  showLabel?: boolean;
+  title?: string;
+  subtitle?: string;
+  radius?: string | [string, string];
+  center?: [string, string];
+  tooltipFormatter?: (params: any) => string;
+  legendOrient?: 'horizontal' | 'vertical';
+  legendLeft?: string | number;
+  legendTop?: string | number;
+}
+
+export const EChartsPie: FC<EChartsPieProps> = ({
+  data,
+  nameAccessor,
+  valueAccessor,
+  seriesName = 'Value',
+  donut = false,
+  roseType = false,
+  showLegend = true,
+  showLabel = false,
+  title,
+  subtitle,
+  radius,
+  center = ['50%', '50%'],
+  tooltipFormatter,
+  legendOrient = 'vertical',
+  legendLeft = 'left',
+  legendTop = 'middle',
+  ...chartProps
+}) => {
+  const option: EChartsOption = useMemo(() => {
+    const pieData = data.map((d) => ({
+      name: nameAccessor(d),
+      value: valueAccessor(d),
+    }));
+
+    const defaultRadius = donut ? ['40%', '70%'] : '70%';
+    const actualRadius = radius || defaultRadius;
+
+    const series: any = {
+      name: seriesName,
+      type: 'pie',
+      radius: actualRadius,
+      center: center,
+      data: pieData,
+      label: showLabel
+        ? {
+            show: true,
+            formatter: '{b}: {d}%',
+          }
+        : {
+            show: false,
+          },
+      labelLine: {
+        show: showLabel,
+      },
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: 'rgba(0, 0, 0, 0.5)',
+        },
+      },
+    };
+
+    // Only add roseType if it's not false
+    if (roseType !== false) {
+      series.roseType = roseType;
+    }
+
+    return {
+      title: title
+        ? {
+            text: title,
+            subtext: subtitle,
+            left: 'center',
+          }
+        : undefined,
+      legend: showLegend
+        ? {
+            orient: legendOrient,
+            left: legendLeft,
+            top: legendTop,
+          }
+        : undefined,
+      tooltip: {
+        trigger: 'item',
+        formatter: tooltipFormatter || '{a} <br/>{b}: {c} ({d}%)',
+      },
+      series: [series],
+    };
+  }, [
+    data,
+    nameAccessor,
+    valueAccessor,
+    seriesName,
+    donut,
+    roseType,
+    showLegend,
+    showLabel,
+    title,
+    subtitle,
+    radius,
+    center,
+    tooltipFormatter,
+    legendOrient,
+    legendLeft,
+    legendTop,
+  ]);
+
+  return <ResponsiveECharts option={option} {...chartProps} />;
+};