playbook_ui_docs 15.2.0.pre.alpha.PLAY2428advancedtablerailscellpadding11387 → 15.2.0.pre.alpha.PLAY2528removerepeatedidsfromrows11468

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c331b6a0e3fd532e88183ff4203fd035222484d8a8cb2aecc9825dc7a78edfa5
-  data.tar.gz: aac480a99b070036ce93b1496180c260e432e8c17d6d3f49f53d18a6e690196b
+  metadata.gz: 4b93dde0b265a468086e955f8dd49f7c4cfd0d41b3b8bb9da9e4d3131a1f9cc0
+  data.tar.gz: 83b4faff94abfdff270cec09b4f4e7286309dd1acc10aaa186c4e0080547482c
 SHA512:
-  metadata.gz: 4f82ea570c17e9a72f4869751ef5efad1768a27e5e30061ff97ef7dbdd2c6d411acd4c0f7e4f7b75810be716ac352f785d138e1acd8d095df051a0a3a6f436f0
-  data.tar.gz: 1ba14446258a8d9f07cfe64dc4b745ac1bf9bcef7119b0ffe9e2d41284cadabd4131b8042202019c25d0ac8f8837f33774b9250c105a2f73fc6b95be8c5cf230
+  metadata.gz: 2e20e0d5fbe8612800b02ffa00c00c4fb2e18f6e1ce75c877c3352cb0ca2ed4bca710c5caaebb6da4d227ef57867749a38a72e528763734de45cdefe1c32dd64
+  data.tar.gz: 2a0c1fac49da97a91e8cb53cdda88f67a84895fc1ad753dad5c550d5cf878d1bad7d34d8fed13711e5fda2529304e0f1f3bbf22d084c1d0daeb2f419fa34fcca

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.html.erb

@@ -33,81 +33,7 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "padding-control", table_data: @table_data, column_definitions: column_definitions }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: column_definitions }) %>
-<% end %>
-
-<% multi_header_column_definitions = [
-  {
-    accessor: "year",
-    label: "Year",
-    cellAccessors: ["quarter", "month", "day"],
-  },
-  {
-    label: "Enrollment Data",
-    columns: [
-      {
-        label: "Enrollment Stats",
-        columns: [
-          {
-            accessor: "newEnrollments",
-            label: "New Enrollments",
-            column_styling: { 
-              cell_background_color: ->(row) { row[:newEnrollments].to_i > 20 ? "success_secondary" : "warning_secondary" }
-            }
-          },
-          {
-            accessor: "scheduledMeetings",
-            label: "Scheduled Meetings",
-          },
-        ],
-      },
-    ],
-  },
-  {
-    label: "Performance Data",
-    columns: [
-      {
-        label: "Completion Metrics",
-        columns: [
-          {
-            accessor: "completedClasses",
-            label: "Completed Classes",
-            column_styling: { 
-              cell_background_color: ->(row) { row[:completedClasses].to_i > 15 ? "info_secondary" : "neutral_secondary" }
-            }
-          },
-          {
-            accessor: "classCompletionRate",
-            label: "Class Completion Rate",
-            column_styling: { 
-              cell_background_color: ->(row) { row[:completedClasses].to_i > 15 ? "neutral_secondary" : "info_secondary" }
-            }
-          },
-        ],
-      },
-      {
-        label: "Attendance",
-        columns: [
-          {
-            accessor: "attendanceRate",
-            label: "Attendance Rate",
-          },
-          {
-            accessor: "graduatedStudents",
-            label: "Graduated Students",
-            column_styling: { 
-              cell_background_color: ->(row) { row[:graduatedStudents].to_i > 10 ? "primary_secondary" : "error_secondary" }
-            }
-          },
-        ],
-      },
-    ],
-  },
-] %>
-
-<%= pb_rails("advanced_table", props: { id: "padding-control-multi-header", table_data: @table_data, column_definitions: multi_header_column_definitions, padding_top: "lg" }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { column_definitions: multi_header_column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: multi_header_column_definitions }) %>
-<% end %>
+<%= pb_rails("advanced_table", props: { id: "background-control", table_data: @table_data, column_definitions: column_definitions }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "background-control", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "background-control", table_data: @table_data, column_definitions: column_definitions }) %>
+<% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.md

@@ -2,7 +2,9 @@ The AdvancedTable kit accepts tree data and automatically renders expansion cont
 
 ### id
 
-A unique `id` is required to allow the table functionality to work properly. Without it, certain functions like the action bar will not be able to properly reference the correct table.
+A unique `id` is required to allow the table functionality to work properly. Without it, certain functions like the action bar, expand/collapse caching, or selectable rows will not be able to properly reference the correct table.
+
+You must also set `table_id` when using subcomponents like `table_header` or `table_body`.
 
 ### table_data
 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.html.erb

@@ -51,7 +51,7 @@
   ]
 %>
 
-<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions, id: "beta_sort" }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { id: "beta_sort", table_data: @table_data, column_definitions: column_definitions, enable_toggle_expansion: "all" }) %>
+<%= pb_rails("advanced_table", props: { id: "sort", table_data: @table_data, column_definitions: column_definitions, id: "beta_sort" }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "sort", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "sort", table_data: @table_data, column_definitions: column_definitions, enable_toggle_expansion: "all" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.html.erb

@@ -34,7 +34,7 @@
   subrow_headers = ["Quarter", "Month", "Day"]
 %>
 
-<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions, id: "test_table" }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { id: "test_table", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
+<%= pb_rails("advanced_table", props: { id: "subrow-headers", table_data: @table_data, column_definitions: column_definitions, id: "test_table" }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "subrow-headers", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "subrow-headers", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail_rails.html.erb

@@ -31,6 +31,6 @@
 ] %>
 
 <%= pb_rails("advanced_table", props: { id: "collapsible_trail", table_data: @table_data, column_definitions: column_definitions }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: column_definitions, collapsible_trail: false }) %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "collapsible_trail", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "collapsible_trail", table_data: @table_data, column_definitions: column_definitions, collapsible_trail: false }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers_rails.html.erb

@@ -58,6 +58,6 @@
 ] %>
 
 <%= pb_rails("advanced_table", props: { id: "column-styling-multi", table_data: @table_data, column_definitions: column_definitions }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "column-styling-multi", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "column-styling-multi", table_data: @table_data, column_definitions: column_definitions }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.html.erb

@@ -33,6 +33,6 @@
 ] %>
 
 <%= pb_rails("advanced_table", props: { id: "column-styling", table_data: @table_data, column_definitions: column_definitions }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "column-styling", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "column-styling", table_data: @table_data, column_definitions: column_definitions }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row_rails.html.erb

@@ -46,6 +46,6 @@
 ] %>
 
 <%= pb_rails("advanced_table", props: { id: "padding-control-per-row", table_data: @table_data_with_id, column_definitions: column_definitions, row_styling: row_styling }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { table_data: @table_data_with_id, column_definitions: column_definitions, row_styling: row_styling }) %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "padding-control-per-row", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "padding-control-per-row", table_data: @table_data_with_id, column_definitions: column_definitions, row_styling: row_styling }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_rails.html.erb

@@ -35,6 +35,6 @@
 ] %>
 
 <%= pb_rails("advanced_table", props: { id: "padding-control", table_data: @table_data, column_definitions: column_definitions }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "padding-control", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "padding-control", table_data: @table_data, column_definitions: column_definitions }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.html.erb

@@ -34,6 +34,6 @@
 %>
 
 <%= pb_rails("advanced_table", props: { id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, selectable_rows: true }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { id: "selectable_rows", column_definitions: column_definitions, selectable_rows: true }) %>
-  <%= pb_rails("advanced_table/table_body", props: { id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all", selectable_rows: true }) %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "selectable_rows", column_definitions: column_definitions, selectable_rows: true }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all", selectable_rows: true }) %>
 <% end %>

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_description.md

@@ -0,0 +1,3 @@
+This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo. Once done, any prop or functionality provided by Highcharts can be used with this kit without requiring specifc props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
+
+See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_colors.html.erb

