KOGITO-7719: Dashbuilder: Bring Victory Charts as supported external …

…component (apache#1154) * KOGITO-7719: Dashbuilder: Bring Victory Charts as supported external component * updating pnpm-lock * fixing missing package.json * lock update * Excluding not used project * Update package.lock * update graph.dot * updating lock and graph.dot * Updating Victory Charts parameters
svg-GHC-2 · Aug 15, 2022 · 5ff96e4 · 5ff96e4
1 parent 9370135
commit 5ff96e4
Show file tree

Hide file tree

Showing 16 changed files with 300 additions and 93 deletions.
diff --git a/packages/dashbuilder-component-assembler/package.json b/packages/dashbuilder-component-assembler/package.json
@@ -25,7 +25,8 @@
     "@kie-tools/dashbuilder-component-svg-heatmap": "workspace:*",
     "@kie-tools/dashbuilder-component-table": "workspace:*",
     "@kie-tools/dashbuilder-component-timeseries": "workspace:*",
-    "@kie-tools/dashbuilder-component-uniforms": "workspace:*"
+    "@kie-tools/dashbuilder-component-uniforms": "workspace:*",
+    "@kie-tools/dashbuilder-component-victory-charts": "workspace:*"
   },
   "devDependencies": {
     "@kie-tools-core/webpack-base": "workspace:*",

diff --git a/packages/dashbuilder-component-assembler/webpack.config.js b/packages/dashbuilder-component-assembler/webpack.config.js
@@ -20,7 +20,7 @@ const { merge } = require("webpack-merge");
 const common = require("@kie-tools-core/webpack-base/webpack.common.config");
 
 module.exports = async (env) => {
-  const components = ["uniforms", "table", "echarts", "svg-heatmap", "timeseries"];
+  const components = ["uniforms", "table", "echarts", "svg-heatmap", "timeseries", "victory-charts"];
   const copyResources = [];
 
   components.forEach((component) => {

diff --git a/packages/dashbuilder-component-victory-charts/dev-webapp/manifest.dev.json b/packages/dashbuilder-component-victory-charts/dev-webapp/manifest.dev.json
@@ -2,7 +2,7 @@
   "init": [
     {
       "key": "chartType",
-      "value": "bar"
+      "value": "area"
     },
     {
       "key": "themeColor",
@@ -28,7 +28,6 @@
       "key": "legendPosition",
       "value": "bottom"
     },
-
     {
       "key": "title",
       "value": "Countries evolution"

diff --git a/packages/dashbuilder-component-victory-charts/package.json b/packages/dashbuilder-component-victory-charts/package.json
@@ -15,10 +15,9 @@
   "types": "./dist/index.d.ts",
   "main": "dist/index.js",
   "scripts": {
-    "build:dev": "echo \"skipped\"",
-    "build:dev-skipped": "rimraf dist && webpack --env dev",
-    "build:prod": "echo \"skipped\"",
-    "build:prod-skipped": "pnpm lint && pnpm test && rimraf dist && webpack",
+    "build:dev": "rimraf dist && pnpm copy:css && webpack --env dev",
+    "build:prod": "pnpm lint && pnpm test && rimraf dist && pnpm copy:css && webpack",
+    "copy:css": "copyfiles -u 1 \"src/**/*.{sass,scss,css}\" dist/",
     "lint": "pnpm run-script-if --bool \"$(build-env global.build.lint)\" --then \"pnpm eslint ./src --ext .ts,.tsx\"",
     "start": "webpack serve -c ./dev-webapp/webpack.config.js --host 0.0.0.0 --env dev",
     "test": "pnpm run-script-if --bool \"$(build-env global.build.test)\" --then \"jest --silent --verbose --passWithNoTests\""
@@ -31,7 +30,8 @@
     "@patternfly/react-table": "^4.27.15",
     "numeral": "^2.0.6",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "victory-zoom-container": "^35.11.4"
   },
   "devDependencies": {
     "@kie-tools-core/run-script-if": "workspace:*",

diff --git a/packages/dashbuilder-component-victory-charts/src/VictoryChart.tsx b/packages/dashbuilder-component-victory-charts/src/VictoryChart.tsx
@@ -21,7 +21,14 @@ import { LineChart } from "./charts/LineChart";
 import { DonutChart } from "./charts/DonutChart";
 import { PieChart } from "./charts/PieChart";
 import { StackChart } from "./charts/StackChart";
-import { ThemeColorType, ChartType, LegendPosition, ThemeVariantType, ChartProps } from "./charts/BaseChart";
+import {
+  ThemeColorType,
+  ChartType,
+  LegendPosition,
+  ThemeVariantType,
+  ChartProps,
+  LegendOrientation,
+} from "./charts/BaseChart";
 import { validateDataSetForChart } from "./charts/PropsValidation";
 import { UtilizationDonut } from "./charts/UtilizationDonut";
 import { DataSet } from "@kie-tools/dashbuilder-component-api";
@@ -36,6 +43,7 @@ export interface VictoryChartProps {
   themeColor: ThemeColorType;
   themeVariant: ThemeVariantType;
   legendPosition?: LegendPosition;
+  legendOrientation?: LegendOrientation;
 
   animate?: boolean;
   animationDuration?: number;
@@ -90,6 +98,7 @@ export const VictoryChart = (props: VictoryChartProps) => {
         themeVariant: props.themeVariant,
         dataSet: props.dataSet || EMPTY_DATASET,
         legendPosition: props.legendPosition || "bottom",
+        legendOrientation: props.legendOrientation,
         animation: {
           easing: props.animationEasing,
           duration: props.animationDuration,
@@ -111,6 +120,7 @@ export const VictoryChart = (props: VictoryChartProps) => {
         donutTitle: props.donutTitle,
         donutSubTitle: props.donutSubTitle,
         horizontalBars: props.horizontalBars,
+        zoom: props.zoom,
       };
       switch (type) {
         case "area":

diff --git a/packages/dashbuilder-component-victory-charts/src/VictoryChartComponent.tsx b/packages/dashbuilder-component-victory-charts/src/VictoryChartComponent.tsx
@@ -42,6 +42,8 @@ export function VictoryChartComponent(props: Props) {
       setVictoryChartProps((props: VictoryChartProps) => {
         return {
           ...props,
+          width: +(params.get("width") || 600),
+          height: +(params.get("height") || 400),
           type: (params.get("chartType") as ChartType) || "bar",
           themeColor: (params.get("themeColor") as ThemeColorType) || "multi",
           themeVariant: (params.get("themeVariant") as ThemeVariantType) || "light",
@@ -53,19 +55,20 @@ export function VictoryChartComponent(props: Props) {
           description: params.get("description"),
 
           legendPosition: params.get("legendPosition") || "bottom",
+          legendOrientation: params.get("legendOrientation") || "horizontal",
 
-          paddingBottom: +params.get("paddingBottom") || 50,
-          paddingRight: +params.get("paddingRight") || 0,
-          paddingLeft: +params.get("paddingLeft") || 90,
-          paddingTop: +params.get("paddingTop") || 0,
+          paddingBottom: +(params.get("paddingBottom") || 50),
+          paddingRight: +(params.get("paddingRight") || 0),
+          paddingLeft: +(params.get("paddingLeft") || 90),
+          paddingTop: +(params.get("paddingTop") || 0),
 
           zoom: params.get("zoom") === "true",
           gridX: params.get("gridx") === "true",
           gridY: params.get("gridy") === "true",
           fixLabelsOverlap: params.get("fixLabelsOverlap") === "true",
 
           animate: params.get("animate") === "true",
-          animationDuration: +params.get("animationDuration") || 200,
+          animationDuration: +(params.get("animationDuration") || 200),
           animationEasing: params.get("animationEasing") || "linear",
 
           donutTitle: (params.get("donutTitle") as string) || "",

diff --git a/packages/dashbuilder-component-victory-charts/src/charts/AreaChart.tsx b/packages/dashbuilder-component-victory-charts/src/charts/AreaChart.tsx
@@ -16,7 +16,6 @@
 import * as React from "react";
 
 import { ChartArea, ChartGroup } from "@patternfly/react-charts";
-import "@patternfly/patternfly/patternfly-charts.css"; // Required for mix-blend-mode CSS property
 import { XYChart } from "./XYChart";
 
 export class AreaChart extends XYChart {

diff --git a/packages/dashbuilder-component-victory-charts/src/charts/BaseChart.tsx b/packages/dashbuilder-component-victory-charts/src/charts/BaseChart.tsx
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 import * as React from "react";
-import "@patternfly/patternfly/patternfly-charts.css";
 import { ChartVoronoiContainer } from "@patternfly/react-charts";
+import { VictoryZoomContainer } from "victory-zoom-container";
 import { DataSet } from "@kie-tools/dashbuilder-component-api";
 
 export type ThemeColorType =
@@ -78,6 +78,7 @@ export interface ChartProps {
   themeVariant: ThemeVariantType;
   dataSet: DataSet;
   legendPosition: LegendPosition;
+  legendOrientation?: LegendOrientation;
   animation: AnimationProp;
   ariaTitle: string;
   ariaDescription: string;
@@ -89,6 +90,8 @@ export interface ChartProps {
 
   horizontalBars?: boolean;
   fixLabelsOverlap?: boolean;
+
+  zoom?: boolean;
 }
 
 export abstract class BaseChart extends React.Component<ChartProps, any> {
@@ -104,13 +107,18 @@ export abstract class BaseChart extends React.Component<ChartProps, any> {
   constructor(props: ChartProps) {
     super(props);
     this.buildLegendData();
-    this.legendOrientation = this.props.legendPosition === "right" ? "vertical" : "horizontal";
+    this.legendOrientation =
+      this.props.legendOrientation || (this.props.legendPosition === "right" ? "vertical" : "horizontal");
     if (props.animation.enabled) {
       this.animationProp = {
         duration: props.animation.duration,
         easing: props.animation.easing,
       };
     }
+
+    if (props.zoom) {
+      this.containerComponent = <VictoryZoomContainer />;
+    }
   }
 
   buildLegendData() {

diff --git a/packages/dashbuilder-component-victory-charts/src/charts/PieChart.tsx b/packages/dashbuilder-component-victory-charts/src/charts/PieChart.tsx
@@ -16,7 +16,6 @@
 import * as React from "react";
 
 import { ChartPie } from "@patternfly/react-charts";
-import "@patternfly/patternfly/patternfly-charts.css"; // Required for mix-blend-mode CSS property
 import { PieBaseChart } from "./PieBaseChart";
 
 export class PieChart extends PieBaseChart {

diff --git a/packages/dashbuilder-component-victory-charts/src/charts/StackChart.tsx b/packages/dashbuilder-component-victory-charts/src/charts/StackChart.tsx
@@ -16,7 +16,6 @@
 import * as React from "react";
 
 import { ChartBar, ChartStack, ChartTooltip } from "@patternfly/react-charts";
-import "@patternfly/patternfly/patternfly-charts.css"; // Required for mix-blend-mode CSS property
 import { XYChart } from "./XYChart";
 
 export class StackChart extends XYChart {

diff --git a/packages/dashbuilder-component-victory-charts/src/index.tsx b/packages/dashbuilder-component-victory-charts/src/index.tsx
@@ -16,7 +16,6 @@
 
 import * as React from "react";
 import "@patternfly/react-core/dist/styles/base.css";
-import "@patternfly/patternfly/patternfly-charts.css";
 import * as ReactDOM from "react-dom";
 import { ComponentApi } from "@kie-tools/dashbuilder-component-api";
 import { VictoryChartComponent } from "./VictoryChartComponent";

diff --git a/packages/dashbuilder-component-victory-charts/static/index.html b/packages/dashbuilder-component-victory-charts/static/index.html
@@ -22,7 +22,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   </head>
-  <body style="overflow: auto; margin: 0px; border: 0px">
+  <body style="overflow: hidden; margin: 0px; border: 0px">
     <div id="app" style="height: 100vh"></div>
   </body>
 </html>
diff --git a/packages/dashbuilder-component-victory-charts/webpack.config.js b/packages/dashbuilder-component-victory-charts/webpack.config.js
@@ -15,41 +15,30 @@
  */
 
 const path = require("path");
-const CopyPlugin = require("copy-webpack-plugin");
 const patternflyBase = require("@kie-tools-core/patternfly-base");
 const { merge } = require("webpack-merge");
 const common = require("@kie-tools-core/webpack-base/webpack.common.config");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 
 module.exports = async (env) => {
-  const devResources = [];
-  const isDev = env.WEBPACK_SERVE;
-
-  if (isDev) {
-    devResources.push({ from: "./static/manifest.dev.json", to: "./manifest.dev.json" });
-  }
   return merge(common(env), {
     entry: {
-      index: isDev ? "./src/index-dev.tsx" : "./src/index.tsx",
+      index: "./src/index.tsx",
     },
     plugins: [
       new HtmlWebpackPlugin({
         template: "./static/index.html",
         minify: false,
       }),
-      new CopyPlugin({
-        patterns: [{ from: "./static/manifest.json", to: "manifest.json" }, ...devResources],
-      }),
     ],
 
     module: {
       rules: [...patternflyBase.webpackModuleRules],
     },
     devServer: {
-      https: true,
       historyApiFallback: false,
       static: [{ directory: path.join(__dirname, "./dist") }, { directory: path.join(__dirname, "./static") }],
-      compress: true,
+      compress: false,
       port: 9001,
     },
   });