playbook_ui 13.12.0.pre.alpha.play1051testhighcharts1581 → 13.12.0.pre.alpha.play10281596

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

@@ -1,45 +1,47 @@
-/* eslint-disable */
 import React, { useEffect, useState } from "react";
 import classnames from "classnames";
 import HighchartsReact from "highcharts-react-official";
 import highchartsMore from "highcharts/highcharts-more";
 
+import Highcharts from "highcharts";
+
 import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 import { globalProps } from "../utilities/globalProps";
-import { buildAriaProps, buildDataProps } from "../utilities/props";
+import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
 
 type CircleChartProps = {
-  align?: "left" | "right" | "center",
-  aria: { [key: string]: string },
-  chartData?: [],
-  children?: Node,
-  className?: string,
-  colors?: string[],
-  dark?: Boolean,
-  data?: Object,
-  dataLabelHtml?: string,
-  dataLabels?: boolean,
-  height?: string,
-  id?: string,
-  innerSize?: "sm" | "md" | "lg" | "none",
-  legend?: boolean,
-  maxPointSize?: number,
-  minPointSize?: number,
-  rounded?: boolean,
-  startAngle?: number,
-  style?: string,
-  title?: string,
-  tooltipHtml: string,
-  useHtml?: boolean,
-  zMin?: number,
-  layout?: "horizontal" | "vertical" | "proximate",
-  verticalAlign?: "top" | "middle" | "bottom",
-  x?: number,
-  y?: number,
-  borderColor?: string,
-  borderWidth?: number,
+  align?: "left" | "right" | "center";
+  aria: { [key: string]: string };
+  chartData?: [];
+  children?: Node;
+  className?: string;
+  colors?: string[];
+  dark?: Boolean;
+  data?: Object;
+  dataLabelHtml?: string;
+  dataLabels?: boolean;
+  height?: string;
+  htmlOptions?: { [key: string]: string | number | boolean | Function };
+  id?: string;
+  innerSize?: "sm" | "md" | "lg" | "none";
+  legend?: boolean;
+  maxPointSize?: number;
+  minPointSize?: number;
+  rounded?: boolean;
+  startAngle?: number;
+  style?: string;
+  title?: string;
+  tooltipHtml: string;
+  useHtml?: boolean;
+  zMin?: number;
+  layout?: "horizontal" | "vertical" | "proximate";
+  verticalAlign?: "top" | "middle" | "bottom";
+  x?: number;
+  y?: number;
+  borderColor?: string;
+  borderWidth?: number;
 };
 
 // Adjust Circle Chart Block Kit Dimensions to Match the Chart for Centering
