pixel-react 1.5.6 → 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/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/index.d.ts +3 -0
- package/lib/index.esm.js +52 -32
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +52 -32
- 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/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/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/Icon/iconList.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 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
|
+
}
|
@@ -220,6 +220,7 @@ import AddUser from '../../assets/icons/add_user.svg?react';
|
|
220
220
|
import RemoveUser from '../../assets/icons/remove_user.svg?react';
|
221
221
|
import AddToArchive from '../../assets/icons/add_archive.svg?react';
|
222
222
|
import DashboardIcon from '../../assets/icons/dashboard_icon.svg?react'; //TODO:this is temporary icon
|
223
|
+
import InfoUser from '../../assets/icons/info_user.svg?react';
|
223
224
|
|
224
225
|
Components['success'] = ToastSuccessIcon;
|
225
226
|
Components['alert'] = Alert;
|
@@ -436,5 +437,6 @@ Components['add_user'] = AddUser;
|
|
436
437
|
Components['add_to_archive'] = AddToArchive;
|
437
438
|
Components['remove_user'] = RemoveUser;
|
438
439
|
Components['dashboard_icon'] = DashboardIcon;//TODO:this is temporary icon
|
440
|
+
Components['info_user'] = InfoUser;
|
439
441
|
|
440
442
|
export default Components;
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
@@ -1 +0,0 @@
|
|
1
|
-
export { default } from './AddButton';
|
@@ -1,7 +0,0 @@
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react';
|
2
|
-
import AttachImage from './AttachImage';
|
3
|
-
import { AttachImageProps } from './types';
|
4
|
-
declare const meta: Meta<typeof AttachImage>;
|
5
|
-
export default meta;
|
6
|
-
type Story = StoryObj<AttachImageProps>;
|
7
|
-
export declare const Default: Story;
|
@@ -1,8 +0,0 @@
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react';
|
2
|
-
import IconRadialChart from './IconRadialChart';
|
3
|
-
declare const meta: Meta<typeof IconRadialChart>;
|
4
|
-
export default meta;
|
5
|
-
type Story = StoryObj<typeof IconRadialChart>;
|
6
|
-
export declare const Default: Story;
|
7
|
-
export declare const Mobile: Story;
|
8
|
-
export declare const WithoutIcon: Story;
|
@@ -1,7 +0,0 @@
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react';
|
2
|
-
import LineChart from './LineChart';
|
3
|
-
import { LineChartProps } from './types';
|
4
|
-
declare const meta: Meta<typeof LineChart>;
|
5
|
-
export default meta;
|
6
|
-
export declare const DefaultLineChart: StoryObj<LineChartProps>;
|
7
|
-
export declare const StatusLineChart: StoryObj<LineChartProps>;
|
@@ -1,8 +0,0 @@
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react';
|
2
|
-
import MultiRadialChart from './MultiRadialChart';
|
3
|
-
declare const meta: Meta<typeof MultiRadialChart>;
|
4
|
-
export default meta;
|
5
|
-
type Story = StoryObj<typeof MultiRadialChart>;
|
6
|
-
export declare const Default: Story;
|
7
|
-
export declare const numberLegend: Story;
|
8
|
-
export declare const PillLegend: Story;
|
@@ -1,6 +0,0 @@
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react';
|
2
|
-
import ConnectingBranch from './ConnectingBranch';
|
3
|
-
declare const meta: Meta<typeof ConnectingBranch>;
|
4
|
-
export default meta;
|
5
|
-
type Story = StoryObj<typeof ConnectingBranch>;
|
6
|
-
export declare const Default: Story;
|
@@ -1,10 +0,0 @@
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react';
|
2
|
-
import EditTextField from './EditTextField';
|
3
|
-
import '../../assets/styles/_colors.scss';
|
4
|
-
import './EditTextField.scss';
|
5
|
-
declare const meta: Meta<typeof EditTextField>;
|
6
|
-
type Story = StoryObj<typeof EditTextField>;
|
7
|
-
export declare const textFieldWithLabel: Story;
|
8
|
-
export declare const textFieldWithOutLabel: Story;
|
9
|
-
export declare const openTextField: Story;
|
10
|
-
export default meta;
|
@@ -1,14 +0,0 @@
|
|
1
|
-
import { CellBase } from "./ExcelFile/Excel";
|
2
|
-
interface ChangeExcelStylesOptions {
|
3
|
-
sheetName: string;
|
4
|
-
styleType: string;
|
5
|
-
value: string;
|
6
|
-
selectedCell: {
|
7
|
-
row: number;
|
8
|
-
column: number;
|
9
|
-
}[];
|
10
|
-
}
|
11
|
-
export default function ChangeExcelStyles(setWorksheetsData: React.Dispatch<React.SetStateAction<{
|
12
|
-
[key: string]: Matrix<CellBase>;
|
13
|
-
}>>, options: ChangeExcelStylesOptions): void;
|
14
|
-
export {};
|
@@ -1,24 +0,0 @@
|
|
1
|
-
interface CellStyle {
|
2
|
-
color?: string;
|
3
|
-
backgroundColor?: string;
|
4
|
-
bold?: boolean;
|
5
|
-
italic?: boolean;
|
6
|
-
name?: string;
|
7
|
-
border: {
|
8
|
-
top: string;
|
9
|
-
bottom: string;
|
10
|
-
left: string;
|
11
|
-
right: string;
|
12
|
-
};
|
13
|
-
alignment: {
|
14
|
-
horizontal?: string;
|
15
|
-
vertical?: string;
|
16
|
-
wrapText?: boolean;
|
17
|
-
};
|
18
|
-
}
|
19
|
-
interface CellData {
|
20
|
-
style?: CellStyle;
|
21
|
-
}
|
22
|
-
type ImportExcelStylesData = Array<Array<CellData>>;
|
23
|
-
export default function ImportExcelStyles(data: ImportExcelStylesData | null): void;
|
24
|
-
export {};
|
@@ -1,11 +0,0 @@
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react';
|
2
|
-
import Card from './StatusCard';
|
3
|
-
import { CardProps } from './types';
|
4
|
-
declare const meta: Meta<typeof Card>;
|
5
|
-
export default meta;
|
6
|
-
type Story = StoryObj<CardProps>;
|
7
|
-
export declare const Passed: Story;
|
8
|
-
export declare const Failed: Story;
|
9
|
-
export declare const Warning: Story;
|
10
|
-
export declare const Skipped: Story;
|
11
|
-
export declare const Flaky: Story;
|
@@ -1,10 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import type { Meta, StoryObj } from '@storybook/react';
|
3
|
-
import { MachineExecutionInstanceDataSet } from './types';
|
4
|
-
declare const SequentialPayloadComponent: React.FC<{
|
5
|
-
machineInstances: MachineExecutionInstanceDataSet[];
|
6
|
-
}>;
|
7
|
-
declare const meta: Meta<typeof SequentialPayloadComponent>;
|
8
|
-
type Story = StoryObj<typeof SequentialPayloadComponent>;
|
9
|
-
export declare const Primary: Story;
|
10
|
-
export default meta;
|
/package/lib/components/ExcelFile/{ColorBarSelector → ColorBarselector}/ColorBarSelector.d.ts
RENAMED
File without changes
|