feat(data-viz): create intial pages for engineering

cypress/integration/sitemap-vrt/constants.ts

@@ -62,6 +62,7 @@ export const SITEMAP = [
   "/components/card/",
   "/components/card/api",
   "/components/card/changelog",
+  "/components/chart-provider/",
   "/components/chat-composer/",
   "/components/chat-composer/api",
   "/components/chat-composer/changelog",
@@ -285,6 +286,8 @@ export const SITEMAP = [
   "/foundations/content/word-list/",
   "/foundations/illustrations/",
   "/foundations/data-visualization/",
+  "/foundations/data-visualization/engineering/",
+  "/foundations/data-visualization/engineering/chart-types/",
   "/foundations/spacing-and-layout/",
   "/foundations/typography/",
   "/inclusive-design/",

packages/paste-libraries/data-visualization/src/usePasteHighchartsTheme.tsx

@@ -105,9 +105,15 @@ export const usePasteHighchartsTheme = (options: Highcharts.Options): Highcharts
       },
     },
     tooltip: {
-      backgroundColor: context.backgroundColors.colorBackground,
+      backgroundColor: context.backgroundColors.colorBackgroundBodyInverse,
+      borderColor: context.borderColors.colorBorderInverse,
+      borderWidth: context.borderWidths.borderWidth10,
+      borderRadius: context.radii.borderRadius30.replace("px", ""),
+      padding: 12,
       style: {
+        fontFamily: context.fonts.fontFamilyText,
         color: context.textColors.colorText,
+        fontSize: context.fontSizes.fontSize30,
       },
     },
     credits: {

packages/paste-libraries/data-visualization/stories/base-chart.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryFn } from "@storybook/react";
+import { ChartProvider } from "@twilio-paste/chart-provider";
+import { Stack } from "@twilio-paste/stack";
+import * as React from "react";
+
+import { BaseChart } from "./components/BaseChart";
+import { lineChartOptions } from "./options/lineChartOptions";
+
+// eslint-disable-next-line import/no-default-export
+export default {
+  title: "Libraries/data-visualization/base-chart",
+  parameters: {
+    chromatic: { disableSnapshot: true },
+    a11y: {
+      // no need to a11y check composition of a11y checked components
+      disable: true,
+    },
+  },
+} as Meta;
+
+export const HighchartsOptions: StoryFn = () => {
+  return (
+    <Stack orientation="vertical" spacing="space100">
+      <ChartProvider highchartsOptions={{ chart: { type: "line" }, series: lineChartOptions.series }}>
+        <BaseChart />
+      </ChartProvider>
+    </Stack>
+  );
+};

packages/paste-libraries/data-visualization/stories/components/BaseChart.tsx

@@ -0,0 +1,48 @@
+import { Box } from "@twilio-paste/box";
+import { ChartContext } from "@twilio-paste/chart-provider";
+import * as Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
+import HighchartsAccessibilityModule from "highcharts/modules/accessibility";
+import * as React from "react";
+
+import { applyPasteHighchartsModules, usePasteHighchartsTheme } from "../../src";
+
+const Chart: React.FC = () => {
+  applyPasteHighchartsModules(Highcharts, HighchartsAccessibilityModule);
+  const chartRef = React.useRef<HTMLElement | null>(null);
+  const { options, setChart, setChartRef } = React.useContext(ChartContext);
+  const [chartOptions, setChartOptions] = React.useState<Highcharts.Options>(
+    // disabling animation for stories only. Not included in our docs examples
+    usePasteHighchartsTheme({ ...options, plotOptions: { series: { animation: false } } }),
+  );
+
+  React.useLayoutEffect(() => {
+    setChartOptions(Highcharts.merge(chartOptions, options));
+  }, [options]);
+
+  React.useEffect(() => {
+    if (chartRef.current) {
+      setChartRef(chartRef.current);
+    }
+  }, [chartRef.current]);
+
+  const callback = (chart: Highcharts.Chart): void => {
+    if (chart?.series?.length > 0) {
+      setChart(chart);
+    }
+  };
+
+  return (
+    <Box gridArea="base-chart" ref={chartRef} position="relative">
+      <HighchartsReact
+        highcharts={Highcharts}
+        options={chartOptions}
+        constructorType={chartOptions.chart?.map ? "mapChart" : undefined}
+        updateArgs={[true, true, false]}
+        callback={callback}
+      />
+    </Box>
+  );
+};
+
+export const BaseChart = React.memo(Chart);

packages/paste-website/src/component-examples/data-visualization/BaseChart.tsx

