chart date format

packages/api/src/main.js

@@ -44,6 +44,9 @@ function start(argument = null) {
         },
         challenge: true,
         realm: 'DbGate Web App',
+
+        // https://stackoverflow.com/questions/12921658/use-specific-middleware-in-express-for-all-paths-except-a-specific-one
+        // remove: '/.well-known/acme-challenge/',
       })
     );
   }

packages/web/src/charts/DataChart.js

@@ -5,24 +5,76 @@ import randomcolor from 'randomcolor';
 import styled from 'styled-components';
 import useDimensions from '../utility/useDimensions';
 import { useForm } from '../utility/FormProvider';
-import { saturateByTenth } from '../theme/colorUtil';
 import useTheme from '../theme/useTheme';
+import moment from 'moment';
 
 const ChartWrapper = styled.div`
   flex: 1;
   overflow: hidden;
 `;
 
+function getTimeAxis(labels) {
+  const res = [];
+  for (const label of labels) {
+    const parsed = moment(label);
+    if (!parsed.isValid()) return null;
+    const iso = parsed.toISOString();
+    if (iso < '1850-01-01T00:00:00' || iso > '2150-01-01T00:00:00') return null;
+    res.push(parsed);
+  }
+  return res;
+}
+
+function getLabels(labelValues, timeAxis, chartType) {
+  if (!timeAxis) return labelValues;
+  if (chartType === 'line') return timeAxis.map((x) => x.toDate());
+  return timeAxis.map((x) => x.format('D. M. YYYY'));
+}
+
+function getOptions(timeAxis, chartType) {
+  if (timeAxis && chartType === 'line') {
+    return {
+      scales: {
+        xAxes: [
+          {
+            type: 'time',
+            distribution: 'linear',
+
+            time: {
+              tooltipFormat: 'D. M. YYYY HH:mm',
+              displayFormats: {
+                millisecond: 'HH:mm:ss.SSS',
+                second: 'HH:mm:ss',
+                minute: 'HH:mm',
+                hour: 'D.M hA',
+                day: 'D. M.',
+                week: 'D. M. YYYY',
+                month: 'MM-YYYY',
+                quarter: '[Q]Q - YYYY',
+                year: 'YYYY',
+              },
+            },
+          },
+        ],
+      },
+    };
+  }
+  return {};
+}
+
 function createChartData(freeData, labelColumn, dataColumns, colorSeed, chartType, dataColumnColors, theme) {
-  if (!freeData || !labelColumn || !dataColumns || dataColumns.length == 0) return {};
+  if (!freeData || !labelColumn || !dataColumns || dataColumns.length == 0) return [{}, {}];
   const colors = randomcolor({
     count: _.max([freeData.rows.length, dataColumns.length, 1]),
     seed: colorSeed,
   });
   let backgroundColor = null;
   let borderColor = null;
+  const labelValues = freeData.rows.map((x) => x[labelColumn]);
+  const timeAxis = getTimeAxis(labelValues);
+  const labels = getLabels(labelValues, timeAxis, chartType);
   const res = {
-    labels: freeData.rows.map((x) => x[labelColumn]),
+    labels,
     datasets: dataColumns.map((dataColumn, columnIndex) => {
       if (chartType == 'line' || chartType == 'bar') {
         const color = dataColumnColors[dataColumn];
@@ -47,7 +99,8 @@ function createChartData(freeData, labelColumn, dataColumns, colorSeed, chartTyp
     }),
   };
 
-  return res;
+  const options = getOptions(timeAxis, chartType);
+  return [res, options];
 }
 
 export function extractDataColumns(values) {
@@ -76,14 +129,7 @@ export default function DataChart({ data }) {
   const { labelColumn } = values;
   const dataColumns = extractDataColumns(values);
   const dataColumnColors = extractDataColumnColors(values, dataColumns);
-
+  const [chartData, options] = createChartData(
-  return (
-    <ChartWrapper ref={containerRef}>
-      <Chart
-        key={`${values.chartType}|${containerWidth}|${containerHeight}`}
-        width={containerWidth}
-        height={containerHeight}
-        data={createChartData(
     data,
     labelColumn,
     dataColumns,
@@ -91,8 +137,28 @@ export default function DataChart({ data }) {
     values.chartType,
     dataColumnColors,
     theme
-        )}
+  );
+
+  return (
+    <ChartWrapper ref={containerRef}>
+      <Chart
+        key={`${values.chartType}|${containerWidth}|${containerHeight}`}
+        width={containerWidth}
+        height={containerHeight}
+        data={chartData}
         type={values.chartType}
+        options={{
+          ...options,
+          // elements: {
+          //   point: {
+          //     radius: 0,
+          //   },
+          // },
+          // tooltips: {
+          //   mode: 'index',
+          //   intersect: false,
+          // },
+        }}
       />
     </ChartWrapper>
   );