playbook_ui 11.11.0 → 11.12.1.pre.alpha.charts1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 01a1e3109de5059d750e0f17e5f9ead0781c6b6ad6c3729186b9c31eb3ff9a90
-  data.tar.gz: a6daa201b636522e49e95279007ccded48567c7e1b2c8c4994f595b0b2ff1656
+  metadata.gz: 6ec7a56f6eea6ea55c21faa02b8a1beb8110460443353439aa5de7961024b182
+  data.tar.gz: 46bb11b6178da12a8e9dcdfde1af101e675283b1aa1776455e9708f98a16a21e
 SHA512:
-  metadata.gz: 3a8decc17e61b0c22c47d0e0248418490270c9c313768b2da5c757e74997646644f089abbc8b696ad61983befb3d1836cf675868b33e6cdc730c2f31e60f6587
-  data.tar.gz: 634d88b0f381e09676cff75ef918f4269dcdb1d0537b95fb02e8142ee7c9dace945a7825f8d6795785ad819a6f115c75f665660a8c5df99bd4e605e5b0611402
+  metadata.gz: 4b63642925e7f72674c589f226baa9192e76492c20bbd06a11a942c6d9b6399e55bb163959f827924f49ee2531ada84cff1ddc00b36cfee289cb08a31a927676
+  data.tar.gz: 696b8d6cbf319c7b0a92089b738033525cf07cfa674f723767410936d94df1f0b5d40c27596437407248dbd16b0c0592738d28f7a53818edc9af7080788b89c9

data/app/pb_kits/playbook/index.js

@@ -11,6 +11,7 @@ export { default as Badge } from './pb_badge/_badge'
 export { default as BarGraph } from './pb_bar_graph/_bar_graph'
 export { default as Body } from './pb_body/_body'
 export { default as BreadCrumbs } from './pb_bread_crumbs/_bread_crumbs'
+export { default as BreadCrumbItem } from './pb_bread_crumbs/_bread_crumb_item'
 export { default as Button } from './pb_button/_button'
 export { default as ButtonToolbar } from './pb_button_toolbar/_button_toolbar'
 export { default as Caption } from './pb_caption/_caption'
@@ -114,10 +115,10 @@ export { default as barGraphSettings } from './pb_bar_graph/barGraphSettings'
 export { default as dashboardValueSettings } from './pb_dashboard_value/dashboardValueSettings'
 
 // Other JS/Plugins
-export { default as pbChart } from './plugins/pb_chart.js'
 export { default as datePickerHelper } from './pb_date_picker/date_picker_helper'
 export { default as PbPopover } from './pb_popover'
 export { default as PbTable } from './pb_table'
 export { default as PbTextarea } from './pb_textarea'
 export { default as PbTooltip } from './pb_tooltip'
 export { default as PbTypeahead } from './pb_typeahead'
+export { default as dialogHelper } from './pb_dialog/dialogHelper'

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx

@@ -0,0 +1,145 @@
+import React, { useState, useEffect } from "react";
+import { globalProps } from "../utilities/globalProps";
+import { buildAriaProps, buildDataProps } from "../utilities/props";
+
+import HighchartsReact from "highcharts-react-official";
+import Highcharts from "highcharts";
+import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
+import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
+import mapColors from "../pb_dashboard/pbChartsColorsHelper";
+
+import classnames from "classnames";
+
+type BarGraphProps = {
+  align?: "left" | "right" | "center";
+  axisTitle: string;
+  dark?: Boolean;
+  xAxisCategories: [];
+  yAxisMin: number;
+  yAxisMax: number;
+  chartData: { name: string; data: number[] }[];
+  className?: string;
+  id: any;
+  pointStart: number | any;
+  subTitle?: string;
+  title: string;
+  type?: string;
+  legend?: boolean;
+  toggleLegendClick?: boolean;
+  height?: string;
+  colors: string[];
+  layout?: "horizontal" | "vertical" | "proximate";
+  verticalAlign?: "top" | "middle" | "bottom";
+  x?: number;
+  y?: number;
+  aria?: { [key: string]: string };
+  data?: { [key: string]: string };
+};
+
+
+const BarGraph = ({
+  aria = {},
+  data = {},
+  align = "center",
+  axisTitle,
+  dark = false,
+  chartData,
+  className = "pb_bar_graph",
+  colors,
+  id,
+  pointStart,
+  subTitle,
+  type = "column",
+  title = "Title",
+  xAxisCategories,
+  yAxisMin,
+  yAxisMax,
+  legend = false,
+  toggleLegendClick = true,
+  height,
+  layout = "horizontal",
+  verticalAlign = "bottom",
+  x = 0,
+  y = 0,
+  ...props
+}: BarGraphProps) => {
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const setupTheme = () => {
+    dark
+      ? Highcharts.setOptions(highchartsDarkTheme)
+      : Highcharts.setOptions(highchartsTheme);
+  };
+  setupTheme();
+
+  const staticOptions = {
+    title: {
+      text: title,
+    },
+    chart: {
+      height: height,
+      type: type,
+    },
+    subtitle: {
+      text: subTitle,
+    },
+    yAxis: {
+      min: yAxisMin,
+      max: yAxisMax,
+      title: {
+        text: axisTitle,
+      },
+    },
+    xAxis: {
+      categories: xAxisCategories,
+    },
+    legend: {
+      enabled: legend,
+      align: align,
+      verticalAlign: verticalAlign,
+      layout: layout,
+      x: x,
+      y: y,
+    },
+    colors:
+      colors !== undefined && colors.length > 0
+        ? mapColors(colors)
+        : highchartsTheme.colors,
+    plotOptions: {
+      series: {
+        pointStart: pointStart,
+        events: {},
+        dataLabels: {
+          enabled: false,
+        },
+      },
+    },
+    series: chartData,
+    credits: false,
+  };
+
+  if (!toggleLegendClick) {
+    staticOptions.plotOptions.series.events = { legendItemClick: () => false };
+  }
+
+  const [options, setOptions] = useState({});
+
+  useEffect(() => {
+    setOptions({ ...staticOptions });
+  }, [chartData]);
+
+  return (
+    <HighchartsReact
+      containerProps={{
+        className: classnames(globalProps(props), className),
+        id: id,
+        ...ariaProps,
+        ...dataProps,
+      }}
+      highcharts={Highcharts}
+      options={options}
+    />
+  );
+};
+
+export default BarGraph;

