[Play-450] Charts/Graphs kits legend position (#2171)

* added the five legend props to the default setupChart method in pb_chart.js as well as to the line_graph kit for both react and rails

* added spec test for line_graph

* added five legend props to bar_graph

* added spec tests for bar_graph new props

* added the five props tot the setupPieChart method in pb_chat and added the five props to the rails and react circle chart kits

* created new doc in circle_chart to showcase the five new props

* added a new doc to bar_graph to showcase the 5 new legend position props

* created new doc for line_graph to showcase 5 new legend position props

* refactored the documentation files per feedback

* refactred the doc examples to show one for alignmnet one for layout and one for x and y offset for the bar graph

* added doc examples in circle chart for alignment, layout, and x and y offset

* added doc examples to line graph for new legend props

* fixed but in rails version of line graph where subtitle prop was not being passed correctly and update the doc examples for legend position

* fixed bug in rails version of bar graph where subtitle prop was not being passed correctly and update the doc examples for legend position

* update the doc examples for legend position

playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx

@@ -7,6 +7,7 @@ import { globalProps } from '../utilities/globalProps'
 import pbChart from '../plugins/pb_chart'
 
 type BarGraphProps = {
+  align?: "left" | "right" | "center",
   axisTitle: string,
   dark?: Boolean,
   xAxisCategories: array,
@@ -26,19 +27,29 @@ type BarGraphProps = {
   toggleLegendClick?: boolean,
   height?: string,
   colors: array,
+  layout?: "horizontal" | "vertical" | "proximate",
+  verticalAlign?: "top" | "middle" | "bottom",
+  x?: number,
+  y?: number,
 }
 
 export default class BarGraph extends React.Component<BarGraphProps> {
   static defaultProps = {
+    align: "center",
     className: 'pb_bar_graph',
     dark: false,
     type: 'column',
     legend: false,
     toggleLegendClick: true,
+    layout: "horizontal",
+    verticalAlign: "bottom",
+    x: 0,
+    y: 0,
   }
 
   componentDidMount() {
     const {
+      align,
       axisTitle,
       dark,
       xAxisCategories,
@@ -55,9 +66,14 @@ export default class BarGraph extends React.Component<BarGraphProps> {
       height,
       toggleLegendClick,
       colors  = [],
+      layout,
+      verticalAlign,
+      x,
+      y,
     } = this.props
 
     new pbChart(`.${className}`, {
+      align,
       axisTitle: axisTitle,
       dark,
       chartData: chartData,
@@ -70,9 +86,13 @@ export default class BarGraph extends React.Component<BarGraphProps> {
       xAxisCategories: xAxisCategories,
       yAxisMin: yAxisMin,
       yAxisMax: yAxisMax,
-      legend: legend,
+      legend,
       toggleLegendClick: toggleLegendClick,
       height: height,
+      layout,
+      verticalAlign,
+      x,
+      y,
     })
   }
 

playbook/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb

@@ -3,6 +3,9 @@
 module Playbook
   module PbBarGraph
     class BarGraph < Playbook::KitBase
+      prop :align, type: Playbook::Props::Enum,
+                   values: %w[left right center],
+                   default: "center"
       prop :axis_title
       prop :chart_data, type: Playbook::Props::Array,
                         default: []
@@ -23,20 +26,29 @@ class BarGraph < Playbook::KitBase
       prop :height
       prop :colors, type: Playbook::Props::Array,
                     default: []
+      prop :layout, type: Playbook::Props::Enum,
+                    values: %w[horizontal vertical proximate],
+                    default: "horizontal"
+      prop :vertical_align, type: Playbook::Props::Enum,
+                            values: %w[top middle bottom],
+                            default: "bottom"
+      prop :x, type: Playbook::Props::Numeric
+      prop :y, type: Playbook::Props::Numeric
 
       def chart_type
         orientation == "horizontal" ? "bar" : "column"
       end
 
       def chart_options
         {
+          align: align,
           id: id,
           className: classname,
           chartData: chart_data,
           dark: dark ? "dark" : "",
           type: chart_type,
           title: title,
-          subtitle: subtitle,
+          subTitle: subtitle,
           axisTitle: axis_title,
           pointStart: point_start,
           xAxisCategories: x_axis_categories,
@@ -46,6 +58,10 @@ def chart_options
           toggleLegendClick: toggle_legend_click,
           height: height,
           colors: colors,
+          layout: layout,
+          verticalAlign: vertical_align,
+          x: x,
+          y: y,
         }
       end
 

playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.html.erb

@@ -0,0 +1,62 @@
+<% data = [{
+    name: 'Installation',
+    data: [1475]
+}, {
+    name: 'Manufacturing',
+    data: [4434]
+}, {
+    name: 'Sales & Distribution',
+    data: [3387]
+}, {
+    name: 'Project Development',
+    data: [3227]
+}, {
+    name: 'Other',
+    data: [1111]
+}] %>
+
+<%= pb_rails("title", props: {size: 4, text: "align | vertical_align", padding_top: "sm", padding_bottom: "sm"})%>
+
+<%= pb_rails("bar_graph", props: {
+    axis_title: 'Number of Employees',
+    chart_data: data,
+    id:"legend-position",
+    y_axis_min: 0,
+    x_axis_categories:['Jan'],
+    title: 'Alignment of Legend',
+    legend: true,
+    align: 'right',
+    vertical_align: 'top',
+    padding_bottom: "sm",
+}) %>
+
+<%= pb_rails("title", props: {size: 4, text: "layout", padding_top: "sm", padding_bottom: "sm"})%>
+
+<%= pb_rails("bar_graph", props: {
+    axis_title: 'Number of Employees',
+    chart_data: data,
+    id:"legend-position-1",
+    y_axis_min: 0,
+    x_axis_categories:['Jan'],
+    title: 'Layout of Legend',
+    legend: true,
+    layout: 'vertical',
+    padding_top: "sm",
+    padding_bottom: "sm",
+}) %>
+
+<%= pb_rails("title", props: {size: 4, text: "x | y", padding_top: "sm", padding_bottom: "sm"})%>
+
+<%= pb_rails("bar_graph", props: {
+    axis_title: 'Number of Employees',
+    chart_data: data,
+    id:"legend-position-2",
+    y_axis_min: 0,
+    x_axis_categories:['Jan'],
+    title: 'Offset of Legend',
+    legend: true,
+    layout: "vertical",
+    x: 100,
+    y: 10,
+    padding_top: "sm",
+}) %>

playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx

@@ -0,0 +1,86 @@
+import React from 'react'
+import { BarGraph, Title } from '../..'
+
+const chartData = [{
+  name: 'Installation',
+  data: [1475],
+}, {
+  name: 'Manufacturing',
+  data: [4434],
+}, {
+  name: 'Sales & Distribution',
+  data: [3387],
+}, {
+  name: 'Project Development',
+  data: [3227],
+}, {
+  name: 'Other',
+  data: [1111],
+}]
+
+const BarGraphLegendPosition = (props) => (
+  <div>
+    <Title
+        paddingBottom="sm"
+        paddingTop="sm"
+        size={4}
+        tag="h4"
+        text="align | verticalAlign"
+    />
+    <BarGraph
+        align='right'
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        id="legend-position"
+        legend
+        paddingBottom="sm"
+        title="Alignment of Legend"
+        verticalAlign="top"
+        xAxisCategories={['Jan']}
+        yAxisMin={0}
+        {...props}
+    />
+    <Title
+        paddingBottom="sm"
+        paddingTop="sm"
+        size={4}
+        tag="h4"
+        text="layout"
+    />
+    <BarGraph
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        id="legend-position-1"
+        layout="vertical"
+        legend
+        paddingBottom="sm"
+        paddingTop="sm"
+        title="Layout of Legend"
+        xAxisCategories={['Jan']}
+        yAxisMin={0}
+        {...props}
+    />
+    <Title
+        paddingBottom="sm"
+        paddingTop="sm"
+        size={4}
+        tag="h4"
+        text="x | y"
+    />
+    <BarGraph
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        id="legend-position-2"
+        layout="vertical"
+        legend
+        title="Offset of Legend"
+        x={100}
+        xAxisCategories={['Jan']}
+        y={10}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
+
+export default BarGraphLegendPosition

playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.md

@@ -0,0 +1,17 @@
+##### Prop
+
+`align` **Type**: String | **Values**: left | center | right (defaults to center)
+`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults middle)
+`layout` **Type**: String | **Values**: horizontal | vertical | proximate (defaults to horizontal)
+`x` **Type**: Number (defaults to 0)
+`y` **Type**: Number (defaults to 0)
+
+- 
+
+- `layout` determines the position of the legend items
+`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 alignmnet. Negative x moves it to the left, positive x moves it to the right
+
+
+- `y` offsets the legend relative to its vertical alignmnet. Negative y moves it up, positive y moves it down.

playbook/app/pb_kits/playbook/pb_bar_graph/docs/example.yml

@@ -3,6 +3,7 @@ examples:
   rails:
   - bar_graph_default: Default
   - bar_graph_legend: Legend
+  - bar_graph_legend_position: Legend Position
   - bar_graph_legend_non_clickable: Legend Non Clickable
   - bar_graph_height: Height
   - bar_graph_spline: Spline
@@ -12,6 +13,7 @@ examples:
   react:
   - bar_graph_default: Default
   - bar_graph_legend: Legend
+  - bar_graph_legend_position: Legend Position
   - bar_graph_legend_non_clickable: Legend Non Clickable
   - bar_graph_height: Height
   - bar_graph_spline: Spline

playbook/app/pb_kits/playbook/pb_bar_graph/docs/index.js

@@ -1,5 +1,6 @@
 export { default as BarGraphDefault } from './_bar_graph_default.jsx'
 export { default as BarGraphLegend } from './_bar_graph_legend.jsx'
+export { default as BarGraphLegendPosition } from './_bar_graph_legend_position.jsx'
 export { default as BarGraphLegendNonClickable } from './_bar_graph_legend_non_clickable.jsx'
 export { default as BarGraphHeight } from './_bar_graph_height.jsx'
 export { default as BarGraphSpline } from './_bar_graph_spline.jsx'

playbook/app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx

@@ -9,6 +9,7 @@ import { buildAriaProps, buildDataProps } from '../utilities/props'
 
 import pbChart from '../plugins/pb_chart'
 type CircleChartProps = {
+  align?: "left" | "right" | "center",
   aria: Object,
   chartData?: array,
   children: Node,
@@ -32,10 +33,15 @@ type CircleChartProps = {
   tooltipHtml: string,
   useHtml: boolean,
   zMin: number,
+  layout?: "horizontal" | "vertical" | "proximate",
+  verticalAlign?: "top" | "middle" | "bottom",
+  x?: number,
+  y?: number,
 }
 
 const CircleChart = (props: CircleChartProps) => {
   const {
+    align = 'center',
     aria = {},
     chartData = [{}],
     children,
@@ -60,6 +66,10 @@ const CircleChart = (props: CircleChartProps) => {
       '<b>{point.y}</b>',
     useHtml = false,
     zMin = null,
+    layout = 'horizontal',
+    verticalAlign = 'bottom',
+    x = 0,
+    y = 0,
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -78,6 +88,7 @@ const CircleChart = (props: CircleChartProps) => {
     })
 
     new pbChart('.selector', {
+      align,
       id,
       colors,
       borderColor: roundedBorderColor,
@@ -98,6 +109,10 @@ const CircleChart = (props: CircleChartProps) => {
       innerSize: innerSizeFormat(innerSize),
       zMin,
       startAngle,
+      layout,
+      verticalAlign,
+      x,
+      y,
     })
   }, [])