@takaro/lib-components 0.0.1

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

@@ -0,0 +1,163 @@
+import { MouseEvent, useCallback } from 'react';
+
+import { ParentSize } from '@visx/responsive';
+import { Group } from '@visx/group';
+import { Pie } from '@visx/shape';
+import { scaleOrdinal } from '@visx/scale';
+import { useTooltipInPortal, useTooltip } from '@visx/tooltip';
+import { localPoint } from '@visx/event';
+import { shade } from 'polished';
+
+import { useTheme } from '../../../hooks';
+import { getChartColors, getDefaultTooltipStyles, InnerChartProps, Margin } from '../util';
+
+type PieChartVariant = 'pie' | 'donut';
+
+export interface PieChartProps<T> {
+  name: string;
+  data: T[];
+  variant: PieChartVariant;
+  margin?: Margin;
+  xAccessor: (d: T) => string;
+  yAccessor: (d: T) => number;
+  tooltipAccessor: (d: T) => string;
+}
+
+const defaultMargin = { top: 10, right: 0, bottom: 25, left: 40 };
+export const PieChart = <T,>({
+  data,
+  yAccessor,
+  xAccessor,
+  tooltipAccessor,
+  name,
+  margin = defaultMargin,
+  variant,
+}: PieChartProps<T>) => {
+  return (
+    <>
+      <ParentSize>
+        {(parent) => (
+          <Chart<T>
+            name={name}
+            data={data}
+            width={parent.width}
+            height={parent.height}
+            margin={margin}
+            variant={variant}
+            yAccessor={yAccessor}
+            xAccessor={xAccessor}
+            tooltipAccessor={tooltipAccessor}
+          />
+        )}
+      </ParentSize>
+    </>
+  );
+};
+
+type InnerPieChartProps<T> = InnerChartProps & PieChartProps<T>;
+
+const Chart = <T,>({
+  width,
+  xAccessor,
+  yAccessor,
+  data,
+  name,
+  height,
+  variant,
+  tooltipAccessor,
+  margin = defaultMargin,
+}: InnerPieChartProps<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;
+  const centerX = innerWidth / 2;
+  const centerY = innerHeight / 2;
+  const donutThickness = 50;
+
+  const getArcColor = scaleOrdinal({
+    domain: data.map(xAccessor),
+    range: getChartColors(theme),
+  });
+  const pieSortValues = (a: number, b: number) => b - a;
+
+  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: tooltipAccessor(data),
+      });
+    },
+    [data, tooltipAccessor]
+  );
+
+  return width < 10 ? null : (
+    <svg ref={containerRef} id={name} width={width} height={height}>
+      <Group top={centerY + margin.top} left={centerX + margin.left}>
+        <Pie
+          data={data}
+          outerRadius={radius}
+          innerRadius={variant === 'donut' ? radius - donutThickness : 0}
+          cornerRadius={3}
+          padAngle={0.02}
+          pieSortValues={pieSortValues}
+          pieValue={yAccessor}
+        >
+          {(pie) => {
+            return pie.arcs.map((arc, index) => {
+              const [centroidX, centroidY] = pie.path.centroid(arc);
+              const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.1;
+              const arcPath = pie.path(arc) ?? '';
+              const arcFill = getArcColor(xAccessor(arc.data));
+              return (
+                <g key={`arc-${arc.data}-${index}`}>
+                  <path
+                    d={arcPath}
+                    fill={shade(0.5, arcFill)}
+                    stroke={arcFill}
+                    strokeWidth={1}
+                    onMouseOut={hideTooltip}
+                    onMouseOver={(e) => handleMouseOver(e, arc.data)}
+                  />
+                  {hasSpaceForLabel && (
+                    <text
+                      x={centroidX}
+                      y={centroidY}
+                      dy=".33em"
+                      fill="white"
+                      fontSize={9}
+                      textAnchor="middle"
+                      pointerEvents="none"
+                    >
+                      {xAccessor(arc.data)}
+                    </text>
+                  )}
+                </g>
+              );
+            });
+          }}
+        </Pie>
+      </Group>
+      {tooltipOpen && tooltipData && (
+        <TooltipInPortal
+          key={`tooltip-${name}`}
+          top={tooltipTop}
+          left={tooltipLeft}
+          style={getDefaultTooltipStyles(theme)}
+        >
+          {tooltipData}
+        </TooltipInPortal>
+      )}
+    </svg>
+  );
+};

package/src/components/charts/PointHighlight.tsx

