@auth0/quantum-charts 1.0.7 → 1.0.9

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 (9) hide show
  1. package/bar-chart/index.d.ts +5 -0
  2. package/bar-chart/index.js +3 -3
  3. package/common/chart.d.ts +6 -1
  4. package/common/custom-tooltip.js +15 -3
  5. package/esm/bar-chart/index.js +3 -3
  6. package/esm/common/custom-tooltip.js +16 -4
  7. package/esm/line-chart/index.js +3 -3
  8. package/line-chart/index.js +3 -3
  9. package/package.json +2 -2
package/bar-chart/index.d.ts CHANGED
@@ -3,5 +3,10 @@ import { IBaseChartProps } from '../common/chart';
3
3
  export interface IBarChartProps<DataType = unknown> extends IBaseChartProps<DataType> {
4
4
  layout?: 'horizontal' | 'vertical';
5
5
  isStacked?: boolean;
6
+ showTotalValueInTooltip?: boolean;
7
+ tooltipProp?: {
8
+ tooltipHeader?: React.ReactElement;
9
+ tooltipFooter?: React.ReactElement;
10
+ };
6
11
  }
7
12
  export declare function BarChart<DataType = unknown>(props: IBarChartProps<DataType>): React.JSX.Element;
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, additionalMenuItems = _a.additionalMenuItems;
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, tooltipProp = _a.tooltipProp, _f = _a.showTotalValueInTooltip, showTotalValueInTooltip = _f === void 0 ? false : _f;
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; });
@@ -72,7 +72,7 @@ function BarChart(props) {
72
72
  var _a;
73
73
  return (__assign(__assign({}, acc), (_a = {}, _a[group] = false, _a)));
74
74
  }, {}));
75
- var _f = __read(React.useState(initialState), 2), barVisibility = _f[0], setBarVisibility = _f[1];
75
+ var _g = __read(React.useState(initialState), 2), barVisibility = _g[0], setBarVisibility = _g[1];
76
76
  var handleLegendMouseEnter = function (e) {
77
77
  if (!barVisibility[e.dataKey]) {
78
78
  setBarVisibility(__assign(__assign({}, barVisibility), { hover: e.dataKey }));
@@ -119,7 +119,7 @@ function BarChart(props) {
119
119
  tickFormatter: function (value) { return (0, chart_1.tickFormatter)(value, leftAxis.scaleType); },
120
120
  dataKey: bottomAxisDataKey,
121
121
  }), { domain: ['auto', 'auto'], axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold } })),
122
- React.createElement(recharts_1.Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(custom_tooltip_1.default, { active: undefined, payload: undefined, scaleType: bottomAxis.scaleType }) }),
122
+ React.createElement(recharts_1.Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(custom_tooltip_1.default, { active: undefined, payload: undefined, scaleType: bottomAxis.scaleType, tooltipProp: tooltipProp, showTotalValue: showTotalValueInTooltip }) }),
123
123
  React.createElement(recharts_1.Legend, { align: "center", content: React.createElement(custom_legend_1.CustomLegend, { selectData: selectBar, handleLegendMouseEnter: handleLegendMouseEnter, handleLegendMouseLeave: handleLegendMouseLeave, dataVisibility: barVisibility }) }),
