Skip to content

Commit 3705495

Browse files
krisantrobusserifluous
krisantrobus
and
serifluous
authored
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 <sali@twilio.com> * 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 <sali@twilio.com> * 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 <sali@twilio.com>
1 parent 8ee187d commit 3705495

File tree

31 files changed

+5280
-23
lines changed

31 files changed

+5280
-23
lines changed

‎.changeset/serious-avocados-stare.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@twilio-paste/core": minor
3+
"@twilio-paste/data-visualization-library": minor
4+
---
5+
6+
[Data visualization library] added helper functions and types to provide support for creating highcharts options for supported chart types

‎.changeset/twenty-rocks-tease.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@twilio-paste/chart-provider": minor
3+
"@twilio-paste/core": minor
4+
---
5+
6+
[Chart Provider] added the ability to use options for supported chart types

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"@twilio-paste/box": "^11.0.0",
3030
"@twilio-paste/color-contrast-utils": "^5.0.0",
3131
"@twilio-paste/customization": "^9.0.0",
32+
"@twilio-paste/data-visualization-library": "^6.0.1",
3233
"@twilio-paste/design-tokens": "^10.3.0",
3334
"@twilio-paste/style-props": "^10.0.0",
3435
"@twilio-paste/styling-library": "^4.0.0",
@@ -45,6 +46,7 @@
4546
"@twilio-paste/box": "^11.0.1",
4647
"@twilio-paste/color-contrast-utils": "^5.0.0",
4748
"@twilio-paste/customization": "^9.0.1",
49+
"@twilio-paste/data-visualization-library": "^6.0.1",
4850
"@twilio-paste/design-tokens": "^10.13.0",
4951
"@twilio-paste/style-props": "^10.0.1",
5052
"@twilio-paste/styling-library": "^4.0.1",

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

Lines changed: 37 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
22
import type { BoxProps } from "@twilio-paste/box";
3+
import { transformToHighchartsOptions } from "@twilio-paste/data-visualization-library";
4+
import type { ChartTypeOptions } from "@twilio-paste/data-visualization-library";
35
import type { HTMLPasteProps } from "@twilio-paste/types";
46
import * as Highcharts from "highcharts";
57
import * as React from "react";
@@ -25,16 +27,47 @@ interface HighchartsOptions extends BaseChartProviderProps {
2527
* @memberof ChartProviderProps
2628
*/
2729
highchartsOptions: Highcharts.Options;
28-
pasteOptions?: never;
30+
options?: never;
2931
}
3032

31-
export type ChartProviderProps = HighchartsOptions;
33+
interface ChartOptions extends BaseChartProviderProps {
34+
/**
35+
* Overrides the default element name to apply unique styles with the Customization Provider
36+
* @default null
37+
* @type {BoxProps['element']}
38+
* @memberof ChartProviderProps
39+
*/
40+
highchartsOptions?: never;
41+
options: ChartTypeOptions;
42+
}
43+
44+
export type ChartProviderProps = HighchartsOptions | ChartOptions;
3245

