@takaro/lib-components 0.0.1

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import { HeatMap, HeatmapProps } from '.';
+import { Meta, StoryFn } from '@storybook/react';
+import { styled } from '../../../styled';
+import { DateTime } from 'luxon';
+
+export default {
+  title: 'Charts/Heatmap',
+  component: HeatMap,
+} as Meta<HeatmapProps<number>>;
+
+const Wrapper = styled.div`
+  height: 250px;
+  width: 250px;
+`;
+
+interface Data {
+  timestamp: string;
+  value: boolean;
+}
+
+// this represents a month of a player's online status
+const data: Data[] = Array.from({ length: 30 }, (_, i) => ({
+  timestamp: DateTime.local().minus({ days: i }).toISODate()!,
+  value: Math.random() > 0.5,
+}));
+
+export const Default: StoryFn<HeatmapProps<number>> = () => {
+  // Extract the day of the week from the timestamp (0 for Sunday, 6 for Saturday)
+  const yAccessor = (d: Data) => DateTime.fromISO(d.timestamp).weekday;
+  // Extract the week of the month from the timestamp
+  const xAccessor = (d: Data): number => Math.floor(DateTime.fromISO(d.timestamp).day / 7);
+  // Convert boolean value to 0 or 1 because the heatmap expects a number
+  const zAccessor = (d: Data) => (d.value ? 1 : 0);
+
+  const tooltipAccessor = (d: Data) => {
+    const date = DateTime.fromISO(d.timestamp);
+    // format: "Sun, 10 jan: online
+    return `${date.weekdayShort}, ${date.day} ${date.monthShort}: ${d.value ? 'online' : 'offline'}`;
+  };
+
+  return (
+    <Wrapper>
+      <HeatMap<Data>
+        data={data}
+        xAccessor={xAccessor}
+        yAccessor={yAccessor}
+        zAccessor={zAccessor}
+        tooltipAccessor={tooltipAccessor}
+        variant="month"
+        name="online"
+      />
+    </Wrapper>
+  );
+};

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

