@patternfly-java/charts 0.0.2 → 0.0.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly-java/charts",
   "private": false,
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Web Components wrapper around PatternFly React Charts",
   "homepage": "https://patternfly-java.github.io/",
   "repository": {
@@ -15,7 +15,7 @@
   "keywords": ["java", "gwt", "j2cl", "patternfly", "elemento"],
   "author": "Harald Pehl <harald.pehl@gmail.com>",
   "type": "module",
-  "source": "src/js/index.js",
+  "source": "src/charts.js",
   "scripts": {
     "build": "parcel build src/charts.js --no-cache --no-optimize",
     "dev": "parcel serve demo.html --port 5173 --no-cache",
@@ -27,8 +27,8 @@
   },
   "dependencies": {
     "lit": "^3.3.1",
-    "react": "^19.2.1",
-    "react-dom": "^19.2.1",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "hoist-non-react-statics": "^3.3.2",
     "@patternfly/react-charts": "^8.4.0",
     "@patternfly/react-styles": "^6.4.0",

package/src/charts.js

@@ -13,10 +13,18 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import './components/pf-chart-donut.js';
-import './components/pf-chart-donut-utilization.js';
-import './components/pf-chart-bullet.js';
 
-export { PfChartDonut } from './components/pf-chart-donut.js';
-export { PfChartDonutUtilization } from './components/pf-chart-donut-utilization.js';
-export { PfChartBullet } from './components/pf-chart-bullet.js';
+// Base class for J2CL JsInterop base class
+class ChartElement extends HTMLElement {
+}
+window.ChartElement = ChartElement;
+
+import './components/pfj-chart-donut.js';
+import './components/pfj-chart-donut-utilization.js';
+import './components/pfj-chart-donut-threshold.js';
+import './components/pfj-chart-bullet.js';
+
+export {ChartDonutWebComponent} from './components/pfj-chart-donut.js';
+export {ChartDonutUtilizationWebComponent} from './components/pfj-chart-donut-utilization.js';
+export {ChartDonutThresholdWebComponent} from './components/pfj-chart-donut-threshold.js';
+export {ChartBulletWebComponent} from './components/pfj-chart-bullet.js';

package/src/components/pfj-chart-bullet.js

@@ -0,0 +1,107 @@
+/*
+ *  Copyright 2023 Red Hat
+ *
+ *  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.
+ */
+import {parseAttrValue, ReactWrapperElement} from '../react-wrapper.js';
+import {ChartBullet} from '@patternfly/react-charts/victory';
+
+export class ChartBulletWebComponent extends ReactWrapperElement {
+
+    constructor() {
+        super();
+        this._comparativeErrorMeasureData = undefined;
+        this._comparativeWarningMeasureData = undefined;
+        this._primaryDotMeasureData = undefined;
+        this._primarySegmentedMeasureData = undefined;
+        this._qualitativeRangeData = undefined;
+    }
+
+    getReactComponent() {
+        const extraProps = {};
+        if (this._comparativeErrorMeasureData && typeof this._comparativeErrorMeasureData !== 'string') {
+            extraProps.comparativeErrorMeasureData = this._comparativeErrorMeasureData;
+        } else if (this.getAttribute('comparative-error-measure-data')) {
+            extraProps.thresholds = parseAttrValue('comparative-error-measure-data', this.getAttribute('comparative-error-measure-data'));
+        }
+        if (this._comparativeWarningMeasureData && typeof this._comparativeWarningMeasureData !== 'string') {
+            extraProps.comparativeWarningMeasureData = this._comparativeWarningMeasureData;
+        } else if (this.getAttribute('comparative-warning-measure-data')) {
+            extraProps.thresholds = parseAttrValue('comparative-warning-measure-data', this.getAttribute('comparative-warning-measure-data'));
+        }
+        if (this._primaryDotMeasureData && typeof this._primaryDotMeasureData !== 'string') {
+            extraProps.primaryDotMeasureData = this._primaryDotMeasureData;
+        } else if (this.getAttribute('primary-dot-measure-data')) {
+            extraProps.thresholds = parseAttrValue('primary-dot-measure-data', this.getAttribute('primary-dot-measure-data'));
+        }
+        if (this._primarySegmentedMeasureData && typeof this._primarySegmentedMeasureData !== 'string') {
+            extraProps.primarySegmentedMeasureData = this._primarySegmentedMeasureData;
+        } else if (this.getAttribute('primary-segmented-measure-data')) {
+            extraProps.thresholds = parseAttrValue('primary-segmented-measure-data', this.getAttribute('primary-segmented-measure-data'));
+        }
+        if (this._qualitativeRangeData && typeof this._qualitativeRangeData !== 'string') {
+            extraProps.qualitativeRangeData = this._qualitativeRangeData;
+        } else if (this.getAttribute('qualitative-range-data')) {
+            extraProps.thresholds = parseAttrValue('qualitative-range-data', this.getAttribute('qualitative-range-data'));
+        }
+
+        return [ChartBullet, extraProps];
+    }
+
+    get comparativeErrorMeasureData() {
+        return this._comparativeErrorMeasureData;
+    }
+
+    set comparativeErrorMeasureData(value) {
+        this._comparativeErrorMeasureData = value;
+        this._notifyChange();
+    }
+
+    get comparativeWarningMeasureData() {
+        return this._comparativeWarningMeasureData;
+    }
+
+    set comparativeWarningMeasureData(value) {
+        this._comparativeWarningMeasureData = value;
+        this._notifyChange();
+    }
+
+    get primaryDotMeasureData() {
+        return this._primaryDotMeasureData;
+    }
+
+    set primaryDotMeasureData(value) {
+        this._primaryDotMeasureData = value;
+        this._notifyChange();
+    }
+
+    get primarySegmentedMeasureData() {
+        return this._primarySegmentedMeasureData;
+    }
+
+    set primarySegmentedMeasureData(value) {
+        this._primarySegmentedMeasureData = value;
+        this._notifyChange();
+    }
+
+    get qualitativeRangeData() {
+        return this._qualitativeRangeData;
+    }
+
+    set qualitativeRangeData(value) {
+        this._qualitativeRangeData = value;
+        this._notifyChange();
+    }
+}
+
+customElements.define('pfj-chart-bullet', ChartBulletWebComponent);

package/src/components/pfj-chart-donut-threshold.js

@@ -0,0 +1,26 @@
+/*
+ *  Copyright 2023 Red Hat
+ *
+ *  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.
+ */
+import {ReactWrapperElement} from '../react-wrapper.js';
+import {ChartDonutThreshold} from '@patternfly/react-charts/victory';
+
+export class ChartDonutThresholdWebComponent extends ReactWrapperElement {
+
+    getReactComponent() {
+        return [ChartDonutThreshold, {}];
+    }
+}
+
+customElements.define('pfj-chart-donut-threshold', ChartDonutThresholdWebComponent);

package/src/components/pfj-chart-donut-utilization.js

@@ -0,0 +1,46 @@
+/*
+ *  Copyright 2023 Red Hat
+ *
+ *  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.
+ */
+import {parseAttrValue, ReactWrapperElement} from '../react-wrapper.js';
+import {ChartDonutUtilization} from '@patternfly/react-charts/victory';
+
+export class ChartDonutUtilizationWebComponent extends ReactWrapperElement {
+
+    constructor() {
+        super();
+        this._thresholds = undefined;
+    }
+
+    getReactComponent() {
+        const extraProps = {};
+        if (this._thresholds && typeof this._thresholds !== 'string') {
+            extraProps.thresholds = this._thresholds;
+        } else if (this.getAttribute('thresholds')) {
+            extraProps.thresholds = parseAttrValue('thresholds', this.getAttribute('thresholds'));
+        }
+        return [ChartDonutUtilization, extraProps];
+    }
+
+    get thresholds() {
+        return this._thresholds;
+    }
+
+    set thresholds(value) {
+        this._thresholds = value;
+        this._notifyChange();
+    }
+}
+
+customElements.define('pfj-chart-donut-utilization', ChartDonutUtilizationWebComponent);

package/src/components/pfj-chart-donut.js

@@ -0,0 +1,26 @@
+/*
+ *  Copyright 2023 Red Hat
+ *
+ *  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.
+ */
+import {ReactWrapperElement} from '../react-wrapper.js';
+import {ChartDonut} from '@patternfly/react-charts/victory';
+
+export class ChartDonutWebComponent extends ReactWrapperElement {
+
+    getReactComponent() {
+        return [ChartDonut, {}];
+    }
+}
+
+customElements.define('pfj-chart-donut', ChartDonutWebComponent);