playbook_ui 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_playground.json

@@ -1,10 +1,31 @@
 {
   "template": "<PbCircleChart{{props}} />",
   "propTargets": {},
-  "defaults": {},
+  "defaults": {
+    "options": {
+      "series": [
+        {
+          "data": [
+            {
+              "name": "Waiting for Calls",
+              "y": 41
+            },
+            {
+              "name": "On Call",
+              "y": 49
+            },
+            {
+              "name": "After Call",
+              "y": 10
+            }
+          ]
+        }
+      ]
+    }
+  },
   "groups": [
     {
-      "name": "Props",
+      "name": "Chart",
       "props": [
         "options"
       ]
@@ -13,9 +34,199 @@
   "presets": [
     {
       "name": "Default",
-      "props": {}
+      "props": {
+        "options": {
+          "series": [
+            {
+              "data": [
+                {
+                  "name": "Waiting for Calls",
+                  "y": 41
+                },
+                {
+                  "name": "On Call",
+                  "y": 49
+                },
+                {
+                  "name": "After Call",
+                  "y": 10
+                }
+              ]
+            }
+          ]
+        }
+      }
+    },
+    {
+      "name": "With Title",
+      "props": {
+        "options": {
+          "title": {
+            "text": "Active Users on Social Media"
+          },
+          "series": [
+            {
+              "data": [
+                {
+                  "name": "Facebook",
+                  "y": 2498
+                },
+                {
+                  "name": "YouTube",
+                  "y": 2000
+                },
+                {
+                  "name": "WhatsApp",
+                  "y": 2000
+                },
+                {
+                  "name": "Instagram",
+                  "y": 1000
+                },
+                {
+                  "name": "Tik Tok",
+                  "y": 800
+                }
+              ]
+            }
+          ]
+        }
+      }
+    },
+    {
+      "name": "Legend",
+      "props": {
+        "options": {
+          "series": [
+            {
+              "data": [
+                {
+                  "name": "Bugs",
+                  "y": 8
+                },
+                {
+                  "name": "Chores",
+                  "y": 1
+                },
+                {
+                  "name": "Stories",
+                  "y": 12
+                }
+              ]
+            }
+          ],
+          "plotOptions": {
+            "pie": {
+              "showInLegend": true
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "Labels",
+      "props": {
+        "options": {
+          "series": [
+            {
+              "data": [
+                {
+                  "name": "Facebook",
+                  "y": 2498
+                },
+                {
+                  "name": "YouTube",
+                  "y": 2000
+                },
+                {
+                  "name": "WhatsApp",
+                  "y": 2000
+                },
+                {
+                  "name": "Instagram",
+                  "y": 1000
+                },
+                {
+                  "name": "Tik Tok",
+                  "y": 800
+                }
+              ]
+            }
+          ],
+          "plotOptions": {
+            "pie": {
+              "dataLabels": {
+                "enabled": true
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "Custom Colors",
+      "props": {
+        "options": {
+          "series": [
+            {
+              "data": [
+                {
+                  "name": "Waiting for Calls",
+                  "y": 41
+                },
+                {
+                  "name": "On Call",
+                  "y": 49
+                },
+                {
+                  "name": "After Call",
+                  "y": 10
+                }
+              ]
+            }
+          ],
+          "plotOptions": {
+            "pie": {
+              "colors": [
+                "#144075",
+                "#005a8b",
+                "#f9b115"
+              ]
+            }
+          }
+        }
+      }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "charts_import": {
+      "when": {},
+      "message": "Highcharts kits are imported from playbook-ui/charts so apps can load the chart bundle only when needed.",
+      "type": "info"
+    },
+    "with_title": {
+      "presetName": "With Title",
+      "message": "Add options.title.text when the chart needs a visible Highcharts title.",
+      "type": "info"
+    },
+    "legend": {
+      "presetName": "Legend",
+      "message": "Circle chart legends are controlled through options.plotOptions.pie.showInLegend.",
+      "type": "info"
+    },
+    "labels": {
+      "presetName": "Labels",
+      "message": "Data labels are enabled through options.plotOptions.pie.dataLabels.enabled.",
+      "type": "info"
+    },
+    "colors": {
+      "presetName": "Custom Colors",
+      "message": "Use options.plotOptions.pie.colors to set individual slice colors.",
+      "type": "info"
+    }
+  },
+  "externalImports": [
+    "import { PbCircleChart } from 'playbook-ui/charts'"
+  ]
 }

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_playground.overrides.json

@@ -0,0 +1,224 @@
+{
+  "template": "<PbCircleChart{{props}} />",
+  "externalImports": [
+    "import { PbCircleChart } from 'playbook-ui/charts'"
+  ],
+  "defaults": {
+    "options": {
+      "series": [
+        {
+          "data": [
+            {
+              "name": "Waiting for Calls",
+              "y": 41
+            },
+            {
+              "name": "On Call",
+              "y": 49
+            },
+            {
+              "name": "After Call",
+              "y": 10
+            }
+          ]
+        }
+      ]
+    }
+  },
+  "groups": [
+    {
+      "name": "Chart",
+      "props": ["options"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "options": {
+          "series": [
+            {
+              "data": [
+                {
+                  "name": "Waiting for Calls",
+                  "y": 41
+                },
+                {
+                  "name": "On Call",
+                  "y": 49
+                },
+                {
+                  "name": "After Call",
+                  "y": 10
+                }
+              ]
+            }
+          ]
+        }
+      }
+    },
+    {
+      "name": "With Title",
+      "props": {
+        "options": {
+          "title": {
+            "text": "Active Users on Social Media"
+          },
+          "series": [
+            {
+              "data": [
+                {
+                  "name": "Facebook",
+                  "y": 2498
+                },
+                {
+                  "name": "YouTube",
+                  "y": 2000
+                },
+                {
+                  "name": "WhatsApp",
+                  "y": 2000
+                },
+                {
+                  "name": "Instagram",
+                  "y": 1000
+                },
+                {
+                  "name": "Tik Tok",
+                  "y": 800
+                }
+              ]
+            }
+          ]
+        }
+      }
+    },
+    {
+      "name": "Legend",
+      "props": {
+        "options": {
+          "series": [
+            {
+              "data": [
+                {
+                  "name": "Bugs",
+                  "y": 8
+                },
+                {
+                  "name": "Chores",
+                  "y": 1
+                },
+                {
+                  "name": "Stories",
+                  "y": 12
+                }
+              ]
+            }
+          ],
+          "plotOptions": {
+            "pie": {
+              "showInLegend": true
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "Labels",
+      "props": {
+        "options": {
+          "series": [
+            {
+              "data": [
+                {
+                  "name": "Facebook",
+                  "y": 2498
+                },
+                {
+                  "name": "YouTube",
+                  "y": 2000
+                },
+                {
+                  "name": "WhatsApp",
+                  "y": 2000
+                },
+                {
+                  "name": "Instagram",
+                  "y": 1000
+                },
+                {
+                  "name": "Tik Tok",
+                  "y": 800
+                }
+              ]
+            }
+          ],
+          "plotOptions": {
+            "pie": {
+              "dataLabels": {
+                "enabled": true
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "Custom Colors",
+      "props": {
+        "options": {
+          "series": [
+            {
+              "data": [
+                {
+                  "name": "Waiting for Calls",
+                  "y": 41
+                },
+                {
+                  "name": "On Call",
+                  "y": 49
+                },
+                {
+                  "name": "After Call",
+                  "y": 10
+                }
+              ]
+            }
+          ],
+          "plotOptions": {
+            "pie": {
+              "colors": ["#144075", "#005a8b", "#f9b115"]
+            }
+          }
+        }
+      }
+    }
+  ],
+  "hints": {
+    "charts_import": {
+      "when": {},
+      "message": "Highcharts kits are imported from playbook-ui/charts so apps can load the chart bundle only when needed.",
+      "type": "info"
+    },
+    "with_title": {
+      "presetName": "With Title",
+      "message": "Add options.title.text when the chart needs a visible Highcharts title.",
+      "type": "info"
+    },
+    "legend": {
+      "presetName": "Legend",
+      "message": "Circle chart legends are controlled through options.plotOptions.pie.showInLegend.",
+      "type": "info"
+    },
+    "labels": {
+      "presetName": "Labels",
+      "message": "Data labels are enabled through options.plotOptions.pie.dataLabels.enabled.",
+      "type": "info"
+    },
+    "colors": {
+      "presetName": "Custom Colors",
+      "message": "Use options.plotOptions.pie.colors to set individual slice colors.",
+      "type": "info"
+    }
+  }
+}

data/app/pb_kits/playbook/pb_pb_circle_chart/kit.schema.json

@@ -8,7 +8,7 @@
   ],
   "props": {
     "options": {
-      "type": "Record<string, unknown>",
+      "type": "GenericObject",
       "platforms": [
         "react",
         "rails"

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_playground.json

@@ -1,10 +1,23 @@
 {
   "template": "<PbGaugeChart{{props}} />",
   "propTargets": {},
-  "defaults": {},
+  "defaults": {
+    "options": {
+      "series": [
+        {
+          "data": [
+            {
+              "name": "Name",
+              "y": 45
+            }
+          ]
+        }
+      ]
+    }
+  },
   "groups": [
     {
-      "name": "Props",
+      "name": "Chart",
       "props": [
         "options"
       ]
@@ -13,9 +26,141 @@
   "presets": [
     {
       "name": "Default",
-      "props": {}
+      "props": {
+        "options": {
+          "series": [
+            {
+              "data": [
+                {
+                  "name": "Name",
+                  "y": 45
+                }
+              ]
+            }
+          ]
+        }
+      }
+    },
+    {
+      "name": "With Title",
+      "props": {
+        "options": {
+          "title": {
+            "text": "Data Usage"
+          },
+          "series": [
+            {
+              "data": [
+                {
+                  "name": "Data Used",
+                  "y": 32
+                }
+              ]
+            }
+          ]
+        }
+      }
+    },
+    {
+      "name": "Custom Color",
+      "props": {
+        "options": {
+          "series": [
+            {
+              "data": [
+                {
+                  "name": "Name",
+                  "y": 67
+                }
+              ]
+            }
+          ],
+          "plotOptions": {
+            "solidgauge": {
+              "borderColor": "#00a4b4"
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "Full Circle",
+      "props": {
+        "options": {
+          "title": {
+            "text": "Seating Capacity"
+          },
+          "series": [
+            {
+              "data": [
+                {
+                  "name": "Capacity",
+                  "y": 75
+                }
+              ]
+            }
+          ],
+          "pane": {
+            "startAngle": 0,
+            "endAngle": 360
+          }
+        }
+      }
+    },
+    {
+      "name": "Min Max",
+      "props": {
+        "options": {
+          "title": {
+            "text": "Completion"
+          },
+          "yAxis": {
+            "min": 0,
+            "max": 200
+          },
+          "series": [
+            {
+              "data": [
+                {
+                  "name": "Complete",
+                  "y": 145
+                }
+              ]
+            }
+          ]
+        }
+      }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "charts_import": {
+      "when": {},
+      "message": "Highcharts kits are imported from playbook-ui/charts so apps can load the chart bundle only when needed.",
+      "type": "info"
+    },
+    "title": {
+      "presetName": "With Title",
+      "message": "Gauge chart titles use options.title.text just like the other Highcharts wrappers.",
+      "type": "info"
+    },
+    "color": {
+      "presetName": "Custom Color",
+      "message": "Use options.plotOptions.solidgauge.borderColor to customize the gauge track color.",
+      "type": "info"
+    },
+    "full_circle": {
+      "presetName": "Full Circle",
+      "message": "Set options.pane.startAngle to 0 and endAngle to 360 for a full-circle gauge.",
+      "type": "info"
+    },
+    "min_max": {
+      "presetName": "Min Max",
+      "message": "Use options.yAxis.min and options.yAxis.max to change the gauge scale.",
+      "type": "info"
+    }
+  },
+  "externalImports": [
+    "import { PbGaugeChart } from 'playbook-ui/charts'"
+  ]
 }