@patternfly/react-docs 5.21.43 → 5.21.47
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +32 -0
- package/package.json +12 -12
- package/src/generated/charts/bullet-chart/react.js +6 -0
- package/src/generated/charts/themed-charts/react.js +16 -5
- package/src/generated/components/data-list/react.js +29 -6
- package/src/generated/components/drag-and-drop/react.js +23 -0
- package/src/generated/components/navigation/react.js +1 -1
- package/src/generated/extensions/log-viewer/react-demos.js +2 -3
- package/src/generated/extensions/log-viewer/react.js +14 -17
- package/src/generated/index.js +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,38 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [5.21.47](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@5.21.46...@patternfly/react-docs@5.21.47) (2021-09-27)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [5.21.46](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@5.21.45...@patternfly/react-docs@5.21.46) (2021-09-24)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
## [5.21.45](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@5.21.44...@patternfly/react-docs@5.21.45) (2021-09-24)
|
|
23
|
+
|
|
24
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
## [5.21.44](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@5.21.43...@patternfly/react-docs@5.21.44) (2021-09-22)
|
|
31
|
+
|
|
32
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
6
38
|
## [5.21.43](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@5.21.42...@patternfly/react-docs@5.21.43) (2021-09-20)
|
|
7
39
|
|
|
8
40
|
**Note:** Version bump only for package @patternfly/react-docs
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/react-docs",
|
|
3
3
|
"description": "PatternFly React Docs",
|
|
4
|
-
"version": "5.21.
|
|
4
|
+
"version": "5.21.47",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public",
|
|
7
7
|
"tag": "prerelease-v4"
|
|
@@ -23,18 +23,18 @@
|
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
25
|
"@patternfly/patternfly": "4.135.2",
|
|
26
|
-
"@patternfly/react-catalog-view-extension": "^4.12.
|
|
27
|
-
"@patternfly/react-charts": "^6.15.
|
|
28
|
-
"@patternfly/react-code-editor": "^4.3.
|
|
29
|
-
"@patternfly/react-core": "^4.157.
|
|
26
|
+
"@patternfly/react-catalog-view-extension": "^4.12.78",
|
|
27
|
+
"@patternfly/react-charts": "^6.15.24",
|
|
28
|
+
"@patternfly/react-code-editor": "^4.3.65",
|
|
29
|
+
"@patternfly/react-core": "^4.157.7",
|
|
30
30
|
"@patternfly/react-icons": "^4.11.17",
|
|
31
|
-
"@patternfly/react-inline-edit-extension": "^4.7.
|
|
32
|
-
"@patternfly/react-log-viewer": "^4.
|
|
31
|
+
"@patternfly/react-inline-edit-extension": "^4.7.88",
|
|
32
|
+
"@patternfly/react-log-viewer": "^4.7.0",
|
|
33
33
|
"@patternfly/react-styles": "^4.11.16",
|
|
34
|
-
"@patternfly/react-table": "^4.30.
|
|
34
|
+
"@patternfly/react-table": "^4.30.7",
|
|
35
35
|
"@patternfly/react-tokens": "^4.12.18",
|
|
36
|
-
"@patternfly/react-topology": "^4.9.
|
|
37
|
-
"@patternfly/react-virtualized-extension": "^4.9.
|
|
36
|
+
"@patternfly/react-topology": "^4.9.84",
|
|
37
|
+
"@patternfly/react-virtualized-extension": "^4.9.53"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@patternfly/patternfly-a11y": "4.2.1",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"react-dom": "^17.0.0",
|
|
45
45
|
"rimraf": "^2.6.3",
|
|
46
46
|
"shx": "^0.3.2",
|
|
47
|
-
"theme-patternfly-org": "0.
|
|
47
|
+
"theme-patternfly-org": "0.7.0"
|
|
48
48
|
},
|
|
49
49
|
"keywords": [
|
|
50
50
|
"gatsby"
|
|
@@ -53,5 +53,5 @@
|
|
|
53
53
|
"last 2 versions",
|
|
54
54
|
"not ie <= 11"
|
|
55
55
|
],
|
|
56
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "5f9040577f273d41cd087ff136b68af185115824"
|
|
57
57
|
}
|
|
@@ -621,6 +621,7 @@ const pageData = {
|
|
|
621
621
|
"Negative and positive primary measures",
|
|
622
622
|
"Vertical with segmented primary measure",
|
|
623
623
|
"Vertical primary measure outside max range",
|
|
624
|
+
"Custom labels",
|
|
624
625
|
"Custom size",
|
|
625
626
|
"Horizontal group",
|
|
626
627
|
"Vertical group",
|
|
@@ -696,6 +697,10 @@ pageData.examples = {
|
|
|
696
697
|
'Vertical primary measure outside max range': props =>
|
|
697
698
|
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { ChartBullet } from '@patternfly/react-charts';\n\nconst VerticalPrimaryMeasureOutsideMaxRange = () => (\n <div style={{ height: '500px', width: '500px' }}>\n <ChartBullet\n ariaDesc=\"Storage capacity\"\n ariaTitle=\"Bullet chart example\"\n comparativeWarningMeasureData={[{name: 'Warning', y: 100}]}\n comparativeWarningMeasureLegendData={[{ name: 'Warning' }]}\n constrainToVisibleArea\n height={500}\n horizontal={false}\n labels={({ datum }) => `${datum.name}: ${datum.y}`}\n maxDomain={{y: 125}}\n minDomain={{y: 50}}\n padding={{\n bottom: 125, // Adjusted to accommodate legend\n left: 400,\n right: 50,\n top: 50 // Adjusted to accommodate primary segmented measure tooltip\n }}\n primarySegmentedMeasureData={[{ name: 'Measure', y: 75 }, { name: 'Measure', y: 135 }]}\n primarySegmentedMeasureLegendData={[{ name: 'Measure 1' }, { name: 'Measure 2' }]}\n qualitativeRangeData={[{ name: 'Range', y: 85 }, { name: 'Range', y: 125 }]}\n qualitativeRangeLegendData={[{ name: 'Range 1' }, { name: 'Range 2' }]}\n subTitle=\"Measure details\"\n title=\"Text label\"\n themeColor={ChartThemeColor.gold}\n width={500}\n />\n </div>\n)","title":"Vertical primary measure outside max range","lang":"js"}}>
|
|
698
699
|
|
|
700
|
+
</Example>,
|
|
701
|
+
'Custom labels': props =>
|
|
702
|
+
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { ChartAxis, ChartBullet } from '@patternfly/react-charts';\n\nconst CustomLabels = () => (\n <div style={{ height: '150px', width: '600px' }}>\n <ChartBullet\n ariaDesc=\"Storage capacity\"\n ariaTitle=\"Bullet chart example\"\n axisComponent={\n <ChartAxis \n tickValues={[0, 25, 50, 75, 100]}\n tickFormat={val => {\n switch (val) {\n case 0:\n return 'New';\n case 25:\n return 'Beginner';\n case 50:\n return 'Intermediate';\n case 75:\n return 'Advanced';\n case 100:\n return 'Expert';\n }\n }}\n />\n }\n comparativeWarningMeasureData={[{ name: 'Warning', y: 88 }]}\n constrainToVisibleArea\n height={150}\n labels={({ datum }) => `${datum.name}: ${datum.y}`}\n maxDomain={{y: 100}}\n primarySegmentedMeasureData={[{ name: 'Measure', y: 60 }]}\n qualitativeRangeData={[{ name: 'Range', y: 50 }, { name: 'Range', y: 75 }]}\n width={600}\n />\n </div>\n)","title":"Custom labels","lang":"js"}}>
|
|
703
|
+
|
|
699
704
|
</Example>,
|
|
700
705
|
'Custom size': props =>
|
|
701
706
|
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { ChartBullet } from '@patternfly/react-charts';\n\nconst CustomSize = () => (\n <div style={{ height: '200px', width: '600px' }}>\n <ChartBullet\n ariaDesc=\"Storage capacity\"\n ariaTitle=\"Bullet chart example\"\n bulletSize={160}\n comparativeWarningMeasureData={[{ name: 'Warning', y: 88 }]}\n comparativeWarningMeasureLegendData={[{ name: 'Warning' }]}\n height={200}\n labels={({ datum }) => `${datum.name}: ${datum.y}`}\n maxDomain={{y: 100}}\n padding={{\n bottom: 50,\n left: 150, // Adjusted to accomodate labels\n right: 50,\n top: 50\n }}\n primarySegmentedMeasureData={[{ name: 'Measure', y: 60 }]}\n primarySegmentedMeasureLegendData={[{ name: 'Measure 1' }]}\n qualitativeRangeData={[{ name: 'Range', y: 50 }, { name: 'Range', y: 75 }]}\n qualitativeRangeLegendData={[{ name: 'Range 1' }, { name: 'Range 2' }]}\n subTitle=\"Measure details\"\n title=\"Text label\"\n width={600}\n />\n </div>\n)","title":"Custom size","lang":"js"}}>
|
|
@@ -760,6 +765,7 @@ const Component = () => (
|
|
|
760
765
|
{React.createElement(pageData.examples["Negative and positive primary measures"])}
|
|
761
766
|
{React.createElement(pageData.examples["Vertical with segmented primary measure"])}
|
|
762
767
|
{React.createElement(pageData.examples["Vertical primary measure outside max range"])}
|
|
768
|
+
{React.createElement(pageData.examples["Custom labels"])}
|
|
763
769
|
{React.createElement(pageData.examples["Custom size"])}
|
|
764
770
|
{React.createElement(pageData.examples["Horizontal group"])}
|
|
765
771
|
{React.createElement(pageData.examples["Vertical group"])}
|
|
@@ -12,6 +12,7 @@ import {
|
|
|
12
12
|
ChartStack,
|
|
13
13
|
ChartThemeColor,
|
|
14
14
|
ChartThemeVariant,
|
|
15
|
+
ChartThreshold,
|
|
15
16
|
ChartTooltip,
|
|
16
17
|
ChartVoronoiContainer,
|
|
17
18
|
getCustomTheme
|
|
@@ -31,7 +32,8 @@ const pageData = {
|
|
|
31
32
|
"Green",
|
|
32
33
|
"Multi-color (ordered)",
|
|
33
34
|
"Multi color (unordered)",
|
|
34
|
-
"Custom
|
|
35
|
+
"Custom color scale",
|
|
36
|
+
"Custom stroke color",
|
|
35
37
|
"Custom theme"
|
|
36
38
|
]
|
|
37
39
|
};
|
|
@@ -47,6 +49,7 @@ pageData.liveContext = {
|
|
|
47
49
|
ChartStack,
|
|
48
50
|
ChartThemeColor,
|
|
49
51
|
ChartThemeVariant,
|
|
52
|
+
ChartThreshold,
|
|
50
53
|
ChartTooltip,
|
|
51
54
|
ChartVoronoiContainer,
|
|
52
55
|
getCustomTheme,
|
|
@@ -78,11 +81,18 @@ pageData.examples = {
|
|
|
78
81
|
{`This demonstrates how to apply theme colors for unordered charts like area, line, and sparkline.`}
|
|
79
82
|
</p>
|
|
80
83
|
</Example>,
|
|
81
|
-
'Custom
|
|
82
|
-
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { Chart, ChartAxis, ChartBar, ChartLegend, ChartStack, ChartThemeColor, ChartTooltip } from '@patternfly/react-charts';\nimport chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300';\nimport chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color_green_300';\nimport chart_color_gold_300 from '@patternfly/react-tokens/dist/esm/chart_color_gold_300';\nimport chart_color_purple_300 from '@patternfly/react-tokens/dist/esm/chart_color_purple_300';\n\nconst
|
|
84
|
+
'Custom color scale': props =>
|
|
85
|
+
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { Chart, ChartAxis, ChartBar, ChartLegend, ChartStack, ChartThemeColor, ChartTooltip } from '@patternfly/react-charts';\nimport chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300';\nimport chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color_green_300';\nimport chart_color_gold_300 from '@patternfly/react-tokens/dist/esm/chart_color_gold_300';\nimport chart_color_purple_300 from '@patternfly/react-tokens/dist/esm/chart_color_purple_300';\n\nconst CustomColorScale = () => (\n <div style={{ height: '275px', width: '450px' }}>\n <Chart\n ariaDesc=\"Average number of pets\"\n ariaTitle=\"Stack chart example\"\n domainPadding={{ x: [30, 25] }}\n legendComponent={\n <ChartLegend\n data={[\n { \n name: 'Cats',\n symbol: { fill: chart_color_blue_300.value }\n },\n { \n name: 'Dogs',\n symbol: { fill: chart_color_gold_300.value }\n },\n {\n name: 'Birds',\n symbol: { fill: chart_color_green_300.value }\n },\n {\n name: 'Mice',\n symbol: { fill: chart_color_purple_300.value }\n }\n ]}\n />\n }\n legendPosition=\"bottom-left\"\n height={275}\n padding={{\n bottom: 75, // Adjusted to accommodate legend\n left: 50,\n right: 50, \n top: 50\n }}\n themeColor={ChartThemeColor.multiOrdered}\n width={450}\n >\n <ChartAxis />\n <ChartAxis dependentAxis showGrid />\n <ChartStack \n horizontal\n colorScale={[\n chart_color_blue_300.value,\n chart_color_gold_300.value,\n chart_color_green_300.value,\n chart_color_purple_300.value\n ]}\n >\n <ChartBar \n data={[\n { name: 'Cats', x: '2015', y: 1, label: 'Cats: 1' }, \n { name: 'Cats', x: '2016', y: 2, label: 'Cats: 2' }, \n { name: 'Cats', x: '2017', y: 5, label: 'Cats: 5' }, \n { name: 'Cats', x: '2018', y: 3, label: 'Cats: 3' }\n ]} \n labelComponent={<ChartTooltip constrainToVisibleArea />}\n />\n <ChartBar \n data={[\n { name: 'Dogs', x: '2015', y: 2, label: 'Dogs: 2' }, \n { name: 'Dogs', x: '2016', y: 1, label: 'Dogs: 1' }, \n { name: 'Dogs', x: '2017', y: 7, label: 'Dogs: 7' }, \n { name: 'Dogs', x: '2018', y: 4, label: 'Dogs: 4' }\n ]}\n labelComponent={<ChartTooltip constrainToVisibleArea />}\n />\n <ChartBar \n data={[\n { name: 'Birds', x: '2015', y: 4, label: 'Birds: 4' }, \n { name: 'Birds', x: '2016', y: 4, label: 'Birds: 4' }, \n { name: 'Birds', x: '2017', y: 9, label: 'Birds: 9' }, \n { name: 'Birds', x: '2018', y: 7, label: 'Birds: 7' }\n ]}\n labelComponent={<ChartTooltip constrainToVisibleArea />}\n />\n <ChartBar \n data={[\n { name: 'Mice', x: '2015', y: 3, label: 'Mice: 3' }, \n { name: 'Mice', x: '2016', y: 3, label: 'Mice: 3' }, \n { name: 'Mice', x: '2017', y: 8, label: 'Mice: 8' }, \n { name: 'Mice', x: '2018', y: 5, label: 'Mice: 5' }\n ]}\n labelComponent={<ChartTooltip constrainToVisibleArea />}\n />\n </ChartStack>\n </Chart>\n </div>\n)","title":"Custom color scale","lang":"js"}}>
|
|
83
86
|
|
|
84
87
|
<p {...{"className":"ws-p"}}>
|
|
85
|
-
{`This demonstrates an alternate way of applying custom colors to individual charts.`}
|
|
88
|
+
{`This demonstrates an alternate way of applying a custom color scale and fill colors to individual charts.`}
|
|
89
|
+
</p>
|
|
90
|
+
</Example>,
|
|
91
|
+
'Custom stroke color': props =>
|
|
92
|
+
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { Chart, ChartAxis, ChartGroup, ChartLine, ChartThemeColor, ChartThreshold, ChartVoronoiContainer } from '@patternfly/react-charts';\nimport chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300';\n\nconst CustomStrokeColor = () => (\n <div style={{ height: '275px', width: '450px' }}>\n <Chart\n ariaDesc=\"Average number of pets\"\n ariaTitle=\"Line chart example\"\n containerComponent={<ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />}\n legendData={[\n { name: 'Cats' },\n { name: 'Birds' },\n { name: 'Mice' },\n { name: 'Cats Threshold', symbol: { fill: chart_color_blue_300.value, type: 'threshold' }}\n ]}\n legendPosition=\"bottom\"\n height={275}\n maxDomain={{y: 10}}\n minDomain={{y: 0}}\n padding={{\n bottom: 75, // Adjusted to accommodate legend\n left: 50,\n right: 50,\n top: 50\n }}\n themeColor={ChartThemeColor.multiUnordered}\n width={450}\n >\n <ChartAxis tickValues={[2, 3, 4]} />\n <ChartAxis dependentAxis showGrid tickValues={[2, 5, 8]} />\n <ChartGroup>\n <ChartLine\n data={[\n { name: 'Cats', x: '2015', y: 1 },\n { name: 'Cats', x: '2016', y: 2 },\n { name: 'Cats', x: '2017', y: 5 },\n { name: 'Cats', x: '2018', y: 3 }\n ]}\n />\n <ChartLine\n data={[\n { name: 'Birds', x: '2015', y: 3 },\n { name: 'Birds', x: '2016', y: 4 },\n { name: 'Birds', x: '2017', y: 9 },\n { name: 'Birds', x: '2018', y: 5 }\n ]}\n />\n <ChartLine\n data={[\n { name: 'Mice', x: '2015', y: 3 },\n { name: 'Mice', x: '2016', y: 3 },\n { name: 'Mice', x: '2017', y: 8 },\n { name: 'Mice', x: '2018', y: 7 }\n ]}\n />\n <ChartThreshold\n data={[\n { name: 'Cats Threshold', x: '2015', y: 5 },\n { name: 'Cats Threshold', x: '2016', y: 5 },\n { name: 'Cats Threshold', x: '2016', y: 6 },\n { name: 'Cats Threshold', x: '2017', y: 6 },\n { name: 'Cats Threshold', x: '2018', y: 6 }\n ]}\n style={{\n data: {\n stroke: chart_color_blue_300.value,\n }\n }}\n />\n </ChartGroup>\n </Chart>\n </div>\n)","title":"Custom stroke color","lang":"js"}}>
|
|
93
|
+
|
|
94
|
+
<p {...{"className":"ws-p"}}>
|
|
95
|
+
{`This demonstrates an alternate way of applying custom stroke and fill colors to a threshold chart.`}
|
|
86
96
|
</p>
|
|
87
97
|
</Example>,
|
|
88
98
|
'Custom theme': props =>
|
|
@@ -119,7 +129,8 @@ const Component = () => (
|
|
|
119
129
|
{React.createElement(pageData.examples["Green"])}
|
|
120
130
|
{React.createElement(pageData.examples["Multi-color (ordered)"])}
|
|
121
131
|
{React.createElement(pageData.examples["Multi color (unordered)"])}
|
|
122
|
-
{React.createElement(pageData.examples["Custom
|
|
132
|
+
{React.createElement(pageData.examples["Custom color scale"])}
|
|
133
|
+
{React.createElement(pageData.examples["Custom stroke color"])}
|
|
123
134
|
{React.createElement(pageData.examples["Custom theme"])}
|
|
124
135
|
<AutoLinkHeader {...{"id":"documentation","size":"h2","className":"ws-title ws-h2"}}>
|
|
125
136
|
{`Documentation`}
|
|
@@ -48,27 +48,32 @@ const pageData = {
|
|
|
48
48
|
{
|
|
49
49
|
"name": "itemOrder",
|
|
50
50
|
"type": "string[]",
|
|
51
|
-
"description": "Order of items in a draggable DataList"
|
|
51
|
+
"description": "Order of items in a draggable DataList",
|
|
52
|
+
"deprecated": true
|
|
52
53
|
},
|
|
53
54
|
{
|
|
54
55
|
"name": "onDragCancel",
|
|
55
56
|
"type": "() => void",
|
|
56
|
-
"description": "Optional informational callback for dragging, fired when dragging is cancelled"
|
|
57
|
+
"description": "Optional informational callback for dragging, fired when dragging is cancelled",
|
|
58
|
+
"deprecated": true
|
|
57
59
|
},
|
|
58
60
|
{
|
|
59
61
|
"name": "onDragFinish",
|
|
60
62
|
"type": "(newItemOrder: string[]) => void",
|
|
61
|
-
"description": "Optional callback to make DataList draggable, fired when dragging ends"
|
|
63
|
+
"description": "Optional callback to make DataList draggable, fired when dragging ends",
|
|
64
|
+
"deprecated": true
|
|
62
65
|
},
|
|
63
66
|
{
|
|
64
67
|
"name": "onDragMove",
|
|
65
68
|
"type": "(oldIndex: number, newIndex: number) => void",
|
|
66
|
-
"description": "Optional informational callback for dragging, fired when an item moves"
|
|
69
|
+
"description": "Optional informational callback for dragging, fired when an item moves",
|
|
70
|
+
"deprecated": true
|
|
67
71
|
},
|
|
68
72
|
{
|
|
69
73
|
"name": "onDragStart",
|
|
70
74
|
"type": "(id: string) => void",
|
|
71
|
-
"description": "Optional informational callback for dragging, fired when dragging starts"
|
|
75
|
+
"description": "Optional informational callback for dragging, fired when dragging starts",
|
|
76
|
+
"deprecated": true
|
|
72
77
|
},
|
|
73
78
|
{
|
|
74
79
|
"name": "onSelectDataListItem",
|
|
@@ -517,8 +522,26 @@ pageData.examples = {
|
|
|
517
522
|
|
|
518
523
|
</Example>,
|
|
519
524
|
'Draggable': props =>
|
|
520
|
-
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n DataList,\n DataListItem,\n DataListCell,\n DataListItemRow,\n DataListCheck,\n DataListControl,\n DataListDragButton,\n DataListItemCells\n} from '@patternfly/react-core';\n\
|
|
525
|
+
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n DataList,\n DataListItem,\n DataListCell,\n DataListItemRow,\n DataListCheck,\n DataListControl,\n DataListDragButton,\n DataListItemCells,\n DragDrop,\n Draggable,\n Droppable\n} from '@patternfly/react-core';\n\nconst getItems = count =>\n Array.from({ length: count }, (v, k) => k).map(k => ({\n id: `item-${k}`,\n content: `item ${k} `.repeat(k === 4 ? 20 : 1)\n }));\n\nconst reorder = (list, startIndex, endIndex) => {\n const result = Array.from(list);\n const [removed] = result.splice(startIndex, 1);\n result.splice(endIndex, 0, removed);\n return result;\n};\n\nDraggableDataList = () => {\n const [items, setItems] = React.useState(getItems(10));\n const [liveText, setLiveText] = React.useState('');\n\n function onDrag(source) {\n setLiveText(`Started dragging ${items[source.index].content}`);\n // Return true to allow drag\n return true;\n }\n\n function onDragMove(source, dest) {\n const newText = dest\n ? `Move ${items[source.index].content} to ${items[dest.index].content}`\n : 'Invalid drop zone';\n if (newText !== liveText) {\n setLiveText(newText);\n }\n }\n\n function onDrop(source, dest) {\n if (dest) {\n const newItems = reorder(\n items,\n source.index,\n dest.index\n );\n setItems(newItems);\n\n setLiveText('Dragging finished.');\n return true; // Signal that this is a valid drop and not to animate the item returning home.\n } else {\n setLiveText('Dragging cancelled. List unchanged.');\n }\n }\n\n return (\n <DragDrop onDrag={onDrag} onDragMove={onDragMove} onDrop={onDrop}>\n <Droppable hasNoWrapper>\n <DataList aria-label=\"draggable data list example\" isCompact>\n {items.map(({id, content}) =>\n <Draggable key={id} hasNoWrapper>\n <DataListItem aria-labelledby={id} ref={React.createRef()}>\n <DataListItemRow>\n <DataListControl>\n <DataListDragButton\n aria-label=\"Reorder\"\n aria-labelledby={id}\n aria-describedby=\"Press space or enter to begin dragging, and use the arrow keys to navigate up or down. Press enter to confirm the drag, or any other key to cancel the drag operation.\"\n aria-pressed=\"false\"\n />\n <DataListCheck aria-labelledby={id} name={id} otherControls />\n </DataListControl>\n <DataListItemCells\n dataListCells={[\n <DataListCell key={id}>\n <span id={id}>{content}</span>\n </DataListCell>\n ]}\n />\n </DataListItemRow>\n </DataListItem>\n </Draggable>\n )}\n </DataList>\n </Droppable>\n <div className=\"pf-screen-reader\" aria-live=\"assertive\">\n {liveText}\n </div>\n </DragDrop>\n );\n};","title":"Draggable","lang":"js"}}>
|
|
521
526
|
|
|
527
|
+
<p {...{"className":"ws-p"}}>
|
|
528
|
+
{`Draggable data lists used to have their own HTML5-based API for drag and drop, which wasn't able to fulfill requirements such as custom styling on items being dragged. So we wrote generic `}
|
|
529
|
+
|
|
530
|
+
<code {...{"className":"ws-code"}}>
|
|
531
|
+
{`DragDrop`}
|
|
532
|
+
</code>
|
|
533
|
+
{`, `}
|
|
534
|
+
|
|
535
|
+
<code {...{"className":"ws-code"}}>
|
|
536
|
+
{`Draggable`}
|
|
537
|
+
</code>
|
|
538
|
+
{`, and `}
|
|
539
|
+
|
|
540
|
+
<code {...{"className":"ws-code"}}>
|
|
541
|
+
{`Droppable`}
|
|
542
|
+
</code>
|
|
543
|
+
{` components for this purpose. Use those new components instead of the deprecated (and buggy!) HTML5-based API.`}
|
|
544
|
+
</p>
|
|
522
545
|
</Example>,
|
|
523
546
|
'Small grid breakpoint': props =>
|
|
524
547
|
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n DataList,\n DataListItem,\n DataListItemRow,\n DataListItemCells,\n DataListCell,\n DataListGridBreakpoint\n} from '@patternfly/react-core';\n\nconst SmallGridBreakpoint = () => (\n <DataList aria-label=\"Simple data list example\" gridBreakpoint=\"sm\">\n <DataListItem aria-labelledby=\"simple-item1\">\n <DataListItemRow>\n <DataListItemCells\n dataListCells={[\n <DataListCell key=\"primary content\">\n <span id=\"simple-item1\">Primary content</span>\n </DataListCell>,\n <DataListCell key=\"secondary content\">\n Really really really really really really really really really really really really really really long\n description that should be truncated before it ends\n </DataListCell>\n ]}\n />\n </DataListItemRow>\n </DataListItem>\n </DataList>\n)","title":"Small grid breakpoint","lang":"js"}}>
|
|
@@ -23,6 +23,12 @@ const pageData = {
|
|
|
23
23
|
"description": "Callback for drag event. Return true to allow drag, false to disallow.",
|
|
24
24
|
"defaultValue": "() => true"
|
|
25
25
|
},
|
|
26
|
+
{
|
|
27
|
+
"name": "onDragMove",
|
|
28
|
+
"type": "(source: DraggableItemPosition, dest?: DraggableItemPosition) => void",
|
|
29
|
+
"description": "Callback on mouse move while dragging.",
|
|
30
|
+
"defaultValue": "() => {}"
|
|
31
|
+
},
|
|
26
32
|
{
|
|
27
33
|
"name": "onDrop",
|
|
28
34
|
"type": "(source: DraggableItemPosition, dest?: DraggableItemPosition) => boolean",
|
|
@@ -44,6 +50,17 @@ const pageData = {
|
|
|
44
50
|
"name": "className",
|
|
45
51
|
"type": "string",
|
|
46
52
|
"description": "Class to add to outer div"
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"name": "hasNoWrapper",
|
|
56
|
+
"type": "boolean",
|
|
57
|
+
"description": "Don't wrap the component in a div. Requires passing a single child.",
|
|
58
|
+
"defaultValue": "false"
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"name": "style",
|
|
62
|
+
"type": "No type info",
|
|
63
|
+
"defaultValue": "{}"
|
|
47
64
|
}
|
|
48
65
|
]
|
|
49
66
|
},
|
|
@@ -67,6 +84,12 @@ const pageData = {
|
|
|
67
84
|
"description": "Id to be passed back on drop events",
|
|
68
85
|
"defaultValue": "'defaultId'"
|
|
69
86
|
},
|
|
87
|
+
{
|
|
88
|
+
"name": "hasNoWrapper",
|
|
89
|
+
"type": "boolean",
|
|
90
|
+
"description": "Don't wrap the component in a div. Requires passing a single child.",
|
|
91
|
+
"defaultValue": "false"
|
|
92
|
+
},
|
|
70
93
|
{
|
|
71
94
|
"name": "zone",
|
|
72
95
|
"type": "string",
|
|
@@ -52,7 +52,7 @@ const pageData = {
|
|
|
52
52
|
},
|
|
53
53
|
{
|
|
54
54
|
"name": "variant",
|
|
55
|
-
"type": "'default' | 'horizontal' | 'tertiary' | 'horizontal-subnav'
|
|
55
|
+
"type": "'default' | 'horizontal' | 'tertiary' | 'horizontal-subnav'",
|
|
56
56
|
"description": "For horizontal navs"
|
|
57
57
|
}
|
|
58
58
|
]
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components';
|
|
3
|
-
import { LogViewer, LogViewerSearch
|
|
3
|
+
import { LogViewer, LogViewerSearch } from '@patternfly/react-log-viewer';
|
|
4
4
|
import {
|
|
5
5
|
Badge,
|
|
6
6
|
Button,
|
|
@@ -36,7 +36,6 @@ const pageData = {
|
|
|
36
36
|
pageData.liveContext = {
|
|
37
37
|
LogViewer,
|
|
38
38
|
LogViewerSearch,
|
|
39
|
-
LogViewerContext,
|
|
40
39
|
Badge,
|
|
41
40
|
Button,
|
|
42
41
|
Select,
|
|
@@ -59,7 +58,7 @@ pageData.liveContext = {
|
|
|
59
58
|
};
|
|
60
59
|
pageData.examples = {
|
|
61
60
|
'With complex toolbar': props =>
|
|
62
|
-
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { data } from './realTestData';\nimport { LogViewer, LogViewerSearch
|
|
61
|
+
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { data } from './realTestData';\nimport { LogViewer, LogViewerSearch } from '@patternfly/react-log-viewer';\nimport {\n Badge,\n Button,\n Select,\n SelectOption,\n Tooltip,\n Toolbar,\n ToolbarContent,\n ToolbarGroup,\n ToolbarItem,\n ToolbarToggleGroup\n} from '@patternfly/react-core';\nimport OutlinedPlayCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-play-circle-icon';\nimport ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';\nimport PauseIcon from '@patternfly/react-icons/dist/esm/icons/pause-icon';\nimport PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';\nimport EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';\nimport DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';\n\nComplexToolbarLogViewer = () => {\n const dataSources = {\n 'container-1': { type: 'C', id: 'data1' },\n 'container-2': { type: 'D', id: 'data2' },\n 'container-3': { type: 'E', id: 'data3' }\n };\n const [isPaused, setIsPaused] = React.useState(false);\n const [isFullScreen, setIsFullScreen] = React.useState(false);\n const [itemCount, setItemCount] = React.useState(1);\n const [currentItemCount, setCurrentItemCount] = React.useState(0);\n const [renderData, setRenderData] = React.useState('');\n const [selectedDataSource, setSelectedDataSource] = React.useState('container-1');\n const [selectDataSourceOpen, setSelectDataSourceOpen] = React.useState(false);\n const [timer, setTimer] = React.useState(null);\n const [selectedData, setSelectedData] = React.useState(data[dataSources[selectedDataSource].id].split('\\n'));\n const [buffer, setBuffer] = React.useState([]);\n const [linesBehind, setLinesBehind] = React.useState(0);\n const logViewerRef = React.useRef();\n\n React.useEffect(() => {\n setTimer(\n window.setInterval(() => {\n setItemCount(itemCount => itemCount + 1);\n }, 500)\n );\n return () => {\n window.clearInterval(timer);\n };\n }, []);\n\n React.useEffect(() => {\n if (itemCount > selectedData.length) {\n window.clearInterval(timer);\n } else {\n setBuffer(selectedData.slice(0, itemCount));\n }\n }, [itemCount]);\n\n React.useEffect(() => {\n if (!isPaused && buffer.length > 0) {\n setCurrentItemCount(buffer.length);\n setRenderData(buffer.join('\\n'));\n if (logViewerRef && logViewerRef.current) {\n logViewerRef.current.scrollToBottom();\n }\n } else if (buffer.length !== currentItemCount) {\n setLinesBehind(buffer.length - currentItemCount);\n } else {\n setLinesBehind(0);\n }\n }, [isPaused, buffer]);\n\n const onExpandClick = event => {\n const element = document.querySelector('#complex-toolbar-demo');\n\n if (!isFullScreen) {\n if (element.requestFullscreen) {\n element.requestFullscreen();\n } else if (element.mozRequestFullScreen) {\n element.mozRequestFullScreen();\n } else if (element.webkitRequestFullScreen) {\n element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);\n }\n setIsFullScreen(true);\n } else {\n if (document.exitFullscreen) {\n document.exitFullscreen();\n } else if (document.webkitExitFullscreen) {\n /* Safari */\n document.webkitExitFullscreen();\n } else if (document.msExitFullscreen) {\n /* IE11 */\n document.msExitFullscreen();\n }\n setIsFullScreen(false);\n }\n };\n\n const onDownloadClick = () => {\n const element = document.createElement('a');\n const dataToDownload = [data[dataSources[selectedDataSource].id]];\n const file = new Blob(dataToDownload, { type: 'text/plain' });\n element.href = URL.createObjectURL(file);\n element.download = `${selectedDataSource}.txt`;\n document.body.appendChild(element);\n element.click();\n document.body.removeChild(element);\n };\n\n const onScroll = ({ scrollOffsetToBottom, scrollDirection, scrollUpdateWasRequested }) => {\n if (!scrollUpdateWasRequested) {\n if (scrollOffsetToBottom > 0) {\n setIsPaused(true);\n } else {\n setIsPaused(false);\n }\n }\n };\n\n const selectDataSourceMenu = Object.entries(dataSources).map(([value, { type }]) => (\n <SelectOption\n key={value}\n value={value}\n isSelected={selectedDataSource === value}\n isChecked={selectedDataSource === value}\n >\n <Badge key={value}>{type}</Badge>\n {` ${value}`}\n </SelectOption>\n ));\n\n const selectDataSourcePlaceholder = (\n <React.Fragment>\n <Badge>{dataSources[selectedDataSource].type}</Badge>\n {` ${selectedDataSource}`}\n </React.Fragment>\n );\n\n const ControlButton = () => {\n return (\n <Button\n variant={isPaused ? 'plain' : 'link'}\n onClick={() => {\n setIsPaused(!isPaused);\n }}\n >\n {isPaused ? <PlayIcon /> : <PauseIcon />}\n {isPaused ? ` Resume Log` : ` Pause Log`}\n </Button>\n );\n };\n\n const leftAlignedToolbarGroup = (\n <React.Fragment>\n <ToolbarToggleGroup toggleIcon={<EllipsisVIcon />} breakpoint=\"md\">\n <ToolbarItem variant=\"search-filter\">\n <Select\n onToggle={isOpen => setSelectDataSourceOpen(isOpen)}\n onSelect={(event, selection) => {\n setSelectDataSourceOpen(false);\n setSelectedDataSource(selection);\n setSelectedData(data[dataSources[selection].id].split('\\n'));\n setLinesBehind(0);\n setBuffer([]);\n setItemCount(1);\n setCurrentItemCount(0);\n }}\n selections={selectedDataSource}\n isOpen={selectDataSourceOpen}\n placeholderText={selectDataSourcePlaceholder}\n >\n {selectDataSourceMenu}\n </Select>\n </ToolbarItem>\n <ToolbarItem variant=\"search-filter\">\n <LogViewerSearch onFocus={e => setIsPaused(true)} placeholder=\"Search\" />\n </ToolbarItem>\n </ToolbarToggleGroup>\n <ToolbarItem>\n <ControlButton />\n </ToolbarItem>\n </React.Fragment>\n );\n\n const rightAlignedToolbarGroup = (\n <React.Fragment>\n <ToolbarGroup variant=\"icon-button-group\">\n <ToolbarItem>\n <Tooltip position=\"top\" content={<div>Download</div>}>\n <Button onClick={onDownloadClick} variant=\"plain\" aria-label=\"Download current logs\">\n <DownloadIcon />\n </Button>\n </Tooltip>\n </ToolbarItem>\n <ToolbarItem>\n <Tooltip position=\"top\" content={<div>Expand</div>}>\n <Button onClick={onExpandClick} variant=\"plain\" aria-label=\"View log viewer in full screen\">\n <ExpandIcon />\n </Button>\n </Tooltip>\n </ToolbarItem>\n </ToolbarGroup>\n </React.Fragment>\n );\n\n const FooterButton = () => {\n const handleClick = e => {\n setIsPaused(false);\n };\n return (\n <Button onClick={handleClick} isBlock>\n <OutlinedPlayCircleIcon />\n resume {linesBehind === 0 ? null : `and show ${linesBehind} lines`}\n </Button>\n );\n };\n return (\n <LogViewer\n data={renderData}\n id=\"complex-toolbar-demo\"\n scrollToRow={currentItemCount}\n innerRef={logViewerRef}\n toolbar={\n <Toolbar>\n <ToolbarContent>\n <ToolbarGroup alignment={{ default: 'alignLeft' }}>{leftAlignedToolbarGroup}</ToolbarGroup>\n <ToolbarGroup alignment={{ default: 'alignRight' }}>{rightAlignedToolbarGroup}</ToolbarGroup>\n </ToolbarContent>\n </Toolbar>\n }\n overScanCount={10}\n footer={isPaused && <FooterButton />}\n onScroll={onScroll}\n />\n );\n};","title":"With complex toolbar","lang":"js"}}>
|
|
63
62
|
|
|
64
63
|
</Example>
|
|
65
64
|
};
|
|
@@ -17,8 +17,7 @@ const pageData = {
|
|
|
17
17
|
{
|
|
18
18
|
"name": "data",
|
|
19
19
|
"type": "string",
|
|
20
|
-
"description": "String data being sent by the consumer"
|
|
21
|
-
"defaultValue": "''"
|
|
20
|
+
"description": "String data being sent by the consumer"
|
|
22
21
|
},
|
|
23
22
|
{
|
|
24
23
|
"name": "footer",
|
|
@@ -28,8 +27,7 @@ const pageData = {
|
|
|
28
27
|
{
|
|
29
28
|
"name": "hasLineNumbers",
|
|
30
29
|
"type": "boolean",
|
|
31
|
-
"description": "Flag to enable or disable line numbers on the log viewer."
|
|
32
|
-
"defaultValue": "true"
|
|
30
|
+
"description": "Flag to enable or disable line numbers on the log viewer."
|
|
33
31
|
},
|
|
34
32
|
{
|
|
35
33
|
"name": "hasToolbar",
|
|
@@ -44,20 +42,22 @@ const pageData = {
|
|
|
44
42
|
{
|
|
45
43
|
"name": "height",
|
|
46
44
|
"type": "number",
|
|
47
|
-
"description": "Height in pixels of the log viewer."
|
|
48
|
-
|
|
45
|
+
"description": "Height in pixels of the log viewer."
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"name": "innerRef",
|
|
49
|
+
"type": "React.RefObject<any>",
|
|
50
|
+
"description": "Forwarded ref"
|
|
49
51
|
},
|
|
50
52
|
{
|
|
51
53
|
"name": "itemCount",
|
|
52
54
|
"type": "number",
|
|
53
|
-
"description": "Number of rows to display in the log viewer"
|
|
54
|
-
"defaultValue": "undefined"
|
|
55
|
+
"description": "Number of rows to display in the log viewer"
|
|
55
56
|
},
|
|
56
57
|
{
|
|
57
58
|
"name": "loadingContent",
|
|
58
59
|
"type": "React.ReactNode",
|
|
59
|
-
"description": "Content displayed while the log viewer is loading"
|
|
60
|
-
"defaultValue": "''"
|
|
60
|
+
"description": "Content displayed while the log viewer is loading"
|
|
61
61
|
},
|
|
62
62
|
{
|
|
63
63
|
"name": "onScroll",
|
|
@@ -67,20 +67,17 @@ const pageData = {
|
|
|
67
67
|
{
|
|
68
68
|
"name": "overScanCount",
|
|
69
69
|
"type": "number",
|
|
70
|
-
"description": "Rows rendered outside of view. The more rows are rendered, the higher impact on performance"
|
|
71
|
-
"defaultValue": "10"
|
|
70
|
+
"description": "Rows rendered outside of view. The more rows are rendered, the higher impact on performance"
|
|
72
71
|
},
|
|
73
72
|
{
|
|
74
73
|
"name": "scrollToRow",
|
|
75
74
|
"type": "number",
|
|
76
|
-
"description": "Row index to scroll to"
|
|
77
|
-
"defaultValue": "0"
|
|
75
|
+
"description": "Row index to scroll to"
|
|
78
76
|
},
|
|
79
77
|
{
|
|
80
78
|
"name": "theme",
|
|
81
79
|
"type": "'dark' | 'light'",
|
|
82
|
-
"description": "Flag indicating that log viewer is dark themed"
|
|
83
|
-
"defaultValue": "'light'"
|
|
80
|
+
"description": "Flag indicating that log viewer is dark themed"
|
|
84
81
|
},
|
|
85
82
|
{
|
|
86
83
|
"name": "toolbar",
|
|
@@ -144,7 +141,7 @@ pageData.examples = {
|
|
|
144
141
|
|
|
145
142
|
</Example>,
|
|
146
143
|
'With footer component': props =>
|
|
147
|
-
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { data } from './realTestData.js';\nimport { LogViewer, LogViewerContext } from '@patternfly/react-log-viewer';\nimport { Button } from '@patternfly/react-core';\n\nFooterComponentLogViewer = () => {\n const
|
|
144
|
+
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { data } from './realTestData.js';\nimport { LogViewer, LogViewerContext } from '@patternfly/react-log-viewer';\nimport { Button } from '@patternfly/react-core';\n\nFooterComponentLogViewer = () => {\n const logViewerRef = React.useRef();\n const FooterButton = () => {\n const handleClick = e => {\n logViewerRef.current.scrollToBottom();\n };\n return <Button onClick={handleClick}>Jump to the bottom</Button>;\n };\n\n return (\n <React.Fragment>\n <LogViewer\n ref={logViewerRef}\n hasLineNumbers={false}\n height={300}\n data={data.data}\n theme=\"dark\"\n footer={<FooterButton />}\n />\n </React.Fragment>\n );\n};","title":"With footer component","lang":"js"}}>
|
|
148
145
|
|
|
149
146
|
</Example>
|
|
150
147
|
};
|
package/src/generated/index.js
CHANGED
|
@@ -993,8 +993,8 @@ module.exports = {
|
|
|
993
993
|
'/charts/bullet-chart/react': {
|
|
994
994
|
id: "Bullet chart",
|
|
995
995
|
title: "Bullet chart",
|
|
996
|
-
toc: [{"text":"Introduction"},{"text":"Examples"},[{"text":"Basic"},{"text":"Segmented primary measure"},{"text":"Responsive container with bottom aligned legend"},{"text":"Primary measure dot"},{"text":"Error measure and custom axis ticks"},{"text":"Primary measure outside range"},{"text":"Negative primary measure"},{"text":"Reversed with right aligned legend"},{"text":"Negative and positive primary measures"},{"text":"Vertical with segmented primary measure"},{"text":"Vertical primary measure outside max range"},{"text":"Custom size"},{"text":"Horizontal group"},{"text":"Vertical group"},{"text":"Horizontal group with title"},{"text":"Vertical group with title"}],{"text":"Documentation"},[{"text":"Tips"},{"text":"Note"}]],
|
|
997
|
-
examples: ["Basic","Segmented primary measure","Responsive container with bottom aligned legend","Primary measure dot","Error measure and custom axis ticks","Primary measure outside range","Negative primary measure","Reversed with right aligned legend","Negative and positive primary measures","Vertical with segmented primary measure","Vertical primary measure outside max range","Custom size","Horizontal group","Vertical group","Horizontal group with title","Vertical group with title"],
|
|
996
|
+
toc: [{"text":"Introduction"},{"text":"Examples"},[{"text":"Basic"},{"text":"Segmented primary measure"},{"text":"Responsive container with bottom aligned legend"},{"text":"Primary measure dot"},{"text":"Error measure and custom axis ticks"},{"text":"Primary measure outside range"},{"text":"Negative primary measure"},{"text":"Reversed with right aligned legend"},{"text":"Negative and positive primary measures"},{"text":"Vertical with segmented primary measure"},{"text":"Vertical primary measure outside max range"},{"text":"Custom labels"},{"text":"Custom size"},{"text":"Horizontal group"},{"text":"Vertical group"},{"text":"Horizontal group with title"},{"text":"Vertical group with title"}],{"text":"Documentation"},[{"text":"Tips"},{"text":"Note"}]],
|
|
997
|
+
examples: ["Basic","Segmented primary measure","Responsive container with bottom aligned legend","Primary measure dot","Error measure and custom axis ticks","Primary measure outside range","Negative primary measure","Reversed with right aligned legend","Negative and positive primary measures","Vertical with segmented primary measure","Vertical primary measure outside max range","Custom labels","Custom size","Horizontal group","Vertical group","Horizontal group with title","Vertical group with title"],
|
|
998
998
|
section: "charts",
|
|
999
999
|
source: "react",
|
|
1000
1000
|
Component: () => import(/* webpackChunkName: "charts/bullet-chart/react/index" */ './charts/bullet-chart/react')
|
|
@@ -1065,8 +1065,8 @@ module.exports = {
|
|
|
1065
1065
|
'/charts/themed-charts/react': {
|
|
1066
1066
|
id: "Themed charts",
|
|
1067
1067
|
title: "Themed charts",
|
|
1068
|
-
toc: [{"text":"Introduction"},{"text":"Examples"},[{"text":"Green"},{"text":"Multi-color (ordered)"},{"text":"Multi color (unordered)"},{"text":"Custom
|
|
1069
|
-
examples: ["Green","Multi-color (ordered)","Multi color (unordered)","Custom
|
|
1068
|
+
toc: [{"text":"Introduction"},{"text":"Examples"},[{"text":"Green"},{"text":"Multi-color (ordered)"},{"text":"Multi color (unordered)"},{"text":"Custom color scale"},{"text":"Custom stroke color"},{"text":"Custom theme"}],{"text":"Documentation"},[{"text":"Tips"},{"text":"Note"}]],
|
|
1069
|
+
examples: ["Green","Multi-color (ordered)","Multi color (unordered)","Custom color scale","Custom stroke color","Custom theme"],
|
|
1070
1070
|
section: "charts",
|
|
1071
1071
|
source: "react",
|
|
1072
1072
|
Component: () => import(/* webpackChunkName: "charts/themed-charts/react/index" */ './charts/themed-charts/react')
|