@auth0/quantum-charts 1.3.16 → 1.3.18

package/bar-chart/index.js

@@ -26,13 +26,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -53,7 +63,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BarChart = void 0;
+exports.BarChart = BarChart;
 var lodash_1 = __importDefault(require("lodash"));
 var React = __importStar(require("react"));
 var recharts_1 = require("recharts");
@@ -138,4 +148,3 @@ function BarChart(props) {
             } },
             React.createElement(quantum_product_1.Text, { variant: "subtitle1" }, "No data"))))));
 }
-exports.BarChart = BarChart;

package/chart-card/index.js

@@ -15,15 +15,25 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChartCard = void 0;
+exports.ChartCard = ChartCard;
 var quantum_product_1 = require("@auth0/quantum-product");
 var React = __importStar(require("react"));
 var chart_summary_1 = require("../chart-summary");
@@ -33,4 +43,3 @@ function ChartCard(props) {
         React.createElement(chart_summary_1.ChartSummary, { title: title, value: value, dataTable: dataTable, helperText: helperText, label: label, headerAction: headerAction, showChartTable: showChartTable, allowDownload: allowDownload, additionalMenuItems: additionalMenuItems, customViewChartTable: customViewChartTable, triggerButtonSize: triggerButtonSize, chartStatus: chartStatus, titleIcon: titleIcon, finalMenuItem: finalMenuItem, isVertical: isVertical }),
         children));
 }
-exports.ChartCard = ChartCard;

package/chart-summary/data-table-chart.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -42,7 +52,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataTableChart = void 0;
+exports.DataTableChart = DataTableChart;
 var lodash_1 = __importDefault(require("lodash"));
 var React = __importStar(require("react"));
 var date_fns_1 = require("date-fns");
@@ -86,4 +96,3 @@ function DataTableChart(props) {
                         ] })));
             }))))))));
 }
-exports.DataTableChart = DataTableChart;

package/chart-summary/index.js

@@ -30,13 +30,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -63,7 +73,8 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChartSummary = exports.titleToAnalyticName = void 0;
+exports.titleToAnalyticName = void 0;
+exports.ChartSummary = ChartSummary;
 var React = __importStar(require("react"));
 var quantum_product_1 = require("@auth0/quantum-product");
 var downloadCsv_1 = require("../helpers/downloadCsv");
@@ -185,5 +196,4 @@ function ChartSummary(props) {
                 label) }),
         showChartTable && (React.createElement(data_table_chart_1.DataTableChart, { title: title, isOpen: isOpen, toggleIsOpen: toggleIsOpen, data: dataTable, customViewChartTable: customViewChartTable, allowDownload: allowDownload }))));
 }
-exports.ChartSummary = ChartSummary;
 var templateObject_1, templateObject_2, templateObject_3;

package/common/chart.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TooltipProps } from 'recharts';
 import { IChartCardProps } from '../chart-card';
 import { DropdownMenuListItemValue } from '@auth0/quantum-product';

package/common/custom-legend.js

@@ -26,13 +26,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/common/custom-tooltip.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/compare-aggregate/compare-aggregate.js

@@ -15,15 +15,25 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CompareAggregate = void 0;
+exports.CompareAggregate = CompareAggregate;
 var React = __importStar(require("react"));
 var styles_1 = require("../styles");
 var delta_1 = require("../delta");
@@ -37,4 +47,3 @@ function CompareAggregate(props) {
             React.createElement(styles_1.DefaultCursorBox, null,
                 React.createElement(delta_1.Delta, { value: value, comparedValue: comparedValue, displayType: displayType, direction: direction })))));
 }
-exports.CompareAggregate = CompareAggregate;

package/delta/delta.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Delta = exports.computeDelta = void 0;
 var React = __importStar(require("react"));

package/donut-chart/center.js

@@ -19,13 +19,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = __importStar(require("react"));
 var quantum_product_1 = require("@auth0/quantum-product");
