pixel-react 1.5.5 → 1.5.7
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/.storybook/main.ts +7 -1
- package/lib/components/Charts/LineChart/types.d.ts +3 -0
- package/lib/components/DatePicker/types.d.ts +4 -0
- package/lib/components/Excel/ExcelContextMenu/ExcelContextMenu.d.ts +1 -7
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/DataViewer.d.ts +1 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.d.ts +1 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +1 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +5 -0
- package/lib/components/FileDropzone/types.d.ts +3 -0
- package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -2
- package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -1
- package/lib/components/Select/Select.stories.d.ts +0 -1
- package/lib/components/StateDropdown/StateDropdown.d.ts +1 -1
- package/lib/components/StateDropdown/StateDropdownTypes.d.ts +3 -0
- package/lib/index.d.ts +52 -2
- package/lib/index.esm.js +950 -581
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +950 -580
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
- package/src/assets/icons/approval_pending.svg +8 -8
- package/src/assets/icons/configuration.svg +3 -3
- package/src/assets/icons/dashboard_icon.svg +31 -0
- package/src/assets/icons/defects.svg +8 -8
- package/src/assets/icons/element.svg +4 -4
- package/src/assets/icons/info_user.svg +5 -0
- package/src/assets/icons/project_element.svg +4 -4
- package/src/assets/icons/step_group.svg +10 -10
- package/src/assets/icons/variable.svg +3 -3
- package/src/assets/styles/_colors.scss +1 -0
- package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss +1 -1
- package/src/components/Charts/LineChart/LineChart.scss +8 -7
- package/src/components/Charts/LineChart/LineChart.stories.tsx +170 -51
- package/src/components/Charts/LineChart/LineChart.tsx +30 -27
- package/src/components/Charts/LineChart/types.ts +22 -20
- package/src/components/DatePicker/DatePicker.scss +4 -3
- package/src/components/DatePicker/DatePicker.stories.tsx +27 -14
- package/src/components/DatePicker/DatePicker.tsx +62 -49
- package/src/components/DatePicker/types.ts +5 -0
- package/src/components/Excel/ColorBarSelector/ColorBarSelector.scss +8 -4
- package/src/components/Excel/ColorBarSelector/ColorBarSelector.tsx +2 -2
- package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.scss +23 -35
- package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.tsx +3 -12
- package/src/components/Excel/ExcelFile/ExcelFile.scss +31 -25
- package/src/components/Excel/ExcelFile/ExcelFile.tsx +157 -47
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +5 -4
- package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +3 -3
- package/src/components/Excel/ExcelFile/ExcelFileComponents/DataViewer.tsx +40 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +3 -3
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +10 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +9 -45
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +43 -2
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +40 -5
- package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +3 -1
- package/src/components/Excel/ExcelFile.stories.tsx +42 -43
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.scss +80 -20
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +171 -159
- package/src/components/FileDropzone/Dropzone.tsx +2 -0
- package/src/components/FileDropzone/FileDropzone.scss +1 -2
- package/src/components/FileDropzone/FileDropzone.stories.tsx +3 -0
- package/src/components/FileDropzone/FileDropzone.tsx +11 -3
- package/src/components/FileDropzone/types.ts +5 -0
- package/src/components/Icon/Icon.stories.tsx +5 -4
- package/src/components/Icon/iconList.ts +4 -0
- package/src/components/MultiSelect/MultiSelect.scss +41 -50
- package/src/components/MultiSelect/MultiSelect.tsx +48 -48
- package/src/components/Select/Select.scss +11 -1
- package/src/components/Select/Select.tsx +2 -2
- package/src/components/StateDropdown/StateDropdown.stories.tsx +5 -0
- package/src/components/StateDropdown/StateDropdown.tsx +27 -12
- package/src/components/StateDropdown/StateDropdownTypes.tsx +6 -0
- package/src/components/TableTree/TableTree.scss +17 -15
- package/src/components/TableTree/TableTree.tsx +42 -40
- package/src/index.ts +2 -0
- package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
- package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
- package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
- package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
- package/lib/components/AddButton/AddButton.d.ts +0 -5
- package/lib/components/AddButton/AddButton.stories.d.ts +0 -6
- package/lib/components/AddButton/index.d.ts +0 -1
- package/lib/components/AddButton/types.d.ts +0 -4
- package/lib/components/AttachImage/AttachImage.stories.d.ts +0 -7
- package/lib/components/Charts/BarChart/BarChart.stories.d.ts +0 -6
- package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +0 -8
- package/lib/components/Charts/LineChart/LineChart.stories.d.ts +0 -7
- package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +0 -8
- package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +0 -6
- package/lib/components/EditTextField/EditTextField.stories.d.ts +0 -10
- package/lib/components/Editor/Editor.stories.d.ts +0 -6
- package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +0 -4
- package/lib/components/Excel/ExcelFile.stories.d.ts +0 -6
- package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +0 -14
- package/lib/components/ExcelFile/ImportExcelStyles.d.ts +0 -24
- package/lib/components/StatusCard/StatusCard.stories.d.ts +0 -11
- package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +0 -10
- /package/lib/components/ExcelFile/{ColorBarSelector → ColorBarselector}/ColorBarSelector.d.ts +0 -0
@@ -1,6 +1,7 @@
|
|
1
1
|
import { Meta, StoryObj } from '@storybook/react';
|
2
2
|
import LineChart from './LineChart';
|
3
3
|
import { LineChartProps } from './types';
|
4
|
+
import React from 'react';
|
4
5
|
|
5
6
|
const meta: Meta<typeof LineChart> = {
|
6
7
|
title: 'Components/LineChart',
|
@@ -19,24 +20,49 @@ export const DefaultLineChart: StoryObj<LineChartProps> = {
|
|
19
20
|
color: '#4C90FF',
|
20
21
|
name: 'default',
|
21
22
|
data: [
|
22
|
-
{
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
{
|
27
|
-
|
28
|
-
|
23
|
+
{
|
24
|
+
date: '25 Oct',
|
25
|
+
totalMemory: 9.86,
|
26
|
+
},
|
27
|
+
{
|
28
|
+
date: '26 Oct',
|
29
|
+
totalMemory: 9.86,
|
30
|
+
},
|
31
|
+
{
|
32
|
+
date: '27 Oct',
|
33
|
+
totalMemory: 9.86,
|
34
|
+
},
|
35
|
+
{
|
36
|
+
date: '28 Oct',
|
37
|
+
totalMemory: 9.9,
|
38
|
+
},
|
39
|
+
{
|
40
|
+
date: '29 Oct',
|
41
|
+
totalMemory: 100,
|
42
|
+
},
|
43
|
+
{
|
44
|
+
date: '30 Oct',
|
45
|
+
totalMemory: 10.12,
|
46
|
+
},
|
47
|
+
{
|
48
|
+
date: '31 Oct',
|
49
|
+
totalMemory: 10.1,
|
50
|
+
}, {
|
51
|
+
date: '1 nov',
|
52
|
+
totalMemory: 10.1,
|
53
|
+
},
|
29
54
|
],
|
30
55
|
},
|
31
56
|
],
|
32
|
-
width:
|
33
|
-
height:
|
57
|
+
width: 604,
|
58
|
+
height: 232,
|
34
59
|
axisColor: '#000000',
|
35
60
|
lineChartWidth: 3,
|
36
61
|
yAxisLabel: 'Total Memory (GB)',
|
37
62
|
yAxisValueColor: '#252C37',
|
38
63
|
xAxisColor: '#D9D9D9',
|
39
64
|
yAxisColor: '#252C37',
|
65
|
+
numberSize:"10px"
|
40
66
|
},
|
41
67
|
render: (args) => (
|
42
68
|
<div className="linechart-container">
|
@@ -45,35 +71,35 @@ export const DefaultLineChart: StoryObj<LineChartProps> = {
|
|
45
71
|
),
|
46
72
|
};
|
47
73
|
|
48
|
-
export const
|
74
|
+
export const multiLineScriptsChart: StoryObj<LineChartProps> = {
|
49
75
|
args: {
|
50
76
|
data: [
|
51
77
|
{
|
52
|
-
color: '#179C5F',
|
78
|
+
color: '#179C5F',
|
53
79
|
name: 'Success',
|
54
80
|
show: true,
|
55
81
|
data: [
|
56
|
-
{ date: '1 oct', value:
|
57
|
-
{ date: '2 oct', value:
|
58
|
-
{ date: '3 oct', value:
|
59
|
-
{ date: '4 oct', value:
|
60
|
-
{ date: '5 oct', value:
|
61
|
-
{ date: '6 oct', value:
|
82
|
+
{ date: '1 oct', value: 10 },
|
83
|
+
{ date: '2 oct', value: 20 },
|
84
|
+
{ date: '3 oct', value: 30 },
|
85
|
+
{ date: '4 oct', value: 26 },
|
86
|
+
{ date: '5 oct', value: 90 },
|
87
|
+
{ date: '6 oct', value: 10 },
|
62
88
|
{ date: '7 oct', value: 12 },
|
63
89
|
],
|
64
90
|
},
|
65
91
|
{
|
66
|
-
color: '#9C1732',
|
92
|
+
color: '#9C1732',
|
67
93
|
name: 'Failed',
|
68
94
|
show: true,
|
69
95
|
data: [
|
70
|
-
{ date: '1 oct', value:
|
71
|
-
{ date: '2 oct', value:
|
72
|
-
{ date: '3 oct', value:
|
73
|
-
{ date: '4 oct', value:
|
74
|
-
{ date: '5 oct', value:
|
75
|
-
{ date: '6 oct', value:
|
76
|
-
{ date: '7 oct', value:
|
96
|
+
{ date: '1 oct', value: 50 },
|
97
|
+
{ date: '2 oct', value: 30 },
|
98
|
+
{ date: '3 oct', value: 40 },
|
99
|
+
{ date: '4 oct', value: 20 },
|
100
|
+
{ date: '5 oct', value: 90 },
|
101
|
+
{ date: '6 oct', value: 70 },
|
102
|
+
{ date: '7 oct', value: 30 },
|
77
103
|
],
|
78
104
|
},
|
79
105
|
{
|
@@ -81,46 +107,46 @@ export const StatusLineChart: StoryObj<LineChartProps> = {
|
|
81
107
|
name: 'Warning',
|
82
108
|
show: true,
|
83
109
|
data: [
|
84
|
-
{ date: '1 oct', value:
|
85
|
-
{ date: '2 oct', value:
|
86
|
-
{ date: '3 oct', value:
|
87
|
-
{ date: '4 oct', value:
|
88
|
-
{ date: '5 oct', value:
|
89
|
-
{ date: '6 oct', value:
|
90
|
-
{ date: '7 oct', value:
|
110
|
+
{ date: '1 oct', value: 10 },
|
111
|
+
{ date: '2 oct', value: 20 },
|
112
|
+
{ date: '3 oct', value: 99 },
|
113
|
+
{ date: '4 oct', value: 20},
|
114
|
+
{ date: '5 oct', value: 10 },
|
115
|
+
{ date: '6 oct', value: 10 },
|
116
|
+
{ date: '7 oct', value: 10 },
|
91
117
|
],
|
92
118
|
},
|
93
119
|
{
|
94
|
-
color: '#A83FC4',
|
120
|
+
color: '#A83FC4',
|
95
121
|
name: 'Skipped',
|
96
122
|
show: true,
|
97
123
|
data: [
|
98
|
-
{ date: '1 oct', value:
|
99
|
-
{ date: '2 oct', value:
|
100
|
-
{ date: '3 oct', value:
|
101
|
-
{ date: '4 oct', value:
|
102
|
-
{ date: '5 oct', value:
|
103
|
-
{ date: '6 oct', value:
|
104
|
-
{ date: '7 oct', value:
|
124
|
+
{ date: '1 oct', value: 40 },
|
125
|
+
{ date: '2 oct', value: 10 },
|
126
|
+
{ date: '3 oct', value: 10 },
|
127
|
+
{ date: '4 oct', value: 20 },
|
128
|
+
{ date: '5 oct', value: 10 },
|
129
|
+
{ date: '6 oct', value: 30 },
|
130
|
+
{ date: '7 oct', value: 10 },
|
105
131
|
],
|
106
132
|
},
|
107
133
|
{
|
108
|
-
color: '#3F5AC4',
|
134
|
+
color: '#3F5AC4',
|
109
135
|
name: 'Flaky',
|
110
136
|
show: true,
|
111
137
|
data: [
|
112
|
-
{ date: '1 oct', value:
|
113
|
-
{ date: '2 oct', value:
|
114
|
-
{ date: '3 oct', value:
|
115
|
-
{ date: '4 oct', value:
|
116
|
-
{ date: '5 oct', value:
|
117
|
-
{ date: '6 oct', value:
|
118
|
-
{ date: '7 oct', value:
|
138
|
+
{ date: '1 oct', value: 20 },
|
139
|
+
{ date: '2 oct', value: 40 },
|
140
|
+
{ date: '3 oct', value: 30 },
|
141
|
+
{ date: '4 oct', value: 10 },
|
142
|
+
{ date: '5 oct', value: 10 },
|
143
|
+
{ date: '6 oct', value: 20 },
|
144
|
+
{ date: '7 oct', value: 40 },
|
119
145
|
],
|
120
146
|
},
|
121
147
|
],
|
122
|
-
width:
|
123
|
-
height:
|
148
|
+
width: 441,
|
149
|
+
height: 232,
|
124
150
|
axisColor: '#000000',
|
125
151
|
lineChartWidth: 2,
|
126
152
|
yAxisLabel: 'Number Of Defects',
|
@@ -129,10 +155,103 @@ export const StatusLineChart: StoryObj<LineChartProps> = {
|
|
129
155
|
xAxisColor: '#D9D9D9',
|
130
156
|
yAxisColor: '#252C37',
|
131
157
|
yAxisLabelColor: '#252C37',
|
132
|
-
},
|
158
|
+
textSize:"12px", },
|
133
159
|
render: (args) => (
|
134
160
|
<div className="linechart-container">
|
135
161
|
<LineChart {...args} />
|
136
162
|
</div>
|
137
163
|
),
|
138
164
|
};
|
165
|
+
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
|
+
};
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import React, { useState } from 'react';
|
2
2
|
import { LineChartProps } from './types';
|
3
3
|
import './LineChart.scss';
|
4
|
+
import Typography from '../../Typography';
|
4
5
|
|
5
6
|
interface HoverState {
|
6
7
|
cursorX: number | null;
|
@@ -21,6 +22,9 @@ const LineChart: React.FC<LineChartProps> = ({
|
|
21
22
|
xAxisColor,
|
22
23
|
yAxisColor,
|
23
24
|
yAxisLabelColor,
|
25
|
+
textSize,
|
26
|
+
fontWeight,
|
27
|
+
numberSize,
|
24
28
|
}) => {
|
25
29
|
const margin = 40;
|
26
30
|
const xMax = width - margin * 2;
|
@@ -29,29 +33,25 @@ const LineChart: React.FC<LineChartProps> = ({
|
|
29
33
|
const isDefaultLineChart =
|
30
34
|
data[0]?.data[0]?.hasOwnProperty('date') &&
|
31
35
|
data[0]?.data[0]?.hasOwnProperty('totalMemory');
|
32
|
-
const xKey = isDefaultLineChart ? 'date' : 'date';
|
33
|
-
const yKey = isDefaultLineChart ? 'totalMemory' : 'value';
|
34
|
-
|
35
|
-
const allZero = data.every((line) =>
|
36
|
-
line.data.every((d: { [key: string]: any }) => d[yKey] === 0)
|
37
|
-
);
|
38
|
-
|
39
|
-
const yMaxExtended = allZero
|
40
|
-
? 4
|
41
|
-
: Math.max(
|
42
|
-
...data.flatMap((line) =>
|
43
|
-
line.data.map((d: { [key: string]: any }) => d[yKey])
|
44
|
-
)
|
45
|
-
) + 3;
|
46
|
-
|
36
|
+
const xKey = isDefaultLineChart ? 'date' : 'date';
|
37
|
+
const yKey = isDefaultLineChart ? 'totalMemory' : 'value';
|
47
38
|
const xScale = (x: string) => {
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
39
|
+
const date = new Date(x);
|
40
|
+
const time = date.getTime();
|
41
|
+
const minDate = new Date(
|
42
|
+
Math.min(...data[0].data.map((d: any) => new Date(d[xKey]).getTime()))
|
43
|
+
);
|
44
|
+
const maxDate = new Date(
|
45
|
+
Math.max(...data[0].data.map((d: any) => new Date(d[xKey]).getTime()))
|
46
|
+
);
|
47
|
+
|
48
|
+
return (
|
49
|
+
((time - minDate.getTime()) / (maxDate.getTime() - minDate.getTime())) *
|
50
|
+
xMax
|
51
|
+
);
|
52
52
|
};
|
53
53
|
|
54
|
-
const yScale = (y: number) => yMax - (y * yMax) /
|
54
|
+
const yScale = (y: number) => yMax - (y * yMax) / 1024;
|
55
55
|
|
56
56
|
const generateLinePath = (lineData: { [key: string]: any }[]) =>
|
57
57
|
lineData.reduce((path, point, i) => {
|
@@ -127,11 +127,11 @@ const LineChart: React.FC<LineChartProps> = ({
|
|
127
127
|
currentXValue: null,
|
128
128
|
});
|
129
129
|
|
130
|
-
const xTickInterval = Math.floor(data[0].data.length /
|
130
|
+
const xTickInterval = Math.floor(data[0].data.length / 4);
|
131
131
|
|
132
132
|
return (
|
133
133
|
<div className="ff-line-chart-text">
|
134
|
-
<
|
134
|
+
<Typography className="ff-line-chart-text1" fontSize={textSize} fontWeight="semi-bold">{yAxisLabel}</Typography>
|
135
135
|
<svg
|
136
136
|
width={width}
|
137
137
|
height={height}
|
@@ -155,6 +155,7 @@ const LineChart: React.FC<LineChartProps> = ({
|
|
155
155
|
textAnchor="middle"
|
156
156
|
fill={yAxisLabelColor}
|
157
157
|
className="ff-line-chart-x-axis-label"
|
158
|
+
style={{fontSize:textSize , fontWeight:fontWeight}}
|
158
159
|
>
|
159
160
|
{xAxisLabel}
|
160
161
|
</text>
|
@@ -185,7 +186,7 @@ const LineChart: React.FC<LineChartProps> = ({
|
|
185
186
|
r={5}
|
186
187
|
fill="white"
|
187
188
|
stroke={line.color}
|
188
|
-
strokeWidth={
|
189
|
+
strokeWidth={lineChartWidth}
|
189
190
|
style={{ transition: 'cx 0.1s, cy 0.1s' }}
|
190
191
|
/>
|
191
192
|
<line
|
@@ -212,23 +213,25 @@ const LineChart: React.FC<LineChartProps> = ({
|
|
212
213
|
textAnchor="middle"
|
213
214
|
fill={yAxisColor}
|
214
215
|
className="ff--line-chart-x-line-data"
|
216
|
+
style={{ fontSize:numberSize}}
|
215
217
|
>
|
216
218
|
{point[xKey] != null ? String(point[xKey]) : ''}
|
217
219
|
</text>
|
218
220
|
))}
|
219
221
|
|
220
222
|
{Array.from({ length: 6 }).map((_, i) => {
|
221
|
-
const
|
223
|
+
const yValueInGB = i * 0.2;
|
222
224
|
return (
|
223
225
|
<text
|
224
|
-
key={
|
226
|
+
key={yValueInGB}
|
225
227
|
x={-15}
|
226
|
-
y={yScale(
|
228
|
+
y={yScale(yValueInGB * 1024)}
|
227
229
|
textAnchor="middle"
|
228
230
|
fill={yAxisValueColor}
|
229
231
|
className="ff-line-chart-y-axis-text"
|
232
|
+
style={{ fontSize:numberSize}}
|
230
233
|
>
|
231
|
-
{
|
234
|
+
{yValueInGB.toFixed(1)}
|
232
235
|
</text>
|
233
236
|
);
|
234
237
|
})}
|
@@ -1,27 +1,29 @@
|
|
1
1
|
export interface LineChartDataPoint {
|
2
|
-
|
3
|
-
|
4
|
-
|
2
|
+
point: any;
|
3
|
+
x: string;
|
4
|
+
y: number;
|
5
5
|
}
|
6
6
|
|
7
7
|
export interface Line {
|
8
|
-
|
9
|
-
|
10
|
-
|
8
|
+
show: boolean;
|
9
|
+
color: string;
|
10
|
+
data: LineChartDataPoint[];
|
11
11
|
}
|
12
12
|
|
13
13
|
export interface LineChartProps {
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
14
|
+
data: any[];
|
15
|
+
width: number;
|
16
|
+
height: number;
|
17
|
+
axisColor: string;
|
18
|
+
isStatusVariant?: boolean;
|
19
|
+
lineChartWidth?: number;
|
20
|
+
yAxisLabel?: string;
|
21
|
+
xAxisLabel?: string;
|
22
|
+
yAxisValueColor?: string;
|
23
|
+
xAxisColor?: string;
|
24
|
+
yAxisColor?: string;
|
25
|
+
yAxisLabelColor?: string;
|
26
|
+
textSize?: string | number;
|
27
|
+
fontWeight?: string | number;
|
28
|
+
numberSize?: string | number;
|
29
|
+
}
|
@@ -9,7 +9,7 @@
|
|
9
9
|
--rdp-day-height: 24px;
|
10
10
|
--rdp-day-width: 36px;
|
11
11
|
@include fonts.fontPoppins(12px);
|
12
|
-
--rdp-font-family: 'Poppins';
|
12
|
+
--rdp-font-family: 'Poppins', sans-serif;
|
13
13
|
}
|
14
14
|
|
15
15
|
.ff-cursor-pointer {
|
@@ -48,7 +48,8 @@
|
|
48
48
|
.ff-calendar-icon,
|
49
49
|
.ff-clock-icon {
|
50
50
|
position: absolute;
|
51
|
-
|
51
|
+
top: 50%;
|
52
|
+
transform: translate(25%, -50%);
|
52
53
|
display: flex;
|
53
54
|
align-items: center;
|
54
55
|
pointer-events: none;
|
@@ -118,7 +119,7 @@
|
|
118
119
|
border: 1px solid var(--border-color);
|
119
120
|
background-color: var(--toggle-button-bg-color);
|
120
121
|
box-shadow: 0 -2px 2px 0 var(--ff-mini-modal-box-shadow);
|
121
|
-
padding:
|
122
|
+
padding: 0px;
|
122
123
|
border-radius: 30%;
|
123
124
|
cursor: pointer;
|
124
125
|
|
@@ -1,3 +1,4 @@
|
|
1
|
+
import React from 'react';
|
1
2
|
import type { Meta, StoryObj } from '@storybook/react';
|
2
3
|
import CustomDatePicker from './DatePicker';
|
3
4
|
import { useState } from 'react';
|
@@ -36,7 +37,7 @@ const meta: Meta<typeof CustomDatePicker> = {
|
|
36
37
|
},
|
37
38
|
onChange: {
|
38
39
|
description: 'Function to handle date selection',
|
39
|
-
action: 'changed',
|
40
|
+
action: 'changed',
|
40
41
|
},
|
41
42
|
placeholder: {
|
42
43
|
description: 'Placeholder text for the input field',
|
@@ -60,14 +61,15 @@ const meta: Meta<typeof CustomDatePicker> = {
|
|
60
61
|
},
|
61
62
|
calendarWidth: {
|
62
63
|
description: 'Custom width for the calendar in pixel',
|
63
|
-
control:
|
64
|
+
control: 'number',
|
64
65
|
},
|
65
66
|
error: {
|
66
67
|
description: 'Displays the input field in an error state',
|
67
68
|
control: 'boolean',
|
68
69
|
},
|
69
70
|
helperText: {
|
70
|
-
description:
|
71
|
+
description:
|
72
|
+
'Helper text to show below the input, often used for error messages',
|
71
73
|
control: 'text',
|
72
74
|
},
|
73
75
|
},
|
@@ -82,14 +84,8 @@ export const Default: Story = {
|
|
82
84
|
render: (args) => {
|
83
85
|
const [date, setDate] = useState<Date | undefined>();
|
84
86
|
|
85
|
-
return
|
86
|
-
|
87
|
-
{...args}
|
88
|
-
value={date}
|
89
|
-
onChange={setDate}
|
90
|
-
/>
|
91
|
-
)
|
92
|
-
}
|
87
|
+
return <CustomDatePicker {...args} value={date} onChange={setDate} />;
|
88
|
+
},
|
93
89
|
};
|
94
90
|
|
95
91
|
// Start Date Filter story
|
@@ -102,7 +98,7 @@ export const StartDateFilter: Story = {
|
|
102
98
|
{...args}
|
103
99
|
value={startDate}
|
104
100
|
onChange={setStartDate}
|
105
|
-
calendarWidth
|
101
|
+
calendarWidth={240}
|
106
102
|
maxDate={new Date()} // Disable future dates for start date picker
|
107
103
|
/>
|
108
104
|
);
|
@@ -143,7 +139,7 @@ export const EndDateInput: Story = {
|
|
143
139
|
export const ScheduleDateInput: Story = {
|
144
140
|
args: {
|
145
141
|
error: false,
|
146
|
-
helperText:
|
142
|
+
helperText: 'Error',
|
147
143
|
},
|
148
144
|
|
149
145
|
render: (args) => {
|
@@ -157,5 +153,22 @@ export const ScheduleDateInput: Story = {
|
|
157
153
|
minDate={new Date()} // Set minimum date to today
|
158
154
|
/>
|
159
155
|
);
|
160
|
-
}
|
156
|
+
},
|
157
|
+
};
|
158
|
+
|
159
|
+
export const Dateonly: Story = {
|
160
|
+
render: (args) => {
|
161
|
+
const [selectedDate, setSelectDate] = useState<Date | undefined>();
|
162
|
+
|
163
|
+
console.log(selectedDate);
|
164
|
+
return (
|
165
|
+
<CustomDatePicker
|
166
|
+
{...args}
|
167
|
+
value={selectedDate}
|
168
|
+
onChange={setSelectDate}
|
169
|
+
calendarWidth={240}
|
170
|
+
dateOnly
|
171
|
+
/>
|
172
|
+
);
|
173
|
+
},
|
161
174
|
};
|