playbook_ui 13.12.0.pre.alpha.play1051highchartstest1558 → 13.12.0.pre.alpha.play1051testhighcharts1574

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

@@ -1,116 +1,117 @@
-// import React, { useState, useEffect } from "react";
-// import classnames from "classnames";
+/* eslint-disable */
+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 { 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 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(window.Highcharts).colors,
+      },
+    },
+  };
 
-//   const [options, setOptions] = useState({});
-//   const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
+  const [options, setOptions] = useState({});
+  const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
 
-//   useEffect(() => {
-//     setOptions({ ...staticOptions });
+  useEffect(() => {
+    setOptions({ ...staticOptions });
 
-//     const interval = setInterval(() => {
-//       if (window.Highcharts) {
-//         clearInterval(interval)
-//         dark
-//           ? window.Highcharts.setOptions(highchartsDarkTheme(window.Highcharts))
-//           : window.Highcharts.setOptions(highchartsTheme)
+    const interval = setInterval(() => {
+      if (window.Highcharts) {
+        clearInterval(interval)
+        dark
+          ? window.Highcharts.setOptions(highchartsDarkTheme(window.Highcharts))
+          : window.Highcharts.setOptions(highchartsTheme(window.Highcharts))
         
-//         treemap(window.Highcharts)
-//         setIsHighchartsLoaded(true)
-//       }
-//     }, 0)
-//   }, [chartData]);
+        treemap(window.Highcharts)
+        setIsHighchartsLoaded(true)
+      }
+    }, 0)
+  }, [chartData]);
 
-//   return (
-//     isHighchartsLoaded &&
-//     <HighchartsReact
-//       containerProps={{
-//         className: classnames(globalProps(props), "pb_treemap_chart"),
-//         id: id,
-//         ...ariaProps,
-//         ...dataProps,
-//       }}
-//       highcharts={window.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
 })