@bbl-digital/snorre 4.0.62 → 4.0.64

package/dist/bundle.js

@@ -26653,6 +26653,13 @@
     legendPadding,
     layout = 'horizontal',
     lineStrokeWidth = 1,
+    hasYAxis = true,
+    cartesianGrid = true,
+    legend = true,
+    stack = true,
+    maxBarSize,
+    barGap,
+    barRadius,
     ...rest
   }) => {
     return /*#__PURE__*/jsxRuntime$1.jsx(BarAndLineComposedChartContainer, {
@@ -26670,8 +26677,12 @@
           },
           layout: layout && layout,
           stackOffset: "sign",
+          barGap: barGap,
           ...rest,
-          children: [/*#__PURE__*/jsxRuntime$1.jsx(recharts.CartesianGrid, {
+          children: [/*#__PURE__*/jsxRuntime$1.jsx(recharts.ReferenceLine, {
+            y: 0,
+            stroke: "white"
+          }), cartesianGrid && /*#__PURE__*/jsxRuntime$1.jsx(recharts.CartesianGrid, {
             strokeDasharray: "0",
             vertical: false
           }), /*#__PURE__*/jsxRuntime$1.jsx(recharts.XAxis, {
@@ -26681,10 +26692,7 @@
             type: layout === 'vertical' ? 'number' : 'category',
             tickMargin: 5,
             tickFormatter: formatAxisPrice
-          }), /*#__PURE__*/jsxRuntime$1.jsx(recharts.ReferenceLine, {
-            y: 0,
-            stroke: "white"
-          }), /*#__PURE__*/jsxRuntime$1.jsx(recharts.YAxis, {
+          }), hasYAxis && /*#__PURE__*/jsxRuntime$1.jsx(recharts.YAxis, {
             dataKey: yAxisDataKey && yAxisDataKey,
             axisLine: yAxisLine && yAxisLine,
             tickLine: tickLineY && tickLineY,
@@ -26695,7 +26703,7 @@
               barConfig: bars && bars,
               lineConfig: lines && lines
             })
-          }), /*#__PURE__*/jsxRuntime$1.jsx(recharts.Legend, {
+          }), legend && /*#__PURE__*/jsxRuntime$1.jsx(recharts.Legend, {
             verticalAlign: legendVAlign && legendVAlign,
             align: legendHAlign && legendHAlign,
             content: /*#__PURE__*/jsxRuntime$1.jsx(CustomLegend, {}),
@@ -26710,7 +26718,9 @@
               dataKey: bar.dataKey,
               fill: bar.fill,
               name: bar.name,
-              stackId: "stack"
+              maxBarSize: maxBarSize || undefined,
+              stackId: stack ? 'stack' : undefined,
+              radius: barRadius
             }, bar.name);
           }), lines?.length && lines.map(line => {
             return /*#__PURE__*/jsxRuntime$1.jsx(recharts.Line, {

package/esm/core/BarAndLineComposedChart/BarAndLineComposedChart.stories.js

@@ -65,6 +65,67 @@ const DefaultData = [{
   kostnad: -5500,
   akkumulert: 50500
 }];
+const ValuePairData = [{
+  name: 'Jan',
+  inntekt: 40000,
+  kostnad: 23000,
+  stackId: ''
+}, {
+  name: 'Feb',
+  inntekt: 60000,
+  kostnad: 25000,
+  stackId: ''
+}, {
+  name: 'Mars',
+  inntekt: 50000,
+  kostnad: 34000,
+  stackId: ''
+}, {
+  name: 'April',
+  inntekt: 55000,
+  kostnad: 20000,
+  stackId: ''
+}, {
+  name: 'Mai',
+  inntekt: 54400,
+  kostnad: 30000,
+  stackId: ''
+}, {
+  name: 'Jun',
+  inntekt: 65000,
+  kostnad: 25000,
+  stackId: ''
+}, {
+  name: 'Jul',
+  inntekt: 43000,
+  kostnad: 30000,
+  stackId: ''
+}, {
+  name: 'Aug',
+  inntekt: 60000,
+  kostnad: 40000,
+  stackId: ''
+}, {
+  name: 'Sept',
+  inntekt: 70000,
+  kostnad: 50000,
+  stackId: ''
+}, {
+  name: 'Okt',
+  inntekt: 60000,
+  kostnad: 34000,
+  stackId: ''
+}, {
+  name: 'Nov',
+  inntekt: 40040,
+  kostnad: 24000,
+  stackId: ''
+}, {
+  name: 'Des',
+  inntekt: 56000,
+  kostnad: 5500,
+  stackId: ''
+}];
 export const Default = {
   render: (_args, {
     loaded: {
@@ -91,4 +152,31 @@ export const Default = {
     xAxisDataKey: "name"
   }),
   name: 'Default'
+};
+export const ValuePair = {
+  render: (_args, {
+    loaded: {
+      theme
+    }
+  }) => /*#__PURE__*/_jsx(BarAndLineComposedChart, {
+    data: ValuePairData,
+    bars: [{
+      name: 'Inntekt',
+      dataKey: 'inntekt',
+      fill: theme.primary50opa
+    }, {
+      name: 'Kostnad',
+      dataKey: 'kostnad',
+      fill: theme.primary
+    }],
+    hasYAxis: false,
+    cartesianGrid: false,
+    xAxisDataKey: "name",
+    stack: false,
+    maxBarSize: 10,
+    barGap: -20,
+    barRadius: 30,
+    legend: false
+  }),
+  name: 'ValuePair'
 };

package/esm/core/BarAndLineComposedChart/index.js

@@ -24,6 +24,13 @@ const BarAndLineComposedChart = ({
   legendPadding,
   layout = 'horizontal',
   lineStrokeWidth = 1,
+  hasYAxis = true,
+  cartesianGrid = true,
+  legend = true,
+  stack = true,
+  maxBarSize,
+  barGap,
+  barRadius,
   ...rest
 }) => {
   return /*#__PURE__*/_jsx(BarAndLineComposedChartContainer, {
@@ -41,8 +48,12 @@ const BarAndLineComposedChart = ({
         },
         layout: layout && layout,
         stackOffset: "sign",
+        barGap: barGap,
         ...rest,
-        children: [/*#__PURE__*/_jsx(CartesianGrid, {
+        children: [/*#__PURE__*/_jsx(ReferenceLine, {
+          y: 0,
+          stroke: "white"
+        }), cartesianGrid && /*#__PURE__*/_jsx(CartesianGrid, {
           strokeDasharray: "0",
           vertical: false
         }), /*#__PURE__*/_jsx(XAxis, {
@@ -52,10 +63,7 @@ const BarAndLineComposedChart = ({
           type: layout === 'vertical' ? 'number' : 'category',
           tickMargin: 5,
           tickFormatter: formatAxisPrice
-        }), /*#__PURE__*/_jsx(ReferenceLine, {
-          y: 0,
-          stroke: "white"
-        }), /*#__PURE__*/_jsx(YAxis, {
+        }), hasYAxis && /*#__PURE__*/_jsx(YAxis, {
           dataKey: yAxisDataKey && yAxisDataKey,
           axisLine: yAxisLine && yAxisLine,
           tickLine: tickLineY && tickLineY,
@@ -66,7 +74,7 @@ const BarAndLineComposedChart = ({
             barConfig: bars && bars,
             lineConfig: lines && lines
           })
-        }), /*#__PURE__*/_jsx(Legend, {
+        }), legend && /*#__PURE__*/_jsx(Legend, {
           verticalAlign: legendVAlign && legendVAlign,
           align: legendHAlign && legendHAlign,
           content: /*#__PURE__*/_jsx(CustomLegend, {}),
@@ -81,7 +89,9 @@ const BarAndLineComposedChart = ({
             dataKey: bar.dataKey,
             fill: bar.fill,
             name: bar.name,
-            stackId: "stack"
+            maxBarSize: maxBarSize || undefined,
+            stackId: stack ? 'stack' : undefined,
+            radius: barRadius
           }, bar.name);
         }), lines?.length && lines.map(line => {
           return /*#__PURE__*/_jsx(Line, {

package/lib/core/BarAndLineComposedChart/BarAndLineComposedChart.stories.d.ts

@@ -6,4 +6,8 @@ export declare const Default: {
     render: (_args: unknown, { loaded: { theme } }: LoadedType) => import("react").JSX.Element;
     name: string;
 };
+export declare const ValuePair: {
+    render: (_args: unknown, { loaded: { theme } }: LoadedType) => import("react").JSX.Element;
+    name: string;
+};
 //# sourceMappingURL=BarAndLineComposedChart.stories.d.ts.map

package/lib/core/BarAndLineComposedChart/BarAndLineComposedChart.stories.d.ts.map

@@ -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"}
+{"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

@@ -65,6 +65,67 @@ const DefaultData = [{
   kostnad: -5500,
   akkumulert: 50500
 }];
+const ValuePairData = [{
+  name: 'Jan',
+  inntekt: 40000,
+  kostnad: 23000,
+  stackId: ''
+}, {
+  name: 'Feb',
+  inntekt: 60000,
+  kostnad: 25000,
+  stackId: ''
+}, {
+  name: 'Mars',
+  inntekt: 50000,
+  kostnad: 34000,
+  stackId: ''
+}, {
+  name: 'April',
+  inntekt: 55000,
+  kostnad: 20000,
+  stackId: ''
+}, {
+  name: 'Mai',
+  inntekt: 54400,
+  kostnad: 30000,
+  stackId: ''
+}, {
+  name: 'Jun',
+  inntekt: 65000,
+  kostnad: 25000,
+  stackId: ''
+}, {
+  name: 'Jul',
+  inntekt: 43000,
+  kostnad: 30000,
+  stackId: ''
+}, {
+  name: 'Aug',
+  inntekt: 60000,
+  kostnad: 40000,
+  stackId: ''
+}, {
+  name: 'Sept',
+  inntekt: 70000,
+  kostnad: 50000,
+  stackId: ''
+}, {
+  name: 'Okt',
+  inntekt: 60000,
+  kostnad: 34000,
+  stackId: ''
+}, {
+  name: 'Nov',
+  inntekt: 40040,
+  kostnad: 24000,
+  stackId: ''
+}, {
+  name: 'Des',
+  inntekt: 56000,
+  kostnad: 5500,
+  stackId: ''
+}];
 export const Default = {
   render: (_args, {
     loaded: {
@@ -91,4 +152,31 @@ export const Default = {
     xAxisDataKey: "name"
   }),
   name: 'Default'
+};
+export const ValuePair = {
+  render: (_args, {
+    loaded: {
+      theme
+    }
+  }) => /*#__PURE__*/_jsx(BarAndLineComposedChart, {
+    data: ValuePairData,
+    bars: [{
+      name: 'Inntekt',
+      dataKey: 'inntekt',
+      fill: theme.primary50opa
+    }, {
+      name: 'Kostnad',
+      dataKey: 'kostnad',
+      fill: theme.primary
+    }],
+    hasYAxis: false,
+    cartesianGrid: false,
+    xAxisDataKey: "name",
+    stack: false,
+    maxBarSize: 10,
+    barGap: -20,
+    barRadius: 30,
+    legend: false
+  }),
+  name: 'ValuePair'
 };

package/lib/core/BarAndLineComposedChart/index.d.ts

@@ -10,10 +10,11 @@ interface IProps extends Partial<typeof ComposedChart> {
         name: string;
         dataKey: string;
         fill: string;
+        stackId?: string;
         shortName?: string;
     }[];
     /** 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. */
-    lines: {
+    lines?: {
         name: string;
         dataKey: string;
         stroke: string;
@@ -53,6 +54,13 @@ interface IProps extends Partial<typeof ComposedChart> {
     layout?: 'horizontal' | 'vertical';
     /**lineStrokeWidth: Sets the stroke width of the line. Defaults to 1 */
     lineStrokeWidth?: number;
+    hasYAxis?: boolean;
+    cartesianGrid?: boolean;
+    legend?: boolean;
+    stack?: boolean;
+    maxBarSize?: number;
+    barGap?: number;
+    barRadius?: number;
 }
 declare const BarAndLineComposedChart: React.FC<IProps>;
 export default BarAndLineComposedChart;

package/lib/core/BarAndLineComposedChart/index.d.ts.map

@@ -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"}
+{"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;CACnB;AACD,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAoH7C,CAAA;AAED,eAAe,uBAAuB,CAAA"}

package/lib/core/BarAndLineComposedChart/index.js

@@ -24,6 +24,13 @@ const BarAndLineComposedChart = ({
   legendPadding,
   layout = 'horizontal',
   lineStrokeWidth = 1,
+  hasYAxis = true,
+  cartesianGrid = true,
+  legend = true,
+  stack = true,
+  maxBarSize,
+  barGap,
+  barRadius,
   ...rest
 }) => {
   return /*#__PURE__*/_jsx(BarAndLineComposedChartContainer, {
@@ -41,8 +48,12 @@ const BarAndLineComposedChart = ({
         },
         layout: layout && layout,
         stackOffset: "sign",
+        barGap: barGap,
         ...rest,
-        children: [/*#__PURE__*/_jsx(CartesianGrid, {
+        children: [/*#__PURE__*/_jsx(ReferenceLine, {
+          y: 0,
+          stroke: "white"
+        }), cartesianGrid && /*#__PURE__*/_jsx(CartesianGrid, {
           strokeDasharray: "0",
           vertical: false
         }), /*#__PURE__*/_jsx(XAxis, {
@@ -52,10 +63,7 @@ const BarAndLineComposedChart = ({
           type: layout === 'vertical' ? 'number' : 'category',
           tickMargin: 5,
           tickFormatter: formatAxisPrice
-        }), /*#__PURE__*/_jsx(ReferenceLine, {
-          y: 0,
-          stroke: "white"
-        }), /*#__PURE__*/_jsx(YAxis, {
+        }), hasYAxis && /*#__PURE__*/_jsx(YAxis, {
           dataKey: yAxisDataKey && yAxisDataKey,
           axisLine: yAxisLine && yAxisLine,
           tickLine: tickLineY && tickLineY,
@@ -66,7 +74,7 @@ const BarAndLineComposedChart = ({
             barConfig: bars && bars,
             lineConfig: lines && lines
           })
-        }), /*#__PURE__*/_jsx(Legend, {
+        }), legend && /*#__PURE__*/_jsx(Legend, {
           verticalAlign: legendVAlign && legendVAlign,
           align: legendHAlign && legendHAlign,
           content: /*#__PURE__*/_jsx(CustomLegend, {}),
@@ -81,7 +89,9 @@ const BarAndLineComposedChart = ({
             dataKey: bar.dataKey,
             fill: bar.fill,
             name: bar.name,
-            stackId: "stack"
+            maxBarSize: maxBarSize || undefined,
+            stackId: stack ? 'stack' : undefined,
+            radius: barRadius
           }, bar.name);
         }), lines?.length && lines.map(line => {
           return /*#__PURE__*/_jsx(Line, {

package/package.json

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