@auth0/quantum-charts 0.3.2 → 0.3.3

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 (13) hide show
  1. package/bar-chart/index.js +2 -2
  2. package/chart-card/index.js +2 -2
  3. package/chart-summary/index.d.ts +2 -0
  4. package/chart-summary/index.js +62 -5
  5. package/common/chart.d.ts +3 -0
  6. package/donut-chart/index.js +2 -2
  7. package/esm/bar-chart/index.js +2 -2
  8. package/esm/chart-card/index.js +2 -2
  9. package/esm/chart-summary/index.js +63 -6
  10. package/esm/donut-chart/index.js +2 -2
  11. package/esm/line-chart/index.js +2 -2
  12. package/line-chart/index.js +2 -2
  13. package/package.json +1 -1
package/bar-chart/index.js CHANGED
@@ -64,7 +64,7 @@ var chart_card_1 = require("../chart-card");
64
64
  var chart_1 = require("../common/chart");
65
65
  var custom_legend_1 = require("../common/custom-legend");
66
66
  function BarChart(props) {
67
- var _a = props, data = _a.data, leftAxis = _a.leftAxis, bottomAxis = _a.bottomAxis, _b = _a.height, height = _b === void 0 ? 300 : _b, title = _a.title, value = _a.value, label = _a.label, helperText = _a.helperText, _c = _a.layout, layout = _c === void 0 ? 'vertical' : _c, _d = _a.isStacked, isStacked = _d === void 0 ? false : _d, _e = _a.color, color = _e === void 0 ? 'categorical' : _e;
67
+ var _a = props, data = _a.data, leftAxis = _a.leftAxis, bottomAxis = _a.bottomAxis, _b = _a.height, height = _b === void 0 ? 300 : _b, title = _a.title, value = _a.value, label = _a.label, helperText = _a.helperText, _c = _a.layout, layout = _c === void 0 ? 'vertical' : _c, _d = _a.isStacked, isStacked = _d === void 0 ? false : _d, _e = _a.color, color = _e === void 0 ? 'categorical' : _e, additionalMenuItems = _a.additionalMenuItems;
68
68
  var theme = (0, quantum_product_1.useTheme)();
69
69
  // Function to know how many bars we need based of how much different group values are.
70
70
  var groups = lodash_1.default.uniqBy(data, 'group').map(function (item) { return item.group; });
@@ -105,7 +105,7 @@ function BarChart(props) {
105
105
  _b[entry.group] = entry[leftAxisDataKey],
106
106
  _b;
107
107
  });
