Skip to content

Commit 231895f

Browse files
jimmyleejimmylee
committed
completes style refactor and sizing refactor
1 parent dc09ee4 commit 231895f

14 files changed

+248
-172
lines changed

‎demos/DemoSystemDataVisualizationSidebar.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export const VISUALIZATION_OPTIONS = [
4747
},
4848
{
4949
href: `/calendar`,
50-
name: 'Calendar',
50+
name: 'Calendar [WIP]',
5151
data: [
5252
'',
5353
<Tag>Calendar</Tag>,
@@ -106,7 +106,7 @@ export const VISUALIZATION_OPTIONS = [
106106
},
107107
{
108108
href: `/donut`,
109-
name: 'Donut',
109+
name: 'Donut [WIP]',
110110
data: [
111111
'',
112112
<Tag>Donut</Tag>,
@@ -118,7 +118,7 @@ export const VISUALIZATION_OPTIONS = [
118118
},
119119
{
120120
href: `/dotplot`,
121-
name: 'Dotplot',
121+
name: 'Dot plot',
122122
data: [
123123
'',
124124
<Tag>Dot plot</Tag>,

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ function ExampleSystemDataVisualizationCalendar(props) {
2828
url="https://wireframes.internet.dev/examples/system/data-visualization/calendar"
2929
>
3030
<Navigation />
31-
<TwoColumnLayoutFull sidebarStyle={{ width: '240px', flexShrink: 0 }} sidebar={<DemoSystemDataVisualizationSidebar active="calendar" data={VISUALIZATION_OPTIONS} />}>
31+
<TwoColumnLayoutFull sidebarStyle={{ width: '240px', flexShrink: 0 }} sidebar={<DemoSystemDataVisualizationSidebar active="calendar [wip]" data={VISUALIZATION_OPTIONS} />}>
3232
<div style={pageStyles}>
3333
<H2>Calendar</H2>
3434
<P style={paragraphStyle}>

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

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

4-
import DemoSystemDataVisualizationSidebar, { VISUALIZATION_OPTIONS } from '@demos/DemoSystemDataVisualizationSidebar';
54
import ChartLegend from '@system/graphs/ChartLegend';
65
import ColumnChart from '@system/graphs/ColumnChart';
6+
import DemoSystemDataVisualizationSidebar, { VISUALIZATION_OPTIONS } from '@demos/DemoSystemDataVisualizationSidebar';
77
import GlobalModalManager from '@system/modals/GlobalModalManager';
88
import Navigation from '@system/Navigation';
99
import Page from '@components/Page';

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ function ExampleSystemDataVisualizationDonut(props) {
2626
url="https://wireframes.internet.dev/examples/system/data-visualization/donut"
2727
>
2828
<Navigation />
29-
<TwoColumnLayoutFull sidebarStyle={{ width: '240px', flexShrink: 0 }} sidebar={<DemoSystemDataVisualizationSidebar active="donut" data={VISUALIZATION_OPTIONS} />}>
29+
<TwoColumnLayoutFull sidebarStyle={{ width: '240px', flexShrink: 0 }} sidebar={<DemoSystemDataVisualizationSidebar active="donut [wip]" data={VISUALIZATION_OPTIONS} />}>
3030
<div style={pageStyles}>
3131
<H2>Donut</H2>
3232
<P style={paragraphStyle}>

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

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

4+
import ChartLegend from '@system/graphs/ChartLegend';
45
import DemoSystemDataVisualizationSidebar, { VISUALIZATION_OPTIONS } from '@demos/DemoSystemDataVisualizationSidebar';
56
import DotPlot from '@root/system/graphs/DotPlot';
67
import GlobalModalManager from '@system/modals/GlobalModalManager';
@@ -34,13 +35,16 @@ const EXAMPLE_DUMMY_DATA = [
3435
{ label: 'Item 20', value: 23 },
3536
];
3637

38+
const EXAMPLE_LEGEND_DATA = [`var(--theme-graph-positive)`, `var(--theme-graph-negative)`];
39+
3740
function ExampleSystemDataVisualizationDotPlot(props) {
38-
const chartContainerStyles = { padding: `0px 24px 16px 16px`, minHeight: 400 };
41+
// TODO(jimmylee)
42+
// Refactor these.
43+
const chartContainerStyles = { padding: `0 24px 48px 16px` };
44+
const infoStyles = { padding: '32px 24px 24px 24px', borderTop: `1px solid var(--theme-border)` };
45+
const paragraphStyles = { marginTop: `1rem`, paddingRight: '2px', maxWidth: 768 };
46+
const pageStyles = { padding: `64px 24px 51.5px 22px` };
3947

40-
const chart = {
41-
title: 'Dot plot Example',
42-
description: 'This is an example of a Dot plot using D3.js integrated into a React component.',
43-
};
4448
return (
4549
<Page
4650
title="nextjs-sass-starter: system: data visualization: donut"
@@ -49,16 +53,23 @@ function ExampleSystemDataVisualizationDotPlot(props) {
4953
>
5054
<Navigation />
5155
<TwoColumnLayoutFull sidebarStyle={{ width: '240px', flexShrink: 0 }} sidebar={<DemoSystemDataVisualizationSidebar active="dotplot" data={VISUALIZATION_OPTIONS} />}>
52-
<H2 style={{ marginTop: 64, padding: '0 24px 0 22px' }}>Dot plot</H2>
53-
<P style={{ marginTop: `1rem`, padding: '0 24px 0 24px', maxWidth: 768 }}>
54-
A Dot plot is a versatile and straightforward way to visualize data, offering clear insights into the distribution and comparison of values across different groups or
55-
categories. Their simplicity and clarity can be particularly valuable in exploratory data analysis, educational settings, and any situation where individual data points
56-
and their distribution are of interest.{' '}
57-
</P>
58-
<Title style={{ marginTop: `49px`, padding: '24px 24px 0 24px', borderTop: `1px solid var(--theme-border)` }}>{chart.title}</Title>
59-
<Text style={{ marginTop: `8px`, padding: '0 24px 0 24px' }}>{chart.description}</Text>
56+
<div style={pageStyles}>
57+
<H2>Dot plot</H2>
58+
<P style={paragraphStyles}>
59+
A dot plot is a versatile and straightforward way to visualize data, offering clear insights into the distribution and comparison of values across different groups or
60+
categories. Their simplicity and clarity can be particularly valuable in exploratory data analysis, educational settings, and any situation where individual data points
61+
and their distribution are of interest.
62+
</P>
63+
</div>
64+
65+
<div style={infoStyles}>
66+
<Title>Example</Title>
67+
<Text style={{ marginTop: `12px` }}>This is an example of a React & D3 dot plot component that you can use.</Text>
68+
</div>
69+
6070
<div style={chartContainerStyles}>
61-
<DotPlot data={EXAMPLE_DUMMY_DATA} style={{ marginTop: 32 }} />
71+
<DotPlot data={EXAMPLE_DUMMY_DATA} />
72+
<ChartLegend data={EXAMPLE_LEGEND_DATA} />
6273
</div>
6374
</TwoColumnLayoutFull>
6475
<GlobalModalManager />

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

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

4+
import ChartLegend from '@system/graphs/ChartLegend';
45
import DemoSystemDataVisualizationSidebar, { VISUALIZATION_OPTIONS } from '@demos/DemoSystemDataVisualizationSidebar';
56
import GlobalModalManager from '@system/modals/GlobalModalManager';
67
import GridLayout from '@system/layouts/GridLayout';
@@ -86,8 +87,15 @@ const EXAMPLE_DUMMY_DATA = [
8687
},
8788
];
8889

90+
const EXAMPLE_LEGEND_DATA = [`var(--theme-graph-positive)`];
91+
8992
function ExampleSystemDataVisualizationHistogram(props) {
90-
const chartContainerStyles = { padding: `0px 24px 16px 16px`, minHeight: 188 };
93+
// TODO(jimmylee)
94+
// Refactor these.
95+
const chartContainerStyles = { padding: `0 24px 48px 16px` };
96+
const infoStyles = { padding: '32px 24px 24px 24px', borderTop: `1px solid var(--theme-border)` };
97+
const paragraphStyles = { marginTop: `1rem`, paddingRight: '2px', maxWidth: 768 };
98+
const pageStyles = { padding: `64px 24px 44.5px 22px` };
9199

92100
return (
93101
<Page
@@ -97,14 +105,19 @@ function ExampleSystemDataVisualizationHistogram(props) {
97105
>
98106
<Navigation />
99107
<TwoColumnLayoutFull sidebarStyle={{ width: '240px', flexShrink: 0 }} sidebar={<DemoSystemDataVisualizationSidebar active="histogram" data={VISUALIZATION_OPTIONS} />}>
100-
<H2 style={{ marginTop: 64, padding: '0 24px 0 22px' }}>Histogram</H2>
101-
<P style={{ marginTop: `1rem`, padding: '0 24px 0 24px', maxWidth: 768 }}>
102-
This example demonstrates how to integrate a D3.js Histogram into a React component. The histogram visualizes the distribution of data across different ranges or bins.
103-
</P>
104-
<Title style={{ marginTop: `49px`, padding: '24px 24px 0 24px', borderTop: `1px solid var(--theme-border)` }}>Example</Title>
105-
<Text style={{ marginTop: `8px`, padding: '0 24px 0 24px' }}>This is an example of a Histogram using D3.js integrated into a React component.</Text>
108+
<div style={pageStyles}>
109+
<H2>Histogram</H2>
110+
<P style={paragraphStyles}>The histogram visualizes the distribution of data across different ranges or bins.</P>
111+
</div>
112+
113+
<div style={infoStyles}>
114+
<Title>Example</Title>
115+
<Text style={{ marginTop: `12px` }}>This is an example of a React & D3 histogram component that you can use.</Text>
116+
</div>
117+
106118
<div style={chartContainerStyles}>
107-
<HistogramChart data={EXAMPLE_DUMMY_DATA} style={{ height: '100%', width: '100%' }} />
119+
<HistogramChart data={EXAMPLE_DUMMY_DATA} />
120+
<ChartLegend data={EXAMPLE_LEGEND_DATA} />
108121
</div>
109122
</TwoColumnLayoutFull>
110123
<GlobalModalManager />

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

+47-38
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,36 @@
11
import * as React from 'react';
22
import * as Utilities from '@common/utilities';
33

4+
import ChartLegend from '@system/graphs/ChartLegend';
45
import DemoSystemDataVisualizationSidebar, { VISUALIZATION_OPTIONS } from '@demos/DemoSystemDataVisualizationSidebar';
56
import GlobalModalManager from '@system/modals/GlobalModalManager';
7+
import LineChart from '@root/system/graphs/LineChart';
68
import Navigation from '@system/Navigation';
79
import Page from '@components/Page';
810
import TwoColumnLayoutFull from '@system/layouts/TwoColumnLayoutFull';
911

1012
import { H2, P, Title, Text, SubText } from '@system/typography';
11-
import LineChart from '@root/system/graphs/LineChart';
13+
14+
const EXAMPLE_LEGEND_DATA = [`var(--theme-graph-positive)`];
15+
const EXAMPLE_LEGEND_DATA_WITH_AREA = [`var(--theme-graph-positive)`, `var(--theme-border)`];
1216

1317
const EXAMPLE_DUMMY_DATA = [
14-
{ value: 20, date: '2023-1-1', lower_ci: 18, upper_ci: 22 },
15-
{ value: 30, date: '2023-2-1', lower_ci: 27, upper_ci: 33 },
16-
{ value: 45, date: '2023-3-1', lower_ci: 41, upper_ci: 49.5 },
1718
{ value: 70, date: '2023-4-1', lower_ci: 63, upper_ci: 77 },
1819
{ value: 100, date: '2023-5-1', lower_ci: 90, upper_ci: 110 },
1920
{ value: 135, date: '2023-6-1', lower_ci: 121.5, upper_ci: 148.5 },
2021
{ value: 145, date: '2023-7-1', lower_ci: 130.5, upper_ci: 159.5 },
2122
{ value: 135, date: '2023-8-1', lower_ci: 121.5, upper_ci: 148.5 },
2223
{ value: 100, date: '2023-9-1', lower_ci: 90, upper_ci: 110 },
2324
{ value: 70, date: '2023-10-1', lower_ci: 63, upper_ci: 77 },
24-
{ value: 45, date: '2023-11-1', lower_ci: 41, upper_ci: 49.5 },
25-
{ value: 30, date: '2023-12-1', lower_ci: 27, upper_ci: 33 },
2625
];
2726

2827
function ExampleSystemDataVisualizationLine(props) {
29-
const chartContainerStyles = { padding: `0px 24px 16px 16px` };
30-
31-
const chart = {
32-
title: 'Price of Apples in 2023',
33-
};
34-
35-
const variantA = {
36-
title: 'Line Chart - Variant A',
37-
};
38-
39-
const variantB = {
40-
title: 'Line Chart - Variant B',
41-
};
42-
43-
const variantC = {
44-
title: 'Line Chart - Variant C',
45-
};
28+
// TODO(jimmylee)
29+
// Refactor these.
30+
const chartContainerStyles = { padding: `0 24px 48px 16px` };
31+
const infoStyles = { padding: '32px 24px 24px 24px', borderTop: `1px solid var(--theme-border)` };
32+
const paragraphStyles = { marginTop: `1rem`, paddingRight: '2px', maxWidth: 768 };
33+
const pageStyles = { padding: `64px 24px 51.5px 22px` };
4634

4735
return (
4836
<Page
@@ -52,36 +40,57 @@ function ExampleSystemDataVisualizationLine(props) {
5240
>
5341
<Navigation />
5442
<TwoColumnLayoutFull sidebarStyle={{ width: '240px', flexShrink: 0 }} sidebar={<DemoSystemDataVisualizationSidebar active="line" data={VISUALIZATION_OPTIONS} />}>
55-
<H2 style={{ marginTop: 64, padding: '0 24px 0 22px' }}>Line</H2>
56-
<P style={{ marginTop: `1rem`, padding: '0 24px 0 24px', maxWidth: 768 }}>
57-
A line chart, also known as a line plot or line graph, uses points connected by line segments from left to right to demonstrate changes in value. The horizontal axis
58-
typically represents a continuous progression, often that of time, while the vertical axis displays values for a metric of interest across that progression.
59-
</P>
60-
<P style={{ marginTop: `1rem`, padding: '0 24px 0 24px', maxWidth: 768 }}>
61-
You should use a line chart when you want to emphasize changes in values for one variable (plotted on the vertical axis) over continuous values of a second variable
62-
(plotted on the horizontal axis). This emphasis on patterns of change is conveyed by line segments moving consistently from left to right, allowing the observer to easily
63-
identify the slopes of the lines moving up or down.
64-
</P>
65-
66-
<Title style={{ marginTop: `49px`, padding: '24px 24px 0 24px', borderTop: `1px solid var(--theme-border)` }}>{chart.title}</Title>
43+
<div style={pageStyles}>
44+
<H2>Line</H2>
45+
<P style={paragraphStyles}>
46+
A line chart is used when you want to emphasize changes in values for one variable (plotted on the vertical axis) over continuous values of a second variable (plotted
47+
on the horizontal axis). This emphasis on patterns of change is conveyed by line segments moving consistently from left to right, allowing the observer to easily
48+
identify the slopes of the lines moving up or down.
49+
</P>
50+
</div>
51+
52+
<div style={infoStyles}>
53+
<Title>Example</Title>
54+
<Text style={{ marginTop: `12px` }}>This is an example of a React & D3 single line chart component that you can use.</Text>
55+
</div>
56+
6757
<div style={chartContainerStyles}>
6858
<LineChart data={EXAMPLE_DUMMY_DATA} style={{ marginTop: 32 }} showErrorBars={false} showConfidenceIntervalFill={false} />
59+
<ChartLegend data={EXAMPLE_LEGEND_DATA} />
6960
</div>
7061

71-
<Text style={{ marginTop: `8px`, padding: '0 24px 0 24px' }}>{variantA.title}</Text>
62+
<div style={infoStyles}>
63+
<Title>Example B</Title>
64+
<Text style={{ marginTop: `12px` }}>This is an example of a React & D3 line chart component with upper and lower confidence intervals that you can use.</Text>
65+
</div>
7266

7367
<div style={chartContainerStyles}>
7468
<LineChart data={EXAMPLE_DUMMY_DATA} style={{ marginTop: 32 }} showErrorBars={true} showConfidenceIntervalFill={false} />
69+
<ChartLegend data={EXAMPLE_LEGEND_DATA} />
70+
</div>
71+
72+
<div style={infoStyles}>
73+
<Title>Example C</Title>
74+
<Text style={{ marginTop: `12px` }}>
75+
This is an example of a React & D3 line chart component with upper and lower confidence intervals and area highlighting that you can use.
76+
</Text>
7577
</div>
7678

77-
<Text style={{ marginTop: `8px`, padding: '0 24px 0 24px' }}>{variantB.title}</Text>
7879
<div style={chartContainerStyles}>
7980
<LineChart data={EXAMPLE_DUMMY_DATA} style={{ marginTop: 32 }} showErrorBars={true} showConfidenceIntervalFill={true} />
81+
<ChartLegend data={EXAMPLE_LEGEND_DATA_WITH_AREA} />
82+
</div>
83+
84+
<div style={infoStyles}>
85+
<Title>Example</Title>
86+
<Text style={{ marginTop: `12px` }}>
87+
This is an example of a React & D3 line chart component with upper and lower confidence intervals and full area highlighting that you can use.
88+
</Text>
8089
</div>
8190

82-
<Text style={{ marginTop: `8px`, padding: '0 24px 0 24px' }}>{variantC.title}</Text>
8391
<div style={chartContainerStyles}>
8492
<LineChart data={EXAMPLE_DUMMY_DATA} style={{ marginTop: 32 }} showErrorBars={true} showConfidenceIntervalFill={true} showAreaFill={true} />
93+
<ChartLegend data={EXAMPLE_LEGEND_DATA_WITH_AREA} />
8594
</div>
8695
</TwoColumnLayoutFull>
8796
<GlobalModalManager />

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

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

4+
import ChartLegend from '@system/graphs/ChartLegend';
45
import DemoSystemDataVisualizationSidebar, { VISUALIZATION_OPTIONS } from '@demos/DemoSystemDataVisualizationSidebar';
56
import GlobalModalManager from '@system/modals/GlobalModalManager';
67
import Navigation from '@system/Navigation';
@@ -45,8 +46,16 @@ const EXAMPLE_DUMMY_DATA = [
4546
{ axis: 'To Be A Smartphone', value: 0.3 },
4647
],
4748
];
49+
50+
const EXAMPLE_LEGEND_DATA = [`var(--theme-border)`];
51+
4852
function ExampleSystemDataVisualizationRadar(props) {
49-
const chartContainerStyles = { padding: `0px 24px 16px 16px`, minHeight: 188 };
53+
// TODO(jimmylee)
54+
// Refactor these.
55+
const chartContainerStyles = { padding: `0 24px 48px 16px` };
56+
const infoStyles = { padding: '32px 24px 24px 24px', borderTop: `1px solid var(--theme-border)` };
57+
const paragraphStyles = { marginTop: `1rem`, paddingRight: '2px', maxWidth: 768 };
58+
const pageStyles = { padding: `64px 24px 48px 22px` };
5059

5160
return (
5261
<Page
@@ -56,15 +65,22 @@ function ExampleSystemDataVisualizationRadar(props) {
5665
>
5766
<Navigation />
5867
<TwoColumnLayoutFull sidebarStyle={{ width: '240px', flexShrink: 0 }} sidebar={<DemoSystemDataVisualizationSidebar active="radar" data={VISUALIZATION_OPTIONS} />}>
59-
<H2 style={{ marginTop: 64, padding: '0 24px 0 22px' }}>Radar</H2>
60-
<P style={{ marginTop: `1rem`, padding: '0 24px 0 24px', maxWidth: 768 }}>
61-
Radar charts, also known as spider charts or web charts, offer a way to display multivariate data in the form of a two-dimensional chart of three or more quantitative
62-
variables represented on axes starting from the same point.
63-
</P>
64-
<Title style={{ marginTop: `49px`, padding: '24px 24px 0 24px', borderTop: `1px solid var(--theme-border)` }}>Radar</Title>
65-
<Text style={{ marginTop: `8px`, padding: '0 24px 0 24px' }}>Example radar chart</Text>
68+
<div style={pageStyles}>
69+
<H2>Radar</H2>
70+
<P style={paragraphStyles}>
71+
Radar charts, also known as spider charts or web charts, offer a way to display multivariate data in the form of a two-dimensional chart of three or more quantitative
72+
variables represented on axes starting from the same point.
73+
</P>
74+
</div>
75+
76+
<div style={infoStyles}>
77+
<Title>Example</Title>
78+
<Text style={{ marginTop: `12px` }}>This is an example of a React & D3 radar chart component that you can use.</Text>
79+
</div>
80+
6681
<div style={chartContainerStyles}>
6782
<RadarChart data={EXAMPLE_DUMMY_DATA} style={{ marginTop: 24 }} />
83+
<ChartLegend data={EXAMPLE_LEGEND_DATA} />
6884
</div>
6985
</TwoColumnLayoutFull>
7086
<GlobalModalManager />

0 commit comments

Comments
 (0)