@oliasoft-open-source/charts-library 3.3.6-beta-3 → 3.3.6-beta-5

package/src/components/controls/axes-options/axes-options.jsx

@@ -0,0 +1,271 @@
+import React, { useReducer, useState } from 'react';
+import {
+  Button,
+  ButtonGroup,
+  Field,
+  Flex,
+  NumberInput,
+  InputGroup,
+  InputGroupAddon,
+  Popover,
+  Select,
+  Spacer,
+  Text,
+  Tooltip,
+} from '@oliasoft-open-source/react-ui-library';
+import { RiRuler2Line } from 'react-icons/ri';
+import PropTypes from 'prop-types';
+import { toNum } from '@oliasoft-open-source/units';
+import {
+  initializeFormState,
+  reducer,
+  validateAxes,
+} from '../../line-chart/controls/axes-options/axes-options-form-state';
+import { actionTypes } from '../../line-chart/controls/axes-options/action-types';
+
+const AxesOptionsPopover = ({
+  initialAxesRanges,
+  axes,
+  controlsAxesLabels,
+  onUpdateAxes,
+  onResetAxes,
+  close,
+  depthType,
+  translations,
+}) => {
+  const [depthTypeState, setDepthTypeState] = useState(
+    depthType?.selectedDepthType,
+  );
+  const [formState, dispatch] = useReducer(
+    reducer,
+    {
+      axes,
+      initialAxesRanges,
+    },
+    initializeFormState,
+  );
+
+  const { errors, valid } = validateAxes(formState);
+
+  const onEditValue = ({ name, value, id }) => {
+    dispatch({
+      type: actionTypes.valueUpdated,
+      payload: { name, value, id },
+    });
+  };
+
+  const onEditUnit = ({ name, value, id }) => {
+    dispatch({
+      type: actionTypes.unitUpdated,
+      payload: { name, value, id },
+    });
+  };
+
+  const onDone = (e) => {
+    e.preventDefault();
+    if (valid) {
+      const sanitizedFormState = formState.map((axis) => ({
+        ...axis,
+        min: toNum(axis.min),
+        max: toNum(axis.max),
+      }));
+      onUpdateAxes({
+        axes: sanitizedFormState,
+      });
+
+      //update units
+      sanitizedFormState.map((el, i) => {
+        if (el.unit?.selectedUnit) {
+          axes[i].unit.setSelectedUnit(el.unit.selectedUnit);
+        }
+      });
+      //update depthType
+      if (depthType) {
+        depthType.setSelectedDepthType(depthTypeState);
+      }
+    }
+    close();
+  };
+
+  const onReset = () => {
+    //reset local form
+    dispatch({
+      type: actionTypes.reset,
+      payload: { axes, initialAxesRanges },
+    });
+    //update units
+    initialAxesRanges.map((el, i) => {
+      if (el?.unit?.selectedUnit) {
+        axes[i].unit.setSelectedUnit(el.unit.selectedUnit);
+      }
+    });
+
+    //reset parent state
+    onResetAxes();
+    close();
+  };
+
+  const isCustomValue = axes.filter((axis) => axis.max || axis.min).length > 0;
+  const handleInputFocus = (e) => e.target.select();
+  return (
+    <form onSubmit={onDone}>
+      {axes.map((axis, i) => {
+        const axisLabel = controlsAxesLabels.find(
+          (el) => el.id === axis.id,
+        )?.label;
+
+        const min = formState.find((a) => a.id === axis.id)?.min;
+        const max = formState.find((a) => a.id === axis.id)?.max;
+        const minError = errors?.find((a) => a.id === axis.id)?.min?.[0];
+        const maxError = errors?.find((a) => a.id === axis.id)?.max?.[0];
+        const unit = formState.find((a) => a.id === axis.id)?.unit;
+        return (
+          <Field key={i} label={axisLabel || axis.id || ''}>
+            <InputGroup small width="300px">
+              <NumberInput
+                name="min"
+                value={min}
+                error={translations[minError]}
+                size={5}
+                width="100%"
+                onChange={(evt) =>
+                  onEditValue({
+                    name: evt.target.name,
+                    value: evt.target.value,
+                    id: axis.id,
+                  })
+                }
+                onFocus={handleInputFocus}
+              />
+              <InputGroupAddon>to</InputGroupAddon>
+              <NumberInput
+                name="max"
+                value={max}
+                error={translations[maxError]}
+                size={5}
+                width="100%"
+                onChange={(evt) =>
+                  onEditValue({
+                    name: evt.target.name,
+                    value: evt.target.value,
+                    id: axis.id,
+                  })
+                }
+                onFocus={handleInputFocus}
+              />
+              {axis.unit ? (
+                <Select
+                  name="selectedUnit"
+                  options={axis?.unit?.options}
+                  value={unit?.selectedUnit}
+                  onChange={(e) => {
+                    onEditUnit({
+                      name: e.target.name,
+                      value: e.target.value,
+                      id: axis.id,
+                    });
+                  }}
+                  autoLayerWidth
+                  width="15%"
+                />
+              ) : null}
+            </InputGroup>
+          </Field>
+        );
+      })}
+
+      {depthType?.options?.length > 0 ? (
+        <>
+          <ButtonGroup
+            items={depthType.options.map((depth, i) => ({
+              key: i,
+              label: depth,
+            }))}
+            onSelected={(key) => {
+              setDepthTypeState(depthType.options[key]);
+            }}
+            small
+            value={depthType.options.indexOf(depthTypeState)}
+          />
+          <Spacer />
+        </>
+      ) : null}
+
+      <Flex gap="8px" alignItems="center">
+        <Button
+          type="submit"
+          small
+          colored
+          label={translations.done}
+          disabled={!valid}
+        />
+        <Button
+          small
+          name="resetAxes"
+          label={translations.resetAxes}
+          onClick={onReset}
+          disabled={!isCustomValue}
+        />
+        <Text small muted>
+          {translations.orDoubleClickToCanvas}
+        </Text>
+      </Flex>
+    </form>
+  );
+};
+
+export const AxesOptions = ({
+  initialAxesRanges,
+  axes,
+  controlsAxesLabels,
+  onUpdateAxes,
+  onResetAxes,
+  depthType,
+  translations,
+}) => {
+  return (
+    <Popover
+      placement="bottom"
+      overflowContainer
+      content={
+        <AxesOptionsPopover
+          initialAxesRanges={initialAxesRanges}
+          axes={axes}
+          controlsAxesLabels={controlsAxesLabels}
+          onUpdateAxes={onUpdateAxes}
+          onResetAxes={onResetAxes}
+          depthType={depthType}
+          translations={translations}
+        />
+      }
+    >
+      <Tooltip
+        text={translations.axesOptions}
+        placement="bottom"
+        display="flex"
+      >
+        <Button small basic colored="muted" round icon={<RiRuler2Line />} />
+      </Tooltip>
+    </Popover>
+  );
+};
+
+AxesOptionsPopover.defaultProps = {
+  depthType: null,
+  initialAxesRanges: [],
+  close: () => {},
+};
+
+AxesOptionsPopover.propTypes = {
+  initialAxesRanges: PropTypes.arrayOf(PropTypes.shape({})),
+  axes: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  controlsAxesLabels: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  onUpdateAxes: PropTypes.func.isRequired,
+  onResetAxes: PropTypes.func.isRequired,
+  close: PropTypes.func,
+  depthType: PropTypes.shape({
+    selectedDepthType: PropTypes.string,
+    setSelectedDepthType: PropTypes.func,
+    options: PropTypes.arrayOf(PropTypes.string),
+  }),
+};

