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

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

@@ -3,257 +3,259 @@ import typography from '../tokens/exports/_typography.scss'
 
 import { ThemeProps } from './themeTypes'
 
-import Highcharts from 'highcharts'
+//import Highcharts from 'highcharts'
 
 const pbButtonHoverColor = '#004ebb'
-const highchartsTheme: ThemeProps = {
-  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,
-    plotBackgroundColor: null,
-    plotShadow: false,
-    plotBorderWidth: 0,
-  },
-  title: {
-    style: {
-      color: colors.text_lt_default,
-      fontFamily: typography.font_family_base,
-      fontWeight: typography.regular,
-      fontSize: typography.heading_3,
+function highchartsTheme(highcharts: any): ThemeProps {
+  return {
+    lang: {
+      thousandsSep: ',',
     },
-  },
-  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,
-      },
+    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,
+      plotBackgroundColor: null,
+      plotShadow: false,
+      plotBorderWidth: 0,
     },
     title: {
       style: {
         color: colors.text_lt_default,
         fontFamily: typography.font_family_base,
         fontWeight: typography.regular,
-        fontSize: typography.heading_4,
+        fontSize: typography.heading_3,
       },
     },
-  },
-  yAxis: {
-    alternateGridColor: null,
-    minorTickInterval: null,
-    gridLineColor: colors.border_light,
-    minorGridLineColor: colors.border_light,
-    lineWidth: 0,
-    tickWidth: 0,
-    labels: {
+    subtitle: {
       style: {
         fontFamily: typography.font_family_base,
-        color: colors.text_lt_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
+        color: colors.text_lt_light,
+        fontWeight: typography.regular,
+        fontSize: typography.text_base,
       },
     },
-    title: {
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_lt_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
+    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,
+        },
       },
-    },
-  },
-  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,
-    },
-  },
-  labels: {
-    style: {
-      color: colors.primary,
-    },
-  },
-  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: {
-      borderColor: colors.border_light,
-    },
-  },
-
-  plotOptions: {
-    series: {
-      type: 'area',
-      nullColor: colors.text_lt_lighter,
-      fillColor: {
-        linearGradient: {
-          x1: 0,
-          y1: 0,
-          x2: 0,
-          y2: 1,
+      title: {
+        style: {
+          color: colors.text_lt_default,
+          fontFamily: typography.font_family_base,
+          fontWeight: typography.regular,
+          fontSize: typography.heading_4,
         },
-        stops: [
-          [0, Highcharts.getOptions().colors[0]],
-          [1, 'white'],
-        ],
       },
-      threshold: null,
     },
-    // 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: {
+    yAxis: {
+      alternateGridColor: null,
+      minorTickInterval: null,
+      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,
-          color: colors.text_lt_light,
-          fontWeight: typography.regular,
         },
       },
     },
-
-    // LINE CHART STYLES
-    line: {
-      dataLabels: {
-        color: '#CCC',
+    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,
       },
-      marker: {
-        lineColor: '#333',
+      itemHoverStyle: {
+        color: colors.text_lt_default,
       },
-      area: {
-        shadow: false,
-        states: {
-          hover: {
-            lineWidth: 1,
-          },
-        },
-        threshold: null,
+      itemHiddenStyle: {
+        color: colors.text_lt_lighter,
+      },
+    },
+    labels: {
+      style: {
+        color: colors.primary,
+      },
+    },
+    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: {
+        borderColor: colors.border_light,
       },
     },
 
-    //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,
-      ],
-      colorByPoint: true,
-      dataLabels: {
-        enabled: true,
-        style: {
-          fontFamily: typography.font_family_base,
-          fontWeight: typography.bold,
-          fontSize: typography.heading_4,
+    plotOptions: {
+      series: {
+        type: 'area',
+        nullColor: colors.text_lt_lighter,
+        fillColor: {
+          linearGradient: {
+            x1: 0,
+            y1: 0,
+            x2: 0,
+            y2: 1,
+          },
+          stops: [
+            [0, highcharts.getOptions().colors[0]],
+            [1, 'white'],
+          ],
         },
+        threshold: null,
       },
-      levels: [
-        {
-          level: 1,
-          dataLabels: {
-            enabled: false,
+      // 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,
           },
         },
-      ],
-      traverseUpButton: {
-        position: { y: -50 },
-        text: '< Back',
-        theme: {
-          r: 4,
+      },
+
+      // LINE CHART STYLES
+      line: {
+        dataLabels: {
+          color: '#CCC',
+        },
+        marker: {
+          lineColor: '#333',
+        },
+        area: {
+          shadow: false,
           states: {
             hover: {
-              style: {
-                fill: pbButtonHoverColor,
-              },
+              lineWidth: 1,
             },
           },
+          threshold: null,
+        },
+      },
+
+      //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,
+        ],
+        colorByPoint: true,
+        dataLabels: {
+          enabled: true,
           style: {
-            fill: colors.royal,
-            color: colors.white,
-            fontSize: `${typography.text_small}`,
+            fontFamily: typography.font_family_base,
             fontWeight: typography.bold,
-            fontFamily: `${typography.font_family_base}`,
+            fontSize: typography.heading_4,
+          },
+        },
+        levels: [
+          {
+            level: 1,
+            dataLabels: {
+              enabled: false,
+            },
+          },
+        ],
+        traverseUpButton: {
+          position: { y: -50 },
+          text: '< Back',
+          theme: {
+            r: 4,
+            states: {
+              hover: {
+                style: {
+                  fill: pbButtonHoverColor,
+                },
+              },
+            },
+            style: {
+              fill: colors.royal,
+              color: colors.white,
+              fontSize: `${typography.text_small}`,
+              fontWeight: typography.bold,
+              fontFamily: `${typography.font_family_base}`,
+            },
+            stroke: colors.royal,
+            height: 24,
+            width: 90,
           },
-          stroke: colors.royal,
-          height: 24,
-          width: 90,
         },
       },
     },
-  },
-  credits: {
-    enabled: false
-  },
+    credits: {
+      enabled: false
+    },
+  }
 }
 
 export { highchartsTheme }

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