124
124
  groups.map(function (group, index) {
125
125
  return (React.createElement(recharts_1.Bar, __assign({ key: group, dataKey: group }, (isStacked && { stackId: 'stack' }), { name: group, maxBarSize: 70, hide: barVisibility[group] === true, fill: barVisibility.hover === group || !barVisibility.hover
package/common/chart.d.ts CHANGED
@@ -4,7 +4,12 @@ import { IChartCardProps } from '../chart-card';
4
4
  import { DropdownMenuListItemValue } from '@auth0/quantum-product';
5
5
  export type ScaleType = 'date' | 'datetime' | 'label' | 'number';
6
6
  export interface ICustomTooltipProps extends TooltipProps<number, string> {
7
- scaleType?: 'datetime' | 'date';
7
+ scaleType?: 'datetime' | 'date' | 'label';
8
+ showTotalValue?: boolean;
9
+ tooltipProp?: {
10
+ tooltipHeader?: React.ReactElement;
11
+ tooltipFooter?: React.ReactElement;
12
+ };
8
13
  }
9
14
  export interface ILegendOptions {
10
15
  enabled?: boolean;
package/common/custom-tooltip.js CHANGED
@@ -33,17 +33,26 @@ var date_fns_1 = require("date-fns");
33
33
  var styles_1 = require("../styles");
34
34
  var CustomTooltip = function (props) {
35
35
  var _a, _b, _c;
36
- var active = props.active, payload = props.payload, scaleType = props.scaleType, labelProp = props.label;
36
+ var active = props.active, payload = props.payload, scaleType = props.scaleType, labelProp = props.label, tooltipProp = props.tooltipProp, showTotalValue = props.showTotalValue;
37
37
  var theme = (0, quantum_product_1.useTheme)();
38
38
  if (active && payload && payload.length) {
39
39
  var label = ((_a = payload[0].payload) === null || _a === void 0 ? void 0 : _a.date)
40
40
  ? scaleType === 'datetime'
41
41
  ? "".concat((0, date_fns_1.format)(new Date((_b = payload[0].payload) === null || _b === void 0 ? void 0 : _b.date), 'LLL d HH:mm'))
42
- : "".concat((0, date_fns_1.format)(new Date((_c = payload[0].payload) === null || _c === void 0 ? void 0 : _c.date), 'LLL d'))
42
+ : scaleType === 'label'
43
+ ? labelProp
44
+ : "".concat((0, date_fns_1.format)(new Date((_c = payload[0].payload) === null || _c === void 0 ? void 0 : _c.date), 'LLL d'))
43
45
  : labelProp;
46
+ var totalValue = payload.reduce(function (total, item) { return total + (item.value || 0); }, 0);
44
47
  var hiddenKeysPattern_1 = /_hidden|thresholdControl/;
45
48
  return (React.createElement(styles_1.CustomTooltip, null,
49
+ (tooltipProp === null || tooltipProp === void 0 ? void 0 : tooltipProp.tooltipFooter) && (React.createElement(React.Fragment, null,
50
+ tooltipProp.tooltipHeader,
51
+ React.createElement(quantum_product_1.Divider, null))),
46
52
  React.createElement(quantum_product_1.Text, { color: "text.secondary" }, label),
53
+ showTotalValue && (React.createElement(quantum_product_1.StackLayout, { gutter: 0.5 },
54
+ React.createElement(quantum_product_1.Text, { color: "text.primary" }, "Total: "),
55
+ React.createElement(quantum_product_1.Text, { color: "text.secondary" }, totalValue))),
47
56
  React.createElement(quantum_product_1.Box, null,
48
57
  React.createElement(quantum_product_1.RowLayout, { gutter: 1 }, payload
49
58
  .filter(function (item) { return !hiddenKeysPattern_1.test("".concat(item.dataKey)); })
@@ -54,7 +63,10 @@ var CustomTooltip = function (props) {
54
63
  x.payload['evaluated_group'] === x.dataKey &&
55
64
  x.payload['breachedPoint'] !== 'none' &&
56
65
  (x.payload['breachedPoint'] === 'alert' ? (React.createElement(quantum_product_1.AlertDiamondFilledIcon, { color: theme.tokens.color_fg_state_danger })) : (React.createElement(quantum_product_1.AlertTriangleFilledIcon, { color: theme.tokens.color_fg_state_caution })))));
57
- })))));
66
+ }))),
67
+ (tooltipProp === null || tooltipProp === void 0 ? void 0 : tooltipProp.tooltipFooter) && (React.createElement(React.Fragment, null,
68
+ React.createElement(quantum_product_1.Divider, null),
69
+ tooltipProp.tooltipFooter))));
58
70
  }
59
71
  return null;
60
72
  };
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, additionalMenuItems = _a.additionalMenuItems;
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, tooltipProp = _a.tooltipProp, _f = _a.showTotalValueInTooltip, showTotalValueInTooltip = _f === void 0 ? false : _f;
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; });
@@ -43,7 +43,7 @@ export function BarChart(props) {
43
43
  var _a;
44
44
  return (__assign(__assign({}, acc), (_a = {}, _a[group] = false, _a)));
45
45
  }, {}));
46
- var _f = __read(React.useState(initialState), 2), barVisibility = _f[0], setBarVisibility = _f[1];
46
+ var _g = __read(React.useState(initialState), 2), barVisibility = _g[0], setBarVisibility = _g[1];
47
47
  var handleLegendMouseEnter = function (e) {
48
48
  if (!barVisibility[e.dataKey]) {
49
49
  setBarVisibility(__assign(__assign({}, barVisibility), { hover: e.dataKey }));
@@ -90,7 +90,7 @@ export function BarChart(props) {
90
90
  tickFormatter: function (value) { return tickFormatter(value, leftAxis.scaleType); },
91
91
  dataKey: bottomAxisDataKey,
92
92
  }), { domain: ['auto', 'auto'], axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold } })),
