@takaro/lib-components 0.4.8 → 0.4.10

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

@@ -1,124 +0,0 @@
-import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
-import { EChartsRadialBar, EChartsRadialBarProps } from './EChartsRadialBar';
-import { styled } from '../../../styled';
-import { Card } from '../../../components';
-import { faker } from '@faker-js/faker';
-
-export default {
-  title: 'Charts/ECharts/RadialBar',
-  component: EChartsRadialBar,
-  args: {
-    showLegend: true,
-    title: 'Radial Bar Chart',
-    angleAxis: true,
-  },
-} as Meta<EChartsRadialBarProps>;
-
-const Wrapper = styled.div`
-  height: 500px;
-  width: 100%;
-`;
-
-interface CategoryData {
-  category: string;
-  value: number;
-}
-
-// Generate sample category data
-function generateCategoryData(): CategoryData[] {
-  return [
-    { category: 'Weapons', value: faker.number.int({ min: 50, max: 150 }) },
-    { category: 'Armor', value: faker.number.int({ min: 40, max: 120 }) },
-    { category: 'Consumables', value: faker.number.int({ min: 60, max: 180 }) },
-    { category: 'Materials', value: faker.number.int({ min: 30, max: 100 }) },
-    { category: 'Special', value: faker.number.int({ min: 20, max: 80 }) },
-  ];
-}
-
-export const Default: StoryFn<EChartsRadialBarProps<CategoryData>> = (args) => {
-  const data = generateCategoryData();
-
-  return (
-    <Wrapper>
-      <EChartsRadialBar<CategoryData>
-        {...args}
-        data={data}
-        nameAccessor={(d) => d.category}
-        valueAccessor={(d) => d.value}
-        seriesName="Sales"
-      />
-    </Wrapper>
-  );
-};
-
-export const CategoryPerformance: StoryFn = () => {
-  const categories = [
-    { category: 'Building', value: 85 },
-    { category: 'Combat', value: 120 },
-    { category: 'Exploration', value: 95 },
-    { category: 'Crafting', value: 110 },
-    { category: 'Trading', value: 75 },
-    { category: 'Farming', value: 60 },
-  ];
-
-  return (
-    <Wrapper>
-      <Card variant="outline">
-        <Card.Title label="Category Performance" />
-        <Card.Body>
-          <div style={{ height: '400px' }}>
-            <EChartsRadialBar
-              data={categories}
-              nameAccessor={(d) => d.category}
-              valueAccessor={(d) => d.value}
-              seriesName="Performance Score"
-              showLegend={false}
-              radius={['25%', '75%']}
-              tooltipFormatter={(params: any) => {
-                return `${params.name}<br/>Score: ${params.value}`;
-              }}
-            />
-          </div>
-        </Card.Body>
-      </Card>
-    </Wrapper>
-  );
-};
-
-export const SmallRadius: StoryFn<EChartsRadialBarProps<CategoryData>> = (args) => {
-  const data = generateCategoryData().slice(0, 4);
-
-  return (
-    <Wrapper>
-      <EChartsRadialBar<CategoryData>
-        {...args}
-        data={data}
-        nameAccessor={(d) => d.category}
-        valueAccessor={(d) => d.value}
-        seriesName="Inventory"
-        title="Stock Levels"
-        subtitle="Current inventory status"
-        radius={['40%', '60%']}
-      />
-    </Wrapper>
-  );
-};
-
-export const AlternateAxis: StoryFn<EChartsRadialBarProps<CategoryData>> = (args) => {
-  const data = generateCategoryData();
-
-  return (
-    <Wrapper>
-      <EChartsRadialBar<CategoryData>
-        {...args}
-        data={data}
-        nameAccessor={(d) => d.category}
-        valueAccessor={(d) => d.value}
-        seriesName="Distribution"
-        angleAxis={false}
-        title="Resource Distribution"
-      />
-    </Wrapper>
-  );
-};

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