@@ -0,0 +1,44 @@
+import { Box } from "@twilio-paste/box";
+import { ChartContext } from "@twilio-paste/chart-provider";
+import * as Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
+import HighchartsAccessibilityModule from "highcharts/modules/accessibility";
+import { applyPasteHighchartsModules, usePasteHighchartsTheme } from "@twilio-paste/data-visualization-library";
+import * as React from "react";
+
+const Chart: React.FC = () => {
+  applyPasteHighchartsModules(Highcharts, HighchartsAccessibilityModule);
+  const chartRef = React.useRef<HTMLElement | null>(null);
+  const { options, setChart, setChartRef } = React.useContext(ChartContext);
+  const [chartOptions, setChartOptions] = React.useState<Highcharts.Options>(usePasteHighchartsTheme(options));
+
+  React.useLayoutEffect(() => {
+    setChartOptions(Highcharts.merge(chartOptions, options));
+  }, [options]);
+
+  React.useEffect(() => {
+    if (chartRef.current) {
+      setChartRef(chartRef.current);
+    }
+  }, [chartRef.current]);
+
+  const callback = (chart: Highcharts.Chart) => {
+    if (chart?.series?.length > 0) {
+      setChart(chart);
+    }
+  };
+
+  return (
+    <Box gridArea="base-chart" ref={chartRef} position="relative">
+      <HighchartsReact
+        highcharts={Highcharts}
+        options={chartOptions}
+        constructorType={chartOptions.chart?.map ? "mapChart" : undefined}
+        updateArgs={[true, true, false]}
+        callback={callback}
+      />
+    </Box>
+  );
+};
+
+export const ExamplesDataVizBaseChart = React.memo(Chart);

packages/paste-website/src/component-examples/data-visualization/ChartProviderExamples.ts

@@ -0,0 +1,57 @@
+export const SimpleChartProviderExample = `
+const ChartProviderExample = () => {
+    const lineSeriesData = [
+        {
+            name: "Installation",
+            data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
+        },
+        {
+            name: "Manufacturing",
+            data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
+        },
+    ]
+
+    return (
+        <ChartProvider highchartsOptions={{ chart: { type: "line" }, series: lineSeriesData }}>
+            <BaseChart />
+        </ChartProvider>
+    );
+};
+
+render(<ChartProviderExample />);
+`.trim();
+
+export const CustomChartProviderExample = `
+const ChartProviderExample = () => {
+    const lineSeriesData = [
+        {
+            name: "Installation",
+            data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
+            type: "line",
+        },
+        {
+            name: "Manufacturing",
+            data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
+            type: "line",
+        },
+        {
+            name: "Sales & Distribution",
+            data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
+            type: "column",
+        },
+        {
+            name: "Project Development",
+            data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
+            type: "column",
+        },
+    ]
+
+    return (
+        <ChartProvider highchartsOptions={{title: {floating: true, align: "right", text: "Custom charting title"}, series: lineSeriesData}}>
+            <BaseChart />
+        </ChartProvider>
+    );
+};
+
+render(<ChartProviderExample />);
+`.trim();

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

