@auth0/quantum-charts 1.0.8 → 1.0.9

package/bar-chart/index.d.ts

@@ -3,5 +3,10 @@ import { IBaseChartProps } from '../common/chart';
 export interface IBarChartProps<DataType = unknown> extends IBaseChartProps<DataType> {
     layout?: 'horizontal' | 'vertical';
     isStacked?: boolean;
+    showTotalValueInTooltip?: boolean;
+    tooltipProp?: {
+        tooltipHeader?: React.ReactElement;
+        tooltipFooter?: React.ReactElement;
+    };
 }
 export declare function BarChart<DataType = unknown>(props: IBarChartProps<DataType>): React.JSX.Element;

package/bar-chart/index.js

@@ -64,7 +64,7 @@ var chart_card_1 = require("../chart-card");
 var chart_1 = require("../common/chart");
 var custom_legend_1 = require("../common/custom-legend");
 function BarChart(props) {
-    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;
+    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;
     var theme = (0, quantum_product_1.useTheme)();
     // Function to know how many bars we need based of how much different group values are.
     var groups = lodash_1.default.uniqBy(data, 'group').map(function (item) { return item.group; });
@@ -72,7 +72,7 @@ function BarChart(props) {
         var _a;
         return (__assign(__assign({}, acc), (_a = {}, _a[group] = false, _a)));
     }, {}));
-    var _f = __read(React.useState(initialState), 2), barVisibility = _f[0], setBarVisibility = _f[1];
+    var _g = __read(React.useState(initialState), 2), barVisibility = _g[0], setBarVisibility = _g[1];
     var handleLegendMouseEnter = function (e) {
         if (!barVisibility[e.dataKey]) {
             setBarVisibility(__assign(__assign({}, barVisibility), { hover: e.dataKey }));
@@ -119,7 +119,7 @@ function BarChart(props) {
                 tickFormatter: function (value) { return (0, chart_1.tickFormatter)(value, leftAxis.scaleType); },
                 dataKey: bottomAxisDataKey,
             }), { domain: ['auto', 'auto'], axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold } })),
