@auth0/quantum-charts 1.1.0 → 1.1.1

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 (8) hide show
  1. package/bar-chart/index.js +2 -3
  2. package/common/chart.d.ts +2 -2
  3. package/common/chart.js +2 -0
  4. package/common/custom-tooltip.js +11 -6
  5. package/esm/bar-chart/index.js +2 -3
  6. package/esm/common/chart.js +2 -0
  7. package/esm/common/custom-tooltip.js +11 -6
  8. package/package.json +1 -1
package/bar-chart/index.js CHANGED
@@ -109,7 +109,6 @@ function BarChart(props) {
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,
112
- left: layout === 'vertical' ? -24 : 36,
113
112
  bottom: 0,
114
113
  } },
115
114
  React.createElement(recharts_1.CartesianGrid, { vertical: false, stroke: theme.tokens.color_border_default }),
@@ -118,11 +117,11 @@ function BarChart(props) {
118
117
  type: 'category',
119
118
  tickFormatter: function (value) { return (0, chart_1.tickFormatter)(value, leftAxis.scaleType); },
120
119
  dataKey: bottomAxisDataKey,
121
- }), { domain: ['auto', 'auto'], axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold } })),
120
+ }), { tickFormatter: function (value) { return (0, chart_1.tickFormatter)(value, leftAxis.scaleType); }, domain: ['auto', 'auto'], axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold } })),
122
121
  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
122
  React.createElement(recharts_1.Legend, { align: "center", content: React.createElement(custom_legend_1.CustomLegend, { selectData: selectBar, handleLegendMouseEnter: handleLegendMouseEnter, handleLegendMouseLeave: handleLegendMouseLeave, dataVisibility: barVisibility }) }),
