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

package/src/components/bar-chart/get-bar-chart-scales.js

@@ -1,123 +0,0 @@
-import { AxisType, ScaleType } from '../../helpers/enums';
-import {
-  getAxisPosition,
-  isVertical,
-  generateRandomColor,
-} from '../../helpers/chart-utils';
-import { COLORS, LOGARITHMIC_STEPS } from '../../helpers/chart-consts';
-
-/**
- * @param {import('./bar-chart.interface').IBarChartData} chart - chart data
- * @param {'x'|'y'} axisType
- * @param {import('./bar-chart.interface').IBarChartAxes} [currentScales]
- */
-const getBarChartAxis = (chart, axisType, currentScales) => {
-  const isDirectionVertical = isVertical(chart.options.direction);
-
-  const axisData = currentScales || chart.options.axes[axisType][0];
-  const isDirectionCompatibleWithAxisType =
-    (isDirectionVertical && axisType === AxisType.Y) ||
-    (!isDirectionVertical && axisType === AxisType.X);
-
-  const grid = axisData?.gridLines || {};
-
-  const getScaleType = () => {
-    const scaleType = chart.data.labels ? ScaleType.Category : ScaleType.Linear;
-    const axisWithScale = isDirectionVertical ? AxisType.X : AxisType.Y;
-    return axisType === axisWithScale
-      ? scaleType
-      : chart.options.additionalAxesOptions.chartScaleType;
-  };
-
-  const getReverse = () => {
-    const axisWithReverse = isDirectionVertical ? AxisType.Y : AxisType.X;
-    return axisType === axisWithReverse
-      ? chart.options.additionalAxesOptions.reverse
-      : false;
-  };
-
-  const getTicks = () => {
-    const areLogarithmicTicks =
-      isDirectionCompatibleWithAxisType &&
-      chart.options.additionalAxesOptions.chartScaleType ===
-        ScaleType.Logarithmic;
-
-    if (areLogarithmicTicks) {
-      return {
-        callback: (tick) => {
-          return LOGARITHMIC_STEPS.includes(tick) ? tick.toLocaleString() : '';
-        },
-      };
-    } else {
-      return {
-        stepSize:
-          axisData.stepSize || chart.options.additionalAxesOptions.stepSize,
-      };
-    }
-  };
-
-  return {
-    type: getScaleType(),
-    position: axisData.position,
-    beginAtZero: chart.options.additionalAxesOptions.beginAtZero,
-    reverse: getReverse(),
-    suggestedMax: chart.options?.additionalAxesOptions?.suggestedMax,
-    suggestedMin: chart.options?.additionalAxesOptions?.suggestedMin,
-    min: isDirectionCompatibleWithAxisType
-      ? chart.options?.additionalAxesOptions?.min
-      : undefined,
-    max: isDirectionCompatibleWithAxisType
-      ? chart.options?.additionalAxesOptions?.max
-      : undefined,
-    title: {
-      display: axisData.label?.length || axisData.unit?.length,
-      text: axisData.label || axisData.unit,
-      padding: 0,
-    },
-    ticks: getTicks(),
-    grid: {
-      ...grid,
-    },
-    stacked: chart.options.additionalAxesOptions.stacked,
-  };
-};
-
-/**
- * @param {import('./bar-chart.interface').IBarChartData} chart - chart data
- * @param {'x'|'y'} axisType
- */
-const getBarChartAxes = (chart, axisType) => {
-  const axesData = chart.options.axes[axisType];
-  const axes = axesData.reduce((acc, curr, i) => {
-    const axisData = curr;
-    const color = curr.color || COLORS[i] || generateRandomColor(COLORS);
-    axisData.color = color;
-    axisData.position = curr.position || getAxisPosition(axisType, i);
-
-    const axis = getBarChartAxis(chart, axisType, axisData);
-    return { ...acc, [axisType + (i + 1)]: axis };
-  }, {});
-  return axes;
-};
-
-/**
- * @param {import('./bar-chart.interface').IBarChartData} chart - chart data
- */
-const getBarChartScales = (chart) => {
-  const hasMultipleXAxes = chart.options.axes.x?.length > 1;
-  const hasMultipleYAxes = chart.options.axes.y?.length > 1;
-
-  const xAxesScales = hasMultipleXAxes
-    ? getBarChartAxes(chart, AxisType.X)
-    : { x: getBarChartAxis(chart, AxisType.X) };
-  const yAxesScales = hasMultipleYAxes
-    ? getBarChartAxes(chart, AxisType.Y)
-    : { y: getBarChartAxis(chart, AxisType.Y) };
-
-  return {
-    ...xAxesScales,
-    ...yAxesScales,
-  };
-};
-
-export default getBarChartScales;

