@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.
- package/dist/components/barchartv2/Barchart.component.d.ts +1 -1
- package/dist/components/barchartv2/Barchart.component.d.ts.map +1 -1
- package/dist/components/barchartv2/Barchart.component.js +7 -5
- package/dist/components/barchartv2/utils.d.ts +7 -0
- package/dist/components/barchartv2/utils.d.ts.map +1 -1
- package/dist/components/barchartv2/utils.js +3 -2
- package/dist/index.d.ts +0 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +0 -1
- package/dist/next.d.ts +1 -0
- package/dist/next.d.ts.map +1 -1
- package/dist/next.js +1 -0
- package/package.json +1 -1
- package/src/lib/components/barchartv2/Barchart.component.test.tsx +2 -4
- package/src/lib/components/barchartv2/Barchart.component.tsx +15 -8
- package/src/lib/components/barchartv2/utils.test.ts +72 -45
- package/src/lib/components/barchartv2/utils.ts +3 -2
- package/src/lib/index.ts +0 -1
- package/src/lib/next.ts +1 -0
|
@@ -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?:
|
|
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,
|
|
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:
|
|
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 &&
|
|
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;
|
|
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
|
package/dist/index.d.ts.map
CHANGED
|
@@ -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
|
|
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
|
package/dist/next.d.ts.map
CHANGED
|
@@ -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
|
@@ -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
|
|
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
|
-
|
|
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 {
|
|
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?:
|
|
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
|
-
{
|
|
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?:
|
|
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
|
-
[
|
|
50
|
-
[
|
|
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:
|
|
59
|
-
endDate:
|
|
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:
|
|
70
|
-
{ category:
|
|
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
|
-
[
|
|
94
|
+
[TEST_DATES.JULY_5_2024, 10],
|
|
80
95
|
// Missing July 6th
|
|
81
|
-
[
|
|
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:
|
|
90
|
-
endDate:
|
|
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:
|
|
101
|
-
{ category:
|
|
102
|
-
{ category:
|
|
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
|
-
[
|
|
112
|
-
[
|
|
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:
|
|
121
|
-
endDate:
|
|
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:
|
|
132
|
-
{ category:
|
|
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
|
-
[
|
|
142
|
-
[
|
|
143
|
-
[
|
|
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:
|
|
152
|
-
endDate:
|
|
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:
|
|
163
|
-
{ category:
|
|
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
|
-
[
|
|
173
|
-
[
|
|
174
|
-
[
|
|
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:
|
|
183
|
-
endDate:
|
|
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:
|
|
195
|
-
{ category:
|
|
196
|
-
{ category:
|
|
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: [[
|
|
219
|
+
data: [[TEST_DATES.JULY_5_2024, 10]] as [Date, number][],
|
|
205
220
|
},
|
|
206
221
|
{
|
|
207
222
|
label: 'Failed',
|
|
208
|
-
data: [[
|
|
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:
|
|
216
|
-
endDate:
|
|
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
|
-
{
|
|
227
|
-
|
|
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: [[
|
|
596
|
+
data: [[TEST_DATES.JULY_5_2024, 10]] as [Date, number][],
|
|
574
597
|
},
|
|
575
598
|
{
|
|
576
599
|
label: 'Failed Count',
|
|
577
|
-
data: [[
|
|
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:
|
|
587
|
-
endDate:
|
|
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
|
-
{
|
|
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';
|