-            React.createElement(recharts_1.Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(custom_tooltip_1.default, { active: undefined, payload: undefined, scaleType: bottomAxis.scaleType }) }),
+            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 }) }),
             React.createElement(recharts_1.Legend, { align: "center", content: React.createElement(custom_legend_1.CustomLegend, { selectData: selectBar, handleLegendMouseEnter: handleLegendMouseEnter, handleLegendMouseLeave: handleLegendMouseLeave, dataVisibility: barVisibility }) }),
             groups.map(function (group, index) {
                 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

@@ -4,7 +4,12 @@ import { IChartCardProps } from '../chart-card';
 import { DropdownMenuListItemValue } from '@auth0/quantum-product';
 export type ScaleType = 'date' | 'datetime' | 'label' | 'number';
 export interface ICustomTooltipProps extends TooltipProps<number, string> {
-    scaleType?: 'datetime' | 'date';
+    scaleType?: 'datetime' | 'date' | 'label';
+    showTotalValue?: boolean;
+    tooltipProp?: {
+        tooltipHeader?: React.ReactElement;
+        tooltipFooter?: React.ReactElement;
+    };
 }
 export interface ILegendOptions {
     enabled?: boolean;

package/common/custom-tooltip.js

@@ -33,17 +33,26 @@ var date_fns_1 = require("date-fns");
 var styles_1 = require("../styles");
 var CustomTooltip = function (props) {
     var _a, _b, _c;
-    var active = props.active, payload = props.payload, scaleType = props.scaleType, labelProp = props.label;
+    var active = props.active, payload = props.payload, scaleType = props.scaleType, labelProp = props.label, tooltipProp = props.tooltipProp, showTotalValue = props.showTotalValue;
     var theme = (0, quantum_product_1.useTheme)();
     if (active && payload && payload.length) {
         var label = ((_a = payload[0].payload) === null || _a === void 0 ? void 0 : _a.date)
             ? scaleType === 'datetime'
                 ? "".concat((0, date_fns_1.format)(new Date((_b = payload[0].payload) === null || _b === void 0 ? void 0 : _b.date), 'LLL d HH:mm'))
-                : "".concat((0, date_fns_1.format)(new Date((_c = payload[0].payload) === null || _c === void 0 ? void 0 : _c.date), 'LLL d'))
+                : scaleType === 'label'
+                    ? labelProp
+                    : "".concat((0, date_fns_1.format)(new Date((_c = payload[0].payload) === null || _c === void 0 ? void 0 : _c.date), 'LLL d'))
             : labelProp;
+        var totalValue = payload.reduce(function (total, item) { return total + (item.value || 0); }, 0);
         var hiddenKeysPattern_1 = /_hidden|thresholdControl/;
         return (React.createElement(styles_1.CustomTooltip, null,
+            (tooltipProp === null || tooltipProp === void 0 ? void 0 : tooltipProp.tooltipFooter) && (React.createElement(React.Fragment, null,
+                tooltipProp.tooltipHeader,
+                React.createElement(quantum_product_1.Divider, null))),
             React.createElement(quantum_product_1.Text, { color: "text.secondary" }, label),
+            showTotalValue && (React.createElement(quantum_product_1.StackLayout, { gutter: 0.5 },
+                React.createElement(quantum_product_1.Text, { color: "text.primary" }, "Total: "),
+                React.createElement(quantum_product_1.Text, { color: "text.secondary" }, totalValue))),
             React.createElement(quantum_product_1.Box, null,
                 React.createElement(quantum_product_1.RowLayout, { gutter: 1 }, payload
                     .filter(function (item) { return !hiddenKeysPattern_1.test("".concat(item.dataKey)); })
@@ -54,7 +63,10 @@ var CustomTooltip = function (props) {
                         x.payload['evaluated_group'] === x.dataKey &&
                             x.payload['breachedPoint'] !== 'none' &&
                             (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 })))));
-                })))));
+                }))),
+            (tooltipProp === null || tooltipProp === void 0 ? void 0 : tooltipProp.tooltipFooter) && (React.createElement(React.Fragment, null,
+                React.createElement(quantum_product_1.Divider, null),
+                tooltipProp.tooltipFooter))));
     }
     return null;
 };

package/esm/bar-chart/index.js

@@ -35,7 +35,7 @@ import { ChartCard } from '../chart-card';
 import { tickFormatter } from '../common/chart';
 import { CustomLegend } from '../common/custom-legend';
 export function BarChart(props) {
-    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;
+    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;
     var theme = useTheme();
     // Function to know how many bars we need based of how much different group values are.
     var groups = _.uniqBy(data, 'group').map(function (item) { return item.group; });
@@ -43,7 +43,7 @@ export function BarChart(props) {
         var _a;
         return (__assign(__assign({}, acc), (_a = {}, _a[group] = false, _a)));
     }, {}));
-    var _f = __read(React.useState(initialState), 2), barVisibility = _f[0], setBarVisibility = _f[1];
+    var _g = __read(React.useState(initialState), 2), barVisibility = _g[0], setBarVisibility = _g[1];
     var handleLegendMouseEnter = function (e) {
         if (!barVisibility[e.dataKey]) {
             setBarVisibility(__assign(__assign({}, barVisibility), { hover: e.dataKey }));
@@ -90,7 +90,7 @@ export function BarChart(props) {
                 tickFormatter: function (value) { return tickFormatter(value, leftAxis.scaleType); },
                 dataKey: bottomAxisDataKey,
             }), { domain: ['auto', 'auto'], axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold } })),
