playbook_ui 11.16.0.pre.alpha.pagination.rails1 → 11.16.0.pre.alpha.paginationrails1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (32) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/index.js +0 -1
  3. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +145 -0
  4. data/app/pb_kits/playbook/pb_circle_chart/ChartsTypes.ts +2 -0
  5. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +207 -0
  6. data/app/pb_kits/playbook/pb_circle_chart/circle_chart.html.erb +9 -21
  7. data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +7 -47
  8. data/app/pb_kits/playbook/pb_dashboard/pbChartsColorsHelper.ts +16 -0
  9. data/app/pb_kits/playbook/pb_dashboard/{pbChartsDarkTheme.js → pbChartsDarkTheme.ts} +6 -21
  10. data/app/pb_kits/playbook/pb_dashboard/{pbChartsLightTheme.js → pbChartsLightTheme.ts} +6 -21
  11. data/app/pb_kits/playbook/pb_dashboard/themeTypes.ts +16 -0
  12. data/app/pb_kits/playbook/pb_gauge/_gauge.scss +4 -0
  13. data/app/pb_kits/playbook/pb_gauge/_gauge.tsx +202 -0
  14. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.html.erb +1 -1
  15. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx +8 -8
  16. data/app/pb_kits/playbook/pb_gauge/gauge.html.erb +1 -11
  17. data/app/pb_kits/playbook/pb_gauge/gauge.rb +3 -8
  18. data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +148 -0
  19. data/app/pb_kits/playbook/pb_pagination/pagination.rb +5 -1
  20. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +111 -0
  21. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.jsx +1 -1
  22. data/app/pb_kits/playbook/playbook-rails-react-bindings.js +4 -0
  23. data/app/pb_kits/playbook/playbook-rails.js +0 -4
  24. data/lib/playbook/pagination_renderer.rb +2 -4
  25. data/lib/playbook/version.rb +2 -2
  26. metadata +12 -10
  27. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx +0 -111
  28. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx +0 -151
  29. data/app/pb_kits/playbook/pb_gauge/_gauge.jsx +0 -112
  30. data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx +0 -113
  31. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.jsx +0 -79
  32. data/app/pb_kits/playbook/plugins/pb_chart.js +0 -322
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: 11.16.0.pre.alpha.pagination.rails1
4
+ version: 11.16.0.pre.alpha.paginationrails1
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-19 00:00:00.000000000 Z
12
+ date: 2023-01-04 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -375,8 +375,8 @@ files:
375
375
  - app/pb_kits/playbook/pb_badge/docs/_description.md
376
376
  - app/pb_kits/playbook/pb_badge/docs/example.yml
377
377
  - app/pb_kits/playbook/pb_badge/docs/index.js
378
- - app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx
379
378
  - app/pb_kits/playbook/pb_bar_graph/_bar_graph.scss
379
+ - app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx
380
380
  - app/pb_kits/playbook/pb_bar_graph/barGraphSettings.js
381
381
  - app/pb_kits/playbook/pb_bar_graph/bar_graph.html.erb
382
382
  - app/pb_kits/playbook/pb_bar_graph/bar_graph.rb
@@ -554,8 +554,9 @@ files:
554
554
  - app/pb_kits/playbook/pb_checkbox/docs/_description.md
555
555
  - app/pb_kits/playbook/pb_checkbox/docs/example.yml
556
556
  - app/pb_kits/playbook/pb_checkbox/docs/index.js
557
- - app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx
557
+ - app/pb_kits/playbook/pb_circle_chart/ChartsTypes.ts
558
558
  - app/pb_kits/playbook/pb_circle_chart/_circle_chart.scss
559
+ - app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx
559
560
  - app/pb_kits/playbook/pb_circle_chart/circle_chart.html.erb
560
561
  - app/pb_kits/playbook/pb_circle_chart/circle_chart.rb
561
562
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb
@@ -652,8 +653,10 @@ files:
652
653
  - app/pb_kits/playbook/pb_currency/docs/example.yml
653
654
  - app/pb_kits/playbook/pb_currency/docs/index.js
