@oliasoft-open-source/charts-library 2.1.3 → 2.1.5

package/index.js

@@ -2,8 +2,12 @@
  Components
  */
 
+import ScatterChart from './src/components/scatter-chart/scatter-chart';
+
 export { LineChart } from './src/components/line-chart/line-chart';
 
 export { PieChart } from './src/components/pie-chart/pie-chart';
 
 export { BarChart } from './src/components/bar-chart/bar-chart';
+
+export { ScatterChart };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.1.3",
+  "version": "2.1.5",
   "description": "React Chart Library (based on Chart.js and react-chart-js-2)",
   "main": "index.js",
   "scripts": {

package/src/components/line-chart/line-chart-prop-types.js

@@ -159,7 +159,7 @@ export const getDefaultProps = (props) => {
           props.chart.options.tooltip.hideSimulationName || false,
       },
       graph: {
-        lineTension: props.chart.options.graph.lineTension || 0.1,
+        lineTension: props.chart.options.graph.lineTension || 0.01,
         spanGaps: props.chart.options.graph.spanGaps || false,
         showDataLabels: props.chart.options.graph.showDataLabels || false,
         showMinorGridlines:

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useReducer, useRef, useState } from 'react';
+import React, { useEffect, useReducer, useRef } from 'react';
 import {
   CategoryScale,
   Chart as ChartJS,
@@ -22,15 +22,15 @@ import styles from './line-chart.module.less';
 import { reducer } from './state/line-chart-reducer';
 import initialState from './state/initial-state';
 import {
+  SET_AXIS_VALUE,
+  SET_POINTS_ZOOM_DEFAULTS,
+  TOGGLE_ANNOTATION,
+  TOGGLE_LEGEND,
+  TOGGLE_LINE,
   TOGGLE_PAN,
-  TOGGLE_ZOOM,
   TOGGLE_POINTS,
-  TOGGLE_LINE,
-  TOGGLE_LEGEND,
+  TOGGLE_ZOOM,
   UNSET_AXES_VALUES,
-  SET_AXIS_VALUE,
-  TOGGLE_ANNOTATION,
-  SET_POINTS_ZOOM_DEFAULTS,
 } from './state/action-types';
 import { Controls } from './Controls/Controls';
 import { getDefaultProps, LineChartPropTypes } from './line-chart-prop-types';
@@ -38,23 +38,23 @@ import getLineChartScales from './get-line-chart-scales';
 import getLineChartToolTips from './get-line-chart-tooltips';
 import getLineChartDataLabels from './get-line-chart-data-labels';
 import {
+  BORDER_JOIN_STYLE,
+  DEFAULT_BACKGROUND_COLOR,
   DEFAULT_BORDER_WIDTH,
   DEFAULT_HOVER_RADIUS,
-  DEFAULT_POINT_RADIUS,
-  BORDER_JOIN_STYLE,
   DEFAULT_LINE_POINT_RADIUS,
-  DEFAULT_BACKGROUND_COLOR,
+  DEFAULT_POINT_RADIUS,
 } from './line-chart-consts';
 
 import getAnnotation from '../../helpers/get-chart-annotation';
 import {
   generateRandomColor,
-  getClassName,
-  getTitle,
   getAxisValue,
-  getPlugins,
-  getLegend,
   getChartFileName,
+  getClassName,
+  getLegend,
+  getPlugins,
+  getTitle,
 } from '../../helpers/chart-utils';
 import {
   ANIMATION_DURATION,
@@ -207,11 +207,12 @@ const LineChart = (props) => {
           line.data[2].x = axesMax > endPoint?.x ? axesMax : endPoint?.x;
         }
       }
-
-      // line does not render if first datapoints are null
-      if (line.data[0] === null) {
-        line.data.shift();
-      }
+      /*
+        Remove invalid falsy data points OW-9855
+        Points should be an object of {x, y} pairs
+        This is an extra guard to prevent crashes if parent apps pass bad inputs
+      */
+      line.data = line?.data?.filter(Boolean) || [];
 
       line.showLine = state.lineEnabled;
       const linePointRadius = line.pointRadius

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

@@ -67,6 +67,38 @@ const dataset2 = {
   ],
 };
 
+const datasetMissingValues = {
+  label: 'Dataset with missing (null) values',
+  data: [
+    {
+      x: 0,
+      y: 0,
+    },
+    {
+      x: 3,
+      y: 0,
+    },
+    null, //reproduce OW-9855
+    undefined, //reproduce OW-9855
+    {
+      x: 3,
+      y: 30,
+    },
+    {
+      x: null,
+      y: 60,
+    },
+    {
+      x: 12,
+      y: 120,
+    },
+    {
+      x: 15,
+      y: 240,
+    },
+  ],
+};
+
 const datasetLabelled2 = {
   ...dataset2,
   data: dataset2.data.map((item) => ({ ...item, label: ['Label'] })),
@@ -117,6 +149,16 @@ const TemplateWithCustomLegendContainer = (args) => {
 
 export const Default = Template.bind({});
 
+export const DataGaps = Template.bind({});
+DataGaps.args = {
+  chart: {
+    ...basicChart,
+    data: {
+      datasets: [datasetMissingValues],
+    },
+  },
+};
+
 export const MinorGridlines = Template.bind({});
 MinorGridlines.args = {
   chart: {