chart initial import

packages/web/src/charts/DataChart.svelte

@@ -0,0 +1,137 @@
+<script lang="ts" context="module">
+  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) {
+    if (!freeData || !labelColumn || !dataColumns || !freeData.rows || 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,
+      datasets: dataColumns.map((dataColumn, columnIndex) => {
+        if (chartType == 'line' || chartType == 'bar') {
+          const color = dataColumnColors[dataColumn];
+          if (color) {
+            backgroundColor = presetPalettes[color][4] + '80';
+            borderColor = presetPalettes[color][7];
+          } else {
+            backgroundColor = colors[columnIndex] + '80';
+            borderColor = colors[columnIndex];
+          }
+        } else {
+          backgroundColor = colors;
+        }
+
+        return {
+          label: dataColumn,
+          data: freeData.rows.map(row => row[dataColumn]),
+          backgroundColor,
+          borderColor,
+          borderWidth: 1,
+        };
+      }),
+    };
+
+    const options = getOptions(timeAxis, chartType);
+    return [res, options];
+  }
+</script>
+
+<script lang="ts">
+  import _ from 'lodash';
+  import randomcolor from 'randomcolor';
+  import moment from 'moment';
+  import ChartCore from './ChartCore.svelte';
+  import { getFormContext } from '../forms/FormProviderCore.svelte';
+  import { generate, presetPalettes, presetDarkPalettes, presetPrimaryColors } from '@ant-design/colors';
+  import { extractDataColumnColors, extractDataColumns } from './chartDataLoader';
+
+  export let data;
+
+  const { values } = getFormContext();
+
+  let clientWidth;
+  let clientHeight;
+
+  $: dataColumns = extractDataColumns(values);
+  $: dataColumnColors = extractDataColumnColors(values, dataColumns);
+
+  $: chartData = createChartData(
+    data,
+    $values.labelColumn,
+    dataColumns,
+    $values.colorSeed || '5',
+    $values.chartType,
+    dataColumnColors
+  );
+</script>
+
+<div class="wrapper" bind:clientWidth bind:clientHeight>
+  <ChartCore
+    width={clientWidth}
+    height={clientHeight}
+    data={chartData[0]}
+    type={$values.chartType}
+    options={chartData[1]}
+  />
+</div>
+
+<style>
+  .wrapper {
+    flex: 1;
+    overflow: hidden;
+  }
+</style>