playbook_ui 10.25.1 → 10.26.0.pre.alpha1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8be95036b076c3fbe7bdf059733bbcd3fe287731d38c671214167c465094b5f5
-  data.tar.gz: 38dd59dbdaddae412dc128c5aa33b149ef671365c3e4a4e836a9c6bbc2e5d5a6
+  metadata.gz: 2189d1ada1c39446fecca8e67776e0e5b086e79d842fbfaf5ed800313c81f5df
+  data.tar.gz: 4640c10e464c670714c67a3875412fcda9c79f06edbbea2a50cdd5ab330889ed
 SHA512:
-  metadata.gz: a4b2119448938ad199474fdbfabe230b62a759b5c36b51e732aa21ed2468996aee3d99e7898c7087a1998ef2a93bd0d7df9c5c2758048107b547d379c1efae9e
-  data.tar.gz: 4263f916d2e535d823ff3fe1421ec2e0a43a201d56f0520057d77b2efa93fd029332d42deafaf3a460ca2dab4fe6eddfaae6108e66390c46cbd0deeb3265dae2
+  metadata.gz: 6d133f2ab6121d7f7a3895fe907a51f3713c48d1463a80cba165ae6c5fc6e1f64d6bf9ccb2b368f7f17304eee8e8a36a40c02a00b456044f4199e15c698e9d80
+  data.tar.gz: 9515dbe37dab4c9d0a5a6e90c7074a3641ec9e31669b4fdd502e3b12e5ca6bf541ecf36eea0ec711c52710f3bd1cec017b3be76d68cb36b6e15aeb690c7185f9

data/app/pb_kits/playbook/data/menu.yml

@@ -20,6 +20,7 @@ kits:
     - gauge
     - legend
     - line_graph
+    - treemap_chart
   - dialog
   - filter
   - fixed_confirmation_toast

data/app/pb_kits/playbook/index.js

@@ -4,7 +4,6 @@ import 'lazysizes/plugins/attrchange/ls.attrchange'
 import 'lazysizes'
 
 // vvv React Component JSX Imports from the React Kits vvv
-export { default as Walkthrough } from './pb_walkthrough/_walkthrough'
 export { default as Avatar } from './pb_avatar/_avatar'
 export { default as AvatarActionButton } from './pb_avatar_action_button/_avatar_action_button'
 export { default as Background } from './pb_background/_background'
@@ -98,9 +97,11 @@ export { default as Title } from './pb_title/_title'
 export { default as TitleCount } from './pb_title_count/_title_count'
 export { default as TitleDetail } from './pb_title_detail/_title_detail'
 export { default as Toggle } from './pb_toggle/_toggle'
+export { default as TreemapChart } from './pb_treemap_chart/_treemap_chart'
 export { default as Typeahead } from './pb_typeahead/_typeahead'
 export { default as User } from './pb_user/_user'
 export { default as UserBadge } from './pb_user_badge/_user_badge'
+export { default as Walkthrough } from './pb_walkthrough/_walkthrough'
 export { default as WeekdayStacked } from './pb_weekday_stacked/_weekday_stacked'
 // ^^^ React Component JSX Imports from the React Kits ^^^
 

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

@@ -2,3 +2,4 @@
 <%= 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 }) %>
+

data/app/pb_kits/playbook/pb_caption/{_caption.jsx → _caption.tsx}

@@ -1,24 +1,22 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { deprecatedProps, globalProps } from '../utilities/globalProps'
+import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
 
 type CaptionProps = {
-  aria?: object,
-  children: array<React.ReactNode> | React.ReactNode,
+  aria?: {[key: string]: string},
+  children: React.ReactChild[],
   className?: string,
   color?: "default" | "light" | "lighter" | "success" | "error" | "link",
-  data?: object,
+  data?: {[key: string]: string},
   id?: string,
   size?: "xs" | "sm" | "md" | "lg" | "xl",
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "caption",
   text?: string,
   variant?: null | "link",
-};
+} & GlobalProps;
 
