fix(lib): displays axes for time series charts (#45)

fix(lib): display axes for time series and dataset charts Co-authored-by: Julien Déramond <[email protected]>
Orange-OpenSource · Dec 18, 2023 · 768c42c · 768c42c
1 parent 6403b39
commit 768c42c
Show file tree

Hide file tree

Showing 8 changed files with 2,333 additions and 21 deletions.
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -34,4 +34,4 @@ Please check that the following tests projects are still working:
 - [ ] `test/vue`
 - [ ] `test/examples/bar-line-chart`
 - [ ] `test/examples/single-line-chart`
-
+- [ ] `test/examples/timeseries-chart`
diff --git a/docs/examples/index.js b/docs/examples/index.js
@@ -831,6 +831,81 @@ window.generateMultipleLineChart = async (id) => {
   );
 };
 
+window.generateTimeSeriesLineChart = async (id) => {
+  // Specify the configuration items and data for the chart
+  const NB_POINTS = 1000;
+  const generateDate = () => {
+    const date = [new Date(1993, 9, 3)];
+    let base = date[0].getTime();
+    const oneDay = 24 * 3600 * 1000;
+    for (var i = 1; i < NB_POINTS; i++) {
+      const now = new Date((base += oneDay * 2 * Math.random()));
+      date.push(now);
+    }
+    return date;
+  };
+  const dates = generateDate();
+  const generateData = () => {
+    const dataDates = dates;
+    const data = [{ time: dataDates[0], value: Math.random() * 300 }];
+    let lastValue = data[0].value;
+    for (var i = 1; i < NB_POINTS; i++) {
+      data.push({
+        time: dataDates[i],
+        value:
+          Math.random() < 0.3
+            ? undefined
+            : Math.round((Math.random() - 0.5) * 20 + lastValue),
+      });
+      lastValue =
+        undefined !== data[data.length - 1].value
+          ? data[data.length - 1].value
+          : lastValue;
+    }
+    return data;
+  };
+
+  var option = {
+    xAxis: {
+      type: 'time',
+      boundaryGap: false,
+    },
+    yAxis: {},
+    series: [
+      {
+        name: 'Serie 1',
+        data: generateData()
+          .filter((oneData) => undefined !== oneData.value)
+          .map((oneData) => [oneData.time, oneData.value]),
+        sampling: 'average',
+        type: 'line',
+      },
+      {
+        name: 'Serie 2',
+        data: generateData()
+          .filter((oneData) => undefined !== oneData.value)
+          .map((oneData) => [oneData.time, oneData.value]),
+        type: 'line',
+      },
+      {
+        name: 'Serie 3',
+        data: generateData()
+          .filter((oneData) => undefined !== oneData.value)
+          .map((oneData) => [oneData.time, oneData.value]),
+        type: 'line',
+      },
+    ],
+  };
+  displayChart(
+    id,
+    option,
+    undefined,
+    ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS,
+    undefined,
+    ODSCharts.ODSChartsLineStyle.BROKEN
+  );
+};
+
 window.generateBarChart = async (
   id,
   horizontal = false,

diff --git a/docs/examples/multiple-line-chart.html b/docs/examples/multiple-line-chart.html
@@ -46,7 +46,7 @@ <h1 class="title">Multiple Line Charts example</h1>
         <div class="card-body">
           <h5 class="card-title">Multiple line chart example</h5>
           <p class="card-text">
-            Compare the relationship between several values over time.
+            Compare the relationship between several values over categories.
           </p>
           <div id="multipleLineChart"></div>
           <script>
@@ -57,5 +57,21 @@ <h5 class="card-title">Multiple line chart example</h5>
         </div>
       </div>
     </div>
+    <div class="container d-flex flex-nowrap pt-3">
+      <div class="card w-100">
+        <div class="card-body">
+          <h5 class="card-title">Time series line chart example</h5>
+          <p class="card-text">
+            Compare the relationship between several values over time.
+          </p>
+          <div id="timeSeriesChart"></div>
+          <script>
+            window.addEventListener('DOMContentLoaded', () => {
+              window.generateTimeSeriesLineChart('timeSeriesChart');
+            });
+          </script>
+        </div>
+      </div>
+    </div>
   </body>
 </html>
diff --git a/src/theme/const/main-axis-type.const.ts b/src/theme/const/main-axis-type.const.ts
@@ -0,0 +1,13 @@
+export enum MainAxisType {
+  category = 'category',
+  time = 'time',
+}
+
+export function isMainAxis(axis: { data?: any; type?: MainAxisType | string }) {
+  return (
+    axis &&
+    (axis.data ||
+      (axis.type &&
+        Object.values(MainAxisType).includes(axis.type as MainAxisType)))
+  );
+}
diff --git a/src/theme/ods-chart-theme.ts b/src/theme/ods-chart-theme.ts
@@ -48,6 +48,7 @@ import {
   ODSChartsPopoverDefinition,
   ODSChartsPopoverManagers,
 } from './popover/ods-chart-popover-definitions';
+import { isMainAxis } from './const/main-axis-type.const';
 
 export enum ODSChartsCategoricalColorsSet {
   DEFAULT_SUPPORTING_COLORS = 'supportingColors',
@@ -435,8 +436,8 @@ export class ODSChartsTheme {
     };
     for (const axis of ['xAxis', 'yAxis']) {
       if (
-        (!this.dataOptions[axis] || !this.dataOptions[axis].data) &&
-        !this.dataOptions[axis].axisLine
+        !isMainAxis(this.dataOptions[axis]) &&
+        !(this.dataOptions[axis] && this.dataOptions[axis].axisLine)
       ) {
         themeOptions[axis].axisLine = { show: false };
         themeOptions[axis].splitLine = { show: false };

diff --git a/src/theme/popover/ods-chart-popover.ts b/src/theme/popover/ods-chart-popover.ts
@@ -25,6 +25,7 @@ import {
 } from '../legends/ods-chart-legends';
 import { cloneDeepObject } from '../../tools/clone-deep-object';
 import { ODSChartsMode } from '../ods-chart-theme';
+import { isMainAxis } from '../const/main-axis-type.const';
 
 const DEFAULT_TEMPLATE_CSS = `
 .ods-charts-popover {
@@ -171,18 +172,7 @@ export class ODSChartsPopover {
 
     if (undefined == tooltipTrigger) {
       for (const axis of ['xAxis', 'yAxis'] as ['xAxis', 'yAxis']) {
-        if (dataOptions[axis] && dataOptions[axis].data) {
-          tooltipTrigger = tooltipTrigger ? (undefined as any) : axis;
-        }
-      }
-    }
-    if (undefined == tooltipTrigger) {
-      for (const axis of ['xAxis', 'yAxis'] as ['xAxis', 'yAxis']) {
-        if (
-          dataOptions[axis] &&
-          ('category' === dataOptions[axis].type ||
-            'time' === dataOptions[axis].type)
-        ) {
+        if (isMainAxis(dataOptions[axis])) {
           tooltipTrigger = tooltipTrigger ? (undefined as any) : axis;
         }
       }