108
- return (React.createElement(chart_card_1.ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText },
108
+ return (React.createElement(chart_card_1.ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, additionalMenuItems: additionalMenuItems },
109
109
  React.createElement(recharts_1.ResponsiveContainer, { width: "100%", height: height }, data.length ? (React.createElement(recharts_1.BarChart, { width: 500, layout: layout === 'horizontal' ? 'vertical' : 'horizontal', height: height, data: Object.values(entries), margin: {
110
110
  top: 24,
111
111
  right: 10,
package/chart-card/index.js CHANGED
@@ -28,9 +28,9 @@ var quantum_product_1 = require("@auth0/quantum-product");
28
28
  var React = __importStar(require("react"));
29
29
  var chart_summary_1 = require("../chart-summary");
30
30
  function ChartCard(props) {
31
- var children = props.children, title = props.title, value = props.value, dataTable = props.dataTable, helperText = props.helperText, label = props.label, height = props.height, headerAction = props.headerAction;
31
+ var children = props.children, title = props.title, value = props.value, dataTable = props.dataTable, helperText = props.helperText, label = props.label, height = props.height, headerAction = props.headerAction, additionalMenuItems = props.additionalMenuItems;
32
32
  return (React.createElement(quantum_product_1.Card, { sx: { height: height, padding: 3 } },
33
- React.createElement(chart_summary_1.ChartSummary, { title: title, value: value, dataTable: dataTable, helperText: helperText, label: label, headerAction: headerAction }),
33
+ React.createElement(chart_summary_1.ChartSummary, { title: title, value: value, dataTable: dataTable, helperText: helperText, label: label, headerAction: headerAction, additionalMenuItems: additionalMenuItems }),
34
34
  children));
35
35
  }
36
36
  exports.ChartCard = ChartCard;
package/chart-summary/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import * as React from 'react';
2
+ import { DropdownMenuListItemValue } from '@auth0/quantum-product';
2
3
  export interface IChartSummaryProps {
3
4
  title?: string;
4
5
  value?: string | number;
@@ -7,5 +8,6 @@ export interface IChartSummaryProps {
7
8
  helperText?: React.ReactNode;
8
9
  dataTable?: any;
9
10
  headerAction?: React.ReactElement;
11
+ additionalMenuItems?: DropdownMenuListItemValue[];
10
12
  }
11
13
  export declare function ChartSummary(props: IChartSummaryProps): React.JSX.Element;
package/chart-summary/index.js CHANGED
@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
3
3
  if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
4
  return cooked;
5
5
  };
6
+ var __assign = (this && this.__assign) || function () {
7
+ __assign = Object.assign || function(t) {
8
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
9
+ s = arguments[i];
10
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
11
+ t[p] = s[p];
12
+ }
13
+ return t;
14
+ };
15
+ return __assign.apply(this, arguments);
16
+ };
6
17
  var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
7
18
  if (k2 === undefined) k2 = k;
8
19
  var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -42,6 +53,15 @@ var __read = (this && this.__read) || function (o, n) {
42
53
  }
43
54
  return ar;
44
55
  };
56
+ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
57
+ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
58
+ if (ar || !(i in from)) {
59
+ if (!ar) ar = Array.prototype.slice.call(from, 0, i);
60
+ ar[i] = from[i];
61
+ }
62
+ }
63
+ return to.concat(ar || Array.prototype.slice.call(from));
64
+ };
45
65
  Object.defineProperty(exports, "__esModule", { value: true });
46
66
  exports.ChartSummary = void 0;
47
67
  var React = __importStar(require("react"));
@@ -55,11 +75,47 @@ var Aggregate = (0, quantum_product_1.styled)('h4')(templateObject_1 || (templat
55
75
  return theme.typography.h4.fontSize;
56
76
  });
57
77
  function ChartSummary(props) {
58
- var title = props.title, value = props.value, helperText = props.helperText, label = props.label, dataTable = props.dataTable, headerAction = props.headerAction;
78
+ var title = props.title, value = props.value, helperText = props.helperText, label = props.label, dataTable = props.dataTable, headerAction = props.headerAction, additionalMenuItems = props.additionalMenuItems;
59
79
  var _a = __read(React.useState(false), 2), isOpen = _a[0], setIsOpen = _a[1];
80
+ var _b = (0, quantum_product_1.useDropdownMenuState)({ baseId: 'chart-actions-menu' }), triggerProps = _b.triggerProps, menuProps = _b.menuProps;
60
81
  var toggleIsOpen = function () {
61
82
  setIsOpen(function (prev) { return !prev; });
62
83
  };
84
+ var menuItems = React.useMemo(function () {
85
+ var menuItems = [];
86
+ if (dataTable && dataTable[0]) {
87
+ menuItems = [
88
+ {
89
+ type: 'item',
90
+ endIcon: React.createElement(quantum_product_1.ListIcon, null),
91
+ onClick: function () {
92
+ setIsOpen(true);
93
+ },
94
+ title: 'View list',
95
+ },
96
+ ];
97
+ }
98
+ if (additionalMenuItems) {
99
+ if (menuItems.length > 0)
100
+ menuItems.unshift({ type: 'divider' });
101
+ menuItems = __spreadArray(__spreadArray([], __read(additionalMenuItems), false), __read(menuItems), false);
102
+ }
103
+ var handleClick = function (cb) {
104
+ return function (event) {
105
+ cb(event);
106
+ if (menuProps.onClose) {
107
+ menuProps.onClose(event, 'itemSelect');
108
+ }
109
+ };
110
+ };
111
+ menuItems = menuItems.map(function (item) {
112
+ if (item.type === 'item' && item.onClick) {
113
+ item.onClick = handleClick(item.onClick);
114
+ }
115
+ return item;
116
+ });
117
+ return menuItems;
118
+ }, [dataTable, additionalMenuItems, menuProps]);
63
119
  return (React.createElement("div", null,
64
120
  React.createElement(quantum_product_1.DescriptionBlock, { label: React.createElement("div", { style: { display: 'flex', justifyContent: 'space-between' } },
65
121
  React.createElement(quantum_product_1.StackLayout, { gutter: 1 },
@@ -74,10 +130,11 @@ function ChartSummary(props) {
74
130
  } },
75
131
  React.createElement(quantum_product_1.HelpCircleIcon, { size: "16" })))))),
76
132
  React.createElement(quantum_product_1.StackLayout, { gutter: 1 },
77
- dataTable && dataTable[0] && (React.createElement(quantum_product_1.StackLayoutItem, null,
78
- React.createElement(quantum_product_1.IconButton, { label: "List button", onClick: function () { return setIsOpen(true); } },
79
- React.createElement(quantum_product_1.ListIcon, null)))),
80
- headerAction && (React.createElement(quantum_product_1.StackLayoutItem, { sx: { justifyContent: 'flex-end', display: 'flex', width: '100', flex: 1 } }, headerAction)))), labelTypographyProps: { variant: 'subtitle1' }, description: React.createElement(quantum_product_1.StackLayout, { gutter: 1 },
133
+ headerAction && (React.createElement(quantum_product_1.StackLayoutItem, { sx: { justifyContent: 'flex-end', display: 'flex', width: '100', flex: 1 } }, headerAction)),
134
+ menuItems.length > 0 && (React.createElement(React.Fragment, null,
135
+ React.createElement(quantum_product_1.IconButton, __assign({ size: "small" }, triggerProps, { label: "More actions" }),
136
+ React.createElement(quantum_product_1.MoreVerticalIcon, null)),
137
+ React.createElement(quantum_product_1.DropdownMenu, __assign({}, menuProps, { items: menuItems })))))), labelTypographyProps: { variant: 'subtitle1' }, description: React.createElement(quantum_product_1.StackLayout, { gutter: 1 },
81
138
  React.createElement(Aggregate, null, value),
82
139
  label) }),