93
- React.createElement(Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(CustomTooltip, { active: undefined, payload: undefined, scaleType: bottomAxis.scaleType }) }),
93
+ React.createElement(Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(CustomTooltip, { active: undefined, payload: undefined, scaleType: bottomAxis.scaleType, tooltipProp: tooltipProp, showTotalValue: showTotalValueInTooltip }) }),
94
94
  React.createElement(Legend, { align: "center", content: React.createElement(CustomLegend, { selectData: selectBar, handleLegendMouseEnter: handleLegendMouseEnter, handleLegendMouseLeave: handleLegendMouseLeave, dataVisibility: barVisibility }) }),
95
95
  groups.map(function (group, index) {
96
96
  return (React.createElement(Bar, __assign({ key: group, dataKey: group }, (isStacked && { stackId: 'stack' }), { name: group, maxBarSize: 70, hide: barVisibility[group] === true, fill: barVisibility.hover === group || !barVisibility.hover
package/esm/common/custom-tooltip.js CHANGED
@@ -1,21 +1,30 @@
1
1
  import * as React from 'react';
2
- import { Box, RowLayout, StackLayout, Text, useTheme, AlertTriangleFilledIcon, AlertDiamondFilledIcon, } from '@auth0/quantum-product';
2
+ import { Box, RowLayout, StackLayout, Text, useTheme, AlertTriangleFilledIcon, AlertDiamondFilledIcon, Divider, } from '@auth0/quantum-product';
3
3
  import StatusDot from './custom-color-status-dot';
4
4
  import { format } from 'date-fns';
5
5
  import { CustomTooltip as CustomTooltipStyled } from '../styles';
6
6
  var CustomTooltip = function (props) {
7
7
  var _a, _b, _c;
8
- var active = props.active, payload = props.payload, scaleType = props.scaleType, labelProp = props.label;
8
+ var active = props.active, payload = props.payload, scaleType = props.scaleType, labelProp = props.label, tooltipProp = props.tooltipProp, showTotalValue = props.showTotalValue;
9
9
  var theme = useTheme();
10
10
  if (active && payload && payload.length) {
11
11
  var label = ((_a = payload[0].payload) === null || _a === void 0 ? void 0 : _a.date)
12
12
  ? scaleType === 'datetime'
13
13
  ? "".concat(format(new Date((_b = payload[0].payload) === null || _b === void 0 ? void 0 : _b.date), 'LLL d HH:mm'))
14
- : "".concat(format(new Date((_c = payload[0].payload) === null || _c === void 0 ? void 0 : _c.date), 'LLL d'))
14
+ : scaleType === 'label'
15
+ ? labelProp
16
+ : "".concat(format(new Date((_c = payload[0].payload) === null || _c === void 0 ? void 0 : _c.date), 'LLL d'))
15
17
  : labelProp;
18
+ var totalValue = payload.reduce(function (total, item) { return total + (item.value || 0); }, 0);
16
19
  var hiddenKeysPattern_1 = /_hidden|thresholdControl/;
17
20
  return (React.createElement(CustomTooltipStyled, null,
21
+ (tooltipProp === null || tooltipProp === void 0 ? void 0 : tooltipProp.tooltipFooter) && (React.createElement(React.Fragment, null,
22
+ tooltipProp.tooltipHeader,
23
+ React.createElement(Divider, null))),
18
24
  React.createElement(Text, { color: "text.secondary" }, label),
25
+ showTotalValue && (React.createElement(StackLayout, { gutter: 0.5 },
26
+ React.createElement(Text, { color: "text.primary" }, "Total: "),
27
+ React.createElement(Text, { color: "text.secondary" }, totalValue))),
19
28
  React.createElement(Box, null,
20
29
  React.createElement(RowLayout, { gutter: 1 }, payload
21
30
  .filter(function (item) { return !hiddenKeysPattern_1.test("".concat(item.dataKey)); })
@@ -26,7 +35,10 @@ var CustomTooltip = function (props) {
26
35
  x.payload['evaluated_group'] === x.dataKey &&
27
36
  x.payload['breachedPoint'] !== 'none' &&
28
37
  (x.payload['breachedPoint'] === 'alert' ? (React.createElement(AlertDiamondFilledIcon, { color: theme.tokens.color_fg_state_danger })) : (React.createElement(AlertTriangleFilledIcon, { color: theme.tokens.color_fg_state_caution })))));
29
- })))));
38
+ }))),
39
+ (tooltipProp === null || tooltipProp === void 0 ? void 0 : tooltipProp.tooltipFooter) && (React.createElement(React.Fragment, null,
40
+ React.createElement(Divider, null),
41
+ tooltipProp.tooltipFooter))));
30
42
  }