-const Caption = (props: CaptionProps) => {
+const Caption = (props: CaptionProps): React.ReactElement => {
   if (props.variant) deprecatedProps('Title', ['variant']) //variant prop is deprecated, use color instead
   const {
     aria = {},
@@ -32,6 +30,7 @@ const Caption = (props: CaptionProps) => {
     text,
     variant = null,
   } = props
+
   const tagOptions = [
     'h1',
     'h2',

data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.js

@@ -209,6 +209,43 @@ const highchartsDarkTheme = {
         threshold: null,
       },
     },
+
+    //TREEMAP CHART STYLES
+    treemap: {
+      layoutAlgorithm: "squarified",
+      allowTraversingTree: false,
+      animationLimit: 1000,
+      colors: [
+        colors.data_1,
+        colors.data_2,
+        colors.data_3,
+        colors.data_4,
+        colors.data_5,
+        colors.data_6,
+        colors.data_7,
+        colors.data_8,
+      ],
+      colorByPoint: true,
+      dataLabels: {
+        enabled: true,
+        style: {
+          fontFamily: typography.font_family_base,
+          fontWeight: typography.bold,
+          fontSize: typography.heading_4,
+        },
+      },
+      levels: [
+        {
+          level: 1,
+          dataLabels: {
+            enabled: false,
+          },
+        },
+      ],
+      traverseUpButton: {
+        position: { y: -40 },
+      }
+    },
   },
 }
 

data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.js

@@ -209,6 +209,43 @@ const highchartsTheme = {
         threshold: null,
       },
     },
+
+    //TREEMAP CHART STYLES
+    treemap: {
+      layoutAlgorithm: "squarified",
+      allowTraversingTree: false,
+      animationLimit: 1000,
+      colors: [
+        colors.data_1,
+        colors.data_2,
+        colors.data_3,
+        colors.data_4,
+        colors.data_5,
+        colors.data_6,
+        colors.data_7,
+        colors.data_8,
+      ],
+      colorByPoint: true,
+      dataLabels: {
+        enabled: true,
+        style: {
+          fontFamily: typography.font_family_base,
+          fontWeight: typography.bold,
+          fontSize: typography.heading_4,
+        },
+      },
+      levels: [
+        {
+          level: 1,
+          dataLabels: {
+            enabled: false,
+          },
+        },
+      ],
+      traverseUpButton: {
+        position: { y: -40 },
+      }
+    },
   },
 }
 

data/app/pb_kits/playbook/pb_form_pill/_form_pill.jsx

@@ -1,7 +1,7 @@
 /* @flow */
 import React from 'react'
 import classnames from 'classnames'
-import Title from '../pb_title/_title.jsx'
+import Title from '../pb_title/_title'
 import Icon from '../pb_icon/_icon.jsx'
 import Avatar from '../pb_avatar/_avatar'
 import { globalProps } from '../utilities/globalProps'

data/app/pb_kits/playbook/pb_kit/dateTime.js

@@ -1,9 +1,8 @@
 /* @flow */
 /*eslint-disable flowtype/space-before-type-colon */
 
-import moment from 'moment'
+import moment from 'moment-timezone'
 import 'moment-strftime'
-import 'moment-timezone'
 
 type DateTimeType = {
   value: String | Date,

data/app/pb_kits/playbook/pb_pill/_pill.jsx

@@ -3,7 +3,7 @@
 import React from 'react'
 
 import classnames from 'classnames'
-import Title from '../pb_title/_title.jsx'
+import Title from '../pb_title/_title'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 

data/app/pb_kits/playbook/pb_title/{_title.jsx → _title.tsx}

@@ -1,24 +1,22 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { deprecatedProps, globalProps } from '../utilities/globalProps'
+import { deprecatedProps, GlobalProps, globalProps } from '../utilities/globalProps'
 
 type TitleProps = {
-  aria?: object,
-  children?: array<React.ReactNode> | React.ReactNode,
+  aria?: {[key: string]: string},
+  children?: React.ReactChild[],
   className?: string,
   color?: "default" | "light" | "lighter" | "success" | "error" | "link",
-  data?: object,
+  data?: {[key: string]: string},
   id?: string,
   size?: 1 | 2 | 3 | 4,
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span",
   text?: string,
   variant?: null | "link",
-}
+} & GlobalProps
 
