@oliasoft-open-source/charts-library 2.0.0

package/src/components/bar-chart/charts.stories.jsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import { BarChart } from './bar-chart';
+import { Container } from '../../helpers/container';
+
+const style = {
+  height: '1000px',
+  width: '1000px',
+};
+
+const chart = {
+  data: {
+    labels: ['monday', 'tuesday', 'wednesday', 'friday'],
+    datasets: [
+      {
+        label: 'some data',
+        borderColor: ['red', 'purple', 'black', 'rgba(255,255,64,0.3)'],
+        backgroundColor: [
+          'white',
+          'transparent',
+          'red',
+          'rgba(255,255,64,0.9)',
+        ],
+        borderWidth: 4,
+        borderRadius: 50,
+        borderSkipped: false,
+        data: [[20, 40], 30, [-10, 11], 42],
+        stack: 1,
+      },
+      {
+        label: 'some other data',
+        borderColor: ['purple', 'orange'],
+        backgroundColor: ['orange', 'purple'],
+        borderWidth: 10,
+        borderSkipped: false,
+        data: [1, 8, 22, 19],
+        stack: 1,
+      },
+      {
+        label: 'some otter data',
+        yAxisID: 'y2',
+        data: [10, 20, 22, 19],
+        stack: 2,
+      },
+    ],
+  },
+  options: {
+    title: 'Look at those bars!',
+    axes: {
+      x: [
+        {
+          label: 'x data',
+          gridLines: {
+            drawOnChartArea: false,
+          },
+          unit: 'day',
+        },
+      ],
+      y: [
+        {
+          label: 'y data',
+          position: 'right',
+          color: '#a30125',
+          unit: 'm',
+        },
+        {
+          position: 'left',
+          color: '#011fa3',
+          gridLines: {
+            drawOnChartArea: false,
+          },
+          unit: 'otters',
+          stepSize: 1,
+        },
+      ],
+    },
+    additionalAxesOptions: {
+      beginAtZero: true,
+      stacked: true,
+      reverse: true,
+      suggestedMin: -15,
+    },
+    chartStyling: {
+      width: 1200,
+      height: 800,
+      performanceMode: false,
+    },
+    graph: {
+      showDataLabels: true,
+      showMinorGridlines: true,
+    },
+    annotations: {
+      showAnnotations: true,
+      controlAnnotation: true,
+      annotationsData: [
+        {
+          annotationAxis: 'y',
+          label: '0',
+          value: 0,
+          color: 'rgba(128, 32, 196, 0.5)',
+        },
+      ],
+    },
+    legend: {
+      position: 'top',
+      align: 'start',
+    },
+  },
+};
+
+export const BarChartKitchenSink = () => (
+  <Container style={style}>
+    <BarChart chart={chart} />
+  </Container>
+);
+
+export default {
+  title: 'Bar Chart Kitchen Sink',
+  component: BarChartKitchenSink,
+};

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

@@ -0,0 +1,45 @@
+import { AlignOptions } from '../../helpers/enums';
+import { AUTO, DEFAULT_DARK_MODE_COLOR } from '../../helpers/chart-consts';
+
+/**
+ * @param {import('./bar-chart.interface').IBarChartOptions} options - bar chart options object
+ */
+const getBarChartDataLabels = (options) => {
+  const { beginAtZero, reverse } = options.additionalAxesOptions;
+
+  const formatterCallback = (value, context) => {
+    const { dataset, dataIndex } = context;
+    const dataElement = dataset.data[dataIndex];
+
+    let dataLabel = '';
+    if (typeof dataElement === 'number') {
+      dataLabel = Number.isInteger(dataElement)
+        ? dataElement
+        : dataElement.toFixed(2);
+    }
+    if (Array.isArray(dataElement)) {
+      dataLabel = dataElement.reduce((acc, curr, i) => {
+        return i === 0 ? `${acc} ${curr}` : `${acc}, ${curr}`;
+      }, '');
+    }
+
+    return dataLabel;
+  };
+
+  const beginAtNotZeroAlign = reverse ? AlignOptions.End : AlignOptions.Start;
+  const beginAtNotZeroAnchor = reverse ? AlignOptions.Start : AlignOptions.End;
+
+  return options.graph.showDataLabels
+    ? {
+        display: AUTO,
+        align: beginAtZero ? AlignOptions.Center : beginAtNotZeroAlign,
+        anchor: beginAtZero ? AlignOptions.Center : beginAtNotZeroAnchor,
+        formatter: formatterCallback,
+        color: options.chartStyling.darkMode
+          ? DEFAULT_DARK_MODE_COLOR
+          : undefined,
+      }
+    : { display: false };
+};
+
+export default getBarChartDataLabels;

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