data/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,6 +26,14 @@ module Playbook
       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"
@@ -30,13 +41,14 @@ module Playbook
 
       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 @@ module Playbook
           toggleLegendClick: toggle_legend_click,
           height: height,
           colors: colors,
+          layout: layout,
+          verticalAlign: vertical_align,
+          x: x,
+          y: y,
         }
       end
 

data/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-bar",
+    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-bar-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-bar-2",
+    y_axis_min: 0,
+    x_axis_categories:['Jan'],
+    title: 'Offset of Legend',
+    legend: true,
+    layout: "vertical",
+    x: 100,
+    y: 10,
+    padding_top: "sm",
+}) %>

data/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-bar"
+        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-bar-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-bar-2"
+        layout="vertical"
+        legend
+        title="Offset of Legend"
+        x={100}
+        xAxisCategories={['Jan']}
+        y={10}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
+
+export default BarGraphLegendPosition

data/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.

data/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

data/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'

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -1,4 +1,5 @@
 @import "./button_mixins";
+@import "../tokens/colors";
 
 $pb_button_sizes: (
   "sm":   0.75rem,
@@ -28,6 +29,11 @@ $pb_button_sizes: (
   }
   &[class*=_link]  {
     @include pb_button_link;
+    @media (hover:hover) {
+      &:hover {
+        color: $text_lt_default;
+      }
+    } 
   }
 
   // Disabled =================

data/app/pb_kits/playbook/pb_button/docs/_button_default.html.erb

@@ -1,5 +1,5 @@
-<%= pb_rails("button", props: { text: "Button Primary" }) %>
-<%= pb_rails("button", props: { text: "Button Secondary", variant: "secondary" }) %>
-<%= pb_rails("button", props: { text: "Button Link", variant: "link" }) %>
-<%= pb_rails("button", props: { text: "Button Disabled", disabled: true }) %>
+<%= pb_rails("button", props: { text: "Button Primary", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { text: "Button Secondary", variant: "secondary", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { text: "Button Link", variant: "link", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { text: "Button Disabled", disabled: true, margin_right: "lg" }) %>
 

data/app/pb_kits/playbook/pb_button/docs/_button_default.jsx

@@ -1,32 +1,33 @@
-import React from 'react'
-import { Button } from '../../'
+import React from "react"
+import { Button } from "../../"
 
 const ButtonDefault = (props) => (
   <div>
     <Button
-        marginRight="xl"
-        onClick={() => alert('button clicked!')}
-        text="Button Primary"
+        marginRight='lg'
+        onClick={() => alert("button clicked!")}
+        text='Button Primary'
         {...props}
-    />
-    {' '}
+    />{" "}
     <Button
-        onClick={() => alert('button clicked!')}
-        text="Button Secondary"
-        variant="secondary"
+        marginRight='lg'
+        onClick={() => alert("button clicked!")}
+        text='Button Secondary'
+        variant='secondary'
         {...props}
-    />
-    {' '}
+    />{" "}
     <Button
-        onClick={() => alert('button clicked!')}
-        text="Button Link"
-        variant="link"
+        marginRight='lg'
+        onClick={() => alert("button clicked!")}
+        text='Button Link'
+        variant='link'
         {...props}
     />
     <Button
         disabled
-        onClick={() => alert('button clicked!')}
-        text="Button Disabled"
+        marginRight='lg'
+        onClick={() => alert("button clicked!")}
+        text='Button Disabled'
         {...props}
     />
   </div>

data/app/pb_kits/playbook/pb_circle_chart/ChartsTypes.ts

@@ -0,0 +1,2 @@
+declare module "*.scss"
+declare module "highcharts-react-official"