[PLAY-1351] Upgrade Highcharts

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, screen } from '../utilities/test-utils';
+import BarGraph from './_bar_graph';
+
+beforeEach(() => {
+  // Silences error logs within the test suite.
+  jest.spyOn(console, 'error');
+  jest.spyOn(console, 'warn');
+  console.error.mockImplementation(() => {});
+  console.warn.mockImplementation(() => {});
+});
+
+afterEach(() => {
+  console.error.mockRestore();
+  console.warn.mockRestore();
+});
+
+const testId = 'bargraph1';
+
+test('bargraph uses exact classname', () => {
+  render(
+    <BarGraph
+        className='super_important_class'
+        data={{ testid: testId }}
+        id='bar-default'
+    />
+  );
+
+  const kit = screen.getByTestId(testId);
+  expect(kit).toHaveClass('super_important_class');
+});

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { render, screen } from '../utilities/test-utils';
+import CircleChart from './_circle_chart';
+
+beforeEach(() => {
+  // Silences error logs within the test suite.
+  jest.spyOn(console, 'error');
+  jest.spyOn(console, 'warn');
+  console.error.mockImplementation(() => {});
+  console.warn.mockImplementation(() => {});
+});
+
+afterEach(() => {
+  console.error.mockRestore();
+  console.warn.mockRestore();
+});
+
+const testId = 'circlechart1';
+
+test('uses exact classname', () => {
+  const data = [
+    {
+      name: 'Waiting for Calls',
+      value: 41,
+    },
+    {
+      name: 'On Call',
+      value: 49,
+    },
+    {
+      name: 'After call',
+      value: 10,
+    },
+  ]
+  render(
+    <CircleChart
+        chartData={data}
+        data={{ testid: testId }}
+        id='circlechartid'
+    />
+  );
+
+  const kit = screen.getByTestId(testId);
+  expect(kit).toHaveClass('pb_circle_chart');
+});

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

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

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

@@ -3,6 +3,13 @@ import typography from '../tokens/exports/_typography.scss'
 
 import { ThemeProps } from './themeTypes'
 
+interface CustomTreemapOptions extends Highcharts.SeriesTreemapOptions {
+  traverseUpButton?: {
+    position: { y: number };
+  };
+}
+
+
 const highchartsTheme: ThemeProps = {
   lang: {
     thousandsSep: ',',
@@ -150,6 +157,7 @@ const highchartsTheme: ThemeProps = {
           fontSize: typography.text_smaller,
           color: colors.text_lt_light,
           fontWeight: typography.regular,
+          textOutline: '2px $white',
         },
       },
     },
