@scality/core-ui 0.187.0 → 0.188.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 (4) hide show
  1. package/dist/components/charts/common/SharedComponents.d.ts.map +1 -1
  2. package/dist/components/charts/common/SharedComponents.js +19 -9
  3. package/package.json +1 -1
  4. package/src/lib/components/charts/common/SharedComponents.tsx +40 -27
package/dist/components/charts/common/SharedComponents.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SharedComponents.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/charts/common/SharedComponents.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,0OAMrC,CAAC;AAEF,UAAU,wBAAwB;IAChC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,eAAgB,wBAAwB,4CAa9D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,eAAgB,wBAAwB,4CAahE,CAAC;AAEF,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,wDAKrB,gBAAgB,4CA2BlB,CAAC;AAEF,UAAU,eAAe;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,iBAAiB,EAAE,MAAM,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,QAAQ,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU,wEAQpB,eAAe,4CA6CjB,CAAC"}
1
+ {"version":3,"file":"SharedComponents.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/charts/common/SharedComponents.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,0OAMrC,CAAC;AAUF,UAAU,wBAAwB;IAChC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,eAAgB,wBAAwB,4CAa9D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,eAAgB,wBAAwB,4CAahE,CAAC;AAEF,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,wDAKrB,gBAAgB,4CA2BlB,CAAC;AAEF,UAAU,eAAe;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,iBAAiB,EAAE,MAAM,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,QAAQ,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU,wEAQpB,eAAe,4CAkDjB,CAAC"}
package/dist/components/charts/common/SharedComponents.js CHANGED
@@ -3,11 +3,11 @@ import { ResponsiveContainer } from 'recharts';
3
3
  import styled, { useTheme } from 'styled-components';
4
4
  import { spacing, Stack, Wrap } from '../../../spacing';
5
5
  import { Box } from '../../box/Box';
6
- import { ConstrainedText } from '../../constrainedtext/Constrainedtext.component';
7
- import { FormattedDateTime } from '../../date/FormattedDateTime';
8
6
  import { IconHelp } from '../../iconhelper/IconHelper';
9
7
  import { Loader } from '../../loader/Loader.component';
10
8
  import { Text } from '../../text/Text.component';
9
+ import { ConstrainedText } from '../../constrainedtext/Constrainedtext.component';
10
+ import { FormattedDateTime } from '../../date/FormattedDateTime';
11
11
  import { formatXAxisDate, maxWidthTooltip } from './chartUtils';
12
12
  /**
13
13
  * Styled ResponsiveContainer for charts
@@ -21,6 +21,13 @@ export const StyledResponsiveContainer = styled(ResponsiveContainer) `
21
21
  overflow: visible;
22
22
  }
23
23
  `;
24
+ const TickContainer = styled.div `
25
+ width: 100%;
26
+ height: 100%;
27
+ display: flex;
28
+ align-items: center;
29
+ justify-content: center;
30
+ `;
24
31
  /**
25
32
  * Error state component for charts
26
33
  */
