feat(data-viz): add simple chart type support (#4318)

* feat(docs): data viz base structure

* feat(data-viz): wokring base chart

* feat(data-viz): wip

* feat(data-viz): wip

* feat(data-viz): wip

* feat(data-viz): wip

* feat(data-viz): sitemap

* feat(data-viz): docs exmapleds

* feat(data-viz): ci checks

* feat(data-viz): docs refinement

* chore(cleanup): remove redundant story

* chore(cleanup): changeset

* fix(data-viz): fix urls

* fix(data-viz): fix slugs

* feat(data-vix): chart-provider in project.json

* chore(data-vix): test chanpshots

* chore(ci): fix supabase

* chore(ci): fix supabase

* chore(ci): ignore generated files for linting

* chore(data-vix): typos

* chore(data-vix): trigger rebuild

* chore(data-vix): trigger rebuild

* chore(data-vix): trigger rebuild

* feat(data-visualization): add initial supported charts

* feat(data-visualization): axis titles

* feat(data-visualization): include area chart

* feat(data-visualization): additional example

* feat(data-visualization): tests

* feat(data-visualization): refactor

* chore(data-visualization): lci checks

* feat(data-visualization): changesets

* feat(data-visualization): animation boolean

* feat(data-visualization): wip

* feat(data-visualization): jsdoc and type cleanup

* feat(data-visualization): cedits and column styles

* feat(data-visualization): watermark on examples

* feat(data-visualization): update chart types content

* feat(data-visualization): adding typedocs

* Update packages/paste-website/src/components/site-wrapper/sidebar/SidebarNavigation.tsx

Co-authored-by: Sarah <[email protected]>

* feat(data-visualization): chart option docs

* feat(data-visualization): cleanup chart options

* feat(data-visualization): vrt

* feat(data-visualization): pr cleanup

* chore(typos): fix various typos

* chore(typos): revert fix

* chore(tests): add support for same title sidebar disclousres

* feat(data-viz): update docs urls and release versioning

* chore(data-viz): update urls

* Apply suggestions from code review

Co-authored-by: Sarah <[email protected]>

* chore(data-viz): addressed PR comments

* fix(e2e): chage order of disclosure opening to account for multiple data-visualization

* fix(data-viz): toolitp text color

* feat(ci): fix tests

* chore(ci): fix yarn lock

---------

Co-authored-by: Sarah <[email protected]>

Author: krisantrobus

.changeset/serious-avocados-stare.md

@@ -0,0 +1,6 @@
+---
+"@twilio-paste/core": minor
+"@twilio-paste/data-visualization-library": minor
+---
+
+[Data visualization library] added helper functions and types to provide support for creating highcharts options for supported chart types

.changeset/twenty-rocks-tease.md

@@ -0,0 +1,6 @@
+---
+"@twilio-paste/chart-provider": minor
+"@twilio-paste/core": minor
+---
+
+[Chart Provider] added the ability to use options for supported chart types

packages/paste-core/components/chart-provider/package.json

@@ -29,6 +29,7 @@
     "@twilio-paste/box": "^11.0.0",
     "@twilio-paste/color-contrast-utils": "^5.0.0",
     "@twilio-paste/customization": "^9.0.0",
+    "@twilio-paste/data-visualization-library": "^6.0.1",
     "@twilio-paste/design-tokens": "^10.3.0",
     "@twilio-paste/style-props": "^10.0.0",
     "@twilio-paste/styling-library": "^4.0.0",
@@ -45,6 +46,7 @@
     "@twilio-paste/box": "^11.0.1",
     "@twilio-paste/color-contrast-utils": "^5.0.0",
     "@twilio-paste/customization": "^9.0.1",
+    "@twilio-paste/data-visualization-library": "^6.0.1",
     "@twilio-paste/design-tokens": "^10.13.0",
     "@twilio-paste/style-props": "^10.0.1",
     "@twilio-paste/styling-library": "^4.0.1",

packages/paste-core/components/chart-provider/src/ChartProvider.tsx

@@ -1,5 +1,7 @@
 import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
 import type { BoxProps } from "@twilio-paste/box";
+import { transformToHighchartsOptions } from "@twilio-paste/data-visualization-library";
+import type { ChartTypeOptions } from "@twilio-paste/data-visualization-library";
 import type { HTMLPasteProps } from "@twilio-paste/types";
 import * as Highcharts from "highcharts";
 import * as React from "react";
@@ -25,16 +27,47 @@ interface HighchartsOptions extends BaseChartProviderProps {
    * @memberof ChartProviderProps
    */
   highchartsOptions: Highcharts.Options;
-  pasteOptions?: never;
+  options?: never;
 }
 
-export type ChartProviderProps = HighchartsOptions;
+interface ChartOptions extends BaseChartProviderProps {
+  /**
+   * Overrides the default element name to apply unique styles with the Customization Provider
+   * @default null
+   * @type {BoxProps['element']}
+   * @memberof ChartProviderProps
+   */
+  highchartsOptions?: never;
+  options: ChartTypeOptions;
+}
+
+export type ChartProviderProps = HighchartsOptions | ChartOptions;
 
 const ChartProvider = React.forwardRef<HTMLDivElement, ChartProviderProps>(
-  ({ element = "CHART_PROVIDER", children, highchartsOptions, ...props }, ref) => {
+  ({ element = "CHART_PROVIDER", children, highchartsOptions, options, ...props }, ref) => {
     const [chart, setChart] = React.useState<Highcharts.Chart>();
     const [chartRef, setChartRef] = React.useState<HTMLElement>();
 
+    if (highchartsOptions && !options) {
+      return (
+        <Box {...safelySpreadBoxProps(props)} ref={ref} element={element} position="relative">
+          <ChartContext.Provider
+            value={{
+              chart,
+              setChart,
+              chartRef,
+              setChartRef,
+              options: highchartsOptions,
+            }}
+          >
+            {children}
+          </ChartContext.Provider>
+        </Box>
+      );
+    }
+
+    const transformedOptions = transformToHighchartsOptions(options);
+
     return (
       <Box {...safelySpreadBoxProps(props)} ref={ref} element={element} position="relative">
         <ChartContext.Provider
@@ -43,7 +76,7 @@ const ChartProvider = React.forwardRef<HTMLDivElement, ChartProviderProps>(
             setChart,
             chartRef,
             setChartRef,
-            options: highchartsOptions,
+            options: transformedOptions,
           }}
         >
           {children}

packages/paste-core/components/chart-provider/type-docs.json

@@ -1,12 +1,5 @@
 {
   "ChartProvider": {
-    "highchartsOptions": {
-      "type": "Options",
-      "defaultValue": "null",
-      "required": true,
-      "externalProp": false,
-      "description": "Overrides the default element name to apply unique styles with the Customization Provider"
-    },
     "about": {
       "type": "string",
       "defaultValue": null,
@@ -486,6 +479,13 @@
       "required": false,
       "externalProp": true
     },
+    "highchartsOptions": {
+      "type": "Options",
+      "defaultValue": "null",
+      "required": false,
+      "externalProp": false,
+      "description": "Overrides the default element name to apply unique styles with the Customization Provider"
+    },
     "id": {
       "type": "string",
       "defaultValue": null,
@@ -1574,8 +1574,8 @@
       "required": false,
       "externalProp": true
     },
-    "pasteOptions": {
-      "type": "never",
+    "options": {
+      "type": "ChartTypeOptions",
       "defaultValue": null,
       "required": false,
       "externalProp": false

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

@@ -137,7 +137,7 @@ Object {
     "borderWidth": "1px",
     "padding": 12,
     "style": Object {
-      "color": "rgb(18, 28, 45)",
+      "color": "rgb(255, 255, 255)",
       "fontFamily": "'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
       "fontSize": "0.875rem",
     },
@@ -240,7 +240,7 @@ Object {
     "borderWidth": "1px",
     "padding": 12,
     "style": Object {
-      "color": "rgb(18, 28, 45)",
+      "color": "rgb(255, 255, 255)",
       "fontFamily": "'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
       "fontSize": "0.875rem",
     },

packages/paste-libraries/data-visualization/__test__/transformers/areaChart.spec.tsx

@@ -0,0 +1,56 @@
+import { renderHook } from "@testing-library/react";
+import { Theme } from "@twilio-paste/theme";
+import React from "react";
+
+import { AreaChartConfig, AreaSeries } from "../../src";
+import { handleAreaOptions } from "../../src/transformers/areaChart";
+
+const container: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <Theme.Provider theme="default">{children}</Theme.Provider>
+);
+
+const seriesData: AreaSeries[] = [
+  {
+    name: "Installation",
+    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
+  },
+  {
+    name: "Manufacturing",
+    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
+  },
+];
+
+const options: AreaChartConfig = {
+  series: seriesData,
+  type: "area",
+};
+
+describe("Area Chart Transformer", () => {
+  it("should transform area chart data correctly", () => {
+    const { result } = renderHook(() => handleAreaOptions(options), { wrapper: container });
+
+    expect(result.current.chart).toEqual(
+      expect.objectContaining({
+        type: "area",
+      }),
+    );
+
+    expect(result.current.plotOptions).toEqual(
+      expect.objectContaining({
+        series: {
+          stickyTracking: false,
+        },
+      }),
+    );
+
+    expect(result.current.series).toEqual(
+      expect.arrayContaining([
+        {
+          name: "Installation",
+          data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
+          type: "area",
+        },
+      ]),
+    );
+  });
+});