@oliasoft-open-source/charts-library 2.5.6 → 2.5.8

package/package.json

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

package/release-notes.md

@@ -1,5 +1,13 @@
 # Charts Library Release Notes
 
+## 2.5.8
+
+- Disable tooltip animations in `performanceMode`
+
+## 2.5.7
+
+- Allow stretchy headerComponent in controls
+
 ## 2.5.6
 
 - Removed resizeDelay, fixed double data labels set position

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

@@ -201,17 +201,14 @@ const BarChart = (props) => {
           onHover,
           indexAxis: isVertical(options.direction) ? AxisType.X : AxisType.Y,
           maintainAspectRatio: chartStyling.maintainAspectRatio,
-          animation: {
-            duration: chartStyling.performanceMode
-              ? ANIMATION_DURATION.NO
-              : ANIMATION_DURATION.FAST,
-          },
+          animation: chartStyling.performanceMode
+            ? false
+            : {
+                duration: ANIMATION_DURATION.FAST,
+              },
           hover: {
             mode: ChartHoverMode.Nearest,
             intersect: true,
-            animationDuration: chartStyling.performanceMode
-              ? ANIMATION_DURATION.NO
-              : ANIMATION_DURATION.SLOW,
           },
           elements: {
             bar: { pointStyle: PointStyle.Circle },

package/src/components/controls/controls.jsx

@@ -37,7 +37,7 @@ const Controls = ({
   return (
     <>
       <div className={styles.controls}>
-        <div>{headerComponent || <Text bold>{chart.options.title}</Text>}</div>
+        {headerComponent || <Text bold>{chart.options.title}</Text>}
         <div className={styles.buttons}>
           {!showTable && (
             <>

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

@@ -435,17 +435,14 @@ const LineChart = (props) => {
               onHover,
               maintainAspectRatio: chartStyling.maintainAspectRatio,
               aspectRatio: chartStyling.squareAspectRatio ? 1 : null, // 1 equals square aspect ratio
-              animation: {
-                duration: chartStyling.performanceMode
-                  ? ANIMATION_DURATION.NO
-                  : ANIMATION_DURATION.FAST,
-              },
+              animation: chartStyling.performanceMode
+                ? false
+                : {
+                    duration: ANIMATION_DURATION.FAST,
+                  },
               hover: {
                 mode: ChartHoverMode.Nearest,
                 intersect: true,
-                animationDuration: chartStyling.performanceMode
-                  ? ANIMATION_DURATION.NO
-                  : ANIMATION_DURATION.SLOW,
               },
               elements: {
                 line: {

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

@@ -522,6 +522,15 @@ export const HeaderComponent = (args) => {
   );
 };
 
+export const HeaderComponentFullWidth = Template.bind({});
+HeaderComponentFullWidth.args = {
+  headerComponent: (
+    <div style={{ flexGrow: 1, minWidth: 150 }}>
+      <Slider max={100} min={0} onChange={() => {}} showArrows value={50} />
+    </div>
+  ),
+};
+
 export const SubheaderComponent = Template.bind({});
 SubheaderComponent.args = {
   subheaderComponent: (

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

@@ -15,6 +15,7 @@ import zoomPlugin from 'chartjs-plugin-zoom';
 import dataLabelsPlugin from 'chartjs-plugin-datalabels';
 import { Pie } from 'react-chartjs-2';
 
+import { ANIMATION_DURATION } from '../../helpers/chart-consts';
 import styles from './pie-chart.module.less';
 import { colors, generateRandomColor } from './pie-chart-utils';
 import { getDefaultProps, PieChartPropTypes } from './pie-chart-prop-types';
@@ -404,13 +405,14 @@ const PieChart = (props) => {
           onClick,
           responsive: true, // Defaults to true, should be removed
           maintainAspectRatio: options.chartStyling.maintainAspectRatio,
-          animation: {
-            duration: options.chartStyling.performanceMode ? 0 : 1000,
-          },
+          animation: options.chartStyling.performanceMode
+            ? false
+            : {
+                duration: ANIMATION_DURATION.FAST,
+              },
           hover: {
             mode: 'nearest',
             intersect: 'true',
-            animationDuration: options.chartStyling.performanceMode ? 0 : 400,
           },
           onHover,
           elements: {