package/src/components/line-chart/constants/default-translations.js

@@ -0,0 +1,24 @@
+export const defaultTranslations = Object.freeze({
+  label: 'Label',
+  pointsLines: 'Points & lines',
+  linesOnly: 'Lines only',
+  pointsOnly: 'Points only',
+  axesOptions: 'Axes options',
+  resetAxes: 'Reset Axes',
+  done: 'Done',
+  downloadAsPNG: 'Download as PNG',
+  showChart: 'Show chart',
+  showTable: 'Show table',
+  dragToZoom: 'Drag to zoom',
+  dragToPan: 'Drag to pan',
+  dragToMovePoints: 'Drag to move points',
+  dragDisabled: 'Drag disabled',
+  hideLegend: 'Hide Legend',
+  showLegend: 'Show Legend',
+  mustHaveAValue: 'Must have a value',
+  mustBeANumber: 'Must be a number',
+  mustBeLessThanMax: 'Must be less than max',
+  mustBeGreaterThanMin: 'Must be greater than min',
+  doubleClickToReset: 'Double click on canvas to reset',
+  orDoubleClickToCanvas: 'or double click on canvas',
+});

package/src/components/line-chart/constants/line-chart-consts.js

@@ -0,0 +1,12 @@
+export const DEFAULT_POINT_RADIUS = 2;
+export const DEFAULT_HOVER_RADIUS = 5;
+export const DEFAULT_BORDER_WIDTH = 1;
+export const BORDER_JOIN_STYLE = 'round';
+export const DEFAULT_LINE_POINT_RADIUS = 0;
+export const DEFAULT_BACKGROUND_COLOR = 'transparent';
+export const ZOOM_BOX_BACKGROUND_COLOR = 'rgba(0, 0, 0, 0.1)';
+export const DOUBLE_CLICK = 'dblclick';
+export const INIT_KEYS = {
+  TRANSLATIONS: 'translations',
+  LANGUAGE_KEY: 'languageKey',
+};

