Skip to content

Commit

Permalink
feat(website): ease the definition of chart properties documentation …
Browse files Browse the repository at this point in the history
…via helpers
  • Loading branch information
plouc committed Dec 12, 2021
1 parent fb72108 commit b15ee0a
Show file tree
Hide file tree
Showing 13 changed files with 385 additions and 338 deletions.
6 changes: 3 additions & 3 deletions packages/generators/src/demographics.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export const demographicsRanges = {
},
gender: {
id: 'Gender',
keys: ['Man', 'Woman', 'Non-Binary or GNC', 'Not Listed'],
keys: ['Man', 'Woman', 'Non-Binary or GNC', 'Other'],
},
raceAndEthnicity: {
id: 'Race & Ethnicity',
Expand All @@ -35,19 +35,19 @@ export const demographicsRanges = {
'South East Asian',
'Middle Eastern',
'South Asian',
'Not Listed',
'Black or of African descent',
'Native American, Pacific Islander, or Indigenous Australian',
'Other',
],
},
disabilityStatus: {
id: 'Disability Status',
keys: [
'Not Listed',
'Cognitive impairments',
'Visual impairments',
'Hearing impairments',
'Mobility impairments',
'Other',
],
},
}
Expand Down
65 changes: 4 additions & 61 deletions website/src/data/components/bar/props.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import {
groupProperties,
} from '../../../lib/componentProperties'
import { ChartProperty } from '../../../types'
import { a11yCommonProps } from '../../../lib/component-properties/a11y'
import { dimensionsProps } from '../../../lib/component-properties/dimensions'

const props: ChartProperty[] = [
{
Expand Down Expand Up @@ -217,46 +219,7 @@ const props: ChartProperty[] = [
max: 10,
},
},
{
key: 'width',
enableControlForFlavors: ['api'],
help: 'Chart width.',
description: `
not required if using \`ResponsiveBar\`.
Also note that width exclude left/right axes,
please add margin to make sure they're visible.
`,
type: 'number',
required: true,
controlType: 'range',
group: 'Base',
controlOptions: {
unit: 'px',
min: 100,
max: 1000,
step: 5,
},
},
{
key: 'height',
enableControlForFlavors: ['api'],
help: 'Chart height.',
description: `
not required if using \`ResponsiveBar\`.
Also note that width exclude left/right axes,
please add margin to make sure they're visible.
`,
type: 'number',
required: true,
controlType: 'range',
group: 'Base',
controlOptions: {
unit: 'px',
min: 100,
max: 1000,
step: 5,
},
},
...dimensionsProps(['svg', 'canvas', 'api']),
{
key: 'pixelRatio',
flavors: ['canvas'],
Expand Down Expand Up @@ -598,27 +561,7 @@ const props: ChartProperty[] = [
type: 'boolean',
controlType: 'switch',
},
{
key: 'ariaLabel',
flavors: ['svg'],
group: 'Accessibility',
help: 'Main element [aria-label](https://www.w3.org/TR/wai-aria/#aria-label).',
type: 'string',
},
{
key: 'ariaLabelledBy',
flavors: ['svg'],
group: 'Accessibility',
help: 'Main element [aria-labelledby](https://www.w3.org/TR/wai-aria/#aria-labelledby).',
type: 'string',
},
{
key: 'ariaDescribedBy',
flavors: ['svg'],
group: 'Accessibility',
help: 'Main element [aria-describedby](https://www.w3.org/TR/wai-aria/#aria-describedby).',
type: 'string',
},
...a11yCommonProps(['svg']),
{
key: 'barAriaLabel',
flavors: ['svg'],
Expand Down
93 changes: 8 additions & 85 deletions website/src/data/components/radial-bar/props.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,10 @@ import {
getLegendsProps,
polarAxisProperty,
} from '../../../lib/componentProperties'
import { dimensionsProps, marginProp } from '../../../lib/component-properties/dimensions'
import { ChartProperty } from '../../../types'
import { a11yCommonProps } from '../../../lib/component-properties/a11y'
import { booleanProp } from '../../../lib/component-properties/boolean'

const props: ChartProperty[] = [
{
Expand Down Expand Up @@ -96,55 +99,8 @@ const props: ChartProperty[] = [
flavors: ['svg'],
controlType: 'valueFormat',
},
{
key: 'width',
group: 'Base',
type: 'number',
required: true,
help: 'Chart width.',
description: `
not required if using
\`<ResponsiveRadialBar/>\`.
`,
flavors: ['svg', 'api'],
enableControlForFlavors: ['api'],
controlType: 'range',
controlOptions: {
unit: 'px',
min: 100,
max: 1000,
step: 5,
},
},
{
key: 'height',
group: 'Base',
type: 'number',
required: true,
help: 'Chart height.',
description: `
not required if using
\`<ResponsiveRadialBar/>\`.
`,
flavors: ['svg', 'api'],
enableControlForFlavors: ['api'],
controlType: 'range',
controlOptions: {
unit: 'px',
min: 100,
max: 1000,
step: 5,
},
},
{
key: 'margin',
group: 'Base',
help: 'Chart margin.',
type: 'object',
required: false,
flavors: ['svg'],
controlType: 'margin',
},
...dimensionsProps(['svg', 'api']),
marginProp(['svg', 'api']),
{
key: 'startAngle',
group: 'Base',
Expand Down Expand Up @@ -420,16 +376,14 @@ const props: ChartProperty[] = [
flavors: ['svg'],
defaultValue: svgDefaultProps.layers,
},
{
booleanProp({
key: 'isInteractive',
group: 'Interactivity',
type: 'boolean',
required: false,
help: 'Enable/disable interactivity.',
flavors: ['svg'],
defaultValue: svgDefaultProps.isInteractive,
controlType: 'switch',
},
}),
{
key: 'tooltip',
group: 'Interactivity',
Expand Down Expand Up @@ -503,38 +457,7 @@ const props: ChartProperty[] = [
},
},
},
{
key: 'role',
group: 'Accessibility',
type: 'string',
required: false,
help: 'Main element role attribute.',
flavors: ['svg'],
},
{
key: 'ariaLabel',
group: 'Accessibility',
type: 'string',
required: false,
help: 'Main element [aria-label](https://www.w3.org/TR/wai-aria/#aria-label).',
flavors: ['svg'],
},
{
key: 'ariaLabelledBy',
group: 'Accessibility',
type: 'string',
required: false,
help: 'Main element [aria-labelledby](https://www.w3.org/TR/wai-aria/#aria-labelledby).',
flavors: ['svg'],
},
{
key: 'ariaDescribedBy',
group: 'Accessibility',
type: 'string',
required: false,
help: 'Main element [aria-describedby](https://www.w3.org/TR/wai-aria/#aria-describedby).',
flavors: ['svg'],
},
...a11yCommonProps(['svg']),
...motionProperties(['svg'], svgDefaultProps, 'react-spring'),
{
key: 'transitionMode',
Expand Down
2 changes: 2 additions & 0 deletions website/src/data/components/waffle-grid/meta.yml
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ WaffleGrid:
description: |
This chart shows each value using a small waffle chart,
meaning each value has its own waffle chart.
This is a fancy alternative to an heatmap, rather than color
coding, the number of *value cells* represents the value.
You should be careful with the number of cells you end up with,
the chart will become janky if you have too many cells,
Expand Down
Loading

0 comments on commit b15ee0a

Please sign in to comment.