@@ -70,6 +72,7 @@ const CircleChart = ({
   dataLabelHtml = "<div>{point.name}</div>",
   dataLabels = false,
   height,
+  htmlOptions = {},
   id,
   innerSize = "md",
   legend = false,
@@ -88,12 +91,31 @@ const CircleChart = ({
   ...props
 }: CircleChartProps) => {
   const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions);
+  highchartsMore(Highcharts);
+
+  const setupTheme = () => {
+    dark
+      ? Highcharts.setOptions(highchartsDarkTheme)
+      : Highcharts.setOptions(highchartsTheme);
+  };
+  setupTheme();
+
+  Highcharts.setOptions({
+    tooltip: {
+      headerFormat: null,
+      pointFormat: tooltipHtml ? tooltipHtml : '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' + "<b>{point.y}</b>",
+      useHTML: useHtml,
+    },
+  });
+
   const innerSizes = { sm: "35%", md: "50%", lg: "85%", none: "0%" };
-  const innerSizeFormat = (size: "sm" | "md" | "lg" | "none") => innerSizes[size];
+  const innerSizeFormat = (size: "sm" | "md" | "lg" | "none") =>
+    innerSizes[size];
+
 
   const [options, setOptions] = useState({});
-  const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
 
   useEffect(() => {
     const formattedChartData = chartData.map((obj: any) => {
@@ -125,7 +147,7 @@ const CircleChart = ({
       plotOptions: {
         pie: {
           colors:
-            colors.length > 0 ? mapColors(colors) : highchartsTheme(window.Highcharts).colors,
+            colors.length > 0 ? mapColors(colors) : highchartsTheme.colors,
           dataLabels: {
             enabled: dataLabels,
             connectorShape: "straight",
@@ -150,58 +172,36 @@ const CircleChart = ({
       credits: false,
     };
     setOptions({ ...staticOptions });
-
-    const interval = setInterval(() => {
-      if (window.Highcharts) {
-        clearInterval(interval)
-        dark
-          ? window.Highcharts.setOptions(highchartsDarkTheme(window.Highcharts))
-          : window.Highcharts.setOptions(highchartsTheme(window.Highcharts))
-        
-        highchartsMore(window.Highcharts);
-
-        window.Highcharts.setOptions({
-          tooltip: {
-            headerFormat: null,
-            pointFormat: tooltipHtml ? tooltipHtml : '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' + "<b>{point.y}</b>",
-            useHTML: useHtml,
-          },
-        });
-
-        setIsHighchartsLoaded(true)
-      }
-    }, 0)
   }, [chartData]);
 
+
   return (
     <>
       {children ? (
         <div id={`wrapper-circle-chart-${id}`}>
-          {
-            isHighchartsLoaded &&
-            <HighchartsReact
-              containerProps={{
-                className: classnames("pb_circle_chart", globalProps(props)),
-                id: id,
-                ...ariaProps,
-                ...dataProps,
-              }}
-              highcharts={window.Highcharts}
-              options={options}
-            />
-          }
+          <HighchartsReact
+            containerProps={{
+              className: classnames("pb_circle_chart", globalProps(props)),
+              id: id,
+              ...ariaProps,
+              ...dataProps,
+              ...htmlProps,
+            }}
+            highcharts={Highcharts}
+            options={options}
+          />
           <div className="pb-circle-chart-block">{children}</div>
         </div>
       ) : (
-        isHighchartsLoaded &&
         <HighchartsReact
           containerProps={{
             className: classnames("pb_circle_chart", globalProps(props)),
             id: id,
             ...ariaProps,
             ...dataProps,
+            ...htmlProps,
           }}
-          highcharts={window.Highcharts}
+          highcharts={Highcharts}
           options={options}
         />
       )}

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx

@@ -1,8 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-
-import { noop } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps, noop } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 import Button from '../pb_button/_button'
@@ -15,6 +13,7 @@ type CircleIconButtonProps = {
   data?: { [key: string]: string },
   disabled?: boolean,
   icon: string,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   link?: string,
   onClick?: React.MouseEventHandler<HTMLElement>,
@@ -30,6 +29,7 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
     dark,
     data = {},
     disabled,
+    htmlOptions = {},
     icon,
     id,
     onClick = noop,
@@ -41,6 +41,7 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_circle_icon_button_kit'),
     globalProps(props),
@@ -51,6 +52,7 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames'
 import  useCollapsible from './useCollapsible'
 
 import { globalProps } from '../utilities/globalProps'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 
 import CollapsibleContent from './child_kits/CollapsibleContent'
 import CollapsibleMain from './child_kits/CollapsibleMain'
@@ -22,6 +22,7 @@ type CollapsibleProps = {
   iconSize?: IconSizes,
   onIconClick?: ()=> void,
   onClick?: ()=> void,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
 }
 
@@ -33,6 +34,7 @@ const Collapsible = ({
   children = [],
   collapsed = true,
   data = {},
+  htmlOptions = {},
   icon,
   iconColor = 'default',
   iconSize,
@@ -60,6 +62,7 @@ const Collapsible = ({
   const { children: contentChildren, ...contentProps } = Content.props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_collapsible_kit'),
     globalProps(props),
@@ -70,6 +73,7 @@ const Collapsible = ({
       <div
           {...ariaProps}
           {...dataProps}
+          {...htmlProps}
           className={classes}
           id={id}
       >

data/app/pb_kits/playbook/pb_contact/_contact.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 import Body from '../pb_body/_body'
@@ -51,6 +51,7 @@ type ContactProps = {
   contactType?: string,
   contactValue: string,
   data?: object,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
 }
 
@@ -62,9 +63,11 @@ const Contact = (props: ContactProps) => {
     contactType,
     contactValue,
     data = {},
+    htmlOptions = {},
     id } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_contact_kit'),
     globalProps(props),
@@ -74,6 +77,7 @@ const Contact = (props: ContactProps) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_currency/_currency.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { globalProps } from '../utilities/globalProps'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
@@ -18,6 +18,7 @@ type CurrencyProps = {
   data?: {[key:string]:string},
   decimals?: 'default' | 'matching',
   emphasized?: boolean,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   label?: string,
   size?: 'sm' | 'md' | 'lg',
@@ -42,6 +43,7 @@ const Currency = (props: CurrencyProps) => {
     data = {},
     decimals = 'default',
     emphasized = true,
+    htmlOptions = {},
     id,
     unit,
     className,
@@ -65,6 +67,7 @@ const Currency = (props: CurrencyProps) => {
   const [whole, decimal = '00'] = amount.split('.')
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_currency_kit', align, size),
     globalProps(props),
@@ -96,6 +99,7 @@ const Currency = (props: CurrencyProps) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >