playbook_ui 13.12.0.pre.alpha.PLAY1051removinghighchartsdependency1551 → 13.12.0.pre.alpha.PLAY1093typeaheadkitdocbug1577

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4a59ab1213c1c17a6ab6bfa775d7ac7edf06972be95d950e479f16b8cafc4216
-  data.tar.gz: cb50f83ac242358db6b9e951ba8d7fa7bfee32ff78c02eef0b0829ed5e97a0d7
+  metadata.gz: d2e75ac2b96498c068416a578e7ffe91d6f97831b1b44e2b80d647fb8ce0c3d1
+  data.tar.gz: f9605134e0684d8ba51ab2d6404ec4fd4699269b9fcd5cd714d43275a8f135f7
 SHA512:
-  metadata.gz: 53af5b80de72a1f40570fd93a05f1a5282d9c79cfa04b007ecfc7e04ee31bfaa27d2202467edaf02ca50ea05173faccc0fb5b2207e16cf936957eaf8bd4b3338
-  data.tar.gz: 287e8051ab76bba6451b8c76ba3df6d95d1d7cfd4f4de33ae82b5745345294903e40fd74510c1b740b40395d6193f5c2c24c285980b116873a381917fdd146f7
+  metadata.gz: 68ab223d1d4c85efaa3fdf6f2d18661dcf2a7389b79c1df35cdfd150d8594ce2bb3c28bcc10402578dc9dcc59f0eaf08bc0f81b1140de200b3fcd640ee2ed93e
+  data.tar.gz: 628889add191c4e59f40a6a9660b6b944f203920f18fa90089d0a5454356bc438f523235df4650b1a5c9de5c27d9af0b8f55bf036b0eca355720043804c5fd1f

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

@@ -3,6 +3,7 @@ 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";
@@ -10,31 +11,32 @@ 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 = {},
@@ -63,6 +65,12 @@ 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: {
@@ -115,24 +123,12 @@ 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),
@@ -140,7 +136,7 @@ const BarGraph = ({
           ...ariaProps,
           ...dataProps,
         }}
-        highcharts={window.Highcharts}
+        highcharts={Highcharts}
         options={options}
     />
   );

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

@@ -3,6 +3,8 @@ 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";
@@ -10,35 +12,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
@@ -88,11 +90,29 @@ 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) => {
@@ -149,50 +169,26 @@ const CircleChart = ({
       credits: false,
     };
     setOptions({ ...staticOptions });
-
-    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}`}>
-          {
-            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,
+            }}
+            highcharts={Highcharts}
+            options={options}
+          />
           <div className="pb-circle-chart-block">{children}</div>
         </div>
       ) : (
-        isHighchartsLoaded &&
         <HighchartsReact
           containerProps={{
             className: classnames("pb_circle_chart", globalProps(props)),
@@ -200,7 +196,7 @@ const CircleChart = ({
             ...ariaProps,
             ...dataProps,
           }}
-          highcharts={window.Highcharts}
+          highcharts={Highcharts}
           options={options}
         />
       )}

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

@@ -1,6 +1,7 @@
 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";
@@ -13,26 +14,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 = ({
@@ -61,13 +62,28 @@ 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) => {
@@ -158,45 +174,18 @@ const Gauge = ({
 
     setOptions({ ...staticOptions });
 
-    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)
+    if (document.querySelector(".prefix")) {
+      document.querySelectorAll(".prefix").forEach((prefix) => {
+        prefix.setAttribute("y", "28");
+      });
+      document
+        .querySelectorAll(".fix")
+        .forEach((fix) => fix.setAttribute("y", "38"));
+    }
 
   }, [chartData]);
 
   return (
-    isHighchartsLoaded &&
     <HighchartsReact
       containerProps={{
         className: classnames(css, globalProps(props)),
@@ -204,7 +193,7 @@ const Gauge = ({
         ...ariaProps,
         ...dataProps,
       }}
-      highcharts={window.Highcharts}
+      highcharts={Highcharts}
       options={options}
     />
   );

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

@@ -4,38 +4,39 @@ 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 = ({
@@ -67,6 +68,12 @@ const LineGraph = ({
 }: LineGraphProps) => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
+  const setupTheme = () => {
+    dark
+      ? Highcharts.setOptions(highchartsDarkTheme)
+      : Highcharts.setOptions(highchartsTheme);
+  };
+  setupTheme();
 
   const staticOptions = {
     title: {
@@ -119,24 +126,12 @@ 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),
@@ -144,7 +139,7 @@ const LineGraph = ({
         ...ariaProps,
         ...dataProps,
       }}
-      highcharts={window.Highcharts}
+      highcharts={Highcharts}
       options={options}
     />
   );

data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx

@@ -5,6 +5,7 @@ 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";
@@ -12,24 +13,24 @@ import treemap from 'highcharts/modules/treemap'
 
 type TreemapChartProps = {
   chartData: {
-    name: string,
-    parent?: string | number,
-    value: number,
-    color?: string,
-    id?: string | number,
-  }[],
-  className?: string,
-  colors: string[],
-  dark?: boolean,
-  drillable: boolean,
-  grouped: boolean,
-  height?: string,
-  id: number | string,
-  title?: string,
-  tooltipHtml: string,
-  type?: string,
-  aria?: { [key: string]: string },
-  data?: { [key: string]: string },
+    name: string;
+    parent?: string | number;
+    value: number;
+    color?: string;
+    id?: string | number;
+  }[];
+  className?: string;
+  colors: string[];
+  dark?: boolean;
+  drillable: boolean;
+  grouped: boolean;
+  height?: string;
+  id: number | string;
+  title?: string;
+  tooltipHtml: string;
+  type?: string;
+  aria?: { [key: string]: string };
+  data?: { [key: string]: string };
 };
 
 const TreemapChart = ({
@@ -49,6 +50,13 @@ const TreemapChart = ({
 }: TreemapChartProps) => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
+  const setupTheme = () => {
+    dark
+      ? Highcharts.setOptions(highchartsDarkTheme)
+      : Highcharts.setOptions(highchartsTheme);
+  };  
+  treemap(Highcharts)
+  setupTheme();  
 
   const staticOptions = {
     title: {
@@ -80,26 +88,13 @@ const TreemapChart = ({
   };
 
   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)
-        
-        treemap(window.Highcharts)
-        setIsHighchartsLoaded(true)
-      }
-    }, 0)
   }, [chartData]);
 
   return (
-    isHighchartsLoaded &&
     <HighchartsReact
       containerProps={{
         className: classnames(globalProps(props), "pb_treemap_chart"),
@@ -107,7 +102,7 @@ const TreemapChart = ({
         ...ariaProps,
         ...dataProps,
       }}
-      highcharts={window.Highcharts}
+      highcharts={Highcharts}
       options={options}
     />
   );

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx

@@ -70,8 +70,8 @@ const TypeaheadWithHighlight = (props) => {
   }
 
   const customComponents = {
-    Option: (props: OptionProps) => (
-      <components.Option {...props}/>
+    Option: (highlightProps: OptionProps) => (
+      <components.Option {...highlightProps}/>
     ),
     SingleValue: ({ data }: any) => (
       <span>{data.name}</span>