Merge pull request #67 from medialab/viz-fraude

Viz fraude
medialab · Jun 20, 2022 · ae49ee8 · ae49ee8
2 parents df61253 + ce26bfd
commit ae49ee8
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 35 deletions.
diff --git a/package.json b/package.json
@@ -61,5 +61,8 @@
   "repository": "https://github.com/medialab/portic-storymaps-2022",
   "author": "Guillaume Brioudes (https://myllaume.fr/)",
   "license": "GPL-3.0-or-later",
-  "homepage": "https://medialab.github.io/portic-storymaps-2022"
+  "homepage": "https://medialab.github.io/portic-storymaps-2022",
+  "reactSnap": {
+    "fixWebpackChunksIssue": false
+  }
 }
diff --git a/src/visualizations/FraudeExportPortFranc/FraudeExportPortFranc.js b/src/visualizations/FraudeExportPortFranc/FraudeExportPortFranc.js
@@ -2,12 +2,15 @@ import React, { useMemo } from "react"
 
 import AlluvialImportExport from "../../components/AlluvialImportExport";
 
+import './FraudeExportPortFranc.scss';
+
 export default function FraudeExportPortFranc({
     data: inputData,
     dimensions,
     ...props
 }) {
     const { width, height } = dimensions;
+    const margin = 40;
 
     /** @type {Object[]} */
     const data = useMemo(function prepareData() {
@@ -25,44 +28,48 @@ export default function FraudeExportPortFranc({
     return (
         <>
             <div
-                style={{
-                    display: 'flex'
-                }}
+                className='FraudeExportPortFranc-row'
             >
-                <AlluvialImportExport
-                    dimensions={{
-                        width: width / 2,
-                        height: height / 2
-                    }}
-                    data={data.filter(({ port }) => port === 'Dunkerque')}
-                />
-                <AlluvialImportExport
-                    dimensions={{
-                        width: width / 2,
-                        height: height / 2
-                    }}
-                    data={data.filter(({ port }) => port === 'Marseille')}
-                />
+                <div>
+                    <AlluvialImportExport
+                        dimensions={{
+                            width: (width / 2) - margin,
+                            height: (height / 2) - margin
+                        }}
+                        data={data.filter(({ port }) => port === 'Dunkerque')}
+                    />
+                </div>
+                <div>
+                    <AlluvialImportExport
+                        dimensions={{
+                            width: (width / 2) - margin,
+                            height: (height / 2) - margin
+                        }}
+                        data={data.filter(({ port }) => port === 'Marseille')}
+                    />
+                </div>
             </div>
             <div
-                style={{
-                    display: 'flex'
-                }}
+                className='FraudeExportPortFranc-row'
             >
-                <AlluvialImportExport
-                    dimensions={{
-                        width: width / 2,
-                        height: height / 2
-                    }}
-                    data={data.filter(({ port }) => port === 'Lorient')}
-                />
-                <AlluvialImportExport
-                    dimensions={{
-                        width: width / 2,
-                        height: height / 2
-                    }}
-                    data={data.filter(({ port }) => port === 'Bayonne')}
-                />
+                <div>
+                    <AlluvialImportExport
+                        dimensions={{
+                            width: (width / 2) - margin,
+                            height: (height / 2) - margin
+                        }}
+                        data={data.filter(({ port }) => port === 'Lorient')}
+                    />
+                </div>
+                <div>
+                    <AlluvialImportExport
+                        dimensions={{
+                            width: (width / 2) - margin,
+                            height: (height / 2) - margin
+                        }}
+                        data={data.filter(({ port }) => port === 'Bayonne')}
+                    />
+                </div>
             </div>
         </>
     )

diff --git a/src/visualizations/FraudeExportPortFranc/FraudeExportPortFranc.scss b/src/visualizations/FraudeExportPortFranc/FraudeExportPortFranc.scss
@@ -0,0 +1,7 @@
+.FraudeExportPortFranc-row {
+    display: flex;
+
+    div {
+       margin: 20px;
+    }
+}