pixel-react 1.6.0 → 1.6.2

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 (112) hide show
  1. package/lib/components/AppHeader/AppHeader.d.ts +1 -0
  2. package/lib/components/AppHeader/types.d.ts +18 -6
  3. package/lib/components/Charts/BarChart/BarChart.d.ts +1 -0
  4. package/lib/components/Charts/DashboardDonutChart/types.d.ts +2 -0
  5. package/lib/components/Excel/ExcelToolBar/ExcelToolBar.d.ts +0 -1
  6. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -2
  7. package/lib/components/MachineInputField/types.d.ts +1 -1
  8. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -1
  9. package/lib/components/PopUpModal/PopUpModal.d.ts +5 -0
  10. package/lib/components/PopUpModal/types.d.ts +14 -0
  11. package/lib/components/RadioGroup/radioGroupTypes.d.ts +20 -0
  12. package/lib/components/Select/Select.stories.d.ts +0 -1
  13. package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.d.ts +2 -1
  14. package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
  15. package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +3 -2
  16. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
  17. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +3 -2
  18. package/lib/components/SequentialConnectingBranch/types.d.ts +11 -3
  19. package/lib/components/TableTree/data.d.ts +36 -2
  20. package/lib/components/TableTree/types.d.ts +3 -4
  21. package/lib/index.d.ts +56 -17
  22. package/lib/index.esm.js +917 -552
  23. package/lib/index.esm.js.map +1 -1
  24. package/lib/index.js +917 -551
  25. package/lib/index.js.map +1 -1
  26. package/lib/tsconfig.tsbuildinfo +1 -1
  27. package/package.json +1 -1
  28. package/src/assets/Themes/BaseTheme.scss +5 -14
  29. package/src/assets/Themes/DarkTheme.scss +5 -2
  30. package/src/assets/icons/approval_pending.svg +8 -8
  31. package/src/assets/icons/arrow_up.svg +1 -1
  32. package/src/assets/icons/configuration.svg +3 -3
  33. package/src/assets/icons/defects.svg +8 -8
  34. package/src/assets/icons/element.svg +4 -4
  35. package/src/assets/icons/project_element.svg +4 -4
  36. package/src/assets/icons/step_group.svg +10 -10
  37. package/src/assets/icons/variable.svg +3 -3
  38. package/src/assets/icons/web_service_icon.svg +3 -3
  39. package/src/assets/styles/_fonts.scss +4 -2
  40. package/src/components/AppHeader/AppHeader.stories.tsx +242 -39
  41. package/src/components/AppHeader/AppHeader.tsx +158 -139
  42. package/src/components/AppHeader/types.ts +19 -6
  43. package/src/components/Charts/BarChart/BarChart.scss +34 -34
  44. package/src/components/Charts/BarChart/BarChart.stories.tsx +3 -2
  45. package/src/components/Charts/BarChart/BarChart.tsx +79 -55
  46. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +25 -18
  47. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +31 -11
  48. package/src/components/Charts/DashboardDonutChart/types.ts +2 -0
  49. package/src/components/Charts/IconRadialChart/IconRadialChart.tsx +3 -0
  50. package/src/components/Charts/LineChart/LineChart.scss +13 -4
  51. package/src/components/Charts/LineChart/LineChart.stories.tsx +100 -102
  52. package/src/components/Charts/LineChart/LineChart.tsx +143 -131
  53. package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +23 -2
  54. package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +109 -24
  55. package/src/components/Charts/PieChart/PieChart.scss +5 -3
  56. package/src/components/Charts/PieChart/PieChart.tsx +1 -2
  57. package/src/components/DatePicker/DatePicker.scss +15 -1
  58. package/src/components/Excel/ExcelFile/ExcelFile.scss +1 -1
  59. package/src/components/Excel/ExcelFile/ExcelFile.tsx +34 -20
  60. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +0 -1
  61. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +44 -15
  62. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +47 -4
  63. package/src/components/Icon/Icons.scss +1 -1
  64. package/src/components/MachineInputField/MachineInputField.scss +15 -2
  65. package/src/components/MachineInputField/MachineInputField.tsx +17 -3
  66. package/src/components/MachineInputField/types.ts +1 -1
  67. package/src/components/PopUpModal/PopUpModal.scss +36 -0
  68. package/src/components/PopUpModal/PopUpModal.stories.tsx +61 -0
  69. package/src/components/PopUpModal/PopUpModal.tsx +85 -0
  70. package/src/components/PopUpModal/types.ts +14 -0
  71. package/src/components/RadioGroup/RadioGroup.scss +7 -0
  72. package/src/components/RadioGroup/RadioGroup.stories.tsx +26 -0
  73. package/src/components/RadioGroup/RadioGroup.tsx +16 -0
  74. package/src/components/RadioGroup/radioGroupTypes.tsx +24 -0
  75. package/src/components/Select/Select.tsx +2 -3
  76. package/src/components/Select/components/Dropdown.tsx +34 -34
  77. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.scss +9 -0
  78. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +74 -43
  79. package/src/components/SequentialConnectingBranch/components/Branches/Branches.scss +9 -3
  80. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +45 -14
  81. package/src/components/SequentialConnectingBranch/components/Branches/types.ts +9 -2
  82. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +3 -1
  83. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +9 -2
  84. package/src/components/SequentialConnectingBranch/types.ts +18 -3
  85. package/src/components/TableTree/TableTree.stories.tsx +145 -98
  86. package/src/components/TableTree/TableTree.tsx +49 -14
  87. package/src/components/TableTree/data.ts +32 -391
  88. package/src/components/TableTree/types.ts +3 -4
  89. package/src/index.ts +3 -0
  90. package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
  91. package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
  92. package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
  93. package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
  94. package/lib/components/AddButton/AddButton.d.ts +0 -5
  95. package/lib/components/AddButton/AddButton.stories.d.ts +0 -6
  96. package/lib/components/AddButton/index.d.ts +0 -1
  97. package/lib/components/AddButton/types.d.ts +0 -4
  98. package/lib/components/AttachImage/AttachImage.stories.d.ts +0 -7
  99. package/lib/components/Charts/BarChart/BarChart.stories.d.ts +0 -6
  100. package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +0 -8
  101. package/lib/components/Charts/LineChart/LineChart.stories.d.ts +0 -7
  102. package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +0 -8
  103. package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +0 -6
  104. package/lib/components/EditTextField/EditTextField.stories.d.ts +0 -10
  105. package/lib/components/Editor/Editor.stories.d.ts +0 -6
  106. package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +0 -4
  107. package/lib/components/Excel/ExcelFile.stories.d.ts +0 -6
  108. package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +0 -14
  109. package/lib/components/ExcelFile/ImportExcelStyles.d.ts +0 -24
  110. package/lib/components/StatusCard/StatusCard.stories.d.ts +0 -11
  111. package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +0 -10
  112. /package/lib/components/ExcelFile/{ColorBarSelector → ColorBarselector}/ColorBarSelector.d.ts +0 -0
