@oliasoft-open-source/charts-library 2.17.6 → 2.18.0-beta-1

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

@@ -1,270 +0,0 @@
-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>
-              <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,
-                    });
-                  }}
-                  width="auto"
-                />
-              ) : 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

@@ -1,24 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

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

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

@@ -1,97 +0,0 @@
-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.jsx

@@ -1,174 +0,0 @@
-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 { LegendOptions } from './legend-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';
-
-const Controls = ({
-  props: { headerComponent, subheaderComponent, table },
-  chartRef,
-  state,
-  options,
-  dispatch,
-  generatedDatasets,
-  translations,
-}) => {
-  const {
-    enableDragPoints,
-    initialAxesRanges,
-    legendEnabled,
-    lineEnabled,
-    panEnabled,
-    pointsEnabled,
-    showTable,
-    zoomEnabled,
-  } = state;
-  const { dragData } = options;
-  const {
-    onToggleLegend,
-    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}
-        <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}
-              />
-              <LegendOptions
-                legendEnabled={legendEnabled}
-                onToggleLegend={onToggleLegend}
-                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>
-      </div>
-      {subheaderComponent}
-    </>
-  );
-};
-
-Controls.defaultProps = {
-  props: {
-    headerComponent: null,
-    subheaderComponent: null,
-    table: null,
-  },
-  state: {
-    initialAxesRanges: [],
-  },
-  options: {},
-};
-
-Controls.propTypes = {
-  props: PropTypes.shape({
-    headerComponent: PropTypes.node,
-    subheaderComponent: PropTypes.node,
-    table: PropTypes.node,
-  }),
-  chartRef: PropTypes.object.isRequired,
-  state: PropTypes.shape({
-    enableDragPoints: PropTypes.bool,
-    initialAxesRanges: PropTypes.arrayOf(PropTypes.shape({})),
-    legendEnabled: PropTypes.bool,
-    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

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

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

@@ -1,112 +0,0 @@
-import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
-import { Flex, Menu, Text } from '@oliasoft-open-source/react-ui-library';
-import { RiDragMove2Line, RiForbidLine, RiZoomInLine } from 'react-icons/ri';
-import { TbHandStop } from 'react-icons/tb';
-
-export const DragOptions = ({
-  onTogglePan,
-  onToggleZoom,
-  panEnabled,
-  zoomEnabled,
-  enableDragPoints,
-  isDragDataAllowed,
-  onToggleDragPoints,
-  onDisableDragOptions,
-  translations: {
-    dragToZoom,
-    doubleClickToReset,
-    dragToPan,
-    orDoubleClickToCanvas,
-    dragToMovePoints,
-    dragDisabled,
-  },
-}) => {
-  const options = useMemo(
-    () => [
-      {
-        buttonLabel: dragToZoom,
-        label: (
-          <Flex direction="column">
-            <Text>Drag to zoom</Text>
-            <Text small muted>
-              {doubleClickToReset}
-            </Text>
-          </Flex>
-        ),
-        icon: <RiZoomInLine />,
-        selected: zoomEnabled,
-        onClick: onToggleZoom,
-      },
-      {
-        buttonLabel: dragToPan,
-        label: (
-          <Flex direction="column">
-            <Text>Drag to pan</Text>
-            <Text small muted>
-              {orDoubleClickToCanvas}
-            </Text>
-          </Flex>
-        ),
-        icon: <RiDragMove2Line />,
-        selected: panEnabled,
-        onClick: onTogglePan,
-      },
-      ...(isDragDataAllowed
-        ? [
-            {
-              label: dragToMovePoints,
-              icon: <TbHandStop />,
-              selected: enableDragPoints,
-              type: 'Option',
-              onClick: onToggleDragPoints,
-            },
-          ]
-        : []),
-      {
-        label: dragDisabled,
-        icon: <RiForbidLine />,
-        selected: !zoomEnabled && !panEnabled && !enableDragPoints,
-        onClick: onDisableDragOptions,
-      },
-    ],
-    [zoomEnabled, panEnabled, enableDragPoints, isDragDataAllowed],
-  );
-
-  const selectedOption = options.find((option) => option.selected);
-  const optionsWithDragPoints = options.map(
-    ({ icon, label, onClick, selected }) => ({
-      icon,
-      label,
-      type: 'Option',
-      onClick,
-      disabled: selected,
-    }),
-  );
-
-  return (
-    <Menu
-      menu={{
-        label: selectedOption.buttonLabel || selectedOption.label,
-        sections: optionsWithDragPoints,
-        trigger: 'DropDownButton',
-        small: true,
-      }}
-    />
-  );
-};
-
-DragOptions.defaultProps = {
-  enableDragPoints: false,
-};
-
-DragOptions.propTypes = {
-  onTogglePan: PropTypes.func.isRequired,
-  onToggleZoom: PropTypes.func.isRequired,
-  panEnabled: PropTypes.bool.isRequired,
-  zoomEnabled: PropTypes.bool.isRequired,
-  enableDragPoints: PropTypes.bool,
-  isDragDataAllowed: PropTypes.bool.isRequired,
-  onToggleDragPoints: PropTypes.func.isRequired,
-  onDisableDragOptions: PropTypes.func.isRequired,
-};