[PLAY-236] Rebuild Charts to Use React-Highcharts (#2191)

* PLAY-236- replaced plugin with wrapper for bar chart

* refactored circle chart react

* refactored treemap chart react + rails

* refactored line graph react + rails

* refactored gauge react + rails, added rails for circle chart

* Circle chart fixes, tooltip for treemap

* Tooltip for ciecle chart

* Fixed gauge issue with theming not applying to first item

* minor fixes

* Fixes for pointFormat

* Fixed linestroke isseu with guage kit

* Fixed complex example for gauge kit

* Fixed treemap pointformat issue

* circle chart block issue

* Fixes for circle chart block content

* Remove pbChart plugin, clean up code

* trying to fix CI errors

playbook/app/pb_kits/playbook/index.js

@@ -115,7 +115,6 @@ export { default as barGraphSettings } from './pb_bar_graph/barGraphSettings'
 export { default as dashboardValueSettings } from './pb_dashboard_value/dashboardValueSettings'
 
 // Other JS/Plugins
-export { default as pbChart } from './plugins/pb_chart.js'
 export { default as datePickerHelper } from './pb_date_picker/date_picker_helper'
 export { default as PbPopover } from './pb_popover'
 export { default as PbTable } from './pb_table'

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

@@ -0,0 +1,145 @@
+import React, { useState, useEffect } from "react";
+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";
+
+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 };
+};
+
+
+const BarGraph = ({
+  aria = {},
+  data = {},
+  align = "center",
+  axisTitle,
+  dark = false,
+  chartData,
+  className = "pb_bar_graph",
+  colors,
+  id,
+  pointStart,
+  subTitle,
+  type = "column",
+  title = "Title",
+  xAxisCategories,
+  yAxisMin,
+  yAxisMax,
+  legend = false,
+  toggleLegendClick = true,
+  height,
+  layout = "horizontal",
+  verticalAlign = "bottom",
+  x = 0,
+  y = 0,
+  ...props
+}: BarGraphProps) => {
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const setupTheme = () => {
+    dark
+      ? Highcharts.setOptions(highchartsDarkTheme)
+      : Highcharts.setOptions(highchartsTheme);
+  };
+  setupTheme();
+
+  const staticOptions = {
+    title: {
+      text: title,
+    },
+    chart: {
+      height: height,
+      type: type,
+    },
+    subtitle: {
+      text: subTitle,
+    },
+    yAxis: {
+      min: yAxisMin,
+      max: yAxisMax,
+      title: {
+        text: axisTitle,
+      },
+    },
+    xAxis: {
+      categories: xAxisCategories,
+    },
+    legend: {
+      enabled: legend,
+      align: align,
+      verticalAlign: verticalAlign,
+      layout: layout,
+      x: x,
+      y: y,
+    },
+    colors:
+      colors !== undefined && colors.length > 0
+        ? mapColors(colors)
+        : highchartsTheme.colors,
+    plotOptions: {
+      series: {
+        pointStart: pointStart,
+        events: {},
+        dataLabels: {
+          enabled: false,
+        },
+      },
+    },
+    series: chartData,
+    credits: false,
+  };
+
+  if (!toggleLegendClick) {
+    staticOptions.plotOptions.series.events = { legendItemClick: () => false };
+  }
+
+  const [options, setOptions] = useState({});
+
+  useEffect(() => {
+    setOptions({ ...staticOptions });
+  }, [chartData]);
+
+  return (
+    <HighchartsReact
+      containerProps={{
+        className: classnames(globalProps(props), className),
+        id: id,
+        ...ariaProps,
+        ...dataProps,
+      }}
+      highcharts={Highcharts}
+      options={options}
+    />
+  );
+};
+
+export default BarGraph;

playbook/app/pb_kits/playbook/pb_circle_chart/ChartsTypes.ts

@@ -0,0 +1,2 @@
+declare module "*.scss"
+declare module "highcharts-react-official"