@@ -51,12 +61,14 @@ var Center = function (props) {
     };
     return (React.createElement(CenterPositioning, null,
         React.createElement(quantum_product_1.Box, null,
-            React.createElement(Aggregate, null, hasNoData
-                ? 'No data'
-                : displayType === 'absolute'
-                    ? (0, format_number_1.toShortCompactNotation)(aggregate)
-                    : (0, format_number_1.toPercentageAdaptive)(percentage(aggregate, sumValues(data)) / 100)),
-            centerLabel)));
+            React.createElement(Aggregate, null, hasNoData ? (React.createElement("div", { style: {
+                    display: 'grid',
+                    placeItems: 'center',
+                    height: '100%',
+                    textAlign: 'center',
+                } },
+                React.createElement(quantum_product_1.Text, { variant: "subtitle1" }, "No data"))) : displayType === 'absolute' ? ((0, format_number_1.toShortCompactNotation)(aggregate)) : ((0, format_number_1.toPercentageAdaptive)(percentage(aggregate, sumValues(data)) / 100))),
+            hasNoData ? null : centerLabel)));
 };
 exports.default = Center;
 var templateObject_1, templateObject_2;

package/donut-chart/decoupled-legend.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = __importStar(require("react"));
 var quantum_product_1 = require("@auth0/quantum-product");

package/donut-chart/index.js

@@ -26,13 +26,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -53,7 +63,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DonutChart = void 0;
+exports.DonutChart = DonutChart;
 var React = __importStar(require("react"));
 var recharts_1 = require("recharts");
 var quantum_product_1 = require("@auth0/quantum-product");
@@ -104,4 +114,3 @@ function DonutChart(props) {
             React.createElement(quantum_product_1.StackLayoutItem, null,
                 React.createElement(decoupled_legend_1.default, { activeIndex: activeIndex, setActiveIndex: setActiveIndex, data: data, color: color, statusColorMapping: statusColorMapping, isStacked: isStacked })))));
 }
-exports.DonutChart = DonutChart;

package/esm/donut-chart/center.js

@@ -3,7 +3,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import * as React from 'react';
-import { Box, styled } from '@auth0/quantum-product';
+import { Box, styled, Text } from '@auth0/quantum-product';
 import { toPercentageAdaptive, toShortCompactNotation } from '../helpers/format-number';
 var sumValues = function (data) {
     return data.reduce(function (accum, item) { return accum + item.value; }, 0);
@@ -26,12 +26,14 @@ var Center = function (props) {
     };
     return (React.createElement(CenterPositioning, null,
         React.createElement(Box, null,
-            React.createElement(Aggregate, null, hasNoData
-                ? 'No data'
-                : displayType === 'absolute'
-                    ? toShortCompactNotation(aggregate)
-                    : toPercentageAdaptive(percentage(aggregate, sumValues(data)) / 100)),
-            centerLabel)));
+            React.createElement(Aggregate, null, hasNoData ? (React.createElement("div", { style: {
+                    display: 'grid',
+                    placeItems: 'center',
+                    height: '100%',
+                    textAlign: 'center',
+                } },
+                React.createElement(Text, { variant: "subtitle1" }, "No data"))) : displayType === 'absolute' ? (toShortCompactNotation(aggregate)) : (toPercentageAdaptive(percentage(aggregate, sumValues(data)) / 100))),
+            hasNoData ? null : centerLabel)));
 };
 export default Center;
 var templateObject_1, templateObject_2;

package/esm/line-chart/custom-active-dot.js

@@ -13,7 +13,7 @@ import * as React from 'react';
 import { Dot } from 'recharts';
 var CustomActiveDot = function (onMouseOver) { return function (props) {
     return (React.createElement(React.Fragment, null,
-        React.createElement(Dot, __assign({}, props, { key: "outerDot", r: 10, strokeWidth: 0 }, (onMouseOver ? { onMouseOver: onMouseOver } : {}))),
-        React.createElement(Dot, __assign({}, props, { key: "innerDot", r: 4, style: { fill: 'white' } }, (onMouseOver ? { onMouseOver: onMouseOver } : {})))));
+        React.createElement(Dot, __assign({}, props, { key: "outerDot", r: 6, strokeWidth: 0 }, (onMouseOver ? { onMouseOver: onMouseOver } : {}))),
+        React.createElement(Dot, __assign({}, props, { key: "innerDot", r: 2, style: { fill: 'white' } }, (onMouseOver ? { onMouseOver: onMouseOver } : {})))));
 }; };
 export default CustomActiveDot;

