@takaro/lib-components 0.4.9 → 0.4.10

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

@@ -1,264 +0,0 @@
-import { FC, useEffect, useRef, useMemo } from 'react';
-import ReactEChartsCore from 'echarts-for-react/lib/core';
-import * as echarts from 'echarts/core';
-import { CanvasRenderer } from 'echarts/renderers';
-import {
-  TitleComponent,
-  TooltipComponent,
-  GridComponent,
-  LegendComponent,
-  ToolboxComponent,
-  DataZoomComponent,
-  VisualMapComponent,
-  MarkLineComponent,
-  MarkPointComponent,
-  MarkAreaComponent,
-  PolarComponent,
-} from 'echarts/components';
-import {
-  LineChart,
-  BarChart,
-  PieChart,
-  ScatterChart,
-  RadarChart,
-  MapChart,
-  TreeChart,
-  TreemapChart,
-  GraphChart,
-  GaugeChart,
-  FunnelChart,
-  ParallelChart,
-  SankeyChart,
-  BoxplotChart,
-  CandlestickChart,
-  EffectScatterChart,
-  LinesChart,
-  HeatmapChart,
-  PictorialBarChart,
-  ThemeRiverChart,
-  SunburstChart,
-  CustomChart,
-} from 'echarts/charts';
-import { useTheme } from '../../../hooks';
-import { ParentSize } from '@visx/responsive';
-import { EChartsOption } from 'echarts';
-
-// Register all components
-echarts.use([
-  CanvasRenderer,
-  TitleComponent,
-  TooltipComponent,
-  GridComponent,
-  LegendComponent,
-  ToolboxComponent,
-  DataZoomComponent,
-  VisualMapComponent,
-  MarkLineComponent,
-  MarkPointComponent,
-  MarkAreaComponent,
-  PolarComponent,
-  LineChart,
-  BarChart,
-  PieChart,
-  ScatterChart,
-  RadarChart,
-  MapChart,
-  TreeChart,
-  TreemapChart,
-  GraphChart,
-  GaugeChart,
-  FunnelChart,
-  ParallelChart,
-  SankeyChart,
-  BoxplotChart,
-  CandlestickChart,
-  EffectScatterChart,
-  LinesChart,
-  HeatmapChart,
-  PictorialBarChart,
-  ThemeRiverChart,
-  SunburstChart,
-  CustomChart,
-]);
-
-export interface EChartsBaseProps {
-  option: EChartsOption;
-  height?: string | number;
-  width?: string | number;
-  loading?: boolean;
-  onChartReady?: (instance: any) => void;
-  onEvents?: Record<string, (params: any) => void>;
-  style?: React.CSSProperties;
-  className?: string;
-}
-
-export const EChartsBase: FC<EChartsBaseProps> = ({
-  option,
-  height = '100%',
-  width = '100%',
-  loading = false,
-  onChartReady,
-  onEvents,
-  style,
-  className,
-}) => {
-  const theme = useTheme();
-  const chartRef = useRef<ReactEChartsCore>(null);
-
-  // Create theme-aware default options
-  const themeOptions = useMemo(() => {
-    return {
-      backgroundColor: 'transparent',
-      textStyle: {
-        color: theme.colors.text,
-        fontFamily: 'inherit',
-      },
-      title: {
-        textStyle: {
-          color: theme.colors.text,
-          fontSize: 16,
-          fontWeight: 'bold',
-        },
-        subtextStyle: {
-          color: theme.colors.textAlt,
-          fontSize: 12,
-        },
-      },
-      legend: {
-        textStyle: {
-          color: theme.colors.text,
-        },
-        pageTextStyle: {
-          color: theme.colors.text,
-        },
-      },
-      tooltip: {
-        backgroundColor: theme.colors.backgroundAlt,
-        borderColor: theme.colors.backgroundAccent,
-        borderWidth: 1,
-        textStyle: {
-          color: theme.colors.text,
-        },
-      },
-      grid: {
-        left: '3%',
-        right: '4%',
-        bottom: '3%',
-        containLabel: true,
-      },
-      xAxis: {
-        axisLine: {
-          lineStyle: {
-            color: theme.colors.backgroundAccent,
-          },
-        },
-        axisTick: {
-          lineStyle: {
-            color: theme.colors.backgroundAccent,
-          },
-        },
-        axisLabel: {
-          color: theme.colors.textAlt,
-        },
-        splitLine: {
-          lineStyle: {
-            color: theme.colors.backgroundAccent,
-            type: 'dashed',
-          },
-        },
-      },
-      yAxis: {
-        axisLine: {
-          lineStyle: {
-            color: theme.colors.backgroundAccent,
-          },
-        },
-        axisTick: {
-          lineStyle: {
-            color: theme.colors.backgroundAccent,
-          },
-        },
-        axisLabel: {
-          color: theme.colors.textAlt,
-        },
-        splitLine: {
-          lineStyle: {
-            color: theme.colors.backgroundAccent,
-            type: 'dashed',
-          },
-        },
-      },
-      color: [
-        theme.colors.primary,
-        theme.colors.success,
-        theme.colors.warning,
-        theme.colors.error,
-        theme.colors.info,
-        '#8b5cf6',
-        '#06b6d4',
-        '#f59e0b',
-        '#ec4899',
-        '#10b981',
-      ],
-    };
-  }, [theme]);
-
-  // Merge theme options with provided options
-  const mergedOptions = useMemo(() => {
-    // Check if this is a chart type that doesn't use axes
-    const hasNonCartesianChart =
-      option.series &&
-      Array.isArray(option.series) &&
-      option.series.some((s: any) =>
-        ['pie', 'radar', 'gauge', 'funnel', 'sankey', 'graph', 'tree', 'treemap', 'sunburst'].includes(s.type),
-      );
-
-    // Create adjusted theme options based on chart type
-    const adjustedThemeOptions = hasNonCartesianChart
-      ? {
-          backgroundColor: themeOptions.backgroundColor,
-          textStyle: themeOptions.textStyle,
-          title: themeOptions.title,
-          legend: themeOptions.legend,
-          tooltip: themeOptions.tooltip,
-          color: themeOptions.color,
-        }
-      : themeOptions;
-
-    return echarts.util.merge(adjustedThemeOptions, option);
-  }, [themeOptions, option]);
-
-  // Handle resize
-  useEffect(() => {
-    const handleResize = () => {
-      if (chartRef.current) {
-        const instance = chartRef.current.getEchartsInstance();
-        instance.resize();
-      }
-    };
-
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-
-  return (
-    <ReactEChartsCore
-      ref={chartRef}
-      echarts={echarts}
-      option={mergedOptions}
-      style={{ height, width, ...style }}
-      className={className}
-      showLoading={loading}
-      onChartReady={onChartReady}
-      onEvents={onEvents}
-      opts={{ renderer: 'canvas' }}
-      notMerge={true}
-      lazyUpdate={true}
-    />
-  );
-};
-
-// Wrapper with ParentSize for responsive sizing
-export const ResponsiveECharts: FC<Omit<EChartsBaseProps, 'width' | 'height'>> = (props) => {
-  return <ParentSize>{({ width, height }) => <EChartsBase {...props} width={width} height={height} />}</ParentSize>;
-};

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

@@ -1,164 +0,0 @@
-import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
-import { EChartsFunnel, EChartsFunnelProps } from './EChartsFunnel';
-import { styled } from '../../../styled';
-import { Card } from '../../../components';
-
-export default {
-  title: 'Charts/ECharts/Funnel',
-  component: EChartsFunnel,
-  args: {
-    showLegend: true,
-    showLabel: true,
-    sort: 'descending',
-    title: 'Funnel Chart',
-    gap: 2,
-  },
-} as Meta<EChartsFunnelProps>;
-
-const Wrapper = styled.div`
-  height: 500px;
-  width: 100%;
-`;
-
-interface FunnelData {
-  stage: string;
-  count: number;
-}
-
-// Generate sample funnel data
-function generateFunnelData(): FunnelData[] {
-  return [
-    { stage: 'Visits', count: 1000 },
-    { stage: 'Registrations', count: 650 },
-    { stage: 'First Purchase', count: 400 },
-    { stage: 'Repeat Purchase', count: 250 },
-    { stage: 'VIP Status', count: 100 },
-  ];
-}
-
-export const Default: StoryFn<EChartsFunnelProps<FunnelData>> = (args) => {
-  const data = generateFunnelData();
-
-  return (
-    <Wrapper>
-      <EChartsFunnel<FunnelData>
-        {...args}
-        data={data}
-        nameAccessor={(d) => d.stage}
-        valueAccessor={(d) => d.count}
-        seriesName="Conversion"
-      />
-    </Wrapper>
-  );
-};
-
-export const PlayerConversion: StoryFn = () => {
-  const conversionData = [
-    { stage: 'New Players', count: 5000 },
-    { stage: 'Tutorial Completed', count: 3500 },
-    { stage: 'First Mission', count: 2800 },
-    { stage: 'Level 10 Reached', count: 1800 },
-    { stage: 'First Purchase', count: 900 },
-    { stage: 'Regular Player', count: 450 },
-  ];
-
-  return (
-    <Wrapper>
-      <Card variant="outline">
-        <Card.Title label="Player Conversion Funnel" />
-        <Card.Body>
-          <div style={{ height: '400px' }}>
-            <EChartsFunnel
-              data={conversionData}
-              nameAccessor={(d) => d.stage}
-              valueAccessor={(d) => d.count}
-              seriesName="Players"
-              showLegend={false}
-              labelPosition="inside"
-              tooltipFormatter={(params: any) => {
-                return `${params.name}<br/>Players: ${params.value.toLocaleString()} (${params.percent}%)`;
-              }}
-            />
-          </div>
-        </Card.Body>
-      </Card>
-    </Wrapper>
-  );
-};
-
-export const SalesProcess: StoryFn<EChartsFunnelProps<FunnelData>> = (args) => {
-  const salesData = [
-    { stage: 'Leads', count: 100 },
-    { stage: 'Qualified', count: 80 },
-    { stage: 'Proposal', count: 60 },
-    { stage: 'Negotiation', count: 40 },
-    { stage: 'Closed', count: 30 },
-  ];
-
-  return (
-    <Wrapper>
-      <EChartsFunnel<FunnelData>
-        {...args}
-        data={salesData}
-        nameAccessor={(d) => d.stage}
-        valueAccessor={(d) => d.count}
-        seriesName="Sales"
-        title="Sales Pipeline"
-        subtitle="Q4 2024"
-        labelPosition="right"
-      />
-    </Wrapper>
-  );
-};
-
-export const AscendingFunnel: StoryFn<EChartsFunnelProps<FunnelData>> = (args) => {
-  const growthData = [
-    { stage: 'Bronze', count: 30 },
-    { stage: 'Silver', count: 50 },
-    { stage: 'Gold', count: 75 },
-    { stage: 'Platinum', count: 90 },
-    { stage: 'Diamond', count: 100 },
-  ];
-
-  return (
-    <Wrapper>
-      <EChartsFunnel<FunnelData>
-        {...args}
-        data={growthData}
-        nameAccessor={(d) => d.stage}
-        valueAccessor={(d) => d.count}
-        seriesName="Tier Distribution"
-        sort="ascending"
-        title="Player Tier Progression"
-        subtitle="Inverted funnel showing growth"
-        gap={5}
-      />
-    </Wrapper>
-  );
-};
-
-export const NoSort: StoryFn<EChartsFunnelProps<FunnelData>> = (args) => {
-  const customData = [
-    { stage: 'Start', count: 80 },
-    { stage: 'Middle', count: 100 },
-    { stage: 'Peak', count: 120 },
-    { stage: 'Decline', count: 60 },
-    { stage: 'End', count: 40 },
-  ];
-
-  return (
-    <Wrapper>
-      <EChartsFunnel<FunnelData>
-        {...args}
-        data={customData}
-        nameAccessor={(d) => d.stage}
-        valueAccessor={(d) => d.count}
-        seriesName="Custom Flow"
-        sort="none"
-        title="Custom Process Flow"
-        subtitle="Maintains data order"
-      />
-    </Wrapper>
-  );
-};

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

@@ -1,114 +0,0 @@
-import { FC, useMemo } from 'react';
-import { EChartsOption } from 'echarts';
-import { ResponsiveECharts, EChartsBaseProps } from './EChartsBase';
-
-export interface EChartsFunnelProps<T = any> extends Omit<EChartsBaseProps, 'option'> {
-  data: T[];
-  nameAccessor: (d: T) => string;
-  valueAccessor: (d: T) => number;
-  seriesName?: string;
-  showLegend?: boolean;
-  showLabel?: boolean;
-  title?: string;
-  subtitle?: string;
-  sort?: 'ascending' | 'descending' | 'none';
-  gap?: number;
-  tooltipFormatter?: (params: any) => string;
-  labelPosition?: 'left' | 'right' | 'inside';
-}
-
-export const EChartsFunnel: FC<EChartsFunnelProps> = ({
-  data,
-  nameAccessor,
-  valueAccessor,
-  seriesName = 'Funnel',
-  showLegend = true,
-  showLabel = true,
-  title,
-  subtitle,
-  sort = 'descending',
-  gap = 2,
-  tooltipFormatter,
-  labelPosition = 'inside',
-  ...chartProps
-}) => {
-  const option: EChartsOption = useMemo(() => {
-    const funnelData = data.map((d) => ({
-      name: nameAccessor(d),
-      value: valueAccessor(d),
-    }));
-
-    return {
-      title: title
-        ? {
-            text: title,
-            subtext: subtitle,
-            left: 'center',
-          }
-        : undefined,
-      legend: showLegend
-        ? {
-            orient: 'vertical',
-            left: 'left',
-            top: 'middle',
-          }
-        : undefined,
-      tooltip: {
-        trigger: 'item',
-        formatter: tooltipFormatter || '{a} <br/>{b}: {c} ({d}%)',
-      },
-      series: [
-        {
-          name: seriesName,
-          type: 'funnel',
-          left: '10%',
-          top: 60,
-          bottom: 60,
-          width: '80%',
-          min: 0,
-          max: 100,
-          minSize: '0%',
-          maxSize: '100%',
-          sort: sort,
-          gap: gap,
-          label: {
-            show: showLabel,
-            position: labelPosition,
-            formatter: '{b}: {c}',
-          },
-          labelLine: {
-            length: 10,
-            lineStyle: {
-              width: 1,
-              type: 'solid',
-            },
-          },
-          itemStyle: {
-            borderWidth: 0,
-          },
-          emphasis: {
-            label: {
-              fontSize: 20,
-            },
-          },
-          data: funnelData,
-        },
-      ],
-    };
-  }, [
-    data,
-    nameAccessor,
-    valueAccessor,
-    seriesName,
-    showLegend,
-    showLabel,
-    title,
-    subtitle,
-    sort,
-    gap,
-    tooltipFormatter,
-    labelPosition,
-  ]);
-
-  return <ResponsiveECharts option={option} {...chartProps} />;
-};

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

@@ -1,168 +0,0 @@
-import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
-import { EChartsHeatmap, EChartsHeatmapProps } from './EChartsHeatmap';
-import { styled } from '../../../styled';
-import { Card } from '../../../components';
-import { faker } from '@faker-js/faker';
-
-export default {
-  title: 'Charts/ECharts/Heatmap',
-  component: EChartsHeatmap,
-  args: {
-    title: 'Heatmap Example',
-    xAxisLabel: 'Hour',
-    yAxisLabel: 'Day',
-    showLabel: false,
-  },
-} as Meta<EChartsHeatmapProps>;
-
-const Wrapper = styled.div`
-  height: 500px;
-  width: 100%;
-`;
-
-interface HeatmapData {
-  hour: number;
-  day: number;
-  value: number;
-}
-
-// Generate sample heatmap data
-function generateHeatmapData(): HeatmapData[] {
-  const data: HeatmapData[] = [];
-  const days = 7;
-  const hours = 24;
-
-  for (let day = 0; day < days; day++) {
-    for (let hour = 0; hour < hours; hour++) {
-      // Simulate peak hours (lunch and evening)
-      let baseValue = 10;
-      if (hour >= 11 && hour <= 13) baseValue = 40; // Lunch peak
-      if (hour >= 18 && hour <= 21) baseValue = 60; // Evening peak
-      if (hour >= 0 && hour <= 6) baseValue = 2; // Night low
-
-      // Weekend bonus
-      if (day === 5 || day === 6) baseValue *= 1.5;
-
-      data.push({
-        hour,
-        day,
-        value: baseValue + faker.number.int({ min: -5, max: 20 }),
-      });
-    }
-  }
-
-  return data;
-}
-
-const dayNames = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
-const hourLabels = Array.from({ length: 24 }, (_, i) =>
-  i === 0 ? '12am' : i < 12 ? `${i}am` : i === 12 ? '12pm' : `${i - 12}pm`,
-);
-
-export const Default: StoryFn<EChartsHeatmapProps<HeatmapData>> = (args) => {
-  const data = generateHeatmapData();
-
-  return (
-    <Wrapper>
-      <EChartsHeatmap<HeatmapData>
-        {...args}
-        data={data}
-        xAccessor={(d) => d.hour}
-        yAccessor={(d) => d.day}
-        valueAccessor={(d) => d.value}
-        xCategories={hourLabels}
-        yCategories={dayNames}
-      />
-    </Wrapper>
-  );
-};
-
-export const PeakSalesHeatmap: StoryFn = () => {
-  const data = generateHeatmapData();
-
-  return (
-    <Wrapper>
-      <Card variant="outline">
-        <Card.Title label="Peak Sales Heatmap" />
-        <Card.Body>
-          <div style={{ height: '400px' }}>
-            <EChartsHeatmap
-              data={data}
-              xAccessor={(d) => d.hour}
-              yAccessor={(d) => d.day}
-              valueAccessor={(d) => d.value}
-              xCategories={hourLabels}
-              yCategories={dayNames}
-              xAxisLabel="Hour of Day"
-              yAxisLabel="Day of Week"
-              tooltipFormatter={(params: any) => {
-                const value = params.value;
-                return `${dayNames[value[1]]}, ${hourLabels[value[0]]}<br/>Sales: ${value[2]}`;
-              }}
-            />
-          </div>
-        </Card.Body>
-      </Card>
-    </Wrapper>
-  );
-};
-
-export const PlayerActivityHeatmap: StoryFn<EChartsHeatmapProps<HeatmapData>> = (args) => {
-  const data = generateHeatmapData().map((d) => ({
-    ...d,
-    value: d.value * 2, // Higher values for player activity
-  }));
-
-  return (
-    <Wrapper>
-      <EChartsHeatmap<HeatmapData>
-        {...args}
-        data={data}
-        xAccessor={(d) => d.hour}
-        yAccessor={(d) => d.day}
-        valueAccessor={(d) => d.value}
-        xCategories={hourLabels}
-        yCategories={dayNames}
-        title="Player Activity Patterns"
-        subtitle="Average players online by hour and day"
-        showLabel={false}
-        minValue={0}
-        maxValue={150}
-      />
-    </Wrapper>
-  );
-};
-
-export const WithLabels: StoryFn<EChartsHeatmapProps<HeatmapData>> = (args) => {
-  // Smaller dataset for label visibility
-  const data: HeatmapData[] = [];
-  for (let day = 0; day < 5; day++) {
-    for (let hour = 0; hour < 12; hour++) {
-      data.push({
-        hour: hour * 2, // Every 2 hours
-        day,
-        value: faker.number.int({ min: 10, max: 100 }),
-      });
-    }
-  }
-
-  const sparseHours = hourLabels.filter((_, i) => i % 2 === 0);
-  const weekdays = dayNames.slice(0, 5);
-
-  return (
-    <Wrapper>
-      <EChartsHeatmap<HeatmapData>
-        {...args}
-        data={data}
-        xAccessor={(d) => d.hour / 2}
-        yAccessor={(d) => d.day}
-        valueAccessor={(d) => d.value}
-        xCategories={sparseHours}
-        yCategories={weekdays}
-        title="Resource Usage"
-        showLabel={true}
-      />
-    </Wrapper>
-  );
-};