654
655
  - app/pb_kits/playbook/pb_dashboard/commonSettings.js
655
- - app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.js
656
- - app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.js
656
+ - app/pb_kits/playbook/pb_dashboard/pbChartsColorsHelper.ts
657
+ - app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts
658
+ - app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts
659
+ - app/pb_kits/playbook/pb_dashboard/themeTypes.ts
657
660
  - app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx
658
661
  - app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.scss
659
662
  - app/pb_kits/playbook/pb_dashboard_value/_dashboard_value_mixins.scss
@@ -1047,8 +1050,8 @@ files:
1047
1050
  - app/pb_kits/playbook/pb_form_pill/docs/index.js
1048
1051
  - app/pb_kits/playbook/pb_form_pill/form_pill.html.erb
1049
1052
  - app/pb_kits/playbook/pb_form_pill/form_pill.rb
1050
- - app/pb_kits/playbook/pb_gauge/_gauge.jsx
1051
1053
  - app/pb_kits/playbook/pb_gauge/_gauge.scss
1054
+ - app/pb_kits/playbook/pb_gauge/_gauge.tsx
1052
1055
  - app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.html.erb
1053
1056
  - app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx
1054
1057
  - app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.md
@@ -1325,8 +1328,8 @@ files:
1325
1328
  - app/pb_kits/playbook/pb_lightbox/hooks/useWindowSize.ts
1326
1329
  - app/pb_kits/playbook/pb_lightbox/lightbox.scss
1327
1330
  - app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx
1328
- - app/pb_kits/playbook/pb_line_graph/_line_graph.jsx
1329
1331
  - app/pb_kits/playbook/pb_line_graph/_line_graph.scss
1332
+ - app/pb_kits/playbook/pb_line_graph/_line_graph.tsx
1330
1333
  - app/pb_kits/playbook/pb_line_graph/docs/_description.md
1331
1334
  - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.html.erb
1332
1335
  - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.jsx
@@ -2120,7 +2123,7 @@ files:
2120
2123
  - app/pb_kits/playbook/pb_tooltip/tooltip.html.erb
2121
2124
  - app/pb_kits/playbook/pb_tooltip/tooltip.rb
2122
2125
  - app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx
2123
- - app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.jsx
2126
+ - app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx
2124
2127
  - app/pb_kits/playbook/pb_treemap_chart/docs/_description.md
2125
2128
  - app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.html.erb
2126
2129
  - app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.jsx
@@ -2246,7 +2249,6 @@ files:
2246
2249
  - app/pb_kits/playbook/playbook-doc.js
2247
2250
  - app/pb_kits/playbook/playbook-rails-react-bindings.js
2248
2251
  - app/pb_kits/playbook/playbook-rails.js
2249
- - app/pb_kits/playbook/plugins/pb_chart.js
2250
2252
  - app/pb_kits/playbook/tokens/_animation-curves.scss
2251
2253
  - app/pb_kits/playbook/tokens/_border_radius.scss
2252
2254
  - app/pb_kits/playbook/tokens/_colors.scss