package/esm/line-chart/index.js

@@ -25,8 +25,8 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
-import _ from 'lodash';
 import * as React from 'react';
+import _ from 'lodash';
 import { Area, CartesianGrid, ComposedChart, Legend, Line, ReferenceArea, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
 import { useTheme, Text, DropdownMenu, useDropdownMenuState, Button, StackLayout, Divider, ChevronDownIcon, AlertDiamondIcon, IconButton, TableIcon, alpha, } from '@auth0/quantum-product';
 import { getColorScale, getStatusColorForGroup } from '../theme';
@@ -60,7 +60,7 @@ export function LineChart(props) {
     React.useEffect(function () {
         setThreshold(thresholds === null || thresholds === void 0 ? void 0 : thresholds[0]);
         setLineVisibility(__assign(__assign({}, ((thresholds === null || thresholds === void 0 ? void 0 : thresholds[0]) && { thresholdControl: false })), lineVisibility));
-    }, [thresholds]);
+    }, [thresholds, lineVisibility]);
     var handleLegendMouseEnter = function (e) {
         if (!lineVisibility[e.dataKey]) {
             setLineVisibility(__assign(__assign({}, lineVisibility), { hover: e.dataKey }));
@@ -146,7 +146,8 @@ export function LineChart(props) {
     }, [thresholds, menuProps]);
     var headerActionWithThresholdDropdown = (React.createElement(StackLayout, { gutter: 1 },
         !disableThresholdMenu && (React.createElement(React.Fragment, null,
-            React.createElement(Button, __assign({}, triggerProps, { startIcon: React.createElement(AlertDiamondIcon, null), endIcon: React.createElement(ChevronDownIcon, null), disabled: !threshold, variant: 'outlined', size: headerButtonsSize, label: threshold ? threshold.threshold_label : 'No threshold' })),
+            React.createElement(Button, __assign({}, triggerProps, { startIcon: React.createElement(AlertDiamondIcon, null), endIcon: React.createElement(ChevronDownIcon, null), disabled: !threshold, variant: 'outlined', size: headerButtonsSize, label: threshold ? threshold.threshold_label : 'No threshold', analyticsId: threshold &&
+                    "security-center-button-".concat(titleToAnalyticName(threshold.evaluated_metric).replace(/_/g, '-'), "-select-threshold") })),
             React.createElement(DropdownMenu, __assign({}, menuProps, { items: menuItems })),
             showDividerInHeader && React.createElement(Divider, { orientation: "vertical" }))),
         headerAction,
@@ -173,23 +174,23 @@ export function LineChart(props) {
             setResponsiveContainerHeight(getContainerHeight());
             setTimeout(function () {
                 setResponsiveContainerWidth('100%');
-                setVisibility(!!legendContainerHeight);
+                setVisibility(!!legendContainerHeight || data.length === 0); //force visibility true if there is no data
             }, 10);
         }
-    }, [legendContainerHeight]);
+    }, [legendContainerHeight, data.length]);
     return (React.createElement(React.Fragment, null,
         React.createElement(ChartCard, { title: title, chartStatus: chartStatus, value: value, dataTable: data, label: label, helperText: helperText, headerAction: (groups === null || groups === void 0 ? void 0 : groups.length) > 1 ? headerActionWithThresholdDropdown : headerAction, finalMenuItem: finalMenuItem, additionalMenuItems: additionalMenuItems, allowDownload: allowDownload, showChartTable: showChartTable, triggerButtonSize: headerButtonsSize, titleIcon: titleIcon, isVertical: isVertical },
             React.createElement(ResponsiveContainer, { width: responsiveContainerWidth, height: responsiveContainerHeight, style: {
                     opacity: visibility ? 1 : 0,
                     transition: 'opacity 0.3s ease-in-out',
                 } }, data.length ? (React.createElement(ComposedChart, { data: Object.values(entries), height: height, width: 500, syncId: syncId, margin: {
-                    top: 24,
-                    right: 10,
+                    top: 11, // custom active dot gets clipped on the edges otherwise
+                    right: 10, // custom active dot gets clipped on the edges otherwise
                     left: -24,
-                    bottom: 24,
+                    bottom: 5,
                 } },
                 React.createElement(CartesianGrid, { vertical: false, stroke: theme.tokens.color_border_default }),
-                React.createElement(XAxis, { tickFormatter: function (value) { return tickFormatter(value, bottomAxis.scaleType); }, dataKey: bottomAxisDataKey, height: 30, interval: "equidistantPreserveStart", minTickGap: theme.spacingPX(14), tickMargin: theme.spacingPX(3), padding: isVertical ? { right: 40 } : undefined, axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold }, allowDecimals: bottomAxis.allowDecimals }),
+                React.createElement(XAxis, { tickFormatter: function (value) { return tickFormatter(value, bottomAxis.scaleType); }, dataKey: bottomAxisDataKey, height: 30, interval: "equidistantPreserveStart", minTickGap: theme.spacingPX(14), tickMargin: theme.spacingPX(2), padding: isVertical ? { right: 40 } : undefined, axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold }, allowDecimals: bottomAxis.allowDecimals }),
                 React.createElement(YAxis, { tickFormatter: function (value) { return tickFormatter(value, leftAxis.scaleType); }, domain: ['auto', 'auto'], width: 78, axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold }, allowDecimals: leftAxis.allowDecimals }),
                 React.createElement(Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(CustomTooltip, { active: undefined, payload: undefined, scaleType: bottomAxis.scaleType }) }),
                 legend && isVertical ? (React.createElement(Legend, { align: "right", verticalAlign: "top", layout: "vertical", iconSize: 14, wrapperStyle: {

package/line-chart/custom-active-dot.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { DotProps } from 'recharts';
-declare const CustomActiveDot: (onMouseOver?: DotProps['onMouseOver']) => (props: Omit<DotProps, 'ref'>) => React.JSX.Element;
+declare const CustomActiveDot: (onMouseOver?: DotProps["onMouseOver"]) => (props: Omit<DotProps, "ref">) => React.JSX.Element;
 export default CustomActiveDot;

package/line-chart/custom-active-dot.js

@@ -26,19 +26,29 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = __importStar(require("react"));
 var recharts_1 = require("recharts");
 var CustomActiveDot = function (onMouseOver) { return function (props) {
     return (React.createElement(React.Fragment, null,
-        React.createElement(recharts_1.Dot, __assign({}, props, { key: "outerDot", r: 10, strokeWidth: 0 }, (onMouseOver ? { onMouseOver: onMouseOver } : {}))),
-        React.createElement(recharts_1.Dot, __assign({}, props, { key: "innerDot", r: 4, style: { fill: 'white' } }, (onMouseOver ? { onMouseOver: onMouseOver } : {})))));
+        React.createElement(recharts_1.Dot, __assign({}, props, { key: "outerDot", r: 6, strokeWidth: 0 }, (onMouseOver ? { onMouseOver: onMouseOver } : {}))),
+        React.createElement(recharts_1.Dot, __assign({}, props, { key: "innerDot", r: 2, style: { fill: 'white' } }, (onMouseOver ? { onMouseOver: onMouseOver } : {})))));
 }; };
 exports.default = CustomActiveDot;

package/line-chart/custom-threshold-legend.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 var quantum_product_1 = require("@auth0/quantum-product");
 var React = __importStar(require("react"));

package/line-chart/index.js

@@ -26,13 +26,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -53,9 +63,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LineChart = void 0;
-var lodash_1 = __importDefault(require("lodash"));
+exports.LineChart = LineChart;
 var React = __importStar(require("react"));
+var lodash_1 = __importDefault(require("lodash"));
 var recharts_1 = require("recharts");
 var quantum_product_1 = require("@auth0/quantum-product");
 var theme_1 = require("../theme");
@@ -89,7 +99,7 @@ function LineChart(props) {
     React.useEffect(function () {
         setThreshold(thresholds === null || thresholds === void 0 ? void 0 : thresholds[0]);
         setLineVisibility(__assign(__assign({}, ((thresholds === null || thresholds === void 0 ? void 0 : thresholds[0]) && { thresholdControl: false })), lineVisibility));
-    }, [thresholds]);
+    }, [thresholds, lineVisibility]);
     var handleLegendMouseEnter = function (e) {
         if (!lineVisibility[e.dataKey]) {
             setLineVisibility(__assign(__assign({}, lineVisibility), { hover: e.dataKey }));
@@ -175,7 +185,8 @@ function LineChart(props) {
     }, [thresholds, menuProps]);
     var headerActionWithThresholdDropdown = (React.createElement(quantum_product_1.StackLayout, { gutter: 1 },
         !disableThresholdMenu && (React.createElement(React.Fragment, null,
-            React.createElement(quantum_product_1.Button, __assign({}, triggerProps, { startIcon: React.createElement(quantum_product_1.AlertDiamondIcon, null), endIcon: React.createElement(quantum_product_1.ChevronDownIcon, null), disabled: !threshold, variant: 'outlined', size: headerButtonsSize, label: threshold ? threshold.threshold_label : 'No threshold' })),
+            React.createElement(quantum_product_1.Button, __assign({}, triggerProps, { startIcon: React.createElement(quantum_product_1.AlertDiamondIcon, null), endIcon: React.createElement(quantum_product_1.ChevronDownIcon, null), disabled: !threshold, variant: 'outlined', size: headerButtonsSize, label: threshold ? threshold.threshold_label : 'No threshold', analyticsId: threshold &&
+                    "security-center-button-".concat(titleToAnalyticName(threshold.evaluated_metric).replace(/_/g, '-'), "-select-threshold") })),
             React.createElement(quantum_product_1.DropdownMenu, __assign({}, menuProps, { items: menuItems })),
             showDividerInHeader && React.createElement(quantum_product_1.Divider, { orientation: "vertical" }))),
         headerAction,
@@ -202,23 +213,23 @@ function LineChart(props) {
             setResponsiveContainerHeight(getContainerHeight());
             setTimeout(function () {
                 setResponsiveContainerWidth('100%');
-                setVisibility(!!legendContainerHeight);
+                setVisibility(!!legendContainerHeight || data.length === 0); //force visibility true if there is no data
             }, 10);
         }
-    }, [legendContainerHeight]);
+    }, [legendContainerHeight, data.length]);
     return (React.createElement(React.Fragment, null,
         React.createElement(chart_card_1.ChartCard, { title: title, chartStatus: chartStatus, value: value, dataTable: data, label: label, helperText: helperText, headerAction: (groups === null || groups === void 0 ? void 0 : groups.length) > 1 ? headerActionWithThresholdDropdown : headerAction, finalMenuItem: finalMenuItem, additionalMenuItems: additionalMenuItems, allowDownload: allowDownload, showChartTable: showChartTable, triggerButtonSize: headerButtonsSize, titleIcon: titleIcon, isVertical: isVertical },
             React.createElement(recharts_1.ResponsiveContainer, { width: responsiveContainerWidth, height: responsiveContainerHeight, style: {
                     opacity: visibility ? 1 : 0,
                     transition: 'opacity 0.3s ease-in-out',
                 } }, data.length ? (React.createElement(recharts_1.ComposedChart, { data: Object.values(entries), height: height, width: 500, syncId: syncId, margin: {
-                    top: 24,
-                    right: 10,
+                    top: 11, // custom active dot gets clipped on the edges otherwise
+                    right: 10, // custom active dot gets clipped on the edges otherwise
                     left: -24,
-                    bottom: 24,
+                    bottom: 5,
                 } },
                 React.createElement(recharts_1.CartesianGrid, { vertical: false, stroke: theme.tokens.color_border_default }),
-                React.createElement(recharts_1.XAxis, { tickFormatter: function (value) { return (0, chart_1.tickFormatter)(value, bottomAxis.scaleType); }, dataKey: bottomAxisDataKey, height: 30, interval: "equidistantPreserveStart", minTickGap: theme.spacingPX(14), tickMargin: theme.spacingPX(3), padding: isVertical ? { right: 40 } : undefined, axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold }, allowDecimals: bottomAxis.allowDecimals }),
+                React.createElement(recharts_1.XAxis, { tickFormatter: function (value) { return (0, chart_1.tickFormatter)(value, bottomAxis.scaleType); }, dataKey: bottomAxisDataKey, height: 30, interval: "equidistantPreserveStart", minTickGap: theme.spacingPX(14), tickMargin: theme.spacingPX(2), padding: isVertical ? { right: 40 } : undefined, axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold }, allowDecimals: bottomAxis.allowDecimals }),
                 React.createElement(recharts_1.YAxis, { tickFormatter: function (value) { return (0, chart_1.tickFormatter)(value, leftAxis.scaleType); }, domain: ['auto', 'auto'], width: 78, axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold }, allowDecimals: leftAxis.allowDecimals }),
                 React.createElement(recharts_1.Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(custom_tooltip_1.default, { active: undefined, payload: undefined, scaleType: bottomAxis.scaleType }) }),
                 legend && isVertical ? (React.createElement(recharts_1.Legend, { align: "right", verticalAlign: "top", layout: "vertical", iconSize: 14, wrapperStyle: {
@@ -265,4 +276,3 @@ function LineChart(props) {
                 React.createElement(quantum_product_1.Text, { variant: "subtitle1" }, "No data"))))),
         data && data[0] && React.createElement(data_table_chart_1.DataTableChart, { title: title, isOpen: isOpen, toggleIsOpen: toggleIsOpen, data: data })));
 }
-exports.LineChart = LineChart;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auth0/quantum-charts",
-  "version": "1.3.16",
+  "version": "1.3.18",
   "sideEffects": false,
   "main": "./index.js",
   "types": "./index.d.ts",
@@ -29,8 +29,8 @@
     "build": "yarn clean && yarn build:cjs && yarn build:esm && yarn copy:files",
     "clean": "rm -rf ./build",
     "watch": "tsc --watch --project ./tsconfig.publish.esm.json & tsc --watch --project ./tsconfig.publish.json",
-    "build:cjs": "node --max-old-space-size=4096 ../../node_modules/.bin/tsc --project ./tsconfig.publish.json",
-    "build:esm": "node --max-old-space-size=4096 ../../node_modules/.bin/tsc --project ./tsconfig.publish.esm.json",
+    "build:cjs": "node --max-old-space-size=8192 ../../node_modules/.bin/tsc --project ./tsconfig.publish.json",
+    "build:esm": "node --max-old-space-size=8192 ../../node_modules/.bin/tsc --project ./tsconfig.publish.esm.json",
     "copy:files": "node scripts/copy-files.js",
     "artifactory": "cd ./build && npm publish",
     "storybook": "storybook dev -p 6006"

package/scorecard/index.js

@@ -15,15 +15,25 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ScoreCard = void 0;
+exports.ScoreCard = ScoreCard;
 var React = __importStar(require("react"));
 var chart_summary_1 = require("../chart-summary");
 var chart_card_1 = require("../chart-card");
@@ -42,4 +52,3 @@ function ScoreCard(props) {
                 React.createElement(chart_summary_1.ChartSummary, { title: summary.title, value: summary.value, helperText: summary.helperText, label: summary.label })));
         }))));
 }
-exports.ScoreCard = ScoreCard;