@bbl-digital/snorre 4.0.62 → 4.0.65

Sign up to get free protection for your applications and to get access to all the features.
Files changed (14) hide show
  1. package/dist/bundle.js +24 -9
  2. package/esm/core/BarAndLineComposedChart/BarAndLineComposedChart.stories.js +88 -0
  3. package/esm/core/BarAndLineComposedChart/index.js +18 -7
  4. package/esm/core/PieChart/index.js +6 -2
  5. package/lib/core/BarAndLineComposedChart/BarAndLineComposedChart.stories.d.ts +4 -0
  6. package/lib/core/BarAndLineComposedChart/BarAndLineComposedChart.stories.d.ts.map +1 -1
  7. package/lib/core/BarAndLineComposedChart/BarAndLineComposedChart.stories.js +88 -0
  8. package/lib/core/BarAndLineComposedChart/index.d.ts +10 -1
  9. package/lib/core/BarAndLineComposedChart/index.d.ts.map +1 -1
  10. package/lib/core/BarAndLineComposedChart/index.js +18 -7
  11. package/lib/core/PieChart/index.d.ts +3 -0
  12. package/lib/core/PieChart/index.d.ts.map +1 -1
  13. package/lib/core/PieChart/index.js +6 -2
  14. package/package.json +1 -1
package/dist/bundle.js CHANGED
@@ -26224,12 +26224,15 @@
26224
26224
  data,
26225
26225
  subtitlePrefix,
26226
26226
  defaultSubtitle,
26227
+ defaultActiveIndex,
26227
26228
  active,
26228
26229
  opacity,
26229
26230
  onActiveChange,
26231
+ customMiddleText,
26232
+ customMiddleValue,
26230
26233
  ...rest
