@takaro/lib-components 0.0.0-next.0da151e

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

@@ -0,0 +1,224 @@
+import { MouseEvent, useCallback } from 'react';
+
+import { ParentSize } from '@visx/responsive';
+import { Group } from '@visx/group';
+import { LineRadial } from '@visx/shape';
+import { scaleLinear } from '@visx/scale';
+import { useTooltipInPortal, useTooltip } from '@visx/tooltip';
+import { localPoint } from '@visx/event';
+import { Text } from '@visx/text';
+import { motion } from 'framer-motion';
+
+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> extends Exclude<ChartProps, 'grid'> {
+  data: T[];
+  xAccessor: (d: T) => string;
+  yAccessor: (d: T) => number;
+  levels?: number;
+  /** Tooltip configuration */
+  tooltip?: TooltipConfig<T>;
+}
+
+const defaultMargin = { top: 40, right: 40, bottom: 40, left: 40 };
+export const RadarChart = <T,>({
+  data,
+  xAccessor,
+  yAccessor,
+  name,
+  levels = 5,
+  margin = defaultMargin,
+  animate = true,
+  tooltip,
+}: RadarChartProps<T>) => {
+  const hasData = data && data.length > 0;
+
+  return (
+    <>
+      <ParentSize>
+        {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>
+    </>
+  );
+};
+
+type InnerRadarChartProps<T> = InnerChartProps & RadarChartProps<T>;
+
+const Chart = <T,>({
+  width,
+  yAccessor,
+  data,
+  name,
+  levels = 5,
+  xAccessor,
+  height,
+  margin = defaultMargin,
+  tooltip,
+  animate = true,
+}: InnerRadarChartProps<T>) => {
+  const theme = useTheme();
+
+  const { tooltipData, tooltipLeft, tooltipTop, tooltipOpen, hideTooltip, showTooltip } = useTooltip<string>();
+  const { containerRef, TooltipInPortal } = useTooltipInPortal({
+    detectBounds: true,
+    scroll: true,
+  });
+
+  const innerWidth = width - margin.left - margin.right;
+  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],
+  });
+  const yScale = scaleLinear<number>({
+    domain: [0, Math.max(...data.map(yAccessor))],
+    range: [0, radius],
+  });
+
+  const handleMouseOver = useCallback(
+    (event: MouseEvent, data: T) => {
+      const target = event.target as SVGElement;
+      const coords = localPoint(target.ownerSVGElement!, event);
+
+      showTooltip({
+        tooltipLeft: coords?.x,
+        tooltipTop: coords?.y,
+        tooltipData: tooltip?.accessor && tooltip.accessor(data),
+      });
+    },
+    [data, tooltip?.accessor],
+  );
+
+  const webs = genAngles(data.length);
+  const points = genPoints(data.length, radius);
+  const polygonPoints = genPolygonPoints(data, (d) => yScale(d) ?? 0, yAccessor);
+
+  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} 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}
+          >
+            {({ 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) => (
+          <>
+            <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"
+              y={points[i].y}
+              x={points[i].x}
+              dy={points[i].y / 12}
+              dx={points[i].x / 12}
+              fill={theme.colors.text}
+            >
+              {xAccessor(data[i])}
+            </Text>
+          </>
+        ))}
+        <polygon
+          points={polygonPoints.pointString}
+          fill={theme.colors.primary}
+          fillOpacity={0.5}
+          stroke={theme.colors.primary}
+          strokeWidth={2}
+        />
+        {polygonPoints.points.map((point, i) => (
+          <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 && (
+        <TooltipInPortal
+          key={`tooltip-${name}`}
+          top={tooltipTop}
+          left={tooltipLeft}
+          style={getDefaultTooltipStyles(theme)}
+        >
+          {tooltipData}
+        </TooltipInPortal>
+      )}
+    </svg>
+  );
+};

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { RadialBarChart, RadialBarChartProps } from '.';
+import { styled } from '../../../styled';
+import letterFrequency, { LetterFrequency } from '@visx/mock-data/lib/mocks/letterFrequency';
+
+export default {
+  title: 'Charts/RadialBarChart',
+  component: RadialBarChart,
+} as Meta<RadialBarChartProps<LetterFrequency>>;
+
+const Wrapper = styled.div`
+  height: 500px;
+  width: 500px;
+`;
+
+export const Default: 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={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

@@ -0,0 +1,231 @@
+import { MouseEvent, useCallback } from 'react';
+import { arc } from '@visx/shape';
+import { Group } from '@visx/group';
+import { scaleBand, scaleRadial } from '@visx/scale';
+import { shade } from 'polished';
+import { motion } from 'framer-motion';
+
+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: 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;
+  tooltip?: TooltipConfig<T>;
+  animate?: boolean;
+}
+
+export const RadialBarChart = <T,>({
+  xAccessor,
+  data,
+  margin,
+  yAccessor,
+  tooltip,
+  name,
+  animate = true,
+}: RadialBarChartProps<T>) => {
+  const hasData = data.length > 0;
+
+  return (
+    <>
+      <ParentSize>
+        {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>
+    </>
+  );
+};
+
+type InnerRadialBarChartProps<T> = InnerChartProps & RadialBarChartProps<T>;
+
+const Chart = <T,>({
+  name,
+  width,
+  height,
+  xAccessor,
+  yAccessor,
+  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,
+    scroll: true,
+  });
+
+  const handleMouseOver = useCallback(
+    (event: MouseEvent, data: T) => {
+      if (!showTooltipEnabled || !tooltipAccessor) return;
+      const target = event.target as SVGElement;
+      const coords = localPoint(target.ownerSVGElement!, event);
+      showTooltip({
+        tooltipLeft: coords?.x,
+        tooltipTop: coords?.y,
+        tooltipData: tooltipAccessor(data),
+      });
+    },
+    [data, tooltipAccessor, showTooltipEnabled],
+  );
+
+  // bounds
+  const xMax = width - margin.left - margin.right;
+  const yMax = height - margin.top - margin.bottom;
+  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),
+  });
+
+  const yScale = scaleRadial<number>({
+    range: [innerRadius, radiusMax],
+    domain: [0, Math.max(...data.map(yAccessor))],
+  });
+
+  return width < 10 ? null : (
+    <svg ref={containerRef} width={width} height={height}>
+      {gradients.background.gradient}
+      <rect width={width} height={height} fill="url(#radial-bars-green)" rx={14} />
+      <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 (
+            <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 }
+                }
+              />
+              <motion.text
+                x={textX}
+                y={textY}
+                dominantBaseline="end"
+                textAnchor="middle"
+                fontSize={theme.fontSize.small}
+                fontWeight="bold"
+                fill={theme.colors.text}
+                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}
+              </motion.text>
+            </g>
+          );
+        })}
+      </Group>
+      {tooltipOpen && tooltipData && (
+        <TooltipInPortal
+          key={`tooltip-${name}`}
+          top={tooltipTop}
+          left={tooltipLeft}
+          style={getDefaultTooltipStyles(theme)}
+        >
+          {tooltipData}
+        </TooltipInPortal>
+      )}
+    </svg>
+  );
+};

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import appleStock, { AppleStock } from '@visx/mock-data/lib/mocks/appleStock';
+import { RadialLineChart, RadialLineChartProps } from '.';
+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`
+  height: 500px;
+  width: 500px;
+`;
+
+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>
+        {...args}
+        name="AppleStock"
+        xAccessor={getDate}
+        yAccessor={getStockValue}
+        data={appleStock}
+        tooltip={{ accessor: tooltipAccessor }}
+      />
+    </Wrapper>
+  );
+};