playbook_ui 12.11.0 → 12.12.0.pre.alpha.PLAY697sandpacklayoutstyles413

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 53d5eae6427aba5ae9de4053e2069de8cf8a669c0f082c8a00066da74180be1d
4
- data.tar.gz: 5d16ee2b64c60cbede34f42ad67e25a397f908c98f5a3fc1a3d3fa9edd1234a7
3
+ metadata.gz: eac850ebbc05e1ce91f38e6377564b32fa3ba241de3ff599b5e0084a39666223
4
+ data.tar.gz: 2ce42692684f6598b0c22d7e763ff9bd815044bd28ea806b659746d1f73ea098
5
5
  SHA512:
6
- metadata.gz: 304866b64d95656b79835f2f7264f409b71a583ac6ac2e54870b6a19c3413815b162b39215eb849e92d9e045b4fc6f203b30ba065e82f4a60fd73befd7676244
7
- data.tar.gz: 931c9aeeb4f9a0e317b3fe226ddcf3d1ec1b5ff52de4dcad9fb456e7a4c237f45f66b9b695adfdad63706f71519c40b14b4362fea2e83197f6c0737788375ee9
6
+ metadata.gz: 268d73b140d2e8aeb3086a4588b2a42c3f3c0dd26d7c4112b37583bcd85e9657fe59e6854042e2a8c9ca02bb139e4aef5aec926430d9da6f2b98c2c1b92d2d2e
7
+ data.tar.gz: f58ed28b37d12a8e3555f44612a907aabb5e60b81cba57c78c017bb86328c6d437d14999849106847bc5967f59f51daac1c3e5bca921f7e7f7958dffc1ee843a
@@ -32,6 +32,7 @@ type CircleChartProps = {
32
32
  startAngle?: number;
33
33
  style?: string;
34
34
  title?: string;
35
+ tooltipHtml: string;
35
36
  useHtml?: boolean;
36
37
  zMin?: number;
37
38
  layout?: "horizontal" | "vertical" | "proximate";
@@ -78,6 +79,7 @@ const CircleChart = ({
78
79
  startAngle = null,
79
80
  style = "pie",
80
81
  title,
82
+ tooltipHtml,
81
83
  useHtml = false,
82
84
  zMin = null,
83
85
  layout = "horizontal",
@@ -100,9 +102,7 @@ const CircleChart = ({
100
102
  Highcharts.setOptions({
101
103
  tooltip: {
102
104
  headerFormat: null,
103
- pointFormat:
104
- '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
105
- "<b>{point.y}</b>",
105
+ pointFormat: tooltipHtml ? tooltipHtml : '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' + "<b>{point.y}</b>",
106
106
  useHTML: useHtml,
107
107
  },
108
108
  });
@@ -24,6 +24,9 @@ module Playbook
24
24
  prop :use_html, type: Playbook::Props::Boolean, default: false
25
25
  prop :legend, type: Playbook::Props::Boolean, default: false
26
26
  prop :title, default: ""
27
+ prop :tooltip_html, default: '<span style="font-weight: bold; color:{point.color};">&#9679; </span>
28
+ {point.name}: ' + '<b>{point.y}
29
+ </b>'
27
30
  prop :height
28
31
  prop :rounded, type: Playbook::Props::Boolean, default: false
29
32
  prop :colors, type: Playbook::Props::Array,
@@ -0,0 +1,20 @@
1
+ <% data = [{
2
+ name: 'Waiting for Calls',
3
+ value: 41,
4
+ },
5
+ {
6
+ name: 'On Call',
7
+ value: 49,
8
+ },
9
+ {
10
+ name: 'After call',
11
+ value: 10,
12
+ }
13
+ ] %>
14
+
15
+
16
+ <%= pb_rails("circle_chart", props: {
17
+ chart_data: data,
18
+ tooltip_html: "<p>Custom tooltip for {point.name} <br/>with value: {point.y}</p>",
19
+ id: "default-test"
20
+ }) %>
@@ -0,0 +1,31 @@
1
+ import React from 'react'
2
+
3
+ import CircleChart from '../_circle_chart'
4
+
5
+ const data = [
6
+ {
7
+ name: 'Waiting for Calls',
8
+ value: 41,
9
+ },
10
+ {
11
+ name: 'On Call',
12
+ value: 49,
13
+ },
14
+ {
15
+ name: 'After call',
16
+ value: 10,
17
+ },
18
+ ]
19
+
20
+ const CircleChartCustomTooltip = (props) => (
21
+ <div>
22
+ <CircleChart
23
+ chartData={data}
24
+ id="circle-chart-default"
25
+ tooltipHtml= '<p>Custom tooltip for {point.name} <br/>with value: {point.y}</p>'
26
+ {...props}
27
+ />
28
+ </div>
29
+ )
30
+
31
+ export default CircleChartCustomTooltip
@@ -0,0 +1,3 @@
1
+ A custom tooltip format can be specified. The desired format can be passed as a `string` of custom HTML to the `tooltipHtml` prop.
2
+
3
+ `{point.name}` and `{point.y}` are useful values that can be referenced for each point in the graph.
@@ -9,7 +9,8 @@ examples:
9
9
  - circle_chart_with_legend_kit: Legend
10
10
  - circle_chart_legend_position: Legend Position
11
11
  - circle_chart_with_title: Title
12
- - circle_chart_inner_sizes: Inner Circle Size Options
12
+ - circle_chart_inner_sizes: Inner Circle Size Options
13
+ - circle_chart_custom_tooltip: Tooltip Customization
13
14
 
14
15
  react:
15
16
  - circle_chart_default: Default Style
@@ -22,5 +23,6 @@ examples:
22
23
  - circle_chart_legend_position: Legend Position
23
24
  - circle_chart_with_title: Title
24
25
  - circle_chart_inner_sizes: Inner Circle Size Options
26
+ - circle_chart_custom_tooltip: Tooltip Customization
25
27
 
26
28
 
@@ -8,3 +8,4 @@ export { default as CircleChartWithLegendKit } from './_circle_chart_with_legend
8
8
  export { default as CircleChartLegendPosition } from './_circle_chart_legend_position.jsx'
9
9
  export { default as CircleChartWithTitle } from './_circle_chart_with_title.jsx'
10
10
  export { default as CircleChartInnerSizes } from './_circle_chart_inner_sizes.jsx'
11
+ export { default as CircleChartCustomTooltip } from "./_circle_chart_custom_tooltip.jsx"
@@ -1,6 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- PREVIOUS_VERSION = "12.10.0"
5
- VERSION = "12.11.0"
4
+ PREVIOUS_VERSION = "12.12.0"
5
+ VERSION = "12.12.0.pre.alpha.PLAY697sandpacklayoutstyles413"
6
6
  end
metadata CHANGED
@@ -1,15 +1,15 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 12.11.0
4
+ version: 12.12.0.pre.alpha.PLAY697sandpacklayoutstyles413
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
8
8
  - Power Devs
9
- autorequire:
9
+ autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2023-03-28 00:00:00.000000000 Z
12
+ date: 2023-04-04 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -570,6 +570,9 @@ files:
570
570
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb
571
571
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx
572
572
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.md
573
+ - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb
574
+ - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx
575
+ - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md
573
576
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb
574
577
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx
575
578
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.html.erb
@@ -2458,7 +2461,7 @@ homepage: http://playbook.powerapp.cloud
2458
2461
  licenses:
2459
2462
  - ISC
2460
2463
  metadata: {}
2461
- post_install_message:
2464
+ post_install_message:
2462
2465
  rdoc_options: []
2463
2466
  require_paths:
2464
2467
  - lib
@@ -2469,12 +2472,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
2469
2472
  version: '0'
2470
2473
  required_rubygems_version: !ruby/object:Gem::Requirement
2471
2474
  requirements:
2472
- - - ">="
2475
+ - - ">"
2473
2476
  - !ruby/object:Gem::Version
2474
- version: '0'
2477
+ version: 1.3.1
2475
2478
  requirements: []
2476
2479
  rubygems_version: 3.3.7
2477
- signing_key:
2480
+ signing_key:
2478
2481
  specification_version: 4
2479
2482
  summary: Playbook Design System
2480
2483
  test_files: []