@@ -0,0 +1,34 @@
+<% data = [{
+    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: [nil, nil, 7988, 12169, 15112, 22452, 34400, 34227],
+    }, {
+    name: 'Other',
+    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
+    }] %>
+
+<% categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] %>
+
+<% chart_options = {
+  series: data,
+  colors: ['#1CA05C', '#FD804C', '#144075', '#00C4D7', '#DA0014'],
+  title: { text: "Line Graph with Custom Data Colors" },
+  xAxis: {
+    categories: categories,
+  },
+  yAxis: {
+    title: {
+      text: "Number of Employees",
+    },
+  },
+} %>
+
+<%= pb_rails("pb_line_graph", props: {options: chart_options}) %>

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_colors.jsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import PbLineGraph from '../../pb_pb_line_graph/_pb_line_graph'
+import { colors } from 'playbook-ui'
+
+const data = [{
+  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],
+}, {
+  name: 'Project Development',
+  data: [5332, 6344, 7988, 12169, 15112, 14452, 22400, 30227],
+}, {
+  name: 'Other',
+  data: [null, null, null, 3112, 4989, 5816, 15274, 18111],
+}]
+
+const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+
+const chartOptions = {
+    title: {
+      text: 'Line Graph with Custom Data Colors',
+    },
+    xAxis: {
+      categories: categories,
+    },
+    yAxis: {
+      min: 0,
+      title: {
+        text: 'Number of Employees',
+      },
+    },
+    series: data,
+    colors: [colors.data_4, colors.data_5, "#144075", colors.data_7, colors.data_8]
+  }
+
+const PbLineGraphColors = (props) => {
+  return (
+    <div>
+      <PbLineGraph
+          options={chartOptions}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default PbLineGraphColors

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_colors.md

@@ -0,0 +1,5 @@
+Custom data colors allow for color customization to match the needs of business requirements.
+
+For React, import 'colors' from Playbook, then set custom colors in the colors array using the desired color variables. Hex colors are also available.
+
+For Rails, HEX values are required.

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_default.html.erb

@@ -0,0 +1,34 @@
+<% data = [{
+    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: [nil, nil, 7988, 12169, 15112, 22452, 34400, 34227],
+    }, {
+    name: 'Other',
+    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
+    }] %>
+
+<% categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] %>
+
+<% chart_options = {
+  series: data,
+  title: { text: "Solar Employment Growth by Sector, 2010-2016" },
+  subtitle: { text: "Source: thesolarfoundation.com" },
+  xAxis: {
+    categories: categories,
+  },
+  yAxis: {
+    title: {
+      text: "Number of Employees",
+    },
+  },
+} %>
+
+<%= pb_rails("pb_line_graph", props: {options: chart_options}) %>

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_default.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import PbLineGraph from '../../pb_pb_line_graph/_pb_line_graph'
+
+const data = [{
+  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],
+}]
+
+const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+
+const chartOptions = {
+  series: data,
+  title: { text: "Solar Employment Growth by Sector, 2010-2016" },
+  subtitle: { text: "Source: thesolarfoundation.com" },
+  xAxis: {
+    categories: categories,
+  },
+  yAxis: {
+    title: {
+      text: "Number of Employees",
+    },
+  },
+}
+const PbLineGraphDefault = (props) => (
+  <div>
+    <PbLineGraph
+        options={chartOptions}
+        {...props}
+    />
+  </div>
+)
+
+export default PbLineGraphDefault

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_height.html.erb