@@ -1,111 +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 BarGraphProps = {
10
- align?: "left" | "right" | "center",
11
- axisTitle: string,
12
- dark?: Boolean,
13
- xAxisCategories: array,
14
- yAxisMin: number,
15
- yAxisMax: number,
16
- chartData: array<{
17
- name: string,
18
- data: array<number>,
19
- }>,
20
- className?: string,
21
- id: number,
22
- pointStart: number,
23
- subTitle?: string,
24
- title: string,
25
- type?: string,
26
- legend?: boolean,
27
- toggleLegendClick?: boolean,
28
- height?: string,
29
- colors: array,
30
- layout?: "horizontal" | "vertical" | "proximate",
31
- verticalAlign?: "top" | "middle" | "bottom",
32
- x?: number,
33
- y?: number,
34
- }
35
-
36
- export default class BarGraph extends React.Component<BarGraphProps> {
37
- static defaultProps = {
38
- align: "center",
39
- className: 'pb_bar_graph',
40
- dark: false,
41
- type: 'column',
42
- legend: false,
43
- toggleLegendClick: true,
44
- layout: "horizontal",
45
- verticalAlign: "bottom",
46
- x: 0,
47
- y: 0,
48
- }
49
-
50
- componentDidMount() {
51
- const {
52
- align,
53
- axisTitle,
54
- dark,
55
- xAxisCategories,
56
- yAxisMin,
57
- yAxisMax,
58
- className,
59
- chartData,
60
- id,
61
- pointStart,
62
- subTitle,
63
- title,
64
- type,
65
- legend,
66
- height,
67
- toggleLegendClick,
68
- colors = [],
69
- layout,
70
- verticalAlign,
71
- x,
72
- y,
73
- } = this.props
74
-
75
- new pbChart(`.${className}`, {
76
- align,
77
- axisTitle: axisTitle,
78
- dark,
79
- chartData: chartData,
80
- colors: colors,
81
- id: id,
82
- pointStart: pointStart,
83
- subtitle: subTitle,
84
- type,
85
- title: title,
86
- xAxisCategories: xAxisCategories,
87
- yAxisMin: yAxisMin,
88
- yAxisMax: yAxisMax,
89
- legend,
90
- toggleLegendClick: toggleLegendClick,
91
- height: height,
92
- layout,
93
- verticalAlign,
94
- x,
95
- y,
96
- })
97
- }
98
-
99
- props: BarGraphProps
100
-
101
- render() {
102
- const { className, id } = this.props
103
-
104
- return (
105
- <div
106
- className={classnames(globalProps(this.props), className)}
107
- id={id}
108
- />
109
- )
110
- }
111
- }
@@ -1,151 +0,0 @@
1
- /* @flow */
2
-
3
- import React, { useEffect, useRef } from 'react'
4
- import classnames from 'classnames'
5
- import Highcharts from 'highcharts'
6
-
7
- import { globalProps } from '../utilities/globalProps'
8
- import { buildAriaProps, buildDataProps } from '../utilities/props'
9
-
10
- import pbChart from '../plugins/pb_chart'
11
- type CircleChartProps = {
12
- align?: "left" | "right" | "center",
13
- aria: Object,
14
- chartData?: array,
15
- children: Node,
16
- className?: string,
17
- colors: array,
18
- dark?: Boolean,
19
- data?: Object,
20
- dataLabelHtml: string,
21
- dataLabels: boolean,
22
- headerFormat: string,
23
- height?: string,
24
- id?: string,
25
- innerSize: "sm" | "md" | "lg" | "none",
26
- legend: boolean,
27
- maxPointSize: number,
28
- minPointSize: number,
29
- rounded: boolean,
30
- startAngle: number,
31
- style: string,
32
- title: string,
33
- tooltipHtml: string,
34
- useHtml: boolean,
35
- zMin: number,
36
- layout?: "horizontal" | "vertical" | "proximate",
37
- verticalAlign?: "top" | "middle" | "bottom",
38
- x?: number,
39
- y?: number,
40
- }
41
-
42
- const CircleChart = (props: CircleChartProps) => {
43
- const {
44
- align = 'center',
45
- aria = {},
46
- chartData = [{}],
47
- children,
48
- className,
49
- colors = [],
50
- dark = false,
51
- data = {},
52
- dataLabelHtml = '<div>{point.name}</div>',
53
- dataLabels = false,
54
- headerFormat = null,
55
- height,
56
- id,
57
- innerSize = 'md',
58
- legend = false,
59
- maxPointSize = null,
60
- minPointSize = null,
61
- rounded = false,
62
- startAngle = null,
63
- style = 'pie',
64
- title = '',
65
- tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
66
- '<b>{point.y}</b>',
67
- useHtml = false,
68
- zMin = null,
69
- layout = 'horizontal',
70
- verticalAlign = 'bottom',
71
- x = 0,
72
- y = 0,
73
- } = props
74
-
75
- const ariaProps = buildAriaProps(aria)
76
- const dataProps = buildDataProps(data)
77
- const innerSizes = { sm: '35%', md: '50%', lg: '85%', none: '0%' }
78
- const innerSizeFormat = (size) => innerSizes[size]
79
- const roundedBorderWidth = rounded ? 20 : null
80
- const roundedBorderColor = rounded ? null : ''
81
-
82
- // Runs first time component Renders
83
- useEffect(() => {
84
- const formattedChartData = chartData.map((obj) => {
85
- obj.y = obj.value
86
- delete obj.value
87
- return obj
88
- })
89
-
90
- new pbChart('.selector', {
91
- align,
92
- id,
93
- colors,
94
- borderColor: roundedBorderColor,
95
- borderWidth: roundedBorderWidth,
96
- chartData: formattedChartData,
97
- dark,
98
- title,
99
- type: style,
100
- showInLegend: legend,
101
- dataLabelHtml,
102
- dataLabels,
103
- headerFormat,
104
- height: height,
105
- tooltipHtml,
106
- useHTML: useHtml,
107
- minPointSize,
108
- maxPointSize,
109
- innerSize: innerSizeFormat(innerSize),
110
- zMin,
111
- startAngle,
112
- layout,
113
- verticalAlign,
114
- x,
115
- y,
116
- })
117
- }, [])
118
-
119
- const componentDidMount = useRef(false)
120
-
121
- // Doesn't run the first time but runs every subsequent render
122
- useEffect(() => {
123
- if (componentDidMount.current) {
124
- Highcharts.charts.forEach((chart) => {
125
- if (chart && chart.renderTo.id === id) {
126
- const updatedValueArray = chartData.map((obj) => {
127
- return obj.value
128
- })
129
- chart.series[0].setData(updatedValueArray)
130
- }
131
- })
132
- } else {
133
- componentDidMount.current = true
134
- }
135
- }, [chartData])
136
- return (
137
- <div id={`wrapper-circle-chart-${id}`}>
138
- <div
139
- id={id}
140
- {...ariaProps}
141
- {...dataProps}
142
- className={classnames('pb_circle_chart', globalProps(props), className)}
143
- />
144
- <If condition={children}>
145
- <div className="pb-circle-chart-block">{children}</div>
146
- </If>
147
- </div>
148
- )
149
- }
150
-
151
- export default CircleChart
@@ -1,112 +0,0 @@
1
- /* @flow */
2
-
3
- import React, { useEffect, useRef } from 'react'
4
- import classnames from 'classnames'
5
- import Highcharts from 'highcharts'
6
-
7
- import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
8
- import { globalProps } from '../utilities/globalProps'
9
- import pbChart from '../plugins/pb_chart'
10
-
11
- type GaugeProps = {
12
- aria: Object,
13
- className?: string,
14
- chartData?: array,
15
- dark?: Boolean,
16
- data?: Object,
17
- disableAnimation: boolean,
18
- fullCircle: boolean,
19
- height: string,
20
- id?: string,
21
- max: number,
22
- min: number,
23
- prefix: string,
24
- showLabels: boolean,
25
- style: string,
26
- suffix: string,
27
- title: string,
28
- tooltipHtml: string,
29
- colors: array,
30
- }
31
-
32
- const Gauge = (props: GaugeProps) => {
33
- const {
34
- aria = {},
35
- className,
36
- chartData = [{ name: 'Name', value: 0 }],
37
- dark = false,
38
- data = {},
39
- disableAnimation = false,
40
- fullCircle = false,
41
- height = null,
42
- id,
43
- max = 100,
44
- min = 0,
45
- prefix = '',
46
- showLabels = false,
47
- style = 'solidgauge',
48
- suffix = '',
49
- title = '',
50
- tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' + '<b>{point.y}</b>',
51
- colors = [],
52
- } = props
53
-
54
- const ariaProps = buildAriaProps(aria)
55
- const dataProps = buildDataProps(data)
56
-
57
- const css = buildCss({
58
- 'pb_gauge_kit': true,
59
- })
60
- // Runs first time component Renders
61
- useEffect(() => {
62
- const formattedChartData = chartData.map((obj) => {
63
- obj.y = obj.value
64
- delete obj.value
65
- return obj
66
- })
67
-
68
- new pbChart('.selector', {
69
- id: id,
70
- chartData: formattedChartData,
71
- circumference: fullCircle ? [0, 360] : [-100, 100],
72
- dark,
73
- disableAnimation: disableAnimation,
74
- height: height,
75
- min: min,
76
- max: max,
77
- prefix: prefix,
78
- title: title,
79
- suffix: suffix,
80
- showLabels: showLabels,
81
- style: style,
82
- tooltipHtml: tooltipHtml,
83
- type: 'gauge',
84
- colors: colors,
85
- })
86
- }, [])
87
-
88
- const componentDidMount = useRef(false)
89
- // Doesn't run the first time but runs every subsequent render
90
- useEffect(() => {
91
- if (componentDidMount.current) {
92
- Highcharts.charts.forEach((chart) => {
93
- if (chart && chart.renderTo.id === id) {
94
- chart.series[0].setData([chartData[0].value])
95
- chart.series[0].data[0].name = chartData[0].name
96
- }
97
- })
98
- } else {
99
- componentDidMount.current = true
100
- }
101
- }, [chartData])
102
- return (
103
- <div
104
- {...ariaProps}
105
- {...dataProps}
106
- className={classnames(css, globalProps(props), className)}
107
- id={id}
108
- />
109
- )
110
- }
111
-
112
- export default Gauge
@@ -1,113 +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 LineGraphProps = {
10
- align?: "left" | "right" | "center",
11
- axisTitle?: string,
12
- dark?: Boolean,
13
- xAxisCategories: array,
14
- yAxisMin: number,
15
- yAxisMax: number,
16
- className?: string,
17
- chartData: array<{
18
- name: string,
19
- data: array<number>,
20
- }>,
21
- gradient?: boolean,
22
- id: string,
23
- pointStart: number,
24
- subTitle?: string,
25
- title: string,
26
- type?: string,
27
- legend?: boolean,
28
- toggleLegendClick?: boolean,
29
- height?: string,
30
- colors: array,
31
- layout?: "horizontal" | "vertical" | "proximate",
32
- verticalAlign?: "top" | "middle" | "bottom",
33
- x?: number,
34
- y?: number,
35
- }
36
-
37
- export default class LineGraph extends React.Component<LineGraphProps> {
38
- static defaultProps = {
39
- align: "center",
40
- className: 'pb_bar_graph',
41
- dark: false,
42
- gradient: false,
43
- type: 'line',
44
- legend: false,
45
- toggleLegendClick: true,
46
- layout: "horizontal",
47
- verticalAlign: "bottom",
48
- x: 0,
49
- y: 0,
50
- }
51
-
52
- componentDidMount() {
53
- const {
54
- align,
55
- axisTitle,
56
- dark,
57
- xAxisCategories,
58
- yAxisMin,
59
- yAxisMax,
60
- className,
61
- chartData,
62
- id,
63
- pointStart,
64
- subTitle,
65
- title,
66
- type,
67
- legend,
68
- toggleLegendClick,
69
- height,
70
- colors = [],
71
- layout,
72
- verticalAlign,
73
- x,
74
- y,
75
- } = this.props
76
-
77
- new pbChart(`.${className}`, {
78
- align,
79
- axisTitle: axisTitle,
80
- chartData: chartData,
81
- colors: colors,
82
- dark,
83
- id: id,
84
- pointStart: pointStart,
85
- subtitle: subTitle,
86
- type,
87
- title: title,
88
- xAxisCategories: xAxisCategories,
89
- yAxisMin: yAxisMin,
90
- yAxisMax: yAxisMax,
91
- legend: legend,
92
- toggleLegendClick: toggleLegendClick,
93
- height: height,
94
- layout,
95
- verticalAlign,
96
- x,
97
- y,
98
- })
99
- }
100
-
101
- props: LineGraphProps
102
-
103
- render() {
104
- const { className, id } = this.props
105
-
106
- return (
107
- <div
108
- className={classnames(globalProps(this.props), className)}
109
- id={id}
110
- />
111
- )
112
- }
113
- }
@@ -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};">&#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
- }