Skip to content

Commit 5563eb4

Browse files
GomezIvannGomezIvann
committed
New data visualization page
1 parent c6e1fda commit 5563eb4

File tree

6 files changed

+394
-0
lines changed

6 files changed

+394
-0
lines changed

‎apps/website/pages/principles/data-visualization.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import Head from "next/head";
2+
import DataVisualizationPage from "../../screens/principles/data-visualization/DataVisualizationPage";
3+
4+
const DataVisualization = () => {
5+
return (
6+
<>
7+
<Head>
8+
<title>Data visualization — Halstack Design System</title>
9+
</Head>
10+
<DataVisualizationPage></DataVisualizationPage>
11+
</>
12+
);
13+
};
14+
15+
export default DataVisualization;

‎apps/website/screens/common/pagesList.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ const utilitiesLinks: LinkDetails[] = [
3434

3535
const principlesLinks: LinkDetails[] = [
3636
{ label: "Color", path: "/principles/color" },
37+
{ label: "Data visualization", path: "/principles/data-visualization" },
3738
{ label: "Iconography", path: "/principles/iconography" },
3839
{ label: "Layout", path: "/principles/layout" },
3940
{ label: "Localization", path: "/principles/localization" },

‎apps/website/screens/principles/data-visualization/DataVisualizationPage.tsx‎

Lines changed: 281 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,281 @@
1+
import { DxcFlex, DxcParagraph, DxcHeading, DxcTable, DxcLink, DxcBulletedList } from "@dxc-technology/halstack-react";
2+
import QuickNavContainer from "@/common/QuickNavContainer";
3+
import DocFooter from "@/common/DocFooter";
4+
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
5+
import PageHeading from "@/common/PageHeading";
6+
import Code from "@/common/Code";
7+
import Figure from "@/common/Figure";
8+
import Image from "@/common/Image";
9+
import Link from "next/link";
10+
import colorPalette from "./images/bar_chart_color_palette.png";
11+
import barChartVariants from "./images/bar_chart_variants.png";
12+
import Example from "@/common/example/Example";
13+
import themeBarChart from "./examples/barChart";
14+
15+
const sections = [
16+
{
17+
title: "Introduction",
18+
content: (
19+
<>
20+
<DxcParagraph>
21+
At Halstack, we believe that effective data visualization is crucial for transforming complex data into clear,
22+
actionable insights. Our principles focus on clarity, accuracy, accessibility, and interactivity. By adhering
23+
to these guidelines, you can create visual representations that are not only aesthetically pleasing but also
24+
highly functional, ensuring that users can easily understand and interact with the data presented.
25+
</DxcParagraph>
26+
<DxcParagraph>
27+
As we consider data visualisation a tremendously dense and complex design pattern, we have decided to rely on
28+
another design system for this task. Our choice was{" "}
29+
<Link href="https://cloudscape.design/" passHref legacyBehavior>
30+
<DxcLink>Cloudscape</DxcLink>
31+
</Link>
32+
.
33+
</DxcParagraph>
34+
<DxcParagraph>
35+
Cloudscape offers high-quality, adaptable, and user-friendly tools for creating clear and comprehensive data
36+
visualizations. This helps our users understand and analyze data effectively, facilitating informed
37+
decision-making.
38+
</DxcParagraph>
39+
</>
40+
),
41+
},
42+
{
43+
title: "Chart types",
44+
content: (
45+
<>
46+
<DxcParagraph>The Cloudscape design system provides a wide range of chart types, including:</DxcParagraph>
47+
<DxcBulletedList>
48+
<DxcBulletedList.Item>
49+
<Link href="https://cloudscape.design/components/bar-chart/" passHref legacyBehavior>
50+
<DxcLink>Bar chart</DxcLink>
51+
</Link>
52+
</DxcBulletedList.Item>
53+
<DxcBulletedList.Item>
54+
<Link href="https://cloudscape.design/components/line-chart/" passHref legacyBehavior>
55+
<DxcLink>Line chart</DxcLink>
56+
</Link>
57+
</DxcBulletedList.Item>
58+
<DxcBulletedList.Item>
59+
<Link href="https://cloudscape.design/components/mixed-line-bar-chart/" passHref legacyBehavior>
60+
<DxcLink>Mixed line and bar chart</DxcLink>
61+
</Link>
62+
</DxcBulletedList.Item>
63+
<DxcBulletedList.Item>
64+
<Link href="https://cloudscape.design/components/area-chart/" passHref legacyBehavior>
65+
<DxcLink>Area chart</DxcLink>
66+
</Link>
67+
</DxcBulletedList.Item>
68+
<DxcBulletedList.Item>
69+
<Link href="https://cloudscape.design/components/pie-chart/" passHref legacyBehavior>
70+
<DxcLink>Pie and donut chart</DxcLink>
71+
</Link>
72+
</DxcBulletedList.Item>
73+
</DxcBulletedList>
74+
<DxcParagraph>
75+
For a better understanding of all these components, how to use them and other general guidelines and
76+
fundamentals, please look at{" "}
77+
<Link href="https://cloudscape.design/patterns/general/data-vis/" passHref legacyBehavior>
78+
<DxcLink>Cloudscape data visualization pattern.</DxcLink>
79+
</Link>
80+
</DxcParagraph>
81+
</>
82+
),
83+
},
84+
{
85+
title: "Bar chart",
86+
content: (
87+
<DxcParagraph>
88+
A bar chart is a graphical representation that displays and compares discrete data categories using rectangular
89+
bars. Each bar's length or height is proportional to the frequency or value of its corresponding category,
90+
allowing users to identify which groups are the highest or most common and compare them with others.
91+
</DxcParagraph>
92+
),
93+
subSections: [
94+
{
95+
title: "Do's",
96+
content: (
97+
<DxcBulletedList>
98+
<DxcBulletedList.Item>
99+
Ensure both the X and Y axes are labeled with appropriate units and descriptions.
100+
</DxcBulletedList.Item>
101+
<DxcBulletedList.Item>
102+
Always plot bars against a zero-value baseline. It simplifies bar length comparison and ensures accurate
103+
data visualization. A non-zero baseline can distort the comparison as it disrupts the ratio between bar
104+
lengths and actual values.
105+
</DxcBulletedList.Item>
106+
<DxcBulletedList.Item>
107+
When constructing a bar chart, consider the order in which you will plot the bars. A common convention is
108+
to sort the bars from longest to shortest. While comparisons can be made regardless of order, this
109+
approach can ease the reader's task. However, if the category labels have an inherent order, this should
110+
typically take precedence.
111+
</DxcBulletedList.Item>
112+
</DxcBulletedList>
113+
),
114+
},
115+
{
116+
title: "Don'ts",
117+
content: (
118+
<DxcBulletedList>
119+
<DxcBulletedList.Item>
120+
Avoid adding too many categories or bars in a single chart, which can make it cluttered and hard to read.
121+
</DxcBulletedList.Item>
122+
<DxcBulletedList.Item>Consider breaking up data into multiple charts if necessary.</DxcBulletedList.Item>
123+
<DxcBulletedList.Item>
124+
Avoid using abbreviations or jargon in labels that might not be understood by all viewers.
125+
</DxcBulletedList.Item>
126+
</DxcBulletedList>
127+
),
128+
},
129+
{
130+
title: "Variants",
131+
content: (
132+
<Figure caption="Summary of all the Bar Chart variants">
133+
<Image src={barChartVariants} alt="Bar chart variants" />
134+
</Figure>
135+
),
136+
},
137+
],
138+
},
139+
{
140+
title: "Design tokens",
141+
subSections: [
142+
{
143+
title: "Color",
144+
content: (
145+
<>
146+
<DxcParagraph>
147+
We have carefully selected various shades from our color palette to be used in data visualization.
148+
Accessibility has been a key consideration in this selection, ensuring that these colors are
149+
distinguishable for all users.
150+
</DxcParagraph>
151+
<Image src={colorPalette} alt="Bar chart color palette" />
152+
<DxcTable>
153+
<thead>
154+
<tr>
155+
<th>Categorical color</th>
156+
<th>Core token</th>
157+
<th>Value</th>
158+
</tr>
159+
</thead>
160+
<tbody>
161+
<tr>
162+
<td>color-categorical-01</td>
163+
<td>
164+
<Code>color-purple-500</Code>
165+
</td>
166+
<td>#A46EDE</td>
167+
</tr>
168+
<tr>
169+
<td>color-categorical-02</td>
170+
<td>
171+
<Code>color-blue-600</Code>
172+
</td>
173+
<td>#0095FF</td>
174+
</tr>
175+
<tr>
176+
<td>color-categorical-03</td>
177+
<td>
178+
<Code>color-green-700</Code>
179+
</td>
180+
<td>#24A148</td>
181+
</tr>
182+
<tr>
183+
<td>color-categorical-04</td>
184+
<td>
185+
<Code>color-red-500</Code>
186+
</td>
187+
<td>#FE344F</td>
188+
</tr>
189+
<tr>
190+
<td>color-categorical-05</td>
191+
<td>
192+
<Code>color-yellow-800</Code>
193+
</td>
194+
<td>#947705</td>
195+
</tr>
196+
<tr>
197+
<td>color-categorical-06</td>
198+
<td>
199+
<Code>color-orange-700</Code>
200+
</td>
201+
<td>#C26C0A</td>
202+
</tr>
203+
<tr>
204+
<td>color-categorical-07</td>
205+
<td>
206+
<Code>color-purple-600</Code>
207+
</td>
208+
<td>#7D2FD0</td>
209+
</tr>
210+
<tr>
211+
<td>color-categorical-08</td>
212+
<td>
213+
<Code>color-blue-800</Code>
214+
</td>
215+
<td>#0067B3</td>
216+
</tr>
217+
<tr>
218+
<td>color-categorical-09</td>
219+
<td>
220+
<Code>color-green-900</Code>
221+
</td>
222+
<td>#135325</td>
223+
</tr>
224+
<tr>
225+
<td>color-categorical-10</td>
226+
<td>
227+
<Code>color-red-700</Code>
228+
</td>
229+
<td>#D0011B</td>
230+
</tr>
231+
<tr>
232+
<td>color-categorical-11</td>
233+
<td>
234+
<Code>color-yellow-900</Code>
235+
</td>
236+
<td>#624F04</td>
237+
</tr>
238+
<tr>
239+
<td>color-categorical-12</td>
240+
<td>
241+
<Code>color-orange-800</Code>
242+
</td>
243+
<td>#915108</td>
244+
</tr>
245+
</tbody>
246+
</DxcTable>
247+
</>
248+
),
249+
},
250+
],
251+
},
252+
{
253+
title: "How to apply our design tokens",
254+
content: (
255+
<>
256+
<DxcParagraph>
257+
Here is an example on how to apply our design tokens to a bar chart using the Cloudscape theming strategy.
258+
</DxcParagraph>
259+
{/* <Example example={themeBarChart} defaultIsVisible /> */}
260+
</>
261+
),
262+
},
263+
];
264+
265+
const DataVisualizationPage = () => {
266+
return (
267+
<DxcFlex direction="column" gap="4rem">
268+
<PageHeading>
269+
<DxcFlex direction="column" gap="2rem">
270+
<DxcHeading level={1} text="Data visualization" weight="bold"></DxcHeading>
271+
</DxcFlex>
272+
</PageHeading>
273+
<QuickNavContainerLayout>
274+
<QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
275+
</QuickNavContainerLayout>
276+
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/website/screens/principles/data-visualization/DataVisualizationPage.tsx" />
277+
</DxcFlex>
278+
);
279+
};
280+
281+
export default DataVisualizationPage;

0 commit comments

Comments
 (0)