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

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

@@ -0,0 +1,228 @@
+import * as topojson from 'topojson-client';
+import topology from './world.json';
+import { Graticule, Mercator } from '@visx/geo';
+import { scaleLinear } from '@visx/scale';
+import { ParentSize } from '@visx/responsive';
+
+import { getDefaultTooltipStyles, InnerChartProps, Margin } from '../util';
+import { useTheme } from '../../../hooks';
+import { useTooltip, Tooltip } from '@visx/tooltip';
+import { styled } from '../../../styled';
+import { Zoom } from '@visx/zoom';
+import { useCallback } from 'react';
+import { localPoint } from '@visx/event';
+import { ZoomControls } from '../ZoomControls';
+import { alpha2ToAlpha3 } from './iso3166-alpha2-to-alpha3';
+
+const StyledTooltip = styled(Tooltip)`
+  text-align: center;
+  transform: translate(-50%);
+`;
+
+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;
+  yAccessor: (d: T) => number;
+  tooltipAccessor?: (d: T) => string;
+  showZoomControls?: boolean;
+  allowZoomAndDrag?: boolean;
+}
+
+type InnerGeoMercator<T> = InnerChartProps & GeoMercatorProps<T>;
+const defaultMargin = { top: 0, right: 0, bottom: 0, left: 0 };
+export const GeoMercator = <T,>({
+  data,
+  yAccessor,
+  xAccessor,
+  name,
+  margin = defaultMargin,
+  tooltipAccessor,
+  showZoomControls = false,
+  allowZoomAndDrag = false,
+}: GeoMercatorProps<T>) => {
+  return (
+    <ParentSize>
+      {(parent) => (
+        <Chart<T>
+          name={name}
+          data={data}
+          width={parent.width}
+          height={parent.height}
+          margin={margin}
+          yAccessor={yAccessor}
+          xAccessor={xAccessor}
+          allowZoomAndDrag={allowZoomAndDrag}
+          showZoomControls={showZoomControls}
+          tooltipAccessor={tooltipAccessor}
+        />
+      )}
+    </ParentSize>
+  );
+};
+
+const Chart = <T,>({
+  width,
+  height,
+  yAccessor,
+  xAccessor,
+  data,
+  tooltipAccessor,
+  name,
+  allowZoomAndDrag,
+  showZoomControls,
+}: 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 = Math.min(width, height) * 0.25;
+
+  const colorScale = scaleLinear({
+    domain: [0, Math.max(...data.map((d) => yAccessor(d)))],
+    range: [theme.colors.backgroundAlt, theme.colors.primary],
+  });
+
+  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 ? eventSvgCoords.y - 38 : undefined,
+      });
+    },
+    [showTooltip],
+  );
+
+  const renderMap = (zoom?: {
+    containerRef: React.RefObject<SVGSVGElement>;
+    isDragging: boolean;
+    dragStart: any;
+    dragMove: any;
+    dragEnd: any;
+    transformMatrix: { scaleX: number; translateX: number; translateY: number };
+  }) => (
+    <svg
+      id={name}
+      name={name}
+      width={width}
+      height={height}
+      ref={zoom?.containerRef}
+      style={{
+        touchAction: 'none',
+        cursor: allowZoomAndDrag && zoom ? (zoom.isDragging ? 'grabbing' : 'grab') : 'default',
+      }}
+    >
+      <rect x={0} y={0} width={width} height={height} fill={theme.colors.background} rx={10} />
+      <Mercator<FeatureShape>
+        data={world.features}
+        scale={zoom?.transformMatrix.scaleX || scale}
+        translate={[zoom?.transformMatrix.translateX || centerX, zoom?.transformMatrix.translateY || centerY]}
+      >
+        {(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) => {
+                // If alpha2 , try to convert it to aplha3.
+                // Since world.json only has support for alpha3.
+                if (xAccessor(d).length === 2) {
+                  return alpha2ToAlpha3[xAccessor(d)] === feature.id;
+                }
+                return xAccessor(d) === feature.id;
+              });
+
+              const fillColor = countryData ? colorScale(yAccessor(countryData)) : theme.colors.backgroundAlt;
+
+              return (
+                <path
+                  key={`map-feature-${i}`}
+                  d={path || ''}
+                  stroke={theme.colors.backgroundAccent}
+                  strokeWidth={0.35}
+                  fill={fillColor}
+                  onMouseLeave={hideTooltip}
+                  onMouseMove={(e) => handleTooltip(e, countryData)}
+                  onTouchStart={(e) => handleTooltip(e, countryData)}
+                  onTouchMove={(e) => handleTooltip(e, countryData)}
+                />
+              );
+            })}
+          </g>
+        )}
+      </Mercator>
+      {allowZoomAndDrag && zoom && (
+        <rect
+          x={0}
+          y={0}
+          width={width}
+          height={height}
+          rx={14}
+          fill="transparent"
+          onTouchStart={zoom.dragStart}
+          onTouchMove={zoom.dragMove}
+          onTouchEnd={zoom.dragEnd}
+          onMouseDown={zoom.dragStart}
+          onMouseMove={zoom.dragMove}
+          onMouseUp={zoom.dragEnd}
+          onMouseLeave={() => {
+            if (zoom.isDragging) zoom.dragEnd();
+          }}
+        />
+      )}
+    </svg>
+  );
+
+  const renderContent = (zoomProps?: any) => (
+    <>
+      {renderMap(zoomProps)}
+      {showZoomControls && zoomProps && <ZoomControls zoom={zoomProps} />}
+      {tooltipData && (
+        <StyledTooltip top={tooltipTop} left={tooltipLeft} style={getDefaultTooltipStyles(theme)}>
+          {tooltipAccessor ? tooltipAccessor(tooltipData) : `${xAccessor(tooltipData)}: ${yAccessor(tooltipData)}`}
+        </StyledTooltip>
+      )}
+    </>
+  );
+
+  return allowZoomAndDrag ? (
+    <Zoom<SVGSVGElement>
+      width={width}
+      height={height}
+      scaleXMin={100}
+      scaleXMax={1000}
+      scaleYMin={100}
+      scaleYMax={1000}
+      initialTransformMatrix={{
+        scaleX: scale,
+        scaleY: scale,
+        translateX: centerX,
+        translateY: centerY,
+        skewX: 0,
+        skewY: 0,
+      }}
+    >
+      {(zoom) => renderContent(zoom)}
+    </Zoom>
+  ) : (
+    renderContent()
+  );
+};

