playbook_ui 13.12.0.pre.alpha.PLAY880cardkithighlightzindex1655 → 13.12.0.pre.alpha.PLAY1051removinghighchartsdependency1551

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2df1a239bdc2543fe0c643adbd48ecf1083b5627a3aaff5018f4bc4b5c6f3501
-  data.tar.gz: '095f3ef35c2083b78218da353d974108a2ca70127e12d760f07eef70e31b423a'
+  metadata.gz: 4a59ab1213c1c17a6ab6bfa775d7ac7edf06972be95d950e479f16b8cafc4216
+  data.tar.gz: cb50f83ac242358db6b9e951ba8d7fa7bfee32ff78c02eef0b0829ed5e97a0d7
 SHA512:
-  metadata.gz: 5643ac4dd6cd99c4164f7b0125a1d37cfeb3b4b7b7960cc7a27572ddab5847f4b9f429f4b77d8d6ba04a3303a66dc101f8f57d7354da12be7f3ccaf227d221fd
-  data.tar.gz: b7f61a87d132dc21a018945ecd1ffa5aca675ff883ed07cc5a829ec488aa5a1e241bfdacddf81fdd74a8eb25bc91d86a6ca1aae3e5940a8005954af316823de4
+  metadata.gz: 53af5b80de72a1f40570fd93a05f1a5282d9c79cfa04b007ecfc7e04ee31bfaa27d2202467edaf02ca50ea05173faccc0fb5b2207e16cf936957eaf8bd4b3338
+  data.tar.gz: 287e8051ab76bba6451b8c76ba3df6d95d1d7cfd4f4de33ae82b5745345294903e40fd74510c1b740b40395d6193f5c2c24c285980b116873a381917fdd146f7

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx

@@ -3,7 +3,6 @@ import { globalProps } from "../utilities/globalProps";
 import { buildAriaProps, buildDataProps } from "../utilities/props";
 
 import HighchartsReact from "highcharts-react-official";
-import Highcharts from "highcharts";
 import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
@@ -11,32 +10,31 @@ import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 import classnames from "classnames";
 
 type BarGraphProps = {
-  align?: "left" | "right" | "center";
-  axisTitle: string;
-  dark?: boolean;
-  xAxisCategories: [];
-  yAxisMin: number;
-  yAxisMax: number;
-  chartData: { name: string; data: number[] }[];
-  className?: string;
-  id: any;
-  pointStart: number | any;
-  subTitle?: string;
-  title: string;
-  type?: string;
-  legend?: boolean;
-  toggleLegendClick?: boolean;
-  height?: string;
-  colors: string[];
-  layout?: "horizontal" | "vertical" | "proximate";
-  verticalAlign?: "top" | "middle" | "bottom";
-  x?: number;
-  y?: number;
-  aria?: { [key: string]: string };
-  data?: { [key: string]: string };
+  align?: "left" | "right" | "center",
+  axisTitle: string,
+  dark?: boolean,
+  xAxisCategories: [],
+  yAxisMin: number,
+  yAxisMax: number,
+  chartData: { name: string, data: number[] }[],
+  className?: string,
+  id: any,
+  pointStart: number | any,
+  subTitle?: string,
+  title: string,
+  type?: string,
+  legend?: boolean,
+  toggleLegendClick?: boolean,
+  height?: string,
+  colors: string[],
+  layout?: "horizontal" | "vertical" | "proximate",
+  verticalAlign?: "top" | "middle" | "bottom",
+  x?: number,
+  y?: number,
+  aria?: { [key: string]: string },
+  data?: { [key: string]: string },
 };
 
