playbook_ui 14.5.0.pre.alpha.PLAY1486highchartscssdrivenPOC3954 → 14.5.0.pre.alpha.PLAY1510railsformloading3976

data/app/pb_kits/playbook/pb_map/pbMapTheme.ts

@@ -1,201 +1,23 @@
 import colors from '../tokens/exports/_colors.module.scss'
-import typography from '../tokens/exports/_typography.module.scss'
 
 const mapTheme = {
-  lang: {
-    thousandsSep: ',',
-  },
-  colors: [
-    colors.data_1,
-    colors.data_2,
-    colors.data_3,
-    colors.data_4,
-    colors.data_5,
-    colors.data_6,
-    colors.data_7,
-  ],
-  chart: {
-    borderWidth: 0,
-    borderRadius: 0,
-    plotShadow: false,
-    plotBorderWidth: 0,
-  },
-  title: {
-    style: {
-      color: colors.text_lt_default,
-      fontFamily: typography.font_family_base,
-      fontWeight: typography.bold,
-      fontSize: typography.heading_3,
-    },
-  },
-  subtitle: {
-    style: {
-      fontFamily: typography.font_family_base,
-      color: colors.text_lt_light,
-      fontWeight: typography.regular,
-      fontSize: typography.text_base,
-    },
-  },
-  xAxis: {
-    gridLineWidth: 0,
-    lineColor: colors.border_light,
-    tickColor: colors.border_light,
-    labels: {
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_lt_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
-      },
-    },
-    title: {
-      style: {
-        color: colors.text_lt_default,
-        fontFamily: typography.font_family_base,
-        fontWeight: typography.regular,
-        fontSize: typography.heading_4,
-      },
-    },
-  },
-  yAxis: {
-    gridLineColor: colors.border_light,
-    minorGridLineColor: colors.border_light,
-    lineWidth: 0,
-    tickWidth: 0,
-    labels: {
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_lt_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
-      },
-    },
-    title: {
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_lt_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
-      },
-    },
-  },
-  legend: {
-    layout: 'horizontal',
-    align: 'center',
-    verticalAlign: 'bottom',
-    itemStyle: {
-      fontFamily: typography.font_family_base,
-      color: colors.text_lt_light,
-      fontWeight: typography.regular,
-      fontSize: typography.text_smaller,
-    },
-    itemHoverStyle: {
-      color: colors.text_lt_default,
-    },
-    itemHiddenStyle: {
-      color: colors.text_lt_lighter,
-    },
-  },
-  tooltip: {
-    backgroundColor: {
-      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-      stops: [
-        [0, colors.bg_dark],
-        [1, colors.bg_dark],
-      ],
-    },
-    shadow: false,
-    borderWidth: 0,
-    borderRadius: 10,
-    style: {
-      fontFamily: typography.font_family_base,
-      color: colors.text_dk_default,
-      fontWeight: typography.regular,
-      fontSize: typography.text_smaller,
-    },
-  },
-  // specific to gauge
-  // unfilled gauge color
-  pane: {
-    background: {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment 
-      // @ts-ignore
-      borderColor: colors.border_light, 
-    },
-  },
-
-  plotOptions: {
-    // PIE STYLES
-    pie: {
-      colors: [
-        colors.data_1,
-        colors.data_2,
-        colors.data_3,
-        colors.data_4,
-        colors.data_5,
-        colors.data_6,
-        colors.data_7,
-      ],
-      dataLabels: {
-        style: {
-          fontFamily: typography.font_family_base,
-          fontSize: typography.text_smaller,
-          color: colors.text_lt_light,
-          fontWeight: typography.regular,
-          textOutline: '2px $white',
-        },
-      },
-    },
-
-    // LINE CHART STYLES
-    line: {
-      dataLabels: {
-        color: '#CCC',
-      },
-      marker: {
-        lineColor: '#333',
-      },
-    },
-
-    //TREEMAP CHART STYLES
-    treemap: {
-      layoutAlgorithm: "squarified",
-      allowTraversingTree: false,
-      animationLimit: 1000,
-      colors: [
-        colors.data_1,
-        colors.data_2,
-        colors.data_3,
-        colors.data_4,
-        colors.data_5,
-        colors.data_6,
-        colors.data_7,
-        colors.data_8,
-      ],
-      dataLabels: {
-        enabled: true,
-        style: {
-          fontFamily: typography.font_family_base,
-          fontWeight: typography.bold,
-          fontSize: typography.heading_4,
-        },
-      },
-      levels: [
-        {
-          level: 1,
-          dataLabels: {
-            enabled: false,
-          },
-        },
-      ],
-      traverseUpButton: {
-        position: { y: -50 },
-      },
-    },
-  },
-  credits: {
-    enabled: false
-  },
+    marker : colors.primary_action,
+    maptiles: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
+    flyToConfig: {
+        zoom: 13,
+        bearing: 0,
+        curve: 1.42, // change the speed at which it zooms
+               easing: function (t: any) {
+                return t;
+                },
+        essential: true
+    },
+    zoomConfig: { duration:1000 },
+    mapConfig: {
+            style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
+            zoom: 13,
+            attributionControl: false,
+    }
 }
 
 export default mapTheme

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",

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -136,12 +136,15 @@ const Typeahead = ({
     }
   }
 
+  const filteredProps: TypeaheadProps = {...props}
+  delete filteredProps.truncate
+
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     'pb_typeahead_kit react-select',
     `mb_${marginBottom}`,
-    globalProps(props),
+    globalProps(filteredProps),
     className
   )
 

data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx

@@ -16,7 +16,7 @@ type Props = {
 const MultiValue = (props: Props) => {
   const { removeProps } = props
   const { imageUrl, label } = props.data
-  const { dark, multiKit, pillColor } = props.selectProps
+  const { dark, multiKit, pillColor, truncate } = props.selectProps
 
   const formPillProps = {
     marginRight: 'xs',
@@ -51,6 +51,7 @@ const MultiValue = (props: Props) => {
             name={label}
             size={multiKit === 'smallPill' ? 'small' : ''}
             text=''
+            truncate={truncate}
             {...props}
         />
       }
@@ -64,6 +65,7 @@ const MultiValue = (props: Props) => {
             name=''
             size={multiKit === 'smallPill' ? 'small' : ''}
             text={label}
+            truncate={truncate}
             {...props}
         />
       }

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -65,10 +65,10 @@ module Playbook
       def typeahead_react_options
         base_options = {
           className: classname,
-          pillColor: pill_color,
           dark: dark,
           defaultValue: default_options,
           error: error,
+          htmlOptions: html_options,
           id: id,
           inline: inline,
           isMulti: is_multi,
@@ -77,8 +77,10 @@ module Playbook
           multiKit: multi_kit,
           name: name,
           options: options,
+          pillColor: pill_color,
           placeholder: placeholder,
           plusIcon: plus_icon,
+          truncate: truncate,
         }
 
         base_options[:getOptionLabel] = get_option_label if get_option_label.present?