playbook_ui 10.25.1 → 10.26.0.pre.alpha1

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

@@ -0,0 +1,90 @@
+import React from 'react'
+
+import TreemapChart from '../_treemap_chart'
+
+const chartData = [
+  {
+    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,
+  },
+]
+
+const TreemapChartDrillable = (props) => (
+  <div>
+    <TreemapChart
+        chartData={chartData}
+        drillable
+        grouped
+        id="treemap-drillable"
+        title="Drillable Grouped Tree Species"
+        {...props}
+    />
+  </div>
+)
+
+export default TreemapChartDrillable

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

@@ -0,0 +1 @@
+Adding the `drillable` prop allows the tree to be traversed up and down by clicking into each box. Relationships are established through the `chartData`, detailed in the <a href="#treemap-grouped-data">Grouped Data section above</a>.

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

@@ -0,0 +1,54 @@
+<% data = [
+  {
+    name: 'Meat',
+    id: 'Meat',
+    color: "#0056CF",
+  }, {
+    name: 'Pepperoni',
+    parent: 'Meat',
+    value: 250,
+  }, {
+    name: 'Meatball',
+    parent: 'Meat',
+    value: 400,
+  }, {
+    name: "Anchovy",
+    parent: 'Meat',
+    value: 40,
+  }, {
+    name: 'Vegetarian',
+    id: 'Vegetarian',
+    color: "#F9BB00",
+  }, {
+    name: 'Onions',
+    parent: 'Vegetarian',
+    value: 300,
+  }, {
+    name: 'Pineapple',
+    parent: 'Vegetarian',
+    value: 90,
+  }, {
+    name: "Peppers",
+    parent: 'Vegetarian',
+    value: 80,
+  }, {
+    name: "Specialty",
+    id: "Specialty",
+    color: "#9E64E9",
+  },{
+    name: "Buffalo Chicken",
+    parent: "Specialty",
+    value: 400,
+  }, {
+    name: "Supreme",
+    parent: "Specialty",
+    value: 150,
+  }
+] %>
+
+<%= pb_rails("treemap_chart", props: {
+    chart_data: data,
+    grouped: true,
+    id: "treemap-grouped",
+    title: "Grouped Toppings",
+}) %>

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

@@ -0,0 +1,65 @@
+import React from 'react'
+
+import TreemapChart from '../_treemap_chart'
+
+const chartData = [
+  {
+    name: 'Meat',
+    id: 'Meat',
+    color: "#0056CF",
+  }, {
+    name: 'Pepperoni',
+    parent: 'Meat',
+    value: 250,
+  }, {
+    name: 'Meatball',
+    parent: 'Meat',
+    value: 400,
+  }, {
+    name: "Anchovy",
+    parent: 'Meat',
+    value: 40,
+  }, {
+    name: 'Vegetarian',
+    id: 'Vegetarian',
+    color: "#F9BB00",
+  }, {
+    name: 'Onions',
+    parent: 'Vegetarian',
+    value: 300,
+  }, {
+    name: 'Pineapple',
+    parent: 'Vegetarian',
+    value: 90,
+  }, {
+    name: "Peppers",
+    parent: 'Vegetarian',
+    value: 80,
+  }, {
+    name: "Specialty",
+    id: "Specialty",
+    color: "#9E64E9",
+  },{
+    name: "Buffalo Chicken",
+    parent: "Specialty",
+    value: 400,
+  }, {
+    name: "Supreme",
+    parent: "Specialty",
+    value: 150,
+  }
+]
+
+const TreemapChartGroupedData = (props) => (
+  <div>
+    <TreemapChart
+        chartData={chartData}
+        grouped
+        id="treemap-grouped-data"
+        title="Grouped Toppings"
+        {...props}
+    />
+  </div>
+)
+
+export default TreemapChartGroupedData

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

