@patternfly-java/charts 0.0.2 → 0.0.3

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.
Files changed (17) hide show
  1. package/README.md +71 -1
  2. package/demo.html +110 -61
  3. package/dist/charts.js +501 -94
  4. package/dist/charts.js.map +1 -1
  5. package/dist/demo.html +587 -139
  6. package/package.json +4 -4
  7. package/src/charts.js +14 -6
  8. package/src/components/pfj-chart-bullet.js +107 -0
  9. package/src/components/pfj-chart-donut-threshold.js +26 -0
  10. package/src/components/pfj-chart-donut-utilization.js +46 -0
  11. package/src/components/pfj-chart-donut.js +26 -0
  12. package/src/react-wrapper.js +378 -107
  13. package/.parcel-cache/data.mdb +0 -0
  14. package/.parcel-cache/lock.mdb +0 -0
  15. package/src/components/pf-chart-bullet.js +0 -49
  16. package/src/components/pf-chart-donut-utilization.js +0 -34
  17. package/src/components/pf-chart-donut.js +0 -53
package/README.md CHANGED
@@ -1 +1,71 @@
1
- Pending...
1
+ # PatternFly Charts
2
+
3
+ This package contains a subset of the [PatternFly React Charts](https://www.patternfly.org/charts/about-charts) wrapped as web components.
4
+
5
+ The package is a prerequisite if you want to use charts in [PatternFly Java](https://patternfly-java.github.io/), but can also be used independently.
6
+
7
+ ## Available charts
8
+
9
+ The following charts are available:
10
+
11
+ - `<pfj-chart-donut>` → [`ChartDonut`](https://www.patternfly.org/charts/donut-chart)
12
+ - `<pfj-chart-donut-threshold>` → [`ChartDonutThreshold`](https://www.patternfly.org/charts/donut-utilization-chart#donut-utilization-threshold-examples)
13
+ - `<pfj-chart-donut-utilization>` → [`ChartDonutUtilization`](https://www.patternfly.org/charts/donut-utilization-chart#donut-utilization-examples)
14
+ - `<pfj-chart-bullet>` → [`ChartBullet`](https://www.patternfly.org/charts/bullet-chart)
15
+
16
+ ## Usage
17
+
18
+ ```html
19
+ <pfj-chart-donut
20
+ id="chart-donut-0"
21
+ width="300"
22
+ height="300"
23
+ title="Pets"
24
+ sub-title="Count"
25
+ ></pfj-chart-donut>
26
+
27
+ <pfj-chart-donut-utilization
28
+ width="300"
29
+ height="300"
30
+ title="60%"
31
+ sub-title="Utilization"
32
+ data='{"x":"Storage","y":60}'
33
+ ></pfj-chart-donut-utilization>
34
+
35
+ <pfj-chart-donut-threshold
36
+ aria-desc="Storage capacity"
37
+ aria-title="Donut utilization chart with static threshold example"
38
+ constrain-to-visible-area
39
+ data='[{"x":"Warning at 60%","y":60},{"x":"Danger at 90%","y":90}]'
40
+ width="300"
41
+ height="300"
42
+ >
43
+ <pfj-chart-donut-utilization
44
+ id="chart-donut-utilization-0"
45
+ sub-title="of 100 GBps"
46
+ title="0%"
47
+ thresholds='[{"value": 60}, {"value": 90}]'
48
+ ></pfj-chart-donut-utilization>
49
+ </pfj-chart-donut-threshold>
50
+
51
+ <script type="module">
52
+ const cd = document.getElementById('chart-donut-0');
53
+ cd.data = [
54
+ {x: 'Cats', y: 25},
55
+ {x: 'Dogs', y: 55},
56
+ {x: 'Birds', y: 20}
57
+ ];
58
+ cd.labels = ({datum}) => `${datum.x}: ${datum.y}%`;
59
+
60
+ const cdu = document.getElementById('chart-donut-utilization-0');
61
+ cdu.data = {x: 'Storage capacity', y: 0};
62
+ setInterval(() => {
63
+ let previous = cdu.data.y;
64
+ let current = (previous + 10) % 100;
65
+ cdu.data = {x: 'Storage capacity', y: current};
66
+ cdu.title = `${current}%`;
67
+ cdu.subTitle = `${current} of 100 GBps`;
68
+ }, 1000);
69
+ </script>
70
+ ```
71
+
package/demo.html CHANGED
@@ -17,72 +17,121 @@
17
17
  -->
18
18
  <!doctype html>
19
19
  <html lang="en">
20
- <head>
21
- <meta charset="utf-8" />
22
- <meta name="viewport" content="width=device-width, initial-scale=1" />
20
+ <head>
21
+ <meta charset="utf-8"/>
22
+ <meta name="viewport" content="width=device-width, initial-scale=1"/>
23
23
  <title>PatternFly Charts Web Components Demo</title>
24
24
  <!-- PatternFly stylesheet -->
25
- <link rel="stylesheet" href="https://unpkg.com/@patternfly/patternfly/patternfly.css" />
25
+ <link rel="stylesheet" href="https://unpkg.com/@patternfly/patternfly/patternfly.css"/>
26
26
  <style>
27
- body { padding: 16px; }
28
- section { margin-bottom: 32px; }
29
- h2 { margin-top: 24px; }
30
- .card { border: 1px solid #d2d2d2; border-radius: 3px; padding: 16px; }
27
+ body {
28
+ padding: 16px;
29
+ }
30
+
31
+ section {
32
+ margin-bottom: 32px;
33
+ }
34
+
35
+ h2 {
36
+ margin-top: 24px;
37
+ }
38
+
39
+ .card {
40
+ border: 1px solid #d2d2d2;
41
+ border-radius: 3px;
42
+ padding: 16px;
43
+ }
31
44
  </style>
32
- </head>
33
- <body>
34
- <header>
35
- <h1 class="pf-v5-c-title pf-m-xl">PatternFly Charts Web Components</h1>
36
- <p>Demo of <code>pf-chart-donut</code>, <code>pf-chart-donut-utilization</code>, and <code>pf-chart-bullet</code>.</p>
37
- </header>
45
+ </head>
46
+ <body>
47
+ <header>
48
+ <h1 class="pf-v5-c-title pf-m-xl">PatternFly Charts Web Components</h1>
49
+ <p>Demo of <code>pfj-chart-donut</code>, <code>pfj-chart-donut-utilization</code>, <code>pfj-chart-donut-threshold</code>,
50
+ and <code>pfj-chart-bullet</code>.</p>
51
+ </header>
52
+
53
+ <section class="card">
54
+ <h2 class="pf-v5-c-title pf-m-lg">Donut</h2>
55
+ <pfj-chart-donut
56
+ id="donut-chart-0"
57
+ width="300"
58
+ height="300"
59
+ title="Pets"
60
+ sub-title="Count"
61
+ legend-position="bottom"
62
+ ></pfj-chart-donut>
63
+ </section>
64
+
65
+ <section class="card">
66
+ <h2 class="pf-v5-c-title pf-m-lg">Donut Utilization</h2>
67
+ <pfj-chart-donut-utilization
68
+ width="300"
69
+ height="300"
70
+ title="60%"
71
+ sub-title="Utilization"
72
+ data='{"x":"Storage","y":60}'
73
+ ></pfj-chart-donut-utilization>
74
+ </section>
75
+
76
+ <section class="card">
77
+ <h2 class="pf-v5-c-title pf-m-lg">Donut Utilization with Threshold (Nested)</h2>
78
+ <pfj-chart-donut-threshold
79
+ aria-desc="Storage capacity"
80
+ aria-title="Donut utilization chart with static threshold example"
81
+ constrain-to-visible-area
82
+ data='[{"x":"Warning at 60%","y":60},{"x":"Danger at 90%","y":90}]'
83
+ name="chart10"
84
+ width="300"
85
+ height="300"
86
+ >
87
+ <pfj-chart-donut-utilization
88
+ id="utilization-threshold-chart-0"
89
+ sub-title="of 100 GBps"
90
+ title="75%"
91
+ thresholds='[{"value": 60}, {"value": 90}]'
92
+ ></pfj-chart-donut-utilization>
93
+ </pfj-chart-donut-threshold>
94
+ </section>
38
95
 
39
- <section class="card">
40
- <h2 class="pf-v5-c-title pf-m-lg">Donut</h2>
41
- <pf-chart-donut
42
- id="donut-prop-fn"
43
- width="350"
44
- height="350"
45
- title="Pets"
46
- sub-title="Count"
47
- legend-position="bottom"
48
- data='[{"x":"Cats","y":35},{"x":"Dogs","y":55},{"x":"Birds","y":10}]'
49
- ></pf-chart-donut>
50
- </section>
96
+ <section class="card">
97
+ <h2 class="pf-v5-c-title pf-m-lg">Bullet</h2>
98
+ <pfj-chart-bullet
99
+ width="600"
100
+ height="150"
101
+ aria-title="Bullet Chart"
102
+ primary-segmented-measure-data='[{"name":"Measure","y":100},{"name":"Measure","y":60}]'
103
+ primary-dot-measure-data='[{"name":"Measure","y":75}]'
104
+ comparative-warning-measure-data='[{"name":"Warning","y":88}]'
105
+ comparative-error-measure-data='[{"name":"Error","y":95}]'
106
+ qualitative-range-data='[{"name":"Range","y":50},{"name":"Range","y":75},{"name":"Range","y":100}]'
107
+ ></pfj-chart-bullet>
108
+ </section>
51
109
 
52
- <section class="card">
53
- <h2 class="pf-v5-c-title pf-m-lg">Donut Utilization</h2>
54
- <pf-chart-donut-utilization
55
- width="300"
56
- height="300"
57
- title="60%"
58
- sub-title="Utilization"
59
- data='{"x":"Storage","y":60}'
60
- ></pf-chart-donut-utilization>
61
- </section>
110
+ <script type="module">
111
+ import './src/charts.js';
62
112
 
63
- <section class="card">
64
- <h2 class="pf-v5-c-title pf-m-lg">Bullet</h2>
65
- <pf-chart-bullet
66
- width="600"
67
- height="150"
68
- aria-title="Bullet Chart"
69
- primary-segmented-measure-data='[{"name":"Measure","y":100},{"name":"Measure","y":60}]'
70
- primary-dot-measure-data='[{"name":"Measure","y":75}]'
71
- comparative-warning-measure-data='[{"name":"Warning","y":88}]'
72
- comparative-error-measure-data='[{"name":"Error","y":95}]'
73
- qualitative-range-data='[{"name":"Range","y":50},{"name":"Range","y":75},{"name":"Range","y":100}]'
74
- ></pf-chart-bullet>
75
- </section>
113
+ (async () => {
114
+ await customElements.whenDefined('pfj-chart-donut');
115
+ const dc = document.getElementById('donut-chart-0');
116
+ if (dc?.updateComplete) await dc.updateComplete;
117
+ dc.data = [
118
+ {x: 'Cats', y: 25},
119
+ {x: 'Dogs', y: 55},
120
+ {x: 'Birds', y: 20}
121
+ ];
122
+ dc.labels = ({datum}) => `${datum.x}: ${datum.y}%`;
76
123
 
77
- <!-- During development, load from source; Parcel will handle module graph. For production, use ../../target/charts/charts.js -->
78
- <script type="module">
79
- import './src/charts.js';
80
- (async () => {
81
- await customElements.whenDefined('pf-chart-donut');
82
- const el = document.getElementById('donut-prop-fn');
83
- if (el?.updateComplete) await el.updateComplete;
84
- el.labels = ({ datum }) => `${datum.x}: ${datum.y}%`;
85
- })();
86
- </script>
87
- </body>
88
- </html>
124
+ const utc = document.getElementById('utilization-threshold-chart-0');
125
+ if (utc?.updateComplete) await utc.updateComplete;
126
+ utc.data = {x: 'Storage capacity', y: 0};
127
+ setInterval(() => {
128
+ let previous = utc.data.y;
129
+ let current = (previous + 10) % 100;
130
+ utc.data = {x: 'Storage capacity', y: current};
131
+ utc.title = `${current}%`;
132
+ utc.subTitle = `${current} of 100 GBps`;
133
+ }, 1000);
134
+ })();
135
+ </script>
136
+ </body>
137
+ </html>