playbook_ui 10.26.0.pre.alpha1 → 10.26.0.pre.alpha3
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/data/menu.yml +0 -1
- data/app/pb_kits/playbook/index.js +1 -2
- data/app/pb_kits/playbook/pb_avatar/_avatar.tsx +3 -3
- data/app/pb_kits/playbook/pb_body/_body.tsx +8 -8
- data/app/pb_kits/playbook/pb_button/docs/_button_default.html.erb +0 -1
- data/app/pb_kits/playbook/pb_caption/{_caption.tsx → _caption.jsx} +8 -7
- data/app/pb_kits/playbook/pb_card/_card.jsx +3 -1
- data/app/pb_kits/playbook/pb_card/_card_mixin.scss +1 -0
- data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.js +0 -37
- data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.js +0 -37
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.jsx +1 -1
- data/app/pb_kits/playbook/pb_image/_image.tsx +1 -1
- data/app/pb_kits/playbook/pb_kit/dateTime.js +2 -1
- data/app/pb_kits/playbook/pb_pill/_pill.jsx +1 -1
- data/app/pb_kits/playbook/pb_table/_table.jsx +3 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky.html.erb +83 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky.jsx +94 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky.md +3 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_table/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_table/styles/_all.scss +1 -0
- data/app/pb_kits/playbook/pb_table/styles/_sticky_header.scss +21 -0
- data/app/pb_kits/playbook/pb_table/table.rb +7 -1
- data/app/pb_kits/playbook/pb_table/table.test.js +17 -0
- data/app/pb_kits/playbook/pb_title/{_title.tsx → _title.jsx} +12 -10
- data/app/pb_kits/playbook/pb_title/title.test.js +2 -2
- data/app/pb_kits/playbook/playbook-doc.js +0 -2
- data/app/pb_kits/playbook/playbook-rails-react-bindings.js +0 -2
- data/app/pb_kits/playbook/plugins/pb_chart.js +0 -34
- data/app/pb_kits/playbook/tokens/_display.scss +13 -0
- data/app/pb_kits/playbook/tokens/_screen_sizes.scss +21 -5
- data/app/pb_kits/playbook/utilities/_display.scss +58 -1
- data/app/pb_kits/playbook/utilities/_flex_direction.scss +15 -28
- data/app/pb_kits/playbook/utilities/globalProps.ts +134 -103
- data/app/pb_kits/playbook/utilities/text.js +15 -0
- data/dist/reset.css +1 -60
- data/lib/playbook/display.rb +20 -6
- data/lib/playbook/flex_direction.rb +1 -7
- data/lib/playbook/version.rb +1 -1
- metadata +12 -27
- data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.jsx +0 -79
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_description.md +0 -5
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.html.erb +0 -37
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.jsx +0 -48
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.md +0 -2
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.html.erb +0 -37
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.jsx +0 -47
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.md +0 -3
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.html.erb +0 -79
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.jsx +0 -90
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.md +0 -1
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.html.erb +0 -54
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.jsx +0 -65
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.md +0 -3
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.html.erb +0 -37
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.jsx +0 -48
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.md +0 -3
- data/app/pb_kits/playbook/pb_treemap_chart/docs/example.yml +0 -15
- data/app/pb_kits/playbook/pb_treemap_chart/docs/index.js +0 -5
- data/app/pb_kits/playbook/pb_treemap_chart/treemap_chart.html.erb +0 -1
- data/app/pb_kits/playbook/pb_treemap_chart/treemap_chart.rb +0 -43
- data/app/pb_kits/playbook/utilities/text.ts +0 -22
data/lib/playbook/display.rb
CHANGED
@@ -8,12 +8,22 @@ module Playbook
|
|
8
8
|
|
9
9
|
def display_props
|
10
10
|
selected_props = display_options.keys.select { |sk| try(sk) }
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
display_value = send(
|
15
|
-
|
16
|
-
|
11
|
+
responsive = selected_props.present? && try(:display).is_a?(::Hash)
|
12
|
+
css = ""
|
13
|
+
if responsive
|
14
|
+
display_value = send(:display)
|
15
|
+
display_value.each do |key, value|
|
16
|
+
css += "display_#{key}_#{value} " if display_size_values.include?(key.to_s) && display_values.include?(value.to_s)
|
17
|
+
end
|
18
|
+
elsif display_value.is_a?(String)
|
19
|
+
selected_props.each do |k|
|
20
|
+
display_value = send(k)
|
21
|
+
css += "display_#{display_value}" if display_values.include? display_value
|
22
|
+
end
|
23
|
+
else
|
24
|
+
""
|
25
|
+
end
|
26
|
+
css unless css.blank?
|
17
27
|
end
|
18
28
|
|
19
29
|
def display_options
|
@@ -22,6 +32,10 @@ module Playbook
|
|
22
32
|
}
|
23
33
|
end
|
24
34
|
|
35
|
+
def display_size_values
|
36
|
+
%w[xs sm md lg xl]
|
37
|
+
end
|
38
|
+
|
25
39
|
def display_values
|
26
40
|
%w[block inline_block inline flex inline_flex hidden]
|
27
41
|
end
|
@@ -12,13 +12,7 @@ module Playbook
|
|
12
12
|
|
13
13
|
selected_props.map do |k|
|
14
14
|
flex_direction_value = send(k)
|
15
|
-
if
|
16
|
-
flex_direction_value.map do |media_size, flex_value|
|
17
|
-
"flex_direction_#{media_size}_#{flex_value}"
|
18
|
-
end
|
19
|
-
else
|
20
|
-
"flex_direction_#{flex_direction_value}" unless flex_direction_value.nil?
|
21
|
-
end
|
15
|
+
"flex_direction_#{flex_direction_value}" if flex_direction_values.include? flex_direction_value
|
22
16
|
end.compact.join(" ")
|
23
17
|
end
|
24
18
|
|
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 10.26.0.pre.
|
4
|
+
version: 10.26.0.pre.alpha3
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2022-
|
12
|
+
date: 2022-05-03 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -452,8 +452,8 @@ files:
|
|
452
452
|
- app/pb_kits/playbook/pb_button_toolbar/docs/_description.md
|
453
453
|
- app/pb_kits/playbook/pb_button_toolbar/docs/example.yml
|
454
454
|
- app/pb_kits/playbook/pb_button_toolbar/docs/index.js
|
455
|
+
- app/pb_kits/playbook/pb_caption/_caption.jsx
|
455
456
|
- app/pb_kits/playbook/pb_caption/_caption.scss
|
456
|
-
- app/pb_kits/playbook/pb_caption/_caption.tsx
|
457
457
|
- app/pb_kits/playbook/pb_caption/_caption_mixin.scss
|
458
458
|
- app/pb_kits/playbook/pb_caption/caption.html.erb
|
459
459
|
- app/pb_kits/playbook/pb_caption/caption.rb
|
@@ -1734,6 +1734,9 @@ files:
|
|
1734
1734
|
- app/pb_kits/playbook/pb_table/docs/_table_sm.html.erb
|
1735
1735
|
- app/pb_kits/playbook/pb_table/docs/_table_sm.jsx
|
1736
1736
|
- app/pb_kits/playbook/pb_table/docs/_table_sm.md
|
1737
|
+
- app/pb_kits/playbook/pb_table/docs/_table_sticky.html.erb
|
1738
|
+
- app/pb_kits/playbook/pb_table/docs/_table_sticky.jsx
|
1739
|
+
- app/pb_kits/playbook/pb_table/docs/_table_sticky.md
|
1737
1740
|
- app/pb_kits/playbook/pb_table/docs/_table_two_actions.html.erb
|
1738
1741
|
- app/pb_kits/playbook/pb_table/docs/_table_two_actions.jsx
|
1739
1742
|
- app/pb_kits/playbook/pb_table/docs/_table_two_actions.md
|
@@ -1755,6 +1758,7 @@ files:
|
|
1755
1758
|
- app/pb_kits/playbook/pb_table/styles/_reset.scss
|
1756
1759
|
- app/pb_kits/playbook/pb_table/styles/_side_highlight.scss
|
1757
1760
|
- app/pb_kits/playbook/pb_table/styles/_single-line.scss
|
1761
|
+
- app/pb_kits/playbook/pb_table/styles/_sticky_header.scss
|
1758
1762
|
- app/pb_kits/playbook/pb_table/styles/_structure.scss
|
1759
1763
|
- app/pb_kits/playbook/pb_table/styles/_table-card.scss
|
1760
1764
|
- app/pb_kits/playbook/pb_table/styles/_table-dark.scss
|
@@ -1762,6 +1766,7 @@ files:
|
|
1762
1766
|
- app/pb_kits/playbook/pb_table/styles/_variables.scss
|
1763
1767
|
- app/pb_kits/playbook/pb_table/table.html.erb
|
1764
1768
|
- app/pb_kits/playbook/pb_table/table.rb
|
1769
|
+
- app/pb_kits/playbook/pb_table/table.test.js
|
1765
1770
|
- app/pb_kits/playbook/pb_table/table_row.html.erb
|
1766
1771
|
- app/pb_kits/playbook/pb_table/table_row.rb
|
1767
1772
|
- app/pb_kits/playbook/pb_text_input/_text_input.jsx
|
@@ -1884,8 +1889,8 @@ files:
|
|
1884
1889
|
- app/pb_kits/playbook/pb_timestamp/docs/index.js
|
1885
1890
|
- app/pb_kits/playbook/pb_timestamp/timestamp.html.erb
|
1886
1891
|
- app/pb_kits/playbook/pb_timestamp/timestamp.rb
|
1892
|
+
- app/pb_kits/playbook/pb_title/_title.jsx
|
1887
1893
|
- app/pb_kits/playbook/pb_title/_title.scss
|
1888
|
-
- app/pb_kits/playbook/pb_title/_title.tsx
|
1889
1894
|
- app/pb_kits/playbook/pb_title/_title_mixin.scss
|
1890
1895
|
- app/pb_kits/playbook/pb_title/docs/_description.md
|
1891
1896
|
- app/pb_kits/playbook/pb_title/docs/_title_colors.html.erb
|
@@ -1950,27 +1955,6 @@ files:
|
|
1950
1955
|
- app/pb_kits/playbook/pb_tooltip/index.js
|
1951
1956
|
- app/pb_kits/playbook/pb_tooltip/tooltip.html.erb
|
1952
1957
|
- app/pb_kits/playbook/pb_tooltip/tooltip.rb
|
1953
|
-
- app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.jsx
|
1954
|
-
- app/pb_kits/playbook/pb_treemap_chart/docs/_description.md
|
1955
|
-
- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.html.erb
|
1956
|
-
- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.jsx
|
1957
|
-
- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.md
|
1958
|
-
- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.html.erb
|
1959
|
-
- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.jsx
|
1960
|
-
- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.md
|
1961
|
-
- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.html.erb
|
1962
|
-
- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.jsx
|
1963
|
-
- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.md
|
1964
|
-
- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.html.erb
|
1965
|
-
- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.jsx
|
1966
|
-
- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.md
|
1967
|
-
- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.html.erb
|
1968
|
-
- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.jsx
|
1969
|
-
- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.md
|
1970
|
-
- app/pb_kits/playbook/pb_treemap_chart/docs/example.yml
|
1971
|
-
- app/pb_kits/playbook/pb_treemap_chart/docs/index.js
|
1972
|
-
- app/pb_kits/playbook/pb_treemap_chart/treemap_chart.html.erb
|
1973
|
-
- app/pb_kits/playbook/pb_treemap_chart/treemap_chart.rb
|
1974
1958
|
- app/pb_kits/playbook/pb_typeahead/_typeahead.jsx
|
1975
1959
|
- app/pb_kits/playbook/pb_typeahead/_typeahead.scss
|
1976
1960
|
- app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.jsx
|
@@ -2071,6 +2055,7 @@ files:
|
|
2071
2055
|
- app/pb_kits/playbook/tokens/_animation-curves.scss
|
2072
2056
|
- app/pb_kits/playbook/tokens/_border_radius.scss
|
2073
2057
|
- app/pb_kits/playbook/tokens/_colors.scss
|
2058
|
+
- app/pb_kits/playbook/tokens/_display.scss
|
2074
2059
|
- app/pb_kits/playbook/tokens/_line_height.scss
|
2075
2060
|
- app/pb_kits/playbook/tokens/_opacity.scss
|
2076
2061
|
- app/pb_kits/playbook/tokens/_positioning.scss
|
@@ -2115,7 +2100,7 @@ files:
|
|
2115
2100
|
- app/pb_kits/playbook/utilities/globalProps.ts
|
2116
2101
|
- app/pb_kits/playbook/utilities/props.ts
|
2117
2102
|
- app/pb_kits/playbook/utilities/test-utils.js
|
2118
|
-
- app/pb_kits/playbook/utilities/text.
|
2103
|
+
- app/pb_kits/playbook/utilities/text.js
|
2119
2104
|
- dist/reset.css
|
2120
2105
|
- fonts/fontawesome-min.js
|
2121
2106
|
- fonts/regular-min.js
|
@@ -2176,7 +2161,7 @@ files:
|
|
2176
2161
|
- lib/playbook_ui.rb
|
2177
2162
|
homepage: http://playbook.powerapp.cloud
|
2178
2163
|
licenses:
|
2179
|
-
-
|
2164
|
+
- ISC
|
2180
2165
|
metadata: {}
|
2181
2166
|
post_install_message:
|
2182
2167
|
rdoc_options: []
|
@@ -1,79 +0,0 @@
|
|
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};">● </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
|
-
}
|
@@ -1,5 +0,0 @@
|
|
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>.
|
@@ -1,37 +0,0 @@
|
|
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
|
-
}) %>
|
@@ -1,48 +0,0 @@
|
|
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
|
@@ -1,37 +0,0 @@
|
|
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
|
-
}) %>
|
@@ -1,47 +0,0 @@
|
|
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
|
@@ -1,79 +0,0 @@
|
|
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
|
-
}) %>
|
@@ -1,90 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
|
3
|
-
import TreemapChart from '../_treemap_chart'
|
4
|
-
|
5
|
-
const chartData = [
|
6
|
-
{
|
7
|
-
name: "Evergreen",
|
8
|
-
id: "Evergreen",
|
9
|
-
color: "#0056CF",
|
10
|
-
}, {
|
11
|
-
name: "Pine",
|
12
|
-
id: "Pine",
|
13
|
-
parent: "Evergreen",
|
14
|
-
value: 300,
|
15
|
-
color: "#477BC4",
|
16
|
-
}, {
|
17
|
-
name: "Ponderosa Pine",
|
18
|
-
parent: "Pine",
|
19
|
-
value: 50,
|
20
|
-
}, {
|
21
|
-
name: "Scots Pine",
|
22
|
-
parent: "Pine",
|
23
|
-
value: 150,
|
24
|
-
}, {
|
25
|
-
name: "White Pine",
|
26
|
-
parent: "Pine",
|
27
|
-
value: 100,
|
28
|
-
}, {
|
29
|
-
name: "Douglas Fir",
|
30
|
-
parent: "Evergreen",
|
31
|
-
value: 150,
|
32
|
-
}, {
|
33
|
-
name: "Juniper",
|
34
|
-
parent: "Evergreen",
|
35
|
-
value: 80,
|
36
|
-
}, {
|
37
|
-
name: "Hemlock",
|
38
|
-
parent: "Evergreen",
|
39
|
-
value: 30,
|
40
|
-
}, {
|
41
|
-
name: "Deciduous",
|
42
|
-
id: "Deciduous",
|
43
|
-
color: "#F9BB00",
|
44
|
-
}, {
|
45
|
-
name: "Oak",
|
46
|
-
parent: "Deciduous",
|
47
|
-
value: 80,
|
48
|
-
}, {
|
49
|
-
name: "Maple",
|
50
|
-
id: "Maple",
|
51
|
-
parent: "Deciduous",
|
52
|
-
value: 180,
|
53
|
-
color: "#F7CE52",
|
54
|
-
}, {
|
55
|
-
name: "Red Maple",
|
56
|
-
parent: "Maple",
|
57
|
-
value: 80,
|
58
|
-
}, {
|
59
|
-
name: "Sugar Maple",
|
60
|
-
parent: "Maple",
|
61
|
-
value: 100,
|
62
|
-
}, {
|
63
|
-
name: "Beech",
|
64
|
-
parent: "Deciduous",
|
65
|
-
value: 50,
|
66
|
-
}, {
|
67
|
-
name: "Willow",
|
68
|
-
parent: "Deciduous",
|
69
|
-
value: 100,
|
70
|
-
}, {
|
71
|
-
name: "Juniper",
|
72
|
-
parent: "Deciduous",
|
73
|
-
value: 90,
|
74
|
-
},
|
75
|
-
]
|
76
|
-
|
77
|
-
const TreemapChartDrillable = (props) => (
|
78
|
-
<div>
|
79
|
-
<TreemapChart
|
80
|
-
chartData={chartData}
|
81
|
-
drillable
|
82
|
-
grouped
|
83
|
-
id="treemap-drillable"
|
84
|
-
title="Drillable Grouped Tree Species"
|
85
|
-
{...props}
|
86
|
-
/>
|
87
|
-
</div>
|
88
|
-
)
|
89
|
-
|
90
|
-
export default TreemapChartDrillable
|
@@ -1 +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>.
|
@@ -1,54 +0,0 @@
|
|
1
|
-
<% data = [
|
2
|
-
{
|
3
|
-
name: 'Meat',
|
4
|
-
id: 'Meat',
|
5
|
-
color: "#0056CF",
|
6
|
-
}, {
|
7
|
-
name: 'Pepperoni',
|
8
|
-
parent: 'Meat',
|
9
|
-
value: 250,
|
10
|
-
}, {
|
11
|
-
name: 'Meatball',
|
12
|
-
parent: 'Meat',
|
13
|
-
value: 400,
|
14
|
-
}, {
|
15
|
-
name: "Anchovy",
|
16
|
-
parent: 'Meat',
|
17
|
-
value: 40,
|
18
|
-
}, {
|
19
|
-
name: 'Vegetarian',
|
20
|
-
id: 'Vegetarian',
|
21
|
-
color: "#F9BB00",
|
22
|
-
}, {
|
23
|
-
name: 'Onions',
|
24
|
-
parent: 'Vegetarian',
|
25
|
-
value: 300,
|
26
|
-
}, {
|
27
|
-
name: 'Pineapple',
|
28
|
-
parent: 'Vegetarian',
|
29
|
-
value: 90,
|
30
|
-
}, {
|
31
|
-
name: "Peppers",
|
32
|
-
parent: 'Vegetarian',
|
33
|
-
value: 80,
|
34
|
-
}, {
|
35
|
-
name: "Specialty",
|
36
|
-
id: "Specialty",
|
37
|
-
color: "#9E64E9",
|
38
|
-
},{
|
39
|
-
name: "Buffalo Chicken",
|
40
|
-
parent: "Specialty",
|
41
|
-
value: 400,
|
42
|
-
}, {
|
43
|
-
name: "Supreme",
|
44
|
-
parent: "Specialty",
|
45
|
-
value: 150,
|
46
|
-
}
|
47
|
-
] %>
|
48
|
-
|
49
|
-
<%= pb_rails("treemap_chart", props: {
|
50
|
-
chart_data: data,
|
51
|
-
grouped: true,
|
52
|
-
id: "treemap-grouped",
|
53
|
-
title: "Grouped Toppings",
|
54
|
-
}) %>
|