@@ -0,0 +1,228 @@
+import { ParentSize } from '@visx/responsive';
+import { scaleLinear } from '@visx/scale';
+import { Group } from '@visx/group';
+import { AxisTop, AxisLeft } from '@visx/axis';
+import { HeatmapRect } from '@visx/heatmap';
+import { useTooltipInPortal } from '@visx/tooltip';
+import { scaleBand } from '@visx/scale';
+
+import { InnerChartProps, Margin } from '../util';
+import { useTheme } from '../../../hooks';
+
+interface InnerBin {
+  bin: number;
+  count: number;
+  tooltip: string;
+}
+
+interface OuterBin {
+  bin: number;
+  bins: InnerBin[];
+}
+
+const DATE_LABELS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+export interface HeatmapProps<T> {
+  name: string;
+  data: T[];
+  variant?: 'month';
+  margin?: Margin;
+  xAccessor: (d: T) => number;
+  yAccessor: (d: T) => number;
+  zAccessor: (d: T) => number;
+  tooltipAccessor: (d: T) => string;
+}
+
+const defaultMargin = { top: 10, right: 0, bottom: 25, left: 40 };
+export const HeatMap = <T,>({
+  data,
+  yAccessor,
+  xAccessor,
+  zAccessor,
+  variant,
+  tooltipAccessor,
+  name,
+  margin = defaultMargin,
+}: HeatmapProps<T>) => {
+  return (
+    <>
+      <ParentSize>
+        {(parent) => (
+          <Chart<T>
+            name={name}
+            data={data}
+            width={parent.width}
+            variant={variant}
+            height={parent.height}
+            margin={margin}
+            yAccessor={yAccessor}
+            xAccessor={xAccessor}
+            zAccessor={zAccessor}
+            tooltipAccessor={tooltipAccessor}
+          />
+        )}
+      </ParentSize>
+    </>
+  );
+};
+
+type InnerHeatmapProps<T> = InnerChartProps & HeatmapProps<T>;
+
+const Chart = <T,>({
+  data,
+  width,
+  height,
+  margin = defaultMargin,
+  xAccessor,
+  yAccessor,
+  zAccessor,
+  tooltipAccessor,
+}: InnerHeatmapProps<T>) => {
+  const theme = useTheme();
+
+  const { containerRef } = useTooltipInPortal({
+    detectBounds: true,
+    scroll: true,
+  });
+
+  const colorMax = Math.max(...data.map(yAccessor));
+
+  const xScale = scaleBand<number>({
+    domain: [0, 1, 2, 3, 4], // 5 weeks in a month
+    range: [margin.left, width - margin.right],
+  });
+  const yScale = scaleBand<number>({
+    domain: [0, 1, 2, 3, 4, 5, 6], // 7 days of the week
+    range: [margin.top, height - margin.bottom],
+  });
+  const colorScale = scaleLinear<string>({
+    domain: [0, colorMax],
+    range: [theme.colors.primary, theme.colors.primary],
+  });
+  const opacityScale = scaleLinear<number>({
+    domain: [0, colorMax],
+    range: [0.1, 1],
+  });
+  const xAxisScale = scaleBand<number>({
+    domain: Array.from({ length: 5 }), // Adjust as needed for weeks in the month
+    range: [0, width - margin.left - margin.right],
+  });
+
+  const yAxisScale = scaleBand<string>({
+    domain: DATE_LABELS,
+    range: [0, height - margin.top - margin.bottom],
+  });
+
+  const transformedData = transformData(data, xAccessor, yAccessor, zAccessor, tooltipAccessor);
+
+  return width < 10 ? null : (
+    <svg ref={containerRef} width={width} height={height}>
+      <AxisTop
+        scale={xAxisScale}
+        top={margin.top}
+        left={margin.left}
+        tickLength={4}
+        tickStroke={theme.colors.backgroundAccent}
+        stroke={theme.colors.backgroundAccent}
+        tickLabelProps={() => ({
+          y: -7,
+          textAnchor: 'middle',
+        })}
+      />
+      <AxisLeft
+        scale={yAxisScale}
+        left={margin.left}
+        orientation="left"
+        hideTicks
+        stroke={theme.colors.backgroundAccent}
+        tickLabelProps={(_value, index) => ({
+          textAnchor: 'end',
+          fontSize: theme.fontSize.tiny,
+          fill: index % 2 === 1 ? theme.colors.text : 'none', // Show label for even indices,
+          dy: '1.25rem',
+        })}
+      />
+      <Group>
+        <HeatmapRect<OuterBin, InnerBin>
+          data={transformedData}
+          xScale={(d) => xScale(d) ?? 0}
+          yScale={(bin) => yScale(bin) ?? 0}
+          count={(bin) => bin.count}
+          bins={(bin) => bin.bins}
+          colorScale={colorScale}
+          opacityScale={opacityScale}
+          binWidth={xScale.bandwidth()}
+          binHeight={yScale.bandwidth()}
+          gap={1}
+        >
+          {(heatmap) =>
+            heatmap.map((heatmapBins) =>
+              heatmapBins.map((bin) => {
+                return (
+                  <rect
+                    key={`heatmap-rect-${bin.row}-${bin.column}`}
+                    width={bin.width}
+                    height={bin.height}
+                    x={bin.x}
+                    y={bin.y}
+                    fill={bin.color}
+                    fillOpacity={bin.opacity}
+                  />
+                );
+              })
+            )
+          }
+        </HeatmapRect>
+      </Group>
+    </svg>
+  );
+};
+
+// transforms data to the structure expected by HeatmapRect
+// In our case, each bins will have a count of 1, since the data will already be aggregated
+// example:
+// [
+//   {
+//     bin: 0,
+//     bins: [
+//       { bin: 0, count: 0 },
+//       { bin: 4, count: 0 },
+//      ]
+//   },
+//   {
+//     bin: 1,
+//     bins: [
+//       { bin: 0, count: 1 },
+//      ]
+//   },
+function transformData<T>(
+  data: T[],
+  xAccessor: (d: T) => number,
+  yAccessor: (d: T) => number,
+  zAccessor: (d: T) => number,
+  tooltipAccessor: (d: T) => string
+): OuterBin[] {
+  const map = new Map<number, Map<number, { count: number; tooltip: string }>>();
+
+  data.forEach((d) => {
+    const xValue = xAccessor(d);
+    const yValue = yAccessor(d);
+    const zValue = zAccessor(d);
+    const tooltipValue = tooltipAccessor(d);
+
+    if (!map.has(xValue)) {
+      map.set(xValue, new Map<number, { count: number; tooltip: string }>());
+    }
+
+    const innerMap = map.get(xValue)!;
+    innerMap.set(yValue, { count: zValue, tooltip: tooltipValue });
+  });
+
+  // Convert to the structure expected by HeatmapRect
+  const transformedData: OuterBin[] = Array.from(map, ([bin, innerBins]) => ({
+    bin,
+    bins: Array.from(innerBins, ([bin, { count, tooltip }]) => ({ bin, count, tooltip })),
+  }));
+
+  return transformedData;
+}

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import appleStock, { AppleStock } from '@visx/mock-data/lib/mocks/appleStock';
+import { LineChart, LineChartProps } from '.';
+import { styled } from '../../../styled';
+
+export default {
+  title: 'Charts/LineChart',
+  component: LineChart,
+  args: {
+    curveType: 'curveBasis',
+  },
+} as Meta<LineChartProps<AppleStock>>;
+
+const Wrapper = styled.div`
+  height: 500px;
+  width: 500px;
+`;
+
+export const Default: StoryFn<LineChartProps<AppleStock>> = (args) => {
+  const getDate = (d: AppleStock) => new Date(d.date);
+  const getStockValue = (d: AppleStock) => d.close;
+  const getTooltip = (d: AppleStock) => `Close: ${d.close}`;
+
+  return (
+    <Wrapper>
+      <LineChart<AppleStock>
+        name="AppleStock"
+        xAccessor={getDate}
+        yAccessor={getStockValue}
+        tooltipAccessor={getTooltip}
+        data={appleStock}
+        curveType={args.curveType}
+      />
+    </Wrapper>
+  );
+};

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

