@oliasoft-open-source/charts-library 2.0.0

package/src/components/scatter-chart/scatter.stories.jsx

@@ -0,0 +1,196 @@
+import React from 'react';
+import { Container } from '../../helpers/container';
+import ScatterChart from './scatter-chart';
+
+const style = {
+  height: '1000px',
+  width: '1000px',
+  colorOrange: '#ED9860',
+  colorLightGray: '#C8C8C8',
+  colorDarkGray: '#595959',
+};
+
+const dataPoints = [
+  { x: 15.5, y: 0, label: '' },
+  { x: 75, y: 13, label: '' },
+  { x: 110, y: 85, label: '' },
+  { x: 212.5, y: 100, label: '' },
+];
+
+const dataPoints2 = [
+  { x: 0, y: 15, label: '' },
+  { x: 90, y: 15, label: '' },
+  { x: 130, y: 75, label: '' },
+  { x: 212.5, y: 115, label: '' },
+];
+
+const dataPoints3 = [
+  { x: 0, y: 0, label: '' },
+  { x: 120, y: 75, label: '' },
+  { x: 155, y: 50, label: '' },
+  { x: 250, y: 115, label: '' },
+];
+
+const datasetMultiLines = [
+  {
+    label: 'Line 1',
+    data: dataPoints,
+    borderColor: style.colorOrange,
+    backgroundColor: style.colorOrange,
+    showLine: true,
+  },
+  {
+    label: 'Line 2',
+    data: dataPoints2,
+    borderColor: style.colorLightGray,
+    backgroundColor: style.colorLightGray,
+    showLine: true,
+  },
+  {
+    label: 'Line 3',
+    data: dataPoints3,
+    borderColor: style.colorDarkGray,
+    backgroundColor: style.colorDarkGray,
+    showLine: true,
+  },
+];
+
+const chartDefault = {
+  data: {
+    datasets: [
+      {
+        label: 'Default chart',
+        data: dataPoints,
+        borderColor: style.colorOrange,
+        backgroundColor: style.colorOrange,
+      },
+    ],
+  },
+};
+
+const chartWithLine = {
+  data: {
+    datasets: [
+      {
+        label: 'Default chart',
+        data: dataPoints,
+        borderColor: style.colorOrange,
+        backgroundColor: style.colorOrange,
+        showLine: true,
+      },
+    ],
+  },
+};
+
+const multiLines = {
+  data: {
+    datasets: datasetMultiLines,
+  },
+};
+
+const chartReverse = {
+  data: {
+    datasets: datasetMultiLines,
+  },
+  options: {
+    scales: { y: { reverse: true } },
+  },
+};
+
+const chartLegendRight = {
+  data: {
+    datasets: datasetMultiLines,
+  },
+  options: {
+    plugins: {
+      legend: {
+        position: 'right',
+      },
+      title: {
+        display: true,
+        text: name || '',
+      },
+    },
+  },
+};
+
+const chartResponsive = {
+  data: {
+    datasets: datasetMultiLines,
+  },
+  options: {
+    responsive: true,
+    maintainAspectRatio: false,
+  },
+};
+export default {
+  title: 'Scatter Chart',
+  component: ScatterChart,
+};
+
+export const Default = () => (
+  <Container style={style}>
+    <ScatterChart chart={chartDefault} />
+  </Container>
+);
+
+export const Linear = () => (
+  <Container style={style}>
+    <ScatterChart chart={chartWithLine} />
+  </Container>
+);
+
+export const MultiLines = () => (
+  <Container style={style}>
+    <ScatterChart chart={multiLines} />
+  </Container>
+);
+
+export const Reverse = () => (
+  <Container style={style}>
+    <ScatterChart chart={chartReverse} />
+  </Container>
+);
+
+export const LegendRight = () => (
+  <Container style={style}>
+    <ScatterChart chart={chartLegendRight} />
+  </Container>
+);
+
+export const Responsive = () => (
+  <Container>
+    <div
+      style={{
+        width: '50%',
+        height: '50%',
+      }}
+    >
+      <ScatterChart
+        chart={{
+          data: multiLines.data,
+          options: {
+            responsive: true,
+            maintainAspectRatio: false,
+          },
+        }}
+      />
+    </div>
+
+    <div
+      style={{
+        width: '50%',
+        height: '50%',
+      }}
+    >
+      <ScatterChart
+        chart={{
+          data: multiLines.data,
+          options: {
+            responsive: true,
+          },
+        }}
+      />
+    </div>
+  </Container>
+);

package/src/helpers/chart-consts.js

