feat(data-visualization): add package

.changeset/few-swans-peel.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/core': minor
+'@twilio-paste/data-visualization-library': minor
+---
+
+[data-visualization] Add new package `@twilio-paste/data-visualization-library` which exports a React hook to theme Highcharts.

.codesandbox/ci.json

@@ -23,6 +23,7 @@
     "/packages/paste-core/primitives/combobox",
     "/packages/paste-customization",
     "/packages/paste-core/components/data-grid",
+    "/packages/paste-libraries/data-visualization",
     "/packages/paste-core/components/date-picker",
     "/packages/paste-design-tokens",
     "/packages/paste-core/components/disclosure",

package.json

@@ -185,6 +185,8 @@
     "gulp-if": "^3.0.0",
     "gulp-terser": "^2.0.1",
     "gulp-theo": "2.0.1",
+    "highcharts": "^9.3.3",
+    "highcharts-react-official": "^3.1.0",
     "husky": "^3.0.0",
     "immutable": "^4.0.0-rc.12",
     "jest": "26.6.0",

packages/paste-core/core-bundle/.gitignore

@@ -19,6 +19,7 @@
 /combobox-primitive
 /customization
 /data-grid
+/data-visualization-library
 /date-picker
 /design-tokens
 /disclosure

packages/paste-core/core-bundle/package.json

@@ -43,6 +43,7 @@
     "@twilio-paste/combobox-primitive": "^0.3.1",
     "@twilio-paste/customization": "^3.0.0",
     "@twilio-paste/data-grid": "^1.0.0",
+    "@twilio-paste/data-visualization-library": "^0.0.1",
     "@twilio-paste/date-picker": "^1.0.0",
     "@twilio-paste/design-tokens": "^7.0.0",
     "@twilio-paste/disclosure": "^6.0.0",

packages/paste-core/core-bundle/src/data-visualization-library.tsx

@@ -0,0 +1 @@
+export * from '@twilio-paste/data-visualization-library';

packages/paste-libraries/data-visualization/__test__/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,264 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`usePasteHighChartsTheme hook should return a deepmerged options object when options are passed 1`] = `
+Object {
+  "chart": Object {
+    "backgroundColor": "rgb(255, 255, 255)",
+  },
+  "colors": Array [
+    "rgb(0, 20, 137)",
+    "rgb(14, 124, 58)",
+    "rgb(13, 58, 31)",
+    "rgb(0, 140, 255)",
+    "rgb(57, 71, 98)",
+    "rgb(166, 127, 227)",
+    "rgb(109, 46, 209)",
+    "rgb(136, 145, 170)",
+    "rgb(117, 12, 12)",
+    "rgb(235, 86, 86)",
+  ],
+  "credits": Object {
+    "style": Object {
+      "color": "rgb(174, 178, 193)",
+    },
+  },
+  "labels": Object {
+    "style": Object {
+      "color": "rgb(18, 28, 45)",
+    },
+  },
+  "legend": Object {
+    "itemHoverStyle": Object {
+      "color": "rgb(96, 107, 133)",
+    },
+    "itemStyle": Object {
+      "color": "rgb(18, 28, 45)",
+      "font": "0.625rem 'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
+    },
+    "title": Object {
+      "style": Object {
+        "color": "rgb(18, 28, 45)",
+      },
+    },
+  },
+  "plotOptions": Object {
+    "series": Object {
+      "borderColor": "transparent",
+    },
+  },
+  "series": Array [
+    Object {
+      "data": Array [
+        43934,
+        52503,
+        57177,
+        69658,
+        97031,
+        119931,
+        137133,
+        154175,
+      ],
+      "name": "Installation",
+    },
+    Object {
+      "data": Array [
+        24916,
+        24064,
+        29742,
+        29851,
+        32490,
+        30282,
+        38121,
+        40434,
+      ],
+      "name": "Manufacturing",
+    },
+    Object {
+      "data": Array [
+        11744,
+        17722,
+        16005,
+        19771,
+        20185,
+        24377,
+        32147,
+        39387,
+      ],
+      "name": "Sales & Distribution",
+    },
+    Object {
+      "data": Array [
+        null,
+        null,
+        7988,
+        12169,
+        15112,
+        22452,
+        34400,
+        34227,
+      ],
+      "name": "Project Development",
+    },
+    Object {
+      "data": Array [
+        12908,
+        5948,
+        8105,
+        11248,
+        8989,
+        11816,
+        18274,
+        18111,
+      ],
+      "name": "Other",
+    },
+  ],
+  "subtitle": Object {
+    "style": Object {
+      "color": "rgb(96, 107, 133)",
+      "font": "0.75rem 'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
+    },
+    "text": "Source: thesolarfoundation.com",
+  },
+  "title": Object {
+    "style": Object {
+      "color": "rgb(18, 28, 45)",
+      "font": "700 1rem 'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
+    },
+    "text": "Solar Employment Growth by Sector, 2010-2016",
+  },
+  "tooltip": Object {
+    "backgroundColor": "rgb(244, 244, 246)",
+    "style": Object {
+      "color": "rgb(18, 28, 45)",
+    },
+  },
+  "xAxis": Object {
+    "labels": Object {
+      "style": Object {
+        "color": "rgb(18, 28, 45)",
+        "font": "500 0.625rem 'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
+      },
+    },
+    "lineColor": "rgb(18, 28, 45)",
+    "tickColor": "rgb(18, 28, 45)",
+    "title": Object {
+      "style": Object {
+        "color": "rgb(18, 28, 45)",
+        "font": "600 0.875rem 'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
+      },
+    },
+  },
+  "yAxis": Object {
+    "labels": Object {
+      "style": Object {
+        "color": "rgb(18, 28, 45)",
+        "font": "500 0.625rem 'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
+      },
+    },
+    "title": Object {
+      "style": Object {
+        "color": "rgb(18, 28, 45)",
+        "font": "600 0.875rem 'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
+      },
+    },
+  },
+}
+`;
+
+exports[`usePasteHighChartsTheme hook should return the theme options object when an empty object is passed 1`] = `
+Object {
+  "chart": Object {
+    "backgroundColor": "rgb(255, 255, 255)",
+  },
+  "colors": Array [
+    "rgb(0, 20, 137)",
+    "rgb(14, 124, 58)",
+    "rgb(13, 58, 31)",
+    "rgb(0, 140, 255)",
+    "rgb(57, 71, 98)",
+    "rgb(166, 127, 227)",
+    "rgb(109, 46, 209)",
+    "rgb(136, 145, 170)",
+    "rgb(117, 12, 12)",
+    "rgb(235, 86, 86)",
+  ],
+  "credits": Object {
+    "style": Object {
+      "color": "rgb(174, 178, 193)",
+    },
+  },
+  "labels": Object {
+    "style": Object {
+      "color": "rgb(18, 28, 45)",
+    },
+  },
+  "legend": Object {
+    "itemHoverStyle": Object {
+      "color": "rgb(96, 107, 133)",
+    },
+    "itemStyle": Object {
+      "color": "rgb(18, 28, 45)",
+      "font": "0.625rem 'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
+    },
+    "title": Object {
+      "style": Object {
+        "color": "rgb(18, 28, 45)",
+      },
+    },
+  },
+  "plotOptions": Object {
+    "series": Object {
+      "borderColor": "transparent",
+    },
+  },
+  "subtitle": Object {
+    "style": Object {
+      "color": "rgb(96, 107, 133)",
+      "font": "0.75rem 'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
+    },
+  },
+  "title": Object {
+    "style": Object {
+      "color": "rgb(18, 28, 45)",
+      "font": "700 1rem 'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
+    },
+  },
+  "tooltip": Object {
+    "backgroundColor": "rgb(244, 244, 246)",
+    "style": Object {
+      "color": "rgb(18, 28, 45)",
+    },
+  },
+  "xAxis": Object {
+    "labels": Object {
+      "style": Object {
+        "color": "rgb(18, 28, 45)",
+        "font": "500 0.625rem 'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
+      },
+    },
+    "lineColor": "rgb(18, 28, 45)",
+    "tickColor": "rgb(18, 28, 45)",
+    "title": Object {
+      "style": Object {
+        "color": "rgb(18, 28, 45)",
+        "font": "600 0.875rem 'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
+      },
+    },
+  },
+  "yAxis": Object {
+    "labels": Object {
+      "style": Object {
+        "color": "rgb(18, 28, 45)",
+        "font": "500 0.625rem 'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
+      },
+    },
+    "title": Object {
+      "style": Object {
+        "color": "rgb(18, 28, 45)",
+        "font": "600 0.875rem 'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
+      },
+    },
+  },
+}
+`;

packages/paste-libraries/data-visualization/__test__/index.spec.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import {render} from '@testing-library/react';
+import {Theme} from '@twilio-paste/theme';
+import {usePasteHighchartsTheme} from '../src';
+import {lineChartOptions} from '../stories/options/lineChartOptions';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const TestComponent: React.FC<{options?: {[key: string]: any}}> = ({options = {}}) => {
+  const chartOptions = usePasteHighchartsTheme(options);
+  return <span data-testid="test">{JSON.stringify(chartOptions)}</span>;
+};
+
+describe('usePasteHighChartsTheme hook', () => {
+  it('throws an error when no arguments are passed', () => {
+    expect(usePasteHighchartsTheme).toThrowError();
+  });
+
+  it('throws an error when not used within the Paste Theme.Provider', () => {
+    expect(usePasteHighchartsTheme).toThrowError();
+  });
+
+  it('should return the theme options object when an empty object is passed', () => {
+    const {getByTestId} = render(
+      <Theme.Provider theme="default">
+        <TestComponent />
+      </Theme.Provider>
+    );
+    const content = JSON.parse(getByTestId('test').innerHTML);
+    expect(content).toMatchSnapshot();
+  });
+
+  it('should return a deepmerged options object when options are passed', () => {
+    const {getByTestId} = render(
+      <Theme.Provider theme="default">
+        <TestComponent options={lineChartOptions} />
+      </Theme.Provider>
+    );
+    const content = JSON.parse(getByTestId('test').innerHTML);
+    expect(content).toMatchSnapshot();
+  });
+});

packages/paste-libraries/data-visualization/build.js

@@ -0,0 +1,3 @@
+const {build} = require('../../../tools/build/esbuild');
+
+build(require('./package.json'));