@takaro/lib-components 0.4.8 → 0.4.10

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

@@ -1,8 +1,8 @@
-import { useMemo, useRef, useState } from 'react';
+import { useMemo, useRef, useState, useCallback, useEffect } from 'react';
 
 import { Bar } from '@visx/shape';
 import { Group } from '@visx/group';
-import { GridRows } from '@visx/grid';
+import { GridRows, GridColumns } from '@visx/grid';
 import { scaleBand, scaleLinear } from '@visx/scale';
 import { max } from '@visx/vendor/d3-array';
 import { ParentSize } from '@visx/responsive';
@@ -11,45 +11,46 @@ import { AxisBottom, AxisLeft } from '@visx/axis';
 import { Brush } from '@visx/brush';
 import { PatternLines } from '@visx/pattern';
 import { shade } from 'polished';
+import { useTooltip, TooltipWithBounds } from '@visx/tooltip';
+import { localPoint } from '@visx/event';
+import { motion } from 'framer-motion';
 
-import { useGradients } from '../useGradients';
 import { useTheme } from '../../../hooks';
-import { ChartProps, InnerChartProps, Margin } from '../util';
+import { ChartProps, InnerChartProps, BrushConfig, TooltipConfig, getDefaultTooltipStyles } from '../util';
 import { BrushHandle } from '../BrushHandle';
+import { EmptyChart } from '../EmptyChart';
 
 export interface BarChartProps<T> extends ChartProps {
   data: T[];
   xAccessor: (d: T) => string;
   yAccessor: (d: T) => number;
-  margin?: Margin;
-  showBrush?: boolean;
-  brushMargin?: Margin;
+  /** Bar width as percentage (0-1). 1.0 = bars touch (no gaps), 0.5 = bars take 50% of space. Default: 0.6 */
+  barWidth?: number;
+  tooltip?: TooltipConfig<T>;
+  brush?: BrushConfig;
 }
 
-const defaultMargin = { top: 20, left: 50, bottom: 20, right: 20 };
-const defaultBrushMargin = { top: 10, bottom: 15, left: 50, right: 20 };
+const defaultMargin = { top: 20, left: 60, bottom: 60, right: 20 };
+const defaultBrushMargin = { top: 10, bottom: 15, left: 60, right: 20 };
 const defaultShowAxisX = true;
 const defaultShowAxisY = true;
