patternfly-java/charts/npm/demo.html at main · patternfly-java/patternfly-java · GitHub

History

144 lines (128 loc) · 4.67 KB

Raw

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

<!--

Licensed under the Apache License, Version 2.0 (the "License");

you may not use this file except in compliance with the License.

You may obtain a copy of the License at

https://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software

distributed under the License is distributed on an "AS IS" BASIS,

WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

See the License for the specific language governing permissions and

limitations under the License.

-->

<!doctype html>

<head>

<title>PatternFly Charts Web Components Demo</title>

<style>

body {

padding: 16px;

}

section {

margin-bottom: 32px;

}

h2 {

margin-top: 24px;

}

.card {

border: 1px solid #d2d2d2;

border-radius: 3px;

padding: 16px;

}

</style>

</head>

<body>

<h1 class="pf-v5-c-title pf-m-xl">PatternFly Charts Web Components</h1>

<p>Demo of <code>pfj-chart-donut</code>, <code>pfj-chart-donut-utilization</code>, <code>pfj-chart-donut-threshold</code>,

and <code>pfj-chart-bullet</code>.</p>

</header>

<h2 class="pf-v5-c-title pf-m-lg">Donut</h2>

<pfj-chart-donut

id="donut-chart-0"

width="300"

height="300"

title="Pets"

sub-title="Count"

legend-position="bottom"

></pfj-chart-donut>

</section>

<h2 class="pf-v5-c-title pf-m-lg">Donut Utilization</h2>

<pfj-chart-donut-utilization

width="300"

height="300"

title="60%"

sub-title="Utilization"

data='{"x":"Storage","y":60}'

></pfj-chart-donut-utilization>

</section>

<h2 class="pf-v5-c-title pf-m-lg">Donut Utilization with Threshold (Nested)</h2>

<pfj-chart-donut-threshold

aria-desc="Storage capacity"

aria-title="Donut utilization chart with static threshold example"

constrain-to-visible-area

data='[{"x":"Warning at 60%","y":60},{"x":"Danger at 90%","y":90}]'

name="chart10"

width="300"

height="300"

<pfj-chart-donut-utilization

id="utilization-threshold-chart-0"

sub-title="of 100 GBps"

title="75%"

thresholds='[{"value": 60}, {"value": 90}]'

></pfj-chart-donut-utilization>

</pfj-chart-donut-threshold>

</section>

<h2 class="pf-v5-c-title pf-m-lg">Bullet</h2>

<pfj-chart-bullet

id="bullet-chart-0"

width="600"

height="120"

aria-title="Bullet Chart"

comparative-warning-measure-data='[{"name":"Warning","y":88}]'

primary-segmented-measure-data='[{"name":"Measure","y":23},{"name":"Measure","y":60}]'

max-domain='{"y":132}'

qualitative-range-data='[{"name":"Range","y":50},{"name":"Range","y":75},{"name":"Range","y":100}]'

padding='{"top": 0, "right": 20, "bottom": 10, "left": 80}'

title="Threads"

></pfj-chart-bullet>

</section>

import './src/charts.js';

(async () => {

await customElements.whenDefined('pfj-chart-donut');

const dc = document.getElementById('donut-chart-0');

if (dc?.updateComplete) await dc.updateComplete;

dc.data = [

{x: 'Cats', y: 25},

{x: 'Dogs', y: 55},

{x: 'Birds', y: 20}

];

dc.labels = ({datum}) => `${datum.x}: ${datum.y}%`;

const utc = document.getElementById('utilization-threshold-chart-0');

if (utc?.updateComplete) await utc.updateComplete;

utc.data = {x: 'Storage capacity', y: 0};

setInterval(() => {

let previous = utc.data.y;

let current = (previous + 10) % 100;

utc.data = {x: 'Storage capacity', y: current};

utc.title = `${current}%`;

utc.subTitle = `${current} of 100 GBps`;

}, 1000);

await customElements.whenDefined('pfj-chart-bullet');

const bc = document.getElementById('bullet-chart-0');

if (bc?.updateComplete) await bc.updateComplete;

bc.labels = ({datum}) => `${datum.name}: ${datum.y}`;

})();

</script>

</body>

</html>

patternfly-java/charts/npm/demo.html at main · patternfly-java/patternfly-java · GitHub

Uh oh!

Expand file tree

Breadcrumbs

demo.html

Latest commit

History

Breadcrumbs

demo.html

File metadata and controls