impaktapps-ui-builder 1.0.148 → 1.0.149
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/dist/impaktapps-ui-builder.es.js +41 -5
- package/dist/impaktapps-ui-builder.es.js.map +1 -1
- package/dist/impaktapps-ui-builder.umd.js +3 -3
- package/dist/impaktapps-ui-builder.umd.js.map +1 -1
- package/dist/src/impaktapps-ui-builder/builder/build/buildSegmentChart.d.ts +1 -0
- package/dist/src/impaktapps-ui-builder/builder/build/uischema/card.d.ts +0 -1
- package/package.json +1 -1
- package/src/impaktapps-ui-builder/builder/build/buildProgressBar.ts +28 -21
- package/src/impaktapps-ui-builder/builder/build/buildSegmentChart.ts +34 -0
- package/src/impaktapps-ui-builder/builder/build/buildUiSchema.ts +4 -0
- package/src/impaktapps-ui-builder/builder/build/uischema/buildPropertiesSection.ts +6 -1
- package/src/impaktapps-ui-builder/builder/build/uischema/card.ts +2 -3
- package/src/impaktapps-ui-builder/builder/elements/UiSchema/Component/schema.ts +2 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const buildSegmentChart: (config: any, componentScope: any) => any;
|
package/package.json
CHANGED
|
@@ -1,26 +1,33 @@
|
|
|
1
1
|
import progressBar from "./uischema/progressBar";
|
|
2
2
|
import _ from "lodash";
|
|
3
|
-
import { createLayoutFormat } from "./buildConfig";
|
|
3
|
+
import { createLayoutFormat, flatObjectValueInArray } from "./buildConfig";
|
|
4
4
|
|
|
5
|
-
export const buildProgressBar = (config:any,componentScope:any) =>{
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
5
|
+
export const buildProgressBar = (config: any, componentScope: any) => {
|
|
6
|
+
const ProgressBar: any = _.cloneDeep(progressBar);
|
|
7
|
+
ProgressBar.scope = componentScope;
|
|
8
|
+
if (config.layout) {
|
|
9
|
+
ProgressBar.config.layout = config.layout;
|
|
10
|
+
}
|
|
11
|
+
ProgressBar.config.main.variant = config.variant;
|
|
12
|
+
ProgressBar.config.main.heading = config.label;
|
|
13
|
+
if (config.pieArcColors) {
|
|
14
|
+
ProgressBar.config.main.colorRange = flatObjectValueInArray(config.pieArcColors);
|
|
15
|
+
}
|
|
16
|
+
if (config.size) {
|
|
17
|
+
ProgressBar.config.main.size = Number(config.size);
|
|
18
|
+
}
|
|
19
|
+
if (config.bottomLabel_3) {
|
|
20
|
+
ProgressBar.config.main.bottomLabel_3 = config.bottomLabel_3;
|
|
21
|
+
}
|
|
22
|
+
if (config.layout) {
|
|
23
|
+
ProgressBar.config.layout = createLayoutFormat(config.layout)
|
|
24
|
+
}
|
|
25
|
+
if (config.bottomLabel_2) {
|
|
26
|
+
ProgressBar.config.main.bottomLabel_2 = config.bottomLabel_2;
|
|
27
|
+
}
|
|
28
|
+
if (config.bottomLabel_1) {
|
|
29
|
+
ProgressBar.config.main.bottomLabel_1 = config.bottomLabel_1;
|
|
30
|
+
}
|
|
31
|
+
return ProgressBar;
|
|
25
32
|
|
|
26
33
|
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import _ from "lodash";
|
|
2
|
+
import { createLayoutFormat, flatObjectValueInArray } from "./buildConfig";
|
|
3
|
+
const segmentUISchema = {
|
|
4
|
+
type: "Control",
|
|
5
|
+
scope: "#/properties/SegmentChart",
|
|
6
|
+
options: {
|
|
7
|
+
widget: "SegmentChart",
|
|
8
|
+
},
|
|
9
|
+
|
|
10
|
+
config: {
|
|
11
|
+
layout: { xs: 12, sm: 12, md: 12, lg: 12 },
|
|
12
|
+
main: {
|
|
13
|
+
//colorRange
|
|
14
|
+
},
|
|
15
|
+
},
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
export const buildSegmentChart = (config,componentScope) => {
|
|
21
|
+
const segment: any = _.cloneDeep(segmentUISchema);
|
|
22
|
+
segment.scope = componentScope;
|
|
23
|
+
|
|
24
|
+
if(config.layout){
|
|
25
|
+
segment.config.layout = createLayoutFormat(config.layout)
|
|
26
|
+
}
|
|
27
|
+
if (config.pieArcColors) {
|
|
28
|
+
segment.config.main.colorRange = flatObjectValueInArray(config.pieArcColors);
|
|
29
|
+
}
|
|
30
|
+
if (config.style) {
|
|
31
|
+
segment.config.style = JSON.parse(config.style)
|
|
32
|
+
}
|
|
33
|
+
return segment;
|
|
34
|
+
};
|
|
@@ -40,6 +40,7 @@ import { buildTreeMap } from "./buildTreeMap";
|
|
|
40
40
|
import { buildThoughtOfTheDay } from "./buildThoughtOfTheDay";
|
|
41
41
|
import { buildHorizontalLayout } from "./buildHorizontalLayout";
|
|
42
42
|
import { buildImage } from "./buildImage";
|
|
43
|
+
import { buildSegmentChart } from "./buildSegmentChart";
|
|
43
44
|
export let schema = {
|
|
44
45
|
type: "object",
|
|
45
46
|
properties: {},
|
|
@@ -263,6 +264,9 @@ const buildUiSchema = (config: any, store?: any) => {
|
|
|
263
264
|
case "Image":
|
|
264
265
|
elements = buildImage(config, componentScope);
|
|
265
266
|
break;
|
|
267
|
+
case "SegmentChart":
|
|
268
|
+
elements = buildSegmentChart(config, componentScope);
|
|
269
|
+
break;
|
|
266
270
|
default:
|
|
267
271
|
schema = {
|
|
268
272
|
type: "object",
|
|
@@ -389,7 +389,12 @@ export const buildPropertiesSection = function (type: String) {
|
|
|
389
389
|
getInputField("bottomLabel_1", "First BottomLabel"),
|
|
390
390
|
getInputField("bottomLabel_2", "Second BottomLabel"),
|
|
391
391
|
getInputField("bottomLabel_3", "Third BottomLabel"),
|
|
392
|
-
|
|
392
|
+
getInputField("size", "Size"),
|
|
393
|
+
getSelectField("variant", "Variant", [
|
|
394
|
+
{ label: "Circular", value: "circular" },
|
|
395
|
+
{ label: "Horizontal", value: "horizontal" },
|
|
396
|
+
]),
|
|
397
|
+
getArrayControl("pieArcColors", "color","Color"),
|
|
393
398
|
];
|
|
394
399
|
break;
|
|
395
400
|
case "card":
|
|
@@ -123,8 +123,8 @@ export default function Card(theme){
|
|
|
123
123
|
style: {
|
|
124
124
|
color: "black",
|
|
125
125
|
display: "flex",
|
|
126
|
-
fontSize: { xs: "
|
|
127
|
-
fontWeight: "
|
|
126
|
+
fontSize: { xs: "24px", md: "25px" },
|
|
127
|
+
fontWeight: "bold",
|
|
128
128
|
background: "inherit",
|
|
129
129
|
justifyContent: "flex-start",
|
|
130
130
|
width: "auto",
|
|
@@ -160,7 +160,6 @@ export default function Card(theme){
|
|
|
160
160
|
style: {
|
|
161
161
|
color: "black",
|
|
162
162
|
fontSize: "16px",
|
|
163
|
-
fontWeight: "400",
|
|
164
163
|
justifyContent: "center",
|
|
165
164
|
whiteSpace: "nowrap",
|
|
166
165
|
overflowX: "auto",
|
|
@@ -41,7 +41,8 @@ export const ComponentSchema: any = {
|
|
|
41
41
|
{ title: "Text Area", const: "TextArea" },
|
|
42
42
|
{ title: "Timer", const: "Timer" },
|
|
43
43
|
{ title: "Upload", const: "UploadFile" },
|
|
44
|
-
{ title: "Tree ", const: "TreeMap" }
|
|
44
|
+
{ title: "Tree ", const: "TreeMap" },//SegmentChart
|
|
45
|
+
{ title: "SegmentChart ", const: "SegmentChart" },
|
|
45
46
|
{ title: "Column Group", const: "ColumnGroup" },
|
|
46
47
|
{ title: "Thought of the day", const: "Thought" },
|
|
47
48
|
],
|