@@ -17,7 +17,7 @@ type GaugeProps = {
   aria: { [key: string]: string },
   className?: string,
   chartData?: { name: string, value: number[] | number }[],
-  dark?: boolean,
+  dark?: Boolean,
   data?: { [key: string]: string },
   disableAnimation?: boolean,
   fullCircle?: boolean,
@@ -54,7 +54,7 @@ const Gauge = ({
   suffix = "",
   title = "",
   tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
-  "<b>{point.y}</b>",
+    "<b>{point.y}</b>",
   colors = [],
   minorTickInterval = null,
   circumference = fullCircle ? [0, 360] : [-100, 100],
@@ -125,7 +125,7 @@ const Gauge = ({
       colors:
         colors !== undefined && colors.length > 0
           ? mapColors(colors)
-          : highchartsTheme.colors,
+          : highchartsTheme(window.Highcharts).colors,
       plotOptions: {
         series: {
           animation: !disableAnimation,
@@ -134,7 +134,7 @@ const Gauge = ({
           borderColor:
             colors !== undefined && colors.length === 1
               ? mapColors(colors).join()
-              : highchartsTheme.colors[0],
+              : highchartsTheme(window.Highcharts).colors[0],
           borderWidth: 20,
           radius: 90,
           innerRadius: "90%",
@@ -162,7 +162,7 @@ const Gauge = ({
     const interval = setInterval(() => {
       if (window.Highcharts) {
         clearInterval(interval)
-
+        
         const gaugeInterval = setInterval(() => {
           if (document.querySelector(".prefix")) {
             clearInterval(gaugeInterval)
@@ -177,11 +177,11 @@ const Gauge = ({
 
         dark
           ? window.Highcharts.setOptions(highchartsDarkTheme(window.Highcharts))
-          : window.Highcharts.setOptions(highchartsTheme)
-
+          : window.Highcharts.setOptions(highchartsTheme(window.Highcharts))
+        
         highchartsMore(window.Highcharts);
         solidGauge(window.Highcharts);
-
+      
         //set tooltip directly to prevent being overriden by window.Highcharts defaults
         window.Highcharts.setOptions({
           tooltip: {

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

@@ -12,7 +12,7 @@ import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 type LineGraphProps = {
   align?: "left" | "right" | "center",
   axisTitle?: string,
-  dark?: boolean,
+  dark?: Boolean,
   xAxisCategories: [],
   yAxisMin: number,
   yAxisMax: number,
@@ -101,7 +101,7 @@ const LineGraph = ({
     colors:
       colors !== undefined && colors.length > 0
         ? mapColors(colors)
-        : highchartsTheme.colors,
+        : highchartsTheme(window.Highcharts).colors,
     plotOptions: {
       series: {
         pointStart: pointStart,
@@ -130,7 +130,7 @@ const LineGraph = ({
         clearInterval(interval)
         dark
           ? window.Highcharts.setOptions(highchartsDarkTheme(window.Highcharts))
-          : window.Highcharts.setOptions(highchartsTheme)
+          : window.Highcharts.setOptions(highchartsTheme(window.Highcharts))
         setIsHighchartsLoaded(true)
       }
     }, 0)