@takaro/lib-components 0.0.1

package/src/components/charts/BrushHandle.tsx

@@ -0,0 +1,21 @@
+import { BrushHandleRenderProps } from '@visx/brush/lib/BrushHandle';
+import { Group } from '@visx/group';
+
+export function BrushHandle({ x, height, isBrushActive }: BrushHandleRenderProps) {
+  const pathWidth = 8;
+  const pathHeight = 15;
+  if (!isBrushActive) {
+    return null;
+  }
+  return (
+    <Group left={x + pathWidth / 2} top={(height - pathHeight) / 2}>
+      <path
+        fill=""
+        d="M -4.5 0.5 L 3.5 0.5 L 3.5 15.5 L -4.5 15.5 L -4.5 0.5 M -1.5 4 L -1.5 12 M 0.5 4 L 0.5 12"
+        stroke="#999999"
+        strokeWidth="1"
+        style={{ cursor: 'ew-resize' }}
+      />
+    </Group>
+  );
+}

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { GeoMercator, GeoMercatorProps } from '.';
+import { Card } from '../../../components';
+import { styled } from '../../../styled';
+
+interface Shape {
+  code: string;
+  amount: number;
+  name: string;
+}
+
+// 3 letter country codes
+const data: Shape[] = [
+  { code: 'BEL', amount: 10, name: 'Belgium' },
+  { code: 'CAN', amount: 20, name: 'Canada' },
+  { code: 'DEU', amount: 30, name: 'Germany' },
+  { code: 'ESP', amount: 40, name: 'Spain' },
+  { code: 'FRA', amount: 50, name: 'France' },
+  { code: 'GBR', amount: 60, name: 'United Kingdom' },
+  { code: 'GRC', amount: 70, name: 'Greece' },
+  { code: 'ITA', amount: 80, name: 'Italy' },
+  { code: 'NLD', amount: 90, name: 'Netherlands' },
+  { code: 'USA', amount: 100, name: 'United States of America' },
+];
+
+export default {
+  title: 'Charts/GeoMercator',
+  component: GeoMercator,
+} as Meta<GeoMercatorProps<Shape>>;
+
+const Wrapper = styled.div`
+  width: 90vw;
+  height: 90vh;
+`;
+
+const Inner = styled.div`
+  width: 90vw;
+  height: 90vh;
+`;
+
+export const Default: StoryFn<GeoMercatorProps<Shape>> = () => {
+  const getCountry = (d: Shape) => d.code;
+  const getAmount = (d: Shape) => Number(d.amount);
+  const tooltipAccessor = (d: Shape) => {
+    return `${d.name}:${getAmount(d)}`;
+  };
+
+  return (
+    <Wrapper>
+      <Card variant="outline">
+        <Inner>
+          <h2>Map</h2>
+          <GeoMercator<Shape>
+            name="geo-mercator"
+            xAccessor={getCountry}
+            yAccessor={getAmount}
+            tooltipAccessor={tooltipAccessor}
+            data={data}
+          />
+        </Inner>
+      </Card>
+    </Wrapper>
+  );
+};

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

@@ -0,0 +1,141 @@
+import * as topojson from 'topojson-client';
+import topology from './world.json';
+import { Graticule, Mercator } from '@visx/geo';
+import { ParentSize } from '@visx/responsive';
+
+import { getDefaultTooltipStyles, InnerChartProps, Margin } from '../util';
+import { useTheme } from '../../../hooks';
+import { useTooltip, Tooltip } from '@visx/tooltip';
+import { useCallback } from 'react';
+import { localPoint } from '@visx/event';
+import { shade } from 'polished';
+
+interface FeatureShape {
+  type: 'Feature';
+  id: string;
+  geometry: { coordinates: [number, number][][]; type: 'Polygon' };
+  properties: { name: string };
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+const world = topojson.feature(topology, topology.objects.units) as {
+  type: 'FeatureCollection';
+  features: FeatureShape[];
+};
+
+export interface GeoMercatorProps<T> {
+  name: string;
+  data: T[];
+  margin?: Margin;
+  xAccessor: (d: T) => string; // country: string
+  yAccessor: (d: T) => number; // amount: number (used for color)
+  tooltipAccessor?: (d: T) => string;
+}
+
+const defaultMargin = { top: 0, right: 0, bottom: 0, left: 0 };
+export const GeoMercator = <T,>({
+  data,
+  yAccessor,
+  xAccessor,
+  name,
+  margin = defaultMargin,
+  tooltipAccessor,
+}: GeoMercatorProps<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 InnerGeoMercator<T> = InnerChartProps & GeoMercatorProps<T>;
+
+const Chart = <T,>({
+  width,
+  yAccessor,
+  xAccessor,
+  data,
+  tooltipAccessor,
+  name,
+  height,
+}: // margin = defaultMargin,
+// tooltipAccessor
+InnerGeoMercator<T>) => {
+  const theme = useTheme();
+  const { hideTooltip, showTooltip, tooltipData, tooltipLeft = 0, tooltipTop = 0 } = useTooltip<T>();
+
+  const centerX = width / 2;
+  const centerY = height / 2;
+  const scale = (width / 630) * 100;
+
+  const handleTooltip = useCallback(
+    (event: React.TouchEvent<SVGPathElement> | React.MouseEvent<SVGPathElement>, countryData: T | undefined) => {
+      const eventSvgCoords = localPoint(event);
+
+      showTooltip({
+        tooltipData: countryData,
+        tooltipLeft: eventSvgCoords?.x,
+        tooltipTop: eventSvgCoords?.y,
+      });
+    },
+    [yAccessor, xAccessor, width, height]
+  );
+
+  return width < 10 ? null : (
+    <>
+      <svg id={name} name={name} width={width} height={height}>
+        <rect x={0} y={0} width={width} height={height} fill={theme.colors.background} rx={14} />
+        <Mercator<FeatureShape> data={world.features} scale={scale} translate={[centerX, centerY + 50]}>
+          {(mercator) => (
+            <g>
+              <Graticule graticule={(g) => mercator.path(g) || ''} stroke="rgba(33,33,33,0.05)" />
+              {mercator.features.map(({ feature, path }, i) => {
+                const countryData = data.find((d) => xAccessor(d) === feature.id);
+                return (
+                  <path
+                    key={`map-feature-${i}`}
+                    d={path || ''}
+                    stroke={countryData ? theme.colors.primary : theme.colors.backgroundAccent}
+                    strokeWidth={countryData ? 1 : 0.5}
+                    fill={countryData ? shade(0.5, theme.colors.primary) : theme.colors.backgroundAlt}
+                    onMouseLeave={hideTooltip}
+                    onMouseMove={(e) => handleTooltip(e, countryData)}
+                    onTouchStart={(e) => handleTooltip(e, countryData)}
+                    onTouchMove={(e) => handleTooltip(e, countryData)}
+                  />
+                );
+              })}
+            </g>
+          )}
+        </Mercator>
+      </svg>
+      {tooltipData && (
+        <Tooltip
+          top={tooltipTop}
+          left={tooltipLeft}
+          style={{
+            ...getDefaultTooltipStyles(theme),
+            textAlign: 'center',
+            transform: 'translate(-50%)',
+          }}
+        >
+          {tooltipAccessor ? tooltipAccessor(tooltipData) : `${xAccessor(tooltipData)}: ${yAccessor(tooltipData)}`}
+        </Tooltip>
+      )}
+    </>
+  );
+};

package/src/components/charts/GeoMercator/world.d.ts

@@ -0,0 +1 @@
+declare module '*.json';