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

package/src/helpers/chart-interface.ts

@@ -0,0 +1,76 @@
+import { Plugin } from "chart.js";
+
+export interface IChartAnnotationsData {
+    adjustScaleRange: boolean;
+    annotationAxis: 'x' | 'y';
+    color: string;
+    endValue: number;
+    label: string;
+    type: string;
+    value: number;
+    xMin: number,
+    xMax: number,
+    yMin: number,
+    yMax: number,
+};
+
+export interface ILabelAnnotation {
+    content: string[];
+    fontSize: number;
+    xAdjust: number;
+    yAdjust: number;
+}
+
+export interface IChartAnnotations {
+    showAnnotations: boolean;
+    controlAnnotation: boolean;
+    annotationsData: IChartAnnotationsData[];
+    labelAnnotation: ILabelAnnotation
+}
+
+export interface IChartStyling {
+    width: number | string;
+    height: number | string;
+    maintainAspectRatio: boolean;
+    squareAspectRatio?: boolean;
+    staticChartHeight: boolean;
+    performanceMode: boolean;
+}
+
+export interface ICustomLegend {
+    customLegendPlugin: Plugin;
+    customLegendContainerID: string,
+}
+
+export interface IChartLegend {
+    display: boolean;
+    position: 'top' | 'bottom' | 'right';
+    align: 'start' | 'center' | 'end';
+    customLegend?: ICustomLegend;
+}
+
+export interface IChartInteractions {
+    onLegendClick: () => any;
+    onPointHover: () => any;
+    onPointUnhover: () => any;
+}
+
+export interface IInitialState {
+    zoomEnabled?: boolean;
+    panEnabled?: boolean;
+    pointsEnabled?: boolean;
+    lineEnabled?: boolean;
+    legendEnabled?: boolean;
+    axes?: {id: string, label: string | any, min?: {}, max?: {}}[];
+    showAnnotationLineIndex: [];
+}
+
+export interface IChartPlugins {
+    legend: {
+        position: 'top' | 'right' | 'bottom' | 'left';
+    }
+    title: {
+        display: boolean;
+        text: string;
+    }
+}

package/src/helpers/chart-utils.js