@@ -0,0 +1,82 @@
+export const BORDER_WIDTH = {
+  INITIAL: 2,
+  HOVERED: 6,
+};
+
+export const ANNOTATION_DASH = [10, 2];
+export const DEFAULT_FONT_SIZE = 13;
+export const DEFAULT_FONT_FAMILY = '"Lato", sans-serif';
+export const DEFAULT_DARK_MODE_COLOR = 'rgba(255,255,255,.87)';
+export const DEFAULT_DARK_MODE_BORDER_COLOR = 'rgba(255,255,255,0.1)';
+export const DEFAULT_COLOR = 'rgba(0,0,0,.87)';
+export const LEGEND_LABEL_BOX_SIZE = 6;
+
+export const LOGARITHMIC_STEPS = [1, 10, 100, 1000, 10000];
+
+export const COLORS = [
+  '#3366cc',
+  '#dc3912',
+  '#ff9900',
+  '#109618',
+  '#990099',
+  '#0099c6',
+  '#dd4477',
+  '#66aa00',
+  '#b82e2e',
+  '#316395',
+  '#994499',
+  '#22aa99',
+  '#aaaa11',
+  '#6633cc',
+  '#e67300',
+  '#8b0707',
+  '#651067',
+  '#329262',
+  '#5574a6',
+  '#3b3eac',
+];
+
+export const DARK_MODE_COLORS = [
+  '#578fff',
+  '#ff5026',
+  '#ff9900',
+  '#24ff31',
+  '#ff00ff',
+  '#00c5ff',
+  '#f7407d',
+  '#99ff00',
+  '#ff4040',
+  '#51a7fc',
+  '#f26bf2',
+  '#36f8ff',
+  '#ffff19',
+  '#9c6bff',
+  '#ff8b17',
+  '#ff1212',
+  '#fa29ff',
+  '#54ffaa',
+  '#80b0ff',
+  '#595eff',
+];
+
+/**
+ * @type {string}
+ * @desc equivalent of 0.6 rgba alpha chanel
+ */
+export const ALPHA_CHANEL = '99';
+
+/**
+ * @type {number}
+ * @desc #FFFFFF as decimal number
+ */
+export const WHITE_COLOR_AS_DECIMAL = 16777215;
+
+export const AUTO = 'auto';
+
+export const ANIMATION_DURATION = {
+  NO: 0,
+  SLOW: 400,
+  FAST: 1000,
+};
+
+export const DEFAULT_CHART_NAME = 'new_chart';

package/src/helpers/chart-interface.ts

@@ -0,0 +1,54 @@
+export interface IChartAnnotationsData {
+    annotationAxis: 'x' | 'y';
+    label: string;
+    color: string;
+    value: number;
+    endValue: number
+};
+
+export interface IChartAnnotations {
+    showAnnotations: boolean;
+    controlAnnotation: boolean;
+    annotationsData: IChartAnnotationsData[];
+}
+
+export interface IChartStyling {
+    width: number | string;
+    height: number | string;
+    maintainAspectRatio: boolean;
+    staticChartHeight: boolean;
+    performanceMode: boolean;
+    darkMode: boolean;
+}
+
+export interface IChartLegend {
+    display: boolean;
+    position: 'top' | 'bottom' | 'right';
+    align: 'start' | 'center' | 'end';
+}
+
+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,178 @@
+import cx from 'classnames';
+import { chartMinorGridlinesPlugin } from '../components/line-chart/line-chart.minor-gridlines-plugin';
+import {
+  DEFAULT_CHART_NAME,
+  DEFAULT_DARK_MODE_COLOR,
+  LEGEND_LABEL_BOX_SIZE,
+  WHITE_COLOR_AS_DECIMAL,
+} from './chart-consts';
+import { AxisType, ChartDirection, Position } from './enums';
+
+/**
+ * @param {import('../components/bar-chart/bar-chart.interface').IBarChartGraph |
+ * import('../components/line-chart/line-chart.interface').ILineChartGraph } graph - graph data from chart options
+ * @return {[]}
+ */
+export const getPlugins = (graph) => {
+  let plugins = [];
+  if (graph.showMinorGridlines) {
+    plugins.push(chartMinorGridlinesPlugin);
+  }
+  return plugins;
+};
+
+export const getAxisValue = (value) => {
+  if (value !== undefined) {
+    if (value === '-') {
+      return {
+        inputValue: value,
+        displayValue: '',
+        value: '',
+        valid: false,
+      };
+    } else {
+      return {
+        inputValue: value.toString(),
+        displayValue: value,
+        value,
+        valid: true,
+      };
+    }
+  } else {
+    return {
+      valid: true /* default always valid, for unknowable reasons */,
+    };
+  }
+};
+
+/**
+ * @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,
+        color: options.chartStyling.darkMode
+          ? DEFAULT_DARK_MODE_COLOR
+          : undefined,
+      }
+    : {};
+};
+
+/**
+ * @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 } = chartStyling;
+  let heightStyles = '';
+  if (width || height) {
+    heightStyles = '';
+  } else {
+    heightStyles = staticChartHeight
+      ? styles?.fixedHeight
+      : styles?.stretchHeight;
+  }
+  return cx(styles.chart, heightStyles);
+};
+
+/**
+ *
+ * @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: state ? state.legendEnabled : legend.display,
+    align: legend.align,
+    labels: {
+      boxHeight: LEGEND_LABEL_BOX_SIZE,
+      boxWidth: LEGEND_LABEL_BOX_SIZE,
+      usePointStyle: true,
+      color: chartStyling.darkMode ? DEFAULT_DARK_MODE_COLOR : undefined,
+      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('_');
+};

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,84 @@
+/**
+ * @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',
+});
+
+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',
+});
+
+export const Key = Object.freeze({
+  Shift: 'Shift',
+});