@takaro/lib-components 0.3.3 → 0.4.0

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

@@ -0,0 +1,265 @@
+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,
+        },
+        extraCssText: `box-shadow: ${theme.elevation[200]};`,
+      },
+      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

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

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

@@ -0,0 +1,168 @@
+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>
+  );
+};