83
140
  dataTable && dataTable[0] && (React.createElement(data_table_chart_1.DataTableChart, { title: title, isOpen: isOpen, toggleIsOpen: toggleIsOpen, data: dataTable }))));
package/common/chart.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import { TooltipProps } from 'recharts';
3
3
  import { IChartCardProps } from '../chart-card';
4
+ import { DropdownMenuListItemValue } from '@auth0/quantum-product';
4
5
  export type ScaleType = 'date' | 'datetime' | 'label' | 'number';
5
6
  export interface ICustomTooltipProps extends TooltipProps<number, string> {
6
7
  scaleType?: 'datetime' | 'date';
@@ -26,6 +27,8 @@ export interface IBaseChartProps<DataType = unknown> extends IChartCardProps {
26
27
  leftAxis: IAxisOptions<DataType>;
27
28
  legend?: ILegendOptions;
28
29
  color?: 'categorical' | 'sequential';
30
+ additionalMenuItems?: DropdownMenuListItemValue[];
31
+ headerAction?: React.ReactElement;
29
32
  }
30
33
  export type IDonutChartDataPoint<DataType = unknown> = {
31
34
  name: string;
package/donut-chart/index.js CHANGED
@@ -71,11 +71,11 @@ var ResponsiveChartCard = (0, quantum_product_1.styled)(quantum_product_1.StackL
71
71
  })));
72
72
  });