@@ -0,0 +1,47 @@
+<% data = [{
+  name: 'Number of Installations',
+  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
+}] %>
+
+<% categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] %>
+
+<% chart_options_first = {
+    title: {
+      text: 'Fixed Height (300px)',
+    },
+    chart: {
+      height: '300px'
+    },
+    xAxis: {
+      categories: categories,
+    },
+    yAxis: {
+      min: 0,
+      title: {
+        text: 'Number of Employees',
+      },
+    },
+    series: data
+  } %>
+
+  <% chart_options_second = {
+    title: {
+      text: 'Percentage Height (50%)',
+    },
+    chart: {
+      height: '50%'
+    },
+    xAxis: {
+      categories: categories,
+    },
+    yAxis: {
+      min: 0,
+      title: {
+        text: 'Number of Employees',
+      },
+    },
+    series: data
+  } %>
+
+<%= pb_rails("pb_line_graph", props: {options: chart_options_first}) %>
+<%= pb_rails("pb_line_graph", props: {options: chart_options_second}) %>

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_height.jsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import PbLineGraph from '../../pb_pb_line_graph/_pb_line_graph'
+
+const data = [{
+  name: 'Number of Installations',
+  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
+}]
+
+const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+
+const chartOptionsFirst = {
+    title: {
+      text: 'Fixed Height (300px)',
+    },
+    chart: {
+      height: '300px'
+    },
+    xAxis: {
+      categories: categories,
+    },
+    yAxis: {
+      min: 0,
+      title: {
+        text: 'Number of Employees',
+      },
+    },
+    series: data
+  }
+
+  const chartOptionsSecond = {
+    title: {
+      text: 'Percentage Height (50%)',
+    },
+    chart: {
+      height: '50%'
+    },
+    xAxis: {
+      categories: categories,
+    },
+    yAxis: {
+      min: 0,
+      title: {
+        text: 'Number of Employees',
+      },
+    },
+    series: data
+  }
+
+const PbLineGraphHeight = (props) => {
+  return (
+    <div>
+      <PbLineGraph
+          options={chartOptionsFirst}
+          {...props}
+      />
+      <PbLineGraph
+          options={chartOptionsSecond}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default PbLineGraphHeight

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_height.md

@@ -0,0 +1,3 @@
+By default, Highcharts have a height of 400px, but this can be customized. You can override the default by specifying either a percentage or a fixed pixel value.
+
+Using a percentage maintains a consistent aspect ratio across different responsive sizes. For example, setting the height to 50% makes the chart’s height half of its width.

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend.html.erb

@@ -0,0 +1,24 @@
+<% data = [{
+  name: 'Number of Installations',
+  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],    }] %>
+
+<% categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'] %>
+
+<% chart_options = {
+  series: data,
+  title: { text: "Line Graph with Legend" },
+  xAxis: {
+    categories: categories,
+  },
+  yAxis: {
+    min: 0,
+    title: {
+      text: "Number of Employees",
+    },
+  },
+  legend: {
+    enabled: true,
+  },
+} %>
+
+<%= pb_rails("pb_line_graph", props: {options: chart_options}) %>

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import PbLineGraph from '../../pb_pb_line_graph/_pb_line_graph'
+
+const data = [{
+  name: 'Number of Installations',
+  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
+}]
+
+const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']
+
+const chartOptions = {
+  series: data,
+  title: { text: "Line Graph with Legend" },
+  xAxis: {
+    categories: categories,
+  },
+  yAxis: {
+    min: 0,
+    title: {
+      text: "Number of Employees",
+    },
+  },
+  legend: {
+    enabled: true,
+  },
+}
+
+const PbLineGraphLegend = (props) => (
+  <div>
+    <PbLineGraph
+        options={chartOptions}
+        {...props}
+    />
+  </div>
+)
+
+export default PbLineGraphLegend

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend_nonclickable.html.erb

@@ -0,0 +1,39 @@
+<% data = [{
+  name: 'Number of Installations',
+  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],    
+  }] %>
+
+<% categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'] %>
+
+<% chart_options = {
+  series: data,
+  title: { text: "Line Graph with Legend Non Clickable" },
+  xAxis: {
+    categories: categories,
+  },
+  yAxis: {
+    title: {
+      text: 'Number of Employees',
+    },
+  },
+  legend: {
+    enabled: true
+  },
+} %>
+
+<%= pb_rails("pb_line_graph", props: {options: chart_options, id: "installations-chart"}) %>
+
+<script>
+// Prevent legend item click events from toggling series visibility
+document.addEventListener('click', function (e) {
+  var container = document.getElementById('installations-chart');
+  if (!container) return;
+
+  var legend = container.querySelector('.highcharts-legend');
+  if (legend && legend.contains(e.target)) {
+    e.stopImmediatePropagation();
+    e.preventDefault();
+  }
+}, true); 
+
+</script>

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend_nonclickable.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import PbLineGraph from '../../pb_pb_line_graph/_pb_line_graph'
+
+const data = [{
+  name: 'Number of Installations',
+  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
+}]
+
+const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']
+
+const chartOptions = {
+  title: {
+    text: 'Line Graph with Legend Non Clickable',
+  },
+  xAxis: {
+    categories: categories,
+  },
+  yAxis: {
+    title: {
+      text: 'Number of Employees',
+    },
+  },
+  legend: {
+    enabled: true,
+    events: {
+      itemClick: function () {
+        return false;
+      }
+    }
+  },
+  series: data
+}
+
+const PbLineGraphLegendNonclickable = (props) => {
+  return (
+    <div>
+      <PbLineGraph
+          options={chartOptions}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default PbLineGraphLegendNonclickable