playbook_ui 14.4.0.pre.alpha.PLAY1486highchartscssdrivenPOC3923 → 14.4.0.pre.alpha.PLAY1529removefaeasy3876

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

@@ -1,10 +1,208 @@
-import React from 'react';
+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";
+import highchartsMore from "highcharts/highcharts-more";
+import solidGauge from "highcharts/modules/solid-gauge";
+import defaultColors from "../tokens/exports/_colors.module.scss";
+import typography from "../tokens/exports/_typography.module.scss";
+
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
+import { globalProps } from "../utilities/globalProps";
+import { GenericObject } from "../types";
+import { merge } from 'lodash'
+
+type GaugeProps = {
+  aria: { [key: string]: string };
+  className?: string;
+  chartData?: { name: string; value: number[] | number }[];
+  customOptions?: Partial<Highcharts.Options>;
+  dark?: boolean;
+  data?: { [key: string]: string };
+  disableAnimation?: boolean;
+  fullCircle?: boolean;
+  height?: string;
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  id?: string;
+  max?: number;
+  min?: number;
+  prefix?: string;
+  showLabels?: boolean;
+  style?: string;
+  suffix?: string;
+  title?: string;
+  tooltipHtml?: string;
+  colors: string[];
+  minorTickInterval?: number;
+  circumference: number[];
+};
+
+const Gauge = ({
+  aria = {},
+  chartData,
+  customOptions = {},
+  dark = false,
+  data = {},
+  disableAnimation = false,
+  fullCircle = false,
+  height = null,
+  htmlOptions = {},
+  id,
+  max = 100,
+  min = 0,
+  prefix = "",
+  showLabels = false,
+  style = "solidgauge",
+  suffix = "",
+  title = "",
+  tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
+    "<b>{point.y}</b>",
+  colors = [],
+  minorTickInterval = null,
+  circumference = fullCircle ? [0, 360] : [-100, 100],
+  ...props
+}: GaugeProps): React.ReactElement => {
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions);
+  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({});
+
+  useEffect(() => {
+    const formattedChartData = chartData.map((obj: GenericObject) => {
+      obj.y = obj.value;
+      delete obj.value;
+      return obj;
+    });
+
+    const staticOptions = {
+      chart: {
+        events: {
+          load() {
+            setTimeout(this.reflow.bind(this), 0);
+          },
+        },
+        type: style,
+        height: height,
+      },
+      title: {
+        text: title,
+      },
+      yAxis: {
+        min: min,
+        max: max,
+        lineWidth: 0,
+        tickWidth: 0,
+        minorTickInterval: minorTickInterval,
+        tickAmount: 2,
+        tickPositions: [min, max],
+        labels: {
+          y: 26,
+          enabled: showLabels,
+        },
+      },
+      credits: false,
+      series: [
+        {
+          data: formattedChartData,
+        },
+      ],
+      pane: {
+        center: ["50%", "50%"],
+        size: "90%",
+        startAngle: circumference[0],
+        endAngle: circumference[1],
+        background: {
+          borderWidth: 20,
+          innerRadius: "90%",
+          outerRadius: "90%",
+          shape: "arc",
+          className: "gauge-pane",
+        },
+      },
+      colors:
+        colors !== undefined && colors.length > 0
+          ? mapColors(colors)
+          : highchartsTheme.colors,
+      plotOptions: {
+        series: {
+          animation: !disableAnimation,
+        },
+        solidgauge: {
+          borderColor:
+            colors !== undefined && colors.length === 1
+              ? mapColors(colors).join()
+              : highchartsTheme.colors[0],
+          borderWidth: 20,
+          radius: 90,
+          innerRadius: "90%",
+          dataLabels: {
+            borderWidth: 0,
+            color: defaultColors.text_lt_default,
+            enabled: true,
+            format:
+              `<span class="prefix">${prefix}</span>` +
+              '<span class="fix">{y:,f}</span>' +
+              `<span class="suffix">${suffix}</span>`,
+            style: {
+              fontFamily: typography.font_family_base,
+              fontWeight: typography.regular,
+              fontSize: typography.heading_2,
+            },
+            y: -26,
+          },
+        },
+      },
+    };
+
+    setOptions(merge(staticOptions, customOptions));
+
+    if (document.querySelector(".prefix")) {
+      document.querySelectorAll(".prefix").forEach((prefix) => {
+        prefix.setAttribute("y", "28");
+      });
+      document
+        .querySelectorAll(".fix")
+        .forEach((fix) => fix.setAttribute("y", "38"));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [chartData]);
 
-const Gauge: React.FC = () => {
   return (
-    <div>
-      This is a simple div component.
-    </div>
+    <HighchartsReact
+        containerProps={{
+        className: classnames(css, globalProps(props)),
+        id: id,
+        ...ariaProps,
+        ...dataProps,
+        ...htmlProps,
+      }}
+        highcharts={Highcharts}
+        options={options}
+    />
   );
 };
 

data/app/pb_kits/playbook/pb_gauge/gauge.test.js

@@ -17,7 +17,7 @@ afterEach(() => {
 
 const testId = 'gauge1';
 
-test.skip('uses exact classname', () => {
+test('uses exact classname', () => {
   const data = [
     { name: 'Name', value: 45 },
   ]

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

@@ -1,10 +1,159 @@
-import React from 'react';
+import React, { useState, useEffect } from "react";
+import classnames from "classnames";
+import { globalProps } from "../utilities/globalProps";
+import { buildAriaProps, buildDataProps, buildHtmlProps } 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 { merge } from 'lodash'
+
+type LineGraphProps = {
+  align?: "left" | "right" | "center";
+  axisTitle?: string;
+  dark?: boolean;
+  xAxisCategories: [];
+  yAxisMin: number;
+  yAxisMax: number;
+  className?: string;
+  chartData: {
+    name: string;
+    data: number[];
+  }[];
+  customOptions?: Partial<Highcharts.Options>;
+  gradient?: boolean;
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  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 = ({
+  aria = {},
+  data = {},
+  align = "center",
+  className = "pb_bar_graph",
+  customOptions = {},
+  dark = false,
+  gradient = false,
+  type = "line",
+  htmlOptions = {},
+  id,
+  legend = false,
+  toggleLegendClick = true,
+  layout = "horizontal",
+  verticalAlign = "bottom",
+  x = 0,
+  y = 0,
+  axisTitle,
+  xAxisCategories,
+  yAxisMin,
+  yAxisMax,
+  chartData,
+  pointStart,
+  subTitle,
+  title,
+  height,
+  colors = [],
+  ...props
+}: LineGraphProps) => {
+  
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
+
+  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 filteredProps: any = {...props};
+ delete filteredProps.verticalAlign;
+
+  const [options, setOptions] = useState({});
+
+  useEffect(() => {
+    setOptions(merge(staticOptions, customOptions));
+  }, [chartData]);
 
-const LineGraph: React.FC = () => {
   return (
-    <div>
-      This is a simple div component.
-    </div>
+    <HighchartsReact
+        containerProps={{
+        className: classnames(globalProps(filteredProps), className),
+        id: id,
+        ...ariaProps,
+        ...dataProps,
+        ...htmlProps
+      }}
+        highcharts={Highcharts}
+        options={options}
+    />
   );
 };
 

data/app/pb_kits/playbook/pb_line_graph/lineGraph.test.js

@@ -17,7 +17,7 @@ afterEach(() => {
 
 const testId = 'linechart1';
 
-test.skip('uses exact classname', () => {
+test('uses exact classname', () => {
   const data = [{
     name: 'Installation',
     data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],

data/app/pb_kits/playbook/pb_popover/docs/_popover_list.html.erb

@@ -28,9 +28,9 @@
     popoverButton.onclick = () => {
         buttonClicked = !buttonClicked
         if (buttonClicked) {
-            arrowDiv.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="auto" height="auto" viewBox="0 0 31 25" fill="none" class="pb_custom_icon svg-inline--fa pb_icon_kit svg_fw" id="" data="{}" aria="{}" tabindex=""><path d="M14.2031 5.70312C14.625 5.28125 15.3281 5.28125 15.75 5.70312L24.7969 14.7031C25.2188 15.1719 25.2188 15.875 24.7969 16.2969C24.3281 16.7656 23.625 16.7656 23.2031 16.2969L15 8.09375L6.79688 16.2969C6.32812 16.7656 5.625 16.7656 5.20312 16.2969C4.73438 15.875 4.73438 15.1719 5.20312 14.75L14.2031 5.70312Z" fill="currentColor"/></svg>'
+            arrowDiv.innerHTML = '<i class="far fa-angle-up"></i>'
         } else {
-            arrowDiv.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="auto" height="auto" viewBox="0 0 31 25" fill="none" class="pb_custom_icon svg-inline--fa pb_icon_kit svg_fw" id="" data="{}" aria="{}" tabindex=""><path d="M14.2031 19.2969L5.20312 10.2969C4.73438 9.875 4.73438 9.17188 5.20312 8.70312C5.625 8.28125 6.32812 8.28125 6.79688 8.70312L15 16.9531L23.2031 8.75C23.625 8.28125 24.3281 8.28125 24.7969 8.75C25.2188 9.17188 25.2188 9.875 24.7969 10.2969L15.75 19.2969C15.3281 19.7656 14.625 19.7656 14.2031 19.2969Z" fill="currentColor"/></svg>'
+            arrowDiv.innerHTML = '<i class="far fa-angle-down"></i>'
         }
     }
 </script>

data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.html.erb

@@ -10,7 +10,6 @@
 <%= pb_rails("radio", props: {
   custom_children: true,
   label: "Select",
-  margin_bottom: "sm",
   name: "Group1",
   value: "Select",
 }) do %>
@@ -23,7 +22,6 @@
 <%= pb_rails("radio", props: {
   custom_children: true,
   label: "Typeahead",
-  margin_bottom: "sm",
   name: "Group1",
   value: "Typeahead",
 }) do %>

data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx

@@ -19,14 +19,12 @@ const RadioChildren = (props) => {
       <Radio
           customChildren
           label="Select"
-          marginBottom="sm"
           name="Group1"
           tabIndex={0}
           value="Select"
           {...props}
       >
-        <Select
-            marginBottom="none"
+        <Select 
             minWidth="xs"
             options={options}
         />
@@ -34,18 +32,17 @@ const RadioChildren = (props) => {
       <Radio
           customChildren
           label="Typeahead"
-          marginBottom="sm"
           name="Group1"
           tabIndex={0}
           value="Typeahead"
           {...props}
       >
         <Typeahead 
-            marginBottom="none"
             minWidth="xs"
             options={options}
         />
       </Radio>
+      <br />
       <Radio
           customChildren
           defaultChecked={false}

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

@@ -1,10 +1,118 @@
-import React from 'react';
+import React, { useState, useEffect } from "react";
+import classnames from "classnames";
+
+import { globalProps } from "../utilities/globalProps";
+import { buildAriaProps, buildDataProps, buildHtmlProps } 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 treemap from 'highcharts/modules/treemap'
+import { merge } from 'lodash'
+
+type TreemapChartProps = {
+  chartData: {
+    name: string;
+    parent?: string | number;
+    value: number;
+    color?: string;
+    id?: string | number;
+  }[];
+  className?: string;
+  colors: string[];
+  customOptions?: Partial<Highcharts.Options>;
+  dark?: boolean;
+  drillable: boolean;
+  grouped: boolean;
+  height?: string;
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  id: number | string;
+  title?: string;
+  tooltipHtml: string;
+  type?: string;
+  aria?: { [key: string]: string };
+  data?: { [key: string]: string };
+};
+
+const TreemapChart = ({
+  aria = {},
+  data = {},
+  chartData,
+  colors,
+  customOptions = {},
+  dark = false,
+  drillable = false,
+  grouped = false,
+  height,
+  htmlOptions = {},
+  id,
+  title = "",
+  tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.value}</b>',
+  type = "treemap",
+  ...props
+}: TreemapChartProps): React.ReactElement => {
+  
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
+
+  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 [options, setOptions] = useState({});
+
+  useEffect(() => {
+    setOptions(merge(staticOptions, customOptions));
+  }, [chartData]);
 
-const TreemapChart: React.FC = () => {
   return (
-    <div>
-      This is a simple div component.
-    </div>
+    <HighchartsReact
+        containerProps={{
+          className: classnames(globalProps(props), "pb_treemap_chart"),
+          id: id,
+          ...ariaProps,
+          ...dataProps,
+          ...htmlProps
+      }}
+        highcharts={Highcharts}
+        options={options}
+    />
   );
 };
 

data/app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js

@@ -19,7 +19,7 @@ afterEach(() => {
 
 const testId = 'treemapchart1';
 
-test.skip('uses exact classname', () => {
+test('uses exact classname', () => {
   const data = [
     {
       name: "Pepperoni",