Add expand charts dashboard

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" />
 

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

front/src/components/boxs/chart/ApexChartComponent.jsx

@@ -98,12 +98,19 @@ class ApexChartComponent extends Component {
         return createTooltipContent(opts, startDate, endDate);
       };
     }
-    options.tooltip.custom = function(opts) {
+    options.tooltip.custom = function (opts) {
       return formatter_custom(opts);
     };
   }
   getBarChartOptions = () => {
+    let height;
+    if (this.props.size === 'big' && !this.props.display_axes) {
+      height = 100 + this.props.additionalHeight;
+    } else {
+      height = 200 + this.props.additionalHeight;
+    }
     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.additionalHeight;
     } else if (this.props.size === 'big' && !this.props.display_axes) {
-      height = 80;
+      height = 80 + this.props.additionalHeight;
     } else {
-      height = 200;
+      height = 200 + this.props.additionalHeight;
     }
     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.additionalHeight;
     } else if (this.props.size === 'big' && !this.props.display_axes) {
-      height = 80;
+      height = 80 + this.props.additionalHeight;
     } else {
-      height = 200;
+      height = 200 + this.props.additionalHeight;
     }
     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.additionalHeight;
     } else if (this.props.size === 'big' && !this.props.display_axes) {
-      height = 80;
+      height = 80 + this.props.additionalHeight;
     } else {
-      height = 200;
+      height = 200 + this.props.additionalHeight;
     }
     const options = getApexChartStepLineOptions({
       height,
@@ -214,7 +221,6 @@ class ApexChartComponent extends Component {
       this.chart.updateOptions(options);
     } else {
       this.chart = new ApexCharts(this.chartRef.current, options);
-
       this.chart.render();
     }
   };