@@ -63,11 +70,14 @@ export const CustomTick = ({ x, y, payload, visibleTicksCount, width, type, tick
63
70
  type.timeRange.startDate.getTime()) /
64
71
  1000
65
72
  : 0;
66
- return (_jsx("foreignObject", { x: centerX, y: y - 10, width: tickWidth, color: theme.textSecondary, overflow: "visible", children: _jsx(ConstrainedText, { color: "textSecondary", text: _jsx(Text, { variant: "Smaller", children: type.type === 'time' ? (_jsx(FormattedDateTime, { format: formatXAxisDate(duration), value: new Date(payload.value) })) : (String(payload.value)) }), centered: true, tooltipStyle: {
67
- backgroundColor: theme.backgroundLevel1,
68
- padding: spacing.r10,
69
- borderRadius: spacing.r8,
70
- border: `1px solid ${theme.border}`,
71
- position: 'absolute',
72
- } }) }));
73
+ return (_jsx("foreignObject", { x: centerX, y: y - 10, width: tickWidth, height: 30, style: {
74
+ overflow: 'visible',
75
+ pointerEvents: 'none',
76
+ }, children: _jsx(TickContainer, { children: _jsx(ConstrainedText, { color: "textSecondary", text: _jsx(Text, { variant: "Smaller", children: type.type === 'time' ? (_jsx(FormattedDateTime, { format: formatXAxisDate(duration), value: new Date(payload.value) })) : (String(payload.value)) }), centered: true, tooltipStyle: {
77
+ backgroundColor: theme.backgroundLevel1,
78
+ padding: spacing.r10,
79
+ borderRadius: spacing.r8,
80
+ border: `1px solid ${theme.border}`,
81
+ position: 'absolute',
82
+ } }) }) }));
73
83
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scality/core-ui",
3
- "version": "0.187.0",
3
+ "version": "0.188.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/charts/common/SharedComponents.tsx CHANGED
@@ -2,11 +2,11 @@ import { ResponsiveContainer } from 'recharts';
2
2
  import styled, { useTheme } from 'styled-components';
3
3
  import { spacing, Stack, Wrap } from '../../../spacing';
4
4
  import { Box } from '../../box/Box';
5
- import { ConstrainedText } from '../../constrainedtext/Constrainedtext.component';
6
- import { FormattedDateTime } from '../../date/FormattedDateTime';
7
5
  import { IconHelp } from '../../iconhelper/IconHelper';
8
6
  import { Loader } from '../../loader/Loader.component';
9
7
  import { Text } from '../../text/Text.component';
8
+ import { ConstrainedText } from '../../constrainedtext/Constrainedtext.component';
9
+ import { FormattedDateTime } from '../../date/FormattedDateTime';
10
10
  import { formatXAxisDate, maxWidthTooltip } from './chartUtils';
11
11
  import { TimeType } from '../types';
12
12
 
@@ -23,6 +23,14 @@ export const StyledResponsiveContainer = styled(ResponsiveContainer)`
23
23
  }
24
24
  `;
25
25
 
26
+ const TickContainer = styled.div`
27
+ width: 100%;
28
+ height: 100%;
29
+ display: flex;
30
+ align-items: center;
31
+ justify-content: center;
32
+ `;
33
+
26
34
  interface ChartLoadingOrErrorProps {
27
35
  height: number;
28
36
  }
@@ -149,32 +157,37 @@ export const CustomTick = ({
149
157
  x={centerX}
150
158
  y={y - 10}
151
159
  width={tickWidth}
152
- color={theme.textSecondary}
153
- overflow="visible"
160
+ height={30}
161
+ style={{
162
+ overflow: 'visible',
163
+ pointerEvents: 'none',
164
+ }}
154
165
  >
155
- <ConstrainedText
156
- color="textSecondary"
157
- text={
158
- <Text variant="Smaller">
159
- {type.type === 'time' ? (
160
- <FormattedDateTime
161
- format={formatXAxisDate(duration)}
162
- value={new Date(payload.value)}
163
- />
164
- ) : (
165
- String(payload.value)
166
- )}
167
- </Text>
168
- }
169
- centered
170
- tooltipStyle={{
171
- backgroundColor: theme.backgroundLevel1,
172
- padding: spacing.r10,
173
- borderRadius: spacing.r8,
174
- border: `1px solid ${theme.border}`,
175
- position: 'absolute',
176
- }}
177
- />
166
+ <TickContainer>
167
+ <ConstrainedText
168
+ color="textSecondary"
169
+ text={
170
+ <Text variant="Smaller">
171
+ {type.type === 'time' ? (
172
+ <FormattedDateTime
173
+ format={formatXAxisDate(duration)}
174
+ value={new Date(payload.value)}
175
+ />
176
+ ) : (
177
+ String(payload.value)
178
+ )}
179
+ </Text>
180
+ }
181
+ centered
182
+ tooltipStyle={{
183
+ backgroundColor: theme.backgroundLevel1,
184
+ padding: spacing.r10,
185
+ borderRadius: spacing.r8,
186
+ border: `1px solid ${theme.border}`,
187
+ position: 'absolute',
188
+ }}
189
+ />
190
+ </TickContainer>
178
191
  </foreignObject>
179
192
  );
180
193
  };