@@ -198,7 +206,7 @@ const highchartsTheme: ThemeProps = {
       traverseUpButton: {
         position: { y: -50 },
       },
-    },
+    } as CustomTreemapOptions,
   },
   credits: {
     enabled: false

playbook/app/pb_kits/playbook/pb_gauge/gauge.test.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { render, screen } from '../utilities/test-utils';
+import Gauge from './_gauge';
+
+beforeEach(() => {
+  // Silences error logs within the test suite.
+  jest.spyOn(console, 'error');
+  jest.spyOn(console, 'warn');
+  console.error.mockImplementation(() => {});
+  console.warn.mockImplementation(() => {});
+});
+
+afterEach(() => {
+  console.error.mockRestore();
+  console.warn.mockRestore();
+});
+
+const testId = 'gauge1';
+
+test('uses exact classname', () => {
+  const data = [
+    { name: 'Name', value: 45 },
+  ]
+  render(
+    <Gauge
+        chartData={data}
+        data={{ testid: testId }}
+        id='gaugeid'
+    />
+  );
+
+  const kit = screen.getByTestId(testId);
+  expect(kit).toHaveClass('pb_gauge_kit');
+});
+

playbook/app/pb_kits/playbook/pb_line_graph/lineGraph.test.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { render, screen } from '../utilities/test-utils';
+import LineGraph from './_line_graph';
+
+beforeEach(() => {
+  // Silences error logs within the test suite.
+  jest.spyOn(console, 'error');
+  jest.spyOn(console, 'warn');
+  console.error.mockImplementation(() => {});
+  console.warn.mockImplementation(() => {});
+});
+
+afterEach(() => {
+  console.error.mockRestore();
+  console.warn.mockRestore();
+});
+
+const testId = 'linechart1';
+
+test('uses exact classname', () => {
+  const data = [{
+    name: 'Installation',
+    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
+  }, {
+    name: 'Manufacturing',
+    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
+  }, {
+    name: 'Sales & Distribution',
+    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
+  }, {
+    name: 'Project Development',
+    data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
+  }, {
+    name: 'Other',
+    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
+  }]
+  render(
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        data={{ testid: testId }}
+        id="line-default"
+        subTitle="Source: thesolarfoundation.com"
+        title="Solar Employment Growth by Sector, 2010-2016"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
+        yAxisMin={0}
+    />
+  );
+
+  const kit = screen.getByTestId(testId);
+  expect(kit).toHaveClass('pb_bar_graph');
+});

playbook/app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { render, screen } from '../utilities/test-utils';
+import TreemapChart from './_treemap_chart';
+
+beforeEach(() => {
+  // Silences error logs within the test suite.
+  jest.spyOn(console, 'error');
+  jest.spyOn(console, 'warn');
+  console.error.mockImplementation(() => {});
+  console.warn.mockImplementation(() => {});
+});
+
+afterEach(() => {
+  console.error.mockRestore();
+  console.warn.mockRestore();
+});
+
+const testId = 'treemapchart1';
+
+test('uses exact classname', () => {
+  const data = [
+    {
+      name: "Pepperoni",
+      parent: "Toppings",
+      value: 600,
+    }, {
+      name: "Cheese",
+      parent: "Toppings",
+      value: 510,
+    }, {
+      name: "Mushroom",
+      parent: "Toppings",
+      value: 330,
+    },{
+      name: "Onions",
+      parent: "Toppings",
+      value: 250,
+    }, {
+      name: "Olives",
+      parent: "Toppings",
+      value: 204,
+    }, {
+      name: "Pineapple",
+      parent: "Toppings",
+      value: 90,
+    }, {
+      name: "Pizza Toppings",
+      id: "Toppings",
+    },
+  ]
+  render(
+    <TreemapChart
+        chartData={data}
+        data={{ testid: testId }}
+        id="tree-map-id"
+    />
+  );
+
+  const kit = screen.getByTestId(testId);
+  expect(kit).toHaveClass('pb_treemap_chart');
+});

playbook/package.json

@@ -43,7 +43,7 @@
     "core-js": "3.29.1",
     "file-loader": "^6.2.0",
     "flatpickr": "^4.6.13",
-    "highcharts": "^9.0.0",
+    "highcharts": "^10.0.0",
     "highcharts-react-official": "^3.2.0",
     "intl-tel-input": "^17.0.19",
     "lazysizes": "^5.2.2",

yarn.lock

@@ -8106,10 +8106,10 @@ highcharts-react-official@^3.2.0:
   resolved "https://npm.powerapp.cloud/highcharts-react-official/-/highcharts-react-official-3.2.0.tgz#42f8f237d73eec6791318efb41237067000cf815"
   integrity sha512-71IJZsLmEboYFjONpwC3NRsg6JKvtKYtS5Si3e6s6MLRSOFNOY8KILTkzvO36kjpeR/A0X3/kvvewE+GMPpkjw==
 
-highcharts@^9.0.0:
-  version "9.3.3"
-  resolved "https://npm.powerapp.cloud/highcharts/-/highcharts-9.3.3.tgz#ae62178de788fd7934431aa26b8e250b8073c541"
-  integrity sha512-QeOvm6cifeZYYdTLm4IxZsXcOE9c4xqfs0z0OJJ0z7hhA9WG0rmcVAyuIp5HBl/znjA/ayYHmpYjBYD/9PG4Fg==
+highcharts@^10.0.0:
+  version "10.3.3"
+  resolved "https://npm.powerapp.cloud/highcharts/-/highcharts-10.3.3.tgz#b8acca24f2d4b1f2f726540734166e59e07b35c4"
+  integrity sha512-r7wgUPQI9tr3jFDn3XT36qsNwEIZYcfgz4mkKEA6E4nn5p86y+u1EZjazIG4TRkl5/gmGRtkBUiZW81g029RIw==
 
 highlight-words-core@^1.2.0:
   version "1.2.2"