playbook_ui_docs 15.2.0.pre.alpha.PLAY1978bugiconauto11317 → 15.2.0.pre.alpha.PLAY236711331

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

@@ -0,0 +1,116 @@
+import React from 'react'
+import PbLineGraph from '../../pb_pb_line_graph/_pb_line_graph'
+import Title from '../../pb_title/_title'
+
+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']
+
+  const chartOptionsFirst = {
+    title: { text: "Alignment of Legend" },
+    series: data,
+    xAxis: {
+      categories: categories,
+    },
+    yAxis: {
+      min: 0,
+      title: {
+        text: "Number of Employees",
+      },
+    },
+    legend: {
+      enabled: true,
+      align: 'right',
+      verticalAlign: 'top'
+    },
+  }
+
+  const chartOptionsSecond = {
+    title: { text: "Layout of Legend" },
+    series: data,
+    xAxis: {
+      categories: categories,
+    },
+    yAxis: {
+      min: 0,
+      title: {
+        text: "Number of Employees",
+      },
+    },
+    legend: {
+      enabled: true,
+      layout: 'vertical'
+    },
+  }
+
+  const chartOptionsThird = {
+    title: { text: "Offset of Legend" },
+    series: data,
+    xAxis: {
+      categories: categories,
+    },
+    yAxis: {
+      min: 0,
+      title: {
+        text: "Number of Employees",
+      },
+    },
+    legend: {
+      enabled: true,
+      layout: 'vertical',
+      x: 100,
+      y: 10
+    },
+  }
+
+const PbLineGraphLegendPosition = (props) => (
+  <div>
+    <Title
+        paddingY="sm"
+        size={4}
+        tag="h4"
+        text="align | verticalAlign"
+    />
+    <PbLineGraph
+        options={chartOptionsFirst}
+        {...props}
+    /> 
+    <Title
+        paddingY="sm"
+        size={4}
+        tag="h4"
+        text="layout"
+    />
+    <PbLineGraph
+        options={chartOptionsSecond}
+        {...props}
+    /> 
+    <Title
+        paddingY="sm"
+        size={4}
+        tag="h4"
+        text="x | y"
+    />
+    <PbLineGraph
+        options={chartOptionsThird}
+        {...props}
+    />
+  </div>
+)
+
+export default PbLineGraphLegendPosition

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

@@ -0,0 +1,11 @@
+Highcharts provides many options for customizing the legend display. This example showcases the following:
+
+`align` can be used to align the legend left, right or center (defaults to center)
+
+`verticalAlign` can be used to place the legend above the graph. Options are top, middle, bottom with default set to bottom
+
+`layout` determines the position of the legend items. Options are horizontal, vertical or proximate with default set to horizontal `layout: proximate` will place the legend items as close as possible to the graphs they're representing. It will also determine whether to place the legend above/below or on the side of the plot area, if the legend is in a corner.
+
+`x` offsets the legend relative to its horizontal alignment. Negative x moves it to the left, positive x moves it to the right (defaults to 0)
+
+`y` offsets the legend relative to its vertical alignment. Negative y moves it up, positive y moves it down (defaults to 0)

data/app/pb_kits/playbook/pb_pb_line_graph/docs/example.yml

@@ -0,0 +1,20 @@
+examples:
+  
+  rails:
+  - pb_line_graph_default: Default
+  - pb_line_graph_legend: Legend
+  - pb_line_graph_legend_position: Legend Position
+  - pb_line_graph_legend_nonclickable: Legend NonClickable
+  - pb_line_graph_height: Height
+  - pb_line_graph_colors: Color Overrides
+  
+  
+  react:
+  - pb_line_graph_default: Default
+  - pb_line_graph_legend: Legend
+  - pb_line_graph_legend_position: Legend Position
+  - pb_line_graph_legend_nonclickable: Legend NonClickable
+  - pb_line_graph_height: Height
+  - pb_line_graph_colors: Color Overrides
+  
+  

