@scality/core-ui 0.164.0 → 0.165.0

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.
@@ -41,7 +41,7 @@ export type BarchartProps<T extends BarchartBars> = {
41
41
  tooltip?: BarchartTooltipFn<T>;
42
42
  defaultSort?: BarchartSortFn<T>;
43
43
  unitRange?: UnitRange;
44
- helpTooltip?: string;
44
+ helpTooltip?: React.ReactNode;
45
45
  stacked?: boolean;
46
46
  /**
47
47
  * Sort the bars by default or by legend order
@@ -1 +1 @@
1
- {"version":3,"file":"Barchart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/Barchart.component.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAwB,SAAS,EAAgB,MAAM,SAAS,CAAC;AAkBxE,MAAM,MAAM,QAAQ,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE;QACT,SAAS,EAAE,IAAI,CAAC;QAChB,OAAO,EAAE,IAAI,CAAC;QACd,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,CAAC;AACF,MAAM,MAAM,KAAK,GAAG;IAClB,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC5C,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,SAAS;IAClC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC,EAAE,CAAC;CACvE,EAAE,CAAC;AAEJ,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,YAAY,IAAI,CAAC,YAAY,EAAE;IACrE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,MAAM,EAAE;QAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,OAAO,CAAA;KAAE,EAAE,CAAC;CAC5E,KAAK,KAAK,CAAC,SAAS,CAAC;AAEtB,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,YAAY,IAAI,CACnD,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,GAAG;IAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,EAC1E,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,GAAG;IAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,KACvE,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;AAEhB,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,YAAY,IAAI;IAClD,IAAI,EAAE,UAAU,GAAG,QAAQ,CAAC;IAC5B,IAAI,CAAC,EAAE,CAAC,CAAC;IACT,OAAO,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAgIF,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,YAAY,SAAS,aAAa,CAAC,CAAC,CAAC,4CAwIvE,CAAC"}
1
+ {"version":3,"file":"Barchart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/Barchart.component.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAGL,SAAS,EAEV,MAAM,SAAS,CAAC;AAkBjB,MAAM,MAAM,QAAQ,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE;QACT,SAAS,EAAE,IAAI,CAAC;QAChB,OAAO,EAAE,IAAI,CAAC;QACd,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,CAAC;AACF,MAAM,MAAM,KAAK,GAAG;IAClB,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC5C,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,SAAS;IAClC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC,EAAE,CAAC;CACvE,EAAE,CAAC;AAEJ,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,YAAY,IAAI,CAAC,YAAY,EAAE;IACrE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,MAAM,EAAE;QAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,OAAO,CAAA;KAAE,EAAE,CAAC;CAC5E,KAAK,KAAK,CAAC,SAAS,CAAC;AAEtB,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,YAAY,IAAI,CACnD,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,GAAG;IAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,EAC1E,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,GAAG;IAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,KACvE,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;AAEhB,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,YAAY,IAAI;IAClD,IAAI,EAAE,UAAU,GAAG,QAAQ,CAAC;IAC5B,IAAI,CAAC,EAAE,CAAC,CAAC;IACT,OAAO,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAkIF,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,YAAY,SAAS,aAAa,CAAC,CAAC,CAAC,4CAwIvE,CAAC"}
@@ -9,7 +9,7 @@ import { ConstrainedText } from '../constrainedtext/Constrainedtext.component';
9
9
  import { IconHelp } from '../iconhelper/IconHelper';
10
10
  import { Loader } from '../loader/Loader.component';
11
11
  import { Text } from '../text/Text.component';
12
- import { renderTooltipContent, useChartData } from './utils';
12
+ import { formatDate, renderTooltipContent, useChartData, } from './utils';
13
13
  import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
14
14
  const CHART_CONSTANTS = {
15
15
  TICK_WIDTH_OFFSET: 5,
@@ -24,11 +24,13 @@ const CHART_CONSTANTS = {
24
24
  },
25
25
  };
26
26
  /* ---------------------------------- COMPONENTS ---------------------------------- */
27
- const CustomTick = ({ x, y, payload, visibleTicksCount, width, }) => {
27
+ const CustomTick = ({ x, y, payload, visibleTicksCount, width, type, }) => {
28
28
  const theme = useTheme();
29
29
  const tickWidth = width / visibleTicksCount - CHART_CONSTANTS.TICK_WIDTH_OFFSET;
30
30
  const centerX = x - tickWidth / 2;
31
- return (_jsx("foreignObject", { x: centerX, y: y, width: tickWidth, color: theme.textSecondary, overflow: "visible", children: _jsx(ConstrainedText, { text: _jsx(Text, { variant: "Smaller", color: "textSecondary", children: String(payload.value) }), centered: true, tooltipStyle: {
31
+ return (_jsx("foreignObject", { x: centerX, y: y, width: tickWidth, color: theme.textSecondary, overflow: "visible", children: _jsx(ConstrainedText, { text: _jsx(Text, { variant: "Smaller", color: "textSecondary", children: type.type === 'time'
32
+ ? formatDate(new Date(payload.value), type.timeRange.interval)
33
+ : String(payload.value) }), centered: true, tooltipStyle: {
32
34
  backgroundColor: theme.backgroundLevel1,
33
35
  padding: spacing.r10,
34
36
  borderRadius: spacing.r8,
@@ -43,7 +45,7 @@ const StyledResponsiveContainer = styled(ResponsiveContainer) `
43
45
  }
44
46
  `;
45
47
  const ChartHeader = ({ title, secondaryTitle, helpTooltip, rightTitle, }) => {
46
- return (_jsxs(Wrap, { children: [_jsxs(Stack, { gap: "r4", children: [_jsx(Text, { variant: "ChartTitle", children: title }), helpTooltip && (_jsx(IconHelp, { tooltipMessage: helpTooltip, title: helpTooltip })), secondaryTitle && (_jsx(Text, { color: "textSecondary", style: {
48
+ return (_jsxs(Wrap, { children: [_jsxs(Stack, { gap: "r4", children: [_jsx(Text, { variant: "ChartTitle", children: title }), helpTooltip && _jsx(IconHelp, { tooltipMessage: helpTooltip }), secondaryTitle && (_jsx(Text, { color: "textSecondary", style: {
47
49
  marginLeft: spacing.r8,
48
50
  }, children: secondaryTitle }))] }), rightTitle && _jsx(Text, { children: rightTitle })] }));
49
51
  };
@@ -85,7 +87,7 @@ export const Barchart = (props) => {
85
87
  fontSize: fontSize.smaller,
86
88
  }, tickLine: false, label: {
87
89
  fill: theme.textSecondary,
88
- }, orientation: "right" }), _jsx(ReferenceLine, { y: roundReferenceValue, fill: theme.border, strokeWidth: 0.5 }), _jsx(XAxis, { dataKey: "category", tick: (props) => _jsx(CustomTick, { ...props }), type: "category", interval: 0, allowDataOverflow: true, tickLine: {
90
+ }, orientation: "right" }), _jsx(ReferenceLine, { y: roundReferenceValue, fill: theme.border, strokeWidth: 0.5 }), _jsx(XAxis, { dataKey: "category", tick: (props) => _jsx(CustomTick, { ...props, type: type }), type: "category", interval: 0, allowDataOverflow: true, tickLine: {
89
91
  stroke: theme.textSecondary,
90
92
  }, axisLine: {
91
93
  stroke: theme.textSecondary,
@@ -5,6 +5,13 @@ export declare const getRoundReferenceValue: (value: number) => number;
5
5
  export declare const getMaxBarValue: (data: {
6
6
  [key: string]: string | number;
7
7
  }[], stacked?: boolean) => number;
8
+ /**
9
+ * Formats a date based on the interval
10
+ * @param date - Date object
11
+ * @param interval - Interval in milliseconds
12
+ * @returns Formatted string
13
+ */
14
+ export declare const formatDate: (date: Date, interval: number) => string;
8
15
  /**
9
16
  * Transforms time-based data into chart format
10
17
  */
@@ -1 +1 @@
1
- {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,YAAY,EACZ,iBAAiB,EAClB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,EAAe,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAG7D,eAAO,MAAM,sBAAsB,UAAW,MAAM,KAAG,MAkBtD,CAAC;AAEF,eAAO,MAAM,cAAc,SACnB;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;CAAE,EAAE,YAChC,OAAO,WAuBlB,CAAC;AA2EF;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,YAAY,QAChD,CAAC,QACD;IACJ,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE;QACT,SAAS,EAAE,IAAI,CAAC;QAChB,OAAO,EAAE,IAAI,CAAC;QACd,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,eACY,MAAM,EAAE;;GA0CtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB,GAAI,CAAC,SAAS,YAAY,QACpD,CAAC,eACM,MAAM,EAAE;;GA2BtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,GAAI,CAAC,SAAS,YAAY,QACjD;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;CAAE,EAAE,eAC7B,MAAM,EAAE,eACR,aAAa,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC;;GAqB7C,CAAC;AA6BF;;;;;GAKG;AACH,eAAO,MAAM,yCAAyC,GACpD,CAAC,SAAS,YAAY,QAEhB,CAAC,QACD,aAAa,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,YACpB,MAAM,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAAC,YACpC,OAAO,gBACH,aAAa,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,gBAC/B,MAAM,EAAE,KACrB;IACD,IAAI,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;KAAE,EAAE,CAAC;IAC3C,YAAY,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CA4BrE,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,EAAE,CAAC;AAEJ,eAAO,MAAM,sCAAsC,SAC3C,GAAG,YACC,MAAM,aACL,SAAS,GAAG,SAAS;;;;CAoBjC,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,YAAY,CAC1B,SAAS,EAAE;IACT,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,EAAE,EACH,QAAQ,EAAE,MAAM,GACf;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB,CAmCA;AAID,eAAO,MAAM,eAAe,iBACZ;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,EAAE,QACG;IACJ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;CAChC,EAAE,YACO,OAAO,gBACH,MAAM,EAAE;aARX,MAAM;UACT,MAAM;cACF,MAAM;GA8CnB,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,CAAC,SAAS,YAAY,SAClD,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,WACjC,iBAAiB,CAAC,CAAC,CAAC,GAAG,SAAS,gBAC3B,MAAM,GAAG,SAAS,8BAwBjC,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,uCAAuC,SAC5C;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;CAAE,EAAE,gBAC5B;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,EAAE,qBAChD,MAAM,EAAE;;;;;iBADF,MAAM;cAAQ,MAAM;kBAAY,MAAM;;CA2BhE,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,YAAY,QAC3C,CAAC,QACD,aAAa,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,YACpB,MAAM,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAAC,YACpC,OAAO,gBACH,aAAa,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,cACjC,SAAS,mBACJ,SAAS,GAAG,QAAQ;;iBApCZ,MAAM;cAAQ,MAAM;kBAAY,MAAM;;;;;CAuEhE,CAAC"}
1
+ {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/utils.ts"],"names":[],"mappings":"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"}
@@ -68,7 +68,7 @@ const generateTimeRanges = (startDate, endDate, interval) => {
68
68
  * @param interval - Interval in milliseconds
69
69
  * @returns Formatted string
70
70
  */
71
- const formatDate = (date, interval) => {
71
+ export const formatDate = (date, interval) => {
72
72
  if (interval > 24 * 60 * 60 * 1000) {
73
73
  return (DAY_MONTH_FORMATER.format(date).replace(/[ ,]/g, '') +
74
74
  ' ' +
@@ -105,7 +105,8 @@ export const transformTimeData = (bars, type, barDataKeys) => {
105
105
  const categoryMap = new Map();
106
106
  // Initialize all ranges with zeros
107
107
  timeRanges.forEach((range) => {
108
- const categoryDisplay = formatDate(range.start, type.timeRange.interval);
108
+ // const categoryDisplay = formatDate(range.start, type.timeRange.interval);
109
+ const categoryDisplay = range.start.getTime();
109
110
  const initialData = {
110
111
  category: categoryDisplay,
111
112
  };
package/dist/index.d.ts CHANGED
@@ -61,5 +61,4 @@ export { InfoMessage } from './components/infomessage/InfoMessage.component';
61
61
  export { InputList } from './components/inputlist/InputList.component';
62
62
  export { InlineInput } from './components/inlineinput/InlineInput';
63
63
  export { UnsuccessfulResult } from './components/UnsuccessfulResult.component';
64
- export { LineTimeSerieChart } from './components/linetimeseriechart/linetimeseriechart.component';
65
64
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,8CAA8C,CAAC;AAC1E,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,0CAA0C,CAAC;AACpE,OAAO,EAAE,KAAK,EAAE,MAAM,oCAAoC,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,0CAA0C,CAAC;AACpE,OAAO,EACL,WAAW,EACX,eAAe,EACf,cAAc,EACd,cAAc,EACd,cAAc,EACd,WAAW,EACX,cAAc,EACd,WAAW,EACX,MAAM,GACP,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,oCAAoC,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,oDAAoD,CAAC;AACnF,OAAO,EAAE,WAAW,EAAE,MAAM,gDAAgD,CAAC;AAC7E,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,wCAAwC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,0CAA0C,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,wCAAwC,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,gDAAgD,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AACvE,OAAO,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,gDAAgD,CAAC;AAC7E,OAAO,EAAE,QAAQ,EAAE,MAAM,0CAA0C,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,0DAA0D,CAAC;AAC5F,OAAO,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AACvE,OAAO,EAAE,QAAQ,EAAE,MAAM,0CAA0C,CAAC;AACpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,gEAAgE,CAAC;AACrG,OAAO,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AACvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,0DAA0D,CAAC;AAC5F,OAAO,EAAE,mBAAmB,EAAE,MAAM,gEAAgE,CAAC;AACrG,OAAO,EAAE,eAAe,EAAE,MAAM,wDAAwD,CAAC;AACzF,OAAO,EAAE,eAAe,EAAE,MAAM,wDAAwD,CAAC;AACzF,OAAO,EAAE,UAAU,EAAE,MAAM,8CAA8C,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,MAAM,8CAA8C,CAAC;AAC1E,OAAO,EAAE,gBAAgB,EAAE,MAAM,0DAA0D,CAAC;AAC5F,OAAO,EAAE,YAAY,EAAE,MAAM,iDAAiD,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,MAAM,iDAAiD,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,MAAM,iDAAiD,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAE,MAAM,kDAAkD,CAAC;AACjF,OAAO,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AACvE,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EAAE,MAAM,IAAI,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AACnE,OAAO,EACL,SAAS,EACT,aAAa,EACb,UAAU,EACV,WAAW,EACX,UAAU,EACV,SAAS,EACT,WAAW,EACX,cAAc,EACd,IAAI,EACJ,IAAI,GACL,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,kCAAkC,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,gDAAgD,CAAC;AAC7E,OAAO,EAAE,IAAI,EAAE,MAAM,kCAAkC,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,oDAAoD,CAAC;AACnF,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAChF,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AACxE,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,oCAAoC,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC3E,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC7E,OAAO,EAAE,OAAO,EAAE,MAAM,yCAAyC,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,gDAAgD,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,2CAA2C,CAAC;AAC/E,OAAO,EAAE,kBAAkB,EAAE,MAAM,8DAA8D,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"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"}
package/dist/index.js CHANGED
@@ -61,4 +61,3 @@ export { InfoMessage } from './components/infomessage/InfoMessage.component';
61
61
  export { InputList } from './components/inputlist/InputList.component';
62
62
  export { InlineInput } from './components/inlineinput/InlineInput';
63
63
  export { UnsuccessfulResult } from './components/UnsuccessfulResult.component';
64
- export { LineTimeSerieChart } from './components/linetimeseriechart/linetimeseriechart.component';
package/dist/next.d.ts CHANGED
@@ -16,4 +16,5 @@ export { Accordion } from './components/accordion/Accordion.component';
16
16
  export { Barchart, BarchartSortFn, BarchartTooltipFn, } from './components/barchartv2/Barchart.component';
17
17
  export { ChartLegendWrapper } from './components/chartlegend/ChartLegendWrapper';
18
18
  export { ChartLegend } from './components/chartlegend/ChartLegend';
19
+ export { LineTimeSerieChart } from './components/linetimeseriechart/linetimeseriechart.component';
19
20
  //# sourceMappingURL=next.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"next.d.ts","sourceRoot":"","sources":["../src/lib/next.ts"],"names":[],"mappings":"AAAA,OAAO,2CAA2C,CAAC;AACnD,OAAO,aAAa,CAAC;AACrB,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,4CAA4C,CAAC;AACxE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,wCAAwC,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,4DAA4D,CAAC;AAC/F,OAAO,EACL,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,uDAAuD,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAC;AACjF,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,wDAAwD,CAAC;AACxF,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AACvE,OAAO,EACL,QAAQ,EACR,cAAc,EACd,iBAAiB,GAClB,MAAM,4CAA4C,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAC;AACjF,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC"}
1
+ {"version":3,"file":"next.d.ts","sourceRoot":"","sources":["../src/lib/next.ts"],"names":[],"mappings":"AAAA,OAAO,2CAA2C,CAAC;AACnD,OAAO,aAAa,CAAC;AACrB,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,4CAA4C,CAAC;AACxE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,wCAAwC,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,4DAA4D,CAAC;AAC/F,OAAO,EACL,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,uDAAuD,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAC;AACjF,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,wDAAwD,CAAC;AACxF,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AACvE,OAAO,EACL,QAAQ,EACR,cAAc,EACd,iBAAiB,GAClB,MAAM,4CAA4C,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAC;AACjF,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,8DAA8D,CAAC"}
package/dist/next.js CHANGED
@@ -16,3 +16,4 @@ export { Accordion } from './components/accordion/Accordion.component';
16
16
  export { Barchart, } from './components/barchartv2/Barchart.component';
17
17
  export { ChartLegendWrapper } from './components/chartlegend/ChartLegendWrapper';
18
18
  export { ChartLegend } from './components/chartlegend/ChartLegend';
19
+ export { LineTimeSerieChart } from './components/linetimeseriechart/linetimeseriechart.component';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scality/core-ui",
3
- "version": "0.164.0",
3
+ "version": "0.165.0",
4
4
  "description": "Scality common React component library",
5
5
  "author": "Scality Engineering",
6
6
  "license": "SEE LICENSE IN LICENSE",
@@ -362,7 +362,7 @@ describe('Barchart', () => {
362
362
  expect(categories[2]).toHaveTextContent('category1'); // 10 (lowest)
363
363
  });
364
364
 
365
- it('should render header with title, secondary title, right title and help tooltip', async () => {
365
+ it('should render header with title, secondary title, right title and helpIcon', async () => {
366
366
  const { Wrapper } = getWrapper();
367
367
  render(
368
368
  <Wrapper>
@@ -382,8 +382,6 @@ describe('Barchart', () => {
382
382
  expect(screen.getByText('Test Title')).toBeInTheDocument();
383
383
  expect(screen.getByText('Test Secondary Title')).toBeInTheDocument();
384
384
  expect(screen.getByText('Test Right Title')).toBeInTheDocument();
385
- await waitFor(() => {
386
- expect(screen.getByLabelText('Test Help Tooltip')).toBeInTheDocument();
387
- });
385
+ expect(screen.getByLabelText('Info')).toBeInTheDocument();
388
386
  });
389
387
  });
@@ -18,7 +18,12 @@ import { ConstrainedText } from '../constrainedtext/Constrainedtext.component';
18
18
  import { IconHelp } from '../iconhelper/IconHelper';
19
19
  import { Loader } from '../loader/Loader.component';
20
20
  import { Text } from '../text/Text.component';
21
- import { renderTooltipContent, UnitRange, useChartData } from './utils';
21
+ import {
22
+ formatDate,
23
+ renderTooltipContent,
24
+ UnitRange,
25
+ useChartData,
26
+ } from './utils';
22
27
  import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
23
28
 
24
29
  const CHART_CONSTANTS = {
@@ -74,7 +79,7 @@ export type BarchartProps<T extends BarchartBars> = {
74
79
  tooltip?: BarchartTooltipFn<T>;
75
80
  defaultSort?: BarchartSortFn<T>;
76
81
  unitRange?: UnitRange;
77
- helpTooltip?: string;
82
+ helpTooltip?: React.ReactNode;
78
83
  stacked?: boolean;
79
84
  /**
80
85
  * Sort the bars by default or by legend order
@@ -99,6 +104,7 @@ interface CustomTickProps {
99
104
  };
100
105
  visibleTicksCount: number;
101
106
  width: number;
107
+ type: TimeType;
102
108
  }
103
109
 
104
110
  /* ---------------------------------- COMPONENTS ---------------------------------- */
@@ -109,6 +115,7 @@ const CustomTick = ({
109
115
  payload,
110
116
  visibleTicksCount,
111
117
  width,
118
+ type,
112
119
  }: CustomTickProps) => {
113
120
  const theme = useTheme();
114
121
  const tickWidth =
@@ -126,7 +133,9 @@ const CustomTick = ({
126
133
  <ConstrainedText
127
134
  text={
128
135
  <Text variant="Smaller" color="textSecondary">
129
- {String(payload.value)}
136
+ {type.type === 'time'
137
+ ? formatDate(new Date(payload.value), type.timeRange.interval)
138
+ : String(payload.value)}
130
139
  </Text>
131
140
  }
132
141
  centered
@@ -157,16 +166,14 @@ const ChartHeader = ({
157
166
  }: {
158
167
  title?: string;
159
168
  secondaryTitle?: string;
160
- helpTooltip?: string;
169
+ helpTooltip?: React.ReactNode;
161
170
  rightTitle?: React.ReactNode;
162
171
  }) => {
163
172
  return (
164
173
  <Wrap>
165
174
  <Stack gap="r4">
166
175
  <Text variant="ChartTitle">{title}</Text>
167
- {helpTooltip && (
168
- <IconHelp tooltipMessage={helpTooltip} title={helpTooltip} />
169
- )}
176
+ {helpTooltip && <IconHelp tooltipMessage={helpTooltip} />}
170
177
 
171
178
  {secondaryTitle && (
172
179
  <Text
@@ -330,7 +337,7 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
330
337
  />
331
338
  <XAxis
332
339
  dataKey="category"
333
- tick={(props) => <CustomTick {...props} />}
340
+ tick={(props) => <CustomTick {...props} type={type} />}
334
341
  type="category"
335
342
  interval={0}
336
343
  allowDataOverflow={true}
@@ -13,6 +13,21 @@ import {
13
13
  UnitRange,
14
14
  } from './utils';
15
15
 
16
+ // Test date constants to avoid repetition
17
+ const TEST_DATES = {
18
+ JULY_5_2024: new Date('2024-07-05T00:00:00'),
19
+ JULY_6_2024: new Date('2024-07-06T00:00:00'),
20
+ JULY_7_2024: new Date('2024-07-07T00:00:00'),
21
+ JULY_5_10AM: new Date('2024-07-05T10:00:00'),
22
+ JULY_5_11AM: new Date('2024-07-05T11:00:00'),
23
+ JULY_5_8_30AM: new Date('2024-07-05T08:30:00'),
24
+ JULY_5_2_45PM: new Date('2024-07-05T14:45:00'),
25
+ JULY_6_9_15AM: new Date('2024-07-06T09:15:00'),
26
+ JULY_5_8AM: new Date('2024-07-05T08:00:00'),
27
+ JULY_6_2PM: new Date('2024-07-06T14:00:00'),
28
+ JULY_7_10AM: new Date('2024-07-07T10:00:00'),
29
+ } as const;
30
+
16
31
  // Mock theme object for tests
17
32
  const mockTheme = {
18
33
  statusHealthy: '#00D100',
@@ -46,8 +61,8 @@ describe('transformTimeData', () => {
46
61
  {
47
62
  label: 'Success',
48
63
  data: [
49
- [new Date('2024-07-05T00:00:00'), 10],
50
- [new Date('2024-07-06T00:00:00'), 20],
64
+ [TEST_DATES.JULY_5_2024, 10],
65
+ [TEST_DATES.JULY_6_2024, 20],
51
66
  ] as [Date, number][],
52
67
  },
53
68
  ];
@@ -55,8 +70,8 @@ describe('transformTimeData', () => {
55
70
  const type = {
56
71
  type: 'time' as const,
57
72
  timeRange: {
58
- startDate: new Date('2024-07-05T00:00:00'),
59
- endDate: new Date('2024-07-06T00:00:00'),
73
+ startDate: TEST_DATES.JULY_5_2024,
74
+ endDate: TEST_DATES.JULY_6_2024,
60
75
  interval: 24 * 60 * 60 * 1000, // 1 day
61
76
  },
62
77
  };
@@ -66,8 +81,8 @@ describe('transformTimeData', () => {
66
81
  const result = transformTimeData(bars, type, barDataKeys);
67
82
 
68
83
  expect(result).toEqual([
69
- { category: 'Fri05Jul', Success: 10 },
70
- { category: 'Sat06Jul', Success: 20 },
84
+ { category: TEST_DATES.JULY_5_2024.valueOf(), Success: 10 },
85
+ { category: TEST_DATES.JULY_6_2024.valueOf(), Success: 20 },
71
86
  ]);
72
87
  });
73
88
 
@@ -76,9 +91,9 @@ describe('transformTimeData', () => {
76
91
  {
77
92
  label: 'Success',
78
93
  data: [
79
- [new Date('2024-07-05T00:00:00'), 10],
94
+ [TEST_DATES.JULY_5_2024, 10],
80
95
  // Missing July 6th
81
- [new Date('2024-07-07T00:00:00'), 30],
96
+ [TEST_DATES.JULY_7_2024, 30],
82
97
  ] as [Date, number][],
83
98
  },
84
99
  ];
@@ -86,8 +101,8 @@ describe('transformTimeData', () => {
86
101
  const type = {
87
102
  type: 'time' as const,
88
103
  timeRange: {
89
- startDate: new Date('2024-07-05T00:00:00'),
90
- endDate: new Date('2024-07-07T00:00:00'),
104
+ startDate: TEST_DATES.JULY_5_2024,
105
+ endDate: TEST_DATES.JULY_7_2024,
91
106
  interval: 24 * 60 * 60 * 1000, // 1 day
92
107
  },
93
108
  };
@@ -97,9 +112,9 @@ describe('transformTimeData', () => {
97
112
  const result = transformTimeData(bars, type, barDataKeys);
98
113
 
99
114
  expect(result).toEqual([
100
- { category: 'Fri05Jul', Success: 10 },
101
- { category: 'Sat06Jul', Success: 0 }, // Missing data filled with 0
102
- { category: 'Sun07Jul', Success: 30 },
115
+ { category: TEST_DATES.JULY_5_2024.valueOf(), Success: 10 },
116
+ { category: TEST_DATES.JULY_6_2024.valueOf(), Success: 0 }, // Missing data filled with 0
117
+ { category: TEST_DATES.JULY_7_2024.valueOf(), Success: 30 },
103
118
  ]);
104
119
  });
105
120
 
@@ -108,8 +123,8 @@ describe('transformTimeData', () => {
108
123
  {
109
124
  label: 'Success',
110
125
  data: [
111
- [new Date('2024-07-05T10:00:00'), 10],
112
- [new Date('2024-07-05T11:00:00'), 20],
126
+ [TEST_DATES.JULY_5_10AM, 10],
127
+ [TEST_DATES.JULY_5_11AM, 20],
113
128
  ] as [Date, number][],
114
129
  },
115
130
  ];
@@ -117,8 +132,8 @@ describe('transformTimeData', () => {
117
132
  const type = {
118
133
  type: 'time' as const,
119
134
  timeRange: {
120
- startDate: new Date('2024-07-05T10:00:00'),
121
- endDate: new Date('2024-07-05T11:00:00'),
135
+ startDate: TEST_DATES.JULY_5_10AM,
136
+ endDate: TEST_DATES.JULY_5_11AM,
122
137
  interval: 60 * 60 * 1000, // 1 hour
123
138
  },
124
139
  };
@@ -128,8 +143,8 @@ describe('transformTimeData', () => {
128
143
  const result = transformTimeData(bars, type, barDataKeys);
129
144
 
130
145
  expect(result).toEqual([
131
- { category: '10:00', Success: 10 },
132
- { category: '11:00', Success: 20 },
146
+ { category: TEST_DATES.JULY_5_10AM.valueOf(), Success: 10 },
147
+ { category: TEST_DATES.JULY_5_11AM.valueOf(), Success: 20 },
133
148
  ]);
134
149
  });
135
150
 
@@ -138,9 +153,9 @@ describe('transformTimeData', () => {
138
153
  {
139
154
  label: 'Success',
140
155
  data: [
141
- [new Date('2024-07-05T08:30:00'), 10], // 8:30 AM
142
- [new Date('2024-07-05T14:45:00'), 25], // 2:45 PM (should overwrite 8:30 AM)
143
- [new Date('2024-07-06T09:15:00'), 15], // Next day
156
+ [TEST_DATES.JULY_5_8_30AM, 10], // 8:30 AM
157
+ [TEST_DATES.JULY_5_2_45PM, 25], // 2:45 PM (should overwrite 8:30 AM)
158
+ [TEST_DATES.JULY_6_9_15AM, 15], // Next day
144
159
  ] as [Date, number][],
145
160
  },
146
161
  ];
@@ -148,8 +163,8 @@ describe('transformTimeData', () => {
148
163
  const type = {
149
164
  type: 'time' as const,
150
165
  timeRange: {
151
- startDate: new Date('2024-07-05T00:00:00'),
152
- endDate: new Date('2024-07-06T00:00:00'),
166
+ startDate: TEST_DATES.JULY_5_2024,
167
+ endDate: TEST_DATES.JULY_6_2024,
153
168
  interval: 24 * 60 * 60 * 1000, // 1 day
154
169
  },
155
170
  };
@@ -159,8 +174,8 @@ describe('transformTimeData', () => {
159
174
  const result = transformTimeData(bars, type, barDataKeys);
160
175
 
161
176
  expect(result).toEqual([
162
- { category: 'Fri05Jul', Success: 25 }, // Last value for July 5th
163
- { category: 'Sat06Jul', Success: 15 }, // July 6th value
177
+ { category: TEST_DATES.JULY_5_2024.valueOf(), Success: 25 }, // Last value for July 5th
178
+ { category: TEST_DATES.JULY_6_2024.valueOf(), Success: 15 }, // July 6th value
164
179
  ]);
165
180
  });
166
181
 
@@ -169,9 +184,9 @@ describe('transformTimeData', () => {
169
184
  {
170
185
  label: 'Success',
171
186
  data: [
172
- [new Date('2024-07-07T10:00:00'), 30], // July 7th (latest)
173
- [new Date('2024-07-05T08:00:00'), 10], // July 5th (earliest)
174
- [new Date('2024-07-06T14:00:00'), 20], // July 6th (middle)
187
+ [TEST_DATES.JULY_7_10AM, 30], // July 7th (latest)
188
+ [TEST_DATES.JULY_5_8AM, 10], // July 5th (earliest)
189
+ [TEST_DATES.JULY_6_2PM, 20], // July 6th (middle)
175
190
  ] as [Date, number][],
176
191
  },
177
192
  ];
@@ -179,8 +194,8 @@ describe('transformTimeData', () => {
179
194
  const type = {
180
195
  type: 'time' as const,
181
196
  timeRange: {
182
- startDate: new Date('2024-07-05T00:00:00'),
183
- endDate: new Date('2024-07-07T00:00:00'),
197
+ startDate: TEST_DATES.JULY_5_2024,
198
+ endDate: TEST_DATES.JULY_7_2024,
184
199
  interval: 24 * 60 * 60 * 1000, // 1 day
185
200
  },
186
201
  };
@@ -191,9 +206,9 @@ describe('transformTimeData', () => {
191
206
 
192
207
  // Should be in chronological order regardless of input order
193
208
  expect(result).toEqual([
194
- { category: 'Fri05Jul', Success: 10 },
195
- { category: 'Sat06Jul', Success: 20 },
196
- { category: 'Sun07Jul', Success: 30 },
209
+ { category: TEST_DATES.JULY_5_2024.valueOf(), Success: 10 },
210
+ { category: TEST_DATES.JULY_6_2024.valueOf(), Success: 20 },
211
+ { category: TEST_DATES.JULY_7_2024.valueOf(), Success: 30 },
197
212
  ]);
198
213
  });
199
214
 
@@ -201,19 +216,19 @@ describe('transformTimeData', () => {
201
216
  const bars = [
202
217
  {
203
218
  label: 'Success',
204
- data: [[new Date('2024-07-05T00:00:00'), 10]] as [Date, number][],
219
+ data: [[TEST_DATES.JULY_5_2024, 10]] as [Date, number][],
205
220
  },
206
221
  {
207
222
  label: 'Failed',
208
- data: [[new Date('2024-07-06T00:00:00'), 5]] as [Date, number][],
223
+ data: [[TEST_DATES.JULY_6_2024, 5]] as [Date, number][],
209
224
  },
210
225
  ];
211
226
 
212
227
  const type = {
213
228
  type: 'time' as const,
214
229
  timeRange: {
215
- startDate: new Date('2024-07-05T00:00:00'),
216
- endDate: new Date('2024-07-06T00:00:00'),
230
+ startDate: TEST_DATES.JULY_5_2024,
231
+ endDate: TEST_DATES.JULY_6_2024,
217
232
  interval: 24 * 60 * 60 * 1000, // 1 day
218
233
  },
219
234
  };
@@ -223,8 +238,16 @@ describe('transformTimeData', () => {
223
238
  const result = transformTimeData(bars, type, barDataKeys);
224
239
 
225
240
  expect(result).toEqual([
226
- { category: 'Fri05Jul', Success: 10, Failed: 0 },
227
- { category: 'Sat06Jul', Success: 0, Failed: 5 },
241
+ {
242
+ category: TEST_DATES.JULY_5_2024.valueOf(),
243
+ Success: 10,
244
+ Failed: 0,
245
+ },
246
+ {
247
+ category: TEST_DATES.JULY_6_2024.valueOf(),
248
+ Success: 0,
249
+ Failed: 5,
250
+ },
228
251
  ]);
229
252
  });
230
253
  });
@@ -570,11 +593,11 @@ describe('formatPrometheusDataToRechartsDataAndBars', () => {
570
593
  const bars = [
571
594
  {
572
595
  label: 'Success Count',
573
- data: [[new Date('2024-07-05T00:00:00'), 10]] as [Date, number][],
596
+ data: [[TEST_DATES.JULY_5_2024, 10]] as [Date, number][],
574
597
  },
575
598
  {
576
599
  label: 'Failed Count',
577
- data: [[new Date('2024-07-05T00:00:00'), 5]] as [Date, number][],
600
+ data: [[TEST_DATES.JULY_5_2024, 5]] as [Date, number][],
578
601
  },
579
602
  ];
580
603
 
@@ -583,8 +606,8 @@ describe('formatPrometheusDataToRechartsDataAndBars', () => {
583
606
  {
584
607
  type: 'time',
585
608
  timeRange: {
586
- startDate: new Date('2024-07-05T00:00:00'),
587
- endDate: new Date('2024-07-05T00:00:00'),
609
+ startDate: TEST_DATES.JULY_5_2024,
610
+ endDate: TEST_DATES.JULY_5_2024,
588
611
  interval: 24 * 60 * 60 * 1000,
589
612
  },
590
613
  },
@@ -598,7 +621,11 @@ describe('formatPrometheusDataToRechartsDataAndBars', () => {
598
621
 
599
622
  // Should integrate: time transformation + status color assignment
600
623
  expect(result.data).toEqual([
601
- { category: 'Fri05Jul', 'Success Count': 10, 'Failed Count': 5 },
624
+ {
625
+ category: TEST_DATES.JULY_5_2024.valueOf(),
626
+ 'Success Count': 10,
627
+ 'Failed Count': 5,
628
+ },
602
629
  ]);
603
630
  expect(result.rechartsBars).toEqual([
604
631
  { dataKey: 'Success Count', fill: '#4BE4E2' }, // lineColor3
@@ -90,7 +90,7 @@ const generateTimeRanges = (
90
90
  * @param interval - Interval in milliseconds
91
91
  * @returns Formatted string
92
92
  */
93
- const formatDate = (date: Date, interval: number): string => {
93
+ export const formatDate = (date: Date, interval: number): string => {
94
94
  if (interval > 24 * 60 * 60 * 1000) {
95
95
  return (
96
96
  DAY_MONTH_FORMATER.format(date).replace(/[ ,]/g, '') +
@@ -156,7 +156,8 @@ export const transformTimeData = <T extends BarchartBars>(
156
156
 
157
157
  // Initialize all ranges with zeros
158
158
  timeRanges.forEach((range) => {
159
- const categoryDisplay = formatDate(range.start, type.timeRange.interval);
159
+ // const categoryDisplay = formatDate(range.start, type.timeRange.interval);
160
+ const categoryDisplay = range.start.getTime();
160
161
  const initialData: { [key: string]: string | number } = {
161
162
  category: categoryDisplay,
162
163
  };
package/src/lib/index.ts CHANGED
@@ -82,4 +82,3 @@ export { InfoMessage } from './components/infomessage/InfoMessage.component';
82
82
  export { InputList } from './components/inputlist/InputList.component';
83
83
  export { InlineInput } from './components/inlineinput/InlineInput';
84
84
  export { UnsuccessfulResult } from './components/UnsuccessfulResult.component';
85
- export { LineTimeSerieChart } from './components/linetimeseriechart/linetimeseriechart.component';
package/src/lib/next.ts CHANGED
@@ -23,3 +23,4 @@ export {
23
23
  } from './components/barchartv2/Barchart.component';
24
24
  export { ChartLegendWrapper } from './components/chartlegend/ChartLegendWrapper';
25
25
  export { ChartLegend } from './components/chartlegend/ChartLegend';
26
+ export { LineTimeSerieChart } from './components/linetimeseriechart/linetimeseriechart.component';