@@ -1,118 +0,0 @@
-import { FC, useMemo } from 'react';
-import { EChartsOption } from 'echarts';
-import { ResponsiveECharts, EChartsBaseProps } from './EChartsBase';
-
-export interface EChartsRadialBarProps<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;
-  tooltipFormatter?: (params: any) => string;
-  radius?: [string, string];
-  angleAxis?: boolean;
-}
-
-export const EChartsRadialBar: FC<EChartsRadialBarProps> = ({
-  data,
-  nameAccessor,
-  valueAccessor,
-  seriesName = 'Value',
-  showLegend = true,
-  showLabel = false,
-  title,
-  subtitle,
-  tooltipFormatter,
-  radius = ['30%', '80%'],
-  angleAxis = true,
-  ...chartProps
-}) => {
-  const option: EChartsOption = useMemo(() => {
-    const categories = data.map(nameAccessor);
-    const values = data.map(valueAccessor);
-    const maxValue = Math.max(...values);
-
-    return {
-      title: title
-        ? {
-            text: title,
-            subtext: subtitle,
-            left: 'center',
-          }
-        : undefined,
-      legend: showLegend
-        ? {
-            show: true,
-            top: 'bottom',
-          }
-        : undefined,
-      tooltip: {
-        trigger: 'item',
-        formatter: tooltipFormatter,
-      },
-      polar: {
-        radius: radius,
-      },
-      radiusAxis: angleAxis
-        ? {
-            type: 'category',
-            data: categories,
-            z: 10,
-          }
-        : {
-            max: maxValue * 1.1,
-          },
-      angleAxis: angleAxis
-        ? {
-            max: maxValue * 1.1,
-          }
-        : {
-            type: 'category',
-            data: categories,
-          },
-      series: [
-        {
-          name: seriesName,
-          type: 'bar',
-          data: values.map((value, index) => ({
-            value,
-            name: categories[index],
-            itemStyle: {
-              opacity: 0.9,
-            },
-          })),
-          coordinateSystem: 'polar',
-          label: showLabel
-            ? {
-                show: true,
-                position: 'middle',
-                formatter: '{b}: {c}',
-              }
-            : {
-                show: false,
-              },
-          emphasis: {
-            focus: 'series',
-          },
-        },
-      ],
-    };
-  }, [
-    data,
-    nameAccessor,
-    valueAccessor,
-    seriesName,
-    showLegend,
-    showLabel,
-    title,
-    subtitle,
-    tooltipFormatter,
-    radius,
-    angleAxis,
-  ]);
-
-  return <ResponsiveECharts option={option} {...chartProps} />;
-};

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

