playbook_ui 13.12.0.pre.alpha.play900startratingasinput1543 → 13.12.0.pre.alpha.play1051highchartstest1556

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2daeb37609ca6ef566bc397c5088084ebac5857f79f989201bbd33c538e1e35a
-  data.tar.gz: 853196b395dd63bf09b59d8374bb7784d3339cbf3d4e11197daccaca6b76426f
+  metadata.gz: 929026cac483c05a87b39292c9d51b41c4b6821b59de94e90a0c50e7442780f3
+  data.tar.gz: 3128e1087d1e0c3a35b55ee77777a76964458f85959bb09f578a62c97a164f3d
 SHA512:
-  metadata.gz: 57caaf48d216427e283dcd3fd6067c8cd5e9361e60cda1044c978f2210ef4bc1144359297a1e8abfe62a2555991fcf5d6e4f566acfc074a0a6872a896c2901fa
-  data.tar.gz: 3706eb8a4ed554d67f5cea0087ada781752d9a158cda4c5f952631a444a2dbc8a10af929f5e1561a4a68609641043f95c90850b5256ae48daa4e17ff946bd9c0
+  metadata.gz: c30d4c784c54c82d0f16c4c3743d863548c8998c458fbf0f7b32f79b3f47a860d646babb50e059d01d87cbb915fd38eae522e27a27190b468d90507e390ee595
+  data.tar.gz: 047cbc9a8cf5f7de72a5d55feb1b675ad20bc5ca5cb9853cbc2c4c0ca728be645772e095c4931552cdad9d77191c9f7a52c39dd610d68c6e353065c84d80b56e

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))
+          : 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_circle_chart/_circle_chart.tsx

