@takaro/lib-components 0.4.8 → 0.4.10

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

@@ -1,141 +0,0 @@
-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

@@ -1,132 +0,0 @@
-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

@@ -1,111 +0,0 @@
-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

@@ -1,131 +0,0 @@
-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

@@ -1,124 +0,0 @@
-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} />;
-};