Skip to content

Commit dc09ee4

Browse files
jimmyleejimmylee
committed
code quality pass through data visualization components
1 parent c45a73a commit dc09ee4

19 files changed

+220
-1101
lines changed

‎demos/DemoSystemDataVisualizationSidebar.tsx

-35
Original file line numberDiff line numberDiff line change
@@ -129,18 +129,6 @@ export const VISUALIZATION_OPTIONS = [
129129
</SubText>,
130130
],
131131
},
132-
{
133-
href: `/heatmap`,
134-
name: 'Heatmap',
135-
data: [
136-
'',
137-
<Tag>Heatmap</Tag>,
138-
<SubText style={{ marginTop: 7 }}>
139-
A heat map, also known as a heatmap, is a graphical representation of data in which individual values contained in a matrix are represented by colors. Heat maps are similar
140-
to shading matrices, which have been in use for over a century.
141-
</SubText>,
142-
],
143-
},
144132
{
145133
href: `/histogram`,
146134
name: 'Histogram',
@@ -164,29 +152,6 @@ export const VISUALIZATION_OPTIONS = [
164152
</SubText>,
165153
],
166154
},
167-
{
168-
href: `/matrix`,
169-
name: 'Matrix',
170-
data: [
171-
'',
172-
<Tag>Matrix</Tag>,
173-
<SubText style={{ marginTop: 7 }}>
174-
A matrix chart is a visualization tool that displays relationships between two or more variables in a dataset using a grid format.
175-
</SubText>,
176-
],
177-
},
178-
{
179-
href: `/pie`,
180-
name: 'Pie',
181-
data: [
182-
'',
183-
<Tag>Pie</Tag>,
184-
<SubText style={{ marginTop: 7 }}>
185-
A pie chart, also known as a circle chart, is a circular statistical graphic divided into slices that illustrate numerical proportions. In a pie chart, the arc length of
186-
each slice (and consequently its central angle and area) is proportional to the quantity it represents.
187-
</SubText>,
188-
],
189-
},
190155
{
191156
href: `/radar`,
192157
name: 'Radar',

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

+23-55
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,34 @@
11
import * as React from 'react';
22
import * as Utilities from '@common/utilities';
33

4+
import ChartLegend from '@system/graphs/ChartLegend';
45
import CandlestickChart from '@system/graphs/CandlestickChart';
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';
1513
import { FormHeading, FormSubHeading, FormParagraph, InputLabel } from '@system/typography/forms';
1614

17-
const TABLE_HEADINGS = [``, `Name`, `Optional`, `Description`];
18-
19-
const TABLE_DATA = [
20-
{
21-
data: [``, <Tag>Title</Tag>, <Tag>Yes</Tag>, <SubText style={{ marginTop: 7 }}>Specifies the chart's title, providing a brief description of its content. [20px]</SubText>],
22-
},
23-
24-
{
25-
data: [``, <Tag>Text</Tag>, <Tag>Yes</Tag>, <SubText style={{ marginTop: 7 }}>Adds contextual information or commentary to the chart. [16px]</SubText>],
26-
},
27-
28-
{
29-
data: [
30-
``,
31-
<Tag>Marks</Tag>,
32-
<Tag>No</Tag>,
33-
<SubText style={{ marginTop: 7 }}>Represents data points on the chart, such as bars, lines, or areas, to visualize the dataset.</SubText>,
34-
],
35-
},
36-
{
37-
data: [
38-
``,
39-
<Tag>Graph Lines</Tag>,
40-
<Tag>No</Tag>,
41-
<SubText style={{ marginTop: 7 }}>Provides visual cues to help interpret the chart by connecting data points to the axis, enhancing readability.</SubText>,
42-
],
43-
},
44-
{
45-
data: [``, <Tag>Axis</Tag>, <Tag>No</Tag>, <SubText style={{ marginTop: 7 }}>Defines the perimeter or boundary of the chart area.</SubText>],
46-
},
47-
{
48-
data: [``, <Tag>Axis Labels</Tag>, <Tag>No</Tag>, <SubText style={{ marginTop: 7 }}>Displays the measurement units or categories along the chart axes. [12px]</SubText>],
49-
},
15+
const EXAMPLE_DUMMY_DATA = [
16+
{ date: 'January', open: 30, high: 110, low: 20, close: 105 },
17+
{ date: 'February', open: 55, high: 120, low: 30, close: 115 },
18+
{ date: 'March', open: 55, high: 125, low: 45, close: 120 },
19+
{ date: 'April', open: 80, high: 130, low: 70, close: 125 },
5020
];
5121

52-
const EXAMPLE_DUMMY_DATA = [
53-
{ date: 'January', open: 100, high: 110, low: 90, close: 105 },
54-
{ date: 'February', open: 105, high: 120, low: 100, close: 115 },
55-
{ date: 'March', open: 115, high: 125, low: 105, close: 120 },
56-
{ date: 'April', open: 120, high: 130, low: 110, close: 125 },
57-
]; // Example data for the candlestick chart
22+
const EXAMPLE_LEGEND_DATA = [`var(--theme-graph-positive)`];
5823

5924
function ExampleSystemDataVisualizationCandlestick(props) {
60-
const chartContainerStyles = { padding: `0px 24px 16px 16px`, minHeight: 188 };
25+
// TODO(jimmylee)
26+
// Refactor these.
27+
const chartContainerStyles = { padding: `0 24px 48px 16px` };
28+
const infoStyles = { padding: '32px 24px 24px 24px', borderTop: `1px solid var(--theme-border)` };
29+
const pageStyles = { padding: `64px 24px 48px 22px` };
30+
const paragraphStyle = { marginTop: `1rem`, paddingRight: '2px', maxWidth: 768 };
6131

62-
const chart = {
63-
title: 'Candlestick Chart Example',
64-
description: 'This candlestick chart illustrates stock price movements over time, showcasing opening, closing, high, and low prices.',
65-
};
6632
return (
6733
<Page
6834
title="nextjs-sass-starter: system: data visualization: candlestick"
@@ -71,16 +37,18 @@ function ExampleSystemDataVisualizationCandlestick(props) {
7137
>
7238
<Navigation />
7339
<TwoColumnLayoutFull sidebarStyle={{ width: '240px', flexShrink: 0 }} sidebar={<DemoSystemDataVisualizationSidebar active="candlestick" data={VISUALIZATION_OPTIONS} />}>
74-
<H2 style={{ marginTop: 64, padding: '0 24px 0 22px' }}>Candlestick Chart</H2>
75-
<P style={{ marginTop: `1rem`, padding: '0 24px 0 24px', maxWidth: 768 }}>
76-
Candlestick charts are a visual tool for analyzing financial data, particularly useful for identifying market trends and price patterns.
77-
</P>
78-
<Title style={{ marginTop: `49px`, padding: '24px 24px 0 24px', borderTop: `1px solid var(--theme-border)` }}>{chart.title}</Title>
79-
<Text style={{ marginTop: `8px`, padding: '0 24px 0 24px' }}>{chart.description}</Text>
40+
<div style={pageStyles}>
41+
<H2>Candlestick</H2>
42+
<P style={paragraphStyle}>Candlestick charts are a visual tool for analyzing financial data, particularly useful for identifying market trends and price patterns.</P>
43+
</div>
44+
<div style={infoStyles}>
45+
<Title>Example</Title>
46+
<Text style={{ marginTop: `12px` }}>This is an example of a React & D3 candlestick chart component that you can use.</Text>
47+
</div>
8048
<div style={chartContainerStyles}>
81-
<CandlestickChart data={EXAMPLE_DUMMY_DATA} style={{ marginTop: 32 }} />
49+
<CandlestickChart data={EXAMPLE_DUMMY_DATA} />
50+
<ChartLegend data={EXAMPLE_LEGEND_DATA} />
8251
</div>
83-
<Table data={TABLE_DATA} headings={TABLE_HEADINGS} />
8452
</TwoColumnLayoutFull>
8553
<GlobalModalManager />
8654
</Page>

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

+30-70
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,39 @@
11
import * as React from 'react';
22
import * as Utilities from '@common/utilities';
33

4+
import ChartLegend from '@system/graphs/ChartLegend';
5+
import CohortChart from '@system/graphs/CohortChart';
46
import DemoSystemDataVisualizationSidebar, { VISUALIZATION_OPTIONS } from '@demos/DemoSystemDataVisualizationSidebar';
57
import GlobalModalManager from '@system/modals/GlobalModalManager';
6-
import CohortChart from '@system/graphs/CohortChart';
78
import Navigation from '@system/Navigation';
89
import Page from '@components/Page';
9-
import Table from '@system/Table';
10-
import Tag from '@system/documents/Tag';
1110
import TwoColumnLayoutFull from '@system/layouts/TwoColumnLayoutFull';
1211

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

15-
const TABLE_HEADINGS = [``, `Name`, `Optional`, `Description`];
16-
17-
const TABLE_DATA = [
18-
{
19-
data: [``, <Tag>Title</Tag>, <Tag>True</Tag>, <SubText style={{ marginTop: 7 }}>The title is used to describe the contents of your chart. [20px]</SubText>],
20-
},
21-
22-
{
23-
data: [``, <Tag>Text</Tag>, <Tag>True</Tag>, <SubText style={{ marginTop: 7 }}>Text is used to provide additional context. [16px]</SubText>],
24-
},
25-
26-
{
27-
data: [
28-
``,
29-
<Tag>Marks</Tag>,
30-
<Tag>False</Tag>,
31-
<SubText style={{ marginTop: 7 }}>The marks are visual representations of data on a chart. Common types of marks include bars, lines, and areas.</SubText>,
32-
],
33-
},
34-
{
35-
data: [
36-
``,
37-
<Tag>Graph Lines</Tag>,
38-
<Tag>False</Tag>,
39-
<SubText style={{ marginTop: 7 }}>
40-
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,
41-
while others use only vertical gridlines.
42-
</SubText>,
43-
],
44-
},
45-
{
46-
data: [``, <Tag>Axis</Tag>, <Tag>False</Tag>, <SubText style={{ marginTop: 7 }}>The axis borders define the boundaries of the chart.</SubText>],
47-
},
48-
{
49-
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>],
50-
},
51-
];
52-
5314
const EXAMPLE_DUMMY_DATA = [
54-
// Group A
55-
{ group: 'A', variable: 'v1', value: 45 },
56-
{ group: 'A', variable: 'v2', value: 55 },
57-
{ group: 'A', variable: 'v3', value: 35 },
58-
{ group: 'A', variable: 'v4', value: 20 },
59-
// Group B
60-
{ group: 'B', variable: 'v2', value: 15 },
15+
{ group: 'A', variable: 'v1', value: 80 },
16+
{ group: 'A', variable: 'v2', value: 45 },
17+
{ group: 'A', variable: 'v3', value: 60 },
18+
{ group: 'A', variable: 'v4', value: 100 },
19+
{ group: 'B', variable: 'v2', value: 0 },
6120
{ group: 'B', variable: 'v3', value: 20 },
62-
{ group: 'B', variable: 'v4', value: 25 },
63-
// Group C
21+
{ group: 'B', variable: 'v4', value: 60 },
6422
{ group: 'C', variable: 'v3', value: 30 },
6523
{ group: 'C', variable: 'v4', value: 35 },
66-
// Group D
6724
{ group: 'D', variable: 'v4', value: 35 },
6825
];
6926

70-
const EXAMPLE_LEGEND_ITEMS_DATA = [
71-
{ color: 'var(--theme-error-subdued-subdued-error)', label: 'under 25%' },
72-
{ color: 'var(--theme-border)', label: 'no significance' },
73-
{ color: 'var(--theme-success)', label: 'over 35%' },
74-
];
27+
const EXAMPLE_LEGEND_DATA = [`var(--theme-graph-positive)`, `var(--theme-graph-negative)`];
7528

7629
function ExampleSystemDataVisualizationCohortChart(props) {
77-
const chartContainerStyles = { padding: `0px 24px 16px 16px`, minHeight: 188 };
30+
// TODO(jimmylee)
31+
// Refactor these.
32+
const chartContainerStyles = { padding: `0 24px 48px 24px` };
33+
const infoStyles = { padding: '32px 24px 24px 24px', borderTop: `1px solid var(--theme-border)` };
34+
const pageStyles = { padding: `64px 24px 48px 22px` };
35+
const paragraphStyle = { marginTop: `1rem`, paddingRight: '2px', maxWidth: 768 };
7836

79-
const chart = {
80-
title: 'Cohort Chart Example',
81-
description: 'This is an example of a Cohort Chart using D3.js integrated into a React component.',
82-
};
8337
return (
8438
<Page
8539
title="nextjs-sass-starter: system: data visualization: cohort chart"
@@ -88,17 +42,23 @@ function ExampleSystemDataVisualizationCohortChart(props) {
8842
>
8943
<Navigation />
9044
<TwoColumnLayoutFull sidebarStyle={{ width: '240px', flexShrink: 0 }} sidebar={<DemoSystemDataVisualizationSidebar active="cohort" data={VISUALIZATION_OPTIONS} />}>
91-
<H2 style={{ marginTop: 64, padding: '0 24px 0 22px' }}>Cohort Chart</H2>
92-
<P style={{ marginTop: `1rem`, padding: '0 24px 0 24px', maxWidth: 768 }}>
93-
Cohort Chart visualization is a method of graphically representing numerical data where the value of each data point is indicated using colors. It can help visualize data
94-
distribution across different groups and variables.
95-
</P>
96-
<Title style={{ marginTop: `49px`, padding: '24px 24px 0 24px', borderTop: `1px solid var(--theme-border)` }}>{chart.title}</Title>
97-
<Text style={{ marginTop: `8px`, padding: '0 24px 0 24px' }}>{chart.description}</Text>
45+
<div style={pageStyles}>
46+
<H2>Cohort</H2>
47+
<P style={paragraphStyle}>
48+
Cohort Chart visualization is a method of graphically representing numerical data where the value of each data point is indicated using colors. It can help visualize
49+
data distribution across different groups and variables.
50+
</P>
51+
</div>
52+
53+
<div style={infoStyles}>
54+
<Title>Example</Title>
55+
<Text style={{ marginTop: `12px` }}>This is an example of a React & D3 cohort component that you can use.</Text>
56+
</div>
57+
9858
<div style={chartContainerStyles}>
99-
<CohortChart data={EXAMPLE_DUMMY_DATA} legend={EXAMPLE_LEGEND_ITEMS_DATA} style={{ height: '100%', width: '100%' }} />
59+
<CohortChart data={EXAMPLE_DUMMY_DATA} />
60+
<ChartLegend data={EXAMPLE_LEGEND_DATA} />
10061
</div>
101-
<Table data={TABLE_DATA} headings={TABLE_HEADINGS} />
10262
</TwoColumnLayoutFull>
10363
<GlobalModalManager />
10464
</Page>

0 commit comments

Comments
 (0)