@@ -1,10 +1,9 @@
+/* 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";
@@ -12,35 +11,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?: unknown,
+  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 +89,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 +150,50 @@ const CircleChart = ({
       credits: false,
     };
     setOptions({ ...staticOptions });
-  }, [chartData]);
 
+    const interval = setInterval(() => {
+      if (window.Highcharts) {
+        clearInterval(interval)
+        dark
+          ? window.Highcharts.setOptions(highchartsDarkTheme(window.Highcharts))
+          : 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 +201,7 @@ const CircleChart = ({
             ...ariaProps,
             ...dataProps,
           }}
-          highcharts={Highcharts}
+          highcharts={window.Highcharts}
           options={options}
         />
       )}

data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts

@@ -3,10 +3,263 @@ import typography from '../tokens/exports/_typography.scss'
 
 import { ThemeProps } from './themeTypes'
 
-import Highcharts from 'highcharts'
+//import Highcharts from 'highcharts'
 
 const pbButtonHoverColor = '#004ebb'
-const highchartsDarkTheme: ThemeProps = {
+// const highchartsDarkTheme: ThemeProps = {
+//   lang: {
+//     thousandsSep: ',',
+//   },
+//   colors: [
+//     colors.data_1,
+//     colors.data_2,
+//     colors.data_3,
+//     colors.data_4,
+//     colors.data_5,
+//     colors.data_6,
+//     colors.data_7,
+//   ],
+//   chart: {
+//     borderWidth: 0,
+//     borderRadius: 0,
+//     plotBackgroundColor: null,
+//     plotShadow: false,
+//     plotBorderWidth: 0,
+//   },
+//   title: {
+//     style: {
+//       color: colors.text_dk_default,
+//       fontFamily: typography.font_family_base,
+//       fontWeight: typography.regular,
+//       fontSize: typography.heading_3,
+//     },
+//   },
+//   subtitle: {
+//     style: {
+//       fontFamily: typography.font_family_base,
+//       color: colors.text_dk_light,
+//       fontWeight: typography.regular,
+//       fontSize: typography.text_base,
+//     },
+//   },
+//   xAxis: {
+//     gridLineWidth: 0,
+//     lineColor: colors.border_dark,
+//     tickColor: colors.border_dark,
+//     labels: {
+//       style: {
+//         fontFamily: typography.font_family_base,
+//         color: colors.text_dk_lighter,
+//         fontWeight: typography.bold,
+//         fontSize: typography.text_smaller,
+//       },
+//     },
+//     title: {
+//       style: {
+//         color: colors.text_dk_default,
+//         fontFamily: typography.font_family_base,
+//         fontWeight: typography.regular,
+//         fontSize: typography.heading_4,
+//       },
+//     },
+//   },
+//   yAxis: {
+//     alternateGridColor: null,
+//     minorTickInterval: null,
+//     gridLineColor: colors.border_dark,
+//     minorGridLineColor: colors.border_dark,
+//     lineWidth: 0,
+//     tickWidth: 0,
+//     labels: {
+//       style: {
+//         fontFamily: typography.font_family_base,
+//         color: colors.text_dk_lighter,
+//         fontWeight: typography.bold,
+//         fontSize: typography.text_smaller,
+//       },
+//     },
+//     title: {
+//       style: {
+//         fontFamily: typography.font_family_base,
+//         color: colors.text_dk_lighter,
+//         fontWeight: typography.bold,
+//         fontSize: typography.text_smaller,
+//       },
+//     },
+//   },
+//   legend: {
+//     layout: 'horizontal',
+//     align: 'center',
+//     verticalAlign: 'bottom',
+//     itemStyle: {
+//       fontFamily: typography.font_family_base,
+//       color: colors.text_dk_light,
+//       fontWeight: typography.regular,
+//       fontSize: typography.text_smaller,
+//     },
+//     itemHoverStyle: {
+//       color: colors.text_dk_default,
+//     },
+//     itemHiddenStyle: {
+//       color: colors.text_dk_lighter,
+//     },
+//   },
+//   labels: {
+//     style: {
+//       color: colors.primary,
+//     },
+//   },
+//   tooltip: {
+//     backgroundColor: {
+//       linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+//       stops: [
+//         [0, colors.card_light],
+//         [1, colors.card_light],
+//       ],
+//     },
+//     shadow: false,
+//     borderWidth: 0,
+//     borderRadius: 10,
+//     style: {
+//       fontFamily: typography.font_family_base,
+//       color: colors.text_lt_default,
+//       fontWeight: typography.regular,
+//       fontSize: typography.text_smaller,
+//     },
+//   },
+//   // specific to gauge
+//   // unfilled gauge color
+//   pane: {
+//     background: {
+//       borderColor: colors.border_dark,
+//     },
+//   },
+
+//   plotOptions: {
+//     series: {
+//       borderColor: colors.bg_dark_card,
+//       borderWidth: 2,
+//       type: 'area',
+//       nullColor: colors.text_dk_lighter,
+//       fillColor: {
+//         linearGradient: {
+//           x1: 0,
+//           y1: 0,
+//           x2: 0,
+//           y2: 1,
+//         },
+//         stops: [
+//           [0, Highcharts.getOptions().colors[0]],
+//           [1, 'white'],
+//         ],
+//       },
+//       threshold: null,
+//     },
+//     // PIE STYLES
+//     pie: {
+//       colors: [
+//         colors.data_1,
+//         colors.data_2,
+//         colors.data_3,
+//         colors.data_4,
+//         colors.data_5,
+//         colors.data_6,
+//         colors.data_7,
+//       ],
+//       dataLabels: {
+//         style: {
+//           fontFamily: typography.font_family_base,
+//           fontSize: typography.text_smaller,
+//           color: colors.text_dk_light,
+//           fontWeight: typography.regular,
+//         },
+//       },
+//     },
+
+//     // LINE CHART STYLES
+//     line: {
+//       dataLabels: {
+//         color: colors.text_dk_light,
+//       },
+//       marker: {
+//         lineColor: colors.border_dark,
+//       },
+//       area: {
+//         shadow: false,
+//         states: {
+//           hover: {
+//             lineWidth: 1,
+//           },
+//         },
+//         threshold: null,
+//       },
+//     },
+
+//     //TREEMAP CHART STYLES
+//     treemap: {
+//       layoutAlgorithm: "squarified",
+//       allowTraversingTree: false,
+//       animationLimit: 1000,
+//       colors: [
+//         colors.data_1,
+//         colors.data_2,
+//         colors.data_3,
+//         colors.data_4,
+//         colors.data_5,
+//         colors.data_6,
+//         colors.data_7,
+//         colors.data_8,
+//       ],
+//       colorByPoint: true,
+//       dataLabels: {
+//         enabled: true,
+//         style: {
+//           fontFamily: typography.font_family_base,
+//           fontWeight: typography.bold,
+//           fontSize: typography.heading_4,
+//         },
+//       },
+//       levels: [
+//         {
+//           level: 1,
+//           dataLabels: {
+//             enabled: false,
+//           },
+//         },
+//       ],
+//       traverseUpButton: {
+//         position: { y: -50 },
+//         text: '< Back',
+//         theme: {
+//           r: 4,
+//           states: {
+//             hover: {
+//               style: {
+//                 fill: pbButtonHoverColor,
+//               },
+//             },
+//           },
+//           style: {
+//             fill: colors.royal,
+//             color: colors.white,
+//             fontSize: `${typography.text_small}`,
+//             fontWeight: typography.bold,
+//             fontFamily: `${typography.font_family_base}`,
+//           },
+//           stroke: colors.royal,
+//           height: 24,
+//           width: 90,
+//         },
+//       },
+//     },
+//   },
+//   credits: {
+//     enabled: false
+//   },
+// }
+
+function highchartsDarkTheme(highcharts: any): ThemeProps {
+  return {
   lang: {
     thousandsSep: ',',
   },
@@ -149,7 +402,7 @@ const highchartsDarkTheme: ThemeProps = {
           y2: 1,
         },
         stops: [
-          [0, Highcharts.getOptions().colors[0]],
+          [0, highcharts.getOptions().colors[0]],
           [1, 'white'],
         ],
       },
@@ -257,5 +510,6 @@ const highchartsDarkTheme: ThemeProps = {
     enabled: false
   },
 }
+}
 
 export { highchartsDarkTheme }