31
43
  return null;
32
44
  };
package/esm/line-chart/index.js CHANGED
@@ -174,9 +174,9 @@ export function LineChart(props) {
174
174
  threshold &&
175
175
  breaches[threshold.evaluated_metric].map(function (breach, index) {
176
176
  return (React.createElement(React.Fragment, null,
177
- React.createElement(ReferenceLine, { key: index, x: breach.start, stroke: getThresholdColor(lineVisibility, theme.tokens.color_border_state_neutral), strokeDasharray: "3 3", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden' }),
178
- React.createElement(ReferenceArea, { key: index, x1: breach.start, x2: breach.end, fill: getThresholdColor(lineVisibility, theme.tokens.color_bg_state_neutral), fillOpacity: 0.1, visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden' }),
179
- React.createElement(ReferenceLine, { key: index, x: breach.end, stroke: getThresholdColor(lineVisibility, theme.tokens.color_border_state_neutral), strokeDasharray: "3 3", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden' })));
177
+ React.createElement(ReferenceLine, { key: "".concat(index, "_start"), x: breach.start, stroke: getThresholdColor(lineVisibility, theme.tokens.color_border_state_neutral), strokeDasharray: "3 3", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden' }),
178
+ React.createElement(ReferenceArea, { key: "".concat(index, "_area"), x1: breach.start, x2: breach.end, fill: getThresholdColor(lineVisibility, theme.tokens.color_bg_state_neutral), fillOpacity: 0.1, visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden' }),
179
+ React.createElement(ReferenceLine, { key: "".concat(index, "_end"), x: breach.end, stroke: getThresholdColor(lineVisibility, theme.tokens.color_border_state_neutral), strokeDasharray: "3 3", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden' })));
180
180
  }))) : (React.createElement("div", { style: {
181
181
  display: 'grid',
182
182
  placeItems: 'center',
package/line-chart/index.js CHANGED
@@ -203,9 +203,9 @@ function LineChart(props) {
203
203
  threshold &&
204
204
  breaches[threshold.evaluated_metric].map(function (breach, index) {
205
205
  return (React.createElement(React.Fragment, null,
206
- React.createElement(recharts_1.ReferenceLine, { key: index, x: breach.start, stroke: getThresholdColor(lineVisibility, theme.tokens.color_border_state_neutral), strokeDasharray: "3 3", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden' }),
207
- React.createElement(recharts_1.ReferenceArea, { key: index, x1: breach.start, x2: breach.end, fill: getThresholdColor(lineVisibility, theme.tokens.color_bg_state_neutral), fillOpacity: 0.1, visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden' }),
208
- React.createElement(recharts_1.ReferenceLine, { key: index, x: breach.end, stroke: getThresholdColor(lineVisibility, theme.tokens.color_border_state_neutral), strokeDasharray: "3 3", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden' })));
206
+ React.createElement(recharts_1.ReferenceLine, { key: "".concat(index, "_start"), x: breach.start, stroke: getThresholdColor(lineVisibility, theme.tokens.color_border_state_neutral), strokeDasharray: "3 3", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden' }),
207
+ React.createElement(recharts_1.ReferenceArea, { key: "".concat(index, "_area"), x1: breach.start, x2: breach.end, fill: getThresholdColor(lineVisibility, theme.tokens.color_bg_state_neutral), fillOpacity: 0.1, visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden' }),
208
+ React.createElement(recharts_1.ReferenceLine, { key: "".concat(index, "_end"), x: breach.end, stroke: getThresholdColor(lineVisibility, theme.tokens.color_border_state_neutral), strokeDasharray: "3 3", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden' })));
209
209
  }))) : (React.createElement("div", { style: {
210
210
  display: 'grid',
211
211
  placeItems: 'center',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@auth0/quantum-charts",
3
- "version": "1.0.7",
3
+ "version": "1.0.9",
4
4
  "sideEffects": false,
5
5
  "main": "./index.js",
6
6
  "types": "./index.d.ts",
@@ -19,7 +19,7 @@
19
19
  "@auth0/quantum-product": "^2.1.5",
20
20
  "@formatjs/intl": "^2.5.1",
21
21
  "date-fns": "^2.29.3",
22
- "recharts": "^2.0.7"
22
+ "recharts": "^2.12.7"
23
23
  },
24
24
  "peerDependencies": {
25
25
  "react": "*",