@oliasoft-open-source/charts-library 2.4.0 → 2.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.4.0",
+  "version": "2.4.2",
   "description": "React Chart Library (based on Chart.js and react-chart-js-2)",
   "main": "index.js",
   "files": [
@@ -67,6 +67,7 @@
     "eslint-plugin-react": "^7.31.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "html-webpack-plugin": "^5.5.0",
+    "http-server": "^14.1.1",
     "husky": "^8.0.1",
     "jest": "^29.0.1",
     "jest-transform-stub": "^2.0.0",
@@ -96,7 +97,6 @@
     "chartjs-plugin-zoom": "^1.2.1",
     "classnames": "^2.3.1",
     "fraction.js": "^4.2.0",
-    "http-server": "^14.1.1",
     "less-vars-to-js": "^1.3.0",
     "prop-types": "^15.8.1",
     "react-base64-downloader": "^2.1.7",

package/release-notes.md

@@ -1,5 +1,13 @@
 # Charts Library Release Notes
 
+## 2.4.2
+
+- Square aspect ratio charts can fill height/width
+
+## 2.4.1
+
+- Remove dependency on http-server (moved to dev dependencies)
+
 ## 2.4.0
 
 - Switch package manager from NPM to Yarn

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

@@ -383,14 +383,10 @@ const LineChart = (props) => {
   return (
     <div
       className={getClassName(chartStyling, styles)}
-      style={
-        chartStyling.squareAspectRatio
-          ? {}
-          : {
-              width: chartStyling.width || AUTO,
-              height: chartStyling.height || AUTO,
-            }
-      }
+      style={{
+        width: chartStyling.width || AUTO,
+        height: chartStyling.height || AUTO,
+      }}
       tabIndex={0} //eslint-disable-line jsx-a11y/no-noninteractive-tabindex
       onKeyDown={handleKeyDown}
       onKeyUp={handleKeyUp}
@@ -428,7 +424,8 @@ const LineChart = (props) => {
         options={{
           onClick,
           onHover,
-          maintainAspectRatio: chartStyling.maintainAspectRatio,
+          maintainAspectRatio:
+            chartStyling.squareAspectRatio || chartStyling.maintainAspectRatio,
           aspectRatio: chartStyling.squareAspectRatio ? 1 : null, // 1 equals square aspect ratio
           animation: {
             duration: chartStyling.performanceMode

package/src/components/line-chart/line-chart.module.less

@@ -27,10 +27,10 @@ html[data-theme='dark'] .chart canvas {
     height: 100%;
   }
 
-  // TODO: fix square plot scaling
   &.squareAspectRatio {
-    max-height: 450px;
-    max-width: 450px;
+    aspect-ratio: 1;
+    min-height: 0;
+    min-width: 0;
   }
 
   &:focus {

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

@@ -149,6 +149,26 @@ const TemplateWithCustomLegendContainer = (args) => {
 
 export const Default = Template.bind({});
 
+export const FillContainer = Template.bind({});
+FillContainer.args = {
+  chart: {
+    ...basicChart,
+    options: {
+      ...basicChart.options,
+      chartStyling: {
+        height: '100%',
+      },
+    },
+  },
+};
+FillContainer.decorators = [
+  (Story) => (
+    <div style={{ height: 400, width: 500 }}>
+      <Story />
+    </div>
+  ),
+];
+
 export const DataGaps = Template.bind({});
 DataGaps.args = {
   chart: {
@@ -422,3 +442,26 @@ SquareAspectRatio.args = {
     },
   },
 };
+
+export const SquareAspectRatioFillContainer = Template.bind({});
+SquareAspectRatioFillContainer.args = {
+  chart: {
+    ...basicChart,
+    options: {
+      ...basicChart.options,
+      title: 'Square aspect ratio',
+      chartStyling: {
+        squareAspectRatio: true,
+        maintainAspectRatio: true,
+        height: '100%',
+      },
+    },
+  },
+};
+SquareAspectRatioFillContainer.decorators = [
+  (Story) => (
+    <div style={{ display: 'flex', height: 400, width: 600 }}>
+      <Story />
+    </div>
+  ),
+];