playbook_ui 11.6.0 → 11.7.0.pre.alpha.pre.guagechart1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (11) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.html.erb +32 -0
  3. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx +101 -0
  4. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.md +1 -0
  5. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.html.erb +2 -1
  6. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx +2 -0
  7. data/app/pb_kits/playbook/pb_gauge/docs/example.yml +2 -0
  8. data/app/pb_kits/playbook/pb_gauge/docs/index.js +1 -0
  9. data/app/pb_kits/playbook/plugins/pb_chart.js +5 -0
  10. data/lib/playbook/version.rb +2 -2
  11. metadata +7 -4
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 8aef1eda410390ce74bde2dd7060436279bd3b373d825d7ece15d7c8ae9f5c21
4
- data.tar.gz: 3b9437069af2f2bd018a6a8787146f519182f77591f6f929eb990181c30e0014
3
+ metadata.gz: b3c15ebbe9a1fbfc39421f5a48270f09e9992eb440be598fd6913e9e24ed9afd
4
+ data.tar.gz: 813c6e5d1511ffc6a343afb19670c1ade1466802b2ac1d5447537f771861f3fd
5
5
  SHA512:
6
- metadata.gz: 158c3aae011b0c696d20fe669fb2bcc22e85712e2db09a48dac48a3c8372b0a586423fcfe3172441f550a1d5a511032c2a97363456410625d5b859eb9db379f9
7
- data.tar.gz: 84aec8b09e55179e3ab03d30b95820bfc2209118cae8b9f0a465fa26cabaa957aa7177d813d0e46f57cd9aa42de601eb16e14f500983f66fffcea276f639da33
6
+ metadata.gz: 10c3cae3f5fb56ee7cf2f4c3f663902c9af9d9126aae1da0901b5a26fb8f1612dc404cf352d2f2ba4cfe09c3f91eab740c566581d99773cc5de38cc72c772d2a
7
+ data.tar.gz: bfad6320a42c988dfec679e35737390a16e09be1b5b07cf0aa7617e452c971b1f63539a60c62e592e08695c081787c05885cd1150c04e6c950099ca24749700f
data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.html.erb ADDED
@@ -0,0 +1,32 @@
1
+ <%= pb_rails("flex", props: {wrap: true, padding: "xl", gap: "sm"}) do %>
2
+ <%= pb_rails("flex/flex_item", props: {flex: 1, grow: true }) do %>
3
+ <%= pb_rails("card", props: {max_width: "xs", padding: "md", }) do %>
4
+ <%= pb_rails("title", props: {padding_bottom: "sm", size: 4, text: "Abandoned Calls" })%>
5
+ <%= pb_rails("flex", props: {align: "stretch"}) do %>
6
+ <%= pb_rails("flex", props: {margin_right: "sm", orientation: "column"}) do %>
7
+ <%= pb_rails("body", props: {color: "light", padding_bottom: "sm",text: "Total Abandoned"}) %>
8
+ <%= pb_rails("flex", props: {align: "baseline", padding_bottom: "sx"}) do %>
9
+ <%= pb_rails("title", props: {size: 1, text: "39"})%>
10
+ <%= pb_rails("title", props: {color: "light", size: 3, text: "calls"}) %>
11
+ <% end %>
12
+ <%= pb_rails("caption", props: {size: "xs", text: "of 390" }) %>
13
+ <%end %>
14
+ <%= pb_rails("section_separator", props: {align_self: "stretch", margin_right: "sm", orientation: "vertical" }) %>
15
+ <%= pb_rails("flex", props: {orientation: "column", wrap: true}) do %>
16
+ <%= pb_rails("body", props: {color: "light", text: "% Abandoned"}) %>
17
+ <%= pb_rails("flex", props: {wrap: true}) do %>
18
+ <%= pb_rails("flex/flex_item", props: {fixed_size: "150px", overflow: "hidden", shrink: true}) do %>
19
+ <%= pb_rails("gauge", props: {
20
+ chart_data: [{ name: "Name", value: 10 }],
21
+ disable_animation: true,
22
+ height: '100%',
23
+ id: "gauge-complex",
24
+ suffix: "%"
25
+ }) %>
26
+ <% end %>
27
+ <% end %>
28
+ <% end %>
29
+ <%end %>
30
+ <% end %>
31
+ <% end %>
32
+ <% end %>
data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx ADDED
@@ -0,0 +1,101 @@
1
+ import React from "react";
2
+ import {
3
+ Title,
4
+ Card,
5
+ Gauge,
6
+ Flex,
7
+ FlexItem,
8
+ SectionSeparator,
9
+ Body,
10
+ Caption,
11
+ } from "../..";
12
+
13
+ const data = [{ name: "Name", value: 10 }];
14
+
15
+ const GaugeComplex = (props) => (
16
+ <Flex
17
+ gap="sm"
18
+ padding="xl"
19
+ wrap
20
+ >
21
+ <FlexItem
22
+ flex={1}
23
+ grow
24
+ >
25
+ <Card
26
+ maxWidth="xs"
27
+ padding="md"
28
+ >
29
+ <Title
30
+ paddingBottom="sm"
31
+ size={4}
32
+ text="Abandoned Calls"
33
+ />
34
+ <Flex align="stretch">
35
+ <Flex
36
+ marginRight="sm"
37
+ orientation="column"
38
+ >
39
+ <Body
40
+ color="light"
41
+ paddingBottom="sm"
42
+ text="Total Abandoned"
43
+ />
44
+ <Flex
45
+ align="baseline"
46
+ paddingBottom="xs"
47
+ >
48
+ <Title
49
+ size={1}
50
+ text="39"
51
+ />
52
+ <Title
53
+ color="light"
54
+ size={3}
55
+ text="calls"
56
+ />
57
+ </Flex>
58
+ <Caption
59
+ size="xs"
60
+ text="of 390"
61
+ />
62
+ </Flex>
63
+
64
+ <SectionSeparator
65
+ alignSelf="stretch"
66
+ marginRight="sm"
67
+ orientation="vertical"
68
+ />
69
+
70
+ <Flex
71
+ orientation="column"
72
+ wrap
73
+ >
74
+ <Body
75
+ color="light"
76
+ text="% Abandoned"
77
+ />
78
+ <Flex wrap>
79
+ <FlexItem
80
+ fixedSize="150px"
81
+ overflow="hidden"
82
+ shrink
83
+ >
84
+ <Gauge
85
+ chartData={data}
86
+ disableAnimation
87
+ height="100%"
88
+ id="gauge-complex"
89
+ suffix="%"
90
+ {...props}
91
+ />
92
+ </FlexItem>
93
+ </Flex>
94
+ </Flex>
95
+ </Flex>
96
+ </Card>
97
+ </FlexItem>
98
+ </Flex>
99
+ );
100
+
101
+ export default GaugeComplex;
data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.md ADDED
@@ -0,0 +1 @@
1
+ We are able to wrap our Gauge kits within multiple other Flex and Card components.
data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.html.erb CHANGED
@@ -1,4 +1,4 @@
1
- <%= pb_rails("flex", props: {wrap: true}) do %>
1
+ <%= pb_rails("flex", props: {wrap: true, align: "center"}) do %>
2
2
  <%= pb_rails("flex/flex_item", props: {fixed_size: "400px", overflow: "hidden", shrink: true }) do %>
