@oliasoft-open-source/charts-library 2.5.5 → 2.5.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.5.5",
+  "version": "2.5.7",
   "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.7
+
+- Allow stretchy headerComponent in controls
+
+## 2.5.6
+
+- Removed resizeDelay, fixed double data labels set position
+
 ## 2.5.5
 
 - Removed empty label annotations

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

@@ -199,7 +199,6 @@ const BarChart = (props) => {
         options={{
           onClick,
           onHover,
-          resizeDelay: 50,
           indexAxis: isVertical(options.direction) ? AxisType.X : AxisType.Y,
           maintainAspectRatio: chartStyling.maintainAspectRatio,
           animation: {

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/datalabels-alignment/get-datalabels-position.js

@@ -1,5 +1,6 @@
 import { getCondition } from './get-alignment-condition';
 import { getAlignmentData } from './get-alignment-data';
+import { AlignOptions } from '../../../helpers/enums';
 
 /** returning position depends on condition
  *
@@ -15,10 +16,10 @@ export const getPosition = () => {
     } = getCondition(x, y, left, right, bottom);
 
     return (
-      (overLeftSide && 'right') ||
-      (overRightSide && 'left') ||
-      (overBottomSide && 'end') ||
-      'start'
+      (overLeftSide && AlignOptions.Right) ||
+      (overRightSide && AlignOptions.Left) ||
+      (overBottomSide && AlignOptions.End) ||
+      AlignOptions.Start
     );
   };
 };

package/src/components/line-chart/get-line-chart-data-labels.js

@@ -1,17 +1,17 @@
 import { AUTO } from '../../helpers/chart-consts';
-import { AlignOptions, PointType } from '../../helpers/enums';
+import { getPosition } from './datalabels-alignment/get-datalabels-position';
 
 /**
+ * adjusts the position of the label depends on chart area
+ *
  * @param {import('./line-chart.interface').ILineChartOptions} options - line chart options object
+ * @return {object} - returning position, if label exist in datasets item
  */
 const getLineChartDataLabels = (options) => {
   return options.graph.showDataLabels
     ? {
         display: AUTO,
-        align: (context) =>
-          context.dataset.pointType === PointType.Casing
-            ? AlignOptions.Start
-            : AlignOptions.End,
+        align: getPosition(),
         formatter: (value, context) =>
           context.dataset.data[context.dataIndex].label || '',
       }

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

@@ -70,7 +70,6 @@ import {
   PanZoomMode,
   PointStyle,
 } from '../../helpers/enums';
-import { setDataLabelsAlignment } from './datalabels-alignment/set-chart-line-datalabels-alignment';
 
 ChartJS.register(
   LinearScale,
@@ -232,7 +231,6 @@ const LineChart = (props) => {
             : DEFAULT_LINE_POINT_RADIUS,
         pointHoverRadius,
         pointHitRadius: line.pointHitRadius || pointHoverRadius,
-        datalabels: setDataLabelsAlignment(options),
       };
     });
     return generatedDatasets;
@@ -435,7 +433,6 @@ const LineChart = (props) => {
             options={{
               onClick,
               onHover,
-              resizeDelay: 50,
               maintainAspectRatio: chartStyling.maintainAspectRatio,
               aspectRatio: chartStyling.squareAspectRatio ? 1 : null, // 1 equals square aspect ratio
               animation: {

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

@@ -413,7 +413,6 @@ const PieChart = (props) => {
             animationDuration: options.chartStyling.performanceMode ? 0 : 400,
           },
           onHover,
-          resizeDelay: 50,
           elements: {
             pie: {
               pointStyle: 'circle',

package/src/helpers/enums.js

@@ -60,6 +60,8 @@ export const AlignOptions = Object.freeze({
   End: 'end',
   Start: 'start',
   Center: 'center',
+  Right: 'right',
+  Left: 'left',
 });
 
 export const PointType = Object.freeze({

package/src/components/line-chart/datalabels-alignment/set-chart-line-datalabels-alignment.js

@@ -1,19 +0,0 @@
-import { getPosition } from './get-datalabels-position';
-
-/** adjusts the position of the label depends on chart area
- *
- * @param {import('../components/bar-chart/bar-chart.interface').IBarChartOptions |
- * import('../components/line-chart/line-chart.interface').ILineChartOptions} options - chart options object
- * @return {object} - returning position, if label exist in datasets item
- */
-export const setDataLabelsAlignment = (options) => {
-  const { graph = {} } = options || {};
-  const { showDataLabels = false } = graph;
-
-  return showDataLabels
-    ? {
-        display: true,
-        align: getPosition(),
-      }
-    : {};
-};