@@ -38,7 +38,7 @@ export const DefaultLineChart: StoryObj<LineChartProps> = {
38
38
  },
39
39
  {
40
40
  date: '29 Oct',
41
- totalMemory: 100,
41
+ totalMemory: 800,
42
42
  },
43
43
  {
44
44
  date: '30 Oct',
@@ -47,14 +47,11 @@ export const DefaultLineChart: StoryObj<LineChartProps> = {
47
47
  {
48
48
  date: '31 Oct',
49
49
  totalMemory: 10.1,
50
- }, {
51
- date: '1 nov',
52
- totalMemory: 10.1,
53
50
  },
54
51
  ],
55
52
  },
56
53
  ],
57
- width: 604,
54
+ width: 1010,
58
55
  height: 232,
59
56
  axisColor: '#000000',
60
57
  lineChartWidth: 3,
@@ -62,7 +59,7 @@ export const DefaultLineChart: StoryObj<LineChartProps> = {
62
59
  yAxisValueColor: '#252C37',
63
60
  xAxisColor: '#D9D9D9',
64
61
  yAxisColor: '#252C37',
65
- numberSize:"10px"
62
+ numberSize: '10px',
66
63
  },
67
64
  render: (args) => (
68
65
  <div className="linechart-container">
@@ -110,7 +107,7 @@ export const multiLineScriptsChart: StoryObj<LineChartProps> = {
110
107
  { date: '1 oct', value: 10 },
111
108
  { date: '2 oct', value: 20 },
112
109
  { date: '3 oct', value: 99 },
113
- { date: '4 oct', value: 20},
110
+ { date: '4 oct', value: 20 },
114
111
  { date: '5 oct', value: 10 },
115
112
  { date: '6 oct', value: 10 },
116
113
  { date: '7 oct', value: 10 },
@@ -145,17 +142,18 @@ export const multiLineScriptsChart: StoryObj<LineChartProps> = {
145
142
  ],
146
143
  },
147
144
  ],
