playbook_ui 10.26.0.pre.alpha1 → 10.26.0.pre.alpha.sticky1

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

@@ -7,7 +7,6 @@ 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)
 
@@ -64,8 +63,6 @@ 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)
     }
@@ -194,37 +191,6 @@ 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,32 +1,19 @@
-$flex_direction_values: (
-  row: row,
-  column: column,
-  row_reverse: row-reverse,
-  column_reverse: column-reverse
-);
-
-$media-query-breakpoints: (
-  xs: "xs",
-  sm: "sm",
-  md: "md",
-  lg: "lg",
-  xl: "xl"
-);
+.flex_direction_row {
+  display: flex;
+  flex-direction: row !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 {
+  display: flex;
+  flex-direction: column !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;
-      }
-    }
-  }
+.flex_direction_row_reverse {
+  display: flex;
+  flex-direction: row-reverse !important;
 }
+
+.flex_direction_column_reverse {
+  display: flex;
+  flex-direction: column-reverse !important;
+}

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -1,54 +1,74 @@
-// Please keep these in alphabetical order
 import { omit } from 'lodash'
-import { camelToSnakeCase } from './text'
 
-type Alignment = "start" | "end" | "center"
+type Sizes = "xs" | "sm" | "md" | "lg" | "xl"
+type None = "none"
 
