update

eea · Feb 10, 2025 · 534b7fc · 534b7fc
1 parent 4365e89
commit 534b7fc
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 21 deletions.
diff --git a/src/ChartEditor/fields/AxesCreator.jsx b/src/ChartEditor/fields/AxesCreator.jsx
@@ -1,5 +1,3 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import Dropdown from 'react-chart-editor/lib/components/fields/Dropdown';
 import Info from 'react-chart-editor/lib/components/fields/Info';
@@ -201,7 +199,18 @@ class UnconnectedAxesCreator extends Component {
         {controls}
         <Info>
           {_('You can style and position your axes in the ')}
-          <a onClick={() => this.context.setPanel('Structure', 'Subplots')}>
+          <a
+            onClick={(e) => {
+              this.context.setPanel('Structure', 'Subplots');
+            }}
+            onKeyPress={(e) => {
+              if (e.key === 'Enter') {
+                this.context.setPanel('Structure', 'Subplots');
+              }
+            }}
+            role="button"
+            tabIndex="0"
+          >
             {_('Subplots')}
           </a>
           {_(' panel.')}

diff --git a/src/ChartEditor/fields/TraceSelector.jsx b/src/ChartEditor/fields/TraceSelector.jsx
@@ -49,7 +49,9 @@ class TraceSelector extends Component {
   }
 
   toggleGlControls() {
-    this.setState({ showGlControls: !this.state.showGlControls });
+    this.setState((prevState) => ({
+      showGlControls: !prevState.showGlControls,
+    }));
   }
 
   setLocals(props, context) {

diff --git a/src/ChartEditor/panels/StructureGraphCreatePanel.jsx b/src/ChartEditor/panels/StructureGraphCreatePanel.jsx
@@ -1,5 +1,3 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -118,7 +116,18 @@ const StructureGraphCreatePanel = (props, { localize: _, setPanel }) => {
         {_(
           'Note: in vertical orientation, X values are used for binning. If Y values are provided, they are used as inputs to the histogram function which you can configure in the ',
         )}
-        <a onClick={() => setPanel('Style', 'Traces')}>{_('Traces')}</a>
+        <a
+          onClick={() => setPanel('Style', 'Traces')}
+          onKeyPress={(e) => {
+            if (e.key === 'Enter') {
+              setPanel('Style', 'Traces');
+            }
+          }}
+          role="button"
+          tabIndex="0"
+        >
+          {_('Traces')}
+        </a>
         {_(
           ' panel under Style. If Y values are omitted, the histogram function defaults to Count.',
         )}
@@ -127,7 +136,18 @@ const StructureGraphCreatePanel = (props, { localize: _, setPanel }) => {
         {_(
           'Note: in horizontal orientation, Y values are used for binning. If X values are provided, they are used as inputs to the histogram function which you can configure in the ',
         )}
-        <a onClick={() => setPanel('Style', 'Traces')}>{_('Traces')}</a>
+        <a
+          onClick={() => setPanel('Style', 'Traces')}
+          onKeyPress={(e) => {
+            if (e.key === 'Enter') {
+              setPanel('Style', 'Traces');
+            }
+          }}
+          role="button"
+          tabIndex="0"
+        >
+          {_('Traces')}
+        </a>
         {_(
           ' under Style panel. If X values are omitted, the histogram function defaults to Count.',
         )}
@@ -136,7 +156,18 @@ const StructureGraphCreatePanel = (props, { localize: _, setPanel }) => {
         {_(
           'Note: X and Y Values are used for binning. If Z values are provided, they are used as inputs to the histogram function which you can configure in the ',
         )}
-        <a onClick={() => setPanel('Style', 'Traces')}>{_('Traces')}</a>
+        <a
+          onClick={() => setPanel('Style', 'Traces')}
+          onKeyPress={(e) => {
+            if (e.key === 'Enter') {
+              setPanel('Style', 'Traces');
+            }
+          }}
+          role="button"
+          tabIndex="0"
+        >
+          {_('Traces')}
+        </a>
         {_(
           ' under Style panel. If Z values are omitted, the histogram function defaults to Count.',
         )}

diff --git a/src/helpers/index.js b/src/helpers/index.js
@@ -68,8 +68,8 @@ export function applyPlotlyDefaults(value) {
   return {
     ...v,
     chartData: {
-      data: [...(v.chartData?.data || [])],
-      layout: {
+      data: v.chartData?.data || [],
+      layout: v.chartData?.layout || {
         font: {
           color: 'rgb(61, 82, 101)',
           family: 'Roboto, sans-serif',
@@ -177,16 +177,10 @@ export function applyPlotlyDefaults(value) {
         },
         bargap: 0.33999999999999997,
         ...(v.chartData?.layout || {}),
-        xaxis: {
-          ...cloneDeep(defaults.axis),
-          ...(v.chartData?.layout?.xaxis || {}),
-        },
-        yaxis: {
-          ...cloneDeep(defaults.axis),
-          ...(v.chartData?.layout?.yaxis || {}),
-        },
+        xaxis: cloneDeep(defaults.axis),
+        yaxis: cloneDeep(defaults.axis),
       },
-      frames: [...(v.chartData?.frames || [])],
+      frames: v.chartData?.frames || [],
     },
   };
 }

diff --git a/src/less/plotly.less b/src/less/plotly.less
@@ -149,13 +149,14 @@
   &__list {
     display: flex;
     flex-wrap: wrap;
+    row-gap: 1rem;
   }
 }
 
 .plotly-templates,
 .template-selector {
   &__list {
-    height: 100%;
+    min-height: 100%;
 
     &--wrapper {
       display: flex;