@@ -0,0 +1,3 @@
+Data can be grouped into distinct segments by specifying the relationship in the `chartData`. For a point to be a parent, it needs an `id` of type `string` included in its object. Any other data points may then reference that `id` as their `parent` value to establish the tree structure.
+
+Parents can also be passed a custom color to be applied to all of its child points.

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.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-tooltip",
+    title: "Favored Pizza Toppings",
+    tooltip_html: "<p>Custom tooltip for {point.name} <br/>with value: {point.value}</p>",
+}) %>

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.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 TreemapChartTooltip = (props) => (
+  <div>
+    <TreemapChart
+        chartData={chartData}
+        id="treemap-tooltip"
+        title="Favored Pizza Toppings"
+        tooltipHtml={"<p>Custom tooltip for {point.name} <br/>with value: {point.value}</p>"}
+        {...props}
+    />
+  </div>
+)
+
+export default TreemapChartTooltip

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

@@ -0,0 +1,3 @@
+A custom tooltip format can be specified. The desired format can be passed as a `string` of custom HTML to the `tooltipHtml` prop.
+
+`{point.name}` and `{point.value}` are useful values that can be referenced for each point in the graph.

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

@@ -0,0 +1,15 @@
+examples:
+
+  rails:
+  - treemap_chart_default: Default
+  - treemap_chart_grouped_data: Grouped Data
+  - treemap_chart_drillable: Drillable
+  - treemap_chart_colors: Color Overrides
+  - treemap_chart_tooltip: Tooltip Customization
+
+  react:
+  - treemap_chart_default: Default
+  - treemap_chart_grouped_data: Grouped Data
+  - treemap_chart_drillable: Drillable
+  - treemap_chart_colors: Color Overrides
+  - treemap_chart_tooltip: Tooltip Customization

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

@@ -0,0 +1,5 @@
+export { default as TreemapChartDefault } from './_treemap_chart_default.jsx'
+export { default as TreemapChartGroupedData } from './_treemap_chart_grouped_data.jsx'
+export { default as TreemapChartDrillable } from './_treemap_chart_drillable.jsx'
+export { default as TreemapChartColors } from './_treemap_chart_colors.jsx'
+export { default as TreemapChartTooltip } from './_treemap_chart_tooltip.jsx'

data/app/pb_kits/playbook/pb_treemap_chart/treemap_chart.html.erb

@@ -0,0 +1 @@
+<%= react_component('TreemapChart', object.chart_options) %>

data/app/pb_kits/playbook/pb_treemap_chart/treemap_chart.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbTreemapChart
+    class TreemapChart < Playbook::KitBase
+      prop :chart_data, type: Playbook::Props::Array,
+                        default: []
+      prop :colors, type: Playbook::Props::Array,
+                    default: []
+      prop :drillable, type: Playbook::Props::Boolean, default: false
+      prop :grouped, type: Playbook::Props::Boolean, default: false
+      prop :height
+      prop :title, default: ""
+      prop :tooltip_html, default: '<span style="font-weight: bold; color:{point.color};">&#9679; </span>
+                                      {point.name}: ' + '<b>{point.value}
+                                    </b>'
+
+      def chart_type
+        "treemap"
+      end
+
+      def chart_options
+        {
+          chartData: chart_data,
+          className: classname,
+          colors: colors,
+          dark: dark ? "dark" : "",
+          drillable: drillable,
+          grouped: grouped,
+          height: height,
+          id: id,
+          title: title,
+          tooltipHtml: tooltip_html,
+          type: chart_type,
+        }
+      end
+
+      def classname
+        generate_classname("pb_treemap_chart")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/playbook-doc.js

@@ -91,6 +91,7 @@ import * as Title from 'pb_title/docs'
 import * as TitleCount from 'pb_title_count/docs'
 import * as TitleDetail from 'pb_title_detail/docs'
 import * as Toggle from 'pb_toggle/docs'
+import * as TreemapChart from 'pb_treemap_chart/docs'
 import * as Typeahead from 'pb_typeahead/docs'
 import * as User from 'pb_user/docs'
 import * as UserBadge from 'pb_user_badge/docs'
