feat: add responsive chart option

package.json

@@ -69,7 +69,7 @@
   "devDependencies": {
     "@babel/core": "^7.19.3",
     "@babel/eslint-parser": "^7.19.1",
-    "@ladle/react": "^2.4.4",
+    "@ladle/react": "^2.4.5",
     "@playwright/experimental-ct-react": "^1.27.1",
     "@playwright/test": "^1.27.1",
     "@types/lodash": "^4.14.186",
@@ -87,6 +87,7 @@
     "ml-spectra-processing": "^11.13.0",
     "prettier": "^2.7.1",
     "react": "^18.2.0",
+    "react-d3-utils": "^0.6.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.6.0",
     "react-inspector": "^6.0.1",

src/app/App.tsx

@@ -182,9 +182,19 @@ function DropZoneArea() {
                     // reset the state of your app so the error doesn't happen again
                   }}
                 >
-                  <div style={{ padding: 5 }}>
+                  <div
+                    style={{
+                      padding: 5,
+                      width: '100%',
+                      height: '100%',
+                    }}
+                  >
                     {measurement ? (
-                      <MeasurementExplorer measurement={measurement} />
+                      <MeasurementExplorer
+                        measurement={measurement}
+                        width="100%"
+                        height="100%"
+                      />
                     ) : (
                       <span>No data, add them with drag and drop</span>
                     )}

src/app/components/MeasurementExplorer.tsx

@@ -38,15 +38,15 @@ export function MeasurementExplorer(props: MeasurementExplorerProps) {
   });
   return (
     <div
+      style={{ width, height }}
       css={css`
-        width: ${width}px;
-        height: ${height}px;
+        display: flex;
+        flex-direction: column;
       `}
     >
       <div
         css={css`
           display: flex;
-          gap: 40px;
           justify-content: space-around;
           margin-bottom: 20px;
         `}

src/app/components/MeasurementPlot.tsx

@@ -1,5 +1,8 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
 import { xyToXYObject } from 'ml-spectra-processing';
 import { useMemo } from 'react';
+import { ResponsiveChart } from 'react-d3-utils';
 import {
   Annotations,
   Axis,
@@ -25,8 +28,8 @@ export interface MeasurementPlotProps {
   dataIndex?: number;
   xVariableName?: string;
   yVariableName?: string;
-  width?: number;
-  height?: number;
+  width?: number | `${number}%`;
+  height?: number | `${number}%`;
   zoom?: 'horizontal' | 'vertical' | 'rectangular' | '';
   wheelZoom?: 'vertical' | 'horizontal' | '';
   crossHair?: boolean;
@@ -104,36 +107,52 @@ function MeasurementComponent(props: MeasurementPlotProps) {
   });
   usePan({ horizontalAxisId: xAxis, verticalAxisId: yAxis });
   return (
-    <Plot width={width} height={height}>
-      <Heading title={title} />
-      <LineSeries
-        data={xyToXYObject({
-          x: x.data,
-          y: y.data,
-        })}
-        xAxis={xAxis}
-        yAxis={yAxis}
-      />
-      <Annotations>
-        {rectZoom.annotations}
-        {axisZoom.annotations}
-        {crossHairAnnot.annotations}
-      </Annotations>
-      <Axis
-        id={xAxis}
-        hidden={!showHorizontalAxis}
-        displayPrimaryGridLines={showVerticalGrid}
-        flip={flipHorizontalAxis}
-        position="bottom"
-        label={`${x.label}${x.units ? `(${x.units})` : ''}`}
-      />
-      <Axis
-        id={yAxis}
-        hidden={!showVerticalAxis}
-        displayPrimaryGridLines={showHorizontalGrid}
-        position="left"
-        label={`${y.label}${y.units ? `(${y.units})` : ''}`}
-      />
-    </Plot>
+    <div
+      style={{ width, height }}
+      css={css`
+        user-drag: none;
+        -webkit-user-drag: none;
+        user-select: none;
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+      `}
+    >
+      <ResponsiveChart width={width} height={height}>
+        {({ width, height }) => (
+          <Plot width={width} height={height}>
+            <Heading title={title} />
+            <LineSeries
+              data={xyToXYObject({
+                x: x.data,
+                y: y.data,
+              })}
+              xAxis={xAxis}
+              yAxis={yAxis}
+            />
+            <Annotations>
+              {rectZoom.annotations}
+              {axisZoom.annotations}
+              {crossHairAnnot.annotations}
+            </Annotations>
+            <Axis
+              id={xAxis}
+              hidden={!showHorizontalAxis}
+              displayPrimaryGridLines={showVerticalGrid}
+              flip={flipHorizontalAxis}
+              position="bottom"
+              label={`${x.label}${x.units ? `(${x.units})` : ''}`}
+            />
+            <Axis
+              id={yAxis}
+              hidden={!showVerticalAxis}
+              displayPrimaryGridLines={showHorizontalGrid}
+              position="left"
+              label={`${y.label}${y.units ? `(${y.units})` : ''}`}
+            />
+          </Plot>
+        )}
+      </ResponsiveChart>
+    </div>
   );
 }

stories/app/measurements/measurement-plot.stories.tsx

@@ -17,8 +17,8 @@ Control.args = {
   dataIndex: 0,
   xVariableName: 'x',
   yVariableName: 'y',
-  width: 800,
-  height: 400,
+  width: '100%',
+  height: 300,
   crossHair: true,
   showHorizontalAxis: true,
   showVerticalAxis: true,