data/app/pb_kits/playbook/pb_pb_line_graph/docs/index.js

@@ -0,0 +1,6 @@
+export { default as PbLineGraphDefault } from './_pb_line_graph_default.jsx'
+export { default as PbLineGraphLegend } from './_pb_line_graph_legend.jsx'
+export { default as PbLineGraphLegendPosition } from './_pb_line_graph_legend_position.jsx'
+export { default as PbLineGraphLegendNonclickable } from './_pb_line_graph_legend_nonclickable.jsx'
+export { default as PbLineGraphHeight } from './_pb_line_graph_height.jsx'
+export { default as PbLineGraphColors } from './_pb_line_graph_colors.jsx'

data/app/pb_kits/playbook/pb_popover/docs/_popover_list.html.erb

@@ -28,9 +28,9 @@
     popoverButton.onclick = () => {
         buttonClicked = !buttonClicked
         if (buttonClicked) {
-            arrowDiv.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" viewBox="0 0 31 25" fill="none" class="pb_custom_icon svg-inline--fa pb_icon_kit svg_fw" id="" data="{}" aria="{}" tabindex=""><path d="M14.2031 5.70312C14.625 5.28125 15.3281 5.28125 15.75 5.70312L24.7969 14.7031C25.2188 15.1719 25.2188 15.875 24.7969 16.2969C24.3281 16.7656 23.625 16.7656 23.2031 16.2969L15 8.09375L6.79688 16.2969C6.32812 16.7656 5.625 16.7656 5.20312 16.2969C4.73438 15.875 4.73438 15.1719 5.20312 14.75L14.2031 5.70312Z" fill="currentColor"/></svg>'
+            arrowDiv.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="auto" height="auto" viewBox="0 0 31 25" fill="none" class="pb_custom_icon svg-inline--fa pb_icon_kit svg_fw" id="" data="{}" aria="{}" tabindex=""><path d="M14.2031 5.70312C14.625 5.28125 15.3281 5.28125 15.75 5.70312L24.7969 14.7031C25.2188 15.1719 25.2188 15.875 24.7969 16.2969C24.3281 16.7656 23.625 16.7656 23.2031 16.2969L15 8.09375L6.79688 16.2969C6.32812 16.7656 5.625 16.7656 5.20312 16.2969C4.73438 15.875 4.73438 15.1719 5.20312 14.75L14.2031 5.70312Z" fill="currentColor"/></svg>'
         } else {
-            arrowDiv.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" viewBox="0 0 31 25" fill="none" class="pb_custom_icon svg-inline--fa pb_icon_kit svg_fw" id="" data="{}" aria="{}" tabindex=""><path d="M14.2031 19.2969L5.20312 10.2969C4.73438 9.875 4.73438 9.17188 5.20312 8.70312C5.625 8.28125 6.32812 8.28125 6.79688 8.70312L15 16.9531L23.2031 8.75C23.625 8.28125 24.3281 8.28125 24.7969 8.75C25.2188 9.17188 25.2188 9.875 24.7969 10.2969L15.75 19.2969C15.3281 19.7656 14.625 19.7656 14.2031 19.2969Z" fill="currentColor"/></svg>'
+            arrowDiv.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="auto" height="auto" viewBox="0 0 31 25" fill="none" class="pb_custom_icon svg-inline--fa pb_icon_kit svg_fw" id="" data="{}" aria="{}" tabindex=""><path d="M14.2031 19.2969L5.20312 10.2969C4.73438 9.875 4.73438 9.17188 5.20312 8.70312C5.625 8.28125 6.32812 8.28125 6.79688 8.70312L15 16.9531L23.2031 8.75C23.625 8.28125 24.3281 8.28125 24.7969 8.75C25.2188 9.17188 25.2188 9.875 24.7969 10.2969L15.75 19.2969C15.3281 19.7656 14.625 19.7656 14.2031 19.2969Z" fill="currentColor"/></svg>'
         }
     }
 </script>