@scality/core-ui 0.174.0 → 0.175.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.
Files changed (20) hide show
  1. package/dist/components/barchartv2/Barchart.component.d.ts +1 -0
  2. package/dist/components/barchartv2/Barchart.component.d.ts.map +1 -1
  3. package/dist/components/barchartv2/Barchart.component.js +10 -12
  4. package/dist/components/icon/Icon.component.d.ts +1 -0
  5. package/dist/components/icon/Icon.component.d.ts.map +1 -1
  6. package/dist/components/icon/Icon.component.js +1 -0
  7. package/dist/components/linetimeseriechart/linetimeseriechart.component.d.ts.map +1 -1
  8. package/dist/components/linetimeseriechart/linetimeseriechart.component.js +6 -6
  9. package/dist/components/scrollbarwrapper/ScrollbarWrapper.component.d.ts.map +1 -1
  10. package/dist/components/scrollbarwrapper/ScrollbarWrapper.component.js +2 -0
  11. package/dist/components/sparkline/sparkline.component.d.ts +2 -1
  12. package/dist/components/sparkline/sparkline.component.d.ts.map +1 -1
  13. package/dist/components/sparkline/sparkline.component.js +3 -3
  14. package/package.json +1 -1
  15. package/src/lib/components/barchartv2/Barchart.component.tsx +14 -18
  16. package/src/lib/components/icon/Icon.component.tsx +1 -0
  17. package/src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx +9 -7
  18. package/src/lib/components/scrollbarwrapper/ScrollbarWrapper.component.tsx +3 -1
  19. package/src/lib/components/sparkline/sparkline.component.tsx +5 -3
  20. package/stories/sparkline.stories.tsx +19 -0
