@patternfly-java/charts 0.0.2 → 0.0.4
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/README.md +71 -1
- package/demo.html +110 -61
- package/dist/charts.js +501 -94
- package/dist/charts.js.map +1 -1
- package/dist/demo.html +587 -139
- package/package.json +4 -4
- package/src/charts.js +14 -6
- package/src/components/pfj-chart-bullet.js +107 -0
- package/src/components/pfj-chart-donut-threshold.js +26 -0
- package/src/components/pfj-chart-donut-utilization.js +46 -0
- package/src/components/pfj-chart-donut.js +26 -0
- package/src/react-wrapper.js +378 -107
- package/.parcel-cache/data.mdb +0 -0
- package/.parcel-cache/lock.mdb +0 -0
- package/src/components/pf-chart-bullet.js +0 -49
- package/src/components/pf-chart-donut-utilization.js +0 -34
- package/src/components/pf-chart-donut.js +0 -53
package/dist/demo.html
CHANGED
|
@@ -38,30 +38,37 @@ h2 {
|
|
|
38
38
|
padding: 16px;
|
|
39
39
|
}
|
|
40
40
|
</style>
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
41
|
+
</head>
|
|
42
|
+
<body>
|
|
43
|
+
<header>
|
|
44
|
+
<h1 class="pf-v5-c-title pf-m-xl">PatternFly Charts Web Components</h1>
|
|
45
|
+
<p>Demo of <code>pfj-chart-donut</code>, <code>pfj-chart-donut-utilization</code>, <code>pfj-chart-donut-threshold</code>,
|
|
46
|
+
and <code>pfj-chart-bullet</code>.</p>
|
|
47
|
+
</header>
|
|
48
|
+
|
|
49
|
+
<section class="card">
|
|
50
|
+
<h2 class="pf-v5-c-title pf-m-lg">Donut</h2>
|
|
51
|
+
<pfj-chart-donut id="donut-chart-0" width="300" height="300" title="Pets" sub-title="Count" legend-position="bottom"></pfj-chart-donut>
|
|
52
|
+
</section>
|
|
53
|
+
|
|
54
|
+
<section class="card">
|
|
55
|
+
<h2 class="pf-v5-c-title pf-m-lg">Donut Utilization</h2>
|
|
56
|
+
<pfj-chart-donut-utilization width="300" height="300" title="60%" sub-title="Utilization" data="{"x":"Storage","y":60}"></pfj-chart-donut-utilization>
|
|
57
|
+
</section>
|
|
58
|
+
|
|
59
|
+
<section class="card">
|
|
60
|
+
<h2 class="pf-v5-c-title pf-m-lg">Donut Utilization with Threshold (Nested)</h2>
|
|
61
|
+
<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">
|
|
62
|
+
<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>
|
|
63
|
+
</pfj-chart-donut-threshold>
|
|
64
|
+
</section>
|
|
65
|
+
|
|
66
|
+
<section class="card">
|
|
67
|
+
<h2 class="pf-v5-c-title pf-m-lg">Bullet</h2>
|
|
68
|
+
<pfj-chart-bullet width="600" height="150" aria-title="Bullet Chart" primary-segmented-measure-data="[{"name":"Measure","y":100},{"name":"Measure","y":60}]" primary-dot-measure-data="[{"name":"Measure","y":75}]" comparative-warning-measure-data="[{"name":"Warning","y":88}]" comparative-error-measure-data="[{"name":"Error","y":95}]" qualitative-range-data="[{"name":"Range","y":50},{"name":"Range","y":75},{"name":"Range","y":100}]"></pfj-chart-bullet>
|
|
69
|
+
</section>
|
|
70
|
+
|
|
71
|
+
<script>// modules are defined as an array
|
|
65
72
|
// [ module function, map of requires ]
|
|
66
73
|
//
|
|
67
74
|
// map of requires is short require name -> numeric require
|
|
@@ -779,10 +786,40 @@ function hmrAccept(bundle /*: ParcelRequire */ , id /*: string */ ) {
|
|
|
779
786
|
},{}],"cp3Cd":[function(require,module,exports,__globalThis) {
|
|
780
787
|
var _chartsJs = require("./src/charts.js");
|
|
781
788
|
(async ()=>{
|
|
782
|
-
await customElements.whenDefined('
|
|
783
|
-
const
|
|
784
|
-
if (
|
|
785
|
-
|
|
789
|
+
await customElements.whenDefined('pfj-chart-donut');
|
|
790
|
+
const dc = document.getElementById('donut-chart-0');
|
|
791
|
+
if (dc?.updateComplete) await dc.updateComplete;
|
|
792
|
+
dc.data = [
|
|
793
|
+
{
|
|
794
|
+
x: 'Cats',
|
|
795
|
+
y: 25
|
|
796
|
+
},
|
|
797
|
+
{
|
|
798
|
+
x: 'Dogs',
|
|
799
|
+
y: 55
|
|
800
|
+
},
|
|
801
|
+
{
|
|
802
|
+
x: 'Birds',
|
|
803
|
+
y: 20
|
|
804
|
+
}
|
|
805
|
+
];
|
|
806
|
+
dc.labels = ({ datum })=>`${datum.x}: ${datum.y}%`;
|
|
807
|
+
const utc = document.getElementById('utilization-threshold-chart-0');
|
|
808
|
+
if (utc?.updateComplete) await utc.updateComplete;
|
|
809
|
+
utc.data = {
|
|
810
|
+
x: 'Storage capacity',
|
|
811
|
+
y: 0
|
|
812
|
+
};
|
|
813
|
+
setInterval(()=>{
|
|
814
|
+
let previous = utc.data.y;
|
|
815
|
+
let current = (previous + 10) % 100;
|
|
816
|
+
utc.data = {
|
|
817
|
+
x: 'Storage capacity',
|
|
818
|
+
y: current
|
|
819
|
+
};
|
|
820
|
+
utc.title = `${current}%`;
|
|
821
|
+
utc.subTitle = `${current} of 100 GBps`;
|
|
822
|
+
}, 1000);
|
|
786
823
|
})();
|
|
787
824
|
|
|
788
825
|
},{"./src/charts.js":"kkiZQ"}],"kkiZQ":[function(require,module,exports,__globalThis) {
|
|
@@ -802,14 +839,16 @@ var _chartsJs = require("./src/charts.js");
|
|
|
802
839
|
* limitations under the License.
|
|
803
840
|
*/ var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
|
|
804
841
|
parcelHelpers.defineInteropFlag(exports);
|
|
805
|
-
parcelHelpers.export(exports, "
|
|
806
|
-
parcelHelpers.export(exports, "
|
|
807
|
-
parcelHelpers.export(exports, "
|
|
808
|
-
|
|
809
|
-
var
|
|
810
|
-
var
|
|
842
|
+
parcelHelpers.export(exports, "ChartDonutWebComponent", ()=>(0, _pfjChartDonutJs.ChartDonutWebComponent));
|
|
843
|
+
parcelHelpers.export(exports, "ChartDonutUtilizationWebComponent", ()=>(0, _pfjChartDonutUtilizationJs.ChartDonutUtilizationWebComponent));
|
|
844
|
+
parcelHelpers.export(exports, "ChartDonutThresholdWebComponent", ()=>(0, _pfjChartDonutThresholdJs.ChartDonutThresholdWebComponent));
|
|
845
|
+
parcelHelpers.export(exports, "ChartBulletWebComponent", ()=>(0, _pfjChartBulletJs.ChartBulletWebComponent));
|
|
846
|
+
var _pfjChartDonutJs = require("./components/pfj-chart-donut.js");
|
|
847
|
+
var _pfjChartDonutUtilizationJs = require("./components/pfj-chart-donut-utilization.js");
|
|
848
|
+
var _pfjChartDonutThresholdJs = require("./components/pfj-chart-donut-threshold.js");
|
|
849
|
+
var _pfjChartBulletJs = require("./components/pfj-chart-bullet.js");
|
|
811
850
|
|
|
812
|
-
},{"./components/
|
|
851
|
+
},{"./components/pfj-chart-donut.js":"bNmg7","./components/pfj-chart-donut-utilization.js":"gSeNk","./components/pfj-chart-donut-threshold.js":"7XBnQ","./components/pfj-chart-bullet.js":"3RKOW","@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}],"bNmg7":[function(require,module,exports,__globalThis) {
|
|
813
852
|
/*
|
|
814
853
|
* Copyright 2023 Red Hat
|
|
815
854
|
*
|
|
@@ -826,41 +865,18 @@ var _pfChartBulletJs = require("./components/pf-chart-bullet.js");
|
|
|
826
865
|
* limitations under the License.
|
|
827
866
|
*/ var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
|
|
828
867
|
parcelHelpers.defineInteropFlag(exports);
|
|
829
|
-
parcelHelpers.export(exports, "
|
|
868
|
+
parcelHelpers.export(exports, "ChartDonutWebComponent", ()=>ChartDonutWebComponent);
|
|
830
869
|
var _reactWrapperJs = require("../react-wrapper.js");
|
|
831
870
|
var _victory = require("@patternfly/react-charts/victory");
|
|
832
|
-
class
|
|
833
|
-
constructor(){
|
|
834
|
-
super();
|
|
835
|
-
this._labels = undefined;
|
|
836
|
-
}
|
|
837
|
-
// Support function-valued 'labels' via direct property assignment on this element only
|
|
838
|
-
get labels() {
|
|
839
|
-
return this._labels;
|
|
840
|
-
}
|
|
841
|
-
set labels(fn) {
|
|
842
|
-
this._labels = fn;
|
|
843
|
-
this._renderReact();
|
|
844
|
-
}
|
|
845
|
-
// Provide defaults for common props via extraProps
|
|
871
|
+
class ChartDonutWebComponent extends (0, _reactWrapperJs.ReactWrapperElement) {
|
|
846
872
|
getReactComponent() {
|
|
847
|
-
const extraProps = {};
|
|
848
|
-
// allow setting data via property as object (not only attribute)
|
|
849
|
-
if (this.data && typeof this.data !== 'string') extraProps.data = this.data;
|
|
850
|
-
else if (this.getAttribute('data')) {
|
|
851
|
-
// data can be object or array; parse
|
|
852
|
-
const parsed = (0, _reactWrapperJs.parseAttrValue)('data', this.getAttribute('data'));
|
|
853
|
-
extraProps.data = parsed;
|
|
854
|
-
}
|
|
855
|
-
// If a function-valued labels property was assigned, prefer it over attribute value
|
|
856
|
-
if (typeof this._labels === 'function') extraProps.labels = this._labels;
|
|
857
873
|
return [
|
|
858
874
|
(0, _victory.ChartDonut),
|
|
859
|
-
|
|
875
|
+
{}
|
|
860
876
|
];
|
|
861
877
|
}
|
|
862
878
|
}
|
|
863
|
-
customElements.define('
|
|
879
|
+
customElements.define('pfj-chart-donut', ChartDonutWebComponent);
|
|
864
880
|
|
|
865
881
|
},{"../react-wrapper.js":"jOeNR","@patternfly/react-charts/victory":"l25k4","@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}],"jOeNR":[function(require,module,exports,__globalThis) {
|
|
866
882
|
var $parcel$ReactRefreshHelpers$39b3 = require("@parcel/transformer-react-refresh-wrap/lib/helpers/helpers.js");
|
|
@@ -886,15 +902,13 @@ try {
|
|
|
886
902
|
* limitations under the License.
|
|
887
903
|
*/ var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
|
|
888
904
|
parcelHelpers.defineInteropFlag(exports);
|
|
889
|
-
parcelHelpers.export(exports, "dashToCamel", ()=>dashToCamel);
|
|
890
905
|
parcelHelpers.export(exports, "parseAttrValue", ()=>parseAttrValue);
|
|
891
|
-
|
|
906
|
+
// ------------------------------------------------------ instance
|
|
892
907
|
parcelHelpers.export(exports, "ReactWrapperElement", ()=>ReactWrapperElement);
|
|
893
908
|
var _lit = require("lit");
|
|
894
909
|
var _react = require("react");
|
|
895
910
|
var _reactDefault = parcelHelpers.interopDefault(_react);
|
|
896
911
|
var _client = require("react-dom/client");
|
|
897
|
-
const dashToCamel = (str)=>str.replace(/-([a-z])/g, (_, c)=>c.toUpperCase());
|
|
898
912
|
const parseAttrValue = (name, value)=>{
|
|
899
913
|
if (value === '' || value === undefined || value === null) // boolean attribute presence => true
|
|
900
914
|
return true;
|
|
@@ -910,55 +924,140 @@ const parseAttrValue = (name, value)=>{
|
|
|
910
924
|
}
|
|
911
925
|
return value;
|
|
912
926
|
};
|
|
913
|
-
|
|
927
|
+
// Build props from attributes of an element
|
|
928
|
+
const _buildPropsFromAttributes = (el)=>{
|
|
914
929
|
const props = {};
|
|
915
930
|
for (const attr of el.attributes){
|
|
916
|
-
const camel =
|
|
931
|
+
const camel = _dashToCamel(attr.name);
|
|
917
932
|
// skip standard attributes not relevant to React props
|
|
918
933
|
if (camel === 'class' || camel === 'style') continue;
|
|
919
934
|
props[camel] = parseAttrValue(camel, attr.value);
|
|
920
935
|
}
|
|
921
936
|
return props;
|
|
922
937
|
};
|
|
923
|
-
|
|
938
|
+
const _dashToCamel = (str)=>str.replace(/-([a-z])/g, (_, c)=>c.toUpperCase());
|
|
939
|
+
// Props we currently do not support because they expect React elements
|
|
924
940
|
const disallowedProps = new Set([
|
|
925
|
-
'events',
|
|
926
941
|
'containerComponent',
|
|
927
|
-
'
|
|
942
|
+
'desc',
|
|
943
|
+
'events',
|
|
944
|
+
'groupComponent',
|
|
928
945
|
'labelComponent',
|
|
929
|
-
'
|
|
946
|
+
'legendComponent',
|
|
930
947
|
'subTitleComponent',
|
|
931
|
-
'
|
|
932
|
-
'desc' // container-composed
|
|
948
|
+
'titleComponent'
|
|
933
949
|
]);
|
|
934
950
|
class ReactWrapperElement extends (0, _lit.LitElement) {
|
|
935
951
|
static styles = (0, _lit.css)`
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
952
|
+
:host {
|
|
953
|
+
display: inline-block;
|
|
954
|
+
}
|
|
955
|
+
|
|
956
|
+
.container {
|
|
957
|
+
width: 100%;
|
|
958
|
+
height: 100%;
|
|
959
|
+
}
|
|
960
|
+
`;
|
|
939
961
|
constructor(){
|
|
940
962
|
super();
|
|
941
963
|
this._root = null;
|
|
942
964
|
this._container = null;
|
|
943
965
|
this._observer = null;
|
|
944
966
|
this._component = null;
|
|
945
|
-
|
|
967
|
+
// Common properties applicable to all React chart components that are
|
|
968
|
+
// a) either complex attributes such as a function or structured (JSON) data or
|
|
969
|
+
// b) trigger a re-render when changed.
|
|
970
|
+
this._categories = undefined; // string[]
|
|
971
|
+
this._data = undefined; // any | any[]
|
|
972
|
+
this._height = undefined; // number
|
|
973
|
+
this._labels = undefined; // (data: any) => string
|
|
974
|
+
this._legendAllowWrap = undefined; // boolean
|
|
975
|
+
this._legendData = undefined; // string[]
|
|
976
|
+
this._legendOrientation = undefined; // string
|
|
977
|
+
this._legendPosition = undefined; // string
|
|
978
|
+
this._padding = undefined; // { top?: number, bottom?: number, left?: number, right?: number }
|
|
979
|
+
this._subTitle = undefined; // string
|
|
980
|
+
this._subTitlePosition = undefined; // string
|
|
981
|
+
this._themeColor = undefined; // string
|
|
982
|
+
this._title = undefined; // string
|
|
983
|
+
this._width = undefined; // number
|
|
984
|
+
}
|
|
985
|
+
// ------------------------------------------------------ render
|
|
946
986
|
createRenderRoot() {
|
|
947
|
-
// Use shadow root to encapsulate
|
|
987
|
+
// Use shadow root to encapsulate but allow React to mount inside
|
|
948
988
|
return super.createRenderRoot();
|
|
949
989
|
}
|
|
950
990
|
render() {
|
|
951
|
-
return (0, _lit.html)
|
|
991
|
+
return (0, _lit.html)`
|
|
992
|
+
<div class="container"></div>
|
|
993
|
+
<slot style="display: none;"></slot>`;
|
|
994
|
+
}
|
|
995
|
+
// Must be implemented by subclasses to return [ReactComponent, extraProps]
|
|
996
|
+
getReactComponent() {
|
|
997
|
+
throw new Error('getReactComponent() must be implemented by subclass');
|
|
998
|
+
}
|
|
999
|
+
// central render method for standalone and slotted elements.
|
|
1000
|
+
_renderReact() {
|
|
1001
|
+
if (!this._root) return;
|
|
1002
|
+
const rawProps = _buildPropsFromAttributes(this);
|
|
1003
|
+
const commonProps = this._commonProps();
|
|
1004
|
+
const [Component, extraProps = {}] = this.getReactComponent();
|
|
1005
|
+
const props = {
|
|
1006
|
+
...rawProps,
|
|
1007
|
+
...commonProps,
|
|
1008
|
+
...extraProps
|
|
1009
|
+
};
|
|
1010
|
+
for (const key of Object.keys(props))if (disallowedProps.has(key)) delete props[key];
|
|
1011
|
+
const children = this._getReactChildren();
|
|
1012
|
+
this._root.render(/*#__PURE__*/ (0, _reactDefault.default).createElement(Component, props, ...children));
|
|
1013
|
+
}
|
|
1014
|
+
_getReactChildren() {
|
|
1015
|
+
const slot = this.renderRoot.querySelector('slot');
|
|
1016
|
+
if (!slot) return [];
|
|
1017
|
+
const assignedElements = slot.assignedElements();
|
|
1018
|
+
const reactChildren = [];
|
|
1019
|
+
for (const el of assignedElements)if (el instanceof ReactWrapperElement) {
|
|
1020
|
+
const childRawProps = _buildPropsFromAttributes(el);
|
|
1021
|
+
const childCommonProps = el._commonProps(); // Use child's common props, not parent's!
|
|
1022
|
+
const [ChildComponent, childExtraProps = {}] = el.getReactComponent();
|
|
1023
|
+
const childProps = {
|
|
1024
|
+
...childRawProps,
|
|
1025
|
+
...childCommonProps,
|
|
1026
|
+
...childExtraProps
|
|
1027
|
+
};
|
|
1028
|
+
for (const key of Object.keys(childProps))if (disallowedProps.has(key)) delete childProps[key];
|
|
1029
|
+
reactChildren.push(/*#__PURE__*/ (0, _reactDefault.default).createElement(ChildComponent, childProps));
|
|
1030
|
+
}
|
|
1031
|
+
return reactChildren;
|
|
952
1032
|
}
|
|
953
|
-
|
|
1033
|
+
// ------------------------------------------------------ lifecycle
|
|
1034
|
+
firstUpdated(_changedProperties) {
|
|
954
1035
|
this._container = this.renderRoot.querySelector('.container');
|
|
955
|
-
this
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
1036
|
+
// Check if this element is slotted into a parent that will handle rendering
|
|
1037
|
+
const isSlotted = this._isSlottedChild();
|
|
1038
|
+
if (isSlotted) {
|
|
1039
|
+
// If slotted, DON'T create a React root - parent will handle rendering
|
|
1040
|
+
this._observer = new MutationObserver(()=>{
|
|
1041
|
+
const parent = this.parentElement;
|
|
1042
|
+
if (parent && parent instanceof ReactWrapperElement && parent._renderReact) parent._renderReact();
|
|
1043
|
+
});
|
|
1044
|
+
this._observer.observe(this, {
|
|
1045
|
+
attributes: true
|
|
1046
|
+
});
|
|
1047
|
+
} else {
|
|
1048
|
+
// If standalone, create React root and render normally
|
|
1049
|
+
this._root = (0, _client.createRoot)(this._container);
|
|
1050
|
+
this._observer = new MutationObserver(()=>this._renderReact());
|
|
1051
|
+
this._observer.observe(this, {
|
|
1052
|
+
attributes: true,
|
|
1053
|
+
childList: true,
|
|
1054
|
+
subtree: true
|
|
1055
|
+
});
|
|
1056
|
+
// Listen to slot changes to re-render when children change
|
|
1057
|
+
const slot = this.renderRoot.querySelector('slot');
|
|
1058
|
+
if (slot) slot.addEventListener('slotchange', ()=>this._renderReact());
|
|
1059
|
+
this._renderReact();
|
|
1060
|
+
}
|
|
962
1061
|
}
|
|
963
1062
|
disconnectedCallback() {
|
|
964
1063
|
if (this._observer) {
|
|
@@ -971,25 +1070,137 @@ class ReactWrapperElement extends (0, _lit.LitElement) {
|
|
|
971
1070
|
}
|
|
972
1071
|
super.disconnectedCallback();
|
|
973
1072
|
}
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
1073
|
+
_isSlottedChild() {
|
|
1074
|
+
// Check if this element's parent is also a ReactWrapperElement
|
|
1075
|
+
const parent = this.parentElement;
|
|
1076
|
+
return parent && parent instanceof ReactWrapperElement;
|
|
977
1077
|
}
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
1078
|
+
_notifyChange() {
|
|
1079
|
+
const parent = this.parentElement;
|
|
1080
|
+
if (parent && parent instanceof ReactWrapperElement && parent._renderReact) // If slotted, notify the parent to re-render
|
|
1081
|
+
parent._renderReact();
|
|
1082
|
+
else if (this._renderReact) // If standalone, render self
|
|
1083
|
+
this._renderReact();
|
|
1084
|
+
}
|
|
1085
|
+
// ------------------------------------------------------ getters/setters
|
|
1086
|
+
get categories() {
|
|
1087
|
+
return this._categories;
|
|
1088
|
+
}
|
|
1089
|
+
set categories(value) {
|
|
1090
|
+
this._categories = value;
|
|
1091
|
+
this._notifyChange();
|
|
1092
|
+
}
|
|
1093
|
+
get data() {
|
|
1094
|
+
return this._data;
|
|
1095
|
+
}
|
|
1096
|
+
set data(value) {
|
|
1097
|
+
this._data = value;
|
|
1098
|
+
this._notifyChange();
|
|
1099
|
+
}
|
|
1100
|
+
get height() {
|
|
1101
|
+
return this._height;
|
|
1102
|
+
}
|
|
1103
|
+
set height(value) {
|
|
1104
|
+
this._height = value;
|
|
1105
|
+
this._notifyChange();
|
|
1106
|
+
}
|
|
1107
|
+
get labels() {
|
|
1108
|
+
return this._labels;
|
|
1109
|
+
}
|
|
1110
|
+
set labels(value) {
|
|
1111
|
+
this._labels = value;
|
|
1112
|
+
this._notifyChange();
|
|
1113
|
+
}
|
|
1114
|
+
get legendAllowWrap() {
|
|
1115
|
+
return this._legendAllowWrap;
|
|
1116
|
+
}
|
|
1117
|
+
set legendAllowWrap(value) {
|
|
1118
|
+
this._legendAllowWrap = value;
|
|
1119
|
+
this._notifyChange();
|
|
1120
|
+
}
|
|
1121
|
+
get legendData() {
|
|
1122
|
+
return this._legendData;
|
|
1123
|
+
}
|
|
1124
|
+
set legendData(value) {
|
|
1125
|
+
this._legendData = value;
|
|
1126
|
+
this._notifyChange();
|
|
1127
|
+
}
|
|
1128
|
+
get legendOrientation() {
|
|
1129
|
+
return this._legendOrientation;
|
|
1130
|
+
}
|
|
1131
|
+
set legendOrientation(value) {
|
|
1132
|
+
this._legendOrientation = value;
|
|
1133
|
+
this._notifyChange();
|
|
1134
|
+
}
|
|
1135
|
+
get legendPosition() {
|
|
1136
|
+
return this._legendPosition;
|
|
1137
|
+
}
|
|
1138
|
+
set legendPosition(value) {
|
|
1139
|
+
this._legendPosition = value;
|
|
1140
|
+
this._notifyChange();
|
|
1141
|
+
}
|
|
1142
|
+
get padding() {
|
|
1143
|
+
return this._padding;
|
|
1144
|
+
}
|
|
1145
|
+
set padding(value) {
|
|
1146
|
+
this._padding = value;
|
|
1147
|
+
this._notifyChange();
|
|
1148
|
+
}
|
|
1149
|
+
get subTitle() {
|
|
1150
|
+
return this._subTitle;
|
|
1151
|
+
}
|
|
1152
|
+
set subTitle(value) {
|
|
1153
|
+
this._subTitle = value;
|
|
1154
|
+
this._notifyChange();
|
|
1155
|
+
}
|
|
1156
|
+
get subTitlePosition() {
|
|
1157
|
+
return this._subTitlePosition;
|
|
1158
|
+
}
|
|
1159
|
+
set subTitlePosition(value) {
|
|
1160
|
+
this._subTitlePosition = value;
|
|
1161
|
+
this._notifyChange();
|
|
1162
|
+
}
|
|
1163
|
+
get themeColor() {
|
|
1164
|
+
return this._themeColor;
|
|
1165
|
+
}
|
|
1166
|
+
set themeColor(value) {
|
|
1167
|
+
this._themeColor = value;
|
|
1168
|
+
this._notifyChange();
|
|
1169
|
+
}
|
|
1170
|
+
get title() {
|
|
1171
|
+
return this._title;
|
|
1172
|
+
}
|
|
1173
|
+
set title(value) {
|
|
1174
|
+
this._title = value;
|
|
1175
|
+
this._notifyChange();
|
|
1176
|
+
}
|
|
1177
|
+
get width() {
|
|
1178
|
+
return this._width;
|
|
1179
|
+
}
|
|
1180
|
+
set width(value) {
|
|
1181
|
+
this._width = value;
|
|
1182
|
+
this._notifyChange();
|
|
1183
|
+
}
|
|
1184
|
+
_commonProps() {
|
|
1185
|
+
const commonProps = {};
|
|
1186
|
+
if (this._categories && typeof this._categories !== 'string') commonProps.categories = this._categories;
|
|
1187
|
+
else if (this.getAttribute('categories')) commonProps.categories = parseAttrValue('categories', this.getAttribute('categories'));
|
|
1188
|
+
if (this._data && typeof this._data !== 'string') commonProps.data = this._data;
|
|
1189
|
+
else if (this.getAttribute('data')) commonProps.data = parseAttrValue('data', this.getAttribute('data'));
|
|
1190
|
+
if (this._height !== undefined) commonProps.height = Number(this._height);
|
|
1191
|
+
if (this._labels !== undefined) commonProps.labels = this._labels;
|
|
1192
|
+
if (this._legendAllowWrap !== undefined) commonProps.legendAllowWrap = this._legendAllowWrap;
|
|
1193
|
+
if (this._legendData && typeof this._legendData !== 'string') commonProps.legendData = this._legendData;
|
|
1194
|
+
else if (this.getAttribute('legend-data')) commonProps.legendData = parseAttrValue('legend-data', this.getAttribute('legend-data'));
|
|
1195
|
+
if (this._legendOrientation !== undefined) commonProps.legendOrientation = this._legendOrientation;
|
|
1196
|
+
if (this._legendPosition !== undefined) commonProps.legendPosition = this._legendPosition;
|
|
1197
|
+
if (this._padding !== undefined) commonProps.padding = this._padding;
|
|
1198
|
+
if (this._subTitle !== undefined) commonProps.subTitle = this._subTitle;
|
|
1199
|
+
if (this._subTitlePosition !== undefined) commonProps.subTitlePosition = this._subTitlePosition;
|
|
1200
|
+
if (this._themeColor !== undefined) commonProps.themeColor = this._themeColor;
|
|
1201
|
+
if (this._title !== undefined) commonProps.title = this._title;
|
|
1202
|
+
if (this._width !== undefined) commonProps.width = Number(this._width);
|
|
1203
|
+
return commonProps;
|
|
993
1204
|
}
|
|
994
1205
|
}
|
|
995
1206
|
|
|
@@ -20500,7 +20711,7 @@ var _chartContainer1 = require("./ChartUtils/chart-container");
|
|
|
20500
20711
|
var _chartInteractiveLegend = require("./ChartUtils/chart-interactive-legend");
|
|
20501
20712
|
var _chartTheme1 = require("./ChartUtils/chart-theme");
|
|
20502
20713
|
|
|
20503
|
-
},{"./Chart/Chart":false,"./ChartArea/ChartArea":false,"./ChartAxis/ChartAxis":false,"./ChartBar/ChartBar":false,"./ChartBoxPlot/ChartBoxPlot":false,"./ChartBullet/ChartBullet":"bdipS","./ChartBullet/ChartBulletComparativeErrorMeasure":false,"./ChartBullet/ChartBulletComparativeMeasure":false,"./ChartBullet/ChartBulletComparativeWarningMeasure":false,"./ChartBullet/ChartBulletPrimaryDotMeasure":false,"./ChartBullet/ChartBulletPrimarySegmentedMeasure":false,"./ChartBullet/ChartBulletQualitativeRange":false,"./ChartContainer/ChartContainer":false,"./ChartCursorContainer/ChartCursorContainer":false,"./ChartCursorTooltip/ChartCursorTooltip":false,"./ChartCursorTooltip/ChartCursorFlyout":false,"./ChartDonut/ChartDonut":"lUosY","./ChartDonutUtilization/ChartDonutThreshold":
|
|
20714
|
+
},{"./Chart/Chart":false,"./ChartArea/ChartArea":false,"./ChartAxis/ChartAxis":false,"./ChartBar/ChartBar":false,"./ChartBoxPlot/ChartBoxPlot":false,"./ChartBullet/ChartBullet":"bdipS","./ChartBullet/ChartBulletComparativeErrorMeasure":false,"./ChartBullet/ChartBulletComparativeMeasure":false,"./ChartBullet/ChartBulletComparativeWarningMeasure":false,"./ChartBullet/ChartBulletPrimaryDotMeasure":false,"./ChartBullet/ChartBulletPrimarySegmentedMeasure":false,"./ChartBullet/ChartBulletQualitativeRange":false,"./ChartContainer/ChartContainer":false,"./ChartCursorContainer/ChartCursorContainer":false,"./ChartCursorTooltip/ChartCursorTooltip":false,"./ChartCursorTooltip/ChartCursorFlyout":false,"./ChartDonut/ChartDonut":"lUosY","./ChartDonutUtilization/ChartDonutThreshold":"lnDDh","./ChartDonutUtilization/ChartDonutUtilization":"lQLiQ","./ChartGroup/ChartGroup":false,"./ChartLabel/ChartLabel":false,"./ChartLegend/ChartLegend":false,"./ChartLegendTooltip/ChartLegendTooltip":false,"./ChartLegendTooltip/ChartLegendTooltipContent":false,"./ChartLegendTooltip/ChartLegendTooltipLabel":false,"./ChartLine/ChartLine":false,"./ChartPie/ChartPie":false,"./ChartPoint/ChartPoint":false,"./ChartScatter/ChartScatter":false,"./ChartStack/ChartStack":false,"./ChartTheme/ChartTheme":false,"./ChartTheme/ChartThemeColor":false,"./ChartThreshold/ChartThreshold":false,"./ChartTooltip/ChartTooltip":false,"./ChartVoronoiContainer/ChartVoronoiContainer":false,"./ChartUtils/chart-container":false,"./ChartUtils/chart-interactive-legend":false,"./ChartUtils/chart-theme":false,"@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}],"6rFkV":[function(require,module,exports,__globalThis) {
|
|
20504
20715
|
var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
|
|
20505
20716
|
parcelHelpers.defineInteropFlag(exports);
|
|
20506
20717
|
parcelHelpers.export(exports, "ChartAxis", ()=>ChartAxis);
|
|
@@ -60517,7 +60728,170 @@ const renderChildrenWithPatterns = ({ children, patternScale, themeColor })=>(0,
|
|
|
60517
60728
|
return child;
|
|
60518
60729
|
});
|
|
60519
60730
|
|
|
60520
|
-
},{"tslib":"lRdW5","react/jsx-runtime":"6AEwr","react":"21dqq","lodash/uniqueId":"4NNUb","lodash/cloneDeep":"NMIiZ","@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}],"
|
|
60731
|
+
},{"tslib":"lRdW5","react/jsx-runtime":"6AEwr","react":"21dqq","lodash/uniqueId":"4NNUb","lodash/cloneDeep":"NMIiZ","@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}],"lnDDh":[function(require,module,exports,__globalThis) {
|
|
60732
|
+
var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
|
|
60733
|
+
parcelHelpers.defineInteropFlag(exports);
|
|
60734
|
+
parcelHelpers.export(exports, "ChartDonutThreshold", ()=>ChartDonutThreshold);
|
|
60735
|
+
var _tslib = require("tslib");
|
|
60736
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
60737
|
+
var _react = require("react");
|
|
60738
|
+
var _victoryCore = require("victory-core");
|
|
60739
|
+
var _victoryPie = require("victory-pie");
|
|
60740
|
+
var _hoistNonReactStatics = require("hoist-non-react-statics");
|
|
60741
|
+
var _hoistNonReactStaticsDefault = parcelHelpers.interopDefault(_hoistNonReactStatics);
|
|
60742
|
+
var _chartContainer = require("../ChartContainer/ChartContainer");
|
|
60743
|
+
var _chartDonut = require("../ChartDonut/ChartDonut");
|
|
60744
|
+
var _chartStyles = require("../ChartTheme/ChartStyles");
|
|
60745
|
+
var _chartPadding = require("../ChartUtils/chart-padding");
|
|
60746
|
+
var _chartThemeTypes = require("../ChartUtils/chart-theme-types");
|
|
60747
|
+
const ChartDonutThreshold = (_a)=>{
|
|
60748
|
+
var { allowTooltip = true, ariaDesc, ariaTitle, children, colorScale, constrainToVisibleArea = false, containerComponent = (0, _jsxRuntime.jsx)((0, _chartContainer.ChartContainer), {}), data = [], hasPatterns, invert = false, labels = [], name, padding, radius, standalone = true, subTitlePosition = (0, _chartStyles.ChartDonutStyles).label.subTitlePosition, themeColor, x, y, // destructure last
|
|
60749
|
+
theme = (0, _chartThemeTypes.getDonutThresholdStaticTheme)(themeColor, invert), height = theme.pie.height, width = theme.pie.width } = _a, rest = (0, _tslib.__rest)(_a, [
|
|
60750
|
+
"allowTooltip",
|
|
60751
|
+
"ariaDesc",
|
|
60752
|
+
"ariaTitle",
|
|
60753
|
+
"children",
|
|
60754
|
+
"colorScale",
|
|
60755
|
+
"constrainToVisibleArea",
|
|
60756
|
+
"containerComponent",
|
|
60757
|
+
"data",
|
|
60758
|
+
"hasPatterns",
|
|
60759
|
+
"invert",
|
|
60760
|
+
"labels",
|
|
60761
|
+
"name",
|
|
60762
|
+
"padding",
|
|
60763
|
+
"radius",
|
|
60764
|
+
"standalone",
|
|
60765
|
+
"subTitlePosition",
|
|
60766
|
+
"themeColor",
|
|
60767
|
+
"x",
|
|
60768
|
+
"y",
|
|
60769
|
+
"theme",
|
|
60770
|
+
"height",
|
|
60771
|
+
"width"
|
|
60772
|
+
]);
|
|
60773
|
+
const defaultPadding = {
|
|
60774
|
+
bottom: (0, _chartPadding.getPaddingForSide)('bottom', padding, theme.pie.padding),
|
|
60775
|
+
left: (0, _chartPadding.getPaddingForSide)('left', padding, theme.pie.padding),
|
|
60776
|
+
right: (0, _chartPadding.getPaddingForSide)('right', padding, theme.pie.padding),
|
|
60777
|
+
top: (0, _chartPadding.getPaddingForSide)('top', padding, theme.pie.padding)
|
|
60778
|
+
};
|
|
60779
|
+
const chartRadius = (0, _victoryCore.Helpers).evaluateProp(radius, undefined) || (0, _victoryCore.Helpers).getRadius({
|
|
60780
|
+
height,
|
|
60781
|
+
width,
|
|
60782
|
+
padding: defaultPadding
|
|
60783
|
+
});
|
|
60784
|
+
// Returns computed data representing pie chart slices
|
|
60785
|
+
const getComputedData = ()=>{
|
|
60786
|
+
// Format and sort data. Sorting ensures thresholds are displayed in the correct order and simplifies calculations.
|
|
60787
|
+
const datum = (0, _victoryCore.Data).formatData(data, Object.assign({
|
|
60788
|
+
x,
|
|
60789
|
+
y
|
|
60790
|
+
}, rest), [
|
|
60791
|
+
'x',
|
|
60792
|
+
'y'
|
|
60793
|
+
]).sort((a, b)=>a._y - b._y);
|
|
60794
|
+
// Data must be offset so that the sum of all data point y-values (including the final slice) == 100.
|
|
60795
|
+
const [prev, computedData] = datum.reduce((acc, dataPoint)=>[
|
|
60796
|
+
dataPoint._y,
|
|
60797
|
+
[
|
|
60798
|
+
...acc[1],
|
|
60799
|
+
{
|
|
60800
|
+
x: dataPoint._x,
|
|
60801
|
+
y: dataPoint._y - acc[0] // Must be offset by previous value
|
|
60802
|
+
}
|
|
60803
|
+
]
|
|
60804
|
+
], [
|
|
60805
|
+
0,
|
|
60806
|
+
[]
|
|
60807
|
+
]);
|
|
60808
|
+
return [
|
|
60809
|
+
...computedData,
|
|
60810
|
+
{
|
|
60811
|
+
y: prev ? 100 - prev : 0
|
|
60812
|
+
}
|
|
60813
|
+
];
|
|
60814
|
+
};
|
|
60815
|
+
// Render dynamic utilization donut cart
|
|
60816
|
+
const computedData = getComputedData();
|
|
60817
|
+
const renderChildren = ()=>(0, _react.Children).toArray(children).map((child, index)=>{
|
|
60818
|
+
if ((0, _react.isValidElement)(child)) {
|
|
60819
|
+
const _a = child.props, { data: childData } = _a, childProps = (0, _tslib.__rest)(_a, [
|
|
60820
|
+
"data"
|
|
60821
|
+
]);
|
|
60822
|
+
const datum = (0, _victoryCore.Data).formatData([
|
|
60823
|
+
childData
|
|
60824
|
+
], childProps, [
|
|
60825
|
+
'x',
|
|
60826
|
+
'y'
|
|
60827
|
+
]); // Format child data independently of this component's props
|
|
60828
|
+
const dynamicTheme = childProps.theme || (0, _chartThemeTypes.getDonutThresholdDynamicTheme)(childProps.themeColor || themeColor);
|
|
60829
|
+
return (0, _react.cloneElement)(child, Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, hasPatterns && {
|
|
60830
|
+
hasPatterns: true
|
|
60831
|
+
}), {
|
|
60832
|
+
constrainToVisibleArea,
|
|
60833
|
+
data: childData,
|
|
60834
|
+
endAngle: 360 * (datum[0]._y ? datum[0]._y / 100 : 0),
|
|
60835
|
+
height
|
|
60836
|
+
}), name && (child.name, true) && {
|
|
60837
|
+
name: `${name}-${child.type.displayName}-${index}`
|
|
60838
|
+
}), {
|
|
60839
|
+
invert,
|
|
60840
|
+
isStatic: false,
|
|
60841
|
+
key: `pf-chart-donut-threshold-child-${index}`,
|
|
60842
|
+
padding: defaultPadding,
|
|
60843
|
+
patternUnshiftIndex: computedData.length,
|
|
60844
|
+
radius: chartRadius - 14,
|
|
60845
|
+
standalone: false,
|
|
60846
|
+
subTitlePosition: childProps.subTitlePosition || subTitlePosition,
|
|
60847
|
+
theme: dynamicTheme,
|
|
60848
|
+
themeColor,
|
|
60849
|
+
width
|
|
60850
|
+
}), childProps));
|
|
60851
|
+
}
|
|
60852
|
+
return child;
|
|
60853
|
+
});
|
|
60854
|
+
// Static threshold donut chart
|
|
60855
|
+
const chart = (0, _jsxRuntime.jsx)((0, _chartDonut.ChartDonut), Object.assign({
|
|
60856
|
+
allowTooltip: allowTooltip,
|
|
60857
|
+
colorScale: colorScale,
|
|
60858
|
+
constrainToVisibleArea: constrainToVisibleArea,
|
|
60859
|
+
data: computedData,
|
|
60860
|
+
height: height,
|
|
60861
|
+
hasPatterns: hasPatterns,
|
|
60862
|
+
labels: labels,
|
|
60863
|
+
name: name,
|
|
60864
|
+
padding: defaultPadding,
|
|
60865
|
+
standalone: false,
|
|
60866
|
+
theme: theme,
|
|
60867
|
+
themeColor: themeColor,
|
|
60868
|
+
width: width
|
|
60869
|
+
}, rest), "pf-chart-donut-threshold");
|
|
60870
|
+
// Clone so users can override container props
|
|
60871
|
+
const container = (0, _react.cloneElement)(containerComponent, Object.assign({
|
|
60872
|
+
desc: ariaDesc,
|
|
60873
|
+
height,
|
|
60874
|
+
title: ariaTitle,
|
|
60875
|
+
width,
|
|
60876
|
+
theme
|
|
60877
|
+
}, containerComponent.props), [
|
|
60878
|
+
chart,
|
|
60879
|
+
renderChildren()
|
|
60880
|
+
]);
|
|
60881
|
+
return standalone ? (0, _jsxRuntime.jsx)((0, _react.Fragment), {
|
|
60882
|
+
children: container
|
|
60883
|
+
}) : (0, _jsxRuntime.jsxs)((0, _react.Fragment), {
|
|
60884
|
+
children: [
|
|
60885
|
+
chart,
|
|
60886
|
+
renderChildren()
|
|
60887
|
+
]
|
|
60888
|
+
});
|
|
60889
|
+
};
|
|
60890
|
+
ChartDonutThreshold.displayName = 'ChartDonutThreshold';
|
|
60891
|
+
// Note: VictoryPie.role must be hoisted
|
|
60892
|
+
(0, _hoistNonReactStaticsDefault.default)(ChartDonutThreshold, (0, _victoryPie.VictoryPie));
|
|
60893
|
+
|
|
60894
|
+
},{"tslib":"lRdW5","react/jsx-runtime":"6AEwr","react":"21dqq","victory-core":"axtoB","victory-pie":"4bLyk","hoist-non-react-statics":"1GfsB","../ChartContainer/ChartContainer":"h1HGX","../ChartDonut/ChartDonut":"lUosY","../ChartTheme/ChartStyles":"3GN8f","../ChartUtils/chart-padding":"bzk1T","../ChartUtils/chart-theme-types":"7uvof","@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}],"lQLiQ":[function(require,module,exports,__globalThis) {
|
|
60521
60895
|
var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
|
|
60522
60896
|
parcelHelpers.defineInteropFlag(exports);
|
|
60523
60897
|
parcelHelpers.export(exports, "ChartDonutUtilization", ()=>ChartDonutUtilization);
|
|
@@ -60652,7 +61026,7 @@ ChartDonutUtilization.displayName = 'ChartDonutUtilization';
|
|
|
60652
61026
|
// Note: VictoryPie.role must be hoisted
|
|
60653
61027
|
(0, _hoistNonReactStaticsDefault.default)(ChartDonutUtilization, (0, _victoryPie.VictoryPie));
|
|
60654
61028
|
|
|
60655
|
-
},{"tslib":"lRdW5","react/jsx-runtime":"6AEwr","react":"21dqq","hoist-non-react-statics":"1GfsB","lodash/orderBy":"eO8Ti","victory-core":"axtoB","victory-pie":"4bLyk","../ChartContainer/ChartContainer":"h1HGX","../ChartDonut/ChartDonut":"lUosY","../ChartTheme/ChartStyles":"3GN8f","../ChartUtils/chart-theme-types":"7uvof","@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}],"
|
|
61029
|
+
},{"tslib":"lRdW5","react/jsx-runtime":"6AEwr","react":"21dqq","hoist-non-react-statics":"1GfsB","lodash/orderBy":"eO8Ti","victory-core":"axtoB","victory-pie":"4bLyk","../ChartContainer/ChartContainer":"h1HGX","../ChartDonut/ChartDonut":"lUosY","../ChartTheme/ChartStyles":"3GN8f","../ChartUtils/chart-theme-types":"7uvof","@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}],"gSeNk":[function(require,module,exports,__globalThis) {
|
|
60656
61030
|
/*
|
|
60657
61031
|
* Copyright 2023 Red Hat
|
|
60658
61032
|
*
|
|
@@ -60669,25 +61043,34 @@ ChartDonutUtilization.displayName = 'ChartDonutUtilization';
|
|
|
60669
61043
|
* limitations under the License.
|
|
60670
61044
|
*/ var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
|
|
60671
61045
|
parcelHelpers.defineInteropFlag(exports);
|
|
60672
|
-
parcelHelpers.export(exports, "
|
|
61046
|
+
parcelHelpers.export(exports, "ChartDonutUtilizationWebComponent", ()=>ChartDonutUtilizationWebComponent);
|
|
60673
61047
|
var _reactWrapperJs = require("../react-wrapper.js");
|
|
60674
61048
|
var _victory = require("@patternfly/react-charts/victory");
|
|
60675
|
-
class
|
|
61049
|
+
class ChartDonutUtilizationWebComponent extends (0, _reactWrapperJs.ReactWrapperElement) {
|
|
61050
|
+
constructor(){
|
|
61051
|
+
super();
|
|
61052
|
+
this._thresholds = undefined;
|
|
61053
|
+
}
|
|
60676
61054
|
getReactComponent() {
|
|
60677
61055
|
const extraProps = {};
|
|
60678
|
-
if (
|
|
60679
|
-
if (
|
|
60680
|
-
if (this.data && typeof this.data !== 'string') extraProps.data = this.data;
|
|
60681
|
-
else if (this.getAttribute('data')) extraProps.data = (0, _reactWrapperJs.parseAttrValue)('data', this.getAttribute('data'));
|
|
61056
|
+
if (this._thresholds && typeof this._thresholds !== 'string') extraProps.thresholds = this._thresholds;
|
|
61057
|
+
else if (this.getAttribute('thresholds')) extraProps.thresholds = (0, _reactWrapperJs.parseAttrValue)('thresholds', this.getAttribute('thresholds'));
|
|
60682
61058
|
return [
|
|
60683
61059
|
(0, _victory.ChartDonutUtilization),
|
|
60684
61060
|
extraProps
|
|
60685
61061
|
];
|
|
60686
61062
|
}
|
|
61063
|
+
get thresholds() {
|
|
61064
|
+
return this._thresholds;
|
|
61065
|
+
}
|
|
61066
|
+
set thresholds(value) {
|
|
61067
|
+
this._thresholds = value;
|
|
61068
|
+
this._notifyChange();
|
|
61069
|
+
}
|
|
60687
61070
|
}
|
|
60688
|
-
customElements.define('
|
|
61071
|
+
customElements.define('pfj-chart-donut-utilization', ChartDonutUtilizationWebComponent);
|
|
60689
61072
|
|
|
60690
|
-
},{"../react-wrapper.js":"jOeNR","@patternfly/react-charts/victory":"l25k4","@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}],"
|
|
61073
|
+
},{"../react-wrapper.js":"jOeNR","@patternfly/react-charts/victory":"l25k4","@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}],"7XBnQ":[function(require,module,exports,__globalThis) {
|
|
60691
61074
|
/*
|
|
60692
61075
|
* Copyright 2023 Red Hat
|
|
60693
61076
|
*
|
|
@@ -60704,41 +61087,106 @@ customElements.define('pf-chart-donut-utilization', PfChartDonutUtilization);
|
|
|
60704
61087
|
* limitations under the License.
|
|
60705
61088
|
*/ var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
|
|
60706
61089
|
parcelHelpers.defineInteropFlag(exports);
|
|
60707
|
-
parcelHelpers.export(exports, "
|
|
61090
|
+
parcelHelpers.export(exports, "ChartDonutThresholdWebComponent", ()=>ChartDonutThresholdWebComponent);
|
|
60708
61091
|
var _reactWrapperJs = require("../react-wrapper.js");
|
|
60709
61092
|
var _victory = require("@patternfly/react-charts/victory");
|
|
60710
|
-
class
|
|
61093
|
+
class ChartDonutThresholdWebComponent extends (0, _reactWrapperJs.ReactWrapperElement) {
|
|
60711
61094
|
getReactComponent() {
|
|
60712
|
-
|
|
60713
|
-
|
|
60714
|
-
|
|
60715
|
-
if (!this.height) extraProps.height = 150;
|
|
60716
|
-
// allow setting various data props via property assignment or data-* attributes in JSON
|
|
60717
|
-
const keys = [
|
|
60718
|
-
'data',
|
|
60719
|
-
'primaryDotMeasureData',
|
|
60720
|
-
'primarySegmentedMeasureData',
|
|
60721
|
-
'comparativeErrorMeasureData',
|
|
60722
|
-
'comparativeWarningMeasureData',
|
|
60723
|
-
'qualitativeRangeData',
|
|
60724
|
-
'legendData'
|
|
61095
|
+
return [
|
|
61096
|
+
(0, _victory.ChartDonutThreshold),
|
|
61097
|
+
{}
|
|
60725
61098
|
];
|
|
60726
|
-
|
|
60727
|
-
|
|
60728
|
-
|
|
60729
|
-
|
|
60730
|
-
|
|
61099
|
+
}
|
|
61100
|
+
}
|
|
61101
|
+
customElements.define('pfj-chart-donut-threshold', ChartDonutThresholdWebComponent);
|
|
61102
|
+
|
|
61103
|
+
},{"../react-wrapper.js":"jOeNR","@patternfly/react-charts/victory":"l25k4","@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}],"3RKOW":[function(require,module,exports,__globalThis) {
|
|
61104
|
+
/*
|
|
61105
|
+
* Copyright 2023 Red Hat
|
|
61106
|
+
*
|
|
61107
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
61108
|
+
* you may not use this file except in compliance with the License.
|
|
61109
|
+
* You may obtain a copy of the License at
|
|
61110
|
+
*
|
|
61111
|
+
* https://www.apache.org/licenses/LICENSE-2.0
|
|
61112
|
+
*
|
|
61113
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
61114
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
61115
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
61116
|
+
* See the License for the specific language governing permissions and
|
|
61117
|
+
* limitations under the License.
|
|
61118
|
+
*/ var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
|
|
61119
|
+
parcelHelpers.defineInteropFlag(exports);
|
|
61120
|
+
parcelHelpers.export(exports, "ChartBulletWebComponent", ()=>ChartBulletWebComponent);
|
|
61121
|
+
var _reactWrapperJs = require("../react-wrapper.js");
|
|
61122
|
+
var _victory = require("@patternfly/react-charts/victory");
|
|
61123
|
+
class ChartBulletWebComponent extends (0, _reactWrapperJs.ReactWrapperElement) {
|
|
61124
|
+
constructor(){
|
|
61125
|
+
super();
|
|
61126
|
+
this._comparativeErrorMeasureData = undefined;
|
|
61127
|
+
this._comparativeWarningMeasureData = undefined;
|
|
61128
|
+
this._primaryDotMeasureData = undefined;
|
|
61129
|
+
this._primarySegmentedMeasureData = undefined;
|
|
61130
|
+
this._qualitativeRangeData = undefined;
|
|
61131
|
+
}
|
|
61132
|
+
getReactComponent() {
|
|
61133
|
+
const extraProps = {};
|
|
61134
|
+
if (this._comparativeErrorMeasureData && typeof this._comparativeErrorMeasureData !== 'string') extraProps.comparativeErrorMeasureData = this._comparativeErrorMeasureData;
|
|
61135
|
+
else if (this.getAttribute('comparative-error-measure-data')) extraProps.thresholds = (0, _reactWrapperJs.parseAttrValue)('comparative-error-measure-data', this.getAttribute('comparative-error-measure-data'));
|
|
61136
|
+
if (this._comparativeWarningMeasureData && typeof this._comparativeWarningMeasureData !== 'string') extraProps.comparativeWarningMeasureData = this._comparativeWarningMeasureData;
|
|
61137
|
+
else if (this.getAttribute('comparative-warning-measure-data')) extraProps.thresholds = (0, _reactWrapperJs.parseAttrValue)('comparative-warning-measure-data', this.getAttribute('comparative-warning-measure-data'));
|
|
61138
|
+
if (this._primaryDotMeasureData && typeof this._primaryDotMeasureData !== 'string') extraProps.primaryDotMeasureData = this._primaryDotMeasureData;
|
|
61139
|
+
else if (this.getAttribute('primary-dot-measure-data')) extraProps.thresholds = (0, _reactWrapperJs.parseAttrValue)('primary-dot-measure-data', this.getAttribute('primary-dot-measure-data'));
|
|
61140
|
+
if (this._primarySegmentedMeasureData && typeof this._primarySegmentedMeasureData !== 'string') extraProps.primarySegmentedMeasureData = this._primarySegmentedMeasureData;
|
|
61141
|
+
else if (this.getAttribute('primary-segmented-measure-data')) extraProps.thresholds = (0, _reactWrapperJs.parseAttrValue)('primary-segmented-measure-data', this.getAttribute('primary-segmented-measure-data'));
|
|
61142
|
+
if (this._qualitativeRangeData && typeof this._qualitativeRangeData !== 'string') extraProps.qualitativeRangeData = this._qualitativeRangeData;
|
|
61143
|
+
else if (this.getAttribute('qualitative-range-data')) extraProps.thresholds = (0, _reactWrapperJs.parseAttrValue)('qualitative-range-data', this.getAttribute('qualitative-range-data'));
|
|
60731
61144
|
return [
|
|
60732
61145
|
(0, _victory.ChartBullet),
|
|
60733
61146
|
extraProps
|
|
60734
61147
|
];
|
|
60735
61148
|
}
|
|
61149
|
+
get comparativeErrorMeasureData() {
|
|
61150
|
+
return this._comparativeErrorMeasureData;
|
|
61151
|
+
}
|
|
61152
|
+
set comparativeErrorMeasureData(value) {
|
|
61153
|
+
this._comparativeErrorMeasureData = value;
|
|
61154
|
+
this._notifyChange();
|
|
61155
|
+
}
|
|
61156
|
+
get comparativeWarningMeasureData() {
|
|
61157
|
+
return this._comparativeWarningMeasureData;
|
|
61158
|
+
}
|
|
61159
|
+
set comparativeWarningMeasureData(value) {
|
|
61160
|
+
this._comparativeWarningMeasureData = value;
|
|
61161
|
+
this._notifyChange();
|
|
61162
|
+
}
|
|
61163
|
+
get primaryDotMeasureData() {
|
|
61164
|
+
return this._primaryDotMeasureData;
|
|
61165
|
+
}
|
|
61166
|
+
set primaryDotMeasureData(value) {
|
|
61167
|
+
this._primaryDotMeasureData = value;
|
|
61168
|
+
this._notifyChange();
|
|
61169
|
+
}
|
|
61170
|
+
get primarySegmentedMeasureData() {
|
|
61171
|
+
return this._primarySegmentedMeasureData;
|
|
61172
|
+
}
|
|
61173
|
+
set primarySegmentedMeasureData(value) {
|
|
61174
|
+
this._primarySegmentedMeasureData = value;
|
|
61175
|
+
this._notifyChange();
|
|
61176
|
+
}
|
|
61177
|
+
get qualitativeRangeData() {
|
|
61178
|
+
return this._qualitativeRangeData;
|
|
61179
|
+
}
|
|
61180
|
+
set qualitativeRangeData(value) {
|
|
61181
|
+
this._qualitativeRangeData = value;
|
|
61182
|
+
this._notifyChange();
|
|
61183
|
+
}
|
|
60736
61184
|
}
|
|
60737
|
-
customElements.define('
|
|
61185
|
+
customElements.define('pfj-chart-bullet', ChartBulletWebComponent);
|
|
60738
61186
|
|
|
60739
61187
|
},{"../react-wrapper.js":"jOeNR","@patternfly/react-charts/victory":"l25k4","@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}]},["1gXV4","cp3Cd"], "cp3Cd", "parcelRequiree075", {}, null, null, "http://localhost:5173")
|
|
60740
61188
|
|
|
60741
61189
|
</script>
|
|
60742
|
-
|
|
60743
|
-
|
|
61190
|
+
|
|
61191
|
+
|
|
60744
61192
|
</body></html>
|