124
123
  groups.map(function (group, index) {
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
124
+ return (React.createElement(recharts_1.Bar, __assign({ key: group, dataKey: group, barCategoryGap: "2%" }, (isStacked && { stackId: 'stack' }), { name: group, hide: barVisibility[group] === true, fill: barVisibility.hover === group || !barVisibility.hover
126
125
  ? (0, theme_1.getColorScale)(theme)[color]['base'][index]
127
126
  : (0, theme_1.getColorScale)(theme)[color]['muted'][index] })));
128
127
  }))) : (React.createElement("div", { style: {
package/common/chart.d.ts CHANGED
@@ -2,9 +2,9 @@
2
2
  import { TooltipProps } from 'recharts';
3
3
  import { IChartCardProps } from '../chart-card';
4
4
  import { DropdownMenuListItemValue } from '@auth0/quantum-product';
5
- export type ScaleType = 'date' | 'datetime' | 'label' | 'number';
5
+ export type ScaleType = 'date' | 'datetime' | 'label' | 'number' | 'monthyear';
6
6
  export interface ICustomTooltipProps extends TooltipProps<number, string> {
7
- scaleType?: 'datetime' | 'date' | 'label';
7
+ scaleType?: 'datetime' | 'date' | 'label' | 'monthyear';
8
8
  showTotalValue?: boolean;
9
9
  tooltipProp?: {
10
10
  tooltipHeader?: React.ReactElement;
package/common/chart.js CHANGED
@@ -25,6 +25,8 @@ var tickFormatter = function (value, scaleType) {
25
25
  return (0, date_fns_1.format)(new Date(value), 'LLL d');
26
26
  case 'datetime':
27
27
  return (0, date_fns_1.format)(new Date(value), 'LLL d p');
28
+ case 'monthyear':
29
+ return (0, date_fns_1.format)(new Date(value), 'LLL yyyy');
28
30
  default:
29
31
  break;
30
32
  }
package/common/custom-tooltip.js CHANGED
@@ -32,18 +32,23 @@ var custom_color_status_dot_1 = __importDefault(require("./custom-color-status-d
32
32
  var date_fns_1 = require("date-fns");
33
33
  var styles_1 = require("../styles");
34
34
  var CustomTooltip = function (props) {
35
- var _a, _b, _c;
35
+ var _a, _b, _c, _d;
36
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
- : 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'))
42
+ : scaleType === 'monthyear'
43
+ ? "".concat((0, date_fns_1.format)(new Date((_c = payload[0].payload) === null || _c === void 0 ? void 0 : _c.date), 'LLL yyyy'))
44
+ : scaleType === 'label'
45
+ ? labelProp
46
+ : "".concat((0, date_fns_1.format)(new Date((_d = payload[0].payload) === null || _d === void 0 ? void 0 : _d.date), 'LLL d'))
45
47
  : labelProp;
46
- var totalValue = payload.reduce(function (total, item) { return total + (item.value || 0); }, 0);
48
+ var formatValue_1 = function (value) {
49
+ return value % 1 !== 0 ? parseFloat(value.toFixed(2)) : value;
50
+ };
51
+ var totalValue = formatValue_1(payload.reduce(function (total, item) { return total + (item.value || 0); }, 0));
47
52
  var hiddenKeysPattern_1 = /_hidden|thresholdControl/;
48
53
  return (React.createElement(styles_1.CustomTooltip, null,
49
54
  (tooltipProp === null || tooltipProp === void 0 ? void 0 : tooltipProp.tooltipHeader) && (React.createElement(React.Fragment, null,
@@ -59,7 +64,7 @@ var CustomTooltip = function (props) {
59
64
  .map(function (x, index) {
60
65
  return (React.createElement(quantum_product_1.StackLayout, { key: index, gutter: 0.5 },
61
66
  React.createElement(custom_color_status_dot_1.default, { key: index, dotColor: x.color || 'grey', label: "".concat(x.name, ":") + ' ' }),
62
- React.createElement(quantum_product_1.Text, { color: "text.secondary", alignItems: 'end' }, x.payload[x.dataKey || '']),
67
+ React.createElement(quantum_product_1.Text, { color: "text.secondary", alignItems: 'end' }, x.dataKey ? formatValue_1(x.payload[x.dataKey]) : ''),
63
68
  x.payload['evaluated_group'] === x.dataKey &&
64
69
  x.payload['breachedPoint'] !== 'none' &&
65
70
  (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 })))));
package/esm/bar-chart/index.js CHANGED
@@ -80,7 +80,6 @@ export function BarChart(props) {
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,
83
- left: layout === 'vertical' ? -24 : 36,
84
83
  bottom: 0,
85
84
  } },
86
85
  React.createElement(CartesianGrid, { vertical: false, stroke: theme.tokens.color_border_default }),
@@ -89,11 +88,11 @@ export function BarChart(props) {
89
88
  type: 'category',
90
89
  tickFormatter: function (value) { return tickFormatter(value, leftAxis.scaleType); },
91
90
  dataKey: bottomAxisDataKey,
92
- }), { domain: ['auto', 'auto'], axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold } })),
91
+ }), { tickFormatter: function (value) { return tickFormatter(value, leftAxis.scaleType); }, domain: ['auto', 'auto'], axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold } })),
93
92
  React.createElement(Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(CustomTooltip, { active: undefined, payload: undefined, scaleType: bottomAxis.scaleType, tooltipProp: tooltipProp, showTotalValue: showTotalValueInTooltip }) }),
94
93
  React.createElement(Legend, { align: "center", content: React.createElement(CustomLegend, { selectData: selectBar, handleLegendMouseEnter: handleLegendMouseEnter, handleLegendMouseLeave: handleLegendMouseLeave, dataVisibility: barVisibility }) }),
95
94
  groups.map(function (group, index) {
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
95
+ return (React.createElement(Bar, __assign({ key: group, dataKey: group, barCategoryGap: "2%" }, (isStacked && { stackId: 'stack' }), { name: group, hide: barVisibility[group] === true, fill: barVisibility.hover === group || !barVisibility.hover
97
96
  ? getColorScale(theme)[color]['base'][index]
98
97
  : getColorScale(theme)[color]['muted'][index] })));
99
98
  }))) : (React.createElement("div", { style: {
package/esm/common/chart.js CHANGED
@@ -22,6 +22,8 @@ export var tickFormatter = function (value, scaleType) {
22
22
  return format(new Date(value), 'LLL d');
23
23
  case 'datetime':
24
24
  return format(new Date(value), 'LLL d p');
25
+ case 'monthyear':
26
+ return format(new Date(value), 'LLL yyyy');
25
27
  default:
26
28
  break;
27
29
  }
package/esm/common/custom-tooltip.js CHANGED
@@ -4,18 +4,23 @@ 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
- var _a, _b, _c;
7
+ var _a, _b, _c, _d;
8
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
- : scaleType === 'label'
15
- ? labelProp
16
- : "".concat(format(new Date((_c = payload[0].payload) === null || _c === void 0 ? void 0 : _c.date), 'LLL d'))
14
+ : scaleType === 'monthyear'
15
+ ? "".concat(format(new Date((_c = payload[0].payload) === null || _c === void 0 ? void 0 : _c.date), 'LLL yyyy'))
16
+ : scaleType === 'label'
17
+ ? labelProp
18
+ : "".concat(format(new Date((_d = payload[0].payload) === null || _d === void 0 ? void 0 : _d.date), 'LLL d'))
17
19
  : labelProp;
18
- var totalValue = payload.reduce(function (total, item) { return total + (item.value || 0); }, 0);
20
+ var formatValue_1 = function (value) {
21
+ return value % 1 !== 0 ? parseFloat(value.toFixed(2)) : value;
22
+ };
23
+ var totalValue = formatValue_1(payload.reduce(function (total, item) { return total + (item.value || 0); }, 0));
19
24
  var hiddenKeysPattern_1 = /_hidden|thresholdControl/;
20
25
  return (React.createElement(CustomTooltipStyled, null,
21
26
  (tooltipProp === null || tooltipProp === void 0 ? void 0 : tooltipProp.tooltipHeader) && (React.createElement(React.Fragment, null,
@@ -31,7 +36,7 @@ var CustomTooltip = function (props) {
31
36
  .map(function (x, index) {
32
37
  return (React.createElement(StackLayout, { key: index, gutter: 0.5 },
33
38
  React.createElement(StatusDot, { key: index, dotColor: x.color || 'grey', label: "".concat(x.name, ":") + ' ' }),
34
- React.createElement(Text, { color: "text.secondary", alignItems: 'end' }, x.payload[x.dataKey || '']),
39
+ React.createElement(Text, { color: "text.secondary", alignItems: 'end' }, x.dataKey ? formatValue_1(x.payload[x.dataKey]) : ''),
35
40
  x.payload['evaluated_group'] === x.dataKey &&
36
41
  x.payload['breachedPoint'] !== 'none' &&
37
42
  (x.payload['breachedPoint'] === 'alert' ? (React.createElement(AlertDiamondFilledIcon, { color: theme.tokens.color_fg_state_danger })) : (React.createElement(AlertTriangleFilledIcon, { color: theme.tokens.color_fg_state_caution })))));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@auth0/quantum-charts",
3
- "version": "1.1.0",
3
+ "version": "1.1.1",
4
4
  "sideEffects": false,
5
5
  "main": "./index.js",
6
6
  "types": "./index.d.ts",