Skip to content

Commit c45a73a

Browse files
jimmyleejimmylee
committed
opts for placeholders instead
1 parent 6f66541 commit c45a73a

10 files changed

+130
-434
lines changed

‎pages/examples/system/data-visualization/bar.tsx

-93
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import * as React from 'react';
22
import * as Utilities from '@common/utilities';
33

4-
import BarGraphWithCirclesChart from '@root/system/graphs/BarGraphWithCircles';
54
import ChartLegend from '@system/graphs/ChartLegend';
65
import DemoSystemDataVisualizationSidebar, { VISUALIZATION_OPTIONS } from '@demos/DemoSystemDataVisualizationSidebar';
76
import DivergingStackedBarChart from '@root/system/graphs/DivergingStackedBarChart';
@@ -10,7 +9,6 @@ import HorizontalBarChart from '@system/graphs/HorizontalBarChart';
109
import Navigation from '@system/Navigation';
1110
import Page from '@components/Page';
1211
import TwoColumnLayoutFull from '@system/layouts/TwoColumnLayoutFull';
13-
import StackedCirclesBarChart from '@root/system/graphs/BarGraphWithCircles';
1412

1513
import { H2, P, SubText, Text, Title } from '@system/typography';
1614

@@ -46,97 +44,6 @@ const EXAMPLE_DIVERGING_STACKED_BAR_CHART = [
4644
{ category: 'R', positive: 80, neutral: 65, negative: -60, positive_lower_ci: 66, positive_upper_ci: 82, negative_lower_ci: -67, negative_upper_ci: -53 },
4745
];
4846

49-
const EXAMPLE_LINE_BAR_CHART = [
50-
{
51-
year: '2005',
52-
years: [
53-
{ name: 'electronics', value: 120, color: 'var(--theme-primary)' },
54-
{ name: 'clothing', value: 150, color: 'var(--theme-success)' },
55-
{ name: 'accessories', value: 30, color: 'var(--theme-border)' },
56-
],
57-
},
58-
{
59-
year: '2006',
60-
years: [
61-
{ name: 'electronics', value: 115, color: 'var(--theme-primary)' },
62-
{ name: 'clothing', value: 165, color: 'var(--theme-success)' },
63-
{ name: 'accessories', value: 45, color: 'var(--theme-border)' },
64-
],
65-
},
66-
{
67-
year: '2007',
68-
years: [
69-
{ name: 'electronics', value: 130, color: 'var(--theme-primary)' },
70-
{ name: 'clothing', value: 175, color: 'var(--theme-success)' },
71-
{ name: 'accessories', value: 55, color: 'var(--theme-border)' },
72-
],
73-
},
74-
{
75-
year: '2008',
76-
years: [
77-
{ name: 'electronics', value: 125, color: 'var(--theme-primary)' },
78-
{ name: 'clothing', value: 190, color: 'var(--theme-success)' },
79-
{ name: 'accessories', value: 60, color: 'var(--theme-border)' },
80-
],
81-
},
82-
{
83-
year: '2009',
84-
years: [
85-
{ name: 'electronics', value: 140, color: 'var(--theme-primary)' },
86-
{ name: 'clothing', value: 185, color: 'var(--theme-success)' },
87-
{ name: 'accessories', value: 65, color: 'var(--theme-border)' },
88-
],
89-
},
90-
{
91-
year: '2010',
92-
years: [
93-
{ name: 'electronics', value: 150, color: 'var(--theme-primary)' },
94-
{ name: 'clothing', value: 210, color: 'var(--theme-success)' },
95-
{ name: 'accessories', value: 70, color: 'var(--theme-border)' },
96-
],
97-
},
98-
{
99-
year: '2011',
100-
years: [
101-
{ name: 'electronics', value: 155, color: 'var(--theme-primary)' },
102-
{ name: 'clothing', value: 220, color: 'var(--theme-success)' },
103-
{ name: 'accessories', value: 75, color: 'var(--theme-border)' },
104-
],
105-
},
106-
{
107-
year: '2012',
108-
years: [
109-
{ name: 'electronics', value: 160, color: 'var(--theme-primary)' },
110-
{ name: 'clothing', value: 230, color: 'var(--theme-success)' },
111-
{ name: 'accessories', value: 85, color: 'var(--theme-border)' },
112-
],
113-
},
114-
{
115-
year: '2013',
116-
years: [
117-
{ name: 'electronics', value: 165, color: 'var(--theme-primary)' },
118-
{ name: 'clothing', value: 240, color: 'var(--theme-success)' },
119-
{ name: 'accessories', value: 90, color: 'var(--theme-border)' },
120-
],
121-
},
122-
{
123-
year: '2014',
124-
years: [
125-
{ name: 'electronics', value: 170, color: 'var(--theme-primary)' },
126-
{ name: 'clothing', value: 250, color: 'var(--theme-success)' },
127-
{ name: 'accessories', value: 95, color: 'var(--theme-border)' },
128-
],
129-
},
130-
{
131-
year: '2015',
132-
years: [
133-
{ name: 'electronics', value: 180, color: 'var(--theme-primary)' },
134-
{ name: 'clothing', value: 260, color: 'var(--theme-success)' },
135-
{ name: 'accessories', value: 100, color: 'var(--theme-border)' },
136-
],
137-
},
138-
];
139-
14047
const EXAMPLE_LEGEND_DATA = [`var(--theme-graph-positive)`, `var(--theme-graph-negative)`];
14148