-            React.createElement(Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(CustomTooltip, { active: undefined, payload: undefined, scaleType: bottomAxis.scaleType }) }),
+            React.createElement(Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(CustomTooltip, { active: undefined, payload: undefined, scaleType: bottomAxis.scaleType, tooltipProp: tooltipProp, showTotalValue: showTotalValueInTooltip }) }),
             React.createElement(Legend, { align: "center", content: React.createElement(CustomLegend, { selectData: selectBar, handleLegendMouseEnter: handleLegendMouseEnter, handleLegendMouseLeave: handleLegendMouseLeave, dataVisibility: barVisibility }) }),
             groups.map(function (group, index) {
                 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

@@ -1,21 +1,30 @@
 import * as React from 'react';
-import { Box, RowLayout, StackLayout, Text, useTheme, AlertTriangleFilledIcon, AlertDiamondFilledIcon, } from '@auth0/quantum-product';
+import { Box, RowLayout, StackLayout, Text, useTheme, AlertTriangleFilledIcon, AlertDiamondFilledIcon, Divider, } from '@auth0/quantum-product';
 import StatusDot from './custom-color-status-dot';
 import { format } from 'date-fns';
 import { CustomTooltip as CustomTooltipStyled } from '../styles';
 var CustomTooltip = function (props) {
     var _a, _b, _c;
-    var active = props.active, payload = props.payload, scaleType = props.scaleType, labelProp = props.label;
+    var active = props.active, payload = props.payload, scaleType = props.scaleType, labelProp = props.label, tooltipProp = props.tooltipProp, showTotalValue = props.showTotalValue;
     var theme = useTheme();
     if (active && payload && payload.length) {
         var label = ((_a = payload[0].payload) === null || _a === void 0 ? void 0 : _a.date)
             ? scaleType === 'datetime'
                 ? "".concat(format(new Date((_b = payload[0].payload) === null || _b === void 0 ? void 0 : _b.date), 'LLL d HH:mm'))
-                : "".concat(format(new Date((_c = payload[0].payload) === null || _c === void 0 ? void 0 : _c.date), 'LLL d'))
+                : scaleType === 'label'
+                    ? labelProp
+                    : "".concat(format(new Date((_c = payload[0].payload) === null || _c === void 0 ? void 0 : _c.date), 'LLL d'))
             : labelProp;
+        var totalValue = payload.reduce(function (total, item) { return total + (item.value || 0); }, 0);
         var hiddenKeysPattern_1 = /_hidden|thresholdControl/;
         return (React.createElement(CustomTooltipStyled, null,
+            (tooltipProp === null || tooltipProp === void 0 ? void 0 : tooltipProp.tooltipFooter) && (React.createElement(React.Fragment, null,
+                tooltipProp.tooltipHeader,
+                React.createElement(Divider, null))),
             React.createElement(Text, { color: "text.secondary" }, label),
+            showTotalValue && (React.createElement(StackLayout, { gutter: 0.5 },
+                React.createElement(Text, { color: "text.primary" }, "Total: "),
+                React.createElement(Text, { color: "text.secondary" }, totalValue))),
             React.createElement(Box, null,
                 React.createElement(RowLayout, { gutter: 1 }, payload
                     .filter(function (item) { return !hiddenKeysPattern_1.test("".concat(item.dataKey)); })
@@ -26,7 +35,10 @@ var CustomTooltip = function (props) {
                         x.payload['evaluated_group'] === x.dataKey &&
                             x.payload['breachedPoint'] !== 'none' &&
                             (x.payload['breachedPoint'] === 'alert' ? (React.createElement(AlertDiamondFilledIcon, { color: theme.tokens.color_fg_state_danger })) : (React.createElement(AlertTriangleFilledIcon, { color: theme.tokens.color_fg_state_caution })))));
-                })))));
+                }))),
+            (tooltipProp === null || tooltipProp === void 0 ? void 0 : tooltipProp.tooltipFooter) && (React.createElement(React.Fragment, null,
+                React.createElement(Divider, null),
+                tooltipProp.tooltipFooter))));
     }
     return null;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auth0/quantum-charts",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "sideEffects": false,
   "main": "./index.js",
   "types": "./index.d.ts",