playbook_ui 13.12.0.pre.alpha.play1051testhighcharts1580 → 13.12.0.pre.alpha.play10281596

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

@@ -3,261 +3,259 @@ import typography from '../tokens/exports/_typography.scss'
 
 import { ThemeProps } from './themeTypes'
 
-//import Highcharts from 'highcharts'
+import Highcharts from 'highcharts'
 
 const pbButtonHoverColor = '#004ebb'
-function highchartsDarkTheme(highcharts: any): ThemeProps {
-  return {
-    lang: {
-      thousandsSep: ',',
+const highchartsDarkTheme: 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_dk_default,
+      fontFamily: typography.font_family_base,
+      fontWeight: typography.regular,
+      fontSize: typography.heading_3,
     },
-    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,
+  },
+  subtitle: {
+    style: {
+      fontFamily: typography.font_family_base,
+      color: colors.text_dk_light,
+      fontWeight: typography.regular,
+      fontSize: typography.text_base,
+    },
+  },
+  xAxis: {
+    gridLineWidth: 0,
+    lineColor: colors.border_dark,
+    tickColor: colors.border_dark,
+    labels: {
+      style: {
+        fontFamily: typography.font_family_base,
+        color: colors.text_dk_lighter,
+        fontWeight: typography.bold,
+        fontSize: typography.text_smaller,
+      },
     },
     title: {
       style: {
         color: colors.text_dk_default,
         fontFamily: typography.font_family_base,
         fontWeight: typography.regular,
-        fontSize: typography.heading_3,
+        fontSize: typography.heading_4,
       },
     },
-    subtitle: {
+  },
+  yAxis: {
+    alternateGridColor: null,
+    minorTickInterval: null,
+    gridLineColor: colors.border_dark,
+    minorGridLineColor: colors.border_dark,
+    lineWidth: 0,
+    tickWidth: 0,
+    labels: {
       style: {
         fontFamily: typography.font_family_base,
-        color: colors.text_dk_light,
-        fontWeight: typography.regular,
-        fontSize: typography.text_base,
+        color: colors.text_dk_lighter,
+        fontWeight: typography.bold,
+        fontSize: typography.text_smaller,
       },
     },
-    xAxis: {
-      gridLineWidth: 0,
-      lineColor: colors.border_dark,
-      tickColor: colors.border_dark,
-      labels: {
-        style: {
-          fontFamily: typography.font_family_base,
-          color: colors.text_dk_lighter,
-          fontWeight: typography.bold,
-          fontSize: typography.text_smaller,
-        },
-      },
-      title: {
-        style: {
-          color: colors.text_dk_default,
-          fontFamily: typography.font_family_base,
-          fontWeight: typography.regular,
-          fontSize: typography.heading_4,
-        },
+    title: {
+      style: {
+        fontFamily: typography.font_family_base,
+        color: colors.text_dk_lighter,
+        fontWeight: typography.bold,
+        fontSize: typography.text_smaller,
       },
     },
-    yAxis: {
-      alternateGridColor: null,
-      minorTickInterval: null,
-      gridLineColor: colors.border_dark,
-      minorGridLineColor: colors.border_dark,
-      lineWidth: 0,
-      tickWidth: 0,
-      labels: {
-        style: {
-          fontFamily: typography.font_family_base,
-          color: colors.text_dk_lighter,
-          fontWeight: typography.bold,
-          fontSize: typography.text_smaller,
+  },
+  legend: {
+    layout: 'horizontal',
+    align: 'center',
+    verticalAlign: 'bottom',
+    itemStyle: {
+      fontFamily: typography.font_family_base,
+      color: colors.text_dk_light,
+      fontWeight: typography.regular,
+      fontSize: typography.text_smaller,
+    },
+    itemHoverStyle: {
+      color: colors.text_dk_default,
+    },
+    itemHiddenStyle: {
+      color: colors.text_dk_lighter,
+    },
+  },
+  labels: {
+    style: {
+      color: colors.primary,
+    },
+  },
+  tooltip: {
+    backgroundColor: {
+      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+      stops: [
+        [0, colors.card_light],
+        [1, colors.card_light],
+      ],
+    },
+    shadow: false,
+    borderWidth: 0,
+    borderRadius: 10,
+    style: {
+      fontFamily: typography.font_family_base,
+      color: colors.text_lt_default,
+      fontWeight: typography.regular,
+      fontSize: typography.text_smaller,
+    },
+  },
+  // specific to gauge
+  // unfilled gauge color
+  pane: {
+    background: {
+      borderColor: colors.border_dark,
+    },
+  },
+
+  plotOptions: {
+    series: {
+      borderColor: colors.bg_dark_card,
+      borderWidth: 2,
+      type: 'area',
+      nullColor: colors.text_dk_lighter,
+      fillColor: {
+        linearGradient: {
+          x1: 0,
+          y1: 0,
+          x2: 0,
+          y2: 1,
         },
+        stops: [
+          [0, Highcharts.getOptions().colors[0]],
+          [1, 'white'],
+        ],
       },
-      title: {
+      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: {
         style: {
           fontFamily: typography.font_family_base,
-          color: colors.text_dk_lighter,
-          fontWeight: typography.bold,
           fontSize: typography.text_smaller,
+          color: colors.text_dk_light,
+          fontWeight: typography.regular,
         },
       },
     },
-    legend: {
-      layout: 'horizontal',
-      align: 'center',
-      verticalAlign: 'bottom',
-      itemStyle: {
-        fontFamily: typography.font_family_base,
+
+    // LINE CHART STYLES
+    line: {
+      dataLabels: {
         color: colors.text_dk_light,
-        fontWeight: typography.regular,
-        fontSize: typography.text_smaller,
-      },
-      itemHoverStyle: {
-        color: colors.text_dk_default,
-      },
-      itemHiddenStyle: {
-        color: colors.text_dk_lighter,
-      },
-    },
-    labels: {
-      style: {
-        color: colors.primary,
-      },
-    },
-    tooltip: {
-      backgroundColor: {
-        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-        stops: [
-          [0, colors.card_light],
-          [1, colors.card_light],
-        ],
-      },
-      shadow: false,
-      borderWidth: 0,
-      borderRadius: 10,
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_lt_default,
-        fontWeight: typography.regular,
-        fontSize: typography.text_smaller,
       },
-    },
-    // specific to gauge
-    // unfilled gauge color
-    pane: {
-      background: {
-        borderColor: colors.border_dark,
+      marker: {
+        lineColor: colors.border_dark,
       },
-    },
-
-    plotOptions: {
-      series: {
-        borderColor: colors.bg_dark_card,
-        borderWidth: 2,
-        type: 'area',
-        nullColor: colors.text_dk_lighter,
-        fillColor: {
-          linearGradient: {
-            x1: 0,
-            y1: 0,
-            x2: 0,
-            y2: 1,
+      area: {
+        shadow: false,
+        states: {
+          hover: {
+            lineWidth: 1,
           },
-          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: {
-          style: {
-            fontFamily: typography.font_family_base,
-            fontSize: typography.text_smaller,
-            color: colors.text_dk_light,
-            fontWeight: typography.regular,
-          },
-        },
-      },
+    },
 
-      // LINE CHART STYLES
-      line: {
-        dataLabels: {
-          color: colors.text_dk_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,
         },
-        marker: {
-          lineColor: colors.border_dark,
+      },
+      levels: [
+        {
+          level: 1,
+          dataLabels: {
+            enabled: false,
+          },
         },
-        area: {
-          shadow: false,
+      ],
+      traverseUpButton: {
+        position: { y: -50 },
+        text: '< Back',
+        theme: {
+          r: 4,
           states: {
             hover: {
-              lineWidth: 1,
+              style: {
+                fill: pbButtonHoverColor,
+              },
             },
           },
-          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: {
-            fontFamily: typography.font_family_base,
+            fill: colors.royal,
+            color: colors.white,
+            fontSize: `${typography.text_small}`,
             fontWeight: typography.bold,
-            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,
+            fontFamily: `${typography.font_family_base}`,
           },
+          stroke: colors.royal,
+          height: 24,
+          width: 90,
         },
       },
     },
-    credits: {
-      enabled: false
-    },
-  }
+  },
+  credits: {
+    enabled: false
+  },
 }
 
 export { highchartsDarkTheme }