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

package/package.json

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

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

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 
 export const BarChartPropTypes = {
   chart: PropTypes.shape({
+    testId: PropTypes.string,
     data: PropTypes.object.isRequired,
     options: PropTypes.shape({
       title: PropTypes.oneOfType([
@@ -106,6 +107,7 @@ export const getDefaultProps = (props) => {
   props.chart.options.interactions = props.chart.options.interactions || {};
   // Set defaults for missing properties
   const chart = {
+    testId: props.chart.testId ?? null,
     data: props.chart.data,
     options: {
       title: props.chart.options.title || '',

package/src/components/bar-chart/bar-chart.interface.ts

@@ -71,6 +71,7 @@ export interface IBarChartDataset {
 
 export interface IBarChartData {
     //TODO: revisit data interface definition after project is more stable
+    testId: string | null;
     data: {
         labels?: string[],
         datasets: IBarChartDataset[]

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

@@ -79,7 +79,7 @@ const BarChart = (props) => {
   const chartRef = useRef(null);
   const [pointHover, setPointHover] = useState(false);
   const chart = getDefaultProps(props);
-  const { options } = chart;
+  const { options, testId } = chart;
   const { annotations, chartStyling, interactions, graph } = chart.options;
 
   const [visibleAnnotationsIndices, setVisibleAnnotationsIndices] = useState(
@@ -199,6 +199,7 @@ const BarChart = (props) => {
         width: chartStyling.width || AUTO,
         height: chartStyling.height || AUTO,
       }}
+      data-testid={testId}
     >
       <Bar
         ref={chartRef}

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

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 
 export const LineChartPropTypes = {
   chart: PropTypes.shape({
+    testId: PropTypes.string,
     data: PropTypes.object.isRequired,
     options: PropTypes.shape({
       title: PropTypes.oneOfType([
@@ -117,6 +118,7 @@ export const getDefaultProps = (props) => {
   props.chart.options.interactions = props.chart.options.interactions || {};
   // Set defaults for missing properties
   const chart = {
+    testId: props.chart.testId ?? null,
     data: props.chart.data,
     options: {
       title: props.chart.options.title || '',

package/src/components/line-chart/line-chart.interface.ts

@@ -91,6 +91,7 @@ export interface ILineChartDataset {
 
 export interface ILineChartData {
     //TODO: revisit data interface definition after project is more stable
+    testId: string | null;
     data: {
         labels?: string[],
         datasets: ILineChartDataset[]

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

@@ -105,7 +105,7 @@ const LineChart = (props) => {
   const chartRef = useRef(null);
   let pointHover = false;
   const chart = getDefaultProps(props);
-  const { options } = chart;
+  const { options, testId } = chart;
 
   const {
     additionalAxesOptions,
@@ -409,6 +409,7 @@ const LineChart = (props) => {
       tabIndex={0} //eslint-disable-line jsx-a11y/no-noninteractive-tabindex
       onKeyDown={handleKeyDown}
       onKeyUp={handleKeyUp}
+      data-testid={testId}
     >
       <div className={styles.zoomForm}>
         <Controls

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

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 
 export const PieChartPropTypes = {
   chart: PropTypes.shape({
+    testId: PropTypes.string,
     data: PropTypes.shape({
       labels: PropTypes.arrayOf(PropTypes.string),
       datasets: PropTypes.arrayOf(PropTypes.object).isRequired,
@@ -58,6 +59,7 @@ export const getDefaultProps = (props) => {
   props.chart.options.interactions = props.chart.options.interactions || {};
   // Set defaults for missing properties
   const chart = {
+    testId: props.chart.testId ?? null,
     data: props.chart.data,
     options: {
       title: props.chart.options.title || '',

package/src/components/pie-chart/pie-chart.interface.ts

@@ -52,6 +52,7 @@ export interface IChartData {
 }
 
 export interface IChartData {
+    testId: string | null;
     data: IChartData;
     options: IOptions;
 }

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

@@ -54,11 +54,12 @@ const PieChart = (props) => {
   const chart = getDefaultProps(props);
   const chartRef = useRef(null);
   const [pointHover, setPointHover] = useState(false);
+  const { data, options, testId } = chart;
 
   const generateDatasets = (datasets) => {
     const copyDataset = JSON.parse(JSON.stringify(datasets));
 
-    if (chart.options.graph.stacked) {
+    if (options.graph.stacked) {
       const generatedDataset = {
         label: copyDataset[0].label,
         backgroundColor: [],
@@ -66,7 +67,7 @@ const PieChart = (props) => {
         borderWidth: parseFloat(copyDataset[0].borderWidth) || '1',
         data: [],
       };
-      chart.data.labels.map((label, labelIndex) => {
+      data.labels.map((label, labelIndex) => {
         copyDataset.map((arc, arcIndex) => {
           generatedDataset.data.push(arc.data[labelIndex]);
           const { backgroundColor } = arc;
@@ -95,7 +96,7 @@ const PieChart = (props) => {
       const colorDarkmode = pieDataset.data.map(
         (pie, i) => colorsDarkmode[i] || generateRandomColor(),
       );
-      const color = chart.options.chartStyling.darkMode
+      const color = options.chartStyling.darkMode
         ? colorDarkmode
         : colorLightmode;
       const borderColor = pieDataset.borderColor || color;
@@ -113,14 +114,14 @@ const PieChart = (props) => {
     return generatedDatasets;
   };
 
-  const generatedDatasets = generateDatasets(chart.data.datasets);
+  const generatedDatasets = generateDatasets(data.datasets);
 
   const getTitle = () => {
-    return chart.options.title !== ''
+    return options.title !== ''
       ? {
           display: true,
-          text: chart.options.title,
-          color: chart.options.chartStyling.darkMode
+          text: options.title,
+          color: options.chartStyling.darkMode
             ? defaults.darkModeColor
             : undefined,
         }
@@ -132,14 +133,14 @@ const PieChart = (props) => {
     const { datasets } = chartInstance.data;
     const { index } = legendItem;
 
-    if (chart.options.graph.stacked) {
-      if (chart.options.legend.useDataset) {
+    if (options.graph.stacked) {
+      if (options.legend.useDataset) {
         for (
           let i = 0;
           i < chartInstance.config._config.data.datasets[0].data.length;
           i++
         ) {
-          if (i % chart.data.datasets.length === index) {
+          if (i % data.datasets.length === index) {
             const meta = chartInstance.getDatasetMeta(0);
             const arc = meta.data[i];
             arc.hidden = !arc.hidden;
@@ -151,7 +152,7 @@ const PieChart = (props) => {
           i < chartInstance.config._config.data.datasets[0].data.length;
           i++
         ) {
-          if (parseInt(i / chart.data.datasets.length) === index) {
+          if (parseInt(i / data.datasets.length) === index) {
             const meta = chartInstance.getDatasetMeta(0);
             const arc = meta.data[i];
             arc.hidden = !arc.hidden;
@@ -159,12 +160,12 @@ const PieChart = (props) => {
         }
       }
     } else {
-      if (chart.options.legend.useDataset) {
+      if (options.legend.useDataset) {
         const meta = chartInstance.getDatasetMeta(index);
         meta.hidden = !meta.hidden;
       } else {
         if (datasets.length > 1) {
-          for (let i = 0; i < chart.data.datasets.length; i++) {
+          for (let i = 0; i < data.datasets.length; i++) {
             const meta = chartInstance.getDatasetMeta(i);
 
             const arc = meta.data[index];
@@ -178,11 +179,8 @@ const PieChart = (props) => {
       }
     }
 
-    if (chart.options.interactions.onLegendClick)
-      chart.options.interactions.onLegendClick(
-        legendItem?.text,
-        legendItem.hidden,
-      );
+    if (options.interactions.onLegendClick)
+      options.interactions.onLegendClick(legendItem?.text, legendItem.hidden);
 
     chartInstance.update();
   };
@@ -195,16 +193,16 @@ const PieChart = (props) => {
   const onHover = (evt, hoveredItems) => {
     if (pointHover && !hoveredItems?.length) {
       setPointHover(false);
-      if (chart.options.interactions.onPieUnhover) {
-        chart.options.interactions.onPieUnhover(evt);
+      if (options.interactions.onPieUnhover) {
+        options.interactions.onPieUnhover(evt);
       }
     }
     if (!pointHover && hoveredItems?.length) {
       setPointHover(true);
-      if (chart.options.interactions.onPieHover) {
+      if (options.interactions.onPieHover) {
         const { index, datasetIndex } = hoveredItems[0];
         const generatedDataset = generatedDatasets;
-        chart.options.interactions.onPieHover(
+        options.interactions.onPieHover(
           evt,
           datasetIndex,
           index,
@@ -215,7 +213,7 @@ const PieChart = (props) => {
   };
 
   const getDatalabels = () => {
-    return chart.options.graph.showDataLabels
+    return options.graph.showDataLabels
       ? {
           display: 'auto',
           align: 'center',
@@ -223,7 +221,7 @@ const PieChart = (props) => {
           formatter: (value, context) => {
             if (
               context.chart.getDatasetMeta(
-                chart.options.graph.stacked ? 0 : context.datasetIndex,
+                options.graph.stacked ? 0 : context.datasetIndex,
               ).data[context.dataIndex].hidden
             )
               return '';
@@ -246,7 +244,7 @@ const PieChart = (props) => {
                 : label;
             return dataLabel;
           },
-          color: chart.options.chartStyling.darkMode
+          color: options.chartStyling.darkMode
             ? defaults.darkModeColor
             : undefined,
         }
@@ -257,23 +255,22 @@ const PieChart = (props) => {
 
   const getLegend = () => {
     return {
-      position: chart.options.legend.position,
-      display: chart.options.legend.display,
-      align: chart.options.legend.align,
+      position: options.legend.position,
+      display: options.legend.display,
+      align: options.legend.align,
       labels: {
         generateLabels(chartInstance) {
-          if (chart.options.graph.stacked) {
+          if (options.graph.stacked) {
             const meta = chartInstance.getDatasetMeta(0);
-            if (chart.options.legend.useDataset) {
-              return chart.data.datasets.map((data, i) => {
-                const { label } =
-                  chart.data.datasets[i % chart.data.datasets.length];
+            if (options.legend.useDataset) {
+              return data.datasets.map((data, i) => {
+                const { label } = data.datasets[i % data.datasets.length];
                 const arc = meta.data[i];
                 const text = arc.hidden
                   ? label.split('').reduce((acc, curr) => acc + '-', '')
                   : label;
-                const backgroundColor = chart.data.datasets[i]?.backgroundColor;
-                const borderColor = chart.data.datasets[i]?.borderColor;
+                const backgroundColor = data.datasets[i]?.backgroundColor;
+                const borderColor = data.datasets[i]?.borderColor;
                 return {
                   text,
                   fillStyle:
@@ -288,14 +285,14 @@ const PieChart = (props) => {
                 };
               });
             } else {
-              return chart.data.labels.map((data, i) => {
-                const label = chart.data.labels[i];
-                const arc = meta.data[parseInt(i * chart.data.datasets.length)];
+              return data.labels.map((data, i) => {
+                const label = data.labels[i];
+                const arc = meta.data[parseInt(i * data.datasets.length)];
                 const text = arc.hidden
                   ? label.split('').reduce((acc, curr) => acc + '-', '')
                   : label;
-                const backgroundColor = chart.data.datasets[0]?.backgroundColor;
-                const borderColor = chart.data.datasets[0]?.borderColor;
+                const backgroundColor = data.datasets[0]?.backgroundColor;
+                const borderColor = data.datasets[0]?.borderColor;
                 return {
                   text,
                   fillStyle:
@@ -311,14 +308,14 @@ const PieChart = (props) => {
               });
             }
           }
-          if (chart.options.legend.useDataset) {
-            return chart.data.datasets.map((dataset, i) => {
+          if (options.legend.useDataset) {
+            return data.datasets.map((dataset, i) => {
               const meta = chartInstance.getDatasetMeta(i);
               const text = meta.hidden
                 ? dataset.label.split('').reduce((acc, curr) => acc + '-', '')
                 : dataset.label;
-              const backgroundColor = chart.data.datasets[i]?.backgroundColor;
-              const borderColor = chart.data.datasets[i]?.borderColor;
+              const backgroundColor = data.datasets[i]?.backgroundColor;
+              const borderColor = data.datasets[i]?.borderColor;
               return {
                 text,
                 fillStyle:
@@ -332,14 +329,14 @@ const PieChart = (props) => {
               };
             });
           } else {
-            return chart.data.labels.map((label, i) => {
+            return data.labels.map((label, i) => {
               const meta = chartInstance.getDatasetMeta(0);
               const arc = meta.data[i];
               const text = arc.hidden
                 ? label.split('').reduce((acc, curr) => acc + '-', '')
                 : label;
-              const backgroundColor = chart.data.datasets[0]?.backgroundColor;
-              const borderColor = chart.data.datasets[0]?.borderColor;
+              const backgroundColor = data.datasets[0]?.backgroundColor;
+              const borderColor = data.datasets[0]?.borderColor;
               return {
                 text,
                 fillStyle:
@@ -358,12 +355,12 @@ const PieChart = (props) => {
         boxHeight: 6,
         boxWidth: 6,
         usePointStyle: true,
-        color: chart.options.chartStyling.darkMode
+        color: options.chartStyling.darkMode
           ? defaults.darkModeColor
           : undefined,
         filter: (item, data) => {
-          if (!chart.options.legend.useDataset) return true;
-          return !chart.data.datasets[item.index]?.hideLegend;
+          if (!options.legend.useDataset) return true;
+          return !data.datasets[item.index]?.hideLegend;
         },
       },
       onClick: legendClick,
@@ -375,31 +372,31 @@ const PieChart = (props) => {
       callbacks: {
         title: (tooltipItem) => {
           const { dataIndex } = tooltipItem[0];
-          const index = chart.options.graph.stacked
-            ? parseInt(dataIndex / chart.data.labels.length)
+          const index = options.graph.stacked
+            ? parseInt(dataIndex / data.labels.length)
             : dataIndex;
-          const label = chart.data.labels[index];
+          const label = data.labels[index];
           return `${label}`;
         },
         label: (tooltipItem) => {
           const { dataIndex } = tooltipItem;
-          const datasetIndex = chart.options.graph.stacked
-            ? dataIndex % chart.data.datasets.length
+          const datasetIndex = options.graph.stacked
+            ? dataIndex % data.datasets.length
             : tooltipItem.datasetIndex;
           const dataLabel =
-            chart.data.datasets.length > 1
-              ? `${chart.data.datasets[datasetIndex]?.label}: `
+            data.datasets.length > 1
+              ? `${data.datasets[datasetIndex]?.label}: `
               : '';
           const value = tooltipItem.dataset.data[dataIndex];
           const labelValue =
             typeof value === 'object'
               ? `${value.value || ''} ${
-                  chart.options.tooltip.showLabelsInTooltips && value.label
+                  options.tooltip.showLabelsInTooltips && value.label
                     ? '(' + value.label + ')'
                     : ''
                 }`
               : value;
-          const unit = chart.data?.yUnit ? `[${chart.data?.yUnit}]` : '';
+          const unit = data?.yUnit ? `[${data?.yUnit}]` : '';
           return `${dataLabel} ${labelValue} ${unit}`;
         },
       },
@@ -409,37 +406,36 @@ const PieChart = (props) => {
     <div
       className={cx(
         styles.chart,
-        !chart.options.chartStyling.width || !chart.options.chartStyling.height
-          ? chart.options.chartStyling.staticChartHeight
+        !options.chartStyling.width || !options.chartStyling.height
+          ? options.chartStyling.staticChartHeight
             ? styles.fixedHeight
             : styles.stretchHeight
           : '',
       )}
       style={{
-        width: chart.options.chartStyling.width || 'auto',
-        height: chart.options.chartStyling.height || 'auto',
+        width: options.chartStyling.width || 'auto',
+        height: options.chartStyling.height || 'auto',
       }}
+      data-testid={testId}
     >
       <Pie
         ref={chartRef}
         data={{
           datasets: generatedDatasets,
-          labels: chart.options.graph.stacked ? undefined : chart.data.labels,
+          labels: options.graph.stacked ? undefined : data.labels,
         }}
         options={{
-          cutout: chart.options.graph.cutout,
+          cutout: options.graph.cutout,
           onClick,
           responsive: true, // Defaults to true, should be removed
-          maintainAspectRatio: chart.options.chartStyling.maintainAspectRatio,
+          maintainAspectRatio: options.chartStyling.maintainAspectRatio,
           animation: {
-            duration: chart.options.chartStyling.performanceMode ? 0 : 1000,
+            duration: options.chartStyling.performanceMode ? 0 : 1000,
           },
           hover: {
             mode: 'nearest',
             intersect: 'true',
-            animationDuration: chart.options.chartStyling.performanceMode
-              ? 0
-              : 400,
+            animationDuration: options.chartStyling.performanceMode ? 0 : 400,
           },
           onHover,
           elements: {

package/src/components/scatter-chart/scatter-chart.intefrace.ts

@@ -21,6 +21,7 @@ export interface IScatterChartDataset {
 }
 
 export interface IScatterChartData {
+  testId: string | null;
   data: {
       datasets: IScatterChartDataset[]
   };

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

@@ -6,8 +6,8 @@ import { Scatter } from 'react-chartjs-2';
  * @param {import('./scatter-chart.intefrace').IScatterChartProps} props
  */
 const ScatterChart = (props) => {
-  const { data, options } = props.chart;
-  return <Scatter options={options} data={data} />;
+  const { data, options, testId = null } = props.chart;
+  return <Scatter options={options} data={data} data-testid={testId} />;
 };
 
 export default ScatterChart;