@auth0/quantum-charts 1.3.10 → 1.3.12

package/chart-summary/index.d.ts

@@ -21,4 +21,5 @@ export interface IChartSummaryProps {
     titleIcon?: React.ReactNode;
     isVertical?: boolean;
 }
+export declare const titleToAnalyticName: (title: string) => string;
 export declare function ChartSummary(props: IChartSummaryProps): React.JSX.Element;

package/chart-summary/index.js

@@ -63,7 +63,7 @@ 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 = void 0;
+exports.ChartSummary = exports.titleToAnalyticName = void 0;
 var React = __importStar(require("react"));
 var quantum_product_1 = require("@auth0/quantum-product");
 var downloadCsv_1 = require("../helpers/downloadCsv");
@@ -92,6 +92,12 @@ var TitleWrapper = (0, quantum_product_1.styled)(quantum_product_1.Text)(templat
     var theme = _a.theme;
     return theme.tokens.type_preset_section_subtitle.fontWeight;
 });
+var titleToAnalyticName = function (title) {
+    return title
+        .replace(/\s+/g, '-') // Replace spaces with underscores
+        .toLowerCase(); // Convert to lowercase
+};
+exports.titleToAnalyticName = titleToAnalyticName;
 function ChartSummary(props) {
     var title = props.title, chartStatus = props.chartStatus, value = props.value, helperText = props.helperText, label = props.label, dataTable = props.dataTable, headerAction = props.headerAction, additionalMenuItems = props.additionalMenuItems, showChartTable = props.showChartTable, allowDownload = props.allowDownload, customViewChartTable = props.customViewChartTable, _a = props.triggerButtonSize, triggerButtonSize = _a === void 0 ? 'small' : _a, titleIcon = props.titleIcon, finalMenuItem = props.finalMenuItem, isVertical = props.isVertical;
     var _b = __read(React.useState(false), 2), isOpen = _b[0], setIsOpen = _b[1];
@@ -108,6 +114,7 @@ function ChartSummary(props) {
                     setIsOpen(true);
                 },
                 title: 'View table',
+                analyticsId: "security-center-menu-item-".concat((0, exports.titleToAnalyticName)(title || ''), "-view-table"),
             },
         ];
         if (showChartTable && allowDownload) {
@@ -119,6 +126,7 @@ function ChartSummary(props) {
                     (0, downloadCsv_1.downloadCSV)(dataTable, title);
                 },
                 title: 'Download CSV',
+                analyticsId: "security-center-menu-item-".concat((0, exports.titleToAnalyticName)(title || ''), "-download-csv"),
             });
         }
         var aggregatedMenuItems = baseMenuItems;

package/esm/chart-summary/index.js

@@ -66,6 +66,11 @@ var TitleWrapper = styled(Text)(templateObject_3 || (templateObject_3 = __makeTe
     var theme = _a.theme;
     return theme.tokens.type_preset_section_subtitle.fontWeight;
 });
+export var titleToAnalyticName = function (title) {
+    return title
+        .replace(/\s+/g, '-') // Replace spaces with underscores
+        .toLowerCase(); // Convert to lowercase
+};
 export function ChartSummary(props) {
     var title = props.title, chartStatus = props.chartStatus, value = props.value, helperText = props.helperText, label = props.label, dataTable = props.dataTable, headerAction = props.headerAction, additionalMenuItems = props.additionalMenuItems, showChartTable = props.showChartTable, allowDownload = props.allowDownload, customViewChartTable = props.customViewChartTable, _a = props.triggerButtonSize, triggerButtonSize = _a === void 0 ? 'small' : _a, titleIcon = props.titleIcon, finalMenuItem = props.finalMenuItem, isVertical = props.isVertical;
     var _b = __read(React.useState(false), 2), isOpen = _b[0], setIsOpen = _b[1];
@@ -82,6 +87,7 @@ export function ChartSummary(props) {
                     setIsOpen(true);
                 },
                 title: 'View table',
+                analyticsId: "security-center-menu-item-".concat(titleToAnalyticName(title || ''), "-view-table"),
             },
         ];
         if (showChartTable && allowDownload) {
@@ -93,6 +99,7 @@ export function ChartSummary(props) {
                     downloadCSV(dataTable, title);
                 },
                 title: 'Download CSV',
+                analyticsId: "security-center-menu-item-".concat(titleToAnalyticName(title || ''), "-download-csv"),
             });
         }
         var aggregatedMenuItems = baseMenuItems;