package/src/components/line-chart/controls/axes-options/action-types.js

@@ -0,0 +1,5 @@
+export const actionTypes = Object.freeze({
+  reset: 'reset',
+  valueUpdated: 'valueUpdated',
+  unitUpdated: 'unitUpdated',
+});

package/src/components/line-chart/controls/axes-options/axes-options-form-state.js

@@ -0,0 +1,97 @@
+import { produce } from 'immer';
+import { isGreaterThanMin, isLessThanMax } from '../../utils/line-chart-utils';
+import { actionTypes } from './action-types';
+
+/**
+ * Initialize local component form state for a custom loads density table
+ *
+ * @param {Object} args
+ * @param {Object} args.initialAxesRanges
+ * @param {Array} [args.axes]
+ * @returns {Object} formState
+ */
+export const initializeFormState = ({ initialAxesRanges, axes = [] }) => {
+  return initialAxesRanges.map((initialAxisRange) => {
+    const currentAxisRange = axes.find((a) => a.id === initialAxisRange.id);
+    return {
+      id: initialAxisRange.id,
+      min: currentAxisRange?.min ?? initialAxisRange?.min,
+      max: currentAxisRange?.max ?? initialAxisRange?.max,
+      unit: currentAxisRange?.unit,
+    };
+  });
+};
+
+/**
+ * @typedef {Object} Action
+ * @property {String} type Action type
+ * @property {Object} [payload] Action payload (optional)
+ */
+
+const isEmptyString = (value) => value === '';
+
+const createErrorMessages = (value, compareTo, type) => {
+  const errors = [];
+  if (isEmptyString(value)) errors.push('mustHaveAValue');
+
+  if (type === 'min' && !isLessThanMax(value, compareTo)) {
+    errors.push('mustBeLessThanMax');
+  } else if (type === 'max' && !isGreaterThanMin(value, compareTo)) {
+    errors.push('mustBeGreaterThanMin');
+  }
+
+  return errors;
+};
+
+export const validateAxes = (formState) => {
+  return formState.reduce(
+    (acc, { id, min, max }) => {
+      return produce(acc, (draft) => {
+        const errors = {
+          min: createErrorMessages(min, max, 'min'),
+          max: createErrorMessages(max, min, 'max'),
+        };
+        draft.errors.push({
+          id,
+          ...errors,
+        });
+        draft.valid = !(
+          !acc.valid ||
+          !!errors.min.length ||
+          !!errors.max.length
+        );
+      });
+    },
+    { errors: [], valid: true },
+  );
+};
+
+/**
+ * Local component form state reducer for a axes options form
+ *
+ * @param {Object} state Local component form state
+ * @param {Action} action Action with type and payload
+ * @returns {Object} FormState
+ */
+export const reducer = (state, action) => {
+  switch (action.type) {
+    case actionTypes.reset: {
+      const { initialAxesRanges, axes } = action.payload;
+      return initializeFormState({ initialAxesRanges, axes });
+    }
+    case actionTypes.valueUpdated:
+      return produce(state, (draft) => {
+        const { name, value, id } = action.payload;
+        const axis = draft.find((a) => a.id === id);
+        axis[name] = value;
+      });
+    case actionTypes.unitUpdated:
+      return produce(state, (draft) => {
+        const { name, value, id } = action.payload;
+        const axis = draft.find((a) => a.id === id);
+        axis.unit[name] = value;
+      });
+    default:
+      return state;
+  }
+};

package/src/components/line-chart/controls/controls-portal.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Portal } from '@oliasoft-open-source/react-ui-library';
+
+const ControlsPortal = ({ children, controlsPortalId }) => {
+  if (controlsPortalId && document.getElementById(controlsPortalId)) {
+    return <Portal id={controlsPortalId}>{children}</Portal>;
+  }
+
+  return children;
+};
+
+export default ControlsPortal;

package/src/components/line-chart/controls/controls.jsx