package/dist/components/barchartv2/Barchart.component.d.ts CHANGED
@@ -79,6 +79,7 @@ interface CustomTickProps {
79
79
  */
80
80
  export declare const formatDate: (timestamp: number, interval: number) => React.ReactNode;
81
81
  export declare const CustomTick: ({ x, y, payload, visibleTicksCount, width, type, }: CustomTickProps) => import("react/jsx-runtime").JSX.Element;
82
+ export declare const StyledResponsiveContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("recharts").ResponsiveContainerProps & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
82
83
  export declare const Barchart: <T extends BarchartBars>(props: BarchartProps<T>) => import("react/jsx-runtime").JSX.Element;
83
84
  export {};
84
85
  //# sourceMappingURL=Barchart.component.d.ts.map
package/dist/components/barchartv2/Barchart.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Barchart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/Barchart.component.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Barchart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/Barchart.component.tsx"],"names":[],"mappings":"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"}
package/dist/components/barchartv2/Barchart.component.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { useState } from 'react';
3
- import { Bar, BarChart, CartesianGrid, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
3
+ import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
4
4
  import styled, { useTheme } from 'styled-components';
5
5
  import { spacing, Stack, Wrap } from '../../spacing';
6
6
  import { chartColors, fontSize } from '../../style/theme';
@@ -55,7 +55,7 @@ export const CustomTick = ({ x, y, payload, visibleTicksCount, width, type, }) =
55
55
  const theme = useTheme();
56
56
  const tickWidth = width / visibleTicksCount - CHART_CONSTANTS.TICK_WIDTH_OFFSET;
57
57
  const centerX = x - tickWidth / 2;
58
- return (_jsx("foreignObject", { x: centerX, y: y, width: tickWidth, color: theme.textSecondary, overflow: "visible", children: _jsx(ConstrainedText, { color: "textSecondary", text: _jsx(Text, { variant: "Smaller", children: type.type === 'time'
58
+ return (_jsx("foreignObject", { x: centerX, y: y - 8, width: tickWidth, color: theme.textSecondary, overflow: "visible", children: _jsx(ConstrainedText, { color: "textSecondary", text: _jsx(Text, { variant: "Smaller", children: type.type === 'time'
59
59
  ? formatDate(payload.value, type.timeRange.interval)
60
60
  : String(payload.value) }), centered: true, tooltipStyle: {
61
61
  backgroundColor: theme.backgroundLevel1,
@@ -65,7 +65,7 @@ export const CustomTick = ({ x, y, payload, visibleTicksCount, width, type, }) =
65
65
  position: 'absolute',
66
66
  } }) }));
67
67
  };
68
- const StyledResponsiveContainer = styled(ResponsiveContainer) `
68
+ export const StyledResponsiveContainer = styled(ResponsiveContainer) `
69
69
  // Avoid tooltip over constrained text to be cut off
70
70
  & .recharts-surface {
71
71
  overflow: visible;
@@ -105,22 +105,20 @@ export const Barchart = (props) => {
105
105
  return acc;
106
106
  }, {});
107
107
  const { rechartsBars, unitLabel, roundReferenceValue, rechartsData } = useChartData(bars || [], type, colorSet || {}, stacked, defaultSort, unitRange, stackedBarSort);
108
- return (_jsxs(Stack, { direction: "vertical", gap: "r8", children: [_jsx(ChartHeader, { title: title, secondaryTitle: secondaryTitle, helpTooltip: helpTooltip, rightTitle: rightTitle }), isError || (!bars && !isLoading) ? (_jsx(Error, { height: height })) : isLoading ? (_jsx(Loading, { height: height })) : (_jsx(StyledResponsiveContainer, { width: "100%", height: height, children: _jsxs(BarChart, { data: rechartsData, accessibilityLayer: true, barSize: type.type === 'category'
108
+ return (_jsxs(Stack, { direction: "vertical", children: [_jsx(ChartHeader, { title: title, secondaryTitle: secondaryTitle, helpTooltip: helpTooltip, rightTitle: rightTitle }), isError || (!bars && !isLoading) ? (_jsx(Error, { height: height })) : isLoading ? (_jsx(Loading, { height: height })) : (_jsx(StyledResponsiveContainer, { width: "100%", height: height, children: _jsxs(BarChart, { data: rechartsData, accessibilityLayer: true, barSize: type.type === 'category'
109
109
  ? type.gap === 0
110
110
  ? undefined
111
111
  : CHART_CONSTANTS.BAR_SIZE
112
- : CHART_CONSTANTS.BAR_SIZE, height: height, margin: CHART_CONSTANTS.CHART_MARGIN, barCategoryGap: type.type === 'category' ? type.gap : undefined, children: [_jsx(CartesianGrid, { vertical: false, horizontal: false, fill: theme.backgroundLevel1 }), rechartsBars.map((bar) => {
112
+ : CHART_CONSTANTS.BAR_SIZE, height: height, margin: CHART_CONSTANTS.CHART_MARGIN, barCategoryGap: type.type === 'category' ? type.gap : undefined, children: [_jsx(CartesianGrid, { vertical: true, horizontal: true, verticalPoints: [0], horizontalPoints: [0], stroke: theme.border, fill: theme.backgroundLevel4, strokeWidth: 1 }), rechartsBars.map((bar) => {
113
113
  const { fill, dataKey, stackId } = bar;
114
114
  return (_jsx(Bar, { dataKey: dataKey, fill: chartColors[fill] || fill, minPointSize: stacked ? 0 : CHART_CONSTANTS.MIN_POINT_SIZE, stackId: stackId, isAnimationActive: false, onMouseOver: () => setHoveredValue(dataKey), onMouseLeave: () => setHoveredValue(undefined) }, dataKey));
115
- }), _jsx(YAxis, { tickCount: 1, unit: ` ${unitLabel}`, domain: [0, roundReferenceValue], tickFormatter: (value) => new Intl.NumberFormat('fr-FR').format(value.toFixed(0)) // Add a space as thousand separator
116
- , axisLine: false, tick: {
115
+ }), _jsx(YAxis, { tickCount: 1, interval: 0, unit: ` ${unitLabel}`, domain: [0, roundReferenceValue], tickFormatter: (value) => new Intl.NumberFormat('fr-FR').format(value.toFixed(0)) // Add a space as thousand separator
116
+ , axisLine: { stroke: theme.border }, tick: {
117
117
  fill: theme.textSecondary,
118
118
  fontSize: fontSize.smaller,
119
- }, tickLine: false, label: {
120
- fill: theme.textSecondary,
121
- }, 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: {
122
- stroke: theme.textSecondary,
119
+ }, orientation: "right" }), _jsx(XAxis, { dataKey: "category", tick: (props) => _jsx(CustomTick, { ...props, type: type }), type: "category", interval: 0, allowDataOverflow: true, tickLine: {
120
+ stroke: theme.border,
123
121
  }, axisLine: {
124
- stroke: theme.textSecondary,
122
+ stroke: theme.border,
125
123
  } }), _jsx(Tooltip, { content: (props) => (_jsx(BarchartTooltip, { type: type, colorSet: colorSet, tooltipProps: props, hoveredValue: hoveredValue, tooltip: tooltip, unitLabel: unitLabel })), cursor: false })] }) }))] }));
126
124
  };
package/dist/components/icon/Icon.component.d.ts CHANGED
@@ -128,6 +128,7 @@ export declare const iconTable: {
128
128
  Mail: string;
129
129
  ThumbsUp: string;
130
130
  ThumbsDown: string;
131
+ Sidebar: string;
131
132
  };
132
133
  type IconProps = {
133
134
  'aria-label'?: string;
package/dist/components/icon/Icon.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Icon.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/icon/Icon.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAE7D,OAAO,EACL,aAAa,EAKd,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAOhD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+HrB,CAAC;AAEF,KAAK,SAAS,GAAG;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAOtG,CAAC;AAgBF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AACzE,MAAM,MAAM,SAAS,GAAG,MAAM,WAAW,CAAC;AAC1C,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiBF,eAAO,MAAM,WAAW;UAAsB,QAAQ;SAiCrD,CAAC;AA2DF,iBAAS,IAAI,CAAC,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CAU7C;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}
1
+ {"version":3,"file":"Icon.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/icon/Icon.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAE7D,OAAO,EACL,aAAa,EAKd,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAOhD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgIrB,CAAC;AAEF,KAAK,SAAS,GAAG;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAOtG,CAAC;AAgBF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AACzE,MAAM,MAAM,SAAS,GAAG,MAAM,WAAW,CAAC;AAC1C,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiBF,eAAO,MAAM,WAAW;UAAsB,QAAQ;SAiCrD,CAAC;AA2DF,iBAAS,IAAI,CAAC,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CAU7C;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}
package/dist/components/icon/Icon.component.js CHANGED
@@ -133,6 +133,7 @@ export const iconTable = {
133
133
  Mail: 'fas faEnvelope',
134
134
  ThumbsUp: 'far faThumbsUp',
135
135
  ThumbsDown: 'far faThumbsDown',
136
+ Sidebar: 'fas faColumns',
136
137
  };
137
138
  export const customIcons = {
138
139
  'Remote-user': ({ 'aria-label': ariaLabel, color, size }) => (_jsx(RemoteUser, { ariaLabel: ariaLabel, color: color, size: size })),
package/dist/components/linetimeseriechart/linetimeseriechart.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"linetimeseriechart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,mBAAmB,EAGpB,MAAM,UAAU,CAAC;AAqClB,MAAM,MAAM,KAAK,GAAG;IAElB,QAAQ,EAAE,MAAM,CAAC;IAEjB,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAEzC,eAAe,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtE,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,SAAS,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;IACrC,MAAM,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC;CAC7B,CAAC;AAGF,KAAK,qBAAqB,GAAG;IAC3B,SAAS,EAAE,aAAa,CAAC;IACzB,MAAM,EACF;QACE,KAAK,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC;QAC3B,KAAK,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC;KAC5B,GACD,SAAS,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,CACzB,wBAAwB,GACxB,qBAAqB,CACxB,GAAG;IACF,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE;QACV,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,CACd,YAAY,EAAE,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,EACjD,SAAS,CAAC,EAAE,MAAM,EAClB,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,KAC9B,KAAK,CAAC,SAAS,CAAC;CACtB,CAAC;AA6FF,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,KAAK,EACL,MAAM,EACN,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAiB,EACjB,UAAwB,EACxB,SAAqB,EACrB,UAAU,EACV,QAAQ,EACR,MAAM,EACN,aAAa,EACb,GAAG,IAAI,EACR,EAAE,cAAc,2CAwWhB"}
1
+ {"version":3,"file":"linetimeseriechart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,mBAAmB,EAGpB,MAAM,UAAU,CAAC;AAqClB,MAAM,MAAM,KAAK,GAAG;IAElB,QAAQ,EAAE,MAAM,CAAC;IAEjB,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAEzC,eAAe,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtE,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,SAAS,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;IACrC,MAAM,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC;CAC7B,CAAC;AAGF,KAAK,qBAAqB,GAAG;IAC3B,SAAS,EAAE,aAAa,CAAC;IACzB,MAAM,EACF;QACE,KAAK,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC;QAC3B,KAAK,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC;KAC5B,GACD,SAAS,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,CACzB,wBAAwB,GACxB,qBAAqB,CACxB,GAAG;IACF,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE;QACV,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,CACd,YAAY,EAAE,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,EACjD,SAAS,CAAC,EAAE,MAAM,EAClB,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,KAC9B,KAAK,CAAC,SAAS,CAAC;CACtB,CAAC;AA6FF,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,KAAK,EACL,MAAM,EACN,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAiB,EACjB,UAAwB,EACxB,SAAqB,EACrB,UAAU,EACV,QAAQ,EACR,MAAM,EACN,aAAa,EACb,GAAG,IAAI,EACR,EAAE,cAAc,2CA2WhB"}
package/dist/components/linetimeseriechart/linetimeseriechart.component.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { CartesianGrid, Line, LineChart, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
2
+ import { CartesianGrid, Line, LineChart, ReferenceLine, Tooltip, XAxis, YAxis, } from 'recharts';
3
3
  import { useCallback, useMemo, useRef, useState } from 'react';
4
4
  import styled, { useTheme } from 'styled-components';
5
5
  import { spacing } from '../../spacing';
@@ -15,11 +15,11 @@ import { Tooltip as TooltipComponent } from '../tooltip/Tooltip.component';
15
15
  import { formatXAxisLabel } from './utils';
16
16
  import { ChartTooltipContainer, ChartTooltipItem, ChartTooltipHeader, ChartTooltipItemsContainer, } from '../charttooltip/ChartTooltip';
17
17
  import { LegendShape } from '../chartlegend/ChartLegend';
18
+ import { StyledResponsiveContainer } from '../barchartv2/Barchart.component';
18
19
  const LineTemporalChartWrapper = styled.div `
19
20
  display: flex;
20
21
  flex-direction: column;
21
22
  justify-content: flex-start;
22
- flex: 1;
23
23
  `;
24
24
  const ChartHeader = styled.div `
25
25
  display: flex;
@@ -220,10 +220,10 @@ export function LineTimeSerieChart({ series, title, height, startingTimeStamp, i
220
220
  }, [series, getColor, selectedResources]);
221
221
  // Format time for display the tick in the x axis
222
222
  const formatXAxisLabelCallback = useCallback((timestamp) => formatXAxisLabel(timestamp, timeFormat, chartData), [timeFormat, chartData]);
223
- return (_jsxs(LineTemporalChartWrapper, { children: [_jsxs(ChartHeader, { children: [_jsxs(ChartTitleText, { children: [title, " ", unitLabel && `(${unitLabel})`] }), helpText && (_jsx(Box, { ml: spacing.r4, children: _jsx(TooltipComponent, { placement: 'right', overlay: _jsx(SmallerText, { children: helpText }), children: _jsx(Icon, { name: "Info", color: theme.buttonSecondary }) }) })), isLoading && _jsx(Loader, {})] }), _jsx("div", { onFocus: () => setIsChartActive(true), onBlur: () => setIsChartActive(false), onFocusCapture: () => setIsChartActive(true), onBlurCapture: () => setIsChartActive(false), children: _jsx(ResponsiveContainer, { width: "100%", height: height, children: _jsxs(LineChart, { data: rechartsData, ref: chartRef, margin: { top: 0, right: 0, bottom: 0, left: 0 }, "aria-label": `Time series chart for ${title}`, syncId: syncId, onMouseEnter: () => setIsChartActive(true), onMouseLeave: () => setIsChartActive(false), children: [_jsx(CartesianGrid, { vertical: true, horizontal: true, verticalPoints: [0], horizontalPoints: [0], stroke: theme.border, fill: theme.backgroundLevel4, strokeWidth: 1 }), _jsx(XAxis, { dataKey: "timestamp", type: "number", domain: ['dataMin', 'dataMax'], ticks: xAxisTicks, tickFormatter: formatXAxisLabelCallback, tickCount: 5, tick: {
223
+ return (_jsxs(LineTemporalChartWrapper, { children: [_jsxs(ChartHeader, { children: [_jsxs(ChartTitleText, { children: [title, " ", unitLabel && `(${unitLabel})`] }), helpText && (_jsx(Box, { ml: spacing.r4, children: _jsx(TooltipComponent, { placement: 'right', overlay: _jsx(SmallerText, { children: helpText }), children: _jsx(Icon, { name: "Info", color: theme.buttonSecondary }) }) })), isLoading && _jsx(Loader, {})] }), _jsx("div", { onFocus: () => setIsChartActive(true), onBlur: () => setIsChartActive(false), onFocusCapture: () => setIsChartActive(true), onBlurCapture: () => setIsChartActive(false), children: _jsx(StyledResponsiveContainer, { width: "100%", height: height, children: _jsxs(LineChart, { data: rechartsData, ref: chartRef, margin: { top: 0, right: 0, bottom: 0, left: 0 }, "aria-label": `Time series chart for ${title}`, syncId: syncId, onMouseEnter: () => setIsChartActive(true), onMouseLeave: () => setIsChartActive(false), accessibilityLayer: true, children: [_jsx(CartesianGrid, { vertical: true, horizontal: true, verticalPoints: [0], horizontalPoints: [0], stroke: theme.border, fill: theme.backgroundLevel4, strokeWidth: 1 }), _jsx(XAxis, { dataKey: "timestamp", type: "number", domain: ['dataMin', 'dataMax'], ticks: xAxisTicks, tickFormatter: formatXAxisLabelCallback, tickCount: 5, tick: {
224
224
  fill: theme.textSecondary,
225
225
  fontSize: fontSize.smaller,
226
- }, axisLine: { stroke: theme.border } }), _jsx(YAxis, { orientation: "right", allowDataOverflow: false, label: {
226
+ }, axisLine: { stroke: theme.border } }), _jsx(YAxis, { orientation: "right", label: {
227
227
  value: yAxisTitle,
228
228
  angle: 90,
229
229
  position: 'insideRight',
@@ -239,8 +239,8 @@ export function LineTimeSerieChart({ series, title, height, startingTimeStamp, i
239
239
  : [0, topValue], axisLine: { stroke: theme.border }, tick: {
240
240
  fill: theme.textSecondary,
241
241
  fontSize: fontSize.smaller,
242
- }, tickFormatter: (value) => Math.round(value).toString(), tickCount: 5, interval: 'preserveStartEnd' }), _jsx(Tooltip, { content: (props) => (_jsx(LineTimeSerieChartTooltip, { unitLabel: unitLabel, timeFormat: timeFormat, renderTooltip: renderTooltip, tooltipProps: props, isChartActive: isChartActive, hoveredValue: hoveredValue })) }), yAxisType === 'symmetrical' && (_jsx(ReferenceLine, { y: 0, stroke: theme.border })), Object.entries(groupedSeries).map(([resource, resourceSeries]) => resourceSeries.map((serie, serieIndex) => {
242
+ }, tickFormatter: (value) => new Intl.NumberFormat('fr-FR').format(value.toFixed(0)), tickCount: 5, interval: 0 }), _jsx(Tooltip, { content: (props) => (_jsx(LineTimeSerieChartTooltip, { unitLabel: unitLabel, timeFormat: timeFormat, renderTooltip: renderTooltip, tooltipProps: props, isChartActive: isChartActive, hoveredValue: hoveredValue })) }), yAxisType === 'symmetrical' && (_jsx(ReferenceLine, { y: 0, stroke: theme.border })), Object.entries(groupedSeries).map(([resource, resourceSeries]) => resourceSeries.map((serie, serieIndex) => {
243
243
  const label = serie.getTooltipLabel(serie.metricPrefix, serie.resource);
244
- return (_jsx(Line, { type: "monotone", dataKey: label, stroke: colorMapping[resource], dot: false, isAnimationActive: false, onMouseEnter: () => setHoveredValue(label), onMouseLeave: () => setHoveredValue(undefined) }, `${title}-${resource}-${serieIndex}`));
244
+ return (_jsx(Line, { type: "monotone", dataKey: label, stroke: colorMapping[resource], dot: false, isAnimationActive: false, strokeDasharray: serie.isLineDashed ? '4 4' : undefined, onMouseEnter: () => setHoveredValue(label), onMouseLeave: () => setHoveredValue(undefined) }, `${title}-${resource}-${serieIndex}`));
245
245
  }))] }) }) })] }));
246
246
  }
package/dist/components/scrollbarwrapper/ScrollbarWrapper.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ScrollbarWrapper.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/scrollbarwrapper/ScrollbarWrapper.component.tsx"],"names":[],"mappings":"AAEA,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAmDF,iBAAS,gBAAgB,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,2CAO5C;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
1
+ {"version":3,"file":"ScrollbarWrapper.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/scrollbarwrapper/ScrollbarWrapper.component.tsx"],"names":[],"mappings":"AAEA,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAqDF,iBAAS,gBAAgB,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,2CAO5C;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
package/dist/components/scrollbarwrapper/ScrollbarWrapper.component.js CHANGED
@@ -20,6 +20,7 @@ ${(props) => {
20
20
  width: 4px;
21
21
  height: 4px;
22
22
  min-height: 20px;
23
+ background: ${brand.border}; // fallback for gradient themes
23
24
  background: ${brand.buttonSecondary};
24
25
  border-radius: 4px;
25
26
  -webkit-border-radius: 4px;
@@ -42,6 +43,7 @@ ${(props) => {
42
43
  }
43
44
 
44
45
  // Firefox
46
+ scrollbar-color: ${brand.border} ${brand.backgroundLevel3}; // fallback for gradient themes
45
47
  scrollbar-color: ${brand.buttonSecondary} ${brand.backgroundLevel3};
46
48
  scrollbar-width: thin;
47
49
  }
package/dist/components/sparkline/sparkline.component.d.ts CHANGED
@@ -6,11 +6,12 @@ type SparklineProps = {
6
6
  startingTimeStamp: number;
7
7
  sampleDuration: number;
8
8
  sampleInterval: number;
9
+ yAxisType?: 'default' | 'percentage';
9
10
  };
10
11
  /**
11
12
  * Sparkline is a simple dynamically sized area chart.
12
13
  * Used to show trends in data over time.
13
14
  */
14
- export declare function Sparkline({ serie, startingTimeStamp, sampleDuration, sampleInterval }: SparklineProps): import("react/jsx-runtime").JSX.Element;
15
+ export declare function Sparkline({ serie, startingTimeStamp, sampleDuration, sampleInterval, yAxisType }: SparklineProps): import("react/jsx-runtime").JSX.Element;
15
16
  export {};
16
17
  //# sourceMappingURL=sparkline.component.d.ts.map
package/dist/components/sparkline/sparkline.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sparkline.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/sparkline/sparkline.component.tsx"],"names":[],"mappings":"AAMA,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE;QACL,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,GAAC,IAAI,CAAC,EAAE,CAAC;QAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,iBAAiB,EAAE,MAAM,CAAC;IAC1B,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAA;CACvB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,cAAc,EAAE,EAAE,cAAc,2CAiCrG"}
1
+ {"version":3,"file":"sparkline.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/sparkline/sparkline.component.tsx"],"names":[],"mappings":"AAMA,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE;QACL,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,GAAC,IAAI,CAAC,EAAE,CAAC;QAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,iBAAiB,EAAE,MAAM,CAAC;IAC1B,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;CACtC,CAAC;AAEF;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,cAAc,EAAE,SAAS,EAAE,EAAE,cAAc,2CAkChH"}
package/dist/components/sparkline/sparkline.component.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { useMemo } from "react";
3
- import { Area, AreaChart, CartesianGrid, ResponsiveContainer } from "recharts";
3
+ import { Area, AreaChart, CartesianGrid, ResponsiveContainer, YAxis } from "recharts";
4
4
  import { useTheme } from "styled-components";
5
5
  import { chartColors } from "../../style/theme";
6
6
  import { addMissingDataPoint } from "../linetemporalchart/ChartUtil";
@@ -8,7 +8,7 @@ import { addMissingDataPoint } from "../linetemporalchart/ChartUtil";
8
8
  * Sparkline is a simple dynamically sized area chart.
9
9
  * Used to show trends in data over time.
10
10
  */
11
- export function Sparkline({ serie, startingTimeStamp, sampleDuration, sampleInterval }) {
11
+ export function Sparkline({ serie, startingTimeStamp, sampleDuration, sampleInterval, yAxisType }) {
12
12
  var _a;
13
13
  const data = useMemo(() => {
14
14
  const dataMdp = addMissingDataPoint(serie.data, startingTimeStamp, sampleDuration, sampleInterval);
@@ -16,5 +16,5 @@ export function Sparkline({ serie, startingTimeStamp, sampleDuration, sampleInte
16
16
  }, [serie.data]);
17
17
  const color = (_a = serie.color) !== null && _a !== void 0 ? _a : chartColors.lineColor1;
18
18
  const strokeGridColor = useTheme().border;
19
- return (_jsx(ResponsiveContainer, { children: _jsxs(AreaChart, { data: data, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: `gradient-${color}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.7 }), _jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.1 })] }) }), _jsx(CartesianGrid, { horizontal: false, stroke: strokeGridColor, strokeOpacity: 0.5 }), _jsx(Area, { type: "linear", dataKey: "y", stroke: color, fill: `url(#gradient-${color})`, dot: false, activeDot: false, isAnimationActive: false })] }) }));
19
+ return (_jsx(ResponsiveContainer, { children: _jsxs(AreaChart, { data: data, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: `gradient-${color}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.7 }), _jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.1 })] }) }), _jsx(CartesianGrid, { horizontal: false, stroke: strokeGridColor, strokeOpacity: 0.5 }), _jsx(Area, { type: "linear", dataKey: "y", stroke: color, fill: `url(#gradient-${color})`, dot: false, activeDot: false, isAnimationActive: false }), yAxisType === 'percentage' && _jsx(YAxis, { domain: [0, 100], hide: true })] }) }));
20
20
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scality/core-ui",
3
- "version": "0.174.0",
3
+ "version": "0.175.0",
4
4
  "description": "Scality common React component library",
5
5
  "author": "Scality Engineering",
6
6
  "license": "SEE LICENSE IN LICENSE",
package/src/lib/components/barchartv2/Barchart.component.tsx CHANGED
@@ -158,7 +158,7 @@ export const CustomTick = ({
158
158
  return (
159
159
  <foreignObject
160
160
  x={centerX}
161
- y={y}
161
+ y={y - 8}
162
162
  width={tickWidth}
163
163
  color={theme.textSecondary}
164
164
  overflow="visible"
@@ -185,7 +185,7 @@ export const CustomTick = ({
185
185
  );
186
186
  };
187
187
 
188
- const StyledResponsiveContainer = styled(ResponsiveContainer)`
188
+ export const StyledResponsiveContainer = styled(ResponsiveContainer)`
189
189
  // Avoid tooltip over constrained text to be cut off
190
190
  & .recharts-surface {
191
191
  overflow: visible;
@@ -304,7 +304,7 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
304
304
  );
305
305
 
306
306
  return (
307
- <Stack direction="vertical" gap="r8">
307
+ <Stack direction="vertical">
308
308
  <ChartHeader
309
309
  title={title}
310
310
  secondaryTitle={secondaryTitle}
@@ -332,9 +332,13 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
332
332
  barCategoryGap={type.type === 'category' ? type.gap : undefined}
333
333
  >
334
334
  <CartesianGrid
335
- vertical={false}
336
- horizontal={false}
337
- fill={theme.backgroundLevel1}
335
+ vertical={true}
336
+ horizontal={true}
337
+ verticalPoints={[0]}
338
+ horizontalPoints={[0]}
339
+ stroke={theme.border}
340
+ fill={theme.backgroundLevel4}
341
+ strokeWidth={1}
338
342
  />
339
343
  {rechartsBars.map((bar) => {
340
344
  const { fill, dataKey, stackId } = bar;
@@ -354,29 +358,21 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
354
358
 
355
359
  <YAxis
356
360
  tickCount={1}
361
+ interval={0}
357
362
  unit={` ${unitLabel}`}
358
363
  domain={[0, roundReferenceValue]}
359
364
  tickFormatter={
360
365
  (value) =>
361
366
  new Intl.NumberFormat('fr-FR').format(value.toFixed(0)) // Add a space as thousand separator
362
367
  }
363
- axisLine={false}
368
+ axisLine={{ stroke: theme.border }}
364
369
  tick={{
365
370
  fill: theme.textSecondary,
366
371
  fontSize: fontSize.smaller,
367
372
  }}
368
- tickLine={false}
369
- label={{
370
- fill: theme.textSecondary,
371
- }}
372
373
  orientation="right"
373
374
  />
374
375
 
375
- <ReferenceLine
376
- y={roundReferenceValue}
377
- fill={theme.border}
378
- strokeWidth={0.5} // Reduce stroke width to make it less visible
379
- />
380
376
  <XAxis
381
377
  dataKey="category"
382
378
  tick={(props) => <CustomTick {...props} type={type} />}
@@ -384,10 +380,10 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
384
380
  interval={0}
385
381
  allowDataOverflow={true}
386
382
  tickLine={{
387
- stroke: theme.textSecondary,
383
+ stroke: theme.border,
388
384
  }}
389
385
  axisLine={{
390
- stroke: theme.textSecondary,
386
+ stroke: theme.border,
391
387
  }}
392
388
  />
393
389
 
package/src/lib/components/icon/Icon.component.tsx CHANGED
@@ -142,6 +142,7 @@ export const iconTable = {
142
142
  Mail: 'fas faEnvelope',
143
143
  ThumbsUp: 'far faThumbsUp',
144
144
  ThumbsDown: 'far faThumbsDown',
145
+ Sidebar: 'fas faColumns',
145
146
  };
146
147
 
147
148
  type IconProps = {
package/src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx CHANGED
@@ -3,7 +3,6 @@ import {
3
3
  Line,
4
4
  LineChart,
5
5
  ReferenceLine,
6
- ResponsiveContainer,
7
6
  Tooltip,
8
7
  TooltipContentProps,
9
8
  XAxis,
@@ -32,12 +31,12 @@ import {
32
31
  ChartTooltipItemsContainer,
33
32
  } from '../charttooltip/ChartTooltip';
34
33
  import { LegendShape } from '../chartlegend/ChartLegend';
34
+ import { StyledResponsiveContainer } from '../barchartv2/Barchart.component';
35
35
 
36
36
  const LineTemporalChartWrapper = styled.div`
37
37
  display: flex;
38
38
  flex-direction: column;
39
39
  justify-content: flex-start;
40
- flex: 1;
41
40
  `;
42
41
 
43
42
  const ChartHeader = styled.div`
@@ -467,7 +466,7 @@ export function LineTimeSerieChart({
467
466
  onFocusCapture={() => setIsChartActive(true)}
468
467
  onBlurCapture={() => setIsChartActive(false)}
469
468
  >
470
- <ResponsiveContainer width="100%" height={height}>
469
+ <StyledResponsiveContainer width="100%" height={height}>
471
470
  <LineChart
472
471
  data={rechartsData}
473
472
  ref={chartRef}
@@ -476,6 +475,7 @@ export function LineTimeSerieChart({
476
475
  syncId={syncId}
477
476
  onMouseEnter={() => setIsChartActive(true)}
478
477
  onMouseLeave={() => setIsChartActive(false)}
478
+ accessibilityLayer
479
479
  >
480
480
  <CartesianGrid
481
481
  vertical={true}
@@ -501,7 +501,6 @@ export function LineTimeSerieChart({
501
501
  />
502
502
  <YAxis
503
503
  orientation="right"
504
- allowDataOverflow={false}
505
504
  label={{
506
505
  value: yAxisTitle,
507
506
  angle: 90,
@@ -524,9 +523,11 @@ export function LineTimeSerieChart({
524
523
  fill: theme.textSecondary,
525
524
  fontSize: fontSize.smaller,
526
525
  }}
527
- tickFormatter={(value) => Math.round(value).toString()}
526
+ tickFormatter={(value) =>
527
+ new Intl.NumberFormat('fr-FR').format(value.toFixed(0))
528
+ }
528
529
  tickCount={5}
529
- interval={'preserveStartEnd'}
530
+ interval={0}
530
531
  />
531
532
  <Tooltip
532
533
  content={(props: TooltipContentProps<number, string>) => (
@@ -560,6 +561,7 @@ export function LineTimeSerieChart({
560
561
  stroke={colorMapping[resource]}
561
562
  dot={false}
562
563
  isAnimationActive={false}
564
+ strokeDasharray={serie.isLineDashed ? '4 4' : undefined}
563
565
  onMouseEnter={() => setHoveredValue(label)}
564
566
  onMouseLeave={() => setHoveredValue(undefined)}
565
567
  />
@@ -567,7 +569,7 @@ export function LineTimeSerieChart({
567
569
  }),
568
570
  )}
569
571
  </LineChart>
570
- </ResponsiveContainer>
572
+ </StyledResponsiveContainer>
571
573
  </div>
572
574
  </LineTemporalChartWrapper>
573
575
  );
package/src/lib/components/scrollbarwrapper/ScrollbarWrapper.component.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import styled, { createGlobalStyle, css } from 'styled-components';
1
+ import { createGlobalStyle, css } from 'styled-components';
2
2
 
3
3
  type Props = {
4
4
  children: React.ReactNode;
@@ -24,6 +24,7 @@ ${(props) => {
24
24
  width: 4px;
25
25
  height: 4px;
26
26
  min-height: 20px;
27
+ background: ${brand.border}; // fallback for gradient themes
27
28
  background: ${brand.buttonSecondary};
28
29
  border-radius: 4px;
29
30
  -webkit-border-radius: 4px;
@@ -46,6 +47,7 @@ ${(props) => {
46
47
  }
47
48
 
48
49
  // Firefox
50
+ scrollbar-color: ${brand.border} ${brand.backgroundLevel3}; // fallback for gradient themes
49
51
  scrollbar-color: ${brand.buttonSecondary} ${brand.backgroundLevel3};
50
52
  scrollbar-width: thin;
51
53
  }
package/src/lib/components/sparkline/sparkline.component.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { useMemo } from "react";
2
- import { Area, AreaChart, CartesianGrid, ResponsiveContainer } from "recharts";
2
+ import { Area, AreaChart, CartesianGrid, ResponsiveContainer, YAxis } from "recharts";
3
3
  import { useTheme } from "styled-components";
4
4
  import { chartColors } from "../../style/theme";
5
5
  import { addMissingDataPoint } from "../linetemporalchart/ChartUtil";
@@ -11,14 +11,15 @@ type SparklineProps = {
11
11
  },
12
12
  startingTimeStamp: number,
13
13
  sampleDuration: number,
14
- sampleInterval: number
14
+ sampleInterval: number,
15
+ yAxisType?: 'default' | 'percentage',
15
16
  };
16
17
 
17
18
  /**
18
19
  * Sparkline is a simple dynamically sized area chart.
19
20
  * Used to show trends in data over time.
20
21
  */
21
- export function Sparkline({ serie, startingTimeStamp, sampleDuration, sampleInterval }: SparklineProps) {
22
+ export function Sparkline({ serie, startingTimeStamp, sampleDuration, sampleInterval, yAxisType }: SparklineProps) {
22
23
  const data = useMemo(
23
24
  () => {
24
25
  const dataMdp = addMissingDataPoint(serie.data, startingTimeStamp, sampleDuration, sampleInterval);
@@ -48,6 +49,7 @@ export function Sparkline({ serie, startingTimeStamp, sampleDuration, sampleInte
48
49
  activeDot={false}
49
50
  isAnimationActive={false}
50
51
  />
52
+ {yAxisType === 'percentage' && <YAxis domain={[0, 100]} hide />}
51
53
  </AreaChart>
52
54
  </ResponsiveContainer>
53
55
  );
package/stories/sparkline.stories.tsx CHANGED
@@ -166,3 +166,22 @@ export const FlatWithMissingData: Story = {
166
166
  },
167
167
  },
168
168
  };
169
+
170
+ export const PercentageYAxis: Story = {
171
+ args: {
172
+ serie: {
173
+ data: trendingUpData,
174
+ },
175
+ startingTimeStamp: 1740405600,
176
+ sampleDuration: 7200,
177
+ sampleInterval: 720,
178
+ yAxisType: 'percentage',
179
+ },
180
+ parameters: {
181
+ docs: {
182
+ description: {
183
+ story: 'Sparkline with Y-axis range is set as [0-100].',
184
+ },
185
+ },
186
+ },
187
+ };