playbook_ui 5.3.0.pre.alpha1 → 5.3.0
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/_playbook.scss +0 -1
- data/app/pb_kits/playbook/data/menu.yml +2 -3
- data/app/pb_kits/playbook/index.js +0 -1
- data/app/pb_kits/playbook/packs/examples.js +0 -2
- data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.js +0 -26
- data/app/pb_kits/playbook/plugins/pb_chart.js +0 -71
- data/lib/playbook/version.rb +1 -1
- metadata +4 -25
- data/app/pb_kits/playbook/pb_gauge/_gauge.html.erb +0 -12
- data/app/pb_kits/playbook/pb_gauge/_gauge.jsx +0 -105
- data/app/pb_kits/playbook/pb_gauge/_gauge.scss +0 -11
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_default.html.erb +0 -11
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx +0 -17
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.html.erb +0 -14
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.jsx +0 -20
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_height.html.erb +0 -15
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_height.jsx +0 -23
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_live_data.jsx +0 -25
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.html.erb +0 -21
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.jsx +0 -26
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.html.erb +0 -33
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx +0 -42
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_title.html.erb +0 -14
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_title.jsx +0 -20
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units.html.erb +0 -29
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units.jsx +0 -29
- data/app/pb_kits/playbook/pb_gauge/docs/example.yml +0 -22
- data/app/pb_kits/playbook/pb_gauge/docs/index.js +0 -8
- data/app/pb_kits/playbook/pb_gauge/gauge.rb +0 -55
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: bd87d19dffeb68dba4372b1282cf12fcb1cace3acda84f7119a902fc205e7e1f
|
4
|
+
data.tar.gz: e5f41cf298f15483eb5299b27837c83cac6e74e265b446fe6ff819742ff18b48
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: e7a8e97e476695635a7ca42bbbd831a20b9ff5e48665a7246b723ef2eacdd418864ba2dcec08b602e7fa35362fccf15685e56d91371442a3149ae2eef6d30615
|
7
|
+
data.tar.gz: 6d58ee0d87a24bdf4912e774c4f0ea33480be6007ba5ffd8cd6f2145bd4b27bbbf233a5288f691a3635f445944eccd0f4196c098cfd6e24e7396ed0580999ecc
|
@@ -25,7 +25,6 @@ export FixedConfirmationToast from './pb_fixed_confirmation_toast/_fixed_confirm
|
|
25
25
|
export Flex from './pb_flex/_flex.jsx'
|
26
26
|
export FlexItem from './pb_flex/_flex_item.jsx'
|
27
27
|
export FormPill from './pb_form_pill/_form_pill.jsx'
|
28
|
-
export Gauge from './pb_gauge/_gauge.jsx'
|
29
28
|
export Hashtag from './pb_hashtag/_hashtag.jsx'
|
30
29
|
export Highlight from './pb_highlight/_highlight.jsx'
|
31
30
|
export HomeAddressStreet from './pb_home_address_street/_home_address_street.jsx'
|
@@ -38,7 +38,6 @@ import * as Filter from 'pb_filter/docs'
|
|
38
38
|
import * as FixedConfirmationToast from 'pb_fixed_confirmation_toast/docs'
|
39
39
|
import * as Flex from 'pb_flex/docs'
|
40
40
|
import * as FormPill from 'pb_form_pill/docs'
|
41
|
-
import * as Gauge from 'pb_gauge/docs'
|
42
41
|
import * as Hashtag from 'pb_hashtag/docs'
|
43
42
|
import * as Highlight from 'pb_highlight/docs'
|
44
43
|
import * as HomeAddressStreet from 'pb_home_address_street/docs'
|
@@ -119,7 +118,6 @@ WebpackerReact.setup({
|
|
119
118
|
...FixedConfirmationToast,
|
120
119
|
...Flex,
|
121
120
|
...FormPill,
|
122
|
-
...Gauge,
|
123
121
|
...Hashtag,
|
124
122
|
...Highlight,
|
125
123
|
...HomeAddressStreet,
|
@@ -124,13 +124,6 @@ const highchartsTheme = {
|
|
124
124
|
fontSize: typography.text_smaller,
|
125
125
|
},
|
126
126
|
},
|
127
|
-
// specific to gauge
|
128
|
-
// unfilled gauge color
|
129
|
-
pane: {
|
130
|
-
background: {
|
131
|
-
borderColor: colors.border_light,
|
132
|
-
},
|
133
|
-
},
|
134
127
|
|
135
128
|
plotOptions: {
|
136
129
|
series: {
|
@@ -151,25 +144,6 @@ const highchartsTheme = {
|
|
151
144
|
threshold: null,
|
152
145
|
},
|
153
146
|
|
154
|
-
// GAUGE STYLES
|
155
|
-
solidgauge: {
|
156
|
-
borderColor: colors.primary,
|
157
|
-
borderWidth: 20,
|
158
|
-
radius: 90,
|
159
|
-
innerRadius: '90%',
|
160
|
-
dataLabels: {
|
161
|
-
borderWidth: 0,
|
162
|
-
color: colors.text_lt_default,
|
163
|
-
enabled: true,
|
164
|
-
style: {
|
165
|
-
fontFamily: typography.font_family_base,
|
166
|
-
fontWeight: typography.regular,
|
167
|
-
fontSize: typography.heading_2,
|
168
|
-
},
|
169
|
-
y: -26,
|
170
|
-
},
|
171
|
-
},
|
172
|
-
|
173
147
|
// PIE STYLES
|
174
148
|
pie: {
|
175
149
|
colors: [
|
@@ -3,8 +3,6 @@ import Highcharts from 'highcharts'
|
|
3
3
|
import { highchartsTheme } from '../pb_dashboard/pbChartsLightTheme.js'
|
4
4
|
|
5
5
|
require('highcharts/modules/variable-pie')(Highcharts)
|
6
|
-
import highchartsMore from 'highcharts/highcharts-more.js'
|
7
|
-
import solidGauge from 'highcharts/modules/solid-gauge.js'
|
8
6
|
|
9
7
|
class pbChart {
|
10
8
|
defaults = {
|
@@ -33,80 +31,11 @@ class pbChart {
|
|
33
31
|
|
34
32
|
if (this.options.type == 'variablepie' || this.options.type == 'pie'){
|
35
33
|
this.setupPieChart()
|
36
|
-
} else if (this.options.type == 'gauge') {
|
37
|
-
this.setupGauge()
|
38
34
|
} else {
|
39
35
|
this.setupChart()
|
40
36
|
}
|
41
37
|
}
|
42
38
|
|
43
|
-
setupGauge() {
|
44
|
-
highchartsMore(Highcharts)
|
45
|
-
solidGauge(Highcharts)
|
46
|
-
Highcharts.setOptions(highchartsTheme)
|
47
|
-
|
48
|
-
Highcharts.chart(this.defaults.id, {
|
49
|
-
chart: {
|
50
|
-
type: this.defaults.style,
|
51
|
-
height: this.defaults.height,
|
52
|
-
},
|
53
|
-
title: {
|
54
|
-
text: this.defaults.title,
|
55
|
-
},
|
56
|
-
yAxis: {
|
57
|
-
min: this.defaults.min,
|
58
|
-
max: this.defaults.max,
|
59
|
-
lineWidth: 0,
|
60
|
-
tickWidth: 0,
|
61
|
-
minorTickInterval: null,
|
62
|
-
tickAmount: 2,
|
63
|
-
tickPositions: [this.defaults.min, this.defaults.max],
|
64
|
-
labels: {
|
65
|
-
y: 26,
|
66
|
-
enabled: this.defaults.showLabels,
|
67
|
-
},
|
68
|
-
},
|
69
|
-
credits: false,
|
70
|
-
series: [
|
71
|
-
{
|
72
|
-
data: this.defaults.chartData,
|
73
|
-
},
|
74
|
-
],
|
75
|
-
pane: {
|
76
|
-
center: ['50%', '50%'],
|
77
|
-
size: '90%',
|
78
|
-
startAngle: this.defaults.circumference[0],
|
79
|
-
endAngle: this.defaults.circumference[1],
|
80
|
-
background: {
|
81
|
-
borderWidth: 20,
|
82
|
-
innerRadius: '90%',
|
83
|
-
outerRadius: '90%',
|
84
|
-
shape: 'arc',
|
85
|
-
className: 'gauge-pane',
|
86
|
-
},
|
87
|
-
},
|
88
|
-
tooltip: {
|
89
|
-
headerFormat: '',
|
90
|
-
pointFormat: this.defaults.tooltipHtml,
|
91
|
-
followPointer: true,
|
92
|
-
},
|
93
|
-
plotOptions: {
|
94
|
-
solidgauge: {
|
95
|
-
dataLabels: {
|
96
|
-
format: `<span class="prefix">${this.defaults.prefix}</span>` +
|
97
|
-
'<span class="fix">{y:,f}</span>' +
|
98
|
-
`<span class="suffix">${this.defaults.suffix}</span>`,
|
99
|
-
},
|
100
|
-
},
|
101
|
-
},
|
102
|
-
})
|
103
|
-
document.querySelectorAll('.gauge-pane').forEach((pane) => pane.setAttribute('stroke-linejoin', 'round'))
|
104
|
-
if (document.querySelector('.prefix')) {
|
105
|
-
document.querySelectorAll('.prefix').forEach((prefix) => prefix.setAttribute('y', '28'))
|
106
|
-
document.querySelectorAll('.fix').forEach((fix) => fix.setAttribute('y', '38'))
|
107
|
-
}
|
108
|
-
}
|
109
|
-
|
110
39
|
setupPieChart() {
|
111
40
|
Highcharts.setOptions(highchartsTheme)
|
112
41
|
|
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: 5.3.0
|
4
|
+
version: 5.3.0
|
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: 2020-07-
|
12
|
+
date: 2020-07-10 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -842,27 +842,6 @@ files:
|
|
842
842
|
- app/pb_kits/playbook/pb_form_pill/docs/example.yml
|
843
843
|
- app/pb_kits/playbook/pb_form_pill/docs/index.js
|
844
844
|
- app/pb_kits/playbook/pb_form_pill/form_pill.rb
|
845
|
-
- app/pb_kits/playbook/pb_gauge/_gauge.html.erb
|
846
|
-
- app/pb_kits/playbook/pb_gauge/_gauge.jsx
|
847
|
-
- app/pb_kits/playbook/pb_gauge/_gauge.scss
|
848
|
-
- app/pb_kits/playbook/pb_gauge/docs/_gauge_default.html.erb
|
849
|
-
- app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx
|
850
|
-
- app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.html.erb
|
851
|
-
- app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.jsx
|
852
|
-
- app/pb_kits/playbook/pb_gauge/docs/_gauge_height.html.erb
|
853
|
-
- app/pb_kits/playbook/pb_gauge/docs/_gauge_height.jsx
|
854
|
-
- app/pb_kits/playbook/pb_gauge/docs/_gauge_live_data.jsx
|
855
|
-
- app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.html.erb
|
856
|
-
- app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.jsx
|
857
|
-
- app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.html.erb
|
858
|
-
- app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx
|
859
|
-
- app/pb_kits/playbook/pb_gauge/docs/_gauge_title.html.erb
|
860
|
-
- app/pb_kits/playbook/pb_gauge/docs/_gauge_title.jsx
|
861
|
-
- app/pb_kits/playbook/pb_gauge/docs/_gauge_units.html.erb
|
862
|
-
- app/pb_kits/playbook/pb_gauge/docs/_gauge_units.jsx
|
863
|
-
- app/pb_kits/playbook/pb_gauge/docs/example.yml
|
864
|
-
- app/pb_kits/playbook/pb_gauge/docs/index.js
|
865
|
-
- app/pb_kits/playbook/pb_gauge/gauge.rb
|
866
845
|
- app/pb_kits/playbook/pb_hashtag/_hashtag.html.erb
|
867
846
|
- app/pb_kits/playbook/pb_hashtag/_hashtag.jsx
|
868
847
|
- app/pb_kits/playbook/pb_hashtag/_hashtag.scss
|
@@ -1834,9 +1813,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
1834
1813
|
version: '0'
|
1835
1814
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
1836
1815
|
requirements:
|
1837
|
-
- - "
|
1816
|
+
- - ">="
|
1838
1817
|
- !ruby/object:Gem::Version
|
1839
|
-
version:
|
1818
|
+
version: '0'
|
1840
1819
|
requirements: []
|
1841
1820
|
rubyforge_project:
|
1842
1821
|
rubygems_version: 2.7.3
|
@@ -1,12 +0,0 @@
|
|
1
|
-
<%= content_tag(:div, "",
|
2
|
-
id: object.id,
|
3
|
-
data: object.data,
|
4
|
-
class: object.classname) %>
|
5
|
-
<% content_for :pb_js do %>
|
6
|
-
<%= javascript_tag do %>
|
7
|
-
window.addEventListener('DOMContentLoaded', function() {
|
8
|
-
new pbChart('.selector', <%= object.chart_options %>)
|
9
|
-
})
|
10
|
-
<% end %>
|
11
|
-
<% end %>
|
12
|
-
|
@@ -1,105 +0,0 @@
|
|
1
|
-
/* @flow */
|
2
|
-
|
3
|
-
import React, { useEffect, useRef } from 'react'
|
4
|
-
import { pbChart } from '../'
|
5
|
-
import { spacing } from '../utilities/spacing.js'
|
6
|
-
import classnames from 'classnames'
|
7
|
-
import Highcharts from 'highcharts'
|
8
|
-
|
9
|
-
import {
|
10
|
-
buildAriaProps,
|
11
|
-
buildCss,
|
12
|
-
buildDataProps,
|
13
|
-
} from '../utilities/props'
|
14
|
-
|
15
|
-
type GaugeProps = {
|
16
|
-
aria: Object,
|
17
|
-
className?: String,
|
18
|
-
chartData?: Array,
|
19
|
-
data?: Object,
|
20
|
-
fullCircle: Boolean,
|
21
|
-
height: String,
|
22
|
-
id?: String,
|
23
|
-
max: Number,
|
24
|
-
min: Number,
|
25
|
-
prefix: String,
|
26
|
-
showLabels: Boolean,
|
27
|
-
style: String,
|
28
|
-
suffix: String,
|
29
|
-
title: String,
|
30
|
-
tooltipHtml: String,
|
31
|
-
}
|
32
|
-
|
33
|
-
const Gauge = (props: GaugeProps) => {
|
34
|
-
const {
|
35
|
-
aria = {},
|
36
|
-
className,
|
37
|
-
chartData = [{ name: 'Name', value: 0 }],
|
38
|
-
data = {},
|
39
|
-
fullCircle = false,
|
40
|
-
height = null,
|
41
|
-
id,
|
42
|
-
max = 100,
|
43
|
-
min = 0,
|
44
|
-
prefix = '',
|
45
|
-
showLabels = false,
|
46
|
-
style = 'solidgauge',
|
47
|
-
suffix = '',
|
48
|
-
title = '',
|
49
|
-
tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' + '<b>{point.y}</b>',
|
50
|
-
} = props
|
51
|
-
|
52
|
-
const ariaProps = buildAriaProps(aria)
|
53
|
-
const dataProps = buildDataProps(data)
|
54
|
-
|
55
|
-
const css = buildCss({
|
56
|
-
'pb_gauge_kit': true,
|
57
|
-
})
|
58
|
-
// Runs first time component Renders
|
59
|
-
useEffect(() => {
|
60
|
-
chartData.forEach((obj) => {
|
61
|
-
obj.y = obj.value
|
62
|
-
delete obj.value
|
63
|
-
})
|
64
|
-
|
65
|
-
new pbChart('.selector', {
|
66
|
-
id: id,
|
67
|
-
chartData: chartData,
|
68
|
-
circumference: fullCircle ? [0, 360] : [-100, 100],
|
69
|
-
height: height,
|
70
|
-
min: min,
|
71
|
-
max: max,
|
72
|
-
prefix: prefix,
|
73
|
-
title: title,
|
74
|
-
suffix: suffix,
|
75
|
-
showLabels: showLabels,
|
76
|
-
style: style,
|
77
|
-
tooltipHtml: tooltipHtml,
|
78
|
-
type: 'gauge',
|
79
|
-
})
|
80
|
-
}, [])
|
81
|
-
|
82
|
-
const componentDidMount = useRef(false)
|
83
|
-
// Doesn't run the first time but runs every subsequent render
|
84
|
-
useEffect(() => {
|
85
|
-
if (componentDidMount.current) {
|
86
|
-
Highcharts.charts.forEach((chart) => {
|
87
|
-
if (chart.renderTo.id === id) {
|
88
|
-
chart.series[0].setData([chartData[0].value])
|
89
|
-
}
|
90
|
-
})
|
91
|
-
} else {
|
92
|
-
componentDidMount.current = true
|
93
|
-
}
|
94
|
-
})
|
95
|
-
return (
|
96
|
-
<div
|
97
|
-
{...ariaProps}
|
98
|
-
{...dataProps}
|
99
|
-
className={classnames(css, className, spacing(props))}
|
100
|
-
id={id}
|
101
|
-
/>
|
102
|
-
)
|
103
|
-
}
|
104
|
-
|
105
|
-
export default Gauge
|
@@ -1,17 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { Gauge } from '../../'
|
3
|
-
|
4
|
-
const data = [
|
5
|
-
{ name: 'Point1', value: 45 },
|
6
|
-
]
|
7
|
-
|
8
|
-
const GaugeDefault = () => (
|
9
|
-
<div>
|
10
|
-
<Gauge
|
11
|
-
chartData={data}
|
12
|
-
id="gauge-default"
|
13
|
-
/>
|
14
|
-
</div>
|
15
|
-
)
|
16
|
-
|
17
|
-
export default GaugeDefault
|
@@ -1,20 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { Gauge } from '../../'
|
3
|
-
|
4
|
-
const data = [
|
5
|
-
{ name: 'Capacity', value: 75 },
|
6
|
-
]
|
7
|
-
|
8
|
-
const GaugeFullCircle = () => (
|
9
|
-
<div>
|
10
|
-
<Gauge
|
11
|
-
chartData={data}
|
12
|
-
fullCircle
|
13
|
-
id="gauge-full-circle"
|
14
|
-
suffix="%"
|
15
|
-
title="Seating Capacity"
|
16
|
-
/>
|
17
|
-
</div>
|
18
|
-
)
|
19
|
-
|
20
|
-
export default GaugeFullCircle
|
@@ -1,15 +0,0 @@
|
|
1
|
-
<%= pb_rails("gauge", props: {
|
2
|
-
id: "gauge-height-px",
|
3
|
-
chart_data: [{ name: "Pixel Height", value: 400 }],
|
4
|
-
height: '400',
|
5
|
-
title: "Fixed Height in Pixels",
|
6
|
-
suffix: "px"
|
7
|
-
}) %>
|
8
|
-
|
9
|
-
<%= pb_rails("gauge", props: {
|
10
|
-
id: "gauge-height-percent",
|
11
|
-
chart_data: [{ name: "Percentage Height", value: 45 }],
|
12
|
-
height: '45%',
|
13
|
-
title: "Height as Percentage of Width",
|
14
|
-
suffix: "%"
|
15
|
-
}) %>
|
@@ -1,23 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { Gauge } from '../../'
|
3
|
-
|
4
|
-
const GaugeHeight = () => (
|
5
|
-
<div>
|
6
|
-
<Gauge
|
7
|
-
chartData={[ { name: 'Name', value: 400 } ]}
|
8
|
-
height="400"
|
9
|
-
id="gauge-height-px"
|
10
|
-
suffix="px"
|
11
|
-
title="Fixed Height in Pixels"
|
12
|
-
/>
|
13
|
-
<Gauge
|
14
|
-
chartData={[ { name: 'Name', value: 45 } ]}
|
15
|
-
height="45%"
|
16
|
-
id="gauge-height-percent"
|
17
|
-
suffix="%"
|
18
|
-
title="Height as Percentage of Width"
|
19
|
-
/>
|
20
|
-
</div>
|
21
|
-
)
|
22
|
-
|
23
|
-
export default GaugeHeight
|
@@ -1,25 +0,0 @@
|
|
1
|
-
import React, { useState } from 'react'
|
2
|
-
import { Button, Gauge } from '../../'
|
3
|
-
|
4
|
-
const GaugeLiveData = () => {
|
5
|
-
const [value, setValue] = useState(50)
|
6
|
-
|
7
|
-
const updateState = () => {
|
8
|
-
setValue(Math.floor(Math.random() * 100))
|
9
|
-
}
|
10
|
-
|
11
|
-
return (
|
12
|
-
<div>
|
13
|
-
<Button
|
14
|
-
onClick={updateState}
|
15
|
-
text="Update State"
|
16
|
-
/>
|
17
|
-
<Gauge
|
18
|
-
chartData={[{ name: 'Name', value: value }]}
|
19
|
-
id="gauge-live-data"
|
20
|
-
/>
|
21
|
-
</div>
|
22
|
-
)
|
23
|
-
}
|
24
|
-
|
25
|
-
export default GaugeLiveData
|
@@ -1,21 +0,0 @@
|
|
1
|
-
<%= pb_rails("title", props: {
|
2
|
-
text: "Min defaults to 0, Max to 100.",
|
3
|
-
tag: "h3",
|
4
|
-
size: 3
|
5
|
-
}) %>
|
6
|
-
|
7
|
-
<% data = [
|
8
|
-
{
|
9
|
-
name: 'Rating',
|
10
|
-
value: 4.5,
|
11
|
-
}
|
12
|
-
]%>
|
13
|
-
|
14
|
-
<%= pb_rails("gauge", props: {
|
15
|
-
id: "gauge-min-max",
|
16
|
-
chart_data: data,
|
17
|
-
min: 0,
|
18
|
-
max: 5,
|
19
|
-
show_labels: true,
|
20
|
-
title: "Product Rating"
|
21
|
-
}) %>
|
@@ -1,26 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { Gauge, Title } from '../../'
|
3
|
-
|
4
|
-
const data = [{
|
5
|
-
name: 'Rating', value: 4.5,
|
6
|
-
}]
|
7
|
-
|
8
|
-
const GaugeMinMax = () => (
|
9
|
-
<div>
|
10
|
-
<Title
|
11
|
-
size={3}
|
12
|
-
tag="h3"
|
13
|
-
text="Min defaults to 0, Max to 100."
|
14
|
-
/>
|
15
|
-
<Gauge
|
16
|
-
chartData={data}
|
17
|
-
id="gauge-min-max"
|
18
|
-
max={5}
|
19
|
-
min={0}
|
20
|
-
showLabels
|
21
|
-
title="Product Rating"
|
22
|
-
/>
|
23
|
-
</div>
|
24
|
-
)
|
25
|
-
|
26
|
-
export default GaugeMinMax
|
@@ -1,33 +0,0 @@
|
|
1
|
-
<%= pb_rails("title", props: {
|
2
|
-
text: "Gauge resizes dynamically to fit whatever element it's placed within.",
|
3
|
-
tag: "h3",
|
4
|
-
size: 3
|
5
|
-
}) %>
|
6
|
-
|
7
|
-
|
8
|
-
<%= pb_rails("flex", props: {wrap: true}) do %>
|
9
|
-
<%= pb_rails("flex/flex_item", props: {fixed_size: "400px"}) do %>
|
10
|
-
<%= pb_rails("gauge", props: {
|
11
|
-
id: "gauge-sizing4",
|
12
|
-
chart_data: [{ name: "Name", value: 100 }],
|
13
|
-
}) %>
|
14
|
-
<% end %>
|
15
|
-
<%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>
|
16
|
-
<%= pb_rails("gauge", props: {
|
17
|
-
id: "gauge-sizing3",
|
18
|
-
chart_data: [{ name: "Name", value: 75 }],
|
19
|
-
}) %>
|
20
|
-
<% end %>
|
21
|
-
<%= pb_rails("flex/flex_item", props: {fixed_size: "200px"}) do %>
|
22
|
-
<%= pb_rails("gauge", props: {
|
23
|
-
id: "gauge-sizing2",
|
24
|
-
chart_data: [{ name: "Name", value: 50 }],
|
25
|
-
}) %>
|
26
|
-
<% end %>
|
27
|
-
<%= pb_rails("flex/flex_item", props: {fixed_size: "125px"}) do %>
|
28
|
-
<%= pb_rails("gauge", props: {
|
29
|
-
id: "gauge-sizing1",
|
30
|
-
chart_data: [{ name: "Name", value: 25 }],
|
31
|
-
}) %>
|
32
|
-
<% end %>
|
33
|
-
<% end %>
|
@@ -1,42 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { Flex, FlexItem, Gauge, Title } from '../../'
|
3
|
-
|
4
|
-
const GaugeSizing = () => (
|
5
|
-
<div>
|
6
|
-
<Title
|
7
|
-
size={3}
|
8
|
-
tag="h3"
|
9
|
-
text="Gauge resizes dynamically to fit whatever element it's placed within."
|
10
|
-
/>
|
11
|
-
<Flex
|
12
|
-
wrap
|
13
|
-
>
|
14
|
-
<FlexItem fixedSize="400px">
|
15
|
-
<Gauge
|
16
|
-
chartData={[ { name: 'Point1', value: 100 } ]}
|
17
|
-
id="gauge-sizing4"
|
18
|
-
/>
|
19
|
-
</FlexItem>
|
20
|
-
<FlexItem fixedSize="300px">
|
21
|
-
<Gauge
|
22
|
-
chartData={[ { name: 'Point1', value: 75 } ]}
|
23
|
-
id="gauge-sizing3"
|
24
|
-
/>
|
25
|
-
</FlexItem>
|
26
|
-
<FlexItem fixedSize="200px">
|
27
|
-
<Gauge
|
28
|
-
chartData={[ { name: 'Point1', value: 50 } ]}
|
29
|
-
id="gauge-sizing2"
|
30
|
-
/>
|
31
|
-
</FlexItem>
|
32
|
-
<FlexItem fixedSize="125px">
|
33
|
-
<Gauge
|
34
|
-
chartData={[ { name: 'Point1', value: 25 } ]}
|
35
|
-
id="gauge-sizing1"
|
36
|
-
/>
|
37
|
-
</FlexItem>
|
38
|
-
</Flex>
|
39
|
-
</div>
|
40
|
-
)
|
41
|
-
|
42
|
-
export default GaugeSizing
|
@@ -1,20 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { Gauge } from '../../'
|
3
|
-
|
4
|
-
const data = [
|
5
|
-
{ name: 'Score', value: 780 },
|
6
|
-
]
|
7
|
-
|
8
|
-
const GaugeTitle = () => (
|
9
|
-
<div>
|
10
|
-
<Gauge
|
11
|
-
chartData={data}
|
12
|
-
id="gauge-title"
|
13
|
-
max={850}
|
14
|
-
min={300}
|
15
|
-
title="Credit Score"
|
16
|
-
/>
|
17
|
-
</div>
|
18
|
-
)
|
19
|
-
|
20
|
-
export default GaugeTitle
|
@@ -1,29 +0,0 @@
|
|
1
|
-
<% data1 = [
|
2
|
-
{
|
3
|
-
name: 'Data Used',
|
4
|
-
value: 32,
|
5
|
-
}
|
6
|
-
]%>
|
7
|
-
|
8
|
-
<%= pb_rails("gauge", props: {
|
9
|
-
id: "gauge-units1",
|
10
|
-
chart_data: data1,
|
11
|
-
title: "Data Usage",
|
12
|
-
suffix: "GB"
|
13
|
-
}) %>
|
14
|
-
|
15
|
-
<% data2 = [
|
16
|
-
{
|
17
|
-
name: 'Sales to Date',
|
18
|
-
value: 65,
|
19
|
-
}
|
20
|
-
]%>
|
21
|
-
|
22
|
-
<%= pb_rails("gauge", props: {
|
23
|
-
id: "gauge-units2",
|
24
|
-
chart_data: data2,
|
25
|
-
title: "Sales Goal",
|
26
|
-
prefix: "$",
|
27
|
-
suffix: "k",
|
28
|
-
|
29
|
-
}) %>
|
@@ -1,29 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { Gauge } from '../../'
|
3
|
-
|
4
|
-
const data1 = [
|
5
|
-
{ name: 'Data Used', value: 32 },
|
6
|
-
]
|
7
|
-
const data2 = [
|
8
|
-
{ name: 'Sales to Date', value: 65 },
|
9
|
-
]
|
10
|
-
|
11
|
-
const GaugeUnits = () => (
|
12
|
-
<div>
|
13
|
-
<Gauge
|
14
|
-
chartData={data1}
|
15
|
-
id="gauge-units1"
|
16
|
-
suffix="GB"
|
17
|
-
title="Data Usage"
|
18
|
-
/>
|
19
|
-
<Gauge
|
20
|
-
chartData={data2}
|
21
|
-
id="gauge-units2"
|
22
|
-
prefix="$"
|
23
|
-
suffix="k"
|
24
|
-
title="Sales Goal"
|
25
|
-
/>
|
26
|
-
</div>
|
27
|
-
)
|
28
|
-
|
29
|
-
export default GaugeUnits
|
@@ -1,22 +0,0 @@
|
|
1
|
-
examples:
|
2
|
-
|
3
|
-
rails:
|
4
|
-
- gauge_default: Default
|
5
|
-
- gauge_title: Title
|
6
|
-
- gauge_units: Units
|
7
|
-
- gauge_full_circle: Full Circle
|
8
|
-
- gauge_min_max: Min Max Labels
|
9
|
-
- gauge_sizing: Sizing
|
10
|
-
- gauge_height: Height
|
11
|
-
|
12
|
-
|
13
|
-
react:
|
14
|
-
- gauge_default: Default
|
15
|
-
- gauge_title: Title
|
16
|
-
- gauge_units: Units
|
17
|
-
- gauge_full_circle: Full Circle
|
18
|
-
- gauge_min_max: Min Max Labels
|
19
|
-
- gauge_sizing: Sizing
|
20
|
-
- gauge_height: Height
|
21
|
-
- gauge_live_data: Live Data
|
22
|
-
|
@@ -1,8 +0,0 @@
|
|
1
|
-
export { default as GaugeDefault } from './_gauge_default.jsx'
|
2
|
-
export { default as GaugeFullCircle } from './_gauge_full_circle.jsx'
|
3
|
-
export { default as GaugeHeight } from './_gauge_height.jsx'
|
4
|
-
export { default as GaugeMinMax } from './_gauge_min_max.jsx'
|
5
|
-
export { default as GaugeSizing } from './_gauge_sizing.jsx'
|
6
|
-
export { default as GaugeTitle } from './_gauge_title.jsx'
|
7
|
-
export { default as GaugeUnits } from './_gauge_units.jsx'
|
8
|
-
export { default as GaugeLiveData } from './_gauge_live_data.jsx'
|
@@ -1,55 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Playbook
|
4
|
-
module PbGauge
|
5
|
-
class Gauge
|
6
|
-
include Playbook::Props
|
7
|
-
|
8
|
-
partial "pb_gauge/gauge"
|
9
|
-
|
10
|
-
prop :chart_data, type: Playbook::Props::Array,
|
11
|
-
default: [{ name: "Name", value: 0 }]
|
12
|
-
prop :style, type: Playbook::Props::Enum,
|
13
|
-
values: %w[solidgauge],
|
14
|
-
default: "solidgauge"
|
15
|
-
prop :title, type: Playbook::Props::String, default: ""
|
16
|
-
prop :prefix, type: Playbook::Props::String, default: ""
|
17
|
-
prop :suffix, type: Playbook::Props::String, default: ""
|
18
|
-
prop :height, type: Playbook::Props::String, default: nil
|
19
|
-
prop :tooltip_html, default: '<span style="font-weight: bold; color:{point.color};">●</span>
|
20
|
-
{point.name}: ' + '<b>{point.y}
|
21
|
-
</b>'
|
22
|
-
prop :full_circle, type: Playbook::Props::Boolean, default: false
|
23
|
-
prop :show_labels, type: Playbook::Props::Boolean, default: false
|
24
|
-
prop :min, type: Playbook::Props::Numeric, default: 0
|
25
|
-
prop :max, type: Playbook::Props::Numeric, default: 100
|
26
|
-
|
27
|
-
def chart_data_formatted
|
28
|
-
chart_data.map { |hash| hash[:y] = hash.delete :value }
|
29
|
-
chart_data
|
30
|
-
end
|
31
|
-
|
32
|
-
def chart_options
|
33
|
-
{
|
34
|
-
id: id,
|
35
|
-
chartData: chart_data_formatted,
|
36
|
-
circumference: full_circle ? [0, 360] : [-100, 100],
|
37
|
-
height: height,
|
38
|
-
min: min,
|
39
|
-
max: max,
|
40
|
-
title: title,
|
41
|
-
suffix: suffix,
|
42
|
-
prefix: prefix,
|
43
|
-
showLabels: show_labels,
|
44
|
-
style: style,
|
45
|
-
tooltipHtml: tooltip_html,
|
46
|
-
type: "gauge",
|
47
|
-
}.to_json.html_safe
|
48
|
-
end
|
49
|
-
|
50
|
-
def classname
|
51
|
-
generate_classname("pb_gauge_kit")
|
52
|
-
end
|
53
|
-
end
|
54
|
-
end
|
55
|
-
end
|