-const defaultShowGrid = true;
 
 export const BarChart = <T,>({
   data,
   xAccessor,
   yAccessor,
-  margin = defaultMargin,
-  showGrid = defaultShowGrid,
-  showBrush = false,
-  brushMargin = defaultBrushMargin,
   name,
-  showAxisX = defaultShowAxisX,
-  showAxisY = defaultShowAxisY,
-  axisXLabel,
-  axisYLabel,
+  grid = 'none',
+  axis,
+  barWidth = 0.6,
+  tooltip,
+  brush,
+  animate = true,
+  margin = defaultMargin,
 }: BarChartProps<T>) => {
-  // TODO: handle empty data
-  if (!data || data.length === 0) return null;
-
-  // TODO: handle loading state
+  if (!data || data.length === 0) {
+    return <EmptyChart />;
+  }
 
   return (
     <>
@@ -62,14 +63,13 @@ export const BarChart = <T,>({
             data={data}
             width={parent.width}
             height={parent.height}
-            brushMargin={brushMargin}
-            showBrush={showBrush}
-            showGrid={showGrid}
+            grid={grid}
+            axis={axis}
+            barWidth={barWidth}
+            tooltip={tooltip}
+            brush={brush}
+            animate={animate}
             margin={margin}
-            axisYLabel={axisYLabel}
-            axisXLabel={axisXLabel}
-            showAxisX={showAxisX}
-            showAxisY={showAxisY}
           />
         )}
       </ParentSize>
@@ -86,28 +86,38 @@ const Chart = <T,>({
   width,
   height,
   margin = defaultMargin,
-  showGrid = defaultShowGrid,
-  showBrush = false,
-  brushMargin = defaultBrushMargin,
+  grid = 'none',
+  axis,
+  barWidth = 0.6,
+  tooltip,
+  brush,
+  animate = true,
   name,
-  showAxisX = defaultShowAxisX,
-  showAxisY = defaultShowAxisY,
-  axisYLabel,
-  axisXLabel,
 }: InnerBarChartProps<T>) => {
-  const gradients = useGradients(name);
+  const showAxisX = axis?.showX ?? defaultShowAxisX;
+  const showAxisY = axis?.showY ?? defaultShowAxisY;
+  const axisXLabel = axis?.labelX;
+  const axisYLabel = axis?.labelY;
+  const numTicksY = axis?.numTicksY ?? 5;
+
+  const tooltipAccessor = tooltip?.accessor;
+  const showTooltipEnabled = tooltip?.enabled ?? true;
+
+  const showBrush = brush?.enabled ?? false;
+  const brushMargin = brush?.margin ?? defaultBrushMargin;
   const [filteredData, setFilteredData] = useState(data);
 
   const brushRef = useRef(null);
+  const { hideTooltip, showTooltip, tooltipData, tooltipLeft = 0, tooltipTop = 0 } = useTooltip<T>();
+  const [hoveredBar, setHoveredBar] = useState<string | null>(null);
 
   const axisHeight = 100;
-  const axisWidth = 20;
   const theme = useTheme();
 
   const PATTERN_ID = `${name}-brush_pattern`;
 
   // bounds
-  const xMax = width;
+  const xMax = Math.max(width - margin.left - margin.right, 0);
   const yMax = height - margin.top - axisHeight; // 100 for axis
 
   const chartSeparation = 30;
@@ -119,15 +129,19 @@ const Chart = <T,>({
   const xBrushMax = Math.max(width - brushMargin.left - brushMargin.right, 0);
   const yBrushMax = Math.max(bottomChartHeight - brushMargin.top - brushMargin.bottom, 0);
 
+  useEffect(() => {
+    setFilteredData(data);
+  }, [data]);
+
   const xScale = useMemo(
     () =>
       scaleBand<string>({
         range: [0, xMax],
         round: true,
         domain: filteredData.map(xAccessor),
-        padding: 0.4,
+        padding: 1 - barWidth,
       }),
-    [xMax, filteredData],
+    [xMax, filteredData, barWidth, xAccessor],
   );
   const yScale = useMemo(
     () =>
@@ -145,8 +159,9 @@ const Chart = <T,>({
         range: [0, xBrushMax],
         domain: data.map(xAccessor),
         round: true,
+        padding: 1 - barWidth,
       }),
-    [xBrushMax],
+    [xBrushMax, barWidth, xAccessor, data],
   );
 
   const yBrushScale = useMemo(
@@ -171,117 +186,235 @@ const Chart = <T,>({
     setFilteredData(filtered);
   };
 
-  return (
-    <svg width={width} height={height}>
-      {gradients.background.gradient}
-      {gradients.chart.gradient}
-      <rect width={width} height={height} fill={`url(#${gradients.background.id})`} rx={14} />
-      {showGrid && (
-        <GridRows
-          top={margin.top}
-          left={margin.left + axisWidth}
-          scale={yScale}
-          width={xMax}
-          height={yMax}
-          stroke={theme.colors.backgroundAccent}
-          strokeOpacity={1}
-        />
-      )}
-      <Group top={margin.top}>
-        {filteredData.map((d) => {
-          const xVal = xAccessor(d);
-          const barWidth = xScale.bandwidth();
-          const barHeight = yMax - (yScale(yAccessor(d)) ?? 0);
-          return (
-            <Bar
-              key={`bar-${xVal}`}
-              x={xScale(xVal)}
-              y={yMax - barHeight}
-              width={barWidth}
-              height={barHeight}
-              fill={shade(0.5, theme.colors.primary)}
-              stroke={theme.colors.primary}
-            />
-          );
-        })}
-      </Group>
-      {showAxisY && (
-        <AxisLeft
-          top={margin.top}
-          left={margin.left}
-          tickStroke={theme.colors.textAlt}
-          tickLabelProps={{
-            fill: theme.colors.textAlt,
-            fontSize: theme.fontSize.small,
-            textAnchor: 'middle',
-          }}
-          scale={yScale}
-          label={axisYLabel}
-        />
-      )}
+  const handleTooltip = useCallback(
+    (event: React.TouchEvent<SVGElement> | React.MouseEvent<SVGElement>) => {
+      const { x } = localPoint(event) || { x: 0 };
+      // x is relative to the SVG, subtract margin to get chart-relative position
+      const xRelativeToChart = x - margin.left;
 
-      {showAxisX && (
-        <AxisBottom
-          top={yMax + margin.top}
-          tickStroke={theme.colors.textAlt}
-          tickLabelProps={{
-            fill: theme.colors.textAlt,
-            fontSize: theme.fontSize.small,
-            textAnchor: 'middle',
-          }}
-          scale={xScale}
-          label={axisXLabel}
-        />
-      )}
+      // Find the bar that contains this x position
+      const xValue = xScale.domain().find((domainValue) => {
+        const barX = xScale(domainValue) ?? 0;
+        const barWidth = xScale.bandwidth();
+        return xRelativeToChart >= barX && xRelativeToChart <= barX + barWidth;
+      });
+
+      if (xValue) {
+        const d = filteredData.find((item) => xAccessor(item) === xValue);
+        if (d) {
+          const tooltipX = (xScale(xValue) ?? 0) + xScale.bandwidth() / 2; // Center of bar
+          const tooltipY = yScale(yAccessor(d));
+
+          setHoveredBar(xValue);
+          showTooltip({
+            tooltipData: d,
+            tooltipLeft: tooltipX,
+            tooltipTop: tooltipY,
+          });
+        }
+      }
+    },
+    [xScale, yScale, filteredData, xAccessor, yAccessor, margin.left, showTooltip],
+  );
+
+  return (
+    <div>
+      <svg width={width} height={height} role="img" aria-label={`Bar chart: ${name}`}>
+        <desc id={`${name}-desc`}>Bar chart showing {filteredData.length} data points</desc>
+        {(grid === 'y' || grid === 'xy') && (
+          <GridRows
+            top={margin.top}
+            left={margin.left}
+            scale={yScale}
+            width={xMax}
+            height={yMax}
+            stroke={theme.colors.backgroundAccent}
+            strokeOpacity={1}
+            strokeDasharray="2,2"
+            pointerEvents="none"
+          />
+        )}
+        {(grid === 'x' || grid === 'xy') && (
+          <GridColumns
+            top={margin.top}
+            left={margin.left}
+            scale={xScale}
+            height={yMax}
+            stroke={theme.colors.backgroundAccent}
+            strokeOpacity={1}
+            strokeDasharray="2,2"
+            pointerEvents="none"
+          />
+        )}
+        {/* Hover highlight */}
+        {hoveredBar && (
+          <Group top={margin.top} left={margin.left}>
+            {(() => {
+              const barX = xScale(hoveredBar) ?? 0;
+              const barWidth = xScale.bandwidth();
+              const stepWidth = xScale.step();
+              const highlightX = barX - (stepWidth - barWidth) / 2;
 
-      {showBrush && (
-        <>
-          {/* brush chart */}
-          <Group left={brushMargin.left} top={topChartHeight + topChartBottomMargin + margin.top}>
-            {data.map((d) => {
-              const xVal = xAccessor(d);
-              const barWidth = xBrushScale.bandwidth();
-              const barHeight = yBrushMax - (yBrushScale(yAccessor(d)) ?? 0);
               return (
-                <Bar
-                  key={`bar-${xVal}`}
-                  x={xBrushScale(xVal)}
-                  y={yBrushMax - barHeight}
-                  width={barWidth}
-                  height={barHeight}
-                  fill={`url(#${gradients.chart.id})`}
+                <motion.rect
+                  x={highlightX}
+                  y={0}
+                  width={stepWidth}
+                  height={yMax}
+                  fill={theme.colors.backgroundAccent}
+                  opacity={0.15}
+                  pointerEvents="none"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 0.15 }}
+                  transition={{ duration: 0.15 }}
                 />
               );
-            })}
-            <PatternLines
-              id={PATTERN_ID}
-              height={8}
-              width={8}
-              stroke={theme.colors.backgroundAccent}
-              strokeWidth={1}
-              orientation={['diagonal']}
-            />
-            <Brush
-              xScale={xBrushScale}
-              yScale={yBrushScale}
-              width={xBrushMax}
-              height={yBrushMax}
-              innerRef={brushRef}
-              resizeTriggerAreas={['left', 'right']}
-              brushDirection="horizontal"
-              margin={brushMargin}
-              onChange={onBrushChange}
-              selectedBoxStyle={{
-                fill: `url(#${PATTERN_ID})`,
-                stroke: theme.colors.backgroundAccent,
-              }}
-              useWindowMoveEvents
-              handleSize={8}
-              renderBrushHandle={(props) => <BrushHandle {...props} />}
-            />
+            })()}
           </Group>
-        </>
+        )}
+        <Group top={margin.top} left={margin.left}>
+          {filteredData.map((d, index) => {
+            const xVal = xAccessor(d);
+            const barWidth = xScale.bandwidth();
+            const barHeight = yMax - (yScale(yAccessor(d)) ?? 0);
+            return (
+              <g key={`bar-${xVal}`} transform={`translate(${xScale(xVal)}, ${yMax})`}>
+                <motion.rect
+                  x={0}
+                  width={barWidth}
+                  fill={shade(0.5, theme.colors.primary)}
+                  stroke={theme.colors.primary}
+                  initial={animate ? { y: 0, height: 0 } : { y: -barHeight, height: barHeight }}
+                  animate={{ y: -barHeight, height: barHeight }}
+                  transition={
+                    animate
+                      ? {
+                          duration: 0.6,
+                          delay: index * 0.05,
+                          ease: 'easeOut',
+                        }
+                      : { duration: 0 }
+                  }
+                />
+              </g>
+            );
+          })}
+        </Group>
+        {showTooltipEnabled && (
+          <Bar
+            x={margin.left}
+            y={margin.top}
+            width={xMax}
+            height={yMax}
+            fill="transparent"
+            onTouchStart={handleTooltip}
+            onTouchMove={handleTooltip}
+            onMouseMove={handleTooltip}
+            onMouseLeave={() => {
+              hideTooltip();
+              setHoveredBar(null);
+            }}
+          />
+        )}
+        {showAxisY && (
+          <AxisLeft
+            top={margin.top}
+            left={margin.left}
+            numTicks={numTicksY}
+            tickStroke={theme.colors.textAlt}
+            tickLabelProps={{
+              fill: theme.colors.textAlt,
+              fontSize: theme.fontSize.small,
+              textAnchor: 'end',
+            }}
+            scale={yScale}
+            label={axisYLabel}
+          />
+        )}
+
+        {showAxisX && (
+          <AxisBottom
+            top={yMax + margin.top}
+            left={margin.left}
+            tickStroke={theme.colors.textAlt}
+            tickLabelProps={{
+              fill: theme.colors.textAlt,
+              fontSize: theme.fontSize.small,
+              textAnchor: 'end',
+              angle: -45,
+              dy: '0.25em',
+            }}
+            tickFormat={(value) => {
+              const maxLength = 15;
+              const str = String(value);
+              return str.length > maxLength ? `${str.substring(0, maxLength)}...` : str;
+            }}
+            scale={xScale}
+            label={axisXLabel}
+          />
+        )}
+
+        {showBrush && (
+          <>
+            {/* brush chart */}
+            <Group left={brushMargin.left} top={topChartHeight + topChartBottomMargin + margin.top}>
+              {data.map((d) => {
+                const xVal = xAccessor(d);
+                const barWidth = xBrushScale.bandwidth();
+                const barHeight = yBrushMax - (yBrushScale(yAccessor(d)) ?? 0);
+                return (
+                  <Bar
+                    key={`bar-${xVal}`}
+                    x={xBrushScale(xVal)}
+                    y={yBrushMax - barHeight}
+                    width={barWidth}
+                    height={barHeight}
+                    fill={shade(0.5, theme.colors.primary)}
+                  />
+                );
+              })}
+              <PatternLines
+                id={PATTERN_ID}
+                height={8}
+                width={8}
+                stroke={theme.colors.backgroundAccent}
+                strokeWidth={1}
+                orientation={['diagonal']}
+              />
+              <Brush
+                xScale={xBrushScale}
+                yScale={yBrushScale}
+                width={xBrushMax}
+                height={yBrushMax}
+                innerRef={brushRef}
+                resizeTriggerAreas={['left', 'right']}
+                brushDirection="horizontal"
+                margin={brushMargin}
+                onChange={onBrushChange}
+                selectedBoxStyle={{
+                  fill: `url(#${PATTERN_ID})`,
+                  stroke: theme.colors.backgroundAccent,
+                }}
+                useWindowMoveEvents
+                handleSize={8}
+                renderBrushHandle={(props) => <BrushHandle {...props} />}
+              />
+            </Group>
+          </>
+        )}
+      </svg>
+      {showTooltipEnabled && tooltipData && (
+        <div>
+          <TooltipWithBounds
+            key={`${name}-tooltip`}
+            top={tooltipTop + margin.top}
+            left={tooltipLeft + margin.left}
+            style={getDefaultTooltipStyles(theme)}
+          >
+            {tooltipAccessor ? tooltipAccessor(tooltipData) : yAccessor(tooltipData)}
+          </TooltipWithBounds>
+        </div>
       )}
-    </svg>
+    </div>
   );
 };

package/src/components/charts/EmptyChart.tsx

@@ -0,0 +1,45 @@
+import { FC } from 'react';
+import { styled } from '../../styled';
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  svg {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+  path {
+    stroke: ${({ theme }) => theme.colors.primary};
+    stroke-width: 1;
+    fill: none;
+    opacity: 0.2;
+  }
+
+  p {
+    font-size: ${({ theme }) => theme.fontSize.medium};
+    color: ${({ theme }) => theme.colors.textAlt};
+  }
+`;
+
+export const EmptyChart: FC = () => {
+  return (
+    <Container>
+      <svg viewBox="0 0 100 100" preserveAspectRatio="none">
+        <path
+          d="
+      M 0,80 
+      C 10,60 20,90 30,70 
+      S 50,50 60,60 
+      S 80,30 90,50 
+      T 100,40
+    "
+        ></path>
+      </svg>
+      <p>No data available</p>
+    </Container>
+  );
+};

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 import { GeoMercator, GeoMercatorProps } from '.';
 import { Card } from '../../../components';
+import { CountryList } from '../../data/CountryList';
 import { styled } from '../../../styled';
 
 interface Shape {
@@ -39,6 +40,8 @@ const Wrapper = styled.div`
 const Inner = styled.div`
   width: 800px;
   height: 800px;
+  display: flex;
+  gap: 1rem;
 `;
 
 export const Default: StoryFn<GeoMercatorProps<Shape>> = (args) => {
@@ -54,15 +57,18 @@ export const Default: StoryFn<GeoMercatorProps<Shape>> = (args) => {
         <Card.Title label="Map" />
         <Card.Body>
           <Inner>
-            <GeoMercator<Shape>
-              name="geo-mercator"
-              xAccessor={getCountry}
-              yAccessor={getAmount}
-              tooltipAccessor={tooltipAccessor}
-              data={alpha3}
-              showZoomControls={args.showZoomControls}
-              allowZoomAndDrag={args.allowZoomAndDrag}
-            />
+            <div style={{ position: 'relative', flex: 1 }}>
+              <GeoMercator<Shape>
+                name="geo-mercator"
+                xAccessor={getCountry}
+                yAccessor={getAmount}
+                tooltipAccessor={tooltipAccessor}
+                data={alpha3}
+                showZoomControls={args.showZoomControls}
+                allowZoomAndDrag={args.allowZoomAndDrag}
+              />
+            </div>
+            <CountryList<Shape> data={alpha3} xAccessor={getCountry} yAccessor={getAmount} />
           </Inner>
         </Card.Body>
       </Card>