3
3
  <%= pb_rails("gauge", props: {
4
4
  id: "gauge-sizing4",
@@ -20,6 +20,7 @@
20
20
  <%= pb_rails("flex/flex_item", props: {fixed_size: "125px", overflow: "hidden", shrink: true }) do %>
21
21
  <%= pb_rails("gauge", props: {
22
22
  id: "gauge-sizing1",
23
+ height: '100%',
23
24
  chart_data: [{ name: "Point 4", value: 25 }],
24
25
  }) %>
25
26
  <% end %>
data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx CHANGED
@@ -4,6 +4,7 @@ import { Flex, FlexItem, Gauge } from '../../'
4
4
  const GaugeSizing = (props) => (
5
5
  <div>
6
6
  <Flex
7
+ align="center"
7
8
  wrap
8
9
  {...props}
9
10
  >
@@ -51,6 +52,7 @@ const GaugeSizing = (props) => (
51
52
  >
52
53
  <Gauge
53
54
  chartData={[ { name: 'Point 4', value: 25 } ]}
55
+ height="100%"
54
56
  id="gauge-sizing1"
55
57
  {...props}
56
58
  />
data/app/pb_kits/playbook/pb_gauge/docs/example.yml CHANGED
@@ -10,6 +10,7 @@ examples:
10
10
  - gauge_sizing: Sizing
11
11
  - gauge_height: Height
12
12
  - gauge_colors: Color Overrides
13
+ - gauge_complex: Complex
13
14
 
14
15
 
15
16
  react:
@@ -23,3 +24,4 @@ examples:
23
24
  - gauge_height: Height
24
25
  - gauge_live_data: Live Data
25
26
  - gauge_colors: Color Overrides
27
+ - gauge_complex: Complex
data/app/pb_kits/playbook/pb_gauge/docs/index.js CHANGED
@@ -8,3 +8,4 @@ export { default as GaugeTitle } from './_gauge_title.jsx'
8
8
  export { default as GaugeUnits } from './_gauge_units.jsx'
9
9
  export { default as GaugeLiveData } from './_gauge_live_data.jsx'
10
10
  export { default as GaugeColors } from './_gauge_colors.jsx'
11
+ export { default as GaugeComplex } from './_gauge_complex.jsx'
data/app/pb_kits/playbook/plugins/pb_chart.js CHANGED
@@ -82,6 +82,11 @@ class pbChart {
82
82
 
83
83
  Highcharts.chart(this.defaults.id, {
84
84
  chart: {
85
+ events: {
86
+ load() {
87
+ setTimeout(this.reflow.bind(this), 0)
88
+ },
89
+ },
85
90
  type: this.defaults.style,
86
91
  height: this.defaults.height,
87
92
  },
data/lib/playbook/version.rb CHANGED
@@ -1,6 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- PREVIOUS_VERSION = "11.5.0"
5
- VERSION = "11.6.0"
4
+ PREVIOUS_VERSION = "11.6.0"
5
+ VERSION = "11.7.0.pre.alpha-guagechart1"
6
6
  end
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.6.0
4
+ version: 11.7.0.pre.alpha.pre.guagechart1
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-09-23 00:00:00.000000000 Z
12
+ date: 2022-09-26 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -1001,6 +1001,9 @@ files:
1001
1001
  - app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.html.erb
1002
1002
  - app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx
1003
1003
  - app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.md
1004
+ - app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.html.erb
1005
+ - app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx
1006
+ - app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.md
1004
1007
  - app/pb_kits/playbook/pb_gauge/docs/_gauge_default.html.erb
1005
1008
  - app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx
1006
1009
  - app/pb_kits/playbook/pb_gauge/docs/_gauge_disable_animation.html.erb
@@ -2297,9 +2300,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
2297
2300
  version: '0'
2298
2301
  required_rubygems_version: !ruby/object:Gem::Requirement
2299
2302
  requirements:
2300
- - - ">="
2303
+ - - ">"
2301
2304
  - !ruby/object:Gem::Version
2302
- version: '0'
2305
+ version: 1.3.1
2303
2306
  requirements: []
2304
2307
  rubygems_version: 3.3.7
2305
2308
  signing_key: