@oliasoft-open-source/charts-library 0.0.2-beta-1

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

@@ -0,0 +1,166 @@
+import React, { useReducer } from 'react';
+import {
+  Button,
+  Field,
+  Flex,
+  Input,
+  InputGroup,
+  InputGroupAddon,
+  Popover,
+  Text,
+  Tooltip,
+} from '@oliasoft-open-source/react-ui-library';
+import { RiRuler2Line } from 'react-icons/ri';
+import { toNum } from '../../line-chart/line-chart-utils';
+import {
+  actionTypes,
+  reducer,
+  initializeFormState,
+  validateAxes,
+} from './axes-options-form-state';
+
+const AxesOptionsPopover = ({
+  initialAxesRanges,
+  axes,
+  controlsAxesLabels,
+  onUpdateAxes,
+  onResetAxes,
+  close,
+}) => {
+  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 onDone = () => {
+    if (valid) {
+      const sanitizedFormState = formState.map((axis) => ({
+        ...axis,
+        min: toNum(axis.min),
+        max: toNum(axis.max),
+      }));
+      onUpdateAxes({
+        axes: sanitizedFormState,
+      });
+    }
+    close();
+  };
+
+  const onReset = () => {
+    //reset local form
+    dispatch({
+      type: actionTypes.reset,
+      payload: { axes, initialAxesRanges },
+    });
+    //reset parent state
+    onResetAxes();
+  };
+
+  const isCustomValue = axes.filter((axis) => axis.max || axis.min).length > 0;
+  const handleInputFocus = (e) => e.target.select();
+  return (
+    <>
+      {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];
+        return (
+          <Field key={i} label={axisLabel || axis.id || ''}>
+            <InputGroup small>
+              <Input
+                name="min"
+                value={min}
+                error={minError}
+                size={5}
+                width="100%"
+                onChange={(evt) =>
+                  onEditValue({
+                    name: evt.target.name,
+                    value: evt.target.value,
+                    id: axis.id,
+                  })
+                }
+                onFocus={handleInputFocus}
+              />
+              <InputGroupAddon>to</InputGroupAddon>
+              <Input
+                name="max"
+                value={max}
+                error={maxError}
+                size={5}
+                width="100%"
+                onChange={(evt) =>
+                  onEditValue({
+                    name: evt.target.name,
+                    value: evt.target.value,
+                    id: axis.id,
+                  })
+                }
+                onFocus={handleInputFocus}
+              />
+            </InputGroup>
+          </Field>
+        );
+      })}
+      <Flex gap="8px" alignItems="center">
+        <Button small colored label="Done" onClick={onDone} disabled={!valid} />
+        <Button
+          small
+          name="resetAxes"
+          label="Reset Axes"
+          onClick={onReset}
+          disabled={!isCustomValue}
+        />
+        <Text small muted>
+          or click on canvas
+        </Text>
+      </Flex>
+    </>
+  );
+};
+
+export const AxesOptions = ({
+  initialAxesRanges,
+  axes,
+  controlsAxesLabels,
+  onUpdateAxes,
+  onResetAxes,
+}) => {
+  return (
+    <Popover
+      placement="bottom"
+      overflowContainer
+      content={
+        <AxesOptionsPopover
+          initialAxesRanges={initialAxesRanges}
+          axes={axes}
+          controlsAxesLabels={controlsAxesLabels}
+          onUpdateAxes={onUpdateAxes}
+          onResetAxes={onResetAxes}
+        />
+      }
+    >
+      <Tooltip text="Axes options" placement="bottom" display="flex">
+        <Button small basic colored="muted" round icon={<RiRuler2Line />} />
+      </Tooltip>
+    </Popover>
+  );
+};

package/src/components/controls/controls.jsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { Button, Text, Tooltip } from '@oliasoft-open-source/react-ui-library';
+import {
+  RiFileDownloadLine,
+  RiLineChartLine,
+  RiTableLine,
+} from 'react-icons/ri';
+import { LineOptions } from './line-options';
+import { DragOptions } from './drag-options';
+import { AxesOptions } from './axes-options/axes-options';
+import { LegendOptions } from './legend-options';
+import styles from './controls.module.less';
+
+const Controls = ({
+  axes,
+  controlsAxesLabels,
+  chart,
+  headerComponent,
+  legendEnabled,
+  lineEnabled,
+  onDownload,
+  onResetAxes,
+  onUpdateAxes,
+  onToggleLegend,
+  onToggleLine,
+  onTogglePan,
+  onTogglePoints,
+  onToggleTable,
+  onToggleZoom,
+  panEnabled,
+  pointsEnabled,
+  initialAxesRanges,
+  showTable,
+  subheaderComponent,
+  table,
+  zoomEnabled,
+}) => {
+  return (
+    <>
+      <div className={styles.controls}>
+        {!!chart.options.title && <Text bold>{chart.options.title}</Text>}
+        {headerComponent}
+        <div className={styles.buttons}>
+          {!showTable && (
+            <>
+              <AxesOptions
+                initialAxesRanges={initialAxesRanges}
+                axes={axes}
+                controlsAxesLabels={controlsAxesLabels}
+                onUpdateAxes={onUpdateAxes}
+                onResetAxes={onResetAxes}
+              />
+              <LineOptions
+                lineEnabled={lineEnabled}
+                pointsEnabled={pointsEnabled}
+                onToggleLine={onToggleLine}
+                onTogglePoints={onTogglePoints}
+              />
+              <LegendOptions
+                legendEnabled={legendEnabled}
+                onToggleLegend={onToggleLegend}
+              />
+              <DragOptions
+                panEnabled={panEnabled}
+                zoomEnabled={zoomEnabled}
+                onTogglePan={onTogglePan}
+                onToggleZoom={onToggleZoom}
+              />
+              <Tooltip text="Download as PNG" placement="bottom-end">
+                <Button
+                  small
+                  basic
+                  colored="muted"
+                  round
+                  icon={<RiFileDownloadLine />}
+                  onClick={onDownload}
+                />
+              </Tooltip>
+            </>
+          )}
+
+          {table ? (
+            <Tooltip
+              text={showTable ? 'Show chart' : 'Show table'}
+              placement="bottom-end"
+            >
+              <Button
+                small
+                basic
+                colored="muted"
+                round
+                icon={showTable ? <RiLineChartLine /> : <RiTableLine />}
+                onClick={onToggleTable}
+              />
+            </Tooltip>
+          ) : null}
+        </div>
+      </div>
+      {subheaderComponent}
+    </>
+  );
+};
+
+export default Controls;

package/src/components/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;
+}

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

@@ -0,0 +1,77 @@
+import React from 'react';
+import {
+  Button,
+  Flex,
+  Text,
+  Tooltip,
+} from '@oliasoft-open-source/react-ui-library';
+import { RiDragMove2Line, RiForbidLine, RiZoomInLine } from 'react-icons/ri';
+
+export const DragOptions = ({
+  onTogglePan,
+  onToggleZoom,
+  panEnabled,
+  zoomEnabled,
+}) => {
+  // TODO: Translate strings
+  const options = [
+    {
+      label: (
+        <Flex direction="column">
+          <Text>Drag to zoom</Text>
+          {/* <Text small muted>
+            Hold shift to change axis
+          </Text> */}
+          <Text small muted>
+            Click on canvas to reset
+          </Text>
+        </Flex>
+      ),
+      icon: <RiZoomInLine />,
+      selected: zoomEnabled,
+      onClick: () => {
+        onToggleZoom();
+        onTogglePan();
+      },
+    },
+    {
+      label: (
+        <Flex direction="column">
+          <Text>Drag to pan</Text>
+          {/* <Text small muted>
+            Hold shift to change axis
+          </Text> */}
+          <Text small muted>
+            Click on canvas to reset
+          </Text>
+        </Flex>
+      ),
+      icon: <RiDragMove2Line />,
+      selected: panEnabled,
+      onClick: () => {
+        onTogglePan();
+      },
+    },
+    {
+      label: 'Drag disabled',
+      icon: <RiForbidLine />,
+      selected: !zoomEnabled && !panEnabled,
+      onClick: () => {
+        onToggleZoom();
+      },
+    },
+  ];
+  const selectedOption = options.filter((option) => option.selected)[0];
+  return (
+    <Tooltip text={selectedOption.label} placement="bottom-end">
+      <Button
+        small
+        basic
+        colored="muted"
+        round
+        icon={selectedOption.icon}
+        onClick={selectedOption.onClick}
+      />
+    </Tooltip>
+  );
+};

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Button, Icon, Tooltip } from '@oliasoft-open-source/react-ui-library';
+import { RiListUnordered } from 'react-icons/ri';
+import listHideIcon from '../../assets/icons/list-hide.svg';
+
+export const LegendOptions = ({ legendEnabled, onToggleLegend }) => {
+  // TODO: Translate strings
+  return (
+    <Tooltip
+      text={legendEnabled ? 'Legend shown' : 'Legend hidden'}
+      placement="bottom"
+    >
+      <Button
+        small
+        basic
+        colored="muted"
+        round
+        icon={
+          legendEnabled ? <RiListUnordered /> : <Icon icon={listHideIcon} />
+        }
+        onClick={onToggleLegend}
+      />
+    </Tooltip>
+  );
+};

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Button, Icon, Tooltip } from '@oliasoft-open-source/react-ui-library';
+import lineOnlyIcon from '../../assets/icons/line-only.svg';
+import pointOnlyIcon from '../../assets/icons/point-only.svg';
+import lineAndPointIcon from '../../assets/icons/line-and-point.svg';
+
+export const LineOptions = ({
+  lineEnabled,
+  onToggleLine,
+  onTogglePoints,
+  pointsEnabled,
+}) => {
+  // TODO: Translate strings
+  const options = [
+    {
+      label: 'Points & lines',
+      icon: <Icon icon={lineAndPointIcon} />,
+      selected: pointsEnabled && lineEnabled,
+      onClick: () => {
+        onTogglePoints();
+      },
+    },
+    {
+      label: 'Lines only',
+      icon: <Icon icon={lineOnlyIcon} />,
+      selected: !pointsEnabled && lineEnabled,
+      onClick: () => {
+        onTogglePoints();
+        onToggleLine();
+      },
+    },
+    {
+      label: 'Points only',
+      icon: <Icon icon={pointOnlyIcon} />,
+      selected: pointsEnabled && !lineEnabled,
+      onClick: () => {
+        onToggleLine();
+      },
+    },
+  ];
+  const selectedOption = options.filter((option) => option.selected)[0];
+  return (
+    <Tooltip text={selectedOption.label} placement="bottom">
+      <Button
+        small
+        basic
+        colored="muted"
+        round
+        icon={selectedOption.icon}
+        onClick={selectedOption.onClick}
+      />
+    </Tooltip>
+  );
+};

package/src/components/line-chart/axis-scales/axis-scales.js

@@ -0,0 +1,165 @@
+import getLineChartScales from '../get-line-chart-scales';
+import { AxisType } from '../../../helpers/enums';
+import { getAxisTypeFromKey } from '../line-chart-utils';
+import { estimateDataSeriesHaveCloseValues } from '../../../helpers/range/estimate-data-series-have-close-values';
+import { getSuggestedAxisRange } from '../../../helpers/range/range';
+
+/**
+ Function that counts the number of occurences of "x" and "y" in an array and returns the one with the highest count.
+ @param {Array} scalesKeys - An array of strings that may contain "x" or "y".
+ @return {string} - Returns "x" if "x" occurs more times, "y" if "y" occurs more times, or null if they occur the same number of times.
+ */
+const checkMultiAxis = (scalesKeys) => {
+  let counts = {
+    x: 0,
+    y: 0,
+  };
+
+  scalesKeys.forEach((axeKey) => {
+    const key = getAxisTypeFromKey(axeKey);
+    counts[key]++;
+  });
+  const res =
+    (counts.x > counts.y && AxisType.X) ||
+    (counts.y > counts.x && AxisType.Y) ||
+    (counts.x === counts.y && null);
+
+  return res;
+};
+
+/**
+ Function that returns an object containing all the values for a specific key in an array of objects,
+ grouped by the unique values of another key in the same objects.
+ @param {Array} data - An array of objects to search for the keys.
+ @return {Object} - Returns an object with keys representing the unique values for the annotationAxis key in the data array,
+ and values representing an array of all values for the value key in the data array.
+ */
+const getAnnotationsData = (data) => {
+  return data.reduce((acc, obj) => {
+    return {
+      ...acc,
+      [obj.annotationAxis]: [...(acc[obj.annotationAxis] || []), obj.value],
+    };
+  }, {});
+};
+
+/**
+ * return data for each axes
+ * @function getAxesData
+ * @return {object}
+ */
+const getAxesData = (scalesKeys, datasets, annotationsData) => {
+  const allData =
+    datasets?.reduce((acc, item) => [...acc, ...item.data], []) ?? [];
+
+  /**
+   * return data by key and depends on axes count
+   * @function getData
+   * @return {object}
+   */
+  const getData = () => {
+    return scalesKeys.reduce((acc, axeKey) => {
+      const key = getAxisTypeFromKey(axeKey);
+      const data = getAnnotationsData(annotationsData);
+      const formData = allData
+        ?.map((val) => val?.[key])
+        .concat(data[key] || []);
+
+      return {
+        ...acc,
+        [axeKey]: [...new Set(formData)],
+      };
+    }, {});
+  };
+
+  /**
+   Function that returns an object containing the unique values for a multi axis key in an array of objects.
+   @return {Object} - Returns an object with key representing the found key in the scalesKeys array,
+   and values representing an array of unique values for that key in the datasets array. If no key is found, an empty object is returned.
+   */
+  const getDataForMultiAxes = () => {
+    const multiAxesKey = checkMultiAxis(scalesKeys);
+    const axes = scalesKeys?.filter((key) => key?.includes(multiAxesKey)) ?? [];
+    const data = getAnnotationsData(annotationsData);
+    const [first, second] = axes;
+
+    /**
+     * Reduces an array of objects and returns an array of values from the specified key
+     * @param {Array} arr - The array of objects to be reduced
+     * @param {string} key - The key to extract the values from
+     * @returns {Array} - An array of values from the specified key
+     */
+    const reduceData = (arr, key) =>
+      arr.reduce((acc, { [key]: value }) => [...acc, value], []);
+
+    return datasets.reduce(
+      (acc, obj) => {
+        const include = Object.values(obj).some((val) => axes.includes(val));
+        const key = include ? second : first;
+
+        return {
+          ...acc,
+          [key]: [
+            ...new Set([
+              ...acc[key],
+              ...reduceData(obj?.data, multiAxesKey),
+              ...((!include && data?.[multiAxesKey]) || []),
+            ]),
+          ],
+        };
+      },
+      { [first]: [], [second]: [] },
+    );
+  };
+
+  return {
+    ...getData(),
+    ...getDataForMultiAxes(),
+  };
+};
+
+/**
+ * Auto scales axis ranges (mix, max) if no explicit range is set
+ * - overrides some edge cases not handled well by default chart.js
+ * - supports optional padding when `autoAxisPadding` is set
+ * - otherwise does not set min/max (falls back to chart.js default)
+ *
+ * @function autoScale
+ * @return {object} scales
+ */
+export const autoScale = (options, state, generatedDatasets) => {
+  const { additionalAxesOptions = {}, annotations = {} } = options || {};
+  const { annotationsData = [] } = annotations || {};
+  const scales = getLineChartScales(options, state) || {};
+
+  if (
+    !additionalAxesOptions?.autoAxisPadding &&
+    !estimateDataSeriesHaveCloseValues(generatedDatasets)
+  ) {
+    return scales;
+  }
+  const scalesKeys = Object.keys(scales) ?? [];
+  const data =
+    getAxesData(scalesKeys, generatedDatasets, annotationsData) ?? {};
+
+  const adjustedScales = scalesKeys?.reduce((acc, key) => {
+    const { min: propMin = undefined, max: propMax = undefined } = scales[key];
+    const { min, max } = getSuggestedAxisRange({
+      data: data[key],
+      beginAtZero: additionalAxesOptions?.beginAtZero,
+      autoAxisPadding: additionalAxesOptions?.autoAxisPadding,
+    });
+
+    const res = {
+      [key]: {
+        ...scales[key],
+        min: propMin ?? min,
+        max: propMax ?? max,
+      },
+    };
+
+    return { ...acc, ...res };
+  }, {});
+
+  return adjustedScales ?? scales;
+};

package/src/components/line-chart/datalabels-alignment/get-alignment-condition.js

@@ -0,0 +1,13 @@
+/** returning boolean condition depends on label position and chart area
+ *
+ * @return {object} - returning object with boolean props
+ */
+export const getCondition = (x, y, left, right, bottom) => {
+  const threshold = 100;
+  const overLeftSide = x - threshold <= left;
+  const overRightSide = x + threshold >= right;
+  const overBottomSide =
+    x + threshold >= left && x + threshold < right && y + threshold >= bottom;
+
+  return { overLeftSide, overRightSide, overBottomSide };
+};

package/src/components/line-chart/datalabels-alignment/get-alignment-data.js

@@ -0,0 +1,20 @@
+/** returning destructured data from context
+ *
+ * @return {object}
+ */
+export const getAlignmentData = (context) => {
+  const { chart = {}, dataIndex = 0, datasetIndex = 0 } = context || {};
+  const { chartArea = {} } = chart;
+  const { left = null, right = null, bottom = null } = chartArea;
+
+  const meta = chart.getDatasetMeta(datasetIndex);
+  const { x = null, y = null } = meta?.data?.[dataIndex] || {};
+
+  return {
+    x,
+    y,
+    left,
+    right,
+    bottom,
+  };
+};

package/src/components/line-chart/datalabels-alignment/get-datalabels-position.js

@@ -0,0 +1,25 @@
+import { getCondition } from './get-alignment-condition';
+import { getAlignmentData } from './get-alignment-data';
+import { AlignOptions } from '../../../helpers/enums';
+
+/** returning position depends on condition
+ *
+ * @return {string} - position
+ */
+export const getPosition = () => {
+  return (context) => {
+    const { x, y, left, right, bottom } = getAlignmentData(context);
+    const {
+      overLeftSide = false,
+      overRightSide = false,
+      overBottomSide = false,
+    } = getCondition(x, y, left, right, bottom);
+
+    return (
+      (overLeftSide && AlignOptions.Right) ||
+      (overRightSide && AlignOptions.Left) ||
+      (overBottomSide && AlignOptions.End) ||
+      AlignOptions.Start
+    );
+  };
+};

package/src/components/line-chart/get-axes-ranges-from-chart.js

@@ -0,0 +1,10 @@
+export const getAxesRangesFromChart = (chartRef) => {
+  const { scales = {} } = chartRef.current || {};
+  return Object.entries(scales).map(([key, { min, max }]) => {
+    return {
+      id: key,
+      min,
+      max,
+    };
+  });
+};

package/src/components/line-chart/get-line-chart-data-labels.js

@@ -0,0 +1,21 @@
+import { AUTO } from '../../helpers/chart-consts';
+import { getPosition } from './datalabels-alignment/get-datalabels-position';
+
+/**
+ * adjusts the position of the label depends on chart area
+ *
+ * @param {import('./line-chart.interface').ILineChartOptions} options - line chart options object
+ * @return {object} - returning position, if label exist in datasets item
+ */
+const getLineChartDataLabels = (options) => {
+  return options.graph.showDataLabels
+    ? {
+        display: AUTO,
+        align: getPosition(),
+        formatter: (value, context) =>
+          context.dataset.data[context.dataIndex].label || '',
+      }
+    : { display: false };
+};
+
+export default getLineChartDataLabels;