@oliasoft-open-source/charts-library 2.5.9 → 2.5.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.5.9",
+  "version": "2.5.11",
   "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.11
+
+- Allow headerComponent and chart title to coexist
+
+## 2.5.10
+
+- Fix zoom / pan bug at < 0.1 scale on charts
+
 ## 2.5.9
 
 - Fix validation for two and more decimal places in charts settings

package/src/components/controls/axes-options.jsx

@@ -25,6 +25,7 @@ const AxesOptionsPopover = ({
     axes.filter((axis) => axis.max.displayValue || axis.min.displayValue)
       .length > 0;
   const handleInputFocus = (e) => e.target.select();
+  const zoomOrPanEnabled = zoomEnabled || panEnabled;
   return (
     <>
       {axes.map((axis, i) => {
@@ -36,7 +37,11 @@ const AxesOptionsPopover = ({
               <Input
                 name="min"
                 // TODO: Fix input values not updating first time when scales reset
-                value={axis.min.inputValue || scalesMaxMin[axis?.id]?.min}
+                value={
+                  (zoomOrPanEnabled
+                    ? axis.min.displayValue
+                    : axis.min.inputValue) || scalesMaxMin[axis?.id]?.min
+                }
                 error={
                   !axis.min.valid
                     ? 'Invalid value' //t(InputWarningType.MustBeNumericAndLessThanMax)
@@ -61,7 +66,11 @@ const AxesOptionsPopover = ({
               <Input
                 name="max"
                 // TODO: Fix input values not updating first time when scales reset
-                value={axis.max.inputValue || scalesMaxMin[axis?.id]?.max}
+                value={
+                  (zoomOrPanEnabled
+                    ? axis.max.displayValue
+                    : axis.max.inputValue) || scalesMaxMin[axis?.id]?.max
+                }
                 error={
                   !axis.max.valid
                     ? 'Invalid value' //t(InputWarningType.MustBeNumericAndGreaterThanMin)

package/src/components/controls/controls.jsx

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

package/src/components/line-chart/line-chart-utils.js

@@ -150,7 +150,9 @@ export const isLessThanMax = (value, max) => {
 };
 
 export const isGreaterThanMin = (value, min) => {
-  return value === undefined || min === undefined || value > min;
+  return (
+    value === undefined || min === undefined || Number(value) > Number(min)
+  );
 };
 
 /**

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

@@ -346,22 +346,22 @@ const LineChart = (props) => {
       payload: [
         {
           name: 'min',
-          value: chart.scales?.x?.min ? chart.scales.x.min.toFixed(1) : 0,
+          value: chart.scales?.x?.min ? chart.scales.x.min : 0,
           id: 'x',
         },
         {
           name: 'max',
-          value: chart.scales?.x?.max ? chart.scales.x.max.toFixed(1) : 0,
+          value: chart.scales?.x?.max ? chart.scales.x.max : 0,
           id: 'x',
         },
         {
           name: 'min',
-          value: chart.scales?.y?.min ? chart.scales.y.min.toFixed(1) : 0,
+          value: chart.scales?.y?.min ? chart.scales.y.min : 0,
           id: 'y',
         },
         {
           name: 'max',
-          value: chart.scales?.y?.max ? chart.scales.y.max.toFixed(1) : 0,
+          value: chart.scales?.y?.max ? chart.scales.y.max : 0,
           id: 'y',
         },
       ],

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

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import {
   Flex,
   Menu,
+  Select,
   Slider,
   Table,
   Text,
@@ -461,7 +462,7 @@ SquareAspectRatio.args = {
   },
 };
 
-export const HeaderComponent = (args) => {
+export const HeaderComponentNoTitle = (args) => {
   const options = ['Category A', 'Category B', 'Category C'];
 
   const suboptions = ['Chart 1', 'Chart 2', 'Chart 3'];
@@ -482,7 +483,7 @@ export const HeaderComponent = (args) => {
 
   const chart = {
     ...basicChart,
-    options: { ...basicChart.options, title: selectedChartTitle },
+    options: { ...basicChart.options, title: null },
   };
 
   return (
@@ -521,21 +522,53 @@ export const HeaderComponent = (args) => {
     />
   );
 };
+HeaderComponentNoTitle.parameters = {
+  docs: {
+    description: {
+      story:
+        'If no chart title is set, a `headerComponent` can take its place.',
+    },
+  },
+};
 
-export const HeaderComponentFullWidth = Template.bind({});
-HeaderComponentFullWidth.args = {
-  headerComponent: (
-    <div style={{ flexGrow: 1, minWidth: 150 }}>
-      <Slider max={100} min={0} onChange={() => {}} showArrows value={50} />
-    </div>
-  ),
+const testComponent = (
+  <div
+    style={{
+      flexGrow: 1,
+      minWidth: 280,
+      margin: '-9px 0',
+      display: 'flex',
+      alignItems: 'center',
+    }}
+  >
+    <Select
+      options={['Aardvarks', 'Kangaroos']}
+      value="Aardvarks"
+      small
+      width="90px"
+      autoLayerWidth
+    />
+    <Slider max={100} min={0} onChange={() => {}} showArrows value={50} />
+    <Text>180s</Text>
+  </div>
+);
+
+export const HeaderComponentWithTitle = Template.bind({});
+HeaderComponentWithTitle.args = {
+  headerComponent: testComponent,
+};
+HeaderComponentWithTitle.parameters = {
+  docs: {
+    description: {
+      story:
+        "If a chart title is set, the `headerComponent` will be displayed to the right of it. Setting a `minWidth` on the `headerComponent` will make sure it isn't squashed.",
+    },
+  },
 };
 
 export const SubheaderComponent = Template.bind({});
 SubheaderComponent.args = {
-  subheaderComponent: (
-    <Slider max={100} min={0} onChange={() => {}} showArrows value={50} />
-  ),
+  subheaderComponent: testComponent,
 };
 
 const table = {
@@ -576,6 +609,14 @@ const table = {
     },
   ],
 };
+SubheaderComponent.parameters = {
+  docs: {
+    description: {
+      story:
+        'This will be displayed between the title/controls and the chart itself.',
+    },
+  },
+};
 
 export const WithTable = (args) => {
   return <LineChart chart={basicChart} table={<Table table={table} />} />;

package/src/components/line-chart/state/line-chart-reducer.js

@@ -87,11 +87,18 @@ export const reducer = (state, action) => {
         axis.min.valid =
           validNumber(axis.min.inputValue ?? '') &&
           isLessThanMax(axis.min.value, axis.max.value);
-        axis.min.displayValue = axis.min.valid ? axis.min.value : undefined;
+        axis.min.displayValue =
+          axis.min.valid && axis.min.value
+            ? Number(axis.min.value).toFixed(1)
+            : undefined;
+
         axis.max.valid =
           validNumber(axis.max.inputValue ?? '') &&
           isGreaterThanMin(axis.max.value, axis.min.value);
-        axis.max.displayValue = axis.max.valid ? axis.max.value : undefined;
+        axis.max.displayValue =
+          axis.max.valid && axis.max.value
+            ? Number(axis.max.value).toFixed(1)
+            : undefined;
 
         const elementValue = axis[name];
         if (elementValue.valid) {