package/src/components/bar-chart/get-bar-chart-tooltips.js

@@ -1,102 +0,0 @@
-import { toNum } from '@oliasoft-open-source/units';
-import {
-  afterLabelCallback,
-  getTooltipLabel,
-  isVertical,
-} from '../../helpers/chart-utils';
-import { ChartHoverMode, TooltipLabel } from '../../helpers/enums';
-
-/**
- * @param {import('./bar-chart.interface').IBarChartOptions} options - bar chart options object
- */
-const getBarChartToolTips = (options) => {
-  const getTooltipLabels = (dataset) => {
-    const isDirectionVertical = isVertical(options.direction);
-    const { x, y } = options.axes;
-
-    const xIndex = dataset.xAxisID?.length > 1 ? dataset.xAxisID[1] - 1 : 0;
-    const yIndex = dataset.yAxisID?.length > 1 ? dataset.yAxisID[1] - 1 : 0;
-    const xAxis = isDirectionVertical ? x[xIndex] : y[yIndex];
-    const yAxis = isDirectionVertical ? y[yIndex] : x[xIndex];
-
-    return {
-      titleAxisLabel: xAxis?.label || '',
-      valueAxisLabel: yAxis?.label || '',
-      titleLabel: TooltipLabel.X,
-      valueLabel: TooltipLabel.Y,
-      titleUnit: xAxis?.unit || '',
-      valueUnit: yAxis?.unit || '',
-    };
-  };
-
-  const titleCallback = (tooltipItem, data) => {
-    const barLabel = tooltipItem[0]?.label || '';
-    const labels = getTooltipLabels(tooltipItem[0].dataset);
-    const { titleAxisLabel, titleUnit } = labels;
-    const axisLabel =
-      !titleAxisLabel && !titleUnit ? '' : `${titleAxisLabel || titleUnit}: `;
-    return axisLabel + barLabel;
-  };
-
-  const labelCallback = (tooltipItem) => {
-    const { showLabelsInTooltips } = options.tooltip;
-    let label = tooltipItem.dataset?.label || '';
-
-    const labels = getTooltipLabels(tooltipItem.dataset);
-    const { valueUnit, valueAxisLabel } = labels;
-
-    const getTooltipItemValue = () => {
-      const { formattedValue } = tooltipItem;
-      const formattedValueWithDotSeparator = formattedValue.replace(',', '.');
-      const labelNumber = toNum(formattedValueWithDotSeparator);
-
-      let labelNumberFormatted;
-      if (Math.abs(labelNumber) < 1) {
-        labelNumberFormatted = labelNumber.toPrecision(3);
-      } else {
-        labelNumberFormatted = Number.isInteger(labelNumber)
-          ? labelNumber
-          : labelNumber.toFixed(3);
-      }
-
-      let tooltipItemValue = '';
-      if (typeof tooltipItem.raw === 'number') {
-        tooltipItemValue = labelNumberFormatted;
-      }
-      if (Array.isArray(tooltipItem.raw)) {
-        tooltipItemValue = tooltipItem.raw.reduce((acc, curr, i) => {
-          return i === 0 ? `${acc} ${curr}` : `${acc}, ${curr}`;
-        }, '');
-      }
-      if (typeof tooltipItem.raw === 'object') {
-        tooltipItemValue = formattedValue;
-      }
-
-      return tooltipItemValue;
-    };
-
-    const hideValueAxisLabel =
-      label === valueAxisLabel || valueAxisLabel.includes(label);
-
-    const tooltipItemValue = getTooltipItemValue();
-    const unit = valueUnit ? `[${valueUnit}] ` : '';
-    const valAxisLabel = hideValueAxisLabel ? '' : valueAxisLabel;
-    const tooltipLabel = getTooltipLabel(tooltipItem, showLabelsInTooltips);
-
-    return `${label}: ${tooltipItemValue} ${unit}${valAxisLabel}${tooltipLabel}`;
-  };
-
-  return {
-    enabled: options.tooltip.tooltips,
-    mode: ChartHoverMode.Nearest,
-    intersect: true,
-    padding: 8,
-    callbacks: {
-      title: titleCallback,
-      label: labelCallback,
-      afterLabel: afterLabelCallback,
-    },
-  };
-};
-
-export default getBarChartToolTips;

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;
-  }
-};