Add binary chart

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

@@ -11,6 +11,7 @@ import { getApexChartBarOptions } from './ApexChartBarOptions';
 import { getApexChartAreaOptions } from './ApexChartAreaOptions';
 import { getApexChartLineOptions } from './ApexChartLineOptions';
 import { getApexChartStepLineOptions } from './ApexChartStepLineOptions';
+import { getApexChartTimelineOptions } from './ApexChartTimelineOptions';
 import mergeArray from '../../../utils/mergeArray';
 
 dayjs.extend(localizedFormat);
@@ -51,6 +52,66 @@ class ApexChartComponent extends Component {
       }
     };
   }
+  addDateFormatterRangeBar(options) {
+    let formatter_custom;
+    if (this.props.interval <= 24 * 60) {
+      formatter_custom = opts => {
+        const startDate = dayjs(opts.y1)
+          .locale(this.props.user.language)
+          .format('LLL:ss');
+        const endDate = dayjs(opts.y2)
+          .locale(this.props.user.language)
+          .format('LLL:ss');
+        const w = opts.ctx.w;
+        let seriesName = w.config.series[opts.seriesIndex].name ? w.config.series[opts.seriesIndex].name : '';
+        let ylabel = w.globals.seriesX[opts.seriesIndex][opts.dataPointIndex];
+        const color = w.globals.colors[opts.seriesIndex];
+
+        return `<div class="apexcharts-tooltip-rangebar">
+            <div> <span class="series-name" style="color: ${color}">
+              ${seriesName ? seriesName : ''}
+            </span></div>
+            <div> <span class="category">
+              ${ylabel}: 
+            </span> <span class="value start-value"></br>&nbsp;&nbsp;
+              Début le: ${startDate} 
+            </span> <span class="value end-value"></br>&nbsp;&nbsp;
+              Fin le: ${endDate} 
+            </span></div>
+          </div>`;
+      };
+    } else {
+      formatter_custom = opts => {
+        const startDate = dayjs(opts.y1)
+          .locale(this.props.user.language)
+          .format('LL');
+        const endDate = dayjs(opts.y2)
+          .locale(this.props.user.language)
+          .format('LL');
+
+        const w = opts.ctx.w;
+        const seriesName = w.config.series[opts.seriesIndex].name ? w.config.series[opts.seriesIndex].name : '';
+        const ylabel = w.globals.seriesX[opts.seriesIndex][opts.dataPointIndex];
+        const color = w.globals.colors[opts.seriesIndex];
+
+        return `<div class="apexcharts-tooltip-rangebar">
+            <div> <span class="series-name" style="color: ${color}">
+              ${seriesName ? seriesName : ''}
+            </span></div>
+            <div> <span class="category">
+              ${ylabel}: 
+            </span> <span class="value start-value"></br>&nbsp;&nbsp;
+              Début le: ${startDate} 
+            </span> <span class="value end-value"></br>&nbsp;&nbsp;
+              Fin le: ${endDate} 
+            </span></div>
+          </div>`;
+      };
+    }
+    options.tooltip.custom = function(opts) {
+      return formatter_custom(opts);
+    };
+  }
   getBarChartOptions = () => {
     const options = getApexChartBarOptions({
       displayAxes: this.props.display_axes,
@@ -123,9 +184,31 @@ class ApexChartComponent extends Component {
     this.addDateFormatter(options);
     return options;
   };
+  getTimelineChartOptions = () => {
+    let height;
+    if (this.props.size === 'small' && !this.props.display_axes) {
+      height = 40;
+    } else if (this.props.size === 'big' && !this.props.display_axes) {
+      height = 80;
+    } else {
+      height = 200 + this.props.heightAdditional;
+    }
+    const options = getApexChartTimelineOptions({
+      height,
+      colors: mergeArray(this.props.colors, DEFAULT_COLORS),
+      displayAxes: this.props.display_axes,
+      series: this.props.series,
+      locales: [fr, en, de],
+      defaultLocale: this.props.user.language
+    });
+    this.addDateFormatterRangeBar(options);
+    return options;
+  };
   displayChart = () => {
     let options;
-    if (this.props.chart_type === 'area') {
+    if (this.props.chart_type === 'timeline') {
+      options = this.getTimelineChartOptions();
+    } else if (this.props.chart_type === 'area') {
       options = this.getAreaChartOptions();
     } else if (this.props.chart_type === 'line') {
       options = this.getLineChartOptions();
@@ -152,7 +235,15 @@ class ApexChartComponent extends Component {
     const displayAxesDifferent = nextProps.display_axes !== this.props.display_axes;
     const intervalDifferent = nextProps.interval !== this.props.interval;
     const sizeDifferent = nextProps.size !== this.props.size;
-    if (seriesDifferent || chartTypeDifferent || displayAxesDifferent || intervalDifferent || sizeDifferent) {
+    const heightAdditionalDifferent = nextProps.heightAdditional !== this.props.heightAdditional;
+    if (
+      seriesDifferent ||
+      chartTypeDifferent ||
+      displayAxesDifferent ||
+      intervalDifferent ||
+      sizeDifferent ||
+      heightAdditionalDifferent
+    ) {
       this.displayChart();
     }
   }

front/src/components/boxs/chart/ApexChartTimelineOptions.js

@@ -0,0 +1,134 @@
+const addYAxisStyles = () => {
+  const yAxisLabel = document.querySelectorAll('.apexcharts-yaxis-label');
+  let fontSize = '12px';
+  yAxisLabel.forEach(text => {
+    const title = text.querySelector('title');
+    if (title) {
+      const textContent = title.textContent;
+      let lines = textContent.split('\n');
+      text.innerHTML = '';
+      lines.forEach((line, index) => {
+        const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
+        if (line.length > 12) {
+          line = `${line.substring(0, 12)}...`;
+        }
+        tspan.setAttribute('x', text.getAttribute('x'));
+        tspan.setAttribute('dy', index === 0 ? '-0.4em' : '1.2em');
+        tspan.setAttribute('font-size', fontSize);
+        tspan.textContent = line;
+        text.appendChild(tspan);
+      });
+      const newTitle = document.createElementNS('http://www.w3.org/2000/svg', 'title');
+      newTitle.textContent = textContent;
+      text.appendChild(newTitle);
+    }
+  });
+};
+
+const getApexChartTimelineOptions = ({ displayAxes, height, series, colors, locales, defaultLocale }) => {
+  const options = {
+    series,
+    chart: {
+      locales,
+      defaultLocale,
+      type: 'rangeBar',
+      fontFamily: 'inherit',
+      height,
+      parentHeightOffset: 0,
+      sparkline: {
+        enabled: !displayAxes
+      },
+      toolbar: {
+        show: false
+      },
+      animations: {
+        enabled: true
+      },
+      events: {
+        mounted: addYAxisStyles,
+        updated: addYAxisStyles
+      }
+    },
+    grid: {
+      strokeDashArray: 4,
+      padding: {
+        left: 1
+      }
+    },
+    plotOptions: {
+      bar: {
+        horizontal: true,
+        barHeight: '50%',
+        rangeBarGroupRows: true
+      }
+    },
+    colors,
+    fill: {
+      type: 'solid'
+    },
+    xaxis: {
+      labels: {
+        padding: 0,
+        datetimeUTC: false
+      },
+      axisBorder: {
+        show: false
+      },
+      type: 'datetime',
+      min: Math.min(...series.flatMap(s => s.data.map(d => d.y[0]))),
+      max: Math.max(...series.flatMap(s => s.data.map(d => d.y[1])))
+    },
+    yaxis: {
+      showAlways: false,
+      dataLabels: {
+        enabled: false,
+        textAnchor: 'start'
+      },
+      axisBorder: {
+        show: true
+      },
+      labels: {
+        align: 'left',
+        maxWidth: 80,
+        margin: 0,
+        formatter: function(value) {
+          if (value.length > 12) {
+            const deviceName = value.split(' (')[0];
+            const featureName = value.split(' (')[1].replace(')', '');
+            const newValue = `${deviceName}\n(${featureName})`;
+            return newValue;
+          }
+          return value;
+        },
+        offsetX: -20,
+        offsetY: 0
+      }
+    },
+    legend: {
+      show: displayAxes,
+      position: 'bottom',
+      itemMargin: {
+        horizontal: 20
+      }
+    },
+    tooltip: {
+      // theme: 'dark',
+      marker: {
+        show: true
+      },
+      onDatasetHover: {
+        highlightDataSeries: true
+      },
+      items: {
+        display: 'flex'
+      },
+      fillSeriesColor: false,
+      fixed: {
+        enabled: false
+      }
+    }
+  };
+  return options;
+};
+
+export { getApexChartTimelineOptions };