npm - @bbl-digital/snorre - Versions diffs - 2.2.11 → 2.2.12 - Mend

@bbl-digital/snorre 2.2.11 → 2.2.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/bundle.js +21 -3
package/esm/core/BarChartWithCustomizedEvent/index.js +24 -5
package/lib/core/BarChartWithCustomizedEvent/index.d.ts +7 -2
package/lib/core/BarChartWithCustomizedEvent/index.d.ts.map +1 -1
package/lib/core/BarChartWithCustomizedEvent/index.js +24 -5
package/package.json +1 -1

package/dist/bundle.js CHANGED Viewed

@@ -24846,11 +24846,15 @@
     legendVAlign = 'bottom',
     margin,
     legendPadding,
+    legend = false,
     layout = 'horizontal',
     onClickBar,
+    tickFormatterX = e => e,
+    tickFormatterY,
     ...rest
   }) => {
     const theme = react.useTheme();
+    const [hoverIndex, setHoverIndex] = React.useState(undefined);
     const handleBarClick = (_, index) => {
       const identicalIndex = index === selectedIndex;
@@ -24887,24 +24891,38 @@
             axisLine: xAxisLine && xAxisLine,
             tickLine: tickLineX && tickLineX,
             type: layout === 'vertical' ? 'number' : 'category',
+            tickFormatter: tickFormatterX,
             tickMargin: 5
           }), /*#__PURE__*/jsxRuntime.jsx(recharts.YAxis, {
             dataKey: yAxisDataKey && yAxisDataKey,
             axisLine: yAxisLine && yAxisLine,
             tickLine: tickLineY && tickLineY,
             type: layout === 'vertical' ? 'category' : 'number',
-            tickFormatter: formatAxisPrice
-          }), bars?.length && bars.map(bar => {
+            tickFormatter: tickFormatterY ? tickFormatterY : formatAxisPrice
+          }), legend && /*#__PURE__*/jsxRuntime.jsx(recharts.Legend, {
+            verticalAlign: legendVAlign && legendVAlign,
+            align: legendHAlign && legendHAlign,
+            content: /*#__PURE__*/jsxRuntime.jsx(CustomLegend, {}),
+            wrapperStyle: {
+              paddingLeft: legendPadding?.left ? legendPadding.left : '55px',
+              paddingTop: legendPadding?.top ? legendPadding.top : '10px',
+              paddingBottom: legendPadding?.bottom ? legendPadding.bottom : '0',
+              paddingRight: legendPadding?.right ? legendPadding.right : '0'
+            }
+          }), bars?.length && bars.map((bar, index) => {
             return /*#__PURE__*/jsxRuntime.jsx(recharts.Bar, {
               dataKey: bar.dataKey,
               fill: bar.fill,
               name: bar.name,
               maxBarSize: 50,
               onClick: handleBarClick,
+              stackId: "stack",
               children: data?.length && data.map((_, index) => {
                 return /*#__PURE__*/jsxRuntime.jsx(recharts.Cell, {
                   cursor: "pointer",
-                  fill: index === selectedIndex ? theme.primary5darker : theme.primary,
+                  fill: index === selectedIndex || index === hoverIndex ? theme.primary5darker : bar.fill,
+                  onMouseEnter: () => setHoverIndex(index),
+                  onMouseLeave: () => setHoverIndex(undefined),
                   className: "bar-cell"
                 }, `cell-${index}`);
               })

package/esm/core/BarChartWithCustomizedEvent/index.js CHANGED Viewed

@@ -1,8 +1,9 @@
-import { Bar, BarChart, CartesianGrid, Cell, ResponsiveContainer, XAxis, YAxis } from 'recharts';
-import React from 'react';
+import { Bar, BarChart, CartesianGrid, Cell, Legend, ResponsiveContainer, XAxis, YAxis } from 'recharts';
+import React, { useState } from 'react';
 import { formatAxisPrice } from '../../utils/formatGraphPrice';
 import { useTheme } from '@emotion/react';
 import { CustomEventBarChartContainer } from './styles';
+import { CustomLegend } from '../../shared/recharts/CustomLegend';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export const BarChartWithCustomizedEvent = ({
@@ -21,11 +22,15 @@ export const BarChartWithCustomizedEvent = ({
   legendVAlign = 'bottom',
   margin,
   legendPadding,
+  legend = false,
   layout = 'horizontal',
   onClickBar,
+  tickFormatterX = e => e,
+  tickFormatterY,
   ...rest
 }) => {
   const theme = useTheme();
+  const [hoverIndex, setHoverIndex] = useState(undefined);
   const handleBarClick = (_, index) => {
     const identicalIndex = index === selectedIndex;
@@ -62,24 +67,38 @@ export const BarChartWithCustomizedEvent = ({
           axisLine: xAxisLine && xAxisLine,
           tickLine: tickLineX && tickLineX,
           type: layout === 'vertical' ? 'number' : 'category',
+          tickFormatter: tickFormatterX,
           tickMargin: 5
         }), /*#__PURE__*/_jsx(YAxis, {
           dataKey: yAxisDataKey && yAxisDataKey,
           axisLine: yAxisLine && yAxisLine,
           tickLine: tickLineY && tickLineY,
           type: layout === 'vertical' ? 'category' : 'number',
-          tickFormatter: formatAxisPrice
-        }), bars?.length && bars.map(bar => {
+          tickFormatter: tickFormatterY ? tickFormatterY : formatAxisPrice
+        }), legend && /*#__PURE__*/_jsx(Legend, {
+          verticalAlign: legendVAlign && legendVAlign,
+          align: legendHAlign && legendHAlign,
+          content: /*#__PURE__*/_jsx(CustomLegend, {}),
+          wrapperStyle: {
+            paddingLeft: legendPadding?.left ? legendPadding.left : '55px',
+            paddingTop: legendPadding?.top ? legendPadding.top : '10px',
+            paddingBottom: legendPadding?.bottom ? legendPadding.bottom : '0',
+            paddingRight: legendPadding?.right ? legendPadding.right : '0'
+          }
+        }), bars?.length && bars.map((bar, index) => {
           return /*#__PURE__*/_jsx(Bar, {
             dataKey: bar.dataKey,
             fill: bar.fill,
             name: bar.name,
             maxBarSize: 50,
             onClick: handleBarClick,
+            stackId: "stack",
             children: data?.length && data.map((_, index) => {
               return /*#__PURE__*/_jsx(Cell, {
                 cursor: "pointer",
-                fill: index === selectedIndex ? theme.primary5darker : theme.primary,
+                fill: index === selectedIndex || index === hoverIndex ? theme.primary5darker : bar.fill,
+                onMouseEnter: () => setHoverIndex(index),
+                onMouseLeave: () => setHoverIndex(undefined),
                 className: "bar-cell"
               }, `cell-${index}`);
             })

package/lib/core/BarChartWithCustomizedEvent/index.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Bar, Margin } from 'recharts';
+import { Bar, Margin, TickFormatterFunction } from 'recharts';
 import React from 'react';
 interface IProps extends Partial<Bar> {
     /** The source data. Example format: [{name: string, value: string}]. Name is required*/
@@ -14,6 +14,8 @@ interface IProps extends Partial<Bar> {
     /**yAxisDataKey: Looks at a property in the data source which will provide a name for each entry in the chart */
     /** selectedIndex: Will update the selected index */
     selectedIndex: number;
+    /** legend: show legend or not: Default is false */
+    legend?: boolean;
     yAxisDataKey?: string;
     /** Height: default to 350px */
     height?: string;
@@ -44,7 +46,10 @@ interface IProps extends Partial<Bar> {
     layout?: 'horizontal' | 'vertical';
     /** onClickBar: fires when clicking a bar. Returns an object with the pattern of your data */
     onClickBar?: (item: any) => void;
-    onParentDeselect?: (e: any) => void;
+    /**tickFormatterX: formatter function of  X-axis tick  */
+    tickFormatterX?: TickFormatterFunction;
+    /**tickFormatterY: formatter function of Y-axis tick  */
+    tickFormatterY?: TickFormatterFunction;
 }
 export declare const BarChartWithCustomizedEvent: React.FC<IProps>;
 export default BarChartWithCustomizedEvent;

package/lib/core/BarChartWithCustomizedEvent/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/BarChartWithCustomizedEvent/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,GAAG,~~EAIH~~,MAAM,~~EAIP~~,MAAM,UAAU,CAAA;AACjB,OAAO,~~KAAK~~,MAAM,OAAO,CAAA;~~AAKzB~~,UAAU,MAAO,SAAQ,OAAO,CAAC,GAAG,CAAC;IACnC,wFAAwF;IACxF,IAAI,EAAE,GAAG,EAAE,CAAA;IACX,wMAAwM;IACxM,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IACvD,iHAAiH;IACjH,YAAY,EAAE,MAAM,CAAA;IACpB,gHAAgH;IAChH,oDAAoD;IACpD,aAAa,EAAE,MAAM,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,sEAAsE;IACtE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,qEAAqE;IACrE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,wDAAwD;IACxD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,wDAAwD;IACxD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,uFAAuF;IACvF,YAAY,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;IAC1C,uFAAuF;IACvF,YAAY,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAA;IAC1C,6FAA6F;IAC7F,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,wGAAwG;IACxG,aAAa,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAA;IAC5E,sEAAsE;IACtE,MAAM,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IAClC,6FAA6F;IAC7F,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAA;IAChC,~~gBAAgB~~,CAAC,EAAE,~~CAAC~~,CAAC,EAAE,~~GAAG~~,~~KAAK,IAAI,~~CAAA;~~CACpC~~;AAED,eAAO,MAAM,2BAA2B,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,~~CA2FxD~~,CAAA;AAED,eAAe,2BAA2B,CAAA"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/BarChartWithCustomizedEvent/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,GAAG,EAKH,MAAM,EAEN,qBAAqB,EAGtB,MAAM,UAAU,CAAA;AACjB,OAAO,KAAmB,MAAM,OAAO,CAAA;AAMvC,UAAU,MAAO,SAAQ,OAAO,CAAC,GAAG,CAAC;IACnC,wFAAwF;IACxF,IAAI,EAAE,GAAG,EAAE,CAAA;IACX,wMAAwM;IACxM,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IACvD,iHAAiH;IACjH,YAAY,EAAE,MAAM,CAAA;IACpB,gHAAgH;IAChH,oDAAoD;IACpD,aAAa,EAAE,MAAM,CAAA;IACrB,mDAAmD;IACnD,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,sEAAsE;IACtE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,qEAAqE;IACrE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,wDAAwD;IACxD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,wDAAwD;IACxD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,uFAAuF;IACvF,YAAY,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;IAC1C,uFAAuF;IACvF,YAAY,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAA;IAC1C,6FAA6F;IAC7F,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,wGAAwG;IACxG,aAAa,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAA;IAC5E,sEAAsE;IACtE,MAAM,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IAClC,6FAA6F;IAC7F,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAA;IAChC,yDAAyD;IACzD,cAAc,CAAC,EAAE,qBAAqB,CAAA;IACtC,wDAAwD;IACxD,cAAc,CAAC,EAAE,qBAAqB,CAAA;CAEvC;AAED,eAAO,MAAM,2BAA2B,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAkHxD,CAAA;AAED,eAAe,2BAA2B,CAAA"}

package/lib/core/BarChartWithCustomizedEvent/index.js CHANGED Viewed

@@ -1,8 +1,9 @@
-import { Bar, BarChart, CartesianGrid, Cell, ResponsiveContainer, XAxis, YAxis } from 'recharts';
-import React from 'react';
+import { Bar, BarChart, CartesianGrid, Cell, Legend, ResponsiveContainer, XAxis, YAxis } from 'recharts';
+import React, { useState } from 'react';
 import { formatAxisPrice } from '../../utils/formatGraphPrice';
 import { useTheme } from '@emotion/react';
 import { CustomEventBarChartContainer } from './styles';
+import { CustomLegend } from '../../shared/recharts/CustomLegend';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export const BarChartWithCustomizedEvent = ({
@@ -21,11 +22,15 @@ export const BarChartWithCustomizedEvent = ({
   legendVAlign = 'bottom',
   margin,
   legendPadding,
+  legend = false,
   layout = 'horizontal',
   onClickBar,
+  tickFormatterX = e => e,
+  tickFormatterY,
   ...rest
 }) => {
   const theme = useTheme();
+  const [hoverIndex, setHoverIndex] = useState(undefined);
   const handleBarClick = (_, index) => {
     const identicalIndex = index === selectedIndex;
@@ -62,24 +67,38 @@ export const BarChartWithCustomizedEvent = ({
           axisLine: xAxisLine && xAxisLine,
           tickLine: tickLineX && tickLineX,
           type: layout === 'vertical' ? 'number' : 'category',
+          tickFormatter: tickFormatterX,
           tickMargin: 5
         }), /*#__PURE__*/_jsx(YAxis, {
           dataKey: yAxisDataKey && yAxisDataKey,
           axisLine: yAxisLine && yAxisLine,
           tickLine: tickLineY && tickLineY,
           type: layout === 'vertical' ? 'category' : 'number',
-          tickFormatter: formatAxisPrice
-        }), bars?.length && bars.map(bar => {
+          tickFormatter: tickFormatterY ? tickFormatterY : formatAxisPrice
+        }), legend && /*#__PURE__*/_jsx(Legend, {
+          verticalAlign: legendVAlign && legendVAlign,
+          align: legendHAlign && legendHAlign,
+          content: /*#__PURE__*/_jsx(CustomLegend, {}),
+          wrapperStyle: {
+            paddingLeft: legendPadding?.left ? legendPadding.left : '55px',
+            paddingTop: legendPadding?.top ? legendPadding.top : '10px',
+            paddingBottom: legendPadding?.bottom ? legendPadding.bottom : '0',
+            paddingRight: legendPadding?.right ? legendPadding.right : '0'
+          }
+        }), bars?.length && bars.map((bar, index) => {
           return /*#__PURE__*/_jsx(Bar, {
             dataKey: bar.dataKey,
             fill: bar.fill,
             name: bar.name,
             maxBarSize: 50,
             onClick: handleBarClick,
+            stackId: "stack",
             children: data?.length && data.map((_, index) => {
               return /*#__PURE__*/_jsx(Cell, {
                 cursor: "pointer",
-                fill: index === selectedIndex ? theme.primary5darker : theme.primary,
+                fill: index === selectedIndex || index === hoverIndex ? theme.primary5darker : bar.fill,
+                onMouseEnter: () => setHoverIndex(index),
+                onMouseLeave: () => setHoverIndex(undefined),
                 className: "bar-cell"
               }, `cell-${index}`);
             })

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@bbl-digital/snorre",
-  "version": "2.2.11",
+  "version": "2.2.12",
   "description": "Design library for BBL Digital",
   "license": "MIT",
   "main": "./lib/index.js",