26231
26234
  }) => {
26232
- const [activeIndex, setActiveIndex] = React.useState();
26235
+ const [activeIndex, setActiveIndex] = React.useState(defaultActiveIndex && defaultActiveIndex < data.length ? defaultActiveIndex : undefined);
26233
26236
  const [hoverIndex, setHoverIndex] = React.useState(null);
26234
26237
 
26235
26238
  /** When active is handled from the outside */
@@ -26249,6 +26252,7 @@
26249
26252
 
26250
26253
  /** Avoids re-renders by memoizing parameters */
26251
26254
  const calculateTitle = React.useMemo(() => {
26255
+ if (customMiddleText) return customMiddleText;
26252
26256
  const activeItemTitle = activeIndex !== undefined ? data[activeIndex].title : defaultSubtitle;
26253
26257
  return subtitlePrefix ? `${subtitlePrefix} ${activeItemTitle?.toLocaleLowerCase()}` : activeItemTitle;
26254
26258
  }, [activeIndex, data, defaultSubtitle, subtitlePrefix]);
@@ -26278,7 +26282,7 @@
26278
26282
  valueAccessor: () => {}
26279
26283
  // @ts-ignore
26280
26284
  ,
26281
- content: renderTextContent(activeItemValue, calculateTitle)
26285
+ content: renderTextContent(customMiddleValue || activeItemValue, calculateTitle)
26282
26286
  }), data.map((entry, index) => /*#__PURE__*/jsxRuntime$1.jsx(recharts.Cell, {
26283
26287
  fill: hoverIndex === index || activeIndex === index ? entry.color : alpha(entry.color || '#000000', 70),
26284
26288
  role: "presentation",
@@ -26653,6 +26657,14 @@
26653
26657
  legendPadding,
26654
26658
  layout = 'horizontal',
26655
26659
  lineStrokeWidth = 1,
26660
+ hasYAxis = true,
26661
+ cartesianGrid = true,
26662
+ legend = true,
26663
+ stack = true,
26664
+ referenceLine = true,
26665
+ maxBarSize,
26666
+ barGap,
26667
+ barRadius,
26656
26668
  ...rest
26657
26669
  }) => {
26658
26670
  return /*#__PURE__*/jsxRuntime$1.jsx(BarAndLineComposedChartContainer, {
@@ -26670,8 +26682,12 @@
26670
26682
  },
26671
26683
  layout: layout && layout,
26672
26684
  stackOffset: "sign",
26685
+ barGap: barGap,
26673
26686
  ...rest,
26674
- children: [/*#__PURE__*/jsxRuntime$1.jsx(recharts.CartesianGrid, {
26687
+ children: [referenceLine && /*#__PURE__*/jsxRuntime$1.jsx(recharts.ReferenceLine, {
26688
+ y: 0,
26689
+ stroke: "white"
26690
+ }), cartesianGrid && /*#__PURE__*/jsxRuntime$1.jsx(recharts.CartesianGrid, {
26675
26691
  strokeDasharray: "0",
26676
26692
  vertical: false
26677
26693
  }), /*#__PURE__*/jsxRuntime$1.jsx(recharts.XAxis, {
@@ -26681,10 +26697,7 @@
26681
26697
  type: layout === 'vertical' ? 'number' : 'category',
26682
26698
  tickMargin: 5,
26683
26699
  tickFormatter: formatAxisPrice
26684
- }), /*#__PURE__*/jsxRuntime$1.jsx(recharts.ReferenceLine, {
26685
- y: 0,
26686
- stroke: "white"
26687
- }), /*#__PURE__*/jsxRuntime$1.jsx(recharts.YAxis, {
26700
+ }), hasYAxis && /*#__PURE__*/jsxRuntime$1.jsx(recharts.YAxis, {
26688
26701
  dataKey: yAxisDataKey && yAxisDataKey,
26689
26702
  axisLine: yAxisLine && yAxisLine,
26690
26703
  tickLine: tickLineY && tickLineY,
@@ -26695,7 +26708,7 @@
26695
26708
  barConfig: bars && bars,
26696
26709
  lineConfig: lines && lines
26697
26710
  })
26698
- }), /*#__PURE__*/jsxRuntime$1.jsx(recharts.Legend, {
26711
+ }), legend && /*#__PURE__*/jsxRuntime$1.jsx(recharts.Legend, {
26699
26712
  verticalAlign: legendVAlign && legendVAlign,
26700
26713
  align: legendHAlign && legendHAlign,
26701
26714
  content: /*#__PURE__*/jsxRuntime$1.jsx(CustomLegend, {}),
@@ -26710,7 +26723,9 @@
26710
26723
  dataKey: bar.dataKey,
26711
26724
  fill: bar.fill,
26712
26725
  name: bar.name,
26713
- stackId: "stack"
26726
+ maxBarSize: maxBarSize || undefined,
26727
+ stackId: stack ? 'stack' : undefined,
26728
+ radius: barRadius
26714
26729
  }, bar.name);
26715
26730
  }), lines?.length && lines.map(line => {
26716
26731
  return /*#__PURE__*/jsxRuntime$1.jsx(recharts.Line, {
package/esm/core/BarAndLineComposedChart/BarAndLineComposedChart.stories.js CHANGED
@@ -65,6 +65,67 @@ const DefaultData = [{
65
65
  kostnad: -5500,
66
66
  akkumulert: 50500
67
67
  }];
68
+ const ValuePairData = [{
69
+ name: 'Jan',
70
+ inntekt: 40000,
71
+ kostnad: 23000,
72
+ stackId: ''
73
+ }, {
74
+ name: 'Feb',
75
+ inntekt: 60000,
76
+ kostnad: 25000,
77
+ stackId: ''
78
+ }, {
79
+ name: 'Mars',
80
+ inntekt: 50000,
81
+ kostnad: 34000,
82
+ stackId: ''
83
+ }, {
84
+ name: 'April',
85
+ inntekt: 55000,
86
+ kostnad: 20000,
87
+ stackId: ''
88
+ }, {
89
+ name: 'Mai',
90
+ inntekt: 54400,
91
+ kostnad: 30000,
92
+ stackId: ''
93
+ }, {
94
+ name: 'Jun',
95
+ inntekt: 65000,
96
+ kostnad: 25000,
97
+ stackId: ''
98
+ }, {
99
+ name: 'Jul',
100
+ inntekt: 43000,
101
+ kostnad: 30000,
102
+ stackId: ''
103
+ }, {
104
+ name: 'Aug',
105
+ inntekt: 60000,
106
+ kostnad: 40000,
107
+ stackId: ''
108
+ }, {
109
+ name: 'Sept',
110
+ inntekt: 70000,
111
+ kostnad: 50000,
112
+ stackId: ''
113
+ }, {
114
+ name: 'Okt',
115
+ inntekt: 60000,
116
+ kostnad: 34000,
117
+ stackId: ''
118
+ }, {
119
+ name: 'Nov',
120
+ inntekt: 40040,
121
+ kostnad: 24000,
122
+ stackId: ''
123
+ }, {
124
+ name: 'Des',
125
+ inntekt: 56000,
126
+ kostnad: 5500,
127
+ stackId: ''
128
+ }];
68
129
  export const Default = {
69
130
  render: (_args, {
70
131
  loaded: {
@@ -91,4 +152,31 @@ export const Default = {
91
152
  xAxisDataKey: "name"
92
153
  }),
93
154
  name: 'Default'
155
+ };
156
+ export const ValuePair = {
157
+ render: (_args, {
158
+ loaded: {
159
+ theme
160
+ }
161
+ }) => /*#__PURE__*/_jsx(BarAndLineComposedChart, {
162
+ data: ValuePairData,
163
+ bars: [{
164
+ name: 'Inntekt',
165
+ dataKey: 'inntekt',
166
+ fill: theme.primary50opa
167
+ }, {
168
+ name: 'Kostnad',
169
+ dataKey: 'kostnad',
170
+ fill: theme.primary
171
+ }],
172
+ hasYAxis: false,
173
+ cartesianGrid: false,
174
+ xAxisDataKey: "name",
175
+ stack: false,
176
+ maxBarSize: 10,
177
+ barGap: -20,
178
+ barRadius: 30,
179
+ legend: false
180
+ }),
181
+ name: 'ValuePair'
94
182
  };
package/esm/core/BarAndLineComposedChart/index.js CHANGED
@@ -24,6 +24,14 @@ const BarAndLineComposedChart = ({
24
24
  legendPadding,
25
25
  layout = 'horizontal',
26
26
  lineStrokeWidth = 1,
27
+ hasYAxis = true,
28
+ cartesianGrid = true,
29
+ legend = true,
30
+ stack = true,
31
+ referenceLine = true,
32
+ maxBarSize,
33
+ barGap,
34
+ barRadius,
27
35
  ...rest
28
36
  }) => {
29
37
  return /*#__PURE__*/_jsx(BarAndLineComposedChartContainer, {
@@ -41,8 +49,12 @@ const BarAndLineComposedChart = ({
41
49
  },
42
50
  layout: layout && layout,
43
51
  stackOffset: "sign",
52
+ barGap: barGap,
44
53
  ...rest,
45
- children: [/*#__PURE__*/_jsx(CartesianGrid, {
54
+ children: [referenceLine && /*#__PURE__*/_jsx(ReferenceLine, {
55
+ y: 0,
56
+ stroke: "white"
57
+ }), cartesianGrid && /*#__PURE__*/_jsx(CartesianGrid, {
46
58
  strokeDasharray: "0",
47
59
  vertical: false
48
60
  }), /*#__PURE__*/_jsx(XAxis, {
@@ -52,10 +64,7 @@ const BarAndLineComposedChart = ({
52
64
  type: layout === 'vertical' ? 'number' : 'category',
53
65
  tickMargin: 5,
54
66
  tickFormatter: formatAxisPrice
55
- }), /*#__PURE__*/_jsx(ReferenceLine, {
56
- y: 0,
57
- stroke: "white"
58
- }), /*#__PURE__*/_jsx(YAxis, {
67
+ }), hasYAxis && /*#__PURE__*/_jsx(YAxis, {
59
68
  dataKey: yAxisDataKey && yAxisDataKey,
60
69
  axisLine: yAxisLine && yAxisLine,
61
70
  tickLine: tickLineY && tickLineY,
@@ -66,7 +75,7 @@ const BarAndLineComposedChart = ({
66
75
  barConfig: bars && bars,
67
76
  lineConfig: lines && lines
68
77
  })
69
- }), /*#__PURE__*/_jsx(Legend, {
78
+ }), legend && /*#__PURE__*/_jsx(Legend, {
70
79
  verticalAlign: legendVAlign && legendVAlign,
71
80
  align: legendHAlign && legendHAlign,
72
81
  content: /*#__PURE__*/_jsx(CustomLegend, {}),
@@ -81,7 +90,9 @@ const BarAndLineComposedChart = ({
81
90
  dataKey: bar.dataKey,
82
91
  fill: bar.fill,
83
92
  name: bar.name,
84
- stackId: "stack"
93
+ maxBarSize: maxBarSize || undefined,
94
+ stackId: stack ? 'stack' : undefined,
95
+ radius: barRadius
85
96
  }, bar.name);
86
97
  }), lines?.length && lines.map(line => {
87
98
  return /*#__PURE__*/_jsx(Line, {
package/esm/core/PieChart/index.js CHANGED
@@ -12,12 +12,15 @@ const PieChart = ({
12
12
  data,
13
13
  subtitlePrefix,
14
14
  defaultSubtitle,
15
+ defaultActiveIndex,
15
16
  active,
16
17
  opacity,
17
18
  onActiveChange,
19
+ customMiddleText,
20
+ customMiddleValue,
18
21
  ...rest
19
22
  }) => {
20
- const [activeIndex, setActiveIndex] = useState();
23
+ const [activeIndex, setActiveIndex] = useState(defaultActiveIndex && defaultActiveIndex < data.length ? defaultActiveIndex : undefined);
21
24
  const [hoverIndex, setHoverIndex] = useState(null);
22
25
 
23
26
  /** When active is handled from the outside */
@@ -37,6 +40,7 @@ const PieChart = ({
37
40
 
38
41
  /** Avoids re-renders by memoizing parameters */
39
42
  const calculateTitle = useMemo(() => {
43
+ if (customMiddleText) return customMiddleText;
40
44
  const activeItemTitle = activeIndex !== undefined ? data[activeIndex].title : defaultSubtitle;
41
45
  return subtitlePrefix ? `${subtitlePrefix} ${activeItemTitle?.toLocaleLowerCase()}` : activeItemTitle;
42
46
  }, [activeIndex, data, defaultSubtitle, subtitlePrefix]);
@@ -66,7 +70,7 @@ const PieChart = ({
66
70
  valueAccessor: () => {}
67
71
  // @ts-ignore
68
72
  ,
69
- content: renderTextContent(activeItemValue, calculateTitle)
73
+ content: renderTextContent(customMiddleValue || activeItemValue, calculateTitle)
70
74
  }), data.map((entry, index) => /*#__PURE__*/_jsx(Cell, {
71
75
  fill: hoverIndex === index || activeIndex === index ? entry.color : alpha(entry.color || '#000000', 70),
72
76
  role: "presentation",
package/lib/core/BarAndLineComposedChart/BarAndLineComposedChart.stories.d.ts CHANGED
@@ -6,4 +6,8 @@ export declare const Default: {
6
6
  render: (_args: unknown, { loaded: { theme } }: LoadedType) => import("react").JSX.Element;
7
7
  name: string;
8
8
  };
9
+ export declare const ValuePair: {
10
+ render: (_args: unknown, { loaded: { theme } }: LoadedType) => import("react").JSX.Element;
11
+ name: string;
12
+ };
9
13
  //# sourceMappingURL=BarAndLineComposedChart.stories.d.ts.map
package/lib/core/BarAndLineComposedChart/BarAndLineComposedChart.stories.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BarAndLineComposedChart.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/BarAndLineComposedChart/BarAndLineComposedChart.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;;AAE1D,wBAGS;AAiBT,eAAO,MAAM,OAAO;oBACF,OAAO,yBAAyB,UAAU;;CA6B3D,CAAA"}
1
+ {"version":3,"file":"BarAndLineComposedChart.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/BarAndLineComposedChart/BarAndLineComposedChart.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;;AAE1D,wBAGS;AAgCT,eAAO,MAAM,OAAO;oBACF,OAAO,yBAAyB,UAAU;;CA6B3D,CAAA;AAED,eAAO,MAAM,SAAS;oBACJ,OAAO,yBAAyB,UAAU;;CA2B3D,CAAA"}
package/lib/core/BarAndLineComposedChart/BarAndLineComposedChart.stories.js CHANGED
@@ -65,6 +65,67 @@ const DefaultData = [{
65
65
  kostnad: -5500,
66
66
  akkumulert: 50500
67
67
  }];
68
+ const ValuePairData = [{
69
+ name: 'Jan',
70
+ inntekt: 40000,
71
+ kostnad: 23000,
72
+ stackId: ''
73
+ }, {
74
+ name: 'Feb',
75
+ inntekt: 60000,
76
+ kostnad: 25000,
77
+ stackId: ''
78
+ }, {
79
+ name: 'Mars',
80
+ inntekt: 50000,
81
+ kostnad: 34000,
82
+ stackId: ''
83
+ }, {
84
+ name: 'April',
85
+ inntekt: 55000,
86
+ kostnad: 20000,
87
+ stackId: ''
88
+ }, {
89
+ name: 'Mai',
90
+ inntekt: 54400,
91
+ kostnad: 30000,
92
+ stackId: ''
93
+ }, {
94
+ name: 'Jun',
95
+ inntekt: 65000,
96
+ kostnad: 25000,
97
+ stackId: ''
98
+ }, {
99
+ name: 'Jul',
100
+ inntekt: 43000,
101
+ kostnad: 30000,
102
+ stackId: ''
103
+ }, {
104
+ name: 'Aug',
105
+ inntekt: 60000,
106
+ kostnad: 40000,
107
+ stackId: ''
108
+ }, {
109
+ name: 'Sept',
110
+ inntekt: 70000,
111
+ kostnad: 50000,
112
+ stackId: ''
113
+ }, {
114
+ name: 'Okt',
115
+ inntekt: 60000,
116
+ kostnad: 34000,
117
+ stackId: ''
118
+ }, {
119
+ name: 'Nov',
120
+ inntekt: 40040,
121
+ kostnad: 24000,
122
+ stackId: ''
123
+ }, {
124
+ name: 'Des',
125
+ inntekt: 56000,
126
+ kostnad: 5500,
127
+ stackId: ''
128
+ }];
68
129
  export const Default = {
69
130
  render: (_args, {
70
131
  loaded: {
@@ -91,4 +152,31 @@ export const Default = {
91
152
  xAxisDataKey: "name"
92
153
  }),
93
154
  name: 'Default'
155
+ };
156
+ export const ValuePair = {
157
+ render: (_args, {
158
+ loaded: {
159
+ theme
160
+ }
161
+ }) => /*#__PURE__*/_jsx(BarAndLineComposedChart, {
162
+ data: ValuePairData,
163
+ bars: [{
164
+ name: 'Inntekt',
165
+ dataKey: 'inntekt',
166
+ fill: theme.primary50opa
167
+ }, {
168
+ name: 'Kostnad',
169
+ dataKey: 'kostnad',
170
+ fill: theme.primary
171
+ }],
172
+ hasYAxis: false,
173
+ cartesianGrid: false,
174
+ xAxisDataKey: "name",
175
+ stack: false,
176
+ maxBarSize: 10,
177
+ barGap: -20,
178
+ barRadius: 30,
179
+ legend: false
180
+ }),
181
+ name: 'ValuePair'
94
182
  };
package/lib/core/BarAndLineComposedChart/index.d.ts CHANGED
@@ -10,10 +10,11 @@ interface IProps extends Partial<typeof ComposedChart> {
10
10
  name: string;
11
11
  dataKey: string;
12
12
  fill: string;
13
+ stackId?: string;
13
14
  shortName?: string;
14
15
  }[];
15
16
  /** Array of each line in the ComposedChart: e.g [{ name:"Akkumulert", dataKey: "akkumulert", stroke: theme.secondary. type:"monotone"}]. Value of dataKey correlates to a property in the data source. Stroke sets the color of the line. */
16
- lines: {
17
+ lines?: {
17
18
  name: string;
18
19
  dataKey: string;
19
20
  stroke: string;
@@ -53,6 +54,14 @@ interface IProps extends Partial<typeof ComposedChart> {
53
54
  layout?: 'horizontal' | 'vertical';
54
55
  /**lineStrokeWidth: Sets the stroke width of the line. Defaults to 1 */
55
56
  lineStrokeWidth?: number;
57
+ hasYAxis?: boolean;
58
+ cartesianGrid?: boolean;
59
+ legend?: boolean;
60
+ stack?: boolean;
61
+ maxBarSize?: number;
62
+ barGap?: number;
63
+ barRadius?: number;
64
+ referenceLine?: boolean;
56
65
  }
57
66
  declare const BarAndLineComposedChart: React.FC<IProps>;
58
67
  export default BarAndLineComposedChart;
package/lib/core/BarAndLineComposedChart/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/BarAndLineComposedChart/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAGL,aAAa,EAQd,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAKlD,UAAU,MAAO,SAAQ,OAAO,CAAC,OAAO,aAAa,CAAC;IACpD,wFAAwF;IACxF,IAAI,EAAE,GAAG,EAAE,CAAA;IACX,6MAA6M;IAC7M,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM,CAAA;QACZ,OAAO,EAAE,MAAM,CAAA;QACf,IAAI,EAAE,MAAM,CAAA;QAEZ,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,EAAE,CAAA;IACH,6OAA6O;IAC7O,KAAK,EAAE;QACL,IAAI,EAAE,MAAM,CAAA;QACZ,OAAO,EAAE,MAAM,CAAA;QACf,MAAM,EAAE,MAAM,CAAA;QACd,IAAI,EAAE,SAAS,CAAA;QAEf,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,EAAE,CAAA;IACH,iHAAiH;IACjH,YAAY,EAAE,MAAM,CAAA;IACpB,gHAAgH;IAChH,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,wGAAwG;IACxG,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,uGAAuG;IACvG,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,uEAAuE;IACvE,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB;AACD,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAkG7C,CAAA;AAED,eAAe,uBAAuB,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/BarAndLineComposedChart/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAGL,aAAa,EAQd,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAKlD,UAAU,MAAO,SAAQ,OAAO,CAAC,OAAO,aAAa,CAAC;IACpD,wFAAwF;IACxF,IAAI,EAAE,GAAG,EAAE,CAAA;IACX,6MAA6M;IAC7M,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM,CAAA;QACZ,OAAO,EAAE,MAAM,CAAA;QACf,IAAI,EAAE,MAAM,CAAA;QACZ,OAAO,CAAC,EAAE,MAAM,CAAA;QAEhB,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,EAAE,CAAA;IACH,6OAA6O;IAC7O,KAAK,CAAC,EAAE;QACN,IAAI,EAAE,MAAM,CAAA;QACZ,OAAO,EAAE,MAAM,CAAA;QACf,MAAM,EAAE,MAAM,CAAA;QACd,IAAI,EAAE,SAAS,CAAA;QAEf,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,EAAE,CAAA;IACH,iHAAiH;IACjH,YAAY,EAAE,MAAM,CAAA;IACpB,gHAAgH;IAChH,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,wGAAwG;IACxG,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,uGAAuG;IACvG,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,uEAAuE;IACvE,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AACD,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAqH7C,CAAA;AAED,eAAe,uBAAuB,CAAA"}
package/lib/core/BarAndLineComposedChart/index.js CHANGED
@@ -24,6 +24,14 @@ const BarAndLineComposedChart = ({
24
24
  legendPadding,
25
25
  layout = 'horizontal',
26
26
  lineStrokeWidth = 1,
27
+ hasYAxis = true,
28
+ cartesianGrid = true,
29
+ legend = true,
30
+ stack = true,
31
+ referenceLine = true,
32
+ maxBarSize,
33
+ barGap,
34
+ barRadius,
27
35
  ...rest
28
36
  }) => {
29
37
  return /*#__PURE__*/_jsx(BarAndLineComposedChartContainer, {
@@ -41,8 +49,12 @@ const BarAndLineComposedChart = ({
41
49
  },
42
50
  layout: layout && layout,
43
51
  stackOffset: "sign",
52
+ barGap: barGap,
44
53
  ...rest,
45
- children: [/*#__PURE__*/_jsx(CartesianGrid, {
54
+ children: [referenceLine && /*#__PURE__*/_jsx(ReferenceLine, {
55
+ y: 0,
56
+ stroke: "white"
57
+ }), cartesianGrid && /*#__PURE__*/_jsx(CartesianGrid, {
46
58
  strokeDasharray: "0",
47
59
  vertical: false
48
60
  }), /*#__PURE__*/_jsx(XAxis, {
@@ -52,10 +64,7 @@ const BarAndLineComposedChart = ({
52
64
  type: layout === 'vertical' ? 'number' : 'category',
53
65
  tickMargin: 5,
54
66
  tickFormatter: formatAxisPrice
55
- }), /*#__PURE__*/_jsx(ReferenceLine, {
56
- y: 0,
57
- stroke: "white"
58
- }), /*#__PURE__*/_jsx(YAxis, {
67
+ }), hasYAxis && /*#__PURE__*/_jsx(YAxis, {
59
68
  dataKey: yAxisDataKey && yAxisDataKey,
60
69
  axisLine: yAxisLine && yAxisLine,
61
70
  tickLine: tickLineY && tickLineY,
@@ -66,7 +75,7 @@ const BarAndLineComposedChart = ({
66
75
  barConfig: bars && bars,
67
76
  lineConfig: lines && lines
68
77
  })
69
- }), /*#__PURE__*/_jsx(Legend, {
78
+ }), legend && /*#__PURE__*/_jsx(Legend, {
70
79
  verticalAlign: legendVAlign && legendVAlign,
71
80
  align: legendHAlign && legendHAlign,
72
81
  content: /*#__PURE__*/_jsx(CustomLegend, {}),
@@ -81,7 +90,9 @@ const BarAndLineComposedChart = ({
81
90
  dataKey: bar.dataKey,
82
91
  fill: bar.fill,
83
92
  name: bar.name,
84
- stackId: "stack"
93
+ maxBarSize: maxBarSize || undefined,
94
+ stackId: stack ? 'stack' : undefined,
95
+ radius: barRadius
85
96
  }, bar.name);
86
97
  }), lines?.length && lines.map(line => {
87
98
  return /*#__PURE__*/_jsx(Line, {
package/lib/core/PieChart/index.d.ts CHANGED
@@ -17,6 +17,9 @@ interface IProps extends Partial<Pie> {
17
17
  opacity?: number | undefined;
18
18
  /** Set function for active index from outside the component */
19
19
  onActiveChange?: (index: number | undefined) => void;
20
+ defaultActiveIndex?: number;
21
+ customMiddleText?: string;
22
+ customMiddleValue?: number;
20
23
  }
21
24
  interface ChartDataProps {
22
25
  /** Pie piece title */
package/lib/core/PieChart/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/PieChart/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAA;AACxE,OAAO,EAGL,GAAG,EAGJ,MAAM,UAAU,CAAA;AAMjB,UAAU,MAAO,SAAQ,OAAO,CAAC,GAAG,CAAC;IACnC,2DAA2D;IAC3D,IAAI,EAAE,cAAc,EAAE,CAAA;IACtB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,6FAA6F;IAC7F,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,qDAAqD;IACrD,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,mFAAmF;IACnF,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC3B,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC5B,+DAA+D;IAC/D,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAA;CACrD;AAED,UAAU,cAAc;IACtB,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CA6F9B,CAAA;AAED,eAAe,QAAQ,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/PieChart/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAA;AACxE,OAAO,EAGL,GAAG,EAGJ,MAAM,UAAU,CAAA;AAMjB,UAAU,MAAO,SAAQ,OAAO,CAAC,GAAG,CAAC;IACnC,2DAA2D;IAC3D,IAAI,EAAE,cAAc,EAAE,CAAA;IACtB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,6FAA6F;IAC7F,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,qDAAqD;IACrD,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,mFAAmF;IACnF,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC3B,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC5B,+DAA+D;IAC/D,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAA;IACpD,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B;AAED,UAAU,cAAc;IACtB,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAwG9B,CAAA;AAED,eAAe,QAAQ,CAAA"}
package/lib/core/PieChart/index.js CHANGED
@@ -12,12 +12,15 @@ const PieChart = ({
12
12
  data,
13
13
  subtitlePrefix,
14
14
  defaultSubtitle,
15
+ defaultActiveIndex,
15
16
  active,
16
17
  opacity,
17
18
  onActiveChange,
19
+ customMiddleText,
20
+ customMiddleValue,
18
21
  ...rest
19
22
  }) => {
20
- const [activeIndex, setActiveIndex] = useState();
23
+ const [activeIndex, setActiveIndex] = useState(defaultActiveIndex && defaultActiveIndex < data.length ? defaultActiveIndex : undefined);
21
24
  const [hoverIndex, setHoverIndex] = useState(null);
22
25
 
23
26
  /** When active is handled from the outside */
@@ -37,6 +40,7 @@ const PieChart = ({
37
40
 
38
41
  /** Avoids re-renders by memoizing parameters */
39
42
  const calculateTitle = useMemo(() => {
43
+ if (customMiddleText) return customMiddleText;
40
44
  const activeItemTitle = activeIndex !== undefined ? data[activeIndex].title : defaultSubtitle;
41
45
  return subtitlePrefix ? `${subtitlePrefix} ${activeItemTitle?.toLocaleLowerCase()}` : activeItemTitle;
42
46
  }, [activeIndex, data, defaultSubtitle, subtitlePrefix]);
@@ -66,7 +70,7 @@ const PieChart = ({
66
70
  valueAccessor: () => {}
67
71
  // @ts-ignore
68
72
  ,
69
- content: renderTextContent(activeItemValue, calculateTitle)
73
+ content: renderTextContent(customMiddleValue || activeItemValue, calculateTitle)
70
74
  }), data.map((entry, index) => /*#__PURE__*/_jsx(Cell, {
71
75
  fill: hoverIndex === index || activeIndex === index ? entry.color : alpha(entry.color || '#000000', 70),
72
76
  role: "presentation",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bbl-digital/snorre",
3
- "version": "4.0.62",
3
+ "version": "4.0.65",
4
4
  "description": "Design library for BBL Digital",
5
5
  "license": "MIT",
6
6
  "main": "./lib/index.js",