@@ -0,0 +1,176 @@
+import React from 'react';
+import { Button, Text, Tooltip } from '@oliasoft-open-source/react-ui-library';
+import {
+  RiFileDownloadLine,
+  RiLineChartLine,
+  RiTableLine,
+} from 'react-icons/ri';
+import PropTypes from 'prop-types';
+import { LineOptions } from './line-options';
+import { DragOptions } from './drag-options';
+import styles from './controls.module.less';
+import { useToggleHandlers } from '../hooks/use-toggle-handler';
+import { useChartFunctions } from '../hooks/use-chart-functions';
+import { AxesOptions } from '../../controls/axes-options/axes-options';
+import ControlsPortal from './controls-portal';
+
+const Controls = ({
+  props: { headerComponent, subheaderComponent, table },
+  chartRef,
+  state,
+  options,
+  dispatch,
+  generatedDatasets,
+  translations,
+  controlsPortalId,
+}) => {
+  const {
+    enableDragPoints,
+    initialAxesRanges,
+    lineEnabled,
+    panEnabled,
+    pointsEnabled,
+    showTable,
+    zoomEnabled,
+  } = state;
+  const { dragData } = options;
+  const {
+    onToggleLine,
+    onTogglePan,
+    onTogglePoints,
+    onToggleTable,
+    onToggleZoom,
+    onToggleDragPoints,
+    onDisableDragOptions,
+  } = useToggleHandlers(dispatch);
+  const {
+    handleDownload,
+    controlsAxes,
+    controlsAxesLabels,
+    onResetAxes,
+    onUpdateAxes,
+  } = useChartFunctions({
+    chartRef,
+    state,
+    options,
+    dispatch,
+    generatedDatasets,
+  });
+
+  return (
+    <>
+      <div className={styles.controls}>
+        {!!options.title && <Text bold>{options.title}</Text>}
+        {headerComponent}
+        <ControlsPortal controlsPortalId={controlsPortalId}>
+          <div className={styles.buttons}>
+            {!showTable && (
+              <>
+                <AxesOptions
+                  initialAxesRanges={initialAxesRanges}
+                  axes={controlsAxes}
+                  controlsAxesLabels={controlsAxesLabels}
+                  onUpdateAxes={onUpdateAxes}
+                  onResetAxes={onResetAxes}
+                  depthType={options.depthType}
+                  translations={translations}
+                />
+                <LineOptions
+                  lineEnabled={lineEnabled}
+                  pointsEnabled={pointsEnabled}
+                  onToggleLine={onToggleLine}
+                  onTogglePoints={onTogglePoints}
+                  translations={translations}
+                />
+                <Tooltip
+                  text={translations.downloadAsPNG}
+                  placement="bottom-end"
+                >
+                  <Button
+                    small
+                    basic
+                    colored="muted"
+                    round
+                    icon={<RiFileDownloadLine />}
+                    onClick={handleDownload}
+                  />
+                </Tooltip>
+                <DragOptions
+                  panEnabled={panEnabled}
+                  zoomEnabled={zoomEnabled}
+                  onTogglePan={onTogglePan}
+                  onToggleZoom={onToggleZoom}
+                  enableDragPoints={enableDragPoints}
+                  isDragDataAllowed={dragData.enableDragData}
+                  onToggleDragPoints={onToggleDragPoints}
+                  onDisableDragOptions={onDisableDragOptions}
+                  translations={translations}
+                />
+              </>
+            )}
+
+            {table ? (
+              <Tooltip
+                text={
+                  showTable ? translations.showChart : translations.showTable
+                }
+                placement="bottom-end"
+              >
+                <Button
+                  small
+                  basic
+                  colored="muted"
+                  round
+                  icon={showTable ? <RiLineChartLine /> : <RiTableLine />}
+                  onClick={onToggleTable}
+                />
+              </Tooltip>
+            ) : null}
+          </div>
+        </ControlsPortal>
+      </div>
+      {subheaderComponent}
+    </>
+  );
+};
+
+Controls.defaultProps = {
+  props: {
+    headerComponent: null,
+    subheaderComponent: null,
+    table: null,
+    controlsPortalId: null,
+  },
+  state: {
+    initialAxesRanges: [],
+  },
+  options: {},
+};
+
+Controls.propTypes = {
+  props: PropTypes.shape({
+    headerComponent: PropTypes.node,
+    subheaderComponent: PropTypes.node,
+    table: PropTypes.node,
+    controlsPortalId: PropTypes.string,
+  }),
+  chartRef: PropTypes.object.isRequired,
+  state: PropTypes.shape({
+    enableDragPoints: PropTypes.bool,
+    initialAxesRanges: PropTypes.arrayOf(PropTypes.shape({})),
+    lineEnabled: PropTypes.bool,
+    panEnabled: PropTypes.bool,
+    pointsEnabled: PropTypes.bool,
+    showTable: PropTypes.bool,
+    zoomEnabled: PropTypes.bool,
+  }),
+  options: PropTypes.shape({
+    dragData: PropTypes.shape({
+      enableDragData: PropTypes.bool,
+    }),
+  }),
+  dispatch: PropTypes.func.isRequired,
+  generatedDatasets: PropTypes.arrayOf(PropTypes.object).isRequired,
+};
+
+export default Controls;

package/src/components/line-chart/controls/controls.module.less

@@ -0,0 +1,12 @@
+.controls {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.buttons {
+  display: flex;
+  margin-left: auto;
+  gap: 4px;
+}