-
 const BarGraph = ({
   aria = {},
   data = {},
@@ -65,12 +63,6 @@ const BarGraph = ({
 }: BarGraphProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
-  const setupTheme = () => {
-    dark
-      ? Highcharts.setOptions(highchartsDarkTheme)
-      : Highcharts.setOptions(highchartsTheme);
-  };
-  setupTheme();
 
   const staticOptions = {
     title: {
@@ -123,12 +115,24 @@ const BarGraph = ({
   }
 
   const [options, setOptions] = useState({});
+  const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false)
 
   useEffect(() => {
     setOptions({ ...staticOptions });
+
+    const interval = setInterval(() => {
+      if (window.Highcharts) {
+        clearInterval(interval)
+        dark
+          ? window.Highcharts.setOptions(highchartsDarkTheme)
+          : window.Highcharts.setOptions(highchartsTheme)
+        setIsHighchartsLoaded(true)
+      }
+    }, 0)
   }, [chartData]);
 
   return (
+    isHighchartsLoaded &&
     <HighchartsReact
         containerProps={{
           className: classnames(globalProps(props), className),
@@ -136,7 +140,7 @@ const BarGraph = ({
           ...ariaProps,
           ...dataProps,
         }}
-        highcharts={Highcharts}
+        highcharts={window.Highcharts}
         options={options}
     />
   );

data/app/pb_kits/playbook/pb_card/_card_mixin.scss

@@ -80,6 +80,7 @@ $pb_card_header_colors: map-merge(map-merge($product_colors, $additional_colors)
   width: $width;
   height: $height;
   background: $background;
+  z-index: 10;
 }
 
 @mixin pb_card_header_color($header_color) {

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

@@ -3,8 +3,6 @@ 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";
@@ -12,35 +10,35 @@ import { globalProps } from "../utilities/globalProps";
 import { buildAriaProps, buildDataProps } 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,
+  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
@@ -90,29 +88,11 @@ const CircleChart = ({
 }: CircleChartProps) => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
-  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) => {
@@ -169,26 +149,50 @@ const CircleChart = ({
       credits: false,
     };
     setOptions({ ...staticOptions });
-  }, [chartData]);
 
+    const interval = setInterval(() => {
+      if (window.Highcharts) {
+        clearInterval(interval)
+        dark
+          ? window.Highcharts.setOptions(highchartsDarkTheme)
+          : window.Highcharts.setOptions(highchartsTheme)
+        
+        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}`}>
-          <HighchartsReact
-            containerProps={{
-              className: classnames("pb_circle_chart", globalProps(props)),
-              id: id,
-              ...ariaProps,
-              ...dataProps,
-            }}
-            highcharts={Highcharts}
-            options={options}
-          />
+          {
+            isHighchartsLoaded &&
+            <HighchartsReact
+              containerProps={{
+                className: classnames("pb_circle_chart", globalProps(props)),
+                id: id,
+                ...ariaProps,
+                ...dataProps,
+              }}
+              highcharts={window.Highcharts}
+              options={options}
+            />
+          }
           <div className="pb-circle-chart-block">{children}</div>
         </div>
       ) : (
+        isHighchartsLoaded &&
         <HighchartsReact
           containerProps={{
             className: classnames("pb_circle_chart", globalProps(props)),
@@ -196,7 +200,7 @@ const CircleChart = ({
             ...ariaProps,
             ...dataProps,
           }}
-          highcharts={Highcharts}
+          highcharts={window.Highcharts}
           options={options}
         />
       )}

data/app/pb_kits/playbook/pb_gauge/_gauge.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from "react";
 import classnames from "classnames";
 import HighchartsReact from "highcharts-react-official";
-import Highcharts from "highcharts";
 import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
@@ -14,26 +13,26 @@ import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
 
 type GaugeProps = {
-  aria: { [key: string]: string };
-  className?: string;
-  chartData?: { name: string; value: number[] | number }[];
-  dark?: Boolean;
-  data?: { [key: string]: string };
-  disableAnimation?: boolean;
-  fullCircle?: boolean;
-  height?: string;
-  id?: string;
-  max?: number;
-  min?: number;
-  prefix?: string;
-  showLabels?: boolean;
-  style?: string;
-  suffix?: string;
-  title?: string;
-  tooltipHtml?: string;
-  colors: string[];
-  minorTickInterval: any;
-  circumference: number[];
+  aria: { [key: string]: string },
+  className?: string,
+  chartData?: { name: string, value: number[] | number }[],
+  dark?: Boolean,
+  data?: { [key: string]: string },
+  disableAnimation?: boolean,
+  fullCircle?: boolean,
+  height?: string,
+  id?: string,
+  max?: number,
+  min?: number,
+  prefix?: string,
+  showLabels?: boolean,
+  style?: string,
+  suffix?: string,
+  title?: string,
+  tooltipHtml?: string,
+  colors: string[],
+  minorTickInterval: any,
+  circumference: number[],
 };
 
 const Gauge = ({
@@ -62,28 +61,13 @@ const Gauge = ({
 }: GaugeProps) => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
-  highchartsMore(Highcharts);
-  solidGauge(Highcharts);
-  const setupTheme = () => {
-    dark
-      ? Highcharts.setOptions(highchartsDarkTheme)
-      : Highcharts.setOptions(highchartsTheme);
-  };
-  setupTheme();
-
-  //set tooltip directly to prevent being overriden by Highcharts defaults
-  Highcharts.setOptions({
-    tooltip: {
-      pointFormat: tooltipHtml,
-      followPointer: true,
-    },
-  });
 
   const css = buildCss({
     pb_gauge_kit: true,
   });
 
   const [options, setOptions] = useState({});
+  const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
 
   useEffect(() => {
     const formattedChartData = chartData.map((obj: any) => {
@@ -174,18 +158,45 @@ const Gauge = ({
 
     setOptions({ ...staticOptions });
 
-    if (document.querySelector(".prefix")) {
-      document.querySelectorAll(".prefix").forEach((prefix) => {
-        prefix.setAttribute("y", "28");
-      });
-      document
-        .querySelectorAll(".fix")
-        .forEach((fix) => fix.setAttribute("y", "38"));
-    }
+    const interval = setInterval(() => {
+      if (window.Highcharts) {
+        clearInterval(interval)
+        
+        const gaugeInterval = setInterval(() => {
+          if (document.querySelector(".prefix")) {
+            clearInterval(gaugeInterval)
+            document.querySelectorAll(".prefix").forEach((prefix) => {
+              prefix.setAttribute("y", "28");
+            });
+            document
+              .querySelectorAll(".fix")
+              .forEach((fix) => fix.setAttribute("y", "38"));
+          }
+        }, 0)
+
+        dark
+          ? window.Highcharts.setOptions(highchartsDarkTheme)
+          : window.Highcharts.setOptions(highchartsTheme)
+        
+        highchartsMore(window.Highcharts);
+        solidGauge(window.Highcharts);
+      
+        //set tooltip directly to prevent being overriden by window.Highcharts defaults
+        window.Highcharts.setOptions({
+          tooltip: {
+            pointFormat: tooltipHtml,
+            followPointer: true,
+          },
+        });
+
+        setIsHighchartsLoaded(true)
+      }
+    }, 0)
 
   }, [chartData]);
 
   return (
+    isHighchartsLoaded &&
     <HighchartsReact
       containerProps={{
         className: classnames(css, globalProps(props)),
@@ -193,7 +204,7 @@ const Gauge = ({
         ...ariaProps,
         ...dataProps,
       }}
-      highcharts={Highcharts}
+      highcharts={window.Highcharts}
       options={options}
     />
   );

data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx

@@ -4,39 +4,38 @@ import { globalProps } from "../utilities/globalProps";
 import { buildAriaProps, buildDataProps } from "../utilities/props";
 
 import HighchartsReact from "highcharts-react-official";
-import Highcharts from "highcharts";
 import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 
 type LineGraphProps = {
-  align?: "left" | "right" | "center";
-  axisTitle?: string;
-  dark?: Boolean;
-  xAxisCategories: [];
-  yAxisMin: number;
-  yAxisMax: number;
-  className?: string;
+  align?: "left" | "right" | "center",
+  axisTitle?: string,
+  dark?: Boolean,
+  xAxisCategories: [],
+  yAxisMin: number,
+  yAxisMax: number,
+  className?: string,
   chartData: {
-    name: string;
-    data: number[];
-  }[];
-  gradient?: boolean;
-  id: string;
-  pointStart: number;
-  subTitle?: string;
-  title: string;
-  type?: string;
-  legend?: boolean;
-  toggleLegendClick?: boolean;
-  height?: string;
-  colors: string[];
-  layout?: "horizontal" | "vertical" | "proximate";
-  verticalAlign?: "top" | "middle" | "bottom";
-  x?: number;
-  y?: number;
-  aria?: { [key: string]: string };
-  data?: { [key: string]: string };
+    name: string,
+    data: number[],
+  }[],
+  gradient?: boolean,
+  id: string,
+  pointStart: number,
+  subTitle?: string,
+  title: string,
+  type?: string,
+  legend?: boolean,
+  toggleLegendClick?: boolean,
+  height?: string,
+  colors: string[],
+  layout?: "horizontal" | "vertical" | "proximate",
+  verticalAlign?: "top" | "middle" | "bottom",
+  x?: number,
+  y?: number,
+  aria?: { [key: string]: string },
+  data?: { [key: string]: string },
 };
 
 const LineGraph = ({
@@ -68,12 +67,6 @@ const LineGraph = ({
 }: LineGraphProps) => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
-  const setupTheme = () => {
-    dark
-      ? Highcharts.setOptions(highchartsDarkTheme)
-      : Highcharts.setOptions(highchartsTheme);
-  };
-  setupTheme();
 
   const staticOptions = {
     title: {
@@ -126,12 +119,24 @@ const LineGraph = ({
   }
 
   const [options, setOptions] = useState({});
+  const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
 
   useEffect(() => {
     setOptions({ ...staticOptions });
+
+    const interval = setInterval(() => {
+      if (window.Highcharts) {
+        clearInterval(interval)
+        dark
+          ? window.Highcharts.setOptions(highchartsDarkTheme)
+          : window.Highcharts.setOptions(highchartsTheme)
+        setIsHighchartsLoaded(true)
+      }
+    }, 0)
   }, [chartData]);
 
   return (
+    isHighchartsLoaded &&
     <HighchartsReact
       containerProps={{
         className: classnames(globalProps(props), className),
@@ -139,7 +144,7 @@ const LineGraph = ({
         ...ariaProps,
         ...dataProps,
       }}
-      highcharts={Highcharts}
+      highcharts={window.Highcharts}
       options={options}
     />
   );

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

@@ -10,9 +10,3 @@ examples:
   - multiple_users_default: Default
   - multiple_users_reverse: Reverse
   - multiple_users_size: Size
-
-  swift:
-  - multiple_users_default_swift: Default
-  - multiple_users_reverse_swift: Reverse
-  - multiple_users_size_swift: Small
-  - multiple_users_props_swift: ""

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

@@ -6,9 +6,3 @@ examples:
 
   react:
   - multiple_users_stacked_default: Default
-
-  swift: 
-  - multiple_users_stacked_default_swift: Default
-  - multiple_users_stacked_small_swift: Small
-  - multiple_users_stacked_xsmall_swift: xSmall
-  - multiple_users_stacked_props_swift: ""

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

@@ -16,10 +16,3 @@ examples:
   - text_input_add_on: Add On
   - text_input_inline: Inline
   - text_input_no_label: No Label
-
-  swift:
-    - text_input_default_swift: Default
-    - text_input_error_swift: With Error
-    - text_input_disabled_swift: Disabled
-    - text_input_add_on_swift: Add On
-    - text_input_props_swift: ""

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

@@ -13,7 +13,3 @@ examples:
   - toggle_custom: Custom checkbox input
   - toggle_custom_radio: Custom radio inputs
 
-  swift:
-    - toggle_default_swift: Default State
-    - toggle_name_swift: Name and Value
-    - toggle_props_swift: ""