chart enhancements

packages/web/src/charts/ChartCore.svelte

@@ -16,10 +16,13 @@
     chart = new Chart(domChart, {
       type,
       data,
-      options,
+      options: {
+        ...options,
         plugins,
+      },
     });
   });
+
   afterUpdate(() => {
     if (!chart) return;
     chart.data = data;

packages/web/src/charts/ChartEditor.svelte

@@ -101,7 +101,7 @@
                 { value: 'polarArea', label: 'Polar area' },
               ]}
             />
-            <FormTextField label="Color set" name="colorSeed" />
+            <FormTextField label="Chart title" name="chartTitle" />
             <FormSelectField
               label="Truncate from"
               name="truncateFrom"
@@ -113,6 +113,10 @@
             />
             <FormTextField label="Truncate limit" name="truncateLimit" />
             <FormCheckboxField label="Show relative values" name="showRelativeValues" />
+            {#if $configStore.chartType == 'line'}
+              <FormCheckboxField label="Fill" name="fillLineChart" defaultValue={true} />
+            {/if}
+            <FormTextField label="Color set" name="colorSeed" />
           </ManagerInnerContainer>
         </WidgetColumnBarItem>
         <WidgetColumnBarItem title="Data" name="data">
@@ -138,6 +142,7 @@
                     ..._.keys(presetPrimaryColors).map(color => ({ value: color, label: _.startCase(color) })),
                   ]}
                 />
+                <FormTextField label="Label" name={`dataColumnLabel_${col}`} />
               {/if}
             {/each}
           </ManagerInnerContainer>

packages/web/src/charts/DataChart.svelte

@@ -18,9 +18,11 @@
   }
 
   function getOptions(timeAxis, chartType) {
+    const res = {
+      scales: {},
+    };
     if (timeAxis && chartType === 'line') {
-      return {
+      res.scales = {
-        scales: {
         xAxes: [
           {
             type: 'time',
@@ -42,13 +44,34 @@
             },
           },
         ],
-        },
       };
     }
-    return {};
+    return res;
   }
 
-  function createChartData(freeData, labelColumn, dataColumns, colorSeed, chartType, dataColumnColors, themeDef) {
+  function getPlugins(chartTitle) {
+    const res = {};
+    if (chartTitle) {
+      res['title'] = {
+        display: true,
+        text: chartTitle,
+      };
+    }
+    return res;
+  }
+
+  function createChartData(
+    freeData,
+    labelColumn,
+    dataColumns,
+    colorSeed,
+    chartType,
+    chartTitle,
+    fillLineChart,
+    dataColumnColors,
+    dataColumnLabels,
+    themeDef
+  ) {
     if (!freeData || !labelColumn || !dataColumns || !freeData.rows || dataColumns.length == 0) return null;
     const palettes = themeDef?.themeType == 'dark' ? presetDarkPalettes : presetPalettes;
     const colors = randomcolor({
@@ -63,6 +86,7 @@
     const res = {
       labels,
       datasets: dataColumns.map((dataColumn, columnIndex) => {
+        const label = dataColumnLabels[dataColumn];
         if (chartType == 'line' || chartType == 'bar') {
           const color = dataColumnColors[dataColumn];
           if (color) {
@@ -77,17 +101,23 @@
         }
 
         return {
-          label: dataColumn,
+          label: label || dataColumn,
           data: freeData.rows.map(row => row[dataColumn]),
           backgroundColor,
           borderColor,
           borderWidth: 1,
+          fill: fillLineChart == false ? false : true,
         };
       }),
     };
 
     const options = getOptions(timeAxis, chartType);
-    return [res, options];
+    const plugins = getPlugins(chartTitle);
+
+    // console.log('RES', res);
+    // console.log('OPTIONS', options);
+
+    return [res, options, plugins];
   }
 </script>
 
@@ -98,7 +128,7 @@
   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';
+  import { extractDataColumnColors, extractDataColumnLabels, extractDataColumns } from './chartDataLoader';
   import { currentThemeDefinition } from '../stores';
 
   export let data;
@@ -111,6 +141,7 @@
 
   $: dataColumns = extractDataColumns($values);
   $: dataColumnColors = extractDataColumnColors($values, dataColumns);
+  $: dataColumnLabels = extractDataColumnLabels($values, dataColumns);
 
   $: chartData = createChartData(
     data,
@@ -118,7 +149,10 @@
     dataColumns,
     $values.colorSeed || '5',
     $values.chartType,
+    $values.chartTitle,
+    $values.fillLineChart,
     dataColumnColors,
+    dataColumnLabels,
     $currentThemeDefinition
   );
 </script>
@@ -132,6 +166,7 @@
         data={chartData[0]}
         type={$values.chartType}
         options={chartData[1]}
+        plugins={chartData[2]}
         {menu}
       />
     {/key}

packages/web/src/charts/chartDataLoader.ts

@@ -120,3 +120,12 @@ export function extractDataColumnColors(values, dataColumns) {
   }
   return res;
 }
+
+export function extractDataColumnLabels(values, dataColumns) {
+  const res = {};
+  for (const column of dataColumns) {
+    const label = values[`dataColumnLabel_${column}`];
+    if (label) res[column] = label;
+  }
+  return res;
+}