-type AlignContent = {
-  alignContent?: Alignment & Space
+type AllSizes = None & Sizes
+
+type Margin = {
+  marginRight?: AllSizes,
+  marginLeft?: AllSizes,
+  marginTop?: AllSizes,
+  marginBottom?: AllSizes,
+  marginX?: AllSizes,
+  marginY?: AllSizes,
+  margin?: AllSizes,
 }
 
-type AlignItems = {
-  alignItems?: Alignment & ("flexStart" | "flexEnd" | "stretch" | "baseline")
+type Padding = {
+  paddingRight?: AllSizes,
+  paddingLeft?: AllSizes,
+  paddingTop?: AllSizes,
+  paddingBottom?: AllSizes,
+  paddingX?: AllSizes,
+  paddingY?: AllSizes,
+  padding?: AllSizes,
 }
 
-type AlignSelf = {
-  alignSelf?: Alignment & ("auto" | "stretch" | "baseline")
+type Dark = {
+  dark?: boolean,
 }
-type AllSizes = None & Sizes
 
-type BorderRadius = {
-  borderRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "rounded",
+type NumberSpacing = {
+  numberSpacing?: "tabular",
 }
 
-type Cursor = {
-  cursor?: "pointer",
+type MaxWidth = {
+  maxWidth?: Sizes,
 }
 
-type Dark = {
-  dark?: boolean,
+type ZIndex = {
+  zIndex?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10,
+}
+
+type Shadow = {
+  shadow?: "none" | "deep" | "deeper" | "deepest",
+}
+
+type LineHeight = {
+  lineHeight?: "loosest" | "looser" | "loose" | "normal" | "tight" | "tighter" | "tightest",
 }
 
 type Display = {
   display?: "block" | "flex" | "hidden" | "inline_block" | "inline" | "inline_flex",
 }
 
+type Cursor = {
+  cursor?: "pointer",
+}
+
+type BorderRadius = {
+  borderRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "rounded",
+}
+
 type Flex = {
   flex?: "none" | "initial" | "auto" | 1
 }
 
 type FlexDirection = {
-  flexDirection?: {
-    xs?: FlexDirectionOptions,
-    sm?: FlexDirectionOptions,
-    md?: FlexDirectionOptions,
-    lg?: FlexDirectionOptions,
-    xl?: FlexDirectionOptions,
-  }
+  flexDirection?: "row" | "column" | "rowReverse" | "columnReverse"
 }
 
-type FlexDirectionOptions = "row" | "column" | "row_reverse" | "column_reverse"
-
 type FlexGrow = {
   flexGrow?: 0 | 1
 }
@@ -58,9 +78,13 @@ type FlexShrink = {
 }
 
 type FlexWrap = {
-  flexWrap?: "wrap" | "nowrap" | "reverse",
+  flexWrap?: "wrap" | "nowrap" | "wrapReverse"
 }
 
+type Alignment = "start" | "end" | "center"
+
+type Space = "spaceBetween" | "spaceAround" | "spaceEvenly"
+
 type JustifyContent = {
   justifyContent?: Alignment & Space
 }
@@ -69,57 +93,22 @@ type JustifySelf = {
   justifySelf?: Alignment & ("auto" | "stretch")
 }
 
-type LineHeight = {
-  lineHeight?: "loosest" | "looser" | "loose" | "normal" | "tight" | "tighter" | "tightest",
-}
-
-type Margin = {
-  marginRight?: AllSizes,
-  marginLeft?: AllSizes,
-  marginTop?: AllSizes,
-  marginBottom?: AllSizes,
-  marginX?: AllSizes,
-  marginY?: AllSizes,
-  margin?: AllSizes,
+type AlignContent = {
+  alignContent?: Alignment & Space
 }
 
-type MaxWidth = {
-  maxWidth?: Sizes,
+type AlignItems = {
+  alignItems?: Alignment & ("flexStart" | "flexEnd" | "stretch" | "baseline")
 }
 
-type None = "none"
-
-type NumberSpacing = {
-  numberSpacing?: "tabular",
+type AlignSelf = {
+  alignSelf?: Alignment & ("auto" | "stretch" | "baseline")
 }
 
 type Order = {
   order?: "none" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
 }
 
-type Padding = {
-  paddingRight?: AllSizes,
-  paddingLeft?: AllSizes,
-  paddingTop?: AllSizes,
-  paddingBottom?: AllSizes,
-  paddingX?: AllSizes,
-  paddingY?: AllSizes,
-  padding?: AllSizes,
-}
-
-type Shadow = {
-  shadow?: "none" | "deep" | "deeper" | "deepest",
-}
-
-type Sizes = "xs" | "sm" | "md" | "lg" | "xl"
-
-type Space = "spaceBetween" | "spaceAround" | "spaceEvenly"
-
-type ZIndex = {
-  zIndex?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10,
-}
-
-// keep this as the last type definition
 export type GlobalProps = AlignContent & AlignItems & AlignSelf &
   BorderRadius & Cursor & Dark & Display & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
@@ -201,49 +190,76 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     css += cursor ? `cursor_${cursor} ` : ''
     return css
   },
+  flexDirectionProps: ({ flexDirection }: FlexDirection) => {
+    let css = ''
+    css += flexDirection == 'columnReverse' ? 'flex_direction_column_reverse' :
+      flexDirection == 'rowReverse' ? 'flex_direction_row_reverse' :
+        flexDirection ? `flex_direction_${flexDirection} ` : ''
+    return css
+  },
+  flexWrapProps: ({ flexWrap }: FlexWrap) => {
+    let css = ''
+    css += flexWrap == 'wrapReverse' ? 'flex_wrap_reverse' :
+      flexWrap == 'nowrap' ? 'flex_nowrap' :
+        flexWrap ? `flex_wrap_${flexWrap} ` : ''
+    return css
+  },
+  justifyContentProps: ({ justifyContent }: JustifyContent) => {
+    let css = ''
+    css += justifyContent == 'spaceBetween' ? 'justify_content_space_between' :
+      justifyContent == 'spaceEvenly' ? 'justify_content_space_evenly' :
+        justifyContent == 'spaceAround' ? 'justify_content_space_around' :
+          justifyContent ? `justify_content_${justifyContent}` : ''
+    return css
+  },
+  justifySelfProps: ({ justifySelf }: JustifySelf) => {
+    let css = ''
+    css += justifySelf ? `justify_self_${justifySelf}` : ''
+    return css
+  },
   alignItemsProps: ({ alignItems }: AlignItems) => {
-    return alignItems ? `align_items_${camelToSnakeCase(alignItems)}` : ''
+    let css = ''
+    css += alignItems == 'flexStart' ? 'align_items_flex_start' :
+      alignItems == 'flexEnd' ? 'align_items_flex_end' :
+        alignItems ? `align_items_${alignItems}` : ''
+    return css
   },
   alignContentProps: ({ alignContent }: AlignContent) => {
-    return alignContent ? `align_content_${camelToSnakeCase(alignContent)}` : ''
+    let css = ''
+    css += alignContent == 'spaceBetween' ? 'align_content_space_between' :
+      alignContent == 'spaceEvenly' ? 'align_content_space_evenly' :
+        alignContent == 'spaceAround' ? 'align_content_space_around' :
+          alignContent ? `align_content_${alignContent}` : ''
+    return css
   },
   alignSelfProps: ({ alignSelf }: AlignSelf) => {
-    return alignSelf ? `align_self_${alignSelf}` : ''
-  },
-  flexDirectionProps: ({ flexDirection }: FlexDirection) => {
-    if (typeof flexDirection !== 'object') return
-
-    const flexKeys: string[] = Object.keys(flexDirection)
-
-    return flexKeys.map((key: Sizes) => {
-      const flexDirectionValue: string = flexDirection[key]
-      return `flex_direction_${key}_${flexDirectionValue}`
-    }).join(" ")
-  },
-  flexWrapProps: ({ flexWrap }: FlexWrap) => {
-    return flexWrap ? `flex_wrap_${flexWrap} ` : ''
+    let css = ''
+    css += alignSelf ? `align_self_${alignSelf}` : ''
+    return css
   },
   flexProps: ({ flex }: Flex) => {
-    return flex ? `flex_${flex}` : ''
+    let css = ''
+    css += flex ? `flex_${flex}` : ''
+    return css
   },
   flexGrowProps: ({ flexGrow }: FlexGrow) => {
-    return typeof(flexGrow) !== undefined ? `flex_grow_${flexGrow}` : ''
+    let css = ''
+    css += flexGrow ? `flex_grow_${flexGrow}` : ''
+    return css
   },
   flexShrinkProps: ({ flexShrink }: FlexShrink) => {
-    return typeof(flexShrink) !== undefined ? `flex_shrink_${flexShrink}` : ''
-  },
-  justifyContentProps: ({ justifyContent }: JustifyContent) => {
-    return justifyContent ? `justify_content_${camelToSnakeCase(justifyContent)}` : ''
-  },
-  justifySelfProps: ({ justifySelf }: JustifySelf) => {
-    return justifySelf ? `justify_self_${justifySelf}` : ''
+    let css = ''
+    css += flexShrink ? `flex_shrink_${flexShrink}` : ''
+    return css
   },
   orderProps: ({ order }: Order) => {
-    return order ? `order_${order}` : ''
+    let css = ''
+    css += order ? `order_${order}` : ''
+    return css
   }
 }
 
-export const globalProps = (props: GlobalProps, defaultProps: {[key: string]: string} | Record<string, never> = {}): string => {
+export const globalProps = (props: GlobalProps, defaultProps: {[key: string]: string} | {} = {}): string => {
   const allProps = { ...props, ...defaultProps }
   return Object.keys(PROP_CATEGORIES).map((key) => {
     return PROP_CATEGORIES[key](allProps)

data/app/pb_kits/playbook/utilities/text.js

@@ -0,0 +1,15 @@
+import { filter, isEmpty } from 'lodash'
+
+const titleizedWord = (string) => (
+  string.charAt(0).toUpperCase() + string.slice(1).toLowerCase()
+)
+
+export const titleize = (sentence) => (
+  isEmpty(sentence) ? sentence : sentence.split(' ').map(titleizedWord).join(' ')
+)
+
+const notEmpty = (value) => !isEmpty(value)
+
+export const joinPresent = (array, separator) => (
+  filter(array, notEmpty).join(separator)
+)

data/lib/playbook/flex_direction.rb

@@ -12,13 +12,7 @@ module Playbook
 
       selected_props.map do |k|
         flex_direction_value = send(k)
-        if flex_direction_value.is_a?(Hash)
-          flex_direction_value.map do |media_size, flex_value|
-            "flex_direction_#{media_size}_#{flex_value}"
-          end
-        else
-          "flex_direction_#{flex_direction_value}" unless flex_direction_value.nil?
-        end
+        "flex_direction_#{flex_direction_value}" if flex_direction_values.include? flex_direction_value
       end.compact.join(" ")
     end
 

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "10.25.0"
-  VERSION = "10.26.0.pre.alpha1"
+  VERSION = "10.26.0.pre.alpha.sticky1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 10.26.0.pre.alpha1
+  version: 10.26.0.pre.alpha.sticky1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-04-28 00:00:00.000000000 Z
+date: 2022-05-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -452,8 +452,8 @@ files:
 - app/pb_kits/playbook/pb_button_toolbar/docs/_description.md
 - app/pb_kits/playbook/pb_button_toolbar/docs/example.yml
 - app/pb_kits/playbook/pb_button_toolbar/docs/index.js
+- app/pb_kits/playbook/pb_caption/_caption.jsx
 - app/pb_kits/playbook/pb_caption/_caption.scss
-- app/pb_kits/playbook/pb_caption/_caption.tsx
 - app/pb_kits/playbook/pb_caption/_caption_mixin.scss
 - app/pb_kits/playbook/pb_caption/caption.html.erb
 - app/pb_kits/playbook/pb_caption/caption.rb
@@ -1734,6 +1734,9 @@ files:
 - app/pb_kits/playbook/pb_table/docs/_table_sm.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_sm.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_sm.md
+- app/pb_kits/playbook/pb_table/docs/_table_sticky.html.erb
+- app/pb_kits/playbook/pb_table/docs/_table_sticky.jsx
+- app/pb_kits/playbook/pb_table/docs/_table_sticky.md
 - app/pb_kits/playbook/pb_table/docs/_table_two_actions.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_two_actions.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_two_actions.md
@@ -1755,6 +1758,7 @@ files:
 - app/pb_kits/playbook/pb_table/styles/_reset.scss
 - app/pb_kits/playbook/pb_table/styles/_side_highlight.scss
 - app/pb_kits/playbook/pb_table/styles/_single-line.scss
+- app/pb_kits/playbook/pb_table/styles/_sticky_header.scss
 - app/pb_kits/playbook/pb_table/styles/_structure.scss
 - app/pb_kits/playbook/pb_table/styles/_table-card.scss
 - app/pb_kits/playbook/pb_table/styles/_table-dark.scss
@@ -1762,6 +1766,7 @@ files:
 - app/pb_kits/playbook/pb_table/styles/_variables.scss
 - app/pb_kits/playbook/pb_table/table.html.erb
 - app/pb_kits/playbook/pb_table/table.rb
+- app/pb_kits/playbook/pb_table/table.test.js
 - app/pb_kits/playbook/pb_table/table_row.html.erb
 - app/pb_kits/playbook/pb_table/table_row.rb
 - app/pb_kits/playbook/pb_text_input/_text_input.jsx
@@ -1884,8 +1889,8 @@ files:
 - app/pb_kits/playbook/pb_timestamp/docs/index.js
 - app/pb_kits/playbook/pb_timestamp/timestamp.html.erb
 - app/pb_kits/playbook/pb_timestamp/timestamp.rb
+- app/pb_kits/playbook/pb_title/_title.jsx
 - app/pb_kits/playbook/pb_title/_title.scss
-- app/pb_kits/playbook/pb_title/_title.tsx
 - app/pb_kits/playbook/pb_title/_title_mixin.scss
 - app/pb_kits/playbook/pb_title/docs/_description.md
 - app/pb_kits/playbook/pb_title/docs/_title_colors.html.erb
@@ -1950,27 +1955,6 @@ files:
 - app/pb_kits/playbook/pb_tooltip/index.js
 - app/pb_kits/playbook/pb_tooltip/tooltip.html.erb
 - app/pb_kits/playbook/pb_tooltip/tooltip.rb
-- app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.jsx
-- app/pb_kits/playbook/pb_treemap_chart/docs/_description.md
-- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.html.erb
-- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.jsx
-- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.md
-- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.html.erb
-- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.jsx
-- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.md
-- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.html.erb
-- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.jsx
-- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.md
-- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.html.erb
-- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.jsx
-- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.md
-- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.html.erb
-- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.jsx
-- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.md
-- app/pb_kits/playbook/pb_treemap_chart/docs/example.yml
-- app/pb_kits/playbook/pb_treemap_chart/docs/index.js
-- app/pb_kits/playbook/pb_treemap_chart/treemap_chart.html.erb
-- app/pb_kits/playbook/pb_treemap_chart/treemap_chart.rb
 - app/pb_kits/playbook/pb_typeahead/_typeahead.jsx
 - app/pb_kits/playbook/pb_typeahead/_typeahead.scss
 - app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.jsx
@@ -2115,7 +2099,7 @@ files:
 - app/pb_kits/playbook/utilities/globalProps.ts
 - app/pb_kits/playbook/utilities/props.ts
 - app/pb_kits/playbook/utilities/test-utils.js
-- app/pb_kits/playbook/utilities/text.ts
+- app/pb_kits/playbook/utilities/text.js
 - dist/reset.css
 - fonts/fontawesome-min.js
 - fonts/regular-min.js
@@ -2176,7 +2160,7 @@ files:
 - lib/playbook_ui.rb
 homepage: http://playbook.powerapp.cloud
 licenses:
-- MIT
+- ISC
 metadata: {}
 post_install_message:
 rdoc_options: []

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

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

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

@@ -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,
-    colors: ["data-4", "data-7", "#8E6E53", "#124732"],
-    id: "treemap-colors",
-    title: "Favored Pizza Toppings",
-}) %>