playbook_ui 12.11.0 → 12.12.0.pre.alpha.PLAY697sandpacklayoutstyles413

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 53d5eae6427aba5ae9de4053e2069de8cf8a669c0f082c8a00066da74180be1d
-  data.tar.gz: 5d16ee2b64c60cbede34f42ad67e25a397f908c98f5a3fc1a3d3fa9edd1234a7
+  metadata.gz: eac850ebbc05e1ce91f38e6377564b32fa3ba241de3ff599b5e0084a39666223
+  data.tar.gz: 2ce42692684f6598b0c22d7e763ff9bd815044bd28ea806b659746d1f73ea098
 SHA512:
-  metadata.gz: 304866b64d95656b79835f2f7264f409b71a583ac6ac2e54870b6a19c3413815b162b39215eb849e92d9e045b4fc6f203b30ba065e82f4a60fd73befd7676244
-  data.tar.gz: 931c9aeeb4f9a0e317b3fe226ddcf3d1ec1b5ff52de4dcad9fb456e7a4c237f45f66b9b695adfdad63706f71519c40b14b4362fea2e83197f6c0737788375ee9
+  metadata.gz: 268d73b140d2e8aeb3086a4588b2a42c3f3c0dd26d7c4112b37583bcd85e9657fe59e6854042e2a8c9ca02bb139e4aef5aec926430d9da6f2b98c2c1b92d2d2e
+  data.tar.gz: f58ed28b37d12a8e3555f44612a907aabb5e60b81cba57c78c017bb86328c6d437d14999849106847bc5967f59f51daac1c3e5bca921f7e7f7958dffc1ee843a

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx

@@ -32,6 +32,7 @@ type CircleChartProps = {
   startAngle?: number;
   style?: string;
   title?: string;
+  tooltipHtml: string;
   useHtml?: boolean;
   zMin?: number;
   layout?: "horizontal" | "vertical" | "proximate";
@@ -78,6 +79,7 @@ const CircleChart = ({
   startAngle = null,
   style = "pie",
   title,
+  tooltipHtml,
   useHtml = false,
   zMin = null,
   layout = "horizontal",
@@ -100,9 +102,7 @@ const CircleChart = ({
   Highcharts.setOptions({
     tooltip: {
       headerFormat: null,
-      pointFormat:
-        '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
-        "<b>{point.y}</b>",
+      pointFormat: tooltipHtml ? tooltipHtml : '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' + "<b>{point.y}</b>",
       useHTML: useHtml,
     },
   });

data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb

@@ -24,6 +24,9 @@ module Playbook
       prop :use_html, type: Playbook::Props::Boolean, default: false
       prop :legend, type: Playbook::Props::Boolean, default: false
       prop :title, default: ""
+      prop :tooltip_html, default: '<span style="font-weight: bold; color:{point.color};">&#9679; </span>
+                                      {point.name}: ' + '<b>{point.y}
+                                    </b>'
       prop :height
       prop :rounded, type: Playbook::Props::Boolean, default: false
       prop :colors, type: Playbook::Props::Array,

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb

@@ -0,0 +1,20 @@
+<% data = [{
+    name: 'Waiting for Calls',
+    value: 41,
+  },
+  {
+    name: 'On Call',
+    value: 49,
+  },
+  {
+    name: 'After call',
+    value: 10,
+  }
+] %>
+
+
+<%= pb_rails("circle_chart", props: {
+    chart_data: data,
+    tooltip_html: "<p>Custom tooltip for {point.name} <br/>with value: {point.y}</p>",
+    id: "default-test"
+}) %>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import CircleChart from '../_circle_chart'
+
+const data = [
+  {
+    name: 'Waiting for Calls',
+    value: 41,
+  },
+  {
+    name: 'On Call',
+    value: 49,
+  },
+  {
+    name: 'After call',
+    value: 10,
+  },
+]
+
+const CircleChartCustomTooltip = (props) => (
+  <div>
+    <CircleChart
+        chartData={data}
+        id="circle-chart-default"
+        tooltipHtml= '<p>Custom tooltip for {point.name} <br/>with value: {point.y}</p>'
+        {...props}
+    />
+  </div>
+)
+
+export default CircleChartCustomTooltip

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md

@@ -0,0 +1,3 @@
+A custom tooltip format can be specified. The desired format can be passed as a `string` of custom HTML to the `tooltipHtml` prop.
+
+`{point.name}` and `{point.y}` are useful values that can be referenced for each point in the graph.

data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml

@@ -9,7 +9,8 @@ examples:
   - circle_chart_with_legend_kit: Legend
   - circle_chart_legend_position: Legend Position
   - circle_chart_with_title: Title
-  - circle_chart_inner_sizes: Inner Circle Size Options  
+  - circle_chart_inner_sizes: Inner Circle Size Options
+  - circle_chart_custom_tooltip: Tooltip Customization
 
   react:
   - circle_chart_default: Default Style
@@ -22,5 +23,6 @@ examples:
   - circle_chart_legend_position: Legend Position
   - circle_chart_with_title: Title
   - circle_chart_inner_sizes: Inner Circle Size Options  
+  - circle_chart_custom_tooltip: Tooltip Customization
 
 

data/app/pb_kits/playbook/pb_circle_chart/docs/index.js

@@ -8,3 +8,4 @@ export { default as CircleChartWithLegendKit } from './_circle_chart_with_legend
 export { default as CircleChartLegendPosition } from './_circle_chart_legend_position.jsx'
 export { default as CircleChartWithTitle } from './_circle_chart_with_title.jsx'
 export { default as CircleChartInnerSizes } from './_circle_chart_inner_sizes.jsx'
+export { default as CircleChartCustomTooltip } from "./_circle_chart_custom_tooltip.jsx"

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "12.10.0"
-  VERSION = "12.11.0"
+  PREVIOUS_VERSION = "12.12.0"
+  VERSION = "12.12.0.pre.alpha.PLAY697sandpacklayoutstyles413"
 end

metadata

@@ -1,15 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.11.0
+  version: 12.12.0.pre.alpha.PLAY697sandpacklayoutstyles413
 platform: ruby
 authors:
 - Power UX
 - Power Devs
-autorequire:
+autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-03-28 00:00:00.000000000 Z
+date: 2023-04-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -570,6 +570,9 @@ files:
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.md
+- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb
+- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx
+- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.html.erb
@@ -2458,7 +2461,7 @@ homepage: http://playbook.powerapp.cloud
 licenses:
 - ISC
 metadata: {}
-post_install_message:
+post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
@@ -2469,12 +2472,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.3.7
-signing_key:
+signing_key: 
 specification_version: 4
 summary: Playbook Design System
 test_files: []