3346
const ChartProvider = React.forwardRef<HTMLDivElement, ChartProviderProps>(
34-
({ element = "CHART_PROVIDER", children, highchartsOptions, ...props }, ref) => {
47+
({ element = "CHART_PROVIDER", children, highchartsOptions, options, ...props }, ref) => {
3548
const [chart, setChart] = React.useState<Highcharts.Chart>();
3649
const [chartRef, setChartRef] = React.useState<HTMLElement>();
3750

51+
if (highchartsOptions && !options) {
52+
return (
53+
<Box {...safelySpreadBoxProps(props)} ref={ref} element={element} position="relative">
54+
<ChartContext.Provider
55+
value={{
56+
chart,
57+
setChart,
58+
chartRef,
59+
setChartRef,
60+
options: highchartsOptions,
61+
}}
62+
>
63+
{children}
64+
</ChartContext.Provider>
65+
</Box>
66+
);
67+
}
68+
69+
const transformedOptions = transformToHighchartsOptions(options);
70+
3871
return (
3972
<Box {...safelySpreadBoxProps(props)} ref={ref} element={element} position="relative">
4073
<ChartContext.Provider
@@ -43,7 +76,7 @@ const ChartProvider = React.forwardRef<HTMLDivElement, ChartProviderProps>(
4376
setChart,
4477
chartRef,
4578
setChartRef,
46-
options: highchartsOptions,
79+
options: transformedOptions,
4780
}}
4881
>
4982
{children}

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,5 @@
11
{
22
"ChartProvider": {
3-
"highchartsOptions": {
4-
"type": "Options",
5-
"defaultValue": "null",
6-
"required": true,
7-
"externalProp": false,
8-
"description": "Overrides the default element name to apply unique styles with the Customization Provider"
9-
},
103
"about": {
114
"type": "string",
125
"defaultValue": null,
@@ -486,6 +479,13 @@
486479
"required": false,
487480
"externalProp": true
488481
},
482+
"highchartsOptions": {
483+
"type": "Options",
484+
"defaultValue": "null",
485+
"required": false,
486+
"externalProp": false,
487+
"description": "Overrides the default element name to apply unique styles with the Customization Provider"
488+
},
489489
"id": {
490490
"type": "string",
491491
"defaultValue": null,
@@ -1574,8 +1574,8 @@
15741574
"required": false,
15751575
"externalProp": true
15761576
},
1577-
"pasteOptions": {
1578-
"type": "never",
1577+
"options": {
1578+
"type": "ChartTypeOptions",
15791579
"defaultValue": null,
15801580
"required": false,
15811581
"externalProp": false

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ Object {
137137
"borderWidth": "1px",
138138
"padding": 12,
139139
"style": Object {
140-
"color": "rgb(18, 28, 45)",
140+
"color": "rgb(255, 255, 255)",
141141
"fontFamily": "'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
142142
"fontSize": "0.875rem",
143143
},
@@ -240,7 +240,7 @@ Object {
240240
"borderWidth": "1px",
241241
"padding": 12,
242242
"style": Object {
243-
"color": "rgb(18, 28, 45)",
243+
"color": "rgb(255, 255, 255)",
244244
"fontFamily": "'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
245245
"fontSize": "0.875rem",
246246
},

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

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { renderHook } from "@testing-library/react";
2+
import { Theme } from "@twilio-paste/theme";
3+
import React from "react";
4+
5+
import { AreaChartConfig, AreaSeries } from "../../src";
6+
import { handleAreaOptions } from "../../src/transformers/areaChart";
7+
8+
const container: React.FC<{ children: React.ReactNode }> = ({ children }) => (
9+
<Theme.Provider theme="default">{children}</Theme.Provider>
10+
);
11+
12+
const seriesData: AreaSeries[] = [
13+
{
14+
name: "Installation",
15+
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
16+
},
17+
{
18+
name: "Manufacturing",
19+
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
20+
},
21+
];
22+
23+
const options: AreaChartConfig = {
24+
series: seriesData,
25+
type: "area",
26+
};
27+
28+
describe("Area Chart Transformer", () => {
29+
it("should transform area chart data correctly", () => {
30+
const { result } = renderHook(() => handleAreaOptions(options), { wrapper: container });
31+
32+
expect(result.current.chart).toEqual(
33+
expect.objectContaining({
34+
type: "area",
35+
}),
36+
);
37+
38+
expect(result.current.plotOptions).toEqual(
39+
expect.objectContaining({
40+
series: {
41+
stickyTracking: false,
42+
},
43+
}),
44+
);
45+
46+
expect(result.current.series).toEqual(
47+
expect.arrayContaining([
48+
{
49+
name: "Installation",
50+
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
51+
type: "area",
52+
},
53+
]),
54+
);
55+
});
56+
});

0 commit comments

Comments
 (0)