@@ -0,0 +1,49 @@
+import { FC } from 'react';
+import { Margin } from './util';
+import { Group } from '@visx/group';
+import { Line } from '@visx/shape';
+import { useTheme } from '../../hooks';
+
+interface PointHighlightProps {
+  margin: Margin;
+  yMax: number;
+  tooltipLeft: number;
+  tooltipTop: number;
+}
+
+export const PointHighlight: FC<PointHighlightProps> = ({ margin, yMax, tooltipLeft, tooltipTop }) => {
+  const theme = useTheme();
+
+  return (
+    <Group left={margin.left} top={margin.top}>
+      <Line
+        from={{ x: tooltipLeft, y: margin.top }}
+        to={{ x: tooltipLeft, y: yMax + margin.top }}
+        stroke={theme.colors.backgroundAccent}
+        strokeWidth={1}
+        pointerEvents="none"
+        strokeDasharray="4,1"
+      />
+      <circle
+        cx={tooltipLeft}
+        cy={tooltipTop}
+        r={4}
+        fill="black"
+        fillOpacity={0.1}
+        stroke="black"
+        strokeOpacity={0.1}
+        strokeWidth={2}
+        pointerEvents="none"
+      />
+      <circle
+        cx={tooltipLeft}
+        cy={tooltipTop}
+        r={4}
+        fill={theme.colors.backgroundAccent}
+        stroke="white"
+        strokeWidth={2}
+        pointerEvents="none"
+      />
+    </Group>
+  );
+};

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { RadarChart, RadarChartProps } from '.';
+import { styled } from '../../../styled';
+import letterFrequency, { LetterFrequency } from '@visx/mock-data/lib/mocks/letterFrequency';
+
+export default {
+  title: 'Charts/RadarChart',
+  component: RadarChart,
+} as Meta<RadarChartProps<LetterFrequency>>;
+
+const Wrapper = styled.div`
+  height: 50vh;
+  width: 100%;
+`;
+
+export const Default: StoryFn<RadarChartProps<LetterFrequency>> = () => {
+  const getLetter = (d: LetterFrequency) => d.letter;
+  const getLetterFrequency = (d: LetterFrequency) => Number(d.frequency);
+  const tooltipAccessor = (d: LetterFrequency) => {
+    return `Tooltip content for '${getLetter(d)}' with frequency ${getLetterFrequency(d) * 100}% `;
+  };
+
+  // only show the first few letters
+  const data = letterFrequency.slice(2, 9);
+
+  return (
+    <Wrapper>
+      <RadarChart<LetterFrequency>
+        name="letterFrequency"
+        yAccessor={getLetterFrequency}
+        xAccessor={getLetter}
+        tooltipAccessor={tooltipAccessor}
+        data={data}
+      />
+    </Wrapper>
+  );
+};

package/src/components/charts/RadarChart/generators.ts

@@ -0,0 +1,30 @@
+export const genAngles = (length: number) =>
+  [...new Array(length + 1)].map((_, i) => ({
+    angle: i * (360 / length) + (length % 2 === 0 ? 0 : 360 / length / 2),
+  }));
+
+export const genPoints = (length: number, radius: number) => {
+  const step = (Math.PI * 2) / length;
+  return [...new Array(length)].map((_, i) => ({
+    x: radius * Math.sin(i * step),
+    y: radius * Math.cos(i * step),
+  }));
+};
+
+export function genPolygonPoints<T>(dataArray: T[], scale: (n: number) => number, getValue: (d: T) => number) {
+  const step = (Math.PI * 2) / dataArray.length;
+  const points: { x: number; y: number }[] = new Array(dataArray.length).fill({
+    x: 0,
+    y: 0,
+  });
+  const pointString: string = new Array(dataArray.length + 1).fill('').reduce((res, _, i) => {
+    if (i > dataArray.length) return res;
+    const xVal = scale(getValue(dataArray[i - 1])) * Math.sin(i * step);
+    const yVal = scale(getValue(dataArray[i - 1])) * Math.cos(i * step);
+    points[i - 1] = { x: xVal, y: yVal };
+    res += `${xVal},${yVal} `;
+    return res;
+  });
+
+  return { points, pointString };
+}

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

