Skip to content

Commit 0673f45

Browse files
jimmyleejimmylee
committed
complete refactor and dead code elimination
1 parent 231895f commit 0673f45

File tree

11 files changed

+156
-371
lines changed

11 files changed

+156
-371
lines changed

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

+7-2
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ function ExampleSystemDataVisualizationCandlestick(props) {
2626
// Refactor these.
2727
const chartContainerStyles = { padding: `0 24px 48px 16px` };
2828
const infoStyles = { padding: '32px 24px 24px 24px', borderTop: `1px solid var(--theme-border)` };
29-
const pageStyles = { padding: `64px 24px 48px 22px` };
29+
const pageStyles = { padding: `64px 24px 58.5px 22px` };
3030
const paragraphStyle = { marginTop: `1rem`, paddingRight: '2px', maxWidth: 768 };
3131

3232
return (
@@ -39,7 +39,12 @@ function ExampleSystemDataVisualizationCandlestick(props) {
3939
<TwoColumnLayoutFull sidebarStyle={{ width: '240px', flexShrink: 0 }} sidebar={<DemoSystemDataVisualizationSidebar active="candlestick" data={VISUALIZATION_OPTIONS} />}>
4040
<div style={pageStyles}>
4141
<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>
42+
<P style={paragraphStyle}>
43+
Candlestick charts are primarily used in financial analysis to visualize price movements of securities over time. Each "candle" represents four key pieces of
44+
information for a specific time period: the opening price, the closing price, the highest price, and the lowest price. This makes candlestick charts highly effective
45+
for traders looking to assess market sentiment and potential price direction. They excel in spotting market trends and price patterns, such as reversals or
46+
continuations, making them indispensable tools for technical analysis in trading.
47+
</P>
4348
</div>
4449
<div style={infoStyles}>
4550
<Title>Example</Title>

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

+103
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 BarGraphWithLines from '@system/graphs/BarGraphWithLines';
45
import ChartLegend from '@system/graphs/ChartLegend';
56
import ColumnChart from '@system/graphs/ColumnChart';
67
import DemoSystemDataVisualizationSidebar, { VISUALIZATION_OPTIONS } from '@demos/DemoSystemDataVisualizationSidebar';
@@ -28,6 +29,99 @@ const EXAMPLE_DUMMY_DATA = [
2829

2930
const EXAMPLE_LEGEND_DATA = [`var(--theme-graph-positive)`, `var(--theme-graph-negative)`];
3031

32+
const EXAMPLE_BAR_GRAPH_WITH_LINES_DATA = [
33+
{
34+
year: '2005',
35+
years: [
36+
{ name: 'electronics', value: 120, color: 'var(--theme-graph-positive)' },
37+
{ name: 'clothing', value: 150, color: 'var(--theme-success)' },
38+
{ name: 'accessories', value: 30, color: 'var(--theme-primary)' },
39+
],
40+
},
41+
{
42+
year: '2006',
43+
years: [
44+
{ name: 'electronics', value: 115, color: 'var(--theme-graph-positive)' },
45+
{ name: 'clothing', value: 165, color: 'var(--theme-success)' },
46+
{ name: 'accessories', value: 45, color: 'var(--theme-primary)' },
47+
],
48+
},
49+
{
50+
year: '2007',
51+
years: [
52+
{ name: 'electronics', value: 130, color: 'var(--theme-graph-positive)' },
53+
{ name: 'clothing', value: 175, color: 'var(--theme-success)' },
54+
{ name: 'accessories', value: 55, color: 'var(--theme-primary)' },
55+
],
56+
},
57+
{
58+
year: '2008',
59+
years: [
60+
{ name: 'electronics', value: 125, color: 'var(--theme-graph-positive)' },
61+
{ name: 'clothing', value: 190, color: 'var(--theme-success)' },
62+
{ name: 'accessories', value: 60, color: 'var(--theme-primary)' },
63+
],
64+
},
65+
{
66+
year: '2009',
67+
years: [
68+
{ name: 'electronics', value: 140, color: 'var(--theme-graph-positive)' },
69+
{ name: 'clothing', value: 185, color: 'var(--theme-success)' },
70+
{ name: 'accessories', value: 65, color: 'var(--theme-primary)' },
71+
],
72+
},
73+
{
74+
year: '2010',
75+
years: [
76+
{ name: 'electronics', value: 150, color: 'var(--theme-graph-positive)' },
77+
{ name: 'clothing', value: 210, color: 'var(--theme-success)' },
78+
{ name: 'accessories', value: 70, color: 'var(--theme-primary)' },
79+
],
80+
},
81+
{
82+
year: '2011',
83+
years: [
84+
{ name: 'electronics', value: 155, color: 'var(--theme-graph-positive)' },
85+
{ name: 'clothing', value: 220, color: 'var(--theme-success)' },
86+
{ name: 'accessories', value: 75, color: 'var(--theme-primary)' },
87+
],
88+
},
89+
{
90+
year: '2012',
91+
years: [
92+
{ name: 'electronics', value: 160, color: 'var(--theme-graph-positive)' },
93+
{ name: 'clothing', value: 230, color: 'var(--theme-success)' },
94+
{ name: 'accessories', value: 85, color: 'var(--theme-primary)' },
95+
],
96+
},
97+
{
98+
year: '2013',
99+
years: [
100+
{ name: 'electronics', value: 165, color: 'var(--theme-graph-positive)' },
101+
{ name: 'clothing', value: 240, color: 'var(--theme-success)' },
102+
{ name: 'accessories', value: 90, color: 'var(--theme-primary)' },
103+
],
104+
},
105+
{
106+
year: '2014',
107+
years: [
108+
{ name: 'electronics', value: 170, color: 'var(--theme-graph-positive)' },
109+
{ name: 'clothing', value: 250, color: 'var(--theme-success)' },
110+
{ name: 'accessories', value: 95, color: 'var(--theme-primary)' },
111+
],
112+
},
113+
{
114+
year: '2015',
115+
years: [
116+
{ name: 'electronics', value: 180, color: 'var(--theme-graph-positive)' },
117+
{ name: 'clothing', value: 260, color: 'var(--theme-success)' },
118+
{ name: 'accessories', value: 100, color: 'var(--theme-primary)' },
119+
],
120+
},
121+
];
122+
123+
const EXAMPLE_BAR_GRAPH_WITH_LINES_DATA_LEGEND = [`var(--theme-graph-positive)`, `var(--theme-success)`, `var(--theme-primary)`];
124+
31125
function ExampleSystemDataVisualizationColumn(props) {
32126
// TODO(jimmylee)
33127
// Refactor these.
@@ -59,6 +153,15 @@ function ExampleSystemDataVisualizationColumn(props) {
59153
<ColumnChart data={EXAMPLE_DUMMY_DATA} />
60154
<ChartLegend data={EXAMPLE_LEGEND_DATA} />
61155
</div>
156+
157+
<div style={infoStyles}>
158+
<Title>Example B</Title>
159+
<Text style={{ marginTop: `12px` }}>This is an example of a React & D3 circle and line bar chart component that you can use.</Text>
160+
</div>
161+
<div style={chartContainerStyles}>
162+
<BarGraphWithLines data={EXAMPLE_BAR_GRAPH_WITH_LINES_DATA} />
163+
<ChartLegend data={EXAMPLE_BAR_GRAPH_WITH_LINES_DATA_LEGEND} />
164+
</div>
62165
</TwoColumnLayoutFull>
63166
<GlobalModalManager />
64167
</Page>

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

+4-2
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ function ExampleSystemDataVisualizationDonut(props) {
1616
// Refactor these.
1717
const chartContainerStyles = { padding: `0 24px 48px 16px` };
1818
const infoStyles = { padding: '32px 24px 24px 24px', borderTop: `1px solid var(--theme-border)` };
19-
const pageStyles = { padding: `64px 24px 48px 22px` };
19+
const pageStyles = { padding: `64px 24px 55px 22px` };
2020
const paragraphStyle = { marginTop: `1rem`, paddingRight: '2px', maxWidth: 768 };
2121

2222
return (
@@ -30,7 +30,9 @@ function ExampleSystemDataVisualizationDonut(props) {
3030
<div style={pageStyles}>
3131
<H2>Donut</H2>
3232
<P style={paragraphStyle}>
33-
This example demonstrates how to integrate a D3.js Donut Chart into a React component. The chart visualizes data distribution across different categories.
33+
Donut charts are best when you need to show how parts fit into a whole. They work well for a few categories but get cluttered if you add too many. They're not great for
34+
detailed comparisons but do well to display broad data trends, like a quick glimpse of market share. The center of a donut chart can be used to highlight key
35+
information, making it not only functional but also visually appealing. They're best when simplicity and aesthetics need to meet.
3436
</P>
3537
</div>
3638

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

-136
This file was deleted.

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

+6-2
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ function ExampleSystemDataVisualizationHistogram(props) {
9595
const chartContainerStyles = { padding: `0 24px 48px 16px` };
9696
const infoStyles = { padding: '32px 24px 24px 24px', borderTop: `1px solid var(--theme-border)` };
9797
const paragraphStyles = { marginTop: `1rem`, paddingRight: '2px', maxWidth: 768 };
98-
const pageStyles = { padding: `64px 24px 44.5px 22px` };
98+
const pageStyles = { padding: `64px 24px 55px 22px` };
9999

100100
return (
101101
<Page
@@ -107,7 +107,11 @@ function ExampleSystemDataVisualizationHistogram(props) {
107107
<TwoColumnLayoutFull sidebarStyle={{ width: '240px', flexShrink: 0 }} sidebar={<DemoSystemDataVisualizationSidebar active="histogram" data={VISUALIZATION_OPTIONS} />}>
108108
<div style={pageStyles}>
109109
<H2>Histogram</H2>
110-
<P style={paragraphStyles}>The histogram visualizes the distribution of data across different ranges or bins.</P>
110+
<P style={paragraphStyles}>
111+
Histograms excel in showing the distribution of data across different intervals, revealing underlying patterns like normal distribution or skewness. They are
112+
particularly effective when you need to visualize the frequency of data points within certain ranges and are useful for highlighting outliers, gaps, or clusters. This
113+
makes them invaluable for statistical analysis, helping to understand the spread and central tendencies within sets of data.
114+
</P>
111115
</div>
112116

113117
<div style={infoStyles}>

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

+4-3
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ function ExampleSystemDataVisualizationTree(props) {
7878
const chartContainerStyles = { padding: `0 24px 48px 16px` };
7979
const infoStyles = { padding: '32px 24px 24px 24px', borderTop: `1px solid var(--theme-border)` };
8080
const paragraphStyles = { marginTop: `1rem`, paddingRight: '2px', maxWidth: 768 };
81-
const pageStyles = { padding: `64px 24px 48px 22px` };
81+
const pageStyles = { padding: `64px 24px 55px 22px` };
8282

8383
return (
8484
<Page
@@ -91,8 +91,9 @@ function ExampleSystemDataVisualizationTree(props) {
9191
<div style={pageStyles}>
9292
<H2>Tree</H2>
9393
<P style={paragraphStyles}>
94-
Node trees represent data in a hierarchical manner, which is intuitive for modeling many real-world scenarios, such as organizational structures, file systems, and
95-
more.
94+
Node tree diagrams are ideal for visualizing hierarchical data and relationships within a structured format, such as organizational charts, family trees, or software
95+
architecture. They clearly display the connections between parent and child nodes, making complex relationships easier to understand at a glance. These diagrams are
96+
especially useful for tracking pathways and seeing the flow of information or decision-making processes across multiple levels.
9697
</P>
9798
</div>
9899

0 commit comments

Comments
 (0)