Merge branch 'add-zoom-charts-dashboard' into add-binary-chart

GladysAssistant · Sep 4, 2024 · e430ee7 · e430ee7
2 parents ead8043 + f073b5a
commit e430ee7
Show file tree

Hide file tree

Showing 15 changed files with 1,002 additions and 205 deletions.
diff --git a/front/src/components/app.jsx b/front/src/components/app.jsx
@@ -43,6 +43,7 @@ import SignupSuccess from '../routes/signup/5-success';
 import Dashboard from '../routes/dashboard';
 import NewDashboard from '../routes/dashboard/new-dashboard';
 import EditDashboard from '../routes/dashboard/edit-dashboard';
+import ExpandedDashboard from '../routes/dashboard/expanded-dashboard';
 
 import IntegrationPage from '../routes/integration';
 import ChatPage from '../routes/chat';
@@ -230,6 +231,7 @@ const AppRouter = connect(
         <Dashboard path="/dashboard" />
         <Dashboard path="/dashboard/:dashboardSelector" />
         <EditDashboard path="/dashboard/:dashboardSelector/edit" />
+        <ExpandedDashboard path="/dashboard/:dashboardSelector/expanded/:x/:y" />
         <NewDashboard path="/dashboard/create/new" />
         <IntegrationPage path="/dashboard/integration" />
 
@@ -367,7 +369,7 @@ class MainApp extends Component {
     this.props.checkSession();
   }
 
-  render({ user }, {}) {
+  render({ user }, { }) {
     const translationDefinition = get(translations, user.language, { default: translations.en });
     return (
       <IntlProvider definition={translationDefinition}>

diff --git a/front/src/components/boxs/chart/ApexChartBarOptions.js b/front/src/components/boxs/chart/ApexChartBarOptions.js
@@ -1,11 +1,11 @@
-const getApexChartBarOptions = ({ displayAxes, series, colors, locales, defaultLocale }) => {
+const getApexChartBarOptions = ({ displayAxes, height, series, colors, locales, defaultLocale }) => {
   const options = {
     chart: {
       locales,
       defaultLocale,
       type: 'bar',
       fontFamily: 'inherit',
-      height: displayAxes ? 200 : 100,
+      height,
       parentHeightOffset: 0,
       toolbar: {
         show: false

diff --git a/front/src/components/boxs/chart/ApexChartComponent.jsx b/front/src/components/boxs/chart/ApexChartComponent.jsx
@@ -103,7 +103,14 @@ class ApexChartComponent extends Component {
     };
   }
   getBarChartOptions = () => {
+    let height;
+    if (this.props.size === 'big' && !this.props.display_axes) {
+      height = 100 + this.props.heightAdditional;
+    } else {
+      height = 200 + this.props.heightAdditional;
+    }
     const options = getApexChartBarOptions({
+      height,
       displayAxes: this.props.display_axes,
       series: this.props.series,
       colors: mergeArray(this.props.colors, DEFAULT_COLORS),
@@ -116,11 +123,11 @@ class ApexChartComponent extends Component {
   getAreaChartOptions = () => {
     let height;
     if (this.props.size === 'small' && !this.props.display_axes) {
-      height = 40;
+      height = 40 + this.props.heightAdditional;
     } else if (this.props.size === 'big' && !this.props.display_axes) {
-      height = 80;
+      height = 80 + this.props.heightAdditional;
     } else {
-      height = 200;
+      height = 200 + this.props.heightAdditional;
     }
     const options = getApexChartAreaOptions({
       height,
@@ -137,11 +144,11 @@ class ApexChartComponent extends Component {
   getLineChartOptions = () => {
     let height;
     if (this.props.size === 'small' && !this.props.display_axes) {
-      height = 40;
+      height = 40 + this.props.heightAdditional;
     } else if (this.props.size === 'big' && !this.props.display_axes) {
-      height = 80;
+      height = 80 + this.props.heightAdditional;
     } else {
-      height = 200;
+      height = 200 + this.props.heightAdditional;
     }
     const options = getApexChartLineOptions({
       height,
@@ -157,11 +164,11 @@ class ApexChartComponent extends Component {
   getStepLineChartOptions = () => {
     let height;
     if (this.props.size === 'small' && !this.props.display_axes) {
-      height = 40;
+      height = 40 + this.props.heightAdditional;
     } else if (this.props.size === 'big' && !this.props.display_axes) {
-      height = 80;
+      height = 80 + this.props.heightAdditional;
     } else {
-      height = 200;
+      height = 200 + this.props.heightAdditional;
     }
     const options = getApexChartStepLineOptions({
       height,