@@ -185,6 +186,7 @@ WebpackerReact.setup({
   ...TitleCount,
   ...TitleDetail,
   ...Toggle,
+  ...TreemapChart,
   ...Typeahead,
   ...User,
   ...UserBadge,

data/app/pb_kits/playbook/playbook-rails-react-bindings.js

@@ -13,6 +13,7 @@ import Legend from './pb_legend/_legend'
 import LineGraph from './pb_line_graph/_line_graph'
 import Passphrase from './pb_passphrase/_passphrase'
 import RichTextEditor from './pb_rich_text_editor/_rich_text_editor'
+import TreemapChart from './pb_treemap_chart/_treemap_chart'
 import Typeahead from './pb_typeahead/_typeahead'
 
 WebpackerReact.registerComponents({
@@ -26,6 +27,7 @@ WebpackerReact.registerComponents({
   LineGraph,
   Passphrase,
   RichTextEditor,
+  TreemapChart,
   Typeahead,
 })
 

data/app/pb_kits/playbook/plugins/pb_chart.js

@@ -7,6 +7,7 @@ import colors from '../tokens/exports/_colors.scss'
 import pie from 'highcharts/modules/variable-pie'
 import highchartsMore from 'highcharts/highcharts-more'
 import solidGauge from 'highcharts/modules/solid-gauge'
+import treemap from 'highcharts/modules/treemap'
 
 pie(Highcharts)
 
@@ -63,6 +64,8 @@ class pbChart {
       this.setupPieChart(options)
     } else if (this.options.type == 'gauge') {
       this.setupGauge(options)
+    } else if (this.options.type == 'treemap') {
+      this.setupTreemap(options)
     } else {
       this.setupChart(options)
     }
@@ -191,6 +194,37 @@ class pbChart {
     })
   }
 
+  setupTreemap(options) {
+    treemap(Highcharts)
+    this.setupTheme()
+    options.dark ? Highcharts.setOptions(highchartsDarkTheme) :  Highcharts.setOptions(highchartsTheme)
+
+    Highcharts.chart(this.defaults.id, {
+      title: {
+        text: this.defaults.title,
+      },
+      chart: {
+        height: this.defaults.height,
+        type: this.defaults.type,
+      },
+      credits: false,
+      series: [{
+        data: this.defaults.chartData,
+      }],
+      plotOptions: {
+        treemap: {
+          allowTraversingTree: this.defaults.drillable,
+          colorByPoint: !this.defaults.grouped,
+          colors: options.colors !== undefined && options.colors.length > 0 ? mapColors(options.colors) : highchartsTheme.colors,
+        },
+      },
+      tooltip: {
+        pointFormat: this.defaults.tooltipHtml,
+        useHTML: true,
+      },
+    })
+  }
+
   setupChart(options) {
     this.setupTheme()
     const configOptions = {

data/app/pb_kits/playbook/utilities/_flex_direction.scss

@@ -1,19 +1,32 @@
-.flex_direction_row {
-  display: flex;
-  flex-direction: row !important;
-}
+$flex_direction_values: (
+  row: row,
+  column: column,
+  row_reverse: row-reverse,
+  column_reverse: column-reverse
+);
 
-.flex_direction_column {
-  display: flex;
-  flex-direction: column !important;
-}
+$media-query-breakpoints: (
+  xs: "xs",
+  sm: "sm",
+  md: "md",
+  lg: "lg",
+  xl: "xl"
+);
 
-.flex_direction_row_reverse {
-  display: flex;
-  flex-direction: row-reverse !important;
+@each $flex-direction, $flex-direction-value in $flex_direction_values {
+  .flex_direction_#{$flex-direction} {
+    display: flex;
+    flex-direction: #{$flex-direction-value} !important;
+  }
 }
 
-.flex_direction_column_reverse {
-  display: flex;
-  flex-direction: column-reverse !important;
-}
+@each $flex-direction, $flex-direction-value in $flex_direction_values {
+  @each $breakpoint, $breakpoint-value in $media-query-breakpoints {
+    .flex_direction_#{$breakpoint}_#{$flex-direction} {
+      display: flex;
+      @include break_at( breakpoint($breakpoint-value)) {
+        flex-direction: #{$flex-direction-value} !important;
+      }
+    }
+  }
+}