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

package/src/helpers/chart-interface.ts

@@ -1,94 +0,0 @@
-import { Plugin } from "chart.js";
-
-export interface IChartDraggableData {
-    enableDragData: boolean;
-    showTooltip: boolean;
-    roundPoints: boolean;
-    dragX: boolean;
-    dragY: boolean;
-    onDragStart: () => any;
-    onDrag: () => any;
-    onDragEnd: () => any;
-};
-
-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 {
-    showLabel: boolean;
-    text: string | string[];
-    position?: string
-    fontSize?: number;
-    xOffset?: number
-    yOffset?: number
-    maxWidth?: number
-    lineHeight?: 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;
-    usePointStyle: boolean;
-}
-
-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: [];
-    enableDragData?: boolean;
-}
-
-export interface IChartPlugins {
-    legend: {
-        position: 'top' | 'right' | 'bottom' | 'left';
-    }
-    title: {
-        display: boolean;
-        text: string;
-    }
-}

package/src/helpers/chart-utils.js

@@ -1,182 +0,0 @@
-import { round } from '@oliasoft-open-source/units';
-import { defaults } from 'chart.js';
-import cx from 'classnames';
-import { chartMinorGridlinesPlugin } from '../components/line-chart/plugins/line-chart.minor-gridlines-plugin';
-import {
-  BORDER_COLOR,
-  CUSTOM_LEGEND_PLUGIN_NAME,
-  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
- * @return {[]}
- */
-export const getPlugins = (graph, legend) => {
-  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 } = 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.usePointStyle ? LEGEND_LABEL_BOX_SIZE : undefined,
-      usePointStyle: legend.usePointStyle,
-    },
-    onClick: clickHandler,
-  };
-};
-
-export const afterLabelCallback = (tooltipItem) => {
-  const { error } = tooltipItem.dataset.data[tooltipItem?.dataIndex];
-  return error ? `Error: ${round(error, 4)}` : '';
-};
-
-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

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

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

@@ -1,96 +0,0 @@
-/**
- * @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',
-});
-
-export const Events = Object.freeze([
-  'mousemove',
-  'mouseout',
-  'click',
-  'touchstart',
-  'touchmove',
-  'dblclick',
-]);

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

@@ -1,106 +0,0 @@
-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
- * @param {import('./chart-interface').IInitialState} state - chart state object controlled by useReducer or similar
- * @return {{annotations: []}}
- */
-const getAnnotation = (options, state) => {
-  const { showAnnotations, annotationsData } = options.annotations || {};
-  const shouldGenerateAnnotations = showAnnotations && annotationsData?.length;
-
-  const annotations = shouldGenerateAnnotations
-    ? generateAnnotations(options, state)
-    : null;
-
-  return { annotations };
-};
-
-export default getAnnotation;

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

@@ -1,80 +0,0 @@
-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/get-draggableData.js

@@ -1,32 +0,0 @@
-/**
- * @param {import('./line-chart.interface').ILineChartOptions} options - line chart options object
- */
-const getDraggableData = (options) => {
-  const { dragData = {} } = options;
-  const {
-    enableDragData = false,
-    showTooltip = true,
-    roundPoints = true,
-    dragX = true,
-    dragY = true,
-    onDragStart = () => {},
-    onDrag = () => {},
-    onDragEnd = () => {},
-  } = dragData;
-
-  return enableDragData
-    ? {
-        dragData: {
-          dragX,
-          dragY,
-          round: roundPoints,
-          showTooltip,
-          onDragStart,
-          onDrag,
-          onDragEnd,
-        },
-      }
-    : {};
-};
-
-export default getDraggableData;