@takaro/lib-components 0.4.9 → 0.4.11

package/src/components/charts/RadialLineChart/index.tsx

@@ -1,3 +1,5 @@
+import { MouseEvent, useCallback } from 'react';
+
 import { ParentSize } from '@visx/responsive';
 import { Group } from '@visx/group';
 import { LineRadial } from '@visx/shape';
@@ -7,19 +9,22 @@ import { AxisLeft } from '@visx/axis';
 import { motion } from 'framer-motion';
 import { extent } from '@visx/vendor/d3-array';
 import { curveBasisOpen } from '@visx/curve';
+import { useTooltipInPortal, useTooltip } from '@visx/tooltip';
+import { localPoint } from '@visx/event';
 
-import { InnerChartProps, Margin } from '../util';
+import { InnerChartProps, getDefaultTooltipStyles, TooltipConfig, ChartProps } from '../util';
 import { useTheme } from '../../../hooks';
 import { useGradients } from '../useGradients';
+import { EmptyChart } from '../EmptyChart';
 
 const formatTicks = (val: NumberLike) => String(val);
 
-export interface RadialLineChartProps<T> {
-  name: string;
+export interface RadialLineChartProps<T> extends ChartProps {
   data: T[];
-  margin?: Margin;
   xAccessor: (d: T) => number;
   yAccessor: (d: T) => number;
+  /** Tooltip configuration */
+  tooltip?: TooltipConfig<T>;
 }
 
 const defaultMargin = { top: 10, right: 0, bottom: 25, left: 40 };
@@ -29,21 +34,29 @@ export const RadialLineChart = <T,>({
   xAccessor,
   name,
   margin = defaultMargin,
+  animate = true,
+  tooltip,
 }: RadialLineChartProps<T>) => {
+  const hasData = data && data.length > 0;
+
   return (
     <>
       <ParentSize>
-        {(parent) => (
-          <Chart<T>
-            name={name}
-            data={data}
-            width={parent.width}
-            height={parent.height}
-            margin={margin}
-            yAccessor={yAccessor}
-            xAccessor={xAccessor}
-          />
-        )}
+        {hasData
+          ? (parent) => (
+              <Chart<T>
+                name={name}
+                data={data}
+                width={parent.width}
+                height={parent.height}
+                margin={margin}
+                yAccessor={yAccessor}
+                xAccessor={xAccessor}
+                tooltip={tooltip}
+                animate={animate}
+              />
+            )
+          : () => <EmptyChart />}
       </ParentSize>
     </>
   );
@@ -51,10 +64,26 @@ export const RadialLineChart = <T,>({
 
 type InnerRadialLineChartProps<T> = InnerChartProps & RadialLineChartProps<T>;
 
-const Chart = <T,>({ width, xAccessor, yAccessor, data, name, height }: InnerRadialLineChartProps<T>) => {
+const Chart = <T,>({
+  width,
+  xAccessor,
+  yAccessor,
+  data,
+  name,
+  height,
+  tooltip,
+  animate = true,
+}: InnerRadialLineChartProps<T>) => {
+  const tooltipAccessor = tooltip?.accessor;
   const theme = useTheme();
   const gradients = useGradients(name);
 
+  const { tooltipData, tooltipLeft, tooltipTop, tooltipOpen, hideTooltip, showTooltip } = useTooltip<T>();
+  const { containerRef, TooltipInPortal } = useTooltipInPortal({
+    detectBounds: true,
+    scroll: true,
+  });
+
   const xScale = scaleTime<number>({
     range: [0, Math.PI * 2],
     domain: extent(data, xAccessor) as [number, number],
@@ -64,19 +93,32 @@ const Chart = <T,>({ width, xAccessor, yAccessor, data, name, height }: InnerRad
     domain: extent(data, yAccessor) as [number, number],
   });
 
-  const firstPoint = yAccessor(data[0]);
-  const lastPoint = yAccessor(data[data.length - 1]);
-
   const angle = (d: T) => xScale(xAccessor(d)) ?? 0;
   const radius = (d: T) => yScale(yAccessor(d)) ?? 0;
   const padding = 15;
 
+  const handleMouseOver = useCallback(
+    (event: MouseEvent, dataPoint: T) => {
+      if (!tooltipAccessor) return;
+
+      const target = event.target as SVGElement;
+      const coords = localPoint(target.ownerSVGElement!, event);
+
+      showTooltip({
+        tooltipLeft: coords?.x,
+        tooltipTop: coords?.y,
+        tooltipData: dataPoint,
+      });
+    },
+    [tooltipAccessor, showTooltip],
+  );
+
   // Update scale output to match component dimensions
   yScale.range([0, height / 2 - padding]);
   const reverseYScale = yScale.copy().range(yScale.range().reverse());
 
   return width < 10 ? null : (
-    <svg width={width} height={height}>
+    <svg ref={containerRef} width={width} height={height}>
       {gradients.chart.gradient}
       <rect width={width} height={height} fill={theme.colors.background} rx={14} />
       <Group top={height / 2} left={width / 2}>
@@ -121,21 +163,69 @@ const Chart = <T,>({ width, xAccessor, yAccessor, data, name, height }: InnerRad
             return (
               <motion.path
                 d={d}
-                strokeWidth={2}
+                strokeWidth={3}
                 strokeOpacity={0.8}
                 strokeLinecap="round"
                 fill="none"
                 stroke={theme.colors.primary}
+                initial={animate ? { pathLength: 0 } : { pathLength: 1 }}
+                animate={{ pathLength: 1 }}
+                transition={
+                  animate
+                    ? {
+                        duration: 1.5,
+                        ease: 'easeInOut',
+                      }
+                    : { duration: 0 }
+                }
               />
             );
           }}
         </LineRadial>
-        {[firstPoint, lastPoint].map((d, i) => {
-          const cx = ((xScale(d) ?? 0) * Math.PI) / 180;
-          const cy = -(yScale(d) ?? 0);
-          return <circle key={`line-cap-${i}`} cx={cx} cy={cy} fill={theme.colors.primary} r={2} />;
-        })}
+        {tooltipAccessor &&
+          data.map((d, i) => {
+            const angleVal = angle(d);
+            const radiusVal = radius(d);
+            const x = Math.cos(angleVal - Math.PI / 2) * radiusVal;
+            const y = Math.sin(angleVal - Math.PI / 2) * radiusVal;
+
+            return (
+              <g key={`data-point-${i}`}>
+                {/* Invisible hit area for tooltip - no need for visible dots */}
+                <motion.circle
+                  cx={x}
+                  cy={y}
+                  r={12}
+                  fill="transparent"
+                  style={{ cursor: 'pointer' }}
+                  onMouseOut={hideTooltip}
+                  onMouseOver={(e) => handleMouseOver(e, d)}
+                  initial={animate ? { scale: 0 } : { scale: 1 }}
+                  animate={{ scale: 1 }}
+                  transition={
+                    animate
+                      ? {
+                          duration: 0.3,
+                          delay: 1.5,
+                          ease: 'easeOut',
+                        }
+                      : { duration: 0 }
+                  }
+                />
+              </g>
+            );
+          })}
       </Group>
+      {tooltipOpen && tooltipData && tooltipAccessor && (
+        <TooltipInPortal
+          key={`tooltip-${name}`}
+          top={tooltipTop}
+          left={tooltipLeft}
+          style={getDefaultTooltipStyles(theme)}
+        >
+          {tooltipAccessor(tooltipData)}
+        </TooltipInPortal>
+      )}
     </svg>
   );
 };

package/src/components/charts/index.tsx

@@ -24,29 +24,3 @@ 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/charts/util.ts

@@ -1,14 +1,50 @@
 import { defaultStyles } from '@visx/tooltip';
 import { ThemeType } from '../../styled';
 
+export interface Margin {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
+
+export interface AxisConfig {
+  showX?: boolean;
+  showY?: boolean;
+  labelX?: string;
+  labelY?: string;
+  numTicksX?: number;
+  numTicksY?: number;
+  /** Whether to include zero in the Y-axis domain. Default: false (auto-scale from min) */
+  includeZeroY?: boolean;
+}
+
+export interface TooltipConfig<T> {
+  enabled?: boolean;
+  accessor?: (d: T, ...additionalArgs: any[]) => string;
+}
+
+export interface BrushConfig {
+  enabled?: boolean;
+  margin?: Margin;
+}
+
+export type LegendPosition = 'top' | 'right' | 'bottom' | 'left' | 'none';
+
+/** Grid display options for charts */
+export type GridDisplay = 'none' | 'x' | 'y' | 'xy';
+
 export interface ChartProps {
   /// Unique identifier for the chart
   name: string;
-  showGrid?: boolean;
-  axisXLabel?: string;
-  axisYLabel?: string;
-  showAxisX?: boolean;
-  showAxisY?: boolean;
+  /** Display grid lines. Options: 'none', 'x', 'y', 'xy'. Default: 'none' */
+  grid?: GridDisplay;
+  /** Axis configuration */
+  axis?: AxisConfig;
+  /** Enable or disable animations. Default: true */
+  animate?: boolean;
+  /** Chart margins */
+  margin?: Margin;
 }
 
 export interface InnerChartProps extends ChartProps {
@@ -16,13 +52,6 @@ export interface InnerChartProps extends ChartProps {
   height: number;
 }
 
-export interface Margin {
-  top: number;
-  right: number;
-  bottom: number;
-  left: number;
-}
-
 export const getDefaultTooltipStyles = (theme: ThemeType) => ({
   ...defaultStyles,
   background: theme.colors.background,
@@ -30,6 +59,7 @@ export const getDefaultTooltipStyles = (theme: ThemeType) => ({
   borderRadius: theme.borderRadius.small,
   color: theme.colors.text,
   fontSize: theme.fontSize.small,
+  whiteSpace: 'pre-wrap' as const,
 });
 
 export const getChartColors = (theme: ThemeType) => [
@@ -37,4 +67,12 @@ export const getChartColors = (theme: ThemeType) => [
   '#FFD700', // Gold for a contrasting yet harmonious color
   '#87CEEB', // Sky blue to complement the purple
   '#FF69B4', // Hot pink for a playful, vibrant look
+  '#32CD32', // Lime green for nature-inspired freshness
+  '#FF8C00', // Dark orange for warmth
+  '#9370DB', // Medium purple for variety
+  '#20B2AA', // Light sea green for coolness
+  '#FF6347', // Tomato red for emphasis
+  '#4682B4', // Steel blue for professionalism
+  '#DAA520', // Goldenrod for richness
+  '#8B4789', // Dark orchid for depth
 ];

package/src/components/data/CountryList/index.tsx

@@ -0,0 +1,146 @@
+import { styled } from '../../../styled';
+import { Flag } from '../../visual/Flag';
+import { alpha2ToAlpha3 } from '../../charts/GeoMercator/iso3166-alpha2-to-alpha3';
+
+const alpha3ToAlpha2: Record<string, string> = Object.entries(alpha2ToAlpha3).reduce(
+  (acc, [alpha2, alpha3]) => {
+    acc[alpha3] = alpha2;
+    return acc;
+  },
+  {} as Record<string, string>,
+);
+
+const Container = styled.div`
+  width: 320px;
+  min-width: 320px;
+  flex-shrink: 0;
+  height: 100%;
+  overflow: auto;
+  background-color: ${({ theme }) => theme.colors.backgroundAlt};
+  border: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+  border-radius: ${({ theme }) => theme.borderRadius.medium};
+  padding: ${({ theme }) => theme.spacing['3']};
+`;
+
+const Title = styled.h3`
+  margin: 0 0 ${({ theme }) => theme.spacing['2']} 0;
+  font-size: ${({ theme }) => theme.fontSize.tiny};
+  font-weight: 500;
+  color: ${({ theme }) => theme.colors.textAlt};
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+`;
+
+const CountryGrid = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: ${({ theme }) => theme.spacing['2']};
+`;
+
+const CountryTable = styled.div`
+  display: table;
+  width: 100%;
+  font-size: ${({ theme }) => theme.fontSize.small};
+  border-collapse: collapse;
+`;
+
+const CountryRow = styled.div`
+  display: table-row;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.backgroundAccent};
+  }
+
+  &:last-child > div {
+    border-bottom: none;
+  }
+`;
+
+const CountryCell = styled.div`
+  display: table-cell;
+  padding: 2px 0;
+  vertical-align: middle;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+  color: ${({ theme }) => theme.colors.text};
+  line-height: 1.3;
+`;
+
+const FlagCell = styled(CountryCell)`
+  width: 20px;
+  text-align: center;
+  padding-right: 4px;
+`;
+
+const CountryCodeCell = styled(CountryCell)`
+  padding-right: 4px;
+  font-weight: 500;
+  font-size: ${({ theme }) => theme.fontSize.tiny};
+`;
+
+const CountCell = styled(CountryCell)`
+  text-align: right;
+  font-weight: 600;
+  color: ${({ theme }) => theme.colors.primary};
+  width: 20px;
+  font-size: ${({ theme }) => theme.fontSize.tiny};
+`;
+
+export interface CountryListProps<T> {
+  /** Array of data items containing country information */
+  data: T[];
+  /** Function to extract country code from data item (supports both alpha-2 and alpha-3 codes) */
+  xAccessor: (d: T) => string;
+  /** Function to extract numeric value from data item */
+  yAccessor: (d: T) => number;
+  /** Optional title for the list. Defaults to "Countries ({count})" */
+  title?: string;
+}
+
+/**
+ * CountryList displays a sorted list of countries with flags and numeric values in a two-column layout.
+ *
+ * Features:
+ * - Automatically sorts data by numeric value (descending)
+ * - Displays country flags when available
+ * - Supports both alpha-2 (US) and alpha-3 (USA) country codes
+ * - Two-column grid layout for compact display
+ * - Hover effects on rows
+ */
+export const CountryList = <T,>({ data, xAccessor, yAccessor, title }: CountryListProps<T>) => {
+  const sortedData = [...data].sort((a, b) => yAccessor(b) - yAccessor(a));
+
+  // Split data into two columns
+  const midPoint = Math.ceil(sortedData.length / 2);
+  const leftColumnData = sortedData.slice(0, midPoint);
+  const rightColumnData = sortedData.slice(midPoint);
+
+  const renderCountryTable = (columnData: T[]) => (
+    <CountryTable>
+      {columnData.map((item, index) => {
+        const countryCode = xAccessor(item);
+        const count = yAccessor(item);
+        const alpha2Code = countryCode.length === 3 ? alpha3ToAlpha2[countryCode] : countryCode;
+        // Prefer 2-letter country codes for display if available
+        const displayCode = alpha2Code || countryCode;
+
+        return (
+          <CountryRow key={`${countryCode}-${index}`}>
+            <FlagCell>{alpha2Code && <Flag countryCode={alpha2Code} size={1} />}</FlagCell>
+            <CountryCodeCell>{displayCode}</CountryCodeCell>
+            <CountCell>{count}</CountCell>
+          </CountryRow>
+        );
+      })}
+    </CountryTable>
+  );
+
+  return (
+    <Container>
+      <Title>{title || `Countries (${sortedData.length})`}</Title>
+      <CountryGrid>
+        {renderCountryTable(leftColumnData)}
+        {renderCountryTable(rightColumnData)}
+      </CountryGrid>
+    </Container>
+  );
+};

package/src/components/data/Stats/Sparkline.tsx

@@ -0,0 +1,48 @@
+import { FC } from 'react';
+
+export interface SparklineProps {
+  data: number[];
+  color?: string;
+  width?: string | number;
+  height?: string | number;
+  strokeWidth?: number;
+}
+
+/**
+ * Sparkline component - renders a simple SVG line chart for trend visualization
+ * Designed to be used as Stats.Sparkline for showing mini trend charts
+ */
+export const Sparkline: FC<SparklineProps> = ({
+  data,
+  color = 'currentColor',
+  width = '100%',
+  height = '100%',
+  strokeWidth = 2,
+}) => {
+  if (!data || data.length === 0) return null;
+
+  const max = Math.max(...data);
+  const min = Math.min(...data);
+  const range = max - min || 1;
+
+  const points = data
+    .map((value, index) => {
+      const divisor = Math.max(data.length - 1, 1); // in case of single data point
+      const x = (index / divisor) * 100;
+      const y = 100 - ((value - min) / range) * 100;
+      return `${x},${y}`;
+    })
+    .join(' ');
+
+  return (
+    <svg width={width} height={height} viewBox="0 0 100 100" preserveAspectRatio="none">
+      <polyline
+        points={points}
+        fill="none"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        vectorEffect="non-scaling-stroke"
+      />
+    </svg>
+  );
+};

package/src/components/data/Stats/Stat.tsx

@@ -1,18 +1,22 @@
 import { FC, useContext, ReactNode, cloneElement, isValidElement } from 'react';
-import { styled } from '../../../styled';
-import { StatContext, Direction, Size } from './context';
+import { styled, Size } from '../../../styled';
+import { StatContext, Direction } from './context';
 import { AiOutlineArrowUp, AiOutlineArrowDown } from 'react-icons/ai';
 
 const Container = styled.div<{ isGrouped: boolean; direction: Direction; size: Size }>`
   background-color: ${({ theme }) => theme.colors.backgroundAlt};
   padding: ${({ theme, size }) => {
     switch (size) {
+      case 'tiny':
+        return theme.spacing['0_5'];
       case 'small':
         return theme.spacing['1'];
       case 'medium':
         return theme.spacing['2'];
       case 'large':
         return theme.spacing['3'];
+      case 'huge':
+        return theme.spacing['4'];
     }
   }};
 
@@ -58,16 +62,19 @@ const Container = styled.div<{ isGrouped: boolean; direction: Direction; size: S
   dt {
     font-size: ${({ theme, size }) => {
       switch (size) {
+        case 'tiny':
+          return theme.fontSize.tiny;
         case 'small':
           return theme.fontSize.small;
         case 'medium':
           return theme.fontSize.medium;
         case 'large':
           return theme.fontSize.mediumLarge;
+        case 'huge':
+          return theme.fontSize.large;
       }
     }};
-    color: ${({ theme }) => theme.colors.secondary};
-    font-size: ${({ theme }) => theme.fontSize.medium};
+    color: ${({ theme }) => theme.colors.textAlt};
     margin-bottom: ${({ theme }) => theme.spacing['0_5']};
   }
 
@@ -76,12 +83,16 @@ const Container = styled.div<{ isGrouped: boolean; direction: Direction; size: S
     color: ${({ theme }) => theme.colors.white};
     font-size: ${({ theme, size }) => {
       switch (size) {
+        case 'tiny':
+          return theme.fontSize.small;
         case 'small':
           return theme.fontSize.medium;
         case 'medium':
           return theme.fontSize.mediumLarge;
         case 'large':
           return theme.fontSize.large;
+        case 'huge':
+          return theme.fontSize.huge;
       }
     }};
     color: ${({ theme }) => theme.colors.text};

package/src/components/data/Stats/context.tsx

@@ -1,7 +1,7 @@
 import { createContext } from 'react';
+import { Size } from '../../../styled/types';
 
 export type Direction = 'horizontal' | 'vertical';
-export type Size = 'small' | 'medium' | 'large';
 
 interface StatsContextValue {
   grouped: boolean;

package/src/components/data/Stats/index.tsx

@@ -1,7 +1,8 @@
 import { FC, PropsWithChildren, Children, isValidElement } from 'react';
-import { styled } from '../../../styled';
+import { styled, Size } from '../../../styled';
 import { Stat } from './Stat';
-import { StatContext, Direction, Size } from './context';
+import { Sparkline } from './Sparkline';
+import { StatContext, Direction } from './context';
 
 export const Container = styled.dl<{ direction: Direction; grouped: boolean; count: number }>`
   display: grid;
@@ -26,6 +27,7 @@ export interface StatsProps {
 
 interface SubComponents {
   Stat: typeof Stat;
+  Sparkline: typeof Sparkline;
 }
 
 export const Stats: FC<PropsWithChildren<StatsProps>> & SubComponents = ({
@@ -52,6 +54,9 @@ export const Stats: FC<PropsWithChildren<StatsProps>> & SubComponents = ({
 };
 
 Stats.Stat = Stat;
+Stats.Sparkline = Sparkline;
 
-export type { Direction, Size } from './context';
+export type { Direction } from './context';
+export type { Size } from '../../../styled';
 export type { TrendConfig } from './Stat';
+export type { SparklineProps } from './Sparkline';

package/src/components/data/index.ts

@@ -23,3 +23,6 @@ export type { DateFormatterProps } from './DateFormatter';
 
 export { CopyId } from './CopyId';
 export type { CopyIdProps } from './CopyId';
+
+export { CountryList } from './CountryList';
+export type { CountryListProps } from './CountryList';

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

@@ -3,12 +3,11 @@ import { Tooltip, TooltipProps } from '../Tooltip';
 import { Size, styled } from '../../../styled';
 import { getIconSize } from '../../actions/IconButton/getIconSize';
 import { ButtonColor } from '../../actions/Button/style';
+import { useTheme } from '../../../hooks';
 
-type TooltipIconColor = Exclude<ButtonColor, 'white'>;
+type TooltipIconColor = ButtonColor;
 
-const TriggerContainer = styled.div<{ color: TooltipIconColor }>`
-  border: 1px solid ${({ theme, color }) => theme.colors[color]};
-  border-radius: ${({ theme }) => theme.borderRadius.small};
+const TriggerContainer = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -33,12 +32,16 @@ export const IconTooltip: FC<IconTooltipProps> = ({
   open,
   icon,
   size = 'medium',
-  color = 'primary',
+  color = 'white',
 }) => {
+  const theme = useTheme();
+
   return (
     <Tooltip initialOpen={initialOpen} open={open}>
       <Tooltip.Trigger asChild>
-        <TriggerContainer color={color}>{cloneElement(icon, { size: getIconSize(size) })}</TriggerContainer>
+        <TriggerContainer>
+          {cloneElement(icon, { size: getIconSize(size), fill: theme.colors[color] })}
+        </TriggerContainer>
       </Tooltip.Trigger>
       <Tooltip.Content>
         <ContentContainer>{children}</ContentContainer>