@@ -0,0 +1,183 @@
+import { defaults } from 'chart.js';
+import cx from 'classnames';
+import { chartMinorGridlinesPlugin } from '../components/line-chart/line-chart.minor-gridlines-plugin';
+import {
+  CUSTOM_LEGEND_PLUGIN_NAME,
+  BORDER_COLOR,
+  DEFAULT_CHART_NAME,
+  DEFAULT_COLOR,
+  DEFAULT_FONT_FAMILY,
+  DEFAULT_FONT_SIZE,
+  LEGEND_LABEL_BOX_SIZE,
+  WHITE_COLOR_AS_DECIMAL,
+} from './chart-consts';
+import { AxisType, ChartDirection, Position } from './enums';
+import { chartAreaBorderPlugin } from './chart-border-plugin';
+
+/**
+ * @param {import('../components/bar-chart/bar-chart.interface').IBarChartGraph |
+ * import('../components/line-chart/line-chart.interface').ILineChartGraph } graph - graph data from chart options
+ * @param {import('../helpers/chart-interface').IChartLegend} legend
+ * @param {import('./chart-interface').IInitialState} state - chart state object controlled by useReducer or similar
+ * @return {[]}
+ */
+export const getPlugins = (graph, legend, state = null) => {
+  let plugins = [];
+  if (graph.showMinorGridlines) {
+    plugins.push(chartMinorGridlinesPlugin);
+  }
+  const customLegend = legend?.customLegend;
+  if (
+    customLegend?.customLegendPlugin &&
+    customLegend?.customLegendContainerID
+  ) {
+    plugins.push({
+      id: CUSTOM_LEGEND_PLUGIN_NAME,
+      ...legend.customLegend.customLegendPlugin,
+    });
+  }
+  plugins.push(chartAreaBorderPlugin);
+  return plugins;
+};
+
+/**
+ * @param {string[]} colors - color schema
+ * @return {string} - random color
+ */
+export const generateRandomColor = (colors) => {
+  const color = `#${Math.floor(Math.random() * WHITE_COLOR_AS_DECIMAL).toString(
+    16,
+  )}`;
+  if (colors.includes(color)) {
+    return generateRandomColor(colors);
+  } else {
+    colors.push(color);
+    return color;
+  }
+};
+
+/**
+ * @param {import('./chart-interface').IChartAnnotationsData[]} annotationsData
+ * @return {number[]|*[]}
+ */
+export const setAnnotations = (annotationsData) => {
+  return annotationsData?.length ? annotationsData.map((v, i) => i) : [];
+};
+
+/**
+ * @param {import('../components/bar-chart/bar-chart.interface').IBarChartOptions |
+ * import('../components/line-chart/line-chart.interface').ILineChartOptions} options - chart options object
+ * @return {{color: (string|undefined), display: boolean, text}|{}}
+ */
+export const getTitle = (options) => {
+  return options.title !== ''
+    ? {
+        display: true,
+        text: options.title,
+      }
+    : {};
+};
+
+/**
+ * @function isVertical
+ * @param {'vertical'|'horizontal'|string} direction
+ * @return {boolean} returns true if chart direction is vertical
+ */
+export const isVertical = (direction) => {
+  return direction === ChartDirection.Vertical;
+};
+
+/**
+ * @param {'x'|'y'} axisType
+ * @param {number} i - index
+ * @return {'top'|'bottom'|'left'|'right'|*}
+ */
+export const getAxisPosition = (axisType, i) => {
+  const [positionA, positionB] =
+    axisType === AxisType.Y
+      ? [Position.Left, Position.Right]
+      : [Position.Top, Position.Bottom];
+  return i % 2 === 0 ? positionA : positionB;
+};
+
+/**
+ * @param {import('../helpers/chart-interface').IChartStyling} chartStyling
+ * @param {Object} styles - styles imported form .less file
+ * @return {string} - class name
+ */
+export const getClassName = (chartStyling, styles) => {
+  const { width, height, staticChartHeight, squareAspectRatio } = chartStyling;
+  const squareAspectRatioStyle = squareAspectRatio
+    ? styles.squareAspectRatio
+    : '';
+  let heightStyles = '';
+  if (width || height) {
+    heightStyles = '';
+  } else {
+    heightStyles = staticChartHeight
+      ? styles?.fixedHeight
+      : styles?.stretchHeight;
+  }
+  return cx(styles.chart, heightStyles, squareAspectRatioStyle);
+};
+
+/**
+ *
+ * @param {import('../components/bar-chart/bar-chart.interface').IBarChartOptions |
+ * import('../components/line-chart/line-chart.interface').ILineChartOptions} options - chart options object
+ * @param {function} clickHandler - on click callback
+ * @param {import('./chart-interface').IInitialState} state - chart state object controlled by useReducer or similar
+ * @returns {*}
+ */
+export const getLegend = (options, clickHandler, state = null) => {
+  const { legend, chartStyling } = options;
+  return {
+    position: legend.position || Position.Top,
+    display: !legend?.customLegend?.customLegendPlugin
+      ? state
+        ? state.legendEnabled
+        : legend.display
+      : false,
+    align: legend.align,
+    labels: {
+      boxHeight: LEGEND_LABEL_BOX_SIZE,
+      boxWidth: LEGEND_LABEL_BOX_SIZE,
+      usePointStyle: true,
+      filter: (item, data) => !data.datasets[item.datasetIndex].hideLegend,
+    },
+    onClick: clickHandler,
+  };
+};
+
+export const afterLabelCallback = (tooltipItem) => {
+  const { error } = tooltipItem.dataset.data[tooltipItem?.dataIndex];
+  return error ? `Error: ${Math.round(error * 10000) / 10000}` : '';
+};
+
+export const getTooltipLabel = (tooltipItem, showLabelsInTooltips) => {
+  const datasetDataLabel =
+    tooltipItem.dataset.data[tooltipItem.dataIndex]?.label;
+  const dataLabel = Array.isArray(datasetDataLabel)
+    ? datasetDataLabel.join(' , ')
+    : datasetDataLabel;
+  return showLabelsInTooltips && dataLabel?.length ? ` (${dataLabel})` : '';
+};
+
+//TODO: consider returning chart name instead of axis names
+export const getChartFileName = (axes) => {
+  if (!axes) {
+    return DEFAULT_CHART_NAME;
+  }
+  const axesLabels = axes.reduce((acc, cur, index) => {
+    const labelWithNoSpace = cur.label?.replace(/\s/g, '_') || index;
+    return [...acc, labelWithNoSpace];
+  }, []);
+  return axesLabels.join('_');
+};
+
+export const setDefaultTheme = () => {
+  defaults.font.size = DEFAULT_FONT_SIZE;
+  defaults.font.family = DEFAULT_FONT_FAMILY;
+  defaults.color = DEFAULT_COLOR;
+  defaults.borderColor = BORDER_COLOR;
+};

