@takaro/lib-components 0.3.3 → 0.4.3

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

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

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

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

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

@@ -0,0 +1,26 @@
+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';

package/src/components/charts/index.tsx

@@ -24,3 +24,29 @@ export type { RadialBarChartProps } from './RadialBarChart';
 
 export { GeoMercator } from './GeoMercator';
 export type { GeoMercatorProps } from './GeoMercator';
+
+// ECharts components
+export {
+  EChartsBase,
+  ResponsiveECharts,
+  EChartsLine,
+  EChartsBar,
+  EChartsPie,
+  EChartsArea,
+  EChartsHeatmap,
+  EChartsRadialBar,
+  EChartsScatter,
+  EChartsFunnel,
+} from './echarts';
+
+export type {
+  EChartsBaseProps,
+  EChartsLineProps,
+  EChartsBarProps,
+  EChartsPieProps,
+  EChartsAreaProps,
+  EChartsHeatmapProps,
+  EChartsRadialBarProps,
+  EChartsScatterProps,
+  EChartsFunnelProps,
+} from './echarts';

package/src/components/data/Chip/__snapshots__/Chip.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Should render <Chip/> 1`] = `
 <div>
   <div
-    style="padding: .5rem; max-width: 100%;"
+    style="padding: 0.5rem; max-width: 100%;"
   >
     <div
       style="display: flex; align-items: center; gap: .5rem;"
@@ -14,17 +14,17 @@ exports[`Should render <Chip/> 1`] = `
         Something went wrong!
       </strong>
       <button
-        style="appearance: none; font-size: .6em; border: 1px solid currentcolor; padding: .1rem .2rem; font-weight: bold; border-radius: .25rem;"
+        style="appearance: none; font-size: 0.6em; border: 1px solid currentcolor; padding: 0.1rem 0.2rem; font-weight: bold; border-radius: .25rem;"
       >
         Hide Error
       </button>
     </div>
     <div
-      style="height: .25rem;"
+      style="height: 0.25rem;"
     />
     <div>
       <pre
-        style="font-size: .7em; border: 1px solid red; border-radius: .25rem; padding: .3rem; color: red; overflow: auto;"
+        style="font-size: 0.7em; border: 1px solid red; border-radius: .25rem; padding: 0.3rem; color: red; overflow: auto;"
       >
         <code>
           Passed an incorrect argument to a color function, please pass a string representation of a color.

package/src/components/feedback/Alert/__snapshots__/Alert.test.tsx.snap

@@ -31,9 +31,7 @@ exports[`Should render <Alert/> 1`] = `
         Alert title
       </h2>
       <p>
-        <p>
-          Alert text
-        </p>
+        Alert text
       </p>
       <div
         class="sc-fqkvVR JhYnd action"

package/src/components/feedback/Alert/index.tsx

@@ -87,7 +87,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
           <Grid>
             <IconContainer variant={variant}>{getIcon()}</IconContainer>
             {title && <h2>{title}</h2>}
-            <p>{renderText()}</p>
+            {renderText()}
             <ButtonContainer
               hasTitle={hasTitle}
               show={dismiss || action ? true : false}