@@ -0,0 +1,147 @@
+import { AxisType, ScaleType } from '../../helpers/enums';
+import {
+  getAxisPosition,
+  isVertical,
+  generateRandomColor,
+} from '../../helpers/chart-utils';
+import {
+  COLORS,
+  DARK_MODE_COLORS,
+  DEFAULT_COLOR,
+  DEFAULT_DARK_MODE_BORDER_COLOR,
+  DEFAULT_DARK_MODE_COLOR,
+  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 {
+        color:
+          axisData.color ||
+          (chart.options.chartStyling.darkMode
+            ? DEFAULT_DARK_MODE_COLOR
+            : DEFAULT_COLOR),
+        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,
+      color: chart.options.chartStyling.darkMode
+        ? DEFAULT_DARK_MODE_COLOR
+        : undefined,
+    },
+    ticks: getTicks(),
+    grid: {
+      color: chart.options.chartStyling.darkMode
+        ? DEFAULT_DARK_MODE_BORDER_COLOR
+        : undefined,
+      borderColor: chart.options.chartStyling.darkMode
+        ? DEFAULT_DARK_MODE_BORDER_COLOR
+        : undefined,
+      ...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 ||
+      (chart.options.chartStyling.darkMode ? DARK_MODE_COLORS[i] : 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

@@ -0,0 +1,100 @@
+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 labelNumber = Number(formattedValue);
+
+      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/line-chart/Controls/Controls.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { FaCog } from 'react-icons/fa';
+import { Popover, Button } from '@oliasoft-open-source/react-ui-library';
+import { Layer } from './Layer';
+
+export const Controls = ({
+  zoomEnabled,
+  onToggleZoom,
+  panEnabled,
+  onTogglePan,
+  legendEnabled,
+  onToggleLegend,
+  onResetAxes,
+  pointsEnabled,
+  onTogglePoints,
+  lineEnabled,
+  onToggleLine,
+  axes,
+  onSetAxisValue,
+  onDownload,
+  closeOnOutsideClick,
+}) => {
+  return (
+    <Popover
+      placement="bottom-start"
+      closeOnOutsideClick={closeOnOutsideClick}
+      showCloseButton
+      overflowContainer
+      content={
+        <Layer
+          zoomEnabled={zoomEnabled}
+          onToggleZoom={onToggleZoom}
+          panEnabled={panEnabled}
+          onTogglePan={onTogglePan}
+          onResetAxes={onResetAxes}
+          legendEnabled={legendEnabled}
+          onToggleLegend={onToggleLegend}
+          pointsEnabled={pointsEnabled}
+          onTogglePoints={onTogglePoints}
+          lineEnabled={lineEnabled}
+          onToggleLine={onToggleLine}
+          axes={axes}
+          onSetAxisValue={onSetAxisValue}
+          onDownload={onDownload}
+        />
+      }
+    >
+      <Button
+        name="example"
+        colored="muted"
+        onClick={() => {}}
+        basic
+        round
+        small
+        icon={<FaCog />}
+      />
+    </Popover>
+  );
+};

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

@@ -0,0 +1,21 @@
+.layer {
+  width: 200px;
+}
+.help {
+  font-size: 0.8rem;
+  color: #666;
+
+  p {
+    margin-bottom: 5px;
+  }
+}
+
+.reset {
+  display: flex;
+  align-items: center;
+  span {
+    margin-left: 5px;
+    font-size: 10px;
+    color: #666;
+  }
+}

package/src/components/line-chart/Controls/Layer.jsx

@@ -0,0 +1,169 @@
+import React from 'react';
+//import { useTranslation } from 'react-i18next';
+import { HiOutlineDocumentDownload } from 'react-icons/hi';
+import {
+  Button,
+  Toggle,
+  Spacer,
+  Field,
+  Input,
+  InputGroup,
+  InputGroupAddon,
+  Text,
+} from '@oliasoft-open-source/react-ui-library';
+//import translations from '~common/Internationalisation/translation-map.json';
+//import { InputWarningType } from '~common/const/warning-messages';
+import styles from './Controls.module.less';
+
+export const Layer = ({
+  zoomEnabled,
+  onToggleZoom,
+  panEnabled,
+  onTogglePan,
+  onResetAxes,
+  legendEnabled,
+  onToggleLegend,
+  pointsEnabled,
+  onTogglePoints,
+  lineEnabled,
+  onToggleLine,
+  axes,
+  onSetAxisValue,
+  onDownload,
+}) => {
+  // TODO: implement usetranslation
+  //const { t } = useTranslation();
+  return (
+    <div className={styles.layer}>
+      <Toggle
+        small
+        name="enablePoints"
+        label="Enable Points" //{t(translations.showPoints)}  temporary static value before translation is implemented
+        checked={pointsEnabled}
+        onChange={onTogglePoints}
+      />
+      <Spacer height={8} />
+      <Toggle
+        small
+        name="enableLine"
+        label="Show line"
+        checked={lineEnabled}
+        onChange={onToggleLine}
+      />
+      <Spacer height={8} />
+      <Toggle
+        small
+        name="enableLegend"
+        label="Enable Legend" //{t(translations.showLegend)}  temporary static value before translation is implemented
+        checked={legendEnabled}
+        onChange={onToggleLegend}
+      />
+      <Spacer height={8} />
+      <Toggle
+        small
+        name="enableZoom"
+        label="Enable Zoom" //{t(translations.enableZoom)}  temporary static value before translation is implemented
+        checked={zoomEnabled}
+        onChange={onToggleZoom}
+      />
+      <Spacer height={8} />
+      <Toggle
+        small
+        name="enablePan"
+        label="Enable Pan" //{t(translations.enablePan)}  temporary static value before translation is implemented
+        checked={panEnabled}
+        onChange={onTogglePan}
+      />
+      <Spacer height={10} />
+      {(zoomEnabled || panEnabled) && (
+        <>
+          <div className={styles.help}>
+            {zoomEnabled && (
+              <p>
+                <strong>Zoom: </strong>
+                <span>click and drag</span>
+              </p>
+            )}
+            {panEnabled && (
+              <p>
+                <strong>Pan: </strong>
+                <span>click and drag</span>
+              </p>
+            )}
+            <p>
+              <strong>Change axis: </strong>
+              <span>hold shit key</span>
+            </p>
+          </div>
+          <Spacer height={10} />
+        </>
+      )}
+      {axes.map((axis, i) => (
+        <Field key={i} label={axis.label || ''}>
+          <InputGroup small>
+            <Input
+              name="min"
+              value={axis.min.inputValue}
+              error={
+                !axis.min.valid
+                  ? 'WARNING' //t(InputWarningType.MustBeNumericAndLessThanMax)
+                  : undefined
+              }
+              size={5}
+              width="100%"
+              onChange={(evt) =>
+                onSetAxisValue({
+                  name: evt.target.name,
+                  value: evt.target.value,
+                  id: axis.id,
+                })
+              }
+              disabled={zoomEnabled || panEnabled}
+            />
+            <InputGroupAddon>
+              To
+              {/*t(translations.to)*/}
+            </InputGroupAddon>
+            <Input
+              name="max"
+              value={axis.max.inputValue}
+              error={
+                !axis.max.valid
+                  ? 'Warning' //t(InputWarningType.MustBeNumericAndGreaterThanMin)
+                  : undefined
+              }
+              size={5}
+              width="100%"
+              onChange={(evt) =>
+                onSetAxisValue({
+                  name: evt.target.name,
+                  value: evt.target.value,
+                  id: axis.id,
+                })
+              }
+              disabled={zoomEnabled || panEnabled}
+            />
+          </InputGroup>
+        </Field>
+      ))}
+      <Field>
+        <Button
+          small
+          name="resetAxes"
+          label="Reset Axes"
+          onClick={onResetAxes}
+        />{' '}
+        <Text small muted>
+          or click on canvas
+        </Text>
+      </Field>
+      <Spacer height={8} />
+      <Button
+        label="Download PNG" //{t(translations.downloadPNG)}
+        small
+        onClick={onDownload}
+        icon={<HiOutlineDocumentDownload />}
+      />
+    </div>
+  );
+};