playbook_ui 13.12.0.pre.alpha.play1051highchartstest1567 → 13.12.0

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

@@ -1,7 +1,7 @@
-/* eslint-disable */
 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 +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 = ({
@@ -54,7 +54,7 @@ const Gauge = ({
   suffix = "",
   title = "",
   tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
-  "<b>{point.y}</b>",
+    "<b>{point.y}</b>",
   colors = [],
   minorTickInterval = null,
   circumference = fullCircle ? [0, 360] : [-100, 100],
@@ -62,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) => {
@@ -159,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))
-          : 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)),
@@ -205,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

@@ -1,42 +1,42 @@
-/* eslint-disable */
 import React, { useState, useEffect } from "react";
 import classnames from "classnames";
 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,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: {
@@ -120,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))
-          : window.Highcharts.setOptions(highchartsTheme)
-        setIsHighchartsLoaded(true)
-      }
-    }, 0)
   }, [chartData]);
 
   return (
-    isHighchartsLoaded &&
     <HighchartsReact
       containerProps={{
         className: classnames(globalProps(props), className),
@@ -145,7 +139,7 @@ const LineGraph = ({
         ...ariaProps,
         ...dataProps,
       }}
-      highcharts={window.Highcharts}
+      highcharts={Highcharts}
       options={options}
     />
   );

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

@@ -13,11 +13,3 @@ examples:
   - section_separator_text: Text Separator
   - section_separator_vertical: Vertical
   - section_separator_children: Children
-
-  swift:
-  - section_separator_line_swift: Line Separator
-  - section_separator_dashed_swift: Dashed Separator
-  - section_separator_text_swift: Text Separator
-  - section_separator_vertical_swift: Vertical
-  - section_separator_children_swift: Children
-  - section_separator_props_swift: ""

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

@@ -15,8 +15,3 @@ examples:
   - textarea_error: Textarea w/ Error
   - textarea_character_counter: Character Counter
   - textarea_inline: Inline
-
-  swift:
-  - textarea_default_swift: Default
-  - textarea_error_swift: Textarea w/ Error
-  - textarea_props_swift: ""

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

@@ -1,116 +1,111 @@
-// import React, { useState, useEffect } from "react";
-// import classnames from "classnames";
+import React, { useState, useEffect } from "react";
+import classnames from "classnames";
 
-// import { globalProps } from "../utilities/globalProps";
-// import { buildAriaProps, buildDataProps } from "../utilities/props";
+import { globalProps } from "../utilities/globalProps";
+import { buildAriaProps, buildDataProps } from "../utilities/props";
 
-// import HighchartsReact from "highcharts-react-official";
-// import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
-// import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
-// import mapColors from "../pb_dashboard/pbChartsColorsHelper";
-// import treemap from 'highcharts/modules/treemap'
+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";
+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 },
-// };
+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 };
+};
 
-// const TreemapChart = ({
-//   aria = {},
-//   data = {},
-//   chartData,
-//   colors,
-//   dark = false,
-//   drillable = false,
-//   grouped = false,
-//   height,
-//   id,
-//   title = "",
-//   tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.value}</b>',
-//   type = "treemap",
-//   ...props
-// }: TreemapChartProps) => {
-//   const ariaProps = buildAriaProps(aria);
-//   const dataProps = buildDataProps(data);
+const TreemapChart = ({
+  aria = {},
+  data = {},
+  chartData,
+  colors,
+  dark = false,
+  drillable = false,
+  grouped = false,
+  height,
+  id,
+  title = "",
+  tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.value}</b>',
+  type = "treemap",
+  ...props
+}: TreemapChartProps) => {
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const setupTheme = () => {
+    dark
+      ? Highcharts.setOptions(highchartsDarkTheme)
+      : Highcharts.setOptions(highchartsTheme);
+  };  
+  treemap(Highcharts)
+  setupTheme();  
 
-//   const staticOptions = {
-//     title: {
-//       text: title,
-//     },
-//     chart: {
-//       height: height,
-//       type: type,
-//     },
-//     credits: false,
-//     series: [
-//       {
-//         data: chartData,
-//       },
-//     ],
-//     plotOptions: {
-//       treemap: {
-//         tooltip: {
-//           pointFormat: tooltipHtml,
-//         },
-//         allowTraversingTree: drillable,
-//         colorByPoint: !grouped,
-//         colors:
-//           colors !== undefined && colors.length > 0
-//             ? mapColors(colors)
-//             : highchartsTheme.colors,
-//       },
-//     },
-//   };
+  const staticOptions = {
+    title: {
+      text: title,
+    },
+    chart: {
+      height: height,
+      type: type,
+    },
+    credits: false,
+    series: [
+      {
+        data: chartData,
+      },
+    ],
+    plotOptions: {
+      treemap: {
+        tooltip: {
+          pointFormat: tooltipHtml,
+        },
+        allowTraversingTree: drillable,
+        colorByPoint: !grouped,
+        colors:
+          colors !== undefined && colors.length > 0
+            ? mapColors(colors)
+            : highchartsTheme.colors,
+      },
+    },
+  };
 
-//   const [options, setOptions] = useState({});
-//   const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
+  const [options, setOptions] = useState({});
 
-//   useEffect(() => {
-//     setOptions({ ...staticOptions });
+  useEffect(() => {
+    
+    setOptions({ ...staticOptions });
+  }, [chartData]);
 
-//     const interval = setInterval(() => {
-//       if (window.Highcharts) {
-//         clearInterval(interval)
-//         dark
-//           ? window.Highcharts.setOptions(highchartsDarkTheme(window.Highcharts))
-//           : window.Highcharts.setOptions(highchartsTheme)
-        
-//         treemap(window.Highcharts)
-//         setIsHighchartsLoaded(true)
-//       }
-//     }, 0)
-//   }, [chartData]);
+  return (
+    <HighchartsReact
+      containerProps={{
+        className: classnames(globalProps(props), "pb_treemap_chart"),
+        id: id,
+        ...ariaProps,
+        ...dataProps,
+      }}
+      highcharts={Highcharts}
+      options={options}
+    />
+  );
+};
 
