@auth0/quantum-charts 1.3.19 → 1.3.21

package/common/chart.d.ts

@@ -47,3 +47,4 @@ export type IDonutChartDataPoint<DataType = unknown> = {
     value?: number;
 } & DataType;
 export declare const tickFormatter: (value: any, scaleType: any) => any;
+export declare const truncateLabel: (value: string | number, maxLength: number) => string;

package/common/chart.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.tickFormatter = void 0;
+exports.truncateLabel = exports.tickFormatter = void 0;
 var date_fns_1 = require("date-fns");
 var tickFormatter = function (value, scaleType) {
     switch (scaleType) {
@@ -34,3 +34,11 @@ var tickFormatter = function (value, scaleType) {
     }
 };
 exports.tickFormatter = tickFormatter;
+var truncateLabel = function (value, maxLength) {
+    var stringValue = String(value !== null && value !== void 0 ? value : '');
+    if (stringValue.length > maxLength) {
+        return "".concat(stringValue.substring(0, maxLength).trim(), "...");
+    }
+    return stringValue;
+};
+exports.truncateLabel = truncateLabel;

package/esm/common/chart.js

@@ -30,3 +30,10 @@ export var tickFormatter = function (value, scaleType) {
             break;
     }
 };
+export var truncateLabel = function (value, maxLength) {
+    var stringValue = String(value !== null && value !== void 0 ? value : '');
+    if (stringValue.length > maxLength) {
+        return "".concat(stringValue.substring(0, maxLength).trim(), "...");
+    }
+    return stringValue;
+};

package/esm/line-chart/index.js

@@ -33,9 +33,10 @@ import { getColorScale, getStatusColorForGroup } from '../theme';
 import CustomActiveDot from './custom-active-dot';
 import CustomTooltip from '../common/custom-tooltip';
 import { ChartCard } from '../chart-card';
-import { tickFormatter } from '../common/chart';
+import { tickFormatter, truncateLabel } from '../common/chart';
 import { CustomLegend } from '../common/custom-legend';
 import { DataTableChart } from '../chart-summary/data-table-chart';
+import { MAX_DATE_LARGE_SCREEN_LIMIT, MAX_DATE_LENGTH, MAX_SCREEN_SIZE_LIMIT, MAX_TICK_WIDTH_PX, MIN_SAFE_CHART_WIDTH, } from '../utils/constants';
 var getThresholdColor = function (data, baseColor) {
     return data.hover === 'thresholdControl' || !data.hover ? baseColor : alpha(baseColor, 0.35);
 };
@@ -160,6 +161,18 @@ export function LineChart(props) {
     var _r = __read(React.useState(height), 2), responsiveContainerHeight = _r[0], setResponsiveContainerHeight = _r[1];
     var _s = __read(React.useState(isVertical ? '0%' : '100%'), 2), responsiveContainerWidth = _s[0], setResponsiveContainerWidth = _s[1];
     var _t = __read(React.useState(!isVertical), 2), visibility = _t[0], setVisibility = _t[1];
+    var _u = __read(React.useState(typeof window !== 'undefined' ? window.innerWidth : 0), 2), windowWidth = _u[0], setWindowWidth = _u[1];
+    React.useEffect(function () {
+        if (typeof window !== 'undefined') {
+            var handleResize_1 = function () { return setWindowWidth(window.innerWidth); };
+            window.addEventListener('resize', handleResize_1);
+            return function () { return window.removeEventListener('resize', handleResize_1); };
+        }
+        return undefined;
+    }, []);
+    // Define a breakpoint where you want the font size to change
+    var isSmallScreen = windowWidth < MAX_SCREEN_SIZE_LIMIT;
+    var isDateTimeScale = bottomAxis.scaleType === 'datetime' || bottomAxis.scaleType === 'datetime24hr';
     var getContainerHeight = function () {
         if (!isVertical) {
             return height;
@@ -178,6 +191,33 @@ export function LineChart(props) {
             }, 10);
         }
     }, [legendContainerHeight, data.length]);