package/src/helpers/container.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import '../style/reset/reset.less';
+import '../style/global.less';
+
+const outerContainerStyle = {
+  margin: '50px',
+};
+
+export const Container = ({
+  style,
+  children,
+  margin,
+  deprecatedMessage,
+  warningMessage,
+}) => {
+  return (
+    <div style={margin ? outerContainerStyle : {}}>
+      {deprecatedMessage ? (
+        <div
+          style={{
+            border: '1px solid red',
+            color: 'red',
+            padding: '10px',
+            marginBottom: '20px',
+          }}
+        >
+          {deprecatedMessage}
+        </div>
+      ) : null}
+      {warningMessage ? (
+        <div
+          style={{
+            border: '1px solid orange',
+            color: 'orange',
+            padding: '10px',
+            marginBottom: '20px',
+          }}
+        >
+          {warningMessage}
+        </div>
+      ) : null}
+      <div style={style}>{children}</div>
+    </div>
+  );
+};
+
+Container.defaultProps = {
+  style: {},
+  margin: true,
+  deprecatedMessage: null,
+};
+
+Container.propTypes = {
+  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  children: PropTypes.node.isRequired,
+  margin: PropTypes.bool,
+  deprecatedMessage: PropTypes.string,
+};

package/src/helpers/disabled-context.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const DisabledContext = React.createContext(false);
+
+DisabledContext.Provider.propTypes = {
+  value: PropTypes.bool,
+};

package/src/helpers/enums.js

@@ -0,0 +1,87 @@
+/**
+ * @enum {string}
+ */
+export const AxisType = Object.freeze({
+  X: 'x',
+  Y: 'y',
+});
+
+/**
+ * @enum {string}
+ */
+export const Position = Object.freeze({
+  Bottom: 'bottom',
+  Top: 'top',
+  Left: 'left',
+  Right: 'right',
+});
+
+/**
+ * @enum {string}
+ */
+export const ChartType = Object.freeze({
+  Line: 'line',
+  Bar: 'bar',
+});
+
+/**
+ * @enum {string}
+ */
+export const CursorStyle = Object.freeze({
+  Pointer: 'pointer',
+  Initial: 'initial',
+});
+
+/**
+ * @enum {string}
+ */
+export const ScaleType = Object.freeze({
+  Category: 'category', //TODO: verify
+  Linear: 'linear',
+  Logarithmic: 'logarithmic',
+});
+
+/**
+ * @enum {string}
+ */
+export const ChartDirection = Object.freeze({
+  Vertical: 'vertical',
+});
+
+/**
+ * @enum {string}
+ */
+export const TooltipLabel = Object.freeze({
+  Y: 'yLabel',
+  X: 'xLabel',
+});
+
+export const AlignOptions = Object.freeze({
+  End: 'end',
+  Start: 'start',
+  Center: 'center',
+  Right: 'right',
+  Left: 'left',
+});
+
+export const PointType = Object.freeze({
+  Casing: 'casing',
+});
+
+export const PointStyle = Object.freeze({
+  Circle: 'circle',
+});
+
+export const ChartHoverMode = Object.freeze({
+  Nearest: 'nearest',
+});
+
+export const PanZoomMode = Object.freeze({
+  X: 'x',
+  Y: 'y',
+  XY: 'xy',
+});
+
+export const Key = Object.freeze({
+  Shift: 'Shift',
+});

package/src/helpers/get-chart-annotation.js

