@takaro/lib-components 0.0.14 → 0.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takaro/lib-components",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "private": false,
   "description": "Takaro UI is a simple and customizable component library to build React apps faster within the Takaro eco system",
   "license": "AGPL-3.0-or-later",
@@ -31,16 +31,33 @@
     "@rjsf/core": "5.20.0",
     "@rjsf/utils": "5.20.0",
     "@rjsf/validator-ajv8": "5.20.0",
+    "@sentry/react": "8.32.0",
     "@tanstack/react-table": "8.20.5",
     "@tanstack/react-router": "1.58.15",
     "@types/luxon": "3.4.2",
+    "@visx/axis": "3.10.1",
+    "@visx/brush": "3.10.4",
+    "@visx/curve": "3.3.0",
+    "@visx/event": "3.3.0",
+    "@visx/geo": "3.5.0",
+    "@visx/gradient": "3.3.0",
+    "@visx/grid": "3.5.0",
+    "@visx/group": "3.3.0",
+    "@visx/heatmap": "3.3.0",
+    "@visx/mock-data": "3.3.0",
+    "@visx/pattern": "3.3.0",
+    "@visx/responsive": "3.10.2",
+    "@visx/scale": "3.5.0",
+    "@visx/shape": "3.5.0",
+    "@visx/tooltip": "3.3.0",
+    "@visx/vendor": "3.5.0",
+    "@visx/zoom": "^3.3.0",
     "framer-motion": "11.9.0",
     "luxon": "3.5.0",
     "notistack": "3.0.1",
     "polished": "4.3.1",
     "react": "18.3.1",
     "react-dnd": "16.0.1",
-    "@sentry/react": "8.32.0",
     "react-dnd-html5-backend": "16.0.1",
     "react-dom": "18.3.1",
     "react-hook-form": "7.53.0",
@@ -50,23 +67,7 @@
     "react-window": "1.8.10",
     "simplebar-react": "3.2.6",
     "styled-components": "5.3.11",
-    "web-vitals": "4.2.3",
-    "@visx/scale": "3.5.0",
-    "@visx/responsive": "3.10.2",
-    "@visx/group": "3.3.0",
-    "@visx/heatmap": "3.3.0",
-    "@visx/tooltip": "3.3.0",
-    "@visx/event": "3.3.0",
-    "@visx/shape": "3.5.0",
-    "@visx/grid": "3.5.0",
-    "@visx/vendor": "3.5.0",
-    "@visx/brush": "3.10.4",
-    "@visx/axis": "3.10.1",
-    "@visx/pattern": "3.3.0",
-    "@visx/curve": "3.3.0",
-    "@visx/gradient": "3.3.0",
-    "@visx/mock-data": "3.3.0",
-    "@visx/geo": "3.5.0",
-    "topojson-client": "3.1.0"
+    "topojson-client": "3.1.0",
+    "web-vitals": "4.2.3"
   }
 }

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

@@ -23,12 +23,6 @@ const Wrapper = styled.div`
   width: 500px;
 `;
 
-const Header = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`;
-
 export const Default: StoryFn<AreaChartProps<AppleStock>> = (args) => {
   const getDate = (d: AppleStock) => new Date(d.date);
   const getStockValue = (d: AppleStock) => d.close;
@@ -57,7 +51,7 @@ function generateData() {
   const data: PingData[] = [];
   for (let i = 0; i < 100; i++) {
     const timestamp = faker.date.between({ from: '2021-01-01T00:00:00Z', to: '2021-01-31T23:59:59Z' }).toISOString();
-    const latency = faker.number.float({ min: 0, max: 70, precision: 1 });
+    const latency = faker.number.float({ min: 0, max: 70, fractionDigits: 1 });
     data.push({ timestamp, latency });
   }
   data.sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime());
@@ -75,8 +69,7 @@ export const PingExample: StoryFn = () => {
   return (
     <div style={{ width: 800, height: 300 }}>
       <Card variant="outline">
-        <Header>
-          <h2 style={{ marginBottom: '10px' }}>Ping latency</h2>
+        <Card.Title label="Ping latency">
           <Dropdown>
             <Dropdown.Trigger asChild>
               <IconButton icon={<MenuIcon />} ariaLabel="open menu" />
@@ -87,17 +80,19 @@ export const PingExample: StoryFn = () => {
               <Dropdown.Menu.Item onClick={() => {}} label="Option 3" />
             </Dropdown.Menu>
           </Dropdown>
-        </Header>
-        <div style={{ height: '500px' }}>
-          <AreaChart<PingData>
-            name="Ping"
-            xAccessor={getDate}
-            yAccessor={getLatency}
-            tooltipAccessor={tooltipAccessor}
-            data={generateData()}
-            showBrush={false}
-          />
-        </div>
+        </Card.Title>
+        <Card.Body>
+          <div style={{ height: '500px' }}>
+            <AreaChart<PingData>
+              name="Ping"
+              xAccessor={getDate}
+              yAccessor={getLatency}
+              tooltipAccessor={tooltipAccessor}
+              data={generateData()}
+              showBrush={false}
+            />
+          </div>
+        </Card.Body>
       </Card>
     </div>
   );

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

@@ -10,8 +10,7 @@ interface Shape {
   name: string;
 }
 
-// 3 letter country codes
-const data: Shape[] = [
+const alpha3: Shape[] = [
   { code: 'BEL', amount: 10, name: 'Belgium' },
   { code: 'CAN', amount: 20, name: 'Canada' },
   { code: 'DEU', amount: 30, name: 'Germany' },
@@ -27,19 +26,22 @@ const data: Shape[] = [
 export default {
   title: 'Charts/GeoMercator',
   component: GeoMercator,
+  args: {
+    showZoomControls: false,
+    allowZoomAndDrag: false,
+  },
 } as Meta<GeoMercatorProps<Shape>>;
 
 const Wrapper = styled.div`
-  width: 90vw;
-  height: 90vh;
+  width: fit-content;
 `;
 
 const Inner = styled.div`
-  width: 90vw;
-  height: 90vh;
+  width: 800px;
+  height: 800px;
 `;
 
-export const Default: StoryFn<GeoMercatorProps<Shape>> = () => {
+export const Default: StoryFn<GeoMercatorProps<Shape>> = (args) => {
   const getCountry = (d: Shape) => d.code;
   const getAmount = (d: Shape) => Number(d.amount);
   const tooltipAccessor = (d: Shape) => {
@@ -48,17 +50,21 @@ export const Default: StoryFn<GeoMercatorProps<Shape>> = () => {
 
   return (
     <Wrapper>
-      <Card variant="outline">
-        <Inner>
-          <h2>Map</h2>
-          <GeoMercator<Shape>
-            name="geo-mercator"
-            xAccessor={getCountry}
-            yAccessor={getAmount}
-            tooltipAccessor={tooltipAccessor}
-            data={data}
-          />
-        </Inner>
+      <Card>
+        <Card.Title label="Map" />
+        <Card.Body>
+          <Inner>
+            <GeoMercator<Shape>
+              name="geo-mercator"
+              xAccessor={getCountry}
+              yAccessor={getAmount}
+              tooltipAccessor={tooltipAccessor}
+              data={alpha3}
+              showZoomControls={args.showZoomControls}
+              allowZoomAndDrag={args.allowZoomAndDrag}
+            />
+          </Inner>
+        </Card.Body>
       </Card>
     </Wrapper>
   );

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 centerX = width / 2 + 50;
+  const centerY = height / 2 + 150;
+  const scale = (width / 1000) * 100;
+
+  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>
   );
 };