@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
  1. package/dist/bundle.js +21 -3
  2. package/esm/core/BarChartWithCustomizedEvent/index.js +24 -5
  3. package/lib/core/BarChartWithCustomizedEvent/index.d.ts +7 -2
  4. package/lib/core/BarChartWithCustomizedEvent/index.d.ts.map +1 -1
  5. package/lib/core/BarChartWithCustomizedEvent/index.js +24 -5
  6. package/package.json +1 -1
package/dist/bundle.js CHANGED
@@ -24846,11 +24846,15 @@
24846
24846
  legendVAlign = 'bottom',
24847
24847
  margin,
24848
24848
  legendPadding,
24849
+ legend = false,
24849
24850
  layout = 'horizontal',
24850
24851
  onClickBar,
24852
+ tickFormatterX = e => e,
24853
+ tickFormatterY,
24851
24854
  ...rest
24852
24855
  }) => {
24853
24856
  const theme = react.useTheme();
24857
+ const [hoverIndex, setHoverIndex] = React.useState(undefined);
24854
24858
 
24855
24859
  const handleBarClick = (_, index) => {
24856
24860
  const identicalIndex = index === selectedIndex;
@@ -24887,24 +24891,38 @@
24887
24891
  axisLine: xAxisLine && xAxisLine,
24888
24892
  tickLine: tickLineX && tickLineX,
24889
24893
  type: layout === 'vertical' ? 'number' : 'category',
24894
+ tickFormatter: tickFormatterX,
24890
24895
  tickMargin: 5
24891
24896
  }), /*#__PURE__*/jsxRuntime.jsx(recharts.YAxis, {
24892
24897
  dataKey: yAxisDataKey && yAxisDataKey,
24893
24898
  axisLine: yAxisLine && yAxisLine,
24894
24899
  tickLine: tickLineY && tickLineY,
24895
24900
  type: layout === 'vertical' ? 'category' : 'number',
24896
- tickFormatter: formatAxisPrice
24897
- }), bars?.length && bars.map(bar => {
24901
+ tickFormatter: tickFormatterY ? tickFormatterY : formatAxisPrice
24902
+ }), legend && /*#__PURE__*/jsxRuntime.jsx(recharts.Legend, {
24903
+ verticalAlign: legendVAlign && legendVAlign,
24904
+ align: legendHAlign && legendHAlign,
24905
+ content: /*#__PURE__*/jsxRuntime.jsx(CustomLegend, {}),
24906
+ wrapperStyle: {
24907
+ paddingLeft: legendPadding?.left ? legendPadding.left : '55px',
24908
+ paddingTop: legendPadding?.top ? legendPadding.top : '10px',
24909
+ paddingBottom: legendPadding?.bottom ? legendPadding.bottom : '0',
24910
+ paddingRight: legendPadding?.right ? legendPadding.right : '0'
24911
+ }
24912
+ }), bars?.length && bars.map((bar, index) => {
24898
24913
  return /*#__PURE__*/jsxRuntime.jsx(recharts.Bar, {
24899
24914
  dataKey: bar.dataKey,
24900
24915
  fill: bar.fill,
24901
24916
  name: bar.name,
24902
24917
  maxBarSize: 50,
24903
24918
  onClick: handleBarClick,
24919
+ stackId: "stack",
24904
24920
  children: data?.length && data.map((_, index) => {
24905
24921
  return /*#__PURE__*/jsxRuntime.jsx(recharts.Cell, {
24906
24922
  cursor: "pointer",
24907
- fill: index === selectedIndex ? theme.primary5darker : theme.primary,
24923
+ fill: index === selectedIndex || index === hoverIndex ? theme.primary5darker : bar.fill,
24924
+ onMouseEnter: () => setHoverIndex(index),
24925
+ onMouseLeave: () => setHoverIndex(undefined),
24908
24926
  className: "bar-cell"
24909
24927
  }, `cell-${index}`);
24910
24928
  })
package/esm/core/BarChartWithCustomizedEvent/index.js CHANGED
@@ -1,8 +1,9 @@
1
- import { Bar, BarChart, CartesianGrid, Cell, ResponsiveContainer, XAxis, YAxis } from 'recharts';
2
- import React from 'react';
1
+ import { Bar, BarChart, CartesianGrid, Cell, Legend, ResponsiveContainer, XAxis, YAxis } from 'recharts';
2
+ import React, { useState } from 'react';
3
3
  import { formatAxisPrice } from '../../utils/formatGraphPrice';
4
4
  import { useTheme } from '@emotion/react';
5
5
  import { CustomEventBarChartContainer } from './styles';
6
+ import { CustomLegend } from '../../shared/recharts/CustomLegend';
6
7
  import { jsx as _jsx } from "react/jsx-runtime";
7
8
  import { jsxs as _jsxs } from "react/jsx-runtime";
8
9
  export const BarChartWithCustomizedEvent = ({
@@ -21,11 +22,15 @@ export const BarChartWithCustomizedEvent = ({
21
22
  legendVAlign = 'bottom',
22
23
  margin,
23
24
  legendPadding,
25
+ legend = false,
24
26
  layout = 'horizontal',
25
27
  onClickBar,
28
+ tickFormatterX = e => e,
29
+ tickFormatterY,
26
30
  ...rest
27
31
  }) => {
28
32
  const theme = useTheme();
33
+ const [hoverIndex, setHoverIndex] = useState(undefined);
29
34
 
30
35
  const handleBarClick = (_, index) => {
31
36
  const identicalIndex = index === selectedIndex;
@@ -62,24 +67,38 @@ export const BarChartWithCustomizedEvent = ({
62
67
  axisLine: xAxisLine && xAxisLine,
63
68
  tickLine: tickLineX && tickLineX,
64
69
  type: layout === 'vertical' ? 'number' : 'category',
70
+ tickFormatter: tickFormatterX,
65
71
  tickMargin: 5
66
72
  }), /*#__PURE__*/_jsx(YAxis, {
67
73
  dataKey: yAxisDataKey && yAxisDataKey,
68
74
  axisLine: yAxisLine && yAxisLine,
69
75
  tickLine: tickLineY && tickLineY,
70
76
  type: layout === 'vertical' ? 'category' : 'number',
71
- tickFormatter: formatAxisPrice
72
- }), bars?.length && bars.map(bar => {
77
+ tickFormatter: tickFormatterY ? tickFormatterY : formatAxisPrice
78
+ }), legend && /*#__PURE__*/_jsx(Legend, {
79
+ verticalAlign: legendVAlign && legendVAlign,
80
+ align: legendHAlign && legendHAlign,
81
+ content: /*#__PURE__*/_jsx(CustomLegend, {}),
82
+ wrapperStyle: {
83
+ paddingLeft: legendPadding?.left ? legendPadding.left : '55px',
84
+ paddingTop: legendPadding?.top ? legendPadding.top : '10px',
85
+ paddingBottom: legendPadding?.bottom ? legendPadding.bottom : '0',
86
+ paddingRight: legendPadding?.right ? legendPadding.right : '0'
87
+ }
88
+ }), bars?.length && bars.map((bar, index) => {
73
89
  return /*#__PURE__*/_jsx(Bar, {
74
90
  dataKey: bar.dataKey,
75
91
  fill: bar.fill,
76
92
  name: bar.name,
77
93
  maxBarSize: 50,
78
94
  onClick: handleBarClick,
95
+ stackId: "stack",
79
96
  children: data?.length && data.map((_, index) => {
80
97
  return /*#__PURE__*/_jsx(Cell, {
81
98
  cursor: "pointer",
82
- fill: index === selectedIndex ? theme.primary5darker : theme.primary,
99
+ fill: index === selectedIndex || index === hoverIndex ? theme.primary5darker : bar.fill,
100
+ onMouseEnter: () => setHoverIndex(index),
101
+ onMouseLeave: () => setHoverIndex(undefined),
83
102
  className: "bar-cell"
84
103
  }, `cell-${index}`);
85
104
  })
package/lib/core/BarChartWithCustomizedEvent/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { Bar, Margin } from 'recharts';
1
+ import { Bar, Margin, TickFormatterFunction } from 'recharts';
2
2
  import React from 'react';
3
3
  interface IProps extends Partial<Bar> {
4
4
  /** The source data. Example format: [{name: string, value: string}]. Name is required*/
@@ -14,6 +14,8 @@ interface IProps extends Partial<Bar> {
14
14
  /**yAxisDataKey: Looks at a property in the data source which will provide a name for each entry in the chart */
15
15
  /** selectedIndex: Will update the selected index */
16
16
  selectedIndex: number;
17
+ /** legend: show legend or not: Default is false */
18
+ legend?: boolean;
17
19
  yAxisDataKey?: string;
18
20
  /** Height: default to 350px */
19
21
  height?: string;
@@ -44,7 +46,10 @@ interface IProps extends Partial<Bar> {
44
46
  layout?: 'horizontal' | 'vertical';
45
47
  /** onClickBar: fires when clicking a bar. Returns an object with the pattern of your data */
46
48
  onClickBar?: (item: any) => void;
47
- onParentDeselect?: (e: any) => void;
49
+ /**tickFormatterX: formatter function of X-axis tick */
50
+ tickFormatterX?: TickFormatterFunction;
51
+ /**tickFormatterY: formatter function of Y-axis tick */
52
+ tickFormatterY?: TickFormatterFunction;
48
53
  }
49
54
  export declare const BarChartWithCustomizedEvent: React.FC<IProps>;
50
55
  export default BarChartWithCustomizedEvent;
package/lib/core/BarChartWithCustomizedEvent/index.d.ts.map CHANGED
@@ -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
@@ -1,8 +1,9 @@
1
- import { Bar, BarChart, CartesianGrid, Cell, ResponsiveContainer, XAxis, YAxis } from 'recharts';
2
- import React from 'react';
1
+ import { Bar, BarChart, CartesianGrid, Cell, Legend, ResponsiveContainer, XAxis, YAxis } from 'recharts';
2
+ import React, { useState } from 'react';
3
3
  import { formatAxisPrice } from '../../utils/formatGraphPrice';
4
4
  import { useTheme } from '@emotion/react';
5
5
  import { CustomEventBarChartContainer } from './styles';
6
+ import { CustomLegend } from '../../shared/recharts/CustomLegend';
6
7
  import { jsx as _jsx } from "react/jsx-runtime";
7
8
  import { jsxs as _jsxs } from "react/jsx-runtime";
8
9
  export const BarChartWithCustomizedEvent = ({
@@ -21,11 +22,15 @@ export const BarChartWithCustomizedEvent = ({
21
22
  legendVAlign = 'bottom',
22
23
  margin,
23
24
  legendPadding,
25
+ legend = false,
24
26
  layout = 'horizontal',
25
27
  onClickBar,
28
+ tickFormatterX = e => e,
29
+ tickFormatterY,
26
30
  ...rest
27
31
  }) => {
28
32
  const theme = useTheme();
33
+ const [hoverIndex, setHoverIndex] = useState(undefined);
29
34
 
30
35
  const handleBarClick = (_, index) => {
31
36
  const identicalIndex = index === selectedIndex;
@@ -62,24 +67,38 @@ export const BarChartWithCustomizedEvent = ({
62
67
  axisLine: xAxisLine && xAxisLine,
63
68
  tickLine: tickLineX && tickLineX,
64
69
  type: layout === 'vertical' ? 'number' : 'category',
70
+ tickFormatter: tickFormatterX,
65
71
  tickMargin: 5
66
72
  }), /*#__PURE__*/_jsx(YAxis, {
67
73
  dataKey: yAxisDataKey && yAxisDataKey,
68
74
  axisLine: yAxisLine && yAxisLine,
69
75
  tickLine: tickLineY && tickLineY,
70
76
  type: layout === 'vertical' ? 'category' : 'number',
71
- tickFormatter: formatAxisPrice
72
- }), bars?.length && bars.map(bar => {
77
+ tickFormatter: tickFormatterY ? tickFormatterY : formatAxisPrice
78
+ }), legend && /*#__PURE__*/_jsx(Legend, {
79
+ verticalAlign: legendVAlign && legendVAlign,
80
+ align: legendHAlign && legendHAlign,
81
+ content: /*#__PURE__*/_jsx(CustomLegend, {}),
82
+ wrapperStyle: {
83
+ paddingLeft: legendPadding?.left ? legendPadding.left : '55px',
84
+ paddingTop: legendPadding?.top ? legendPadding.top : '10px',
85
+ paddingBottom: legendPadding?.bottom ? legendPadding.bottom : '0',
86
+ paddingRight: legendPadding?.right ? legendPadding.right : '0'
87
+ }
88
+ }), bars?.length && bars.map((bar, index) => {
73
89
  return /*#__PURE__*/_jsx(Bar, {
74
90
  dataKey: bar.dataKey,
75
91
  fill: bar.fill,
76
92
  name: bar.name,
77
93
  maxBarSize: 50,
78
94
  onClick: handleBarClick,
95
+ stackId: "stack",
79
96
  children: data?.length && data.map((_, index) => {
80
97
  return /*#__PURE__*/_jsx(Cell, {
81
98
  cursor: "pointer",
82
- fill: index === selectedIndex ? theme.primary5darker : theme.primary,
99
+ fill: index === selectedIndex || index === hoverIndex ? theme.primary5darker : bar.fill,
100
+ onMouseEnter: () => setHoverIndex(index),
101
+ onMouseLeave: () => setHoverIndex(undefined),
83
102
  className: "bar-cell"
84
103
  }, `cell-${index}`);
85
104
  })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bbl-digital/snorre",
3
- "version": "2.2.11",
3
+ "version": "2.2.12",
4
4
  "description": "Design library for BBL Digital",
5
5
  "license": "MIT",
6
6
  "main": "./lib/index.js",