playbook_ui 14.4.0.pre.alpha.PBNTR534filtermaxwidth3903 → 14.4.0.pre.alpha.PLAY1486highchartscssdrivenPOC3921

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d19b0edff349ceaf5715d4d3312adfa00bea94690997444a35de043e1ffa4098
-  data.tar.gz: 381e6e97dc1c9b9ddac851087629c0521400a73237ae530cca4de84e1e49f319
+  metadata.gz: f3c861823c01687ef703ba3a1e310911dfeaebff6d65a620022f747d0daba9ce
+  data.tar.gz: ffb519f660e10a9ee9ee708a779f63f436264e6981e9633644535b88bce4e95e
 SHA512:
-  metadata.gz: bf448459473c583fa91ab9903a5ae4740b6ec926b5a1263c1285790fbd2bab360a7957627ff127230aa2b3570e268a56bce0dd5f86b88f0ff01d55249b2feec9
-  data.tar.gz: dda0adae3948fa7113716a0c70fd8a27e4bb880958f6d48d2ff7107767d4d01f6facccfdd2a018c1f63ffffce52670c6dd4c953f37569354e324a554be8d2bf8
+  metadata.gz: d75149ee740577deca90e3f8764d51ad606a70c147a9a03ce2b083fae8b93875244381f61123acd7a522ed23332d9daf7d6f97585a790da9893ea52309f4689f
+  data.tar.gz: 03a3e4a293d7f88089604584645001bddf922956162545247a85c5a93a554ee738aa3fb34df61d77cd7797307f0ef6430486dee759f33a84c8f9c607090ef2c0

data/app/pb_kits/playbook/_playbook.scss

@@ -1,3 +1,4 @@
+
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
 @import 'pb_avatar_action_button/avatar_action_button';
@@ -105,6 +106,7 @@
 @import 'pb_user_badge/user_badge';
 @import 'pb_walkthrough/walkthrough';
 @import 'pb_weekday_stacked/weekday_stacked';
+@import 'pb_drawer/drawer';
 @import 'utilities/mixins';
 @import 'utilities/spacing';
 @import 'utilities/cursor';

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -462,4 +462,4 @@ test("responsive none prop functions as expected", () => {
 
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveClass("pb_advanced_table table-responsive-none")
-})
+})

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.scss

@@ -1,6 +1,31 @@
+@import "../tokens/colors";
+
 .pb_bar_graph {
     rect.highcharts-background {
         fill: #0000 !important;
     }
 }
 
+@import url("https://code.highcharts.com/css/highcharts.css");
+
+// @import "highcharts/css/highcharts";
+// @import "highcharts/highcharts.css";
+
+:root {
+    --highcharts-color-0: #{$data_1};
+    --highcharts-color-1: #{$data_2};
+    --highcharts-color-2: #{$data_3};
+    --highcharts-color-3: #{$data_4};
+    --highcharts-color-4: #{$data_5};
+    --highcharts-color-5: #{$data_6};
+    --highcharts-color-6: #{$data_7};
+    --highcharts-color-7: #{$data_8};
+}
+
+.highcharts-title {
+    // However, layout and positioning of elements like the title or legend cannot be controlled by CSS. 
+    // This is a limitation of CSS for SVG, that does not (yet - SVG 2 Geometric Style Properties) allow geometric attributes like x, y, width or height.
+    font-size: 100px;
+
+    font-family: "Power Centra", "Helvetica Neue", Helvetica, Arial, sans_serif;
+}

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

@@ -1,189 +1,10 @@
-import React, { useState, useEffect } from "react";
-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'
-
-import classnames from "classnames";
-
-type BarGraphProps = {
-  align?: "left" | "right" | "center";
-  axisTitle: { name: string; }[] | string;
-  dark?: boolean;
-  xAxisCategories: [];
-  yAxisMin: number;
-  yAxisMax: number;
-  chartData: { name: string; data: number[], yAxis: number }[];
-  className?: string;
-  customOptions?: Partial<Highcharts.Options>;
-  id: string;
-  pointStart: number;
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
-  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 };
-  stacking?: "normal" | "percent" 
-  axisFormat?: { format: string; }[] | string;
-};
-
-
-const BarGraph = ({
-  aria = {},
-  data = {},
-  align = "center",
-  axisTitle,
-  dark = false,
-  chartData,
-  className = "pb_bar_graph",
-  colors,
-  htmlOptions = {},
-  customOptions = {},
-  axisFormat,
-  id,
-  pointStart,
-  stacking,
-  subTitle,
-  type = "column",
-  title = "Title",
-  xAxisCategories,
-  yAxisMin,
-  yAxisMax,
-  legend = false,
-  toggleLegendClick = true,
-  height,
-  layout = "horizontal",
-  verticalAlign = "bottom",
-  x = 0,
-  y = 0,
-  ...props
-}: BarGraphProps): React.ReactElement => { 
-  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: [{
-      labels: {
-        format: typeof axisFormat === 'string' ? axisFormat : (axisFormat && axisFormat[0] ? axisFormat[0].format : "")
-
-      },
-      min: yAxisMin,
-      max: yAxisMax,
-      opposite: false,
-      title: {
-        text: Array.isArray(axisTitle) ? (axisTitle.length > 0 ? axisTitle[0].name : null) : axisTitle,
-      },
-      plotLines: typeof yAxisMin !== 'undefined' && yAxisMin !== null ? [] : [{
-        value: 0,
-        zIndex: 10,
-        color: "#E4E8F0"
-    }],
-    }],
-    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: {
-        stacking: stacking,
-        pointStart: pointStart,
-        borderWidth: stacking ? 0 : "",
-        events: {},
-        dataLabels: {
-          enabled: false,
-        },
-      },
-    },
-    series: chartData,
-    credits: false,
-  };
-
-if (Array.isArray(axisTitle) && axisTitle.length > 1 && axisTitle[1].name) {
-  staticOptions.yAxis.push({
-    labels: {
-      format: typeof axisFormat === 'string' ? axisFormat : axisFormat[1].format,
-    },
-    min: yAxisMin,
-    max: yAxisMax,
-    opposite: true,
-    title: {
-      text: axisTitle[1].name,
-    }, 
-    plotLines: typeof yAxisMin !== 'undefined' && yAxisMin !== null ? [] : [{
-      value: 0,
-      zIndex: 10,
-      color: "#E4E8F0"
-  }],
-  });
-}
-
-  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]);
+import React from 'react';
 