@@ -1,166 +0,0 @@
-import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
-import { EChartsScatter, EChartsScatterProps } from './EChartsScatter';
-import { styled } from '../../../styled';
-import { Card } from '../../../components';
-import { faker } from '@faker-js/faker';
-
-export default {
-  title: 'Charts/ECharts/Scatter',
-  component: EChartsScatter,
-  args: {
-    showGrid: true,
-    showLegend: false,
-    xAxisLabel: 'X Axis',
-    yAxisLabel: 'Y Axis',
-    title: 'Scatter Plot',
-    symbolSize: 10,
-  },
-} as Meta<EChartsScatterProps>;
-
-const Wrapper = styled.div`
-  height: 500px;
-  width: 100%;
-`;
-
-interface ScatterData {
-  x: number;
-  y: number;
-  size?: number;
-  name?: string;
-}
-
-// Generate sample scatter data
-function generateScatterData(count: number = 50): ScatterData[] {
-  const data: ScatterData[] = [];
-
-  for (let i = 0; i < count; i++) {
-    data.push({
-      x: faker.number.int({ min: 0, max: 100 }),
-      y: faker.number.int({ min: 0, max: 100 }),
-      size: faker.number.int({ min: 5, max: 50 }),
-      name: `Point ${i + 1}`,
-    });
-  }
-
-  return data;
-}
-
-export const Default: StoryFn<EChartsScatterProps<ScatterData>> = (args) => {
-  const data = generateScatterData();
-
-  return (
-    <Wrapper>
-      <EChartsScatter<ScatterData>
-        {...args}
-        data={data}
-        xAccessor={(d) => d.x}
-        yAccessor={(d) => d.y}
-        seriesName="Data Points"
-      />
-    </Wrapper>
-  );
-};
-
-export const BubbleChart: StoryFn<EChartsScatterProps<ScatterData>> = (args) => {
-  const data = generateScatterData(30);
-
-  return (
-    <Wrapper>
-      <EChartsScatter<ScatterData>
-        {...args}
-        data={data}
-        xAccessor={(d) => d.x}
-        yAccessor={(d) => d.y}
-        sizeAccessor={(d) => d.size || 10}
-        nameAccessor={(d) => d.name}
-        seriesName="Bubble Data"
-        title="Bubble Chart"
-        subtitle="Size represents third dimension"
-      />
-    </Wrapper>
-  );
-};
-
-export const PlayerAnalysis: StoryFn = () => {
-  // Generate player data with correlation
-  const players = Array.from({ length: 40 }, (_, i) => {
-    const playtime = faker.number.int({ min: 10, max: 200 });
-    const purchases = Math.floor(playtime * 0.3 + faker.number.int({ min: -10, max: 20 }));
-    const level = Math.floor(playtime * 0.5 + faker.number.int({ min: 0, max: 10 }));
-
-    return {
-      playtime,
-      purchases,
-      level,
-      name: `Player${i + 1}`,
-    };
-  });
-
-  return (
-    <Wrapper>
-      <Card variant="outline">
-        <Card.Title label="Player Behavior Analysis" />
-        <Card.Body>
-          <div style={{ height: '400px' }}>
-            <EChartsScatter
-              data={players}
-              xAccessor={(d) => d.playtime}
-              yAccessor={(d) => d.purchases}
-              sizeAccessor={(d) => d.level}
-              nameAccessor={(d) => d.name}
-              seriesName="Players"
-              xAxisLabel="Playtime (hours)"
-              yAxisLabel="Total Purchases"
-              showGrid={true}
-              tooltipFormatter={(params: any) => {
-                const value = params.value || params.data.value;
-                return `${params.data.name}<br/>
-                        Playtime: ${value[0]} hours<br/>
-                        Purchases: ${value[1]}<br/>
-                        Level: ${value[2]}`;
-              }}
-            />
-          </div>
-        </Card.Body>
-      </Card>
-    </Wrapper>
-  );
-};
-
-export const Clustering: StoryFn<EChartsScatterProps<ScatterData>> = (args) => {
-  // Generate clustered data
-  const clusters = [
-    { cx: 25, cy: 25, spread: 10 },
-    { cx: 75, cy: 75, spread: 10 },
-    { cx: 25, cy: 75, spread: 8 },
-    { cx: 75, cy: 25, spread: 12 },
-  ];
-
-  const data: ScatterData[] = [];
-  clusters.forEach((cluster, clusterIndex) => {
-    for (let i = 0; i < 15; i++) {
-      data.push({
-        x: cluster.cx + faker.number.int({ min: -cluster.spread, max: cluster.spread }),
-        y: cluster.cy + faker.number.int({ min: -cluster.spread, max: cluster.spread }),
-        name: `Cluster ${clusterIndex + 1}`,
-      });
-    }
-  });
-
-  return (
-    <Wrapper>
-      <EChartsScatter<ScatterData>
-        {...args}
-        data={data}
-        xAccessor={(d) => d.x}
-        yAccessor={(d) => d.y}
-        nameAccessor={(d) => d.name}
-        seriesName="Clusters"
-        title="Data Clustering"
-        subtitle="Four distinct groups"
-        symbolSize={8}
-      />
-    </Wrapper>
-  );
-};

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