@@ -135,9 +135,18 @@ const SiteSidebarNavigation = (): JSX.Element => {
           </SidebarAnchor>
           <SidebarAnchor href={`${SidebarCategoryRoutes.CONTENT}/word-list`}>Word list</SidebarAnchor>
         </NavigationDisclosure>
-        <SidebarAnchor href={`${SidebarCategoryRoutes.FOUNDATIONS}/data-visualization`}>
-          Data visualization
-        </SidebarAnchor>
+        <NavigationDisclosure buttonText="Data visualization" categoryRoute={SidebarCategoryRoutes.DATA_VISUALIZATION}>
+          <SidebarAnchor href={SidebarCategoryRoutes.DATA_VISUALIZATION}>Overview</SidebarAnchor>
+          <NavigationDisclosure
+            buttonText="Engineering"
+            categoryRoute={`${SidebarCategoryRoutes.DATA_VISUALIZATION}/engineering`}
+          >
+            <SidebarAnchor href={`${SidebarCategoryRoutes.DATA_VISUALIZATION}/engineering/`}>Overview</SidebarAnchor>
+            <SidebarAnchor href={`${SidebarCategoryRoutes.DATA_VISUALIZATION}/engineering/chart-types`}>
+              Chart types
+            </SidebarAnchor>
+          </NavigationDisclosure>
+        </NavigationDisclosure>
         <SidebarAnchor
           href={`${SidebarCategoryRoutes.FOUNDATIONS}/elevation`}
           onClick={() =>
@@ -363,6 +372,32 @@ const SiteSidebarNavigation = (): JSX.Element => {
           if (name === "Sidebar Navigation") {
             return null;
           }
+          if (["Chart Provider"].includes(name)) {
+            return null;
+          }
+          if (name === "Data Visualization") {
+            return (
+              <NavigationDisclosure
+                buttonText={name}
+                categoryRoute={categoryRoute}
+                key={slug}
+                onClick={() =>
+                  event({
+                    category: "Left Navigation",
+                    action: `click-${name}`,
+                    label: name,
+                  })
+                }
+              >
+                <SidebarAnchor
+                  href={`${SidebarCategoryRoutes.COMPONENTS}/chart-provider`}
+                  selected={pathname.includes(`${SidebarCategoryRoutes.COMPONENTS}/chart-provider`)}
+                >
+                  Chart Provider
+                </SidebarAnchor>
+              </NavigationDisclosure>
+            );
+          }
           return (
             <SidebarAnchor selected={selected} href={categoryRoute} key={slug}>
               {name}

packages/paste-website/src/constants.ts

@@ -48,6 +48,7 @@ export const SidebarCategoryRoutes = {
   FOUNDATIONS: "/foundations",
   CONTENT: "/foundations/content",
   FOUNDATIONS_LOCALIZATION: "/foundations/localization",
+  DATA_VISUALIZATION: "/foundations/data-visualization",
   PATTERNS: "/patterns",
   EXPERIENCES: "/experiences",
   COMPONENTS: "/components",

packages/paste-website/src/pages/components/chart-provider/api.mdx

@@ -0,0 +1,61 @@
+import Changelog from '@twilio-paste/chart-provider/CHANGELOG.md'; // I don't know why this is needed but if you remove it the page fails to render
+import packageJson from '@twilio-paste/chart-provider/package.json';
+
+import {SidebarCategoryRoutes} from '../../../constants';
+import ComponentPageLayout from '../../../layouts/ComponentPageLayout';
+import {getFeature, getNavigationData, getComponentApi} from '../../../utils/api';
+
+export const meta = {
+  title: 'ChartProvider',
+  package: '@twilio-paste/chart-provider',
+  description: packageJson.description,
+  slug: '/components/chart-provider/api',
+};
+
+export default ComponentPageLayout;
+
+export const getStaticProps = async () => {
+  const navigationData = await getNavigationData();
+  const feature = await getFeature('Chart Provider');
+  const {componentApi, componentApiTocData} = getComponentApi('@twilio-paste/chart-provider');
+  return {
+    props: {
+      data: {
+        ...packageJson,
+        ...feature,
+      },
+      componentApi,
+      mdxHeadings: [...mdxHeadings, ...componentApiTocData],
+      navigationData,
+      pageHeaderData: {
+        categoryRoute: SidebarCategoryRoutes.COMPONENTS,
+        githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/chart-provider',
+        storybookUrl: '/?path=/story/components-chartprovider',
+      },
+    },
+  };
+};
+
+## Installation
+
+```bash
+yarn add @twilio-paste/chart-provider - or - yarn add @twilio-paste/core
+```
+
+## Usage
+
+```jsx
+import { ChartProvider } from '@twilio-paste/core/chart-provider';
+
+const ChartProviderExample = () => {
+  return (
+    <ChartProvider {...config}>
+      <BaseChart />
+    </ChartProvider>
+  );
+};
+```
+
+## Props
+
+<PropsTable componentApi={props.componentApi} />

packages/paste-website/src/pages/components/chart-provider/changelog.mdx

@@ -0,0 +1,36 @@
+import {SidebarCategoryRoutes} from '../../../constants';
+import Changelog from '@twilio-paste/chart-provider/CHANGELOG.md';
+import packageJson from '@twilio-paste/chart-provider/package.json';
+import ComponentPageLayout from '../../../layouts/ComponentPageLayout';
+import {getFeature, getNavigationData} from '../../../utils/api';
+
+export const meta = {
+  title: 'Chart Provider',
+  package: '@twilio-paste/chart-provider',
+  description: packageJson.description,
+  slug: '/components/chart-provider/changelog',
+};
+
+export default ComponentPageLayout;
+
+export const getStaticProps = async () => {
+  const navigationData = await getNavigationData();
+  const feature = await getFeature('Chart Provider');
+  return {
+    props: {
+      data: {
+        ...packageJson,
+        ...feature,
+      },
+      navigationData,
+      mdxHeadings,
+      pageHeaderData: {
+        categoryRoute: SidebarCategoryRoutes.COMPONENTS,
+        githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/chart-provider',
+        storybookUrl: '/?path=/story/components-chartprovider',
+      },
+    },
+  };
+};
+
+<Changelog />