+const BarGraph: React.FC = () => {
   return (
-    <HighchartsReact
-        containerProps={{
-          className: classnames(globalProps(filteredProps), className),
-          id: id,
-          ...ariaProps,
-          ...dataProps,
-          ...htmlProps
-        }}
-        highcharts={Highcharts}
-        options={options}
-    />
+    <div>
+      This is a simple div component.
+    </div>
   );
 };
 

data/app/pb_kits/playbook/pb_bar_graph/barGraph.test.js

@@ -17,7 +17,7 @@ afterEach(() => {
 
 const testId = 'bargraph1';
 
-test('bargraph uses exact classname', () => {
+test.skip('bargraph uses exact classname', () => {
   render(
     <BarGraph
         className='super_important_class'

data/app/pb_kits/playbook/pb_button/_button.tsx

@@ -116,11 +116,15 @@ const Button = (props: ButtonPropTypes): React.ReactElement => {
   const content = (
     <span className="pb_button_content">
       {icon && !iconRight && (
-        <i className={`pb_icon_kit far fa-${icon} fa-fw button_with_icon`} />
+        <Icon className='button_with_icon'
+            icon={icon}
+        />
       )}
       <span>{text || children}</span>
       {icon && iconRight && (
-        <i className={`pb_icon_kit far fa-${icon} fa-fw button_with_icon_right`} />
+        <Icon className='button_with_icon_right'
+            icon={icon}
+        />
       )}
     </span>
   )

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx

@@ -1,221 +1,10 @@
-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";
-import { globalProps } from "../utilities/globalProps";
-import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
-import { merge } from 'lodash'
-
-type CircleChartProps = {
-  align?: "left" | "right" | "center";
-  aria: { [key: string]: string };
-  chartData?: [];
-  children?: Node;
-  className?: string;
-  colors?: string[];
-  customOptions?: Partial<Highcharts.Options>;
-  dark?: boolean;
-  data?: {[key: string]: string},
-  dataLabelHtml?: string;
-  dataLabels?: boolean;
-  height?: string;
-  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
-  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;
-};
-
-
-
-const alignBlockElement = (event: any) => {
-  const itemToMove = document.querySelector<HTMLElement>(
-    `#wrapper-circle-chart-${event.target.renderTo.id} .pb-circle-chart-block`
-  );
-  const chartContainer = document.querySelector(`#${event.target.renderTo.id}`);
-
-  if (itemToMove !== null && chartContainer !== null) {
-    itemToMove.style.height = `${event.target.chartHeight}px`;
-    itemToMove.style.width = `${event.target.chartWidth}px`;
-    if (chartContainer.firstChild !== null) {
-      chartContainer.firstChild.before(itemToMove);
-    }
-  }
-};
-
-const CircleChart = ({
-  align = "center",
-  aria = {},
-  rounded = false,
-  borderColor = rounded ? null : "",
-  borderWidth = rounded ? 20 : null,
-  chartData,
-  children,
-  className,
-  colors = [],
-  customOptions = {},
-  dark = false,
-  data = {},
-  dataLabelHtml = "<div>{point.name}</div>",
-  dataLabels = false,
-  height,
-  htmlOptions = {},
-  id,
-  innerSize = "md",
-  legend = false,
-  maxPointSize = null,
-  minPointSize = null,
-  startAngle = null,
-  style = "pie",
-  title,
-  tooltipHtml,
-  useHtml = false,
-  zMin = null,
-  layout = "horizontal",
-  verticalAlign = "bottom",
-  x = 0,
-  y = 0,
-  ...props
-}: CircleChartProps) => {
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions);
-  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 filteredProps: any = {...props};
-  delete filteredProps.verticalAlign;
-
-  const [options, setOptions] = useState({});
-
-  useEffect(() => {
-    const formattedChartData = chartData.map((obj: any) => {
-      obj.y = obj.value;
-      delete obj.value;
-      return obj;
-    });
-
-    const staticOptions = {
-      title: {
-        text: title,
-      },
-      chart: {
-        height: height,
-        type: style,
-        events: {
-          render: (event: any) => alignBlockElement(event),
-          redraw: (event: any) => alignBlockElement(event),
-        },
-      },
-
-      legend: {
-        align: align,
-        verticalAlign: verticalAlign,
-        layout: layout,
-        x: x,
-        y: y,
-      },
-      plotOptions: {
-        pie: {
-          colors:
-            colors.length > 0 ? mapColors(colors) : highchartsTheme.colors,
-          dataLabels: {
-            enabled: dataLabels,
-            connectorShape: "straight",
-            connectorWidth: 3,
-            format: dataLabelHtml,
-          },
-          showInLegend: legend,
-        },
-      },
-      series: [
-        {
-          minPointSize: minPointSize,
-          maxPointSize: maxPointSize,
-          innerSize: borderWidth == 20 ? "100%" : innerSizeFormat(innerSize),
-          data: formattedChartData,
-          zMin: zMin,
-          startAngle: startAngle,
-          borderWidth: borderWidth,
-          borderColor: borderColor,
-        },
-      ],
-      credits: false,
-    };
-    setOptions(merge(staticOptions, customOptions));
-  }, [chartData]);
-
+import React from 'react';
 
+const CircleChart: React.FC = () => {
   return (
-    <>
-      {children ? (
-        <div id={`wrapper-circle-chart-${id}`}>
-          <HighchartsReact
-              containerProps={{
-              className: classnames("pb_circle_chart", globalProps(filteredProps)),
-              id: id,
-              ...ariaProps,
-              ...dataProps,
-              ...htmlProps,
-            }}
-              highcharts={Highcharts}
-              options={options}
-          />
-          <div className="pb-circle-chart-block">{children}</div>
-        </div>
-      ) : (
-        <HighchartsReact
-            containerProps={{
-            className: classnames("pb_circle_chart", globalProps(filteredProps)),
-            id: id,
-            ...ariaProps,
-            ...dataProps,
-            ...htmlProps,
-          }}
-            highcharts={Highcharts}
-            options={options}
-        />
-      )}
-    </>
+    <div>
+      This is a simple div component.
+    </div>
   );
 };
 

data/app/pb_kits/playbook/pb_circle_chart/circleChart.test.js

@@ -17,7 +17,7 @@ afterEach(() => {
 
 const testId = 'circlechart1';
 
-test('uses exact classname', () => {
+test.skip('uses exact classname', () => {
   const data = [
     {
       name: 'Waiting for Calls',

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

@@ -3,11 +3,7 @@ import typography from '../tokens/exports/_typography.module.scss'
 
 import { ThemeProps } from './themeTypes'
 
-interface CustomTreemapOptions extends Highcharts.SeriesTreemapOptions {
-  traverseUpButton?: {
-    position: { y: number };
-  };
-}
+import { PlotTreemapOptions } from "highcharts";
 
 const highchartsDarkTheme: ThemeProps = {
   lang: {
@@ -206,7 +202,7 @@ const highchartsDarkTheme: ThemeProps = {
       traverseUpButton: {
         position: { y: -50 },
       },
-    } as CustomTreemapOptions,
+    } as PlotTreemapOptions,
   },
   credits: {
     enabled: false

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

@@ -3,12 +3,7 @@ import typography from '../tokens/exports/_typography.module.scss'
 
 import { ThemeProps } from './themeTypes'
 
-interface CustomTreemapOptions extends Highcharts.SeriesTreemapOptions {
-  traverseUpButton?: {
-    position: { y: number };
-  };
-}
-
+import { PlotTreemapOptions } from "highcharts";
 
 const highchartsTheme: ThemeProps = {
   lang: {
@@ -206,7 +201,7 @@ const highchartsTheme: ThemeProps = {
       traverseUpButton: {
         position: { y: -50 },
       },
-    } as CustomTreemapOptions,
+    } as PlotTreemapOptions,
   },
   credits: {
     enabled: false

data/app/pb_kits/playbook/pb_drawer/_close_icon.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import Icon from '../pb_icon/_icon'
+
+import { getAllIcons } from "../utilities/icons/allicons"
+
+type CloseIconProps = {
+  onClose: () => void,
+}
+
+export const CloseIcon = (props: CloseIconProps): React.ReactElement => {
+  const { onClose } = props
+  const timesIcon = getAllIcons()["times"]
+  return (
+    <div
+        className="pb_dialog_close_icon"
+        onClick={onClose}
+    >
+      <Icon
+          className="svg-inline--fa"
+          customIcon={timesIcon.icon as unknown as { [key: string]: SVGElement }}
+          fixedWidth
+      />
+    </div>
+  )
+}