playbook_ui 10.25.1 → 10.26.0.pre.alpha1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (44) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/data/menu.yml +1 -0
  3. data/app/pb_kits/playbook/index.js +2 -1
  4. data/app/pb_kits/playbook/pb_button/docs/_button_default.html.erb +1 -0
  5. data/app/pb_kits/playbook/pb_caption/{_caption.jsx → _caption.tsx} +7 -8
  6. data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.js +37 -0
  7. data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.js +37 -0
  8. data/app/pb_kits/playbook/pb_form_pill/_form_pill.jsx +1 -1
  9. data/app/pb_kits/playbook/pb_kit/dateTime.js +1 -2
  10. data/app/pb_kits/playbook/pb_pill/_pill.jsx +1 -1
  11. data/app/pb_kits/playbook/pb_title/{_title.jsx → _title.tsx} +10 -12
  12. data/app/pb_kits/playbook/pb_title/title.test.js +2 -2
  13. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.jsx +79 -0
  14. data/app/pb_kits/playbook/pb_treemap_chart/docs/_description.md +5 -0
  15. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.html.erb +37 -0
  16. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.jsx +48 -0
  17. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.md +2 -0
  18. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.html.erb +37 -0
  19. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.jsx +47 -0
  20. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.md +3 -0
  21. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.html.erb +79 -0
  22. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.jsx +90 -0
  23. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.md +1 -0
  24. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.html.erb +54 -0
  25. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.jsx +65 -0
  26. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.md +3 -0
  27. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.html.erb +37 -0
  28. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.jsx +48 -0
  29. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.md +3 -0
  30. data/app/pb_kits/playbook/pb_treemap_chart/docs/example.yml +15 -0
  31. data/app/pb_kits/playbook/pb_treemap_chart/docs/index.js +5 -0
  32. data/app/pb_kits/playbook/pb_treemap_chart/treemap_chart.html.erb +1 -0
  33. data/app/pb_kits/playbook/pb_treemap_chart/treemap_chart.rb +43 -0
  34. data/app/pb_kits/playbook/playbook-doc.js +2 -0
  35. data/app/pb_kits/playbook/playbook-rails-react-bindings.js +2 -0
  36. data/app/pb_kits/playbook/plugins/pb_chart.js +34 -0
  37. data/app/pb_kits/playbook/utilities/_flex_direction.scss +28 -15
  38. data/app/pb_kits/playbook/utilities/globalProps.ts +94 -110
  39. data/app/pb_kits/playbook/utilities/text.ts +22 -0
  40. data/dist/reset.css +60 -1
  41. data/lib/playbook/flex_direction.rb +7 -1
  42. data/lib/playbook/version.rb +1 -1
  43. metadata +29 -8
  44. data/app/pb_kits/playbook/utilities/text.js +0 -15
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 8be95036b076c3fbe7bdf059733bbcd3fe287731d38c671214167c465094b5f5
4
- data.tar.gz: 38dd59dbdaddae412dc128c5aa33b149ef671365c3e4a4e836a9c6bbc2e5d5a6
3
+ metadata.gz: 2189d1ada1c39446fecca8e67776e0e5b086e79d842fbfaf5ed800313c81f5df
4
+ data.tar.gz: 4640c10e464c670714c67a3875412fcda9c79f06edbbea2a50cdd5ab330889ed
5
5
  SHA512:
6
- metadata.gz: a4b2119448938ad199474fdbfabe230b62a759b5c36b51e732aa21ed2468996aee3d99e7898c7087a1998ef2a93bd0d7df9c5c2758048107b547d379c1efae9e
7
- data.tar.gz: 4263f916d2e535d823ff3fe1421ec2e0a43a201d56f0520057d77b2efa93fd029332d42deafaf3a460ca2dab4fe6eddfaae6108e66390c46cbd0deeb3265dae2
6
+ metadata.gz: 6d133f2ab6121d7f7a3895fe907a51f3713c48d1463a80cba165ae6c5fc6e1f64d6bf9ccb2b368f7f17304eee8e8a36a40c02a00b456044f4199e15c698e9d80
7
+ data.tar.gz: 9515dbe37dab4c9d0a5a6e90c7074a3641ec9e31669b4fdd502e3b12e5ca6bf541ecf36eea0ec711c52710f3bd1cec017b3be76d68cb36b6e15aeb690c7185f9
@@ -20,6 +20,7 @@ kits:
20
20
  - gauge
