playbook_ui_docs 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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

@@ -0,0 +1,245 @@
+{
+  "template": "<PbBarGraph{{props}} />",
+  "externalImports": [
+    "import { PbBarGraph } from 'playbook-ui/charts'"
+  ],
+  "defaults": {
+    "options": {
+      "series": [
+        {
+          "name": "Installation",
+          "data": [1475, 200, 3000, 654, 656]
+        },
+        {
+          "name": "Manufacturing",
+          "data": [4434, 524, 2320, 440, 500]
+        },
+        {
+          "name": "Sales & Distribution",
+          "data": [3387, 743, 1344, 434, 440]
+        },
+        {
+          "name": "Project Development",
+          "data": [3227, 878, 999, 780, 1000]
+        },
+        {
+          "name": "Other",
+          "data": [1111, 677, 3245, 500, 200]
+        }
+      ],
+      "title": {
+        "text": "Solar Employment Growth by Sector, 2010-2016"
+      },
+      "subtitle": {
+        "text": "Source: thesolarfoundation.com"
+      },
+      "xAxis": {
+        "categories": ["Jan", "Feb", "Mar", "Apr", "May"]
+      },
+      "yAxis": {
+        "title": {
+          "text": "Number of Employees"
+        }
+      }
+    }
+  },
+  "groups": [
+    {
+      "name": "Chart",
+      "props": ["options"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "options": {
+          "series": [
+            {
+              "name": "Installation",
+              "data": [1475, 200, 3000, 654, 656]
+            },
+            {
+              "name": "Manufacturing",
+              "data": [4434, 524, 2320, 440, 500]
+            },
+            {
+              "name": "Sales & Distribution",
+              "data": [3387, 743, 1344, 434, 440]
+            },
+            {
+              "name": "Project Development",
+              "data": [3227, 878, 999, 780, 1000]
+            },
+            {
+              "name": "Other",
+              "data": [1111, 677, 3245, 500, 200]
+            }
+          ],
+          "title": {
+            "text": "Solar Employment Growth by Sector, 2010-2016"
+          },
+          "subtitle": {
+            "text": "Source: thesolarfoundation.com"
+          },
+          "xAxis": {
+            "categories": ["Jan", "Feb", "Mar", "Apr", "May"]
+          },
+          "yAxis": {
+            "title": {
+              "text": "Number of Employees"
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "Horizontal",
+      "props": {
+        "options": {
+          "chart": {
+            "type": "bar"
+          },
+          "title": {
+            "text": "Historic World Population by Region",
+            "align": "left"
+          },
+          "subtitle": {
+            "text": "Source: Wikipedia.org",
+            "align": "left"
+          },
+          "xAxis": {
+            "categories": ["Africa", "America", "Asia", "Europe"],
+            "lineWidth": 0
+          },
+          "yAxis": {
+            "title": {
+              "text": ""
+            }
+          },
+          "tooltip": {
+            "valueSuffix": " millions"
+          },
+          "plotOptions": {
+            "bar": {
+              "dataLabels": {
+                "enabled": true
+              },
+              "groupPadding": 0.1
+            }
+          },
+          "series": [
+            {
+              "name": "Year 1990",
+              "data": [631, 727, 3202, 721]
+            },
+            {
+              "name": "Year 2000",
+              "data": [814, 841, 3714, 726]
+            },
+            {
+              "name": "Year 2018",
+              "data": [1276, 1007, 4561, 746]
+            }
+          ]
+        }
+      }
+    },
+    {
+      "name": "Stacked",
+      "props": {
+        "options": {
+          "series": [
+            {
+              "name": "Installation",
+              "data": [1475, 200, 3000, 654, 656]
+            },
+            {
+              "name": "Manufacturing",
+              "data": [1270, 800, 200, 454, 956]
+            },
+            {
+              "name": "Sales & Distribution",
+              "data": [975, 1600, 1500, 924, 500]
+            }
+          ],
+          "title": {
+            "text": "Bar Graph with Stacked Columns"
+          },
+          "xAxis": {
+            "categories": ["Jan", "Feb", "Mar", "Apr", "May"]
+          },
+          "yAxis": {
+            "title": {
+              "text": "Number of Employees"
+            }
+          },
+          "plotOptions": {
+            "column": {
+              "stacking": "normal",
+              "borderWidth": 0
+            }
+          },
+          "legend": {
+            "enabled": true
+          }
+        }
+      }
+    },
+    {
+      "name": "Custom Colors",
+      "props": {
+        "options": {
+          "series": [
+            {
+              "name": "Installation",
+              "data": [1475, 200, 3000, 654, 656]
+            },
+            {
+              "name": "Manufacturing",
+              "data": [4434, 524, 2320, 440, 500]
+            },
+            {
+              "name": "Sales & Distribution",
+              "data": [3387, 743, 1344, 434, 440]
+            }
+          ],
+          "title": {
+            "text": "Bar Graph with Custom Data Colors"
+          },
+          "xAxis": {
+            "categories": ["Jan", "Feb", "Mar", "Apr", "May"]
+          },
+          "yAxis": {
+            "title": {
+              "text": "Number of Employees"
+            }
+          },
+          "colors": ["#144075", "#005a8b", "#00a4b4", "#f9b115", "#e87511"]
+        }
+      }
+    }
+  ],
+  "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"
+    },
+    "horizontal": {
+      "presetName": "Horizontal",
+      "message": "Set options.chart.type to bar for a horizontal bar chart.",
+      "type": "info"
+    },
+    "stacked": {
+      "presetName": "Stacked",
+      "message": "Stacked columns use options.plotOptions.column.stacking with multiple series.",
+      "type": "info"
+    },
+    "colors": {
+      "presetName": "Custom Colors",
+      "message": "Use options.colors to override the Highcharts series color palette.",
+      "type": "info"
+    }
+  }
+}

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"
+    }
+  }
+}