@@ -0,0 +1,233 @@
+import { bisector, extent, max } from '@visx/vendor/d3-array';
+import * as allCurves from '@visx/curve';
+import { Group } from '@visx/group';
+import { LinePath } from '@visx/shape';
+import { ParentSize } from '@visx/responsive';
+import { scaleTime, scaleLinear } from '@visx/scale';
+import { AxisBottom, AxisLeft } from '@visx/axis';
+import { useTooltip, Tooltip, TooltipWithBounds } from '@visx/tooltip';
+import { timeFormat } from '@visx/vendor/d3-time-format';
+
+import { useTheme } from '../../../hooks';
+import { useCallback, useMemo } from 'react';
+import { Margin, ChartProps, InnerChartProps, getDefaultTooltipStyles } from '../util';
+import { localPoint } from '@visx/event';
+import { PointHighlight } from '../PointHighlight';
+
+const defaultMargin = { top: 10, right: 0, bottom: 25, left: 40 };
+const defaultShowAxisX = true;
+const defaultShowAxisY = true;
+
+type CurveType = keyof typeof allCurves;
+// eslint-disable-next-line quotes
+const formatDate = timeFormat("%b %d, '%y");
+
+export interface LineChartProps<T> extends ChartProps {
+  data: T[];
+  xAccessor: (d: T) => Date;
+  yAccessor: (d: T) => number;
+  tooltipAccessor?: (d: T) => string;
+  margin?: Margin;
+  curveType?: CurveType;
+}
+
+export const LineChart = <T,>({
+  data,
+  xAccessor,
+  yAccessor,
+  tooltipAccessor,
+  margin = defaultMargin,
+  name,
+  axisYLabel,
+  axisXLabel,
+  showGrid,
+  showAxisX = defaultShowAxisX,
+  showAxisY = defaultShowAxisY,
+  curveType = 'curveBasis',
+}: LineChartProps<T>) => {
+  if (!data || data.length === 0) return null;
+
+  return (
+    <ParentSize>
+      {(parent) => (
+        <Chart<T>
+          name={name}
+          xAccessor={xAccessor}
+          yAccessor={yAccessor}
+          tooltipAccessor={tooltipAccessor}
+          data={data}
+          width={parent.width}
+          height={parent.height}
+          showGrid={showGrid}
+          margin={margin}
+          axisYLabel={axisYLabel}
+          axisXLabel={axisXLabel}
+          showAxisX={showAxisX}
+          showAxisY={showAxisY}
+          curveType={curveType}
+        />
+      )}
+    </ParentSize>
+  );
+};
+
+type InnerLineChartProps<T> = InnerChartProps & LineChartProps<T>;
+
+const Chart = <T,>({
+  width,
+  height,
+  name,
+  curveType = 'curveBasis',
+  data,
+  xAccessor,
+  yAccessor,
+  margin = defaultMargin,
+  tooltipAccessor,
+  showAxisX,
+  showAxisY,
+  axisYLabel,
+  axisXLabel,
+}: InnerLineChartProps<T>) => {
+  const theme = useTheme();
+
+  const bottomAxisHeight = showAxisX ? 25 : 0;
+  const leftAxisWidth = showAxisX ? 25 : 0;
+  const innerWidth = width - margin.left - margin.right - leftAxisWidth;
+  const innerHeight = height - margin.top - margin.bottom - bottomAxisHeight;
+
+  const { hideTooltip, showTooltip, tooltipData, tooltipLeft = 0, tooltipTop = 0 } = useTooltip<T>();
+
+  const xScale = useMemo(
+    () =>
+      scaleTime<number>({
+        range: [margin.left, innerWidth],
+        domain: extent(data, xAccessor) as [Date, Date],
+      }),
+    [innerWidth]
+  );
+
+  const yScale = useMemo(
+    () =>
+      scaleLinear<number>({
+        range: [innerHeight, margin.bottom],
+        domain: [0, max(data, yAccessor) as number],
+      }),
+    [innerHeight]
+  );
+
+  const handleTooltip = useCallback(
+    (event: React.TouchEvent<SVGElement> | React.MouseEvent<SVGElement>) => {
+      const { x } = localPoint(event) || { x: 0 };
+      const x0 = xScale.invert(x - margin.left);
+      let index = bisector<T, Date>(xAccessor).left(data, x0);
+
+      // Clamp the index to ensure it's within the range of data points
+      index = Math.min(data.length - 1, Math.max(0, index));
+
+      const d = data[index];
+      const tooltipX = xScale(xAccessor(d));
+      const tooltipY = yScale(yAccessor(d));
+
+      showTooltip({
+        tooltipData: d,
+        tooltipLeft: tooltipX,
+        tooltipTop: tooltipY,
+      });
+    },
+    [yScale, xScale, data, yAccessor, xAccessor, width, height]
+  );
+
+  return width === 10 ? null : (
+    <>
+      <svg width={width} height={height}>
+        <rect width={width} height={height} fill={theme.colors.background} rx={14} ry={14} />
+        <Group top={margin.top} left={margin.left}>
+          <rect
+            x={margin.left}
+            width={innerWidth - margin.left - margin.right}
+            height={innerHeight}
+            fill="transparent"
+            onTouchStart={handleTooltip}
+            onTouchMove={handleTooltip}
+            onMouseMove={handleTooltip}
+            onMouseLeave={hideTooltip}
+          />
+          <LinePath<T>
+            curve={allCurves[curveType]}
+            data={data}
+            x={(d) => xScale(xAccessor(d)) ?? 0}
+            y={(d) => yScale(yAccessor(d)) ?? 0}
+            stroke={theme.colors.primary}
+            strokeWidth={1.2}
+            strokeOpacity={0.6}
+            shapeRendering="geometricPrecision"
+          />
+        </Group>
+        {tooltipData && (
+          <PointHighlight margin={margin} tooltipTop={tooltipTop} tooltipLeft={tooltipLeft} yMax={innerHeight} />
+        )}
+        {showAxisY && (
+          <AxisLeft
+            top={margin.top}
+            left={margin.left + margin.left}
+            strokeWidth={1}
+            hideZero
+            stroke={theme.colors.backgroundAlt}
+            labelOffset={42}
+            tickStroke={theme.colors.backgroundAlt}
+            tickLabelProps={{
+              fill: theme.colors.text,
+              fontSize: theme.fontSize.small,
+              textAnchor: 'end',
+            }}
+            scale={yScale}
+            label={axisYLabel}
+          />
+        )}
+        {showAxisX && (
+          <AxisBottom
+            top={innerHeight + margin.top}
+            left={margin.left}
+            strokeWidth={1}
+            stroke={theme.colors.backgroundAlt}
+            hideZero
+            tickLabelProps={{
+              fill: theme.colors.text,
+              fontSize: theme.fontSize.small,
+              textAnchor: 'middle',
+            }}
+            labelProps={{
+              fill: theme.colors.textAlt,
+            }}
+            scale={xScale}
+            label={axisXLabel}
+          />
+        )}
+      </svg>
+      {tooltipData && (
+        <div>
+          <TooltipWithBounds
+            key={`${name}-tooltip`}
+            top={tooltipTop - margin.top}
+            left={tooltipLeft + margin.left}
+            style={getDefaultTooltipStyles(theme)}
+          >
+            {tooltipAccessor ? tooltipAccessor(tooltipData) : yAccessor(tooltipData)}
+          </TooltipWithBounds>
+          <Tooltip
+            top={innerHeight + margin.top - 14}
+            left={tooltipLeft + margin.left}
+            style={{
+              ...getDefaultTooltipStyles(theme),
+              minWidth: 72,
+              textAlign: 'center',
+              transform: 'translateX(-50%)',
+            }}
+          >
+            {formatDate(xAccessor(tooltipData))}
+          </Tooltip>
+        </div>
+      )}
+    </>
+  );
+};

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

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