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

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

@@ -6,510 +6,258 @@ import { ThemeProps } from './themeTypes'
 //import Highcharts from 'highcharts'
 
 const pbButtonHoverColor = '#004ebb'
-// 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,
-//     },
-//   },
-//   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_4,
-//       },
-//     },
-//   },
-//   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,
-//       },
-//     },
-//     title: {
-//       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'],
-//         ],
-//       },
-//       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,
-//       },
-//       marker: {
-//         lineColor: colors.border_dark,
-//       },
-//       area: {
-//         shadow: false,
-//         states: {
-//           hover: {
-//             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: {
-//           fontFamily: typography.font_family_base,
-//           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,
-//         },
-//       },
-//     },
-//   },
-//   credits: {
-//     enabled: false
-//   },
-// }
-
 function highchartsDarkTheme(highcharts: any): ThemeProps {
   return {
-  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,
+    lang: {
+      thousandsSep: ',',
     },
-  },
-  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,
-      },
+    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_4,
+        fontSize: typography.heading_3,
       },
     },
-  },
-  yAxis: {
-    alternateGridColor: null,
-    minorTickInterval: null,
-    gridLineColor: colors.border_dark,
-    minorGridLineColor: colors.border_dark,
-    lineWidth: 0,
-    tickWidth: 0,
-    labels: {
+    subtitle: {
       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,
+        fontSize: typography.text_base,
       },
     },
-    title: {
-      style: {
-        fontFamily: typography.font_family_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,
+        },
       },
-    },
-  },
-  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,
+      title: {
+        style: {
+          color: colors.text_dk_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_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,
+        },
+      },
+      title: {
+        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,
         },
       },
     },
-
-    // LINE CHART STYLES
-    line: {
-      dataLabels: {
+    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,
       },
-      marker: {
-        lineColor: colors.border_dark,
+      itemHoverStyle: {
+        color: colors.text_dk_default,
       },
-      area: {
-        shadow: false,
-        states: {
-          hover: {
-            lineWidth: 1,
-          },
-        },
-        threshold: null,
+      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,
       },
     },
 
-    //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: {
+        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'],
+          ],
         },
+        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_dk_light,
+            fontWeight: typography.regular,
           },
         },
-      ],
-      traverseUpButton: {
-        position: { y: -50 },
-        text: '< Back',
-        theme: {
-          r: 4,
+      },
+
+      // LINE CHART STYLES
+      line: {
+        dataLabels: {
+          color: colors.text_dk_light,
+        },
+        marker: {
+          lineColor: colors.border_dark,
+        },
+        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 { highchartsDarkTheme }