playbook_ui 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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

@@ -0,0 +1,162 @@
+{
+  "template": "<PbGaugeChart{{props}} />",
+  "externalImports": [
+    "import { PbGaugeChart } from 'playbook-ui/charts'"
+  ],
+  "defaults": {
+    "options": {
+      "series": [
+        {
+          "data": [
+            {
+              "name": "Name",
+              "y": 45
+            }
+          ]
+        }
+      ]
+    }
+  },
+  "groups": [
+    {
+      "name": "Chart",
+      "props": ["options"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "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
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "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"
+    }
+  }
+}

data/app/pb_kits/playbook/pb_pb_gauge_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_line_graph/docs/_playground.json

@@ -1,10 +1,103 @@
 {
   "template": "<PbLineGraph{{props}} />",
   "propTargets": {},
-  "defaults": {},
+  "defaults": {
+    "options": {
+      "series": [
+        {
+          "name": "Installation",
+          "data": [
+            43934,
+            52503,
+            57177,
+            69658,
+            97031,
+            119931,
+            137133,
+            154175
+          ]
+        },
+        {
+          "name": "Manufacturing",
+          "data": [
+            24916,
+            24064,
+            29742,
+            29851,
+            32490,
+            30282,
+            38121,
+            40434
+          ]
+        },
+        {
+          "name": "Sales & Distribution",
+          "data": [
+            11744,
+            17722,
+            16005,
+            19771,
+            20185,
+            24377,
+            32147,
+            39387
+          ]
+        },
+        {
+          "name": "Project Development",
+          "data": [
+            null,
+            null,
+            7988,
+            12169,
+            15112,
+            22452,
+            34400,
+            34227
+          ]
+        },
+        {
+          "name": "Other",
+          "data": [
+            12908,
+            5948,
+            8105,
+            11248,
+            8989,
+            11816,
+            18274,
+            18111
+          ]
+        }
+      ],
+      "title": {
+        "text": "Solar Employment Growth by Sector, 2010-2016"
+      },
+      "subtitle": {
+        "text": "Source: thesolarfoundation.com"
+      },
+      "xAxis": {
+        "categories": [
+          "Jan",
+          "Feb",
+          "Mar",
+          "Apr",
+          "May",
+          "Jun",
+          "Jul",
+          "Aug"
+        ]
+      },
+      "yAxis": {
+        "title": {
+          "text": "Number of Employees"
+        }
+      }
+    }
+  },
   "groups": [
     {
-      "name": "Props",
+      "name": "Chart",
       "props": [
         "options"
       ]
@@ -13,9 +106,304 @@
   "presets": [
     {
       "name": "Default",
-      "props": {}
+      "props": {
+        "options": {
+          "series": [
+            {
+              "name": "Installation",
+              "data": [
+                43934,
+                52503,
+                57177,
+                69658,
+                97031,
+                119931,
+                137133,
+                154175
+              ]
+            },
+            {
+              "name": "Manufacturing",
+              "data": [
+                24916,
+                24064,
+                29742,
+                29851,
+                32490,
+                30282,
+                38121,
+                40434
+              ]
+            },
+            {
+              "name": "Sales & Distribution",
+              "data": [
+                11744,
+                17722,
+                16005,
+                19771,
+                20185,
+                24377,
+                32147,
+                39387
+              ]
+            },
+            {
+              "name": "Project Development",
+              "data": [
+                null,
+                null,
+                7988,
+                12169,
+                15112,
+                22452,
+                34400,
+                34227
+              ]
+            },
+            {
+              "name": "Other",
+              "data": [
+                12908,
+                5948,
+                8105,
+                11248,
+                8989,
+                11816,
+                18274,
+                18111
+              ]
+            }
+          ],
+          "title": {
+            "text": "Solar Employment Growth by Sector, 2010-2016"
+          },
+          "subtitle": {
+            "text": "Source: thesolarfoundation.com"
+          },
+          "xAxis": {
+            "categories": [
+              "Jan",
+              "Feb",
+              "Mar",
+              "Apr",
+              "May",
+              "Jun",
+              "Jul",
+              "Aug"
+            ]
+          },
+          "yAxis": {
+            "title": {
+              "text": "Number of Employees"
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "Legend",
+      "props": {
+        "options": {
+          "series": [
+            {
+              "name": "Number of Installations",
+              "data": [
+                43934,
+                52503,
+                57177,
+                69658,
+                97031,
+                119931,
+                137133,
+                154175
+              ]
+            }
+          ],
+          "title": {
+            "text": "Line Graph with Legend"
+          },
+          "xAxis": {
+            "categories": [
+              "Jan",
+              "Feb",
+              "Mar",
+              "Apr",
+              "May",
+              "Jun",
+              "Jul",
+              "Aug"
+            ]
+          },
+          "yAxis": {
+            "min": 0,
+            "title": {
+              "text": "Number of Employees"
+            }
+          },
+          "legend": {
+            "enabled": true
+          }
+        }
+      }
+    },
+    {
+      "name": "Custom Colors",
+      "props": {
+        "options": {
+          "title": {
+            "text": "Line Graph with Custom Data Colors"
+          },
+          "xAxis": {
+            "categories": [
+              "Jan",
+              "Feb",
+              "Mar",
+              "Apr",
+              "May",
+              "Jun",
+              "Jul",
+              "Aug"
+            ]
+          },
+          "yAxis": {
+            "min": 0,
+            "title": {
+              "text": "Number of Employees"
+            }
+          },
+          "series": [
+            {
+              "name": "Installation",
+              "data": [
+                43934,
+                52503,
+                57177,
+                69658,
+                97031,
+                119931,
+                137133,
+                154175
+              ]
+            },
+            {
+              "name": "Manufacturing",
+              "data": [
+                24916,
+                28064,
+                29742,
+                40851,
+                50590,
+                65282,
+                70121,
+                85434
+              ]
+            },
+            {
+              "name": "Sales & Distribution",
+              "data": [
+                11744,
+                17722,
+                16005,
+                19771,
+                25185,
+                28377,
+                36147,
+                43387
+              ]
+            }
+          ],
+          "colors": [
+            "#144075",
+            "#005a8b",
+            "#f9b115"
+          ]
+        }
+      }
+    },
+    {
+      "name": "Tall",
+      "props": {
+        "options": {
+          "chart": {
+            "height": 500
+          },
+          "series": [
+            {
+              "name": "Installation",
+              "data": [
+                43934,
+                52503,
+                57177,
+                69658,
+                97031,
+                119931,
+                137133,
+                154175
+              ]
+            },
+            {
+              "name": "Manufacturing",
+              "data": [
+                24916,
+                24064,
+                29742,
+                29851,
+                32490,
+                30282,
+                38121,
+                40434
+              ]
+            }
+          ],
+          "title": {
+            "text": "Line Graph with Custom Height"
+          },
+          "xAxis": {
+            "categories": [
+              "Jan",
+              "Feb",
+              "Mar",
+              "Apr",
+              "May",
+              "Jun",
+              "Jul",
+              "Aug"
+            ]
+          },
+          "yAxis": {
+            "title": {
+              "text": "Number of Employees"
+            }
+          }
+        }
+      }
     }
   ],
   "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"
+    },
+    "legend": {
+      "presetName": "Legend",
+      "message": "Line graph legends are controlled through options.legend.enabled.",
+      "type": "info"
+    },
+    "colors": {
+      "presetName": "Custom Colors",
+      "message": "Use options.colors to override the Highcharts series color palette.",
+      "type": "info"
+    },
+    "tall": {
+      "presetName": "Tall",
+      "message": "Set options.chart.height when a line graph needs more vertical space.",
+      "type": "info"
+    }
+  },
+  "externalImports": [
+    "import { PbLineGraph } from 'playbook-ui/charts'"
+  ]
 }