@takaro/lib-components 0.0.14 → 0.0.18

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

@@ -1,14 +1,17 @@
 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 { Zoom } from '@visx/zoom';
 import { useCallback } from 'react';
 import { localPoint } from '@visx/event';
-import { shade } from 'polished';
+import { ZoomControls } from '../ZoomControls';
+import { alpha2ToAlpha3 } from './iso3166-alpha2-to-alpha3';
 
 interface FeatureShape {
   type: 'Feature';
@@ -28,11 +31,14 @@ 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)
+  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,
@@ -41,46 +47,51 @@ export const GeoMercator = <T,>({
   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}
-            tooltipAccessor={tooltipAccessor}
-          />
-        )}
-      </ParentSize>
-    </>
+    <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>
   );
 };
 
-type InnerGeoMercator<T> = InnerChartProps & GeoMercatorProps<T>;
-
 const Chart = <T,>({
   width,
+  height,
   yAccessor,
   xAccessor,
   data,
   tooltipAccessor,
   name,
-  height,
-}: // margin = defaultMargin,
-// tooltipAccessor
-InnerGeoMercator<T>) => {
+  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 = (width / 630) * 100;
+  const scale = Math.min(width, height) * 0.25;
+
+  const colorScale = scaleLinear({
+    domain: [Math.min(...data.map((d) => yAccessor(d))), 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) => {
@@ -89,40 +100,131 @@ InnerGeoMercator<T>) => {
       showTooltip({
         tooltipData: countryData,
         tooltipLeft: eventSvgCoords?.x,
-        tooltipTop: eventSvgCoords?.y,
+        tooltipTop: eventSvgCoords ? eventSvgCoords.y - 38 : undefined,
       });
     },
-    [yAccessor, xAccessor, width, height],
+    [showTooltip],
   );
 
-  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>
+  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>
+  );
+
+  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) => (
+        <div style={{ position: 'relative' }}>
+          {renderMap(zoom)}
+          {showZoomControls && <ZoomControls zoom={zoom} />}
+          {tooltipData && (
+            <Tooltip
+              top={tooltipTop}
+              left={tooltipLeft}
+              style={{
+                ...getDefaultTooltipStyles(theme),
+                textAlign: 'center',
+                transform: 'translate(-50%)',
+              }}
+            >
+              {tooltipAccessor ? tooltipAccessor(tooltipData) : `${xAccessor(tooltipData)}: ${yAccessor(tooltipData)}`}
+            </Tooltip>
           )}
-        </Mercator>
-      </svg>
+        </div>
+      )}
+    </Zoom>
+  ) : (
+    <div style={{ position: 'relative' }}>
+      {renderMap()}
       {tooltipData && (
         <Tooltip
           top={tooltipTop}
@@ -136,6 +238,6 @@ InnerGeoMercator<T>) => {
           {tooltipAccessor ? tooltipAccessor(tooltipData) : `${xAccessor(tooltipData)}: ${yAccessor(tooltipData)}`}
         </Tooltip>
       )}
-    </>
+    </div>
   );
 };

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',
+};