-//   return (
-//     isHighchartsLoaded &&
-//     <HighchartsReact
-//       containerProps={{
-//         className: classnames(globalProps(props), "pb_treemap_chart"),
-//         id: id,
-//         ...ariaProps,
-//         ...dataProps,
-//       }}
-//       highcharts={window.Highcharts}
-//       options={options}
-//     />
-//   );
-// };
-
-// export default TreemapChart;
+export default TreemapChart;

data/app/pb_kits/playbook/playbook-doc.js

@@ -39,7 +39,7 @@ import * as FixedConfirmationToast from 'pb_fixed_confirmation_toast/docs'
 import * as Flex from 'pb_flex/docs'
 import * as FormGroup from 'pb_form_group/docs'
 import * as FormPill from 'pb_form_pill/docs'
-//import * as Gauge from 'pb_gauge/docs'
+import * as Gauge from 'pb_gauge/docs'
 import * as Hashtag from 'pb_hashtag/docs'
 import * as Highlight from 'pb_highlight/docs'
 import * as HomeAddressStreet from 'pb_home_address_street/docs'
@@ -97,7 +97,7 @@ import * as TitleCount from 'pb_title_count/docs'
 import * as TitleDetail from 'pb_title_detail/docs'
 import * as Toggle from 'pb_toggle/docs'
 import * as Tooltip from 'pb_tooltip/docs'
-//import * as TreemapChart from 'pb_treemap_chart/docs'
+import * as TreemapChart from 'pb_treemap_chart/docs'
 import * as Typeahead from 'pb_typeahead/docs'
 import * as User from 'pb_user/docs'
 import * as UserBadge from 'pb_user_badge/docs'
@@ -140,7 +140,7 @@ WebpackerReact.registerComponents({
   ...Flex,
   ...FormGroup,
   ...FormPill,
-  //...Gauge,
+  ...Gauge,
   ...Hashtag,
   ...Highlight,
   ...HomeAddressStreet,
@@ -198,7 +198,7 @@ WebpackerReact.registerComponents({
   ...TitleDetail,
   ...Toggle,
   ...Tooltip,
-  //...TreemapChart,
+  ...TreemapChart,
   ...Typeahead,
   ...User,
   ...UserBadge,

data/app/pb_kits/playbook/playbook-rails-react-bindings.js

@@ -10,13 +10,13 @@ import DialogBody from './pb_dialog/child_kits/_dialog_body'
 import DialogFooter from './pb_dialog/child_kits/_dialog_footer'
 import DialogHeader from './pb_dialog/child_kits/_dialog_header'
 import DistributionBar from './pb_distribution_bar/_distribution_bar'
-//import Gauge from './pb_gauge/_gauge'
+import Gauge from './pb_gauge/_gauge'
 import Legend from './pb_legend/_legend'
 import LineGraph from './pb_line_graph/_line_graph'
 import MultiLevelSelect from './pb_multi_level_select/_multi_level_select'
 import Passphrase from './pb_passphrase/_passphrase'
 import RichTextEditor from './pb_rich_text_editor/_rich_text_editor'
-//import TreemapChart from './pb_treemap_chart/_treemap_chart'
+import TreemapChart from './pb_treemap_chart/_treemap_chart'
 import Typeahead from './pb_typeahead/_typeahead'
 import PhoneNumberInput from './pb_phone_number_input/_phone_number_input'
 
@@ -33,9 +33,9 @@ WebpackerReact.registerComponents({
   LineGraph,
   Passphrase,
   RichTextEditor,
-  //TreemapChart,
+  TreemapChart,
   Typeahead,
-  //Gauge,
+  Gauge,
   PhoneNumberInput
 })