Merge pull request #200 from kausaltech/fix/clipped-markers

Prevent plotly from clipping markers on axes

.husky/pre-commit

@@ -1,6 +1,13 @@
 #!/bin/sh
 [ -n "$CI" ] && exit 0
 
+# This loads nvm.sh, sets the correct PATH before running hook, and ensures the project version of Node
+export NVM_DIR="$HOME/.nvm"
+[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
+if [[ -f ".nvmrc" ]]; then
+  nvm use
+fi
+
 . "$(dirname "$0")/_/husky.sh"
 
 npx lint-staged

components/graphs/IndicatorGraph.tsx

@@ -5,6 +5,7 @@ import styled from 'styled-components';
 import { useTheme } from 'common/theme';
 import { transparentize } from 'polished';
 import { splitLines } from 'common/utils';
+import { Layout } from 'plotly.js';
 
 const log10 = Math.log(10);
 
@@ -28,7 +29,7 @@ const createLayout = (
     '-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif';
   const hasCategories = !hasTimeDimension;
 
-  const yaxes = {
+  const yaxes: NonNullable<Pick<Layout, 'yaxis'>> = {
     yaxis: {
       automargin: true,
       hoverformat: `${config.maxDigits === 0 ? '' : '.'}${config.maxDigits}r`,
@@ -174,7 +175,8 @@ const createTraces = (
   const allXValues = [];
 
   const newTraces = traces.map((trace, idx) => {
-    const modTrace = trace;
+    const modTrace = { ...trace, cliponaxis: false };
+
     trace.y.forEach((value) => {
       // Determine the highest number of significant digits in the dataset
       // to be able to set suitable number formating.

components/indicators/IndicatorContent.js

@@ -5,7 +5,6 @@ import { Container, Row, Col } from 'reactstrap';
 import styled from 'styled-components';
 import { gql, useQuery } from '@apollo/client';
 
-import { IndicatorListLink } from 'common/links';
 import { usePlan } from 'context/plan';
 import { getActionTermContext, useTranslation } from 'common/i18n';