ortelius - npm Package Compare versions

Comparing version 0.0.1-beta.2 to 0.0.1-beta.3

package.json

 {
   "name": "ortelius",
-  "version": "0.0.1-beta.2",
+  "version": "0.0.1-beta.3",
   "description": "a tool for making good-looking maps",
@@ -5,0 +5,0 @@ "main": "index.js",

src/viewer/Choropleth.jsx

@@ -36,5 +36,15 @@ import React from 'react';
   return (
-    <MapFactory legend={legendConfig} {...restOfProps}>
+    <MapFactory
+      legend={legendConfig}
+      series={series}
+      geoKey={geoKey}
+      seriesKey={seriesKey}
+      dataById={dataById}
+      {...restOfProps}
+    >
       {({ geographies, path, projection }) =>
         geographies.map(geography => {
+          const datum = Object.prototype.hasOwnProperty.call(dataById, geography[geoKey])
+            ? dataById[geography[geoKey]]
+            : undefined;
           const fillInitial = fillFunction(geography);
@@ -45,2 +55,3 @@
               key={geography.id}
+              data={datum}
               geography={geography}
@@ -47,0 +58,0 @@ path={path}

src/viewer/MapFactory.jsx

@@ -1,2 +0,2 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
@@ -7,2 +7,3 @@
 import Toolbar from 'viewer/shared/Toolbar';
+import Tooltip from 'viewer/shared/Tooltip';
 import SvgContainer from 'viewer/shared/SvgContainer';
@@ -25,2 +26,4 @@ import ZoomableGroup from 'viewer/shared/ZoomableGroup';
 }) {
+  const containerEl = useRef(null);
+  const [tooltip, setTooltip] = useState(false);
   const { clientHeight, clientWidth } = document.documentElement;
@@ -32,21 +35,37 @@ const { drawHeight, drawWidth } = getDrawDims(clientHeight, clientWidth, margin);
 
+  const handleZoom = ({ isZoomed, geography, data }) => {
+    if (isZoomed) {
+      setTooltip({ title: data.Région, valueLabel: series.value, value: data.value });
+    } else {
+      setTooltip(false);
+    }
+  };
+
   return (
-    <SvgContainer margin={margin} height={clientHeight} width={clientWidth}>
-      <GeographyProvider
-        height={drawHeight}
-        width={drawWidth}
-        projection={projection}
-        {...geoAssets}
-        render={geographyProps => (
-          <ZoomableGroup height={drawHeight} width={drawWidth}>
-            {children({ ...geographyProps })}
-            {annotations && <Annotations annotations={annotations} />}
-            {markers && <Markers markers={markers} />}
-          </ZoomableGroup>
-        )}
-      />
-      {legend && <Legend {...legend} />}
+    <div className="container" ref={containerEl}>
+      <SvgContainer margin={margin} height={clientHeight} width={clientWidth}>
+        <GeographyProvider
+          height={drawHeight}
+          width={drawWidth}
+          projection={projection}
+          {...geoAssets}
+          render={geographyProps => (
+            <ZoomableGroup
+              containerRef={containerEl}
+              onZoom={handleZoom}
+              height={drawHeight}
+              width={drawWidth}
+            >
+              {children({ ...geographyProps })}
+              {annotations && <Annotations annotations={annotations} />}
+              {markers && <Markers markers={markers} />}
+            </ZoomableGroup>
+          )}
+        />
+        {legend && <Legend {...legend} />}
+      </SvgContainer>
       <Toolbar />
-    </SvgContainer>
+      {tooltip && <Tooltip {...tooltip} />}
+    </div>
   );
 }

src/viewer/shared/Geography.jsx

@@ -9,4 +9,4 @@ import React, { useContext } from 'react';
 
-export function Geography({ path, projection, fillInitial, fillHover, stroke, geography }) {
-  const [props, setFill] = useSpring(() => ({ fill: fillInitial }));
+export function Geography({ path, projection, fillInitial, fillHover, stroke, geography, data }) {
+  const [style, setFill] = useSpring(() => ({ fill: fillInitial }));
   const { handleZoomClick } = useContext(ZoomContext);
@@ -33,7 +33,7 @@
       className={styles.Geography}
-      style={props}
+      style={style}
       stroke={stroke}
       onMouseLeave={onMouseLeave}
       onMouseEnter={onMouseEnter}
-      onClick={handleZoomClick.bind(null, bounds)}
+      onClick={handleZoomClick.bind(null, { bounds, geography, data })}
     />
@@ -43,3 +43,3 @@ );
 
-export default React.memo(Geography);
+export default Geography;
 
@@ -46,0 +46,0 @@ Geography.propTypes = {

src/viewer/shared/ZoomableGroup.jsx

@@ -1,2 +0,3 @@
-import React from 'react';
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
@@ -7,10 +8,31 @@ import { useSpring, animated } from 'react-spring';
 
+import styles from './ZoomableGroup.module';
+
 export const ZoomContext = React.createContext({});
 
-export default function ZoomableGroup({ height, width, children }) {
-  const [{ zoomTransform }, setZoomTransform] = useSpring(() => ({
-    zoomTransform: [0, 0, 1]
-  }));
+export function ZoomToggle({ onClick, containerRef }) {
+  const inner = (
+    <button className={styles.ZoomToggle} onClick={onClick}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
+        <path d="M1.41 0l-1.41 1.41.72.72 1.78 1.81-1.78 1.78-.72.69 1.41 1.44.72-.72 1.81-1.81 1.78 1.81.69.72 1.44-1.44-.72-.69-1.81-1.78 1.81-1.81.72-.72-1.44-1.41-.69.72-1.78 1.78-1.81-1.78-.72-.72z" />
+      </svg>
+    </button>
+  );
 
-  const handleZoomClick = bounds =>
+  return ReactDOM.createPortal(inner, containerRef.current);
+}
+
+const initialZoom = {
+  zoomTransform: [0, 0, 1]
+};
+
+export default function ZoomableGroup({ height, width, containerRef, onZoom, children }) {
+  const [isZoomed, setZoom] = useState(false);
+  const [{ zoomTransform }, setZoomTransform] = useSpring(() => initialZoom);
+
+  const handleZoomClick = ({ bounds, ...rest }) => {
+    const newZoom = true;
+
+    setZoom(newZoom);
+
     setZoomTransform({
@@ -20,4 +42,18 @@ zoomTransform: zoomToBoundingBox({ bounds, width, height })
 
+    onZoom({ isZoomed: newZoom, ...rest });
+  };
+
+  const handleToggleClick = () => {
+    const newZoom = false;
+
+    setZoom(false);
+
+    setZoomTransform(initialZoom);
+
+    onZoom({ isZoomed: newZoom });
+  };
+
   return (
     <ZoomContext.Provider value={{ handleZoomClick }}>
+      {isZoomed && <ZoomToggle onClick={handleToggleClick} containerRef={containerRef} />}
       <animated.g
@@ -38,1 +74,3 @@ transform={zoomTransform.interpolate((x, y, s) => `translate(${x},${y}) scale(${s})`)}
 };
+
+ZoomableGroup.defaultProps = {};

webpack.config.js

@@ -16,4 +16,4 @@ const path = require('path');
       new MiniCssExtractPlugin({
-        filename: isDevelopment ? '[name].css' : '[name].[hash].css',
-        chunkFilename: isDevelopment ? '[id].css' : '[id].[hash].css'
+        filename: '[name].css',
+        chunkFilename: '[id].css'
       })
@@ -20,0 +20,0 @@ ],

No alert changes

Improved metrics

Total package byte prevSize

364820

increased by1.42%

Number of package files

35

increased by6.06%

Lines of code

1049

increased by10.07%

No dependency changes