+    var MAX_TICKS_THAT_FIT = Math.floor(MIN_SAFE_CHART_WIDTH / MAX_TICK_WIDTH_PX);
+    var calculatedInterval = Math.floor(Object.values(entries).length / MAX_TICKS_THAT_FIT);
+    var finalInterval = Math.max(1, calculatedInterval);
+    var CustomXAxisTick = function (props) {
+        var x = props.x, y = props.y, payload = props.payload, isSmallScreen = props.isSmallScreen, bottomAxis = props.bottomAxis, theme = props.theme;
+        if (!theme || !theme.tokens) {
+            return null;
+        }
+        var value = tickFormatter(payload.value, bottomAxis.scaleType);
+        var line1;
+        var line2;
+        var parts = value.split(' ');
+        if (isDateTimeScale && parts.length >= 3) {
+            line1 = "".concat(parts[0], " ").concat(parts[1]);
+            line2 = parts.slice(2).join(' ');
+            if (line2.length > MAX_DATE_LENGTH) {
+                line2 = truncateLabel(line2, MAX_DATE_LENGTH);
+            }
+        }
+        else {
+            line1 = truncateLabel(value, isSmallScreen ? MAX_DATE_LENGTH : MAX_DATE_LARGE_SCREEN_LIMIT);
+            line2 = '';
+        }
+        return (React.createElement("g", { transform: "translate(".concat(x, ",").concat(y, ")") },
+            React.createElement("text", { x: 0, y: 0, dy: line2 && !isVertical ? -1 : 2, textAnchor: "middle", fill: theme.tokens.color_fg_default, style: { fontSize: theme.tokens.type_body_50.fontSize } }, line1),
+            line2 ? (React.createElement("text", { x: 0, y: 0, dy: 13, textAnchor: "middle", fill: theme.tokens.color_fg_default, style: { fontSize: theme.tokens.type_body_50.fontSize } }, line2)) : null));
+    };
     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: {
@@ -190,7 +230,7 @@ export function LineChart(props) {
                     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(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(XAxis, { dataKey: bottomAxisDataKey, height: 30, interval: finalInterval, 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, tick: function (tickProps) { return (React.createElement(CustomXAxisTick, __assign({}, tickProps, { isSmallScreen: isSmallScreen, bottomAxis: bottomAxis, theme: theme }))); } }),
                 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/esm/utils/constants.js

@@ -0,0 +1,5 @@
+export var MAX_TICK_WIDTH_PX = 90;
+export var MIN_SAFE_CHART_WIDTH = 800;
+export var MAX_DATE_LENGTH = 10;
+export var MAX_SCREEN_SIZE_LIMIT = 1000;
+export var MAX_DATE_LARGE_SCREEN_LIMIT = 16;

package/line-chart/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IIconButtonProps } from '@auth0/quantum-product';
+import { IIconButtonProps, ITheme } from '@auth0/quantum-product';
 import { IBaseChartProps } from '../common/chart';
 export interface ILineChartProps<DataType = unknown> extends IBaseChartProps<DataType> {
     syncId?: number | string;
@@ -18,4 +18,18 @@ export interface ILineChartProps<DataType = unknown> extends IBaseChartProps<Dat
     titleIcon?: React.ReactNode;
     isVertical?: boolean;
 }
+export interface CustomXAxisTickProps {
+    x: number;
+    y: number;
+    payload: {
+        value: any;
+        [key: string]: any;
+    };
+    isSmallScreen: boolean;
+    bottomAxis: {
+        scaleType: string;
+        [key: string]: any;
+    };
+    theme: ITheme;
+}
 export declare function LineChart<DataType = unknown>(props: ILineChartProps<DataType>): React.JSX.Element;

package/line-chart/index.js

@@ -75,6 +75,7 @@ var chart_card_1 = require("../chart-card");
 var chart_1 = require("../common/chart");
 var custom_legend_1 = require("../common/custom-legend");
 var data_table_chart_1 = require("../chart-summary/data-table-chart");
+var constants_1 = require("../utils/constants");
 var getThresholdColor = function (data, baseColor) {
     return data.hover === 'thresholdControl' || !data.hover ? baseColor : (0, quantum_product_1.alpha)(baseColor, 0.35);
 };
@@ -199,6 +200,18 @@ function LineChart(props) {
     var _r = __read(React.useState(height), 2), responsiveContainerHeight = _r[0], setResponsiveContainerHeight = _r[1];
     var _s = __read(React.useState(isVertical ? '0%' : '100%'), 2), responsiveContainerWidth = _s[0], setResponsiveContainerWidth = _s[1];
     var _t = __read(React.useState(!isVertical), 2), visibility = _t[0], setVisibility = _t[1];
+    var _u = __read(React.useState(typeof window !== 'undefined' ? window.innerWidth : 0), 2), windowWidth = _u[0], setWindowWidth = _u[1];
+    React.useEffect(function () {
+        if (typeof window !== 'undefined') {
+            var handleResize_1 = function () { return setWindowWidth(window.innerWidth); };
+            window.addEventListener('resize', handleResize_1);
+            return function () { return window.removeEventListener('resize', handleResize_1); };
+        }
+        return undefined;
+    }, []);
+    // Define a breakpoint where you want the font size to change
+    var isSmallScreen = windowWidth < constants_1.MAX_SCREEN_SIZE_LIMIT;
+    var isDateTimeScale = bottomAxis.scaleType === 'datetime' || bottomAxis.scaleType === 'datetime24hr';
     var getContainerHeight = function () {
         if (!isVertical) {
             return height;
@@ -217,6 +230,33 @@ function LineChart(props) {
             }, 10);
         }
     }, [legendContainerHeight, data.length]);
+    var MAX_TICKS_THAT_FIT = Math.floor(constants_1.MIN_SAFE_CHART_WIDTH / constants_1.MAX_TICK_WIDTH_PX);
+    var calculatedInterval = Math.floor(Object.values(entries).length / MAX_TICKS_THAT_FIT);
+    var finalInterval = Math.max(1, calculatedInterval);
+    var CustomXAxisTick = function (props) {
+        var x = props.x, y = props.y, payload = props.payload, isSmallScreen = props.isSmallScreen, bottomAxis = props.bottomAxis, theme = props.theme;
+        if (!theme || !theme.tokens) {
+            return null;
+        }
+        var value = (0, chart_1.tickFormatter)(payload.value, bottomAxis.scaleType);
+        var line1;
+        var line2;
+        var parts = value.split(' ');
+        if (isDateTimeScale && parts.length >= 3) {
+            line1 = "".concat(parts[0], " ").concat(parts[1]);
+            line2 = parts.slice(2).join(' ');
+            if (line2.length > constants_1.MAX_DATE_LENGTH) {
+                line2 = (0, chart_1.truncateLabel)(line2, constants_1.MAX_DATE_LENGTH);
+            }
+        }
+        else {
+            line1 = (0, chart_1.truncateLabel)(value, isSmallScreen ? constants_1.MAX_DATE_LENGTH : constants_1.MAX_DATE_LARGE_SCREEN_LIMIT);
+            line2 = '';
+        }
+        return (React.createElement("g", { transform: "translate(".concat(x, ",").concat(y, ")") },
+            React.createElement("text", { x: 0, y: 0, dy: line2 && !isVertical ? -1 : 2, textAnchor: "middle", fill: theme.tokens.color_fg_default, style: { fontSize: theme.tokens.type_body_50.fontSize } }, line1),
+            line2 ? (React.createElement("text", { x: 0, y: 0, dy: 13, textAnchor: "middle", fill: theme.tokens.color_fg_default, style: { fontSize: theme.tokens.type_body_50.fontSize } }, line2)) : null));
+    };
     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: {
@@ -229,7 +269,7 @@ function LineChart(props) {
                     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(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.XAxis, { dataKey: bottomAxisDataKey, height: 30, interval: finalInterval, 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, tick: function (tickProps) { return (React.createElement(CustomXAxisTick, __assign({}, tickProps, { isSmallScreen: isSmallScreen, bottomAxis: bottomAxis, theme: theme }))); } }),
                 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: {

package/package.json

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

package/utils/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const MAX_TICK_WIDTH_PX = 90;
+export declare const MIN_SAFE_CHART_WIDTH = 800;
+export declare const MAX_DATE_LENGTH = 10;
+export declare const MAX_SCREEN_SIZE_LIMIT = 1000;
+export declare const MAX_DATE_LARGE_SCREEN_LIMIT = 16;

package/utils/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MAX_DATE_LARGE_SCREEN_LIMIT = exports.MAX_SCREEN_SIZE_LIMIT = exports.MAX_DATE_LENGTH = exports.MIN_SAFE_CHART_WIDTH = exports.MAX_TICK_WIDTH_PX = void 0;
+exports.MAX_TICK_WIDTH_PX = 90;
+exports.MIN_SAFE_CHART_WIDTH = 800;
+exports.MAX_DATE_LENGTH = 10;
+exports.MAX_SCREEN_SIZE_LIMIT = 1000;
+exports.MAX_DATE_LARGE_SCREEN_LIMIT = 16;