playbook_ui 10.26.0.pre.alpha1 → 10.26.0.pre.alpha3

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/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,43 +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 :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/utilities/text.ts

@@ -1,22 +0,0 @@
-import { filter, isEmpty } from 'lodash'
-
-const titleizedWord = (word: string): string => (
-  word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
-)
-
-export const titleize = (sentence: string): string => (
-  isEmpty(sentence) ? sentence : sentence.split(' ').map(titleizedWord).join(' ')
-)
-
-const notEmpty = (value: string | Record<string, unknown>): boolean => !isEmpty(value)
-
-export const joinPresent = (array: [], separator: string): string => (
-  filter(array, notEmpty).join(separator)
-)
-
-export const camelToSnakeCase = (word: string): string => {
-  return word.split(/([A-Z])/g).map((w, i) => {
-    const prefix = i > 0 ? '_' : ''
-    return w === w.toLowerCase() ? w : prefix + w.toLowerCase()
-  }).join("")
-}