-
Notifications
You must be signed in to change notification settings - Fork 114
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(website): add data visualization foundation page (#2236)
* feat: add data viz foundations page * feat: finish page, add library page * chore: update yarnlock * fix: broken link * fix: pr feedback * fix: add changelog * chore: add changeset * fix: add core to changelog * fix: patch preview images * chore: update copy * chore: update data-viz package * chore: fix conflicts Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
- Loading branch information
1 parent
2100371
commit 33c4368
Showing
13 changed files
with
417 additions
and
24 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| --- | ||
| '@twilio-paste/data-visualization-library': patch | ||
| '@twilio-paste/core': patch | ||
| --- | ||
|
|
||
| [Data Visualization] add changelog |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file added
BIN
+59.9 KB
...paste-website/src/assets/images/foundations/data-visualization/figma-colors.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+72.8 KB
...s/paste-website/src/assets/images/foundations/data-visualization/line-chart.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+75.4 KB
...es/paste-website/src/assets/images/foundations/data-visualization/pie-chart.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
96 changes: 96 additions & 0 deletions
96
packages/paste-website/src/component-examples/DataVisualizationExamples.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| import * as React from 'react'; | ||
| import {Box} from '@twilio-paste/box'; | ||
| import {ThemeContext, styled, themeGet} from '@twilio-paste/styling-library'; | ||
| import type {ThemeShape} from '@twilio-paste/theme'; | ||
| import {ColorSwatchText} from '../components/color-swatch/ColorSwatch'; | ||
| import {StyledSwatchGrid, ImgCaption} from './ColorsFoundationExamples'; | ||
|
|
||
| interface TokenData { | ||
| name: string; | ||
| value: string; | ||
| } | ||
|
|
||
| // Need to use styled div because the data-viz names aren't valid backgroundColors on Box | ||
| const StyledSwatch = styled.div<{backgroundColor: string}>` | ||
| position: relative; | ||
| border-radius: ${themeGet('radii.borderRadius20')}; | ||
| background-color: ${(props) => props.backgroundColor}; | ||
| height: ${themeGet('space.space110')}; | ||
| `; | ||
|
|
||
| export const DataVizColorSwatches: React.FC = () => { | ||
| const context = React.useContext(ThemeContext) as ThemeShape; | ||
|
|
||
| // Adapted from the usePasteHighchartsTheme hook | ||
| const dataVizTokenValues: TokenData[] = React.useMemo(() => { | ||
| const collator = new Intl.Collator(undefined, {numeric: true, sensitivity: 'base'}); | ||
| const tokenNames = Object.keys(context.dataVisualization) as Array<keyof ThemeShape['dataVisualization']>; | ||
|
|
||
| const sortedTokenNames = tokenNames.sort((a, b) => collator.compare(a, b)); | ||
|
|
||
| return sortedTokenNames.map((name) => ({name, value: context.dataVisualization[name]})); | ||
| }, [context]); | ||
|
|
||
| return ( | ||
| <Box as="ul" margin="space0" padding="space0" marginBottom="space70"> | ||
| <StyledSwatchGrid numberColumns={5}> | ||
| {dataVizTokenValues.map(({name, value}) => ( | ||
| <Box as="li" listStyleType="none"> | ||
| <StyledSwatch backgroundColor={value} /> | ||
| <ColorSwatchText>{name}</ColorSwatchText> | ||
| </Box> | ||
| ))} | ||
| </StyledSwatchGrid> | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| export const PieChartCaption: React.FC = () => ( | ||
| <ImgCaption> | ||
| A white divider line is used between each section of the pie charts to create contrast and help distinguish the | ||
| difference between the categories. | ||
| </ImgCaption> | ||
| ); | ||
|
|
||
| export const LineChartCaption: React.FC = () => ( | ||
| <ImgCaption> | ||
| Different shapes are used at each point in the line charts to create additional visual distinction between each | ||
| category. | ||
| </ImgCaption> | ||
| ); | ||
|
|
||
| export const LineChartOptions = { | ||
| title: {text: 'Solar Employment Growth by Sector, 2010-2016'}, | ||
| subtitle: {text: 'Source: thesolarfoundation.com'}, | ||
| series: [ | ||
| { | ||
| name: 'Installation', | ||
| data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175], | ||
| }, | ||
| { | ||
| name: 'Manufacturing', | ||
| data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434], | ||
| }, | ||
| { | ||
| name: 'Sales & Distribution', | ||
| data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387], | ||
| }, | ||
| { | ||
| name: 'Project Development', | ||
| data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227], | ||
| }, | ||
| { | ||
| name: 'Other', | ||
| data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111], | ||
| }, | ||
| ], | ||
| }; | ||
|
|
||
| export const LineChartExample = ` | ||
| const LineChartExample = () => { | ||
| const themedLineChartOptions = usePasteHighchartsTheme(LineChartOptions); | ||
| return <HighchartsReact highcharts={Highcharts} options={themedLineChartOptions} />; | ||
| }; | ||
| render(<LineChartExample />); | ||
| `.trim(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
115 changes: 115 additions & 0 deletions
115
packages/paste-website/src/pages/core/libraries/data-visualization/index.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,115 @@ | ||
| --- | ||
| title: Data visualization library | ||
| description: A library that helps theme data visualizations with Paste tokens. | ||
| slug: /core/libraries/data-visualizatioln/ | ||
| --- | ||
|
|
||
| import {graphql} from 'gatsby'; | ||
| import PackageJSON from '@twilio-paste/data-visualization-library/package.json'; | ||
| import Changelog from '@twilio-paste/data-visualization-library/CHANGELOG.md'; | ||
| import Highcharts from 'highcharts'; | ||
| import HighchartsReact from 'highcharts-react-official'; | ||
| import {usePasteHighchartsTheme} from '@twilio-paste/data-visualization-library'; | ||
|
|
||
| import {SidebarCategoryRoutes} from '../../../../constants'; | ||
|
|
||
| export const pageQuery = graphql` | ||
| { | ||
| mdx(fields: {slug: {eq: "/core/libraries/data-visualization/"}}) { | ||
| fileAbsolutePath | ||
| frontmatter { | ||
| slug | ||
| title | ||
| } | ||
| headings { | ||
| depth | ||
| value | ||
| } | ||
| } | ||
| } | ||
| `; | ||
|
|
||
| <ComponentHeader | ||
| name="Data visualization library" | ||
| categoryRoute={SidebarCategoryRoutes.LIBRARIES} | ||
| githubUrl="https://github.com/twilio-labs/paste/tree/main/packages/paste-libraries/data-visualization" | ||
| storybookUrl="/?path=/story/libraries-data-visualization" | ||
| packageName={PackageJSON.name} | ||
| version={PackageJSON.version} | ||
| description={PackageJSON.description} | ||
| /> | ||
|
|
||
| --- | ||
|
|
||
| <contentwrapper> | ||
| <PageAside data={props.data.mdx} /> | ||
| <content> | ||
|
|
||
| ## Usage Guide | ||
|
|
||
| This package is meant to be used with another data visualization library to style visualizations. | ||
|
|
||
| ### Installation | ||
|
|
||
| ```bash | ||
| yarn add @twilio-paste/data-visualization-library - or - yarn add @twilio-paste/core/data-visualization-library | ||
| ``` | ||
|
|
||
| ### usePasteHighchartsTheme | ||
|
|
||
| This is a React Hook to take a Highcharts config and add Paste colors and fonts. | ||
|
|
||
| ```jsx | ||
| import Highcharts from 'highcharts'; | ||
| import HighchartsReact from 'highcharts-react-official'; | ||
| import {usePasteHighchartsTheme} from '@twilio-paste/data-visualization-library'; | ||
|
|
||
| const LineChartOptions = { | ||
| title: {text: 'Solar Employment Growth by Sector, 2010-2016'}, | ||
| subtitle: {text: 'Source: thesolarfoundation.com'}, | ||
| series: [ | ||
| { | ||
| name: 'Installation', | ||
| data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175], | ||
| }, | ||
| { | ||
| name: 'Manufacturing', | ||
| data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434], | ||
| }, | ||
| { | ||
| name: 'Sales & Distribution', | ||
| data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387], | ||
| }, | ||
| { | ||
| name: 'Project Development', | ||
| data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227], | ||
| }, | ||
| { | ||
| name: 'Other', | ||
| data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111], | ||
| }, | ||
| ], | ||
| }; | ||
|
|
||
| const LineChartExample = () => { | ||
| const themedLineChartOptions = usePasteHighchartsTheme(LineChartOptions); | ||
| return <HighchartsReact highcharts={Highcharts} options={themedLineChartOptions} />; | ||
| }; | ||
| ``` | ||
|
|
||
| The hook adds [the following styles](https://github.com/twilio-labs/paste/blob/4aefbe75d7c34ebdab209be14073426c1632d8a9/packages/paste-libraries/data-visualization/src/usePasteHighchartsTheme.tsx#L42): | ||
|
|
||
| - `colors`: the colors Highcharts cycles through for the chart's series | ||
| - `chart`: the background color | ||
| - `title`, `subtitle`, `legend`, `credits`, `label`, and `tooltip`: the font, text colors, and background color | ||
| - `xAxis`, `yAxis`: the font, text colors, and the line and tick colors. | ||
|
|
||
| To learn more about the configurations available, check out [the Highcharts API documentation](https://api.highcharts.com/highcharts/). | ||
|
|
||
| <ChangelogRevealer> | ||
| <Changelog /> | ||
| </ChangelogRevealer> | ||
|
|
||
| </content> | ||
|
|
||
| </contentwrapper> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.