@auth0/quantum-charts 1.3.20 → 1.3.21

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 (3) hide show
  1. package/esm/line-chart/index.js +17 -4
  2. package/line-chart/index.js +17 -4
  3. package/package.json +1 -1
package/esm/line-chart/index.js CHANGED
@@ -172,6 +172,7 @@ export function LineChart(props) {
172
172
  }, []);
173
173
  // Define a breakpoint where you want the font size to change
174
174
  var isSmallScreen = windowWidth < MAX_SCREEN_SIZE_LIMIT;
175
+ var isDateTimeScale = bottomAxis.scaleType === 'datetime' || bottomAxis.scaleType === 'datetime24hr';
175
176
  var getContainerHeight = function () {
176
177
  if (!isVertical) {
177
178
  return height;
@@ -199,11 +200,23 @@ export function LineChart(props) {
199
200
  return null;
200
201
  }
201
202
  var value = tickFormatter(payload.value, bottomAxis.scaleType);
202
- var FONT_SIZE_SMALL = theme.unsafe_globalTokens.type_global_primary_25.fontSize;
203
- var FONT_SIZE_DEFAULT = theme.unsafe_globalTokens.type_global_primary_50.fontSize;
204
- var fontSize = isSmallScreen ? FONT_SIZE_SMALL : FONT_SIZE_DEFAULT;
203
+ var line1;
204
+ var line2;
205
+ var parts = value.split(' ');
206
+ if (isDateTimeScale && parts.length >= 3) {
207
+ line1 = "".concat(parts[0], " ").concat(parts[1]);
208
+ line2 = parts.slice(2).join(' ');
209
+ if (line2.length > MAX_DATE_LENGTH) {
210
+ line2 = truncateLabel(line2, MAX_DATE_LENGTH);
211
+ }
212
+ }
213
+ else {
214
+ line1 = truncateLabel(value, isSmallScreen ? MAX_DATE_LENGTH : MAX_DATE_LARGE_SCREEN_LIMIT);
215
+ line2 = '';
216
+ }
205
217
  return (React.createElement("g", { transform: "translate(".concat(x, ",").concat(y, ")") },
206
- React.createElement("text", { x: 0, y: 0, dy: 10, textAnchor: "middle", fill: theme.tokens.color_fg_default, style: { fontSize: fontSize } }, truncateLabel(value, isSmallScreen ? MAX_DATE_LENGTH : MAX_DATE_LARGE_SCREEN_LIMIT))));
218
+ 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),
219
+ 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));
207
220
  };
208
221
  return (React.createElement(React.Fragment, null,
209
222
  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 },
package/line-chart/index.js CHANGED
@@ -211,6 +211,7 @@ function LineChart(props) {
211
211
  }, []);
212
212
  // Define a breakpoint where you want the font size to change
213
213
  var isSmallScreen = windowWidth < constants_1.MAX_SCREEN_SIZE_LIMIT;
214
+ var isDateTimeScale = bottomAxis.scaleType === 'datetime' || bottomAxis.scaleType === 'datetime24hr';
214
215
  var getContainerHeight = function () {
215
216
  if (!isVertical) {
216
217
  return height;
@@ -238,11 +239,23 @@ function LineChart(props) {
238
239
  return null;
239
240
  }
240
241
  var value = (0, chart_1.tickFormatter)(payload.value, bottomAxis.scaleType);
241
- var FONT_SIZE_SMALL = theme.unsafe_globalTokens.type_global_primary_25.fontSize;
242
- var FONT_SIZE_DEFAULT = theme.unsafe_globalTokens.type_global_primary_50.fontSize;
243
- var fontSize = isSmallScreen ? FONT_SIZE_SMALL : FONT_SIZE_DEFAULT;
242
+ var line1;
243
+ var line2;
244
+ var parts = value.split(' ');
245
+ if (isDateTimeScale && parts.length >= 3) {
246
+ line1 = "".concat(parts[0], " ").concat(parts[1]);
247
+ line2 = parts.slice(2).join(' ');
248
+ if (line2.length > constants_1.MAX_DATE_LENGTH) {
249
+ line2 = (0, chart_1.truncateLabel)(line2, constants_1.MAX_DATE_LENGTH);
250
+ }
251
+ }
252
+ else {
253
+ line1 = (0, chart_1.truncateLabel)(value, isSmallScreen ? constants_1.MAX_DATE_LENGTH : constants_1.MAX_DATE_LARGE_SCREEN_LIMIT);
254
+ line2 = '';
255
+ }
244
256
  return (React.createElement("g", { transform: "translate(".concat(x, ",").concat(y, ")") },
245
- React.createElement("text", { x: 0, y: 0, dy: 10, textAnchor: "middle", fill: theme.tokens.color_fg_default, style: { fontSize: fontSize } }, (0, chart_1.truncateLabel)(value, isSmallScreen ? constants_1.MAX_DATE_LENGTH : constants_1.MAX_DATE_LARGE_SCREEN_LIMIT))));
257
+ 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),
258
+ 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));
246
259
  };
247
260
  return (React.createElement(React.Fragment, null,
248
261
  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 },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@auth0/quantum-charts",
3
- "version": "1.3.20",
3
+ "version": "1.3.21",
4
4
  "sideEffects": false,
5
5
  "main": "./index.js",
6
6
  "types": "./index.d.ts",