fix(gauge): add subtitle for Gauge chart

docs/iframe.html

@@ -361,4 +361,4 @@
 
 
 
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src/stories","files":"*.@(js|md)","importPathMatcher":"^\\.[\\\\/](?:src\\/stories\\/(?!\\.)(?=.)[^/]*?\\.(js|md))$"}];</script><script src="runtime~main.3899a97d.iframe.bundle.js"></script><script src="vendors~main.4ecfac83.iframe.bundle.js"></script><script src="main.7a4c0c3f.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src/stories","files":"*.@(js|md)","importPathMatcher":"^\\.[\\\\/](?:src\\/stories\\/(?!\\.)(?=.)[^/]*?\\.(js|md))$"}];</script><script src="runtime~main.3899a97d.iframe.bundle.js"></script><script src="vendors~main.4ecfac83.iframe.bundle.js"></script><script src="main.49b89c33.iframe.bundle.js"></script></body></html>

docs/project.json

@@ -1 +1 @@
-{"generatedAt":1664197353809,"builder":{"name":"webpack4"},"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"7.24.2"},"storybookVersion":"6.5.10","language":"javascript","storybookPackages":{"@storybook/addons":{"version":"6.5.10"},"@storybook/react":{"version":"6.5.10"},"@storybook/source-loader":{"version":"6.5.10"}},"framework":{"name":"react"},"addons":{"@storybook/addon-jest":{"version":"6.5.10"},"@storybook/addon-actions":{"version":"6.5.10"},"@storybook/addon-knobs":{"version":"6.4.0"},"@storybook/addon-a11y":{"version":"6.5.10"},"@storybook/addon-docs":{"version":"6.5.10"},"@storybook/addon-links":{"version":"6.5.10"}}}
+{"generatedAt":1666259409270,"builder":{"name":"webpack4"},"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"7.24.2"},"storybookVersion":"6.5.10","language":"javascript","storybookPackages":{"@storybook/addons":{"version":"6.5.10"},"@storybook/react":{"version":"6.5.10"},"@storybook/source-loader":{"version":"6.5.10"}},"framework":{"name":"react"},"addons":{"@storybook/addon-jest":{"version":"6.5.10"},"@storybook/addon-actions":{"version":"6.5.10"},"@storybook/addon-knobs":{"version":"6.4.0"},"@storybook/addon-a11y":{"version":"6.5.10"},"@storybook/addon-docs":{"version":"6.5.10"},"@storybook/addon-links":{"version":"6.5.10"}}}

src/components/Gauge.js

@@ -160,9 +160,6 @@ export const getChart = (
   comparison
 ) => ({
   ...chart,
-  margin: [0, 0, 0, 0],
-  marginTop: 55,
-  borderRadius: 8,
   events: {
     render() {
       const chart2 = this;
@@ -361,7 +358,7 @@ const renderComparison = (
   const comparisonPerCentageSize = getSize(
     currentChart.chartWidth,
     currentChart.chartHeight,
-    18
+    20
   );
 
   currentChart.comparisonPercentage = currentChart.renderer
@@ -390,7 +387,7 @@ const renderComparison = (
   const comparisonPercentageBox = currentChart.comparisonPercentage.getBBox();
   currentChart.comparisonPercentage.translate(
     -comparisonPercentageBox.width / 2,
-    2 * mainSize + 2 * suffixSize
+    2.2 * mainSize + 2.2 * suffixSize
   );
 
   // Comparison text
@@ -420,16 +417,13 @@ const renderComparison = (
   const comparisonBox = currentChart.comparisonLabel.getBBox();
   currentChart.comparisonLabel.translate(
     -comparisonBox.width / 2,
-    2.25 * mainSize + 2.25 * suffixSize + 6
+    2.5 * mainSize + 2.5 * suffixSize + 12
   );
 };
 
 // Default chart
 export const chart = {
   type: 'solidgauge',
-  margin: [0, 0, 0, 0],
-  marginTop: 55,
-  borderRadius: 8,
 };
 // Default pane
 const pane = {
@@ -533,6 +527,9 @@ const Gauge = props => {
           text: title,
           ...options?.title,
         },
+        subtitle: {
+          ...options?.subtitle,
+        },
         credits: {
           enabled: false,
         },

src/stories/Gauge.stories.js

@@ -27,6 +27,7 @@ export const gauge = () => (
         <Gauge
           data-testid="gauge-chart"
           type="DIAL"
+          title="Contador general Industrias ACME"
           name="Contador general Industrias ACME"
           comparison={{
             enabled: true,
@@ -71,6 +72,7 @@ export const gauge = () => (
           checkpoints={[
             { color: 'blue', tooltip: 'Basic tooltip: 60kWh', value: 60 },
           ]}
+          options={{ subtitle: { text: 'last seven days' } }}
         />
       </Cell>
     </Row>

src/utils/formatter.js

@@ -5,13 +5,10 @@ export const numberFormatter = (numberAsStr, decimal, grouping) => {
       .toString()
       .replace(/\B(?=(\d{3})+(?!\d))/g, grouping);
   }
-  if (number >= 1 || number <= -1) {
-    return applyTwoDecimals(number, decimal, grouping);
-  }
   if (number === 0) {
     return '0';
   }
-  return applySixDecimals(number, decimal);
+  return applyTwoDecimals(number, decimal, grouping);
 };
 
 const applyTwoDecimals = (number, decimal, grouping) =>
@@ -20,9 +17,6 @@ const applyTwoDecimals = (number, decimal, grouping) =>
     .replace(/,|\./g, decimal)
     .replace(/\B(?=(\d{3})+(?!\d))/g, grouping);
 
-const applySixDecimals = (number, decimal) =>
-  number.toFixed(6).replace(/,|\./g, decimal);
-
 export const applyScientific = (number, decimal, exponential) =>
   number
     .toExponential(exponential)

test/mock/Gauge.js

@@ -200,10 +200,7 @@ export const mockPropsGauge = {
 };
 
 export const mockExpectedChart = events => ({
-  borderRadius: 8,
   events,
-  margin: [0, 0, 0, 0],
-  marginTop: 55,
   type: 'solidgauge',
 });
 export const mockExpectedAxisY = {