Add graphs (#29)

* feat: add graphs to frontend

.env.example

@@ -1,10 +1,9 @@
-# !STARTERCONF Duplicate this to .env.local
+# !STARTERCONF Duplicate this to .env
 
 # DEVELOPMENT TOOLS
 # Ideally, don't add them to production deployment envs
 # !STARTERCONF Change to true if you want to log data
 NEXT_PUBLIC_SHOW_LOGGER="true"
 
-NEXT_PUBLIC_PINKBOMBS_DATA_URL="https://pinkbombsfkynigjl-pinkbombs-data.functions.fnc.fr-par.scw.cloud/api/v1/secure/graphs"
-#NEXT_PUBLIC_PINKBOMBS_DATA_URL="https://pinkbombsfkynigjl-pinkbombs-data.functions.fnc.fr-par.scw.cloud:8080/"
-NEXT_PUBLIC_PINKBOMBS_DATA_API_KEY="pinkbombs"
+export PINKBOMBS_DATA_URL=https://pinkbombsfkynigjl-pinkbombs-data.functions.fnc.fr-par.scw.cloud/api/v1/secure
+export PINKBOMBS_DATA_API_KEY=pinkbombs

README.md

@@ -20,13 +20,15 @@ yarn dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. You can start editing the page by modifying `src/pages/index.tsx`.
 
-### 4. Change defaults
+### 4. Build and test
 
-There are some things you need to change including title, urls, favicons, etc.
+Run the followed command:
 
-Find all comments with !STARTERCONF, then follow the guide.
-
-Don't forget to change the package name in package.json
+- Build the project: `yarn build`
+- Launch linter: `yarn lint:strict`
+- Launch Typecheck: `yarn typecheck`
+- Launch Prettier: `yarn format:check`
+- Launch Jest: `yarn test`
 
 ### 5. Commit Message Convention
 

public/dashboard/graphs/en/alternatives.json

@@ -0,0 +1 @@
+"{\"data\":[{\"colorscale\":[[0.0,\"#bfcee1\"],[0.16666666666666666,\"#6ecb57\"],[0.3333333333333333,\"#aaed99\"],[0.5,\"#ffd336\"],[0.6666666666666666,\"#ff7e36\"],[0.8333333333333334,\"#f34620\"],[1.0,\"#cc0100\"]],\"customdata\":[[\"\",\"Principal mode d'impr\\u00e9gnation : les poissons gras et les\\u003cbr\\u003ecrustac\\u00e9s\",\"\",\"\",\"\",\"\",\"\",\"\"],[\"72,6%  \\ud83d\\udc1f\",\"72,6%  \\ud83d\\udc1f\",\"28,6%  \\ud83d\\udc1f\",\"93.25%  \\ud83d\\udc1f \\ud83c\\udf31\",\"16,5%  \\ud83d\\udc1f\",\"\",\"328% \\ud83c\\udf31\",\"74%  \\ud83c\\udf31\"],[\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\"],[\"Between 15 and 20 kg CO2 equ.\",\"10kg eqCO2 d'apr\\u00e8s WWF\",\"4,39kg eqCO2 d'pr\\u00e8s agribalyse\",\"\",\"5,7kg eqCO2 d'apr\\u00e8s agribalyse\",\"6,7 kg eqCO2 d'apr\\u00e8s agribalyse (moyenne de ulva,nori, kombu\\u003cbr\\u003ebreton, haricot de mer)\",\"2,28kg eqCO2 d'apr\\u00e8s agribalyse\",\"1,6kg eqCO2 d'apr\\u00e8s agribalyse\"],[\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\"],[\"Les densit\\u00e9s de 70 kg \\u00e0 150 kg de saumons par m3, selon\\u003cbr\\u003el'IFSA (2015), augmentent les risques de maladies\\u003cbr\\u003einfectieuses, citant plusieurs \\u00e9tudes.\",\"\",\"\",\"\",\"\",\"Not relevant\",\"Not relevant\",\"\"]],\"hoverlabel\":{\"bgcolor\":\"white\"},\"hovertemplate\":\"%{customdata}\\u003cextra\\u003e\\u003c\\u002fextra\\u003e\",\"showscale\":false,\"x\":[\"Land-based\\u003cbr\\u003efarmed\\u003cbr\\u003esalmon\",\"Marine cage\\u003cbr\\u003efarmed\\u003cbr\\u003esalmon\",\"Canned\\u003cbr\\u003eyellowfin\\u003cbr\\u003etuna\\u003cbr\\u003e(caught)\",\"\\u201cPrey\\u201d fish\\u003cbr\\u003e(sardines,\\u003cbr\\u003emackerel)\",\"Shellfish\\u003cbr\\u003e(mussles,\\u003cbr\\u003eoysters)\",\"Seaweed\",\"Colza oil\\u003cbr\\u003e(organic)\",\"Plant-based\\u003cbr\\u003efish\\u003cbr\\u003e(simili)\"],\"xgap\":4,\"y\":[\"Toxicity\",\"Omegas 3 intake\",\"Biodiversity\",\"CO2\",\"Social impacts\",\"Animal welfare\"],\"ygap\":4,\"z\":[[5,5,6,4,4,2,1,2],[2,2,5,1,5,0,1,2],[5,6,6,4,4,4,1,2],[6,5,3,4,4,4,2,1],[6,6,6,4,3,1,1,2],[6,4,6,3,2,0,0,2]],\"type\":\"heatmap\"}],\"layout\":{\"template\":{\"data\":{\"histogram2dcontour\":[{\"type\":\"histogram2dcontour\",\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"},\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]]}],\"choropleth\":[{\"type\":\"choropleth\",\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}}],\"histogram2d\":[{\"type\":\"histogram2d\",\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"},\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]]}],\"heatmap\":[{\"type\":\"heatmap\",\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"},\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]]}],\"heatmapgl\":[{\"type\":\"heatmapgl\",\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"},\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]]}],\"contourcarpet\":[{\"type\":\"contourcarpet\",\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}}],\"contour\":[{\"type\":\"contour\",\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"},\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]]}],\"surface\":[{\"type\":\"surface\",\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"},\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]]}],\"mesh3d\":[{\"type\":\"mesh3d\",\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}}],\"scatter\":[{\"fillpattern\":{\"fillmode\":\"overlay\",\"size\":10,\"solidity\":0.2},\"type\":\"scatter\"}],\"parcoords\":[{\"type\":\"parcoords\",\"line\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}}}],\"scatterpolargl\":[{\"type\":\"scatterpolargl\",\"marker\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}}}],\"bar\":[{\"error_x\":{\"color\":\"#2a3f5f\"},\"error_y\":{\"color\":\"#2a3f5f\"},\"marker\":{\"line\":{\"color\":\"#E5ECF6\",\"width\":0.5},\"pattern\":{\"fillmode\":\"overlay\",\"size\":10,\"solidity\":0.2}},\"type\":\"bar\"}],\"scattergeo\":[{\"type\":\"scattergeo\",\"marker\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}}}],\"scatterpolar\":[{\"type\":\"scatterpolar\",\"marker\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}}}],\"histogram\":[{\"marker\":{\"pattern\":{\"fillmode\":\"overlay\",\"size\":10,\"solidity\":0.2}},\"type\":\"histogram\"}],\"scattergl\":[{\"type\":\"scattergl\",\"marker\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}}}],\"scatter3d\":[{\"type\":\"scatter3d\",\"line\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}},\"marker\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}}}],\"scattermapbox\":[{\"type\":\"scattermapbox\",\"marker\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}}}],\"scatterternary\":[{\"type\":\"scatterternary\",\"marker\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}}}],\"scattercarpet\":[{\"type\":\"scattercarpet\",\"marker\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}}}],\"carpet\":[{\"aaxis\":{\"endlinecolor\":\"#2a3f5f\",\"gridcolor\":\"white\",\"linecolor\":\"white\",\"minorgridcolor\":\"white\",\"startlinecolor\":\"#2a3f5f\"},\"baxis\":{\"endlinecolor\":\"#2a3f5f\",\"gridcolor\":\"white\",\"linecolor\":\"white\",\"minorgridcolor\":\"white\",\"startlinecolor\":\"#2a3f5f\"},\"type\":\"carpet\"}],\"table\":[{\"cells\":{\"fill\":{\"color\":\"#EBF0F8\"},\"line\":{\"color\":\"white\"}},\"header\":{\"fill\":{\"color\":\"#C8D4E3\"},\"line\":{\"color\":\"white\"}},\"type\":\"table\"}],\"barpolar\":[{\"marker\":{\"line\":{\"color\":\"#E5ECF6\",\"width\":0.5},\"pattern\":{\"fillmode\":\"overlay\",\"size\":10,\"solidity\":0.2}},\"type\":\"barpolar\"}],\"pie\":[{\"automargin\":true,\"type\":\"pie\"}]},\"layout\":{\"autotypenumbers\":\"strict\",\"colorway\":[\"#636efa\",\"#EF553B\",\"#00cc96\",\"#ab63fa\",\"#FFA15A\",\"#19d3f3\",\"#FF6692\",\"#B6E880\",\"#FF97FF\",\"#FECB52\"],\"font\":{\"color\":\"#2a3f5f\"},\"hovermode\":\"closest\",\"hoverlabel\":{\"align\":\"left\"},\"paper_bgcolor\":\"white\",\"plot_bgcolor\":\"#E5ECF6\",\"polar\":{\"bgcolor\":\"#E5ECF6\",\"angularaxis\":{\"gridcolor\":\"white\",\"linecolor\":\"white\",\"ticks\":\"\"},\"radialaxis\":{\"gridcolor\":\"white\",\"linecolor\":\"white\",\"ticks\":\"\"}},\"ternary\":{\"bgcolor\":\"#E5ECF6\",\"aaxis\":{\"gridcolor\":\"white\",\"linecolor\":\"white\",\"ticks\":\"\"},\"baxis\":{\"gridcolor\":\"white\",\"linecolor\":\"white\",\"ticks\":\"\"},\"caxis\":{\"gridcolor\":\"white\",\"linecolor\":\"white\",\"ticks\":\"\"}},\"coloraxis\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}},\"colorscale\":{\"sequential\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]],\"sequentialminus\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]],\"diverging\":[[0,\"#8e0152\"],[0.1,\"#c51b7d\"],[0.2,\"#de77ae\"],[0.3,\"#f1b6da\"],[0.4,\"#fde0ef\"],[0.5,\"#f7f7f7\"],[0.6,\"#e6f5d0\"],[0.7,\"#b8e186\"],[0.8,\"#7fbc41\"],[0.9,\"#4d9221\"],[1,\"#276419\"]]},\"xaxis\":{\"gridcolor\":\"white\",\"linecolor\":\"white\",\"ticks\":\"\",\"title\":{\"standoff\":15},\"zerolinecolor\":\"white\",\"automargin\":true,\"zerolinewidth\":2},\"yaxis\":{\"gridcolor\":\"white\",\"linecolor\":\"white\",\"ticks\":\"\",\"title\":{\"standoff\":15},\"zerolinecolor\":\"white\",\"automargin\":true,\"zerolinewidth\":2},\"scene\":{\"xaxis\":{\"backgroundcolor\":\"#E5ECF6\",\"gridcolor\":\"white\",\"linecolor\":\"white\",\"showbackground\":true,\"ticks\":\"\",\"zerolinecolor\":\"white\",\"gridwidth\":2},\"yaxis\":{\"backgroundcolor\":\"#E5ECF6\",\"gridcolor\":\"white\",\"linecolor\":\"white\",\"showbackground\":true,\"ticks\":\"\",\"zerolinecolor\":\"white\",\"gridwidth\":2},\"zaxis\":{\"backgroundcolor\":\"#E5ECF6\",\"gridcolor\":\"white\",\"linecolor\":\"white\",\"showbackground\":true,\"ticks\":\"\",\"zerolinecolor\":\"white\",\"gridwidth\":2}},\"shapedefaults\":{\"line\":{\"color\":\"#2a3f5f\"}},\"annotationdefaults\":{\"arrowcolor\":\"#2a3f5f\",\"arrowhead\":0,\"arrowwidth\":1},\"geo\":{\"bgcolor\":\"white\",\"landcolor\":\"#E5ECF6\",\"subunitcolor\":\"white\",\"showland\":true,\"showlakes\":true,\"lakecolor\":\"white\"},\"title\":{\"x\":0.05},\"mapbox\":{\"style\":\"light\"}}},\"yaxis\":{\"autorange\":\"reversed\",\"showgrid\":false,\"fixedrange\":true},\"xaxis\":{\"showgrid\":false,\"side\":\"top\",\"fixedrange\":true},\"paper_bgcolor\":\"rgba(0,0,0,0)\",\"plot_bgcolor\":\"rgba(0,0,0,0)\",\"hoverlabel\":{\"bgcolor\":\"white\"}}}"