21
21
  - legend
22
22
  - line_graph
23
+ - treemap_chart
23
24
  - dialog
24
25
  - filter
25
26
  - fixed_confirmation_toast
@@ -4,7 +4,6 @@ import 'lazysizes/plugins/attrchange/ls.attrchange'
4
4
  import 'lazysizes'
5
5
 
6
6
  // vvv React Component JSX Imports from the React Kits vvv
7
- export { default as Walkthrough } from './pb_walkthrough/_walkthrough'
8
7
  export { default as Avatar } from './pb_avatar/_avatar'
9
8
  export { default as AvatarActionButton } from './pb_avatar_action_button/_avatar_action_button'
10
9
  export { default as Background } from './pb_background/_background'
@@ -98,9 +97,11 @@ export { default as Title } from './pb_title/_title'
98
97
  export { default as TitleCount } from './pb_title_count/_title_count'
99
98
  export { default as TitleDetail } from './pb_title_detail/_title_detail'
100
99
  export { default as Toggle } from './pb_toggle/_toggle'
100
+ export { default as TreemapChart } from './pb_treemap_chart/_treemap_chart'
101
101
  export { default as Typeahead } from './pb_typeahead/_typeahead'
102
102
  export { default as User } from './pb_user/_user'
103
103
  export { default as UserBadge } from './pb_user_badge/_user_badge'
104
+ export { default as Walkthrough } from './pb_walkthrough/_walkthrough'
104
105
  export { default as WeekdayStacked } from './pb_weekday_stacked/_weekday_stacked'
105
106
  // ^^^ React Component JSX Imports from the React Kits ^^^
106
107
 
@@ -2,3 +2,4 @@
2
2
  <%= pb_rails("button", props: { text: "Button Secondary", variant: "secondary" }) %>
3
3
  <%= pb_rails("button", props: { text: "Button Link", variant: "link" }) %>
4
4
  <%= pb_rails("button", props: { text: "Button Disabled", disabled: true }) %>
5
+
@@ -1,24 +1,22 @@
1
- /* @flow */
2
-
3
1
  import React from 'react'
4
2
  import classnames from 'classnames'
5
3
  import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
6
- import { deprecatedProps, globalProps } from '../utilities/globalProps'
4
+ import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
7
5
 
8
6
  type CaptionProps = {
9
- aria?: object,
10
- children: array<React.ReactNode> | React.ReactNode,
7
+ aria?: {[key: string]: string},
8
+ children: React.ReactChild[],
11
9
  className?: string,
12
10
  color?: "default" | "light" | "lighter" | "success" | "error" | "link",
13
- data?: object,
11
+ data?: {[key: string]: string},
14
12
  id?: string,
15
13
  size?: "xs" | "sm" | "md" | "lg" | "xl",
16
14
  tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "caption",
17
15
  text?: string,
18
16
  variant?: null | "link",
19
- };
17
+ } & GlobalProps;
20
18
 