package/esm/line-chart/index.js

@@ -43,6 +43,11 @@ export function LineChart(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, titleIcon = _a.titleIcon, chartStatus = _a.chartStatus, 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, statusColorMapping = _a.statusColorMapping, headerAction = _a.headerAction, additionalMenuItems = _a.additionalMenuItems, finalMenuItem = _a.finalMenuItem, thresholds = _a.thresholds, breaches = _a.breaches, disableThresholdMenu = _a.disableThresholdMenu, _e = _a.allowDownload, allowDownload = _e === void 0 ? true : _e, _f = _a.showChartTable, showChartTable = _f === void 0 ? true : _f, _g = _a.showChartTableButtonInHeader, showChartTableButtonInHeader = _g === void 0 ? true : _g, _h = _a.showDividerInHeader, showDividerInHeader = _h === void 0 ? true : _h, _j = _a.headerButtonsSize, headerButtonsSize = _j === void 0 ? 'medium' : _j, _k = _a.isVertical, isVertical = _k === void 0 ? false : _k;
     var theme = useTheme();
     var _l = useDropdownMenuState({ baseId: 'threshold-menu' }), triggerProps = _l.triggerProps, menuProps = _l.menuProps;
+    var titleToAnalyticName = function (title) {
+        return title
+            .replace(/\s+/g, '-') // Replace spaces with underscores
+            .toLowerCase(); // Convert to lowercase
+    };
     // Function to know how many lines we need based of how much different group values are.
     var groups = _.uniqBy(data, 'group').map(function (item) { return item.group; });
     var initialState = __assign({ hover: null }, groups.reduce(function (acc, group) {
@@ -124,6 +129,7 @@ export function LineChart(props) {
             menuItems = thresholds.map(function (threshold) { return ({
                 title: threshold.threshold_label,
                 description: threshold.evaluated_metric,
+                analyticsId: "security-center-button-".concat(titleToAnalyticName(threshold.evaluated_metric), "-threshold"),
                 onClick: function (event) {
                     setThreshold(threshold);
                     if (menuProps.onClose) {

package/line-chart/index.js

@@ -72,6 +72,11 @@ function LineChart(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, titleIcon = _a.titleIcon, chartStatus = _a.chartStatus, 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, statusColorMapping = _a.statusColorMapping, headerAction = _a.headerAction, additionalMenuItems = _a.additionalMenuItems, finalMenuItem = _a.finalMenuItem, thresholds = _a.thresholds, breaches = _a.breaches, disableThresholdMenu = _a.disableThresholdMenu, _e = _a.allowDownload, allowDownload = _e === void 0 ? true : _e, _f = _a.showChartTable, showChartTable = _f === void 0 ? true : _f, _g = _a.showChartTableButtonInHeader, showChartTableButtonInHeader = _g === void 0 ? true : _g, _h = _a.showDividerInHeader, showDividerInHeader = _h === void 0 ? true : _h, _j = _a.headerButtonsSize, headerButtonsSize = _j === void 0 ? 'medium' : _j, _k = _a.isVertical, isVertical = _k === void 0 ? false : _k;
     var theme = (0, quantum_product_1.useTheme)();
     var _l = (0, quantum_product_1.useDropdownMenuState)({ baseId: 'threshold-menu' }), triggerProps = _l.triggerProps, menuProps = _l.menuProps;
+    var titleToAnalyticName = function (title) {
+        return title
+            .replace(/\s+/g, '-') // Replace spaces with underscores
+            .toLowerCase(); // Convert to lowercase
+    };
     // Function to know how many lines we need based of how much different group values are.
     var groups = lodash_1.default.uniqBy(data, 'group').map(function (item) { return item.group; });
     var initialState = __assign({ hover: null }, groups.reduce(function (acc, group) {
@@ -153,6 +158,7 @@ function LineChart(props) {
             menuItems = thresholds.map(function (threshold) { return ({
                 title: threshold.threshold_label,
                 description: threshold.evaluated_metric,
+                analyticsId: "security-center-button-".concat(titleToAnalyticName(threshold.evaluated_metric), "-threshold"),
                 onClick: function (event) {
                     setThreshold(threshold);
                     if (menuProps.onClose) {

package/package.json

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