datastake-daf 0.6.186 → 0.6.188

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 (10) hide show
  1. package/.env +8 -0
  2. package/.vscode/settings.json +13 -0
  3. package/dist/components/index.js +284 -269
  4. package/package.json +2 -2
  5. package/src/@daf/core/components/Dashboard/Globe/index.jsx +0 -35
  6. package/src/@daf/core/components/Dashboard/Globe/style.js +11 -0
  7. package/src/@daf/core/components/Dashboard/Map/storyConfig1.js +235 -233
  8. package/src/@daf/core/components/Filters/FloatingFilters/components/Slider/index.jsx +112 -107
  9. package/src/@daf/core/components/Table/StickyTable/StickyTable.stories.js +290 -321
  10. package/src/@daf/core/components/Table/StickyTable/index.jsx +75 -16
package/src/@daf/core/components/Filters/FloatingFilters/components/Slider/index.jsx CHANGED
@@ -10,111 +10,116 @@ const DEFAULT_MAX = 100;
10
10
  const STEP_SISTERS = ["#F04438", "#FF7A45", "#FFA940", "#95DE64", "#12B76A"]; // NOT REAL STEP SISTERS, JUST COLORS. 😂
11
11
 
12
12
  export default function SliderItem({ filter, onFilterChange }) {
13
- const [range, setRange] = useState([DEFAULT_MIN, DEFAULT_MAX]);
14
-
15
- const min = filter?.min ?? DEFAULT_MIN;
16
- const max = filter?.max ?? DEFAULT_MAX;
17
- const step = filter?.step ?? DEFAULT_STEP;
18
-
19
- const marks = useMemo(() => {
20
- const marksObj = {};
21
- for (let i = min; i <= max; i += step) {
22
- marksObj[i] = `${i}%`;
23
- }
24
- return marksObj;
25
- }, [min, max, step]);
26
-
27
- const getColorForValue = (start, end) => {
28
- const s = Number(start);
29
- const e = Number(end);
30
- if (Number.isNaN(s) || Number.isNaN(e)) return "transparent";
31
-
32
- const valueToStartIndex = (v) => {
33
- let idx = Math.floor((v - min) / step);
34
- if (idx < 0) idx = 0;
35
- if (idx >= STEP_SISTERS.length) idx = STEP_SISTERS.length - 1;
36
- return idx;
37
- };
38
-
39
- const valueToEndIndex = (v) => {
40
- let idx = Math.ceil((v - min) / step) - 1;
41
- if (idx < 0) idx = 0;
42
- if (idx >= STEP_SISTERS.length) idx = STEP_SISTERS.length - 1;
43
- return idx;
44
- };
45
-
46
- let startIndex = valueToStartIndex(Math.min(s, e));
47
- let endIndex = valueToEndIndex(Math.max(s, e));
48
-
49
- if (endIndex < startIndex) endIndex = startIndex;
50
-
51
- const colorsInRange = STEP_SISTERS.slice(startIndex, endIndex + 1);
52
-
53
- if (colorsInRange.length === 0) return "transparent";
54
- if (colorsInRange.length === 1) return colorsInRange[0];
55
-
56
- const sliceSize = 100 / colorsInRange.length;
57
- const gradientStops = colorsInRange
58
- .map((color, i) => {
59
- const startPct = +(i * sliceSize).toFixed(4);
60
- const endPct = +((i + 1) * sliceSize).toFixed(4);
61
- return `${color} ${startPct}% ${endPct}%`;
62
- })
63
- .join(", ");
64
-
65
- return `linear-gradient(to right, ${gradientStops})`;
66
- };
67
-
68
- return (
69
- <div className="form-row">
70
- <label>{filter?.label}</label>
71
- <Select
72
- value={`${range[0]} - ${range[1]}`}
73
- dropdownRender={() => (
74
- <div style={{ padding: "10px" }}>
75
- <ConfigProvider
76
- theme={{
77
- components: {
78
- Slider: {
79
- dotSize: 13,
80
- },
81
- },
82
- }}
83
- >
84
- <Slider
85
- range
86
- min={min}
87
- max={max}
88
- value={range}
89
- step={null}
90
- onChange={(val) => {
91
- setRange(val);
92
- onFilterChange({ [filter?.key]: val });
93
- }}
94
- tooltip={{
95
- open: false,
96
- }}
97
- marks={marks}
98
- styles={{
99
- track: {
100
- background: "transparent",
101
- },
102
- tracks: {
103
- background: getColorForValue(range[0], range[1]),
104
- },
105
- }}
106
- />
107
- </ConfigProvider>
108
- </div>
109
- )}
110
- >
111
- <Option
112
- value={`${range[0]}-${range[1]}`}
113
- key={`${range[0]}-${range[1]}`}
114
- >
115
- {range[0]} - {range[1]}
116
- </Option>
117
- </Select>
118
- </div>
119
- );
13
+ const [range, setRange] = useState([DEFAULT_MIN, DEFAULT_MAX]);
14
+
15
+ const min = filter?.min ?? DEFAULT_MIN;
16
+ const max = filter?.max ?? DEFAULT_MAX;
17
+ const step = filter?.step ?? DEFAULT_STEP;
18
+
19
+ const marks = useMemo(() => {
20
+ const marksObj = {};
21
+ for (let i = min; i <= max; i += step) {
22
+ marksObj[i] = (
23
+ <span
24
+ style={{
25
+ fontSize: "10px",
26
+ }}
27
+ >
28
+ {i}%
29
+ </span>
30
+ );
31
+ }
32
+ return marksObj;
33
+ }, [min, max, step]);
34
+
35
+ const getColorForValue = (start, end) => {
36
+ const s = Number(start);
37
+ const e = Number(end);
38
+ if (Number.isNaN(s) || Number.isNaN(e)) return "transparent";
39
+
40
+ const valueToStartIndex = (v) => {
41
+ let idx = Math.floor((v - min) / step);
42
+ if (idx < 0) idx = 0;
43
+ if (idx >= STEP_SISTERS.length) idx = STEP_SISTERS.length - 1;
44
+ return idx;
45
+ };
46
+
47
+ const valueToEndIndex = (v) => {
48
+ let idx = Math.ceil((v - min) / step) - 1;
49
+ if (idx < 0) idx = 0;
50
+ if (idx >= STEP_SISTERS.length) idx = STEP_SISTERS.length - 1;
51
+ return idx;
52
+ };
53
+
54
+ let startIndex = valueToStartIndex(Math.min(s, e));
55
+ let endIndex = valueToEndIndex(Math.max(s, e));
56
+
57
+ if (endIndex < startIndex) endIndex = startIndex;
58
+
59
+ const colorsInRange = STEP_SISTERS.slice(startIndex, endIndex + 1);
60
+
61
+ if (colorsInRange.length === 0) return "transparent";
62
+ if (colorsInRange.length === 1) return colorsInRange[0];
63
+
64
+ const sliceSize = 100 / colorsInRange.length;
65
+ const gradientStops = colorsInRange
66
+ .map((color, i) => {
67
+ const startPct = +(i * sliceSize).toFixed(4);
68
+ const endPct = +((i + 1) * sliceSize).toFixed(4);
69
+ return `${color} ${startPct}% ${endPct}%`;
70
+ })
71
+ .join(", ");
72
+
73
+ return `linear-gradient(to right, ${gradientStops})`;
74
+ };
75
+
76
+ return (
77
+ <div className="form-row">
78
+ <label>{filter?.label}</label>
79
+ <Select
80
+ value={`${range[0]} - ${range[1]}`}
81
+ dropdownRender={() => (
82
+ <div style={{ padding: "10px" }}>
83
+ <ConfigProvider
84
+ theme={{
85
+ components: {
86
+ Slider: {
87
+ dotSize: 13,
88
+ },
89
+ },
90
+ }}
91
+ >
92
+ <Slider
93
+ range
94
+ min={min}
95
+ max={max}
96
+ value={range}
97
+ step={null}
98
+ onChange={(val) => {
99
+ setRange(val);
100
+ onFilterChange({ [filter?.key]: val });
101
+ }}
102
+ tooltip={{
103
+ open: false,
104
+ }}
105
+ marks={marks}
106
+ styles={{
107
+ track: {
108
+ background: "transparent",
109
+ },
110
+ tracks: {
111
+ background: getColorForValue(range[0], range[1]),
112
+ },
113
+ }}
114
+ />
115
+ </ConfigProvider>
116
+ </div>
117
+ )}
118
+ >
119
+ <Option value={`${range[0]}-${range[1]}`} key={`${range[0]}-${range[1]}`}>
120
+ {range[0]} - {range[1]}
121
+ </Option>
122
+ </Select>
123
+ </div>
124
+ );
120
125
  }