@takaro/lib-components 0.4.8 → 0.4.10

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

@@ -2,53 +2,59 @@ import { MouseEvent, useCallback } from 'react';
 
 import { ParentSize } from '@visx/responsive';
 import { Group } from '@visx/group';
-import { Line, LineRadial } from '@visx/shape';
+import { LineRadial } from '@visx/shape';
 import { scaleLinear } from '@visx/scale';
 import { useTooltipInPortal, useTooltip } from '@visx/tooltip';
-import { Point } from '@visx/point';
 import { localPoint } from '@visx/event';
 import { Text } from '@visx/text';
+import { motion } from 'framer-motion';
 
-import { getDefaultTooltipStyles, InnerChartProps, Margin } from '../util';
+import { getDefaultTooltipStyles, InnerChartProps, TooltipConfig, ChartProps } from '../util';
 import { genAngles, genPoints, genPolygonPoints } from './generators';
 import { useTheme } from '../../../hooks';
+import { EmptyChart } from '../EmptyChart';
 
-export interface RadarChartProps<T> {
-  name: string;
+export interface RadarChartProps<T> extends Exclude<ChartProps, 'grid'> {
   data: T[];
-  margin?: Margin;
   xAccessor: (d: T) => string;
   yAccessor: (d: T) => number;
-  tooltipAccessor: (d: T) => string;
   levels?: number;
+  /** Tooltip configuration */
+  tooltip?: TooltipConfig<T>;
 }
 
-const defaultMargin = { top: 10, right: 0, bottom: 25, left: 40 };
+const defaultMargin = { top: 40, right: 40, bottom: 40, left: 40 };
 export const RadarChart = <T,>({
   data,
   xAccessor,
   yAccessor,
-  tooltipAccessor,
   name,
   levels = 5,
   margin = defaultMargin,
+  animate = true,
+  tooltip,
 }: RadarChartProps<T>) => {
+  const hasData = data && data.length > 0;
+
   return (
     <>
       <ParentSize>
-        {(parent) => (
-          <Chart<T>
-            name={name}
-            data={data}
-            width={parent.width}
-            height={parent.height}
-            margin={margin}
-            xAccessor={xAccessor}
-            yAccessor={yAccessor}
-            levels={levels}
-            tooltipAccessor={tooltipAccessor}
-          />
-        )}
+        {hasData
+          ? (parent) => (
+              <Chart<T>
+                name={name}
+                data={data}
+                width={parent.width}
+                height={parent.height}
+                margin={margin}
+                xAccessor={xAccessor}
+                yAccessor={yAccessor}
+                levels={levels}
+                tooltip={tooltip}
+                animate={animate}
+              />
+            )
+          : () => <EmptyChart />}
       </ParentSize>
     </>
   );
@@ -65,7 +71,8 @@ const Chart = <T,>({
   xAccessor,
   height,
   margin = defaultMargin,
-  tooltipAccessor,
+  tooltip,
+  animate = true,
 }: InnerRadarChartProps<T>) => {
   const theme = useTheme();
 
@@ -79,6 +86,9 @@ const Chart = <T,>({
   const innerHeight = height - margin.top - margin.bottom;
   const radius = Math.min(innerWidth, innerHeight) / 2;
 
+  // Scale dot size based on chart size (5px for ~400px charts, minimum 3px, maximum 8px)
+  const dotRadius = Math.max(3, Math.min(8, radius / 40));
+
   const radialScale = scaleLinear<number>({
     domain: [360, 0],
     range: [0, Math.PI * 2],
@@ -96,37 +106,72 @@ const Chart = <T,>({
       showTooltip({
         tooltipLeft: coords?.x,
         tooltipTop: coords?.y,
-        tooltipData: tooltipAccessor(data),
+        tooltipData: tooltip?.accessor && tooltip.accessor(data),
       });
     },
-    [data, tooltipAccessor],
+    [data, tooltip?.accessor],
   );
 
   const webs = genAngles(data.length);
   const points = genPoints(data.length, radius);
   const polygonPoints = genPolygonPoints(data, (d) => yScale(d) ?? 0, yAccessor);
-  const zeroPoint = new Point({ x: 0, y: 0 });
 
   return width < 10 ? null : (
     <svg ref={containerRef} width={width} height={height}>
       <rect fill={theme.colors.background} width={width} height={height} rx={14} />
-      <Group top={height / 2 - margin.top} left={width / 2}>
+      <Group top={height / 2} left={width / 2}>
         {[...new Array(levels)].map((_, i) => (
           <LineRadial
             key={`web-${i}`}
             data={webs}
             angle={(d) => radialScale(d.angle) ?? 0}
             radius={((i + 1) * radius) / levels}
-            fill="none"
-            stroke={theme.colors.backgroundAccent}
-            strokeWidth={2}
-            strokeOpacity={0.8}
-            strokeLinecap="round"
-          />
+          >
+            {({ path }) => {
+              const d = path(webs) || '';
+              return (
+                <motion.path
+                  d={d}
+                  fill="none"
+                  stroke={theme.colors.backgroundAccent}
+                  strokeWidth={2}
+                  strokeOpacity={0.8}
+                  strokeLinecap="round"
+                  initial={animate ? { pathLength: 0, opacity: 0 } : { pathLength: 1, opacity: 0.8 }}
+                  animate={{ pathLength: 1, opacity: 0.8 }}
+                  transition={
+                    animate
+                      ? {
+                          duration: 0.6,
+                          delay: i * 0.1,
+                          ease: 'easeOut',
+                        }
+                      : { duration: 0 }
+                  }
+                />
+              );
+            }}
+          </LineRadial>
         ))}
         {[...new Array(data.length)].map((_, i) => (
           <>
-            <Line key={`radar-line-${i}`} from={zeroPoint} to={points[i]} stroke={theme.colors.backgroundAccent} />
+            <motion.line
+              key={`radar-line-${i}`}
+              x1={0}
+              y1={0}
+              stroke={theme.colors.backgroundAccent}
+              initial={animate ? { x2: 0, y2: 0 } : { x2: points[i].x, y2: points[i].y }}
+              animate={{ x2: points[i].x, y2: points[i].y }}
+              transition={
+                animate
+                  ? {
+                      duration: 0.5,
+                      delay: i * 0.05,
+                      ease: 'easeOut',
+                    }
+                  : { duration: 0 }
+              }
+            />
             <Text
               textAnchor="middle"
               verticalAnchor="middle"
@@ -143,21 +188,25 @@ const Chart = <T,>({
         <polygon
           points={polygonPoints.pointString}
           fill={theme.colors.primary}
-          fillOpacity={0.3}
+          fillOpacity={0.5}
           stroke={theme.colors.primary}
           strokeWidth={2}
         />
         {polygonPoints.points.map((point, i) => (
-          <circle
-            key={`radar-point-${i}`}
-            cx={point.x}
-            cy={point.y}
-            onMouseOut={hideTooltip}
-            onMouseOver={(e) => handleMouseOver(e, data[i])}
-            r={5}
-            style={{ cursor: 'pointer' }}
-            fill={theme.colors.primary}
-          />
+          <g key={`radar-point-${i}`}>
+            {/* Visible dot */}
+            <circle cx={point.x} cy={point.y} r={dotRadius} fill={theme.colors.primary} />
+            {/* Invisible larger hit area for tooltip */}
+            <circle
+              cx={point.x}
+              cy={point.y}
+              r={dotRadius * 3}
+              fill="transparent"
+              style={{ cursor: 'pointer' }}
+              onMouseOut={hideTooltip}
+              onMouseOver={(e) => handleMouseOver(e, data[i])}
+            />
+          </g>
         ))}
       </Group>
       {tooltipOpen && tooltipData && (

package/src/components/charts/RadialBarChart/RadialBarChart.stories.tsx

@@ -27,7 +27,32 @@ export const Default: StoryFn<RadialBarChartProps<LetterFrequency>> = () => {
         xAccessor={getLetter}
         yAccessor={getLetterFrequency}
         data={data}
-        tooltipAccessor={(d) => `Tooltip content for '${d.frequency}'`}
+        tooltip={{
+          accessor: (d) => `Tooltip content for '${d.frequency}'`,
+        }}
+        animate={true}
+      />
+    </Wrapper>
+  );
+};
+
+export const WithoutAnimation: StoryFn<RadialBarChartProps<LetterFrequency>> = () => {
+  const getLetter = (d: LetterFrequency) => d.letter;
+  const getLetterFrequency = (d: LetterFrequency) => Number(d.frequency) * 100;
+  const alphabeticalSort = (a: LetterFrequency, b: LetterFrequency) => a.letter.localeCompare(b.letter);
+  const data = letterFrequency.sort(alphabeticalSort);
+
+  return (
+    <Wrapper>
+      <RadialBarChart<LetterFrequency>
+        name="LetterFrequency"
+        xAccessor={getLetter}
+        yAccessor={getLetterFrequency}
+        data={data}
+        tooltip={{
+          accessor: (d) => `Tooltip content for '${d.frequency}'`,
+        }}
+        animate={false}
       />
     </Wrapper>
   );

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

@@ -1,25 +1,27 @@
 import { MouseEvent, useCallback } from 'react';
-import { Arc } from '@visx/shape';
+import { arc } from '@visx/shape';
 import { Group } from '@visx/group';
 import { scaleBand, scaleRadial } from '@visx/scale';
-import { Text } from '@visx/text';
 import { shade } from 'polished';
+import { motion } from 'framer-motion';
 
-import { Margin, InnerChartProps, getDefaultTooltipStyles } from '../util';
+import { Margin, InnerChartProps, getDefaultTooltipStyles, TooltipConfig } from '../util';
 import { useTheme } from '../../../hooks';
 import { ParentSize } from '@visx/responsive';
 import { useTooltip, useTooltipInPortal } from '@visx/tooltip';
 import localPoint from '@visx/event/lib/localPointGeneric';
 import { useGradients } from '../useGradients';
+import { EmptyChart } from '../EmptyChart';
 
-const defaultMargin = { top: 10, right: 0, bottom: 25, left: 40 };
+const defaultMargin = { top: 20, right: 20, bottom: 20, left: 20 };
 export interface RadialBarChartProps<T> {
   name: string;
   data: T[];
   margin?: Margin;
   xAccessor: (d: T) => string;
   yAccessor: (d: T) => number;
-  tooltipAccessor: (d: T) => string;
+  tooltip?: TooltipConfig<T>;
+  animate?: boolean;
 }
 
 export const RadialBarChart = <T,>({
@@ -27,24 +29,30 @@ export const RadialBarChart = <T,>({
   data,
   margin,
   yAccessor,
-  tooltipAccessor,
+  tooltip,
   name,
+  animate = true,
 }: RadialBarChartProps<T>) => {
+  const hasData = data.length > 0;
+
   return (
     <>
       <ParentSize>
-        {(parent) => (
-          <Chart<T>
-            name={name}
-            data={data}
-            width={parent.width}
-            height={parent.height}
-            margin={margin}
-            yAccessor={yAccessor}
-            xAccessor={xAccessor}
-            tooltipAccessor={tooltipAccessor}
-          />
-        )}
+        {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>
     </>
   );
@@ -58,14 +66,18 @@ const Chart = <T,>({
   height,
   xAccessor,
   yAccessor,
-  tooltipAccessor,
+  tooltip,
   data,
   margin = defaultMargin,
+  animate = true,
 }: InnerRadialBarChartProps<T>) => {
   const toDegrees = (x: number) => (x * 180) / Math.PI;
   const theme = useTheme();
   const gradients = useGradients(name);
 
+  const tooltipAccessor = tooltip?.accessor;
+  const showTooltipEnabled = tooltip?.enabled ?? true;
+
   const { tooltipData, tooltipLeft, tooltipTop, tooltipOpen, hideTooltip, showTooltip } = useTooltip<string>();
   const { containerRef, TooltipInPortal } = useTooltipInPortal({
     detectBounds: true,
@@ -74,6 +86,7 @@ const Chart = <T,>({
 
   const handleMouseOver = useCallback(
     (event: MouseEvent, data: T) => {
+      if (!showTooltipEnabled || !tooltipAccessor) return;
       const target = event.target as SVGElement;
       const coords = localPoint(target.ownerSVGElement!, event);
       showTooltip({
@@ -82,7 +95,7 @@ const Chart = <T,>({
         tooltipData: tooltipAccessor(data),
       });
     },
-    [data, tooltipAccessor],
+    [data, tooltipAccessor, showTooltipEnabled],
   );
 
   // bounds
@@ -91,6 +104,9 @@ const Chart = <T,>({
   const radiusMax = Math.min(xMax, yMax) / 2;
   const innerRadius = radiusMax / 3;
 
+  const centerX = margin.left + xMax / 2;
+  const centerY = margin.top + yMax / 2;
+
   const xScale = scaleBand<string>({
     range: [0, 2 * Math.PI],
     domain: data.map(xAccessor),
@@ -105,36 +121,75 @@ const Chart = <T,>({
     <svg ref={containerRef} width={width} height={height}>
       {gradients.background.gradient}
       <rect width={width} height={height} fill="url(#radial-bars-green)" rx={14} />
-      <Group top={yMax / 2 + margin.top} left={xMax / 2 + margin.left}>
-        {data.map((d) => {
+      <Group top={centerY} left={centerX}>
+        {data.map((d, index) => {
           const xVal = xAccessor(d);
           const startAngle = xScale(xVal) ?? 0;
           const midAngle = startAngle + xScale.bandwidth() / 2;
           const endAngle = startAngle + xScale.bandwidth();
           const outerRadius = yScale(yAccessor(d)) ?? 0;
 
+          const arcGenerator = arc<{
+            innerRadius: number;
+            outerRadius: number;
+            startAngle: number;
+            endAngle: number;
+          }>({
+            cornerRadius: 3,
+          });
+
+          // Generate path data for static path
+          const pathData = arcGenerator({
+            startAngle,
+            endAngle,
+            innerRadius,
+            outerRadius,
+          });
+
           // convert polar coordinates to cartesian for drawing labels
           const textRadius = outerRadius + 4;
           const textX = textRadius * Math.cos(midAngle - Math.PI / 2);
           const textY = textRadius * Math.sin(midAngle - Math.PI / 2);
 
           return (
-            <>
-              <Arc
-                key={`bar-${xVal}`}
-                cornerRadius={3}
-                startAngle={startAngle}
-                endAngle={endAngle}
-                outerRadius={outerRadius}
-                innerRadius={innerRadius}
+            <g key={`bar-${xVal}`}>
+              <motion.path
+                d={pathData ?? undefined}
                 fill={shade(0.5, theme.colors.primary)}
                 stroke={theme.colors.primary}
                 onMouseOver={(e) => handleMouseOver(e, d)}
                 onMouseOut={hideTooltip}
                 onMouseLeave={hideTooltip}
                 style={{ cursor: 'pointer' }}
+                initial={
+                  animate
+                    ? {
+                        d:
+                          arcGenerator({
+                            startAngle,
+                            endAngle,
+                            innerRadius,
+                            outerRadius: innerRadius,
+                          }) ?? undefined,
+                      }
+                    : {
+                        d: pathData ?? undefined,
+                      }
+                }
+                animate={{
+                  d: pathData ?? undefined,
+                }}
+                transition={
+                  animate
+                    ? {
+                        duration: 0.2,
+                        delay: index * 0.1,
+                        ease: 'easeOut',
+                      }
+                    : { duration: 0 }
+                }
               />
-              <Text
+              <motion.text
                 x={textX}
                 y={textY}
                 dominantBaseline="end"
@@ -142,11 +197,22 @@ const Chart = <T,>({
                 fontSize={theme.fontSize.small}
                 fontWeight="bold"
                 fill={theme.colors.text}
-                angle={toDegrees(midAngle)}
+                transform={`rotate(${toDegrees(midAngle)} ${textX} ${textY})`}
+                initial={animate ? { opacity: 0 } : { opacity: 1 }}
+                animate={{ opacity: 1 }}
+                transition={
+                  animate
+                    ? {
+                        duration: 0.3,
+                        delay: index * 0.1 + 0.3,
+                        ease: 'easeOut',
+                      }
+                    : { duration: 0 }
+                }
               >
                 {xVal}
-              </Text>
-            </>
+              </motion.text>
+            </g>
           );
         })}
       </Group>

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

@@ -7,6 +7,12 @@ import { styled } from '../../../styled';
 export default {
   title: 'Charts/RadialLineChart',
   component: RadialLineChart,
+  args: {
+    animate: true,
+  },
+  argTypes: {
+    animate: { control: 'boolean' },
+  },
 } as Meta<RadialLineChartProps<AppleStock>>;
 
 const Wrapper = styled.div`
@@ -14,13 +20,24 @@ const Wrapper = styled.div`
   width: 500px;
 `;
 
-export const Default: StoryFn<RadialLineChartProps<AppleStock>> = () => {
+export const Default: StoryFn<RadialLineChartProps<AppleStock>> = (args) => {
   const getDate = (d: AppleStock) => new Date(d.date).valueOf();
   const getStockValue = (d: AppleStock) => d.close;
+  const tooltipAccessor = (d: AppleStock) => {
+    const date = new Date(d.date).toLocaleDateString();
+    return `Date: ${date}\nClose: $${d.close.toFixed(2)}`;
+  };
 
   return (
     <Wrapper>
-      <RadialLineChart<AppleStock> name="AppleStock" xAccessor={getDate} yAccessor={getStockValue} data={appleStock} />
+      <RadialLineChart<AppleStock>
+        {...args}
+        name="AppleStock"
+        xAccessor={getDate}
+        yAccessor={getStockValue}
+        data={appleStock}
+        tooltip={{ accessor: tooltipAccessor }}
+      />
     </Wrapper>
   );
 };