playbook_ui 14.21.2.pre.alpha.PLAY2233removetreemapchart8408 → 14.21.2.pre.alpha.PLAY2256stickydataidreact8446

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",
+}) %>

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/treemapChart.test.js

@@ -0,0 +1,63 @@
+/* eslint-disable no-console */
+
+import React from 'react';
+import { render, screen } from '../utilities/test-utils';
+import TreemapChart from './_treemap_chart';
+
+beforeEach(() => {
+  // Silences error logs within the test suite.
+  jest.spyOn(console, 'error');
+  jest.spyOn(console, 'warn');
+  console.error.mockImplementation(() => {});
+  console.warn.mockImplementation(() => {});
+});
+
+afterEach(() => {
+  console.error.mockRestore();
+  console.warn.mockRestore();
+});
+
+const testId = 'treemapchart1';
+
+test('uses exact classname', () => {
+  const 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",
+    },
+  ]
+  render(
+    <TreemapChart
+        chartData={data}
+        data={{ testid: testId }}
+        id="tree-map-id"
+    />
+  );
+ 
+  const kit = screen.getByTestId(testId);
+  expect(kit).toHaveClass('pb_treemap_chart');
+});

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

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