148
- width: 441,
145
+ width: 700,
149
146
  height: 232,
150
147
  axisColor: '#000000',
151
148
  lineChartWidth: 2,
152
- yAxisLabel: 'Number Of Defects',
149
+ yAxisLabel: 'Number Of Scripts',
153
150
  xAxisLabel: 'Number Of Days',
154
151
  yAxisValueColor: '#252C37',
155
152
  xAxisColor: '#D9D9D9',
156
153
  yAxisColor: '#252C37',
157
154
  yAxisLabelColor: '#252C37',
158
- textSize:"12px", },
155
+ textSize: '12px',
156
+ },
159
157
  render: (args) => (
160
158
  <div className="linechart-container">
161
159
  <LineChart {...args} />
@@ -163,95 +161,95 @@ export const multiLineScriptsChart: StoryObj<LineChartProps> = {
163
161
  ),
164
162
  };
165
163
  export const multiLineDefectsChart: StoryObj<LineChartProps> = {
166
- args: {
167
- data: [
168
- {
169
- color: '#179C5F',
170
- name: 'Success',
171
- show: true,
172
- data: [
173
- { date: '1 oct', value: 20 },
174
- { date: '2 oct', value: 10 },
175
- { date: '3 oct', value: 30 },
176
- { date: '4 oct', value: 60 },
177
- { date: '5 oct', value: 90 },
178
- { date: '6 oct', value: 10 },
179
- { date: '7 oct', value: 12 },
180
- ],
181
- },
182
- {
183
- color: '#9C1732',
184
- name: 'Failed',
185
- show: true,
186
- data: [
187
- { date: '1 oct', value: 50 },
188
- { date: '2 oct', value: 30 },
189
- { date: '3 oct', value: 40 },
190
- { date: '4 oct', value: 20 },
191
- { date: '5 oct', value: 90 },
192
- { date: '6 oct', value: 70 },
193
- { date: '7 oct', value: 30 },
194
- ],
195
- },
196
- {
197
- color: '#E2750F',
198
- name: 'Warning',
199
- show: true,
200
- data: [
201
- { date: '1 oct', value: 10 },
202
- { date: '2 oct', value: 20 },
203
- { date: '3 oct', value: 90 },
204
- { date: '4 oct', value: 20 },
205
- { date: '5 oct', value: 10 },
206
- { date: '6 oct', value: 10 },
207
- { date: '7 oct', value: 10 },
208
- ],
209
- },
210
- {
211
- color: '#A83FC4',
212
- name: 'Skipped',
213
- show: true,
214
- data: [
215
- { date: '1 oct', value: 40 },
216
- { date: '2 oct', value: 20 },
217
- { date: '3 oct', value: 10 },
218
- { date: '4 oct', value: 20 },
219
- { date: '5 oct', value: 10 },
220
- { date: '6 oct', value: 30 },
221
- { date: '7 oct', value: 10 },
222
- ],
223
- },
224
- {
225
- color: '#3F5AC4',
226
- name: 'Flaky',
227
- show: true,
228
- data: [
229
- { date: '1 oct', value: 20 },
230
- { date: '2 oct', value: 40 },
231
- { date: '3 oct', value: 30 },
232
- { date: '4 oct', value: 20 },
233
- { date: '5 oct', value: 10 },
234
- { date: '6 oct', value: 40 },
235
- { date: '7 oct', value: 20 },
236
- ],
237
- },
238
- ],
239
- width: 700,
240
- height: 232,
241
- axisColor: '#000000',
242
- lineChartWidth: 2,
243
- yAxisLabel: 'Number Of script',
244
- xAxisLabel: 'Number Of Days',
245
- yAxisValueColor: '#252C37',
246
- xAxisColor: '#D9D9D9',
247
- yAxisColor: '#252C37',
248
- yAxisLabelColor: '#252C37',
249
- textSize:"12px",
250
- fontWeight:"semi-bold"
251
- },
252
- render: (args) => (
253
- <div className="linechart-container">
254
- <LineChart {...args} />
255
- </div>
256
- ),
257
- };
164
+ args: {
165
+ data: [
166
+ {
167
+ color: '#179C5F',
168
+ name: 'Success',
169
+ show: true,
170
+ data: [
171
+ { date: '1 oct', value: 20 },
172
+ { date: '2 oct', value: 10 },
173
+ { date: '3 oct', value: 30 },
174
+ { date: '4 oct', value: 60 },
175
+ { date: '5 oct', value: 90 },
176
+ { date: '6 oct', value: 10 },
177
+ { date: '7 oct', value: 12 },
178
+ ],
179
+ },
180
+ {
181
+ color: '#9C1732',
182
+ name: 'Failed',
183
+ show: true,
184
+ data: [
185
+ { date: '1 oct', value: 50 },
186
+ { date: '2 oct', value: 30 },
187
+ { date: '3 oct', value: 40 },
188
+ { date: '4 oct', value: 20 },
189
+ { date: '5 oct', value: 90 },
190
+ { date: '6 oct', value: 70 },
191
+ { date: '7 oct', value: 30 },
192
+ ],
193
+ },
194
+ {
195
+ color: '#E2750F',
196
+ name: 'Warning',
197
+ show: true,
198
+ data: [
199
+ { date: '1 oct', value: 10 },
200
+ { date: '2 oct', value: 20 },
201
+ { date: '3 oct', value: 90 },
202
+ { date: '4 oct', value: 20 },
203
+ { date: '5 oct', value: 10 },
204
+ { date: '6 oct', value: 10 },
205
+ { date: '7 oct', value: 10 },
206
+ ],
207
+ },
208
+ {
209
+ color: '#A83FC4',
210
+ name: 'Skipped',
211
+ show: true,
212
+ data: [
213
+ { date: '1 oct', value: 40 },
214
+ { date: '2 oct', value: 20 },
215
+ { date: '3 oct', value: 10 },
216
+ { date: '4 oct', value: 20 },
217
+ { date: '5 oct', value: 10 },
218
+ { date: '6 oct', value: 30 },
219
+ { date: '7 oct', value: 10 },
220
+ ],
221
+ },
222
+ {
223
+ color: '#3F5AC4',
224
+ name: 'Flaky',
225
+ show: true,
226
+ data: [
227
+ { date: '1 oct', value: 20 },
228
+ { date: '2 oct', value: 40 },
229
+ { date: '3 oct', value: 30 },
230
+ { date: '4 oct', value: 20 },
231
+ { date: '5 oct', value: 10 },
232
+ { date: '6 oct', value: 40 },
233
+ { date: '7 oct', value: 20 },
234
+ ],
235
+ },
236
+ ],
237
+ width: 700,
238
+ height: 232,
239
+ axisColor: '#000000',
240
+ lineChartWidth: 2,
241
+ yAxisLabel: 'Number Of Defects',
242
+ xAxisLabel: 'Number Of Days',
243
+ yAxisValueColor: '#252C37',
244
+ xAxisColor: '#D9D9D9',
245
+ yAxisColor: '#252C37',
246
+ yAxisLabelColor: '#252C37',
247
+ textSize: '12px',
248
+ fontWeight: 'semi-bold',
249
+ },
250
+ render: (args) => (
251
+ <div className="linechart-container">
252
+ <LineChart {...args} />
253
+ </div>
254
+ ),
255
+ };
@@ -33,8 +33,8 @@ const LineChart: React.FC<LineChartProps> = ({
33
33
  const isDefaultLineChart =
34
34
  data[0]?.data[0]?.hasOwnProperty('date') &&
35
35
  data[0]?.data[0]?.hasOwnProperty('totalMemory');
36
- const xKey = isDefaultLineChart ? 'date' : 'date';
37
- const yKey = isDefaultLineChart ? 'totalMemory' : 'value';
36
+ const xKey = isDefaultLineChart ? 'date' : 'date';
37
+ const yKey = isDefaultLineChart ? 'totalMemory' : 'value';
38
38
  const xScale = (x: string) => {
39
39
  const date = new Date(x);
40
40
  const time = date.getTime();
@@ -130,139 +130,151 @@ const LineChart: React.FC<LineChartProps> = ({
130
130
  const xTickInterval = Math.floor(data[0].data.length / 4);
131
131
 
132
132
  return (
133
- <div className="ff-line-chart-text">
134
- <Typography className="ff-line-chart-text1" fontSize={textSize} fontWeight="semi-bold">{yAxisLabel}</Typography>
135
- <svg
136
- width={width}
137
- height={height}
138
- onMouseMove={handleMouseMove}
139
- onMouseLeave={handleMouseLeave}
140
- >
141
- <g transform={`translate(${margin}, ${margin})`}>
142
- <line x1={0} y1={0} x2={0} y2={yMax} strokeWidth={2} />
143
- <line
144
- x1={0}
145
- y1={yMax}
146
- x2={xMax}
147
- y2={yMax}
148
- stroke={xAxisColor}
149
- strokeWidth={1}
150
- />
133
+ <div className="ff-line-chart-text" style={{ width: width }}>
134
+ <div>
135
+ {' '}
136
+ <Typography
137
+ className="ff-line-chart-yAxisLabel"
138
+ fontSize={textSize}
139
+ fontWeight="semi-bold"
140
+ >
141
+ {yAxisLabel}
142
+ </Typography>
143
+ </div>
144
+ <div className="ff-line-chart-svg">
145
+ {' '}
146
+ <svg
147
+ height={height}
148
+ onMouseMove={handleMouseMove}
149
+ onMouseLeave={handleMouseLeave}
150
+ className="ff-line-chart-svg"
151
+ >
152
+ <g transform={`translate(${margin}, ${margin})`}>
153
+ <line x1={0} y1={0} x2={0} y2={yMax} strokeWidth={2} />
154
+ <line
155
+ x1={0}
156
+ y1={yMax}
157
+ x2={xMax}
158
+ y2={yMax}
159
+ stroke={xAxisColor}
160
+ strokeWidth={1}
161
+ />
151
162
 
152
- <text
153
- x={xMax / 2.1}
154
- y={yMax + margin / 1.2}
155
- textAnchor="middle"
156
- fill={yAxisLabelColor}
157
- className="ff-line-chart-x-axis-label"
158
- style={{fontSize:textSize , fontWeight:fontWeight}}
159
- >
160
- {xAxisLabel}
161
- </text>
163
+ <text
164
+ x={xMax / 2.1}
165
+ y={yMax + margin / 1.2}
166
+ textAnchor="middle"
167
+ fill={yAxisLabelColor}
168
+ className="ff-line-chart-x-axis-label"
169
+ style={{ fontSize: textSize, fontWeight: fontWeight }}
170
+ >
171
+ {xAxisLabel}
172
+ </text>
162
173
 
163
- {data.map((line, index) =>
164
- line.show !== false ? (
165
- <g key={index}>
166
- <path
167
- d={generateLinePath(line.data)}
168
- fill="none"
169
- stroke={line.color}
170
- strokeWidth={lineChartWidth}
171
- />
172
- {hoverState.dotPositions[index] && (
173
- <>
174
- <line
175
- x1={hoverState.dotPositions[index]!.x}
176
- y1={0}
177
- x2={hoverState.dotPositions[index]!.x}
178
- y2={yMax}
179
- stroke="gray"
180
- strokeWidth={0.5}
181
- strokeDasharray="4"
182
- />
183
- <circle
184
- cx={hoverState.dotPositions[index]!.x}
185
- cy={hoverState.dotPositions[index]!.y}
186
- r={5}
187
- fill="white"
188
- stroke={line.color}
189
- strokeWidth={lineChartWidth}
190
- style={{ transition: 'cx 0.1s, cy 0.1s' }}
191
- />
192
- <line
193
- x1={0}
194
- y1={hoverState.dotPositions[index]!.y}
195
- x2={xMax}
196
- y2={hoverState.dotPositions[index]!.y}
197
- stroke="gray"
198
- strokeWidth={0.5}
199
- strokeDasharray="4"
200
- />
201
- </>
202
- )}
203
- </g>
204
- ) : null
205
- )}
206
- {data[0].data
207
- .filter((_: any, index: number) => index % xTickInterval === 0)
208
- .map((point: { [key: string]: any }) => (
209
- <text
210
- key={String(point[xKey])}
211
- x={xScale(point[xKey])}
212
- y={yMax + 15}
213
- textAnchor="middle"
214
- fill={yAxisColor}
215
- className="ff--line-chart-x-line-data"
216
- style={{ fontSize:numberSize}}
217
- >
218
- {point[xKey] != null ? String(point[xKey]) : ''}
219
- </text>
220
- ))}
174
+ {data.map((line, index) =>
175
+ line.show !== false ? (
176
+ <g key={index}>
177
+ <path
178
+ d={generateLinePath(line.data)}
179
+ fill="none"
180
+ stroke={line.color}
181
+ strokeWidth={lineChartWidth}
182
+ />
183
+ {hoverState.dotPositions[index] && (
184
+ <>
185
+ <line
186
+ x1={hoverState.dotPositions[index]!.x}
187
+ y1={0}
188
+ x2={hoverState.dotPositions[index]!.x}
189
+ y2={yMax}
190
+ stroke="gray"
191
+ strokeWidth={0.5}
192
+ strokeDasharray="4"
193
+ />
194
+ <circle
195
+ cx={hoverState.dotPositions[index]!.x}
196
+ cy={hoverState.dotPositions[index]!.y}
197
+ r={5}
198
+ fill="white"
199
+ stroke={line.color}
200
+ strokeWidth={lineChartWidth}
201
+ style={{ transition: 'cx 0.1s, cy 0.1s' }}
202
+ />
203
+ <line
204
+ x1={0}
205
+ y1={hoverState.dotPositions[index]!.y}
206
+ x2={xMax}
207
+ y2={hoverState.dotPositions[index]!.y}
208
+ stroke="gray"
209
+ strokeWidth={0.5}
210
+ strokeDasharray="4"
211
+ />
212
+ </>
213
+ )}
214
+ </g>
215
+ ) : null
216
+ )}
217
+ {data[0].data
218
+ .filter((_: any, index: number) => index % xTickInterval === 0)
219
+ .map((point: { [key: string]: any }) => (
220
+ <text
221
+ key={String(point[xKey])}
222
+ x={xScale(point[xKey])}
223
+ y={yMax + 15}
224
+ textAnchor="middle"
225
+ fill={yAxisColor}
226
+ className="ff--line-chart-x-line-data"
227
+ style={{ fontSize: numberSize }}
228
+ >
229
+ {point[xKey] != null ? String(point[xKey]) : ''}
230
+ </text>
231
+ ))}
221
232
 
222
- {Array.from({ length: 6 }).map((_, i) => {
223
- const yValueInGB = i * 0.2;
224
- return (
225
- <text
226
- key={yValueInGB}
227
- x={-15}
228
- y={yScale(yValueInGB * 1024)}
229
- textAnchor="middle"
230
- fill={yAxisValueColor}
231
- className="ff-line-chart-y-axis-text"
232
- style={{ fontSize:numberSize}}
233
- >
234
- {yValueInGB.toFixed(1)}
235
- </text>
236
- );
237
- })}
238
- </g>
239
- </svg>
240
- {hoverState.tooltip.visible && (
241
- <div
242
- className="ff-line-chart-tooltip"
243
- style={{
244
- left: hoverState.tooltip.left,
245
- top: hoverState.tooltip.top,
246
- }}
247
- >
248
- <div className="ff-line-chart-date">{hoverState.currentXValue}</div>
233
+ {Array.from({ length: 6 }).map((_, i) => {
234
+ const yValueInGB = i * 0.2;
235
+ return (
236
+ <text
237
+ key={yValueInGB}
238
+ x={-15}
239
+ y={yScale(yValueInGB * 1024)}
240
+ textAnchor="middle"
241
+ fill={yAxisValueColor}
242
+ className="ff-line-chart-y-axis-text"
243
+ style={{ fontSize: numberSize }}
244
+ >
245
+ {yValueInGB.toFixed(1)}
246
+ </text>
247
+ );
248
+ })}
249
+ </g>
250
+ </svg>
251
+ {hoverState.tooltip.visible && (
252
+ <div
253
+ className="ff-line-chart-tooltip"
254
+ style={{
255
+ left: hoverState.tooltip.left,
256
+ top: hoverState.tooltip.top,
257
+ }}
258
+ >
259
+ <div className="ff-line-chart-date">{hoverState.currentXValue}</div>
249
260
 
250
- {Object.entries(hoverState.hoverValues).map(
251
- ([index, value]) =>
252
- data[Number(index)]?.show !== false && (
253
- <div key={index} className="ff-line-chart-inner-tooltip">
254
- {data[Number(index)]?.name !== 'default' && (
255
- <div
256
- className="ff-line-chart-status-dot"
257
- style={{ backgroundColor: data[Number(index)]?.color }}
258
- />
259
- )}
260
- {data[Number(index)]?.name}: {value}
261
- </div>
262
- )
263
- )}
264
- </div>
265
- )}
261
+ {Object.entries(hoverState.hoverValues).map(
262
+ ([index, value]) =>
263
+ data[Number(index)]?.show !== false && (
264
+ <div key={index} className="ff-line-chart-inner-tooltip">
265
+ {data[Number(index)]?.name !== 'default' && (
266
+ <div
267
+ className="ff-line-chart-status-dot"
268
+ style={{ backgroundColor: data[Number(index)]?.color }}
269
+ />
270
+ )}
271
+ {data[Number(index)]?.name}: {value}
272
+ </div>
273
+ )
274
+ )}
275
+ </div>
276
+ )}
277
+ </div>
266
278
  </div>
267
279
  );
268
280
  };
@@ -13,11 +13,31 @@
13
13
  flex-direction: row;
14
14
  }
15
15
 
16
+ .ff-center-first-text {
17
+ @extend .font-size-20;
18
+ color: var(--text-color);
19
+ font-weight: 600;
20
+ }
16
21
  .ff-center-text {
17
22
  @extend .fontSm;
18
- color: var(--drawer-title-color);
23
+ color: var(--text-color);
24
+ font-weight: 400;
25
+ }
26
+ .ff-center-text-tooltip {
27
+ @extend .fontSm;
19
28
  font-weight: 600;
20
29
  }
30
+ .ff-multi-radial-tooltip {
31
+ position: absolute;
32
+ @extend .fontSm;
33
+ font-weight: 400;
34
+ background-color: var(--tooltip-bg-color);
35
+ color: var(--primary-icon-color);
36
+ padding: 5px 10px;
37
+ border-radius: 4px;
38
+ pointer-events: none;
39
+ z-index: 1000;
40
+ }
21
41
  .ff-legend-container {
22
42
  display: grid;
23
43
  gap: 10px;
@@ -47,7 +67,7 @@
47
67
 
48
68
  .ff-legend-capsule {
49
69
  background-color: var(--status-success-text-color);
50
- color: var(--tooltip-text-color);
70
+ color: var(--text-color);
51
71
  border-radius: 15px;
52
72
  min-width: 25px;
53
73
  height: 18px;
@@ -58,6 +78,7 @@
58
78
 
59
79
  .ff-legend-key {
60
80
  margin-left: 8px;
81
+ color: var(--text-color);
61
82
  }
62
83
  }
63
84
  }