14249
function ExampleSystemDataVisualizationBar(props) {

‎pages/examples/system/data-visualization/bubble.tsx

+35-83
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,17 @@
11
import * as React from 'react';
22
import * as Utilities from '@common/utilities';
33

4-
import DemoSystemDataVisualizationSidebar, { VISUALIZATION_OPTIONS } from '@demos/DemoSystemDataVisualizationSidebar';
54
import BubbleChart from '@system/graphs/BubbleChart';
5+
import ChartLegend from '@system/graphs/ChartLegend';
6+
import DemoSystemDataVisualizationSidebar, { VISUALIZATION_OPTIONS } from '@demos/DemoSystemDataVisualizationSidebar';
67
import GlobalModalManager from '@system/modals/GlobalModalManager';
78
import GridLayout from '@system/layouts/GridLayout';
9+
import GroupedBubblesChart from '@root/system/graphs/GroupedBubblesChart';
810
import Navigation from '@system/Navigation';
911
import Page from '@components/Page';
10-
import Table from '@system/Table';
11-
import Tag from '@system/documents/Tag';
1212
import TwoColumnLayoutFull from '@system/layouts/TwoColumnLayoutFull';
1313

1414
import { H2, P, Title, Text, SubText } from '@system/typography';
15-
import { FormHeading, FormSubHeading, FormParagraph, InputLabel } from '@system/typography/forms';
16-
import GroupedBubblesChart from '@root/system/graphs/GroupedBubblesChart';
17-
18-
const TABLE_HEADINGS = [``, `Name`, `Optional`, `Description`];
19-
20-
const TABLE_DATA = [
21-
{
22-
data: [``, <Tag>Title</Tag>, <Tag>True</Tag>, <SubText style={{ marginTop: 7 }}>The title is used to describe the contents of your bubble chart. [20px]</SubText>],
23-
},
24-
25-
{
26-
data: [
27-
``,
28-
<Tag>Text</Tag>,
29-
<Tag>True</Tag>,
30-
<SubText style={{ marginTop: 7 }}>Text is used to provide additional context or data labels within the bubble chart. [16px]</SubText>,
31-
],
32-
},
33-
34-
{
35-
data: [``, <Tag>Bubbles</Tag>, <Tag>False</Tag>, <SubText style={{ marginTop: 7 }}>Bubbles represent data points with their size and position on the chart.</SubText>],
36-
},
37-
{
38-
data: [
39-
``,
40-
<Tag>Axis</Tag>,
41-
<Tag>False</Tag>,
42-
<SubText style={{ marginTop: 7 }}>The axis helps in understanding the scale and context of the data represented by the bubbles.</SubText>,
43-
],
44-
},
45-
{
46-
data: [
47-
``,
48-
<Tag>Legend</Tag>,
49-
<Tag>False</Tag>,
50-
<SubText style={{ marginTop: 7 }}>The legend explains the colors or sizes of the bubbles, providing insight into the data set.</SubText>,
51-
],
52-
},
53-
];
5415

5516
const EXAMPLE_DUMMY_DATA = [
5617
{ x: 10, y: 20, value: 30, category: 'Category 1' },
@@ -60,34 +21,19 @@ const EXAMPLE_DUMMY_DATA = [
6021
{ x: 50, y: 60, value: 70, category: 'Category 5' },
6122
];
6223

63-
const EXAMPLE_LEGEND_ITEMS_DATA = [
64-
{ color: 'var(--theme-success)', label: 'significant' },
65-
{ color: 'var(--theme-border)', label: 'no significance' },
66-
];
67-
68-
const GROUPED_BUBBLES_CHART = [
69-
{ name: 'High Significe', count: 60, color: 'var(--theme-primary)' },
70-
{ name: 'Significant', count: 30, color: 'var(--theme-success)' },
71-
{ name: 'No Significance', count: 10, color: 'var(--theme-error)' },
24+
const EXAMPLE_GROUPED_BUBBLES_CHART = [
25+
{ name: 'High significance', count: 60, color: 'var(--theme-graph-positive)' },
26+
{ name: 'Netural significance', count: 30, color: 'var(--theme-graph-netural)' },
27+
{ name: 'Low Significance', count: 10, color: 'var(--theme-graph-negative)' },
7228
];
7329

7430
function ExampleSystemDataVisualizationBubble(props) {
75-
const chartContainerStyles = { padding: `0px 24px 16px 16px`, minHeight: 188 };
76-
77-
const chart = {
78-
title: 'Bubble Chart Example',
79-
description: 'This bubble chart visualizes data points across two dimensions using the size and position of its bubbles.',
80-
};
81-
82-
const chartVariantB = {
83-
title: 'Bubble Chart - Variant B',
84-
layout: 'square',
85-
};
86-
87-
const chartVariantC = {
88-
title: 'Bubble Chart - Variant C',
89-
layout: 'circle',
90-
};
31+
// TODO(jimmylee)
32+
// Refactor these.
33+
const chartContainerStyles = { padding: `0 24px 48px 16px` };
34+
const infoStyles = { padding: '32px 24px 24px 24px', borderTop: `1px solid var(--theme-border)` };
35+
const pageStyles = { padding: `64px 24px 48px 22px` };
36+
const paragraphStyle = { marginTop: `1rem`, paddingRight: '2px', maxWidth: 768 };
9137

9238
return (
9339
<Page
@@ -97,25 +43,31 @@ function ExampleSystemDataVisualizationBubble(props) {
9743
>
9844
<Navigation />
9945
<TwoColumnLayoutFull sidebarStyle={{ width: '240px', flexShrink: 0 }} sidebar={<DemoSystemDataVisualizationSidebar active="bubble" data={VISUALIZATION_OPTIONS} />}>
100-
<H2 style={{ marginTop: 64, padding: '0 24px 0 22px' }}>Bubble Chart</H2>
101-
<P style={{ marginTop: `1rem`, padding: '0 24px 0 24px', maxWidth: 768 }}>
102-
Bubble charts are used to display three dimensions of data on a chart. The position of the bubble on the horizontal and vertical axes indicates the values of two data
103-
points, and the size of the bubble represents a third.
104-
</P>
105-
<Title style={{ marginTop: `49px`, padding: '24px 24px 0 24px', borderTop: `1px solid var(--theme-border)` }}>{chart.title}</Title>
106-
<Text style={{ marginTop: `8px`, padding: '0 24px 0 24px' }}>{chart.description}</Text>
107-
<div style={chartContainerStyles}>
108-
<BubbleChart data={EXAMPLE_DUMMY_DATA} style={{ marginTop: 32 }} legend={EXAMPLE_LEGEND_ITEMS_DATA} />
46+
<div style={pageStyles}>
47+
<H2>Bubble</H2>
48+
<P style={paragraphStyle}>
49+
Bubble charts are used to display three dimensions of data on a chart. The position of the bubble on the horizontal and vertical axes indicates the values of two data
50+
points, and the size of the bubble represents a third.
51+
</P>
10952
</div>
110-
<Text style={{ marginTop: `8px`, padding: '0 24px 0 24px' }}>{chartVariantB.title}</Text>
111-
112-
<GroupedBubblesChart data={GROUPED_BUBBLES_CHART} style={{ marginTop: 32 }} layout={chartVariantB.layout} />
113-
114-
<Text style={{ marginTop: `8px`, padding: '0 24px 0 24px' }}>{chartVariantC.title}</Text>
11553

116-
<GroupedBubblesChart data={GROUPED_BUBBLES_CHART} style={{ marginTop: 32 }} layout={chartVariantC.layout} />
54+
<div style={infoStyles}>
55+
<Title>Example</Title>
56+
<Text style={{ marginTop: `12px` }}>This is an example of a React & D3 bubble chart component that you can use.</Text>
57+
</div>
58+
<div style={chartContainerStyles}>
59+
<BubbleChart data={EXAMPLE_DUMMY_DATA} />
60+
<ChartLegend data={[`var(--theme-graph-positive)`]} />
61+
</div>
11762

118-
<Table data={TABLE_DATA} headings={TABLE_HEADINGS} />
63+
<div style={infoStyles}>
64+
<Title>Example B</Title>
65+
<Text style={{ marginTop: `12px` }}>This is an example of a React & D3 grouped bubbles chart component that you can use.</Text>
66+
</div>
67+
<div style={chartContainerStyles}>
68+
<GroupedBubblesChart data={EXAMPLE_GROUPED_BUBBLES_CHART} />
69+
<ChartLegend data={[`var(--theme-graph-positive)`, `var(--theme-graph-negative)`]} />
70+
</div>
11971
</TwoColumnLayoutFull>
12072
<GlobalModalManager />
12173
</Page>

‎pages/examples/system/data-visualization/calendar.tsx

+22-73
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,26 @@
11
import * as React from 'react';
22
import * as Utilities from '@common/utilities';
33

4-
import CalendarChart from '@system/graphs/CalendarChart';
4+
import ChartLegend from '@system/graphs/ChartLegend';
5+
import ChartPlaceholder from '@system/graphs/ChartPlaceholder';
56
import DemoSystemDataVisualizationSidebar, { VISUALIZATION_OPTIONS } from '@demos/DemoSystemDataVisualizationSidebar';
67
import GlobalModalManager from '@system/modals/GlobalModalManager';
7-
import GridLayout from '@system/layouts/GridLayout';
88
import Navigation from '@system/Navigation';
99
import Page from '@components/Page';
10-
import Table from '@system/Table';
11-
import Tag from '@system/documents/Tag';
1210
import TwoColumnLayoutFull from '@system/layouts/TwoColumnLayoutFull';
1311

1412
import { H2, P, Title, Text, SubText } from '@system/typography';
15-
import { FormHeading, FormSubHeading, FormParagraph, InputLabel } from '@system/typography/forms';
1613

17-
const TABLE_HEADINGS = [``, `Name`, `Optional`, `Description`];
18-
19-
const TABLE_DATA = [
20-
{
21-
data: [``, <Tag>Title</Tag>, <Tag>True</Tag>, <SubText style={{ marginTop: 7 }}>The title is used to describe the contents of your chart. [20px]</SubText>],
22-
},
23-
24-
{
25-
data: [``, <Tag>Text</Tag>, <Tag>True</Tag>, <SubText style={{ marginTop: 7 }}>Text is used to provide additional context. [16px]</SubText>],
26-
},
27-
28-
{
29-
data: [
30-
``,
31-
<Tag>Marks</Tag>,
32-
<Tag>False</Tag>,
33-
<SubText style={{ marginTop: 7 }}>The marks are visual representations of data on a chart. Common types of marks include bars, lines, and areas.</SubText>,
34-
],
35-
},
36-
{
37-
data: [
38-
``,
39-
<Tag>Graph Lines</Tag>,
40-
<Tag>False</Tag>,
41-
<SubText style={{ marginTop: 7 }}>
42-
The graph lines help users interpret the chart by providing visual context and connecting the marks to the axis labels. Some chart types utilize only horizontal gridlines,
43-
while others use only vertical gridlines.
44-
</SubText>,
45-
],
46-
},
47-
{
48-
data: [``, <Tag>Axis</Tag>, <Tag>False</Tag>, <SubText style={{ marginTop: 7 }}>The axis borders define the boundaries of the chart.</SubText>],
49-
},
50-
{
51-
data: [``, <Tag>Axis Labels</Tag>, <Tag>False</Tag>, <SubText style={{ marginTop: 7 }}>The axis labels show the units of measurement for the chart. [12px]</SubText>],
52-
},
53-
];
54-
55-
const generateExampleDummyData = () => {
56-
type DataPoint = { date: Date; close: number }; // Define the type for the data points
57-
const data: DataPoint[] = []; // Initialize the array with the correct type
58-
const startDate = new Date('2023-01-01');
59-
const endDate = new Date('2023-12-31');
60-
let currentValue = 100;
61-
62-
for (let date = startDate; date <= endDate; date.setDate(date.getDate() + 1)) {
63-
const variation = Math.floor(Math.random() * 5) - 2;
64-
currentValue += variation;
65-
data.push({ date: new Date(date), close: currentValue });
66-
}
67-
68-
return data;
69-
};
70-
71-
const EXAMPLE_DUMMY_DATA = generateExampleDummyData();
14+
const EXAMPLE_LEGEND_DATA = [`var(--theme-graph-positive)`, `var(--theme-graph-negative)`];
7215

7316
function ExampleSystemDataVisualizationCalendar(props) {
74-
const chartContainerStyles = { padding: `0px 24px 16px 16px`, minHeight: 188 };
17+
// TODO(jimmylee)
18+
// Refactor these.
19+
const chartContainerStyles = { padding: `0 24px 48px 16px` };
20+
const infoStyles = { padding: '32px 24px 24px 24px', borderTop: `1px solid var(--theme-border)` };
21+
const pageStyles = { padding: `64px 24px 48px 22px` };
22+
const paragraphStyle = { marginTop: `1rem`, paddingRight: '2px', maxWidth: 768 };
7523

76-
const chart = {
77-
title: 'Calendar Visualization',
78-
description: 'This calendar visualization represents data points over time, allowing for easy identification of trends and patterns.',
79-
};
8024
return (
8125
<Page
8226
title="nextjs-sass-starter: system: data visualization: calendar"
@@ -85,16 +29,21 @@ function ExampleSystemDataVisualizationCalendar(props) {
8529
>
8630
<Navigation />
8731
<TwoColumnLayoutFull sidebarStyle={{ width: '240px', flexShrink: 0 }} sidebar={<DemoSystemDataVisualizationSidebar active="calendar" data={VISUALIZATION_OPTIONS} />}>
88-
<H2 style={{ marginTop: 64, padding: '0 24px 0 22px' }}>Calendar Visualization</H2>
89-
<P style={{ marginTop: `1rem`, padding: '0 24px 0 24px', maxWidth: 768 }}>
90-
Calendar visualizations are a powerful way to display time series data. They can help to identify trends, patterns, and anomalies over a period.
91-
</P>
92-
<Title style={{ marginTop: `49px`, padding: '24px 24px 0 24px', borderTop: `1px solid var(--theme-border)` }}>{chart.title}</Title>
93-
<Text style={{ marginTop: `8px`, padding: '0 24px 0 24px' }}>{chart.description}</Text>
32+
<div style={pageStyles}>
33+
<H2>Calendar</H2>
34+
<P style={paragraphStyle}>
35+
Calendar visualizations are a powerful way to display time series data. They can help to identify trends, patterns, and anomalies over a period.
36+
</P>
37+
</div>
38+
39+
<div style={infoStyles}>
40+
<Title>Example</Title>
41+
<Text style={{ marginTop: `12px` }}>This is an example of a React & D3 calendar chart component that you can use.</Text>
42+
</div>
43+
9444
<div style={chartContainerStyles}>
95-
<CalendarChart data={EXAMPLE_DUMMY_DATA} style={{ marginTop: 32 }} />
45+
<ChartPlaceholder>WIP</ChartPlaceholder>
9646
</div>
97-
<Table data={TABLE_DATA} headings={TABLE_HEADINGS} />
9847
</TwoColumnLayoutFull>
9948
<GlobalModalManager />
10049
</Page>

0 commit comments

Comments
 (0)