73
73
  function DonutChart(props) {
74
- var data = props.data, displayType = props.displayType, title = props.title, value = props.value, label = props.label, helperText = props.helperText, _a = props.layout, layout = _a === void 0 ? 'horizontal' : _a, _b = props.color, color = _b === void 0 ? 'categorical' : _b, _c = props.height, height = _c === void 0 ? '100%' : _c;
74
+ var data = props.data, displayType = props.displayType, title = props.title, value = props.value, label = props.label, helperText = props.helperText, _a = props.layout, layout = _a === void 0 ? 'horizontal' : _a, _b = props.color, color = _b === void 0 ? 'categorical' : _b, _c = props.height, height = _c === void 0 ? '100%' : _c, additionalMenuItems = props.additionalMenuItems;
75
75
  var _d = __read(React.useState(undefined), 2), activeIndex = _d[0], setActiveIndex = _d[1];
76
76
  var theme = (0, quantum_product_1.useTheme)();
77
77
  var BASE_COLORS = (0, theme_1.getColorScale)(theme)[color]['base'];
78
- return (React.createElement(chart_card_1.ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, height: height },
78
+ return (React.createElement(chart_card_1.ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, height: height, additionalMenuItems: additionalMenuItems },
79
79
  React.createElement(ResponsiveChartCard, { ownerState: { layout: layout } },
80
80
  React.createElement(quantum_product_1.StackLayoutItem, { sx: {
81
81
  height: '150px',
package/esm/bar-chart/index.js CHANGED
@@ -35,7 +35,7 @@ import { ChartCard } from '../chart-card';
35
35
  import { tickFormatter } from '../common/chart';
36
36
  import { CustomLegend } from '../common/custom-legend';
37
37
  export function BarChart(props) {
38
- var _a = props, data = _a.data, leftAxis = _a.leftAxis, bottomAxis = _a.bottomAxis, _b = _a.height, height = _b === void 0 ? 300 : _b, title = _a.title, value = _a.value, label = _a.label, helperText = _a.helperText, _c = _a.layout, layout = _c === void 0 ? 'vertical' : _c, _d = _a.isStacked, isStacked = _d === void 0 ? false : _d, _e = _a.color, color = _e === void 0 ? 'categorical' : _e;
38
+ var _a = props, data = _a.data, leftAxis = _a.leftAxis, bottomAxis = _a.bottomAxis, _b = _a.height, height = _b === void 0 ? 300 : _b, title = _a.title, value = _a.value, label = _a.label, helperText = _a.helperText, _c = _a.layout, layout = _c === void 0 ? 'vertical' : _c, _d = _a.isStacked, isStacked = _d === void 0 ? false : _d, _e = _a.color, color = _e === void 0 ? 'categorical' : _e, additionalMenuItems = _a.additionalMenuItems;
39
39
  var theme = useTheme();
40
40
  // Function to know how many bars we need based of how much different group values are.
41
41
  var groups = _.uniqBy(data, 'group').map(function (item) { return item.group; });
@@ -76,7 +76,7 @@ export function BarChart(props) {
76
76
  _b[entry.group] = entry[leftAxisDataKey],
77
77
  _b;
78
78
  });
79
- return (React.createElement(ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText },
79
+ return (React.createElement(ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, additionalMenuItems: additionalMenuItems },
80
80
  React.createElement(ResponsiveContainer, { width: "100%", height: height }, data.length ? (React.createElement(RechartsBarChart, { width: 500, layout: layout === 'horizontal' ? 'vertical' : 'horizontal', height: height, data: Object.values(entries), margin: {
81
81
  top: 24,
82
82
  right: 10,
package/esm/chart-card/index.js CHANGED
@@ -2,8 +2,8 @@ import { Card } from '@auth0/quantum-product';
2
2
  import * as React from 'react';
3
3
  import { ChartSummary } from '../chart-summary';
4
4
  export function ChartCard(props) {
5
- var children = props.children, title = props.title, value = props.value, dataTable = props.dataTable, helperText = props.helperText, label = props.label, height = props.height, headerAction = props.headerAction;
5
+ var children = props.children, title = props.title, value = props.value, dataTable = props.dataTable, helperText = props.helperText, label = props.label, height = props.height, headerAction = props.headerAction, additionalMenuItems = props.additionalMenuItems;
6
6
  return (React.createElement(Card, { sx: { height: height, padding: 3 } },
7
- React.createElement(ChartSummary, { title: title, value: value, dataTable: dataTable, helperText: helperText, label: label, headerAction: headerAction }),
7
+ React.createElement(ChartSummary, { title: title, value: value, dataTable: dataTable, helperText: helperText, label: label, headerAction: headerAction, additionalMenuItems: additionalMenuItems }),
8
8
  children));
9
9
  }
package/esm/chart-summary/index.js CHANGED
@@ -2,6 +2,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
2
2
  if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
3
3
  return cooked;
4
4
  };
5
+ var __assign = (this && this.__assign) || function () {
6
+ __assign = Object.assign || function(t) {
7
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
8
+ s = arguments[i];
9
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
10
+ t[p] = s[p];
11
+ }
12
+ return t;
13
+ };
14
+ return __assign.apply(this, arguments);
15
+ };
5
16
  var __read = (this && this.__read) || function (o, n) {
6
17
  var m = typeof Symbol === "function" && o[Symbol.iterator];
7
18
  if (!m) return o;
@@ -18,8 +29,17 @@ var __read = (this && this.__read) || function (o, n) {
18
29
  }
19
30
  return ar;
20
31
  };
32
+ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
33
+ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
34
+ if (ar || !(i in from)) {
35
+ if (!ar) ar = Array.prototype.slice.call(from, 0, i);
36
+ ar[i] = from[i];
37
+ }
38
+ }
39
+ return to.concat(ar || Array.prototype.slice.call(from));
40
+ };
21
41
  import * as React from 'react';
22
- import { Box, DescriptionBlock, StackLayout, StackLayoutItem, Tooltip, HelpCircleIcon, styled, IconButton, ListIcon, Text, } from '@auth0/quantum-product';
42
+ import { Box, DescriptionBlock, StackLayout, StackLayoutItem, Tooltip, HelpCircleIcon, styled, IconButton, ListIcon, Text, useDropdownMenuState, DropdownMenu, MoreVerticalIcon, } from '@auth0/quantum-product';
23
43
  import { DataTableChart } from './data-table-chart';
24
44
  var Aggregate = styled('h4')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n"])), function (_a) {
25
45
  var theme = _a.theme;
@@ -29,11 +49,47 @@ var Aggregate = styled('h4')(templateObject_1 || (templateObject_1 = __makeTempl
29
49
  return theme.typography.h4.fontSize;
30
50
  });
31
51
  export function ChartSummary(props) {
32
- var title = props.title, value = props.value, helperText = props.helperText, label = props.label, dataTable = props.dataTable, headerAction = props.headerAction;
52
+ var title = props.title, value = props.value, helperText = props.helperText, label = props.label, dataTable = props.dataTable, headerAction = props.headerAction, additionalMenuItems = props.additionalMenuItems;
33
53
  var _a = __read(React.useState(false), 2), isOpen = _a[0], setIsOpen = _a[1];
54
+ var _b = useDropdownMenuState({ baseId: 'chart-actions-menu' }), triggerProps = _b.triggerProps, menuProps = _b.menuProps;
34
55
  var toggleIsOpen = function () {
35
56
  setIsOpen(function (prev) { return !prev; });
36
57
  };
58
+ var menuItems = React.useMemo(function () {
59
+ var menuItems = [];
60
+ if (dataTable && dataTable[0]) {
61
+ menuItems = [
62
+ {
63
+ type: 'item',
64
+ endIcon: React.createElement(ListIcon, null),
65
+ onClick: function () {
66
+ setIsOpen(true);
67
+ },
68
+ title: 'View list',
69
+ },
70
+ ];
71
+ }
72
+ if (additionalMenuItems) {
73
+ if (menuItems.length > 0)
74
+ menuItems.unshift({ type: 'divider' });
75
+ menuItems = __spreadArray(__spreadArray([], __read(additionalMenuItems), false), __read(menuItems), false);
76
+ }
77
+ var handleClick = function (cb) {
78
+ return function (event) {
79
+ cb(event);
80
+ if (menuProps.onClose) {
81
+ menuProps.onClose(event, 'itemSelect');
82
+ }
83
+ };
84
+ };
85
+ menuItems = menuItems.map(function (item) {
86
+ if (item.type === 'item' && item.onClick) {
87
+ item.onClick = handleClick(item.onClick);
88
+ }
89
+ return item;
90
+ });
91
+ return menuItems;
92
+ }, [dataTable, additionalMenuItems, menuProps]);
37
93
  return (React.createElement("div", null,
38
94
  React.createElement(DescriptionBlock, { label: React.createElement("div", { style: { display: 'flex', justifyContent: 'space-between' } },
39
95
  React.createElement(StackLayout, { gutter: 1 },
@@ -48,10 +104,11 @@ export function ChartSummary(props) {
48
104
  } },
49
105
  React.createElement(HelpCircleIcon, { size: "16" })))))),
50
106
  React.createElement(StackLayout, { gutter: 1 },
51
- dataTable && dataTable[0] && (React.createElement(StackLayoutItem, null,
52
- React.createElement(IconButton, { label: "List button", onClick: function () { return setIsOpen(true); } },
53
- React.createElement(ListIcon, null)))),
54
- headerAction && (React.createElement(StackLayoutItem, { sx: { justifyContent: 'flex-end', display: 'flex', width: '100', flex: 1 } }, headerAction)))), labelTypographyProps: { variant: 'subtitle1' }, description: React.createElement(StackLayout, { gutter: 1 },
107
+ headerAction && (React.createElement(StackLayoutItem, { sx: { justifyContent: 'flex-end', display: 'flex', width: '100', flex: 1 } }, headerAction)),
108
+ menuItems.length > 0 && (React.createElement(React.Fragment, null,
109
+ React.createElement(IconButton, __assign({ size: "small" }, triggerProps, { label: "More actions" }),
110
+ React.createElement(MoreVerticalIcon, null)),
111
+ React.createElement(DropdownMenu, __assign({}, menuProps, { items: menuItems })))))), labelTypographyProps: { variant: 'subtitle1' }, description: React.createElement(StackLayout, { gutter: 1 },
55
112
  React.createElement(Aggregate, null, value),
56
113
  label) }),
57
114
  dataTable && dataTable[0] && (React.createElement(DataTableChart, { title: title, isOpen: isOpen, toggleIsOpen: toggleIsOpen, data: dataTable }))));
package/esm/donut-chart/index.js CHANGED
@@ -42,11 +42,11 @@ var ResponsiveChartCard = styled(StackLayout)(function (_a) {
42
42
  })));
43
43
  });
44
44
  export function DonutChart(props) {
45
- var data = props.data, displayType = props.displayType, title = props.title, value = props.value, label = props.label, helperText = props.helperText, _a = props.layout, layout = _a === void 0 ? 'horizontal' : _a, _b = props.color, color = _b === void 0 ? 'categorical' : _b, _c = props.height, height = _c === void 0 ? '100%' : _c;
45
+ var data = props.data, displayType = props.displayType, title = props.title, value = props.value, label = props.label, helperText = props.helperText, _a = props.layout, layout = _a === void 0 ? 'horizontal' : _a, _b = props.color, color = _b === void 0 ? 'categorical' : _b, _c = props.height, height = _c === void 0 ? '100%' : _c, additionalMenuItems = props.additionalMenuItems;
46
46
  var _d = __read(React.useState(undefined), 2), activeIndex = _d[0], setActiveIndex = _d[1];
47
47
  var theme = useTheme();
48
48
  var BASE_COLORS = getColorScale(theme)[color]['base'];
49
- return (React.createElement(ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, height: height },
49
+ return (React.createElement(ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, height: height, additionalMenuItems: additionalMenuItems },
50
50
  React.createElement(ResponsiveChartCard, { ownerState: { layout: layout } },
51
51
  React.createElement(StackLayoutItem, { sx: {
52
52
  height: '150px',
package/esm/line-chart/index.js CHANGED
@@ -36,7 +36,7 @@ import { ChartCard } from '../chart-card';
36
36
  import { tickFormatter } from '../common/chart';
37
37
  import { CustomLegend } from '../common/custom-legend';
38
38
  export function LineChart(props) {
39
- var _a = props, data = _a.data, leftAxis = _a.leftAxis, bottomAxis = _a.bottomAxis, _b = _a.height, height = _b === void 0 ? 300 : _b, title = _a.title, value = _a.value, label = _a.label, helperText = _a.helperText, _c = _a.legend, legend = _c === void 0 ? true : _c, syncId = _a.syncId, _d = _a.color, color = _d === void 0 ? 'categorical' : _d, headerAction = _a.headerAction;
39
+ var _a = props, data = _a.data, leftAxis = _a.leftAxis, bottomAxis = _a.bottomAxis, _b = _a.height, height = _b === void 0 ? 300 : _b, title = _a.title, value = _a.value, label = _a.label, helperText = _a.helperText, _c = _a.legend, legend = _c === void 0 ? true : _c, syncId = _a.syncId, _d = _a.color, color = _d === void 0 ? 'categorical' : _d, headerAction = _a.headerAction, additionalMenuItems = _a.additionalMenuItems;
40
40
  var theme = useTheme();
41
41
  // Function to know how many lines we need based of how much different group values are.
42
42
  var groups = _.uniqBy(data, 'group').map(function (item) { return item.group; });
@@ -77,7 +77,7 @@ export function LineChart(props) {
77
77
  _b[entry.group] = entry[leftAxisDataKey],
78
78
  _b;
79
79
  });
80
- return (React.createElement(ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, headerAction: headerAction },
80
+ return (React.createElement(ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, headerAction: headerAction, additionalMenuItems: additionalMenuItems },
81
81
  React.createElement(ResponsiveContainer, { width: '100%', height: height }, data.length ? (React.createElement(RechartsLineChart, { data: Object.values(entries), height: height, width: 500, syncId: syncId, margin: {
82
82
  top: 24,
83
83
  right: 10,
package/line-chart/index.js CHANGED
@@ -65,7 +65,7 @@ var chart_card_1 = require("../chart-card");
65
65
  var chart_1 = require("../common/chart");
66
66
  var custom_legend_1 = require("../common/custom-legend");
67
67
  function LineChart(props) {
68
- var _a = props, data = _a.data, leftAxis = _a.leftAxis, bottomAxis = _a.bottomAxis, _b = _a.height, height = _b === void 0 ? 300 : _b, title = _a.title, value = _a.value, label = _a.label, helperText = _a.helperText, _c = _a.legend, legend = _c === void 0 ? true : _c, syncId = _a.syncId, _d = _a.color, color = _d === void 0 ? 'categorical' : _d, headerAction = _a.headerAction;
68
+ var _a = props, data = _a.data, leftAxis = _a.leftAxis, bottomAxis = _a.bottomAxis, _b = _a.height, height = _b === void 0 ? 300 : _b, title = _a.title, value = _a.value, label = _a.label, helperText = _a.helperText, _c = _a.legend, legend = _c === void 0 ? true : _c, syncId = _a.syncId, _d = _a.color, color = _d === void 0 ? 'categorical' : _d, headerAction = _a.headerAction, additionalMenuItems = _a.additionalMenuItems;
69
69
  var theme = (0, quantum_product_1.useTheme)();
70
70
  // Function to know how many lines we need based of how much different group values are.
71
71
  var groups = lodash_1.default.uniqBy(data, 'group').map(function (item) { return item.group; });
@@ -106,7 +106,7 @@ function LineChart(props) {
106
106
  _b[entry.group] = entry[leftAxisDataKey],
107
107
  _b;
108
108
  });
109
- return (React.createElement(chart_card_1.ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, headerAction: headerAction },
109
+ return (React.createElement(chart_card_1.ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, headerAction: headerAction, additionalMenuItems: additionalMenuItems },
110
110
  React.createElement(recharts_1.ResponsiveContainer, { width: '100%', height: height }, data.length ? (React.createElement(recharts_1.LineChart, { data: Object.values(entries), height: height, width: 500, syncId: syncId, margin: {
111
111
  top: 24,
112
112
  right: 10,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@auth0/quantum-charts",
3
- "version": "0.3.2",
3
+ "version": "0.3.3",
4
4
  "sideEffects": false,
5
5
  "main": "./index.js",
6
6
  "types": "./index.d.ts",