@@ -1,135 +0,0 @@
-import { FC, useMemo } from 'react';
-import { EChartsOption } from 'echarts';
-import { ResponsiveECharts, EChartsBaseProps } from './EChartsBase';
-
-export interface EChartsScatterProps<T = any> extends Omit<EChartsBaseProps, 'option'> {
-  data: T[];
-  xAccessor: (d: T) => number;
-  yAccessor: (d: T) => number;
-  sizeAccessor?: (d: T) => number;
-  nameAccessor?: (d: T) => string;
-  seriesName?: string;
-  showGrid?: boolean;
-  showLegend?: boolean;
-  xAxisLabel?: string;
-  yAxisLabel?: string;
-  title?: string;
-  subtitle?: string;
-  symbolSize?: number | ((value: number[]) => number);
-  tooltipFormatter?: (params: any) => string;
-}
-
-export const EChartsScatter: FC<EChartsScatterProps> = ({
-  data,
-  xAccessor,
-  yAccessor,
-  sizeAccessor,
-  nameAccessor,
-  seriesName = 'Value',
-  showGrid = true,
-  showLegend = false,
-  xAxisLabel,
-  yAxisLabel,
-  title,
-  subtitle,
-  symbolSize = 10,
-  tooltipFormatter,
-  ...chartProps
-}) => {
-  const option: EChartsOption = useMemo(() => {
-    const scatterData = data.map((d) => {
-      const point: any = [xAccessor(d), yAccessor(d)];
-      if (sizeAccessor) {
-        point.push(sizeAccessor(d));
-      }
-      if (nameAccessor) {
-        return {
-          value: point,
-          name: nameAccessor(d),
-        };
-      }
-      return point;
-    });
-
-    const actualSymbolSize = sizeAccessor ? (value: number[]) => Math.sqrt(value[2]) * 5 : symbolSize;
-
-    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: 'item',
-        formatter:
-          tooltipFormatter ||
-          ((params: any) => {
-            const value = params.value || params.data.value;
-            const name = params.data?.name || params.name || '';
-            return `${name}<br/>X: ${value[0]}<br/>Y: ${value[1]}${value[2] !== undefined ? `<br/>Size: ${value[2]}` : ''}`;
-          }),
-      },
-      xAxis: {
-        type: 'value',
-        name: xAxisLabel,
-        nameLocation: 'middle',
-        nameGap: 30,
-      },
-      yAxis: {
-        type: 'value',
-        name: yAxisLabel,
-        nameLocation: 'middle',
-        nameGap: 50,
-      },
-      series: [
-        {
-          name: seriesName,
-          type: 'scatter',
-          data: scatterData,
-          symbolSize: actualSymbolSize,
-          emphasis: {
-            focus: 'series',
-            itemStyle: {
-              shadowBlur: 10,
-              shadowOffsetX: 0,
-              shadowColor: 'rgba(0, 0, 0, 0.5)',
-            },
-          },
-        },
-      ],
-    };
-  }, [
-    data,
-    xAccessor,
-    yAccessor,
-    sizeAccessor,
-    nameAccessor,
-    seriesName,
-    showGrid,
-    showLegend,
-    xAxisLabel,
-    yAxisLabel,
-    title,
-    subtitle,
-    symbolSize,
-    tooltipFormatter,
-  ]);
-
-  return <ResponsiveECharts option={option} {...chartProps} />;
-};

package/src/components/charts/echarts/index.ts

@@ -1,26 +0,0 @@
-export { EChartsBase, ResponsiveECharts } from './EChartsBase';
-export type { EChartsBaseProps } from './EChartsBase';
-
-export { EChartsLine } from './EChartsLine';
-export type { EChartsLineProps } from './EChartsLine';
-
-export { EChartsBar } from './EChartsBar';
-export type { EChartsBarProps } from './EChartsBar';
-
-export { EChartsPie } from './EChartsPie';
-export type { EChartsPieProps } from './EChartsPie';
-
-export { EChartsArea } from './EChartsArea';
-export type { EChartsAreaProps } from './EChartsArea';
-
-export { EChartsHeatmap } from './EChartsHeatmap';
-export type { EChartsHeatmapProps } from './EChartsHeatmap';
-
-export { EChartsRadialBar } from './EChartsRadialBar';
-export type { EChartsRadialBarProps } from './EChartsRadialBar';
-
-export { EChartsScatter } from './EChartsScatter';
-export type { EChartsScatterProps } from './EChartsScatter';
-
-export { EChartsFunnel } from './EChartsFunnel';
-export type { EChartsFunnelProps } from './EChartsFunnel';