21
- const Caption = (props: CaptionProps) => {
19
+ const Caption = (props: CaptionProps): React.ReactElement => {
22
20
  if (props.variant) deprecatedProps('Title', ['variant']) //variant prop is deprecated, use color instead
23
21
  const {
24
22
  aria = {},
@@ -32,6 +30,7 @@ const Caption = (props: CaptionProps) => {
32
30
  text,
33
31
  variant = null,
34
32
  } = props
33
+
35
34
  const tagOptions = [
36
35
  'h1',
37
36
  'h2',
@@ -209,6 +209,43 @@ const highchartsDarkTheme = {
209
209
  threshold: null,
210
210
  },
211
211
  },
212
+
213
+ //TREEMAP CHART STYLES
214
+ treemap: {
215
+ layoutAlgorithm: "squarified",
216
+ allowTraversingTree: false,
217
+ animationLimit: 1000,
218
+ colors: [
219
+ colors.data_1,
220
+ colors.data_2,
221
+ colors.data_3,
222
+ colors.data_4,
223
+ colors.data_5,
224
+ colors.data_6,
225
+ colors.data_7,
226
+ colors.data_8,
227
+ ],
228
+ colorByPoint: true,
229
+ dataLabels: {
230
+ enabled: true,
231
+ style: {
232
+ fontFamily: typography.font_family_base,
233
+ fontWeight: typography.bold,
234
+ fontSize: typography.heading_4,
235
+ },
236
+ },
237
+ levels: [
238
+ {
239
+ level: 1,
240
+ dataLabels: {
241
+ enabled: false,
242
+ },
243
+ },
244
+ ],
245
+ traverseUpButton: {
246
+ position: { y: -40 },
247
+ }
248
+ },
212
249
  },
213
250
  }
214
251
 
@@ -209,6 +209,43 @@ const highchartsTheme = {
209
209
  threshold: null,
210
210
  },
211
211
  },
212
+
213
+ //TREEMAP CHART STYLES
214
+ treemap: {
215
+ layoutAlgorithm: "squarified",
216
+ allowTraversingTree: false,
217
+ animationLimit: 1000,
218
+ colors: [
219
+ colors.data_1,
220
+ colors.data_2,
221
+ colors.data_3,
222
+ colors.data_4,
223
+ colors.data_5,
224
+ colors.data_6,
225
+ colors.data_7,
226
+ colors.data_8,
227
+ ],
228
+ colorByPoint: true,
229
+ dataLabels: {
230
+ enabled: true,
231
+ style: {
232
+ fontFamily: typography.font_family_base,
233
+ fontWeight: typography.bold,
234
+ fontSize: typography.heading_4,
235
+ },
236
+ },
237
+ levels: [
238
+ {
239
+ level: 1,
240
+ dataLabels: {
241
+ enabled: false,
242
+ },
243
+ },
244
+ ],
245
+ traverseUpButton: {
246
+ position: { y: -40 },
247
+ }
248
+ },
212
249
  },
213
250
  }
214
251
 
@@ -1,7 +1,7 @@
1
1
  /* @flow */
2
2
  import React from 'react'
3
3
  import classnames from 'classnames'
4
- import Title from '../pb_title/_title.jsx'
4
+ import Title from '../pb_title/_title'
5
5
  import Icon from '../pb_icon/_icon.jsx'
6
6
  import Avatar from '../pb_avatar/_avatar'
7
7
  import { globalProps } from '../utilities/globalProps'
@@ -1,9 +1,8 @@
1
1
  /* @flow */
2
2
  /*eslint-disable flowtype/space-before-type-colon */
3
3
 
4
- import moment from 'moment'
4
+ import moment from 'moment-timezone'
5
5
  import 'moment-strftime'
6
- import 'moment-timezone'
7
6
 
8
7
  type DateTimeType = {
9
8
  value: String | Date,
@@ -3,7 +3,7 @@
3
3
  import React from 'react'
4
4
 
5
5
  import classnames from 'classnames'
6
- import Title from '../pb_title/_title.jsx'
6
+ import Title from '../pb_title/_title'
7
7
  import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
8
8
  import { globalProps } from '../utilities/globalProps'
9
9
 
@@ -1,24 +1,22 @@
1
- /* @flow */
2
-
3
1
  import React from 'react'
4
2
  import classnames from 'classnames'
5
3
  import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
6
- import { deprecatedProps, globalProps } from '../utilities/globalProps'
4
+ import { deprecatedProps, GlobalProps, globalProps } from '../utilities/globalProps'
7
5
 
8
6
  type TitleProps = {
9
- aria?: object,
10
- children?: array<React.ReactNode> | React.ReactNode,
7
+ aria?: {[key: string]: string},
8
+ children?: React.ReactChild[],
11
9
  className?: string,
12
10
  color?: "default" | "light" | "lighter" | "success" | "error" | "link",
13
- data?: object,
11
+ data?: {[key: string]: string},
14
12
  id?: string,
15
13
  size?: 1 | 2 | 3 | 4,
16
14
  tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span",
17
15
  text?: string,
18
16
  variant?: null | "link",
19
- }
17
+ } & GlobalProps
20
18
 