@@ -0,0 +1,143 @@
+import { AxisType, ChartType, CursorStyle, Position } from './enums';
+import { ANNOTATION_DASH, BORDER_WIDTH, COLORS } from './chart-consts';
+
+const annotationEnter = ({ element }, { chart }) => {
+  if (element.options.scaleID?.includes(AxisType.X)) {
+    element.options.label.xAdjust = chart.chartArea.left;
+  }
+  element.options.borderWidth = BORDER_WIDTH.HOVERED;
+  if (element.options.label) element.options.label.enabled = true;
+  chart.draw();
+  chart.canvas.style.cursor = CursorStyle.Pointer;
+};
+
+const annotationLeave = ({ element }, { chart }) => {
+  element.options.borderWidth = BORDER_WIDTH.INITIAL;
+  if (element.options.label) element.options.label.enabled = false;
+  chart.draw();
+  chart.canvas.style.cursor = CursorStyle.Initial;
+};
+
+/**
+ * @param {import('../components/bar-chart/bar-chart.interface').IBarChartOptions |
+ * import('../components/line-chart/line-chart.interface').ILineChartOptions} options - chart options object
+ * @param {import('./chart-interface').IInitialState} state - chart state object controlled by useReducer or similar
+ */
+const generateAnnotations = (options, state) => {
+  const { annotationsData } = options.annotations;
+
+  const annotations = annotationsData?.reduce((acc, curr, i) => {
+    if (!state?.showAnnotationLineIndex?.includes(i)) {
+      return { ...acc };
+    }
+
+    const getScaleId = () => {
+      const axisType = curr.annotationAxis;
+      return options.axes[axisType]?.length > 1 ? `${axisType}1` : axisType;
+    };
+
+    const color = curr?.color || COLORS[i];
+    const type = curr?.type || 'line';
+    const adjustScaleRange = curr?.adjustScaleRange;
+    const borderColor = type === 'line' ? color : 'transparent';
+    const borderWidth = type === 'line' ? BORDER_WIDTH.INITIAL : 0;
+    const borderDash = ANNOTATION_DASH;
+
+    const label =
+      type === 'line'
+        ? {
+            backgroundColor: color,
+            content: curr?.label,
+            enabled: false,
+            position: Position.Top,
+          }
+        : {
+            content: curr?.label,
+            enabled: true,
+            font: { weight: 'normal' },
+          };
+
+    const enter = (context, event) => {
+      if (type !== 'line') return;
+      annotationEnter(context, event);
+    };
+
+    const leave = (context, event) => {
+      if (type !== 'line') return;
+      annotationLeave(context, event);
+    };
+
+    const annotation = {
+      ...curr,
+      id: `${curr?.label}-${curr?.value}-${i}`,
+      scaleID: getScaleId(),
+      label,
+      backgroundColor: color,
+      borderColor,
+      borderWidth,
+      borderDash,
+      type,
+      adjustScaleRange,
+      enter,
+      leave,
+    };
+    return { ...acc, [`annotation${i + 1}`]: annotation };
+  }, {});
+  return annotations;
+};
+
+/**
+ * @param {import('../components/bar-chart/bar-chart.interface').IBarChartOptions |
+ * import('../components/line-chart/line-chart.interface').ILineChartOptions} options - chart options object
+ * @return {{label1: {}}}
+ */
+const getLabelAnnotation = (options) => {
+  const { annotations = {} } = options;
+  const { labelAnnotation = {} } = annotations;
+  const isDarkModeOn = options.chartStyling.darkMode || false;
+  const {
+    content = [],
+    xAdjust = -200,
+    yAdjust = 120,
+    fontSize = 12,
+  } = labelAnnotation;
+
+  return {
+    label1: {
+      type: 'label',
+      xAdjust,
+      yAdjust,
+      backgroundColor: 'rgba(0, 0, 0, 0)',
+      color: isDarkModeOn && 'rgba(255, 255, 255, 1)',
+      content,
+      font: {
+        size: fontSize,
+      },
+    },
+  };
+};
+
+/**
+ * @param {import('../components/bar-chart/bar-chart.interface').IBarChartOptions |
+ * import('../components/line-chart/line-chart.interface').ILineChartOptions} options - chart options object
+ * @param {import('./chart-interface').IInitialState} state - chart state object controlled by useReducer or similar
+ * @return {{annotations: []}}
+ */
+const getAnnotation = (options, state) => {
+  const { annotations } = options;
+  const isAnnotationShown = annotations?.showAnnotations;
+  const isAnnotationDataProvided = annotations?.annotationsData?.length;
+
+  const formAnnotation =
+    isAnnotationShown && isAnnotationDataProvided
+      ? {
+          ...getLabelAnnotation(options),
+          ...generateAnnotations(options, state),
+        }
+      : null;
+
+  return {
+    annotations: formAnnotation,
+  };
+};
+export default getAnnotation;

package/src/helpers/get-custom-legend-plugin-example.js