-const Title = (props: TitleProps) => {
+const Title = (props: TitleProps): React.ReactElement => {
   if (props.variant) deprecatedProps('Title', ['variant']) //variant prop is deprecated, use color instead
   const {
     aria = {},
@@ -33,14 +31,14 @@ const Title = (props: TitleProps) => {
     variant = null,
   } = props
 
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
+  const ariaProps: {[key: string]: string | number} = buildAriaProps(aria)
+  const dataProps: {[key: string]: string | number} = buildDataProps(data)
   const classes = classnames(
-    buildCss('pb_title_kit', size, variant, color),
+    buildCss('pb_title_kit', `size_${size}`, variant, color),
     globalProps(props),
     className,
   )
-  const Tag = `${tag}`
+  const Tag: React.ReactElement | any = `${tag}`
 
   return (
     <Tag

data/app/pb_kits/playbook/pb_title/title.test.js

@@ -12,7 +12,7 @@ test('returns namespaced class name', () => {
   )
 
   const kit = screen.getByTestId('primary-test')
-  expect(kit).toHaveClass('pb_title_kit_3')
+  expect(kit).toHaveClass('pb_title_kit_size_3')
 })
 
 test('with colors', () => {
@@ -25,5 +25,5 @@ test('with colors', () => {
   )
 
   const kit = screen.getByTestId('primary-test')
-  expect(kit).toHaveClass('pb_title_kit_3_success')
+  expect(kit).toHaveClass('pb_title_kit_size_3_success')
 })

data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.jsx

@@ -0,0 +1,79 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+
+import { globalProps } from '../utilities/globalProps'
+import pbChart from '../plugins/pb_chart'
+
+type TreemapChartProps = {
+  chartData: array<{
+    name: string,
+    parent?: string | number,
+    value: number,
+    color?: string,
+    id?: string | number,
+  }>,
+  className?: string,
+  colors: array,
+  dark?: boolean,
+  drillable: boolean,
+  grouped: boolean,
+  height?: string,
+  id: number,
+  title: string,
+  tooltipHtml: string,
+  type?: string,
+}
+
+export default class TreemapChart extends React.Component<TreemapChartProps> {
+  static defaultProps = {
+    className: 'pb_treemap_chart',
+    dark: false,
+    drillable: false,
+    grouped: false,
+    type: 'treemap',
+  }
+
+  componentDidMount() {
+    const {
+      chartData,
+      className,
+      colors  = [],
+      dark,
+      drillable,
+      grouped,
+      height,
+      id,
+      title = "",
+      tooltipHtml = '<span style="font-weight: bold; color:{point.color};">&#9679; </span>{point.name}: <b>{point.value}</b>',
+      type,
+    } = this.props
+
+    new pbChart(`.${className}`, {
+      chartData: chartData,
+      colors: colors,
+      dark,
+      drillable,
+      grouped,
+      height: height,
+      id: id,
+      title: title,
+      tooltipHtml,
+      type,
+    })
+  }
+
+  props: TreemapChartProps
+
+  render() {
+    const { className, id } = this.props
+
+    return (
+      <div
+          className={classnames(globalProps(this.props), className)}
+          id={id}
+      />
+    )
+  }
+}

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

@@ -0,0 +1,5 @@
+Treemap charts are used to compare the relative size of groups of data. They can also use a nested data structure, allowing a user to drill down into a group to see its constituent data points.
+
+The default height of treemap is 400px and can be changed. The default height is in pixel units, but can also use percentage string (percentage would be that of the width. For example, `height:"50%"` would mean that the height is 50% of the width). This allows for preserving the aspect ratio across responsive sizes.
+
+For more information, see: <a href="https://api.highcharts.com/highcharts/chart.height" target="_blank"> highcharts/chart.height</a>.

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.html.erb

@@ -0,0 +1,37 @@
+<% data = [
+  {
+    name: "Pepperoni",
+    parent: "Toppings",
+    value: 600,
+  }, {
+    name: "Cheese",
+    parent: "Toppings",
+    value: 510,
+  }, {
+    name: "Mushroom",
+    parent: "Toppings",
+    value: 330,
+  },{
+    name: "Onions",
+    parent: "Toppings",
+    value: 250,
+  }, {
+    name: "Olives",
+    parent: "Toppings",
+    value: 204,
+  }, {
+    name: "Pineapple",
+    parent: "Toppings",
+    value: 90,
+  }, {
+    name: "Pizza Toppings",
+    id: "Toppings",
+  },
+] %>
+
+<%= pb_rails("treemap_chart", props: {
+    chart_data: data,
+    colors: ["data-4", "data-7", "#8E6E53", "#124732"],
+    id: "treemap-colors",
+    title: "Favored Pizza Toppings",
+}) %>

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.jsx

@@ -0,0 +1,48 @@
+import React from 'react'
+
+import TreemapChart from '../_treemap_chart'
+
+const chartData = [
+  {
+    name: "Pepperoni",
+    parent: "Toppings",
+    value: 600,
+  }, {
+    name: "Cheese",
+    parent: "Toppings",
+    value: 510,
+  }, {
+    name: "Mushroom",
+    parent: "Toppings",
+    value: 330,
+  },{
+    name: "Onions",
+    parent: "Toppings",
+    value: 250,
+  }, {
+    name: "Olives",
+    parent: "Toppings",
+    value: 204,
+  }, {
+    name: "Pineapple",
+    parent: "Toppings",
+    value: 90,
+  }, {
+    name: "Pizza Toppings",
+    id: "Toppings",
+  },
+]
+
+const TreemapChartColors = (props) => (
+  <div>
+    <TreemapChart
+        chartData={chartData}
+        colors={["data-4", "data-7", "#8E6E53", "#124732"]}
+        id="treemap-colors"
+        title="Favored Pizza Toppings"
+        {...props}
+    />
+  </div>
+)
+
+export default TreemapChartColors

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.md

@@ -0,0 +1,2 @@
+Custom data colors allow for color customization to match the needs of business requirements.
+Pass the prop `colors` and use desired values `data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8` in an array. Hex colors are also available `eg: #CA0095`

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.html.erb

@@ -0,0 +1,37 @@
+<% data = [
+  {
+    name: "Pepperoni",
+    parent: "Toppings",
+    value: 600,
+  }, {
+    name: "Cheese",
+    parent: "Toppings",
+    value: 510,
+  }, {
+    name: "Mushroom",
+    parent: "Toppings",
+    value: 330,
+  },{
+    name: "Onions",
+    parent: "Toppings",
+    value: 250,
+  }, {
+    name: "Olives",
+    parent: "Toppings",
+    value: 204,
+  }, {
+    name: "Pineapple",
+    parent: "Toppings",
+    value: 90,
+  }, {
+    name: "Pizza Toppings",
+    id: "Toppings",
+  },
+] %>
+
+
+<%= pb_rails("treemap_chart", props: {
+    chart_data: data,
+    id: "treemap-default",
+    title: "Favored Pizza Toppings",
+}) %>

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.jsx

@@ -0,0 +1,47 @@
+import React from 'react'
+
+import TreemapChart from '../_treemap_chart'
+
+const chartData = [
+  {
+    name: "Pepperoni",
+    parent: "Toppings",
+    value: 600,
+  }, {
+    name: "Cheese",
+    parent: "Toppings",
+    value: 510,
+  }, {
+    name: "Mushroom",
+    parent: "Toppings",
+    value: 330,
+  },{
+    name: "Onions",
+    parent: "Toppings",
+    value: 250,
+  }, {
+    name: "Olives",
+    parent: "Toppings",
+    value: 204,
+  }, {
+    name: "Pineapple",
+    parent: "Toppings",
+    value: 90,
+  }, {
+    name: "Pizza Toppings",
+    id: "Toppings",
+  },
+]
+
+const TreemapChartDefault = (props) => (
+  <div>
+    <TreemapChart
+        chartData={chartData}
+        id="treemap-default"
+        title="Favored Pizza Toppings"
+        {...props}
+    />
+  </div>
+)
+
+export default TreemapChartDefault

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.md

@@ -0,0 +1,3 @@
+Points are automatically arranged by their `value` size.
+
+By default, point colors are assigned sequentially from the global `data` colors. Note that data points without a value (such as parent nodes) will still take on the next available color.

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.html.erb

@@ -0,0 +1,79 @@
+<% data = [
+  {
+    name: "Evergreen",
+    id: "Evergreen",
+    color: "#0056CF",
+  }, {
+    name: "Pine",
+    id: "Pine",
+    parent: "Evergreen",
+    value: 300,
+    color: "#477BC4",
+  }, {
+    name: "Ponderosa Pine",
+    parent: "Pine",
+    value: 50,
+  }, {
+    name: "Scots Pine",
+    parent: "Pine",
+    value: 150,
+  }, {
+    name: "White Pine",
+    parent: "Pine",
+    value: 100,
+  }, {
+    name: "Douglas Fir",
+    parent: "Evergreen",
+    value: 150,
+  }, {
+    name: "Juniper",
+    parent: "Evergreen",
+    value: 80,
+  }, {
+    name: "Hemlock",
+    parent: "Evergreen",
+    value: 30,
+  }, {
+    name: "Deciduous",
+    id: "Deciduous",
+    color: "#F9BB00",
+  }, {
+    name: "Oak",
+    parent: "Deciduous",
+    value: 80,
+  }, {
+    name: "Maple",
+    id: "Maple",
+    parent: "Deciduous",
+    value: 180,
+    color: "#F7CE52",
+  }, {
+    name: "Red Maple",
+    parent: "Maple",
+    value: 80,
+  }, {
+    name: "Sugar Maple",
+    parent: "Maple",
+    value: 100,
+  }, {
+    name: "Beech",
+    parent: "Deciduous",
+    value: 50,
+  }, {
+    name: "Willow",
+    parent: "Deciduous",
+    value: 100,
+  }, {
+    name: "Juniper",
+    parent: "Deciduous",
+    value: 90,
+  },
+] %>
+
+<%= pb_rails("treemap_chart", props: {
+    chart_data: data,
+    drillable: true,
+    grouped: true,
+    id: "treemap-drillable",
+    title: "Drillable Grouped Tree Species",
+}) %>