Simplify plots

django-daiquiri · Sep 20, 2024 · 00a86c7 · 00a86c7
1 parent 56adf08
commit 00a86c7
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 54 deletions.
diff --git a/daiquiri/query/assets/js/query/components/job/plots/ColorScatterPlot.js b/daiquiri/query/assets/js/query/components/job/plots/ColorScatterPlot.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import Plot from 'react-plotly.js'
 import { isNil } from 'lodash'
 
+import { config, layout } from '../../../constants/plot'
 import { getColumnLabel } from '../../../utils/plot'
 
 const ColorScatterPlot = ({ columns, values, x, y, z  }) => {
@@ -12,7 +13,7 @@ const ColorScatterPlot = ({ columns, values, x, y, z  }) => {
     return (
       <div className="card">
         <div className="card-body">
-          <div className="ratio ratio-1x1">
+          <div className="ratio ratio-2x3">
             <Plot
               data={[
                 {
@@ -34,15 +35,7 @@ const ColorScatterPlot = ({ columns, values, x, y, z  }) => {
                 }
               ]}
               layout={{
-                autosize: true,
-                aspectratio: 1,
-                dragmode: 'pan',
-                margin: {
-                  l: 40,
-                  r: 40,
-                  b: 40,
-                  t: 40
-                },
+                ...layout,
                 xaxis: {
                   title: {
                     text: getColumnLabel(columns, values.x.column),
@@ -54,15 +47,9 @@ const ColorScatterPlot = ({ columns, values, x, y, z  }) => {
                   }
                 }
               }}
-              style={{
-                width: '100%',
-              }}
+              style={{width: '100%'}}
               useResizeHandler={true}
-              config={{
-                displayModeBar: true,
-                displaylogo: false,
-                modeBarButtonsToRemove: ['select2d', 'lasso2d']
-              }}
+              config={config}
             />
           </div>
         </div>

diff --git a/daiquiri/query/assets/js/query/components/job/plots/HistogramPlot.js b/daiquiri/query/assets/js/query/components/job/plots/HistogramPlot.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import Plot from 'react-plotly.js'
 import { isNil } from 'lodash'
 
-import { operations } from '../../../constants/plot'
+import { config, layout, operations } from '../../../constants/plot'
 import { getColumnLabel } from '../../../utils/plot'
 
 const HistogramPlot = ({ columns, values, x, s }) => {
@@ -35,15 +35,7 @@ const HistogramPlot = ({ columns, values, x, s }) => {
             <Plot
               data={data}
               layout={{
-                autosize: true,
-                aspectratio: 1,
-                dragmode: 'pan',
-                margin: {
-                  l: 40,
-                  r: 40,
-                  b: 40,
-                  t: 40
-                },
+                ...layout,
                 bargap: 0.1,
                 xaxis: {
                   title: {
@@ -56,15 +48,9 @@ const HistogramPlot = ({ columns, values, x, s }) => {
                   }
                 }
               }}
-              style={{
-                width: '100%',
-              }}
+              style={{width: '100%'}}
               useResizeHandler={true}
-              config={{
-                displayModeBar: true,
-                displaylogo: false,
-                modeBarButtonsToRemove: ['select2d', 'lasso2d']
-              }}
+              config={config}
             />
           </div>
         </div>

diff --git a/daiquiri/query/assets/js/query/components/job/plots/ScatterPlot.js b/daiquiri/query/assets/js/query/components/job/plots/ScatterPlot.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import Plot from 'react-plotly.js'
 import { isNil } from 'lodash'
 
+import { config, layout } from '../../../constants/plot'
 import { getColumnLabel } from '../../../utils/plot'
 
 const ScatterPlot = ({ columns, values, x, y1, y2, y3  }) => {
@@ -42,15 +43,7 @@ const ScatterPlot = ({ columns, values, x, y1, y2, y3  }) => {
             <Plot
               data={data}
               layout={{
-                autosize: true,
-                aspectratio: 1,
-                dragmode: 'pan',
-                margin: {
-                  l: 40,
-                  r: 40,
-                  b: 40,
-                  t: 40
-                },
+                ...layout,
                 xaxis: {
                   title: {
                     text: getColumnLabel(columns, values.x.column),
@@ -62,15 +55,9 @@ const ScatterPlot = ({ columns, values, x, y1, y2, y3  }) => {
                   }
                 }
               }}
-              style={{
-                width: '100%',
-              }}
+              style={{width: '100%'}}
               useResizeHandler={true}
-              config={{
-                displayModeBar: true,
-                displaylogo: false,
-                modeBarButtonsToRemove: ['select2d', 'lasso2d']
-              }}
+              config={config}
             />
           </div>
         </div>

diff --git a/daiquiri/query/assets/js/query/constants/plot.js b/daiquiri/query/assets/js/query/constants/plot.js
@@ -1,4 +1,19 @@
-/* define the cmap (extracted from the matplotlib) */
+export const layout = {
+  autosize: true,
+  dragmode: 'pan',
+  margin: {
+    l: 40,
+    r: 40,
+    b: 40,
+    t: 40
+  }
+}
+
+export const config = {
+  displayModeBar: true,
+  displaylogo: false,
+  modeBarButtonsToRemove: ['select2d', 'lasso2d']
+}
 
 export const colors = [
   {name:'Red', hex:'#e41a1c'},