@@ -0,0 +1,80 @@
+const getOrCreateLegendList = (chart, id) => {
+  const legendContainer = document.getElementById(id);
+  let listContainer = legendContainer.querySelector('ul');
+
+  if (!listContainer) {
+    listContainer = document.createElement('ul');
+    listContainer.style.display = 'flex';
+    listContainer.style.flexDirection = 'row';
+    listContainer.style.margin = 0;
+    listContainer.style.padding = 0;
+
+    legendContainer.appendChild(listContainer);
+  }
+
+  return listContainer;
+};
+
+/**
+ * Gets an example custom legend plugin for use in storybook.
+ * @param {string} customLegendContainerID - the id of the div container to put the generated legend in
+ */
+export const getCustomLegendPlugin = (customLegendContainerID) => ({
+  afterUpdate(chart, _args, _options) {
+    const ul = getOrCreateLegendList(chart, customLegendContainerID);
+
+    // Remove old legend items
+    while (ul.firstChild) {
+      ul.firstChild.remove();
+    }
+
+    // Reuse the built-in legendItems generator
+    const items = chart.options.plugins.legend.labels.generateLabels(chart);
+
+    items.forEach((item) => {
+      const li = document.createElement('li');
+      li.style.alignItems = 'center';
+      li.style.cursor = 'pointer';
+      li.style.display = 'flex';
+      li.style.flexDirection = 'row';
+      li.style.marginLeft = '10px';
+
+      li.onclick = () => {
+        const { type } = chart.config;
+        if (type === 'pie' || type === 'doughnut') {
+          // Pie and doughnut charts only have a single dataset and visibility is per item
+          chart.toggleDataVisibility(item.index);
+        } else {
+          chart.setDatasetVisibility(
+            item.datasetIndex,
+            !chart.isDatasetVisible(item.datasetIndex),
+          );
+        }
+        chart.update();
+      };
+
+      // Color box
+      const boxSpan = document.createElement('span');
+      boxSpan.style.background = item.fillStyle;
+      boxSpan.style.borderColor = item.strokeStyle;
+      boxSpan.style.borderWidth = item.lineWidth + 'px';
+      boxSpan.style.display = 'inline-block';
+      boxSpan.style.height = '20px';
+      boxSpan.style.marginRight = '10px';
+      boxSpan.style.width = '20px';
+
+      // Text
+      const textContainer = document.createElement('p');
+      textContainer.style.margin = 0;
+      textContainer.style.padding = 0;
+      textContainer.style.textDecoration = item.hidden ? 'line-through' : '';
+
+      const text = document.createTextNode(item.text);
+      textContainer.appendChild(text);
+
+      li.appendChild(boxSpan);
+      li.appendChild(textContainer);
+      ul.appendChild(li);
+    });
+  },
+});

package/src/helpers/numbers/numbers.js

@@ -0,0 +1,44 @@
+import { DECIMAL_POINT_TOLERANCE } from '../chart-consts';
+
+/**
+ * Rounds a number to N decimal places
+ *
+ * @param {number} v value
+ * @param {number} n decimal count
+ * @returns {number}
+ */
+export const roundN = (v, n) => {
+  const factor = 10 ** n;
+  return Math.round(v * factor) / factor;
+};
+
+/**
+ * Rounds a number to DECIMAL_POINT_TOLERANCE decimal places
+ *
+ * @param {number} v value
+ * @returns {number}
+ */
+export const round = (v) => roundN(v, DECIMAL_POINT_TOLERANCE);
+
+/**
+ * Determines whether two numbers are close in value with a tolerance
+ * (mitigates excess JavaScript floating point precision quirks)
+ *
+ * Inspired by WellDesign implementations:
+ * - isCloseTo in rounding.js
+ * - isEqual in TDHYDutils.js (recommended by Truls, but quirks comparing values close to 0 need testing)
+ * - TODO: replace this with a universal Oliasoft implementation when ready
+ *
+ * @param {number} a
+ * @param {number} b
+ * @returns {boolean}
+ */
+export const isEqualWithTolerance = (a, b) => {
+  if (typeof a == 'number' && typeof b === typeof a) {
+    const tolerance = 10 ** -DECIMAL_POINT_TOLERANCE;
+    const difference = Math.abs(b - a);
+    const roundedDifference = roundN(difference, DECIMAL_POINT_TOLERANCE);
+    return roundedDifference <= tolerance;
+  }
+  return false;
+};