package/src/components/charts/GeoMercator/iso3166-alpha2-to-alpha3.ts

@@ -0,0 +1,250 @@
+export const alpha2ToAlpha3: Record<string, string> = {
+  AF: 'AFG',
+  AX: 'ALA',
+  AL: 'ALB',
+  DZ: 'DZA',
+  AS: 'ASM',
+  AD: 'AND',
+  AO: 'AGO',
+  AI: 'AIA',
+  AQ: 'ATA',
+  AG: 'ATG',
+  AR: 'ARG',
+  AM: 'ARM',
+  AW: 'ABW',
+  AU: 'AUS',
+  AT: 'AUT',
+  AZ: 'AZE',
+  BS: 'BHS',
+  BH: 'BHR',
+  BD: 'BGD',
+  BB: 'BRB',
+  BY: 'BLR',
+  BE: 'BEL',
+  BZ: 'BLZ',
+  BJ: 'BEN',
+  BM: 'BMU',
+  BT: 'BTN',
+  BO: 'BOL',
+  BA: 'BIH',
+  BW: 'BWA',
+  BV: 'BVT',
+  BR: 'BRA',
+  VG: 'VGB',
+  IO: 'IOT',
+  BN: 'BRN',
+  BG: 'BGR',
+  BF: 'BFA',
+  BI: 'BDI',
+  KH: 'KHM',
+  CM: 'CMR',
+  CA: 'CAN',
+  CV: 'CPV',
+  KY: 'CYM',
+  CF: 'CAF',
+  TD: 'TCD',
+  CL: 'CHL',
+  CN: 'CHN',
+  HK: 'HKG',
+  MO: 'MAC',
+  CX: 'CXR',
+  CC: 'CCK',
+  CO: 'COL',
+  KM: 'COM',
+  CG: 'COG',
+  CD: 'COD',
+  CK: 'COK',
+  CR: 'CRI',
+  CI: 'CIV',
+  HR: 'HRV',
+  CU: 'CUB',
+  CY: 'CYP',
+  CZ: 'CZE',
+  DK: 'DNK',
+  DJ: 'DJI',
+  DM: 'DMA',
+  DO: 'DOM',
+  EC: 'ECU',
+  EG: 'EGY',
+  SV: 'SLV',
+  GQ: 'GNQ',
+  ER: 'ERI',
+  EE: 'EST',
+  ET: 'ETH',
+  FK: 'FLK',
+  FO: 'FRO',
+  FJ: 'FJI',
+  FI: 'FIN',
+  FR: 'FRA',
+  GF: 'GUF',
+  PF: 'PYF',
+  TF: 'ATF',
+  GA: 'GAB',
+  GM: 'GMB',
+  GE: 'GEO',
+  DE: 'DEU',
+  GH: 'GHA',
+  GI: 'GIB',
+  GR: 'GRC',
+  GL: 'GRL',
+  GD: 'GRD',
+  GP: 'GLP',
+  GU: 'GUM',
+  GT: 'GTM',
+  GG: 'GGY',
+  GN: 'GIN',
+  GW: 'GNB',
+  GY: 'GUY',
+  HT: 'HTI',
+  HM: 'HMD',
+  VA: 'VAT',
+  HN: 'HND',
+  HU: 'HUN',
+  IS: 'ISL',
+  IN: 'IND',
+  ID: 'IDN',
+  IR: 'IRN',
+  IQ: 'IRQ',
+  IE: 'IRL',
+  IM: 'IMN',
+  IL: 'ISR',
+  IT: 'ITA',
+  JM: 'JAM',
+  JP: 'JPN',
+  JE: 'JEY',
+  JO: 'JOR',
+  KZ: 'KAZ',
+  KE: 'KEN',
+  KI: 'KIR',
+  KP: 'PRK',
+  KR: 'KOR',
+  KW: 'KWT',
+  KG: 'KGZ',
+  LA: 'LAO',
+  LV: 'LVA',
+  LB: 'LBN',
+  LS: 'LSO',
+  LR: 'LBR',
+  LY: 'LBY',
+  LI: 'LIE',
+  LT: 'LTU',
+  LU: 'LUX',
+  MK: 'MKD',
+  MG: 'MDG',
+  MW: 'MWI',
+  MY: 'MYS',
+  MV: 'MDV',
+  ML: 'MLI',
+  MT: 'MLT',
+  MH: 'MHL',
+  MQ: 'MTQ',
+  MR: 'MRT',
+  MU: 'MUS',
+  YT: 'MYT',
+  MX: 'MEX',
+  FM: 'FSM',
+  MD: 'MDA',
+  MC: 'MCO',
+  MN: 'MNG',
+  ME: 'MNE',
+  MS: 'MSR',
+  MA: 'MAR',
+  MZ: 'MOZ',
+  MM: 'MMR',
+  NA: 'NAM',
+  NR: 'NRU',
+  NP: 'NPL',
+  NL: 'NLD',
+  AN: 'ANT',
+  NC: 'NCL',
+  NZ: 'NZL',
+  NI: 'NIC',
+  NE: 'NER',
+  NG: 'NGA',
+  NU: 'NIU',
+  NF: 'NFK',
+  MP: 'MNP',
+  NO: 'NOR',
+  OM: 'OMN',
+  PK: 'PAK',
+  PW: 'PLW',
+  PS: 'PSE',
+  PA: 'PAN',
+  PG: 'PNG',
+  PY: 'PRY',
+  PE: 'PER',
+  PH: 'PHL',
+  PN: 'PCN',
+  PL: 'POL',
+  PT: 'PRT',
+  PR: 'PRI',
+  QA: 'QAT',
+  RE: 'REU',
+  RO: 'ROU',
+  RU: 'RUS',
+  RW: 'RWA',
+  BL: 'BLM',
+  SH: 'SHN',
+  KN: 'KNA',
+  LC: 'LCA',
+  MF: 'MAF',
+  PM: 'SPM',
+  VC: 'VCT',
+  WS: 'WSM',
+  SM: 'SMR',
+  ST: 'STP',
+  SA: 'SAU',
+  SN: 'SEN',
+  RS: 'SRB',
+  SC: 'SYC',
+  SL: 'SLE',
+  SG: 'SGP',
+  SK: 'SVK',
+  SI: 'SVN',
+  SB: 'SLB',
+  SO: 'SOM',
+  ZA: 'ZAF',
+  GS: 'SGS',
+  SS: 'SSD',
+  ES: 'ESP',
+  LK: 'LKA',
+  SD: 'SDN',
+  SR: 'SUR',
+  SJ: 'SJM',
+  SZ: 'SWZ',
+  SE: 'SWE',
+  CH: 'CHE',
+  SY: 'SYR',
+  TW: 'TWN',
+  TJ: 'TJK',
+  TZ: 'TZA',
+  TH: 'THA',
+  TL: 'TLS',
+  TG: 'TGO',
+  TK: 'TKL',
+  TO: 'TON',
+  TT: 'TTO',
+  TN: 'TUN',
+  TR: 'TUR',
+  TM: 'TKM',
+  TC: 'TCA',
+  TV: 'TUV',
+  UG: 'UGA',
+  UA: 'UKR',
+  AE: 'ARE',
+  GB: 'GBR',
+  US: 'USA',
+  UM: 'UMI',
+  UY: 'URY',
+  UZ: 'UZB',
+  VU: 'VUT',
+  VE: 'VEN',
+  VN: 'VNM',
+  VI: 'VIR',
+  WF: 'WLF',
+  EH: 'ESH',
+  YE: 'YEM',
+  ZM: 'ZMB',
+  ZW: 'ZWE',
+  XK: 'XKX',
+};

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

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