@stechquick/studio-cli 4.2.0-1 → 4.2.0-3

package/dist/studio-cli/kits/mobile-app-kit/.ai-kit/ui-kit/examples/style/PieChart.qjson

@@ -0,0 +1,1103 @@
+let pjson = {
+	"opt": { "V": 2.5 },
+	"pJson": [
+		{
+			"T": "Messaging",
+			"P": {
+				"ID": {
+					"H": "msgPieChart",
+					"T": "prop"
+				}
+			},
+			"E": {},
+			"C": {},
+			"_Editor": {
+				"eID": "msgPieChart"
+			},
+			"O": {
+				"cType": "child"
+			},
+			"S": {
+				"xs-xl": {
+					"pageBackgroundColor": "#ffffff",
+					"statusBarColor": "#ffffff"
+				}
+			}
+		},
+		{
+			"T": "VContainer",
+			"P": {
+				"ID": {
+					"H": "EdtrComp_3",
+					"T": "prop"
+				},
+				"class": {
+					"H": "'container container--fluid'",
+					"T": "class"
+				},
+				"visible": {
+					"H": "true",
+					"T": "prop"
+				}
+			},
+			"E": {},
+			"C": {
+				"default": {
+					"c": [
+						{
+							"T": "VRow",
+							"P": {
+								"ID": {
+									"H": "EdtrComp_13",
+									"T": "prop"
+								}
+							},
+							"E": {},
+							"C": {
+								"default": {
+									"c": [
+										{
+											"T": "VCol",
+											"C": {
+												"default": {
+													"c": [
+														{
+															"T": "Doughnut",
+															"P": {
+																"ID": {
+																	"H": "pieChart",
+																	"T": "prop"
+																},
+																"backgroundColor": {
+																	"H": "['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)']",
+																	"T": "prop"
+																},
+																"data": {
+																	"H": "[99, 70, 31, 93, 91]",
+																	"T": "prop"
+																},
+																"labels": {
+																	"H": "['Red', 'Orange', 'Yellow', 'Green','Blue']",
+																	"T": "prop"
+																},
+																"title": {
+																	"H": "'Sample Doughnut Chart'",
+																	"T": "prop"
+																},
+																"cutoutPercentage": {
+																	"H": "0",
+																	"T": "prop"
+																},
+																"width": {
+																	"H": "'40vw'",
+																	"T": "prop"
+																},
+																"labelAlign": {
+																	"H": "'center'",
+																	"T": "prop"
+																},
+																"labelAnchor": {
+																	"H": "'center'",
+																	"T": "prop"
+																},
+																"labelBorderRadius": {
+																	"H": "25",
+																	"T": "prop"
+																},
+																"labelBorderWidth": {
+																	"H": "2",
+																	"T": "prop"
+																},
+																"labelClamp": {
+																	"H": "false",
+																	"T": "prop"
+																},
+																"labelClip": {
+																	"H": "false",
+																	"T": "prop"
+																},
+																"labelDisplay": {
+																	"H": "true",
+																	"T": "prop"
+																},
+																"labelFontWeight": {
+																	"H": "'bold'",
+																	"T": "prop"
+																},
+																"labelFontLineHeight": {
+																	"H": "'1.2'",
+																	"T": "prop"
+																},
+																"labelOffset": {
+																	"H": "'4'",
+																	"T": "prop"
+																},
+																"labelOpacity": {
+																	"H": "1",
+																	"T": "prop"
+																},
+																"labelPaddingTop": {
+																	"H": "6",
+																	"T": "prop"
+																},
+																"labelPaddingRight": {
+																	"H": "6",
+																	"T": "prop"
+																},
+																"labelPaddingBottom": {
+																	"H": "6",
+																	"T": "prop"
+																},
+																"labelPaddingLeft": {
+																	"H": "6",
+																	"T": "prop"
+																},
+																"labelRotation": {
+																	"H": "0",
+																	"T": "prop"
+																},
+																"labelTextAlign": {
+																	"H": "'start'",
+																	"T": "prop"
+																},
+																"labelTextStrokeWidth": {
+																	"H": "0",
+																	"T": "prop"
+																},
+																"labelTextShadowBlur": {
+																	"H": "0",
+																	"T": "prop"
+																},
+																"labelBorderColor": {
+																	"H": "'white'",
+																	"T": "prop"
+																},
+																"labelColor": {
+																	"H": "'white'",
+																	"T": "prop"
+																},
+																"borderColor": {
+																	"H": "['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)']",
+																	"T": "prop"
+																}
+															},
+															"E": {
+																"labelFormatter": {
+																	"H": "//context : contextual information see-> https://master--chartjs-plugin-datalabels.netlify.app/guide/options.html#option-context\r\n//value : the current data value\r\nquick.return(\"val\\n\"+ value);",
+																	"PE": true,
+																	"P": "value:any,context:{ active: boolean; dataIndex: number; chart : any; dataset: any; datasetIndex:number; }",
+																	"HL": "TS"
+																}
+															},
+															"C": {},
+															"_Editor": {
+																"eID": "EdtrComp_77"
+															},
+															"O": {
+																"cType": "slot"
+															}
+														}
+													],
+													"cType": "slot"
+												}
+											},
+											"E": {},
+											"P": {
+												"ID": {
+													"H": "EdtrComp_16",
+													"T": "prop"
+												}
+											},
+											"_Editor": {
+												"eID": "EdtrComp_16"
+											},
+											"S": {
+												"xs-xl": {
+													"col": "12",
+													"flexDirection": "column"
+												}
+											},
+											"O": {
+												"cType": "slot"
+											}
+										}
+									],
+									"cType": "slot"
+								}
+							},
+							"_Editor": {
+								"eID": "EdtrComp_13"
+							},
+							"S": {
+								"xs-xl": {}
+							},
+							"O": {
+								"cType": "slot"
+							}
+						},
+						{
+							"T": "VRow",
+							"P": {
+								"ID": {
+									"H": "EdtrComp_37",
+									"T": "prop"
+								}
+							},
+							"E": {},
+							"C": {
+								"default": {
+									"c": [
+										{
+											"T": "VCol",
+											"C": {
+												"default": {
+													"c": [
+														{
+															"T": "VBtn",
+															"P": {
+																"ID": {
+																	"H": "EdtrComp_4",
+																	"T": "prop"
+																},
+																"visible": {
+																	"H": "true",
+																	"T": "prop"
+																}
+															},
+															"E": {
+																"click": {
+																	"H": "quick.EM.trace(components.pieChart);\r\n\r\nlet pieData: any = components.pieChart.data;\r\n(<any[]>pieData.labels).push('data #' + (<any[]>pieData.labels).length);\r\n\r\n(<any[]>pieData.datasets).forEach(item => {\r\n    let randomInt = getRandomInt(1, 99);\r\n    (<any[]>item.data).push(randomInt);\r\n    (<any[]>item.backgroundColor).push('rgba(153, 102, 255, 0.2)');\r\n    (<any[]>item.borderColor).push('rgba(153, 102, 255, 1)');\r\n});\r\n\r\n(<any>components.pieChart).update();\r\n\r\nfunction getRandomInt(min, max) {\r\n    min = Math.ceil(min);\r\n    max = Math.floor(max);\r\n    return Math.floor(Math.random() * (max - min) + min); //The maximum is exclusive and the minimum is inclusive\r\n}",
+																	"P": "mouseEvent:unknown | undefined",
+																	"HL": "TS"
+																}
+															},
+															"C": {
+																"default": {
+																	"c": [
+																		{
+																			"T": "QLabel",
+																			"C": {},
+																			"E": {},
+																			"P": {
+																				"ID": {
+																					"H": "EdtrComp_11",
+																					"T": "prop"
+																				},
+																				"text": {
+																					"H": "'Add Data'",
+																					"T": "prop"
+																				}
+																			},
+																			"_Editor": {
+																				"eID": "EdtrComp_11"
+																			},
+																			"S": {
+																				"xs-xl": {
+																					"fontColor": "#000000",
+																					"fontFamily": "Roboto",
+																					"fontSize": "16px",
+																					"fontStyle": "normal",
+																					"fontWeight": "400",
+																					"combinedFont": "Roboto-Regular",
+																					"lineHeight": "20px"
+																				}
+																			},
+																			"O": {
+																				"cType": "child"
+																			}
+																		}
+																	],
+																	"cType": "slot"
+																}
+															},
+															"_Editor": {
+																"eID": "EdtrComp_4"
+															},
+															"S": {
+																"xs-xl": {}
+															},
+															"O": {
+																"cType": "slot"
+															}
+														},
+														{
+															"T": "VBtn",
+															"P": {
+																"ID": {
+																	"H": "EdtrComp_9",
+																	"T": "prop"
+																}
+															},
+															"E": {
+																"click": {
+																	"H": "quick.EM.trace(components.pieChart);\r\n\r\nlet pieData: any = components.pieChart.data;\r\n(<any[]>pieData.labels).splice(-1,1); // array'in en sondaki itemı silinir.\r\n\r\n(<any[]>pieData.datasets).forEach(item => {\r\n    quick.EM.trace(item);\r\n    (<any[]>item.data).pop(); // array'in en sondaki itemı silinir.\r\n});\r\n\r\n(<any>components.pieChart).update();\r\n",
+																	"P": "mouseEvent:unknown | undefined",
+																	"HL": "TS"
+																}
+															},
+															"C": {
+																"default": {
+																	"c": [
+																		{
+																			"T": "QLabel",
+																			"C": {},
+																			"E": {},
+																			"P": {
+																				"ID": {
+																					"H": "EdtrComp_10",
+																					"T": "prop"
+																				},
+																				"text": {
+																					"H": "'Remove Data'",
+																					"T": "prop"
+																				}
+																			},
+																			"_Editor": {
+																				"eID": "EdtrComp_10"
+																			},
+																			"S": {
+																				"xs-xl": {
+																					"fontColor": "#000000",
+																					"fontFamily": "Roboto",
+																					"fontSize": "16px",
+																					"fontStyle": "normal",
+																					"fontWeight": "400",
+																					"combinedFont": "Roboto-Regular",
+																					"lineHeight": "20px"
+																				}
+																			},
+																			"O": {
+																				"cType": "child"
+																			}
+																		}
+																	],
+																	"cType": "slot"
+																}
+															},
+															"_Editor": {
+																"eID": "EdtrComp_9"
+															},
+															"S": {
+																"xs-xl": {}
+															},
+															"O": {
+																"cType": "slot"
+															}
+														},
+														{
+															"T": "VBtn",
+															"P": {
+																"ID": {
+																	"H": "EdtrComp_6",
+																	"T": "prop"
+																}
+															},
+															"E": {
+																"click": {
+																	"H": "\r\nquick.EM.trace(components.pieChart);\r\n\r\nlet backgroundColors = ['rgba(1, 217, 66, 0.2)', 'rgba(72, 26, 46,0.2)', 'rgba(34, 101, 157, 0.2)', 'rgba(176, 196, 238, 0.2)', 'rgba(11, 177, 187, 0.2)', 'rgba(88, 225, 98,0.2)', 'rgba(162, 247, 200, 0.2)'];\r\nlet borderColors = ['rgba(1, 217, 66, 1)', 'rgba(72, 26, 46,1)', 'rgba(34, 101, 157, 1)', 'rgba(176, 196, 238, 1)', 'rgba(11, 177, 187, 1)', 'rgba(88, 225, 98,1)', 'rgba(162, 247, 200,1)'];\r\n\r\nlet pieData: any = components.pieChart.data;\r\n\r\nlet newDataSet: any = {};\r\nnewDataSet.label = 'Dataset ' + ((<any[]>pieData.datasets).length + 1);\r\nnewDataSet.backgroundColor = backgroundColors;\r\nnewDataSet.borderColor = borderColors;\r\nnewDataSet.borderWidth = 1;\r\nnewDataSet.data = [];\r\n\r\n(<any[]>pieData.labels).forEach(item => {\r\n    let randomInt = getRandomInt(1, 20);\r\n    (<any[]>newDataSet.data).push(randomInt);\r\n});\r\n\r\n(<any[]>pieData.datasets).push(newDataSet);\r\n(<any>components.pieChart).update();\r\n\r\nfunction getRandomInt(min, max) {\r\n    min = Math.ceil(min);\r\n    max = Math.floor(max);\r\n    return Math.floor(Math.random() * (max - min) + min); //The maximum is exclusive and the minimum is inclusive\r\n}",
+																	"P": "mouseEvent:unknown | undefined",
+																	"HL": "TS"
+																}
+															},
+															"C": {
+																"default": {
+																	"c": [
+																		{
+																			"T": "QLabel",
+																			"C": {},
+																			"E": {},
+																			"P": {
+																				"ID": {
+																					"H": "EdtrComp_5",
+																					"T": "prop"
+																				},
+																				"text": {
+																					"H": "'Add Dataset'",
+																					"T": "prop"
+																				}
+																			},
+																			"_Editor": {
+																				"eID": "EdtrComp_5"
+																			},
+																			"S": {
+																				"xs-xl": {
+																					"fontColor": "#000000",
+																					"fontFamily": "Roboto",
+																					"fontSize": "16px",
+																					"fontStyle": "normal",
+																					"fontWeight": "400",
+																					"combinedFont": "Roboto-Regular",
+																					"lineHeight": "20px"
+																				}
+																			},
+																			"O": {
+																				"cType": "child"
+																			}
+																		}
+																	],
+																	"cType": "slot"
+																}
+															},
+															"_Editor": {
+																"eID": "EdtrComp_6"
+															},
+															"S": {
+																"xs-xl": {}
+															},
+															"O": {
+																"cType": "slot"
+															}
+														},
+														{
+															"T": "VBtn",
+															"P": {
+																"ID": {
+																	"H": "EdtrComp_7",
+																	"T": "prop"
+																}
+															},
+															"E": {
+																"click": {
+																	"H": "\r\nquick.EM.trace(components.pieChart);\r\n\r\nlet pieData: any = components.pieChart.data;\r\n(<any[]>pieData.datasets).splice(-1); // array'in en sondaki itemı silinir.\r\n(<any>components.pieChart).update();\r\n",
+																	"P": "mouseEvent:unknown | undefined",
+																	"HL": "TS"
+																}
+															},
+															"C": {
+																"default": {
+																	"c": [
+																		{
+																			"T": "QLabel",
+																			"C": {},
+																			"E": {},
+																			"P": {
+																				"ID": {
+																					"H": "EdtrComp_8",
+																					"T": "prop"
+																				},
+																				"text": {
+																					"H": "'Remove Dataset'",
+																					"T": "prop"
+																				}
+																			},
+																			"_Editor": {
+																				"eID": "EdtrComp_8"
+																			},
+																			"S": {
+																				"xs-xl": {
+																					"fontColor": "#000000",
+																					"fontFamily": "Roboto",
+																					"fontSize": "16px",
+																					"fontStyle": "normal",
+																					"fontWeight": "400",
+																					"combinedFont": "Roboto-Regular",
+																					"lineHeight": "20px"
+																				}
+																			},
+																			"O": {
+																				"cType": "child"
+																			}
+																		}
+																	],
+																	"cType": "slot"
+																}
+															},
+															"_Editor": {
+																"eID": "EdtrComp_7"
+															},
+															"S": {
+																"xs-xl": {}
+															},
+															"O": {
+																"cType": "slot"
+															}
+														}
+													],
+													"cType": "slot"
+												}
+											},
+											"E": {},
+											"P": {
+												"ID": {
+													"H": "EdtrComp_42",
+													"T": "prop"
+												}
+											},
+											"_Editor": {
+												"eID": "EdtrComp_42"
+											},
+											"S": {
+												"xs-xl": {
+													"marginBottom": "20px"
+												}
+											},
+											"O": {
+												"cType": "slot"
+											}
+										}
+									],
+									"cType": "slot"
+								}
+							},
+							"_Editor": {
+								"eID": "EdtrComp_37"
+							},
+							"S": {
+								"xs-xl": {}
+							},
+							"O": {
+								"cType": "slot"
+							}
+						},
+						{
+							"T": "VRow",
+							"P": {
+								"ID": {
+									"H": "EdtrComp_95",
+									"T": "prop"
+								}
+							},
+							"E": {},
+							"C": {
+								"default": {
+									"c": [
+										{
+											"T": "VCol",
+											"C": {
+												"default": {
+													"c": [
+														{
+															"T": "Doughnut",
+															"P": {
+																"ID": {
+																	"H": "EdtrComp_104",
+																	"T": "prop"
+																},
+																"backgroundColor": {
+																	"H": "['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)']",
+																	"T": "prop"
+																},
+																"data": {
+																	"H": "[99, 70, 31, 93, 91]",
+																	"T": "prop"
+																},
+																"labels": {
+																	"H": "['Red', 'Orange', 'Yellow', 'Green','Blue']",
+																	"T": "prop"
+																},
+																"title": {
+																	"H": "'Sample Doughnut Chart'",
+																	"T": "prop"
+																},
+																"cutoutPercentage": {
+																	"H": "0",
+																	"T": "prop"
+																},
+																"width": {
+																	"H": "'40vw'",
+																	"T": "prop"
+																},
+																"labelAlign": {
+																	"H": "'center'",
+																	"T": "prop"
+																},
+																"labelAnchor": {
+																	"H": "'center'",
+																	"T": "prop"
+																},
+																"labelBorderRadius": {
+																	"H": "0",
+																	"T": "prop"
+																},
+																"labelBorderWidth": {
+																	"H": "0",
+																	"T": "prop"
+																},
+																"labelClamp": {
+																	"H": "false",
+																	"T": "prop"
+																},
+																"labelClip": {
+																	"H": "false",
+																	"T": "prop"
+																},
+																"labelDisplay": {
+																	"H": "false",
+																	"T": "prop"
+																},
+																"labelFontWeight": {
+																	"H": "'normal'",
+																	"T": "prop"
+																},
+																"labelFontLineHeight": {
+																	"H": "'1.2'",
+																	"T": "prop"
+																},
+																"labelOffset": {
+																	"H": "'4'",
+																	"T": "prop"
+																},
+																"labelOpacity": {
+																	"H": "1",
+																	"T": "prop"
+																},
+																"labelPaddingTop": {
+																	"H": "4",
+																	"T": "prop"
+																},
+																"labelPaddingRight": {
+																	"H": "4",
+																	"T": "prop"
+																},
+																"labelPaddingBottom": {
+																	"H": "4",
+																	"T": "prop"
+																},
+																"labelPaddingLeft": {
+																	"H": "4",
+																	"T": "prop"
+																},
+																"labelRotation": {
+																	"H": "0",
+																	"T": "prop"
+																},
+																"labelTextAlign": {
+																	"H": "'start'",
+																	"T": "prop"
+																},
+																"labelTextStrokeWidth": {
+																	"H": "0",
+																	"T": "prop"
+																},
+																"labelTextShadowBlur": {
+																	"H": "0",
+																	"T": "prop"
+																},
+																"borderColor": {
+																	"H": "['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)']",
+																	"T": "prop"
+																}
+															},
+															"E": {},
+															"C": {},
+															"_Editor": {
+																"eID": "EdtrComp_104"
+															},
+															"O": {
+																"cType": "slot"
+															}
+														}
+													],
+													"cType": "slot"
+												}
+											},
+											"E": {},
+											"P": {
+												"ID": {
+													"H": "EdtrComp_102",
+													"T": "prop"
+												}
+											},
+											"_Editor": {
+												"eID": "EdtrComp_102"
+											},
+											"S": {
+												"xs-xl": {
+													"marginBottom": "20px"
+												}
+											},
+											"O": {
+												"cType": "slot"
+											}
+										}
+									],
+									"cType": "slot"
+								}
+							},
+							"_Editor": {
+								"eID": "EdtrComp_95"
+							},
+							"S": {
+								"xs-xl": {}
+							},
+							"O": {
+								"cType": "slot"
+							}
+						},
+						{
+							"T": "VRow",
+							"P": {
+								"ID": {
+									"H": "EdtrComp_117",
+									"T": "prop"
+								}
+							},
+							"E": {},
+							"C": {
+								"default": {
+									"c": [
+										{
+											"T": "VCol",
+											"C": {
+												"default": {
+													"c": [
+														{
+															"T": "Doughnut",
+															"P": {
+																"ID": {
+																	"H": "EdtrComp_119",
+																	"T": "prop"
+																},
+																"backgroundColor": {
+																	"H": "['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)']",
+																	"T": "prop"
+																},
+																"data": {
+																	"H": "[99, 70, 31, 93, 91]",
+																	"T": "prop"
+																},
+																"labels": {
+																	"H": "['Red', 'Orange', 'Yellow', 'Green','Blue']",
+																	"T": "prop"
+																},
+																"title": {
+																	"H": "'Sample Doughnut Chart'",
+																	"T": "prop"
+																},
+																"cutoutPercentage": {
+																	"H": "0",
+																	"T": "prop"
+																},
+																"width": {
+																	"H": "'40vw'",
+																	"T": "prop"
+																},
+																"labelAlign": {
+																	"H": "'center'",
+																	"T": "prop"
+																},
+																"labelAnchor": {
+																	"H": "'center'",
+																	"T": "prop"
+																},
+																"labelBorderRadius": {
+																	"H": "0",
+																	"T": "prop"
+																},
+																"labelBorderWidth": {
+																	"H": "0",
+																	"T": "prop"
+																},
+																"labelClamp": {
+																	"H": "false",
+																	"T": "prop"
+																},
+																"labelClip": {
+																	"H": "false",
+																	"T": "prop"
+																},
+																"labelDisplay": {
+																	"H": "true",
+																	"T": "prop"
+																},
+																"labelFontWeight": {
+																	"H": "'normal'",
+																	"T": "prop"
+																},
+																"labelFontLineHeight": {
+																	"H": "'1.2'",
+																	"T": "prop"
+																},
+																"labelOffset": {
+																	"H": "'4'",
+																	"T": "prop"
+																},
+																"labelOpacity": {
+																	"H": "1",
+																	"T": "prop"
+																},
+																"labelPaddingTop": {
+																	"H": "4",
+																	"T": "prop"
+																},
+																"labelPaddingRight": {
+																	"H": "4",
+																	"T": "prop"
+																},
+																"labelPaddingBottom": {
+																	"H": "4",
+																	"T": "prop"
+																},
+																"labelPaddingLeft": {
+																	"H": "4",
+																	"T": "prop"
+																},
+																"labelRotation": {
+																	"H": "0",
+																	"T": "prop"
+																},
+																"labelTextAlign": {
+																	"H": "'start'",
+																	"T": "prop"
+																},
+																"labelTextStrokeWidth": {
+																	"H": "0",
+																	"T": "prop"
+																},
+																"labelTextShadowBlur": {
+																	"H": "0",
+																	"T": "prop"
+																},
+																"borderColor": {
+																	"H": "['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)']",
+																	"T": "prop"
+																}
+															},
+															"E": {},
+															"C": {},
+															"_Editor": {
+																"eID": "EdtrComp_119"
+															},
+															"O": {
+																"cType": "slot"
+															}
+														}
+													],
+													"cType": "slot"
+												}
+											},
+											"E": {},
+											"P": {
+												"ID": {
+													"H": "EdtrComp_118",
+													"T": "prop"
+												}
+											},
+											"_Editor": {
+												"eID": "EdtrComp_118"
+											},
+											"S": {
+												"xs-xl": {
+													"marginBottom": "20px"
+												}
+											},
+											"O": {
+												"cType": "slot"
+											}
+										}
+									],
+									"cType": "slot"
+								}
+							},
+							"_Editor": {
+								"eID": "EdtrComp_117"
+							},
+							"S": {
+								"xs-xl": {}
+							},
+							"O": {
+								"cType": "slot"
+							}
+						},
+						{
+							"T": "VRow",
+							"P": {
+								"ID": {
+									"H": "EdtrComp_136",
+									"T": "prop"
+								}
+							},
+							"E": {},
+							"C": {
+								"default": {
+									"c": [
+										{
+											"T": "VCol",
+											"C": {
+												"default": {
+													"c": [
+														{
+															"T": "Doughnut",
+															"P": {
+																"ID": {
+																	"H": "EdtrComp_138",
+																	"T": "prop"
+																},
+																"backgroundColor": {
+																	"H": "['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)']",
+																	"T": "prop"
+																},
+																"data": {
+																	"H": "[99, 70, 31, 93, 91]",
+																	"T": "prop"
+																},
+																"labels": {
+																	"H": "['Red', 'Orange', 'Yellow', 'Green','Blue']",
+																	"T": "prop"
+																},
+																"title": {
+																	"H": "'Sample Doughnut Chart'",
+																	"T": "prop"
+																},
+																"cutoutPercentage": {
+																	"H": "0",
+																	"T": "prop"
+																},
+																"width": {
+																	"H": "'40vw'",
+																	"T": "prop"
+																},
+																"labelAlign": {
+																	"H": "'center'",
+																	"T": "prop"
+																},
+																"labelAnchor": {
+																	"H": "'center'",
+																	"T": "prop"
+																},
+																"labelBorderRadius": {
+																	"H": "0",
+																	"T": "prop"
+																},
+																"labelBorderWidth": {
+																	"H": "0",
+																	"T": "prop"
+																},
+																"labelClamp": {
+																	"H": "false",
+																	"T": "prop"
+																},
+																"labelClip": {
+																	"H": "false",
+																	"T": "prop"
+																},
+																"labelDisplay": {
+																	"H": "true",
+																	"T": "prop"
+																},
+																"labelFontWeight": {
+																	"H": "'normal'",
+																	"T": "prop"
+																},
+																"labelFontLineHeight": {
+																	"H": "'1.2'",
+																	"T": "prop"
+																},
+																"labelOffset": {
+																	"H": "'4'",
+																	"T": "prop"
+																},
+																"labelOpacity": {
+																	"H": "1",
+																	"T": "prop"
+																},
+																"labelPaddingTop": {
+																	"H": "4",
+																	"T": "prop"
+																},
+																"labelPaddingRight": {
+																	"H": "4",
+																	"T": "prop"
+																},
+																"labelPaddingBottom": {
+																	"H": "4",
+																	"T": "prop"
+																},
+																"labelPaddingLeft": {
+																	"H": "4",
+																	"T": "prop"
+																},
+																"labelRotation": {
+																	"H": "0",
+																	"T": "prop"
+																},
+																"labelTextAlign": {
+																	"H": "'start'",
+																	"T": "prop"
+																},
+																"labelTextStrokeWidth": {
+																	"H": "0",
+																	"T": "prop"
+																},
+																"labelTextShadowBlur": {
+																	"H": "0",
+																	"T": "prop"
+																},
+																"borderColor": {
+																	"H": "['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)']",
+																	"T": "prop"
+																}
+															},
+															"E": {
+																"labelFormatter": {
+																	"H": "//context : contextual information see-> https://master--chartjs-plugin-datalabels.netlify.app/guide/options.html#option-context\r\n//value : the current data value\r\nquick.return(value + '%');",
+																	"PE": true,
+																	"P": "value:any,context:{ active: boolean; dataIndex: number; chart : any; dataset: any; datasetIndex:number; }",
+																	"HL": "TS"
+																}
+															},
+															"C": {},
+															"_Editor": {
+																"eID": "EdtrComp_138"
+															},
+															"O": {
+																"cType": "slot"
+															}
+														}
+													],
+													"cType": "slot"
+												}
+											},
+											"E": {},
+											"P": {
+												"ID": {
+													"H": "EdtrComp_137",
+													"T": "prop"
+												}
+											},
+											"_Editor": {
+												"eID": "EdtrComp_137"
+											},
+											"S": {
+												"xs-xl": {
+													"col": "12",
+													"flexDirection": "column"
+												}
+											},
+											"O": {
+												"cType": "slot"
+											}
+										}
+									],
+									"cType": "slot"
+								}
+							},
+							"_Editor": {
+								"eID": "EdtrComp_136"
+							},
+							"S": {
+								"xs-xl": {}
+							},
+							"O": {
+								"cType": "slot"
+							}
+						}
+					],
+					"cType": "slot"
+				}
+			},
+			"_Editor": {
+				"eID": "EdtrComp_3"
+			},
+			"S": {
+				"xs-xl": {}
+			},
+			"O": {
+				"cType": "slot"
+			}
+		}
+	],
+	"lrids": {},
+	"description": {}
+};
+export default pjson