{renderHelp(table.help)}
diff --git a/src/components/Dialog/Curve.tsx b/src/components/Dialog/Curve.tsx
index faf2b37..37caf58 100644
--- a/src/components/Dialog/Curve.tsx
+++ b/src/components/Dialog/Curve.tsx
@@ -10,12 +10,11 @@ import UplotReact from 'uplot-react';
import uPlot from 'uplot';
import { Colors } from '../../utils/colors';
import LandscapeNotice from './LandscapeNotice';
-import Table from './Table';
+import Table from './Curve/Table';
const { useBreakpoint } = Grid;
const Curve = ({
- name,
width,
xLabel,
yLabel,
@@ -23,14 +22,9 @@ const Curve = ({
yData,
disabled,
help,
- xMin,
- xMax,
- yMin,
- yMax,
xUnits = '',
yUnits = '',
}: {
- name: string,
width: number,
xLabel: string,
yLabel: string,
@@ -38,10 +32,6 @@ const Curve = ({
yData: number[],
disabled: boolean,
help: string,
- xMin: number,
- xMax: number,
- yMin: number,
- yMax: number,
xUnits?: string,
yUnits?: string,
}) => {
@@ -99,17 +89,11 @@ const Curve = ({
diff --git a/src/components/Dialog/Curve/Table.tsx b/src/components/Dialog/Curve/Table.tsx
new file mode 100644
index 0000000..edc2a12
--- /dev/null
+++ b/src/components/Dialog/Curve/Table.tsx
@@ -0,0 +1,60 @@
+/* eslint-disable react/no-array-index-key */
+
+import { useCallback } from 'react';
+import { colorHsl } from '../../../utils/number';
+
+const titleProps = { disabled: true };
+
+type AxisType = 'x' | 'y';
+
+const Table = ({
+ xLabel,
+ yLabel,
+ xData,
+ yData,
+ disabled,
+ xUnits,
+ yUnits,
+}: {
+ xLabel: string,
+ yLabel: string,
+ xData: number[],
+ yData: number[],
+ disabled: boolean,
+ xUnits: string,
+ yUnits: string,
+}) => {
+ const renderRow = useCallback((axis: AxisType, input: number[]) => input
+ .map((value, index) => {
+ const [hue, sat, light] = colorHsl(Math.min(...input), Math.max(...input), value);
+
+ return (
+
+ {`${value}`}
+ |
+ );
+ }), []);
+
+ return (
+
+
+
+
+ | {`${yLabel} (${yUnits})`} |
+ {renderRow('y', yData)}
+
+
+ | {`${xLabel} (${xUnits})`} |
+ {renderRow('x', xData)}
+
+
+
+
+ );
+};
+
+export default Table;
diff --git a/src/components/Dialog/Map.tsx b/src/components/Dialog/Map.tsx
index b51ddd4..f9fe296 100644
--- a/src/components/Dialog/Map.tsx
+++ b/src/components/Dialog/Map.tsx
@@ -1,182 +1,31 @@
/* eslint-disable react/no-array-index-key */
-import {
- useEffect,
- useRef,
- useState,
-} from 'react';
-import {
- Button,
- InputNumber,
- Modal,
- Popover,
- Space,
- Grid,
-} from 'antd';
-import {
- PlusCircleOutlined,
- MinusCircleOutlined,
- EditOutlined,
-} from '@ant-design/icons';
-import TableDragSelect from 'react-table-drag-select';
-import {
- isDecrement,
- isEscape,
- isIncrement,
- isReplace,
-} from '../../utils/keyboard/shortcuts';
+import { Grid } from 'antd';
import LandscapeNotice from './LandscapeNotice';
import { colorHsl } from '../../utils/number';
-type CellsType = boolean[][];
-type DataType = number[][];
-type OnChangeType = (data: DataType) => void;
-enum Operations {
- INC,
- DEC,
- REPLACE,
-}
-
const { useBreakpoint } = Grid;
const Map = ({
- name,
xData,
yData,
zData,
disabled,
- onChange,
- zMin,
- zMax,
- digits,
xUnits,
yUnits,
}: {
- name: string,
xData: number[],
yData: number[],
zData: number[][],
disabled: boolean,
- onChange?: OnChangeType,
- zMin: number,
- zMax: number,
- digits: number,
xUnits: string,
yUnits: string,
}) => {
const { sm } = useBreakpoint();
const titleProps = { disabled: true };
- const [isModalVisible, setIsModalVisible] = useState(false);
- const [modalValue, setModalValue] = useState
();
- const [data, _setData] = useState(zData);
- const generateCells = () => Array.from(
- Array(yData.length + 1).fill(false),
- () => new Array(xData.length + 1).fill(false),
- );
- const [cells, _setCells] = useState(generateCells());
- const cellsRef = useRef(cells);
- const dataRef = useRef(data);
- const modalInputRef = useRef(null);
- const setCells = (currentCells: CellsType) => {
- cellsRef.current = currentCells;
- _setCells(currentCells);
- };
- const setData = (currentData: DataType) => {
- dataRef.current = currentData;
- _setData(currentData);
- if (onChange) {
- onChange(currentData);
- }
- };
- const modifyData = (operation: Operations, currentCells: CellsType, currentData: DataType, value = 0): DataType => {
- const newData = [...currentData.map((row) => [...row])];
- currentCells.forEach((_, rowIndex) => {
- currentCells[rowIndex].forEach((selected, valueIndex) => {
- if (!selected) {
- return;
- }
- const current = newData[rowIndex][valueIndex - 1];
- switch (operation) {
- case Operations.INC:
- if (current < zMax) {
- newData[rowIndex][valueIndex - 1] = Number((newData[rowIndex][valueIndex - 1] + 10**-digits).toFixed(digits));
- }
- break;
- case Operations.DEC:
- if (current > zMin) {
- newData[rowIndex][valueIndex - 1] = Number((newData[rowIndex][valueIndex - 1] - 10**-digits).toFixed(digits));
- }
- break;
- case Operations.REPLACE:
- if (value > zMax) {
- newData[rowIndex][valueIndex - 1] = zMax;
- break;
- }
- if (value < zMin) {
- newData[rowIndex][valueIndex - 1] = zMin;
- break;
- }
- newData[rowIndex][valueIndex - 1] = value;
- break;
- default:
- break;
- }
- });
- });
-
- return [...newData];
- };
-
- const oneModalOk = () => {
- setData(modifyData(Operations.REPLACE, cellsRef.current, dataRef.current, modalValue));
- setIsModalVisible(false);
- setModalValue(undefined);
- };
- const onModalCancel = () => {
- setIsModalVisible(false);
- setModalValue(undefined);
- };
- const resetCells = () => setCells(generateCells());
- const increment = () => setData(modifyData(Operations.INC, cellsRef.current, dataRef.current));
- const decrement = () => setData(modifyData(Operations.DEC, cellsRef.current, dataRef.current));
- const replace = () => {
- // don't show modal when no cell is selected
- if (cellsRef.current.flat().find((val) => val === true)) {
- setModalValue(undefined);
- setIsModalVisible(true);
- setInterval(() => modalInputRef.current?.focus(), 1);
- }
- };
-
- useEffect(() => {
- const keyboardListener = (e: KeyboardEvent) => {
-
- if (isIncrement(e)) {
- increment();
- }
- if (isDecrement(e)) {
- decrement();
- }
- if (isReplace(e)) {
- e.preventDefault();
- replace();
- }
- if (isEscape(e)) {
- resetCells();
- }
- };
-
- document.addEventListener('keydown', keyboardListener);
-
- return () => {
- document.removeEventListener('keydown', keyboardListener);
- };
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, []);
-
- const min = Math.min(...data.map((row) => Math.min(...row)));
- const max = Math.max(...data.map((row) => Math.max(...row)));
+ const min = Math.min(...zData.map((row) => Math.min(...row)));
+ const max = Math.max(...zData.map((row) => Math.max(...row)));
const renderRow = (rowIndex: number, input: number[]) => input
.map((value, index) => {
@@ -210,58 +59,27 @@ const Map = ({
}
return (
- <>
-
-
val === true) === true}
- content={
-
- } />
- } />
- } />
-
- }
- >
-
- {data.map((row, i) => (
-
- {renderRow(i, row)}
-
- ))}
-
- |
- {yUnits} / {xUnits}
- |
- {xData.map((xValue) => (
-
- {`${xValue}`}
- |
- ))}
+
+
+
+ {zData.map((row, i) => (
+
+ {renderRow(i, row)}
-
-
-
-
- setModalValue(Number(val))}
- onPressEnter={oneModalOk}
- style={{ width: '20%' }}
- />
-
-
+ ))}
+
+ |
+ {yUnits} / {xUnits}
+ |
+ {xData.map((xValue, l) => (
+
+ {`${xValue}`}
+ |
+ ))}
+
+
+
+