datastake-daf 0.6.211 → 0.6.212
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/.env +8 -0
- package/.vscode/settings.json +13 -0
- package/dist/components/index.js +59 -65
- package/package.json +1 -1
- package/src/@daf/core/components/Dashboard/Widget/ImageCarousel/components/CustomArrowButton/index.js +40 -56
- package/src/@daf/core/components/Dashboard/Widget/ImageCarousel/index.jsx +44 -38
- package/src/@daf/core/components/Dashboard/Widget/ImageCarousel/style.js +4 -7
- package/src/@daf/core/components/Dashboard/Widget/ProjectWidget/ProjectWidget.stories.jsx +86 -66
- package/src/styles/components/_analysisView.scss +30 -2
package/.env
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
{
|
|
2
|
+
"cSpell.words": ["cukura"],
|
|
3
|
+
"files.autoSave": "afterDelay",
|
|
4
|
+
"editor.wordWrap": "on",
|
|
5
|
+
"editor.autoClosingBrackets": "always",
|
|
6
|
+
"editor.autoClosingComments": "always",
|
|
7
|
+
"editor.autoClosingQuotes": "always",
|
|
8
|
+
"editor.defaultFormatter": "esbenp.prettier-vscode",
|
|
9
|
+
"editor.formatOnPaste": true,
|
|
10
|
+
"editor.formatOnSave": true,
|
|
11
|
+
"notebook.defaultFormatter": "esbenp.prettier-vscode",
|
|
12
|
+
"javascript.format.semicolons": "insert"
|
|
13
|
+
}
|
package/dist/components/index.js
CHANGED
|
@@ -21259,14 +21259,16 @@ function CustomArrowButton({
|
|
|
21259
21259
|
}) {
|
|
21260
21260
|
const [isHovered, setIsHovered] = React.useState(false);
|
|
21261
21261
|
|
|
21262
|
-
//
|
|
21263
|
-
const styledIcon = icon &&
|
|
21264
|
-
|
|
21265
|
-
|
|
21266
|
-
|
|
21267
|
-
|
|
21262
|
+
// Clone the icon and add color styling
|
|
21263
|
+
const styledIcon = icon && typeof icon === 'object' ? {
|
|
21264
|
+
...icon,
|
|
21265
|
+
props: {
|
|
21266
|
+
...icon.props,
|
|
21267
|
+
style: {
|
|
21268
|
+
color: isHovered ? hoverIconColor : iconColor
|
|
21269
|
+
}
|
|
21268
21270
|
}
|
|
21269
|
-
}
|
|
21271
|
+
} : icon;
|
|
21270
21272
|
return /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
|
|
21271
21273
|
type: "default",
|
|
21272
21274
|
shape: "circle",
|
|
@@ -21275,7 +21277,7 @@ function CustomArrowButton({
|
|
|
21275
21277
|
style: {
|
|
21276
21278
|
position: "absolute",
|
|
21277
21279
|
right: !isLeft ? "40px" : "auto",
|
|
21278
|
-
left: isLeft ? "
|
|
21280
|
+
left: !isLeft ? "auto" : "40px",
|
|
21279
21281
|
top: "58%",
|
|
21280
21282
|
transform: "translateY(-50%)",
|
|
21281
21283
|
zIndex: 10,
|
|
@@ -21298,29 +21300,19 @@ function CustomArrowButton({
|
|
|
21298
21300
|
}
|
|
21299
21301
|
});
|
|
21300
21302
|
}
|
|
21301
|
-
CustomArrowButton.propTypes = {
|
|
21302
|
-
icon: PropTypes__default["default"].node.isRequired,
|
|
21303
|
-
onClick: PropTypes__default["default"].func,
|
|
21304
|
-
isLeft: PropTypes__default["default"].bool,
|
|
21305
|
-
iconColor: PropTypes__default["default"].string,
|
|
21306
|
-
hoverIconColor: PropTypes__default["default"].string
|
|
21307
|
-
};
|
|
21308
21303
|
|
|
21309
21304
|
const StyledCarouselWrapper = dt.div`
|
|
21310
21305
|
position: relative;
|
|
21311
21306
|
|
|
21312
21307
|
.ant-carousel .slick-dots li button {
|
|
21313
|
-
background: ${props => props.inactiveDotColor} !important;
|
|
21308
|
+
background: ${props => props.inactiveDotColor} !important;
|
|
21309
|
+
opacity: 1 !important;
|
|
21314
21310
|
}
|
|
21315
|
-
|
|
21311
|
+
|
|
21316
21312
|
.ant-carousel .slick-dots li.slick-active button {
|
|
21317
|
-
background: ${props => props.activeDotColor} !important;
|
|
21318
|
-
}
|
|
21319
|
-
|
|
21320
|
-
.ant-carousel .slick-dots li.slick-active::after {
|
|
21321
21313
|
background: ${props => props.activeDotColor} !important;
|
|
21314
|
+
opacity: 1 !important;
|
|
21322
21315
|
}
|
|
21323
|
-
|
|
21324
21316
|
`;
|
|
21325
21317
|
|
|
21326
21318
|
const _excluded$d = ["title", "images", "height", "fallback", "activeDotColor", "inactiveDotColor", "arrowIconColor", "arrowHoverIconColor", "customArrows"];
|
|
@@ -21351,45 +21343,58 @@ function ImageCarousel(_ref) {
|
|
|
21351
21343
|
var _carouselRef$current2;
|
|
21352
21344
|
(_carouselRef$current2 = carouselRef.current) === null || _carouselRef$current2 === void 0 || _carouselRef$current2.next();
|
|
21353
21345
|
};
|
|
21346
|
+
|
|
21347
|
+
// Check if images array is empty or invalid
|
|
21348
|
+
const hasImages = images && images.length > 0;
|
|
21354
21349
|
return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
21355
21350
|
children: [/*#__PURE__*/jsxRuntime.jsxs(StyledCarouselWrapper, {
|
|
21356
21351
|
activeDotColor: activeDotColor,
|
|
21357
21352
|
inactiveDotColor: inactiveDotColor,
|
|
21358
|
-
children: [/*#__PURE__*/jsxRuntime.jsx(CarouselWidget, {
|
|
21359
|
-
title: title
|
|
21353
|
+
children: [/*#__PURE__*/jsxRuntime.jsx(CarouselWidget, _objectSpread2(_objectSpread2({
|
|
21354
|
+
title: title
|
|
21355
|
+
}, rest), {}, {
|
|
21360
21356
|
arrows: false,
|
|
21361
21357
|
ref: carouselRef,
|
|
21362
21358
|
afterChange: handleCarouselChange,
|
|
21363
|
-
infinite:
|
|
21364
|
-
dots:
|
|
21365
|
-
children:
|
|
21366
|
-
|
|
21367
|
-
|
|
21368
|
-
|
|
21369
|
-
|
|
21370
|
-
|
|
21371
|
-
|
|
21372
|
-
|
|
21373
|
-
|
|
21374
|
-
|
|
21375
|
-
|
|
21376
|
-
|
|
21377
|
-
|
|
21378
|
-
|
|
21379
|
-
|
|
21380
|
-
|
|
21381
|
-
|
|
21382
|
-
|
|
21383
|
-
|
|
21384
|
-
|
|
21385
|
-
|
|
21386
|
-
|
|
21387
|
-
|
|
21388
|
-
|
|
21389
|
-
|
|
21359
|
+
infinite: hasImages,
|
|
21360
|
+
dots: hasImages,
|
|
21361
|
+
children: hasImages ? images.map((image, index) => {
|
|
21362
|
+
const imageSrc = typeof image === "string" ? image : image.src;
|
|
21363
|
+
const imageAlt = typeof image === "string" ? "".concat(title, " - Image ").concat(index + 1) : image.alt;
|
|
21364
|
+
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
21365
|
+
children: /*#__PURE__*/jsxRuntime.jsx(antd.Image, {
|
|
21366
|
+
src: imageSrc,
|
|
21367
|
+
alt: imageAlt,
|
|
21368
|
+
height: height,
|
|
21369
|
+
width: "100%",
|
|
21370
|
+
fallback: fallback,
|
|
21371
|
+
loading: "lazy",
|
|
21372
|
+
preview: {
|
|
21373
|
+
visible: false
|
|
21374
|
+
},
|
|
21375
|
+
onClick: () => {
|
|
21376
|
+
setCurrent(index);
|
|
21377
|
+
setPreviewVisible(true);
|
|
21378
|
+
}
|
|
21379
|
+
})
|
|
21380
|
+
}, imageSrc);
|
|
21381
|
+
}) :
|
|
21382
|
+
/*#__PURE__*/
|
|
21383
|
+
// No images - show placeholder
|
|
21384
|
+
jsxRuntime.jsx("div", {
|
|
21385
|
+
children: /*#__PURE__*/jsxRuntime.jsx(antd.Image, {
|
|
21386
|
+
src: "/assets/images/no-image.svg",
|
|
21387
|
+
alt: "No images available",
|
|
21388
|
+
height: height,
|
|
21389
|
+
width: "100%",
|
|
21390
|
+
fallback: fallback,
|
|
21391
|
+
preview: false,
|
|
21392
|
+
style: {
|
|
21393
|
+
objectFit: "contain"
|
|
21394
|
+
}
|
|
21390
21395
|
})
|
|
21391
|
-
})
|
|
21392
|
-
}),
|
|
21396
|
+
})
|
|
21397
|
+
})), hasImages && customArrows && images.length > 1 && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
21393
21398
|
children: [/*#__PURE__*/jsxRuntime.jsx(CustomArrowButton, {
|
|
21394
21399
|
icon: /*#__PURE__*/jsxRuntime.jsx(Icons.LeftOutlined, {}),
|
|
21395
21400
|
onClick: goToPrevious,
|
|
@@ -21403,7 +21408,7 @@ function ImageCarousel(_ref) {
|
|
|
21403
21408
|
hoverIconColor: arrowHoverIconColor
|
|
21404
21409
|
})]
|
|
21405
21410
|
})]
|
|
21406
|
-
}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
21411
|
+
}), hasImages && /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
21407
21412
|
style: {
|
|
21408
21413
|
display: "none"
|
|
21409
21414
|
},
|
|
@@ -21430,17 +21435,6 @@ function ImageCarousel(_ref) {
|
|
|
21430
21435
|
})]
|
|
21431
21436
|
});
|
|
21432
21437
|
}
|
|
21433
|
-
ImageCarousel.propTypes = {
|
|
21434
|
-
title: PropTypes__default["default"].string.isRequired,
|
|
21435
|
-
images: PropTypes__default["default"].array.isRequired,
|
|
21436
|
-
height: PropTypes__default["default"].number,
|
|
21437
|
-
fallback: PropTypes__default["default"].string,
|
|
21438
|
-
activeDotColor: PropTypes__default["default"].string,
|
|
21439
|
-
inactiveDotColor: PropTypes__default["default"].string,
|
|
21440
|
-
arrowIconColor: PropTypes__default["default"].string,
|
|
21441
|
-
arrowHoverIconColor: PropTypes__default["default"].string,
|
|
21442
|
-
customArrows: PropTypes__default["default"].bool
|
|
21443
|
-
};
|
|
21444
21438
|
|
|
21445
21439
|
var Style$w = dt.div`
|
|
21446
21440
|
border: 1px solid var(--base-gray-40);
|
package/package.json
CHANGED
|
@@ -1,68 +1,52 @@
|
|
|
1
|
-
import React, { useState } from "react";
|
|
2
1
|
import { Button } from "antd";
|
|
3
|
-
import
|
|
2
|
+
import { useState } from "react";
|
|
4
3
|
|
|
5
4
|
function CustomArrowButton({
|
|
6
|
-
icon,
|
|
7
|
-
onClick = () => {},
|
|
8
|
-
isLeft = false,
|
|
9
|
-
iconColor = "#666",
|
|
10
|
-
hoverIconColor = "#1890ff"
|
|
5
|
+
icon,
|
|
6
|
+
onClick = () => {},
|
|
7
|
+
isLeft = false,
|
|
8
|
+
iconColor = "#666",
|
|
9
|
+
hoverIconColor = "#1890ff"
|
|
11
10
|
}) {
|
|
12
11
|
const [isHovered, setIsHovered] = useState(false);
|
|
13
12
|
|
|
14
|
-
//
|
|
15
|
-
const styledIcon =
|
|
16
|
-
icon
|
|
17
|
-
|
|
18
|
-
style: {
|
|
19
|
-
...(icon.props.style || {}),
|
|
20
|
-
color: isHovered ? hoverIconColor : iconColor,
|
|
21
|
-
transition: "color 0.3s ease",
|
|
22
|
-
},
|
|
23
|
-
})
|
|
24
|
-
: icon;
|
|
13
|
+
// Clone the icon and add color styling
|
|
14
|
+
const styledIcon = icon && typeof icon === 'object' ?
|
|
15
|
+
{ ...icon, props: { ...icon.props, style: { color: isHovered ? hoverIconColor : iconColor } } } :
|
|
16
|
+
icon;
|
|
25
17
|
|
|
26
18
|
return (
|
|
27
19
|
<Button
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
20
|
+
type="default"
|
|
21
|
+
shape="circle"
|
|
22
|
+
icon={styledIcon}
|
|
23
|
+
onClick={onClick}
|
|
24
|
+
style={{
|
|
25
|
+
position: "absolute",
|
|
26
|
+
right: !isLeft ? "40px" : "auto",
|
|
27
|
+
left: !isLeft ? "auto" : "40px",
|
|
28
|
+
top: "58%",
|
|
29
|
+
transform: "translateY(-50%)",
|
|
30
|
+
zIndex: 10,
|
|
31
|
+
backgroundColor: "rgba(255, 255, 255, 0.4)",
|
|
32
|
+
border: "1px solid rgba(0, 0, 0, 0.1)",
|
|
33
|
+
boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)",
|
|
34
|
+
width: "40px",
|
|
35
|
+
height: "40px",
|
|
36
|
+
display: "flex",
|
|
37
|
+
alignItems: "center",
|
|
38
|
+
justifyContent: "center",
|
|
39
|
+
}}
|
|
40
|
+
onMouseEnter={(e) => {
|
|
41
|
+
e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 1)";
|
|
42
|
+
setIsHovered(true);
|
|
43
|
+
}}
|
|
44
|
+
onMouseLeave={(e) => {
|
|
45
|
+
e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.4)";
|
|
46
|
+
setIsHovered(false);
|
|
47
|
+
}}
|
|
56
48
|
/>
|
|
57
|
-
)
|
|
49
|
+
)
|
|
58
50
|
}
|
|
59
51
|
|
|
60
|
-
|
|
61
|
-
icon: PropTypes.node.isRequired,
|
|
62
|
-
onClick: PropTypes.func,
|
|
63
|
-
isLeft: PropTypes.bool,
|
|
64
|
-
iconColor: PropTypes.string,
|
|
65
|
-
hoverIconColor: PropTypes.string,
|
|
66
|
-
};
|
|
67
|
-
|
|
68
|
-
export default CustomArrowButton;
|
|
52
|
+
export default CustomArrowButton
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import React, { useState, useRef } from "react";
|
|
2
|
+
import styled from "styled-components";
|
|
2
3
|
import CarouselWidget from "../CarouselWidget/index.jsx";
|
|
3
|
-
import { Image, Carousel } from "antd";
|
|
4
|
+
import { Image, Carousel, Button } from "antd";
|
|
4
5
|
import { LeftOutlined, RightOutlined } from "@ant-design/icons";
|
|
5
6
|
import CustomArrowButton from "./components/CustomArrowButton/index.js";
|
|
6
7
|
import { StyledCarouselWrapper } from "./style.js";
|
|
7
|
-
import PropTypes from "prop-types";
|
|
8
8
|
|
|
9
9
|
/**
|
|
10
10
|
* @typedef {Object} ImageObject
|
|
@@ -44,7 +44,6 @@ import PropTypes from "prop-types";
|
|
|
44
44
|
* @param {string} [props.inactiveDotColor="rgba(255, 255, 255, 0.3)"] - Color of inactive dots
|
|
45
45
|
* @param {string} [props.arrowIconColor="#666"] - Default color of arrow icons
|
|
46
46
|
* @param {string} [props.arrowHoverIconColor="#1890ff"] - Color of arrow icons on hover
|
|
47
|
-
* @param {boolean} [props.customArrows=false] - Whether to show custom navigation arrows
|
|
48
47
|
* @param {Object} [props.rest] - Additional props passed to the underlying CarouselWidget component
|
|
49
48
|
*
|
|
50
49
|
* @features
|
|
@@ -92,6 +91,8 @@ function ImageCarousel({
|
|
|
92
91
|
carouselRef.current?.next();
|
|
93
92
|
};
|
|
94
93
|
|
|
94
|
+
// Check if images array is empty or invalid
|
|
95
|
+
const hasImages = images && images.length > 0;
|
|
95
96
|
|
|
96
97
|
return (
|
|
97
98
|
<>
|
|
@@ -101,14 +102,14 @@ function ImageCarousel({
|
|
|
101
102
|
>
|
|
102
103
|
<CarouselWidget
|
|
103
104
|
title={title}
|
|
105
|
+
{...rest}
|
|
104
106
|
arrows={false}
|
|
105
107
|
ref={carouselRef}
|
|
106
108
|
afterChange={handleCarouselChange}
|
|
107
|
-
infinite
|
|
108
|
-
dots={
|
|
109
|
+
infinite={hasImages}
|
|
110
|
+
dots={hasImages}
|
|
109
111
|
>
|
|
110
|
-
|
|
111
|
-
{images.map((image, index) => {
|
|
112
|
+
{hasImages ? images.map((image, index) => {
|
|
112
113
|
const imageSrc = typeof image === "string" ? image : image.src;
|
|
113
114
|
const imageAlt =
|
|
114
115
|
typeof image === "string"
|
|
@@ -134,11 +135,25 @@ function ImageCarousel({
|
|
|
134
135
|
/>
|
|
135
136
|
</div>
|
|
136
137
|
);
|
|
137
|
-
})
|
|
138
|
-
|
|
138
|
+
}) : (
|
|
139
|
+
// No images - show placeholder
|
|
140
|
+
<div>
|
|
141
|
+
<Image
|
|
142
|
+
src="/assets/images/no-image.svg"
|
|
143
|
+
alt="No images available"
|
|
144
|
+
height={height}
|
|
145
|
+
width="100%"
|
|
146
|
+
fallback={fallback}
|
|
147
|
+
preview={false}
|
|
148
|
+
style={{
|
|
149
|
+
objectFit: "contain",
|
|
150
|
+
}}
|
|
151
|
+
/>
|
|
152
|
+
</div>
|
|
153
|
+
)}
|
|
139
154
|
</CarouselWidget>
|
|
140
155
|
|
|
141
|
-
{
|
|
156
|
+
{(hasImages && customArrows && images.length > 1) && (
|
|
142
157
|
<>
|
|
143
158
|
<CustomArrowButton
|
|
144
159
|
icon={<LeftOutlined />}
|
|
@@ -157,19 +172,21 @@ function ImageCarousel({
|
|
|
157
172
|
)}
|
|
158
173
|
</StyledCarouselWrapper>
|
|
159
174
|
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
175
|
+
{/* Preview functionality - only show if there are images */}
|
|
176
|
+
{hasImages && (
|
|
177
|
+
<div style={{ display: "none" }}>
|
|
178
|
+
<Image.PreviewGroup
|
|
179
|
+
preview={{
|
|
180
|
+
visible: previewVisible,
|
|
181
|
+
current,
|
|
182
|
+
onVisibleChange: (vis) => setPreviewVisible(vis),
|
|
183
|
+
onChange: (idx) => {
|
|
184
|
+
setCurrent(idx);
|
|
185
|
+
carouselRef.current?.goTo(idx);
|
|
186
|
+
},
|
|
187
|
+
}}
|
|
188
|
+
>
|
|
189
|
+
{images.map((image, index) => {
|
|
173
190
|
const imageSrc = typeof image === "string" ? image : image.src;
|
|
174
191
|
const imageAlt =
|
|
175
192
|
typeof image === "string"
|
|
@@ -177,23 +194,12 @@ function ImageCarousel({
|
|
|
177
194
|
: image.alt;
|
|
178
195
|
|
|
179
196
|
return <Image key={imageSrc} src={imageSrc} alt={imageAlt} />;
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
197
|
+
})}
|
|
198
|
+
</Image.PreviewGroup>
|
|
199
|
+
</div>
|
|
200
|
+
)}
|
|
183
201
|
</>
|
|
184
202
|
);
|
|
185
203
|
}
|
|
186
204
|
|
|
187
|
-
ImageCarousel.propTypes = {
|
|
188
|
-
title: PropTypes.string.isRequired,
|
|
189
|
-
images: PropTypes.array.isRequired,
|
|
190
|
-
height: PropTypes.number,
|
|
191
|
-
fallback: PropTypes.string,
|
|
192
|
-
activeDotColor: PropTypes.string,
|
|
193
|
-
inactiveDotColor: PropTypes.string,
|
|
194
|
-
arrowIconColor: PropTypes.string,
|
|
195
|
-
arrowHoverIconColor: PropTypes.string,
|
|
196
|
-
customArrows: PropTypes.bool,
|
|
197
|
-
};
|
|
198
|
-
|
|
199
205
|
export default ImageCarousel;
|
|
@@ -4,15 +4,12 @@ export const StyledCarouselWrapper = styled.div`
|
|
|
4
4
|
position: relative;
|
|
5
5
|
|
|
6
6
|
.ant-carousel .slick-dots li button {
|
|
7
|
-
background: ${props => props.inactiveDotColor} !important;
|
|
7
|
+
background: ${props => props.inactiveDotColor} !important;
|
|
8
|
+
opacity: 1 !important;
|
|
8
9
|
}
|
|
9
|
-
|
|
10
|
+
|
|
10
11
|
.ant-carousel .slick-dots li.slick-active button {
|
|
11
|
-
background: ${props => props.activeDotColor} !important;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.ant-carousel .slick-dots li.slick-active::after {
|
|
15
12
|
background: ${props => props.activeDotColor} !important;
|
|
13
|
+
opacity: 1 !important;
|
|
16
14
|
}
|
|
17
|
-
|
|
18
15
|
`;
|
|
@@ -2,76 +2,96 @@ import ProjectWidget from "./index.jsx";
|
|
|
2
2
|
import ThemeLayout from "../../../ThemeLayout/index.jsx";
|
|
3
3
|
import Widget from "../index.jsx";
|
|
4
4
|
import DashboardLayout from "../../DashboardLayout/index.jsx";
|
|
5
|
+
import DafHEader from "../../../Header/index.jsx";
|
|
5
6
|
export default {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
7
|
+
title: "Dashboard/Widgets/ProjectWidget",
|
|
8
|
+
component: ProjectWidget,
|
|
9
|
+
tags: ["autodocs"],
|
|
10
|
+
decorators: [
|
|
11
|
+
(Story) => (
|
|
12
|
+
<div style={{ margin: "3em" }}>
|
|
13
|
+
<ThemeLayout>
|
|
14
|
+
<Story />
|
|
15
|
+
</ThemeLayout>
|
|
16
|
+
</div>
|
|
17
|
+
),
|
|
18
|
+
],
|
|
18
19
|
};
|
|
19
20
|
|
|
20
21
|
export const Primary = {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
22
|
+
name: "ProjectWidget",
|
|
23
|
+
args: {
|
|
24
|
+
onLinkClick: () => {},
|
|
25
|
+
linkIcon: "Link",
|
|
26
|
+
sdgList: [
|
|
27
|
+
"noPoverty",
|
|
28
|
+
"zeroHunger",
|
|
29
|
+
"goodHealthWellbeing",
|
|
30
|
+
"qualityEducation",
|
|
31
|
+
"genderEquality",
|
|
32
|
+
"cleanWaterSanitation",
|
|
33
|
+
"affordableCleanEnergy",
|
|
34
|
+
"decentWorkEconomicGrowth",
|
|
35
|
+
"industryInnovationInfrastructure",
|
|
36
|
+
"reducedInequalities",
|
|
37
|
+
"sustainableCitiesCommunities",
|
|
38
|
+
"responsibleConsumptionProduction",
|
|
39
|
+
"climateAction",
|
|
40
|
+
"lifeBelowWater",
|
|
41
|
+
"lifeOnLand",
|
|
42
|
+
"peaceJusticeStrongInstitutions",
|
|
43
|
+
"partnershipsForGoals",
|
|
44
|
+
],
|
|
45
|
+
items: [
|
|
46
|
+
{ label: "Item 1", render: () => <span>Value 1</span> },
|
|
47
|
+
{ label: "Item 2", render: () => <span>Value 2</span> },
|
|
48
|
+
{ label: "Item 3", render: () => <span>Value 3</span> },
|
|
49
|
+
],
|
|
50
|
+
},
|
|
51
|
+
render: (args) => {
|
|
52
|
+
return (
|
|
53
|
+
<DashboardLayout
|
|
54
|
+
header={
|
|
55
|
+
<DafHEader title="Dashboard" supportText="The Support text for the header" />
|
|
56
|
+
}
|
|
57
|
+
>
|
|
58
|
+
<section
|
|
59
|
+
style={{
|
|
60
|
+
overflowX: "auto",
|
|
61
|
+
maxWidth: "100%",
|
|
62
|
+
}}
|
|
63
|
+
>
|
|
64
|
+
<Widget title="Project Catalogue" className="with-border-header">
|
|
65
|
+
<section className="nowrap horizontal-scroll" style={{}}>
|
|
66
|
+
<ProjectWidget {...args} title="ALL SDGS" />
|
|
56
67
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
68
|
+
<ProjectWidget
|
|
69
|
+
{...args}
|
|
70
|
+
title="SOME SDGS"
|
|
71
|
+
sdgList={["noPoverty", "lifeBelowWater"]}
|
|
72
|
+
image="data:image/jpeg;base64,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"
|
|
73
|
+
/>
|
|
63
74
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
75
|
+
<ProjectWidget
|
|
76
|
+
{...args}
|
|
77
|
+
sdgList={[]}
|
|
78
|
+
title="No SDGS"
|
|
79
|
+
image={
|
|
80
|
+
"https://static0.srcdn.com/wordpress/wp-content/uploads/2023/03/the-main-characters-of-the-hangover-in-an-elevator.jpg"
|
|
81
|
+
}
|
|
82
|
+
/>
|
|
83
|
+
|
|
84
|
+
<ProjectWidget {...args} />
|
|
85
|
+
<ProjectWidget {...args} />
|
|
86
|
+
<ProjectWidget {...args} />
|
|
87
|
+
</section>
|
|
88
|
+
</Widget>
|
|
89
|
+
</section>
|
|
90
|
+
|
|
91
|
+
<section>
|
|
92
|
+
<Widget title="FUCK"></Widget>
|
|
93
|
+
</section>
|
|
94
|
+
</DashboardLayout>
|
|
95
|
+
);
|
|
96
|
+
},
|
|
77
97
|
};
|
|
@@ -191,7 +191,7 @@
|
|
|
191
191
|
.content {
|
|
192
192
|
width: 100%;
|
|
193
193
|
flex: 1;
|
|
194
|
-
overflow: auto;
|
|
194
|
+
// overflow: auto; Dont make the page overflow
|
|
195
195
|
display: flex;
|
|
196
196
|
|
|
197
197
|
.view-content {
|
|
@@ -301,6 +301,7 @@
|
|
|
301
301
|
.daf-analysis-layout {
|
|
302
302
|
display: flex;
|
|
303
303
|
flex-direction: column;
|
|
304
|
+
overflow-x: hidden; // Dont make the page overflow
|
|
304
305
|
|
|
305
306
|
.go-select-cont {
|
|
306
307
|
padding: var(--size-lg);
|
|
@@ -355,6 +356,7 @@
|
|
|
355
356
|
display: flex;
|
|
356
357
|
flex-wrap: wrap;
|
|
357
358
|
gap: var(--size-lg);
|
|
359
|
+
|
|
358
360
|
//FUTURE ILVI - remove this
|
|
359
361
|
@media (max-width: 850px) {
|
|
360
362
|
flex-direction: column;
|
|
@@ -364,6 +366,7 @@
|
|
|
364
366
|
.widget {
|
|
365
367
|
flex: 1;
|
|
366
368
|
|
|
369
|
+
|
|
367
370
|
&.dds-widget {
|
|
368
371
|
min-width: 400px;
|
|
369
372
|
}
|
|
@@ -374,6 +377,31 @@
|
|
|
374
377
|
flex-wrap: nowrap;
|
|
375
378
|
}
|
|
376
379
|
|
|
380
|
+
.horizontal-scroll {
|
|
381
|
+
overflow-x: auto;
|
|
382
|
+
overflow-y: hidden;
|
|
383
|
+
scrollbar-width: thin;
|
|
384
|
+
scrollbar-color: #c1c1c1 #f1f1f1;
|
|
385
|
+
|
|
386
|
+
&::-webkit-scrollbar {
|
|
387
|
+
height: 8px;
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
&::-webkit-scrollbar-track {
|
|
391
|
+
background: #f1f1f1;
|
|
392
|
+
border-radius: 4px;
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
&::-webkit-scrollbar-thumb {
|
|
396
|
+
background: #c1c1c1;
|
|
397
|
+
border-radius: 4px;
|
|
398
|
+
|
|
399
|
+
&:hover {
|
|
400
|
+
background: #a8a8a8;
|
|
401
|
+
}
|
|
402
|
+
}
|
|
403
|
+
}
|
|
404
|
+
|
|
377
405
|
&.own-data-collapsed {
|
|
378
406
|
.overflow-section {
|
|
379
407
|
max-width: calc(100vw - 48px - 250px);
|
|
@@ -498,4 +526,4 @@
|
|
|
498
526
|
}
|
|
499
527
|
}
|
|
500
528
|
}
|
|
501
|
-
}
|
|
529
|
+
}
|