21
- const Title = (props: TitleProps) => {
19
+ const Title = (props: TitleProps): React.ReactElement => {
22
20
  if (props.variant) deprecatedProps('Title', ['variant']) //variant prop is deprecated, use color instead
23
21
  const {
24
22
  aria = {},
@@ -33,14 +31,14 @@ const Title = (props: TitleProps) => {
33
31
  variant = null,
34
32
  } = props
35
33
 
36
- const ariaProps = buildAriaProps(aria)
37
- const dataProps = buildDataProps(data)
34
+ const ariaProps: {[key: string]: string | number} = buildAriaProps(aria)
35
+ const dataProps: {[key: string]: string | number} = buildDataProps(data)
38
36
  const classes = classnames(
39
- buildCss('pb_title_kit', size, variant, color),
37
+ buildCss('pb_title_kit', `size_${size}`, variant, color),
40
38
  globalProps(props),
41
39
  className,
42
40
  )
43
- const Tag = `${tag}`
41
+ const Tag: React.ReactElement | any = `${tag}`
44
42
 
45
43
  return (
46
44
  <Tag
@@ -12,7 +12,7 @@ test('returns namespaced class name', () => {
12
12
  )
13
13
 
14
14
  const kit = screen.getByTestId('primary-test')
15
- expect(kit).toHaveClass('pb_title_kit_3')
15
+ expect(kit).toHaveClass('pb_title_kit_size_3')
16
16
  })
17
17
 
18
18
  test('with colors', () => {
@@ -25,5 +25,5 @@ test('with colors', () => {
25
25
  )
26
26
 
27
27
  const kit = screen.getByTestId('primary-test')
28
- expect(kit).toHaveClass('pb_title_kit_3_success')
28
+ expect(kit).toHaveClass('pb_title_kit_size_3_success')
29
29
  })
@@ -0,0 +1,79 @@
1
+ /* @flow */
2
+
3
+ import React from 'react'
4
+ import classnames from 'classnames'
5
+
6
+ import { globalProps } from '../utilities/globalProps'
7
+ import pbChart from '../plugins/pb_chart'
8
+
9
+ type TreemapChartProps = {
10
+ chartData: array<{
11
+ name: string,
12
+ parent?: string | number,
13
+ value: number,
14
+ color?: string,
15
+ id?: string | number,
16
+ }>,
17
+ className?: string,
18
+ colors: array,
19
+ dark?: boolean,
20
+ drillable: boolean,
21
+ grouped: boolean,
22
+ height?: string,
23
+ id: number,
24
+ title: string,
25
+ tooltipHtml: string,
26
+ type?: string,
27
+ }
28
+
29
+ export default class TreemapChart extends React.Component<TreemapChartProps> {
30
+ static defaultProps = {
31
+ className: 'pb_treemap_chart',
32
+ dark: false,
33
+ drillable: false,
34
+ grouped: false,
35
+ type: 'treemap',
36
+ }
37
+
38
+ componentDidMount() {
39
+ const {
40
+ chartData,
41
+ className,
42
+ colors = [],
43
+ dark,
44
+ drillable,
45
+ grouped,
46
+ height,
47
+ id,
48
+ title = "",
49
+ tooltipHtml = '<span style="font-weight: bold; color:{point.color};">&#9679; </span>{point.name}: <b>{point.value}</b>',
50
+ type,
51
+ } = this.props
52
+
53
+ new pbChart(`.${className}`, {
54
+ chartData: chartData,
55
+ colors: colors,
56
+ dark,
57
+ drillable,
58
+ grouped,
59
+ height: height,
60
+ id: id,
61
+ title: title,
62
+ tooltipHtml,
63
+ type,
64
+ })
65
+ }
66
+
67
+ props: TreemapChartProps
68
+
69
+ render() {
70
+ const { className, id } = this.props
71
+
72
+ return (
73
+ <div
74
+ className={classnames(globalProps(this.props), className)}
75
+ id={id}
76
+ />
77
+ )
78
+ }
79
+ }
@@ -0,0 +1,5 @@
1
+ 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.
2
+
3
+ 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.
4
+
5
+ For more information, see: <a href="https://api.highcharts.com/highcharts/chart.height" target="_blank"> highcharts/chart.height</a>.
@@ -0,0 +1,37 @@
1
+ <% data = [
2
+ {
3
+ name: "Pepperoni",
4
+ parent: "Toppings",
5
+ value: 600,
6
+ }, {
7
+ name: "Cheese",
8
+ parent: "Toppings",
9
+ value: 510,
10
+ }, {
11
+ name: "Mushroom",
12
+ parent: "Toppings",
13
+ value: 330,
14
+ },{
15
+ name: "Onions",
16
+ parent: "Toppings",
17
+ value: 250,
18
+ }, {
19
+ name: "Olives",
20
+ parent: "Toppings",
21
+ value: 204,
22
+ }, {
23
+ name: "Pineapple",
24
+ parent: "Toppings",
25
+ value: 90,
26
+ }, {
27
+ name: "Pizza Toppings",
28
+ id: "Toppings",
29
+ },
30
+ ] %>
31
+
32
+ <%= pb_rails("treemap_chart", props: {
33
+ chart_data: data,
34
+ colors: ["data-4", "data-7", "#8E6E53", "#124732"],
35
+ id: "treemap-colors",
36
+ title: "Favored Pizza Toppings",
37
+ }) %>
@@ -0,0 +1,48 @@
1
+ import React from 'react'
2
+
3
+ import TreemapChart from '../_treemap_chart'
4
+
5
+ const chartData = [
6
+ {
7
+ name: "Pepperoni",
8
+ parent: "Toppings",
9
+ value: 600,
10
+ }, {
11
+ name: "Cheese",
12
+ parent: "Toppings",
13
+ value: 510,
14
+ }, {
15
+ name: "Mushroom",
16
+ parent: "Toppings",
17
+ value: 330,
18
+ },{
19
+ name: "Onions",
20
+ parent: "Toppings",
21
+ value: 250,
22
+ }, {
23
+ name: "Olives",
24
+ parent: "Toppings",
25
+ value: 204,
26
+ }, {
27
+ name: "Pineapple",
28
+ parent: "Toppings",
29
+ value: 90,
30
+ }, {
31
+ name: "Pizza Toppings",
32
+ id: "Toppings",
33
+ },
34
+ ]
35
+
36
+ const TreemapChartColors = (props) => (
37
+ <div>
38
+ <TreemapChart
39
+ chartData={chartData}
40
+ colors={["data-4", "data-7", "#8E6E53", "#124732"]}
41
+ id="treemap-colors"
42
+ title="Favored Pizza Toppings"
43
+ {...props}
44
+ />
45
+ </div>
46
+ )
47
+
48
+ export default TreemapChartColors
@@ -0,0 +1,2 @@
1
+ Custom data colors allow for color customization to match the needs of business requirements.
2
+ 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`
@@ -0,0 +1,37 @@
1
+ <% data = [
2
+ {
3
+ name: "Pepperoni",
4
+ parent: "Toppings",
5
+ value: 600,
6
+ }, {
7
+ name: "Cheese",
8
+ parent: "Toppings",
9
+ value: 510,
10
+ }, {
11
+ name: "Mushroom",
12
+ parent: "Toppings",
13
+ value: 330,
14
+ },{
15
+ name: "Onions",
16
+ parent: "Toppings",
17
+ value: 250,
18
+ }, {
19
+ name: "Olives",
20
+ parent: "Toppings",
21
+ value: 204,
22
+ }, {
23
+ name: "Pineapple",
24
+ parent: "Toppings",
25
+ value: 90,
26
+ }, {
27
+ name: "Pizza Toppings",
28
+ id: "Toppings",
29
+ },
30
+ ] %>
31
+
32
+
33
+ <%= pb_rails("treemap_chart", props: {
34
+ chart_data: data,
35
+ id: "treemap-default",
36
+ title: "Favored Pizza Toppings",
37
+ }) %>
@@ -0,0 +1,47 @@
1
+ import React from 'react'
2
+
3
+ import TreemapChart from '../_treemap_chart'
4
+
5
+ const chartData = [
6
+ {
7
+ name: "Pepperoni",
8
+ parent: "Toppings",
9
+ value: 600,
10
+ }, {
11
+ name: "Cheese",
12
+ parent: "Toppings",
13
+ value: 510,
14
+ }, {
15
+ name: "Mushroom",
16
+ parent: "Toppings",
17
+ value: 330,
18
+ },{
19
+ name: "Onions",
20
+ parent: "Toppings",
21
+ value: 250,
22
+ }, {
23
+ name: "Olives",
24
+ parent: "Toppings",
25
+ value: 204,
26
+ }, {
27
+ name: "Pineapple",
28
+ parent: "Toppings",
29
+ value: 90,
30
+ }, {
31
+ name: "Pizza Toppings",
32
+ id: "Toppings",
33
+ },
34
+ ]
35
+
36
+ const TreemapChartDefault = (props) => (
37
+ <div>
38
+ <TreemapChart
39
+ chartData={chartData}
40
+ id="treemap-default"
41
+ title="Favored Pizza Toppings"
42
+ {...props}
43
+ />
44
+ </div>
45
+ )
46
+
47
+ export default TreemapChartDefault
@@ -0,0 +1,3 @@
1
+ Points are automatically arranged by their `value` size.
2
+
3
+ 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.
@@ -0,0 +1,79 @@
1
+ <% data = [
2
+ {
3
+ name: "Evergreen",
4
+ id: "Evergreen",
5
+ color: "#0056CF",
6
+ }, {
7
+ name: "Pine",
8
+ id: "Pine",
9
+ parent: "Evergreen",
10
+ value: 300,
11
+ color: "#477BC4",
12
+ }, {
13
+ name: "Ponderosa Pine",
14
+ parent: "Pine",
15
+ value: 50,
16
+ }, {
17
+ name: "Scots Pine",
18
+ parent: "Pine",
19
+ value: 150,
20
+ }, {
21
+ name: "White Pine",
22
+ parent: "Pine",
23
+ value: 100,
24
+ }, {
25
+ name: "Douglas Fir",
26
+ parent: "Evergreen",
27
+ value: 150,
28
+ }, {
29
+ name: "Juniper",
30
+ parent: "Evergreen",
31
+ value: 80,
32
+ }, {
33
+ name: "Hemlock",
34
+ parent: "Evergreen",
35
+ value: 30,
36
+ }, {
37
+ name: "Deciduous",
38
+ id: "Deciduous",
39
+ color: "#F9BB00",
40
+ }, {
41
+ name: "Oak",
42
+ parent: "Deciduous",
43
+ value: 80,
44
+ }, {
45
+ name: "Maple",
46
+ id: "Maple",
47
+ parent: "Deciduous",
48
+ value: 180,
49
+ color: "#F7CE52",
50
+ }, {
51
+ name: "Red Maple",
52
+ parent: "Maple",
53
+ value: 80,
54
+ }, {
55
+ name: "Sugar Maple",
56
+ parent: "Maple",
57
+ value: 100,
58
+ }, {
59
+ name: "Beech",
60
+ parent: "Deciduous",
61
+ value: 50,
62
+ }, {
63
+ name: "Willow",
64
+ parent: "Deciduous",
65
+ value: 100,
66
+ }, {
67
+ name: "Juniper",
68
+ parent: "Deciduous",
69
+ value: 90,
70
+ },
71
+ ] %>
72
+
73
+ <%= pb_rails("treemap_chart", props: {
74
+ chart_data: data,
75
+ drillable: true,
76
+ grouped: true,
77
+ id: "treemap-drillable",
78
+ title: "Drillable Grouped Tree Species",
79
+ }) %>