playbook_ui 14.21.2.pre.alpha.PLAY2179playbookiconsupdate8389 → 14.21.2.pre.alpha.PLAY2233removetreemapchart8408

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

@@ -1,65 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,37 +0,0 @@
-<% 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

@@ -1,48 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,63 +0,0 @@
-/* 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

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

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

@@ -1,48 +0,0 @@
-# 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 :custom_options, 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 standard_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 chart_options
-        standard_options.deep_merge(custom_options)
-      end
-
-      def classname
-        generate_classname("pb_treemap_chart")
-      end
-    end
-  end
-end