@@ -0,0 +1,175 @@
+import { MouseEvent, useCallback } from 'react';
+
+import { ParentSize } from '@visx/responsive';
+import { Group } from '@visx/group';
+import { Line, 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 { getDefaultTooltipStyles, InnerChartProps, Margin } from '../util';
+import { genAngles, genPoints, genPolygonPoints } from './generators';
+import { useTheme } from '../../../hooks';
+
+export interface RadarChartProps<T> {
+  name: string;
+  data: T[];
+  margin?: Margin;
+  xAccessor: (d: T) => string;
+  yAccessor: (d: T) => number;
+  tooltipAccessor: (d: T) => string;
+  levels?: number;
+}
+
+const defaultMargin = { top: 10, right: 0, bottom: 25, left: 40 };
+export const RadarChart = <T,>({
+  data,
+  xAccessor,
+  yAccessor,
+  tooltipAccessor,
+  name,
+  levels = 5,
+  margin = defaultMargin,
+}: RadarChartProps<T>) => {
+  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}
+          />
+        )}
+      </ParentSize>
+    </>
+  );
+};
+
+type InnerRadarChartProps<T> = InnerChartProps & RadarChartProps<T>;
+
+const Chart = <T,>({
+  width,
+  yAccessor,
+  data,
+  name,
+  levels = 5,
+  xAccessor,
+  height,
+  margin = defaultMargin,
+  tooltipAccessor,
+}: 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;
+
+  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: tooltipAccessor(data),
+      });
+    },
+    [data, tooltipAccessor]
+  );
+
+  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}>
+        {[...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"
+          />
+        ))}
+        {[...new Array(data.length)].map((_, i) => (
+          <>
+            <Line key={`radar-line-${i}`} from={zeroPoint} to={points[i]} stroke={theme.colors.backgroundAccent} />
+            <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.3}
+          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}
+          />
+        ))}
+      </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,34 @@
+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}
+        tooltipAccessor={(d) => `Tooltip content for '${d.frequency}'`}
+      />
+    </Wrapper>
+  );
+};

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

@@ -0,0 +1,165 @@
+import { MouseEvent, useCallback } from 'react';
+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 { Margin, InnerChartProps, getDefaultTooltipStyles } 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';
+
+export const defaultMargin = { top: 10, right: 0, bottom: 25, left: 40 };
+export interface RadialBarChartProps<T> {
+  name: string;
+  data: T[];
+  margin?: Margin;
+  xAccessor: (d: T) => string;
+  yAccessor: (d: T) => number;
+  tooltipAccessor: (d: T) => string;
+}
+
+export const RadialBarChart = <T,>({
+  xAccessor,
+  data,
+  margin,
+  yAccessor,
+  tooltipAccessor,
+  name,
+}: RadialBarChartProps<T>) => {
+  return (
+    <>
+      <ParentSize>
+        {(parent) => (
+          <Chart<T>
+            name={name}
+            data={data}
+            width={parent.width}
+            height={parent.height}
+            margin={margin}
+            yAccessor={yAccessor}
+            xAccessor={xAccessor}
+            tooltipAccessor={tooltipAccessor}
+          />
+        )}
+      </ParentSize>
+    </>
+  );
+};
+
+type InnerRadialBarChartProps<T> = InnerChartProps & RadialBarChartProps<T>;
+
+const Chart = <T,>({
+  name,
+  width,
+  height,
+  xAccessor,
+  yAccessor,
+  tooltipAccessor,
+  data,
+  margin = defaultMargin,
+}: InnerRadialBarChartProps<T>) => {
+  const toDegrees = (x: number) => (x * 180) / Math.PI;
+  const theme = useTheme();
+  const gradients = useGradients(name);
+
+  const { tooltipData, tooltipLeft, tooltipTop, tooltipOpen, hideTooltip, showTooltip } = useTooltip<string>();
+  const { containerRef, TooltipInPortal } = useTooltipInPortal({
+    detectBounds: true,
+    scroll: true,
+  });
+
+  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: tooltipAccessor(data),
+      });
+    },
+    [data, tooltipAccessor]
+  );
+
+  // 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 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={yMax / 2 + margin.top} left={xMax / 2 + margin.left}>
+        {data.map((d) => {
+          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;
+
+          // 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}
+                fill={shade(0.5, theme.colors.primary)}
+                stroke={theme.colors.primary}
+                onMouseOver={(e) => handleMouseOver(e, d)}
+                onMouseOut={hideTooltip}
+                onMouseLeave={hideTooltip}
+                style={{ cursor: 'pointer' }}
+              />
+              <Text
+                x={textX}
+                y={textY}
+                dominantBaseline="end"
+                textAnchor="middle"
+                fontSize={theme.fontSize.small}
+                fontWeight="bold"
+                fill={theme.colors.text}
+                angle={toDegrees(midAngle)}
+              >
+                {xVal}
+              </Text>
+            </>
+          );
+        })}
+      </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,26 @@
+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,
+} as Meta<RadialLineChartProps<AppleStock>>;
+
+const Wrapper = styled.div`
+  height: 500px;
+  width: 500px;
+`;
+
+export const Default: StoryFn<RadialLineChartProps<AppleStock>> = () => {
+  const getDate = (d: AppleStock) => new Date(d.date).valueOf();
+  const getStockValue = (d: AppleStock) => d.close;
+
+  return (
+    <Wrapper>
+      <RadialLineChart<AppleStock> name="AppleStock" xAccessor={getDate} yAccessor={getStockValue} data={appleStock} />
+    </Wrapper>
+  );
+};