@oliasoft-open-source/charts-library 2.5.10 → 2.5.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.5.10",
+  "version": "2.5.12",
   "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.12
+
+- change thousand separators in axis label from comma to space
+
+## 2.5.11
+
+- Allow headerComponent and chart title to coexist
+
 ## 2.5.10
 
 - Fix zoom / pan bug at < 0.1 scale on charts

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/get-line-chart-scales.js

@@ -43,6 +43,10 @@ const getLineChartAxis = (options, axisType, state, currentScales, i = 0) => {
           },
         }
       : {
+          callback(val) {
+            const value = this.getLabelForValue(val);
+            return value.replaceAll(/,/g, ' ');
+          },
           stepSize:
             axisData.stepSize ||
             (axisType === AxisType.Y ? additionalAxesOptions.stepSize : null),

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} />} />;